@etus/ui 0.4.0-beta.2 → 0.4.0-beta.21

package/dist/chunk-L2XR5IFJ.js

@@ -0,0 +1,103 @@
+import { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+// src/components/advanced/Portal/Portal.tsx
+var emptySubscribe = () => () => {
+};
+var getClientSnapshot = () => true;
+var getServerSnapshot = () => false;
+function Portal({ children, container, disabled = false }) {
+  const mounted = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
+  if (disabled) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (!mounted) {
+    return null;
+  }
+  const portalContainer = container ?? globalThis.document.body;
+  return createPortal(children, portalContainer);
+}
+var portalContainerVariants = cva(
+  "",
+  {
+    variants: {
+      position: {
+        fixed: "fixed",
+        absolute: "absolute",
+        relative: "relative"
+      },
+      zIndex: {
+        base: "z-[var(--z-base)]",
+        dropdown: "z-[var(--z-dropdown)]",
+        sticky: "z-[var(--z-sticky)]",
+        modal: "z-[var(--z-modal)]",
+        popover: "z-[var(--z-popover)]",
+        tooltip: "z-[var(--z-tooltip)]",
+        toast: "z-[var(--z-toast)]",
+        overlay: "z-[var(--z-overlay)]",
+        // `max` is intended for "highest possible" use-cases. The token system
+        // tops out at --z-toast (700); use this when nothing semantic fits.
+        max: "z-[var(--z-toast)]"
+      }
+    },
+    defaultVariants: {
+      position: "fixed",
+      zIndex: "modal"
+    }
+  }
+);
+var portalOverlayVariants = cva(
+  "fixed inset-0 transition-opacity",
+  {
+    variants: {
+      variant: {
+        transparent: "bg-transparent",
+        light: "bg-background/80 backdrop-blur-sm",
+        dark: "bg-black/50 backdrop-blur-sm",
+        solid: "bg-background"
+      },
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      variant: "dark",
+      visible: true
+    }
+  }
+);
+var portalContentVariants = cva(
+  "",
+  {
+    variants: {
+      position: {
+        center: "fixed inset-0 flex items-center justify-center",
+        top: "fixed top-0 left-0 right-0",
+        bottom: "fixed bottom-0 left-0 right-0",
+        left: "fixed top-0 left-0 bottom-0",
+        right: "fixed top-0 right-0 bottom-0",
+        "top-right": "fixed top-4 right-4",
+        "top-left": "fixed top-4 left-4",
+        "bottom-right": "fixed bottom-4 right-4",
+        "bottom-left": "fixed bottom-4 left-4"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-2",
+        md: "p-4",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      position: "center",
+      padding: "md"
+    }
+  }
+);
+
+export { Portal, portalContainerVariants, portalContentVariants, portalOverlayVariants };
+//# sourceMappingURL=chunk-L2XR5IFJ.js.map
+//# sourceMappingURL=chunk-L2XR5IFJ.js.map

package/dist/chunk-L2XR5IFJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/advanced/Portal/Portal.tsx","../src/components/advanced/Portal/Portal.variants.ts"],"names":[],"mappings":";;;;;;AASA,IAAM,cAAA,GAAiB,MAAM,MAAM;AAAC,CAAA;AACpC,IAAM,oBAAoB,MAAM,IAAA;AAChC,IAAM,oBAAoB,MAAM,KAAA;AA4ChC,SAAS,OAAO,EAAE,QAAA,EAAU,SAAA,EAAW,QAAA,GAAW,OAAM,EAAgB;AAEtE,EAAA,MAAM,OAAA,GAAU,oBAAA,CAAqB,cAAA,EAAgB,iBAAA,EAAmB,iBAAiB,CAAA;AAGzF,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAGA,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAIA,EAAA,MAAM,eAAA,GAAkB,SAAA,IAAa,UAAA,CAAW,QAAA,CAAS,IAAA;AAEzD,EAAA,OAAO,YAAA,CAAa,UAAU,eAAe,CAAA;AAC/C;ACjEO,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC,EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,KAAA,EAAO,OAAA;AAAA,QACP,QAAA,EAAU,UAAA;AAAA,QACV,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,mBAAA;AAAA,QACN,QAAA,EAAU,uBAAA;AAAA,QACV,MAAA,EAAQ,qBAAA;AAAA,QACR,KAAA,EAAO,oBAAA;AAAA,QACP,OAAA,EAAS,sBAAA;AAAA,QACT,OAAA,EAAS,sBAAA;AAAA,QACT,KAAA,EAAO,oBAAA;AAAA,QACP,OAAA,EAAS,sBAAA;AAAA;AAAA;AAAA,QAGT,GAAA,EAAK;AAAA;AACP,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,OAAA;AAAA,MACV,MAAA,EAAQ;AAAA;AACV;AAEJ;AAMO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,kCAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,WAAA,EAAa,gBAAA;AAAA,QACb,KAAA,EAAO,mCAAA;AAAA,QACP,IAAA,EAAM,8BAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,MAAA;AAAA,MACT,OAAA,EAAS;AAAA;AACX;AAEJ;AAMO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,EAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,MAAA,EAAQ,gDAAA;AAAA,QACR,GAAA,EAAK,4BAAA;AAAA,QACL,MAAA,EAAQ,+BAAA;AAAA,QACR,IAAA,EAAM,6BAAA;AAAA,QACN,KAAA,EAAO,8BAAA;AAAA,QACP,WAAA,EAAa,qBAAA;AAAA,QACb,UAAA,EAAY,oBAAA;AAAA,QACZ,cAAA,EAAgB,wBAAA;AAAA,QAChB,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,KAAA;AAAA,QACN,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,QAAA;AAAA,MACV,OAAA,EAAS;AAAA;AACX;AAEJ","file":"chunk-L2XR5IFJ.js","sourcesContent":["\"use client\"\n\nimport type { PortalProps } from \"./Portal.types\"\n\nimport { useSyncExternalStore } from \"react\"\nimport { createPortal } from \"react-dom\"\n\n// SSR-safe subscription for mounted state\n// eslint-disable-next-line @typescript-eslint/no-empty-function -- required by useSyncExternalStore API\nconst emptySubscribe = () => () => {}\nconst getClientSnapshot = () => true\nconst getServerSnapshot = () => false\n\n/**\n * Portal renders children into a DOM node outside of the parent component hierarchy.\n * Essential for modals, tooltips, dropdowns, and other elements that need to escape\n * the context of overflow or z-index.\n *\n * By default, content is rendered in document.body. A custom container can be specified\n * using the container prop.\n *\n * The Portal preserves React context (Context, events) and handles cleanup automatically.\n *\n * @example Basic usage\n * ```tsx\n * <Portal>\n *   <div className=\"fixed inset-0 bg-black/50 z-50\">\n *     <div className=\"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n *       Modal Content\n *     </div>\n *   </div>\n * </Portal>\n * ```\n *\n * @example With custom container\n * ```tsx\n * const [container, setContainer] = useState<HTMLElement | null>(null)\n *\n * return (\n *   <>\n *     <div ref={setContainer} id=\"custom-portal-container\" />\n *     <Portal container={container}>\n *       <div>Content in custom container</div>\n *     </Portal>\n *   </>\n * )\n * ```\n *\n * @example Disabled (inline rendering)\n * ```tsx\n * <Portal disabled>\n *   <div>This renders inline, not in a portal</div>\n * </Portal>\n * ```\n */\nfunction Portal({ children, container, disabled = false }: PortalProps) {\n  // Use useSyncExternalStore for SSR-safe mounted detection\n  const mounted = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot)\n\n  // When disabled, render children inline (no portal)\n  if (disabled) {\n    return <>{children}</>\n  }\n\n  // SSR: render nothing until mounted on client\n  if (!mounted) {\n    return null\n  }\n\n  // Determine the container element\n  // Priority: container prop > document.body\n  const portalContainer = container ?? globalThis.document.body\n\n  return createPortal(children, portalContainer)\n}\n\nexport { Portal }\n","import { cva } from \"class-variance-authority\"\n\n/**\n * Portal container variants\n *\n * Note: Portal is primarily a utility component that renders children\n * outside the DOM hierarchy. These variants are for optional wrapper\n * styling when needed.\n */\nexport const portalContainerVariants = cva(\n  \"\",\n  {\n    variants: {\n      position: {\n        fixed: \"fixed\",\n        absolute: \"absolute\",\n        relative: \"relative\",\n      },\n      zIndex: {\n        base: \"z-[var(--z-base)]\",\n        dropdown: \"z-[var(--z-dropdown)]\",\n        sticky: \"z-[var(--z-sticky)]\",\n        modal: \"z-[var(--z-modal)]\",\n        popover: \"z-[var(--z-popover)]\",\n        tooltip: \"z-[var(--z-tooltip)]\",\n        toast: \"z-[var(--z-toast)]\",\n        overlay: \"z-[var(--z-overlay)]\",\n        // `max` is intended for \"highest possible\" use-cases. The token system\n        // tops out at --z-toast (700); use this when nothing semantic fits.\n        max: \"z-[var(--z-toast)]\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n      zIndex: \"modal\",\n    },\n  }\n)\n\n/**\n * Portal overlay variants\n * Used for backdrop/overlay styling when portaling modal content\n */\nexport const portalOverlayVariants = cva(\n  \"fixed inset-0 transition-opacity\",\n  {\n    variants: {\n      variant: {\n        transparent: \"bg-transparent\",\n        light: \"bg-background/80 backdrop-blur-sm\",\n        dark: \"bg-black/50 backdrop-blur-sm\",\n        solid: \"bg-background\",\n      },\n      visible: {\n        true: \"opacity-100\",\n        false: \"opacity-0 pointer-events-none\",\n      },\n    },\n    defaultVariants: {\n      variant: \"dark\",\n      visible: true,\n    },\n  }\n)\n\n/**\n * Portal content wrapper variants\n * Used for centering or positioning portaled content\n */\nexport const portalContentVariants = cva(\n  \"\",\n  {\n    variants: {\n      position: {\n        center: \"fixed inset-0 flex items-center justify-center\",\n        top: \"fixed top-0 left-0 right-0\",\n        bottom: \"fixed bottom-0 left-0 right-0\",\n        left: \"fixed top-0 left-0 bottom-0\",\n        right: \"fixed top-0 right-0 bottom-0\",\n        \"top-right\": \"fixed top-4 right-4\",\n        \"top-left\": \"fixed top-4 left-4\",\n        \"bottom-right\": \"fixed bottom-4 right-4\",\n        \"bottom-left\": \"fixed bottom-4 left-4\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2\",\n        md: \"p-4\",\n        lg: \"p-6\",\n      },\n    },\n    defaultVariants: {\n      position: \"center\",\n      padding: \"md\",\n    },\n  }\n)\n"]}

