@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-VZZ3HP7G.js

@@ -0,0 +1,230 @@
+import { Divider } from './chunk-3L5G7VI2.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("group/item-group flex flex-col", className),
+      "data-slot": "item-group",
+      role: "list",
+      ...props
+    }
+  );
+}
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Divider,
+    {
+      className: cn("my-0", className),
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      ...props
+    }
+  );
+}
+var itemVariants = cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-[colors,transform,box-shadow] [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+        active: "bg-[color:var(--sidebar-accent)] text-[color:var(--sidebar-accent-foreground)] font-medium"
+      },
+      size: {
+        sm: "py-3 px-4 gap-2.5 min-h-7",
+        default: "p-4 gap-4 min-h-8",
+        lg: "py-3.5 px-4 gap-3.5 min-h-14"
+      },
+      interactive: {
+        true: "cursor-pointer hover:translate-y-px active:translate-y-0.5 motion-reduce:transform-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      interactive: false
+    }
+  }
+);
+function Item({
+  className,
+  variant,
+  active = false,
+  interactive = false,
+  size = "default",
+  asChild = false,
+  "data-id": dataId,
+  onClick,
+  onFocus,
+  onKeyDown,
+  ...props
+}) {
+  const resolvedVariant = variant ?? (active ? "active" : "default");
+  const isActive = resolvedVariant === "active";
+  const Comp = asChild ? Slot : interactive ? "button" : "div";
+  const createPayload = React.useCallback(
+    () => ({
+      ...dataId ? { id: dataId } : {},
+      active: isActive,
+      timestamp: Date.now()
+    }),
+    [dataId, isActive]
+  );
+  const handleClick = React.useCallback(
+    (event) => {
+      onClick?.(event, createPayload());
+    },
+    [onClick, createPayload]
+  );
+  const handleFocus = React.useCallback(
+    (event) => {
+      onFocus?.(event, createPayload());
+    },
+    [onFocus, createPayload]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event, createPayload());
+    },
+    [onKeyDown, createPayload]
+  );
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "aria-current": isActive && interactive ? "page" : void 0,
+      className: cn(itemVariants({ variant: resolvedVariant, size, interactive, className })),
+      "data-active": isActive || void 0,
+      "data-id": dataId,
+      "data-interactive": interactive ?? void 0,
+      "data-size": size,
+      "data-slot": "item",
+      "data-variant": resolvedVariant,
+      type: interactive && !asChild ? "button" : void 0,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(itemMediaVariants({ variant, className })),
+      "data-slot": "item-media",
+      "data-variant": variant,
+      ...props
+    }
+  );
+}
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      "data-slot": "item-content",
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      ),
+      "data-slot": "item-title",
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      "data-slot": "item-description",
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      "data-slot": "item-actions",
+      ...props
+    }
+  );
+}
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      "data-slot": "item-header",
+      ...props
+    }
+  );
+}
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      "data-slot": "item-footer",
+      ...props
+    }
+  );
+}
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemMediaVariants, itemVariants };
+//# sourceMappingURL=chunk-VZZ3HP7G.js.map
+//# sourceMappingURL=chunk-VZZ3HP7G.js.map

