@tribepad/themis 1.0.0

package/dist/chunk-FWQYB22U.js

@@ -0,0 +1,183 @@
+'use strict';
+
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var tooltipContentVariants = classVarianceAuthority.cva(
+  // Base styles
+  [
+    "z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md",
+    // Inverted colors for high contrast (7:1 ratio)
+    "bg-[var(--content-foreground)] text-[var(--content-background)]",
+    // Entry animation base
+    "animate-in fade-in-0",
+    // Exit animation
+    "data-[exiting]:animate-out data-[exiting]:fade-out-0"
+  ],
+  {
+    variants: {
+      side: {
+        top: [
+          "motion-safe:slide-in-from-bottom-2",
+          "data-[exiting]:motion-safe:slide-out-to-bottom-2"
+        ],
+        bottom: [
+          "motion-safe:slide-in-from-top-2",
+          "data-[exiting]:motion-safe:slide-out-to-top-2"
+        ],
+        left: [
+          "motion-safe:slide-in-from-right-2",
+          "data-[exiting]:motion-safe:slide-out-to-right-2"
+        ],
+        right: [
+          "motion-safe:slide-in-from-left-2",
+          "data-[exiting]:motion-safe:slide-out-to-left-2"
+        ]
+      }
+    },
+    defaultVariants: {
+      side: "top"
+    }
+  }
+);
+var tooltipArrowVariants = classVarianceAuthority.cva(
+  // Base arrow styles
+  "fill-[var(--content-foreground)]",
+  {
+    variants: {
+      side: {
+        top: "rotate-180",
+        bottom: "rotate-0",
+        left: "rotate-90",
+        right: "-rotate-90"
+      }
+    },
+    defaultVariants: {
+      side: "top"
+    }
+  }
+);
+function placementToSide(placement) {
+  if (!placement) return "top";
+  const basePlacement = placement.split(" ")[0];
+  if (basePlacement === "top" || basePlacement === "bottom" || basePlacement === "left" || basePlacement === "right") {
+    return basePlacement;
+  }
+  return "top";
+}
+function TooltipRoot({
+  children,
+  delay = 700,
+  closeDelay = 300,
+  trigger = "hover",
+  isOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false
+}) {
+  const effectiveDelay = trigger === "focus" ? 99999999 : delay;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.TooltipTrigger,
+    {
+      delay: effectiveDelay,
+      closeDelay,
+      isOpen,
+      defaultOpen,
+      onOpenChange,
+      isDisabled,
+      children
+    }
+  );
+}
+TooltipRoot.displayName = "Tooltip";
+function TooltipTriggerComponent({
+  children
+}) {
+  return children;
+}
+TooltipTriggerComponent.displayName = "TooltipTrigger";
+function TooltipContentComponent({
+  children,
+  side = "top",
+  sideOffset = 4,
+  alignOffset = 0,
+  shouldFlip = true,
+  showArrow = false,
+  arrowSize = 8,
+  className,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Tooltip,
+    {
+      placement: side,
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip,
+      ...restProps,
+      className: reactAriaComponents.composeRenderProps(className, (className2, renderProps) => {
+        const actualSide = placementToSide(renderProps.placement);
+        return chunkVIREG536_js.cn(
+          tooltipContentVariants({ side: actualSide }),
+          className2
+        );
+      }),
+      children: (renderProps) => {
+        const actualSide = placementToSide(renderProps.placement);
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showArrow && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.OverlayArrow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: arrowSize,
+              height: arrowSize,
+              viewBox: "0 0 8 8",
+              className: tooltipArrowVariants({ side: actualSide }),
+              "data-testid": "tooltip-arrow",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0 L4 4 L8 0" })
+            }
+          ) }),
+          children
+        ] });
+      }
+    }
+  );
+}
+TooltipContentComponent.displayName = "TooltipContent";
+function TooltipArrowComponent({
+  size = 8,
+  className,
+  "data-testid": dataTestId = "tooltip-arrow",
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.OverlayArrow, { children: ({ placement }) => {
+    const side = placementToSide(placement);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 8 8",
+        className: chunkVIREG536_js.cn(tooltipArrowVariants({ side }), className),
+        "data-testid": dataTestId,
+        ...restProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0 L4 4 L8 0" })
+      }
+    );
+  } });
+}
+TooltipArrowComponent.displayName = "TooltipArrow";
+var Tooltip = TooltipRoot;
+var TooltipTrigger = TooltipTriggerComponent;
+var TooltipContent = TooltipContentComponent;
+var TooltipArrow = TooltipArrowComponent;
+
+exports.Tooltip = Tooltip;
+exports.TooltipArrow = TooltipArrow;
+exports.TooltipContent = TooltipContent;
+exports.TooltipTrigger = TooltipTrigger;
+exports.tooltipArrowVariants = tooltipArrowVariants;
+exports.tooltipContentVariants = tooltipContentVariants;
+//# sourceMappingURL=chunk-FWQYB22U.js.map
+//# sourceMappingURL=chunk-FWQYB22U.js.map