package/dist/chunk-L4OQ6BJ5.js

@@ -0,0 +1,233 @@
+import { useButtonGroup } from './chunk-ELRIFGMN.js';
+import { Badge } from './chunk-HNQX6ZG7.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-TEVGCTUN.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--button-radius-default)] font-medium transition-all duration-[var(--button-transition-duration)] ease-[var(--ease-default)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-brand)] focus-visible:z-10 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative",
+  {
+    variants: {
+      fullWidth: {
+        true: "flex w-full",
+        false: ""
+      },
+      variant: {
+        default: "bg-[color:var(--button-primary-bg-default)] text-[color:var(--button-primary-fg-default)] border border-[color:var(--button-primary-border-default)] shadow-[var(--button-shadow-default)] hover:bg-[color:var(--button-primary-bg-hover)] hover:border-[color:var(--button-primary-border-hover)] disabled:bg-[color:var(--button-disabled-bg)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5",
+        primary: "bg-[color:var(--button-primary-bg-default)] text-[color:var(--button-primary-fg-default)] border border-[color:var(--button-primary-border-default)] shadow-[var(--button-shadow-default)] hover:bg-[color:var(--button-primary-bg-hover)] hover:border-[color:var(--button-primary-border-hover)] disabled:bg-[color:var(--button-disabled-bg)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5",
+        destructive: "bg-[color:var(--button-destructive-bg-default)] text-[color:var(--button-destructive-fg-default)] hover:bg-[color:var(--button-destructive-bg-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-destructive)] dark:bg-destructive/60 hover:translate-y-px active:translate-y-0.5",
+        outline: "border border-input bg-background shadow-[var(--button-shadow-xs)] hover:bg-accent hover:text-accent-foreground focus-visible:border-ring dark:bg-input/30 dark:border-input dark:hover:bg-input/50 hover:translate-y-px active:translate-y-0.5",
+        dashed: "border border-dashed border-input bg-background shadow-[var(--button-shadow-xs)] hover:bg-accent hover:text-accent-foreground focus-visible:border-ring dark:bg-input/30 dark:border-input dark:hover:bg-input/50 hover:translate-y-px active:translate-y-0.5",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-secondary)] hover:translate-y-px active:translate-y-0.5",
+        "secondary-gray": "bg-[color:var(--button-secondary-gray-bg-default)] text-[color:var(--button-secondary-gray-fg-default)] border border-[color:var(--button-secondary-gray-border-default)] shadow-[var(--button-shadow-xs)] hover:bg-[color:var(--button-secondary-gray-bg-hover)] hover:text-[color:var(--button-secondary-gray-fg-hover)] hover:border-[color:var(--button-secondary-gray-border-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-gray)] disabled:bg-[color:var(--button-secondary-gray-bg-default)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5",
+        "secondary-color": "bg-[color:var(--button-secondary-color-bg-default)] text-[color:var(--button-secondary-color-fg-default)] border border-[color:var(--button-secondary-color-border-default)] shadow-[var(--button-shadow-xs)] hover:bg-[color:var(--button-secondary-color-bg-hover)] hover:text-[color:var(--button-secondary-color-fg-hover)] hover:border-[color:var(--button-secondary-color-border-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-brand)] disabled:bg-[color:var(--button-secondary-color-bg-default)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5",
+        ghost: "text-[color:var(--button-ghost-fg-default)] hover:bg-[color:var(--button-ghost-bg-hover)] hover:text-[color:var(--button-ghost-fg-hover)] dark:hover:bg-accent/50 focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-ghost)] hover:translate-y-px active:translate-y-0.5",
+        link: "text-shadow-button underline-offset-4 hover:underline focus-visible:underline",
+        "link-gray": "text-[color:var(--button-link-gray-fg-default)] hover:text-[color:var(--button-link-gray-fg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0",
+        "link-color": "text-[color:var(--button-link-color-fg-default)] hover:text-[color:var(--button-link-color-fg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0",
+        "tertiary-gray": "text-[color:var(--button-tertiary-gray-fg-default)] hover:text-[color:var(--button-tertiary-gray-fg-hover)] hover:bg-[color:var(--button-tertiary-gray-bg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0 hover:translate-y-px active:translate-y-0.5",
+        "tertiary-color": "text-[color:var(--button-tertiary-color-fg-default)] hover:text-[color:var(--button-tertiary-color-fg-hover)] hover:bg-[color:var(--button-tertiary-color-bg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0 hover:translate-y-px active:translate-y-0.5",
+        success: "bg-[color:var(--button-success-bg-default)] text-[color:var(--button-success-fg-default)] hover:bg-[color:var(--button-success-bg-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-success)] hover:translate-y-px active:translate-y-0.5",
+        warning: "bg-[color:var(--button-warning-bg-default)] text-[color:var(--button-warning-fg-default)] hover:bg-[color:var(--button-warning-bg-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-warning)] hover:translate-y-px active:translate-y-0.5",
+        unstyled: "bg-transparent text-current border-0 p-0 h-auto rounded-none hover:bg-transparent shadow-none w-auto"
+      },
+      size: {
+        default: "h-[var(--button-size-default-h)] px-[var(--button-size-default-px)] py-[var(--button-size-default-py)] text-[length:var(--button-size-default-text)] leading-[var(--button-size-default-leading)] gap-[var(--button-size-default-gap)]",
+        sm: "h-[var(--button-size-sm-h)] px-[var(--button-size-sm-px)] py-[var(--button-size-sm-py)] text-[length:var(--button-size-sm-text)] leading-[var(--button-size-sm-leading)] gap-[var(--button-size-sm-gap)]",
+        lg: "h-[var(--button-size-lg-h)] px-[var(--button-size-lg-px)] py-[var(--button-size-lg-py)] text-[length:var(--button-size-lg-text)] leading-[var(--button-size-lg-leading)] gap-[var(--button-size-lg-gap)]",
+        icon: "size-[var(--button-size-icon-size)] p-0 gap-0",
+        "icon-sm": "size-[var(--button-size-icon-sm-size)] p-0 gap-0"
+      },
+      shape: {
+        default: "",
+        square: "rounded-md",
+        circle: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "default",
+      fullWidth: false
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  tone,
+  size,
+  shape,
+  fullWidth = false,
+  asChild = false,
+  badge,
+  badgeColor = "destructive",
+  badgeSize = "sm",
+  loading = false,
+  loadingText,
+  icon,
+  leftIcon,
+  rightIcon,
+  disabled,
+  children,
+  tooltip,
+  onClick,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  "data-id": dataId,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const groupContext = useButtonGroup();
+  const effectiveSize = size ?? groupContext?.size;
+  const effectiveVariant = variant ?? groupContext?.buttonVariant;
+  const effectiveDisabled = disabled ?? groupContext?.disabled;
+  const isDisabled = effectiveDisabled ?? loading;
+  const resolvedVariant = (() => {
+    if (effectiveVariant === "tertiary") {
+      return tone === "color" ? "tertiary-color" : "tertiary-gray";
+    }
+    if (effectiveVariant === "secondary" && tone) {
+      return tone === "gray" ? "secondary-gray" : "secondary-color";
+    }
+    if (effectiveVariant === "link" && tone) {
+      return tone === "gray" ? "link-gray" : "link-color";
+    }
+    return effectiveVariant;
+  })();
+  const defaultSize = icon && !effectiveSize ? "icon" : effectiveSize;
+  const createPayload = React.useCallback(() => ({
+    ...dataId ? { id: dataId } : {},
+    timestamp: Date.now(),
+    isLoading: loading
+  }), [dataId, loading]);
+  const handleClick = React.useCallback(
+    (event) => {
+      if (isDisabled) {
+        event.preventDefault();
+        return;
+      }
+      onClick?.(event, createPayload());
+    },
+    [onClick, createPayload, isDisabled]
+  );
+  const handleFocus = React.useCallback(
+    (event) => {
+      onFocus?.(event, createPayload());
+    },
+    [onFocus, createPayload]
+  );
+  const handleBlur = React.useCallback(
+    (event) => {
+      onBlur?.(event, createPayload());
+    },
+    [onBlur, createPayload]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event, createPayload());
+    },
+    [onKeyDown, createPayload]
+  );
+  const renderContent = () => {
+    if (asChild) {
+      return children;
+    }
+    if (loading) {
+      const spinner = /* @__PURE__ */ jsx(
+        LoaderCircle,
+        {
+          className: cn(
+            "animate-spin",
+            // Center absolutely if we are preserving width (no loadingText)
+            !loadingText && !defaultSize?.toString().startsWith("icon") && "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          ),
+          "aria-hidden": "true",
+          "data-slot": "loading-icon",
+          "data-testid": "loading-icon"
+        }
+      );
+      if (defaultSize?.toString().startsWith("icon")) {
+        return spinner;
+      }
+      if (loadingText) {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          spinner,
+          loadingText
+        ] });
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        spinner,
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "opacity-0 flex items-center gap-2", children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "left-icon", children: leftIcon }),
+          children,
+          rightIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "right-icon", children: rightIcon })
+        ] })
+      ] });
+    }
+    if (icon) {
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "icon", children: icon });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "left-icon", children: leftIcon }),
+      children,
+      rightIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "right-icon", children: rightIcon })
+    ] });
+  };
+  const buttonElement = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        buttonVariants({
+          variant: resolvedVariant,
+          size: defaultSize,
+          shape,
+          fullWidth,
+          className
+        })
+      ),
+      "aria-busy": loading || void 0,
+      "aria-disabled": isDisabled || void 0,
+      "data-id": dataId,
+      "data-loading": loading || void 0,
+      "data-slot": "button",
+      disabled: isDisabled,
+      onBlur: handleBlur,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      ...props,
+      "aria-label": loading && !loadingText ? "Loading" : props["aria-label"],
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderContent(),
+        badge !== void 0 && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            className: "absolute -top-1.5 -right-1.5 min-w-5 h-5 px-1.5 text-xs pointer-events-none",
+            color: badgeColor,
+            "data-slot": "button-badge",
+            size: badgeSize,
+            type: "pill-color",
+            children: badge
+          }
+        )
+      ] })
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: buttonElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+    ] });
+  }
+  return buttonElement;
+}
+
+export { Button, buttonVariants };
+//# sourceMappingURL=chunk-L4OQ6BJ5.js.map
+//# sourceMappingURL=chunk-L4OQ6BJ5.js.map

