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

package/dist/chunk-5GE3BQA7.js

@@ -0,0 +1,270 @@
+import { ScrollArea } from './chunk-CNRV2IGH.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { useRef, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var menuVariants = cva(
+  [
+    "flex p-[var(--menu-root-padding)]",
+    // Floating chrome (DES-1281): Menu owns the popover casing — bg/border/shadow/radius —
+    // so consumers no longer wrap it in a `rounded-md border bg-popover shadow-md` div.
+    "rounded-[var(--menu-content-radius)] border border-[color:var(--menu-content-border)] bg-[color:var(--menu-content-bg)] shadow-[var(--menu-content-shadow)]"
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col",
+        horizontal: "flex-row"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+var menuItemVariants = cva(
+  [
+    // Base styles
+    "relative flex w-full cursor-pointer select-none items-center gap-[var(--menu-item-gap)]",
+    "rounded-[var(--menu-item-radius)] px-[var(--menu-item-padding-x)] py-[var(--menu-item-padding-y)] text-[length:var(--menu-item-text-size)] outline-none",
+    // Focus styles
+    "focus:bg-accent focus:text-accent-foreground",
+    // Hover styles
+    "hover:bg-accent hover:text-accent-foreground",
+    // Transition
+    "transition-colors",
+    // Disabled styles
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    // SVG styles
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "text-destructive focus:bg-destructive/10 focus:text-destructive hover:bg-destructive/10 hover:text-destructive"
+      },
+      inset: {
+        true: "pl-8",
+        false: ""
+      },
+      selected: {
+        true: "bg-accent/50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      inset: false,
+      selected: false
+    }
+  }
+);
+var menuGroupVariants = cva([
+  "flex flex-col gap-1"
+]);
+var menuLabelVariants = cva(
+  [
+    "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+    "uppercase tracking-wider"
+  ],
+  {
+    variants: {
+      inset: {
+        true: "pl-8",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      inset: false
+    }
+  }
+);
+var menuSeparatorVariants = cva([
+  "-mx-1 my-1 h-px bg-border"
+]);
+var menuShortcutVariants = cva([
+  "ml-auto text-xs tracking-widest text-muted-foreground"
+]);
+function Menu({
+  className,
+  orientation = "vertical",
+  maxHeight,
+  children,
+  ...props
+}) {
+  const menuRef = useRef(null);
+  const handleKeyDown = useCallback(
+    (event) => {
+      const menu = menuRef.current;
+      if (!menu) return;
+      const items = [...menu.querySelectorAll('[role="menuitem"]:not([data-disabled])')];
+      if (items.length === 0) return;
+      const currentIndex = items.findIndex((item) => item === document.activeElement);
+      let nextIndex = null;
+      switch (event.key) {
+        case "ArrowDown":
+          if (orientation === "vertical") {
+            event.preventDefault();
+            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+          }
+          break;
+        case "ArrowUp":
+          if (orientation === "vertical") {
+            event.preventDefault();
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+          }
+          break;
+        case "ArrowRight":
+          if (orientation === "horizontal") {
+            event.preventDefault();
+            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+          }
+          break;
+        case "ArrowLeft":
+          if (orientation === "horizontal") {
+            event.preventDefault();
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+          }
+          break;
+        case "Home":
+          event.preventDefault();
+          nextIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          nextIndex = items.length - 1;
+          break;
+      }
+      if (nextIndex !== null) {
+        const nextItem = items[nextIndex];
+        if (nextItem) {
+          nextItem.focus();
+        }
+      }
+    },
+    [orientation]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      className: cn(menuVariants({ orientation }), className),
+      "data-slot": "menu",
+      role: "menu",
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: maxHeight == null ? children : /* @__PURE__ */ jsx(ScrollArea, { className: "w-full", style: { maxHeight }, children })
+    }
+  );
+}
+function MenuItem({
+  className,
+  variant = "default",
+  inset = false,
+  selected = false,
+  onSelect,
+  disabled = false,
+  children,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
+  const handleClick = useCallback(
+    (event) => {
+      if (disabled) return;
+      onClick?.(event);
+      onSelect?.();
+    },
+    [disabled, onClick, onSelect]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onSelect?.();
+      }
+    },
+    [disabled, onKeyDown, onSelect]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-disabled": disabled || void 0,
+      "aria-selected": selected || void 0,
+      className: cn(menuItemVariants({ variant, inset, selected }), className),
+      "data-disabled": disabled || void 0,
+      "data-slot": "menu-item",
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      type: "button",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children
+    }
+  );
+}
+function MenuGroup({
+  className,
+  label,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      className: cn(menuGroupVariants(), className),
+      "data-slot": "menu-group",
+      role: "group",
+      ...props,
+      children
+    }
+  );
+}
+function MenuLabel({
+  className,
+  inset = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(menuLabelVariants({ inset }), className),
+      "data-slot": "menu-label",
+      ...props,
+      children
+    }
+  );
+}
+function MenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(menuSeparatorVariants(), className),
+      "data-slot": "menu-separator",
+      role: "separator",
+      ...props
+    }
+  );
+}
+function MenuShortcut({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(menuShortcutVariants(), className),
+      "data-slot": "menu-shortcut",
+      ...props,
+      children
+    }
+  );
+}
+
+export { Menu, MenuGroup, MenuItem, MenuLabel, MenuSeparator, MenuShortcut, menuGroupVariants, menuItemVariants, menuLabelVariants, menuSeparatorVariants, menuShortcutVariants, menuVariants };
+//# sourceMappingURL=chunk-5GE3BQA7.js.map
+//# sourceMappingURL=chunk-5GE3BQA7.js.map

