@arolariu/components 0.5.0 → 1.0.0

package/dist/components/ui/item.js

@@ -1,122 +1,98 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import "react";
+import { cloneElement, forwardRef, isValidElement } from "react";
 import { Separator } from "./separator.js";
 import { cn } from "../../lib/utilities.js";
-function ItemGroup({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+import item_module from "./item.module.js";
+const ItemGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         role: "list",
         "data-slot": "item-group",
-        className: cn("group/item-group flex flex-col", className),
+        className: cn(item_module.group, className),
         ...props
-    });
-}
-function ItemSeparator({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Separator, {
+    }));
+const ItemSeparator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator, {
+        ref: ref,
         "data-slot": "item-separator",
         orientation: "horizontal",
-        className: cn("my-0", className),
+        className: cn(item_module.separator, className),
         ...props
-    });
-}
-const itemVariants = cva("group/item [a]:hover:bg-neutral-100/50 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-neutral-200 border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px] dark:[a]:hover:bg-neutral-800/50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:border-neutral-800", {
-    variants: {
-        variant: {
-            default: "bg-transparent",
-            outline: "border-neutral-200 dark:border-neutral-800",
-            muted: "bg-neutral-100/50 dark:bg-neutral-800/50"
-        },
-        size: {
-            default: "gap-4 p-4",
-            sm: "gap-2.5 px-4 py-3"
-        }
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default"
+    }));
+const Item = /*#__PURE__*/ forwardRef(({ className, variant = "default", size = "default", asChild = false, children, ...props }, ref)=>{
+    const mergedClassName = cn(item_module.item, "outline" === variant && item_module.outline, "muted" === variant && item_module.muted, "sm" === size ? item_module.sizeSm : item_module.sizeDefault, className);
+    if (asChild && /*#__PURE__*/ isValidElement(children)) {
+        const child = children;
+        return /*#__PURE__*/ cloneElement(child, {
+            ...props,
+            ref,
+            "data-size": size,
+            "data-slot": "item",
+            "data-variant": variant,
+            className: cn(mergedClassName, child.props.className)
+        });
     }
-});
-function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
-    const Comp = asChild ? Slot : "div";
-    return /*#__PURE__*/ jsx(Comp, {
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "item",
-        "data-variant": variant,
         "data-size": size,
-        className: cn(itemVariants({
-            variant,
-            size,
-            className
-        })),
-        ...props
+        "data-variant": variant,
+        className: mergedClassName,
+        ...props,
+        children: children
     });
-}
-const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", {
-    variants: {
-        variant: {
-            default: "bg-transparent",
-            icon: "bg-neutral-100 size-8 rounded-sm border border-neutral-200 [&_svg:not([class*='size-'])]:size-4 dark:bg-neutral-800 dark:border-neutral-800",
-            image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
-        }
-    },
-    defaultVariants: {
-        variant: "default"
-    }
 });
-function ItemMedia({ className, variant = "default", ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+const ItemMedia = /*#__PURE__*/ forwardRef(({ className, variant = "default", ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "item-media",
         "data-variant": variant,
-        className: cn(itemMediaVariants({
-            variant,
-            className
-        })),
+        className: cn(item_module.media, "icon" === variant && item_module.mediaIcon, "image" === variant && item_module.mediaImage, className),
         ...props
-    });
-}
-function ItemContent({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const ItemContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "item-content",
-        className: cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+        className: cn(item_module.content, className),
         ...props
-    });
-}
-function ItemTitle({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const ItemTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "item-title",
-        className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className),
+        className: cn(item_module.title, className),
         ...props
-    });
-}
-function ItemDescription({ className, ...props }) {
-    return /*#__PURE__*/ jsx("p", {
+    }));
+const ItemDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("p", {
+        ref: ref,
         "data-slot": "item-description",
-        className: cn("line-clamp-2 text-sm leading-normal font-normal text-balance text-neutral-500 dark:text-neutral-400", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50", className),
+        className: cn(item_module.description, className),
         ...props
-    });
-}
-function ItemActions({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const ItemActions = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "item-actions",
-        className: cn("flex items-center gap-2", className),
+        className: cn(item_module.actions, className),
         ...props
-    });
-}
-function ItemHeader({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const ItemHeader = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "item-header",
-        className: cn("flex basis-full items-center justify-between gap-2", className),
+        className: cn(item_module.header, className),
         ...props
-    });
-}
-function ItemFooter({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const ItemFooter = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "item-footer",
-        className: cn("flex basis-full items-center justify-between gap-2", className),
+        className: cn(item_module.footer, className),
         ...props
-    });
-}
+    }));
+ItemGroup.displayName = "ItemGroup";
+ItemSeparator.displayName = "ItemSeparator";
+Item.displayName = "Item";
+ItemMedia.displayName = "ItemMedia";
+ItemContent.displayName = "ItemContent";
+ItemTitle.displayName = "ItemTitle";
+ItemDescription.displayName = "ItemDescription";
+ItemActions.displayName = "ItemActions";
+ItemHeader.displayName = "ItemHeader";
+ItemFooter.displayName = "ItemFooter";
 export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
 
 //# sourceMappingURL=item.js.map