package/dist/chunk-VZZ3HP7G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Item/Item.tsx"],"names":[],"mappings":"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","file":"chunk-VZZ3HP7G.js","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Divider } from \"../../primitives/Divider\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"group/item-group flex flex-col\", className)}\n      data-slot=\"item-group\"\n      role=\"list\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Divider>) {\n  return (\n    <Divider\n      className={cn(\"my-0\", className)}\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex items-center border border-transparent text-sm rounded-md transition-[colors,transform,box-shadow] [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n        active: \"bg-[color:var(--sidebar-accent)] text-[color:var(--sidebar-accent-foreground)] font-medium\",\n      },\n      size: {\n        sm: \"py-3 px-4 gap-2.5 min-h-7\",\n        default: \"p-4 gap-4 min-h-8\",\n        lg: \"py-3.5 px-4 gap-3.5 min-h-14\",\n      },\n      interactive: {\n        true: \"cursor-pointer hover:translate-y-px active:translate-y-0.5 motion-reduce:transform-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      interactive: false,\n    },\n  }\n)\n\nexport interface ItemEventPayload {\n  /** Whether the item is currently in active state */\n  active: boolean\n  /** Reflects the `data-id` prop */\n  id?: string\n  /** Event timestamp (Date.now()) */\n  timestamp: number\n}\n\ninterface ItemProps\n  extends Omit<React.ComponentProps<\"div\">, \"onClick\" | \"onFocus\" | \"onKeyDown\">,\n    VariantProps<typeof itemVariants> {\n  /** Shorthand for `variant=\"active\"`. When both passed, `variant` wins. */\n  active?: boolean\n  asChild?: boolean\n  /** Reflected to `data-id` and to the event payload. */\n  \"data-id\"?: string\n  /** Click handler — receives the event + an ItemEventPayload. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>,\n    payload: ItemEventPayload,\n  ) => void\n  onFocus?: (\n    event: React.FocusEvent<HTMLButtonElement | HTMLDivElement>,\n    payload: ItemEventPayload,\n  ) => void\n  onKeyDown?: (\n    event: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>,\n    payload: ItemEventPayload,\n  ) => void\n}\n\nfunction Item({\n  className,\n  variant,\n  active = false,\n  interactive = false,\n  size = \"default\",\n  asChild = false,\n  \"data-id\": dataId,\n  onClick,\n  onFocus,\n  onKeyDown,\n  ...props\n}: ItemProps) {\n  // active prop is shorthand for variant=\"active\"; explicit variant wins\n  const resolvedVariant = variant ?? (active ? \"active\" : \"default\")\n  const isActive = resolvedVariant === \"active\"\n\n  // Root element selection: asChild > interactive=button > default div\n  // (when asChild, Radix Slot proxies to the child)\n  // Cast to ElementType so the spread of generic props works against any root\n  const Comp = (asChild ? Slot : interactive ? \"button\" : \"div\") as React.ElementType\n\n  const createPayload = React.useCallback(\n    (): ItemEventPayload => ({\n      ...(dataId ? { id: dataId } : {}),\n      active: isActive,\n      timestamp: Date.now(),\n    }),\n    [dataId, isActive],\n  )\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n      onClick?.(event, createPayload())\n    },\n    [onClick, createPayload],\n  )\n\n  const handleFocus = React.useCallback(\n    (event: React.FocusEvent<HTMLButtonElement | HTMLDivElement>) => {\n      onFocus?.(event, createPayload())\n    },\n    [onFocus, createPayload],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n      onKeyDown?.(event, createPayload())\n    },\n    [onKeyDown, createPayload],\n  )\n\n  return (\n    <Comp\n      aria-current={isActive && interactive ? \"page\" : undefined}\n      className={cn(itemVariants({ variant: resolvedVariant, size, interactive, className }))}\n      data-active={isActive || undefined}\n      data-id={dataId}\n      data-interactive={interactive ?? undefined}\n      data-size={size}\n      data-slot=\"item\"\n      data-variant={resolvedVariant}\n      type={interactive && !asChild ? \"button\" : undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      className={cn(itemMediaVariants({ variant, className }))}\n      data-slot=\"item-media\"\n      data-variant={variant}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      data-slot=\"item-content\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium\",\n        className\n      )}\n      data-slot=\"item-title\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      className={cn(\n        \"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      data-slot=\"item-description\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex items-center gap-2\", className)}\n      data-slot=\"item-actions\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      data-slot=\"item-header\"\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      data-slot=\"item-footer\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  itemMediaVariants,\n  ItemSeparator,\n  ItemTitle,\n  itemVariants,\n}\n"]}

package/dist/chunk-W3QUVCRK.js

