@waveso/ui 0.5.0 → 0.7.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 (104) hide show
  1. package/README.md +152 -68
  2. package/dist/accordion.js +3 -3
  3. package/dist/accordion.js.map +1 -1
  4. package/dist/action-bar.js +2 -2
  5. package/dist/action-bar.js.map +1 -1
  6. package/dist/alert-dialog.js +4 -4
  7. package/dist/alert-dialog.js.map +1 -1
  8. package/dist/alert.js +5 -5
  9. package/dist/alert.js.map +1 -1
  10. package/dist/animate.d.ts.map +1 -1
  11. package/dist/animate.js +1 -2
  12. package/dist/animate.js.map +1 -1
  13. package/dist/autocomplete.js +8 -8
  14. package/dist/autocomplete.js.map +1 -1
  15. package/dist/avatar.js +5 -5
  16. package/dist/avatar.js.map +1 -1
  17. package/dist/badge.d.ts +1 -1
  18. package/dist/badge.d.ts.map +1 -1
  19. package/dist/badge.js +5 -6
  20. package/dist/badge.js.map +1 -1
  21. package/dist/breadcrumb.js +3 -3
  22. package/dist/breadcrumb.js.map +1 -1
  23. package/dist/button-group.js +5 -5
  24. package/dist/button-group.js.map +1 -1
  25. package/dist/button.d.ts +2 -2
  26. package/dist/button.d.ts.map +1 -1
  27. package/dist/button.js +9 -10
  28. package/dist/button.js.map +1 -1
  29. package/dist/card.js +4 -4
  30. package/dist/card.js.map +1 -1
  31. package/dist/checkbox.js +1 -1
  32. package/dist/checkbox.js.map +1 -1
  33. package/dist/combobox.d.ts.map +1 -1
  34. package/dist/combobox.js +10 -10
  35. package/dist/combobox.js.map +1 -1
  36. package/dist/context-menu.js +9 -9
  37. package/dist/context-menu.js.map +1 -1
  38. package/dist/dialog.d.ts.map +1 -1
  39. package/dist/dialog.js +4 -4
  40. package/dist/dialog.js.map +1 -1
  41. package/dist/drawer.js +4 -4
  42. package/dist/drawer.js.map +1 -1
  43. package/dist/field.js +2 -2
  44. package/dist/field.js.map +1 -1
  45. package/dist/form.js +2 -2
  46. package/dist/form.js.map +1 -1
  47. package/dist/infinite-scroll.js +2 -2
  48. package/dist/infinite-scroll.js.map +1 -1
  49. package/dist/input-group.d.ts +1 -1
  50. package/dist/input-group.js +5 -5
  51. package/dist/input-group.js.map +1 -1
  52. package/dist/input-otp.js +3 -3
  53. package/dist/input-otp.js.map +1 -1
  54. package/dist/input.js +1 -1
  55. package/dist/input.js.map +1 -1
  56. package/dist/item.d.ts +1 -1
  57. package/dist/item.js +4 -4
  58. package/dist/item.js.map +1 -1
  59. package/dist/kbd.js +1 -1
  60. package/dist/kbd.js.map +1 -1
  61. package/dist/menu.js +9 -9
  62. package/dist/menu.js.map +1 -1
  63. package/dist/menubar.js +1 -1
  64. package/dist/menubar.js.map +1 -1
  65. package/dist/popover.js +2 -2
  66. package/dist/popover.js.map +1 -1
  67. package/dist/preview-card.js +1 -1
  68. package/dist/preview-card.js.map +1 -1
  69. package/dist/progress.js +2 -2
  70. package/dist/progress.js.map +1 -1
  71. package/dist/radio.js +2 -2
  72. package/dist/radio.js.map +1 -1
  73. package/dist/scroll-area.js +2 -2
  74. package/dist/scroll-area.js.map +1 -1
  75. package/dist/select.js +8 -8
  76. package/dist/select.js.map +1 -1
  77. package/dist/separator.js +1 -1
  78. package/dist/separator.js.map +1 -1
  79. package/dist/sidebar.js +19 -19
  80. package/dist/sidebar.js.map +1 -1
  81. package/dist/skeleton.js +1 -1
  82. package/dist/skeleton.js.map +1 -1
  83. package/dist/slider.js +2 -2
  84. package/dist/slider.js.map +1 -1
  85. package/dist/styles.css +493 -202
  86. package/dist/switch.js +2 -2
  87. package/dist/switch.js.map +1 -1
  88. package/dist/table.js +5 -5
  89. package/dist/table.js.map +1 -1
  90. package/dist/tabs.js +3 -3
  91. package/dist/tabs.js.map +1 -1
  92. package/dist/textarea.js +1 -1
  93. package/dist/textarea.js.map +1 -1
  94. package/dist/toast.d.ts +3 -3
  95. package/dist/toast.d.ts.map +1 -1
  96. package/dist/toast.js +37 -10
  97. package/dist/toast.js.map +1 -1
  98. package/dist/toggle-group.js +2 -2
  99. package/dist/toggle-group.js.map +1 -1
  100. package/dist/toggle.js +3 -3
  101. package/dist/toggle.js.map +1 -1
  102. package/dist/tooltip.js +1 -1
  103. package/dist/tooltip.js.map +1 -1
  104. package/package.json +9 -20
