@waveso/ui 0.4.1 → 0.5.0

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.
Files changed (52) hide show
  1. package/dist/accordion.js +1 -1
  2. package/dist/accordion.js.map +1 -1
  3. package/dist/alert-dialog.js +2 -2
  4. package/dist/alert-dialog.js.map +1 -1
  5. package/dist/animate.d.ts +5 -2
  6. package/dist/animate.d.ts.map +1 -1
  7. package/dist/animate.js +14 -8
  8. package/dist/animate.js.map +1 -1
  9. package/dist/autocomplete.js +1 -1
  10. package/dist/autocomplete.js.map +1 -1
  11. package/dist/badge.d.ts +1 -1
  12. package/dist/badge.js +1 -1
  13. package/dist/badge.js.map +1 -1
  14. package/dist/button.d.ts +1 -1
  15. package/dist/button.js +1 -1
  16. package/dist/button.js.map +1 -1
  17. package/dist/combobox.js +3 -3
  18. package/dist/combobox.js.map +1 -1
  19. package/dist/context-menu.js +1 -1
  20. package/dist/context-menu.js.map +1 -1
  21. package/dist/dialog.js +2 -2
  22. package/dist/dialog.js.map +1 -1
  23. package/dist/drawer.js +2 -2
  24. package/dist/drawer.js.map +1 -1
  25. package/dist/input-otp.js +1 -1
  26. package/dist/input-otp.js.map +1 -1
  27. package/dist/item.js +1 -1
  28. package/dist/item.js.map +1 -1
  29. package/dist/menu.js +1 -1
  30. package/dist/menu.js.map +1 -1
  31. package/dist/popover.js +1 -1
  32. package/dist/popover.js.map +1 -1
  33. package/dist/preview-card.js +1 -1
  34. package/dist/preview-card.js.map +1 -1
  35. package/dist/scroll-area.js +1 -1
  36. package/dist/scroll-area.js.map +1 -1
  37. package/dist/select.js +1 -1
  38. package/dist/select.js.map +1 -1
  39. package/dist/slider.js +2 -2
  40. package/dist/slider.js.map +1 -1
  41. package/dist/styles.css +87 -29
  42. package/dist/switch.js +1 -1
  43. package/dist/switch.js.map +1 -1
  44. package/dist/tabs.js +1 -1
  45. package/dist/tabs.js.map +1 -1
  46. package/dist/toast.js +1 -1
  47. package/dist/toast.js.map +1 -1
  48. package/dist/toggle.js +1 -1
  49. package/dist/toggle.js.map +1 -1
  50. package/dist/tooltip.js +1 -1
  51. package/dist/tooltip.js.map +1 -1
  52. package/package.json +1 -1
@@ -35,7 +35,7 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
35
35
  sideOffset,
36
36
  children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
37
37
  "data-slot": "context-menu-content",
38
- className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none", className),
38
+ className: cn("motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none", className),
39
39
  finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
40
40
  ...props
41
41
  })
@@ -1 +1 @@
1
- {"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../src/context-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>\ntype ContextMenuPortalProps = React.ComponentProps<typeof ContextMenuPrimitive.Portal>\ntype ContextMenuTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.Trigger>\n\ntype ContextMenuContentProps = React.ComponentProps<typeof ContextMenuPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof ContextMenuPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n > & {\n /**\n * Focus-restoration policy when the menu closes. Defaults to Base\n * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n * the trigger is hover/focus-within–revealed so a pointer close\n * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\ntype ContextMenuGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.Group>\n\ntype ContextMenuLabelProps = React.ComponentProps<typeof ContextMenuPrimitive.GroupLabel> & {\n inset?: boolean\n}\n\ntype ContextMenuItemProps = React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}\n\ntype ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuRoot>\n\ntype ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger> & {\n inset?: boolean\n}\n\ntype ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n inset?: boolean\n}\n\ntype ContextMenuRadioGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>\n\ntype ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n inset?: boolean\n}\n\ntype ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenuPrimitive.Separator>\n\ntype ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>\ntype ContextMenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction ContextMenu(props: ContextMenuProps) {\n return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal(props: ContextMenuPortalProps) {\n return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n}\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps) {\n return (\n <ContextMenuPrimitive.Trigger\n data-slot=\"context-menu-trigger\"\n className={cn(\"select-none\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuContent({\n className,\n align = \"start\",\n alignOffset = 4,\n side = \"right\",\n sideOffset = 0,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: ContextMenuContentProps) {\n return (\n <ContextMenuPrimitive.Portal>\n <ContextMenuPrimitive.Positioner\n data-slot=\"context-menu-positioner\"\n className=\"isolate z-50 outline-none\"\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <ContextMenuPrimitive.Popup\n data-slot=\"context-menu-content\"\n className={cn(\n \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none\",\n className,\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </ContextMenuPrimitive.Positioner>\n </ContextMenuPrimitive.Portal>\n )\n}\n\nfunction ContextMenuGroup(props: ContextMenuGroupProps) {\n return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n}\n\nfunction ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n return (\n <ContextMenuPrimitive.GroupLabel\n data-slot=\"context-menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: ContextMenuItemProps) {\n return (\n <ContextMenuPrimitive.Item\n data-slot=\"context-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuSub(props: ContextMenuSubProps) {\n return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps) {\n return (\n <ContextMenuPrimitive.SubmenuTrigger\n data-slot=\"context-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto\" />\n </ContextMenuPrimitive.SubmenuTrigger>\n )\n}\n\nfunction ContextMenuSubContent({\n align = \"start\",\n // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n // item lines up with the parent item row, not the popup container edge.\n alignOffset = -4,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: ContextMenuSubContentProps) {\n return (\n <ContextMenuContent\n data-slot=\"context-menu-sub-content\"\n className={cn(\"w-auto min-w-24 shadow-lg\", className)}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n {...props}\n />\n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: ContextMenuCheckboxItemProps) {\n return (\n <ContextMenuPrimitive.CheckboxItem\n data-slot=\"context-menu-checkbox-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n data-slot=\"context-menu-checkbox-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.CheckboxItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.CheckboxItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {\n return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />\n}\n\nfunction ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps) {\n return (\n <ContextMenuPrimitive.RadioItem\n data-slot=\"context-menu-radio-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span\n data-slot=\"context-menu-radio-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.RadioItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.RadioItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.RadioItem>\n )\n}\n\nfunction ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps) {\n return (\n <ContextMenuPrimitive.Separator\n data-slot=\"context-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {\n return (\n <span\n data-slot=\"context-menu-shortcut\"\n className={cn(\n \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n}"],"mappings":"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"}
1
+ {"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../src/context-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>\ntype ContextMenuPortalProps = React.ComponentProps<typeof ContextMenuPrimitive.Portal>\ntype ContextMenuTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.Trigger>\n\ntype ContextMenuContentProps = React.ComponentProps<typeof ContextMenuPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof ContextMenuPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n > & {\n /**\n * Focus-restoration policy when the menu closes. Defaults to Base\n * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n * the trigger is hover/focus-within–revealed so a pointer close\n * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\ntype ContextMenuGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.Group>\n\ntype ContextMenuLabelProps = React.ComponentProps<typeof ContextMenuPrimitive.GroupLabel> & {\n inset?: boolean\n}\n\ntype ContextMenuItemProps = React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}\n\ntype ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuRoot>\n\ntype ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger> & {\n inset?: boolean\n}\n\ntype ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n inset?: boolean\n}\n\ntype ContextMenuRadioGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>\n\ntype ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n inset?: boolean\n}\n\ntype ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenuPrimitive.Separator>\n\ntype ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>\ntype ContextMenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction ContextMenu(props: ContextMenuProps) {\n return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal(props: ContextMenuPortalProps) {\n return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n}\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps) {\n return (\n <ContextMenuPrimitive.Trigger\n data-slot=\"context-menu-trigger\"\n className={cn(\"select-none\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuContent({\n className,\n align = \"start\",\n alignOffset = 4,\n side = \"right\",\n sideOffset = 0,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: ContextMenuContentProps) {\n return (\n <ContextMenuPrimitive.Portal>\n <ContextMenuPrimitive.Positioner\n data-slot=\"context-menu-positioner\"\n className=\"isolate z-50 outline-none\"\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <ContextMenuPrimitive.Popup\n data-slot=\"context-menu-content\"\n className={cn(\n \"motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none\",\n className,\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </ContextMenuPrimitive.Positioner>\n </ContextMenuPrimitive.Portal>\n )\n}\n\nfunction ContextMenuGroup(props: ContextMenuGroupProps) {\n return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n}\n\nfunction ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n return (\n <ContextMenuPrimitive.GroupLabel\n data-slot=\"context-menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: ContextMenuItemProps) {\n return (\n <ContextMenuPrimitive.Item\n data-slot=\"context-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuSub(props: ContextMenuSubProps) {\n return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps) {\n return (\n <ContextMenuPrimitive.SubmenuTrigger\n data-slot=\"context-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto\" />\n </ContextMenuPrimitive.SubmenuTrigger>\n )\n}\n\nfunction ContextMenuSubContent({\n align = \"start\",\n // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n // item lines up with the parent item row, not the popup container edge.\n alignOffset = -4,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: ContextMenuSubContentProps) {\n return (\n <ContextMenuContent\n data-slot=\"context-menu-sub-content\"\n className={cn(\"w-auto min-w-24 shadow-lg\", className)}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n {...props}\n />\n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: ContextMenuCheckboxItemProps) {\n return (\n <ContextMenuPrimitive.CheckboxItem\n data-slot=\"context-menu-checkbox-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n data-slot=\"context-menu-checkbox-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.CheckboxItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.CheckboxItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {\n return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />\n}\n\nfunction ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps) {\n return (\n <ContextMenuPrimitive.RadioItem\n data-slot=\"context-menu-radio-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span\n data-slot=\"context-menu-radio-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.RadioItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.RadioItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.RadioItem>\n )\n}\n\nfunction ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps) {\n return (\n <ContextMenuPrimitive.Separator\n data-slot=\"context-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {\n return (\n <span\n data-slot=\"context-menu-shortcut\"\n className={cn(\n \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n}"],"mappings":"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"}
package/dist/dialog.js CHANGED
@@ -34,14 +34,14 @@ function DialogClose({ ...props }) {
34
34
  function DialogOverlay({ className, ...props }) {
35
35
  return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
36
36
  "data-slot": "dialog-overlay",
37
- className: cn("transition-opacity duration-300 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs", className),
37
+ className: cn("motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs", className),
38
38
  ...props
39
39
  });
