@karakuri-ui/react 0.3.10 → 0.3.12
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/ui/accordion.d.mts +1 -1
- package/dist/components/ui/accordion.d.ts +1 -1
- package/dist/components/ui/alert.d.mts +2 -0
- package/dist/components/ui/alert.d.ts +2 -0
- package/dist/components/ui/alert.js +2 -1
- package/dist/components/ui/alert.js.map +1 -1
- package/dist/components/ui/alert.mjs +2 -1
- package/dist/components/ui/alert.mjs.map +1 -1
- package/dist/components/ui/badge.d.mts +1 -1
- package/dist/components/ui/badge.d.ts +1 -1
- package/dist/components/ui/badge.js +54 -43
- package/dist/components/ui/badge.js.map +1 -1
- package/dist/components/ui/badge.mjs +55 -44
- package/dist/components/ui/badge.mjs.map +1 -1
- package/dist/components/ui/button.js +31 -20
- package/dist/components/ui/button.js.map +1 -1
- package/dist/components/ui/button.mjs +31 -20
- package/dist/components/ui/button.mjs.map +1 -1
- package/dist/components/ui/chart.d.mts +1 -1
- package/dist/components/ui/chart.d.ts +1 -1
- package/dist/components/ui/drawer.d.mts +2 -0
- package/dist/components/ui/drawer.d.ts +2 -0
- package/dist/components/ui/drawer.js +2 -2
- package/dist/components/ui/drawer.js.map +1 -1
- package/dist/components/ui/drawer.mjs +2 -2
- package/dist/components/ui/drawer.mjs.map +1 -1
- package/dist/components/ui/dropdown.js +35 -18
- package/dist/components/ui/dropdown.js.map +1 -1
- package/dist/components/ui/dropdown.mjs +35 -18
- package/dist/components/ui/dropdown.mjs.map +1 -1
- package/dist/components/ui/icon-button.js +24 -13
- package/dist/components/ui/icon-button.js.map +1 -1
- package/dist/components/ui/icon-button.mjs +24 -13
- package/dist/components/ui/icon-button.mjs.map +1 -1
- package/dist/components/ui/modal.d.mts +2 -0
- package/dist/components/ui/modal.d.ts +2 -0
- package/dist/components/ui/modal.js +2 -2
- package/dist/components/ui/modal.js.map +1 -1
- package/dist/components/ui/modal.mjs +2 -2
- package/dist/components/ui/modal.mjs.map +1 -1
- package/dist/components/ui/navigation-menu.js +25 -11
- package/dist/components/ui/navigation-menu.js.map +1 -1
- package/dist/components/ui/navigation-menu.mjs +25 -11
- package/dist/components/ui/navigation-menu.mjs.map +1 -1
- package/dist/components/ui/popover.d.mts +2 -0
- package/dist/components/ui/popover.d.ts +2 -0
- package/dist/components/ui/popover.js +2 -2
- package/dist/components/ui/popover.js.map +1 -1
- package/dist/components/ui/popover.mjs +2 -2
- package/dist/components/ui/popover.mjs.map +1 -1
- package/dist/components/ui/segmented.js +3 -1
- package/dist/components/ui/segmented.js.map +1 -1
- package/dist/components/ui/segmented.mjs +3 -1
- package/dist/components/ui/segmented.mjs.map +1 -1
- package/dist/components/ui/select.js +16 -1
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +16 -1
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/toast.d.mts +3 -1
- package/dist/components/ui/toast.d.ts +3 -1
- package/dist/components/ui/toast.js +4 -1
- package/dist/components/ui/toast.js.map +1 -1
- package/dist/components/ui/toast.mjs +4 -1
- package/dist/components/ui/toast.mjs.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/dropdown.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { cn } from '../../lib/utils'\n\n// Radius variants for Content and Item (concentric rounded rectangles)\ntype DropdownMenuRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded-md', // 6px (default)\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants\ntype DropdownMenuSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-sm',\n lg: 'px-3 py-2.5 text-md',\n}\n\nconst indicatorItemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'py-1.5 pl-6 pr-2 text-xs',\n md: 'py-1.5 pl-8 pr-2 text-sm',\n lg: 'py-2.5 pl-10 pr-3 text-md',\n}\n\nconst indicatorSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'left-2 h-3 w-3',\n md: 'left-2 h-3.5 w-3.5',\n lg: 'left-3 h-4 w-4',\n}\n\nconst labelSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\nconst flushItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\nconst flushIndicatorItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-7 pr-3',\n md: 'pl-9 pr-3',\n lg: 'pl-11 pr-4',\n}\n\nconst insetSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-6',\n md: 'pl-8',\n lg: 'pl-10',\n}\n\n// Style context — propagates radius, flush, size from Content to children\nconst DropdownMenuStyleContext = React.createContext<{\n radius: DropdownMenuRadius\n flush: boolean\n size: DropdownMenuSize\n}>({ radius: 'md', flush: false, size: 'md' })\n\n// Root — state management (controlled / uncontrolled)\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\n// Trigger — the element that toggles the menu\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\n// Group — groups related items\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\n// Sub — submenu root\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\n// RadioGroup — radio selection group\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\n// Content — the floating panel (rendered in a Portal)\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n radius?: DropdownMenuRadius\n flush?: boolean\n size?: DropdownMenuSize\n }\n>(({ className, sideOffset = 4, radius = 'md', flush = false, size = 'md', onCloseAutoFocus, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuStyleContext.Provider value={{ radius, flush, size }}>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n onCloseAutoFocus={(e) => {\n e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n </DropdownMenuStyleContext.Provider>\n </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\n// Item — a single menu item\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\n// CheckboxItem — item with a checkbox indicator\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n checked={checked}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n})\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName\n\n// RadioItem — item within a RadioGroup\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n})\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\n// Label — non-interactive group heading\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[size],\n flush && flushItemPaddingMap[size],\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\n// SubTrigger — item that opens a submenu\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n 'flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'focus:bg-background-muted data-[state=open]:bg-background-muted',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <svg className=\"ml-auto icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </DropdownMenuPrimitive.SubTrigger>\n )\n})\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName\n\n// SubContent — the floating panel for a submenu\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => {\n const { radius, flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName\n\n// Shortcut — keyboard shortcut hint text\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n return (\n <span\n className={cn('ml-auto pl-4 text-xs text-text-subtle tracking-widest', className)}\n {...props}\n />\n )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type { DropdownMenuRadius, DropdownMenuSize }\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuGroup,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n DropdownMenuShortcut,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/dropdown.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { cn } from '../../lib/utils'\n\n// Radius variants for Content and Item (concentric rounded rectangles)\ntype DropdownMenuRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded-md', // 6px (default)\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants\ntype DropdownMenuSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-sm',\n lg: 'px-3 py-2.5 text-md',\n}\n\nconst indicatorItemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'py-1.5 pl-6 pr-2 text-xs',\n md: 'py-1.5 pl-8 pr-2 text-sm',\n lg: 'py-2.5 pl-10 pr-3 text-md',\n}\n\nconst indicatorSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'left-2 h-3 w-3',\n md: 'left-2 h-3.5 w-3.5',\n lg: 'left-3 h-4 w-4',\n}\n\nconst labelSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\nconst flushItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\nconst flushIndicatorItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-7 pr-3',\n md: 'pl-9 pr-3',\n lg: 'pl-11 pr-4',\n}\n\nconst insetSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-6',\n md: 'pl-8',\n lg: 'pl-10',\n}\n\n// Style context — propagates radius, flush, size from Content to children\nconst DropdownMenuStyleContext = React.createContext<{\n radius: DropdownMenuRadius\n flush: boolean\n size: DropdownMenuSize\n}>({ radius: 'md', flush: false, size: 'md' })\n\n// Root — state management (controlled / uncontrolled)\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\n// Trigger — the element that toggles the menu\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\n// Group — groups related items\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\n// Sub — submenu root\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\n// RadioGroup — radio selection group\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\n// Close focus: Radix returns focus to the trigger on close. Return it only when the menu was closed\n// from the keyboard — after a pointer close the programmatic focus would show a stray focus ring.\n// Tracks the last input type once per page.\nlet lastInputWasKeyboard = false\nlet inputTypeTrackerInstalled = false\nfunction useLastInputTypeTracker() {\n React.useEffect(() => {\n if (inputTypeTrackerInstalled) return\n inputTypeTrackerInstalled = true\n document.addEventListener('keydown', () => { lastInputWasKeyboard = true }, true)\n document.addEventListener('pointerdown', () => { lastInputWasKeyboard = false }, true)\n }, [])\n}\n\n// Content — the floating panel (rendered in a Portal)\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n radius?: DropdownMenuRadius\n flush?: boolean\n size?: DropdownMenuSize\n }\n>(({ className, sideOffset = 4, radius = 'md', flush = false, size = 'md', onCloseAutoFocus, ...props }, ref) => {\n useLastInputTypeTracker()\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuStyleContext.Provider value={{ radius, flush, size }}>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n onCloseAutoFocus={(e) => {\n if (!lastInputWasKeyboard) e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n </DropdownMenuStyleContext.Provider>\n </DropdownMenuPrimitive.Portal>\n )\n})\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\n// Item — a single menu item\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\n// CheckboxItem — item with a checkbox indicator\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n checked={checked}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n})\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName\n\n// RadioItem — item within a RadioGroup\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n})\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\n// Label — non-interactive group heading\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[size],\n flush && flushItemPaddingMap[size],\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\n// SubTrigger — item that opens a submenu\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n 'flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'focus:bg-background-muted data-[state=open]:bg-background-muted',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <svg className=\"ml-auto icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </DropdownMenuPrimitive.SubTrigger>\n )\n})\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName\n\n// SubContent — the floating panel for a submenu\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => {\n const { radius, flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName\n\n// Shortcut — keyboard shortcut hint text\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n return (\n <span\n className={cn('ml-auto pl-4 text-xs text-text-subtle tracking-widest', className)}\n {...props}\n />\n )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type { DropdownMenuRadius, DropdownMenuSize }\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuGroup,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n DropdownMenuShortcut,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -60,24 +60,41 @@ const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
|
|
60
60
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
|
61
61
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
|
62
62
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
63
|
+
let lastInputWasKeyboard = false;
|
|
64
|
+
let inputTypeTrackerInstalled = false;
|
|
65
|
+
function useLastInputTypeTracker() {
|
|
66
|
+
React.useEffect(() => {
|
|
67
|
+
if (inputTypeTrackerInstalled) return;
|
|
68
|
+
inputTypeTrackerInstalled = true;
|
|
69
|
+
document.addEventListener("keydown", () => {
|
|
70
|
+
lastInputWasKeyboard = true;
|
|
71
|
+
}, true);
|
|
72
|
+
document.addEventListener("pointerdown", () => {
|
|
73
|
+
lastInputWasKeyboard = false;
|
|
74
|
+
}, true);
|
|
75
|
+
}, []);
|
|
76
|
+
}
|
|
77
|
+
const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, radius = "md", flush = false, size = "md", onCloseAutoFocus, ...props }, ref) => {
|
|
78
|
+
useLastInputTypeTracker();
|
|
79
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuStyleContext.Provider, { value: { radius, flush, size }, children: /* @__PURE__ */ jsx(
|
|
80
|
+
DropdownMenuPrimitive.Content,
|
|
81
|
+
{
|
|
82
|
+
ref,
|
|
83
|
+
sideOffset,
|
|
84
|
+
onCloseAutoFocus: (e) => {
|
|
85
|
+
if (!lastInputWasKeyboard) e.preventDefault();
|
|
86
|
+
onCloseAutoFocus?.(e);
|
|
87
|
+
},
|
|
88
|
+
className: cn(
|
|
89
|
+
"z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg",
|
|
90
|
+
flush ? "py-1" : "p-1",
|
|
91
|
+
contentRadiusMap[radius],
|
|
92
|
+
className
|
|
93
|
+
),
|
|
94
|
+
...props
|
|
95
|
+
}
|
|
96
|
+
) }) });
|
|
97
|
+
});
|
|
81
98
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
|
82
99
|
const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => {
|
|
83
100
|
const { radius, flush, size } = React.useContext(DropdownMenuStyleContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/dropdown.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { cn } from '../../lib/utils'\n\n// Radius variants for Content and Item (concentric rounded rectangles)\ntype DropdownMenuRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded-md', // 6px (default)\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants\ntype DropdownMenuSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-sm',\n lg: 'px-3 py-2.5 text-md',\n}\n\nconst indicatorItemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'py-1.5 pl-6 pr-2 text-xs',\n md: 'py-1.5 pl-8 pr-2 text-sm',\n lg: 'py-2.5 pl-10 pr-3 text-md',\n}\n\nconst indicatorSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'left-2 h-3 w-3',\n md: 'left-2 h-3.5 w-3.5',\n lg: 'left-3 h-4 w-4',\n}\n\nconst labelSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\nconst flushItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\nconst flushIndicatorItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-7 pr-3',\n md: 'pl-9 pr-3',\n lg: 'pl-11 pr-4',\n}\n\nconst insetSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-6',\n md: 'pl-8',\n lg: 'pl-10',\n}\n\n// Style context — propagates radius, flush, size from Content to children\nconst DropdownMenuStyleContext = React.createContext<{\n radius: DropdownMenuRadius\n flush: boolean\n size: DropdownMenuSize\n}>({ radius: 'md', flush: false, size: 'md' })\n\n// Root — state management (controlled / uncontrolled)\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\n// Trigger — the element that toggles the menu\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\n// Group — groups related items\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\n// Sub — submenu root\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\n// RadioGroup — radio selection group\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\n// Content — the floating panel (rendered in a Portal)\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n radius?: DropdownMenuRadius\n flush?: boolean\n size?: DropdownMenuSize\n }\n>(({ className, sideOffset = 4, radius = 'md', flush = false, size = 'md', onCloseAutoFocus, ...props }, ref) => (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuStyleContext.Provider value={{ radius, flush, size }}>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n onCloseAutoFocus={(e) => {\n e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n </DropdownMenuStyleContext.Provider>\n </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\n// Item — a single menu item\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\n// CheckboxItem — item with a checkbox indicator\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n checked={checked}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n})\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName\n\n// RadioItem — item within a RadioGroup\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n})\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\n// Label — non-interactive group heading\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[size],\n flush && flushItemPaddingMap[size],\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\n// SubTrigger — item that opens a submenu\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n 'flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'focus:bg-background-muted data-[state=open]:bg-background-muted',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <svg className=\"ml-auto icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </DropdownMenuPrimitive.SubTrigger>\n )\n})\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName\n\n// SubContent — the floating panel for a submenu\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => {\n const { radius, flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName\n\n// Shortcut — keyboard shortcut hint text\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n return (\n <span\n className={cn('ml-auto pl-4 text-xs text-text-subtle tracking-widest', className)}\n {...props}\n />\n )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type { DropdownMenuRadius, DropdownMenuSize }\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuGroup,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n DropdownMenuShortcut,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/dropdown.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { cn } from '../../lib/utils'\n\n// Radius variants for Content and Item (concentric rounded rectangles)\ntype DropdownMenuRadius = 'md' | 'lg' | 'xl'\n\nconst contentRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded-md', // 6px (default)\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<DropdownMenuRadius, string> = {\n md: 'rounded', // 4px — perceptual balance (67%)\n lg: 'rounded-md', // 6px — perceptual balance (75%)\n xl: 'rounded-lg', // 8px — perceptual balance (67%)\n}\n\n// Size variants\ntype DropdownMenuSize = 'sm' | 'md' | 'lg'\n\nconst itemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-sm',\n lg: 'px-3 py-2.5 text-md',\n}\n\nconst indicatorItemSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'py-1.5 pl-6 pr-2 text-xs',\n md: 'py-1.5 pl-8 pr-2 text-sm',\n lg: 'py-2.5 pl-10 pr-3 text-md',\n}\n\nconst indicatorSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'left-2 h-3 w-3',\n md: 'left-2 h-3.5 w-3.5',\n lg: 'left-3 h-4 w-4',\n}\n\nconst labelSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'px-2 py-1.5 text-xs',\n md: 'px-2 py-1.5 text-xs',\n lg: 'px-3 py-2.5 text-xs',\n}\n\nconst flushItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'px-3',\n md: 'px-3',\n lg: 'px-4',\n}\n\nconst flushIndicatorItemPaddingMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-7 pr-3',\n md: 'pl-9 pr-3',\n lg: 'pl-11 pr-4',\n}\n\nconst insetSizeMap: Record<DropdownMenuSize, string> = {\n sm: 'pl-6',\n md: 'pl-8',\n lg: 'pl-10',\n}\n\n// Style context — propagates radius, flush, size from Content to children\nconst DropdownMenuStyleContext = React.createContext<{\n radius: DropdownMenuRadius\n flush: boolean\n size: DropdownMenuSize\n}>({ radius: 'md', flush: false, size: 'md' })\n\n// Root — state management (controlled / uncontrolled)\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\n// Trigger — the element that toggles the menu\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\n// Group — groups related items\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\n// Sub — submenu root\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\n// RadioGroup — radio selection group\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\n// Close focus: Radix returns focus to the trigger on close. Return it only when the menu was closed\n// from the keyboard — after a pointer close the programmatic focus would show a stray focus ring.\n// Tracks the last input type once per page.\nlet lastInputWasKeyboard = false\nlet inputTypeTrackerInstalled = false\nfunction useLastInputTypeTracker() {\n React.useEffect(() => {\n if (inputTypeTrackerInstalled) return\n inputTypeTrackerInstalled = true\n document.addEventListener('keydown', () => { lastInputWasKeyboard = true }, true)\n document.addEventListener('pointerdown', () => { lastInputWasKeyboard = false }, true)\n }, [])\n}\n\n// Content — the floating panel (rendered in a Portal)\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n radius?: DropdownMenuRadius\n flush?: boolean\n size?: DropdownMenuSize\n }\n>(({ className, sideOffset = 4, radius = 'md', flush = false, size = 'md', onCloseAutoFocus, ...props }, ref) => {\n useLastInputTypeTracker()\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuStyleContext.Provider value={{ radius, flush, size }}>\n <DropdownMenuPrimitive.Content\n ref={ref}\n sideOffset={sideOffset}\n onCloseAutoFocus={(e) => {\n if (!lastInputWasKeyboard) e.preventDefault()\n onCloseAutoFocus?.(e)\n }}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n </DropdownMenuStyleContext.Provider>\n </DropdownMenuPrimitive.Portal>\n )\n})\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\n// Item — a single menu item\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\n// CheckboxItem — item with a checkbox indicator\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n checked={checked}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n})\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName\n\n// RadioItem — item within a RadioGroup\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n 'relative flex cursor-default select-none items-center outline-none',\n indicatorItemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushIndicatorItemPaddingMap[size],\n 'transition-colors duration-fast',\n 'focus:bg-background-muted',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className={cn('absolute flex items-center justify-center', indicatorSizeMap[size])}>\n <DropdownMenuPrimitive.ItemIndicator>\n <svg className=\"icon-xs\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n})\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\n// Label — non-interactive group heading\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => {\n const { flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Label\n ref={ref}\n className={cn(\n 'font-semibold text-text-muted',\n labelSizeMap[size],\n flush && flushItemPaddingMap[size],\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\n// Separator — visual divider between groups\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n const { flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn('h-px bg-border my-1', !flush && '-mx-1', className)}\n {...props}\n />\n )\n})\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\n// SubTrigger — item that opens a submenu\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => {\n const { radius, flush, size } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubTrigger\n ref={ref}\n className={cn(\n 'flex cursor-default select-none items-center outline-none',\n itemSizeMap[size],\n !flush && itemRadiusMap[radius],\n flush && flushItemPaddingMap[size],\n 'focus:bg-background-muted data-[state=open]:bg-background-muted',\n inset && insetSizeMap[size],\n className\n )}\n {...props}\n >\n {children}\n <svg className=\"ml-auto icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n </DropdownMenuPrimitive.SubTrigger>\n )\n})\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName\n\n// SubContent — the floating panel for a submenu\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => {\n const { radius, flush } = React.useContext(DropdownMenuStyleContext)\n return (\n <DropdownMenuPrimitive.SubContent\n ref={ref}\n className={cn(\n 'z-popover min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg',\n flush ? 'py-1' : 'p-1',\n contentRadiusMap[radius],\n className\n )}\n {...props}\n />\n )\n})\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName\n\n// Shortcut — keyboard shortcut hint text\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n return (\n <span\n className={cn('ml-auto pl-4 text-xs text-text-subtle tracking-widest', className)}\n {...props}\n />\n )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport type { DropdownMenuRadius, DropdownMenuSize }\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuGroup,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n DropdownMenuShortcut,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -95,6 +95,16 @@ const iconButtonVariants = (0, import_class_variance_authority.cva)(
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
);
|
|
98
|
+
const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
|
|
99
|
+
function renderInsideChild(children, render) {
|
|
100
|
+
let child = children;
|
|
101
|
+
const resolve = React.use;
|
|
102
|
+
if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
|
|
103
|
+
child = resolve(child._payload);
|
|
104
|
+
}
|
|
105
|
+
if (!React.isValidElement(child)) return render(children);
|
|
106
|
+
return React.cloneElement(child, void 0, render(child.props.children));
|
|
107
|
+
}
|
|
98
108
|
const IconButton = React.forwardRef(
|
|
99
109
|
({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {
|
|
100
110
|
const groupContext = (0, import_button_group.useButtonGroup)();
|
|
@@ -116,6 +126,19 @@ const IconButton = React.forwardRef(
|
|
|
116
126
|
lg: "icon-lg"
|
|
117
127
|
// 24px
|
|
118
128
|
}[size || "default"];
|
|
129
|
+
const renderContent = (content) => loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
130
|
+
"svg",
|
|
131
|
+
{
|
|
132
|
+
className: (0, import_utils.cn)(iconSize, "animate-spin"),
|
|
133
|
+
fill: "none",
|
|
134
|
+
viewBox: "0 0 24 24",
|
|
135
|
+
"aria-hidden": "true",
|
|
136
|
+
children: [
|
|
137
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
138
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: content });
|
|
119
142
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
120
143
|
Comp,
|
|
121
144
|
{
|
|
@@ -124,19 +147,7 @@ const IconButton = React.forwardRef(
|
|
|
124
147
|
disabled: disabled || loading,
|
|
125
148
|
"aria-busy": loading || void 0,
|
|
126
149
|
...props,
|
|
127
|
-
children:
|
|
128
|
-
"svg",
|
|
129
|
-
{
|
|
130
|
-
className: (0, import_utils.cn)(iconSize, "animate-spin"),
|
|
131
|
-
fill: "none",
|
|
132
|
-
viewBox: "0 0 24 24",
|
|
133
|
-
"aria-hidden": "true",
|
|
134
|
-
children: [
|
|
135
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
136
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
|
|
137
|
-
]
|
|
138
|
-
}
|
|
139
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children })
|
|
150
|
+
children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
|
|
140
151
|
}
|
|
141
152
|
);
|
|
142
153
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n 'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n solid: '',\n outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n ghost: 'text-foreground hover:bg-background-muted',\n subtle: 'text-text-muted hover:text-foreground',\n },\n size: {\n xs: 'h-7 w-7', // 28px - spacing.7\n sm: 'h-8 w-8', // 32px - spacing.8\n md: 'h-9 w-9', // 36px - spacing.9\n default: 'h-10 w-10', // 40px - spacing.10\n lg: 'h-12 w-12', // 48px - spacing.12\n },\n radius: {\n none: 'rounded-none', // 0px - primitive.borderRadius.none\n sm: 'rounded-sm', // 2px - primitive.borderRadius.sm\n base: 'rounded', // 4px - primitive.borderRadius.base\n default: 'rounded-md', // 6px - primitive.borderRadius.md (Figma button default)\n lg: 'rounded-lg', // 8px - primitive.borderRadius.lg\n xl: 'rounded-xl', // 12px - primitive.borderRadius.xl\n '2xl': 'rounded-2xl', // 16px - primitive.borderRadius.2xl\n '3xl': 'rounded-3xl', // 24px - primitive.borderRadius.3xl\n full: 'rounded-full', // 9999px - primitive.borderRadius.full\n },\n },\n defaultVariants: {\n variant: 'solid',\n size: 'default',\n radius: 'default',\n },\n }\n)\n\nexport interface IconButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconButtonVariants> {\n /** Solid variant color */\n color?: ButtonColor\n asChild?: boolean\n loading?: boolean\n pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n const groupContext = useButtonGroup()\n\n // Priority: direct prop > ButtonGroup context > variant default\n const variant = variantProp ?? groupContext?.variant ?? 'solid'\n const color = colorProp ?? 'default'\n const size = sizeProp ?? groupContext?.size\n const radius = radiusProp ?? groupContext?.radius\n const disabled = disabledProp ?? groupContext?.disabled\n\n const Comp = asChild ? Slot : 'button'\n\n // Icon size for icon-only button (5-step scale)\n // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n const iconSize = {\n xs: 'icon-xs', // 14px\n sm: 'icon-sm', // 16px\n md: 'icon-sm', // 16px\n default: 'icon-md', // 20px\n lg: 'icon-lg', // 24px\n }[size || 'default']\n\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n 'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n solid: '',\n outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n ghost: 'text-foreground hover:bg-background-muted',\n subtle: 'text-text-muted hover:text-foreground',\n },\n size: {\n xs: 'h-7 w-7', // 28px - spacing.7\n sm: 'h-8 w-8', // 32px - spacing.8\n md: 'h-9 w-9', // 36px - spacing.9\n default: 'h-10 w-10', // 40px - spacing.10\n lg: 'h-12 w-12', // 48px - spacing.12\n },\n radius: {\n none: 'rounded-none', // 0px - primitive.borderRadius.none\n sm: 'rounded-sm', // 2px - primitive.borderRadius.sm\n base: 'rounded', // 4px - primitive.borderRadius.base\n default: 'rounded-md', // 6px - primitive.borderRadius.md (Figma button default)\n lg: 'rounded-lg', // 8px - primitive.borderRadius.lg\n xl: 'rounded-xl', // 12px - primitive.borderRadius.xl\n '2xl': 'rounded-2xl', // 16px - primitive.borderRadius.2xl\n '3xl': 'rounded-3xl', // 24px - primitive.borderRadius.3xl\n full: 'rounded-full', // 9999px - primitive.borderRadius.full\n },\n },\n defaultVariants: {\n variant: 'solid',\n size: 'default',\n radius: 'default',\n },\n }\n)\n\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\n// asChild: Slot merges props only into a single child element, so the icon\n// wrapper must go inside that child, not around it. Lazy children (from\n// Server Components) are resolved the same way Radix Slot does.\nfunction renderInsideChild(\n children: React.ReactNode,\n render: (content: React.ReactNode) => React.ReactNode\n): React.ReactNode {\n let child: unknown = children\n const resolve = (React as { use?: (usable: unknown) => unknown }).use\n if (\n typeof child === 'object' && child !== null &&\n (child as { $$typeof?: symbol }).$$typeof === REACT_LAZY_TYPE &&\n typeof resolve === 'function'\n ) {\n child = resolve((child as { _payload: unknown })._payload)\n }\n if (!React.isValidElement<{ children?: React.ReactNode }>(child)) return render(children)\n return React.cloneElement(child, undefined, render(child.props.children))\n}\n\nexport interface IconButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconButtonVariants> {\n /** Solid variant color */\n color?: ButtonColor\n asChild?: boolean\n loading?: boolean\n pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n const groupContext = useButtonGroup()\n\n // Priority: direct prop > ButtonGroup context > variant default\n const variant = variantProp ?? groupContext?.variant ?? 'solid'\n const color = colorProp ?? 'default'\n const size = sizeProp ?? groupContext?.size\n const radius = radiusProp ?? groupContext?.radius\n const disabled = disabledProp ?? groupContext?.disabled\n\n const Comp = asChild ? Slot : 'button'\n\n // Icon size for icon-only button (5-step scale)\n // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n const iconSize = {\n xs: 'icon-xs', // 14px\n sm: 'icon-sm', // 16px\n md: 'icon-sm', // 16px\n default: 'icon-md', // 20px\n lg: 'icon-lg', // 24px\n }[size || 'default']\n\n const renderContent = (content: React.ReactNode) => loading ? (\n <svg\n className={cn(iconSize, 'animate-spin')}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n ) : (\n <span className={cn(iconSize, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">\n {content}\n </span>\n )\n\n return (\n <Comp\n className={cn(iconButtonVariants({ variant, size, radius }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', className)}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {asChild ? renderInsideChild(children, renderContent) : renderContent(children)}\n </Comp>\n )\n }\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton, iconButtonVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -61,6 +61,16 @@ const iconButtonVariants = cva(
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
|
+
const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
|
|
65
|
+
function renderInsideChild(children, render) {
|
|
66
|
+
let child = children;
|
|
67
|
+
const resolve = React.use;
|
|
68
|
+
if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
|
|
69
|
+
child = resolve(child._payload);
|
|
70
|
+
}
|
|
71
|
+
if (!React.isValidElement(child)) return render(children);
|
|
72
|
+
return React.cloneElement(child, void 0, render(child.props.children));
|
|
73
|
+
}
|
|
64
74
|
const IconButton = React.forwardRef(
|
|
65
75
|
({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {
|
|
66
76
|
const groupContext = useButtonGroup();
|
|
@@ -82,6 +92,19 @@ const IconButton = React.forwardRef(
|
|
|
82
92
|
lg: "icon-lg"
|
|
83
93
|
// 24px
|
|
84
94
|
}[size || "default"];
|
|
95
|
+
const renderContent = (content) => loading ? /* @__PURE__ */ jsxs(
|
|
96
|
+
"svg",
|
|
97
|
+
{
|
|
98
|
+
className: cn(iconSize, "animate-spin"),
|
|
99
|
+
fill: "none",
|
|
100
|
+
viewBox: "0 0 24 24",
|
|
101
|
+
"aria-hidden": "true",
|
|
102
|
+
children: [
|
|
103
|
+
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
104
|
+
/* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
) : /* @__PURE__ */ jsx("span", { className: cn(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: content });
|
|
85
108
|
return /* @__PURE__ */ jsx(
|
|
86
109
|
Comp,
|
|
87
110
|
{
|
|
@@ -90,19 +113,7 @@ const IconButton = React.forwardRef(
|
|
|
90
113
|
disabled: disabled || loading,
|
|
91
114
|
"aria-busy": loading || void 0,
|
|
92
115
|
...props,
|
|
93
|
-
children:
|
|
94
|
-
"svg",
|
|
95
|
-
{
|
|
96
|
-
className: cn(iconSize, "animate-spin"),
|
|
97
|
-
fill: "none",
|
|
98
|
-
viewBox: "0 0 24 24",
|
|
99
|
-
"aria-hidden": "true",
|
|
100
|
-
children: [
|
|
101
|
-
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
|
|
102
|
-
/* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
|
|
103
|
-
]
|
|
104
|
-
}
|
|
105
|
-
) : /* @__PURE__ */ jsx("span", { className: cn(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children })
|
|
116
|
+
children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
|
|
106
117
|
}
|
|
107
118
|
);
|
|
108
119
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n 'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n solid: '',\n outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n ghost: 'text-foreground hover:bg-background-muted',\n subtle: 'text-text-muted hover:text-foreground',\n },\n size: {\n xs: 'h-7 w-7', // 28px - spacing.7\n sm: 'h-8 w-8', // 32px - spacing.8\n md: 'h-9 w-9', // 36px - spacing.9\n default: 'h-10 w-10', // 40px - spacing.10\n lg: 'h-12 w-12', // 48px - spacing.12\n },\n radius: {\n none: 'rounded-none', // 0px - primitive.borderRadius.none\n sm: 'rounded-sm', // 2px - primitive.borderRadius.sm\n base: 'rounded', // 4px - primitive.borderRadius.base\n default: 'rounded-md', // 6px - primitive.borderRadius.md (Figma button default)\n lg: 'rounded-lg', // 8px - primitive.borderRadius.lg\n xl: 'rounded-xl', // 12px - primitive.borderRadius.xl\n '2xl': 'rounded-2xl', // 16px - primitive.borderRadius.2xl\n '3xl': 'rounded-3xl', // 24px - primitive.borderRadius.3xl\n full: 'rounded-full', // 9999px - primitive.borderRadius.full\n },\n },\n defaultVariants: {\n variant: 'solid',\n size: 'default',\n radius: 'default',\n },\n }\n)\n\nexport interface IconButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconButtonVariants> {\n /** Solid variant color */\n color?: ButtonColor\n asChild?: boolean\n loading?: boolean\n pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n const groupContext = useButtonGroup()\n\n // Priority: direct prop > ButtonGroup context > variant default\n const variant = variantProp ?? groupContext?.variant ?? 'solid'\n const color = colorProp ?? 'default'\n const size = sizeProp ?? groupContext?.size\n const radius = radiusProp ?? groupContext?.radius\n const disabled = disabledProp ?? groupContext?.disabled\n\n const Comp = asChild ? Slot : 'button'\n\n // Icon size for icon-only button (5-step scale)\n // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n const iconSize = {\n xs: 'icon-xs', // 14px\n sm: 'icon-sm', // 16px\n md: 'icon-sm', // 16px\n default: 'icon-md', // 20px\n lg: 'icon-lg', // 24px\n }[size || 'default']\n\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n 'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n solid: '',\n outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n ghost: 'text-foreground hover:bg-background-muted',\n subtle: 'text-text-muted hover:text-foreground',\n },\n size: {\n xs: 'h-7 w-7', // 28px - spacing.7\n sm: 'h-8 w-8', // 32px - spacing.8\n md: 'h-9 w-9', // 36px - spacing.9\n default: 'h-10 w-10', // 40px - spacing.10\n lg: 'h-12 w-12', // 48px - spacing.12\n },\n radius: {\n none: 'rounded-none', // 0px - primitive.borderRadius.none\n sm: 'rounded-sm', // 2px - primitive.borderRadius.sm\n base: 'rounded', // 4px - primitive.borderRadius.base\n default: 'rounded-md', // 6px - primitive.borderRadius.md (Figma button default)\n lg: 'rounded-lg', // 8px - primitive.borderRadius.lg\n xl: 'rounded-xl', // 12px - primitive.borderRadius.xl\n '2xl': 'rounded-2xl', // 16px - primitive.borderRadius.2xl\n '3xl': 'rounded-3xl', // 24px - primitive.borderRadius.3xl\n full: 'rounded-full', // 9999px - primitive.borderRadius.full\n },\n },\n defaultVariants: {\n variant: 'solid',\n size: 'default',\n radius: 'default',\n },\n }\n)\n\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\n// asChild: Slot merges props only into a single child element, so the icon\n// wrapper must go inside that child, not around it. Lazy children (from\n// Server Components) are resolved the same way Radix Slot does.\nfunction renderInsideChild(\n children: React.ReactNode,\n render: (content: React.ReactNode) => React.ReactNode\n): React.ReactNode {\n let child: unknown = children\n const resolve = (React as { use?: (usable: unknown) => unknown }).use\n if (\n typeof child === 'object' && child !== null &&\n (child as { $$typeof?: symbol }).$$typeof === REACT_LAZY_TYPE &&\n typeof resolve === 'function'\n ) {\n child = resolve((child as { _payload: unknown })._payload)\n }\n if (!React.isValidElement<{ children?: React.ReactNode }>(child)) return render(children)\n return React.cloneElement(child, undefined, render(child.props.children))\n}\n\nexport interface IconButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof iconButtonVariants> {\n /** Solid variant color */\n color?: ButtonColor\n asChild?: boolean\n loading?: boolean\n pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n const groupContext = useButtonGroup()\n\n // Priority: direct prop > ButtonGroup context > variant default\n const variant = variantProp ?? groupContext?.variant ?? 'solid'\n const color = colorProp ?? 'default'\n const size = sizeProp ?? groupContext?.size\n const radius = radiusProp ?? groupContext?.radius\n const disabled = disabledProp ?? groupContext?.disabled\n\n const Comp = asChild ? Slot : 'button'\n\n // Icon size for icon-only button (5-step scale)\n // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n const iconSize = {\n xs: 'icon-xs', // 14px\n sm: 'icon-sm', // 16px\n md: 'icon-sm', // 16px\n default: 'icon-md', // 20px\n lg: 'icon-lg', // 24px\n }[size || 'default']\n\n const renderContent = (content: React.ReactNode) => loading ? (\n <svg\n className={cn(iconSize, 'animate-spin')}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n ) : (\n <span className={cn(iconSize, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">\n {content}\n </span>\n )\n\n return (\n <Comp\n className={cn(iconButtonVariants({ variant, size, radius }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', className)}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {asChild ? renderInsideChild(children, renderContent) : renderContent(children)}\n </Comp>\n )\n }\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton, iconButtonVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -19,6 +19,8 @@ interface ModalContentProps extends React.ComponentPropsWithoutRef<typeof Dialog
|
|
|
19
19
|
showCloseButton?: boolean;
|
|
20
20
|
/** Custom close icon (replaces default X) */
|
|
21
21
|
closeIcon?: React.ReactNode;
|
|
22
|
+
/** Accessible label for the close button (screen readers) — localize per page */
|
|
23
|
+
closeLabel?: string;
|
|
22
24
|
}
|
|
23
25
|
declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
24
26
|
declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -19,6 +19,8 @@ interface ModalContentProps extends React.ComponentPropsWithoutRef<typeof Dialog
|
|
|
19
19
|
showCloseButton?: boolean;
|
|
20
20
|
/** Custom close icon (replaces default X) */
|
|
21
21
|
closeIcon?: React.ReactNode;
|
|
22
|
+
/** Accessible label for the close button (screen readers) — localize per page */
|
|
23
|
+
closeLabel?: string;
|
|
22
24
|
}
|
|
23
25
|
declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
24
26
|
declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -117,7 +117,7 @@ const modalContentVariants = (0, import_class_variance_authority.cva)("", {
|
|
|
117
117
|
size: "sm"
|
|
118
118
|
}
|
|
119
119
|
});
|
|
120
|
-
const ModalContent = React.forwardRef(({ className, children, size = "sm", scrollBehavior = "outside", showCloseButton = true, closeIcon, ...props }, ref) => {
|
|
120
|
+
const ModalContent = React.forwardRef(({ className, children, size = "sm", scrollBehavior = "outside", showCloseButton = true, closeIcon, closeLabel = "Close", ...props }, ref) => {
|
|
121
121
|
const isInside = scrollBehavior === "inside";
|
|
122
122
|
const isFull = size === "full";
|
|
123
123
|
const useInsideScroll = isInside || isFull;
|
|
@@ -129,7 +129,7 @@ const ModalContent = React.forwardRef(({ className, children, size = "sm", scrol
|
|
|
129
129
|
"disabled:pointer-events-none"
|
|
130
130
|
), children: [
|
|
131
131
|
closeIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultCloseIcon, { className: "icon-sm" }),
|
|
132
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children:
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: closeLabel })
|
|
133
133
|
] });
|
|
134
134
|
if (!useInsideScroll) {
|
|
135
135
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalPortal, { children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/modal.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Style Context ──────────────────────────────────────────\ntype ModalStyleContextValue = {\n scrollBehavior: 'inside' | 'outside'\n}\nconst ModalStyleContext = React.createContext<ModalStyleContextValue>({\n scrollBehavior: 'outside',\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Modal (Dialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Modal (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Modal(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── ModalTrigger ───────────────────────────────────────────\nconst ModalTrigger = DialogPrimitive.Trigger\n\n// ─── ModalPortal ────────────────────────────────────────────\nconst ModalPortal = DialogPrimitive.Portal\n\n// ─── ModalClose ─────────────────────────────────────────────\nconst ModalClose = DialogPrimitive.Close\n\n// ─── ModalOverlay ───────────────────────────────────────────\nconst ModalOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nModalOverlay.displayName = 'ModalOverlay'\n\n// ─── ModalContent ───────────────────────────────────────────\nconst modalContentVariants = cva('', {\n variants: {\n size: {\n xs: 'max-w-[360px]', // 360px — simple confirmation\n sm: 'max-w-[480px]', // 480px — standard (default)\n md: 'max-w-[600px]', // 600px — standard form\n lg: 'max-w-[760px]', // 760px — complex form\n xl: 'max-w-[960px]', // 960px — table, dashboard\n full: 'max-w-none', // full width (constrained by wrapper padding)\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n})\n\nexport interface ModalContentProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof modalContentVariants> {\n /** Scroll behavior when content overflows */\n scrollBehavior?: 'inside' | 'outside'\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n}\n\nconst ModalContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n ModalContentProps\n>(({ className, children, size = 'sm', scrollBehavior = 'outside', showCloseButton = true, closeIcon, ...props }, ref) => {\n const isInside = scrollBehavior === 'inside'\n const isFull = size === 'full'\n const useInsideScroll = isInside || isFull\n\n const closeButton = showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )\n\n if (!useInsideScroll) {\n // Outside scroll: DialogPrimitive.Content becomes the full-screen scrollable container.\n // Radix's internal RemoveScroll detects its own root element as scrollable,\n // allowing wheel/touch scroll events to pass through correctly.\n return (\n <ModalPortal>\n <ModalOverlay />\n <ModalStyleContext.Provider value={{ scrollBehavior: 'outside' }}>\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed inset-0 z-modal overflow-y-auto',\n 'focus:outline-none',\n 'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n )}\n {...props}\n >\n {/* Backdrop click area: closes dialog when clicking outside the panel */}\n <DialogPrimitive.Close asChild>\n <div className=\"flex min-h-full items-center justify-center p-4\">\n <div\n className={cn(\n 'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n modalContentVariants({ size }),\n className,\n )}\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n {closeButton}\n </div>\n </div>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </ModalStyleContext.Provider>\n </ModalPortal>\n )\n }\n\n // Inside scroll / full: DialogPrimitive.Content is the visual modal panel.\n return (\n <ModalPortal>\n <ModalOverlay />\n <ModalStyleContext.Provider value={{ scrollBehavior: 'inside' }}>\n <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n 'focus:outline-none',\n 'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n modalContentVariants({ size }),\n isInside && 'flex flex-col max-h-[85vh]',\n isFull && 'flex flex-col h-full',\n className,\n )}\n {...props}\n >\n {children}\n {closeButton}\n </DialogPrimitive.Content>\n </div>\n </ModalStyleContext.Provider>\n </ModalPortal>\n )\n})\nModalContent.displayName = 'ModalContent'\n\n// ─── ModalHeader ────────────────────────────────────────────\nconst ModalHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nModalHeader.displayName = 'ModalHeader'\n\n// ─── ModalTitle ─────────────────────────────────────────────\nconst ModalTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nModalTitle.displayName = 'ModalTitle'\n\n// ─── ModalDescription ───────────────────────────────────────\nconst ModalDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nModalDescription.displayName = 'ModalDescription'\n\n// ─── ModalBody ──────────────────────────────────────────────\nconst ModalBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { scrollBehavior } = React.useContext(ModalStyleContext)\n return (\n <div\n ref={ref}\n className={cn(\n 'p-6',\n scrollBehavior === 'inside' && 'flex-1 overflow-y-auto',\n className\n )}\n {...props}\n />\n )\n})\nModalBody.displayName = 'ModalBody'\n\n// ─── ModalFooter ────────────────────────────────────────────\nconst ModalFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nModalFooter.displayName = 'ModalFooter'\n\n// ═══════════════════════════════════════════════════════════════\n// AlertModal (AlertDialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── AlertModal (Root) ──────────────────────────────────────\nconst AlertModal = AlertDialogPrimitive.Root\n\n// ─── AlertModalTrigger ──────────────────────────────────────\nconst AlertModalTrigger = AlertDialogPrimitive.Trigger\n\n// ─── AlertModalPortal ───────────────────────────────────────\nconst AlertModalPortal = AlertDialogPrimitive.Portal\n\n// ─── AlertModalOverlay ──────────────────────────────────────\nconst AlertModalOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nAlertModalOverlay.displayName = 'AlertModalOverlay'\n\n// ─── AlertModalContent ──────────────────────────────────────\nconst alertModalContentVariants = cva('', {\n variants: {\n size: {\n xs: 'max-w-[360px]', // 360px\n sm: 'max-w-[480px]', // 480px (default)\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n})\n\nexport interface AlertModalContentProps\n extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,\n VariantProps<typeof alertModalContentVariants> {}\n\nconst AlertModalContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n AlertModalContentProps\n>(({ className, children, size = 'sm', ...props }, ref) => (\n <AlertModalPortal>\n <AlertModalOverlay />\n <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n <AlertDialogPrimitive.Content\n ref={ref}\n className={cn(\n 'relative w-full rounded-xl bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n 'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n alertModalContentVariants({ size }),\n className\n )}\n {...props}\n >\n {children}\n </AlertDialogPrimitive.Content>\n </div>\n </AlertModalPortal>\n))\nAlertModalContent.displayName = 'AlertModalContent'\n\n// ─── AlertModalHeader ───────────────────────────────────────\nconst AlertModalHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nAlertModalHeader.displayName = 'AlertModalHeader'\n\n// ─── AlertModalTitle ────────────────────────────────────────\nconst AlertModalTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nAlertModalTitle.displayName = 'AlertModalTitle'\n\n// ─── AlertModalDescription ──────────────────────────────────\nconst AlertModalDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nAlertModalDescription.displayName = 'AlertModalDescription'\n\n// ─── AlertModalBody ─────────────────────────────────────────\nconst AlertModalBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('p-6', className)}\n {...props}\n />\n))\nAlertModalBody.displayName = 'AlertModalBody'\n\n// ─── AlertModalFooter ───────────────────────────────────────\nconst AlertModalFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nAlertModalFooter.displayName = 'AlertModalFooter'\n\n// ─── AlertModalAction ───────────────────────────────────────\nconst AlertModalAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={className}\n {...props}\n />\n))\nAlertModalAction.displayName = 'AlertModalAction'\n\n// ─── AlertModalCancel ───────────────────────────────────────\nconst AlertModalCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={className}\n {...props}\n />\n))\nAlertModalCancel.displayName = 'AlertModalCancel'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Modal,\n ModalTrigger,\n ModalPortal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalTitle,\n ModalDescription,\n ModalBody,\n ModalFooter,\n ModalClose,\n modalContentVariants,\n AlertModal,\n AlertModalTrigger,\n AlertModalPortal,\n AlertModalOverlay,\n AlertModalContent,\n AlertModalHeader,\n AlertModalTitle,\n AlertModalDescription,\n AlertModalBody,\n AlertModalFooter,\n AlertModalAction,\n AlertModalCancel,\n alertModalContentVariants,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAhBJ,YAAuB;AACvB,sBAAiC;AACjC,2BAAsC;AACtC,sCAAuC;AACvC,mBAAmB;AAGnB,MAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,aAAa;AAAA,IACb,eAAY;AAAA,IAEZ,sDAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAC9E;AAOF,MAAM,oBAAoB,MAAM,cAAsC;AAAA,EACpE,gBAAgB;AAClB,CAAC;AAOD,SAAS,MAAM,OAAoE;AACjF,SAAO,4CAAC,gBAAgB,MAAhB,EAAsB,GAAG,OAAO;AAC1C;AAGA,MAAM,eAAe,gBAAgB;AAGrC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,aAAa,gBAAgB;AAGnC,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,eAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;AAG3B,MAAM,2BAAuB,qCAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,MAAM;AAAA;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAaD,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,UAAU,OAAO,MAAM,iBAAiB,WAAW,kBAAkB,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AACxH,QAAM,WAAW,mBAAmB;AACpC,QAAM,SAAS,SAAS;AACxB,QAAM,kBAAkB,YAAY;AAEpC,QAAM,cAAc,mBAClB,6CAAC,gBAAgB,OAAhB,EAAsB,eAAW;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACG;AAAA,iBAAa,4CAAC,oBAAiB,WAAU,WAAU;AAAA,IACpD,4CAAC,UAAK,WAAU,WAAU,mBAAK;AAAA,KACjC;AAGF,MAAI,CAAC,iBAAiB;AAIpB,WACE,6CAAC,eACC;AAAA,kDAAC,gBAAa;AAAA,MACd,4CAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,gBAAgB,UAAU,GAC7D;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACC;AAAA,UACA,eAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAGJ,sDAAC,gBAAgB,OAAhB,EAAsB,SAAO,MAC5B,sDAAC,SAAI,WAAU,mDACb;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,gBACT;AAAA,gBACA,qBAAqB,EAAE,KAAK,CAAC;AAAA,gBAC7B;AAAA,cACF;AAAA,cACA,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAEjC;AAAA;AAAA,gBACA;AAAA;AAAA;AAAA,UACH,GACF,GACF;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,EAEJ;AAGA,SACE,6CAAC,eACC;AAAA,gDAAC,gBAAa;AAAA,IACd,4CAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,gBAAgB,SAAS,GAC5D,sDAAC,SAAI,WAAU,8DACb;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,qBAAqB,EAAE,KAAK,CAAC;AAAA,UAC7B,YAAY;AAAA,UACZ,UAAU;AAAA,UACV;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH,GACF,GACF;AAAA,KACF;AAEJ,CAAC;AACD,aAAa,cAAc;AAG3B,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,kCAAkC,SAAS;AAAA,IACxD,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAG1B,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,yCAAyC,SAAS;AAAA,IAC/D,GAAG;AAAA;AACN,CACD;AACD,WAAW,cAAc;AAGzB,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,2BAA2B,SAAS;AAAA,IACjD,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc;AAG/B,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,EAAE,eAAe,IAAI,MAAM,WAAW,iBAAiB;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA,mBAAmB,YAAY;AAAA,QAC/B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,UAAU,cAAc;AAGxB,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc;AAO1B,MAAM,aAAa,qBAAqB;AAGxC,MAAM,oBAAoB,qBAAqB;AAG/C,MAAM,mBAAmB,qBAAqB;AAG9C,MAAM,oBAAoB,MAAM,WAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA,eAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,kBAAkB,cAAc;AAGhC,MAAM,gCAA4B,qCAAI,IAAI;AAAA,EACxC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAMD,MAAM,oBAAoB,MAAM,WAG9B,CAAC,EAAE,WAAW,UAAU,OAAO,MAAM,GAAG,MAAM,GAAG,QACjD,6CAAC,oBACC;AAAA,8CAAC,qBAAkB;AAAA,EACnB,4CAAC,SAAI,WAAU,8DACb;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,0BAA0B,EAAE,KAAK,CAAC;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAAA,GACF,CACD;AACD,kBAAkB,cAAc;AAGhC,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,kCAAkC,SAAS;AAAA,IACxD,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc;AAG/B,MAAM,kBAAkB,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,yCAAyC,SAAS;AAAA,IAC/D,GAAG;AAAA;AACN,CACD;AACD,gBAAgB,cAAc;AAG9B,MAAM,wBAAwB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,2BAA2B,SAAS;AAAA,IACjD,GAAG;AAAA;AACN,CACD;AACD,sBAAsB,cAAc;AAGpC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,OAAO,SAAS;AAAA,IAC7B,GAAG;AAAA;AACN,CACD;AACD,eAAe,cAAc;AAG7B,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc;AAG/B,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc;AAG/B,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/modal.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Style Context ──────────────────────────────────────────\ntype ModalStyleContextValue = {\n scrollBehavior: 'inside' | 'outside'\n}\nconst ModalStyleContext = React.createContext<ModalStyleContextValue>({\n scrollBehavior: 'outside',\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Modal (Dialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Modal (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Modal(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── ModalTrigger ───────────────────────────────────────────\nconst ModalTrigger = DialogPrimitive.Trigger\n\n// ─── ModalPortal ────────────────────────────────────────────\nconst ModalPortal = DialogPrimitive.Portal\n\n// ─── ModalClose ─────────────────────────────────────────────\nconst ModalClose = DialogPrimitive.Close\n\n// ─── ModalOverlay ───────────────────────────────────────────\nconst ModalOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nModalOverlay.displayName = 'ModalOverlay'\n\n// ─── ModalContent ───────────────────────────────────────────\nconst modalContentVariants = cva('', {\n variants: {\n size: {\n xs: 'max-w-[360px]', // 360px — simple confirmation\n sm: 'max-w-[480px]', // 480px — standard (default)\n md: 'max-w-[600px]', // 600px — standard form\n lg: 'max-w-[760px]', // 760px — complex form\n xl: 'max-w-[960px]', // 960px — table, dashboard\n full: 'max-w-none', // full width (constrained by wrapper padding)\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n})\n\nexport interface ModalContentProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof modalContentVariants> {\n /** Scroll behavior when content overflows */\n scrollBehavior?: 'inside' | 'outside'\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n /** Accessible label for the close button (screen readers) — localize per page */\n closeLabel?: string\n}\n\nconst ModalContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n ModalContentProps\n>(({ className, children, size = 'sm', scrollBehavior = 'outside', showCloseButton = true, closeIcon, closeLabel = 'Close', ...props }, ref) => {\n const isInside = scrollBehavior === 'inside'\n const isFull = size === 'full'\n const useInsideScroll = isInside || isFull\n\n const closeButton = showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">{closeLabel}</span>\n </DialogPrimitive.Close>\n )\n\n if (!useInsideScroll) {\n // Outside scroll: DialogPrimitive.Content becomes the full-screen scrollable container.\n // Radix's internal RemoveScroll detects its own root element as scrollable,\n // allowing wheel/touch scroll events to pass through correctly.\n return (\n <ModalPortal>\n <ModalOverlay />\n <ModalStyleContext.Provider value={{ scrollBehavior: 'outside' }}>\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed inset-0 z-modal overflow-y-auto',\n 'focus:outline-none',\n 'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n )}\n {...props}\n >\n {/* Backdrop click area: closes dialog when clicking outside the panel */}\n <DialogPrimitive.Close asChild>\n <div className=\"flex min-h-full items-center justify-center p-4\">\n <div\n className={cn(\n 'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n modalContentVariants({ size }),\n className,\n )}\n onClick={(e) => e.stopPropagation()}\n >\n {children}\n {closeButton}\n </div>\n </div>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </ModalStyleContext.Provider>\n </ModalPortal>\n )\n }\n\n // Inside scroll / full: DialogPrimitive.Content is the visual modal panel.\n return (\n <ModalPortal>\n <ModalOverlay />\n <ModalStyleContext.Provider value={{ scrollBehavior: 'inside' }}>\n <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n 'focus:outline-none',\n 'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n modalContentVariants({ size }),\n isInside && 'flex flex-col max-h-[85vh]',\n isFull && 'flex flex-col h-full',\n className,\n )}\n {...props}\n >\n {children}\n {closeButton}\n </DialogPrimitive.Content>\n </div>\n </ModalStyleContext.Provider>\n </ModalPortal>\n )\n})\nModalContent.displayName = 'ModalContent'\n\n// ─── ModalHeader ────────────────────────────────────────────\nconst ModalHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nModalHeader.displayName = 'ModalHeader'\n\n// ─── ModalTitle ─────────────────────────────────────────────\nconst ModalTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nModalTitle.displayName = 'ModalTitle'\n\n// ─── ModalDescription ───────────────────────────────────────\nconst ModalDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nModalDescription.displayName = 'ModalDescription'\n\n// ─── ModalBody ──────────────────────────────────────────────\nconst ModalBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { scrollBehavior } = React.useContext(ModalStyleContext)\n return (\n <div\n ref={ref}\n className={cn(\n 'p-6',\n scrollBehavior === 'inside' && 'flex-1 overflow-y-auto',\n className\n )}\n {...props}\n />\n )\n})\nModalBody.displayName = 'ModalBody'\n\n// ─── ModalFooter ────────────────────────────────────────────\nconst ModalFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nModalFooter.displayName = 'ModalFooter'\n\n// ═══════════════════════════════════════════════════════════════\n// AlertModal (AlertDialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── AlertModal (Root) ──────────────────────────────────────\nconst AlertModal = AlertDialogPrimitive.Root\n\n// ─── AlertModalTrigger ──────────────────────────────────────\nconst AlertModalTrigger = AlertDialogPrimitive.Trigger\n\n// ─── AlertModalPortal ───────────────────────────────────────\nconst AlertModalPortal = AlertDialogPrimitive.Portal\n\n// ─── AlertModalOverlay ──────────────────────────────────────\nconst AlertModalOverlay = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nAlertModalOverlay.displayName = 'AlertModalOverlay'\n\n// ─── AlertModalContent ──────────────────────────────────────\nconst alertModalContentVariants = cva('', {\n variants: {\n size: {\n xs: 'max-w-[360px]', // 360px\n sm: 'max-w-[480px]', // 480px (default)\n },\n },\n defaultVariants: {\n size: 'sm',\n },\n})\n\nexport interface AlertModalContentProps\n extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,\n VariantProps<typeof alertModalContentVariants> {}\n\nconst AlertModalContent = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\n AlertModalContentProps\n>(({ className, children, size = 'sm', ...props }, ref) => (\n <AlertModalPortal>\n <AlertModalOverlay />\n <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n <AlertDialogPrimitive.Content\n ref={ref}\n className={cn(\n 'relative w-full rounded-xl bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n 'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n alertModalContentVariants({ size }),\n className\n )}\n {...props}\n >\n {children}\n </AlertDialogPrimitive.Content>\n </div>\n </AlertModalPortal>\n))\nAlertModalContent.displayName = 'AlertModalContent'\n\n// ─── AlertModalHeader ───────────────────────────────────────\nconst AlertModalHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nAlertModalHeader.displayName = 'AlertModalHeader'\n\n// ─── AlertModalTitle ────────────────────────────────────────\nconst AlertModalTitle = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nAlertModalTitle.displayName = 'AlertModalTitle'\n\n// ─── AlertModalDescription ──────────────────────────────────\nconst AlertModalDescription = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nAlertModalDescription.displayName = 'AlertModalDescription'\n\n// ─── AlertModalBody ─────────────────────────────────────────\nconst AlertModalBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('p-6', className)}\n {...props}\n />\n))\nAlertModalBody.displayName = 'AlertModalBody'\n\n// ─── AlertModalFooter ───────────────────────────────────────\nconst AlertModalFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nAlertModalFooter.displayName = 'AlertModalFooter'\n\n// ─── AlertModalAction ───────────────────────────────────────\nconst AlertModalAction = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Action\n ref={ref}\n className={className}\n {...props}\n />\n))\nAlertModalAction.displayName = 'AlertModalAction'\n\n// ─── AlertModalCancel ───────────────────────────────────────\nconst AlertModalCancel = React.forwardRef<\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n <AlertDialogPrimitive.Cancel\n ref={ref}\n className={className}\n {...props}\n />\n))\nAlertModalCancel.displayName = 'AlertModalCancel'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Modal,\n ModalTrigger,\n ModalPortal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalTitle,\n ModalDescription,\n ModalBody,\n ModalFooter,\n ModalClose,\n modalContentVariants,\n AlertModal,\n AlertModalTrigger,\n AlertModalPortal,\n AlertModalOverlay,\n AlertModalContent,\n AlertModalHeader,\n AlertModalTitle,\n AlertModalDescription,\n AlertModalBody,\n AlertModalFooter,\n AlertModalAction,\n AlertModalCancel,\n alertModalContentVariants,\n}\n"],"mappings":"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","names":[]}
|