package/dist/components/ui/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/item.js","sources":["../../../src/components/ui/item.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction ItemGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      role='list'\r\n      data-slot='item-group'\r\n      className={cn(\"group/item-group flex flex-col\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemSeparator({className, ...props}: React.ComponentProps<typeof Separator>) {\r\n  return (\r\n    <Separator\r\n      data-slot='item-separator'\r\n      orientation='horizontal'\r\n      className={cn(\"my-0\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst itemVariants = cva(\r\n  \"group/item [a]:hover:bg-neutral-100/50 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-neutral-200 border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px] dark:[a]:hover:bg-neutral-800/50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:border-neutral-800\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-transparent\",\r\n        outline: \"border-neutral-200 dark:border-neutral-800\",\r\n        muted: \"bg-neutral-100/50 dark:bg-neutral-800/50\",\r\n      },\r\n      size: {\r\n        default: \"gap-4 p-4\",\r\n        sm: \"gap-2.5 px-4 py-3\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction Item({\r\n  className,\r\n  variant = \"default\",\r\n  size = \"default\",\r\n  asChild = false,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & {asChild?: boolean}) {\r\n  const Comp = asChild ? Slot : \"div\";\r\n  return (\r\n    <Comp\r\n      data-slot='item'\r\n      data-variant={variant}\r\n      data-size={size}\r\n      className={cn(itemVariants({variant, size, className}))}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst itemMediaVariants = cva(\r\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-transparent\",\r\n        icon: \"bg-neutral-100 size-8 rounded-sm border border-neutral-200 [&_svg:not([class*='size-'])]:size-4 dark:bg-neutral-800 dark:border-neutral-800\",\r\n        image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction ItemMedia({className, variant = \"default\", ...props}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\r\n  return (\r\n    <div\r\n      data-slot='item-media'\r\n      data-variant={variant}\r\n      className={cn(itemMediaVariants({variant, className}))}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemContent({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-content'\r\n      className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemTitle({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-title'\r\n      className={cn(\"flex w-fit items-center gap-2 text-sm leading-snug font-medium\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemDescription({className, ...props}: React.ComponentProps<\"p\">) {\r\n  return (\r\n    <p\r\n      data-slot='item-description'\r\n      className={cn(\r\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-neutral-500 dark:text-neutral-400\",\r\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemActions({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-actions'\r\n      className={cn(\"flex items-center gap-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemHeader({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-header'\r\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ItemFooter({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='item-footer'\r\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle};\r\n"],"names":["ItemGroup","className","props","cn","ItemSeparator","Separator","itemVariants","cva","Item","variant","size","asChild","Comp","Slot","itemMediaVariants","ItemMedia","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"mappings":";;;;;;;AASA,SAASA,UAAU,EAACC,SAAS,EAAE,GAAGC,OAAmC;IACnE,OAAO,WAAP,GACE,IAAC;QACC,MAAK;QACL,aAAU;QACV,WAAWC,GAAG,kCAAkCF;QAC/C,GAAGC,KAAK;;AAGf;AAEA,SAASE,cAAc,EAACH,SAAS,EAAE,GAAGC,OAA8C;IAClF,OAAO,WAAP,GACE,IAACG,WAASA;QACR,aAAU;QACV,aAAY;QACZ,WAAWF,GAAG,QAAQF;QACrB,GAAGC,KAAK;;AAGf;AAEA,MAAMI,eAAeC,IACnB,0aACA;IACE,UAAU;QACR,SAAS;YACP,SAAS;YACT,SAAS;YACT,OAAO;QACT;QACA,MAAM;YACJ,SAAS;YACT,IAAI;QACN;IACF;IACA,iBAAiB;QACf,SAAS;QACT,MAAM;IACR;AACF;AAGF,SAASC,KAAK,EACZP,SAAS,EACTQ,UAAU,SAAS,EACnBC,OAAO,SAAS,EAChBC,UAAU,KAAK,EACf,GAAGT,OACmF;IACtF,MAAMU,OAAOD,UAAUE,OAAO;IAC9B,OAAO,WAAP,GACE,IAACD,MAAAA;QACC,aAAU;QACV,gBAAcH;QACd,aAAWC;QACX,WAAWP,GAAGG,aAAa;YAACG;YAASC;YAAMT;QAAS;QACnD,GAAGC,KAAK;;AAGf;AAEA,MAAMY,oBAAoBP,IACxB,sMACA;IACE,UAAU;QACR,SAAS;YACP,SAAS;YACT,MAAM;YACN,OAAO;QACT;IACF;IACA,iBAAiB;QACf,SAAS;IACX;AACF;AAGF,SAASQ,UAAU,EAACd,SAAS,EAAEQ,UAAU,SAAS,EAAE,GAAGP,OAA4E;IACjI,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,gBAAcO;QACd,WAAWN,GAAGW,kBAAkB;YAACL;YAASR;QAAS;QAClD,GAAGC,KAAK;;AAGf;AAEA,SAASc,YAAY,EAACf,SAAS,EAAE,GAAGC,OAAmC;IACrE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,qEAAqEF;QAClF,GAAGC,KAAK;;AAGf;AAEA,SAASe,UAAU,EAAChB,SAAS,EAAE,GAAGC,OAAmC;IACnE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,kEAAkEF;QAC/E,GAAGC,KAAK;;AAGf;AAEA,SAASgB,gBAAgB,EAACjB,SAAS,EAAE,GAAGC,OAAiC;IACvE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GACT,uGACA,0GACAF;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASiB,YAAY,EAAClB,SAAS,EAAE,GAAGC,OAAmC;IACrE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,2BAA2BF;QACxC,GAAGC,KAAK;;AAGf;AAEA,SAASkB,WAAW,EAACnB,SAAS,EAAE,GAAGC,OAAmC;IACpE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,sDAAsDF;QACnE,GAAGC,KAAK;;AAGf;AAEA,SAASmB,WAAW,EAACpB,SAAS,EAAE,GAAGC,OAAmC;IACpE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,sDAAsDF;QACnE,GAAGC,KAAK;;AAGf"}
+{"version":3,"file":"components/ui/item.js","sources":["../../../src/components/ui/item.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./item.module.css\";\r\n\r\n/** Supported surface variants for {@link Item}. */\r\nexport type ItemVariant = \"default\" | \"outline\" | \"muted\";\r\n\r\n/** Supported size variants for {@link Item}. */\r\nexport type ItemSize = \"default\" | \"sm\";\r\n\r\n/** Supported media treatments for {@link ItemMedia}. */\r\nexport type ItemMediaVariant = \"default\" | \"icon\" | \"image\";\r\n\r\ntype ItemDataAttributes = Record<`data-${string}`, string | boolean | undefined>;\r\n\r\n/**\r\n * Props for the {@link ItemGroup} component.\r\n */\r\nexport type ItemGroupProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link ItemSeparator} component.\r\n */\r\nexport type ItemSeparatorProps = React.ComponentPropsWithoutRef<typeof Separator>;\r\n\r\n/**\r\n * Props for the {@link Item} component.\r\n */\r\nexport interface ItemProps extends React.ComponentPropsWithoutRef<\"div\"> {\r\n  /** Enables rendering an existing div-compatible child element. @default false */\r\n  asChild?: boolean;\r\n  /** Compactness applied to the item container. @default \"default\" */\r\n  size?: ItemSize;\r\n  /** Visual surface treatment for the item container. @default \"default\" */\r\n  variant?: ItemVariant;\r\n}\r\n\r\n/**\r\n * Props for the {@link ItemMedia} component.\r\n */\r\nexport interface ItemMediaProps extends React.ComponentPropsWithoutRef<\"div\"> {\r\n  /** Visual treatment used for the media slot. @default \"default\" */\r\n  variant?: ItemMediaVariant;\r\n}\r\n\r\n/**\r\n * Props for the {@link ItemContent} component.\r\n */\r\nexport type ItemContentProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link ItemTitle} component.\r\n */\r\nexport type ItemTitleProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link ItemDescription} component.\r\n */\r\nexport type ItemDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\r\n\r\n/**\r\n * Props for the {@link ItemActions} component.\r\n */\r\nexport type ItemActionsProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link ItemHeader} component.\r\n */\r\nexport type ItemHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link ItemFooter} component.\r\n */\r\nexport type ItemFooterProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Groups a collection of list-like items with consistent spacing.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemGroup>\r\n *   <Item />\r\n * </ItemGroup>\r\n * ```\r\n *\r\n * @see {@link ItemGroupProps} for available props\r\n */\r\nconst ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(\r\n  ({className, ...props}: Readonly<ItemGroupProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      role='list'\r\n      data-slot='item-group'\r\n      className={cn(styles.group, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Inserts a separator between adjacent items.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a wrapped `Separator` component\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemSeparator />\r\n * ```\r\n *\r\n * @see {@link ItemSeparatorProps} for available props\r\n */\r\nconst ItemSeparator = React.forwardRef<HTMLDivElement, ItemSeparatorProps>(\r\n  ({className, ...props}: Readonly<ItemSeparatorProps>, ref): React.JSX.Element => (\r\n    <Separator\r\n      ref={ref}\r\n      data-slot='item-separator'\r\n      orientation='horizontal'\r\n      className={cn(styles.separator, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Creates a flexible data-display row with optional media and actions.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element by default\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <Item variant='outline'>Content</Item>\r\n * ```\r\n *\r\n * @see {@link ItemProps} for available props\r\n */\r\nconst Item = React.forwardRef<HTMLDivElement, ItemProps>(\r\n  (\r\n    {className, variant = \"default\", size = \"default\", asChild = false, children, ...props}: Readonly<ItemProps>,\r\n    ref,\r\n  ): React.JSX.Element => {\r\n    const mergedClassName = cn(\r\n      styles.item,\r\n      variant === \"outline\" && styles.outline,\r\n      variant === \"muted\" && styles.muted,\r\n      size === \"sm\" ? styles.sizeSm : styles.sizeDefault,\r\n      className,\r\n    );\r\n\r\n    if (asChild && React.isValidElement(children)) {\r\n      const child = children as React.ReactElement<\r\n        React.ComponentPropsWithoutRef<\"div\"> & ItemDataAttributes & {ref?: React.Ref<HTMLDivElement>}\r\n      >;\r\n\r\n      // eslint-disable-next-line react-x/no-clone-element -- replaces Radix Slot while preserving asChild prop merging\r\n      return React.cloneElement(child, {\r\n        ...props,\r\n        ref,\r\n        \"data-size\": size,\r\n        \"data-slot\": \"item\",\r\n        \"data-variant\": variant,\r\n        className: cn(mergedClassName, child.props.className),\r\n      });\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        data-slot='item'\r\n        data-size={size}\r\n        data-variant={variant}\r\n        className={mergedClassName}\r\n        {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\n/**\r\n * Renders the leading media slot for an item.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemMedia variant='icon'>⭐</ItemMedia>\r\n * ```\r\n *\r\n * @see {@link ItemMediaProps} for available props\r\n */\r\nconst ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(\r\n  ({className, variant = \"default\", ...props}: Readonly<ItemMediaProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='item-media'\r\n      data-variant={variant}\r\n      className={cn(styles.media, variant === \"icon\" && styles.mediaIcon, variant === \"image\" && styles.mediaImage, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Wraps the main textual content for an item.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemContent>Details</ItemContent>\r\n * ```\r\n *\r\n * @see {@link ItemContentProps} for available props\r\n */\r\nconst ItemContent = React.forwardRef<HTMLDivElement, ItemContentProps>(\r\n  ({className, ...props}: Readonly<ItemContentProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='item-content'\r\n      className={cn(styles.content, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Displays the primary title text for an item.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemTitle>Title</ItemTitle>\r\n * ```\r\n *\r\n * @see {@link ItemTitleProps} for available props\r\n */\r\nconst ItemTitle = React.forwardRef<HTMLDivElement, ItemTitleProps>(\r\n  ({className, ...props}: Readonly<ItemTitleProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='item-title'\r\n      className={cn(styles.title, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Displays secondary descriptive content for an item.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<p>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemDescription>Support text</ItemDescription>\r\n * ```\r\n *\r\n * @see {@link ItemDescriptionProps} for available props\r\n */\r\nconst ItemDescription = React.forwardRef<HTMLParagraphElement, ItemDescriptionProps>(\r\n  ({className, ...props}: Readonly<ItemDescriptionProps>, ref): React.JSX.Element => (\r\n    <p\r\n      ref={ref}\r\n      data-slot='item-description'\r\n      className={cn(styles.description, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Hosts action controls aligned to the trailing edge of an item.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemActions>\r\n *   <button type='button'>Edit</button>\r\n * </ItemActions>\r\n * ```\r\n *\r\n * @see {@link ItemActionsProps} for available props\r\n */\r\nconst ItemActions = React.forwardRef<HTMLDivElement, ItemActionsProps>(\r\n  ({className, ...props}: Readonly<ItemActionsProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='item-actions'\r\n      className={cn(styles.actions, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Wraps leading title and description content for an item.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemHeader>\r\n *   <ItemTitle>Profile</ItemTitle>\r\n * </ItemHeader>\r\n * ```\r\n *\r\n * @see {@link ItemHeaderProps} for available props\r\n */\r\nconst ItemHeader = React.forwardRef<HTMLDivElement, ItemHeaderProps>(\r\n  ({className, ...props}: Readonly<ItemHeaderProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='item-header'\r\n      className={cn(styles.header, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Wraps trailing metadata or supplementary content for an item.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ItemFooter>Updated 2m ago</ItemFooter>\r\n * ```\r\n *\r\n * @see {@link ItemFooterProps} for available props\r\n */\r\nconst ItemFooter = React.forwardRef<HTMLDivElement, ItemFooterProps>(\r\n  ({className, ...props}: Readonly<ItemFooterProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='item-footer'\r\n      className={cn(styles.footer, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\nItemGroup.displayName = \"ItemGroup\";\r\nItemSeparator.displayName = \"ItemSeparator\";\r\nItem.displayName = \"Item\";\r\nItemMedia.displayName = \"ItemMedia\";\r\nItemContent.displayName = \"ItemContent\";\r\nItemTitle.displayName = \"ItemTitle\";\r\nItemDescription.displayName = \"ItemDescription\";\r\nItemActions.displayName = \"ItemActions\";\r\nItemHeader.displayName = \"ItemHeader\";\r\nItemFooter.displayName = \"ItemFooter\";\r\n\r\nexport {Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle};\r\n"],"names":["ItemGroup","React","className","props","ref","cn","styles","ItemSeparator","Separator","Item","variant","size","asChild","children","mergedClassName","child","ItemMedia","ItemContent","ItemTitle","ItemDescription","ItemActions","ItemHeader","ItemFooter"],"mappings":"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"}

package/dist/components/ui/item.module.js

@@ -0,0 +1,22 @@
+import "./item_module.css";
+const item_module = {
+    group: "group-WMYa5a",
+    separator: "separator-BhxHIN",
+    item: "item-MzMgs6",
+    outline: "outline-EysiXp",
+    muted: "muted-r2owNU",
+    sizeDefault: "sizeDefault-y_TUfq",
+    sizeSm: "sizeSm-9l2aRe",
+    media: "media-sOuKn5",
+    mediaIcon: "mediaIcon-VX7B7C",
+    mediaImage: "mediaImage-dOqVDZ",
+    content: "content-pZl3CJ",
+    title: "title-oDqHsr",
+    description: "description-OzYbKC",
+    actions: "actions-qAs2eG",
+    footer: "footer-hBQCXO",
+    header: "header-hbwXb_"
+};
+export default item_module;
+
+//# sourceMappingURL=item.module.js.map

package/dist/components/ui/item.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/item.module.js","sources":["../../../src/components/ui/item.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./item_module.css\"\nexport default {\"group\":\"group-WMYa5a\",\"separator\":\"separator-BhxHIN\",\"item\":\"item-MzMgs6\",\"outline\":\"outline-EysiXp\",\"muted\":\"muted-r2owNU\",\"sizeDefault\":\"sizeDefault-y_TUfq\",\"sizeSm\":\"sizeSm-9l2aRe\",\"media\":\"media-sOuKn5\",\"mediaIcon\":\"mediaIcon-VX7B7C\",\"mediaImage\":\"mediaImage-dOqVDZ\",\"content\":\"content-pZl3CJ\",\"title\":\"title-oDqHsr\",\"description\":\"description-OzYbKC\",\"actions\":\"actions-qAs2eG\",\"footer\":\"footer-hBQCXO\",\"header\":\"header-hbwXb_\"};"],"names":[],"mappings":";AAEA,oBAAe;IAAC,OAAQ;IAAe,WAAY;IAAmB,MAAO;IAAc,SAAU;IAAiB,OAAQ;IAAe,aAAc;IAAqB,QAAS;IAAgB,OAAQ;IAAe,WAAY;IAAmB,YAAa;IAAoB,SAAU;IAAiB,OAAQ;IAAe,aAAc;IAAqB,SAAU;IAAiB,QAAS;IAAgB,QAAS;AAAe"}