40
40
  }
41
41
  function DialogContent({ className, children, showCloseButton = true, ...props }) {
42
42
  return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
43
43
  "data-slot": "dialog-content",
44
- className: cn("bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm", className),
44
+ className: cn("motion-scale bg-background ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 outline-none sm:max-w-sm", className),
45
45
  ...props,
46
46
  children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
47
47
  "data-slot": "dialog-close",
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../src/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n /**\n * When `true`, clicking outside the dialog (backdrop / pointer\n * dismissal) does not close it. It can then only be closed via an\n * explicit action — the close button, `Esc`, or programmatically.\n *\n * Use this for dialogs containing forms, wizards, or other content\n * where an accidental outside click shouldn't discard the user's work.\n *\n * @default false\n */\n disablePointerDismissal?: boolean\n}\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\ntype DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\ntype DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>\ntype DialogPopupProps = React.ComponentProps<typeof DialogPrimitive.Popup>\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\ntype DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\ntype DialogContentProps = DialogPopupProps & {\n showCloseButton?: boolean\n}\n\ntype DialogFooterProps = React.ComponentProps<\"div\"> & {\n showCloseButton?: boolean\n}\n\nfunction Dialog({ disablePointerDismissal, ...props }: DialogProps) {\n return <DialogPrimitive.Root data-slot=\"dialog\" disablePointerDismissal={disablePointerDismissal} {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogTriggerProps) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: DialogOverlayProps) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n \"transition-opacity duration-300 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogContentProps) {\n return (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm\",\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n render={\n <Button\n variant=\"ghost\"\n className=\"absolute top-2 right-2\"\n size=\"icon-sm\"\n />\n }\n >\n <CloseIcon />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Popup>\n </DialogPortal>\n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\"flex flex-col gap-2\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: DialogFooterProps) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n Close\n </DialogPrimitive.Close>\n )}\n </div>\n )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn(\"text-base leading-none font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAsCA,SAAS,OAAO,EAAE,yBAAyB,GAAG,SAAsB;AAClE,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAkC;EAAyB,GAAI;EAAS,CAAA;;AAGjH,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACkB;AACrB,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,kLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,qBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,qVACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,QACE,oBAAC,QAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAK;IACL,CAAA;aAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAY,CAAA,CAChB;KAEJ;IACX,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SACiB;AACpB,QACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4GACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;aAAE;GAErC,CAAA,CAEtB;;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,sGACA,UACD;EACD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../src/dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n /**\n * When `true`, clicking outside the dialog (backdrop / pointer\n * dismissal) does not close it. It can then only be closed via an\n * explicit action — the close button, `Esc`, or programmatically.\n *\n * Use this for dialogs containing forms, wizards, or other content\n * where an accidental outside click shouldn't discard the user's work.\n *\n * @default false\n */\n disablePointerDismissal?: boolean\n}\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\ntype DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\ntype DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Backdrop>\ntype DialogPopupProps = React.ComponentProps<typeof DialogPrimitive.Popup>\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\ntype DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\ntype DialogContentProps = DialogPopupProps & {\n showCloseButton?: boolean\n}\n\ntype DialogFooterProps = React.ComponentProps<\"div\"> & {\n showCloseButton?: boolean\n}\n\nfunction Dialog({ disablePointerDismissal, ...props }: DialogProps) {\n return <DialogPrimitive.Root data-slot=\"dialog\" disablePointerDismissal={disablePointerDismissal} {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogTriggerProps) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogCloseProps) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: DialogOverlayProps) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n \"motion-scrim fixed inset-0 isolate z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogContentProps) {\n return (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n \"motion-scale bg-background ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 outline-none sm:max-w-sm\",\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n render={\n <Button\n variant=\"ghost\"\n className=\"absolute top-2 right-2\"\n size=\"icon-sm\"\n />\n }\n >\n <CloseIcon />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Popup>\n </DialogPortal>\n )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\"flex flex-col gap-2\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: DialogFooterProps) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n Close\n </DialogPrimitive.Close>\n )}\n </div>\n )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn(\"text-base leading-none font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n"],"mappings":";;;;;;;;AAsCA,SAAS,OAAO,EAAE,yBAAyB,GAAG,SAAsB;AAClE,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAkC;EAAyB,GAAI;EAAS,CAAA;;AAGjH,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACkB;AACrB,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,iGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,qBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,gNACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,QACE,oBAAC,QAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAK;IACL,CAAA;aAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;IAAM,WAAU;cAAU;IAAY,CAAA,CAChB;KAEJ;IACX,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SACiB;AACpB,QACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4GACA,UACD;EACD,GAAI;YANN,CAQG,UACA,mBACC,oBAACA,SAAgB,OAAjB;GAAuB,QAAQ,oBAAC,QAAD,EAAQ,SAAQ,WAAY,CAAA;aAAE;GAErC,CAAA,CAEtB;;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,sGACA,UACD;EACD,GAAI;EACJ,CAAA"}
package/dist/drawer.js CHANGED
@@ -33,7 +33,7 @@ function DrawerClose({ ...props }) {
33
33
  function DrawerOverlay({ className, ...props }) {
34
34
  return /* @__PURE__ */ jsx(Drawer$1.Backdrop, {
35
35
  "data-slot": "drawer-overlay",
36
- className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-300 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className),
36
+ className: cn("motion-scrim fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs", className),
37
37
  ...props
38
38
  });
39
39
  }
