@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Dropdown/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/Dropdown/Dropdown.tsx"],"names":["AriaMenuTrigger","AriaButton","AriaPopover","AriaMenu","AriaSubmenuTrigger","AriaMenuItem","AriaSeparator","AriaHeader"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","\"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"]}