package/dist/components/ui/item_module.css

@@ -0,0 +1,143 @@
+.group-WMYa5a {
+  flex-direction: column;
+  display: flex;
+}
+
+.separator-BhxHIN {
+  margin: 0 !important;
+}
+
+.item-MzMgs6 {
+  border-radius: var(--ac-radius-md);
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  align-items: center;
+  gap: var(--ac-space-4);
+  transition: border-color var(--ac-transition-fast),background-color var(--ac-transition-fast),box-shadow var(--ac-transition-fast);
+  background-color: #0000;
+  border: 1px solid #0000;
+  outline: none;
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.item-MzMgs6 a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.item-MzMgs6:focus-visible {
+  border-color: var(--ac-ring);
+  box-shadow: 0 0 0 1px var(--ac-ring);
+}
+
+.outline-EysiXp {
+  border-color: var(--ac-border);
+}
+
+.muted-r2owNU {
+  background-color: color-mix(in oklch,var(--ac-muted),transparent 25%);
+}
+
+.sizeDefault-y_TUfq {
+  gap: var(--ac-space-4);
+  padding: var(--ac-space-4);
+}
+
+.sizeSm-9l2aRe {
+  gap: calc(var(--ac-space-2) + .125rem);
+  padding: calc(var(--ac-space-2) + .125rem) var(--ac-space-4);
+}
+
+.media-sOuKn5 {
+  align-items: center;
+  gap: var(--ac-space-2);
+  justify-content: center;
+  display: flex;
+}
+
+.media-sOuKn5, .media-sOuKn5 svg {
+  flex-shrink: 0;
+}
+
+.mediaIcon-VX7B7C {
+  background-color: var(--ac-muted);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-sm);
+  width: 2rem;
+  height: 2rem;
+}
+
+.mediaIcon-VX7B7C svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mediaImage-dOqVDZ {
+  border-radius: var(--ac-radius-sm);
+  width: 2.5rem;
+  height: 2.5rem;
+  overflow: hidden;
+}
+
+.mediaImage-dOqVDZ img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.content-pZl3CJ {
+  gap: var(--ac-space-1);
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.content-pZl3CJ + .content-pZl3CJ {
+  flex: none;
+}
+
+.title-oDqHsr {
+  align-items: center;
+  gap: var(--ac-space-2);
+  width: fit-content;
+  font-weight: 500;
+  line-height: 1.4;
+  display: flex;
+}
+
+.description-OzYbKC, .title-oDqHsr {
+  font-size: var(--ac-text-sm);
+}
+
+.description-OzYbKC {
+  color: var(--ac-muted-foreground);
+  line-height: 1.5;
+}
+
+.description-OzYbKC a {
+  color: inherit;
+  text-underline-offset: 4px;
+  text-decoration: underline;
+}
+
+@media (hover: hover) {
+  .description-OzYbKC a:hover {
+    color: var(--ac-foreground);
+  }
+}
+
+.actions-qAs2eG, .footer-hBQCXO, .header-hbwXb_ {
+  align-items: center;
+  gap: var(--ac-space-2);
+  display: flex;
+}
+
+.footer-hBQCXO, .header-hbwXb_ {
+  flex-basis: 100%;
+  justify-content: space-between;
+}
+
+
+/*# sourceMappingURL=item_module.css.map */

package/dist/components/ui/item_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/item.module.css","webpack://./src/components/ui/item.module.css"],"names":[],"mappings":"AADA;ECEE,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,kCAAkC;EAClC,2BAA2B;EAC3B,4BAA4B;EAC5B,mBAAmB;EACnB,sBAAsB;EACtB,kIAAkI;EAClI,uBAAuB;EACvB,uBAAuB;EACvB,aAAa;EACb,eAAe;EACf,aAAa;AACf;;AAEA;EACE,cAAc;EACd,qBAAqB;AACvB;;AAEA;EACE,4BAA4B;EAC5B,oCAAoC;AACtC;;AAEA;EACE,8BAA8B;AAChC;;AAEA;EACE,qEAAqE;AACvE;;AAEA;EACE,sBAAsB;EACtB,0BAA0B;AAC5B;;AAEA;EACE,sCAAsC;EACtC,4DAA4D;AAC9D;;AAEA;EACE,mBAAmB;EACnB,sBAAsB;EACtB,uBAAuB;EACvB,aAAa;AACf;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,iCAAiC;EACjC,kCAAkC;EAClC,kCAAkC;EAClC,WAAW;EACX,YAAY;AACd;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,kCAAkC;EAClC,aAAa;EACb,cAAc;EACd,gBAAgB;AAClB;;AAEA;EACE,iBAAiB;EACjB,WAAW;EACX,YAAY;AACd;;AAEA;EACE,sBAAsB;EACtB,sBAAsB;EACtB,OAAO;EACP,YAAY;EACZ,aAAa;AACf;;AAEA;EACE,UAAU;AACZ;;AAEA;EACE,mBAAmB;EACnB,sBAAsB;EACtB,kBAAkB;EAClB,gBAAgB;EAChB,gBAAgB;EAChB,aAAa;AACf;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;EACE,iCAAiC;EACjC,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,0BAA0B;EAC1B,0BAA0B;AAC5B;;AAEA;EACE;IACE,2BAA2B;EAC7B;AACF;;AAEA;EACE,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,gBAAgB;EAChB,8BAA8B;AAChC","sourcesContent":[".group{display:flex;flex-direction:column}.separator{margin:0!important}.item{align-items:center;background-color:transparent;border:1px solid transparent;border-radius:var(--ac-radius-md);color:var(--ac-foreground);display:flex;flex-wrap:wrap;font-size:var(--ac-text-sm);gap:var(--ac-space-4);outline:none;transition:border-color var(--ac-transition-fast),background-color var(--ac-transition-fast),box-shadow var(--ac-transition-fast)}.item a{color:inherit;text-decoration:none}.item:focus-visible{border-color:var(--ac-ring);box-shadow:0 0 0 1px var(--ac-ring)}.outline{border-color:var(--ac-border)}.muted{background-color:color-mix(in oklch,var(--ac-muted),transparent 25%)}.sizeDefault{gap:var(--ac-space-4);padding:var(--ac-space-4)}.sizeSm{gap:calc(var(--ac-space-2) + .125rem);padding:calc(var(--ac-space-2) + .125rem) var(--ac-space-4)}.media{align-items:center;display:flex;gap:var(--ac-space-2);justify-content:center}.media,.media svg{flex-shrink:0}.mediaIcon{background-color:var(--ac-muted);border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);height:2rem;width:2rem}.mediaIcon svg{height:1rem;width:1rem}.mediaImage{border-radius:var(--ac-radius-sm);height:2.5rem;overflow:hidden;width:2.5rem}.mediaImage img{height:100%;object-fit:cover;width:100%}.content{display:flex;flex:1 1 0%;flex-direction:column;gap:var(--ac-space-1);min-width:0}.content+.content{flex:none}.title{align-items:center;display:flex;font-weight:500;gap:var(--ac-space-2);line-height:1.4;width:fit-content}.description,.title{font-size:var(--ac-text-sm)}.description{color:var(--ac-muted-foreground);line-height:1.5}.description a{color:inherit;text-decoration:underline;text-underline-offset:4px}@media (hover:hover){.description a:hover{color:var(--ac-foreground)}}.actions,.footer,.header{align-items:center;display:flex;gap:var(--ac-space-2)}.footer,.header{flex-basis:100%;justify-content:space-between}",".group {\n  flex-direction: column;\n  display: flex;\n}\n\n.separator {\n  margin: 0 !important;\n}\n\n.item {\n  border-radius: var(--ac-radius-md);\n  color: var(--ac-foreground);\n  font-size: var(--ac-text-sm);\n  align-items: center;\n  gap: var(--ac-space-4);\n  transition: border-color var(--ac-transition-fast),background-color var(--ac-transition-fast),box-shadow var(--ac-transition-fast);\n  background-color: #0000;\n  border: 1px solid #0000;\n  outline: none;\n  flex-wrap: wrap;\n  display: flex;\n}\n\n.item a {\n  color: inherit;\n  text-decoration: none;\n}\n\n.item:focus-visible {\n  border-color: var(--ac-ring);\n  box-shadow: 0 0 0 1px var(--ac-ring);\n}\n\n.outline {\n  border-color: var(--ac-border);\n}\n\n.muted {\n  background-color: color-mix(in oklch,var(--ac-muted),transparent 25%);\n}\n\n.sizeDefault {\n  gap: var(--ac-space-4);\n  padding: var(--ac-space-4);\n}\n\n.sizeSm {\n  gap: calc(var(--ac-space-2) + .125rem);\n  padding: calc(var(--ac-space-2) + .125rem) var(--ac-space-4);\n}\n\n.media {\n  align-items: center;\n  gap: var(--ac-space-2);\n  justify-content: center;\n  display: flex;\n}\n\n.media, .media svg {\n  flex-shrink: 0;\n}\n\n.mediaIcon {\n  background-color: var(--ac-muted);\n  border: 1px solid var(--ac-border);\n  border-radius: var(--ac-radius-sm);\n  width: 2rem;\n  height: 2rem;\n}\n\n.mediaIcon svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.mediaImage {\n  border-radius: var(--ac-radius-sm);\n  width: 2.5rem;\n  height: 2.5rem;\n  overflow: hidden;\n}\n\n.mediaImage img {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n.content {\n  gap: var(--ac-space-1);\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  display: flex;\n}\n\n.content + .content {\n  flex: none;\n}\n\n.title {\n  align-items: center;\n  gap: var(--ac-space-2);\n  width: fit-content;\n  font-weight: 500;\n  line-height: 1.4;\n  display: flex;\n}\n\n.description, .title {\n  font-size: var(--ac-text-sm);\n}\n\n.description {\n  color: var(--ac-muted-foreground);\n  line-height: 1.5;\n}\n\n.description a {\n  color: inherit;\n  text-underline-offset: 4px;\n  text-decoration: underline;\n}\n\n@media (hover: hover) {\n  .description a:hover {\n    color: var(--ac-foreground);\n  }\n}\n\n.actions, .footer, .header {\n  align-items: center;\n  gap: var(--ac-space-2);\n  display: flex;\n}\n\n.footer, .header {\n  flex-basis: 100%;\n  justify-content: space-between;\n}\n"],"sourceRoot":""}

package/dist/components/ui/kbd.d.ts

@@ -1,5 +1,46 @@
 import * as React from "react";
-declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
-declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the {@link Kbd} component.
+ */
+export type KbdProps = React.ComponentPropsWithoutRef<"kbd">;
+/**
+ * Props for the {@link KbdGroup} component.
+ */
+export type KbdGroupProps = React.ComponentPropsWithoutRef<"kbd">;
+/**
+ * Renders an inline keyboard keycap label.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<kbd>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <Kbd>⌘K</Kbd>
+ * ```
+ *
+ * @see {@link KbdProps} for available props
+ */
+declare const Kbd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+/**
+ * Groups multiple keyboard keycap labels into a shared visual cluster.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<kbd>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <KbdGroup>
+ *   <Kbd>⌘</Kbd>
+ *   <Kbd>K</Kbd>
+ * </KbdGroup>
+ * ```
+ *
+ * @see {@link KbdGroupProps} for available props
+ */
+declare const KbdGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Kbd, KbdGroup };
 //# sourceMappingURL=kbd.d.ts.map