@@ -0,0 +1,54 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var kbdVariants = cva(
+  [
+    "pointer-events-none inline-flex items-center justify-center align-middle gap-[var(--kbd-root-gap)] font-[number:var(--kbd-root-font-weight)] select-none border border-[color:var(--kbd-root-border-color)]",
+    "[&_svg:not([class*='size-'])]:size-3",
+    "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-[var(--kbd-size-xs-height)] min-w-[var(--kbd-size-xs-min-width)] rounded-[var(--kbd-size-xs-border-radius)] px-[var(--kbd-size-xs-padding-x)] text-[length:var(--kbd-size-xs-font-size)]",
+        sm: "h-[var(--kbd-size-sm-height)] min-w-[var(--kbd-size-sm-min-width)] rounded-[var(--kbd-size-sm-border-radius)] px-[var(--kbd-size-sm-padding-x)] text-[length:var(--kbd-size-sm-font-size)]",
+        md: "h-[var(--kbd-size-md-height)] min-w-[var(--kbd-size-md-min-width)] rounded-[var(--kbd-size-md-border-radius)] px-[var(--kbd-size-md-padding-x)] text-[length:var(--kbd-size-md-font-size)]",
+        lg: "h-[var(--kbd-size-lg-height)] min-w-[var(--kbd-size-lg-min-width)] rounded-[var(--kbd-size-lg-border-radius)] px-[var(--kbd-size-lg-padding-x)] text-[length:var(--kbd-size-lg-font-size)]"
+      },
+      variant: {
+        default: "bg-[color:var(--kbd-variant-default-background)] text-[color:var(--kbd-variant-default-color)]",
+        outline: "bg-[color:var(--kbd-variant-outline-background)] border-[color:var(--kbd-variant-outline-border-color)] text-[color:var(--kbd-variant-outline-color)]",
+        ghost: "bg-[color:var(--kbd-variant-ghost-background)] text-[color:var(--kbd-variant-ghost-color)]"
+      }
+    },
+    defaultVariants: {
+      size: "sm",
+      variant: "default"
+    }
+  }
+);
+function Kbd({ className, size, variant, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: cn(kbdVariants({ size, variant }), className),
+      "data-slot": "kbd",
+      ...props
+    }
+  );
+}
+function KbdGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("inline-flex items-center gap-1", className),
+      "data-slot": "kbd-group",
+      ...props
+    }
+  );
+}
+
+export { Kbd, KbdGroup, kbdVariants };
+//# sourceMappingURL=chunk-W3QUVCRK.js.map
+//# sourceMappingURL=chunk-W3QUVCRK.js.map

package/dist/chunk-W3QUVCRK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Kbd/Kbd.variants.ts","../src/components/primitives/Kbd/Kbd.tsx"],"names":[],"mappings":";;;;AAKO,IAAM,WAAA,GAAc,GAAA;AAAA,EACzB;AAAA,IACE,6MAAA;AAAA,IACA,sCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,4LAAA;AAAA,QACJ,EAAA,EAAI,4LAAA;AAAA,QACJ,EAAA,EAAI,4LAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gGAAA;AAAA,QACT,OAAA,EAAS,uJAAA;AAAA,QACT,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ;ACVA,SAAS,IAAI,EAAE,SAAA,EAAW,MAAM,OAAA,EAAS,GAAG,OAAM,EAAa;AAC7D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,WAAA,CAAY,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MACvD,WAAA,EAAU,KAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAcA,SAAS,QAAA,CAAS,EAAE,SAAA,EAAW,GAAG,OAAM,EAAkB;AACxD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,MACzD,WAAA,EAAU,WAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-W3QUVCRK.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Kbd variants using CVA\n */\nexport const kbdVariants = cva(\n  [\n    \"pointer-events-none inline-flex items-center justify-center align-middle gap-[var(--kbd-root-gap)] font-[number:var(--kbd-root-font-weight)] select-none border border-[color:var(--kbd-root-border-color)]\",\n    \"[&_svg:not([class*='size-'])]:size-3\",\n    \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"h-[var(--kbd-size-xs-height)] min-w-[var(--kbd-size-xs-min-width)] rounded-[var(--kbd-size-xs-border-radius)] px-[var(--kbd-size-xs-padding-x)] text-[length:var(--kbd-size-xs-font-size)]\",\n        sm: \"h-[var(--kbd-size-sm-height)] min-w-[var(--kbd-size-sm-min-width)] rounded-[var(--kbd-size-sm-border-radius)] px-[var(--kbd-size-sm-padding-x)] text-[length:var(--kbd-size-sm-font-size)]\",\n        md: \"h-[var(--kbd-size-md-height)] min-w-[var(--kbd-size-md-min-width)] rounded-[var(--kbd-size-md-border-radius)] px-[var(--kbd-size-md-padding-x)] text-[length:var(--kbd-size-md-font-size)]\",\n        lg: \"h-[var(--kbd-size-lg-height)] min-w-[var(--kbd-size-lg-min-width)] rounded-[var(--kbd-size-lg-border-radius)] px-[var(--kbd-size-lg-padding-x)] text-[length:var(--kbd-size-lg-font-size)]\",\n      },\n      variant: {\n        default: \"bg-[color:var(--kbd-variant-default-background)] text-[color:var(--kbd-variant-default-color)]\",\n        outline: \"bg-[color:var(--kbd-variant-outline-background)] border-[color:var(--kbd-variant-outline-border-color)] text-[color:var(--kbd-variant-outline-color)]\",\n        ghost: \"bg-[color:var(--kbd-variant-ghost-background)] text-[color:var(--kbd-variant-ghost-color)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"sm\",\n      variant: \"default\",\n    },\n  }\n)\n\nexport type KbdVariants = VariantProps<typeof kbdVariants>\n","import type { KbdGroupProps, KbdProps } from \"./Kbd.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { kbdVariants } from \"./Kbd.variants\"\n\n/**\n * Kbd component for displaying keyboard keys and shortcuts.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Kbd>⌘</Kbd>\n *\n * // Different sizes\n * <Kbd size=\"lg\">Enter</Kbd>\n *\n * // Outline variant\n * <Kbd variant=\"outline\">Esc</Kbd>\n * ```\n */\nfunction Kbd({ className, size, variant, ...props }: KbdProps) {\n  return (\n    <kbd\n      className={cn(kbdVariants({ size, variant }), className)}\n      data-slot=\"kbd\"\n      {...props}\n    />\n  )\n}\n\n/**\n * KbdGroup component for grouping keyboard shortcuts.\n *\n * @example\n * ```tsx\n * <KbdGroup>\n *   <Kbd>⌘</Kbd>\n *   <Kbd>Shift</Kbd>\n *   <Kbd>P</Kbd>\n * </KbdGroup>\n * ```\n */\nfunction KbdGroup({ className, ...props }: KbdGroupProps) {\n  return (\n    <span\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      data-slot=\"kbd-group\"\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup, kbdVariants }\n"]}

