item

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/item/Item.astro directly.
3/**
4 * @component Item
5 * @title Item
6 * @description A versatile component for displaying any content, combining elements like title, description, media, and actions.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2525-7378&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <div class="flex w-full max-w-md flex-col gap-6">
12 *   <Item variant="outline">
13 *     <ItemContent>
14 *       <ItemTitle>Basic Item</ItemTitle>
15 *       <ItemDescription>A simple item with title and description.</ItemDescription>
16 *     </ItemContent>
17 *     <ItemActions><Button variant="outline" size="sm">Action</Button></ItemActions>
18 *   </Item>
19 * </div>
20 *
21 * @usage
22 *
23 * ```astro nocollapse
24 * ---
25 * import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia } from '@bejamas/ui/components/item';
26 * ---
27 *
28 * <Item variant="outline">
29 *   <ItemContent>
30 *     <ItemTitle>Basic Item</ItemTitle>
31 *     <ItemDescription>A simple item.</ItemDescription>
32 *   </ItemContent>
33 *   <ItemActions>
34 *     <Button variant="outline" size="sm">Action</Button>
35 *   </ItemActions>
36 * </Item>
37 * ```
38 */
39 
40import type { HTMLAttributes } from "astro/types";
41import { cva } from "class-variance-authority";
42import { cn } from "@/lib/utils";
43 
44type ItemRootVariant = "default" | "outline" | "muted";
45type ItemRootSize = "default" | "sm";
46 
47interface Props extends HTMLAttributes<"div"> {
48  variant?: ItemRootVariant;
49  size?: ItemRootSize;
50  class?: string;
51}
52 
53const {
54  class: className = "",
55  variant = "default",
56  size = "default",
57  ...rest
58} = Astro.props as Props;
59 
60const itemVariants = cva(
61  "group/item flex flex-wrap items-center outline-none transition-colors",
62  {
63    variants: {
64      variant: {
65        default: "border-transparent",
66        outline: "border-border",
67        muted: "bg-muted/50 border-transparent",
68      },
69      size: {
70        default: "gap-3.5 px-4 py-3.5",
71        sm: "gap-2.5 px-3 py-2.5",
72      },
73    },
74    defaultVariants: {
75      variant: "default",
76      size: "default",
77    },
78  },
79);
80---
81 
82<div
83  {...rest}
84  data-slot="item"
85  data-variant={variant}
86  data-size={size}
87  class={cn(
88    "[a]:hover:bg-muted rounded-md border text-sm rounded-lg",
89    itemVariants({ variant, size }),
90    className,
91  )}
92>
93  <slot />
94</div>