luan-ui 0.7.0 → 0.8.1

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 (69) hide show
  1. package/dist/components/accordion/accordion.js +2 -2
  2. package/dist/components/accordion/accordion.js.map +1 -1
  3. package/dist/components/alert/alert.js +3 -3
  4. package/dist/components/alert/alert.js.map +1 -1
  5. package/dist/components/alert-dialog/alert-dialog.js +3 -3
  6. package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
  7. package/dist/components/autocomplete/autocomplete.d.ts +83 -0
  8. package/dist/components/autocomplete/autocomplete.js +58 -0
  9. package/dist/components/autocomplete/autocomplete.js.map +1 -0
  10. package/dist/components/avatar/avatar-group.js +1 -1
  11. package/dist/components/avatar/avatar-group.js.map +1 -1
  12. package/dist/components/avatar/avatar.js +2 -2
  13. package/dist/components/avatar/avatar.js.map +1 -1
  14. package/dist/components/badge/badge.js +4 -4
  15. package/dist/components/badge/badge.js.map +1 -1
  16. package/dist/components/button/button.js +3 -3
  17. package/dist/components/button/button.js.map +1 -1
  18. package/dist/components/card/card.js +3 -3
  19. package/dist/components/card/card.js.map +1 -1
  20. package/dist/components/checkbox/checkbox.js +2 -2
  21. package/dist/components/checkbox/checkbox.js.map +1 -1
  22. package/dist/components/combobox/combobox.d.ts +82 -0
  23. package/dist/components/combobox/combobox.js +57 -0
  24. package/dist/components/combobox/combobox.js.map +1 -0
  25. package/dist/components/dialog/dialog.js +3 -3
  26. package/dist/components/dialog/dialog.js.map +1 -1
  27. package/dist/components/drawer/drawer.js +3 -3
  28. package/dist/components/drawer/drawer.js.map +1 -1
  29. package/dist/components/dropdown-menu/dropdown-menu.js +7 -7
  30. package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
  31. package/dist/components/form-helper/form-helper.js +4 -4
  32. package/dist/components/form-helper/form-helper.js.map +1 -1
  33. package/dist/components/input/input.js +3 -3
  34. package/dist/components/input/input.js.map +1 -1
  35. package/dist/components/label/label.js +1 -1
  36. package/dist/components/label/label.js.map +1 -1
  37. package/dist/components/pagination/pagination.js +4 -4
  38. package/dist/components/pagination/pagination.js.map +1 -1
  39. package/dist/components/popover/popover.js +1 -1
  40. package/dist/components/popover/popover.js.map +1 -1
  41. package/dist/components/progress/progress.js +1 -1
  42. package/dist/components/progress/progress.js.map +1 -1
  43. package/dist/components/radio-group/radio-group.js +1 -1
  44. package/dist/components/radio-group/radio-group.js.map +1 -1
  45. package/dist/components/select/select.js +4 -4
  46. package/dist/components/select/select.js.map +1 -1
  47. package/dist/components/skeleton/skeleton.js +1 -1
  48. package/dist/components/skeleton/skeleton.js.map +1 -1
  49. package/dist/components/slider/slider.js +2 -2
  50. package/dist/components/slider/slider.js.map +1 -1
  51. package/dist/components/switch/switch.js +5 -5
  52. package/dist/components/switch/switch.js.map +1 -1
  53. package/dist/components/table/table.js +4 -4
  54. package/dist/components/table/table.js.map +1 -1
  55. package/dist/components/tabs/tabs.js +3 -3
  56. package/dist/components/tabs/tabs.js.map +1 -1
  57. package/dist/components/text-area/text-area.js +3 -3
  58. package/dist/components/text-area/text-area.js.map +1 -1
  59. package/dist/components/toast/toast.js +1 -1
  60. package/dist/components/toast/toast.js.map +1 -1
  61. package/dist/components/tooltip/tooltip.js +1 -1
  62. package/dist/components/tooltip/tooltip.js.map +1 -1
  63. package/dist/index.d.ts +4 -0
  64. package/dist/index.js +2 -0
  65. package/dist/index.js.map +1 -1
  66. package/dist/styles/index.css +43 -0
  67. package/dist/utilities/pagination/get-truncated-elements.js +4 -4
  68. package/dist/utilities/pagination/get-truncated-elements.js.map +1 -1
  69. package/package.json +1 -1