package/dist/card.js CHANGED
@@ -6,14 +6,14 @@ function Card({ className, size = "default", ...props }) {
6
6
  return /* @__PURE__ */ jsx("div", {
7
7
  "data-slot": "card",
8
8
  "data-size": size,
9
- className: cn("ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
9
+ className: cn("ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", className),
10
10
  ...props
11
11
  });
12
12
  }
13
13
  function CardHeader({ className, ...props }) {
14
14
  return /* @__PURE__ */ jsx("div", {
15
15
  "data-slot": "card-header",
16
- className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
16
+ className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
17
17
  ...props
18
18
  });
19
19
  }
@@ -27,7 +27,7 @@ function CardTitle({ className, ...props }) {
27
27
  function CardDescription({ className, ...props }) {
28
28
  return /* @__PURE__ */ jsx("div", {
29
29
  "data-slot": "card-description",
30
- className: cn("text-muted-foreground text-sm", className),
30
+ className: cn("text-muted text-sm", className),
31
31
  ...props
32
32
  });
33
33
  }
@@ -48,7 +48,7 @@ function CardContent({ className, ...props }) {
48
48
  function CardFooter({ className, ...props }) {
49
49
  return /* @__PURE__ */ jsx("div", {
50
50
  "data-slot": "card-footer",
51
- className: cn("bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3", className),
51
+ className: cn("bg-secondary/50 flex items-center rounded-b-lg border-t border-line p-4 group-data-[size=sm]/card:p-3", className),
52
52
  ...props
53
53
  });
54
54
  }
package/dist/card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"card.js","names":[],"sources":["../src/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype CardProps = React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }\ntype CardHeaderProps = React.ComponentProps<\"div\">\ntype CardTitleProps = React.ComponentProps<\"div\">\ntype CardDescriptionProps = React.ComponentProps<\"div\">\ntype CardActionProps = React.ComponentProps<\"div\">\ntype CardContentProps = React.ComponentProps<\"div\">\ntype CardFooterProps = React.ComponentProps<\"div\">\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: CardProps) {\n return (\n <div\n data-slot=\"card\"\n data-size={size}\n className={cn(\n \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\n \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\n \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\n \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n {...props}\n />\n )\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\n \"bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n"],"mappings":";;;;AAYA,SAAS,KAAK,EACZ,WACA,OAAO,WACP,GAAG,SACS;AACZ,QACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,wVACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sSACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"card.js","names":[],"sources":["../src/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype CardProps = React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }\ntype CardHeaderProps = React.ComponentProps<\"div\">\ntype CardTitleProps = React.ComponentProps<\"div\">\ntype CardDescriptionProps = React.ComponentProps<\"div\">\ntype CardActionProps = React.ComponentProps<\"div\">\ntype CardContentProps = React.ComponentProps<\"div\">\ntype CardFooterProps = React.ComponentProps<\"div\">\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: CardProps) {\n return (\n <div\n data-slot=\"card\"\n data-size={size}\n className={cn(\n \"ring-contrast/10 bg-surface text-contrast group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\n \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\n \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-muted text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n return (\n <div\n data-slot=\"card-action\"\n className={cn(\n \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n {...props}\n />\n )\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\n \"bg-secondary/50 flex items-center rounded-b-lg border-t border-line p-4 group-data-[size=sm]/card:p-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n"],"mappings":";;;;AAYA,SAAS,KAAK,EACZ,WACA,OAAO,WACP,GAAG,SACS;AACZ,QACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,kVACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sSACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yGACA,UACD;EACD,GAAI;EACJ,CAAA"}
package/dist/checkbox.js CHANGED
@@ -8,7 +8,7 @@ import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
8
8
  function Checkbox({ className, ...props }) {
9
9
  return /* @__PURE__ */ jsx(Checkbox$1.Root, {
10
10
  "data-slot": "checkbox",
11
- className: cn("cursor-clickable border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
11
+ className: cn("cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-checked:text-white dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
12
12
  ...props,
13
13
  children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
14
14
  "data-slot": "checkbox-indicator",
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","names":["CheckboxPrimitive"],"sources":["../src/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"./lib/utils\"\nimport { CheckIcon } from \"./lib/internal-icons\"\n\ntype CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nfunction Checkbox({ className, ...props }: CheckboxProps) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"cursor-clickable border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n}\n\nexport { Checkbox }\n"],"mappings":";;;;;;;AAWA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAACA,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,srBACA,UACD;EACD,GAAI;YAEJ,oBAACA,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,WAAD,EAAa,CAAA;GACe,CAAA;EACP,CAAA"}
1
+ {"version":3,"file":"checkbox.js","names":["CheckboxPrimitive"],"sources":["../src/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"./lib/utils\"\nimport { CheckIcon } from \"./lib/internal-icons\"\n\ntype CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nfunction Checkbox({ className, ...props }: CheckboxProps) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"cursor-clickable border-edge dark:bg-edge/30 data-checked:bg-primary data-checked:text-white dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n >\n <CheckIcon />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n}\n\nexport { Checkbox }\n"],"mappings":";;;;;;;AAWA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAACA,WAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,yqBACA,UACD;EACD,GAAI;YAEJ,oBAACA,WAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,WAAD,EAAa,CAAA;GACe,CAAA;EACP,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"combobox.d.ts","names":[],"sources":["../src/combobox.tsx"],"mappings":";;;;;KAeK,aAAA,GAAgB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,IAAA;AAAA,KAE9D,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KACnE,oBAAA,GAAuB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,OAAA;AAAA,KACrE,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KACnE,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KAGnE,uBAAA,GAA0B,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,UAAA;AAAA,KACxE,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KAEnE,iBAAA,GAAoB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,IAAA;AAAA,KAClE,iBAAA,GAAoB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,IAAA;AAAA,KAClE,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KACnE,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,UAAA;AAAA,KACnE,uBAAA,GAA0B,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,UAAA;AAAA,KACxE,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KACnE,sBAAA,GAAyB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,SAAA;AAAA,KACvE,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KACnE,iBAAA,GAAoB,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,IAAA;AAAA,KAClE,uBAAA,GAA0B,KAAA,CAAM,cAAA,QAAsB,UAAA,CAAkB,KAAA;AAAA,KAExE,yBAAA,GAA4B,kBAAA;EAC/B,WAAA;EACA,SAAA;AAAA;AAAA,KAGG,wBAAA,GAA2B,iBAAA;EAC9B,UAAA;AAAA;AAAA,KAGG,oBAAA,GAAuB,kBAAA,GAC1B,IAAA,CACE,uBAAA;AAAA,iBAIK,QAAA,CAAA;EAAA,GAAc;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIpC,aAAA,CAAA;EAAA,GAAmB;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,eAAA,CAAA;EAAkB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,oBAAA,GAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBvE,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAezD,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,QAAA;EACA,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,yBAAA,GAAyB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoDnB,eAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,UAAA;EACA,KAAA;EACA,WAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,oBAAA,GAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAwBd,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAavD,YAAA,CAAA;EAAe,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAwBjE,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUzD,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUzD,kBAAA,CAAA;EAAA,GAAwB;AAAA,GAAS,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIxD,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAazD,iBAAA,CAAA;EAAoB,SAAA;EAAA,GAAc;AAAA,GAAS,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAazD,YAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,wBAAA,GAAwB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0BlB,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUnE,iBAAA,CAAA,GAAiB,KAAA,CAAA,SAAA,CAAA,cAAA"}
1
+ {"version":3,"file":"combobox.d.ts","names":[],"sources":["../src/combobox.tsx"],"mappings":"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"}
package/dist/combobox.js CHANGED
@@ -24,7 +24,7 @@ function ComboboxTrigger({ className, children, ...props }) {
24
24
  "data-slot": "combobox-trigger",
25
25
  className: cn("[&_svg:not([class*='size-'])]:size-4", className),
26
26
  ...props,
27
- children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" })]
27
+ children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted pointer-events-none size-4" })]
28
28
  });
29
29
  }
30
30
  function ComboboxClear({ className, ...props }) {
@@ -34,7 +34,7 @@ function ComboboxClear({ className, ...props }) {
34
34
  variant: "ghost",
35
35
  size: "icon-xs"
36
36
  }),
37
- className: cn("motion-scale [--motion-scale-blur:2px]", className),
37
+ className: cn("motion-scale-sm", className),
38
38
  ...props,
39
39
  children: /* @__PURE__ */ jsx(CloseIcon, { className: "pointer-events-none" })
40
40
  });