package/dist/chunk-L4OQ6BJ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Button/Button.tsx"],"names":[],"mappings":"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","file":"chunk-L4OQ6BJ5.js","sourcesContent":["import type { ButtonEventPayload, ButtonProps } from \"./Button.types\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\nimport { LoaderCircle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport { Badge } from \"../Badge/Badge\"\nimport { useButtonGroup } from \"../ButtonGroup/ButtonGroup\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-[var(--button-radius-default)] font-medium transition-all duration-[var(--button-transition-duration)] ease-[var(--ease-default)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-brand)] focus-visible:z-10 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative\",\n  {\n    variants: {\n      fullWidth: {\n        true: \"flex w-full\",\n        false: \"\",\n      },\n      variant: {\n        default:\n          \"bg-[color:var(--button-primary-bg-default)] text-[color:var(--button-primary-fg-default)] border border-[color:var(--button-primary-border-default)] shadow-[var(--button-shadow-default)] hover:bg-[color:var(--button-primary-bg-hover)] hover:border-[color:var(--button-primary-border-hover)] disabled:bg-[color:var(--button-disabled-bg)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5\",\n        primary:\n          \"bg-[color:var(--button-primary-bg-default)] text-[color:var(--button-primary-fg-default)] border border-[color:var(--button-primary-border-default)] shadow-[var(--button-shadow-default)] hover:bg-[color:var(--button-primary-bg-hover)] hover:border-[color:var(--button-primary-border-hover)] disabled:bg-[color:var(--button-disabled-bg)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5\",\n        destructive:\n          \"bg-[color:var(--button-destructive-bg-default)] text-[color:var(--button-destructive-fg-default)] hover:bg-[color:var(--button-destructive-bg-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-destructive)] dark:bg-destructive/60 hover:translate-y-px active:translate-y-0.5\",\n        outline:\n          \"border border-input bg-background shadow-[var(--button-shadow-xs)] hover:bg-accent hover:text-accent-foreground focus-visible:border-ring dark:bg-input/30 dark:border-input dark:hover:bg-input/50 hover:translate-y-px active:translate-y-0.5\",\n        dashed:\n          \"border border-dashed border-input bg-background shadow-[var(--button-shadow-xs)] hover:bg-accent hover:text-accent-foreground focus-visible:border-ring dark:bg-input/30 dark:border-input dark:hover:bg-input/50 hover:translate-y-px active:translate-y-0.5\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-secondary)] hover:translate-y-px active:translate-y-0.5\",\n        \"secondary-gray\":\n          \"bg-[color:var(--button-secondary-gray-bg-default)] text-[color:var(--button-secondary-gray-fg-default)] border border-[color:var(--button-secondary-gray-border-default)] shadow-[var(--button-shadow-xs)] hover:bg-[color:var(--button-secondary-gray-bg-hover)] hover:text-[color:var(--button-secondary-gray-fg-hover)] hover:border-[color:var(--button-secondary-gray-border-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-gray)] disabled:bg-[color:var(--button-secondary-gray-bg-default)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5\",\n        \"secondary-color\":\n          \"bg-[color:var(--button-secondary-color-bg-default)] text-[color:var(--button-secondary-color-fg-default)] border border-[color:var(--button-secondary-color-border-default)] shadow-[var(--button-shadow-xs)] hover:bg-[color:var(--button-secondary-color-bg-hover)] hover:text-[color:var(--button-secondary-color-fg-hover)] hover:border-[color:var(--button-secondary-color-border-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-brand)] disabled:bg-[color:var(--button-secondary-color-bg-default)] disabled:border-[color:var(--button-disabled-border)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 hover:translate-y-px active:translate-y-0.5\",\n        ghost:\n          \"text-[color:var(--button-ghost-fg-default)] hover:bg-[color:var(--button-ghost-bg-hover)] hover:text-[color:var(--button-ghost-fg-hover)] dark:hover:bg-accent/50 focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-ghost)] hover:translate-y-px active:translate-y-0.5\",\n        link: \"text-shadow-button underline-offset-4 hover:underline focus-visible:underline\",\n        \"link-gray\":\n          \"text-[color:var(--button-link-gray-fg-default)] hover:text-[color:var(--button-link-gray-fg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0\",\n        \"link-color\":\n          \"text-[color:var(--button-link-color-fg-default)] hover:text-[color:var(--button-link-color-fg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0\",\n        \"tertiary-gray\":\n          \"text-[color:var(--button-tertiary-gray-fg-default)] hover:text-[color:var(--button-tertiary-gray-fg-hover)] hover:bg-[color:var(--button-tertiary-gray-bg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0 hover:translate-y-px active:translate-y-0.5\",\n        \"tertiary-color\":\n          \"text-[color:var(--button-tertiary-color-fg-default)] hover:text-[color:var(--button-tertiary-color-fg-hover)] hover:bg-[color:var(--button-tertiary-color-bg-hover)] disabled:text-[color:var(--button-disabled-fg)] disabled:opacity-100 focus-visible:ring-0 hover:translate-y-px active:translate-y-0.5\",\n        success:\n          \"bg-[color:var(--button-success-bg-default)] text-[color:var(--button-success-fg-default)] hover:bg-[color:var(--button-success-bg-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-success)] hover:translate-y-px active:translate-y-0.5\",\n        warning:\n          \"bg-[color:var(--button-warning-bg-default)] text-[color:var(--button-warning-fg-default)] hover:bg-[color:var(--button-warning-bg-hover)] focus-visible:ring-4 focus-visible:ring-[color:var(--button-ring-warning)] hover:translate-y-px active:translate-y-0.5\",\n        unstyled: \"bg-transparent text-current border-0 p-0 h-auto rounded-none hover:bg-transparent shadow-none w-auto\",\n      },\n      size: {\n        default: \"h-[var(--button-size-default-h)] px-[var(--button-size-default-px)] py-[var(--button-size-default-py)] text-[length:var(--button-size-default-text)] leading-[var(--button-size-default-leading)] gap-[var(--button-size-default-gap)]\",\n        sm: \"h-[var(--button-size-sm-h)] px-[var(--button-size-sm-px)] py-[var(--button-size-sm-py)] text-[length:var(--button-size-sm-text)] leading-[var(--button-size-sm-leading)] gap-[var(--button-size-sm-gap)]\",\n        lg: \"h-[var(--button-size-lg-h)] px-[var(--button-size-lg-px)] py-[var(--button-size-lg-py)] text-[length:var(--button-size-lg-text)] leading-[var(--button-size-lg-leading)] gap-[var(--button-size-lg-gap)]\",\n        icon: \"size-[var(--button-size-icon-size)] p-0 gap-0\",\n        \"icon-sm\": \"size-[var(--button-size-icon-sm-size)] p-0 gap-0\",\n      },\n      shape: {\n        default: \"\",\n        square: \"rounded-md\",\n        circle: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n      fullWidth: false,\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  tone,\n  size,\n  shape,\n  fullWidth = false,\n  asChild = false,\n  badge,\n  badgeColor = \"destructive\",\n  badgeSize = \"sm\",\n  loading = false,\n  loadingText,\n  icon,\n  leftIcon,\n  rightIcon,\n  disabled,\n  children,\n  tooltip,\n  onClick,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  \"data-id\": dataId,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : \"button\"\n\n  // Get ButtonGroup context for prop inheritance\n  const groupContext = useButtonGroup()\n\n  // Merge props with group context (individual props take precedence)\n  const effectiveSize = size ?? groupContext?.size\n  const effectiveVariant = variant ?? groupContext?.buttonVariant\n  const effectiveDisabled = disabled ?? groupContext?.disabled\n\n  const isDisabled = effectiveDisabled ?? loading\n  // Resolve virtual variants (tertiary, secondary with tone, link with tone) to actual CVA variants\n  const resolvedVariant = (() => {\n    // Handle virtual \"tertiary\" variant - always resolves to tertiary-gray or tertiary-color\n    if (effectiveVariant === \"tertiary\") {\n      return tone === \"color\" ? \"tertiary-color\" : \"tertiary-gray\"\n    }\n    // Handle secondary with tone\n    if (effectiveVariant === \"secondary\" && tone) {\n      return tone === \"gray\" ? \"secondary-gray\" : \"secondary-color\"\n    }\n    // Handle link with tone\n    if (effectiveVariant === \"link\" && tone) {\n      return tone === \"gray\" ? \"link-gray\" : \"link-color\"\n    }\n    // Return variant as-is for all other cases\n    return effectiveVariant\n  })()\n\n  // Default to icon size if icon prop is provided and size is undefined\n  const defaultSize = icon && !effectiveSize ? \"icon\" : effectiveSize\n\n  // Create event payload for callbacks\n  const createPayload = React.useCallback((): ButtonEventPayload => ({\n    ...(dataId ? { id: dataId } : {}),\n    timestamp: Date.now(),\n    isLoading: loading,\n  }), [dataId, loading])\n\n  // Wrapped event handlers that emit ButtonEventPayload\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n      onClick?.(event, createPayload())\n    },\n    [onClick, createPayload, isDisabled]\n  )\n\n  const handleFocus = React.useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      onFocus?.(event, createPayload())\n    },\n    [onFocus, createPayload]\n  )\n\n  const handleBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      onBlur?.(event, createPayload())\n    },\n    [onBlur, createPayload]\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event, createPayload())\n    },\n    [onKeyDown, createPayload]\n  )\n\n  // Determine what to render as children\n  const renderContent = () => {\n    if (asChild) {\n      return children\n    }\n\n    if (loading) {\n      const spinner = (\n        <LoaderCircle\n          className={cn(\n            \"animate-spin\",\n            // Center absolutely if we are preserving width (no loadingText)\n            !loadingText && !defaultSize?.toString().startsWith(\"icon\") && \"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n          )}\n          aria-hidden=\"true\"\n          data-slot=\"loading-icon\"\n          data-testid=\"loading-icon\"\n        />\n      )\n\n      if (defaultSize?.toString().startsWith(\"icon\")) {\n        return spinner\n      }\n\n      if (loadingText) {\n        return (\n          <>\n            {spinner}\n            {loadingText}\n          </>\n        )\n      }\n\n      // Preserve width by rendering hidden children\n      return (\n        <>\n          {spinner}\n          <span aria-hidden=\"true\" className=\"opacity-0 flex items-center gap-2\">\n            {leftIcon && (\n              <span aria-hidden=\"true\" data-slot=\"left-icon\">\n                {leftIcon}\n              </span>\n            )}\n            {children}\n            {rightIcon && (\n              <span aria-hidden=\"true\" data-slot=\"right-icon\">\n                {rightIcon}\n              </span>\n            )}\n          </span>\n        </>\n      )\n    }\n\n    if (icon) {\n      return (\n        <span aria-hidden=\"true\" data-slot=\"icon\">\n          {icon}\n        </span>\n      )\n    }\n\n    return (\n      <>\n        {leftIcon && (\n          <span aria-hidden=\"true\" data-slot=\"left-icon\">\n            {leftIcon}\n          </span>\n        )}\n        {children}\n        {rightIcon && (\n          <span aria-hidden=\"true\" data-slot=\"right-icon\">\n            {rightIcon}\n          </span>\n        )}\n      </>\n    )\n  }\n\n  const buttonElement = (\n    <Comp\n      className={cn(\n        buttonVariants({\n          variant: resolvedVariant,\n          size: defaultSize,\n          shape,\n          fullWidth,\n          className,\n        })\n      )}\n      aria-busy={loading || undefined}\n      aria-disabled={isDisabled || undefined}\n      data-id={dataId}\n      data-loading={loading || undefined}\n      data-slot=\"button\"\n      disabled={isDisabled}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      {...props}\n      aria-label={loading && !loadingText ? \"Loading\" : props[\"aria-label\"]}\n    >\n      {/* When asChild=true, Slot requires exactly ONE child element */}\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {renderContent()}\n          {badge !== undefined && (\n            <Badge\n              className=\"absolute -top-1.5 -right-1.5 min-w-5 h-5 px-1.5 text-xs pointer-events-none\"\n              color={badgeColor}\n              data-slot=\"button-badge\"\n              size={badgeSize}\n              type=\"pill-color\"\n            >\n              {badge}\n            </Badge>\n          )}\n        </>\n      )}\n    </Comp>\n  )\n\n  if (tooltip) {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {buttonElement}\n        </TooltipTrigger>\n        <TooltipContent>\n          {tooltip}\n        </TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return buttonElement\n}\n\nexport { Button, buttonVariants }\n"]}