package/dist/chunk-5GE3BQA7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Menu/Menu.variants.ts","../src/components/navigation/Menu/Menu.tsx"],"names":[],"mappings":"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","file":"chunk-5GE3BQA7.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Menu root variant styles\n */\nexport const menuVariants = cva(\n  [\n    \"flex p-[var(--menu-root-padding)]\",\n    // Floating chrome (DES-1281): Menu owns the popover casing — bg/border/shadow/radius —\n    // so consumers no longer wrap it in a `rounded-md border bg-popover shadow-md` div.\n    \"rounded-[var(--menu-content-radius)] border border-[color:var(--menu-content-border)] bg-[color:var(--menu-content-bg)] shadow-[var(--menu-content-shadow)]\",\n  ],\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col\",\n        horizontal: \"flex-row\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\n/**\n * MenuItem variant styles\n */\nexport const menuItemVariants = cva(\n  [\n    // Base styles\n    \"relative flex w-full cursor-pointer select-none items-center gap-[var(--menu-item-gap)]\",\n    \"rounded-[var(--menu-item-radius)] px-[var(--menu-item-padding-x)] py-[var(--menu-item-padding-y)] text-[length:var(--menu-item-text-size)] outline-none\",\n    // Focus styles\n    \"focus:bg-accent focus:text-accent-foreground\",\n    // Hover styles\n    \"hover:bg-accent hover:text-accent-foreground\",\n    // Transition\n    \"transition-colors\",\n    // Disabled styles\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n    // SVG styles\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        destructive: \"text-destructive focus:bg-destructive/10 focus:text-destructive hover:bg-destructive/10 hover:text-destructive\",\n      },\n      inset: {\n        true: \"pl-8\",\n        false: \"\",\n      },\n      selected: {\n        true: \"bg-accent/50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      inset: false,\n      selected: false,\n    },\n  }\n)\n\n/**\n * MenuGroup variant styles\n */\nexport const menuGroupVariants = cva([\n  \"flex flex-col gap-1\",\n])\n\n/**\n * MenuLabel variant styles\n */\nexport const menuLabelVariants = cva(\n  [\n    \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n    \"uppercase tracking-wider\",\n  ],\n  {\n    variants: {\n      inset: {\n        true: \"pl-8\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      inset: false,\n    },\n  }\n)\n\n/**\n * MenuSeparator variant styles\n */\nexport const menuSeparatorVariants = cva([\n  \"-mx-1 my-1 h-px bg-border\",\n])\n\n/**\n * MenuShortcut variant styles\n */\nexport const menuShortcutVariants = cva([\n  \"ml-auto text-xs tracking-widest text-muted-foreground\",\n])\n","\"use client\"\n\nimport type {\n  MenuGroupProps,\n  MenuItemProps,\n  MenuLabelProps,\n  MenuProps,\n  MenuSeparatorProps,\n  MenuShortcutProps,\n} from \"./Menu.types\"\nimport type { KeyboardEvent } from \"react\";\n\nimport { useCallback, useRef } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { ScrollArea } from \"../../layout/ScrollArea\"\nimport {\n  menuGroupVariants,\n  menuItemVariants,\n  menuLabelVariants,\n  menuSeparatorVariants,\n  menuShortcutVariants,\n  menuVariants,\n} from \"./Menu.variants\"\n\n/**\n * Menu - A navigable list of options with keyboard support.\n *\n * Base component for creating custom menus with full accessibility.\n *\n * @example\n * <Menu>\n *   <MenuItem onSelect={() => console.log(\"Edit\")}>Edit</MenuItem>\n *   <MenuItem onSelect={() => console.log(\"Copy\")}>Copy</MenuItem>\n *   <MenuSeparator />\n *   <MenuItem variant=\"destructive\">Delete</MenuItem>\n * </Menu>\n */\nfunction Menu({\n  className,\n  orientation = \"vertical\",\n  maxHeight,\n  children,\n  ...props\n}: MenuProps) {\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  /* eslint-disable sonarjs/cognitive-complexity -- Keyboard navigation requires handling multiple key cases */\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const menu = menuRef.current\n      if (!menu) return\n\n      const items = [...menu.querySelectorAll('[role=\"menuitem\"]:not([data-disabled])')] as HTMLElement[]\n\n      if (items.length === 0) return\n\n      const currentIndex = items.findIndex((item) => item === document.activeElement)\n\n      let nextIndex: null | number = null\n\n      switch (event.key) {\n        case \"ArrowDown\":\n          if (orientation === \"vertical\") {\n            event.preventDefault()\n            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0\n          }\n          break\n        case \"ArrowUp\":\n          if (orientation === \"vertical\") {\n            event.preventDefault()\n            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1\n          }\n          break\n        case \"ArrowRight\":\n          if (orientation === \"horizontal\") {\n            event.preventDefault()\n            nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0\n          }\n          break\n        case \"ArrowLeft\":\n          if (orientation === \"horizontal\") {\n            event.preventDefault()\n            nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1\n          }\n          break\n        case \"Home\":\n          event.preventDefault()\n          nextIndex = 0\n          break\n        case \"End\":\n          event.preventDefault()\n          nextIndex = items.length - 1\n          break\n      }\n\n      if (nextIndex !== null) {\n        const nextItem = items[nextIndex]\n        if (nextItem) {\n          nextItem.focus()\n        }\n      }\n    },\n    [orientation]\n  )\n  /* eslint-enable sonarjs/cognitive-complexity */\n\n  return (\n    <div\n      ref={menuRef}\n      className={cn(menuVariants({ orientation }), className)}\n      data-slot=\"menu\"\n      role=\"menu\"\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {maxHeight == null ? (\n        children\n      ) : (\n        <ScrollArea className=\"w-full\" style={{ maxHeight }}>\n          {children}\n        </ScrollArea>\n      )}\n    </div>\n  )\n}\n\n/**\n * MenuItem - Individual menu item with optional variants.\n */\nfunction MenuItem({\n  className,\n  variant = \"default\",\n  inset = false,\n  selected = false,\n  onSelect,\n  disabled = false,\n  children,\n  onClick,\n  onKeyDown,\n  ...props\n}: MenuItemProps) {\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return\n      onClick?.(event)\n      onSelect?.()\n    },\n    [disabled, onClick, onSelect]\n  )\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event)\n      if (disabled) return\n\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault()\n        onSelect?.()\n      }\n    },\n    [disabled, onKeyDown, onSelect]\n  )\n\n  return (\n    <button\n      aria-disabled={disabled || undefined}\n      aria-selected={selected || undefined}\n      className={cn(menuItemVariants({ variant, inset, selected }), className)}\n      data-disabled={disabled || undefined}\n      data-slot=\"menu-item\"\n      role=\"menuitem\"\n      tabIndex={disabled ? -1 : 0}\n      type=\"button\"\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}\n\n/**\n * MenuGroup - Groups related menu items together.\n */\nfunction MenuGroup({\n  className,\n  label,\n  children,\n  ...props\n}: MenuGroupProps) {\n  return (\n    <div\n      aria-label={label}\n      className={cn(menuGroupVariants(), className)}\n      data-slot=\"menu-group\"\n      role=\"group\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * MenuLabel - Label for a group of menu items.\n */\nfunction MenuLabel({\n  className,\n  inset = false,\n  children,\n  ...props\n}: MenuLabelProps) {\n  return (\n    <div\n      className={cn(menuLabelVariants({ inset }), className)}\n      data-slot=\"menu-label\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * MenuSeparator - Visual divider between menu items.\n */\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n  return (\n    <div\n      className={cn(menuSeparatorVariants(), className)}\n      data-slot=\"menu-separator\"\n      role=\"separator\"\n      {...props}\n    />\n  )\n}\n\n/**\n * MenuShortcut - Displays keyboard shortcut hint.\n */\nfunction MenuShortcut({ className, children, ...props }: MenuShortcutProps) {\n  return (\n    <span\n      className={cn(menuShortcutVariants(), className)}\n      data-slot=\"menu-shortcut\"\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport { Menu, MenuGroup, MenuItem, MenuLabel, MenuSeparator, MenuShortcut }\n"]}