package/dist/components/ui/kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/components/ui/kbd.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,iBAAS,GAAG,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAa9D;AAED,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQnE;AAED,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAC,CAAC"}
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/components/ui/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAElE;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,GAAG,0JASR,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,QAAQ,0JASb,CAAC;AAKF,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAC,CAAC"}

package/dist/components/ui/kbd.js

@@ -1,21 +1,21 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { cn } from "../../lib/utilities.js";
-import "react";
-function Kbd({ className, ...props }) {
-    return /*#__PURE__*/ jsx("kbd", {
+import kbd_module from "./kbd.module.js";
+const Kbd = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("kbd", {
+        ref: ref,
         "data-slot": "kbd",
-        className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-neutral-100 px-1 font-sans text-xs font-medium text-neutral-500 select-none dark:bg-neutral-800 dark:text-neutral-400", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-white/20 [[data-slot=tooltip-content]_&]:text-white dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/20 dark:[[data-slot=tooltip-content]_&]:bg-white/10 dark:dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/10 dark:[[data-slot=tooltip-content]_&]:text-neutral-950", className),
+        className: cn(kbd_module.kbd, className),
         ...props
-    });
-}
-function KbdGroup({ className, ...props }) {
-    return /*#__PURE__*/ jsx("kbd", {
+    }));
+const KbdGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("kbd", {
+        ref: ref,
         "data-slot": "kbd-group",
-        className: cn("inline-flex items-center gap-1", className),
+        className: cn(kbd_module.group, className),
         ...props
-    });
-}
+    }));
+Kbd.displayName = "Kbd";
+KbdGroup.displayName = "KbdGroup";
 export { Kbd, KbdGroup };
 
 //# sourceMappingURL=kbd.js.map

