Item

1import { cva, type VariantProps } from "class-variance-authority";
2import { adoptStyles, html, LitElement, nothing, unsafeCSS } from "lit";
3import { customElement, property } from "lit/decorators.js";
4import { TW, tailwind } from "@/registry/lib/tailwindMixin";
5import { cn } from "@/registry/lib/utils";
6import itemSlottedCss from "./item.slotted.css?inline";
7 
8/**
9 * Item component variants for styling the main container.
10 */
11export const itemVariants = cva(
12  "flex flex-col gap-4 transition-colors outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13  {
14    variants: {
15      variant: {
16        default: "bg-background hover:bg-accent/50",
17        outline: "border bg-card hover:bg-accent/50",
18        muted: "bg-muted/50 hover:bg-muted text-muted-foreground",
19      },
20      size: {
21        default: "p-4 rounded-lg",
22        sm: "p-3 rounded-md text-sm",
23      },
24    },
25    defaultVariants: {
26      variant: "default",
27      size: "default",
28    },
29  },
30);
31 
32type ItemVariants = VariantProps<typeof itemVariants>;
33 
34export interface ItemProperties {
35  variant?: ItemVariants["variant"];
36  size?: ItemVariants["size"];
37  ariaLabel?: string | null;
38  ariaDescribedby?: string | null;
39  role?: string | null;
40}
41 
42/**
43 * A versatile item component using named slots for flexible content composition.
44 *
45 * @slot header - Optional header content above the main content area
46 * @slot title - Title content (automatically styled via slotted CSS)
47 * @slot description - Description content (automatically styled via slotted CSS)
48 * @slot media - Optional icon/avatar/image area (positioned at the start)
49 * @slot - Default slot for additional content
50 * @slot actions - Optional action buttons/controls (positioned at the end)
51 * @slot footer - Optional footer content below the main content area
52 *
53 * @example Basic usage with named slots
54 * ```html
55 * <ui-item variant="outline">
56 *   <div slot="media" class="size-10 rounded-full bg-muted">CN</div>
57 *   <h3 slot="title">Title</h3>
58 *   <p slot="description">Description text</p>
59 *   <ui-button slot="actions" size="sm">Action</ui-button>
60 * </ui-item>
61 * ```
62 *
63 * @example With header and footer
64 * ```html
65 * <ui-item variant="outline">
66 *   <div slot="header" class="aspect-square w-full rounded-sm bg-muted"></div>
67 *   <h3 slot="title">Title</h3>
68 *   <p slot="description">Description text</p>
69 *   <div slot="footer" class="text-xs text-muted-foreground">Footer text</div>
70 * </ui-item>
71 * ```
72 */
73// … truncated