@@ -43,7 +43,7 @@ function DrawerContent({ className, children, showCloseButton = false, ...props
43
43
  className: "fixed inset-0 z-50 outline-none",
44
44
  children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
45
45
  "data-slot": "drawer-content",
46
- className: cn("group/drawer-content bg-background fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none", "transition-[translate] duration-300 ease-out data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
46
+ className: cn("group/drawer-content bg-background fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none", "transition-[translate] duration-200 ease-out data-[swiping]:duration-0", "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t", "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm", "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm", "data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full", "data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full", "data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full", "data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full", className),
47
47
  ...props,
48
48
  children: [
49
49
  /* @__PURE__ */ jsx("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../src/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>\ntype DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\ntype DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\ntype DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\ntype DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Backdrop>\ntype DrawerPopupProps = React.ComponentProps<typeof DrawerPrimitive.Popup>\ntype DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\ntype DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\ntype DrawerHeaderProps = React.ComponentProps<\"div\">\ntype DrawerFooterProps = React.ComponentProps<\"div\">\n\ntype DrawerContentProps = DrawerPopupProps & {\n showCloseButton?: boolean\n}\n\nfunction Drawer({ ...props }: DrawerProps) {\n return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n return (\n <DrawerPrimitive.Backdrop\n data-slot=\"drawer-overlay\"\n className={cn(\n \"fixed inset-0 z-50 bg-black/10 transition-opacity duration-300 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DrawerContent({\n className,\n children,\n showCloseButton = false,\n ...props\n}: DrawerContentProps) {\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DrawerPrimitive.Viewport\n data-slot=\"drawer-viewport\"\n className=\"fixed inset-0 z-50 outline-none\"\n >\n <DrawerPrimitive.Popup\n data-slot=\"drawer-content\"\n className={cn(\n // Base layout & appearance\n \"group/drawer-content bg-background fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none\",\n // Transition — animate translate, disable during swipe\n \"transition-[translate] duration-300 ease-out data-[swiping]:duration-0\",\n // Bottom drawer (swipeDirection=\"down\")\n \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t\",\n // Top drawer (swipeDirection=\"up\")\n \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b\",\n // Left drawer (swipeDirection=\"left\")\n \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm\",\n // Right drawer (swipeDirection=\"right\")\n \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm\",\n // Enter/exit slide — bottom\n \"data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full\",\n // Enter/exit slide — top\n \"data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full\",\n // Enter/exit slide — left\n \"data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full\",\n // Enter/exit slide — right\n \"data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full\",\n className,\n )}\n {...props}\n >\n {/* Drag handle — visible only for bottom drawers */}\n <div\n data-slot=\"drawer-drag-handle\"\n className=\"bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block\"\n />\n {children}\n {showCloseButton && (\n <DrawerPrimitive.Close\n data-slot=\"drawer-close\"\n render={\n <Button\n variant=\"ghost\"\n className=\"absolute top-2 right-2\"\n size=\"icon-sm\"\n />\n }\n >\n <CloseIcon />\n <span className=\"sr-only\">Close</span>\n </DrawerPrimitive.Close>\n )}\n </DrawerPrimitive.Popup>\n </DrawerPrimitive.Viewport>\n </DrawerPortal>\n )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n return (\n <div\n data-slot=\"drawer-header\"\n className={cn(\n \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n return (\n <div\n data-slot=\"drawer-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n return (\n <DrawerPrimitive.Title\n data-slot=\"drawer-title\"\n className={cn(\"text-foreground text-base font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction DrawerDescription({\n className,\n ...props\n}: DrawerDescriptionProps) {\n return (\n <DrawerPrimitive.Description\n data-slot=\"drawer-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n}\n"],"mappings":";;;;;;;;AAwBA,SAAS,OAAO,EAAE,GAAG,SAAsB;AACzC,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,0KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,OAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAU;YAEV,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GAET,8GAEA,0EAEA,uOAEA,wNAEA,oOAEA,2OAEA,uIAEA,qIAEA,yIAEA,yIACA,UACD;GACD,GAAI;aAzBN;IA4BE,oBAAC,OAAD;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACD;IACA,mBACC,qBAACA,SAAgB,OAAjB;KACE,aAAU;KACV,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,WAAU;MACV,MAAK;MACL,CAAA;eAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;MAAM,WAAU;gBAAU;MAAY,CAAA,CAChB;;IAEJ;;EACC,CAAA,CACd,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../src/drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { CloseIcon } from \"./lib/internal-icons\"\n\ntype DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>\ntype DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\ntype DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\ntype DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\ntype DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Backdrop>\ntype DrawerPopupProps = React.ComponentProps<typeof DrawerPrimitive.Popup>\ntype DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\ntype DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\ntype DrawerHeaderProps = React.ComponentProps<\"div\">\ntype DrawerFooterProps = React.ComponentProps<\"div\">\n\ntype DrawerContentProps = DrawerPopupProps & {\n showCloseButton?: boolean\n}\n\nfunction Drawer({ ...props }: DrawerProps) {\n return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n return (\n <DrawerPrimitive.Backdrop\n data-slot=\"drawer-overlay\"\n className={cn(\n \"motion-scrim fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DrawerContent({\n className,\n children,\n showCloseButton = false,\n ...props\n}: DrawerContentProps) {\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DrawerPrimitive.Viewport\n data-slot=\"drawer-viewport\"\n className=\"fixed inset-0 z-50 outline-none\"\n >\n <DrawerPrimitive.Popup\n data-slot=\"drawer-content\"\n className={cn(\n // Base layout & appearance\n \"group/drawer-content bg-background fixed z-50 flex flex-col overflow-y-auto text-sm shadow-lg outline-none\",\n // Transition — animate translate, disable during swipe\n \"transition-[translate] duration-200 ease-out data-[swiping]:duration-0\",\n // Bottom drawer (swipeDirection=\"down\")\n \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t\",\n // Top drawer (swipeDirection=\"up\")\n \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b\",\n // Left drawer (swipeDirection=\"left\")\n \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:sm:max-w-sm\",\n // Right drawer (swipeDirection=\"right\")\n \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:sm:max-w-sm\",\n // Enter/exit slide — bottom\n \"data-[swipe-direction=down]:data-[starting-style]:translate-y-full data-[swipe-direction=down]:data-[ending-style]:translate-y-full\",\n // Enter/exit slide — top\n \"data-[swipe-direction=up]:data-[starting-style]:-translate-y-full data-[swipe-direction=up]:data-[ending-style]:-translate-y-full\",\n // Enter/exit slide — left\n \"data-[swipe-direction=left]:data-[starting-style]:-translate-x-full data-[swipe-direction=left]:data-[ending-style]:-translate-x-full\",\n // Enter/exit slide — right\n \"data-[swipe-direction=right]:data-[starting-style]:translate-x-full data-[swipe-direction=right]:data-[ending-style]:translate-x-full\",\n className,\n )}\n {...props}\n >\n {/* Drag handle — visible only for bottom drawers */}\n <div\n data-slot=\"drawer-drag-handle\"\n className=\"bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block\"\n />\n {children}\n {showCloseButton && (\n <DrawerPrimitive.Close\n data-slot=\"drawer-close\"\n render={\n <Button\n variant=\"ghost\"\n className=\"absolute top-2 right-2\"\n size=\"icon-sm\"\n />\n }\n >\n <CloseIcon />\n <span className=\"sr-only\">Close</span>\n </DrawerPrimitive.Close>\n )}\n </DrawerPrimitive.Popup>\n </DrawerPrimitive.Viewport>\n </DrawerPortal>\n )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n return (\n <div\n data-slot=\"drawer-header\"\n className={cn(\n \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n return (\n <div\n data-slot=\"drawer-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n return (\n <DrawerPrimitive.Title\n data-slot=\"drawer-title\"\n className={cn(\"text-foreground text-base font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction DrawerDescription({\n className,\n ...props\n}: DrawerDescriptionProps) {\n return (\n <DrawerPrimitive.Description\n data-slot=\"drawer-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n}\n"],"mappings":";;;;;;;;AAwBA,SAAS,OAAO,EAAE,GAAG,SAAsB;AACzC,QAAO,oBAACA,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;EAAS,CAAA;;AAG/D,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,QAAO,oBAACA,SAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;EAAS,CAAA;;AAGxE,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,OAClB,GAAG,SACkB;AACrB,QACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAiB,CAAA,EACjB,oBAACA,SAAgB,UAAjB;EACE,aAAU;EACV,WAAU;YAEV,qBAACA,SAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GAET,8GAEA,0EAEA,uOAEA,wNAEA,oOAEA,2OAEA,uIAEA,qIAEA,yIAEA,yIACA,UACD;GACD,GAAI;aAzBN;IA4BE,oBAAC,OAAD;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACD;IACA,mBACC,qBAACA,SAAgB,OAAjB;KACE,aAAU;KACV,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,WAAU;MACV,MAAK;MACL,CAAA;eAPN,CAUE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,QAAD;MAAM,WAAU;gBAAU;MAAY,CAAA,CAChB;;IAEJ;;EACC,CAAA,CACd,EAAA,CAAA;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAACA,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA"}
package/dist/input-otp.js CHANGED
@@ -26,7 +26,7 @@ function InputOTPSlot({ index, className, ...props }) {
26
26
  return /* @__PURE__ */ jsxs("div", {
27
27
  "data-slot": "input-otp-slot",
28
28
  "data-active": isActive || void 0,
29
- className: cn("border-input dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm transition-[color,background-color,border-color,box-shadow] outline-none first:rounded-l-lg first:border-l last:rounded-r-lg", "data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:z-10", "aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40", className),
29
+ className: cn("border-input dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-lg first:border-l last:rounded-r-lg", "data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:z-10", "aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40", className),
30
30
  ...props,
31
31
  children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
32
32
  className: "pointer-events-none absolute inset-0 flex items-center justify-center",
@@ -1 +1 @@
1
- {"version":3,"file":"input-otp.js","names":[],"sources":["../src/input-otp.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"./lib/utils\"\nimport { MinusIcon } from \"./lib/internal-icons\"\n\ntype InputOTPProps = React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: InputOTPProps) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"flex items-center has-disabled:opacity-50\",\n containerClassName,\n )}\n spellCheck={false}\n className={cn(\"disabled:cursor-not-allowed\", className)}\n {...props}\n />\n )\n}\n\ntype InputOTPGroupProps = React.ComponentProps<\"div\">\n\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\n \"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n className,\n )}\n {...props}\n />\n )\n}\n\ntype InputOTPSlotProps = React.ComponentProps<\"div\"> & {\n index: number\n}\n\nfunction InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive || undefined}\n className={cn(\n \"border-input dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm transition-[color,background-color,border-color,box-shadow] outline-none first:rounded-l-lg first:border-l last:rounded-r-lg\",\n \"data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:z-10\",\n \"aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40\",\n className,\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n </div>\n )}\n </div>\n )\n}\n\ntype InputOTPSeparatorProps = React.ComponentProps<\"div\">\n\nfunction InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className={cn(\n \"flex items-center [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n role=\"separator\"\n {...props}\n >\n <MinusIcon />\n </div>\n )\n}\n\nexport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n InputOTPSeparator\n}\n"],"mappings":";;;;;;;AAYA,SAAS,SAAS,EAChB,WACA,oBACA,GAAG,SACa;AAChB,QACE,oBAAC,UAAD;EACE,aAAU;EACV,oBAAoB,GAClB,6CACA,mBACD;EACD,YAAY;EACZ,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,aAAa,EAAE,OAAO,WAAW,GAAG,SAA4B;CAEvE,MAAM,EAAE,MAAM,cAAc,aADJ,MAAM,WAAW,gBACe,EAAE,MAAM,UAAU,EAAE;AAE5E,QACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa,YAAY,KAAA;EACzB,WAAW,GACT,yOACA,wFACA,8KACA,UACD;EACD,GAAI;YATN,CAWG,MACA,gBACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,4DAA6D,CAAA;GACxE,CAAA,CAEJ;;;AAMV,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,MAAK;EACL,GAAI;YAEJ,oBAAC,WAAD,EAAa,CAAA;EACT,CAAA"}
1
+ {"version":3,"file":"input-otp.js","names":[],"sources":["../src/input-otp.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"./lib/utils\"\nimport { MinusIcon } from \"./lib/internal-icons\"\n\ntype InputOTPProps = React.ComponentProps<typeof OTPInput> & {\n containerClassName?: string\n}\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: InputOTPProps) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"flex items-center has-disabled:opacity-50\",\n containerClassName,\n )}\n spellCheck={false}\n className={cn(\"disabled:cursor-not-allowed\", className)}\n {...props}\n />\n )\n}\n\ntype InputOTPGroupProps = React.ComponentProps<\"div\">\n\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\n \"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n className,\n )}\n {...props}\n />\n )\n}\n\ntype InputOTPSlotProps = React.ComponentProps<\"div\"> & {\n index: number\n}\n\nfunction InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive || undefined}\n className={cn(\n \"border-input dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-lg first:border-l last:rounded-r-lg\",\n \"data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:z-10\",\n \"aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40\",\n className,\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n </div>\n )}\n </div>\n )\n}\n\ntype InputOTPSeparatorProps = React.ComponentProps<\"div\">\n\nfunction InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className={cn(\n \"flex items-center [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n role=\"separator\"\n {...props}\n >\n <MinusIcon />\n </div>\n )\n}\n\nexport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n InputOTPSeparator\n}\n"],"mappings":";;;;;;;AAYA,SAAS,SAAS,EAChB,WACA,oBACA,GAAG,SACa;AAChB,QACE,oBAAC,UAAD;EACE,aAAU;EACV,oBAAoB,GAClB,6CACA,mBACD;EACD,YAAY;EACZ,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,aAAa,EAAE,OAAO,WAAW,GAAG,SAA4B;CAEvE,MAAM,EAAE,MAAM,cAAc,aADJ,MAAM,WAAW,gBACe,EAAE,MAAM,UAAU,EAAE;AAE5E,QACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa,YAAY,KAAA;EACzB,WAAW,GACT,0LACA,wFACA,8KACA,UACD;EACD,GAAI;YATN,CAWG,MACA,gBACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,4DAA6D,CAAA;GACxE,CAAA,CAEJ;;;AAMV,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,MAAK;EACL,GAAI;YAEJ,oBAAC,WAAD,EAAa,CAAA;EACT,CAAA"}
package/dist/item.js CHANGED
@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
7
7
  import { mergeProps } from "@base-ui/react/merge-props";
8
8
  import { useRender } from "@base-ui/react/use-render";
9
9
  //#region src/item.tsx
10
- const itemVariants = cva("[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-3 [a]:transition-colors", {
10
+ const itemVariants = cva("[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors", {
11
11
  variants: {
12
12
  variant: {
13
13
  default: "border-transparent",
package/dist/item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"item.js","names":[],"sources":["../src/item.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\nconst itemVariants = cva(\n \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-3 [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-border\",\n muted: \"bg-muted/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\ntype ItemGroupProps = React.ComponentProps<\"div\">\ntype ItemSeparatorProps = React.ComponentProps<typeof Separator>\ntype ItemProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>\ntype ItemMediaProps = React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>\ntype ItemContentProps = React.ComponentProps<\"div\">\ntype ItemTitleProps = React.ComponentProps<\"div\">\ntype ItemDescriptionProps = React.ComponentProps<\"p\">\ntype ItemActionsProps = React.ComponentProps<\"div\">\ntype ItemHeaderProps = React.ComponentProps<\"div\">\ntype ItemFooterProps = React.ComponentProps<\"div\">\n\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n return (\n <div\n role=\"list\"\n data-slot=\"item-group\"\n className={cn(\n \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n return (\n <Separator\n data-slot=\"item-separator\"\n orientation=\"horizontal\"\n className={cn(\"my-2\", className)}\n {...props}\n />\n )\n}\n\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n render,\n ...props\n}: ItemProps) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(itemVariants({ variant, size, className })),\n },\n props\n ),\n render,\n state: {\n slot: \"item\",\n variant,\n size,\n },\n })\n}\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: ItemMediaProps) {\n return (\n <div\n data-slot=\"item-media\"\n data-variant={variant}\n className={cn(itemMediaVariants({ variant, className }))}\n {...props}\n />\n )\n}\n\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n return (\n <div\n data-slot=\"item-content\"\n className={cn(\n \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n return (\n <div\n data-slot=\"item-title\"\n className={cn(\n \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n return (\n <p\n data-slot=\"item-description\"\n className={cn(\n \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n return (\n <div\n data-slot=\"item-actions\"\n className={cn(\"flex items-center gap-2\", className)}\n {...props}\n />\n )\n}\n\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n return (\n <div\n data-slot=\"item-header\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n return (\n <div\n data-slot=\"item-footer\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe,IACnB,0OACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAaD,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GACT,mGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,UAAU;EAChC,GAAI;EACJ,CAAA;;AAIN,SAAS,KAAK,EACZ,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,SACS;AACZ,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC,EAC1D,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;AAGJ,SAAS,UAAU,EAAE,WAAW,UAAU,WAAW,GAAG,SAAyB;AAC/E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;GAAW,CAAC,CAAC;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,uLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"item.js","names":[],"sources":["../src/item.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\nconst itemVariants = cva(\n \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-border\",\n muted: \"bg-muted/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\ntype ItemGroupProps = React.ComponentProps<\"div\">\ntype ItemSeparatorProps = React.ComponentProps<typeof Separator>\ntype ItemProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>\ntype ItemMediaProps = React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>\ntype ItemContentProps = React.ComponentProps<\"div\">\ntype ItemTitleProps = React.ComponentProps<\"div\">\ntype ItemDescriptionProps = React.ComponentProps<\"p\">\ntype ItemActionsProps = React.ComponentProps<\"div\">\ntype ItemHeaderProps = React.ComponentProps<\"div\">\ntype ItemFooterProps = React.ComponentProps<\"div\">\n\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n return (\n <div\n role=\"list\"\n data-slot=\"item-group\"\n className={cn(\n \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n return (\n <Separator\n data-slot=\"item-separator\"\n orientation=\"horizontal\"\n className={cn(\"my-2\", className)}\n {...props}\n />\n )\n}\n\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n render,\n ...props\n}: ItemProps) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(itemVariants({ variant, size, className })),\n },\n props\n ),\n render,\n state: {\n slot: \"item\",\n variant,\n size,\n },\n })\n}\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: ItemMediaProps) {\n return (\n <div\n data-slot=\"item-media\"\n data-variant={variant}\n className={cn(itemMediaVariants({ variant, className }))}\n {...props}\n />\n )\n}\n\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n return (\n <div\n data-slot=\"item-content\"\n className={cn(\n \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n return (\n <div\n data-slot=\"item-title\"\n className={cn(\n \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n return (\n <p\n data-slot=\"item-description\"\n className={cn(\n \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n return (\n <div\n data-slot=\"item-actions\"\n className={cn(\"flex items-center gap-2\", className)}\n {...props}\n />\n )\n}\n\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n return (\n <div\n data-slot=\"item-header\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n return (\n <div\n data-slot=\"item-footer\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe,IACnB,0OACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAaD,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GACT,mGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,UAAU;EAChC,GAAI;EACJ,CAAA;;AAIN,SAAS,KAAK,EACZ,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,SACS;AACZ,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC,EAC1D,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;AAGJ,SAAS,UAAU,EAAE,WAAW,UAAU,WAAW,GAAG,SAAyB;AAC/E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;GAAW,CAAC,CAAC;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,uLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA"}
package/dist/menu.js CHANGED
@@ -34,7 +34,7 @@ function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOf
34
34
  sideOffset,
35
35
  children: /* @__PURE__ */ jsx(Menu$1.Popup, {
36
36
  "data-slot": "menu-content",
37
- className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden", className),
37
+ className: cn("motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none data-closed:overflow-hidden", className),
38
38
  finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
39
39
  ...props
40
40
  })
package/dist/menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","names":["MenuPrimitive"],"sources":["../src/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\ntype MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>\n\ntype MenuPortalProps = React.ComponentProps<typeof MenuPrimitive.Portal>\n\ntype MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>\n\ntype MenuContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof MenuPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n > & {\n /**\n * Focus-restoration policy when the menu closes. Defaults to Base\n * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n * the trigger is hover/focus-within–revealed so a pointer close\n * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\ntype MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>\n\ntype MenuLabelProps = React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {\n inset?: boolean\n}\n\ntype MenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}\n\ntype MenuSubProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>\n\ntype MenuSubTriggerProps = React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n inset?: boolean\n}\n\ntype MenuSubContentProps = MenuContentProps\n\ntype MenuCheckboxItemProps = React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n inset?: boolean\n}\n\ntype MenuRadioGroupProps = React.ComponentProps<typeof MenuPrimitive.RadioGroup>\n\ntype MenuRadioItemProps = React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n inset?: boolean\n}\n\ntype MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>\n\ntype MenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction Menu(props: MenuProps) {\n return <MenuPrimitive.Root data-slot=\"menu\" {...props} />\n}\n\nfunction MenuPortal(props: MenuPortalProps) {\n return <MenuPrimitive.Portal data-slot=\"menu-portal\" {...props} />\n}\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />\n}\n\nfunction MenuContent({\n align = \"start\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 4,\n className,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: MenuContentProps) {\n return (\n <MenuPortal>\n <MenuPrimitive.Positioner\n data-slot=\"menu-positioner\"\n className=\"isolate z-50 outline-none\"\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <MenuPrimitive.Popup\n data-slot=\"menu-content\"\n className={cn(\n \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden\",\n className,\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </MenuPrimitive.Positioner>\n </MenuPortal>\n )\n}\n\nfunction MenuGroup(props: MenuGroupProps) {\n return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuLabel({\n className,\n inset,\n ...props\n}: MenuLabelProps) {\n return (\n <MenuPrimitive.GroupLabel\n data-slot=\"menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction MenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: MenuItemProps) {\n return (\n <MenuPrimitive.Item\n data-slot=\"menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MenuSub(props: MenuSubProps) {\n return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />\n}\n\nfunction MenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: MenuSubTriggerProps) {\n return (\n <MenuPrimitive.SubmenuTrigger\n data-slot=\"menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto\" />\n </MenuPrimitive.SubmenuTrigger>\n )\n}\n\nfunction MenuSubContent({\n align = \"start\",\n // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n // item lines up with the parent item row, not the popup container edge.\n alignOffset = -4,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: MenuSubContentProps) {\n return (\n <MenuContent\n data-slot=\"menu-sub-content\"\n className={cn(\"w-auto min-w-24 shadow-lg\", className)}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n {...props}\n />\n )\n}\n\nfunction MenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: MenuCheckboxItemProps) {\n return (\n <MenuPrimitive.CheckboxItem\n data-slot=\"menu-checkbox-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n data-slot=\"menu-checkbox-item-indicator\"\n className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n >\n <MenuPrimitive.CheckboxItemIndicator>\n <CheckIcon />\n </MenuPrimitive.CheckboxItemIndicator>\n </span>\n {children}\n </MenuPrimitive.CheckboxItem>\n )\n}\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: MenuRadioItemProps) {\n return (\n <MenuPrimitive.RadioItem\n data-slot=\"menu-radio-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span\n data-slot=\"menu-radio-item-indicator\"\n className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n >\n <MenuPrimitive.RadioItemIndicator>\n <CheckIcon />\n </MenuPrimitive.RadioItemIndicator>\n </span>\n {children}\n </MenuPrimitive.RadioItem>\n )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n return (\n <MenuPrimitive.Separator\n data-slot=\"menu-separator\"\n className={cn(\n \"bg-border -mx-1 my-1 h-px\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction MenuShortcut({ className, ...props }: MenuShortcutProps) {\n return (\n <span\n data-slot=\"menu-shortcut\"\n className={cn(\n \"text-muted-foreground group-focus/menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n Menu,\n MenuPortal,\n MenuTrigger,\n MenuContent,\n MenuGroup,\n MenuLabel,\n MenuItem,\n MenuCheckboxItem,\n MenuRadioGroup,\n MenuRadioItem,\n MenuSeparator,\n MenuShortcut,\n MenuSub,\n MenuSubTrigger,\n MenuSubContent,\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"menu.js","names":["MenuPrimitive"],"sources":["../src/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\ntype MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>\n\ntype MenuPortalProps = React.ComponentProps<typeof MenuPrimitive.Portal>\n\ntype MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>\n\ntype MenuContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof MenuPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n > & {\n /**\n * Focus-restoration policy when the menu closes. Defaults to Base\n * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n * the trigger is hover/focus-within–revealed so a pointer close\n * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\ntype MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>\n\ntype MenuLabelProps = React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {\n inset?: boolean\n}\n\ntype MenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}\n\ntype MenuSubProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>\n\ntype MenuSubTriggerProps = React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n inset?: boolean\n}\n\ntype MenuSubContentProps = MenuContentProps\n\ntype MenuCheckboxItemProps = React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n inset?: boolean\n}\n\ntype MenuRadioGroupProps = React.ComponentProps<typeof MenuPrimitive.RadioGroup>\n\ntype MenuRadioItemProps = React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n inset?: boolean\n}\n\ntype MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>\n\ntype MenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction Menu(props: MenuProps) {\n return <MenuPrimitive.Root data-slot=\"menu\" {...props} />\n}\n\nfunction MenuPortal(props: MenuPortalProps) {\n return <MenuPrimitive.Portal data-slot=\"menu-portal\" {...props} />\n}\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />\n}\n\nfunction MenuContent({\n align = \"start\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 4,\n className,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: MenuContentProps) {\n return (\n <MenuPortal>\n <MenuPrimitive.Positioner\n data-slot=\"menu-positioner\"\n className=\"isolate z-50 outline-none\"\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <MenuPrimitive.Popup\n data-slot=\"menu-content\"\n className={cn(\n \"motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none data-closed:overflow-hidden\",\n className,\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </MenuPrimitive.Positioner>\n </MenuPortal>\n )\n}\n\nfunction MenuGroup(props: MenuGroupProps) {\n return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuLabel({\n className,\n inset,\n ...props\n}: MenuLabelProps) {\n return (\n <MenuPrimitive.GroupLabel\n data-slot=\"menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction MenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: MenuItemProps) {\n return (\n <MenuPrimitive.Item\n data-slot=\"menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction MenuSub(props: MenuSubProps) {\n return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />\n}\n\nfunction MenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: MenuSubTriggerProps) {\n return (\n <MenuPrimitive.SubmenuTrigger\n data-slot=\"menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto\" />\n </MenuPrimitive.SubmenuTrigger>\n )\n}\n\nfunction MenuSubContent({\n align = \"start\",\n // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n // item lines up with the parent item row, not the popup container edge.\n alignOffset = -4,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: MenuSubContentProps) {\n return (\n <MenuContent\n data-slot=\"menu-sub-content\"\n className={cn(\"w-auto min-w-24 shadow-lg\", className)}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n {...props}\n />\n )\n}\n\nfunction MenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: MenuCheckboxItemProps) {\n return (\n <MenuPrimitive.CheckboxItem\n data-slot=\"menu-checkbox-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n data-slot=\"menu-checkbox-item-indicator\"\n className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n >\n <MenuPrimitive.CheckboxItemIndicator>\n <CheckIcon />\n </MenuPrimitive.CheckboxItemIndicator>\n </span>\n {children}\n </MenuPrimitive.CheckboxItem>\n )\n}\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: MenuRadioItemProps) {\n return (\n <MenuPrimitive.RadioItem\n data-slot=\"menu-radio-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span\n data-slot=\"menu-radio-item-indicator\"\n className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n >\n <MenuPrimitive.RadioItemIndicator>\n <CheckIcon />\n </MenuPrimitive.RadioItemIndicator>\n </span>\n {children}\n </MenuPrimitive.RadioItem>\n )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n return (\n <MenuPrimitive.Separator\n data-slot=\"menu-separator\"\n className={cn(\n \"bg-border -mx-1 my-1 h-px\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction MenuShortcut({ className, ...props }: MenuShortcutProps) {\n return (\n <span\n data-slot=\"menu-shortcut\"\n className={cn(\n \"text-muted-foreground group-focus/menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n Menu,\n MenuPortal,\n MenuTrigger,\n MenuContent,\n MenuGroup,\n MenuLabel,\n MenuItem,\n MenuCheckboxItem,\n MenuRadioGroup,\n MenuRadioItem,\n MenuSeparator,\n MenuShortcut,\n MenuSub,\n MenuSubTrigger,\n MenuSubContent,\n}\n"],"mappings":"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"}
package/dist/popover.js CHANGED
@@ -47,7 +47,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
47
47
  className: "isolate z-50",
48
48
  children: /* @__PURE__ */ jsx(Popover$1.Popup, {
49
49
  "data-slot": "popover-content",
50
- className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100", className),
50
+ className: cn("motion-slide bg-popover text-popover-foreground ring-foreground/10 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
51
51
  finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
52
52
  ...props
53
53
  })
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","names":["PopoverPrimitive"],"sources":["../src/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>\ntype PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>\ntype PopoverPortalProps = React.ComponentProps<typeof PopoverPrimitive.Portal>\ntype PopoverPositionerProps = React.ComponentProps<typeof PopoverPrimitive.Positioner>\ntype PopoverTitleProps = React.ComponentProps<typeof PopoverPrimitive.Title>\ntype PopoverDescriptionProps = React.ComponentProps<typeof PopoverPrimitive.Description>\n\ntype PopoverBackdropProps = React.ComponentProps<typeof PopoverPrimitive.Backdrop>\n\ntype PopoverHeaderProps = React.ComponentProps<\"div\">\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof PopoverPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"anchor\"\n > & {\n /**\n * Focus-restoration policy when the popover closes. Defaults to\n * Base UI's behaviour (restore to the trigger). Use `\"keyboard\"`\n * when the trigger is hover/focus-within–revealed so a pointer\n * close doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\nfunction Popover({ ...props }: PopoverProps) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverTriggerProps) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverPortal({ ...props }: PopoverPortalProps) {\n return <PopoverPrimitive.Portal data-slot=\"popover-portal\" {...props} />\n}\n\nfunction PopoverPositioner({ className, ...props }: PopoverPositionerProps) {\n return (\n <PopoverPrimitive.Positioner\n data-slot=\"popover-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction PopoverBackdrop({ className, ...props }: PopoverBackdropProps) {\n return (\n <PopoverPrimitive.Backdrop\n data-slot=\"popover-backdrop\"\n className={cn(\"fixed inset-0 z-40\", className)}\n {...props}\n />\n )\n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 4,\n anchor,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: PopoverContentProps) {\n return (\n <PopoverPortal>\n <PopoverPositioner\n anchor={anchor}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <PopoverPrimitive.Popup\n data-slot=\"popover-content\"\n className={cn(\n \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100\",\n className\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </PopoverPositioner>\n </PopoverPortal>\n )\n}\n\nfunction PopoverHeader({ className, ...props }: PopoverHeaderProps) {\n return (\n <div\n data-slot=\"popover-header\"\n className={cn(\n \"flex flex-col gap-0.5 text-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n return (\n <PopoverPrimitive.Title\n data-slot=\"popover-title\"\n className={cn(\"font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverDescriptionProps) {\n return (\n <PopoverPrimitive.Description\n data-slot=\"popover-description\"\n className={cn(\"text-muted-foreground\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Popover,\n PopoverBackdrop,\n PopoverContent,\n PopoverDescription,\n PopoverHeader,\n PopoverTitle,\n PopoverTrigger,\n PopoverPortal,\n PopoverPositioner,\n}\n"],"mappings":";;;;;;;AAiCA,SAAS,QAAQ,EAAE,GAAG,SAAuB;AAC3C,QAAO,oBAACA,UAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;EAAS,CAAA;;AAGjE,SAAS,eAAe,EAAE,GAAG,SAA8B;AACzD,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAG5E,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAACA,UAAiB,YAAlB;EACE,aAAU;EACC;EACX,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAACA,UAAiB,UAAlB;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,qBACA,YACA,GAAG,SACmB;AACtB,QACE,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;EACU;EACD;EACM;EACP;EACM;EACZ,WAAU;YAEV,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,ujBACA,UACD;GACD,YAAY,kBAAkB,qBAAqB,WAAW;GAC9D,GAAI;GACJ,CAAA;EACgB,CAAA,EACN,CAAA;;AAIpB,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACuB;AAC1B,QACE,oBAACA,UAAiB,aAAlB;EACE,aAAU;EACV,WAAW,GAAG,yBAAyB,UAAU;EACjD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"popover.js","names":["PopoverPrimitive"],"sources":["../src/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>\ntype PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>\ntype PopoverPortalProps = React.ComponentProps<typeof PopoverPrimitive.Portal>\ntype PopoverPositionerProps = React.ComponentProps<typeof PopoverPrimitive.Positioner>\ntype PopoverTitleProps = React.ComponentProps<typeof PopoverPrimitive.Title>\ntype PopoverDescriptionProps = React.ComponentProps<typeof PopoverPrimitive.Description>\n\ntype PopoverBackdropProps = React.ComponentProps<typeof PopoverPrimitive.Backdrop>\n\ntype PopoverHeaderProps = React.ComponentProps<\"div\">\n\ntype PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof PopoverPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"anchor\"\n > & {\n /**\n * Focus-restoration policy when the popover closes. Defaults to\n * Base UI's behaviour (restore to the trigger). Use `\"keyboard\"`\n * when the trigger is hover/focus-within–revealed so a pointer\n * close doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\nfunction Popover({ ...props }: PopoverProps) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverTriggerProps) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverPortal({ ...props }: PopoverPortalProps) {\n return <PopoverPrimitive.Portal data-slot=\"popover-portal\" {...props} />\n}\n\nfunction PopoverPositioner({ className, ...props }: PopoverPositionerProps) {\n return (\n <PopoverPrimitive.Positioner\n data-slot=\"popover-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction PopoverBackdrop({ className, ...props }: PopoverBackdropProps) {\n return (\n <PopoverPrimitive.Backdrop\n data-slot=\"popover-backdrop\"\n className={cn(\"fixed inset-0 z-40\", className)}\n {...props}\n />\n )\n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 4,\n anchor,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: PopoverContentProps) {\n return (\n <PopoverPortal>\n <PopoverPositioner\n anchor={anchor}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <PopoverPrimitive.Popup\n data-slot=\"popover-content\"\n className={cn(\n \"motion-slide bg-popover text-popover-foreground ring-foreground/10 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden\",\n className\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </PopoverPositioner>\n </PopoverPortal>\n )\n}\n\nfunction PopoverHeader({ className, ...props }: PopoverHeaderProps) {\n return (\n <div\n data-slot=\"popover-header\"\n className={cn(\n \"flex flex-col gap-0.5 text-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n return (\n <PopoverPrimitive.Title\n data-slot=\"popover-title\"\n className={cn(\"font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: PopoverDescriptionProps) {\n return (\n <PopoverPrimitive.Description\n data-slot=\"popover-description\"\n className={cn(\"text-muted-foreground\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Popover,\n PopoverBackdrop,\n PopoverContent,\n PopoverDescription,\n PopoverHeader,\n PopoverTitle,\n PopoverTrigger,\n PopoverPortal,\n PopoverPositioner,\n}\n"],"mappings":";;;;;;;AAiCA,SAAS,QAAQ,EAAE,GAAG,SAAuB;AAC3C,QAAO,oBAACA,UAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;EAAS,CAAA;;AAGjE,SAAS,eAAe,EAAE,GAAG,SAA8B;AACzD,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAG5E,SAAS,cAAc,EAAE,GAAG,SAA6B;AACvD,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAG1E,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAACA,UAAiB,YAAlB;EACE,aAAU;EACC;EACX,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAACA,UAAiB,UAAlB;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,QACA,qBACA,YACA,GAAG,SACmB;AACtB,QACE,oBAAC,eAAD,EAAA,UACE,oBAAC,mBAAD;EACU;EACD;EACM;EACP;EACM;EACZ,WAAU;YAEV,oBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,2LACA,UACD;GACD,YAAY,kBAAkB,qBAAqB,WAAW;GAC9D,GAAI;GACJ,CAAA;EACgB,CAAA,EACN,CAAA;;AAIpB,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAACA,UAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACuB;AAC1B,QACE,oBAACA,UAAiB,aAAlB;EACE,aAAU;EACV,WAAW,GAAG,yBAAyB,UAAU;EACjD,GAAI;EACJ,CAAA"}
@@ -39,7 +39,7 @@ function PreviewCardContent({ className, side = "bottom", sideOffset = 4, align
39
39
  className: "isolate z-50",
40
40
  children: /* @__PURE__ */ jsx(PreviewCard$1.Popup, {
41
41
  "data-slot": "preview-card-content",
42
- className: cn("bg-popover text-popover-foreground ring-foreground/10 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2", className),
42
+ className: cn("motion-slide bg-popover text-popover-foreground ring-foreground/10 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden", className),
43
43
  ...props
44
44
  })
45
45
  }) });
@@ -1 +1 @@
1
- {"version":3,"file":"preview-card.js","names":["PreviewCardPrimitive"],"sources":["../src/preview-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"./lib/utils\"\n\ntype PreviewCardProps = React.ComponentProps<typeof PreviewCardPrimitive.Root>\ntype PreviewCardTriggerProps = React.ComponentProps<typeof PreviewCardPrimitive.Trigger>\ntype PreviewCardPortalProps = React.ComponentProps<typeof PreviewCardPrimitive.Portal>\ntype PreviewCardPositionerProps = React.ComponentProps<typeof PreviewCardPrimitive.Positioner>\ntype PreviewCardPopupProps = React.ComponentProps<typeof PreviewCardPrimitive.Popup>\n\ntype PreviewCardContentProps = PreviewCardPopupProps &\n Pick<\n PreviewCardPositionerProps,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"anchor\"\n >\n\nfunction PreviewCard({ ...props }: PreviewCardProps) {\n return <PreviewCardPrimitive.Root data-slot=\"preview-card\" {...props} />\n}\n\nfunction PreviewCardTrigger({ ...props }: PreviewCardTriggerProps) {\n return (\n <PreviewCardPrimitive.Trigger\n data-slot=\"preview-card-trigger\"\n {...props}\n />\n )\n}\n\nfunction PreviewCardPortal({ ...props }: PreviewCardPortalProps) {\n return <PreviewCardPrimitive.Portal data-slot=\"preview-card-portal\" {...props} />\n}\n\nfunction PreviewCardPositioner({\n className,\n ...props\n}: PreviewCardPositionerProps) {\n return (\n <PreviewCardPrimitive.Positioner\n data-slot=\"preview-card-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction PreviewCardContent({\n className,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n anchor,\n ...props\n}: PreviewCardContentProps) {\n return (\n <PreviewCardPortal>\n <PreviewCardPositioner\n anchor={anchor}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <PreviewCardPrimitive.Popup\n data-slot=\"preview-card-content\"\n className={cn(\n \"bg-popover text-popover-foreground ring-foreground/10 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100\",\n \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2\",\n className,\n )}\n {...props}\n />\n </PreviewCardPositioner>\n </PreviewCardPortal>\n )\n}\n\nexport {\n PreviewCard,\n PreviewCardTrigger,\n PreviewCardContent,\n PreviewCardPortal,\n PreviewCardPositioner,\n}\n"],"mappings":";;;;;;AAmBA,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;EAAS,CAAA;;AAG1E,SAAS,mBAAmB,EAAE,GAAG,SAAkC;AACjE,QACE,oBAACA,cAAqB,SAAtB;EACE,aAAU;EACV,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EAAE,GAAG,SAAiC;AAC/D,QAAO,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAGnF,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC0B;AAC7B,QACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACC;EACX,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,QACA,GAAG,SACuB;AAC1B,QACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD;EACU;EACD;EACM;EACP;EACM;EACZ,WAAU;YAEV,oBAACA,cAAqB,OAAtB;GACE,aAAU;GACV,WAAW,GACT,qKACA,wIACA,0PACA,UACD;GACD,GAAI;GACJ,CAAA;EACoB,CAAA,EACN,CAAA"}
1
+ {"version":3,"file":"preview-card.js","names":["PreviewCardPrimitive"],"sources":["../src/preview-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"./lib/utils\"\n\ntype PreviewCardProps = React.ComponentProps<typeof PreviewCardPrimitive.Root>\ntype PreviewCardTriggerProps = React.ComponentProps<typeof PreviewCardPrimitive.Trigger>\ntype PreviewCardPortalProps = React.ComponentProps<typeof PreviewCardPrimitive.Portal>\ntype PreviewCardPositionerProps = React.ComponentProps<typeof PreviewCardPrimitive.Positioner>\ntype PreviewCardPopupProps = React.ComponentProps<typeof PreviewCardPrimitive.Popup>\n\ntype PreviewCardContentProps = PreviewCardPopupProps &\n Pick<\n PreviewCardPositionerProps,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"anchor\"\n >\n\nfunction PreviewCard({ ...props }: PreviewCardProps) {\n return <PreviewCardPrimitive.Root data-slot=\"preview-card\" {...props} />\n}\n\nfunction PreviewCardTrigger({ ...props }: PreviewCardTriggerProps) {\n return (\n <PreviewCardPrimitive.Trigger\n data-slot=\"preview-card-trigger\"\n {...props}\n />\n )\n}\n\nfunction PreviewCardPortal({ ...props }: PreviewCardPortalProps) {\n return <PreviewCardPrimitive.Portal data-slot=\"preview-card-portal\" {...props} />\n}\n\nfunction PreviewCardPositioner({\n className,\n ...props\n}: PreviewCardPositionerProps) {\n return (\n <PreviewCardPrimitive.Positioner\n data-slot=\"preview-card-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction PreviewCardContent({\n className,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 0,\n anchor,\n ...props\n}: PreviewCardContentProps) {\n return (\n <PreviewCardPortal>\n <PreviewCardPositioner\n anchor={anchor}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <PreviewCardPrimitive.Popup\n data-slot=\"preview-card-content\"\n className={cn(\n \"motion-slide bg-popover text-popover-foreground ring-foreground/10 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden\",\n className,\n )}\n {...props}\n />\n </PreviewCardPositioner>\n </PreviewCardPortal>\n )\n}\n\nexport {\n PreviewCard,\n PreviewCardTrigger,\n PreviewCardContent,\n PreviewCardPortal,\n PreviewCardPositioner,\n}\n"],"mappings":";;;;;;AAmBA,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,QAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;EAAS,CAAA;;AAG1E,SAAS,mBAAmB,EAAE,GAAG,SAAkC;AACjE,QACE,oBAACA,cAAqB,SAAtB;EACE,aAAU;EACV,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EAAE,GAAG,SAAiC;AAC/D,QAAO,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAGnF,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC0B;AAC7B,QACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACC;EACX,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,QACA,GAAG,SACuB;AAC1B,QACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD;EACU;EACD;EACM;EACP;EACM;EACZ,WAAU;YAEV,oBAACA,cAAqB,OAAtB;GACE,aAAU;GACV,WAAW,GACT,qKACA,UACD;GACD,GAAI;GACJ,CAAA;EACoB,CAAA,EACN,CAAA"}
@@ -12,7 +12,7 @@ function ScrollArea({ className, children, ...props }) {
12
12
  children: [
13
13
  /* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
14
14
  "data-slot": "scroll-area-viewport",
15
- className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:outline-1",
15
+ className: "focus-visible:ring-ring/50 size-full rounded-[inherit] motion-color outline-none focus-visible:ring-3 focus-visible:outline-1",
16
16
  children
17
17
  }),
18
18
  /* @__PURE__ */ jsx(ScrollBar, {}),
@@ -1 +1 @@
1
- {"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive"],"sources":["../src/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { cn } from \"./lib/utils\";\n\ntype ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root>;\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: ScrollAreaProps) {\n return (\n <ScrollAreaPrimitive.Root\n data-slot=\"scroll-area\"\n className={cn(\"relative\", className)}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport\n data-slot=\"scroll-area-viewport\"\n className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:outline-1\"\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n </ScrollAreaPrimitive.Root>\n );\n}\n\ntype ScrollBarProps = React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>;\n\nfunction ScrollBar({\n className,\n orientation = \"vertical\",\n ...props\n}: ScrollBarProps) {\n return (\n <ScrollAreaPrimitive.Scrollbar\n data-slot=\"scroll-area-scrollbar\"\n orientation={orientation}\n className={cn(\n \"flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent\",\n className\n )}\n {...props}\n >\n <ScrollAreaPrimitive.Thumb\n data-slot=\"scroll-area-thumb\"\n className=\"bg-border relative flex-1 rounded-full\"\n />\n </ScrollAreaPrimitive.Scrollbar>\n );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;;;;AASA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACe;AAClB,QACE,qBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,UAAU;EACpC,GAAI;YAHN;GAKE,oBAACA,aAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;IAC4B,CAAA;GAC/B,oBAAC,WAAD,EAAa,CAAA;GACb,oBAACA,aAAoB,QAArB,EAA4B,aAAU,sBAAuB,CAAA;GACpC;;;AAM/B,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SACc;AACjB,QACE,oBAACA,aAAoB,WAArB;EACE,aAAU;EACG;EACb,WAAW,GACT,sXACA,UACD;EACD,GAAI;YAEJ,oBAACA,aAAoB,OAArB;GACE,aAAU;GACV,WAAU;GACV,CAAA;EAC4B,CAAA"}
1
+ {"version":3,"file":"scroll-area.js","names":["ScrollAreaPrimitive"],"sources":["../src/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\n\nimport { cn } from \"./lib/utils\";\n\ntype ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root>;\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: ScrollAreaProps) {\n return (\n <ScrollAreaPrimitive.Root\n data-slot=\"scroll-area\"\n className={cn(\"relative\", className)}\n {...props}\n >\n <ScrollAreaPrimitive.Viewport\n data-slot=\"scroll-area-viewport\"\n className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] motion-color outline-none focus-visible:ring-3 focus-visible:outline-1\"\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n </ScrollAreaPrimitive.Root>\n );\n}\n\ntype ScrollBarProps = React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>;\n\nfunction ScrollBar({\n className,\n orientation = \"vertical\",\n ...props\n}: ScrollBarProps) {\n return (\n <ScrollAreaPrimitive.Scrollbar\n data-slot=\"scroll-area-scrollbar\"\n orientation={orientation}\n className={cn(\n \"flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent\",\n className\n )}\n {...props}\n >\n <ScrollAreaPrimitive.Thumb\n data-slot=\"scroll-area-thumb\"\n className=\"bg-border relative flex-1 rounded-full\"\n />\n </ScrollAreaPrimitive.Scrollbar>\n );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";;;;;;AASA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACe;AAClB,QACE,qBAACA,aAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,YAAY,UAAU;EACpC,GAAI;YAHN;GAKE,oBAACA,aAAoB,UAArB;IACE,aAAU;IACV,WAAU;IAET;IAC4B,CAAA;GAC/B,oBAAC,WAAD,EAAa,CAAA;GACb,oBAACA,aAAoB,QAArB,EAA4B,aAAU,sBAAuB,CAAA;GACpC;;;AAM/B,SAAS,UAAU,EACjB,WACA,cAAc,YACd,GAAG,SACc;AACjB,QACE,oBAACA,aAAoB,WAArB;EACE,aAAU;EACG;EACb,WAAW,GACT,sXACA,UACD;EACD,GAAI;YAEJ,oBAACA,aAAoB,OAArB;GACE,aAAU;GACV,WAAU;GACV,CAAA;EAC4B,CAAA"}
package/dist/select.js CHANGED
@@ -68,7 +68,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
68
68
  children: /* @__PURE__ */ jsxs(Select$1.Popup, {
69
69
  "data-slot": "select-content",
70
70
  "data-align-trigger": alignItemWithTrigger,
71
- className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none", className),
71
+ className: cn("motion-slide bg-popover text-popover-foreground ring-foreground/10 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1", className),
72
72
  ...props,
73
73
  children: [
74
74
  /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -1 +1 @@
1
- {"version":3,"file":"select.js","names":["SelectPrimitive"],"sources":["../src/select.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"./lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon, CheckIcon, ChevronsUpDownIcon } from \"./lib/internal-icons\"\n\ntype SelectProps<Value, Multiple extends boolean | undefined = false> =\n SelectPrimitive.Root.Props<Value, Multiple>\n\ntype SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>\ntype SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>\ntype SelectTriggerBaseProps = React.ComponentProps<typeof SelectPrimitive.Trigger>\ntype SelectPortalProps = React.ComponentProps<typeof SelectPrimitive.Portal>\ntype SelectPositionerProps = React.ComponentProps<typeof SelectPrimitive.Positioner>\ntype SelectPopupProps = React.ComponentProps<typeof SelectPrimitive.Popup>\ntype SelectListProps = React.ComponentProps<typeof SelectPrimitive.List>\ntype SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.GroupLabel>\ntype SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>\ntype SelectSeparatorProps = React.ComponentProps<typeof SelectPrimitive.Separator>\ntype SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>\ntype SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>\n\ntype SelectTriggerProps = SelectTriggerBaseProps & {\n size?: \"sm\" | \"default\"\n}\n\ntype SelectContentProps = SelectPopupProps &\n Pick<\n SelectPositionerProps,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n >\n\nfunction Select<Value, Multiple extends boolean | undefined = false>({\n ...props\n}: SelectProps<Value, Multiple>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectPortal({ ...props }: SelectPortalProps) {\n return <SelectPrimitive.Portal data-slot=\"select-portal\" {...props} />\n}\n\nfunction SelectPositioner({ className, ...props }: SelectPositionerProps) {\n return (\n <SelectPrimitive.Positioner\n data-slot=\"select-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction SelectList({ className, ...props }: SelectListProps) {\n return (\n <SelectPrimitive.List\n data-slot=\"select-list\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction SelectGroup({ className, ...props }: SelectGroupProps) {\n return (\n <SelectPrimitive.Group\n data-slot=\"select-group\"\n className={cn(\"scroll-my-1 p-1\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectValue({ className, ...props }: SelectValueProps) {\n return (\n <SelectPrimitive.Value\n data-slot=\"select-value\"\n className={cn(\"flex flex-1 text-left\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: SelectTriggerProps) {\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon\n data-slot=\"select-icon\"\n render={\n <ChevronsUpDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n }\n />\n </SelectPrimitive.Trigger>\n )\n}\n\nfunction SelectContent({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n align = \"start\",\n alignOffset = 0,\n alignItemWithTrigger = false,\n ...props\n}: SelectContentProps) {\n return (\n <SelectPortal>\n <SelectPositioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n alignItemWithTrigger={alignItemWithTrigger}\n className=\"isolate z-50\"\n >\n <SelectPrimitive.Popup\n data-slot=\"select-content\"\n data-align-trigger={alignItemWithTrigger}\n className={cn(\n \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n className,\n )}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectList>{children}</SelectList>\n <SelectScrollDownButton />\n </SelectPrimitive.Popup>\n </SelectPositioner>\n </SelectPortal>\n )\n}\n\nfunction SelectLabel({ className, ...props }: SelectLabelProps) {\n return (\n <SelectPrimitive.GroupLabel\n data-slot=\"select-label\"\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SelectItem({ className, children, ...props }: SelectItemProps) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.ItemText data-slot=\"select-item-text\" className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n {children}\n </SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator\n render={\n <span data-slot=\"select-item-indicator\" className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n )\n}\n\nfunction SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n return (\n <SelectPrimitive.Separator\n data-slot=\"select-separator\"\n className={cn(\n \"bg-border pointer-events-none -mx-1 my-1 h-px\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: SelectScrollUpButtonProps) {\n return (\n <SelectPrimitive.ScrollUpArrow\n data-slot=\"select-scroll-up-button\"\n className={cn(\n \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpArrow>\n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: SelectScrollDownButtonProps) {\n return (\n <SelectPrimitive.ScrollDownArrow\n data-slot=\"select-scroll-down-button\"\n className={cn(\n \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownArrow>\n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectList,\n SelectPortal,\n SelectPositioner,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"select.js","names":["SelectPrimitive"],"sources":["../src/select.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"./lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon, CheckIcon, ChevronsUpDownIcon } from \"./lib/internal-icons\"\n\ntype SelectProps<Value, Multiple extends boolean | undefined = false> =\n SelectPrimitive.Root.Props<Value, Multiple>\n\ntype SelectGroupProps = React.ComponentProps<typeof SelectPrimitive.Group>\ntype SelectValueProps = React.ComponentProps<typeof SelectPrimitive.Value>\ntype SelectTriggerBaseProps = React.ComponentProps<typeof SelectPrimitive.Trigger>\ntype SelectPortalProps = React.ComponentProps<typeof SelectPrimitive.Portal>\ntype SelectPositionerProps = React.ComponentProps<typeof SelectPrimitive.Positioner>\ntype SelectPopupProps = React.ComponentProps<typeof SelectPrimitive.Popup>\ntype SelectListProps = React.ComponentProps<typeof SelectPrimitive.List>\ntype SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.GroupLabel>\ntype SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>\ntype SelectSeparatorProps = React.ComponentProps<typeof SelectPrimitive.Separator>\ntype SelectScrollUpButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>\ntype SelectScrollDownButtonProps = React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>\n\ntype SelectTriggerProps = SelectTriggerBaseProps & {\n size?: \"sm\" | \"default\"\n}\n\ntype SelectContentProps = SelectPopupProps &\n Pick<\n SelectPositionerProps,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n >\n\nfunction Select<Value, Multiple extends boolean | undefined = false>({\n ...props\n}: SelectProps<Value, Multiple>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectPortal({ ...props }: SelectPortalProps) {\n return <SelectPrimitive.Portal data-slot=\"select-portal\" {...props} />\n}\n\nfunction SelectPositioner({ className, ...props }: SelectPositionerProps) {\n return (\n <SelectPrimitive.Positioner\n data-slot=\"select-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction SelectList({ className, ...props }: SelectListProps) {\n return (\n <SelectPrimitive.List\n data-slot=\"select-list\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction SelectGroup({ className, ...props }: SelectGroupProps) {\n return (\n <SelectPrimitive.Group\n data-slot=\"select-group\"\n className={cn(\"scroll-my-1 p-1\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectValue({ className, ...props }: SelectValueProps) {\n return (\n <SelectPrimitive.Value\n data-slot=\"select-value\"\n className={cn(\"flex flex-1 text-left\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: SelectTriggerProps) {\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon\n data-slot=\"select-icon\"\n render={\n <ChevronsUpDownIcon className=\"text-muted-foreground pointer-events-none size-4\" />\n }\n />\n </SelectPrimitive.Trigger>\n )\n}\n\nfunction SelectContent({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n align = \"start\",\n alignOffset = 0,\n alignItemWithTrigger = false,\n ...props\n}: SelectContentProps) {\n return (\n <SelectPortal>\n <SelectPositioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n alignItemWithTrigger={alignItemWithTrigger}\n className=\"isolate z-50\"\n >\n <SelectPrimitive.Popup\n data-slot=\"select-content\"\n data-align-trigger={alignItemWithTrigger}\n className={cn(\n \"motion-slide bg-popover text-popover-foreground ring-foreground/10 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1\",\n className,\n )}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectList>{children}</SelectList>\n <SelectScrollDownButton />\n </SelectPrimitive.Popup>\n </SelectPositioner>\n </SelectPortal>\n )\n}\n\nfunction SelectLabel({ className, ...props }: SelectLabelProps) {\n return (\n <SelectPrimitive.GroupLabel\n data-slot=\"select-label\"\n className={cn(\n \"text-muted-foreground px-1.5 py-1 text-xs\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SelectItem({ className, children, ...props }: SelectItemProps) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n className,\n )}\n {...props}\n >\n <SelectPrimitive.ItemText data-slot=\"select-item-text\" className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n {children}\n </SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator\n render={\n <span data-slot=\"select-item-indicator\" className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon className=\"pointer-events-none\" />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n )\n}\n\nfunction SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n return (\n <SelectPrimitive.Separator\n data-slot=\"select-separator\"\n className={cn(\n \"bg-border pointer-events-none -mx-1 my-1 h-px\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: SelectScrollUpButtonProps) {\n return (\n <SelectPrimitive.ScrollUpArrow\n data-slot=\"select-scroll-up-button\"\n className={cn(\n \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpArrow>\n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: SelectScrollDownButtonProps) {\n return (\n <SelectPrimitive.ScrollDownArrow\n data-slot=\"select-scroll-down-button\"\n className={cn(\n \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownArrow>\n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectList,\n SelectPortal,\n SelectPositioner,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n"],"mappings":"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"}
package/dist/slider.js CHANGED
@@ -22,7 +22,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, orientatio
22
22
  thumbAlignment: "edge",
23
23
  ...props,
24
24
  children: /* @__PURE__ */ jsxs(Slider$1.Control, {
25
- className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
25
+ className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
26
26
  children: [/* @__PURE__ */ jsx(Slider$1.Track, {
27
27
  "data-slot": "slider-track",
28
28
  className: "bg-muted relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
@@ -32,7 +32,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, orientatio
32
32
  })
33
33
  }), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
34
34
  "data-slot": "slider-thumb",
35
- className: "border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
35
+ className: "border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
36
36
  }, index))]
37
37
  })
38
38
  });