package/dist/components/ui/kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/kbd.js","sources":["../../../src/components/ui/kbd.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport * as React from \"react\";\r\n\r\nfunction Kbd({className, ...props}: React.ComponentProps<\"kbd\">) {\r\n  return (\r\n    <kbd\r\n      data-slot='kbd'\r\n      className={cn(\r\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-neutral-100 px-1 font-sans text-xs font-medium text-neutral-500 select-none dark:bg-neutral-800 dark:text-neutral-400\",\r\n        \"[&_svg:not([class*='size-'])]:size-3\",\r\n        \"[[data-slot=tooltip-content]_&]:bg-white/20 [[data-slot=tooltip-content]_&]:text-white dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/20 dark:[[data-slot=tooltip-content]_&]:bg-white/10 dark:dark:[[data-slot=tooltip-content]_&]:bg-neutral-950/10 dark:[[data-slot=tooltip-content]_&]:text-neutral-950\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction KbdGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <kbd\r\n      data-slot='kbd-group'\r\n      className={cn(\"inline-flex items-center gap-1\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {Kbd, KbdGroup};\r\n"],"names":["Kbd","className","props","cn","KbdGroup"],"mappings":";;;;AAKA,SAASA,IAAI,EAACC,SAAS,EAAE,GAAGC,OAAmC;IAC7D,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GACT,2NACA,wCACA,oTACAF;QAED,GAAGC,KAAK;;AAGf;AAEA,SAASE,SAAS,EAACH,SAAS,EAAE,GAAGC,OAAmC;IAClE,OAAO,WAAP,GACE,IAAC;QACC,aAAU;QACV,WAAWC,GAAG,kCAAkCF;QAC/C,GAAGC,KAAK;;AAGf"}
+{"version":3,"file":"components/ui/kbd.js","sources":["../../../src/components/ui/kbd.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./kbd.module.css\";\r\n\r\n/**\r\n * Props for the {@link Kbd} component.\r\n */\r\nexport type KbdProps = React.ComponentPropsWithoutRef<\"kbd\">;\r\n\r\n/**\r\n * Props for the {@link KbdGroup} component.\r\n */\r\nexport type KbdGroupProps = React.ComponentPropsWithoutRef<\"kbd\">;\r\n\r\n/**\r\n * Renders an inline keyboard keycap label.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<kbd>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <Kbd>⌘K</Kbd>\r\n * ```\r\n *\r\n * @see {@link KbdProps} for available props\r\n */\r\nconst Kbd = React.forwardRef<HTMLElement, KbdProps>(\r\n  ({className, ...props}: Readonly<KbdProps>, ref): React.JSX.Element => (\r\n    <kbd\r\n      ref={ref}\r\n      data-slot='kbd'\r\n      className={cn(styles.kbd, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Groups multiple keyboard keycap labels into a shared visual cluster.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<kbd>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <KbdGroup>\r\n *   <Kbd>⌘</Kbd>\r\n *   <Kbd>K</Kbd>\r\n * </KbdGroup>\r\n * ```\r\n *\r\n * @see {@link KbdGroupProps} for available props\r\n */\r\nconst KbdGroup = React.forwardRef<HTMLElement, KbdGroupProps>(\r\n  ({className, ...props}: Readonly<KbdGroupProps>, ref): React.JSX.Element => (\r\n    <kbd\r\n      ref={ref}\r\n      data-slot='kbd-group'\r\n      className={cn(styles.group, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\nKbd.displayName = \"Kbd\";\r\nKbdGroup.displayName = \"KbdGroup\";\r\n\r\nexport {Kbd, KbdGroup};\r\n"],"names":["Kbd","React","className","props","ref","cn","styles","KbdGroup"],"mappings":";;;;AA8BA,MAAMA,MAAM,WAAHA,GAAGC,WACV,CAAC,EAACC,SAAS,EAAE,GAAGC,OAA0B,EAAEC,MAAAA,WAAAA,GAC1C,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGC,WAAAA,GAAU,EAAEJ;QACzB,GAAGC,KAAK;;AAuBf,MAAMI,WAAW,WAAHA,GAAGN,WACf,CAAC,EAACC,SAAS,EAAE,GAAGC,OAA+B,EAAEC,MAAAA,WAAAA,GAC/C,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGC,WAAAA,KAAY,EAAEJ;QAC3B,GAAGC,KAAK;;AAKfH,IAAI,WAAW,GAAG;AAClBO,SAAS,WAAW,GAAG"}

