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.
- package/dist/components/accordion/accordion.js +2 -2
- package/dist/components/accordion/accordion.js.map +1 -1
- package/dist/components/alert/alert.js +3 -3
- package/dist/components/alert/alert.js.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.js +3 -3
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/autocomplete/autocomplete.d.ts +83 -0
- package/dist/components/autocomplete/autocomplete.js +58 -0
- package/dist/components/autocomplete/autocomplete.js.map +1 -0
- package/dist/components/avatar/avatar-group.js +1 -1
- package/dist/components/avatar/avatar-group.js.map +1 -1
- package/dist/components/avatar/avatar.js +2 -2
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/badge/badge.js +4 -4
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/button/button.js +3 -3
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/card/card.js +3 -3
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +2 -2
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/combobox/combobox.d.ts +82 -0
- package/dist/components/combobox/combobox.js +57 -0
- package/dist/components/combobox/combobox.js.map +1 -0
- package/dist/components/dialog/dialog.js +3 -3
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +3 -3
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +7 -7
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/form-helper/form-helper.js +4 -4
- package/dist/components/form-helper/form-helper.js.map +1 -1
- package/dist/components/input/input.js +3 -3
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/label/label.js +1 -1
- package/dist/components/label/label.js.map +1 -1
- package/dist/components/pagination/pagination.js +4 -4
- package/dist/components/pagination/pagination.js.map +1 -1
- package/dist/components/popover/popover.js +1 -1
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/progress/progress.js +1 -1
- package/dist/components/progress/progress.js.map +1 -1
- package/dist/components/radio-group/radio-group.js +1 -1
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/select/select.js +4 -4
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/skeleton/skeleton.js +1 -1
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/slider/slider.js +2 -2
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/switch/switch.js +5 -5
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table.js +4 -4
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/tabs.js +3 -3
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/text-area/text-area.js +3 -3
- package/dist/components/text-area/text-area.js.map +1 -1
- package/dist/components/toast/toast.js +1 -1
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/tooltip/tooltip.js +1 -1
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +43 -0
- package/dist/utilities/pagination/get-truncated-elements.js +4 -4
- package/dist/utilities/pagination/get-truncated-elements.js.map +1 -1
- 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-
|
|
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-
|
|
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-
|
|
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,
|
|
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-
|
|
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-
|
|
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-
|
|
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":";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,uBAAuB,GAAG;IAC/B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,MAAM;CACL,CAAC;AAQX,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,KAAK,EAAe;IAClE,MAAM,cAAc,GAAG,uBAAuB,CAAC,IAAI,CAAC,CAAC;IACrD,OAAO,CACN,KAAC,UAAU,CAAC,IAAI,IAAC,cAAc,EAAE,cAAc,KAAM,KAAK,YACxD,QAAQ,GACQ,CAClB,CAAC;AACH,CAAC;AAED,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC;AAIrC,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,
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
5
|
+
base: "text-sm text-text-muted",
|
|
6
6
|
variants: {
|
|
7
7
|
error: {
|
|
8
|
-
true: "text-
|
|
8
|
+
true: "text-error",
|
|
9
9
|
},
|
|
10
10
|
disabled: {
|
|
11
|
-
true: "text-
|
|
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-
|
|
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,
|
|
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-
|
|
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-
|
|
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-
|
|
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,
|
|
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-
|
|
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,
|
|
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-
|
|
115
|
-
"bg-
|
|
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-
|
|
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-
|
|
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
|