@@ -0,0 +1,82 @@
1
+ import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
2
+ import type { ComponentProps, JSX } from "react";
3
+ /**
4
+ * Combobox
5
+ *
6
+ * An input combined with a list of predefined items to select.
7
+ * Use when the input is restricted to a set of predefined selectable items,
8
+ * similar to Select but whose items are filterable using an input.
9
+ */
10
+ export type ComboboxProps<Value = unknown, Multiple extends boolean | undefined = false> = ComboboxPrimitive.Root.Props<Value, Multiple>;
11
+ declare function Combobox<Value, Multiple extends boolean | undefined = false>({ disabled: initialDisabled, required: initialRequired, ...props }: ComboboxProps<Value, Multiple>): JSX.Element;
12
+ /**
13
+ * ComboboxInputGroup
14
+ */
15
+ export type ComboboxInputGroupProps = ComponentProps<typeof ComboboxPrimitive.InputGroup>;
16
+ declare function ComboboxInputGroup({ className, ref, ...props }: ComboboxInputGroupProps): import("react/jsx-runtime").JSX.Element;
17
+ /**
18
+ * ComboboxInput
19
+ */
20
+ export type ComboboxInputProps = ComponentProps<typeof ComboboxPrimitive.Input>;
21
+ declare function ComboboxInput({ className, ref, ...props }: ComboboxInputProps): import("react/jsx-runtime").JSX.Element;
22
+ /**
23
+ * ComboboxTrigger
24
+ */
25
+ export type ComboboxTriggerProps = ComponentProps<typeof ComboboxPrimitive.Trigger>;
26
+ declare function ComboboxTrigger({ className, ref, ...props }: ComboboxTriggerProps): import("react/jsx-runtime").JSX.Element;
27
+ /**
28
+ * ComboboxClear
29
+ */
30
+ export type ComboboxClearProps = ComponentProps<typeof ComboboxPrimitive.Clear>;
31
+ declare function ComboboxClear({ className, ref, ...props }: ComboboxClearProps): import("react/jsx-runtime").JSX.Element;
32
+ /**
33
+ * ComboboxContent
34
+ */
35
+ export type ComboboxContentProps = ComponentProps<typeof ComboboxPrimitive.Popup> & {
36
+ sideOffset?: number;
37
+ };
38
+ declare function ComboboxContent({ className, children, sideOffset, ref, ...props }: ComboboxContentProps): import("react/jsx-runtime").JSX.Element;
39
+ /**
40
+ * ComboboxCollection
41
+ *
42
+ * Renders items from combobox context after filtering. Pass a function child that
43
+ * receives each visible item. For grouped lists, place inside ComboboxGroup with
44
+ * an `items` prop, or map filtered groups using useComboboxFilteredItems.
45
+ */
46
+ export type ComboboxCollectionProps = ComponentProps<typeof ComboboxPrimitive.Collection>;
47
+ declare function ComboboxCollection(props: ComboboxCollectionProps): import("react/jsx-runtime").JSX.Element;
48
+ /**
49
+ * Returns the combobox’s filtered items (flat list or grouped structure), matching
50
+ * the current input query.
51
+ */
52
+ declare const useComboboxFilteredItems: typeof ComboboxPrimitive.useFilteredItems;
53
+ /**
54
+ * ComboboxList
55
+ */
56
+ export type ComboboxListProps = ComponentProps<typeof ComboboxPrimitive.List>;
57
+ declare function ComboboxList({ className, ref, ...props }: ComboboxListProps): import("react/jsx-runtime").JSX.Element;
58
+ /**
59
+ * ComboboxEmpty
60
+ */
61
+ export type ComboboxEmptyProps = ComponentProps<typeof ComboboxPrimitive.Empty>;
62
+ declare function ComboboxEmpty({ className, ref, ...props }: ComboboxEmptyProps): import("react/jsx-runtime").JSX.Element;
63
+ /**
64
+ * ComboboxItem
65
+ */
66
+ export type ComboboxItemProps = ComponentProps<typeof ComboboxPrimitive.Item>;
67
+ declare function ComboboxItem({ className, children, ref, ...props }: ComboboxItemProps): import("react/jsx-runtime").JSX.Element;
68
+ /**
69
+ * ComboboxGroup
70
+ */
71
+ declare const ComboboxGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
72
+ /**
73
+ * ComboboxGroupLabel
74
+ */
75
+ export type ComboboxGroupLabelProps = ComponentProps<typeof ComboboxPrimitive.GroupLabel>;
76
+ declare function ComboboxGroupLabel({ className, ref, ...props }: ComboboxGroupLabelProps): import("react/jsx-runtime").JSX.Element;
77
+ /**
78
+ * ComboboxSeparator
79
+ */
80
+ export type ComboboxSeparatorProps = ComponentProps<typeof ComboboxPrimitive.Separator>;
81
+ declare function ComboboxSeparator({ className, ref, ...props }: ComboboxSeparatorProps): import("react/jsx-runtime").JSX.Element;
82
+ export { Combobox, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, useComboboxFilteredItems, };
@@ -0,0 +1,57 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
3
+ import { useFormContext } from "../form-field/form-field-context";
4
+ import { Icon } from "../icon/icon";
5
+ import { CheckIcon, ChevronDownIcon, Cross2Icon } from "@radix-ui/react-icons";
6
+ import { cn } from "../../utilities/cn/cn";
7
+ function Combobox({ disabled: initialDisabled, required: initialRequired, ...props }) {
8
+ const { disabled, required } = useFormContext({
9
+ disabled: initialDisabled,
10
+ required: initialRequired,
11
+ });
12
+ return (_jsx(ComboboxPrimitive.Root, { disabled: disabled, required: required, ...props }));
13
+ }
14
+ function ComboboxInputGroup({ className, ref, ...props }) {
15
+ return (_jsx(ComboboxPrimitive.InputGroup, { ref: ref, className: cn("flex h-9 w-full items-center rounded-md border border-border-input bg-transparent text-sm shadow-sm ring-offset-background focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
16
+ }
17
+ function ComboboxInput({ className, ref, ...props }) {
18
+ return (_jsx(ComboboxPrimitive.Input, { ref: ref, className: cn("h-full w-full flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed", className), ...props }));
19
+ }
20
+ function ComboboxTrigger({ className, ref, ...props }) {
21
+ return (_jsx(ComboboxPrimitive.Trigger, { ref: ref, className: cn("flex shrink-0 cursor-pointer items-center justify-center px-2 opacity-50 hover:opacity-100 disabled:cursor-not-allowed", className), ...props, children: _jsx(Icon, { size: "small", children: _jsx(ChevronDownIcon, {}) }) }));
22
+ }
23
+ function ComboboxClear({ className, ref, ...props }) {
24
+ return (_jsx(ComboboxPrimitive.Clear, { ref: ref, "aria-label": "Clear selection", className: cn("flex shrink-0 cursor-pointer items-center justify-center px-1 opacity-50 hover:opacity-100 disabled:cursor-not-allowed", className), ...props, children: _jsx(Icon, { size: "small", children: _jsx(Cross2Icon, {}) }) }));
25
+ }
26
+ function ComboboxContent({ className, children, sideOffset = 4, ref, ...props }) {
27
+ return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { sideOffset: sideOffset, children: _jsx(ComboboxPrimitive.Popup, { ref: ref, className: cn("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border-input bg-surface text-text-secondary shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in", className), ...props, children: children }) }) }));
28
+ }
29
+ function ComboboxCollection(props) {
30
+ return _jsx(ComboboxPrimitive.Collection, { ...props });
31
+ }
32
+ /**
33
+ * Returns the combobox’s filtered items (flat list or grouped structure), matching
34
+ * the current input query.
35
+ */
36
+ const useComboboxFilteredItems = ComboboxPrimitive.useFilteredItems;
37
+ function ComboboxList({ className, ref, ...props }) {
38
+ return (_jsx(ComboboxPrimitive.List, { ref: ref, className: cn("w-full p-1 empty:hidden", className), ...props }));
39
+ }
40
+ function ComboboxEmpty({ className, ref, ...props }) {
41
+ return (_jsx(ComboboxPrimitive.Empty, { ref: ref, className: cn("px-2 py-4 text-center text-sm text-text-muted empty:hidden", className), ...props }));
42
+ }
43
+ function ComboboxItem({ className, children, ref, ...props }) {
44
+ return (_jsxs(ComboboxPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(ComboboxPrimitive.ItemIndicator, { children: _jsx(Icon, { size: "small", children: _jsx(CheckIcon, {}) }) }) }), children] }));
45
+ }
46
+ /**
47
+ * ComboboxGroup
48
+ */
49
+ const ComboboxGroup = ComboboxPrimitive.Group;
50
+ function ComboboxGroupLabel({ className, ref, ...props }) {
51
+ return (_jsx(ComboboxPrimitive.GroupLabel, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", className), ...props }));
52
+ }
53
+ function ComboboxSeparator({ className, ref, ...props }) {
54
+ return (_jsx(ComboboxPrimitive.Separator, { ref: ref, className: cn("my-2 h-px bg-separator", className), ...props }));
55
+ }
56
+ export { Combobox, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, useComboboxFilteredItems, };
57
+ //# sourceMappingURL=combobox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combobox.js","sourceRoot":"/","sources":["components/combobox/combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport { CheckIcon, ChevronDownIcon, Cross2Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps, JSX } from \"react\";\n\n/**\n * Combobox\n *\n * An input combined with a list of predefined items to select.\n * Use when the input is restricted to a set of predefined selectable items,\n * similar to Select but whose items are filterable using an input.\n */\n\nexport type ComboboxProps<\n\tValue = unknown,\n\tMultiple extends boolean | undefined = false,\n> = ComboboxPrimitive.Root.Props<Value, Multiple>;\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>({\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\t...props\n}: ComboboxProps<Value, Multiple>): JSX.Element {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<ComboboxPrimitive.Root<Value, Multiple>\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxInputGroup\n */\n\nexport type ComboboxInputGroupProps = ComponentProps<\n\ttypeof ComboboxPrimitive.InputGroup\n>;\n\nfunction ComboboxInputGroup({\n\tclassName,\n\tref,\n\t...props\n}: ComboboxInputGroupProps) {\n\treturn (\n\t\t<ComboboxPrimitive.InputGroup\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-9 w-full items-center rounded-md border border-border-input bg-transparent text-sm shadow-sm ring-offset-background focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxInput\n */\n\nexport type ComboboxInputProps = ComponentProps<typeof ComboboxPrimitive.Input>;\n\nfunction ComboboxInput({ className, ref, ...props }: ComboboxInputProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"h-full w-full flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxTrigger\n */\n\nexport type ComboboxTriggerProps = ComponentProps<\n\ttypeof ComboboxPrimitive.Trigger\n>;\n\nfunction ComboboxTrigger({ className, ref, ...props }: ComboboxTriggerProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 cursor-pointer items-center justify-center px-2 opacity-50 hover:opacity-100 disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\">\n\t\t\t\t<ChevronDownIcon />\n\t\t\t</Icon>\n\t\t</ComboboxPrimitive.Trigger>\n\t);\n}\n\n/**\n * ComboboxClear\n */\n\nexport type ComboboxClearProps = ComponentProps<typeof ComboboxPrimitive.Clear>;\n\nfunction ComboboxClear({ className, ref, ...props }: ComboboxClearProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Clear\n\t\t\tref={ref}\n\t\t\taria-label=\"Clear selection\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex shrink-0 cursor-pointer items-center justify-center px-1 opacity-50 hover:opacity-100 disabled:cursor-not-allowed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\">\n\t\t\t\t<Cross2Icon />\n\t\t\t</Icon>\n\t\t</ComboboxPrimitive.Clear>\n\t);\n}\n\n/**\n * ComboboxContent\n */\n\nexport type ComboboxContentProps = ComponentProps<\n\ttypeof ComboboxPrimitive.Popup\n> & {\n\tsideOffset?: number;\n};\n\nfunction ComboboxContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: ComboboxContentProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Portal>\n\t\t\t<ComboboxPrimitive.Positioner sideOffset={sideOffset}>\n\t\t\t\t<ComboboxPrimitive.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-border-input bg-surface text-text-secondary shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</ComboboxPrimitive.Popup>\n\t\t\t</ComboboxPrimitive.Positioner>\n\t\t</ComboboxPrimitive.Portal>\n\t);\n}\n\n/**\n * ComboboxCollection\n *\n * Renders items from combobox context after filtering. Pass a function child that\n * receives each visible item. For grouped lists, place inside ComboboxGroup with\n * an `items` prop, or map filtered groups using useComboboxFilteredItems.\n */\n\nexport type ComboboxCollectionProps = ComponentProps<\n\ttypeof ComboboxPrimitive.Collection\n>;\n\nfunction ComboboxCollection(props: ComboboxCollectionProps) {\n\treturn <ComboboxPrimitive.Collection {...props} />;\n}\n\n/**\n * Returns the combobox’s filtered items (flat list or grouped structure), matching\n * the current input query.\n */\nconst useComboboxFilteredItems = ComboboxPrimitive.useFilteredItems;\n\n/**\n * ComboboxList\n */\n\nexport type ComboboxListProps = ComponentProps<typeof ComboboxPrimitive.List>;\n\nfunction ComboboxList({ className, ref, ...props }: ComboboxListProps) {\n\treturn (\n\t\t<ComboboxPrimitive.List\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"w-full p-1 empty:hidden\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxEmpty\n */\n\nexport type ComboboxEmptyProps = ComponentProps<typeof ComboboxPrimitive.Empty>;\n\nfunction ComboboxEmpty({ className, ref, ...props }: ComboboxEmptyProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Empty\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"px-2 py-4 text-center text-sm text-text-muted empty:hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxItem\n */\n\nexport type ComboboxItemProps = ComponentProps<typeof ComboboxPrimitive.Item>;\n\nfunction ComboboxItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: ComboboxItemProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<ComboboxPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon size=\"small\">\n\t\t\t\t\t\t<CheckIcon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</ComboboxPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</ComboboxPrimitive.Item>\n\t);\n}\n\n/**\n * ComboboxGroup\n */\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\n/**\n * ComboboxGroupLabel\n */\n\nexport type ComboboxGroupLabelProps = ComponentProps<\n\ttypeof ComboboxPrimitive.GroupLabel\n>;\n\nfunction ComboboxGroupLabel({\n\tclassName,\n\tref,\n\t...props\n}: ComboboxGroupLabelProps) {\n\treturn (\n\t\t<ComboboxPrimitive.GroupLabel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"px-2 py-1.5 font-semibold text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * ComboboxSeparator\n */\n\nexport type ComboboxSeparatorProps = ComponentProps<\n\ttypeof ComboboxPrimitive.Separator\n>;\n\nfunction ComboboxSeparator({\n\tclassName,\n\tref,\n\t...props\n}: ComboboxSeparatorProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"my-2 h-px bg-separator\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tCombobox,\n\tComboboxClear,\n\tComboboxCollection,\n\tComboboxContent,\n\tComboboxEmpty,\n\tComboboxGroup,\n\tComboboxGroupLabel,\n\tComboboxInput,\n\tComboboxInputGroup,\n\tComboboxItem,\n\tComboboxList,\n\tComboboxSeparator,\n\tComboboxTrigger,\n\tuseComboboxFilteredItems,\n};\n"]}
@@ -7,10 +7,10 @@ const DialogTrigger = BaseDialog.Trigger;
7
7
  const DialogClose = BaseDialog.Close;
8
8
  const DialogPortal = BaseDialog.Portal;
9
9
  function DialogOverlay({ className, ref, ...props }) {
10
- return (_jsx(BaseDialog.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
10
+ return (_jsx(BaseDialog.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
11
11
  }
12
12
  function DialogContent({ children, className, ref, ...props }) {
13
- return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(BaseDialog.Popup, { className: cn("fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props, ref: ref, children: [_jsx(DialogClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] })] }));
13
+ return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(BaseDialog.Popup, { className: cn("fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-surface p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props, ref: ref, children: [_jsx(DialogClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] })] }));
14
14
  }
15
15
  function DialogHeader({ className, ref, ...props }) {
16
16
  return (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props }));
@@ -19,7 +19,7 @@ function DialogTitle({ className, ref, ...props }) {
19
19
  return (_jsx(BaseDialog.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props }));
20
20
  }
21
21
  function DialogDescription({ className, ref, ...props }) {
22
- return (_jsx(BaseDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props }));
22
+ return (_jsx(BaseDialog.Description, { ref: ref, className: cn("text-sm text-text-muted", className), ...props }));
23
23
  }
24
24
  function DialogFooter({ className, ref, ...props }) {
25
25
  return (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props }));
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.js","sourceRoot":"/","sources":["components/dialog/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAGtC,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;AAE/B,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;AAErC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC;AAIvC,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACN,KAAC,UAAU,CAAC,QAAQ,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,0HAA0H,EAC1H,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,aAAa,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACY;IACpB,OAAO,CACN,MAAC,YAAY,eACZ,KAAC,aAAa,KAAG,EACjB,MAAC,UAAU,CAAC,KAAK,IAChB,SAAS,EAAE,EAAE,CACZ,wQAAwQ,EACxQ,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAER,KAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,YAC9C,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,GAAG,GACrB,EACb,QAAQ,IACS,IACL,CACf,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IAClE,OAAO,CACN,KAAC,UAAU,CAAC,KAAK,IAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,iBAAiB,CAAC,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACgB;IACxB,OAAO,CACN,KAAC,UAAU,CAAC,WAAW,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,CAAC","sourcesContent":["import { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst Dialog = BaseDialog.Root;\n\nconst DialogTrigger = BaseDialog.Trigger;\n\nconst DialogClose = BaseDialog.Close;\n\nconst DialogPortal = BaseDialog.Portal;\n\nexport type DialogOverlayProps = ComponentProps<typeof BaseDialog.Backdrop>;\n\nfunction DialogOverlay({ className, ref, ...props }: DialogOverlayProps) {\n\treturn (\n\t\t<BaseDialog.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogContentProps = ComponentProps<typeof BaseDialog.Popup>;\n\nfunction DialogContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DialogContentProps) {\n\treturn (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<BaseDialog.Popup\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-white p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<DialogClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t</DialogClose>\n\t\t\t\t{children}\n\t\t\t</BaseDialog.Popup>\n\t\t</DialogPortal>\n\t);\n}\n\nexport type DialogHeaderProps = ComponentProps<\"div\">;\n\nfunction DialogHeader({ className, ref, ...props }: DialogHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;\n\nfunction DialogTitle({ className, ref, ...props }: DialogTitleProps) {\n\treturn (\n\t\t<BaseDialog.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogDescriptionProps = ComponentProps<\n\ttypeof BaseDialog.Description\n>;\n\nfunction DialogDescription({\n\tclassName,\n\tref,\n\t...props\n}: DialogDescriptionProps) {\n\treturn (\n\t\t<BaseDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogFooterProps = ComponentProps<\"div\">;\n\nfunction DialogFooter({ className, ref, ...props }: DialogFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"]}
1
+ {"version":3,"file":"dialog.js","sourceRoot":"/","sources":["components/dialog/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAGtC,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;AAE/B,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;AAErC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC;AAIvC,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAsB;IACtE,OAAO,CACN,KAAC,UAAU,CAAC,QAAQ,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,yHAAyH,EACzH,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,aAAa,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACY;IACpB,OAAO,CACN,MAAC,YAAY,eACZ,KAAC,aAAa,KAAG,EACjB,MAAC,UAAU,CAAC,KAAK,IAChB,SAAS,EAAE,EAAE,CACZ,0QAA0Q,EAC1Q,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAER,KAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,YAC9C,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,GAAG,GACrB,EACb,QAAQ,IACS,IACL,CACf,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IAClE,OAAO,CACN,KAAC,UAAU,CAAC,KAAK,IAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAMD,SAAS,iBAAiB,CAAC,EAC1B,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACgB;IACxB,OAAO,CACN,KAAC,UAAU,CAAC,WAAW,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAC/C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAqB;IACpE,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,CAAC","sourcesContent":["import { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst Dialog = BaseDialog.Root;\n\nconst DialogTrigger = BaseDialog.Trigger;\n\nconst DialogClose = BaseDialog.Close;\n\nconst DialogPortal = BaseDialog.Portal;\n\nexport type DialogOverlayProps = ComponentProps<typeof BaseDialog.Backdrop>;\n\nfunction DialogOverlay({ className, ref, ...props }: DialogOverlayProps) {\n\treturn (\n\t\t<BaseDialog.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogContentProps = ComponentProps<typeof BaseDialog.Popup>;\n\nfunction DialogContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DialogContentProps) {\n\treturn (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<BaseDialog.Popup\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg bg-surface p-4 transition-all duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<DialogClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t</DialogClose>\n\t\t\t\t{children}\n\t\t\t</BaseDialog.Popup>\n\t\t</DialogPortal>\n\t);\n}\n\nexport type DialogHeaderProps = ComponentProps<\"div\">;\n\nfunction DialogHeader({ className, ref, ...props }: DialogHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;\n\nfunction DialogTitle({ className, ref, ...props }: DialogTitleProps) {\n\treturn (\n\t\t<BaseDialog.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogDescriptionProps = ComponentProps<\n\ttypeof BaseDialog.Description\n>;\n\nfunction DialogDescription({\n\tclassName,\n\tref,\n\t...props\n}: DialogDescriptionProps) {\n\treturn (\n\t\t<BaseDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm text-text-muted\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DialogFooterProps = ComponentProps<\"div\">;\n\nfunction DialogFooter({ className, ref, ...props }: DialogFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"]}
@@ -15,10 +15,10 @@ function Drawer({ children, side = "right", ...props }) {
15
15
  const DrawerTrigger = BaseDrawer.Trigger;
16
16
  const DrawerClose = BaseDrawer.Close;
17
17
  function DrawerOverlay({ className, ref, ...props }) {
18
- return (_jsx(BaseDrawer.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
18
+ return (_jsx(BaseDrawer.Backdrop, { ref: ref, className: cn("fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", className), ...props }));
19
19
  }
20
20
  function DrawerContent({ children, className, ref, ...props }) {
21
- return (_jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerOverlay, {}), _jsx(BaseDrawer.Viewport, { children: _jsxs(BaseDrawer.Popup, { className: cn("fixed z-50 flex flex-col gap-4 bg-white p-4 transition-transform duration-300 data-swiping:duration-0", "data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg", "data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg", "data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg", "data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg", className), ref: ref, ...props, children: [_jsx(DrawerClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] }) })] }));
21
+ return (_jsxs(BaseDrawer.Portal, { children: [_jsx(DrawerOverlay, {}), _jsx(BaseDrawer.Viewport, { children: _jsxs(BaseDrawer.Popup, { className: cn("fixed z-50 flex flex-col gap-4 bg-surface p-4 transition-transform duration-300 data-swiping:duration-0", "data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg", "data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg", "data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg", "data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg", className), ref: ref, ...props, children: [_jsx(DrawerClose, { className: "absolute top-4 right-4", children: _jsx(Cross1Icon, { className: "h-4 w-4" }) }), children] }) })] }));
22
22
  }
23
23
  function DrawerHeader({ className, ref, ...props }) {
24
24
  return (_jsx("div", { ref: ref, className: cn("flex flex-col gap-1", className), ...props }));
@@ -27,7 +27,7 @@ function DrawerTitle({ className, ref, ...props }) {
27
27
  return (_jsx(BaseDrawer.Title, { ref: ref, className: cn("font-semibold text-lg", className), ...props }));
28
28
  }
29
29
  function DrawerDescription({ className, ref, ...props }) {
30
- return (_jsx(BaseDrawer.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props }));
30
+ return (_jsx(BaseDrawer.Description, { ref: ref, className: cn("text-sm text-text-muted", className), ...props }));
31
31
  }
32
32
  function DrawerFooter({ className, ref, ...props }) {
33
33
  return (_jsx("div", { ref: ref, className: cn("flex justify-end gap-2", className), ...props }));
@@ -1 +1 @@
1
- {"version":3,"file":"drawer.js","sourceRoot":"/","sources":["components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Drawer as BaseDrawer } from \"@base-ui/react/drawer\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst SIDE_TO_SWIPE_DIRECTION = {\n\tleft: \"left\",\n\tright: \"right\",\n\ttop: \"up\",\n\tbottom: \"down\",\n} as const;\n\ntype DrawerSide = keyof typeof SIDE_TO_SWIPE_DIRECTION;\n\nexport type DrawerProps = ComponentProps<typeof BaseDrawer.Root> & {\n\tside?: DrawerSide;\n};\n\nfunction Drawer({ children, side = \"right\", ...props }: DrawerProps) {\n\tconst swipeDirection = SIDE_TO_SWIPE_DIRECTION[side];\n\treturn (\n\t\t<BaseDrawer.Root swipeDirection={swipeDirection} {...props}>\n\t\t\t{children}\n\t\t</BaseDrawer.Root>\n\t);\n}\n\nconst DrawerTrigger = BaseDrawer.Trigger;\n\nconst DrawerClose = BaseDrawer.Close;\n\nexport type DrawerOverlayProps = ComponentProps<typeof BaseDrawer.Backdrop>;\n\nfunction DrawerOverlay({ className, ref, ...props }: DrawerOverlayProps) {\n\treturn (\n\t\t<BaseDrawer.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerContentProps = Omit<\n\tComponentProps<typeof BaseDrawer.Popup>,\n\t\"className\"\n> & {\n\tclassName?: string;\n};\n\nfunction DrawerContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DrawerContentProps) {\n\treturn (\n\t\t<BaseDrawer.Portal>\n\t\t\t<DrawerOverlay />\n\t\t\t<BaseDrawer.Viewport>\n\t\t\t\t<BaseDrawer.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"fixed z-50 flex flex-col gap-4 bg-white p-4 transition-transform duration-300 data-swiping:duration-0\",\n\t\t\t\t\t\t\"data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<DrawerClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t\t</DrawerClose>\n\t\t\t\t\t{children}\n\t\t\t\t</BaseDrawer.Popup>\n\t\t\t</BaseDrawer.Viewport>\n\t\t</BaseDrawer.Portal>\n\t);\n}\n\nexport type DrawerHeaderProps = ComponentProps<\"div\">;\n\nfunction DrawerHeader({ className, ref, ...props }: DrawerHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerTitleProps = ComponentProps<typeof BaseDrawer.Title>;\n\nfunction DrawerTitle({ className, ref, ...props }: DrawerTitleProps) {\n\treturn (\n\t\t<BaseDrawer.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerDescriptionProps = ComponentProps<\n\ttypeof BaseDrawer.Description\n>;\n\nfunction DrawerDescription({\n\tclassName,\n\tref,\n\t...props\n}: DrawerDescriptionProps) {\n\treturn (\n\t\t<BaseDrawer.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerFooterProps = ComponentProps<\"div\">;\n\nfunction DrawerFooter({ className, ref, ...props }: DrawerFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n};\n"]}
1
+ {"version":3,"file":"drawer.js","sourceRoot":"/","sources":["components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Drawer as BaseDrawer } from \"@base-ui/react/drawer\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst SIDE_TO_SWIPE_DIRECTION = {\n\tleft: \"left\",\n\tright: \"right\",\n\ttop: \"up\",\n\tbottom: \"down\",\n} as const;\n\ntype DrawerSide = keyof typeof SIDE_TO_SWIPE_DIRECTION;\n\nexport type DrawerProps = ComponentProps<typeof BaseDrawer.Root> & {\n\tside?: DrawerSide;\n};\n\nfunction Drawer({ children, side = \"right\", ...props }: DrawerProps) {\n\tconst swipeDirection = SIDE_TO_SWIPE_DIRECTION[side];\n\treturn (\n\t\t<BaseDrawer.Root swipeDirection={swipeDirection} {...props}>\n\t\t\t{children}\n\t\t</BaseDrawer.Root>\n\t);\n}\n\nconst DrawerTrigger = BaseDrawer.Trigger;\n\nconst DrawerClose = BaseDrawer.Close;\n\nexport type DrawerOverlayProps = ComponentProps<typeof BaseDrawer.Backdrop>;\n\nfunction DrawerOverlay({ className, ref, ...props }: DrawerOverlayProps) {\n\treturn (\n\t\t<BaseDrawer.Backdrop\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerContentProps = Omit<\n\tComponentProps<typeof BaseDrawer.Popup>,\n\t\"className\"\n> & {\n\tclassName?: string;\n};\n\nfunction DrawerContent({\n\tchildren,\n\tclassName,\n\tref,\n\t...props\n}: DrawerContentProps) {\n\treturn (\n\t\t<BaseDrawer.Portal>\n\t\t\t<DrawerOverlay />\n\t\t\t<BaseDrawer.Viewport>\n\t\t\t\t<BaseDrawer.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"fixed z-50 flex flex-col gap-4 bg-surface p-4 transition-transform duration-300 data-swiping:duration-0\",\n\t\t\t\t\t\t\"data-[swipe-direction=right]:data-ending-style:translate-x-full data-[swipe-direction=right]:data-starting-style:translate-x-full data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-screen data-[swipe-direction=right]:w-fit data-[swipe-direction=right]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=right]:rounded-l-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=left]:data-ending-style:-translate-x-full data-[swipe-direction=left]:data-starting-style:-translate-x-full data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-screen data-[swipe-direction=left]:w-fit data-[swipe-direction=left]:translate-x-(--drawer-swipe-movement-x,0px) data-[swipe-direction=left]:rounded-r-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=up]:data-ending-style:-translate-y-full data-[swipe-direction=up]:data-starting-style:-translate-y-full data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:h-fit data-[swipe-direction=up]:w-screen data-[swipe-direction=up]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=up]:rounded-b-lg\",\n\t\t\t\t\t\t\"data-[swipe-direction=down]:data-ending-style:translate-y-full data-[swipe-direction=down]:data-starting-style:translate-y-full data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:h-fit data-[swipe-direction=down]:w-screen data-[swipe-direction=down]:translate-y-(--drawer-swipe-movement-y,0px) data-[swipe-direction=down]:rounded-t-lg\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<DrawerClose className=\"absolute top-4 right-4\">\n\t\t\t\t\t\t<Cross1Icon className=\"h-4 w-4\" />\n\t\t\t\t\t</DrawerClose>\n\t\t\t\t\t{children}\n\t\t\t\t</BaseDrawer.Popup>\n\t\t\t</BaseDrawer.Viewport>\n\t\t</BaseDrawer.Portal>\n\t);\n}\n\nexport type DrawerHeaderProps = ComponentProps<\"div\">;\n\nfunction DrawerHeader({ className, ref, ...props }: DrawerHeaderProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-1\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerTitleProps = ComponentProps<typeof BaseDrawer.Title>;\n\nfunction DrawerTitle({ className, ref, ...props }: DrawerTitleProps) {\n\treturn (\n\t\t<BaseDrawer.Title\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"font-semibold text-lg\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerDescriptionProps = ComponentProps<\n\ttypeof BaseDrawer.Description\n>;\n\nfunction DrawerDescription({\n\tclassName,\n\tref,\n\t...props\n}: DrawerDescriptionProps) {\n\treturn (\n\t\t<BaseDrawer.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-sm text-text-muted\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DrawerFooterProps = ComponentProps<\"div\">;\n\nfunction DrawerFooter({ className, ref, ...props }: DrawerFooterProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex justify-end gap-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n};\n"]}
@@ -11,28 +11,28 @@ const DropdownMenuPortal = Menu.Portal;
11
11
  const DropdownMenuSub = Menu.SubmenuRoot;
12
12
  const DropdownMenuRadioGroup = Menu.RadioGroup;
13
13
  function DropdownMenuSubTrigger({ className, inset, children, ref, ...props }) {
14
- return (_jsxs(Menu.SubmenuTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-gray-200 data-popup-open:bg-gray-200 data-highlighted:text-gray-700 data-popup-open:text-gray-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
14
+ return (_jsxs(Menu.SubmenuTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-highlight data-popup-open:bg-highlight data-highlighted:text-on-highlight data-popup-open:text-on-highlight [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
15
15
  }
16
16
  function DropdownMenuSubContent({ className, ref, ...props }) {
17
- return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { children: _jsx(Menu.Popup, { ref: ref, className: cn("data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
17
+ return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { children: _jsx(Menu.Popup, { ref: ref, className: cn("data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
18
18
  }
19
19
  function DropdownMenuContent({ className, sideOffset = 4, ref, ...props }) {
20
- return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { sideOffset: sideOffset, children: _jsx(Menu.Popup, { ref: ref, className: cn("z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-md", "data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
20
+ return (_jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { sideOffset: sideOffset, children: _jsx(Menu.Popup, { ref: ref, className: cn("z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-md", "data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in", className), ...props }) }) }));
21
21
  }
22
22
  function DropdownMenuItem({ className, inset, ref, ...props }) {
23
- return (_jsx(Menu.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props }));
23
+ return (_jsx(Menu.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props }));
24
24
  }
25
25
  function DropdownMenuCheckboxItem({ className, children, checked, onCheckedChange, ref, ...props }) {
26
- return (_jsxs(Menu.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50", className), checked: checked, onCheckedChange: onCheckedChange, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.CheckboxItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] }));
26
+ return (_jsxs(Menu.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50", className), checked: checked, onCheckedChange: onCheckedChange, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.CheckboxItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] }));
27
27
  }
28
28
  function DropdownMenuRadioItem({ className, children, ref, ...props }) {
29
- return (_jsxs(Menu.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-900 data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.RadioItemIndicator, { children: _jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) }) }), children] }));
29
+ return (_jsxs(Menu.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Menu.RadioItemIndicator, { children: _jsx(CircleIcon, { className: "h-2 w-2 fill-current" }) }) }), children] }));
30
30
  }
31
31
  function DropdownMenuLabel({ className, inset, ref, ...props }) {
32
32
  return (_jsx(Menu.Group, { children: _jsx(Menu.GroupLabel, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", inset && "pl-8", className), ...props }) }));
33
33
  }
34
34
  function DropdownMenuSeparator({ className, ref, ...props }) {
35
- return (_jsx(Menu.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-gray-200", className), ...props }));
35
+ return (_jsx(Menu.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-separator", className), ...props }));
36
36
  }
37
37
  function DropdownMenuShortcut({ className, ...props }) {
38
38
  return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-menu.js","sourceRoot":"/","sources":["components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Menu } from \"@base-ui/react/menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst DropdownMenu = Menu.Root;\n\nexport type DropdownMenuTriggerProps = ComponentProps<typeof Menu.Trigger>;\n\nfunction DropdownMenuTrigger({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuTriggerProps) {\n\treturn <Menu.Trigger ref={ref} className={className} {...props} />;\n}\n\nconst DropdownMenuGroup = Menu.Group;\n\nconst DropdownMenuPortal = Menu.Portal;\n\nconst DropdownMenuSub = Menu.SubmenuRoot;\n\nconst DropdownMenuRadioGroup = Menu.RadioGroup;\n\nexport type DropdownMenuSubTriggerProps = ComponentProps<\n\ttypeof Menu.SubmenuTrigger\n> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuSubTriggerProps) {\n\treturn (\n\t\t<Menu.SubmenuTrigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-gray-200 data-popup-open:bg-gray-200 data-highlighted:text-gray-700 data-popup-open:text-gray-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRightIcon className=\"ml-auto\" />\n\t\t</Menu.SubmenuTrigger>\n\t);\n}\n\nexport type DropdownMenuSubContentProps = ComponentProps<typeof Menu.Popup>;\n\nfunction DropdownMenuSubContent({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSubContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof Menu.Popup> & {\n\tsideOffset?: number;\n};\n\nfunction DropdownMenuContent({\n\tclassName,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: DropdownMenuContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner sideOffset={sideOffset}>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-gray-200 bg-gray-50 p-1 text-gray-700 shadow-md\",\n\t\t\t\t\t\t\"data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuItemProps = ComponentProps<typeof Menu.Item> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuItem({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuItemProps) {\n\treturn (\n\t\t<Menu.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DropdownMenuCheckboxItemProps = ComponentProps<\n\ttypeof Menu.CheckboxItem\n>;\n\nfunction DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\tonCheckedChange,\n\tref,\n\t...props\n}: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<Menu.CheckboxItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-700 data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\tonCheckedChange={onCheckedChange}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon className=\"h-4 w-4\" />\n\t\t\t\t</Menu.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.CheckboxItem>\n\t);\n}\n\nexport type DropdownMenuRadioItemProps = ComponentProps<typeof Menu.RadioItem>;\n\nfunction DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuRadioItemProps) {\n\treturn (\n\t\t<Menu.RadioItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-gray-200 data-highlighted:text-gray-900 data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.RadioItemIndicator>\n\t\t\t\t\t<CircleIcon className=\"h-2 w-2 fill-current\" />\n\t\t\t\t</Menu.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.RadioItem>\n\t);\n}\n\nexport type DropdownMenuLabelProps = ComponentProps<typeof Menu.GroupLabel> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuLabelProps) {\n\treturn (\n\t\t<Menu.Group>\n\t\t\t<Menu.GroupLabel\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"px-2 py-1.5 font-semibold text-sm\",\n\t\t\t\t\tinset && \"pl-8\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</Menu.Group>\n\t);\n}\n\nexport type DropdownMenuSeparatorProps = ComponentProps<typeof Menu.Separator>;\n\nfunction DropdownMenuSeparator({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSeparatorProps) {\n\treturn (\n\t\t<Menu.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"-mx-1 my-1 h-px bg-gray-200\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuShortcut({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n};\n"]}
1
+ {"version":3,"file":"dropdown-menu.js","sourceRoot":"/","sources":["components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Menu } from \"@base-ui/react/menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nconst DropdownMenu = Menu.Root;\n\nexport type DropdownMenuTriggerProps = ComponentProps<typeof Menu.Trigger>;\n\nfunction DropdownMenuTrigger({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuTriggerProps) {\n\treturn <Menu.Trigger ref={ref} className={className} {...props} />;\n}\n\nconst DropdownMenuGroup = Menu.Group;\n\nconst DropdownMenuPortal = Menu.Portal;\n\nconst DropdownMenuSub = Menu.SubmenuRoot;\n\nconst DropdownMenuRadioGroup = Menu.RadioGroup;\n\nexport type DropdownMenuSubTriggerProps = ComponentProps<\n\ttypeof Menu.SubmenuTrigger\n> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuSubTriggerProps) {\n\treturn (\n\t\t<Menu.SubmenuTrigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-highlight data-popup-open:bg-highlight data-highlighted:text-on-highlight data-popup-open:text-on-highlight [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRightIcon className=\"ml-auto\" />\n\t\t</Menu.SubmenuTrigger>\n\t);\n}\n\nexport type DropdownMenuSubContentProps = ComponentProps<typeof Menu.Popup>;\n\nfunction DropdownMenuSubContent({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSubContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-[--transform-origin] overflow-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-lg data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof Menu.Popup> & {\n\tsideOffset?: number;\n};\n\nfunction DropdownMenuContent({\n\tclassName,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: DropdownMenuContentProps) {\n\treturn (\n\t\t<Menu.Portal>\n\t\t\t<Menu.Positioner sideOffset={sideOffset}>\n\t\t\t\t<Menu.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"z-50 max-h-(--available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-border bg-surface-subtle p-1 text-text-secondary shadow-md\",\n\t\t\t\t\t\t\"data-[ending-style]:zoom-out-95 data-[starting-style]:zoom-out-95 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--transform-origin] data-ending-style:animate-fade-out data-starting-style:animate-fade-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</Menu.Positioner>\n\t\t</Menu.Portal>\n\t);\n}\n\nexport type DropdownMenuItemProps = ComponentProps<typeof Menu.Item> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuItem({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuItemProps) {\n\treturn (\n\t\t<Menu.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type DropdownMenuCheckboxItemProps = ComponentProps<\n\ttypeof Menu.CheckboxItem\n>;\n\nfunction DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\tonCheckedChange,\n\tref,\n\t...props\n}: DropdownMenuCheckboxItemProps) {\n\treturn (\n\t\t<Menu.CheckboxItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\tonCheckedChange={onCheckedChange}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon className=\"h-4 w-4\" />\n\t\t\t\t</Menu.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.CheckboxItem>\n\t);\n}\n\nexport type DropdownMenuRadioItemProps = ComponentProps<typeof Menu.RadioItem>;\n\nfunction DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: DropdownMenuRadioItemProps) {\n\treturn (\n\t\t<Menu.RadioItem\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-on-highlight data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Menu.RadioItemIndicator>\n\t\t\t\t\t<CircleIcon className=\"h-2 w-2 fill-current\" />\n\t\t\t\t</Menu.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</Menu.RadioItem>\n\t);\n}\n\nexport type DropdownMenuLabelProps = ComponentProps<typeof Menu.GroupLabel> & {\n\tinset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n\tclassName,\n\tinset,\n\tref,\n\t...props\n}: DropdownMenuLabelProps) {\n\treturn (\n\t\t<Menu.Group>\n\t\t\t<Menu.GroupLabel\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"px-2 py-1.5 font-semibold text-sm\",\n\t\t\t\t\tinset && \"pl-8\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</Menu.Group>\n\t);\n}\n\nexport type DropdownMenuSeparatorProps = ComponentProps<typeof Menu.Separator>;\n\nfunction DropdownMenuSeparator({\n\tclassName,\n\tref,\n\t...props\n}: DropdownMenuSeparatorProps) {\n\treturn (\n\t\t<Menu.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"-mx-1 my-1 h-px bg-separator\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DropdownMenuShortcut({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuPortal,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuTrigger,\n};\n"]}
@@ -2,20 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useFormContext } from "../form-field/form-field-context";
3
3
  import { getVariants } from "../../utilities/responsive/responsive";
4
4
  const formHelperStyles = getVariants({
5
- base: "text-gray-500 text-sm",
5
+ base: "text-sm text-text-muted",
6
6
  variants: {
7
7
  error: {
8
- true: "text-red-600",
8
+ true: "text-error",
9
9
  },
10
10
  disabled: {
11
- true: "text-gray-300",
11
+ true: "text-text-disabled",
12
12
  },
13
13
  },
14
14
  compoundVariants: [
15
15
  {
16
16
  error: true,
17
17
  disabled: true,
18
- className: "text-gray-300",
18
+ className: "text-text-disabled",
19
19
  },
20
20
  ],
21
21
  });
@@ -1 +1 @@
1
- {"version":3,"file":"form-helper.js","sourceRoot":"/","sources":["components/form-helper/form-helper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAS/D,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,cAAc;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,eAAe;SACrB;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,eAAe;SAC1B;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,EACH,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC1C,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC3D,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,KAC5B,KAAK,YAER,QAAQ,GACJ,CACN,CAAC;AACH,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type FormHelperProps = ComponentProps<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\n\tref?: Ref<HTMLDivElement>;\n};\n\nconst formHelperStyles = getVariants({\n\tbase: \"text-gray-500 text-sm\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"text-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"text-gray-300\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName: \"text-gray-300\",\n\t\t},\n\t],\n});\n\n/**\n * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.\n *\n * @example\n * ```tsx\n * <FormField>\n * <Label>Email</Label>\n * <Input />\n * <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport function FormHelper({\n\tclassName,\n\tchildren,\n\terror: initialError,\n\tdisabled: initialDisabled,\n\tref,\n\t...props\n}: FormHelperProps) {\n\tconst { error, disabled } = useFormContext({\n\t\terror: initialError,\n\t\tdisabled: initialDisabled,\n\t});\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"file":"form-helper.js","sourceRoot":"/","sources":["components/form-helper/form-helper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAS/D,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,YAAY;SAClB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,oBAAoB;SAC1B;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,oBAAoB;SAC/B;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,eAAe,EACzB,GAAG,EACH,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC1C,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC3D,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,KAC5B,KAAK,YAER,QAAQ,GACJ,CACN,CAAC;AACH,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type FormHelperProps = ComponentProps<\"div\"> & {\n\terror?: boolean;\n\tdisabled?: boolean;\n\tref?: Ref<HTMLDivElement>;\n};\n\nconst formHelperStyles = getVariants({\n\tbase: \"text-sm text-text-muted\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"text-error\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"text-text-disabled\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName: \"text-text-disabled\",\n\t\t},\n\t],\n});\n\n/**\n * A component that displays a helper text for a form field. Should be used as a child of a FormField component and will inherit the form field's error and disabled state.\n *\n * @example\n * ```tsx\n * <FormField>\n * <Label>Email</Label>\n * <Input />\n * <FormHelper>This is a helper text</FormHelper>\n * </FormField>\n * ```\n */\nexport function FormHelper({\n\tclassName,\n\tchildren,\n\terror: initialError,\n\tdisabled: initialDisabled,\n\tref,\n\t...props\n}: FormHelperProps) {\n\tconst { error, disabled } = useFormContext({\n\t\terror: initialError,\n\t\tdisabled: initialDisabled,\n\t});\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={formHelperStyles({ error, disabled, className })}\n\t\t\trole={error ? \"alert\" : \"status\"}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}
@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useFormContext } from "../form-field/form-field-context";
3
3
  import { getVariants } from "../../utilities/responsive/responsive";
4
4
  const inputStyles = getVariants({
5
- base: "rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800",
5
+ base: "rounded-sm border border-border-input px-3 py-2 text-sm placeholder:text-text-placeholder focus-visible:outline focus-visible:outline-primary-hover",
6
6
  variants: {
7
7
  error: {
8
- true: "border-red-600",
8
+ true: "border-error",
9
9
  },
10
10
  disabled: {
11
11
  true: "disabled:cursor-not-allowed disabled:opacity-50",
@@ -15,7 +15,7 @@ const inputStyles = getVariants({
15
15
  {
16
16
  error: true,
17
17
  disabled: true,
18
- className: "border-gray-400 disabled:cursor-not-allowed disabled:opacity-50",
18
+ className: "border-border-input disabled:cursor-not-allowed disabled:opacity-50",
19
19
  },
20
20
  ],
21
21
  });
@@ -1 +1 @@
1
- {"version":3,"file":"input.js","sourceRoot":"/","sources":["components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAQ/D,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,oIAAoI;IAC1I,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,gBAAgB;SACtB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,iDAAiD;SACvD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EACR,iEAAiE;SAClE;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QACpD,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,gBACC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,KAAK,KACf,KAAK,EACT,GAAG,EAAE,GAAG,GACP,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type InputProps = ComponentProps<\"input\"> & {\n\terror?: boolean;\n\tref?: Ref<HTMLInputElement>;\n};\n\nconst inputStyles = getVariants({\n\tbase: \"rounded-sm border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline focus-visible:outline-gray-800\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"border-red-600\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName:\n\t\t\t\t\"border-gray-400 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t],\n});\n\n/**\n * A basic input component with styling.\n *\n * @example\n * ```tsx\n * <Input placeholder=\"Enter your email\" id=\"email\" />\n * ```\n */\nfunction Input({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\terror: initialError,\n\tref,\n\t...props\n}: InputProps) {\n\tconst { disabled, required, error } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t\terror: initialError,\n\t});\n\treturn (\n\t\t<input\n\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\taria-invalid={error}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n}\n\nexport { Input };\n"]}
1
+ {"version":3,"file":"input.js","sourceRoot":"/","sources":["components/input/input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAQ/D,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,qJAAqJ;IAC3J,QAAQ,EAAE;QACT,KAAK,EAAE;YACN,IAAI,EAAE,cAAc;SACpB;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,iDAAiD;SACvD;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,SAAS,EACR,qEAAqE;SACtE;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,KAAK,EAAE,YAAY,EACnB,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QACpD,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,gBACC,SAAS,EAAE,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,KAAK,KACf,KAAK,EACT,GAAG,EAAE,GAAG,GACP,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps, Ref } from \"react\";\n\nexport type InputProps = ComponentProps<\"input\"> & {\n\terror?: boolean;\n\tref?: Ref<HTMLInputElement>;\n};\n\nconst inputStyles = getVariants({\n\tbase: \"rounded-sm border border-border-input px-3 py-2 text-sm placeholder:text-text-placeholder focus-visible:outline focus-visible:outline-primary-hover\",\n\tvariants: {\n\t\terror: {\n\t\t\ttrue: \"border-error\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\terror: true,\n\t\t\tdisabled: true,\n\t\t\tclassName:\n\t\t\t\t\"border-border-input disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t},\n\t],\n});\n\n/**\n * A basic input component with styling.\n *\n * @example\n * ```tsx\n * <Input placeholder=\"Enter your email\" id=\"email\" />\n * ```\n */\nfunction Input({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\terror: initialError,\n\tref,\n\t...props\n}: InputProps) {\n\tconst { disabled, required, error } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t\terror: initialError,\n\t});\n\treturn (\n\t\t<input\n\t\t\tclassName={inputStyles({ disabled, error, className })}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\taria-invalid={error}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n}\n\nexport { Input };\n"]}
@@ -16,7 +16,7 @@ function Label({ className, required: initialRequired, children, ref, ...props }
16
16
  });
17
17
  return (
18
18
  // biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime
19
- _jsxs("label", { className: cn("font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props, ref: ref, children: [children, required && _jsx("span", { children: "*" })] }));
19
+ _jsxs("label", { className: cn("font-medium text-md text-text peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props, ref: ref, children: [children, required && _jsx("span", { children: "*" })] }));
20
20
  }
21
21
  export { Label };
22
22
  //# sourceMappingURL=label.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"label.js","sourceRoot":"/","sources":["components/label/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO;IACN,uFAAuF;IACvF,iBACC,SAAS,EAAE,EAAE,CACZ,6FAA6F,EAC7F,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,EACR,QAAQ,IAAI,+BAAc,IACpB,CACR,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type LabelProps = ComponentProps<\"label\"> & {\n\trequired?: boolean;\n};\n\n/**\n * A label component that can be used to label form fields.\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" />\n * ```\n */\nfunction Label({\n\tclassName,\n\trequired: initialRequired,\n\tchildren,\n\tref,\n\t...props\n}: LabelProps) {\n\tconst { required } = useFormContext({\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime\n\t\t<label\n\t\t\tclassName={cn(\n\t\t\t\t\"font-medium text-gray-900 text-md peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t\t{required && <span>*</span>}\n\t\t</label>\n\t);\n}\n\nexport { Label };\n"]}
1
+ {"version":3,"file":"label.js","sourceRoot":"/","sources":["components/label/label.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC,EACd,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACI;IACZ,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO;IACN,uFAAuF;IACvF,iBACC,SAAS,EAAE,EAAE,CACZ,yFAAyF,EACzF,SAAS,CACT,KACG,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,QAAQ,EACR,QAAQ,IAAI,+BAAc,IACpB,CACR,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type LabelProps = ComponentProps<\"label\"> & {\n\trequired?: boolean;\n};\n\n/**\n * A label component that can be used to label form fields.\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"email\">Email</Label>\n * <Input id=\"email\" />\n * ```\n */\nfunction Label({\n\tclassName,\n\trequired: initialRequired,\n\tchildren,\n\tref,\n\t...props\n}: LabelProps) {\n\tconst { required } = useFormContext({\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is passed via props at runtime\n\t\t<label\n\t\t\tclassName={cn(\n\t\t\t\t\"font-medium text-md text-text peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t\t{required && <span>*</span>}\n\t\t</label>\n\t);\n}\n\nexport { Label };\n"]}
@@ -111,8 +111,8 @@ function PaginationItem({ index, children, className, ref, ...props }) {
111
111
  setPage(index);
112
112
  }
113
113
  };
114
- return (_jsx("button", { type: "button", onClick: handleClick, ref: mergeRefs(ref, (el) => registerRef(index ?? 0, el)), className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200", {
115
- "bg-gray-700 text-white hover:bg-gray-800": isActive,
114
+ return (_jsx("button", { type: "button", onClick: handleClick, ref: mergeRefs(ref, (el) => registerRef(index ?? 0, el)), className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-border", {
115
+ "bg-primary text-on-primary hover:bg-primary-hover": isActive,
116
116
  }, className), "aria-current": isActive ? "page" : undefined, ...props, children: children ?? index }));
117
117
  }
118
118
  /**
@@ -126,7 +126,7 @@ function PaginationItem({ index, children, className, ref, ...props }) {
126
126
  */
127
127
  function PaginationPrev({ children, className, ref, ...props }) {
128
128
  const { registerRef, page, setPage, hasPreviousPage } = usePaginationContext();
129
- return (_jsx("button", { type: "button", onClick: () => setPage(page - 1), ref: mergeRefs(ref, (el) => registerRef(0, el)), disabled: !hasPreviousPage, className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25", className), ...props, children: children }));
129
+ return (_jsx("button", { type: "button", onClick: () => setPage(page - 1), ref: mergeRefs(ref, (el) => registerRef(0, el)), disabled: !hasPreviousPage, className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-border disabled:opacity-25", className), ...props, children: children }));
130
130
  }
131
131
  /**
132
132
  * Next page button component for the Pagination.
@@ -139,7 +139,7 @@ function PaginationPrev({ children, className, ref, ...props }) {
139
139
  */
140
140
  function PaginationNext({ children, className, ref, ...props }) {
141
141
  const { page, setPage, hasNextPage, registerRef, totalPages } = usePaginationContext();
142
- return (_jsx("button", { type: "button", className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-gray-200 disabled:opacity-25", className), onClick: () => setPage(page + 1), disabled: !hasNextPage, ref: mergeRefs(ref, (el) => registerRef(totalPages + 1, el)), ...props, children: children }));
142
+ return (_jsx("button", { type: "button", className: cn("flex h-10 w-10 items-center justify-center rounded-full hover:bg-border disabled:opacity-25", className), onClick: () => setPage(page + 1), disabled: !hasNextPage, ref: mergeRefs(ref, (el) => registerRef(totalPages + 1, el)), ...props, children: children }));
143
143
  }
144
144
  export { Pagination, PaginationItem, PaginationNext, PaginationPrev };
145
145
  //# sourceMappingURL=pagination.js.map