package/dist/chunk-LCBB3N5H.js

@@ -0,0 +1,203 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var dividerLineVariants = cva("shrink-0", {
+  variants: {
+    orientation: {
+      horizontal: "h-[var(--divider-thickness)] w-full",
+      vertical: "h-full w-[var(--divider-thickness)]"
+    },
+    visualStyle: {
+      "single-line": "",
+      "dual-line": "shadow-[0_2px_0_0_var(--divider-color-dual)]",
+      "background-fill": ""
+    },
+    lineType: {
+      solid: "bg-[color:var(--divider-color-default)]",
+      dashed: "bg-transparent border-0 border-dashed border-[color:var(--divider-color-default)]",
+      dotted: "bg-transparent border-0 border-dotted border-[color:var(--divider-color-default)]"
+    }
+  },
+  compoundVariants: [
+    // Dashed/dotted horizontal needs border-t
+    {
+      orientation: "horizontal",
+      lineType: "dashed",
+      className: "border-t h-0"
+    },
+    {
+      orientation: "horizontal",
+      lineType: "dotted",
+      className: "border-t h-0"
+    },
+    // Dashed/dotted vertical needs border-l
+    {
+      orientation: "vertical",
+      lineType: "dashed",
+      className: "border-l w-0"
+    },
+    {
+      orientation: "vertical",
+      lineType: "dotted",
+      className: "border-l w-0"
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    visualStyle: "single-line",
+    lineType: "solid"
+  }
+});
+var dividerContentVariants = cva(
+  "flex items-center text-sm text-[color:var(--divider-content-text-default)] bg-[color:var(--divider-content-bg-default)]",
+  {
+    variants: {
+      type: {
+        line: "",
+        heading: "text-base font-semibold text-[color:var(--divider-content-text-heading)]",
+        text: "text-sm text-[color:var(--divider-content-text-default)]",
+        button: "",
+        "button-icon": "",
+        "button-group": "gap-2",
+        "button-group-icon": "gap-1"
+      },
+      visualStyle: {
+        "single-line": "px-3",
+        "dual-line": "px-3",
+        "background-fill": "rounded-md bg-[color:var(--divider-content-bg-fill)] px-3 py-1.5"
+      }
+    },
+    defaultVariants: {
+      type: "text",
+      visualStyle: "single-line"
+    }
+  }
+);
+var dividerWrapperVariants = cva("flex items-center", {
+  variants: {
+    orientation: {
+      horizontal: "w-full",
+      vertical: "h-full flex-col"
+    },
+    labelPosition: {
+      left: "",
+      center: "",
+      right: ""
+    }
+  },
+  compoundVariants: [
+    // Horizontal label positions
+    {
+      orientation: "horizontal",
+      labelPosition: "left",
+      className: "justify-start"
+    },
+    {
+      orientation: "horizontal",
+      labelPosition: "center",
+      className: "justify-center"
+    },
+    {
+      orientation: "horizontal",
+      labelPosition: "right",
+      className: "justify-end"
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    labelPosition: "center"
+  }
+});
+function Divider({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  type = "line",
+  visualStyle = "single-line",
+  lineType = "solid",
+  labelPosition = "center",
+  children,
+  ...props
+}) {
+  if (!children || type === "line") {
+    return /* @__PURE__ */ jsx(
+      SeparatorPrimitive.Root,
+      {
+        className: cn(
+          dividerLineVariants({ orientation, visualStyle, lineType }),
+          className
+        ),
+        "data-line-type": lineType,
+        "data-slot": "divider",
+        decorative,
+        orientation,
+        ...props
+      }
+    );
+  }
+  const getLineFlexClasses = (position) => {
+    if (labelPosition === "left") {
+      return position === "before" ? "shrink-0 basis-8" : "grow";
+    }
+    if (labelPosition === "right") {
+      return position === "before" ? "grow" : "shrink-0 basis-8";
+    }
+    return "grow";
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        dividerWrapperVariants({ orientation, labelPosition }),
+        className
+      ),
+      "aria-orientation": orientation,
+      "data-line-type": lineType,
+      "data-slot": "divider",
+      "data-type": type,
+      "data-visual-style": visualStyle,
+      role: decorative ? "none" : "separator",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SeparatorPrimitive.Root,
+          {
+            decorative: true,
+            className: cn(
+              dividerLineVariants({ orientation, visualStyle, lineType }),
+              getLineFlexClasses("before")
+            ),
+            "data-slot": "divider-line",
+            orientation
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(dividerContentVariants({ type, visualStyle })),
+            "data-slot": "divider-content",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SeparatorPrimitive.Root,
+          {
+            decorative: true,
+            className: cn(
+              dividerLineVariants({ orientation, visualStyle, lineType }),
+              getLineFlexClasses("after")
+            ),
+            "data-slot": "divider-line",
+            orientation
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Divider, dividerContentVariants, dividerLineVariants, dividerWrapperVariants };
+//# sourceMappingURL=chunk-LCBB3N5H.js.map
+//# sourceMappingURL=chunk-LCBB3N5H.js.map

package/dist/chunk-LCBB3N5H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Divider/Divider.variants.ts","../src/components/primitives/Divider/Divider.tsx"],"names":[],"mappings":"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","file":"chunk-LCBB3N5H.js","sourcesContent":["// Divider/Divider.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * CVA variants for the divider line\n */\nexport const dividerLineVariants = cva(\"shrink-0\", {\n  variants: {\n    orientation: {\n      horizontal: \"h-[var(--divider-thickness)] w-full\",\n      vertical: \"h-full w-[var(--divider-thickness)]\",\n    },\n    visualStyle: {\n      \"single-line\": \"\",\n      \"dual-line\": \"shadow-[0_2px_0_0_var(--divider-color-dual)]\",\n      \"background-fill\": \"\",\n    },\n    lineType: {\n      solid: \"bg-[color:var(--divider-color-default)]\",\n      dashed:\n        \"bg-transparent border-0 border-dashed border-[color:var(--divider-color-default)]\",\n      dotted:\n        \"bg-transparent border-0 border-dotted border-[color:var(--divider-color-default)]\",\n    },\n  },\n  compoundVariants: [\n    // Dashed/dotted horizontal needs border-t\n    {\n      orientation: \"horizontal\",\n      lineType: \"dashed\",\n      className: \"border-t h-0\",\n    },\n    {\n      orientation: \"horizontal\",\n      lineType: \"dotted\",\n      className: \"border-t h-0\",\n    },\n    // Dashed/dotted vertical needs border-l\n    {\n      orientation: \"vertical\",\n      lineType: \"dashed\",\n      className: \"border-l w-0\",\n    },\n    {\n      orientation: \"vertical\",\n      lineType: \"dotted\",\n      className: \"border-l w-0\",\n    },\n  ],\n  defaultVariants: {\n    orientation: \"horizontal\",\n    visualStyle: \"single-line\",\n    lineType: \"solid\",\n  },\n})\n\n/**\n * CVA variants for the content container\n */\nexport const dividerContentVariants = cva(\n  \"flex items-center text-sm text-[color:var(--divider-content-text-default)] bg-[color:var(--divider-content-bg-default)]\",\n  {\n    variants: {\n      type: {\n        line: \"\",\n        heading: \"text-base font-semibold text-[color:var(--divider-content-text-heading)]\",\n        text: \"text-sm text-[color:var(--divider-content-text-default)]\",\n        button: \"\",\n        \"button-icon\": \"\",\n        \"button-group\": \"gap-2\",\n        \"button-group-icon\": \"gap-1\",\n      },\n      visualStyle: {\n        \"single-line\": \"px-3\",\n        \"dual-line\": \"px-3\",\n        \"background-fill\": \"rounded-md bg-[color:var(--divider-content-bg-fill)] px-3 py-1.5\",\n      },\n    },\n    defaultVariants: {\n      type: \"text\",\n      visualStyle: \"single-line\",\n    },\n  }\n)\n\n/**\n * CVA variants for the wrapper\n */\nexport const dividerWrapperVariants = cva(\"flex items-center\", {\n  variants: {\n    orientation: {\n      horizontal: \"w-full\",\n      vertical: \"h-full flex-col\",\n    },\n    labelPosition: {\n      left: \"\",\n      center: \"\",\n      right: \"\",\n    },\n  },\n  compoundVariants: [\n    // Horizontal label positions\n    {\n      orientation: \"horizontal\",\n      labelPosition: \"left\",\n      className: \"justify-start\",\n    },\n    {\n      orientation: \"horizontal\",\n      labelPosition: \"center\",\n      className: \"justify-center\",\n    },\n    {\n      orientation: \"horizontal\",\n      labelPosition: \"right\",\n      className: \"justify-end\",\n    },\n  ],\n  defaultVariants: {\n    orientation: \"horizontal\",\n    labelPosition: \"center\",\n  },\n})\n\nexport type DividerLineVariantProps = VariantProps<typeof dividerLineVariants>\nexport type DividerContentVariantProps = VariantProps<typeof dividerContentVariants>\nexport type DividerWrapperVariantProps = VariantProps<typeof dividerWrapperVariants>\n","\"use client\"\n\nimport type { DividerProps } from \"./Divider.types\"\n\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  dividerContentVariants,\n  dividerLineVariants,\n  dividerWrapperVariants,\n} from \"./Divider.variants\"\n\n/**\n * Divider - A visual separator with optional content\n *\n * Based on Figma Content Divider design. Supports multiple types and styles:\n * - Types: line, heading, text, button, button-icon, button-group, button-group-icon\n * - Styles: single-line, dual-line, background-fill\n * - Label positions: left, center, right\n *\n * @example\n * ```tsx\n * // Simple line divider (backwards compatible)\n * <Divider />\n *\n * // Content divider with text\n * <Divider type=\"text\">or</Divider>\n *\n * // Heading divider\n * <Divider type=\"heading\" visualStyle=\"dual-line\">Section Title</Divider>\n *\n * // Button group divider\n * <Divider type=\"button-group\" visualStyle=\"background-fill\">\n *   <Button variant=\"ghost\" size=\"sm\">Option 1</Button>\n *   <Button variant=\"ghost\" size=\"sm\">Option 2</Button>\n * </Divider>\n * ```\n */\nfunction Divider({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  type = \"line\",\n  visualStyle = \"single-line\",\n  lineType = \"solid\",\n  labelPosition = \"center\",\n  children,\n  ...props\n}: DividerProps) {\n  // Simple line divider (no children) - backwards compatible\n  if (!children || type === \"line\") {\n    return (\n      <SeparatorPrimitive.Root\n        className={cn(\n          dividerLineVariants({ orientation, visualStyle, lineType }),\n          className\n        )}\n        data-line-type={lineType}\n        data-slot=\"divider\"\n        decorative={decorative}\n        orientation={orientation}\n        {...props}\n      />\n    )\n  }\n\n  // Content divider with children\n  // Determine line flex based on label position\n  const getLineFlexClasses = (position: \"after\" | \"before\") => {\n    if (labelPosition === \"left\") {\n      return position === \"before\" ? \"shrink-0 basis-8\" : \"grow\"\n    }\n    if (labelPosition === \"right\") {\n      return position === \"before\" ? \"grow\" : \"shrink-0 basis-8\"\n    }\n    return \"grow\" // center - both grow equally\n  }\n\n  return (\n    <div\n      className={cn(\n        dividerWrapperVariants({ orientation, labelPosition }),\n        className\n      )}\n      aria-orientation={orientation}\n      data-line-type={lineType}\n      data-slot=\"divider\"\n      data-type={type}\n      data-visual-style={visualStyle}\n      role={decorative ? \"none\" : \"separator\"}\n      {...props}\n    >\n      {/* Line before content */}\n      <SeparatorPrimitive.Root\n        decorative\n        className={cn(\n          dividerLineVariants({ orientation, visualStyle, lineType }),\n          getLineFlexClasses(\"before\")\n        )}\n        data-slot=\"divider-line\"\n        orientation={orientation}\n      />\n\n      {/* Content */}\n      <div\n        className={cn(dividerContentVariants({ type, visualStyle }))}\n        data-slot=\"divider-content\"\n      >\n        {children}\n      </div>\n\n      {/* Line after content */}\n      <SeparatorPrimitive.Root\n        decorative\n        className={cn(\n          dividerLineVariants({ orientation, visualStyle, lineType }),\n          getLineFlexClasses(\"after\")\n        )}\n        data-slot=\"divider-line\"\n        orientation={orientation}\n      />\n    </div>\n  )\n}\n\nexport { Divider, dividerContentVariants, dividerLineVariants, dividerWrapperVariants }\n"]}