package/dist/components/ui/kbd.module.js

@@ -0,0 +1,8 @@
+import "./kbd_module.css";
+const kbd_module = {
+    kbd: "kbd-HTqlZL",
+    group: "group-dY862Z"
+};
+export default kbd_module;
+
+//# sourceMappingURL=kbd.module.js.map

package/dist/components/ui/kbd.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/kbd.module.js","sources":["../../../src/components/ui/kbd.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./kbd_module.css\"\nexport default {\"kbd\":\"kbd-HTqlZL\",\"group\":\"group-dY862Z\"};"],"names":[],"mappings":";AAEA,mBAAe;IAAC,KAAM;IAAa,OAAQ;AAAc"}

package/dist/components/ui/kbd_module.css

@@ -0,0 +1,35 @@
+.kbd-HTqlZL {
+  background-color: var(--ac-muted);
+  border: solid var(--ac-border);
+  border-radius: var(--ac-radius-sm);
+  color: var(--ac-muted-foreground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  font-size: var(--ac-text-xs);
+  align-items: center;
+  gap: var(--ac-space-1);
+  height: var(--ac-size-xs);
+  min-width: var(--ac-size-xs);
+  padding: 0 var(--ac-space-1);
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  border-width: 1px 1px 2px;
+  justify-content: center;
+  width: fit-content;
+  font-weight: 600;
+  display: inline-flex;
+}
+
+.kbd-HTqlZL svg {
+  width: .75rem;
+  height: .75rem;
+}
+
+.group-dY862Z {
+  align-items: center;
+  gap: var(--ac-space-1);
+  display: inline-flex;
+}
+
+
+/*# sourceMappingURL=kbd_module.css.map */

package/dist/components/ui/kbd_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/kbd.module.css","webpack://./src/components/ui/kbd.module.css"],"names":[],"mappings":"AADA;ECEE,iCAAiC;EACjC,8BAA8B;EAC9B,kCAAkC;EAClC,iCAAiC;EACjC,2GAA2G;EAC3G,4BAA4B;EAC5B,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EACzB,4BAA4B;EAC5B,4BAA4B;EAC5B,oBAAoB;EACpB,yBAAyB;EACzB,iBAAiB;EACjB,yBAAyB;EACzB,uBAAuB;EACvB,kBAAkB;EAClB,gBAAgB;EAChB,oBAAoB;AACtB;;AAEA;EACE,aAAa;EACb,cAAc;AAChB;;AAEA;EACE,mBAAmB;EACnB,sBAAsB;EACtB,oBAAoB;AACtB","sourcesContent":[".kbd{align-items:center;background-color:var(--ac-muted);border:solid var(--ac-border);border-radius:var(--ac-radius-sm);border-width:1px 1px 2px;color:var(--ac-muted-foreground);display:inline-flex;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:var(--ac-text-xs);font-weight:600;gap:var(--ac-space-1);height:var(--ac-size-xs);justify-content:center;min-width:var(--ac-size-xs);padding:0 var(--ac-space-1);pointer-events:none;user-select:none;width:fit-content}.kbd svg{height:.75rem;width:.75rem}.group{align-items:center;display:inline-flex;gap:var(--ac-space-1)}",".kbd {\n  background-color: var(--ac-muted);\n  border: solid var(--ac-border);\n  border-radius: var(--ac-radius-sm);\n  color: var(--ac-muted-foreground);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: var(--ac-text-xs);\n  align-items: center;\n  gap: var(--ac-space-1);\n  height: var(--ac-size-xs);\n  min-width: var(--ac-size-xs);\n  padding: 0 var(--ac-space-1);\n  pointer-events: none;\n  -webkit-user-select: none;\n  user-select: none;\n  border-width: 1px 1px 2px;\n  justify-content: center;\n  width: fit-content;\n  font-weight: 600;\n  display: inline-flex;\n}\n\n.kbd svg {\n  width: .75rem;\n  height: .75rem;\n}\n\n.group {\n  align-items: center;\n  gap: var(--ac-space-1);\n  display: inline-flex;\n}\n"],"sourceRoot":""}

package/dist/components/ui/label.d.ts

@@ -1,6 +1,33 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * Represents the configurable props for the Label component.
+ *
+ * @remarks
+ * Extends native `<label>` attributes so the component can participate in accessible
+ * form relationships while exposing a documented class override.
+ */
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Additional CSS classes merged with the default label typography.
+     */
+    className?: string;
+}
+/**
+ * An accessible text label for form controls and field groups.
+ *
+ * @remarks
+ * **Rendering Context**: Client Component.
+ *
+ * Renders a styled `<label>` element that pairs naturally with form inputs through
+ * `htmlFor`. Use it to provide clear, clickable context for interactive controls.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email address</Label>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/label Base UI Label docs}
+ */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 export { Label };
 //# sourceMappingURL=label.d.ts.map

package/dist/components/ui/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,KAAK,gPAST,CAAC;AAGH,OAAO,EAAC,KAAK,EAAC,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;GAMG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,KAAK,qFAQT,CAAC;AAGH,OAAO,EAAC,KAAK,EAAC,CAAC"}