@tribepad/themis 1.0.0

package/dist/chunk-RFFO4KPM.js

@@ -0,0 +1,135 @@
+'use strict';
+
+var chunkY3GT7ETK_js = require('./chunk-Y3GT7ETK.js');
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var jsxRuntime = require('react/jsx-runtime');
+var zod = require('zod');
+
+var isButtonElement = (child) => {
+  if (!react.isValidElement(child)) return false;
+  const componentType = child.type;
+  return componentType?.displayName === "Button";
+};
+var isSeparatorElement = (child) => {
+  if (!react.isValidElement(child)) return false;
+  const componentType = child.type;
+  return componentType?.displayName === "ButtonGroupSeparator";
+};
+var getPosition = (index, total) => {
+  if (total === 1) return "only";
+  if (index === 0) return "first";
+  if (index === total - 1) return "last";
+  return "middle";
+};
+var filterButtonChildren = (children) => {
+  return children.filter(isButtonElement);
+};
+var getButtonIndex = (child, buttonChildren) => {
+  return buttonChildren.indexOf(child);
+};
+var ButtonGroup = react.forwardRef(
+  ({
+    orientation = "horizontal",
+    variant,
+    size,
+    isDisabled,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const childArray = react.Children.toArray(children);
+    const buttonChildren = childArray.filter(isButtonElement);
+    const totalButtons = buttonChildren.length;
+    const groupContextValue = {
+      orientation,
+      variant,
+      size,
+      isDisabled
+    };
+    const wrappedChildren = childArray.map((child, index) => {
+      if (isButtonElement(child)) {
+        const buttonIndex = buttonChildren.indexOf(child);
+        const position = getPosition(buttonIndex, totalButtons);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunkY3GT7ETK_js.ButtonGroupItemContext.Provider,
+          {
+            value: { position },
+            children: child
+          },
+          index
+        );
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Toolbar,
+      {
+        ref,
+        orientation,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        className: chunkVIREG536_js.cn(chunkY3GT7ETK_js.buttonGroupVariants({ orientation }), className),
+        children: /* @__PURE__ */ jsxRuntime.jsx(chunkY3GT7ETK_js.ButtonGroupContext.Provider, { value: groupContextValue, children: wrappedChildren })
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var ButtonGroupSeparator = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    const groupContext = chunkY3GT7ETK_js.useButtonGroupContext();
+    const orientation = groupContext?.orientation ?? "horizontal";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-hidden": "true",
+        className: chunkVIREG536_js.cn(
+          chunkY3GT7ETK_js.buttonGroupSeparatorVariants({ orientation }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
+var ButtonGroupPropsSchema = zod.z.object({
+  /** Orientation of the button group layout */
+  orientation: zod.z.enum(["horizontal", "vertical"]).optional().default("horizontal"),
+  /** Default variant for all child buttons (can be overridden per-button) */
+  variant: zod.z.enum(["default", "destructive", "outline", "secondary", "ghost"]).optional(),
+  /** Default size for all child buttons (can be overridden per-button) */
+  size: zod.z.enum(["sm", "default", "lg", "icon"]).optional(),
+  /** Disable all buttons in the group */
+  isDisabled: zod.z.boolean().optional(),
+  /** Accessible label for the toolbar (recommended) */
+  "aria-label": zod.z.string().optional(),
+  /** ID of element that labels the toolbar */
+  "aria-labelledby": zod.z.string().optional(),
+  /** Additional CSS classes */
+  className: zod.z.string().optional(),
+  /** Child elements (Buttons, Separators, etc.) */
+  children: zod.z.custom()
+});
+var ButtonGroupSeparatorPropsSchema = zod.z.object({
+  /** Additional CSS classes */
+  className: zod.z.string().optional(),
+  /** Test ID for testing */
+  "data-testid": zod.z.string().optional()
+});
+
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupPropsSchema = ButtonGroupPropsSchema;
+exports.ButtonGroupSeparator = ButtonGroupSeparator;
+exports.ButtonGroupSeparatorPropsSchema = ButtonGroupSeparatorPropsSchema;
+exports.filterButtonChildren = filterButtonChildren;
+exports.getButtonIndex = getButtonIndex;
+exports.getPosition = getPosition;
+exports.isButtonElement = isButtonElement;
+exports.isSeparatorElement = isSeparatorElement;
+//# sourceMappingURL=chunk-RFFO4KPM.js.map
+//# sourceMappingURL=chunk-RFFO4KPM.js.map

package/dist/chunk-RFFO4KPM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/ButtonGroup/ButtonGroup.utils.ts","../src/elements/ButtonGroup/ButtonGroup.tsx","../src/elements/ButtonGroup/ButtonGroup.types.ts"],"names":["isValidElement","forwardRef","Children","jsx","ButtonGroupItemContext","Toolbar","cn","buttonGroupVariants","ButtonGroupContext","useButtonGroupContext","buttonGroupSeparatorVariants","z"],"mappings":"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","file":"chunk-RFFO4KPM.js","sourcesContent":["import { isValidElement, type ReactNode, type ComponentType } from 'react';\nimport type { ButtonPosition } from './ButtonGroup.types';\n\n/**\n * ButtonGroup Utility Functions\n *\n * Provides helper functions for:\n * - Child element detection (Button vs Separator vs other)\n * - Position calculation for border-radius styling\n *\n * @see plan.md Decision 6: Non-Button Child Handling\n */\n\n// =============================================================================\n// Child Detection Functions\n// =============================================================================\n\n/**\n * Checks if a React child is a Themis Button component\n * Uses displayName for reliable detection across module boundaries\n *\n * @param child - React child element to check\n * @returns true if the child is a Button component\n */\nexport const isButtonElement = (child: ReactNode): boolean => {\n  if (!isValidElement(child)) return false;\n\n  const componentType = child.type as ComponentType;\n  return componentType?.displayName === 'Button';\n};\n\n/**\n * Checks if a React child is a ButtonGroupSeparator component\n * Uses displayName for reliable detection across module boundaries\n *\n * @param child - React child element to check\n * @returns true if the child is a ButtonGroupSeparator component\n */\nexport const isSeparatorElement = (child: ReactNode): boolean => {\n  if (!isValidElement(child)) return false;\n\n  const componentType = child.type as ComponentType;\n  return componentType?.displayName === 'ButtonGroupSeparator';\n};\n\n// =============================================================================\n// Position Calculation\n// =============================================================================\n\n/**\n * Calculates the position of a button within a group\n * Used for applying position-aware border-radius styling\n *\n * @param index - Zero-based index of the button\n * @param total - Total number of buttons in the group\n * @returns Position enum: 'only' | 'first' | 'last' | 'middle'\n *\n * @example\n * getPosition(0, 1) // 'only' - single button\n * getPosition(0, 3) // 'first'\n * getPosition(1, 3) // 'middle'\n * getPosition(2, 3) // 'last'\n */\nexport const getPosition = (index: number, total: number): ButtonPosition => {\n  if (total === 1) return 'only';\n  if (index === 0) return 'first';\n  if (index === total - 1) return 'last';\n  return 'middle';\n};\n\n/**\n * Filters an array of React children to only include Button elements\n * Non-Button children (Separators, custom elements) are excluded\n *\n * @param children - Array of React children\n * @returns Array containing only Button elements\n */\nexport const filterButtonChildren = (children: ReactNode[]): ReactNode[] => {\n  return children.filter(isButtonElement);\n};\n\n/**\n * Gets the index of a button within the filtered button array\n * Used when the child array contains non-Button elements (Separators, etc.)\n *\n * @param child - The button element to find\n * @param buttonChildren - Array of only Button elements\n * @returns Index of the button, or -1 if not found\n */\nexport const getButtonIndex = (\n  child: ReactNode,\n  buttonChildren: ReactNode[]\n): number => {\n  return buttonChildren.indexOf(child);\n};\n","\"use client\";\n\n/**\n * ButtonGroup Component\n *\n * A container that groups related Themis Button components with:\n * - Consistent styling (connected borders, position-aware radii)\n * - Accessible keyboard navigation (React Aria Toolbar)\n * - WCAG 2.2 AAA compliance\n *\n * @see plan.md for architecture details\n * @see buttongroup-prd.md for requirements\n */\n\nimport { forwardRef, Children, type ReactElement } from 'react';\nimport { Toolbar } from 'react-aria-components';\nimport { cn } from '../../utils/cn';\nimport {\n  ButtonGroupContext,\n  ButtonGroupItemContext,\n  useButtonGroupContext,\n} from './ButtonGroupContext';\nimport { buttonGroupVariants, buttonGroupSeparatorVariants } from './ButtonGroup.variants';\nimport { isButtonElement, getPosition } from './ButtonGroup.utils';\nimport type { ButtonGroupProps, ButtonGroupSeparatorProps } from './ButtonGroup.types';\n\n// =============================================================================\n// ButtonGroup Component\n// =============================================================================\n\n/**\n * ButtonGroup - Groups related buttons with connected styling and keyboard navigation\n *\n * Uses React Aria's Toolbar for:\n * - Roving tabindex (single tab stop)\n * - Arrow key navigation\n * - Home/End key support\n * - RTL support\n *\n * @example\n * ```tsx\n * <ButtonGroup aria-label=\"Text formatting\">\n *   <Button variant=\"outline\">Bold</Button>\n *   <Button variant=\"outline\">Italic</Button>\n *   <Button variant=\"outline\">Underline</Button>\n * </ButtonGroup>\n * ```\n */\nconst ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      orientation = 'horizontal',\n      variant,\n      size,\n      isDisabled,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ): ReactElement => {\n    // Convert children to array for enumeration\n    const childArray = Children.toArray(children);\n\n    // Filter to get only Button elements for position calculation\n    const buttonChildren = childArray.filter(isButtonElement);\n    const totalButtons = buttonChildren.length;\n\n    // Create context value for group-level props\n    const groupContextValue = {\n      orientation,\n      variant,\n      size,\n      isDisabled,\n    };\n\n    // Wrap each child with appropriate context\n    const wrappedChildren = childArray.map((child, index) => {\n      // If it's a Button, wrap with item context for position\n      if (isButtonElement(child)) {\n        const buttonIndex = buttonChildren.indexOf(child);\n        const position = getPosition(buttonIndex, totalButtons);\n\n        return (\n          <ButtonGroupItemContext.Provider\n            key={index}\n            value={{ position }}\n          >\n            {child}\n          </ButtonGroupItemContext.Provider>\n        );\n      }\n\n      // Non-Button children (Separators, etc.) pass through without item context\n      return child;\n    });\n\n    return (\n      <Toolbar\n        ref={ref}\n        orientation={orientation}\n        aria-label={props['aria-label']}\n        aria-labelledby={props['aria-labelledby']}\n        className={cn(buttonGroupVariants({ orientation }), className)}\n      >\n        <ButtonGroupContext.Provider value={groupContextValue}>\n          {wrappedChildren}\n        </ButtonGroupContext.Provider>\n      </Toolbar>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n\n// =============================================================================\n// ButtonGroupSeparator Component\n// =============================================================================\n\n/**\n * ButtonGroupSeparator - Visual divider between button groups\n *\n * Renders a decorative separator that:\n * - Adapts to orientation (vertical line for horizontal, horizontal for vertical)\n * - Is hidden from screen readers (aria-hidden)\n * - Is excluded from keyboard navigation\n *\n * @example\n * ```tsx\n * <ButtonGroup aria-label=\"Editor actions\">\n *   <Button>Undo</Button>\n *   <Button>Redo</Button>\n *   <ButtonGroupSeparator />\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n * </ButtonGroup>\n * ```\n */\nconst ButtonGroupSeparator = forwardRef<HTMLDivElement, ButtonGroupSeparatorProps>(\n  ({ className, ...props }, ref): ReactElement => {\n    const groupContext = useButtonGroupContext();\n    const orientation = groupContext?.orientation ?? 'horizontal';\n\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-hidden=\"true\"\n        className={cn(\n          buttonGroupSeparatorVariants({ orientation }),\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\n\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ButtonGroup, ButtonGroupSeparator };\n","import { z } from 'zod';\nimport type { ReactNode } from 'react';\n\n/**\n * ButtonGroup Component Types\n *\n * Defines Zod schemas and TypeScript types for the ButtonGroup component.\n * Uses a two-level context pattern:\n * - ButtonGroupContext: Group-level props (orientation, variant, size, isDisabled)\n * - ButtonGroupItemContext: Per-button position information\n *\n * @see plan.md for architecture details\n * @see constitution.md Principle II (Type Safety First)\n */\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/**\n * Orientation of the button group\n */\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical';\n\n/**\n * Position of a button within the group\n * Used for position-aware border-radius styling\n */\nexport type ButtonPosition = 'first' | 'middle' | 'last' | 'only';\n\n/**\n * Button variants (matches Themis Button variants, excluding 'link')\n * Link variant is excluded as it doesn't make sense in a grouped context\n */\nexport type ButtonGroupVariant =\n  | 'default'\n  | 'destructive'\n  | 'outline'\n  | 'secondary'\n  | 'ghost';\n\n/**\n * Button sizes (matches Themis Button sizes)\n */\nexport type ButtonGroupSize = 'sm' | 'default' | 'lg' | 'icon';\n\n// =============================================================================\n// Zod Schemas\n// =============================================================================\n\n/**\n * ButtonGroup props schema\n * Validates all props for the ButtonGroup container component\n */\nexport const ButtonGroupPropsSchema = z.object({\n  /** Orientation of the button group layout */\n  orientation: z\n    .enum(['horizontal', 'vertical'])\n    .optional()\n    .default('horizontal'),\n\n  /** Default variant for all child buttons (can be overridden per-button) */\n  variant: z\n    .enum(['default', 'destructive', 'outline', 'secondary', 'ghost'])\n    .optional(),\n\n  /** Default size for all child buttons (can be overridden per-button) */\n  size: z.enum(['sm', 'default', 'lg', 'icon']).optional(),\n\n  /** Disable all buttons in the group */\n  isDisabled: z.boolean().optional(),\n\n  /** Accessible label for the toolbar (recommended) */\n  'aria-label': z.string().optional(),\n\n  /** ID of element that labels the toolbar */\n  'aria-labelledby': z.string().optional(),\n\n  /** Additional CSS classes */\n  className: z.string().optional(),\n\n  /** Child elements (Buttons, Separators, etc.) */\n  children: z.custom<ReactNode>(),\n});\n\n/**\n * ButtonGroupSeparator props schema\n * Validates props for the visual separator between button groups\n */\nexport const ButtonGroupSeparatorPropsSchema = z.object({\n  /** Additional CSS classes */\n  className: z.string().optional(),\n  /** Test ID for testing */\n  'data-testid': z.string().optional(),\n});\n\n// =============================================================================\n// TypeScript Types (inferred from schemas)\n// =============================================================================\n\n/**\n * Props for the ButtonGroup container component\n */\nexport type ButtonGroupProps = z.infer<typeof ButtonGroupPropsSchema>;\n\n/**\n * Props for the ButtonGroupSeparator component\n */\nexport type ButtonGroupSeparatorProps = z.infer<\n  typeof ButtonGroupSeparatorPropsSchema\n>;\n\n// =============================================================================\n// Context Types\n// =============================================================================\n\n/**\n * Group-level context value\n * Provides inherited props to all child buttons\n */\nexport interface ButtonGroupContextValue {\n  /** Orientation of the group (affects keyboard navigation and styling) */\n  orientation: ButtonGroupOrientation;\n  /** Default variant for buttons (can be overridden) */\n  variant?: ButtonGroupVariant;\n  /** Default size for buttons (can be overridden) */\n  size?: ButtonGroupSize;\n  /** Whether all buttons in the group are disabled */\n  isDisabled?: boolean;\n}\n\n/**\n * Item-level context value\n * Provides position information to each button for border-radius styling\n */\nexport interface ButtonGroupItemContextValue {\n  /** Position of this button in the group */\n  position: ButtonPosition;\n}\n"]}

package/dist/chunk-RFX7QKA7.mjs

@@ -0,0 +1,180 @@
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { forwardRef, Children, isValidElement, cloneElement, memo } from 'react';
+import { MenuTrigger, Button, Popover, Menu, SubmenuTrigger, MenuItem, Separator, Header } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { ChevronRight } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var menuVariants = cva(
+  // Base styles - semantic tokens with fallbacks
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--menu-border)] bg-[var(--menu-background)] text-[var(--menu-foreground)] shadow-md data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 p-1",
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var menuItemVariants = cva(
+  // Base styles - FR-014: 44x44px minimum touch targets
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 min-h-[44px] data-[focused]:bg-[var(--menu-accent)] data-[focused]:text-[var(--menu-accent-foreground)] data-[pressed]:bg-[var(--menu-accent)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var DropdownRoot = forwardRef(
+  ({ defaultOpen = false, isOpen, onOpenChange, children }, _ref) => {
+    const childArray = Children.toArray(children);
+    const hasTrigger = childArray.some(
+      (child) => isValidElement(child) && (child.type === DropdownTrigger || child.type.displayName === "DropdownTrigger")
+    );
+    const hasMenu = childArray.some(
+      (child) => isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    if (!hasTrigger || !hasMenu) {
+      throw new Error(
+        "Dropdown requires exactly one Dropdown.Trigger and one Dropdown.Menu as children"
+      );
+    }
+    return /* @__PURE__ */ jsx(MenuTrigger, { defaultOpen, isOpen, onOpenChange, children });
+  }
+);
+DropdownRoot.displayName = "Dropdown";
+var DropdownTrigger = forwardRef(
+  ({ children, ...props }, ref) => {
+    if (isValidElement(children)) {
+      return cloneElement(children, {
+        ...props,
+        slot: "trigger"
+      });
+    }
+    return /* @__PURE__ */ jsx(Button, { ref, ...props, children });
+  }
+);
+DropdownTrigger.displayName = "DropdownTrigger";
+var DropdownMenu = forwardRef(
+  ({ align = "start", side = "bottom", className, children, ...props }, _ref) => {
+    const placement = `${side} ${align}`;
+    return /* @__PURE__ */ jsx(Popover, { placement, className: "entering:animate-in exiting:animate-out", children: /* @__PURE__ */ jsx(
+      Menu,
+      {
+        className: cn(menuVariants({ variant: "default" }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownItem = forwardRef(
+  ({
+    children,
+    onAction,
+    isDisabled = false,
+    shortcut,
+    icon,
+    iconRight,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, _ref) => {
+    const childArray = Children.toArray(children);
+    const hasSubmenu = childArray.some(
+      (child) => isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    const contentChildren = childArray.filter(
+      (child) => !isValidElement(child) || child.type !== DropdownMenu && child.type.displayName !== "DropdownMenu"
+    );
+    const submenu = childArray.find(
+      (child) => isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    if (hasSubmenu && submenu) {
+      return /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [
+        /* @__PURE__ */ jsxs(
+          MenuItem,
+          {
+            "aria-label": ariaLabel,
+            className: cn(menuItemVariants({ variant: "default" }), className),
+            ...props,
+            children: [
+              icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: icon }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: contentChildren }),
+              /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        submenu
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        onAction,
+        isDisabled,
+        "aria-label": ariaLabel,
+        className: cn(menuItemVariants({ variant: "default" }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+          iconRight && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: iconRight }),
+          shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--border)] bg-[var(--accent-background)] px-1.5 font-mono text-[10px] font-medium text-[var(--menu-muted)] opacity-100", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem";
+var DropdownSeparator = memo(forwardRef(
+  ({ className, ...props }, _ref) => {
+    return /* @__PURE__ */ jsx(
+      Separator,
+      {
+        className: cn(
+          "-mx-1 my-1 h-px bg-[var(--accent-background)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+));
+DropdownSeparator.displayName = "DropdownSeparator";
+var DropdownLabel = memo(forwardRef(
+  ({ children, className, ...props }, _ref) => {
+    return /* @__PURE__ */ jsx(
+      Header,
+      {
+        className: cn(
+          "px-2 py-1.5 text-sm font-semibold text-[var(--menu-muted)]",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+));
+DropdownLabel.displayName = "DropdownLabel";
+var Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTrigger,
+  Menu: DropdownMenu,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+  Label: DropdownLabel
+});
+
+export { Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, DropdownTrigger, menuItemVariants, menuVariants };
+//# sourceMappingURL=chunk-RFX7QKA7.mjs.map
+//# sourceMappingURL=chunk-RFX7QKA7.mjs.map

package/dist/chunk-RFX7QKA7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Dropdown/Dropdown.tsx"],"names":["AriaMenuTrigger","AriaButton","AriaPopover","AriaMenu","AriaSubmenuTrigger","AriaMenuItem","AriaSeparator","AriaHeader"],"mappings":"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","file":"chunk-RFX7QKA7.mjs","sourcesContent":["\"use client\";\n\n/**\n * Dropdown Menu Component\n * Accessible dropdown menu with React Aria primitives, nested submenus, and CVA styling\n *\n * @see spec.md FR-001 to FR-054 (Dropdown Component Requirements)\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see spec.md FR-014 (44x44px minimum touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, Children, isValidElement, type ReactNode, type ReactElement, cloneElement } from 'react';\nimport {\n  MenuTrigger as AriaMenuTrigger,\n  SubmenuTrigger as AriaSubmenuTrigger,\n  Button as AriaButton,\n  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  Separator as AriaSeparator,\n  Header as AriaHeader,\n  Popover as AriaPopover,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { ChevronRight } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport type {\n  DropdownProps,\n  DropdownTriggerProps,\n  DropdownMenuProps,\n  DropdownItemProps,\n  DropdownSeparatorProps,\n  DropdownLabelProps,\n} from './Dropdown.types';\n\n/**\n * Menu variant styles using CVA\n * @see spec.md FR-040 (CVA for variant styling - single \"default\" variant for v1)\n */\nconst menuVariants = cva(\n  // Base styles - semantic tokens with fallbacks\n  \"z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--menu-border)] bg-[var(--menu-background)] text-[var(--menu-foreground)] shadow-md data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 p-1\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Menu Item variant styles using CVA\n * @see spec.md FR-041 (CVA for item states: hover, focus, active, disabled)\n */\nconst menuItemVariants = cva(\n  // Base styles - FR-014: 44x44px minimum touch targets\n  \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 min-h-[44px] data-[focused]:bg-[var(--menu-accent)] data-[focused]:text-[var(--menu-accent-foreground)] data-[pressed]:bg-[var(--menu-accent)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\n/**\n * Dropdown Root Component\n * Manages open/close state and coordinates Trigger and Menu children\n *\n * @see spec.md FR-001 to FR-007\n */\ninterface InternalDropdownProps extends DropdownProps {\n  children: ReactNode;\n}\n\nconst DropdownRoot = forwardRef<HTMLDivElement, InternalDropdownProps>(\n  ({ defaultOpen = false, isOpen, onOpenChange, children }, _ref) => {\n    // Validate children: must have exactly one Trigger and one Menu\n    const childArray = Children.toArray(children);\n    const hasTrigger = childArray.some(\n      (child) =>\n        isValidElement(child) &&\n        (child.type === DropdownTrigger || (child.type as any).displayName === 'DropdownTrigger')\n    );\n    const hasMenu = childArray.some(\n      (child) =>\n        isValidElement(child) &&\n        (child.type === DropdownMenu || (child.type as any).displayName === 'DropdownMenu')\n    );\n\n    if (!hasTrigger || !hasMenu) {\n      throw new Error(\n        'Dropdown requires exactly one Dropdown.Trigger and one Dropdown.Menu as children'\n      );\n    }\n\n    return (\n      <AriaMenuTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        {children}\n      </AriaMenuTrigger>\n    );\n  }\n);\n\nDropdownRoot.displayName = 'Dropdown';\n\n/**\n * Dropdown.Trigger Component\n * Wraps trigger element (typically Button) with proper ARIA attributes\n *\n * @see spec.md FR-008 to FR-012\n */\nconst DropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(\n  ({ children, ...props }, ref) => {\n    // Clone child and add ref if it's a single React element\n    if (isValidElement(children)) {\n      return cloneElement(children as ReactElement<any>, {\n        ...props,\n        slot: 'trigger',\n      });\n    }\n\n    // Fallback: wrap in AriaButton if not a React element\n    return (\n      <AriaButton ref={ref} {...props}>\n        {children}\n      </AriaButton>\n    );\n  }\n);\n\nDropdownTrigger.displayName = 'DropdownTrigger';\n\n/**\n * Dropdown.Menu Component\n * Renders menu with positioning, collision detection, and focus management\n *\n * @see spec.md FR-014 to FR-024\n */\nconst DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(\n  ({ align = 'start', side = 'bottom', className, children, ...props }, _ref) => {\n    // Map align to React Aria placement\n    const placement = `${side} ${align}` as any;\n\n    return (\n      <AriaPopover placement={placement} className=\"entering:animate-in exiting:animate-out\">\n        <AriaMenu\n          className={cn(menuVariants({ variant: 'default' }), className)}\n          {...props}\n        >\n          {children}\n        </AriaMenu>\n      </AriaPopover>\n    );\n  }\n);\n\nDropdownMenu.displayName = 'DropdownMenu';\n\n/**\n * Dropdown.Item Component\n * Menu item with action callbacks, disabled state, shortcuts, icons, and nested submenu support\n *\n * @see spec.md FR-025 to FR-034\n */\nconst DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  (\n    {\n      children,\n      onAction,\n      isDisabled = false,\n      shortcut,\n      icon,\n      iconRight,\n      className,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    _ref\n  ) => {\n    // Check if this item contains a nested submenu\n    const childArray = Children.toArray(children);\n    const hasSubmenu = childArray.some(\n      (child) =>\n        isValidElement(child) &&\n        (child.type === DropdownMenu || (child.type as any).displayName === 'DropdownMenu')\n    );\n\n    // Filter children to separate submenu from content\n    const contentChildren = childArray.filter(\n      (child) =>\n        !isValidElement(child) ||\n        (child.type !== DropdownMenu && (child.type as any).displayName !== 'DropdownMenu')\n    );\n\n    const submenu = childArray.find(\n      (child) =>\n        isValidElement(child) &&\n        (child.type === DropdownMenu || (child.type as any).displayName === 'DropdownMenu')\n    );\n\n    if (hasSubmenu && submenu) {\n      // Render as submenu trigger using React Aria's SubmenuTrigger\n      return (\n        <AriaSubmenuTrigger>\n          <AriaMenuItem\n            aria-label={ariaLabel}\n            className={cn(menuItemVariants({ variant: 'default' }), className)}\n            {...props}\n          >\n            {icon && <span className=\"mr-2\">{icon}</span>}\n            <span className=\"flex-1\">{contentChildren}</span>\n            <ChevronRight className=\"ml-auto h-4 w-4\" aria-hidden=\"true\" />\n          </AriaMenuItem>\n          {submenu as ReactElement}\n        </AriaSubmenuTrigger>\n      );\n    }\n\n    // Regular menu item\n    return (\n      <AriaMenuItem\n        onAction={onAction}\n        isDisabled={isDisabled}\n        aria-label={ariaLabel}\n        className={cn(menuItemVariants({ variant: 'default' }), className)}\n        {...props}\n      >\n        {icon && <span className=\"mr-2\">{icon}</span>}\n        <span className=\"flex-1\">{children}</span>\n        {iconRight && <span className=\"ml-auto\">{iconRight}</span>}\n        {shortcut && (\n          <kbd className=\"ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--border)] bg-[var(--accent-background)] px-1.5 font-mono text-[10px] font-medium text-[var(--menu-muted)] opacity-100\">\n            {shortcut}\n          </kbd>\n        )}\n      </AriaMenuItem>\n    );\n  }\n);\n\nDropdownItem.displayName = 'DropdownItem';\n\n/**\n * Dropdown.Separator Component\n * Non-focusable visual divider\n *\n * @see spec.md FR-043 to FR-045\n */\nconst DropdownSeparator = memo(forwardRef<HTMLDivElement, DropdownSeparatorProps>(\n  ({ className, ...props }, _ref) => {\n    return (\n      <AriaSeparator\n        className={cn(\n          '-mx-1 my-1 h-px bg-[var(--accent-background)]',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n));\n\nDropdownSeparator.displayName = 'DropdownSeparator';\n\n/**\n * Dropdown.Label Component\n * Non-interactive section header\n *\n * @see spec.md FR-046 to FR-048\n */\nconst DropdownLabel = memo(forwardRef<HTMLDivElement, DropdownLabelProps>(\n  ({ children, className, ...props }, _ref) => {\n    return (\n      <AriaHeader\n        className={cn(\n          'px-2 py-1.5 text-sm font-semibold text-[var(--menu-muted)]',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </AriaHeader>\n    );\n  }\n));\n\nDropdownLabel.displayName = 'DropdownLabel';\n\n/**\n * Export compound component\n */\nexport const Dropdown = Object.assign(DropdownRoot, {\n  Trigger: DropdownTrigger,\n  Menu: DropdownMenu,\n  Item: DropdownItem,\n  Separator: DropdownSeparator,\n  Label: DropdownLabel,\n});\n\n// Export individual components for flexibility\nexport { DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparator, DropdownLabel };\n\n// Export variant functions for external use\nexport { menuVariants, menuItemVariants };\n\n// Export types\nexport type {\n  DropdownProps,\n  DropdownTriggerProps,\n  DropdownMenuProps,\n  DropdownItemProps,\n  DropdownSeparatorProps,\n  DropdownLabelProps,\n};\n"]}