@@ -57,7 +57,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
57
57
  nativeButton: true,
58
58
  render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
59
59
  "data-slot": "input-group-button",
60
- className: cn("motion-scale [--motion-scale-blur:2px] data-pressed:bg-transparent", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:pointer-events-none", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:opacity-0", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:[filter:blur(var(--blur))]", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:scale-[var(--scale)]"),
60
+ className: cn("motion-scale-sm data-pressed:bg-transparent", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:pointer-events-none", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:opacity-0", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:[filter:blur(var(--blur-sm))]", "group-has-[[data-slot=combobox-clear][data-visible]]/input-group:scale-[var(--scale-sm)]"),
61
61
  disabled
62
62
  }) : null, showClear ? /* @__PURE__ */ jsx(ComboboxClear, { disabled }) : null]
63
63
  })
@@ -89,7 +89,7 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
89
89
  className: "isolate z-50",
90
90
  children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
91
91
  "data-slot": "combobox-content",
92
- className: cn("motion-slide bg-popover text-popover-foreground ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
92
+ className: cn("motion-pop-md bg-elevated text-contrast ring-contrast/10 *:data-[slot=input-group]:bg-edge/30 *:data-[slot=input-group]:border-edge/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
93
93
  ...props
94
94
  })
95
95
  }) });