package/dist/chunk-W4NC5CU5.js

@@ -0,0 +1,175 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { UploadCloudIcon } from 'lucide-react';
+import * as React from 'react';
+import { useDropzone } from 'react-dropzone';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var fileDropzoneVariants = cva(
+  [
+    "flex flex-col items-center justify-center",
+    "border-2 border-dashed rounded-lg",
+    "transition-colors duration-200",
+    "cursor-pointer",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "gap-2 p-8 bg-muted/50 border-muted-foreground/25",
+        compact: "gap-1 p-4 bg-muted/50 border-muted-foreground/25",
+        image: "gap-2 p-8 bg-muted/50 border-muted-foreground/25 aspect-video"
+      },
+      isDragActive: {
+        true: "border-primary bg-primary/5",
+        false: ""
+      },
+      isDragReject: {
+        true: "border-destructive bg-destructive/5",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        isDragActive: false,
+        isDragReject: false,
+        disabled: false,
+        className: "hover:border-primary hover:bg-primary/5"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      isDragActive: false,
+      isDragReject: false,
+      disabled: false
+    }
+  }
+);
+function FileDropzone({
+  accept,
+  children,
+  className,
+  disabled = false,
+  maxFiles,
+  maxSize,
+  minSize,
+  multiple = true,
+  noClick = false,
+  noDrag = false,
+  noKeyboard = false,
+  onDrop,
+  onReject,
+  variant = "default",
+  ...props
+}) {
+  const handleDrop = React.useCallback(
+    (acceptedFiles2, fileRejections2, event) => {
+      onDrop?.(acceptedFiles2, fileRejections2, event);
+      if (fileRejections2.length > 0) {
+        onReject?.(fileRejections2);
+      }
+    },
+    [onDrop, onReject]
+  );
+  const {
+    acceptedFiles,
+    fileRejections,
+    getInputProps,
+    getRootProps,
+    isDragAccept,
+    isDragActive,
+    isDragReject,
+    isFileDialogActive,
+    isFocused,
+    open
+  } = useDropzone({
+    accept,
+    disabled,
+    maxFiles,
+    maxSize,
+    minSize,
+    multiple,
+    noClick,
+    noDrag,
+    noKeyboard,
+    onDrop: handleDrop,
+    ...props
+  });
+  const dropzoneState = {
+    acceptedFiles,
+    fileRejections,
+    isDragAccept,
+    isDragActive,
+    isDragReject,
+    isFileDialogActive,
+    isFocused,
+    open
+  };
+  const renderContent = () => {
+    if (typeof children === "function") {
+      return children(dropzoneState);
+    }
+    if (children) {
+      return children;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        UploadCloudIcon,
+        {
+          className: cn(
+            "size-10 mb-2",
+            isDragActive ? "text-primary" : "text-muted-foreground"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: isDragActive ? isDragReject ? "File type not accepted" : "Drop files here..." : "Drag files here or click to upload" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
+        maxSize !== void 0 && `Max size: ${formatBytes(maxSize)}`,
+        maxSize !== void 0 && maxFiles !== void 0 && " \u2022 ",
+        maxFiles !== void 0 && `Max ${String(maxFiles)} file${maxFiles > 1 ? "s" : ""}`
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getRootProps({
+        className: cn(
+          fileDropzoneVariants({
+            variant,
+            isDragActive,
+            isDragReject,
+            disabled
+          }),
+          className
+        ),
+        "data-slot": "file-dropzone",
+        "data-drag-active": isDragActive,
+        "data-drag-accept": isDragAccept,
+        "data-drag-reject": isDragReject,
+        "data-disabled": disabled,
+        "aria-disabled": disabled
+      }),
+      children: [
+        /* @__PURE__ */ jsx("input", { ...getInputProps(), "data-slot": "file-dropzone-input" }),
+        renderContent()
+      ]
+    }
+  );
+}
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${String(Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)))} ${sizes[i] ?? ""}`;
+}
+FileDropzone.displayName = "FileDropzone";
+
+export { FileDropzone, fileDropzoneVariants };
+//# sourceMappingURL=chunk-W4NC5CU5.js.map
+//# sourceMappingURL=chunk-W4NC5CU5.js.map

package/dist/chunk-W4NC5CU5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/advanced/FileDropzone/FileDropzone.variants.ts","../src/components/advanced/FileDropzone/FileDropzone.tsx"],"names":["acceptedFiles","fileRejections"],"mappings":"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","file":"chunk-W4NC5CU5.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const fileDropzoneVariants = cva(\n  [\n    \"flex flex-col items-center justify-center\",\n    \"border-2 border-dashed rounded-lg\",\n    \"transition-colors duration-200\",\n    \"cursor-pointer\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"gap-2 p-8 bg-muted/50 border-muted-foreground/25\",\n        compact: \"gap-1 p-4 bg-muted/50 border-muted-foreground/25\",\n        image: \"gap-2 p-8 bg-muted/50 border-muted-foreground/25 aspect-video\",\n      },\n      isDragActive: {\n        true: \"border-primary bg-primary/5\",\n        false: \"\",\n      },\n      isDragReject: {\n        true: \"border-destructive bg-destructive/5\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed pointer-events-none\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        isDragActive: false,\n        isDragReject: false,\n        disabled: false,\n        className: \"hover:border-primary hover:bg-primary/5\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      isDragActive: false,\n      isDragReject: false,\n      disabled: false,\n    },\n  }\n)\n","\"use client\"\n\nimport type { FileDropzoneProps } from \"./FileDropzone.types\"\nimport type { DropEvent, FileRejection } from \"react-dropzone\"\n\nimport { UploadCloudIcon } from \"lucide-react\"\nimport * as React from \"react\"\nimport { useDropzone } from \"react-dropzone\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { fileDropzoneVariants } from \"./FileDropzone.variants\"\n\n/**\n * FileDropzone - Drag and drop file upload component\n *\n * A flexible dropzone component built on react-dropzone that provides\n * visual feedback during drag operations and supports file validation.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FileDropzone onDrop={(files) => console.log(files)}>\n *   <p>Drag files here or click to upload</p>\n * </FileDropzone>\n *\n * // With validation\n * <FileDropzone\n *   accept={{ \"image/*\": [\".png\", \".jpg\"] }}\n *   maxSize={5 * 1024 * 1024}\n *   maxFiles={5}\n *   onDrop={(files) => handleFiles(files)}\n *   onReject={(rejections) => handleErrors(rejections)}\n * >\n *   <p>Drop images here (max 5MB each)</p>\n * </FileDropzone>\n *\n * // With render props for custom state handling\n * <FileDropzone onDrop={handleDrop}>\n *   {({ isDragActive, isDragReject }) => (\n *     <div className={isDragActive ? \"bg-blue-50\" : \"\"}>\n *       {isDragReject ? \"Invalid file type\" : \"Drop files here\"}\n *     </div>\n *   )}\n * </FileDropzone>\n * ```\n */\nfunction FileDropzone({\n  accept,\n  children,\n  className,\n  disabled = false,\n  maxFiles,\n  maxSize,\n  minSize,\n  multiple = true,\n  noClick = false,\n  noDrag = false,\n  noKeyboard = false,\n  onDrop,\n  onReject,\n  variant = \"default\",\n  ...props\n}: FileDropzoneProps) {\n  const handleDrop = React.useCallback(\n    (\n      acceptedFiles: File[],\n      fileRejections: FileRejection[],\n      event: DropEvent\n    ) => {\n      onDrop?.(acceptedFiles, fileRejections, event)\n\n      if (fileRejections.length > 0) {\n        onReject?.(fileRejections)\n      }\n    },\n    [onDrop, onReject]\n  )\n\n  const {\n    acceptedFiles,\n    fileRejections,\n    getInputProps,\n    getRootProps,\n    isDragAccept,\n    isDragActive,\n    isDragReject,\n    isFileDialogActive,\n    isFocused,\n    open,\n  } = useDropzone({\n    accept,\n    disabled,\n    maxFiles,\n    maxSize,\n    minSize,\n    multiple,\n    noClick,\n    noDrag,\n    noKeyboard,\n    onDrop: handleDrop,\n    ...props,\n  })\n\n  const dropzoneState = {\n    acceptedFiles,\n    fileRejections,\n    isDragAccept,\n    isDragActive,\n    isDragReject,\n    isFileDialogActive,\n    isFocused,\n    open,\n  }\n\n  const renderContent = () => {\n    if (typeof children === \"function\") {\n      return children(dropzoneState)\n    }\n\n    if (children) {\n      return children\n    }\n\n    // Default content\n    return (\n      <>\n        <UploadCloudIcon\n          className={cn(\n            \"size-10 mb-2\",\n            isDragActive ? \"text-primary\" : \"text-muted-foreground\"\n          )}\n        />\n        <p className=\"text-sm font-medium\">\n          {isDragActive\n            ? isDragReject\n              ? \"File type not accepted\"\n              : \"Drop files here...\"\n            : \"Drag files here or click to upload\"}\n        </p>\n        <p className=\"text-xs text-muted-foreground mt-1\">\n          {maxSize !== undefined && `Max size: ${formatBytes(maxSize)}`}\n          {maxSize !== undefined && maxFiles !== undefined && \" • \"}\n          {maxFiles !== undefined && `Max ${String(maxFiles)} file${maxFiles > 1 ? \"s\" : \"\"}`}\n        </p>\n      </>\n    )\n  }\n\n  return (\n    <div\n      {...getRootProps({\n        className: cn(\n          fileDropzoneVariants({\n            variant,\n            isDragActive,\n            isDragReject,\n            disabled,\n          }),\n          className\n        ),\n        \"data-slot\": \"file-dropzone\",\n        \"data-drag-active\": isDragActive,\n        \"data-drag-accept\": isDragAccept,\n        \"data-drag-reject\": isDragReject,\n        \"data-disabled\": disabled,\n        \"aria-disabled\": disabled,\n      })}\n    >\n      <input {...getInputProps()} data-slot=\"file-dropzone-input\" />\n      {renderContent()}\n    </div>\n  )\n}\n\n/**\n * Format bytes to human readable string\n */\nfunction formatBytes(bytes: number): string {\n  if (bytes === 0) return \"0 B\"\n  const k = 1024\n  const sizes = [\"B\", \"KB\", \"MB\", \"GB\"]\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n  return `${String(Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)))} ${sizes[i] ?? \"\"}`\n}\n\nFileDropzone.displayName = \"FileDropzone\"\n\nexport { FileDropzone }\n"]}