39:T2fec,

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item"
import { Button } from "@/components/ui/button"

const Demo = () => (
  <ItemGroup className="w-full max-w-480">
    <Item variant="muted">
      <ItemMedia variant="icon">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
        >
          <circle cx="12" cy="12" r="8" />
        </svg>
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Basic item</ItemTitle>
        <ItemDescription>A muted item with media and actions.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="outline" size="sm">
          Action
        </Button>
      </ItemActions>
    </Item>
    <ItemSeparator />
    <Item variant="outline" size="sm" render={<a href="#" />}>
      <ItemContent>
        <ItemTitle>Link item</ItemTitle>
      </ItemContent>
    </Item>
  </ItemGroup>
)

export default Demo

36:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$39"}}],"$L3a"]}] 3b:T99e4,

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"

const ItemGroup = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    role="list"
    data-slot="item-group"
    className={cn("group/item-group flex w-full flex-col gap-4", className)}
    {...props}
  />
)

const ItemSeparator = ({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) => (
  <Separator
    data-slot="item-separator"
    orientation="horizontal"
    className={cn("my-4", className)}
    {...props}
  />
)

const itemVariants = cva(
  "group/item flex w-full flex-wrap items-center gap-12 rounded-16 text-left transition-colors ease-out outline-none focus-visible:ring-4 focus-visible:ring-blue-60/50 [a]:cursor-pointer [a]:hover:bg-background-primary-hover",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline: "shadow-inset-1 shadow-border-tertiary",
        muted:
          "bg-glass-background-surface shadow-glass-surface backdrop-glass",
      },
      size: {
        default: "p-16",
        sm: "px-12 py-8",
      },
    },
    defaultVariants: { variant: "default", size: "default" },
  }
)

const Item = ({
  className,
  variant = "default",
  size = "default",
  render,
  ...props
}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) =>
  useRender({
    defaultTagName: "div",
    props: mergeProps<"div">(
      { className: cn(itemVariants({ variant, size, className })) },
      props
    ),
    render,
    state: { slot: "item", variant, size },
  })

const ItemMedia = ({
  className,
  variant = "default",
  ...props
}: React.ComponentProps<"div"> & {
  variant?: "default" | "icon" | "image"
}) => (
  <div
    data-slot="item-media"
    data-variant={variant}
    className={cn(
      "flex shrink-0 items-center justify-center self-start [&_svg]:pointer-events-none",
      variant === "icon" &&
        "size-36 rounded-12 bg-background-tertiary text-text-secondary [&_svg]:size-16",
      variant === "image" &&
        "size-40 overflow-hidden rounded-12 [&_img]:size-full [&_img]:object-cover",
      className
    )}
    {...props}
  />
)

const ItemContent = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="item-content"
    className={cn(
      "flex min-w-0 flex-1 flex-col gap-4 [&+[data-slot=item-content]]:flex-none",
      className
    )}
    {...props}
  />
)

const ItemTitle = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="item-title"
    className={cn(
      "line-clamp-1 flex w-fit items-center text-body-bold",
      className
    )}
    {...props}
  />
)

const ItemDescription = ({
  className,
  ...props
}: React.ComponentProps<"p">) => (
  <p
    data-slot="item-description"
    className={cn(
      "line-clamp-2 text-compact text-text-secondary [&>a]:underline",
      className
    )}
    {...props}
  />
)

const ItemActions = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="item-actions"
    className={cn("flex items-center gap-8", className)}
    {...props}
  />
)

const ItemHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="item-header"
    className={cn(
      "flex basis-full items-center justify-between gap-8",
      className
    )}
    {...props}
  />
)

const ItemFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="item-footer"
    className={cn(
      "flex basis-full items-center justify-between gap-8",
      className
    )}
    {...props}
  />
)

export {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemGroup,
  ItemHeader,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
}

38:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3b"}}],"$L3c"]}]

Installation

Usage