package/dist/chunk-FWQYB22U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Tooltip/Tooltip.tsx"],"names":["cva","jsx","AriaTooltipTrigger","AriaTooltip","composeRenderProps","className","cn","jsxs","Fragment","OverlayArrow"],"mappings":"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","file":"chunk-FWQYB22U.js","sourcesContent":["\"use client\";\n\n/**\n * Tooltip Component - Implementation\n *\n * Accessible tooltip component combining React Aria primitives with ShadCN styling.\n * Follows Themis library patterns with compound component structure.\n *\n * @see plan.md (Implementation plan)\n * @see Tooltip.types.ts (Zod schemas)\n * @see tooltip-prd.md (Full requirements)\n */\n\nimport { type ReactElement } from 'react';\nimport {\n  TooltipTrigger as AriaTooltipTrigger,\n  Tooltip as AriaTooltip,\n  OverlayArrow,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport type {\n  TooltipProps,\n  TooltipTriggerProps,\n  TooltipContentProps,\n  TooltipArrowProps,\n  TooltipSide,\n} from './Tooltip.types';\n\n/**\n * CVA Variants for TooltipContent\n *\n * Placement-based animations and high-contrast inverted colors.\n *\n * @see plan.md (CVA Variant Structure)\n * @see tooltip-prd.md US-2 (Configurable Placement)\n */\nexport const tooltipContentVariants = cva(\n  // Base styles\n  [\n    \"z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md\",\n    // Inverted colors for high contrast (7:1 ratio)\n    \"bg-[var(--content-foreground)] text-[var(--content-background)]\",\n    // Entry animation base\n    \"animate-in fade-in-0\",\n    // Exit animation\n    \"data-[exiting]:animate-out data-[exiting]:fade-out-0\",\n  ],\n  {\n    variants: {\n      side: {\n        top: [\n          \"motion-safe:slide-in-from-bottom-2\",\n          \"data-[exiting]:motion-safe:slide-out-to-bottom-2\",\n        ],\n        bottom: [\n          \"motion-safe:slide-in-from-top-2\",\n          \"data-[exiting]:motion-safe:slide-out-to-top-2\",\n        ],\n        left: [\n          \"motion-safe:slide-in-from-right-2\",\n          \"data-[exiting]:motion-safe:slide-out-to-right-2\",\n        ],\n        right: [\n          \"motion-safe:slide-in-from-left-2\",\n          \"data-[exiting]:motion-safe:slide-out-to-left-2\",\n        ],\n      },\n    },\n    defaultVariants: {\n      side: \"top\",\n    },\n  }\n);\n\n/**\n * CVA Variants for TooltipArrow\n *\n * Rotation based on placement for correct arrow pointing direction.\n *\n * @see tooltip-prd.md US-2 (Arrow Indicator)\n */\nexport const tooltipArrowVariants = cva(\n  // Base arrow styles\n  \"fill-[var(--content-foreground)]\",\n  {\n    variants: {\n      side: {\n        top: \"rotate-180\",\n        bottom: \"rotate-0\",\n        left: \"rotate-90\",\n        right: \"-rotate-90\",\n      },\n    },\n    defaultVariants: {\n      side: \"top\",\n    },\n  }\n);\n\n/**\n * Map React Aria placement to our side prop\n * React Aria uses placement prop with values like 'top', 'bottom', etc.\n * PlacementAxis can be 'top' | 'bottom' | 'left' | 'right' | null\n */\nfunction placementToSide(placement: string | null | undefined): TooltipSide {\n  if (!placement) return 'top';\n  // Extract the base placement (e.g., 'top start' -> 'top')\n  const basePlacement = placement.split(' ')[0];\n  if (basePlacement === 'top' || basePlacement === 'bottom' ||\n      basePlacement === 'left' || basePlacement === 'right') {\n    return basePlacement;\n  }\n  return 'top';\n}\n\n/**\n * Tooltip Root Component\n *\n * Manages tooltip open/close state, delays, and trigger behavior.\n * Wraps React Aria's TooltipTrigger with delay configuration.\n *\n * @see tooltip-prd.md US-1 (Basic Usage)\n * @see tooltip-prd.md US-3 (Delay Configuration)\n * @see tooltip-prd.md US-7 (Controlled State)\n */\nfunction TooltipRoot({\n  children,\n  delay = 700,\n  closeDelay = 300,\n  trigger = 'hover',\n  isOpen,\n  defaultOpen = false,\n  onOpenChange,\n  isDisabled = false,\n}: TooltipProps): ReactElement {\n  // React Aria doesn't have a direct trigger mode prop\n  // 'focus' mode is achieved by setting delay to a very high value\n  // and relying on focus to trigger immediately\n  const effectiveDelay = trigger === 'focus' ? 99999999 : delay;\n\n  return (\n    <AriaTooltipTrigger\n      delay={effectiveDelay}\n      closeDelay={closeDelay}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      isDisabled={isDisabled}\n    >\n      {children}\n    </AriaTooltipTrigger>\n  );\n}\n\nTooltipRoot.displayName = 'Tooltip';\n\n/**\n * TooltipTrigger Component\n *\n * Wrapper for the element that triggers the tooltip.\n * The child element must be focusable (or wrapped with Focusable).\n *\n * React Aria's TooltipTrigger automatically applies:\n * - aria-describedby linking to tooltip\n * - Hover and focus event handlers\n *\n * @see tooltip-prd.md US-5 (Non-Button Triggers)\n */\nfunction TooltipTriggerComponent({\n  children,\n}: TooltipTriggerProps): ReactElement {\n  // React Aria's TooltipTrigger expects the trigger element as a direct child\n  // We pass through the child element directly\n  return children as ReactElement;\n}\n\nTooltipTriggerComponent.displayName = 'TooltipTrigger';\n\n/**\n * TooltipContent Component\n *\n * The actual tooltip overlay that appears.\n * Supports placement, offset, and optional arrow.\n *\n * @see tooltip-prd.md US-2 (Placement and Arrow)\n * @see tooltip-prd.md Technical Implementation Details\n */\nfunction TooltipContentComponent({\n  children,\n  side = 'top',\n  sideOffset = 4,\n  alignOffset = 0,\n  shouldFlip = true,\n  showArrow = false,\n  arrowSize = 8,\n  className,\n  ...restProps\n}: TooltipContentProps & { 'data-testid'?: string }): ReactElement {\n  return (\n    <AriaTooltip\n      placement={side}\n      offset={sideOffset}\n      crossOffset={alignOffset}\n      shouldFlip={shouldFlip}\n      {...restProps}\n      className={composeRenderProps(className, (className, renderProps) => {\n        // Get actual placement from render props for animation direction\n        const actualSide = placementToSide(renderProps.placement);\n        return cn(\n          tooltipContentVariants({ side: actualSide }),\n          className\n        );\n      })}\n    >\n      {(renderProps) => {\n        const actualSide = placementToSide(renderProps.placement);\n        return (\n          <>\n            {showArrow && (\n              <OverlayArrow>\n                <svg\n                  width={arrowSize}\n                  height={arrowSize}\n                  viewBox=\"0 0 8 8\"\n                  className={tooltipArrowVariants({ side: actualSide })}\n                  data-testid=\"tooltip-arrow\"\n                >\n                  <path d=\"M0 0 L4 4 L8 0\" />\n                </svg>\n              </OverlayArrow>\n            )}\n            {children}\n          </>\n        );\n      }}\n    </AriaTooltip>\n  );\n}\n\nTooltipContentComponent.displayName = 'TooltipContent';\n\n/**\n * TooltipArrow Component\n *\n * Optional arrow component for custom arrow rendering.\n * Automatically positioned based on tooltip placement.\n *\n * Note: This is an alternative to using showArrow prop on TooltipContent.\n * Use this when you need custom arrow styling or rendering.\n *\n * @see tooltip-prd.md US-2 (Arrow Indicator)\n */\nfunction TooltipArrowComponent({\n  size = 8,\n  className,\n  'data-testid': dataTestId = 'tooltip-arrow',\n  ...restProps\n}: TooltipArrowProps & { 'data-testid'?: string }): ReactElement {\n  // This component is designed to be used inside TooltipContent\n  // The actual positioning is handled by OverlayArrow from React Aria\n  return (\n    <OverlayArrow>\n      {({ placement }) => {\n        const side = placementToSide(placement);\n        return (\n          <svg\n            width={size}\n            height={size}\n            viewBox=\"0 0 8 8\"\n            className={cn(tooltipArrowVariants({ side }), className)}\n            data-testid={dataTestId}\n            {...restProps}\n          >\n            <path d=\"M0 0 L4 4 L8 0\" />\n          </svg>\n        );\n      }}\n    </OverlayArrow>\n  );\n}\n\nTooltipArrowComponent.displayName = 'TooltipArrow';\n\n/**\n * Export all components\n *\n * Following Themis pattern - export individual components\n * No Object.assign compound pattern for Tooltip since React Aria\n * expects specific component hierarchy.\n */\nexport const Tooltip = TooltipRoot;\nexport const TooltipTrigger = TooltipTriggerComponent;\nexport const TooltipContent = TooltipContentComponent;\nexport const TooltipArrow = TooltipArrowComponent;\n"]}