package/dist/chunk-5I7AXWJU.js

@@ -0,0 +1,174 @@
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut } from './chunk-OXDWUKGP.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { ChevronDown, LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var splitButtonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        primary: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        destructive: "bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+      },
+      size: {
+        md: "h-[var(--button-size-default-h)] px-[var(--button-size-default-px)] py-[var(--button-size-default-py)]",
+        sm: "h-[var(--button-size-sm-h)] gap-[var(--button-size-sm-gap)] px-[var(--button-size-sm-px)]",
+        lg: "h-[var(--button-size-lg-h)] px-[var(--button-size-lg-px)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var splitButtonTriggerVariants = cva(
+  "inline-flex items-center justify-center transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        primary: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        destructive: "bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-muted disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+      },
+      size: {
+        md: "h-[var(--button-size-default-h)] px-[var(--split-button-trigger-padding-x)]",
+        sm: "h-[var(--button-size-sm-h)] px-1.5",
+        lg: "h-[var(--button-size-lg-h)] px-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function SplitButton({
+  className,
+  variant,
+  size,
+  children,
+  onClick,
+  menuItems,
+  loading = false,
+  loadingText,
+  disabled,
+  leftIcon,
+  "data-id": dataId,
+  triggerAriaLabel = "Open menu",
+  defaultOpen,
+  open,
+  onOpenChange,
+  ...props
+}) {
+  const isDisabled = disabled ?? loading;
+  const createPayload = React.useCallback(() => ({
+    ...dataId ? { id: dataId } : {},
+    timestamp: Date.now(),
+    isLoading: loading
+  }), [dataId, loading]);
+  const handleClick = React.useCallback(
+    (event) => {
+      onClick?.(event, createPayload());
+    },
+    [onClick, createPayload]
+  );
+  const renderPrimaryContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          LoaderCircle,
+          {
+            "aria-hidden": "true",
+            className: "animate-spin",
+            "data-slot": "loading-icon"
+          }
+        ),
+        loadingText ?? children
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "left-icon", children: leftIcon }),
+      children
+    ] });
+  };
+  const renderMenuItem = (item, index) => {
+    const handleItemClick = item.disabled ? void 0 : item.onClick;
+    return /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        ...handleItemClick ? { onClick: handleItemClick } : {},
+        disabled: item.disabled ?? false,
+        variant: item.variant ?? "default",
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          item.shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: item.shortcut })
+        ]
+      },
+      index
+    );
+  };
+  const dividerClass = variant === "outline" || variant === "ghost" ? "border-l border-border" : "border-l border-current/20";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("inline-flex", className),
+      "data-id": dataId,
+      "data-slot": "split-button",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              splitButtonVariants({ variant, size }),
+              "rounded-l-[var(--button-radius-default)] rounded-r-none"
+            ),
+            "aria-busy": loading || void 0,
+            "aria-disabled": isDisabled || void 0,
+            "data-loading": loading || void 0,
+            "data-slot": "split-button-primary",
+            disabled: isDisabled,
+            type: "button",
+            onClick: handleClick,
+            children: renderPrimaryContent()
+          }
+        ),
+        /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen, open, onOpenChange, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                splitButtonTriggerVariants({ variant, size }),
+                "rounded-r-[var(--button-radius-default)] rounded-l-none",
+                dividerClass
+              ),
+              "aria-disabled": isDisabled || void 0,
+              "aria-label": triggerAriaLabel,
+              "data-slot": "split-button-trigger",
+              disabled: isDisabled,
+              type: "button",
+              children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: menuItems.map(renderMenuItem) })
+        ] })
+      ]
+    }
+  );
+}
+
+export { SplitButton, splitButtonVariants };
+//# sourceMappingURL=chunk-5I7AXWJU.js.map
+//# sourceMappingURL=chunk-5I7AXWJU.js.map

