@humain/ui 2.1.62 → 2.1.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/ai/AIToolCall/AIToolCall.d.ts +9 -3
- package/dist/components/organisms/ai/AIToolRun/index.d.ts +1 -1
- package/dist/components/organisms/ai/AIToolRun/validation.d.ts +24 -3
- package/dist/components/organisms/ai/_shared/format-ai-duration.d.ts +1 -0
- package/dist/components/organisms/ai/_shared/workflow-step-renderer.d.ts +1 -0
- package/dist/index.js +52 -52
- package/dist/index151.js +1 -1
- package/dist/index174.js +10 -333
- package/dist/index174.js.map +1 -1
- package/dist/index175.js +310 -137
- package/dist/index175.js.map +1 -1
- package/dist/index176.js +148 -174
- package/dist/index176.js.map +1 -1
- package/dist/index177.js +186 -78
- package/dist/index177.js.map +1 -1
- package/dist/index178.js +74 -124
- package/dist/index178.js.map +1 -1
- package/dist/index179.js +133 -1
- package/dist/index179.js.map +1 -0
- package/dist/index180.js +2 -201
- package/dist/index181.js +201 -0
- package/dist/{index180.js.map → index181.js.map} +1 -1
- package/dist/index183.js +130 -166
- package/dist/index183.js.map +1 -1
- package/dist/index184.js +195 -983
- package/dist/index184.js.map +1 -1
- package/dist/index185.js +1069 -369
- package/dist/index185.js.map +1 -1
- package/dist/index186.js +395 -197
- package/dist/index186.js.map +1 -1
- package/dist/index187.js +198 -243
- package/dist/index187.js.map +1 -1
- package/dist/index188.js +263 -3
- package/dist/index188.js.map +1 -1
- package/dist/index189.js +3 -209
- package/dist/index189.js.map +1 -1
- package/dist/index190.js +190 -777
- package/dist/index190.js.map +1 -1
- package/dist/index191.js +771 -252
- package/dist/index191.js.map +1 -1
- package/dist/index192.js +250 -65
- package/dist/index192.js.map +1 -1
- package/dist/index193.js +72 -523
- package/dist/index193.js.map +1 -1
- package/dist/index194.js +537 -144
- package/dist/index194.js.map +1 -1
- package/dist/index195.js +139 -720
- package/dist/index195.js.map +1 -1
- package/dist/index196.js +707 -167
- package/dist/index196.js.map +1 -1
- package/dist/index197.js +175 -151
- package/dist/index197.js.map +1 -1
- package/dist/index198.js +152 -487
- package/dist/index198.js.map +1 -1
- package/dist/index199.js +472 -225
- package/dist/index199.js.map +1 -1
- package/dist/index200.js +236 -260
- package/dist/index200.js.map +1 -1
- package/dist/index201.js +265 -215
- package/dist/index201.js.map +1 -1
- package/dist/index202.js +207 -307
- package/dist/index202.js.map +1 -1
- package/dist/index203.js +302 -135
- package/dist/index203.js.map +1 -1
- package/dist/index204.js +140 -271
- package/dist/index204.js.map +1 -1
- package/dist/index205.js +263 -253
- package/dist/index205.js.map +1 -1
- package/dist/index206.js +244 -137
- package/dist/index206.js.map +1 -1
- package/dist/index207.js +100 -238
- package/dist/index207.js.map +1 -1
- package/dist/index208.js +278 -74
- package/dist/index208.js.map +1 -1
- package/dist/index209.js +56 -97
- package/dist/index209.js.map +1 -1
- package/dist/index210.js +142 -47
- package/dist/index210.js.map +1 -1
- package/dist/index211.js +38 -84
- package/dist/index211.js.map +1 -1
- package/dist/index212.js +72 -252
- package/dist/index212.js.map +1 -1
- package/dist/index213.js +274 -26
- package/dist/index213.js.map +1 -1
- package/dist/index214.js +29 -94
- package/dist/index214.js.map +1 -1
- package/dist/index215.js +98 -25
- package/dist/index215.js.map +1 -1
- package/dist/index216.js +20 -565
- package/dist/index216.js.map +1 -1
- package/dist/index217.js +564 -17
- package/dist/index217.js.map +1 -1
- package/dist/index218.js +20 -23
- package/dist/index218.js.map +1 -1
- package/dist/index219.js +20 -95
- package/dist/index219.js.map +1 -1
- package/dist/index220.js +92 -88
- package/dist/index220.js.map +1 -1
- package/dist/index221.js +97 -29
- package/dist/index221.js.map +1 -1
- package/dist/index222.js +24 -470
- package/dist/index222.js.map +1 -1
- package/dist/index223.js +446 -196
- package/dist/index223.js.map +1 -1
- package/dist/index224.js +199 -729
- package/dist/index224.js.map +1 -1
- package/dist/index225.js +750 -61
- package/dist/index225.js.map +1 -1
- package/dist/index226.js +58 -181
- package/dist/index226.js.map +1 -1
- package/dist/index227.js +175 -259
- package/dist/index227.js.map +1 -1
- package/dist/index228.js +246 -172
- package/dist/index228.js.map +1 -1
- package/dist/index229.js +195 -32
- package/dist/index229.js.map +1 -1
- package/dist/index230.js +12 -40
- package/dist/index230.js.map +1 -1
- package/dist/index231.js +23 -26
- package/dist/index231.js.map +1 -1
- package/dist/index232.js +45 -22
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +27 -48
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +52 -26
- package/dist/index234.js.map +1 -1
- package/dist/index235.js +40 -225
- package/dist/index235.js.map +1 -1
- package/dist/index236.js +217 -39
- package/dist/index236.js.map +1 -1
- package/dist/index237.js +50 -0
- package/dist/index237.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/wc/AIToolCall.js +218 -0
- package/dist/wc/AIToolCall.js.map +1 -0
- package/dist/wc/hf-ai-tool-call.js +34 -219
- package/dist/wc/hf-ai-tool-call.js.map +1 -1
- package/dist/wc/hf-ai-tool-run.js +673 -576
- package/dist/wc/hf-ai-tool-run.js.map +1 -1
- package/dist/wc/workflow-step-renderer.js +94 -86
- package/dist/wc/workflow-step-renderer.js.map +1 -1
- package/dist/wc-react/AIToolCall.js +218 -0
- package/dist/wc-react/AIToolCall.js.map +1 -0
- package/dist/wc-react/hf-ai-tool-call.js +32 -217
- package/dist/wc-react/hf-ai-tool-call.js.map +1 -1
- package/dist/wc-react/hf-ai-tool-run.js +698 -601
- package/dist/wc-react/hf-ai-tool-run.js.map +1 -1
- package/dist/wc-react/workflow-step-renderer.js +76 -68
- package/dist/wc-react/workflow-step-renderer.js.map +1 -1
- package/package.json +1 -1
- package/skills/humain-ui/SKILL.md +1 -1
- package/skills/humain-ui-wc/SKILL.md +1 -1
- package/skills/humain-ui-wc.skill +0 -0
- package/skills/humain-ui.skill +0 -0
- package/dist/index182.js +0 -143
- package/dist/index182.js.map +0 -1
- package/dist/wc/wrench.js +0 -10
- package/dist/wc/wrench.js.map +0 -1
- package/dist/wc-react/wrench.js +0 -10
- package/dist/wc-react/wrench.js.map +0 -1
package/dist/index191.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index191.js","names":[],"sources":["../src/components/organisms/menus/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { Check, ChevronRight } from 'lucide-react';\nimport type * as React from 'react';\nimport { Kbd } from '@/components/molecules/data/Kbd';\nimport { cn } from '@/lib/utils';\n\n// ============================================================================\n// Base Primitives\n// ============================================================================\n\nfunction DropdownMenuRoot({ ...props }: MenuPrimitive.Root.Props) {\n return <MenuPrimitive.Root data-slot=\"dropdown-menu-root\" {...props} />;\n}\nDropdownMenuRoot.displayName = 'DropdownMenu.Root';\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\nDropdownMenuPortal.displayName = 'DropdownMenu.Portal';\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\nDropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\nDropdownMenuGroup.displayName = 'DropdownMenu.Group';\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\nDropdownMenuSub.displayName = 'DropdownMenu.Sub';\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean;\n}) {\n return (\n <MenuPrimitive.SubmenuTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dd-sub flex cursor-default items-center outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-[color,background-color,transform] duration-150 active:scale-[0.99]\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRight className=\"ms-auto rtl:rotate-180 transition-transform duration-150 group-data-open/dd-sub:translate-x-0.5\" />\n </MenuPrimitive.SubmenuTrigger>\n );\n}\nDropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n return (\n <MenuPrimitive.RadioGroup\n data-slot=\"dropdown-menu-radio-group\"\n {...props}\n />\n );\n}\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: MenuPrimitive.RadioItem.Props) {\n return (\n <MenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-2 pe-8 ps-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-150\",\n className,\n )}\n {...props}\n >\n <span\n className=\"pointer-events-none absolute end-2 flex items-center justify-center\"\n data-slot=\"dropdown-menu-radio-item-indicator\"\n >\n <MenuPrimitive.RadioItemIndicator className=\"animate-in zoom-in-75 duration-150 motion-reduce:animate-none\">\n <Check />\n </MenuPrimitive.RadioItemIndicator>\n </span>\n {children}\n </MenuPrimitive.RadioItem>\n );\n}\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n return (\n <MenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-2 pe-8 ps-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-150\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n className=\"pointer-events-none absolute end-2 flex items-center justify-center\"\n data-slot=\"dropdown-menu-checkbox-item-indicator\"\n >\n <MenuPrimitive.CheckboxItemIndicator className=\"animate-in zoom-in-75 duration-150 motion-reduce:animate-none\">\n <Check />\n </MenuPrimitive.CheckboxItemIndicator>\n </span>\n {children}\n </MenuPrimitive.CheckboxItem>\n );\n}\nDropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n 'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ms-auto text-xs tracking-widest',\n className,\n )}\n {...props}\n />\n );\n}\nDropdownMenuShortcut.displayName = 'DropdownMenu.Shortcut';\n\n// ============================================================================\n// Enhanced Components\n// ============================================================================\n\n// Width variant classes for popup\nconst popupWidthClasses = {\n auto: '',\n sm: 'w-48',\n md: 'w-56',\n lg: 'w-64',\n};\n\n/**\n * Enhanced DropdownMenuPopup with HumainOS styling\n */\nexport interface DropdownMenuPopupProps\n extends React.HTMLAttributes<HTMLDivElement> {\n /** Menu content */\n children?: React.ReactNode;\n /** Width of the dropdown menu */\n width?: 'auto' | 'sm' | 'md' | 'lg';\n /** Side offset from the trigger */\n sideOffset?: number;\n /** Side to show the menu on */\n side?: 'top' | 'right' | 'bottom' | 'left';\n /** Alignment of the menu */\n align?: 'start' | 'center' | 'end';\n /** Align offset */\n alignOffset?: number;\n}\n\nfunction DropdownMenuPopup({\n align = 'start',\n alignOffset = 0,\n side = 'bottom',\n sideOffset = 4,\n width = 'auto',\n className,\n ...props\n}: DropdownMenuPopupProps) {\n return (\n <MenuPrimitive.Portal>\n <MenuPrimitive.Positioner\n className=\"isolate z-50 outline-none\"\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <MenuPrimitive.Popup\n data-slot=\"dropdown-menu-popup\"\n className={cn(\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n 'border border-border bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-sm z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',\n 'duration-200 motion-reduce:animate-none',\n popupWidthClasses[width],\n className,\n )}\n {...props}\n />\n </MenuPrimitive.Positioner>\n </MenuPrimitive.Portal>\n );\n}\nDropdownMenuPopup.displayName = 'DropdownMenu.Popup';\n\nfunction DropdownMenuSubPopup({\n align = 'start',\n alignOffset = -3,\n side = 'right',\n sideOffset = 0,\n className,\n ...props\n}: DropdownMenuPopupProps) {\n return (\n <DropdownMenuPopup\n data-slot=\"dropdown-menu-sub-popup\"\n className={cn('min-w-[96px] w-auto', className)}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n {...props}\n />\n );\n}\nDropdownMenuSubPopup.displayName = 'DropdownMenu.SubPopup';\n\n/**\n * Header section for dropdown menu with avatar and user info\n */\nexport interface DropdownMenuHeaderProps extends React.ComponentProps<'div'> {\n /** Avatar element to display */\n avatar?: React.ReactNode;\n /** Primary text (e.g., user name) */\n title?: string;\n /** Secondary text (e.g., email) */\n subtitle?: string;\n}\n\nfunction DropdownMenuHeader({\n className,\n avatar,\n title,\n subtitle,\n children,\n ...props\n}: DropdownMenuHeaderProps) {\n if (children) {\n return (\n <div\n data-slot=\"dropdown-menu-header\"\n className={cn('border-b border-border px-4 py-3', className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n return (\n <div\n data-slot=\"dropdown-menu-header\"\n className={cn('border-b border-border px-4 py-3', className)}\n {...props}\n >\n <div className=\"flex items-center gap-3\">\n {avatar}\n <div className=\"flex flex-col min-w-0\">\n {title && (\n <span className=\"text-sm font-semibold text-foreground truncate\">\n {title}\n </span>\n )}\n {subtitle && (\n <span className=\"text-sm text-muted-foreground truncate\">\n {subtitle}\n </span>\n )}\n </div>\n </div>\n </div>\n );\n}\nDropdownMenuHeader.displayName = 'DropdownMenu.Header';\n\nexport interface DropdownMenuLabelProps\n extends React.HTMLAttributes<HTMLDivElement> {\n /** Whether the label is inset */\n inset?: boolean;\n}\n\n/**\n * Enhanced DropdownMenuLabel\n */\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: DropdownMenuLabelProps) {\n return (\n <MenuPrimitive.GroupLabel\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n 'px-4 py-2 text-xs font-medium text-text-quaternary uppercase tracking-wider',\n 'data-[inset]:ps-8',\n className,\n )}\n {...props}\n />\n );\n}\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\n/**\n * Enhanced DropdownMenuItem with icon and shortcut support\n */\nexport interface DropdownMenuItemProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n /** Item content */\n children?: React.ReactNode;\n /** Icon displayed before the label */\n icon?: React.ReactNode;\n /** Keyboard shortcut displayed on the right */\n shortcut?: string;\n /** Makes the item destructive (red text) */\n destructive?: boolean;\n /** Whether the item is disabled */\n disabled?: boolean;\n /**\n * Render as a different element (Base UI pattern).\n * Use this to render as a custom component like Link or anchor.\n * @example render={<Link to=\"/profile\" />}\n */\n render?: React.ReactElement;\n /** Whether the item is inset */\n inset?: boolean;\n /** Variant for styling */\n variant?: 'default' | 'destructive';\n}\n\nfunction DropdownMenuItem({\n className,\n icon,\n shortcut,\n destructive = false,\n render,\n inset,\n variant = 'default',\n children,\n ...props\n}: DropdownMenuItemProps) {\n const isDestructive = destructive || variant === 'destructive';\n\n return (\n <MenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={isDestructive ? 'destructive' : variant}\n className={cn(\n 'group/dropdown-menu-item relative flex items-center gap-2 mx-1.5 px-2.5 py-2 rounded-md cursor-pointer outline-none',\n 'text-sm font-semibold text-secondary-foreground',\n 'focus:bg-muted focus:text-secondary-foreground',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n 'data-[inset]:ps-8',\n \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n 'transition-[color,background-color,transform] duration-150 active:scale-[0.99]',\n isDestructive &&\n 'text-destructive focus:text-destructive focus:bg-destructive/10',\n className,\n )}\n render={render}\n {...props}\n >\n {icon && (\n <span\n className={cn(\n 'size-4 shrink-0 transition-colors duration-150',\n isDestructive\n ? 'text-destructive'\n : 'text-text-quaternary group-focus/dropdown-menu-item:text-secondary-foreground',\n )}\n >\n {icon}\n </span>\n )}\n <span className=\"flex-1\">{children}</span>\n {shortcut && (\n <DropdownMenuShortcutBadge className=\"transition-colors duration-150 group-focus/dropdown-menu-item:bg-primary/10 group-focus/dropdown-menu-item:text-primary\">\n {shortcut}\n </DropdownMenuShortcutBadge>\n )}\n </MenuPrimitive.Item>\n );\n}\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\nexport interface DropdownMenuSeparatorProps\n extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Enhanced DropdownMenuSeparator\n */\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: DropdownMenuSeparatorProps) {\n return (\n <MenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn('my-1 h-px bg-surface-2', className)}\n {...props}\n />\n );\n}\nDropdownMenuSeparator.displayName = 'DropdownMenu.Separator';\n\nexport interface DropdownMenuItemsProps\n extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Container for menu items with proper padding\n */\nfunction DropdownMenuItems({\n className,\n children,\n ...props\n}: DropdownMenuItemsProps) {\n return (\n <div\n data-slot=\"dropdown-menu-items\"\n className={cn('py-1', className)}\n {...props}\n >\n {children}\n </div>\n );\n}\nDropdownMenuItems.displayName = 'DropdownMenu.Items';\n\n/**\n * Styled shortcut badge that matches Figma design (uses Kbd wrapper)\n */\nfunction DropdownMenuShortcutBadge({\n className,\n children,\n ...props\n}: React.ComponentProps<'kbd'>) {\n return (\n <Kbd variant=\"outline\" size=\"xs\" className={className} {...props}>\n {children}\n </Kbd>\n );\n}\nDropdownMenuShortcutBadge.displayName = 'DropdownMenu.ShortcutBadge';\n\n// ============================================================================\n// SimpleDropdownMenu (with trigger prop pattern)\n// ============================================================================\n\nexport interface SimpleDropdownMenuProps {\n /** The element that triggers the dropdown (required) */\n trigger: React.ReactElement;\n /** Dropdown content (typically DropdownMenu.Popup component) */\n children?: React.ReactNode;\n /** Controlled open state. When provided, component is controlled. */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Simplified DropdownMenu component with explicit trigger prop.\n * Prevents nested button hydration errors by using base-ui's render prop.\n *\n * @example\n * <SimpleDropdownMenu trigger={<Button>Menu</Button>}>\n * <DropdownMenu.Popup>\n * <DropdownMenu.Items>\n * <DropdownMenu.Item>Option 1</DropdownMenu.Item>\n * </DropdownMenu.Items>\n * </DropdownMenu.Popup>\n * </SimpleDropdownMenu>\n */\nfunction SimpleDropdownMenu({\n trigger,\n open,\n onOpenChange,\n children,\n}: SimpleDropdownMenuProps) {\n return (\n <DropdownMenuRoot open={open} onOpenChange={onOpenChange}>\n <DropdownMenuTrigger render={trigger} />\n {children}\n </DropdownMenuRoot>\n );\n}\nSimpleDropdownMenu.displayName = 'DropdownMenu.Simple';\n\n// ============================================================================\n// Compound Export (Dot Notation Pattern)\n// ============================================================================\n\nexport const DropdownMenu = Object.assign(DropdownMenuRoot, {\n Root: DropdownMenuRoot,\n Portal: DropdownMenuPortal,\n Trigger: DropdownMenuTrigger,\n Popup: DropdownMenuPopup,\n Group: DropdownMenuGroup,\n Label: DropdownMenuLabel,\n Item: DropdownMenuItem,\n CheckboxItem: DropdownMenuCheckboxItem,\n RadioGroup: DropdownMenuRadioGroup,\n RadioItem: DropdownMenuRadioItem,\n Separator: DropdownMenuSeparator,\n Shortcut: DropdownMenuShortcut,\n ShortcutBadge: DropdownMenuShortcutBadge,\n Sub: DropdownMenuSub,\n SubTrigger: DropdownMenuSubTrigger,\n SubPopup: DropdownMenuSubPopup,\n Header: DropdownMenuHeader,\n Items: DropdownMenuItems,\n Simple: SimpleDropdownMenu,\n});\n\n// ============================================================================\n// Type Exports\n// ============================================================================\n\nexport type DropdownMenuPopupWrapperProps = DropdownMenuPopupProps;\nexport type DropdownMenuItemWrapperProps = DropdownMenuItemProps;\nexport type DropdownMenuHeaderWrapperProps = DropdownMenuHeaderProps;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index191.js","names":[],"sources":["../src/components/organisms/content/DataTable/DataTable.tsx"],"sourcesContent":["import {\n type ColumnDef,\n type ColumnFiltersState,\n type ExpandedState,\n flexRender,\n type GroupingState,\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getGroupedRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type PaginationState,\n type Row,\n type RowData,\n type RowSelectionState,\n type SortingState,\n type Table as TanStackTable,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n ArrowDown,\n ArrowUp,\n ChevronRight,\n ChevronsUpDown,\n CircleHelp,\n} from 'lucide-react';\nimport * as React from 'react';\nimport {\n Pagination,\n type PaginationShape,\n type PaginationSize,\n type PaginationType,\n} from '@/components/molecules/navigation/Pagination';\nimport { Tooltip } from '@/components/organisms/overlays/Tooltip';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/components/ui/table';\nimport { cn } from '@/lib/utils';\nimport { dataTableTouchTargetClassName } from './DataTableHitArea';\n\nexport type ResponsiveColumnMeta = {\n /** Keep the column visible at all sizes, desktop only, or mobile only */\n priority?: 'always' | 'desktop' | 'mobile';\n /** Hide the column below the named container breakpoint */\n hideBelow?: 'sm' | 'md' | 'lg';\n};\n\ntype ResponsiveColumnBreakpoint = NonNullable<\n ResponsiveColumnMeta['hideBelow']\n>;\ntype ResponsiveColumnPriority = NonNullable<ResponsiveColumnMeta['priority']>;\ntype ResponsiveColumnVisibilitySlot = 'base' | ResponsiveColumnBreakpoint;\ntype ResponsiveStickySlots = {\n firstSlots: ResponsiveColumnVisibilitySlot[];\n lastSlots: ResponsiveColumnVisibilitySlot[];\n};\n\nconst responsiveColumnBreakpointClasses: Record<\n ResponsiveColumnBreakpoint,\n string\n> = {\n sm: '@sm:table-cell',\n md: '@md:table-cell',\n lg: '@lg:table-cell',\n};\n\nconst responsiveColumnVisibilitySlots = [\n 'base',\n 'sm',\n 'md',\n 'lg',\n] as const satisfies readonly ResponsiveColumnVisibilitySlot[];\n\nconst responsiveColumnVisibilityRanks: Record<\n ResponsiveColumnVisibilitySlot,\n number\n> = {\n base: 0,\n sm: 1,\n md: 2,\n lg: 3,\n};\n\ndeclare module '@tanstack/react-table' {\n interface ColumnMeta<TData extends RowData, TValue> {\n /** Custom class name for header cell */\n headerClassName?: string;\n /** Custom class name for body cells */\n cellClassName?: string;\n /** Tooltip text shown via info icon next to header */\n headerTooltip?: string;\n /** Responsive visibility for table columns when DataTable responsiveColumns is enabled */\n responsive?: ResponsiveColumnMeta;\n }\n}\n\n/* ============================================\n DataTable Variants\n ============================================ */\n\nconst dataTableVariants = cva('w-full', {\n variants: {\n /** Visual style for row separation */\n dividers: {\n /** Border line between rows */\n line: '',\n /** Alternating row background fills */\n alternating: '',\n },\n /** Table density */\n density: {\n default: '',\n compact: '',\n },\n },\n defaultVariants: {\n dividers: 'line',\n density: 'default',\n },\n});\n\nconst dataTableContainerVariants = cva('bg-card', {\n variants: {\n /** Border radius configuration */\n rounded: {\n /** Rounded on all corners (default) */\n all: 'rounded-xl',\n /** No rounding on any corner */\n none: 'rounded-none',\n /** Only top corners rounded */\n top: 'rounded-t-xl rounded-b-none',\n /** Only bottom corners rounded (for embedding in cards with headers) */\n bottom: 'rounded-t-none rounded-b-xl',\n },\n /** Whether to show the outer border */\n bordered: {\n true: 'border border-border shadow-xs',\n false: '',\n },\n },\n defaultVariants: {\n rounded: 'all',\n bordered: true,\n },\n});\n\nconst dataTableRowVariants = cva(\n 'transition-colors duration-150 ease-out motion-reduce:transition-none',\n {\n variants: {\n dividers: {\n line: 'border-b border-border-subtle',\n alternating: 'border-0',\n },\n density: {\n default: '',\n compact: '',\n },\n isEven: {\n true: '',\n false: '',\n },\n isSelected: {\n true: 'bg-muted dark:bg-accent shadow-[inset_3px_0_0_0_var(--color-primary)] rtl:shadow-[inset_-3px_0_0_0_var(--color-primary)]',\n false: '',\n },\n },\n compoundVariants: [\n // Alternating row colors (only when not selected)\n {\n dividers: 'alternating',\n isEven: true,\n isSelected: false,\n className: 'bg-muted',\n },\n {\n dividers: 'alternating',\n isEven: false,\n isSelected: false,\n className: 'bg-background dark:bg-card',\n },\n ],\n defaultVariants: {\n dividers: 'line',\n density: 'default',\n isEven: false,\n isSelected: false,\n },\n },\n);\n\nconst dataTableCellVariants = cva('align-middle', {\n variants: {\n density: {\n default: 'h-[72px] ps-4 pe-4 py-3 @md:ps-6 @md:pe-6 @md:py-3',\n compact: 'h-14 ps-4 pe-4 py-2',\n },\n },\n defaultVariants: {\n density: 'default',\n },\n});\n\nconst dataTableHeaderCellVariants = cva(\n 'text-sm font-medium text-muted-foreground',\n {\n variants: {\n density: {\n default: 'h-11 ps-6 pe-6 py-3',\n compact: 'h-11 ps-4 pe-4 py-2',\n },\n },\n defaultVariants: {\n density: 'default',\n },\n },\n);\n\nfunction getStickyCellClass({\n stickyFirstColumn,\n stickyLastColumn,\n isFirstColumn,\n isLastColumn,\n isSelected,\n}: {\n stickyFirstColumn: boolean;\n stickyLastColumn: boolean;\n isFirstColumn: boolean;\n isLastColumn: boolean;\n isSelected: boolean;\n}): string | undefined {\n const isSticky =\n (stickyFirstColumn && isFirstColumn) || (stickyLastColumn && isLastColumn);\n\n if (!isSticky) {\n return undefined;\n }\n\n return cn(\n 'sticky z-20',\n stickyFirstColumn && isFirstColumn && 'start-0',\n stickyLastColumn && isLastColumn && 'end-0',\n isSelected ? 'bg-muted dark:bg-accent' : 'bg-background dark:bg-card',\n );\n}\n\nfunction getResponsiveColumnPriority(\n priority: unknown,\n): ResponsiveColumnPriority | undefined {\n switch (priority) {\n case 'always':\n case 'desktop':\n case 'mobile':\n return priority;\n default:\n return undefined;\n }\n}\n\nfunction getResponsiveColumnHideBelow(\n hideBelow: unknown,\n): ResponsiveColumnBreakpoint | undefined {\n switch (hideBelow) {\n case 'sm':\n case 'md':\n case 'lg':\n return hideBelow;\n default:\n return undefined;\n }\n}\n\nfunction isColumnVisibleInResponsiveSlot(\n responsive: ResponsiveColumnMeta | undefined,\n enabled: boolean,\n slot: ResponsiveColumnVisibilitySlot,\n): boolean {\n if (!enabled || !responsive) {\n return true;\n }\n\n const priority = getResponsiveColumnPriority(responsive.priority);\n if (priority === 'always') {\n return true;\n }\n\n if (priority === 'mobile') {\n return slot === 'base' || slot === 'sm';\n }\n\n const hideBelow = getResponsiveColumnHideBelow(responsive.hideBelow) ?? 'md';\n\n return (\n responsiveColumnVisibilityRanks[slot] >=\n responsiveColumnVisibilityRanks[hideBelow]\n );\n}\n\nfunction withResponsiveSlotVariant(\n slot: ResponsiveColumnVisibilitySlot,\n className: string,\n): string {\n if (slot === 'base') {\n return className;\n }\n\n return className\n .split(' ')\n .map((token) => `@${slot}:${token}`)\n .join(' ');\n}\n\nfunction getResponsiveStickyStateClass({\n backgroundClass,\n side,\n slots,\n zIndexClass,\n}: {\n backgroundClass: string;\n side: 'start' | 'end';\n slots: ResponsiveColumnVisibilitySlot[];\n zIndexClass: 'z-20' | 'z-30';\n}): string | undefined {\n if (!slots.length) {\n return undefined;\n }\n\n const stickySlots = new Set(slots);\n const classes: string[] = [];\n let wasSticky = false;\n\n for (const slot of responsiveColumnVisibilitySlots) {\n const isSticky = stickySlots.has(slot);\n\n if (isSticky && !wasSticky) {\n classes.push(\n withResponsiveSlotVariant(\n slot,\n cn('sticky', zIndexClass, `${side}-0`, backgroundClass),\n ),\n );\n } else if (!isSticky && wasSticky) {\n classes.push(\n withResponsiveSlotVariant(slot, 'static z-auto start-auto end-auto'),\n );\n }\n\n wasSticky = isSticky;\n }\n\n return cn(classes);\n}\n\nfunction addResponsiveStickySlot<TItem>(\n slotMap: Map<string, ResponsiveStickySlots>,\n item: TItem | undefined,\n getId: (item: TItem) => string,\n slot: ResponsiveColumnVisibilitySlot,\n slotKey: keyof ResponsiveStickySlots,\n): void {\n if (!item) {\n return;\n }\n\n const itemId = getId(item);\n const itemSlots = slotMap.get(itemId) ?? {\n firstSlots: [],\n lastSlots: [],\n };\n itemSlots[slotKey].push(slot);\n slotMap.set(itemId, itemSlots);\n}\n\nfunction getResponsiveStickySlotsById<TItem>({\n enabled,\n getId,\n getResponsive,\n items,\n stickyFirstColumn,\n stickyLastColumn,\n}: {\n enabled: boolean;\n getId: (item: TItem) => string;\n getResponsive: (item: TItem) => ResponsiveColumnMeta | undefined;\n items: readonly TItem[];\n stickyFirstColumn: boolean;\n stickyLastColumn: boolean;\n}): Map<string, ResponsiveStickySlots> {\n const slotMap = new Map<string, ResponsiveStickySlots>();\n\n if (!enabled || !(stickyFirstColumn || stickyLastColumn)) {\n return slotMap;\n }\n\n for (const slot of responsiveColumnVisibilitySlots) {\n const visibleItems = items.filter((item) =>\n isColumnVisibleInResponsiveSlot(getResponsive(item), enabled, slot),\n );\n\n if (stickyFirstColumn) {\n addResponsiveStickySlot(\n slotMap,\n visibleItems[0],\n getId,\n slot,\n 'firstSlots',\n );\n }\n\n if (stickyLastColumn) {\n addResponsiveStickySlot(\n slotMap,\n visibleItems.at(-1),\n getId,\n slot,\n 'lastSlots',\n );\n }\n }\n\n return slotMap;\n}\n\nfunction getResponsiveStickyClass({\n backgroundClass,\n firstSlots,\n lastSlots,\n zIndexClass = 'z-20',\n}: {\n backgroundClass: string;\n firstSlots: ResponsiveColumnVisibilitySlot[];\n lastSlots: ResponsiveColumnVisibilitySlot[];\n zIndexClass?: 'z-20' | 'z-30';\n}): string | undefined {\n return cn(\n getResponsiveStickyStateClass({\n backgroundClass,\n side: 'start',\n slots: firstSlots,\n zIndexClass,\n }),\n getResponsiveStickyStateClass({\n backgroundClass,\n side: 'end',\n slots: lastSlots,\n zIndexClass,\n }),\n );\n}\n\nfunction getHeaderCellWidth(size: number): number | undefined {\n if (size === 150) {\n return undefined;\n }\n\n return size;\n}\n\nfunction getAriaSort(\n sortState: false | 'asc' | 'desc',\n): 'ascending' | 'descending' | undefined {\n if (sortState === 'asc') {\n return 'ascending';\n }\n\n if (sortState === 'desc') {\n return 'descending';\n }\n\n return undefined;\n}\n\nfunction getResponsiveColumnClass(\n responsive: ResponsiveColumnMeta | undefined,\n enabled: boolean,\n): string | undefined {\n if (!enabled || !responsive) {\n return undefined;\n }\n\n const priority = getResponsiveColumnPriority(responsive.priority);\n\n if (priority === 'always') {\n return undefined;\n }\n\n if (priority === 'mobile') {\n return '@md:hidden';\n }\n\n const hideBelow = getResponsiveColumnHideBelow(responsive.hideBelow) ?? 'md';\n\n return `hidden ${responsiveColumnBreakpointClasses[hideBelow]}`;\n}\n\nfunction getVirtualRowStyle(\n start: number,\n headerOffset: number,\n): React.CSSProperties {\n return {\n display: 'table',\n position: 'absolute',\n top: 0,\n insetInlineStart: 0,\n width: '100%',\n transform: `translateY(${start + headerOffset}px)`,\n };\n}\n\n/* ============================================\n Types\n ============================================ */\n\nexport interface DataTableProps<TData, TValue>\n extends VariantProps<typeof dataTableVariants>,\n VariantProps<typeof dataTableContainerVariants> {\n /** Column definitions for the table */\n columns: ColumnDef<TData, TValue>[];\n /** Data to display in the table */\n data: TData[];\n /** Optional content rendered above the table, commonly DataTableToolbar */\n children?: React.ReactNode;\n\n /* ============================================\n Row Selection (Controlled & Uncontrolled)\n ============================================ */\n /** Enable row selection */\n enableRowSelection?: boolean;\n /** Enable multi-row selection */\n enableMultiRowSelection?: boolean;\n /** Controlled row selection state */\n rowSelection?: RowSelectionState;\n /** Callback when row selection changes (receives TanStack Updater) */\n onRowSelectionChange?: (\n updater:\n | RowSelectionState\n | ((old: RowSelectionState) => RowSelectionState),\n ) => void;\n /** Initial row selection state (uncontrolled) */\n initialRowSelection?: RowSelectionState;\n\n /* ============================================\n Sorting (Controlled & Uncontrolled)\n ============================================ */\n /** Enable sorting */\n enableSorting?: boolean;\n /** Sorting mode: 'client' = sort data locally, 'server' = fire callback only */\n sortingMode?: 'client' | 'server';\n /** Controlled sorting state */\n sorting?: SortingState;\n /** Callback when sorting changes (receives TanStack Updater) */\n onSortingChange?: (\n updater: SortingState | ((old: SortingState) => SortingState),\n ) => void;\n /** Initial sorting state (uncontrolled) */\n initialSorting?: SortingState;\n\n /* ============================================\n Pagination (Controlled & Uncontrolled)\n ============================================ */\n /** Enable pagination */\n enablePagination?: boolean;\n /** Pagination mode: 'client' = paginate data locally, 'server' = use pageCount, 'none' = no pagination UI */\n paginationMode?: 'client' | 'server' | 'none';\n /** Controlled pagination state */\n pagination?: PaginationState;\n /** Callback when pagination changes (receives TanStack Updater) */\n onPaginationChange?: (\n updater: PaginationState | ((old: PaginationState) => PaginationState),\n ) => void;\n /** Total number of pages (for server mode) */\n pageCount?: number;\n /** Total number of rows (alternative to pageCount for server mode) */\n rowCount?: number;\n /** Page size for pagination (uncontrolled) */\n pageSize?: number;\n /** Initial page index (uncontrolled) */\n initialPageIndex?: number;\n /* ============================================\n Column Filters (Controlled & Uncontrolled)\n ============================================ */\n /** Enable column filters */\n enableColumnFilters?: boolean;\n /** Filtering mode: 'client' = filter data locally, 'server' = fire callback only */\n filteringMode?: 'client' | 'server';\n /** Controlled column filters state */\n columnFilters?: ColumnFiltersState;\n /** Callback when column filters change (receives TanStack Updater) */\n onColumnFiltersChange?: (\n updater:\n | ColumnFiltersState\n | ((old: ColumnFiltersState) => ColumnFiltersState),\n ) => void;\n /** Initial column filters state (uncontrolled) */\n initialColumnFilters?: ColumnFiltersState;\n\n /* ============================================\n Column Visibility (Controlled & Uncontrolled)\n ============================================ */\n /** Enable column visibility */\n enableColumnVisibility?: boolean;\n /** Controlled column visibility state */\n columnVisibility?: VisibilityState;\n /** Callback when column visibility changes (receives TanStack Updater) */\n onColumnVisibilityChange?: (\n updater: VisibilityState | ((old: VisibilityState) => VisibilityState),\n ) => void;\n /** Initial column visibility state (uncontrolled) */\n initialColumnVisibility?: VisibilityState;\n\n /* ============================================\n Grouping (Controlled & Uncontrolled)\n ============================================ */\n /** Enable grouping */\n enableGrouping?: boolean;\n /** Grouping mode: 'client' = group data locally, 'server' = data has subRows structure */\n groupingMode?: 'client' | 'server';\n /** Controlled grouping state */\n grouping?: GroupingState;\n /** Callback when grouping changes */\n onGroupingChange?: (\n updater: GroupingState | ((old: GroupingState) => GroupingState),\n ) => void;\n /** Initial grouping state (uncontrolled) */\n initialGrouping?: GroupingState;\n /** How grouped columns appear: 'remove' hides them, 'reorder' moves to start, false = no change */\n groupedColumnMode?: 'remove' | 'reorder' | false;\n\n /* ============================================\n Expansion (for grouped rows)\n ============================================ */\n /** Controlled expansion state */\n expanded?: ExpandedState;\n /** Callback when expansion changes */\n onExpandedChange?: (\n updater: ExpandedState | ((old: ExpandedState) => ExpandedState),\n ) => void;\n /** Initial expansion: true = all expanded, {} = all collapsed, or per-row object */\n initialExpanded?: ExpandedState;\n /** For server mode: extract subRows from data items */\n getSubRows?: (originalRow: TData, index: number) => TData[] | undefined;\n\n /* ============================================\n UI & Behavior\n ============================================ */\n /** Pagination variant type */\n paginationType?: PaginationType;\n /** Pagination shape */\n paginationShape?: PaginationShape;\n /** Pagination control size */\n paginationSize?: PaginationSize;\n /** Whether page-number pagination variants should render page buttons */\n paginationShowPageNumbers?: boolean;\n /** Accessible label for the pagination nav landmark (useful when multiple tables are on one page) */\n paginationLabel?: string;\n /** Get the row id for selection. Recommended for stable row identity; falls back to row index. */\n getRowId?: (row: TData, index: number, parent?: Row<TData>) => string;\n /** Callback when a row is clicked */\n onRowClick?: (row: Row<TData>) => void;\n /** Custom empty state content */\n emptyState?: React.ReactNode;\n /** Additional className */\n className?: string;\n /** Table caption for accessibility */\n caption?: string;\n /** Show header checkbox for select all */\n showSelectAll?: boolean;\n /** Apply column.meta.responsive visibility classes at container breakpoints */\n responsiveColumns?: boolean;\n /** Render function for the table instance (for external controls) */\n renderControls?: (table: TanStackTable<TData>) => React.ReactNode;\n /** Custom class names for table elements */\n classNames?: {\n table?: string;\n headerRow?: string;\n headerCell?: string;\n row?: string;\n cell?: string;\n };\n /** Custom render function for table body (replaces default body rendering) */\n renderBody?: (table: TanStackTable<TData>) => React.ReactNode;\n /** Custom render function for each row (replaces default row rendering) */\n renderRow?: (row: Row<TData>) => React.ReactNode;\n /** Custom render function for group header rows (when using grouping) */\n renderGroupHeader?: (\n row: Row<TData>,\n visibleColumnCount: number,\n ) => React.ReactNode;\n\n /* ============================================\n Scrolling & Sticky\n ============================================ */\n /** Maximum height for table body (enables vertical scrolling) */\n maxHeight?: string;\n /** Make table header sticky when scrolling */\n stickyHeader?: boolean;\n /** Make first column sticky when scrolling horizontally */\n stickyFirstColumn?: boolean;\n /** Make last column sticky when scrolling horizontally */\n stickyLastColumn?: boolean;\n\n /* ============================================\n Loading/Empty/Error States\n ============================================ */\n /** Show loading state */\n loading?: boolean;\n /** Custom loading state content */\n loadingState?: React.ReactNode;\n /** Error to display */\n error?: Error | null;\n /** Custom error state content */\n errorState?: React.ReactNode;\n\n /* ============================================\n Internationalization (i18n)\n ============================================ */\n /** Internationalization labels */\n i18n?: {\n /** Loading text (default: \"Loading...\") */\n loading?: string;\n /** Empty state text (default: \"No results.\") */\n noResults?: string;\n /** Selection count text (default: \"N of M Row(s) Selected.\") */\n selectionCount?: (selectedCount: number, totalCount: number) => string;\n };\n\n /* ============================================\n Virtualization (optional)\n ============================================ */\n /** Show \"N of M Row(s) Selected.\" count in footer */\n showSelectionCount?: boolean;\n\n /** Virtualization configuration for large datasets */\n virtualization?: {\n /** Enable row virtualization */\n enabled: boolean;\n /** Estimated row height in pixels (default: 50) */\n estimatedRowHeight?: number;\n /** Estimated group header row height in pixels (default: 48) */\n estimatedGroupHeaderHeight?: number;\n /** Number of items to render outside visible area (default: 5) */\n overscan?: number;\n };\n}\n\n/* ============================================\n Selection Column Helper\n ============================================ */\n\nconst selectionCheckboxClassName =\n 'translate-y-[2px] before:-inset-[14px] before:rounded-md';\n\nexport function createSelectColumn<TData>(): ColumnDef<TData, unknown> {\n return {\n id: 'select',\n header: ({ table }) => (\n <Checkbox\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={\n table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()\n }\n onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n className={selectionCheckboxClassName}\n />\n ),\n cell: ({ row }) => (\n <Checkbox\n checked={row.getIsSelected()}\n onCheckedChange={(value) => row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n className={selectionCheckboxClassName}\n />\n ),\n enableSorting: false,\n enableHiding: false,\n size: 64,\n meta: {\n headerClassName: 'w-16 min-w-16',\n cellClassName: 'w-16 min-w-16',\n },\n };\n}\n\n/* ============================================\n Sortable Header Component\n ============================================ */\n\ninterface SortableHeaderProps {\n children: React.ReactNode;\n column: {\n getIsSorted: () => false | 'asc' | 'desc';\n toggleSorting: (desc?: boolean) => void;\n getCanSort: () => boolean;\n columnDef?: { meta?: { headerTooltip?: string } };\n };\n className?: string;\n}\n\nfunction HeaderTooltip({\n content,\n}: {\n content?: string;\n}): React.JSX.Element | null {\n if (!content) {\n return null;\n }\n\n return (\n <Tooltip\n trigger={\n <button\n type=\"button\"\n className={cn(\n dataTableTouchTargetClassName,\n 'rounded-sm text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n )}\n aria-label=\"Column information\"\n >\n <CircleHelp className=\"size-3.5 shrink-0\" />\n </button>\n }\n content={content}\n />\n );\n}\n\nexport function SortableHeader({\n children,\n column,\n className,\n}: SortableHeaderProps): React.JSX.Element {\n const sorted = column.getIsSorted();\n const canSort = column.getCanSort();\n const tooltipContent = column.columnDef?.meta?.headerTooltip;\n\n if (!canSort) {\n if (!tooltipContent) {\n return <span className={className}>{children}</span>;\n }\n\n return (\n <span className={cn('inline-flex items-center gap-1', className)}>\n <span>{children}</span>\n <HeaderTooltip content={tooltipContent} />\n </span>\n );\n }\n\n return (\n <span className={cn('inline-flex items-center gap-1', className)}>\n <button\n type=\"button\"\n onClick={() => column.toggleSorting(sorted === 'asc')}\n className={cn(\n dataTableTouchTargetClassName,\n 'flex items-center gap-1 text-start hover:text-foreground transition-colors duration-150 ease-out motion-reduce:transition-none -ms-1 ps-1 -me-1 pe-1 -my-0.5 py-0.5 rounded focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:scale-[0.97] motion-reduce:active:scale-100',\n )}\n >\n {children}\n <span className=\"relative size-4\">\n <ArrowUp\n className={cn(\n 'absolute inset-0 size-4 text-text-quaternary transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none',\n sorted === 'asc'\n ? 'opacity-100 translate-y-0'\n : 'opacity-0 -translate-y-1',\n )}\n />\n <ArrowDown\n className={cn(\n 'absolute inset-0 size-4 text-text-quaternary transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none',\n sorted === 'desc'\n ? 'opacity-100 translate-y-0'\n : 'opacity-0 translate-y-1',\n )}\n />\n <ChevronsUpDown\n className={cn(\n 'absolute inset-0 size-4 transition-opacity duration-200 ease-out motion-reduce:transition-none',\n sorted ? 'opacity-0' : 'opacity-100 text-muted-foreground',\n )}\n />\n </span>\n </button>\n <HeaderTooltip content={tooltipContent} />\n </span>\n );\n}\n\n/* ============================================\n useDataTable Hook (Headless)\n ============================================ */\n\nexport interface UseDataTableOptions<TData, TValue> {\n columns: ColumnDef<TData, TValue>[];\n data: TData[];\n // Row Selection\n enableRowSelection?: boolean;\n enableMultiRowSelection?: boolean;\n rowSelection?: RowSelectionState;\n onRowSelectionChange?: (\n updater:\n | RowSelectionState\n | ((old: RowSelectionState) => RowSelectionState),\n ) => void;\n initialRowSelection?: RowSelectionState;\n showSelectAll?: boolean;\n // Sorting\n enableSorting?: boolean;\n sortingMode?: 'client' | 'server';\n sorting?: SortingState;\n onSortingChange?: (\n updater: SortingState | ((old: SortingState) => SortingState),\n ) => void;\n initialSorting?: SortingState;\n // Pagination\n enablePagination?: boolean;\n paginationMode?: 'client' | 'server' | 'none';\n pagination?: PaginationState;\n onPaginationChange?: (\n updater: PaginationState | ((old: PaginationState) => PaginationState),\n ) => void;\n pageCount?: number;\n rowCount?: number;\n pageSize?: number;\n initialPageIndex?: number;\n // Column Filters\n enableColumnFilters?: boolean;\n filteringMode?: 'client' | 'server';\n columnFilters?: ColumnFiltersState;\n onColumnFiltersChange?: (\n updater:\n | ColumnFiltersState\n | ((old: ColumnFiltersState) => ColumnFiltersState),\n ) => void;\n initialColumnFilters?: ColumnFiltersState;\n // Column Visibility\n enableColumnVisibility?: boolean;\n columnVisibility?: VisibilityState;\n onColumnVisibilityChange?: (\n updater: VisibilityState | ((old: VisibilityState) => VisibilityState),\n ) => void;\n initialColumnVisibility?: VisibilityState;\n // Grouping\n enableGrouping?: boolean;\n groupingMode?: 'client' | 'server';\n grouping?: GroupingState;\n onGroupingChange?: (\n updater: GroupingState | ((old: GroupingState) => GroupingState),\n ) => void;\n initialGrouping?: GroupingState;\n groupedColumnMode?: 'remove' | 'reorder' | false;\n // Expansion\n expanded?: ExpandedState;\n onExpandedChange?: (\n updater: ExpandedState | ((old: ExpandedState) => ExpandedState),\n ) => void;\n initialExpanded?: ExpandedState;\n // Other\n /** Get the row id. Recommended for stable row identity; falls back to row index. */\n getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;\n getSubRows?: (originalRow: TData, index: number) => TData[] | undefined;\n}\n\ninterface DataTableGroupHeaderProps<TData> {\n row: Row<TData>;\n visibleColumnCount: number;\n customHeader: (\n row: Row<TData>,\n visibleColumnCount: number,\n ) => React.ReactNode;\n}\n\nfunction DataTableGroupHeader<TData>({\n row,\n visibleColumnCount,\n customHeader,\n}: DataTableGroupHeaderProps<TData>) {\n return <>{customHeader(row, visibleColumnCount)}</>;\n}\n\ninterface DataTableControlsProps<TData> {\n table: TanStackTable<TData>;\n customControls: (table: TanStackTable<TData>) => React.ReactNode;\n}\n\nfunction DataTableControls<TData>({\n table,\n customControls,\n}: DataTableControlsProps<TData>) {\n return <>{customControls(table)}</>;\n}\n\nexport interface UseDataTableResult<TData> {\n table: TanStackTable<TData>;\n totalPages: number;\n currentPage: number;\n showPagination: boolean;\n}\n\nexport function useDataTable<TData, TValue>({\n columns,\n data,\n // Row Selection\n enableRowSelection = false,\n enableMultiRowSelection = true,\n rowSelection: controlledRowSelection,\n onRowSelectionChange,\n initialRowSelection = {},\n showSelectAll = true,\n // Sorting\n enableSorting = true,\n sortingMode = 'client',\n sorting: controlledSorting,\n onSortingChange,\n initialSorting = [],\n // Pagination\n enablePagination = false,\n paginationMode = 'client',\n pagination: controlledPagination,\n onPaginationChange,\n pageCount: controlledPageCount,\n rowCount,\n pageSize = 10,\n initialPageIndex = 0,\n // Column Filters\n enableColumnFilters = false,\n filteringMode = 'client',\n columnFilters: controlledColumnFilters,\n onColumnFiltersChange,\n initialColumnFilters = [],\n // Column Visibility\n enableColumnVisibility = false,\n columnVisibility: controlledColumnVisibility,\n onColumnVisibilityChange,\n initialColumnVisibility = {},\n // Grouping\n enableGrouping = false,\n groupingMode = 'client',\n grouping: controlledGrouping,\n onGroupingChange,\n initialGrouping = [],\n groupedColumnMode = false,\n // Expansion\n expanded: controlledExpanded,\n onExpandedChange,\n initialExpanded = {},\n // Other\n getRowId,\n getSubRows,\n}: UseDataTableOptions<TData, TValue>): UseDataTableResult<TData> {\n const defaultPaginationState: PaginationState = React.useMemo(\n () => ({\n pageIndex: initialPageIndex,\n pageSize,\n }),\n [initialPageIndex, pageSize],\n );\n\n const [internalRowSelection, setInternalRowSelection] =\n React.useState<RowSelectionState>(initialRowSelection);\n const [internalSorting, setInternalSorting] =\n React.useState<SortingState>(initialSorting);\n const [internalColumnFilters, setInternalColumnFilters] =\n React.useState<ColumnFiltersState>(initialColumnFilters);\n const [internalColumnVisibility, setInternalColumnVisibility] =\n React.useState<VisibilityState>(initialColumnVisibility);\n const [internalPagination, setInternalPagination] =\n React.useState<PaginationState>(defaultPaginationState);\n const [internalGrouping, setInternalGrouping] =\n React.useState<GroupingState>(initialGrouping);\n const [internalExpanded, setInternalExpanded] =\n React.useState<ExpandedState>(initialExpanded);\n\n const rowSelection = controlledRowSelection ?? internalRowSelection;\n const sorting = controlledSorting ?? internalSorting;\n const columnFilters = controlledColumnFilters ?? internalColumnFilters;\n const columnVisibility =\n controlledColumnVisibility ?? internalColumnVisibility;\n const pagination = controlledPagination ?? internalPagination;\n const grouping = controlledGrouping ?? internalGrouping;\n const expanded = controlledExpanded ?? internalExpanded;\n\n const handleRowSelectionChange = React.useCallback(\n (\n updater:\n | RowSelectionState\n | ((old: RowSelectionState) => RowSelectionState),\n ) => {\n if (controlledRowSelection === undefined) {\n setInternalRowSelection(updater);\n }\n onRowSelectionChange?.(updater);\n },\n [controlledRowSelection, onRowSelectionChange],\n );\n\n const handleSortingChange = React.useCallback(\n (updater: SortingState | ((old: SortingState) => SortingState)) => {\n if (controlledSorting === undefined) {\n setInternalSorting(updater);\n }\n onSortingChange?.(updater);\n },\n [controlledSorting, onSortingChange],\n );\n\n const handleColumnFiltersChange = React.useCallback(\n (\n updater:\n | ColumnFiltersState\n | ((old: ColumnFiltersState) => ColumnFiltersState),\n ) => {\n if (controlledColumnFilters === undefined) {\n setInternalColumnFilters(updater);\n }\n onColumnFiltersChange?.(updater);\n },\n [controlledColumnFilters, onColumnFiltersChange],\n );\n\n const handleColumnVisibilityChange = React.useCallback(\n (\n updater: VisibilityState | ((old: VisibilityState) => VisibilityState),\n ) => {\n if (controlledColumnVisibility === undefined) {\n setInternalColumnVisibility(updater);\n }\n onColumnVisibilityChange?.(updater);\n },\n [controlledColumnVisibility, onColumnVisibilityChange],\n );\n\n const handlePaginationChange = React.useCallback(\n (\n updater: PaginationState | ((old: PaginationState) => PaginationState),\n ) => {\n if (controlledPagination === undefined) {\n setInternalPagination(updater);\n }\n onPaginationChange?.(updater);\n },\n [controlledPagination, onPaginationChange],\n );\n\n const handleGroupingChange = React.useCallback(\n (updater: GroupingState | ((old: GroupingState) => GroupingState)) => {\n if (controlledGrouping === undefined) {\n setInternalGrouping(updater);\n }\n onGroupingChange?.(updater);\n },\n [controlledGrouping, onGroupingChange],\n );\n\n const handleExpandedChange = React.useCallback(\n (updater: ExpandedState | ((old: ExpandedState) => ExpandedState)) => {\n if (controlledExpanded === undefined) {\n setInternalExpanded(updater);\n }\n onExpandedChange?.(updater);\n },\n [controlledExpanded, onExpandedChange],\n );\n\n const tableColumns = React.useMemo(() => {\n if (enableRowSelection && showSelectAll) {\n const selectColumn = createSelectColumn<TData>();\n return [selectColumn, ...columns];\n }\n return columns;\n }, [columns, enableRowSelection, showSelectAll]);\n\n const manualPagination = paginationMode === 'server';\n const manualSorting = sortingMode === 'server';\n const manualFiltering = filteringMode === 'server';\n const manualGrouping = groupingMode === 'server';\n\n const pageCount = React.useMemo(() => {\n if (controlledPageCount !== undefined) {\n return controlledPageCount;\n }\n if (rowCount !== undefined && pagination.pageSize > 0) {\n return Math.ceil(rowCount / pagination.pageSize);\n }\n return undefined;\n }, [controlledPageCount, rowCount, pagination.pageSize]);\n\n const table = useReactTable({\n data,\n columns: tableColumns,\n state: {\n rowSelection,\n sorting,\n columnFilters,\n columnVisibility,\n pagination,\n grouping,\n expanded,\n },\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange: handleRowSelectionChange,\n enableSorting,\n manualSorting,\n onSortingChange: handleSortingChange,\n manualPagination,\n pageCount,\n onPaginationChange: handlePaginationChange,\n enableColumnFilters,\n manualFiltering,\n onColumnFiltersChange: handleColumnFiltersChange,\n enableHiding: enableColumnVisibility,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n enableGrouping,\n manualGrouping,\n groupedColumnMode: groupedColumnMode || undefined,\n onGroupingChange: handleGroupingChange,\n onExpandedChange: handleExpandedChange,\n paginateExpandedRows: false,\n getSubRows: groupingMode === 'server' ? getSubRows : undefined,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel:\n enableSorting && sortingMode === 'client'\n ? getSortedRowModel()\n : undefined,\n getFilteredRowModel:\n enableColumnFilters && filteringMode === 'client'\n ? getFilteredRowModel()\n : undefined,\n getPaginationRowModel:\n enablePagination && paginationMode === 'client'\n ? getPaginationRowModel()\n : undefined,\n getGroupedRowModel:\n enableGrouping && groupingMode === 'client'\n ? getGroupedRowModel()\n : undefined,\n getExpandedRowModel: enableGrouping ? getExpandedRowModel() : undefined,\n getRowId,\n });\n\n return {\n table,\n totalPages: table.getPageCount(),\n currentPage: pagination.pageIndex + 1,\n showPagination:\n enablePagination && paginationMode !== 'none' && table.getPageCount() > 1,\n };\n}\n\n/* ============================================\n DataTable Component\n ============================================ */\n\nfunction DataTable<TData, TValue>({\n columns,\n data,\n children,\n // Row Selection\n enableRowSelection = false,\n enableMultiRowSelection = true,\n rowSelection: controlledRowSelection,\n onRowSelectionChange,\n initialRowSelection = {},\n // Sorting\n enableSorting = true,\n sortingMode = 'client',\n sorting: controlledSorting,\n onSortingChange,\n initialSorting = [],\n // Pagination\n enablePagination = false,\n paginationMode = 'client',\n pagination: controlledPagination,\n onPaginationChange,\n pageCount: controlledPageCount,\n rowCount,\n pageSize = 10,\n initialPageIndex = 0,\n // Column Filters\n enableColumnFilters = false,\n filteringMode = 'client',\n columnFilters: controlledColumnFilters,\n onColumnFiltersChange,\n initialColumnFilters = [],\n // Column Visibility\n enableColumnVisibility = false,\n columnVisibility: controlledColumnVisibility,\n onColumnVisibilityChange,\n initialColumnVisibility = {},\n // Grouping\n enableGrouping = false,\n groupingMode = 'client',\n grouping: controlledGrouping,\n onGroupingChange,\n initialGrouping = [],\n groupedColumnMode = false,\n // Expansion\n expanded: controlledExpanded,\n onExpandedChange,\n initialExpanded = {},\n getSubRows,\n // UI & Behavior\n paginationType = 'page-default',\n paginationShape = 'square',\n paginationSize = 'md',\n paginationShowPageNumbers = true,\n paginationLabel,\n getRowId,\n onRowClick,\n emptyState,\n className,\n caption,\n dividers = 'line',\n density = 'default',\n showSelectAll = true,\n responsiveColumns = false,\n renderControls,\n classNames,\n renderBody,\n renderRow,\n renderGroupHeader,\n // Scrolling & Sticky\n maxHeight,\n stickyHeader = false,\n stickyFirstColumn = false,\n stickyLastColumn = false,\n // Loading/Empty/Error States\n loading: isLoading = false,\n loadingState,\n error,\n errorState,\n // Internationalization\n i18n,\n // Virtualization\n virtualization,\n // Selection count\n showSelectionCount = false,\n // Container styling\n rounded = 'all',\n bordered = true,\n}: DataTableProps<TData, TValue>): React.JSX.Element {\n const { table, totalPages, currentPage, showPagination } = useDataTable({\n columns,\n data,\n enableRowSelection,\n enableMultiRowSelection,\n rowSelection: controlledRowSelection,\n onRowSelectionChange,\n initialRowSelection,\n showSelectAll,\n enableSorting,\n sortingMode,\n sorting: controlledSorting,\n onSortingChange,\n initialSorting,\n enablePagination,\n paginationMode,\n pagination: controlledPagination,\n onPaginationChange,\n pageCount: controlledPageCount,\n rowCount,\n pageSize,\n initialPageIndex,\n enableColumnFilters,\n filteringMode,\n columnFilters: controlledColumnFilters,\n onColumnFiltersChange,\n initialColumnFilters,\n enableColumnVisibility,\n columnVisibility: controlledColumnVisibility,\n onColumnVisibilityChange,\n initialColumnVisibility,\n // Grouping\n enableGrouping,\n groupingMode,\n grouping: controlledGrouping,\n onGroupingChange,\n initialGrouping,\n groupedColumnMode,\n // Expansion\n expanded: controlledExpanded,\n onExpandedChange,\n initialExpanded,\n getSubRows,\n getRowId,\n });\n\n const tableContainerRef = React.useRef<HTMLDivElement>(null);\n const rows = table.getRowModel().rows;\n const isVirtualizationEnabled = virtualization?.enabled ?? false;\n\n const headerOffset = stickyHeader && isVirtualizationEnabled ? 40 : 0;\n\n const isGroupRow = React.useCallback(\n (row: Row<TData>) => {\n if (row.getIsGrouped()) return true;\n if (groupingMode === 'server' && row.subRows.length > 0) return true;\n return false;\n },\n [groupingMode],\n );\n\n const rowVirtualizer = useVirtualizer({\n enabled: isVirtualizationEnabled,\n count: isVirtualizationEnabled ? rows.length : 0,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: (index) => {\n const row = rows[index];\n if (row && isGroupRow(row)) {\n return virtualization?.estimatedGroupHeaderHeight ?? 48;\n }\n return virtualization?.estimatedRowHeight ?? 50;\n },\n overscan: virtualization?.overscan ?? 5,\n });\n\n const handleRowKeyDown = React.useCallback(\n (row: Row<TData>, e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onRowClick?.(row);\n }\n },\n [onRowClick],\n );\n\n const renderCellContent = React.useCallback(\n (\n cell: ReturnType<Row<TData>['getVisibleCells']>[number],\n row: Row<TData>,\n ) => {\n const isGroupedCell = cell.getIsGrouped();\n const isAggregatedCell = cell.getIsAggregated();\n const isPlaceholderCell = cell.getIsPlaceholder();\n\n if (isGroupedCell) {\n const actionLabel = row.getIsExpanded() ? 'Collapse' : 'Expand';\n const groupLabel = String(cell.getValue() ?? '');\n\n return (\n <button\n type=\"button\"\n onClick={row.getToggleExpandedHandler()}\n className=\"flex items-center gap-1.5 text-start font-medium group/expand rounded -ms-1 ps-1 -me-1 pe-1 -my-0.5 py-0.5 hover:text-foreground transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:scale-[0.98] motion-reduce:active:scale-100\"\n aria-label={`${actionLabel} ${groupLabel} group`}\n aria-expanded={row.getIsExpanded()}\n >\n <ChevronRight\n className={cn(\n 'h-4 w-4 flex-shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none',\n row.getIsExpanded() && 'rotate-90',\n )}\n />\n <span>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </span>\n <span className=\"text-text-quaternary tabular-nums\">\n ({row.subRows.length})\n </span>\n </button>\n );\n }\n\n if (isAggregatedCell) {\n return flexRender(\n cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,\n cell.getContext(),\n );\n }\n\n if (isPlaceholderCell) {\n return null;\n }\n\n return flexRender(cell.column.columnDef.cell, cell.getContext());\n },\n [],\n );\n const hasChildren = React.Children.count(children) > 0;\n const hasFooter = showPagination || showSelectionCount;\n const shouldRenderComposite = hasChildren || hasFooter;\n const selectedRowCount = table.getFilteredSelectedRowModel().rows.length;\n const filteredRowCount = table.getFilteredRowModel().rows.length;\n const selectionTotalRowCount = rowCount ?? filteredRowCount;\n const footerLabel = showSelectionCount\n ? (i18n?.selectionCount?.(selectedRowCount, selectionTotalRowCount) ??\n `${selectedRowCount} of ${selectionTotalRowCount} Row(s) Selected.`)\n : null;\n let statusContent: React.ReactNode;\n if (isLoading) {\n statusContent = loadingState || i18n?.loading || 'Loading...';\n } else if (error) {\n statusContent = errorState || error.message;\n } else {\n statusContent = emptyState || i18n?.noResults || 'No results.';\n }\n const statusAriaLive = isLoading || error ? 'polite' : undefined;\n\n function renderVirtualizedBody(): React.JSX.Element {\n return (\n <TableBody\n style={{\n display: 'block',\n position: 'relative',\n height: `${rowVirtualizer.getTotalSize() + headerOffset}px`,\n }}\n >\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index];\n const rowIsGroup = isGroupRow(row);\n const visibleCells = row.getVisibleCells();\n const visibleColumnCount = visibleCells.length;\n const responsiveStickySlotsById = getResponsiveStickySlotsById({\n enabled: responsiveColumns,\n getId: (item) => item.column.id,\n getResponsive: (item) => item.column.columnDef.meta?.responsive,\n items: visibleCells,\n stickyFirstColumn,\n stickyLastColumn,\n });\n\n if (rowIsGroup && renderGroupHeader) {\n return (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n ref={(node) => rowVirtualizer.measureElement(node)}\n data-index={virtualRow.index}\n className={cn(\n dataTableRowVariants({\n dividers,\n density,\n isEven: virtualRow.index % 2 === 1,\n isSelected: row.getIsSelected(),\n }),\n 'bg-muted',\n classNames?.row,\n )}\n style={getVirtualRowStyle(virtualRow.start, headerOffset)}\n >\n <DataTableGroupHeader\n row={row}\n visibleColumnCount={visibleColumnCount}\n customHeader={renderGroupHeader}\n />\n </TableRow>\n );\n }\n\n return (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n aria-selected={row.getIsSelected() ? 'true' : undefined}\n tabIndex={onRowClick ? 0 : undefined}\n onClick={onRowClick ? () => onRowClick(row) : undefined}\n onKeyDown={\n onRowClick ? (e) => handleRowKeyDown(row, e) : undefined\n }\n ref={(node) => rowVirtualizer.measureElement(node)}\n data-index={virtualRow.index}\n className={cn(\n dataTableRowVariants({\n dividers,\n density,\n isEven: virtualRow.index % 2 === 1,\n isSelected: row.getIsSelected(),\n }),\n rowIsGroup && 'bg-muted',\n onRowClick &&\n 'cursor-pointer hover:bg-muted focus-visible:bg-muted focus-visible:outline-none active:bg-accent/50 motion-reduce:active:bg-muted',\n classNames?.row,\n )}\n style={getVirtualRowStyle(virtualRow.start, headerOffset)}\n >\n {visibleCells.map((cell, cellIndex) => {\n const isFirstColumn = cellIndex === 0;\n const isLastColumn = cellIndex === visibleColumnCount - 1;\n const responsiveStickySlots = responsiveStickySlotsById.get(\n cell.column.id,\n );\n const stickyClass = responsiveColumns\n ? getResponsiveStickyClass({\n backgroundClass: row.getIsSelected()\n ? 'bg-muted dark:bg-accent'\n : 'bg-background dark:bg-card',\n firstSlots: responsiveStickySlots?.firstSlots ?? [],\n lastSlots: responsiveStickySlots?.lastSlots ?? [],\n })\n : getStickyCellClass({\n stickyFirstColumn,\n stickyLastColumn,\n isFirstColumn,\n isLastColumn,\n isSelected: row.getIsSelected(),\n });\n\n return (\n <TableCell\n key={cell.id}\n className={cn(\n dataTableCellVariants({ density }),\n classNames?.cell,\n cell.column.columnDef.meta?.cellClassName,\n getResponsiveColumnClass(\n cell.column.columnDef.meta?.responsive,\n responsiveColumns,\n ),\n stickyClass,\n )}\n >\n {rowIsGroup\n ? renderCellContent(cell, row)\n : flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </TableCell>\n );\n })}\n </TableRow>\n );\n })}\n </TableBody>\n );\n }\n\n function renderStandardBody(): React.JSX.Element {\n let bodyContent: React.ReactNode;\n\n if (!rows.length) {\n bodyContent = (\n <TableRow>\n <TableCell\n colSpan={table.getAllColumns().length}\n className={cn(\n dataTableCellVariants({ density }),\n 'h-24 text-center text-muted-foreground',\n )}\n aria-live={statusAriaLive}\n >\n {statusContent}\n </TableCell>\n </TableRow>\n );\n } else if (renderRow) {\n bodyContent = rows.map((row) => renderRow(row));\n } else {\n bodyContent = rows.map((row, index) => {\n const rowIsGroup = isGroupRow(row);\n const visibleCells = row.getVisibleCells();\n const visibleColumnCount = visibleCells.length;\n const responsiveStickySlotsById = getResponsiveStickySlotsById({\n enabled: responsiveColumns,\n getId: (item) => item.column.id,\n getResponsive: (item) => item.column.columnDef.meta?.responsive,\n items: visibleCells,\n stickyFirstColumn,\n stickyLastColumn,\n });\n\n if (rowIsGroup && renderGroupHeader) {\n return (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n className={cn(\n dataTableRowVariants({\n dividers,\n density,\n isEven: index % 2 === 1,\n isSelected: row.getIsSelected(),\n }),\n 'bg-muted',\n classNames?.row,\n )}\n >\n <DataTableGroupHeader\n row={row}\n visibleColumnCount={visibleColumnCount}\n customHeader={renderGroupHeader}\n />\n </TableRow>\n );\n }\n\n return (\n <TableRow\n key={row.id}\n data-state={row.getIsSelected() && 'selected'}\n aria-selected={row.getIsSelected() ? 'true' : undefined}\n tabIndex={onRowClick ? 0 : undefined}\n onClick={onRowClick ? () => onRowClick(row) : undefined}\n onKeyDown={onRowClick ? (e) => handleRowKeyDown(row, e) : undefined}\n className={cn(\n dataTableRowVariants({\n dividers,\n density,\n isEven: index % 2 === 1,\n isSelected: row.getIsSelected(),\n }),\n rowIsGroup && 'bg-muted',\n onRowClick &&\n 'cursor-pointer hover:bg-muted focus-visible:bg-muted focus-visible:outline-none active:bg-accent/50 motion-reduce:active:bg-muted',\n classNames?.row,\n )}\n >\n {visibleCells.map((cell, cellIndex) => {\n const isFirstColumn = cellIndex === 0;\n const isLastColumn = cellIndex === visibleColumnCount - 1;\n const responsiveStickySlots = responsiveStickySlotsById.get(\n cell.column.id,\n );\n const stickyClass = responsiveColumns\n ? getResponsiveStickyClass({\n backgroundClass: row.getIsSelected()\n ? 'bg-muted dark:bg-accent'\n : 'bg-background dark:bg-card',\n firstSlots: responsiveStickySlots?.firstSlots ?? [],\n lastSlots: responsiveStickySlots?.lastSlots ?? [],\n })\n : getStickyCellClass({\n stickyFirstColumn,\n stickyLastColumn,\n isFirstColumn,\n isLastColumn,\n isSelected: row.getIsSelected(),\n });\n\n return (\n <TableCell\n key={cell.id}\n className={cn(\n dataTableCellVariants({ density }),\n classNames?.cell,\n cell.column.columnDef.meta?.cellClassName,\n getResponsiveColumnClass(\n cell.column.columnDef.meta?.responsive,\n responsiveColumns,\n ),\n stickyClass,\n )}\n >\n {rowIsGroup\n ? renderCellContent(cell, row)\n : flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n );\n })}\n </TableRow>\n );\n });\n }\n\n return <TableBody>{bodyContent}</TableBody>;\n }\n\n let tableBody: React.ReactNode;\n if (renderBody) {\n tableBody = renderBody(table);\n } else if (isVirtualizationEnabled && rows.length > 0) {\n tableBody = renderVirtualizedBody();\n } else {\n tableBody = renderStandardBody();\n }\n\n const tableContainer = (\n <div\n ref={tableContainerRef}\n className={cn(\n dataTableContainerVariants({\n rounded: shouldRenderComposite ? 'none' : rounded,\n bordered: shouldRenderComposite ? false : bordered,\n }),\n maxHeight ? 'overflow-auto' : 'overflow-x-auto',\n )}\n style={maxHeight ? { maxHeight } : undefined}\n >\n <Table\n disableOverflow={\n !!(maxHeight || stickyHeader || stickyFirstColumn || stickyLastColumn)\n }\n className={cn(\n dataTableVariants({ dividers, density }),\n classNames?.table,\n )}\n >\n {caption && <caption className=\"sr-only\">{caption}</caption>}\n <TableHeader className={cn(stickyHeader && 'sticky top-0 z-10')}>\n {table.getHeaderGroups().map((headerGroup) => {\n const responsiveStickySlotsById = getResponsiveStickySlotsById({\n enabled: responsiveColumns,\n getId: (item) => item.column.id,\n getResponsive: (item) => item.column.columnDef.meta?.responsive,\n items: headerGroup.headers,\n stickyFirstColumn,\n stickyLastColumn,\n });\n\n return (\n <TableRow\n key={headerGroup.id}\n className={cn(\n 'border-b border-border bg-muted hover:bg-muted',\n classNames?.headerRow,\n )}\n >\n {headerGroup.headers.map((header, headerIndex) => {\n const isFirstColumn = headerIndex === 0;\n const isLastColumn =\n headerIndex === headerGroup.headers.length - 1;\n const isSticky =\n (stickyFirstColumn && isFirstColumn) ||\n (stickyLastColumn && isLastColumn);\n const responsiveStickySlots = responsiveStickySlotsById.get(\n header.column.id,\n );\n const responsiveHeaderStickyClass = responsiveColumns\n ? getResponsiveStickyClass({\n backgroundClass: 'bg-muted',\n firstSlots: responsiveStickySlots?.firstSlots ?? [],\n lastSlots: responsiveStickySlots?.lastSlots ?? [],\n zIndexClass: stickyHeader ? 'z-30' : 'z-20',\n })\n : undefined;\n\n const ariaSort = getAriaSort(header.column.getIsSorted());\n const headerDefinition = header.column.columnDef.header;\n const isTextHeader = typeof headerDefinition === 'string';\n\n let headerContent: React.ReactNode = null;\n if (!header.isPlaceholder && isTextHeader) {\n headerContent = (\n <SortableHeader column={header.column}>\n {headerDefinition}\n </SortableHeader>\n );\n } else if (!header.isPlaceholder) {\n headerContent = flexRender(\n headerDefinition,\n header.getContext(),\n );\n }\n\n return (\n <TableHead\n key={header.id}\n scope=\"col\"\n style={{\n width: getHeaderCellWidth(header.getSize()),\n }}\n className={cn(\n dataTableHeaderCellVariants({ density }),\n 'text-start',\n classNames?.headerCell,\n header.column.columnDef.meta?.headerClassName,\n getResponsiveColumnClass(\n header.column.columnDef.meta?.responsive,\n responsiveColumns,\n ),\n responsiveColumns\n ? responsiveHeaderStickyClass\n : [\n stickyFirstColumn &&\n isFirstColumn &&\n 'sticky start-0 z-20 bg-muted',\n stickyLastColumn &&\n isLastColumn &&\n 'sticky end-0 z-20 bg-muted',\n stickyHeader && isSticky && 'z-30',\n ],\n )}\n aria-sort={ariaSort}\n >\n {headerContent}\n </TableHead>\n );\n })}\n </TableRow>\n );\n })}\n </TableHeader>\n {tableBody}\n </Table>\n </div>\n );\n\n const tableFooter = hasFooter ? (\n <div\n data-slot=\"data-table-footer\"\n className={cn(\n 'flex min-h-[68px] items-center gap-4 border-t border-border-subtle px-6 py-0',\n footerLabel ? 'justify-between' : 'justify-end',\n )}\n >\n {footerLabel && (\n <span className=\"text-sm text-muted-foreground\">{footerLabel}</span>\n )}\n {showPagination && (\n <Pagination\n type={paginationType}\n shape={paginationShape}\n size={paginationSize}\n currentPage={currentPage}\n totalPages={totalPages}\n onPageChange={(page) => table.setPageIndex(page - 1)}\n showPageNumbers={paginationShowPageNumbers}\n aria-label={paginationLabel}\n className={footerLabel ? 'w-auto justify-end' : undefined}\n />\n )}\n </div>\n ) : null;\n\n return (\n <div data-slot=\"data-table\" className={cn('@container', className)}>\n {renderControls && (\n <div className=\"mb-4\">\n <DataTableControls table={table} customControls={renderControls} />\n </div>\n )}\n\n {shouldRenderComposite ? (\n <div\n data-slot=\"data-table-composite\"\n className={cn(\n dataTableContainerVariants({ rounded, bordered }),\n 'overflow-hidden',\n )}\n >\n {children}\n {tableContainer}\n {tableFooter}\n </div>\n ) : (\n tableContainer\n )}\n </div>\n );\n}\n\nDataTable.displayName = 'DataTable';\n\n/* ============================================\n Exports\n ============================================ */\n\nexport type {\n DataTableActionsCellProps,\n DataTableAvatarCellProps,\n DataTableBadgeItem,\n DataTableBadgesCellProps,\n DataTableCellAction,\n DataTableCellRootProps,\n DataTableCellTone,\n DataTableProgressCellProps,\n DataTableRatingCellProps,\n DataTableSparklineCellProps,\n DataTableSwitchCellProps,\n DataTableTextCellProps,\n DataTableTrendCellProps,\n DataTableTrendSentiment,\n} from './DataTableCell';\nexport {\n DataTableActionsCell,\n DataTableAvatarCell,\n DataTableBadgesCell,\n DataTableCell,\n DataTableCellRoot,\n DataTableProgressCell,\n DataTableRatingCell,\n DataTableSparklineCell,\n DataTableSwitchCell,\n DataTableTextCell,\n DataTableTrendCell,\n} from './DataTableCell';\nexport type {\n ColumnDef,\n ColumnFiltersState,\n ExpandedState,\n GroupingState,\n PaginationState,\n Row,\n RowSelectionState,\n SortingState,\n VisibilityState,\n};\nexport {\n DataTable,\n dataTableCellVariants,\n dataTableContainerVariants,\n dataTableHeaderCellVariants,\n dataTableRowVariants,\n dataTableVariants,\n};\n"],"mappings":"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"}
|
package/dist/index192.js
CHANGED
|
@@ -1,95 +1,280 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { cn } from "./index2.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { dataTableTouchTargetClassName } from "./index188.js";
|
|
5
|
-
import { DropdownMenu } from "./index191.js";
|
|
6
|
-
import { MoreVertical, Search } from "lucide-react";
|
|
3
|
+
import { Kbd } from "./index106.js";
|
|
4
|
+
import { Check, ChevronRight } from "lucide-react";
|
|
7
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
import { Menu as Menu$1 } from "@base-ui/react/menu";
|
|
7
|
+
//#region src/components/organisms/menus/DropdownMenu/DropdownMenu.tsx
|
|
8
|
+
function DropdownMenuRoot({ ...props }) {
|
|
9
|
+
return /* @__PURE__ */ jsx(Menu$1.Root, {
|
|
10
|
+
"data-slot": "dropdown-menu-root",
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
DropdownMenuRoot.displayName = "DropdownMenu.Root";
|
|
15
|
+
function DropdownMenuPortal({ ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx(Menu$1.Portal, {
|
|
17
|
+
"data-slot": "dropdown-menu-portal",
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
DropdownMenuPortal.displayName = "DropdownMenu.Portal";
|
|
22
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(Menu$1.Trigger, {
|
|
24
|
+
"data-slot": "dropdown-menu-trigger",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
|
|
29
|
+
function DropdownMenuGroup({ ...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsx(Menu$1.Group, {
|
|
31
|
+
"data-slot": "dropdown-menu-group",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
DropdownMenuGroup.displayName = "DropdownMenu.Group";
|
|
36
|
+
function DropdownMenuSub({ ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
|
|
38
|
+
"data-slot": "dropdown-menu-sub",
|
|
39
|
+
...props
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
DropdownMenuSub.displayName = "DropdownMenu.Sub";
|
|
43
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
44
|
+
return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
|
|
45
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
46
|
+
"data-inset": inset,
|
|
47
|
+
className: cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dd-sub flex cursor-default items-center outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-[color,background-color,transform] duration-150 active:scale-[0.99]", className),
|
|
13
48
|
...props,
|
|
14
|
-
children
|
|
49
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto rtl:rotate-180 transition-transform duration-150 group-data-open/dd-sub:translate-x-0.5" })]
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
DropdownMenuSubTrigger.displayName = "DropdownMenu.SubTrigger";
|
|
53
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
|
|
55
|
+
"data-slot": "dropdown-menu-radio-group",
|
|
56
|
+
...props
|
|
15
57
|
});
|
|
16
58
|
}
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
return /* @__PURE__ */ jsxs(
|
|
20
|
-
"data-slot": "
|
|
21
|
-
className: cn("
|
|
59
|
+
DropdownMenuRadioGroup.displayName = "DropdownMenu.RadioGroup";
|
|
60
|
+
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
61
|
+
return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
|
|
62
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
63
|
+
className: cn("focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-2 pe-8 ps-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-150", className),
|
|
22
64
|
...props,
|
|
23
|
-
children: [
|
|
24
|
-
className: "
|
|
25
|
-
|
|
65
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
66
|
+
className: "pointer-events-none absolute end-2 flex items-center justify-center",
|
|
67
|
+
"data-slot": "dropdown-menu-radio-item-indicator",
|
|
68
|
+
children: /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
|
|
69
|
+
className: "animate-in zoom-in-75 duration-150 motion-reduce:animate-none",
|
|
70
|
+
children: /* @__PURE__ */ jsx(Check, {})
|
|
71
|
+
})
|
|
26
72
|
}), children]
|
|
27
73
|
});
|
|
28
74
|
}
|
|
29
|
-
|
|
30
|
-
function
|
|
31
|
-
return /* @__PURE__ */
|
|
32
|
-
"data-slot": "
|
|
33
|
-
className: cn("
|
|
75
|
+
DropdownMenuRadioItem.displayName = "DropdownMenu.RadioItem";
|
|
76
|
+
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
77
|
+
return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
|
|
78
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
79
|
+
className: cn("focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-2 pe-8 ps-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 transition-colors duration-150", className),
|
|
80
|
+
checked,
|
|
34
81
|
...props,
|
|
35
|
-
children
|
|
82
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
83
|
+
className: "pointer-events-none absolute end-2 flex items-center justify-center",
|
|
84
|
+
"data-slot": "dropdown-menu-checkbox-item-indicator",
|
|
85
|
+
children: /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
|
|
86
|
+
className: "animate-in zoom-in-75 duration-150 motion-reduce:animate-none",
|
|
87
|
+
children: /* @__PURE__ */ jsx(Check, {})
|
|
88
|
+
})
|
|
89
|
+
}), children]
|
|
36
90
|
});
|
|
37
91
|
}
|
|
38
|
-
|
|
39
|
-
function
|
|
40
|
-
return /* @__PURE__ */ jsx("
|
|
41
|
-
"data-slot": "
|
|
42
|
-
className: cn("
|
|
92
|
+
DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
|
|
93
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
94
|
+
return /* @__PURE__ */ jsx("span", {
|
|
95
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
96
|
+
className: cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ms-auto text-xs tracking-widest", className),
|
|
97
|
+
...props
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
DropdownMenuShortcut.displayName = "DropdownMenu.Shortcut";
|
|
101
|
+
var popupWidthClasses = {
|
|
102
|
+
auto: "",
|
|
103
|
+
sm: "w-48",
|
|
104
|
+
md: "w-56",
|
|
105
|
+
lg: "w-64"
|
|
106
|
+
};
|
|
107
|
+
function DropdownMenuPopup({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, width = "auto", className, ...props }) {
|
|
108
|
+
return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
|
|
109
|
+
className: "isolate z-50 outline-none",
|
|
110
|
+
align,
|
|
111
|
+
alignOffset,
|
|
112
|
+
side,
|
|
113
|
+
sideOffset,
|
|
114
|
+
children: /* @__PURE__ */ jsx(Menu$1.Popup, {
|
|
115
|
+
"data-slot": "dropdown-menu-popup",
|
|
116
|
+
className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "border border-border bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-sm z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", "duration-200 motion-reduce:animate-none", popupWidthClasses[width], className),
|
|
117
|
+
...props
|
|
118
|
+
})
|
|
119
|
+
}) });
|
|
120
|
+
}
|
|
121
|
+
DropdownMenuPopup.displayName = "DropdownMenu.Popup";
|
|
122
|
+
function DropdownMenuSubPopup({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
|
|
123
|
+
return /* @__PURE__ */ jsx(DropdownMenuPopup, {
|
|
124
|
+
"data-slot": "dropdown-menu-sub-popup",
|
|
125
|
+
className: cn("min-w-[96px] w-auto", className),
|
|
126
|
+
align,
|
|
127
|
+
alignOffset,
|
|
128
|
+
side,
|
|
129
|
+
sideOffset,
|
|
130
|
+
...props
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
DropdownMenuSubPopup.displayName = "DropdownMenu.SubPopup";
|
|
134
|
+
function DropdownMenuHeader({ className, avatar, title, subtitle, children, ...props }) {
|
|
135
|
+
if (children) return /* @__PURE__ */ jsx("div", {
|
|
136
|
+
"data-slot": "dropdown-menu-header",
|
|
137
|
+
className: cn("border-b border-border px-4 py-3", className),
|
|
43
138
|
...props,
|
|
44
139
|
children
|
|
45
140
|
});
|
|
46
|
-
}
|
|
47
|
-
Actions.displayName = "DataTableToolbar.Actions";
|
|
48
|
-
function Kebab({ className, children, ...props }) {
|
|
49
141
|
return /* @__PURE__ */ jsx("div", {
|
|
50
|
-
"data-slot": "
|
|
51
|
-
className,
|
|
142
|
+
"data-slot": "dropdown-menu-header",
|
|
143
|
+
className: cn("border-b border-border px-4 py-3", className),
|
|
52
144
|
...props,
|
|
53
|
-
children: /* @__PURE__ */ jsxs(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
145
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
146
|
+
className: "flex items-center gap-3",
|
|
147
|
+
children: [avatar, /* @__PURE__ */ jsxs("div", {
|
|
148
|
+
className: "flex flex-col min-w-0",
|
|
149
|
+
children: [title && /* @__PURE__ */ jsx("span", {
|
|
150
|
+
className: "text-sm font-semibold text-foreground truncate",
|
|
151
|
+
children: title
|
|
152
|
+
}), subtitle && /* @__PURE__ */ jsx("span", {
|
|
153
|
+
className: "text-sm text-muted-foreground truncate",
|
|
154
|
+
children: subtitle
|
|
155
|
+
})]
|
|
156
|
+
})]
|
|
157
|
+
})
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
DropdownMenuHeader.displayName = "DropdownMenu.Header";
|
|
161
|
+
/**
|
|
162
|
+
* Enhanced DropdownMenuLabel
|
|
163
|
+
*/
|
|
164
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
165
|
+
return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
|
|
166
|
+
"data-slot": "dropdown-menu-label",
|
|
167
|
+
"data-inset": inset,
|
|
168
|
+
className: cn("px-4 py-2 text-xs font-medium text-text-quaternary uppercase tracking-wider", "data-[inset]:ps-8", className),
|
|
169
|
+
...props
|
|
60
170
|
});
|
|
61
171
|
}
|
|
62
|
-
|
|
63
|
-
function
|
|
172
|
+
DropdownMenuLabel.displayName = "DropdownMenu.Label";
|
|
173
|
+
function DropdownMenuItem({ className, icon, shortcut, destructive = false, render, inset, variant = "default", children, ...props }) {
|
|
174
|
+
const isDestructive = destructive || variant === "destructive";
|
|
175
|
+
return /* @__PURE__ */ jsxs(Menu$1.Item, {
|
|
176
|
+
"data-slot": "dropdown-menu-item",
|
|
177
|
+
"data-inset": inset,
|
|
178
|
+
"data-variant": isDestructive ? "destructive" : variant,
|
|
179
|
+
className: cn("group/dropdown-menu-item relative flex items-center gap-2 mx-1.5 px-2.5 py-2 rounded-md cursor-pointer outline-none", "text-sm font-semibold text-secondary-foreground", "focus:bg-muted focus:text-secondary-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "data-[inset]:ps-8", "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "transition-[color,background-color,transform] duration-150 active:scale-[0.99]", isDestructive && "text-destructive focus:text-destructive focus:bg-destructive/10", className),
|
|
180
|
+
render,
|
|
181
|
+
...props,
|
|
182
|
+
children: [
|
|
183
|
+
icon && /* @__PURE__ */ jsx("span", {
|
|
184
|
+
className: cn("size-4 shrink-0 transition-colors duration-150", isDestructive ? "text-destructive" : "text-text-quaternary group-focus/dropdown-menu-item:text-secondary-foreground"),
|
|
185
|
+
children: icon
|
|
186
|
+
}),
|
|
187
|
+
/* @__PURE__ */ jsx("span", {
|
|
188
|
+
className: "flex-1",
|
|
189
|
+
children
|
|
190
|
+
}),
|
|
191
|
+
shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcutBadge, {
|
|
192
|
+
className: "transition-colors duration-150 group-focus/dropdown-menu-item:bg-primary/10 group-focus/dropdown-menu-item:text-primary",
|
|
193
|
+
children: shortcut
|
|
194
|
+
})
|
|
195
|
+
]
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
DropdownMenuItem.displayName = "DropdownMenu.Item";
|
|
199
|
+
/**
|
|
200
|
+
* Enhanced DropdownMenuSeparator
|
|
201
|
+
*/
|
|
202
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
203
|
+
return /* @__PURE__ */ jsx(Menu$1.Separator, {
|
|
204
|
+
"data-slot": "dropdown-menu-separator",
|
|
205
|
+
className: cn("my-1 h-px bg-surface-2", className),
|
|
206
|
+
...props
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
DropdownMenuSeparator.displayName = "DropdownMenu.Separator";
|
|
210
|
+
/**
|
|
211
|
+
* Container for menu items with proper padding
|
|
212
|
+
*/
|
|
213
|
+
function DropdownMenuItems({ className, children, ...props }) {
|
|
64
214
|
return /* @__PURE__ */ jsx("div", {
|
|
65
|
-
"data-slot": "
|
|
66
|
-
className: cn("
|
|
215
|
+
"data-slot": "dropdown-menu-items",
|
|
216
|
+
className: cn("py-1", className),
|
|
67
217
|
...props,
|
|
68
218
|
children
|
|
69
219
|
});
|
|
70
220
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
...props
|
|
221
|
+
DropdownMenuItems.displayName = "DropdownMenu.Items";
|
|
222
|
+
/**
|
|
223
|
+
* Styled shortcut badge that matches Figma design (uses Kbd wrapper)
|
|
224
|
+
*/
|
|
225
|
+
function DropdownMenuShortcutBadge({ className, children, ...props }) {
|
|
226
|
+
return /* @__PURE__ */ jsx(Kbd, {
|
|
227
|
+
variant: "outline",
|
|
228
|
+
size: "xs",
|
|
229
|
+
className,
|
|
230
|
+
...props,
|
|
231
|
+
children
|
|
232
|
+
});
|
|
233
|
+
}
|
|
234
|
+
DropdownMenuShortcutBadge.displayName = "DropdownMenu.ShortcutBadge";
|
|
235
|
+
/**
|
|
236
|
+
* Simplified DropdownMenu component with explicit trigger prop.
|
|
237
|
+
* Prevents nested button hydration errors by using base-ui's render prop.
|
|
238
|
+
*
|
|
239
|
+
* @example
|
|
240
|
+
* <SimpleDropdownMenu trigger={<Button>Menu</Button>}>
|
|
241
|
+
* <DropdownMenu.Popup>
|
|
242
|
+
* <DropdownMenu.Items>
|
|
243
|
+
* <DropdownMenu.Item>Option 1</DropdownMenu.Item>
|
|
244
|
+
* </DropdownMenu.Items>
|
|
245
|
+
* </DropdownMenu.Popup>
|
|
246
|
+
* </SimpleDropdownMenu>
|
|
247
|
+
*/
|
|
248
|
+
function SimpleDropdownMenu({ trigger, open, onOpenChange, children }) {
|
|
249
|
+
return /* @__PURE__ */ jsxs(DropdownMenuRoot, {
|
|
250
|
+
open,
|
|
251
|
+
onOpenChange,
|
|
252
|
+
children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), children]
|
|
81
253
|
});
|
|
82
254
|
}
|
|
83
|
-
|
|
84
|
-
var
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
255
|
+
SimpleDropdownMenu.displayName = "DropdownMenu.Simple";
|
|
256
|
+
var DropdownMenu = Object.assign(DropdownMenuRoot, {
|
|
257
|
+
Root: DropdownMenuRoot,
|
|
258
|
+
Portal: DropdownMenuPortal,
|
|
259
|
+
Trigger: DropdownMenuTrigger,
|
|
260
|
+
Popup: DropdownMenuPopup,
|
|
261
|
+
Group: DropdownMenuGroup,
|
|
262
|
+
Label: DropdownMenuLabel,
|
|
263
|
+
Item: DropdownMenuItem,
|
|
264
|
+
CheckboxItem: DropdownMenuCheckboxItem,
|
|
265
|
+
RadioGroup: DropdownMenuRadioGroup,
|
|
266
|
+
RadioItem: DropdownMenuRadioItem,
|
|
267
|
+
Separator: DropdownMenuSeparator,
|
|
268
|
+
Shortcut: DropdownMenuShortcut,
|
|
269
|
+
ShortcutBadge: DropdownMenuShortcutBadge,
|
|
270
|
+
Sub: DropdownMenuSub,
|
|
271
|
+
SubTrigger: DropdownMenuSubTrigger,
|
|
272
|
+
SubPopup: DropdownMenuSubPopup,
|
|
273
|
+
Header: DropdownMenuHeader,
|
|
274
|
+
Items: DropdownMenuItems,
|
|
275
|
+
Simple: SimpleDropdownMenu
|
|
91
276
|
});
|
|
92
277
|
//#endregion
|
|
93
|
-
export {
|
|
278
|
+
export { DropdownMenu };
|
|
94
279
|
|
|
95
280
|
//# sourceMappingURL=index192.js.map
|