package/dist/chunk-GD5GHTMA.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var menuVariants = classVarianceAuthority.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 = classVarianceAuthority.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 = react.forwardRef(
+  ({ defaultOpen = false, isOpen, onOpenChange, children }, _ref) => {
+    const childArray = react.Children.toArray(children);
+    const hasTrigger = childArray.some(
+      (child) => react.isValidElement(child) && (child.type === DropdownTrigger || child.type.displayName === "DropdownTrigger")
+    );
+    const hasMenu = childArray.some(
+      (child) => react.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__ */ jsxRuntime.jsx(reactAriaComponents.MenuTrigger, { defaultOpen, isOpen, onOpenChange, children });
+  }
+);
+DropdownRoot.displayName = "Dropdown";
+var DropdownTrigger = react.forwardRef(
+  ({ children, ...props }, ref) => {
+    if (react.isValidElement(children)) {
+      return react.cloneElement(children, {
+        ...props,
+        slot: "trigger"
+      });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { ref, ...props, children });
+  }
+);
+DropdownTrigger.displayName = "DropdownTrigger";
+var DropdownMenu = react.forwardRef(
+  ({ align = "start", side = "bottom", className, children, ...props }, _ref) => {
+    const placement = `${side} ${align}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { placement, className: "entering:animate-in exiting:animate-out", children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Menu,
+      {
+        className: chunkVIREG536_js.cn(menuVariants({ variant: "default" }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownItem = react.forwardRef(
+  ({
+    children,
+    onAction,
+    isDisabled = false,
+    shortcut,
+    icon,
+    iconRight,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, _ref) => {
+    const childArray = react.Children.toArray(children);
+    const hasSubmenu = childArray.some(
+      (child) => react.isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    const contentChildren = childArray.filter(
+      (child) => !react.isValidElement(child) || child.type !== DropdownMenu && child.type.displayName !== "DropdownMenu"
+    );
+    const submenu = childArray.find(
+      (child) => react.isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    if (hasSubmenu && submenu) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.SubmenuTrigger, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactAriaComponents.MenuItem,
+          {
+            "aria-label": ariaLabel,
+            className: chunkVIREG536_js.cn(menuItemVariants({ variant: "default" }), className),
+            ...props,
+            children: [
+              icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: contentChildren }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto h-4 w-4", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        submenu
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.MenuItem,
+      {
+        onAction,
+        isDisabled,
+        "aria-label": ariaLabel,
+        className: chunkVIREG536_js.cn(menuItemVariants({ variant: "default" }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+          iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: iconRight }),
+          shortcut && /* @__PURE__ */ jsxRuntime.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 = react.memo(react.forwardRef(
+  ({ className, ...props }, _ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Separator,
+      {
+        className: chunkVIREG536_js.cn(
+          "-mx-1 my-1 h-px bg-[var(--accent-background)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+));
+DropdownSeparator.displayName = "DropdownSeparator";
+var DropdownLabel = react.memo(react.forwardRef(
+  ({ children, className, ...props }, _ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Header,
+      {
+        className: chunkVIREG536_js.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
+});
+
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+exports.DropdownLabel = DropdownLabel;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownSeparator = DropdownSeparator;
+exports.DropdownTrigger = DropdownTrigger;
+exports.menuItemVariants = menuItemVariants;
+exports.menuVariants = menuVariants;
+//# sourceMappingURL=chunk-GD5GHTMA.js.map
+//# sourceMappingURL=chunk-GD5GHTMA.js.map

package/dist/chunk-GD5GHTMA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Dropdown/Dropdown.tsx"],"names":["cva","forwardRef","Children","isValidElement","jsx","AriaMenuTrigger","cloneElement","AriaButton","AriaPopover","AriaMenu","cn","AriaSubmenuTrigger","jsxs","AriaMenuItem","ChevronRight","memo","AriaSeparator","AriaHeader"],"mappings":"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","file":"chunk-GD5GHTMA.js","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"]}