package/dist/chunk-5I7AXWJU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/SplitButton/SplitButton.variants.ts","../src/components/primitives/SplitButton/SplitButton.tsx"],"names":[],"mappings":";;;;;;;AASO,IAAM,mBAAA,GAAsB,GAAA;AAAA,EACjC,uZAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,0EAAA;AAAA,QACT,OAAA,EAAS,0EAAA;AAAA,QACT,WAAA,EACE,qKAAA;AAAA,QACF,OAAA,EACE,sLAAA;AAAA,QACF,SAAA,EACE,8DAAA;AAAA,QACF,KAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EACE,wGAAA;AAAA,QACF,EAAA,EAAI,2FAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAQO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,2WAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,0EAAA;AAAA,QACT,OAAA,EAAS,0EAAA;AAAA,QACT,WAAA,EACE,qKAAA;AAAA,QACF,OAAA,EACE,iNAAA;AAAA,QACF,SAAA,EACE,8DAAA;AAAA,QACF,KAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EACE,6EAAA;AAAA,QACF,EAAA,EAAI,oCAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;ACjDA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,EAAW,MAAA;AAAA,EACX,gBAAA,GAAmB,WAAA;AAAA,EACnB,WAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,aAAa,QAAA,IAAY,OAAA;AAG/B,EAAA,MAAM,aAAA,GAAsB,kBAAY,OAAgC;AAAA,IACtE,GAAI,MAAA,GAAS,EAAE,EAAA,EAAI,MAAA,KAAW,EAAC;AAAA,IAC/B,SAAA,EAAW,KAAK,GAAA,EAAI;AAAA,IACpB,SAAA,EAAW;AAAA,GACb,CAAA,EAAI,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AAGrB,EAAA,MAAM,WAAA,GAAoB,KAAA,CAAA,WAAA;AAAA,IACxB,CAAC,KAAA,KAA+C;AAC9C,MAAA,OAAA,GAAU,KAAA,EAAO,eAAe,CAAA;AAAA,IAClC,CAAA;AAAA,IACA,CAAC,SAAS,aAAa;AAAA,GACzB;AAGA,EAAA,MAAM,uBAAuB,MAAM;AACjC,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAU,cAAA;AAAA,YACV,WAAA,EAAU;AAAA;AAAA,SACZ;AAAA,QACC,WAAA,IAAe;AAAA,OAAA,EAClB,CAAA;AAAA,IAEJ;AAEA,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,QAAA,wBACE,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAA,EAAU,aAChC,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,MAED;AAAA,KAAA,EACH,CAAA;AAAA,EAEJ,CAAA;AAGA,EAAA,MAAM,cAAA,GAAiB,CAAC,IAAA,EAA2B,KAAA,KAAkB;AAEnE,IAAA,MAAM,eAAA,GAAkB,IAAA,CAAK,QAAA,GAAW,MAAA,GAAY,IAAA,CAAK,OAAA;AAEzD,IAAA,uBACE,IAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QAEE,GAAI,eAAA,GAAkB,EAAE,OAAA,EAAS,eAAA,KAAoB,EAAC;AAAA,QACvD,QAAA,EAAU,KAAK,QAAA,IAAY,KAAA;AAAA,QAC3B,OAAA,EAAS,KAAK,OAAA,IAAW,SAAA;AAAA,QAExB,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,IAAA;AAAA,0BACN,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,UACjB,IAAA,CAAK,QAAA,oBACJ,GAAA,CAAC,oBAAA,EAAA,EAAsB,eAAK,QAAA,EAAS;AAAA;AAAA,OAAA;AAAA,MARlC;AAAA,KAUP;AAAA,EAEJ,CAAA;AAGA,EAAA,MAAM,YAAA,GACJ,OAAA,KAAY,SAAA,IAAa,OAAA,KAAY,UACjC,wBAAA,GACA,4BAAA;AAEN,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MACtC,SAAA,EAAS,MAAA;AAAA,MACT,WAAA,EAAU,cAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAGJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,mBAAA,CAAoB,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAAA,cACrC;AAAA,aACF;AAAA,YACA,aAAW,OAAA,IAAW,MAAA;AAAA,YACtB,iBAAe,UAAA,IAAc,MAAA;AAAA,YAC7B,gBAAc,OAAA,IAAW,MAAA;AAAA,YACzB,WAAA,EAAU,sBAAA;AAAA,YACV,QAAA,EAAU,UAAA;AAAA,YACV,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,WAAA;AAAA,YAER,QAAA,EAAA,oBAAA;AAAqB;AAAA,SACxB;AAAA,wBAGA,IAAA,CAAC,YAAA,EAAA,EAAa,WAAA,EAA0B,IAAA,EAAY,YAAA,EAClD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,SAAO,IAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,0BAAA,CAAgB,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAAA,gBACjC,yDAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,iBAAe,UAAA,IAAc,MAAA;AAAA,cAC7B,YAAA,EAAY,gBAAA;AAAA,cACZ,WAAA,EAAU,sBAAA;AAAA,cACV,QAAA,EAAU,UAAA;AAAA,cACV,IAAA,EAAK,QAAA;AAAA,cAEL,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA,WAClC,EACF,CAAA;AAAA,8BACC,mBAAA,EAAA,EAAoB,KAAA,EAAM,OACxB,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,cAAc,CAAA,EAC/B;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-5I7AXWJU.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Primary action button variants (left half of SplitButton).\n *\n * State colors follow Figma (DES-1306): solid hover tokens (`--primary-hover` /\n * `--destructive-hover`) instead of opacity, and a solid disabled triplet\n * (`--disabled-background` / `-foreground` / `-border`) instead of `opacity-50`.\n */\nexport const splitButtonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        primary: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        destructive:\n          \"bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n      },\n      size: {\n        md:\n          \"h-[var(--button-size-default-h)] px-[var(--button-size-default-px)] py-[var(--button-size-default-py)]\",\n        sm: \"h-[var(--button-size-sm-h)] gap-[var(--button-size-sm-gap)] px-[var(--button-size-sm-px)]\",\n        lg: \"h-[var(--button-size-lg-h)] px-[var(--button-size-lg-px)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Trigger button variants (right half of SplitButton — icon-only chevron).\n *\n * Adds the Figma `Status=Open` visual (DES-1306 item 2): the outline trigger\n * gets `bg-muted` while the dropdown is open (`data-state=open` from Radix).\n */\nexport const splitButtonTriggerVariants = cva(\n  \"inline-flex items-center justify-center transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        primary: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        destructive:\n          \"bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-muted disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n      },\n      size: {\n        md:\n          \"h-[var(--button-size-default-h)] px-[var(--split-button-trigger-padding-x)]\",\n        sm: \"h-[var(--button-size-sm-h)] px-1.5\",\n        lg: \"h-[var(--button-size-lg-h)] px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\nexport type SplitButtonVariantProps = VariantProps<typeof splitButtonVariants>\nexport type SplitButtonTriggerVariantProps = VariantProps<\n  typeof splitButtonTriggerVariants\n>\n","\"use client\"\n\nimport type {\n  SplitButtonEventPayload,\n  SplitButtonMenuItem,\n  SplitButtonProps,\n} from \"./SplitButton.types\"\n\nimport { ChevronDown, LoaderCircle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"../../navigation/DropdownMenu\"\nimport {\n  splitButtonVariants,\n  splitButtonTriggerVariants as triggerVariants,\n} from \"./SplitButton.variants\"\n\nfunction SplitButton({\n  className,\n  variant,\n  size,\n  children,\n  onClick,\n  menuItems,\n  loading = false,\n  loadingText,\n  disabled,\n  leftIcon,\n  \"data-id\": dataId,\n  triggerAriaLabel = \"Open menu\",\n  defaultOpen,\n  open,\n  onOpenChange,\n  ...props\n}: SplitButtonProps) {\n  const isDisabled = disabled ?? loading\n\n  // Create event payload for callbacks\n  const createPayload = React.useCallback((): SplitButtonEventPayload => ({\n    ...(dataId ? { id: dataId } : {}),\n    timestamp: Date.now(),\n    isLoading: loading,\n  }), [dataId, loading])\n\n  // Wrapped event handler that emits SplitButtonEventPayload\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event, createPayload())\n    },\n    [onClick, createPayload]\n  )\n\n  // Determine what to render as primary button content\n  const renderPrimaryContent = () => {\n    if (loading) {\n      return (\n        <>\n          <LoaderCircle\n            aria-hidden=\"true\"\n            className=\"animate-spin\"\n            data-slot=\"loading-icon\"\n          />\n          {loadingText ?? children}\n        </>\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      </>\n    )\n  }\n\n  // Render a single menu item\n  const renderMenuItem = (item: SplitButtonMenuItem, index: number) => {\n    // Guard onClick - don't call if item is disabled\n    const handleItemClick = item.disabled ? undefined : item.onClick\n\n    return (\n      <DropdownMenuItem\n        key={index}\n        {...(handleItemClick ? { onClick: handleItemClick } : {})}\n        disabled={item.disabled ?? false}\n        variant={item.variant ?? \"default\"}\n      >\n        {item.icon}\n        <span>{item.label}</span>\n        {item.shortcut && (\n          <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>\n        )}\n      </DropdownMenuItem>\n    )\n  }\n\n  // Divider class for visual separation between buttons\n  const dividerClass =\n    variant === \"outline\" || variant === \"ghost\"\n      ? \"border-l border-border\"\n      : \"border-l border-current/20\"\n\n  return (\n    <div\n      className={cn(\"inline-flex\", className)}\n      data-id={dataId}\n      data-slot=\"split-button\"\n      {...props}\n    >\n      {/* Primary action button */}\n      <button\n        className={cn(\n          splitButtonVariants({ variant, size }),\n          \"rounded-l-[var(--button-radius-default)] rounded-r-none\"\n        )}\n        aria-busy={loading || undefined}\n        aria-disabled={isDisabled || undefined}\n        data-loading={loading || undefined}\n        data-slot=\"split-button-primary\"\n        disabled={isDisabled}\n        type=\"button\"\n        onClick={handleClick}\n      >\n        {renderPrimaryContent()}\n      </button>\n\n      {/* Dropdown trigger button */}\n      <DropdownMenu defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>\n        <DropdownMenuTrigger asChild>\n          <button\n            className={cn(\n              triggerVariants({ variant, size }),\n              \"rounded-r-[var(--button-radius-default)] rounded-l-none\",\n              dividerClass\n            )}\n            aria-disabled={isDisabled || undefined}\n            aria-label={triggerAriaLabel}\n            data-slot=\"split-button-trigger\"\n            disabled={isDisabled}\n            type=\"button\"\n          >\n            <ChevronDown className=\"size-4\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          {menuItems.map(renderMenuItem)}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\nexport { SplitButton, splitButtonVariants }\n"]}