@@ -104,7 +104,7 @@ function ComboboxList({ className, ...props }) {
104
104
  function ComboboxItem({ className, children, ...props }) {
105
105
  return /* @__PURE__ */ jsxs(Combobox$1.Item, {
106
106
  "data-slot": "combobox-item",
107
- className: cn("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-2 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", className),
107
+ className: cn("data-highlighted:bg-primary data-highlighted:text-white not-data-[variant=destructive]:data-highlighted:**:text-white relative flex w-full cursor-clickable items-center gap-2 rounded-sm 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", className),
108
108
  ...props,
109
109
  children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
110
110
  render: /* @__PURE__ */ jsx("span", {
@@ -125,7 +125,7 @@ function ComboboxGroup({ className, ...props }) {
125
125
  function ComboboxLabel({ className, ...props }) {
126
126
  return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
127
127
  "data-slot": "combobox-label",
128
- className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
128
+ className: cn("text-muted px-2 py-1.5 text-xs", className),
129
129
  ...props
130
130
  });
131
131
  }
@@ -138,28 +138,28 @@ function ComboboxCollection({ ...props }) {
138
138
  function ComboboxEmpty({ className, ...props }) {
139
139
  return /* @__PURE__ */ jsx(Combobox$1.Empty, {
140
140
  "data-slot": "combobox-empty",
141
- className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className),
141
+ className: cn("text-muted hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className),
142
142
  ...props
143
143
  });
144
144
  }
145
145
  function ComboboxSeparator({ className, ...props }) {
146
146
  return /* @__PURE__ */ jsx(Combobox$1.Separator, {
147
147
  "data-slot": "combobox-separator",
148
- className: cn("bg-border -mx-1 my-1 h-px", className),
148
+ className: cn("bg-line -mx-1 my-1 h-px", className),
149
149
  ...props
150
150
  });
151
151
  }
152
152
  function ComboboxChips({ className, ...props }) {
153
153
  return /* @__PURE__ */ jsx(Combobox$1.Chips, {
154
154
  "data-slot": "combobox-chips",
155
- className: cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className),
155
+ className: cn("dark:bg-edge/30 border-edge focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className),
156
156
  ...props
157
157
  });
158
158
  }
159
159
  function ComboboxChip({ className, children, showRemove = true, ...props }) {
160
160
  return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
161
161
  "data-slot": "combobox-chip",
162
- className: cn("bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
162
+ className: cn("bg-secondary text-contrast flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
163
163
  ...props,
164
164
  children: [children, showRemove ? /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
165
165
  render: /* @__PURE__ */ jsx(Button, {
@@ -1 +1 @@
1
- {"version":3,"file":"combobox.js","names":["ComboboxPrimitive"],"sources":["../src/combobox.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"./input-group\"\nimport { ChevronDownIcon, CloseIcon, CheckIcon } from \"./lib/internal-icons\"\n\ntype ComboboxProps = React.ComponentProps<typeof ComboboxPrimitive.Root>\n\ntype ComboboxValueProps = React.ComponentProps<typeof ComboboxPrimitive.Value>\ntype ComboboxTriggerProps = React.ComponentProps<typeof ComboboxPrimitive.Trigger>\ntype ComboboxClearProps = React.ComponentProps<typeof ComboboxPrimitive.Clear>\ntype ComboboxInputProps = React.ComponentProps<typeof ComboboxPrimitive.Input>\n\ntype ComboboxPortalProps = React.ComponentProps<typeof ComboboxPrimitive.Portal>\ntype ComboboxPositionerProps = React.ComponentProps<typeof ComboboxPrimitive.Positioner>\ntype ComboboxPopupProps = React.ComponentProps<typeof ComboboxPrimitive.Popup>\n\ntype ComboboxListProps = React.ComponentProps<typeof ComboboxPrimitive.List>\ntype ComboboxItemProps = React.ComponentProps<typeof ComboboxPrimitive.Item>\ntype ComboboxGroupProps = React.ComponentProps<typeof ComboboxPrimitive.Group>\ntype ComboboxLabelProps = React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>\ntype ComboboxCollectionProps = React.ComponentProps<typeof ComboboxPrimitive.Collection>\ntype ComboboxEmptyProps = React.ComponentProps<typeof ComboboxPrimitive.Empty>\ntype ComboboxSeparatorProps = React.ComponentProps<typeof ComboboxPrimitive.Separator>\ntype ComboboxChipsProps = React.ComponentProps<typeof ComboboxPrimitive.Chips>\ntype ComboboxChipProps = React.ComponentProps<typeof ComboboxPrimitive.Chip>\ntype ComboboxChipsInputProps = React.ComponentProps<typeof ComboboxPrimitive.Input>\n\ntype ComboboxInputWrapperProps = ComboboxInputProps & {\n showTrigger?: boolean\n showClear?: boolean\n}\n\ntype ComboboxChipWrapperProps = ComboboxChipProps & {\n showRemove?: boolean\n}\n\ntype ComboboxContentProps = ComboboxPopupProps &\n Pick<\n ComboboxPositionerProps,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >\n\nfunction Combobox({ ...props }: ComboboxProps) {\n return <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />\n}\n\nfunction ComboboxValue({ ...props }: ComboboxValueProps) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\n \"[&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronDownIcon\n className=\"text-muted-foreground pointer-events-none size-4\"\n />\n </ComboboxPrimitive.Trigger>\n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxClearProps) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(\"motion-scale [--motion-scale-blur:2px]\", className)}\n {...props}\n >\n <CloseIcon\n className=\"pointer-events-none\"\n />\n </ComboboxPrimitive.Clear>\n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxInputWrapperProps) {\n return (\n <ComboboxPrimitive.InputGroup render={<InputGroup className={cn(className)} />}>\n <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />\n <InputGroupAddon align=\"inline-end\">\n {/* Stack the trigger chevron and clear button in one cell so they\n * cross-fade. In single-select mode Base UI mounts the Clear only\n * when a value is *selected* (not while typing), and marks it with\n * a persistent `data-visible` attribute. The chevron keys its\n * fade-out (opacity/blur/scale via `motion-scale`) off that exact\n * attribute. Both behaviours are pinned by `combobox.test.tsx` —\n * verified against the rendered DOM, not inferred. */}\n <div className=\"relative grid size-6 *:[grid-area:1/1]\">\n {showTrigger ? (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n nativeButton\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className={cn(\n \"motion-scale [--motion-scale-blur:2px] data-pressed:bg-transparent\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:pointer-events-none\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:opacity-0\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:[filter:blur(var(--blur))]\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:scale-[var(--scale)]\",\n )}\n disabled={disabled}\n />\n ) : null}\n {showClear ? <ComboboxClear disabled={disabled} /> : null}\n </div>\n </InputGroupAddon>\n {children}\n </ComboboxPrimitive.InputGroup>\n )\n}\n\nfunction ComboboxPortal({ ...props }: ComboboxPortalProps) {\n return <ComboboxPrimitive.Portal data-slot=\"combobox-portal\" {...props} />\n}\n\nfunction ComboboxPositioner({ className, ...props }: ComboboxPositionerProps) {\n return (\n <ComboboxPrimitive.Positioner\n data-slot=\"combobox-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxContentProps) {\n return (\n <ComboboxPortal>\n <ComboboxPositioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n className={cn(\n \"motion-slide bg-popover text-popover-foreground ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n className,\n )}\n {...props}\n />\n </ComboboxPositioner>\n </ComboboxPortal>\n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxListProps) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxItem({ className, children, ...props }: ComboboxItemProps) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-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-2 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\",\n className,\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span data-slot=\"combobox-item-indicator\" className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon\n className=\"pointer-events-none\"\n />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxGroupProps) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxLabel({ className, ...props }: ComboboxLabelProps) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxCollectionProps) {\n return <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxChips({ className, ...props }: ComboboxChipsProps) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxChipWrapperProps) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n className,\n )}\n {...props}\n >\n {children}\n {showRemove ? (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <CloseIcon\n className=\"pointer-events-none\"\n />\n </ComboboxPrimitive.ChipRemove>\n ) : null}\n </ComboboxPrimitive.Chip>\n )\n}\n\nfunction ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n )\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxGroup,\n ComboboxLabel,\n ComboboxCollection,\n ComboboxEmpty,\n ComboboxSeparator,\n ComboboxChips,\n ComboboxChip,\n ComboboxChipsInput,\n ComboboxTrigger,\n ComboboxValue,\n ComboboxClear,\n useComboboxAnchor,\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"combobox.js","names":["ComboboxPrimitive"],"sources":["../src/combobox.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"./input-group\"\nimport { ChevronDownIcon, CloseIcon, CheckIcon } from \"./lib/internal-icons\"\n\ntype ComboboxProps = React.ComponentProps<typeof ComboboxPrimitive.Root>\n\ntype ComboboxValueProps = React.ComponentProps<typeof ComboboxPrimitive.Value>\ntype ComboboxTriggerProps = React.ComponentProps<typeof ComboboxPrimitive.Trigger>\ntype ComboboxClearProps = React.ComponentProps<typeof ComboboxPrimitive.Clear>\ntype ComboboxInputProps = React.ComponentProps<typeof ComboboxPrimitive.Input>\n\ntype ComboboxPortalProps = React.ComponentProps<typeof ComboboxPrimitive.Portal>\ntype ComboboxPositionerProps = React.ComponentProps<typeof ComboboxPrimitive.Positioner>\ntype ComboboxPopupProps = React.ComponentProps<typeof ComboboxPrimitive.Popup>\n\ntype ComboboxListProps = React.ComponentProps<typeof ComboboxPrimitive.List>\ntype ComboboxItemProps = React.ComponentProps<typeof ComboboxPrimitive.Item>\ntype ComboboxGroupProps = React.ComponentProps<typeof ComboboxPrimitive.Group>\ntype ComboboxLabelProps = React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>\ntype ComboboxCollectionProps = React.ComponentProps<typeof ComboboxPrimitive.Collection>\ntype ComboboxEmptyProps = React.ComponentProps<typeof ComboboxPrimitive.Empty>\ntype ComboboxSeparatorProps = React.ComponentProps<typeof ComboboxPrimitive.Separator>\ntype ComboboxChipsProps = React.ComponentProps<typeof ComboboxPrimitive.Chips>\ntype ComboboxChipProps = React.ComponentProps<typeof ComboboxPrimitive.Chip>\ntype ComboboxChipsInputProps = React.ComponentProps<typeof ComboboxPrimitive.Input>\n\ntype ComboboxInputWrapperProps = ComboboxInputProps & {\n showTrigger?: boolean\n showClear?: boolean\n}\n\ntype ComboboxChipWrapperProps = ComboboxChipProps & {\n showRemove?: boolean\n}\n\ntype ComboboxContentProps = ComboboxPopupProps &\n Pick<\n ComboboxPositionerProps,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >\n\nfunction Combobox({ ...props }: ComboboxProps) {\n return <ComboboxPrimitive.Root data-slot=\"combobox\" {...props} />\n}\n\nfunction ComboboxValue({ ...props }: ComboboxValueProps) {\n return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps) {\n return (\n <ComboboxPrimitive.Trigger\n data-slot=\"combobox-trigger\"\n className={cn(\n \"[&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronDownIcon\n className=\"text-muted pointer-events-none size-4\"\n />\n </ComboboxPrimitive.Trigger>\n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxClearProps) {\n return (\n <ComboboxPrimitive.Clear\n data-slot=\"combobox-clear\"\n render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n className={cn(\"motion-scale-sm\", className)}\n {...props}\n >\n <CloseIcon\n className=\"pointer-events-none\"\n />\n </ComboboxPrimitive.Clear>\n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxInputWrapperProps) {\n return (\n <ComboboxPrimitive.InputGroup render={<InputGroup className={cn(className)} />}>\n <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />\n <InputGroupAddon align=\"inline-end\">\n {/* Stack the trigger chevron and clear button in one cell so they\n * cross-fade. In single-select mode Base UI mounts the Clear only\n * when a value is *selected* (not while typing), and marks it with\n * a persistent `data-visible` attribute. The chevron keys its\n * fade-out (opacity/blur/scale via `motion-scale-sm`) off that exact\n * attribute, so chevron→clear cross-fades in place. */}\n <div className=\"relative grid size-6 *:[grid-area:1/1]\">\n {showTrigger ? (\n <InputGroupButton\n size=\"icon-xs\"\n variant=\"ghost\"\n nativeButton\n render={<ComboboxTrigger />}\n data-slot=\"input-group-button\"\n className={cn(\n \"motion-scale-sm data-pressed:bg-transparent\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:pointer-events-none\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:opacity-0\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:[filter:blur(var(--blur-sm))]\",\n \"group-has-[[data-slot=combobox-clear][data-visible]]/input-group:scale-[var(--scale-sm)]\",\n )}\n disabled={disabled}\n />\n ) : null}\n {showClear ? <ComboboxClear disabled={disabled} /> : null}\n </div>\n </InputGroupAddon>\n {children}\n </ComboboxPrimitive.InputGroup>\n )\n}\n\nfunction ComboboxPortal({ ...props }: ComboboxPortalProps) {\n return <ComboboxPrimitive.Portal data-slot=\"combobox-portal\" {...props} />\n}\n\nfunction ComboboxPositioner({ className, ...props }: ComboboxPositionerProps) {\n return (\n <ComboboxPrimitive.Positioner\n data-slot=\"combobox-positioner\"\n className={className}\n {...props}\n />\n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxContentProps) {\n return (\n <ComboboxPortal>\n <ComboboxPositioner\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"isolate z-50\"\n >\n <ComboboxPrimitive.Popup\n data-slot=\"combobox-content\"\n className={cn(\n \"motion-pop-md bg-elevated text-contrast ring-contrast/10 *:data-[slot=input-group]:bg-edge/30 *:data-[slot=input-group]:border-edge/30 group/combobox-content relative max-h-(--available-height) max-w-(--available-width) min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n className,\n )}\n {...props}\n />\n </ComboboxPositioner>\n </ComboboxPortal>\n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxListProps) {\n return (\n <ComboboxPrimitive.List\n data-slot=\"combobox-list\"\n className={cn(\n \"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxItem({ className, children, ...props }: ComboboxItemProps) {\n return (\n <ComboboxPrimitive.Item\n data-slot=\"combobox-item\"\n className={cn(\n \"data-highlighted:bg-primary data-highlighted:text-white not-data-[variant=destructive]:data-highlighted:**:text-white relative flex w-full cursor-clickable items-center gap-2 rounded-sm 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\",\n className,\n )}\n {...props}\n >\n {children}\n <ComboboxPrimitive.ItemIndicator\n render={\n <span data-slot=\"combobox-item-indicator\" className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n }\n >\n <CheckIcon\n className=\"pointer-events-none\"\n />\n </ComboboxPrimitive.ItemIndicator>\n </ComboboxPrimitive.Item>\n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxGroupProps) {\n return (\n <ComboboxPrimitive.Group\n data-slot=\"combobox-group\"\n className={cn(className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxLabel({ className, ...props }: ComboboxLabelProps) {\n return (\n <ComboboxPrimitive.GroupLabel\n data-slot=\"combobox-label\"\n className={cn(\"text-muted px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxCollectionProps) {\n return <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) {\n return (\n <ComboboxPrimitive.Empty\n data-slot=\"combobox-empty\"\n className={cn(\n \"text-muted hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {\n return (\n <ComboboxPrimitive.Separator\n data-slot=\"combobox-separator\"\n className={cn(\"bg-line -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction ComboboxChips({ className, ...props }: ComboboxChipsProps) {\n return (\n <ComboboxPrimitive.Chips\n data-slot=\"combobox-chips\"\n className={cn(\n \"dark:bg-edge/30 border-edge focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxChipWrapperProps) {\n return (\n <ComboboxPrimitive.Chip\n data-slot=\"combobox-chip\"\n className={cn(\n \"bg-secondary text-contrast flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n className,\n )}\n {...props}\n >\n {children}\n {showRemove ? (\n <ComboboxPrimitive.ChipRemove\n render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n <CloseIcon\n className=\"pointer-events-none\"\n />\n </ComboboxPrimitive.ChipRemove>\n ) : null}\n </ComboboxPrimitive.Chip>\n )\n}\n\nfunction ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps) {\n return (\n <ComboboxPrimitive.Input\n data-slot=\"combobox-chip-input\"\n className={cn(\"min-w-16 flex-1 outline-none\", className)}\n {...props}\n />\n )\n}\n\nfunction useComboboxAnchor() {\n return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxGroup,\n ComboboxLabel,\n ComboboxCollection,\n ComboboxEmpty,\n ComboboxSeparator,\n ComboboxChips,\n ComboboxChip,\n ComboboxChipsInput,\n ComboboxTrigger,\n ComboboxValue,\n ComboboxClear,\n useComboboxAnchor,\n}\n"],"mappings":"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"}
@@ -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("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),
38
+ className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none", className),
39
39
  finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
40
40
  ...props
41
41
  })
@@ -51,7 +51,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
51
51
  return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
52
52
  "data-slot": "context-menu-label",
53
53
  "data-inset": inset,
54
- className: cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
54
+ className: cn("text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
55
55
  ...props
56
56
  });
57
57
  }
@@ -60,7 +60,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
60
60
  "data-slot": "context-menu-item",
61
61
  "data-inset": inset,
62
62
  "data-variant": variant,
63
- className: cn("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", className),
63
+ className: cn("focus:bg-primary focus:text-white 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-white group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm 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", className),
64
64
  ...props
65
65
  });
66
66
  }
@@ -74,7 +74,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
74
74
  return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
75
75
  "data-slot": "context-menu-sub-trigger",
76
76
  "data-inset": inset,
77
- className: cn("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", className),
77
+ className: cn("focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm 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", className),
78
78
  ...props,
79
79
  children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
80
80
  });
@@ -82,7 +82,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
82
82
  function ContextMenuSubContent({ align = "start", alignOffset = -4, side = "right", sideOffset = 0, className, ...props }) {
83
83
  return /* @__PURE__ */ jsx(ContextMenuContent, {
84
84
  "data-slot": "context-menu-sub-content",
85
- className: cn("w-auto min-w-24 shadow-lg", className),
85
+ className: cn("w-auto min-w-24 shadow-md", className),
86
86
  align,
87
87
  alignOffset,
88
88
  side,
@@ -94,7 +94,7 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
94
94
  return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
95
95
  "data-slot": "context-menu-checkbox-item",
96
96
  "data-inset": inset,
97
- className: cn("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", className),
97
+ className: cn("focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm 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", className),
98
98
  checked,
99
99
  ...props,
100
100
  children: [/* @__PURE__ */ jsx("span", {
@@ -114,7 +114,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
114
114
  return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
115
115
  "data-slot": "context-menu-radio-item",
116
116
  "data-inset": inset,
117
- className: cn("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", className),
117
+ className: cn("focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm 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", className),
118
118
  ...props,
119
119
  children: [/* @__PURE__ */ jsx("span", {
120
120
  "data-slot": "context-menu-radio-item-indicator",
@@ -126,14 +126,14 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
126
126
  function ContextMenuSeparator({ className, ...props }) {
127
127
  return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
128
128
  "data-slot": "context-menu-separator",
129
- className: cn("bg-border -mx-1 my-1 h-px", className),
129
+ className: cn("bg-line -mx-1 my-1 h-px", className),
130
130
  ...props
131
131
  });
132
132
  }
133
133
  function ContextMenuShortcut({ className, ...props }) {
134
134
  return /* @__PURE__ */ jsx("span", {
135
135
  "data-slot": "context-menu-shortcut",
136
- className: cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className),
136
+ className: cn("text-muted group-focus/context-menu-item:text-white ml-auto text-xs tracking-widest", className),
137
137
  ...props
138
138
  });
139
139
  }
@@ -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 \"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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"}
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-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md 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 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-primary focus:text-white 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-white group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm 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-primary focus:text-white data-open:bg-primary data-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm 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-md\", 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-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm 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-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm 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-line -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 group-focus/context-menu-item:text-white 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":";;;;;;;;AA4DA,SAAS,YAAY,OAAyB;AAC5C,QAAO,oBAACA,cAAqB,MAAtB;EAA2B,aAAU;EAAe,GAAI;EAAS,CAAA;;AAG1E,SAAS,kBAAkB,OAA+B;AACxD,QAAO,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;EAAS,CAAA;;AAGnF,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,oBAACA,cAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,QAAQ,SACR,cAAc,GACd,OAAO,SACP,aAAa,GACb,qBACA,YACA,GAAG,SACuB;AAC1B,QACE,oBAACA,cAAqB,QAAtB,EAAA,UACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACV,WAAU;EACH;EACM;EACP;EACM;YAEZ,oBAACA,cAAqB,OAAtB;GACE,aAAU;GACV,WAAW,GACT,gNACA,UACD;GACD,YAAY,kBAAkB,qBAAqB,WAAW;GAC9D,GAAI;GACJ,CAAA;EAC8B,CAAA,EACN,CAAA;;AAIlC,SAAS,iBAAiB,OAA8B;AACtD,QAAO,oBAACA,cAAqB,OAAtB;EAA4B,aAAU;EAAqB,GAAI;EAAS,CAAA;;AAGjF,SAAS,iBAAiB,EAAE,WAAW,OAAO,GAAG,SAAgC;AAC/E,QACE,oBAACA,cAAqB,YAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,OACA,UAAU,WACV,GAAG,SACoB;AACvB,QACE,oBAACA,cAAqB,MAAtB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,8lBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,OAA4B;AAClD,QAAO,oBAACA,cAAqB,aAAtB;EAAkC,aAAU;EAAmB,GAAI;EAAS,CAAA;;AAGrF,SAAS,sBAAsB,EAAE,WAAW,OAAO,UAAU,GAAG,SAAqC;AACnG,QACE,qBAACA,cAAqB,gBAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,sRACA,UACD;EACD,GAAI;YAPN,CASG,UACD,oBAAC,kBAAD,EAAkB,WAAU,WAAY,CAAA,CACJ;;;AAI1C,SAAS,sBAAsB,EAC7B,QAAQ,SAGR,cAAc,IACd,OAAO,SACP,aAAa,GACb,WACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,oBAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EAC9C;EACM;EACP;EACM;EACZ,GAAI;EACJ,CAAA;;AAIN,SAAS,wBAAwB,EAC/B,WACA,UACA,SACA,OACA,GAAG,SAC4B;AAC/B,QACE,qBAACA,cAAqB,cAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,qTACA,UACD;EACQ;EACT,GAAI;YARN,CAUE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,cAAqB,uBAAtB,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EAC8B,CAAA;GACxC,CAAA,EACN,SACiC;;;AAIxC,SAAS,sBAAsB,OAAmC;AAChE,QAAO,oBAACA,cAAqB,YAAtB;EAAiC,aAAU;EAA2B,GAAI;EAAS,CAAA;;AAG5F,SAAS,qBAAqB,EAAE,WAAW,UAAU,OAAO,GAAG,SAAoC;AACjG,QACE,qBAACA,cAAqB,WAAtB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,qTACA,UACD;EACD,GAAI;YAPN,CASE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,cAAqB,oBAAtB,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EAC2B,CAAA;GACrC,CAAA,EACN,SAC8B;;;AAIrC,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAoC;AAChF,QACE,oBAACA,cAAqB,WAAtB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAmC;AAC9E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,uFACA,UACD;EACD,GAAI;EACJ,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.d.ts","names":[],"sources":["../src/dialog.tsx"],"mappings":";;;;;KASK,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA;;;AANE;;;;;;;;EAiB/D,uBAAA;AAAA;AAAA,KAEG,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA;AAAA,KACjE,iBAAA,GAAoB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,MAAA;AAAA,KAChE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,QAAA;AAAA,KACjE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,sBAAA,GAAyB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,WAAA;AAAA,KAErE,kBAAA,GAAqB,gBAAA;EACxB,eAAA;AAAA;AAAA,KAGG,iBAAA,GAAoB,KAAA,CAAM,cAAA;EAC7B,eAAA;AAAA;AAAA,iBAGO,MAAA,CAAA;EAAS,uBAAA;EAAA,GAA4B;AAAA,GAAS,WAAA,GAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIzD,aAAA,CAAA;EAAA,GAAmB;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GAAkB;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,WAAA,CAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAaZ,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,eAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiCZ,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBX,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"dialog.d.ts","names":[],"sources":["../src/dialog.tsx"],"mappings":";;;;;KASK,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA;;;AANE;;;;;;;;EAiB/D,uBAAA;AAAA;AAAA,KAEG,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,OAAA;AAAA,KACjE,iBAAA,GAAoB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,MAAA;AAAA,KAChE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,QAAA;AAAA,KACjE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,KAAA;AAAA,KAC/D,sBAAA,GAAyB,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,WAAA;AAAA,KAErE,kBAAA,GAAqB,gBAAA;EACxB,eAAA;AAAA;AAAA,KAGG,iBAAA,GAAoB,KAAA,CAAM,cAAA;EAC7B,eAAA;AAAA;AAAA,iBAGO,MAAA,CAAA;EAAS,uBAAA;EAAA,GAA4B;AAAA,GAAS,WAAA,GAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIzD,aAAA,CAAA;EAAA,GAAmB;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GAAkB;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,WAAA,CAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAaZ,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,eAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiCZ,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBX,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAYrD,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/dialog.js CHANGED
@@ -41,7 +41,7 @@ function DialogOverlay({ className, ...props }) {
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("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),
44
+ className: cn("motion-scale-lg bg-foundation ring-contrast/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-lg 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",
@@ -67,7 +67,7 @@ function DialogHeader({ className, ...props }) {
67
67
  function DialogFooter({ className, showCloseButton = false, children, ...props }) {
68
68
  return /* @__PURE__ */ jsxs("div", {
69
69
  "data-slot": "dialog-footer",
70
- className: cn("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", className),
70
+ className: cn("bg-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line p-4 sm:flex-row sm:justify-end", className),
71
71
  ...props,
72
72
  children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
73
73
  render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
@@ -78,14 +78,14 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
78
78
  function DialogTitle({ className, ...props }) {
79
79
  return /* @__PURE__ */ jsx(Dialog$1.Title, {
80
80
  "data-slot": "dialog-title",
81
- className: cn("text-base leading-none font-medium", className),
81
+ className: cn("text-base leading-none font-medium pr-8", className),
82
82
  ...props
83
83
  });
84
84
  }
85
85
  function DialogDescription({ className, ...props }) {
86
86
  return /* @__PURE__ */ jsx(Dialog$1.Description, {
87
87
  "data-slot": "dialog-description",
88
- className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
88
+ className: cn("text-muted *:[a]:hover:text-contrast text-sm *:[a]:underline *:[a]:underline-offset-3", className),
89
89
  ...props
90
90
  });
91
91
  }
@@ -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 \"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"}
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-lg bg-foundation ring-contrast/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-lg 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-secondary/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-line 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 // pr-8 reserves room for the close button (absolute, top-2 right-2) so a\n // long title wraps before it instead of running underneath.\n className={cn(\"text-base leading-none font-medium pr-8\", 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 *:[a]:hover:text-contrast 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,iNACA,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,4HACA,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;EAGV,WAAW,GAAG,2CAA2C,UAAU;EACnE,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;EACJ,CAAA"}
package/dist/drawer.js CHANGED
@@ -43,12 +43,12 @@ 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-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),
46
+ className: cn("group/drawer-content bg-foundation fixed z-50 flex flex-col overflow-y-auto border-edge text-sm shadow-lg outline-none", "transition-[translate] duration-(--duration-lg) ease-(--ease) 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-lg 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-lg 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-lg 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-lg 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", {
50
50
  "data-slot": "drawer-drag-handle",
51
- className: "bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block"
51
+ className: "bg-secondary mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block"
52
52
  }),
53
53
  children,
54
54
  showCloseButton && /* @__PURE__ */ jsxs(Drawer$1.Close, {
@@ -84,14 +84,14 @@ function DrawerFooter({ className, ...props }) {
84
84
  function DrawerTitle({ className, ...props }) {
85
85
  return /* @__PURE__ */ jsx(Drawer$1.Title, {
86
86
  "data-slot": "drawer-title",
87
- className: cn("text-foreground text-base font-medium", className),
87
+ className: cn("text-contrast text-base font-medium", className),
88
88
  ...props
89
89
  });
90
90
  }
91
91
  function DrawerDescription({ className, ...props }) {
92
92
  return /* @__PURE__ */ jsx(Drawer$1.Description, {
93
93
  "data-slot": "drawer-description",
94
- className: cn("text-muted-foreground text-sm", className),
94
+ className: cn("text-muted text-sm", className),
95
95
  ...props
96
96
  });
97
97
  }
@@ -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 \"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"}
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-foundation fixed z-50 flex flex-col overflow-y-auto border-edge text-sm shadow-lg outline-none\",\n // Transition — animate translate at the lg tier + the one curve; disable during swipe\n \"transition-[translate] duration-(--duration-lg) ease-(--ease) 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-lg 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-lg 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-lg 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-lg 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-secondary 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-contrast 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 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,0HAEA,2FAEA,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,uCAAuC,UAAU;EAC/D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACsB;AACzB,QACE,oBAACA,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,UAAU;EAC9C,GAAI;EACJ,CAAA"}