luan-ui 0.8.2 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -0
- package/dist/components/autocomplete/autocomplete.js +2 -2
- package/dist/components/autocomplete/autocomplete.js.map +1 -1
- package/dist/components/combobox/combobox.js +2 -2
- package/dist/components/combobox/combobox.js.map +1 -1
- package/dist/components/input/input.js +1 -1
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/select/select.js +1 -1
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/slider/slider.d.ts +7 -1
- package/dist/components/slider/slider.js +8 -4
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/text-area/text-area.js +1 -1
- 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/styles/index.css +137 -27
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,6 +29,37 @@ In your project, you have to import the custom config to enable animations and c
|
|
|
29
29
|
|
|
30
30
|
Now you should be able to use the components in your project.
|
|
31
31
|
|
|
32
|
+
## Theming
|
|
33
|
+
|
|
34
|
+
Luan UI ships with two built-in themes that are activated via a `data-theme` attribute:
|
|
35
|
+
|
|
36
|
+
- `data-theme="luan-light"`
|
|
37
|
+
- `data-theme="luan-dark"`
|
|
38
|
+
|
|
39
|
+
The library styles expose semantic tokens for surfaces, borders, text, and interactive states. Both themes also define a base background and foreground color, so applying the theme attribute to a top-level container gives you a matching page background and default text color as well.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
export function App() {
|
|
43
|
+
return (
|
|
44
|
+
<div data-theme="luan-dark">
|
|
45
|
+
<Button>Dark theme button</Button>
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
If you want the whole application to follow one theme, apply the attribute at the document level:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<html data-theme="luan-light">
|
|
55
|
+
<body>
|
|
56
|
+
<div id="root"></div>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
This is especially recommended for components that render in a portal, such as dialogs, popovers, selects, comboboxes, and other overlays, since they inherit the theme from the document instead of a local wrapper.
|
|
62
|
+
|
|
32
63
|
## Requirements
|
|
33
64
|
|
|
34
65
|
This library requires **React 19** or higher due to its use of the ref-as-prop pattern.
|
|
@@ -13,10 +13,10 @@ function Autocomplete(props) {
|
|
|
13
13
|
return _jsx(Root, { ...props, disabled: disabled, required: required });
|
|
14
14
|
}
|
|
15
15
|
function AutocompleteInputGroup({ className, ref, ...props }) {
|
|
16
|
-
return (_jsx(AutocompletePrimitive.InputGroup, { ref: ref, className: cn("flex h-9 w-full items-center rounded-md border border-border-input bg-
|
|
16
|
+
return (_jsx(AutocompletePrimitive.InputGroup, { ref: ref, className: cn("flex h-9 w-full items-center rounded-md border border-border-input bg-surface text-sm text-text 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 }));
|
|
17
17
|
}
|
|
18
18
|
function AutocompleteInput({ className, ref, ...props }) {
|
|
19
|
-
return (_jsx(AutocompletePrimitive.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
|
+
return (_jsx(AutocompletePrimitive.Input, { ref: ref, className: cn("h-full w-full flex-1 bg-transparent px-3 py-2 text-sm text-text outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed", className), ...props }));
|
|
20
20
|
}
|
|
21
21
|
function AutocompleteTrigger({ className, ref, ...props }) {
|
|
22
22
|
return (_jsx(AutocompletePrimitive.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, {}) }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","sourceRoot":"/","sources":["components/autocomplete/autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport { ChevronDownIcon, Cross2Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type React from \"react\";\nimport type { ComponentProps, JSX } from \"react\";\n\n/**\n * Autocomplete\n *\n * An input that suggests options as you type.\n * Unlike Combobox, the input value can contain free-form text,\n * as suggestions only optionally autocomplete the text.\n */\n\nexport type AutocompleteProps<ItemValue = unknown> =\n\tAutocompletePrimitive.Root.Props<ItemValue>;\n\nfunction Autocomplete<ItemValue>(\n\tprops: AutocompleteProps<ItemValue>,\n): JSX.Element {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: props.disabled,\n\t\trequired: props.required,\n\t});\n\tconst Root = AutocompletePrimitive.Root as React.FC<\n\t\tAutocompleteProps<ItemValue>\n\t>;\n\treturn <Root {...props} disabled={disabled} required={required} />;\n}\n\n/**\n * AutocompleteInputGroup\n */\n\nexport type AutocompleteInputGroupProps = ComponentProps<\n\ttypeof AutocompletePrimitive.InputGroup\n>;\n\nfunction AutocompleteInputGroup({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteInputGroupProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteInput\n */\n\nexport type AutocompleteInputProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Input\n>;\n\nfunction AutocompleteInput({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteInputProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteTrigger\n */\n\nexport type AutocompleteTriggerProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Trigger\n>;\n\nfunction AutocompleteTrigger({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteTriggerProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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</AutocompletePrimitive.Trigger>\n\t);\n}\n\n/**\n * AutocompleteClear\n */\n\nexport type AutocompleteClearProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Clear\n>;\n\nfunction AutocompleteClear({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteClearProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Clear\n\t\t\tref={ref}\n\t\t\taria-label=\"Clear value\"\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</AutocompletePrimitive.Clear>\n\t);\n}\n\n/**\n * AutocompleteContent\n */\n\nexport type AutocompleteContentProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Popup\n> & {\n\tsideOffset?: number;\n};\n\nfunction AutocompleteContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: AutocompleteContentProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Portal>\n\t\t\t<AutocompletePrimitive.Positioner sideOffset={sideOffset}>\n\t\t\t\t<AutocompletePrimitive.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</AutocompletePrimitive.Popup>\n\t\t\t</AutocompletePrimitive.Positioner>\n\t\t</AutocompletePrimitive.Portal>\n\t);\n}\n\n/**\n * AutocompleteCollection\n *\n * Renders items from autocomplete context after filtering. Pass a function child\n * that receives each visible item. For grouped lists, place inside AutocompleteGroup\n * with an `items` prop, or map filtered groups using useAutocompleteFilteredItems.\n */\n\nexport type AutocompleteCollectionProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Collection\n>;\n\nfunction AutocompleteCollection(props: AutocompleteCollectionProps) {\n\treturn <AutocompletePrimitive.Collection {...props} />;\n}\n\n/**\n * Returns the autocomplete’s filtered items (flat list or grouped structure), matching\n * the current input value.\n */\nconst useAutocompleteFilteredItems = AutocompletePrimitive.useFilteredItems;\n\n/**\n * AutocompleteList\n */\n\nexport type AutocompleteListProps = ComponentProps<\n\ttypeof AutocompletePrimitive.List\n>;\n\nfunction AutocompleteList({ className, ref, ...props }: AutocompleteListProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteEmpty\n */\n\nexport type AutocompleteEmptyProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Empty\n>;\n\nfunction AutocompleteEmpty({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteEmptyProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteItem\n */\n\nexport type AutocompleteItemProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Item\n>;\n\nfunction AutocompleteItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AutocompleteItemProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 px-2 py-1.5 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{children}\n\t\t</AutocompletePrimitive.Item>\n\t);\n}\n\n/**\n * AutocompleteGroup\n */\n\nconst AutocompleteGroup = AutocompletePrimitive.Group;\n\n/**\n * AutocompleteGroupLabel\n */\n\nexport type AutocompleteGroupLabelProps = ComponentProps<\n\ttypeof AutocompletePrimitive.GroupLabel\n>;\n\nfunction AutocompleteGroupLabel({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteGroupLabelProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteSeparator\n */\n\nexport type AutocompleteSeparatorProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Separator\n>;\n\nfunction AutocompleteSeparator({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteSeparatorProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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\tAutocomplete,\n\tAutocompleteClear,\n\tAutocompleteCollection,\n\tAutocompleteContent,\n\tAutocompleteEmpty,\n\tAutocompleteGroup,\n\tAutocompleteGroupLabel,\n\tAutocompleteInput,\n\tAutocompleteInputGroup,\n\tAutocompleteItem,\n\tAutocompleteList,\n\tAutocompleteSeparator,\n\tAutocompleteTrigger,\n\tuseAutocompleteFilteredItems,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"autocomplete.js","sourceRoot":"/","sources":["components/autocomplete/autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport { ChevronDownIcon, Cross2Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type React from \"react\";\nimport type { ComponentProps, JSX } from \"react\";\n\n/**\n * Autocomplete\n *\n * An input that suggests options as you type.\n * Unlike Combobox, the input value can contain free-form text,\n * as suggestions only optionally autocomplete the text.\n */\n\nexport type AutocompleteProps<ItemValue = unknown> =\n\tAutocompletePrimitive.Root.Props<ItemValue>;\n\nfunction Autocomplete<ItemValue>(\n\tprops: AutocompleteProps<ItemValue>,\n): JSX.Element {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: props.disabled,\n\t\trequired: props.required,\n\t});\n\tconst Root = AutocompletePrimitive.Root as React.FC<\n\t\tAutocompleteProps<ItemValue>\n\t>;\n\treturn <Root {...props} disabled={disabled} required={required} />;\n}\n\n/**\n * AutocompleteInputGroup\n */\n\nexport type AutocompleteInputGroupProps = ComponentProps<\n\ttypeof AutocompletePrimitive.InputGroup\n>;\n\nfunction AutocompleteInputGroup({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteInputGroupProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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-surface text-sm text-text 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 * AutocompleteInput\n */\n\nexport type AutocompleteInputProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Input\n>;\n\nfunction AutocompleteInput({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteInputProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 text-text 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 * AutocompleteTrigger\n */\n\nexport type AutocompleteTriggerProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Trigger\n>;\n\nfunction AutocompleteTrigger({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteTriggerProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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</AutocompletePrimitive.Trigger>\n\t);\n}\n\n/**\n * AutocompleteClear\n */\n\nexport type AutocompleteClearProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Clear\n>;\n\nfunction AutocompleteClear({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteClearProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Clear\n\t\t\tref={ref}\n\t\t\taria-label=\"Clear value\"\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</AutocompletePrimitive.Clear>\n\t);\n}\n\n/**\n * AutocompleteContent\n */\n\nexport type AutocompleteContentProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Popup\n> & {\n\tsideOffset?: number;\n};\n\nfunction AutocompleteContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: AutocompleteContentProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Portal>\n\t\t\t<AutocompletePrimitive.Positioner sideOffset={sideOffset}>\n\t\t\t\t<AutocompletePrimitive.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</AutocompletePrimitive.Popup>\n\t\t\t</AutocompletePrimitive.Positioner>\n\t\t</AutocompletePrimitive.Portal>\n\t);\n}\n\n/**\n * AutocompleteCollection\n *\n * Renders items from autocomplete context after filtering. Pass a function child\n * that receives each visible item. For grouped lists, place inside AutocompleteGroup\n * with an `items` prop, or map filtered groups using useAutocompleteFilteredItems.\n */\n\nexport type AutocompleteCollectionProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Collection\n>;\n\nfunction AutocompleteCollection(props: AutocompleteCollectionProps) {\n\treturn <AutocompletePrimitive.Collection {...props} />;\n}\n\n/**\n * Returns the autocomplete’s filtered items (flat list or grouped structure), matching\n * the current input value.\n */\nconst useAutocompleteFilteredItems = AutocompletePrimitive.useFilteredItems;\n\n/**\n * AutocompleteList\n */\n\nexport type AutocompleteListProps = ComponentProps<\n\ttypeof AutocompletePrimitive.List\n>;\n\nfunction AutocompleteList({ className, ref, ...props }: AutocompleteListProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteEmpty\n */\n\nexport type AutocompleteEmptyProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Empty\n>;\n\nfunction AutocompleteEmpty({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteEmptyProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteItem\n */\n\nexport type AutocompleteItemProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Item\n>;\n\nfunction AutocompleteItem({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: AutocompleteItemProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 px-2 py-1.5 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{children}\n\t\t</AutocompletePrimitive.Item>\n\t);\n}\n\n/**\n * AutocompleteGroup\n */\n\nconst AutocompleteGroup = AutocompletePrimitive.Group;\n\n/**\n * AutocompleteGroupLabel\n */\n\nexport type AutocompleteGroupLabelProps = ComponentProps<\n\ttypeof AutocompletePrimitive.GroupLabel\n>;\n\nfunction AutocompleteGroupLabel({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteGroupLabelProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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 * AutocompleteSeparator\n */\n\nexport type AutocompleteSeparatorProps = ComponentProps<\n\ttypeof AutocompletePrimitive.Separator\n>;\n\nfunction AutocompleteSeparator({\n\tclassName,\n\tref,\n\t...props\n}: AutocompleteSeparatorProps) {\n\treturn (\n\t\t<AutocompletePrimitive.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\tAutocomplete,\n\tAutocompleteClear,\n\tAutocompleteCollection,\n\tAutocompleteContent,\n\tAutocompleteEmpty,\n\tAutocompleteGroup,\n\tAutocompleteGroupLabel,\n\tAutocompleteInput,\n\tAutocompleteInputGroup,\n\tAutocompleteItem,\n\tAutocompleteList,\n\tAutocompleteSeparator,\n\tAutocompleteTrigger,\n\tuseAutocompleteFilteredItems,\n};\n"]}
|
|
@@ -12,10 +12,10 @@ function Combobox({ disabled: initialDisabled, required: initialRequired, ...pro
|
|
|
12
12
|
return (_jsx(ComboboxPrimitive.Root, { disabled: disabled, required: required, ...props }));
|
|
13
13
|
}
|
|
14
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-
|
|
15
|
+
return (_jsx(ComboboxPrimitive.InputGroup, { ref: ref, className: cn("flex h-9 w-full items-center rounded-md border border-border-input bg-surface text-sm text-text 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
16
|
}
|
|
17
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 }));
|
|
18
|
+
return (_jsx(ComboboxPrimitive.Input, { ref: ref, className: cn("h-full w-full flex-1 bg-transparent px-3 py-2 text-sm text-text outline-none placeholder:text-text-placeholder disabled:cursor-not-allowed", className), ...props }));
|
|
19
19
|
}
|
|
20
20
|
function ComboboxTrigger({ className, ref, ...props }) {
|
|
21
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, {}) }) }));
|
|
@@ -1 +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"]}
|
|
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-surface text-sm text-text 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 text-text 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"]}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useFormContext } from "../form-field/form-field-context.js";
|
|
3
3
|
import { getVariants } from "../../utilities/responsive/responsive.js";
|
|
4
4
|
const inputStyles = getVariants({
|
|
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",
|
|
5
|
+
base: "rounded-sm border border-border-input bg-surface px-3 py-2 text-sm text-text placeholder:text-text-placeholder focus-visible:outline focus-visible:outline-primary-hover",
|
|
6
6
|
variants: {
|
|
7
7
|
error: {
|
|
8
8
|
true: "border-error",
|
|
@@ -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,0KAA0K;IAChL,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 bg-surface px-3 py-2 text-sm text-text 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"]}
|
|
@@ -19,7 +19,7 @@ function SelectValue({ ref, ...props }) {
|
|
|
19
19
|
return _jsx(SelectPrimitive.Value, { ref: ref, ...props });
|
|
20
20
|
}
|
|
21
21
|
function SelectTrigger({ className, children, ref, ...props }) {
|
|
22
|
-
return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border-input bg-
|
|
22
|
+
return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border-input bg-surface px-3 py-2 text-sm text-text shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-text-muted [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) })] }));
|
|
23
23
|
}
|
|
24
24
|
function SelectScrollUpArrow({ className, ref, ...props }) {
|
|
25
25
|
return (_jsx(SelectPrimitive.ScrollUpArrow, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronUpIcon, {}) }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"/","sources":["components/select/select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EACN,SAAS,EACT,eAAe,EACf,aAAa,GACb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAStC,SAAS,MAAM,CAAC,EACf,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACK;IACb,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,eAAe,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,GAAI,CAC3E,CAAC;AACH,CAAC;AAED;;GAEG;AAEH,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC;AAQ1C,SAAS,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAoB;IACvD,OAAO,KAAC,eAAe,CAAC,KAAK,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACvD,CAAC;AAQD,SAAS,aAAa,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACY;IACpB,OAAO,CACN,MAAC,eAAe,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"/","sources":["components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport {\n\tCheckIcon,\n\tChevronDownIcon,\n\tChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Select\n */\n\nexport type SelectProps = ComponentProps<typeof SelectPrimitive.Root>;\n\nfunction Select({\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\t...props\n}: SelectProps) {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<SelectPrimitive.Root disabled={disabled} required={required} {...props} />\n\t);\n}\n\n/**\n * SelectGroup\n */\n\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * SelectValue\n */\n\nexport type SelectValueProps = ComponentProps<typeof SelectPrimitive.Value>;\n\nfunction SelectValue({ ref, ...props }: SelectValueProps) {\n\treturn <SelectPrimitive.Value ref={ref} {...props} />;\n}\n\n/**\n * SelectTrigger\n */\n\nexport type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger>;\n\nfunction SelectTrigger({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: SelectTriggerProps) {\n\treturn (\n\t\t<SelectPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border-input bg-surface px-3 py-2 text-sm text-text shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-text-muted [&>span]:line-clamp-1\",\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<SelectPrimitive.Icon\n\t\t\t\trender={\n\t\t\t\t\t<Icon size=\"small\" className=\"opacity-50\">\n\t\t\t\t\t\t<ChevronDownIcon />\n\t\t\t\t\t</Icon>\n\t\t\t\t}\n\t\t\t/>\n\t\t</SelectPrimitive.Trigger>\n\t);\n}\n\n/**\n * SelectScrollUpArrow\n */\n\nexport type SelectScrollUpArrowProps = ComponentProps<\n\ttypeof SelectPrimitive.ScrollUpArrow\n>;\n\nfunction SelectScrollUpArrow({\n\tclassName,\n\tref,\n\t...props\n}: SelectScrollUpArrowProps) {\n\treturn (\n\t\t<SelectPrimitive.ScrollUpArrow\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\" className=\"opacity-50\">\n\t\t\t\t<ChevronUpIcon />\n\t\t\t</Icon>\n\t\t</SelectPrimitive.ScrollUpArrow>\n\t);\n}\n\n/**\n * SelectScrollDownArrow\n */\n\nexport type SelectScrollDownArrowProps = ComponentProps<\n\ttypeof SelectPrimitive.ScrollDownArrow\n>;\n\nfunction SelectScrollDownArrow({\n\tclassName,\n\tref,\n\t...props\n}: SelectScrollDownArrowProps) {\n\treturn (\n\t\t<SelectPrimitive.ScrollDownArrow\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\" className=\"opacity-50\">\n\t\t\t\t<ChevronDownIcon />\n\t\t\t</Icon>\n\t\t</SelectPrimitive.ScrollDownArrow>\n\t);\n}\n\n/**\n * SelectContent\n */\n\nexport type SelectContentProps = ComponentProps<\n\ttypeof SelectPrimitive.Popup\n> & {\n\tsideOffset?: number;\n};\n\nfunction SelectContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: SelectContentProps) {\n\treturn (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Positioner\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talignItemWithTrigger={false}\n\t\t\t>\n\t\t\t\t<SelectScrollUpArrow />\n\t\t\t\t<SelectPrimitive.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-32 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<SelectPrimitive.List className=\"w-full min-w-(--anchor-width) p-1\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</SelectPrimitive.List>\n\t\t\t\t</SelectPrimitive.Popup>\n\t\t\t\t<SelectScrollDownArrow />\n\t\t\t</SelectPrimitive.Positioner>\n\t\t</SelectPrimitive.Portal>\n\t);\n}\n\n/**\n * SelectLabel\n */\n\nexport type SelectLabelProps = ComponentProps<\n\ttypeof SelectPrimitive.GroupLabel\n>;\n\nfunction SelectLabel({ className, ref, ...props }: SelectLabelProps) {\n\treturn (\n\t\t<SelectPrimitive.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 * SelectItem\n */\n\nexport type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;\n\nfunction SelectItem({ className, children, ref, ...props }: SelectItemProps) {\n\treturn (\n\t\t<SelectPrimitive.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<SelectPrimitive.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</SelectPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t</SelectPrimitive.Item>\n\t);\n}\n\n/**\n * SelectSeparator\n */\n\nexport type SelectSeparatorProps = ComponentProps<\n\ttypeof SelectPrimitive.Separator\n>;\n\nfunction SelectSeparator({ className, ref, ...props }: SelectSeparatorProps) {\n\treturn (\n\t\t<SelectPrimitive.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\tSelect,\n\tSelectContent,\n\tSelectGroup,\n\tSelectItem,\n\tSelectLabel,\n\tSelectScrollDownArrow,\n\tSelectScrollUpArrow,\n\tSelectSeparator,\n\tSelectTrigger,\n\tSelectValue,\n};\n"]}
|
|
@@ -6,6 +6,11 @@ export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
|
|
|
6
6
|
* @default true
|
|
7
7
|
*/
|
|
8
8
|
showMinMax?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Whether to show the current value in a tooltip on each thumb
|
|
11
|
+
* @default true
|
|
12
|
+
*/
|
|
13
|
+
showTooltipValue?: boolean;
|
|
9
14
|
};
|
|
10
15
|
/**
|
|
11
16
|
* A customizable slider component built on top of Base UI's slider primitive.
|
|
@@ -25,8 +30,9 @@ export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
|
|
|
25
30
|
* @param {number} [props.min=0] - The minimum value of the slider
|
|
26
31
|
* @param {number} [props.max=100] - The maximum value of the slider
|
|
27
32
|
* @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider
|
|
33
|
+
* @param {boolean} [props.showTooltipValue=true] - Whether to show the value in a tooltip on each thumb
|
|
28
34
|
* @param {string} [props.className] - Additional CSS classes to apply to the slider
|
|
29
35
|
* @returns {JSX.Element} A slider component with optional tooltips and min/max display
|
|
30
36
|
*/
|
|
31
|
-
declare function Slider({ className, defaultValue, min, max, showMinMax, disabled: initialDisabled, onValueChange, ref, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
declare function Slider({ className, defaultValue, min, max, showMinMax, showTooltipValue, disabled: initialDisabled, onValueChange, ref, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
|
|
32
38
|
export { Slider };
|
|
@@ -22,10 +22,11 @@ import { useState } from "react";
|
|
|
22
22
|
* @param {number} [props.min=0] - The minimum value of the slider
|
|
23
23
|
* @param {number} [props.max=100] - The maximum value of the slider
|
|
24
24
|
* @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider
|
|
25
|
+
* @param {boolean} [props.showTooltipValue=true] - Whether to show the value in a tooltip on each thumb
|
|
25
26
|
* @param {string} [props.className] - Additional CSS classes to apply to the slider
|
|
26
27
|
* @returns {JSX.Element} A slider component with optional tooltips and min/max display
|
|
27
28
|
*/
|
|
28
|
-
function Slider({ className, defaultValue, min = 0, max = 100, showMinMax = true, disabled: initialDisabled, onValueChange, ref, ...props }) {
|
|
29
|
+
function Slider({ className, defaultValue, min = 0, max = 100, showMinMax = true, showTooltipValue = true, disabled: initialDisabled, onValueChange, ref, ...props }) {
|
|
29
30
|
const normalizedDefault = Array.isArray(defaultValue)
|
|
30
31
|
? defaultValue
|
|
31
32
|
: defaultValue !== undefined
|
|
@@ -42,9 +43,12 @@ function Slider({ className, defaultValue, min = 0, max = 100, showMinMax = true
|
|
|
42
43
|
setValue(normalizedValue);
|
|
43
44
|
onValueChange?.(newValue, event);
|
|
44
45
|
};
|
|
45
|
-
return (_jsxs(_Fragment, { children: [_jsx(SliderPrimitive.Root, { ref: ref, value: value, onValueChange: handleValueChange, className: cn("relative flex w-full touch-none select-none flex-col items-center", className), disabled: disabled, min: min, max: max, ...props, children: _jsx(SliderPrimitive.Control, { className: "flex w-full items-center", children: _jsxs(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow rounded-full bg-primary/20 data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Indicator, { className: "absolute h-full bg-primary" }), value.map((thumbValue, index) =>
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
return (_jsxs(_Fragment, { children: [_jsx(SliderPrimitive.Root, { ref: ref, value: value, onValueChange: handleValueChange, className: cn("relative flex w-full touch-none select-none flex-col items-center", className), disabled: disabled, min: min, max: max, ...props, children: _jsx(SliderPrimitive.Control, { className: "flex w-full items-center", children: _jsxs(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow rounded-full bg-primary/20 data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Indicator, { className: "absolute h-full bg-primary" }), value.map((thumbValue, index) => {
|
|
47
|
+
const thumbClassName = "block h-4 w-4 rounded-full border border-primary bg-surface shadow outline-none transition-colors focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-offset-surface data-disabled:pointer-events-none";
|
|
48
|
+
return showTooltipValue ? (
|
|
49
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs
|
|
50
|
+
_jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { render: _jsx(SliderPrimitive.Thumb, { index: index, className: thumbClassName }) }), _jsx(TooltipContent, { children: _jsx("p", { children: thumbValue }) })] }, index)) : (_jsx(SliderPrimitive.Thumb, { className: thumbClassName, index: index }, index));
|
|
51
|
+
})] }) }) }), showMinMax && (_jsxs("div", { className: "mt-2 flex w-full flex-row justify-between", children: [_jsx("p", { children: min }), _jsx("p", { children: max })] }))] }));
|
|
48
52
|
}
|
|
49
53
|
export { Slider };
|
|
50
54
|
//# sourceMappingURL=slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"/","sources":["components/slider/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"/","sources":["components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\nimport { useState } from \"react\";\n\nexport type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {\n\t/**\n\t * Whether to show the minimum and maximum values below the slider\n\t * @default true\n\t */\n\tshowMinMax?: boolean;\n\t/**\n\t * Whether to show the current value in a tooltip on each thumb\n\t * @default true\n\t */\n\tshowTooltipValue?: boolean;\n};\n\n/**\n * A customizable slider component built on top of Base UI's slider primitive.\n *\n * @example\n * ```tsx\n * <Slider\n * min={0}\n * max={100}\n * defaultValue={50}\n * showMinMax={true}\n * />\n * ```\n *\n * @param {Object} props - The props for the Slider component\n * @param {number | number[]} [props.defaultValue] - The initial value of the slider\n * @param {number} [props.min=0] - The minimum value of the slider\n * @param {number} [props.max=100] - The maximum value of the slider\n * @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider\n * @param {boolean} [props.showTooltipValue=true] - Whether to show the value in a tooltip on each thumb\n * @param {string} [props.className] - Additional CSS classes to apply to the slider\n * @returns {JSX.Element} A slider component with optional tooltips and min/max display\n */\nfunction Slider({\n\tclassName,\n\tdefaultValue,\n\tmin = 0,\n\tmax = 100,\n\tshowMinMax = true,\n\tshowTooltipValue = true,\n\tdisabled: initialDisabled,\n\tonValueChange,\n\tref,\n\t...props\n}: SliderProps) {\n\tconst normalizedDefault = Array.isArray(defaultValue)\n\t\t? defaultValue\n\t\t: defaultValue !== undefined\n\t\t\t? [defaultValue]\n\t\t\t: [0];\n\n\tconst [value, setValue] = useState<number[]>(normalizedDefault);\n\tconst { disabled } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t});\n\n\tconst handleValueChange = (\n\t\tnewValue: number | readonly number[],\n\t\tevent: SliderPrimitive.Root.ChangeEventDetails,\n\t) => {\n\t\tconst normalizedValue = Array.isArray(newValue)\n\t\t\t? [...newValue]\n\t\t\t: [newValue];\n\t\tsetValue(normalizedValue);\n\t\tonValueChange?.(newValue, event);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SliderPrimitive.Root\n\t\t\t\tref={ref}\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative flex w-full touch-none select-none flex-col items-center\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tmin={min}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SliderPrimitive.Control className=\"flex w-full items-center\">\n\t\t\t\t\t<SliderPrimitive.Track className=\"relative h-1.5 w-full grow rounded-full bg-primary/20 data-disabled:opacity-50\">\n\t\t\t\t\t\t<SliderPrimitive.Indicator className=\"absolute h-full bg-primary\" />\n\t\t\t\t\t\t{value.map((thumbValue, index) => {\n\t\t\t\t\t\t\tconst thumbClassName =\n\t\t\t\t\t\t\t\t\"block h-4 w-4 rounded-full border border-primary bg-surface shadow outline-none transition-colors focus-within:ring-2 focus-within:ring-focus-ring focus-within:ring-offset-surface data-disabled:pointer-events-none\";\n\t\t\t\t\t\t\treturn showTooltipValue ? (\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs\n\t\t\t\t\t\t\t\t<Tooltip key={index} delayDuration={0}>\n\t\t\t\t\t\t\t\t\t<TooltipTrigger\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={thumbClassName}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t\t\t<p>{thumbValue}</p>\n\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\t\t\t\t\tclassName={thumbClassName}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</SliderPrimitive.Track>\n\t\t\t\t</SliderPrimitive.Control>\n\t\t\t</SliderPrimitive.Root>\n\t\t\t{showMinMax && (\n\t\t\t\t<div className=\"mt-2 flex w-full flex-row justify-between\">\n\t\t\t\t\t<p>{min}</p>\n\t\t\t\t\t<p>{max}</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport { Slider };\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getVariants } from "../../utilities/responsive/responsive.js";
|
|
3
3
|
const textAreaStyles = getVariants({
|
|
4
|
-
base: "w-full rounded-md border border-border-input p-2 focus-visible:outline focus-visible:outline-primary-hover",
|
|
4
|
+
base: "w-full rounded-md border border-border-input bg-surface p-2 text-text placeholder:text-text-placeholder focus-visible:outline focus-visible:outline-primary-hover",
|
|
5
5
|
variants: {
|
|
6
6
|
error: {
|
|
7
7
|
true: "border-error",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-area.js","sourceRoot":"/","sources":["components/text-area/text-area.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAO/D,MAAM,cAAc,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"text-area.js","sourceRoot":"/","sources":["components/text-area/text-area.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAO/D,MAAM,cAAc,GAAG,WAAW,CAAC;IAClC,IAAI,EAAE,mKAAmK;IACzK,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,MAAM,UAAU,QAAQ,CAAC,EACxB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACO;IACf,OAAO,CACN,mBACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CAAC;YACzB,SAAS;YACT,KAAK;YACL,QAAQ;SACR,CAAC,EACF,QAAQ,EAAE,QAAQ,KACd,KAAK,GACR,CACF,CAAC;AACH,CAAC","sourcesContent":["import { getVariants } from \"@utilities/responsive/responsive\";\nimport type { ComponentProps } from \"react\";\n\nexport type TextareaProps = ComponentProps<\"textarea\"> & {\n\terror?: boolean;\n};\n\nconst textAreaStyles = getVariants({\n\tbase: \"w-full rounded-md border border-border-input bg-surface p-2 text-text 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\nexport function Textarea({\n\tclassName,\n\terror,\n\tdisabled,\n\tref,\n\t...props\n}: TextareaProps) {\n\treturn (\n\t\t<textarea\n\t\t\tref={ref}\n\t\t\tclassName={textAreaStyles({\n\t\t\t\tclassName,\n\t\t\t\terror,\n\t\t\t\tdisabled,\n\t\t\t})}\n\t\t\tdisabled={disabled}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"]}
|
|
@@ -21,7 +21,7 @@ function toast(toast) {
|
|
|
21
21
|
const Toaster = SonnerToaster;
|
|
22
22
|
/** A fully custom toast built on top of sonner. */
|
|
23
23
|
function Toast({ title, description, button, id, ref }) {
|
|
24
|
-
return (_jsxs("div", { className: "flex w-full items-center gap-4 rounded-lg bg-surface p-4 shadow-lg ring-1 ring-
|
|
24
|
+
return (_jsxs("div", { className: "flex w-full items-center gap-4 rounded-lg bg-surface p-4 shadow-lg ring-1 ring-ring-subtle md:max-w-96", ref: ref, children: [_jsx("div", { className: "flex flex-1 items-center", children: _jsxs("div", { className: "w-full gap-1", children: [_jsx("p", { className: "font-medium text-sm text-text", children: title }), _jsx("p", { className: "text-sm text-text-muted", children: description })] }) }), _jsx("div", { className: "shrink-0 rounded-md font-medium text-sm", children: _jsx(Button, { size: "small", type: "button", variant: "secondary", onClick: () => {
|
|
25
25
|
button.onClick();
|
|
26
26
|
sonnerToast.dismiss(id);
|
|
27
27
|
}, children: button.label }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","sourceRoot":"/","sources":["components/toast/toast.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,OAAO,IAAI,aAAa,EACxB,KAAK,IAAI,WAAW,GAEpB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAa1C;;;;;;;;;GASG;AACH,SAAS,KAAK,CAAC,KAA6B;IAC3C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACjC,KAAC,KAAK,IACL,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,OAAO,EAAE,MAAM,CAAC,OAAO;SACvB,KACG,YAAY,GACf,CACF,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,mDAAmD;AACnD,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAc;IACjE,OAAO,CACN,eACC,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"toast.js","sourceRoot":"/","sources":["components/toast/toast.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,OAAO,IAAI,aAAa,EACxB,KAAK,IAAI,WAAW,GAEpB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAa1C;;;;;;;;;GASG;AACH,SAAS,KAAK,CAAC,KAA6B;IAC3C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAC;IAC9D,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACjC,KAAC,KAAK,IACL,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,OAAO,EAAE,MAAM,CAAC,OAAO;SACvB,KACG,YAAY,GACf,CACF,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,mDAAmD;AACnD,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAc;IACjE,OAAO,CACN,eACC,SAAS,EAAC,wGAAwG,EAClH,GAAG,EAAE,GAAG,aAER,cAAK,SAAS,EAAC,0BAA0B,YACxC,eAAK,SAAS,EAAC,cAAc,aAC5B,YAAG,SAAS,EAAC,+BAA+B,YAAE,KAAK,GAAK,EACxD,YAAG,SAAS,EAAC,yBAAyB,YAAE,WAAW,GAAK,IACnD,GACD,EACN,cAAK,SAAS,EAAC,yCAAyC,YACvD,KAAC,MAAM,IACN,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;wBACb,MAAM,CAAC,OAAO,EAAE,CAAC;wBACjB,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBACzB,CAAC,YAEA,MAAM,CAAC,KAAK,GACL,GACJ,IACD,CACN,CAAC;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import type { Ref } from \"react\";\nimport {\n\tToaster as SonnerToaster,\n\ttoast as sonnerToast,\n\ttype ToasterProps,\n} from \"sonner\";\nimport { Button } from \"../button/button\";\n\nexport type ToastProps = {\n\tid: string | number;\n\ttitle: string;\n\tdescription: string;\n\tbutton: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n\tref?: Ref<HTMLDivElement>;\n} & Omit<ToasterProps, \"id\">;\n\n/**\n * Creates a custom toast notification using the sonner toast library\n * @param toast - The toast configuration object without an ID\n * @param toast.title - The title text to display in the toast\n * @param toast.description - The description text to display in the toast\n * @param toast.button - Configuration for the toast's action button\n * @param toast.button.label - The text label for the action button\n * @param toast.button.onClick - Click handler function for the action button\n * @returns A unique identifier for the created toast\n */\nfunction toast(toast: Omit<ToastProps, \"id\">) {\n\tconst { title, description, button, ...toastOptions } = toast;\n\treturn sonnerToast.custom((id) => (\n\t\t<Toast\n\t\t\tid={id}\n\t\t\ttitle={title}\n\t\t\tdescription={description}\n\t\t\tbutton={{\n\t\t\t\tlabel: button.label,\n\t\t\t\tonClick: button.onClick,\n\t\t\t}}\n\t\t\t{...toastOptions}\n\t\t/>\n\t));\n}\n\nconst Toaster = SonnerToaster;\n\n/** A fully custom toast built on top of sonner. */\nfunction Toast({ title, description, button, id, ref }: ToastProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"flex w-full items-center gap-4 rounded-lg bg-surface p-4 shadow-lg ring-1 ring-ring-subtle md:max-w-96\"\n\t\t\tref={ref}\n\t\t>\n\t\t\t<div className=\"flex flex-1 items-center\">\n\t\t\t\t<div className=\"w-full gap-1\">\n\t\t\t\t\t<p className=\"font-medium text-sm text-text\">{title}</p>\n\t\t\t\t\t<p className=\"text-sm text-text-muted\">{description}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"shrink-0 rounded-md font-medium text-sm\">\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tbutton.onClick();\n\t\t\t\t\t\tsonnerToast.dismiss(id);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{button.label}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport { Toast, Toaster, toast };\n"]}
|
package/dist/styles/index.css
CHANGED
|
@@ -4,48 +4,158 @@
|
|
|
4
4
|
@source "../components";
|
|
5
5
|
@source "../utilities";
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
:root,
|
|
8
|
+
[data-theme="luan-light"] {
|
|
9
|
+
color-scheme: light;
|
|
10
|
+
--background: #ffffff;
|
|
11
|
+
--foreground: #111827;
|
|
12
|
+
|
|
13
|
+
/* ─── Brand / Primary ─── */
|
|
14
|
+
--primary: #374151;
|
|
15
|
+
--primary-hover: #1f2937;
|
|
16
|
+
--primary-active: #111827;
|
|
17
|
+
--on-primary: #ffffff;
|
|
18
|
+
|
|
19
|
+
/* ─── Destructive ─── */
|
|
20
|
+
--destructive: #ef4444;
|
|
21
|
+
--destructive-hover: #dc2626;
|
|
22
|
+
--destructive-active: #b91c1c;
|
|
23
|
+
|
|
24
|
+
/* ─── Error ─── */
|
|
25
|
+
--error: #dc2626;
|
|
26
|
+
|
|
27
|
+
/* ─── Surfaces ─── */
|
|
28
|
+
--surface: #ffffff;
|
|
29
|
+
--surface-subtle: #f9fafb;
|
|
30
|
+
--surface-muted: #f3f4f6;
|
|
31
|
+
--overlay: oklch(0 0 0 / 50%);
|
|
32
|
+
|
|
33
|
+
/* ─── Borders & Separators ─── */
|
|
34
|
+
--border: #e5e7eb;
|
|
35
|
+
--border-input: #9ca3af;
|
|
36
|
+
--separator: #e5e7eb;
|
|
37
|
+
--ring-subtle: oklch(0.21 0.034 264.665 / 8%);
|
|
38
|
+
|
|
39
|
+
/* ─── Text ─── */
|
|
40
|
+
--text: #111827;
|
|
41
|
+
--text-secondary: #374151;
|
|
42
|
+
--text-muted: #6b7280;
|
|
43
|
+
--text-disabled: #d1d5db;
|
|
44
|
+
--text-placeholder: #9ca3af;
|
|
45
|
+
|
|
46
|
+
/* ─── Interactive States ─── */
|
|
47
|
+
--highlight: #374151;
|
|
48
|
+
--on-highlight: #ffffff;
|
|
49
|
+
--focus-ring: #374151;
|
|
50
|
+
--skeleton: #e5e7eb;
|
|
51
|
+
|
|
52
|
+
/* ─── Misc ─── */
|
|
53
|
+
--indicator: #6b7280;
|
|
54
|
+
--disabled-bg: #9ca3af;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
[data-theme="luan-dark"] {
|
|
58
|
+
color-scheme: dark;
|
|
59
|
+
--background: #030712;
|
|
60
|
+
--foreground: #f9fafb;
|
|
61
|
+
|
|
62
|
+
/* ─── Brand / Primary ─── */
|
|
63
|
+
--primary: #4b5563;
|
|
64
|
+
--primary-hover: #6b7280;
|
|
65
|
+
--primary-active: #9ca3af;
|
|
66
|
+
--on-primary: #ffffff;
|
|
67
|
+
|
|
68
|
+
/* ─── Destructive ─── */
|
|
69
|
+
--destructive: #b91c1c;
|
|
70
|
+
--destructive-hover: #dc2626;
|
|
71
|
+
--destructive-active: #ef4444;
|
|
72
|
+
|
|
73
|
+
/* ─── Error ─── */
|
|
74
|
+
--error: #f87171;
|
|
75
|
+
|
|
76
|
+
/* ─── Surfaces ─── */
|
|
77
|
+
--surface: #111827;
|
|
78
|
+
--surface-subtle: #1f2937;
|
|
79
|
+
--surface-muted: #374151;
|
|
80
|
+
--overlay: oklch(0 0 0 / 60%);
|
|
81
|
+
|
|
82
|
+
/* ─── Borders & Separators ─── */
|
|
83
|
+
--border: #374151;
|
|
84
|
+
--border-input: #4b5563;
|
|
85
|
+
--separator: #374151;
|
|
86
|
+
--ring-subtle: oklch(0.98 0 0 / 12%);
|
|
87
|
+
|
|
88
|
+
/* ─── Text ─── */
|
|
89
|
+
--text: #f9fafb;
|
|
90
|
+
--text-secondary: #e5e7eb;
|
|
91
|
+
--text-muted: #9ca3af;
|
|
92
|
+
--text-disabled: #6b7280;
|
|
93
|
+
--text-placeholder: #6b7280;
|
|
94
|
+
|
|
95
|
+
/* ─── Interactive States ─── */
|
|
96
|
+
--highlight: #4b5563;
|
|
97
|
+
--on-highlight: #f9fafb;
|
|
98
|
+
--focus-ring: #d1d5db;
|
|
99
|
+
--skeleton: #374151;
|
|
100
|
+
|
|
101
|
+
/* ─── Misc ─── */
|
|
102
|
+
--indicator: #9ca3af;
|
|
103
|
+
--disabled-bg: #4b5563;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
[data-theme="luan-light"],
|
|
107
|
+
[data-theme="luan-dark"] {
|
|
108
|
+
background-color: var(--background);
|
|
109
|
+
color: var(--foreground);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@theme inline {
|
|
113
|
+
--color-background: var(--background);
|
|
114
|
+
--color-foreground: var(--foreground);
|
|
115
|
+
|
|
8
116
|
/* ─── Brand / Primary ─── */
|
|
9
|
-
--color-primary:
|
|
10
|
-
--color-primary-hover:
|
|
11
|
-
--color-primary-active:
|
|
12
|
-
--color-on-primary:
|
|
117
|
+
--color-primary: var(--primary);
|
|
118
|
+
--color-primary-hover: var(--primary-hover);
|
|
119
|
+
--color-primary-active: var(--primary-active);
|
|
120
|
+
--color-on-primary: var(--on-primary);
|
|
13
121
|
|
|
14
122
|
/* ─── Destructive ─── */
|
|
15
|
-
--color-destructive:
|
|
16
|
-
--color-destructive-hover:
|
|
17
|
-
--color-destructive-active:
|
|
123
|
+
--color-destructive: var(--destructive);
|
|
124
|
+
--color-destructive-hover: var(--destructive-hover);
|
|
125
|
+
--color-destructive-active: var(--destructive-active);
|
|
18
126
|
|
|
19
127
|
/* ─── Error ─── */
|
|
20
|
-
--color-error:
|
|
128
|
+
--color-error: var(--error);
|
|
21
129
|
|
|
22
130
|
/* ─── Surfaces ─── */
|
|
23
|
-
--color-surface:
|
|
24
|
-
--color-surface-subtle:
|
|
25
|
-
--color-surface-muted:
|
|
26
|
-
--color-overlay:
|
|
131
|
+
--color-surface: var(--surface);
|
|
132
|
+
--color-surface-subtle: var(--surface-subtle);
|
|
133
|
+
--color-surface-muted: var(--surface-muted);
|
|
134
|
+
--color-overlay: var(--overlay);
|
|
27
135
|
|
|
28
136
|
/* ─── Borders & Separators ─── */
|
|
29
|
-
--color-border:
|
|
30
|
-
--color-border-input:
|
|
31
|
-
--color-separator:
|
|
137
|
+
--color-border: var(--border);
|
|
138
|
+
--color-border-input: var(--border-input);
|
|
139
|
+
--color-separator: var(--separator);
|
|
140
|
+
--color-ring: var(--focus-ring);
|
|
141
|
+
--color-ring-subtle: var(--ring-subtle);
|
|
32
142
|
|
|
33
143
|
/* ─── Text ─── */
|
|
34
|
-
--color-text:
|
|
35
|
-
--color-text-secondary:
|
|
36
|
-
--color-text-muted:
|
|
37
|
-
--color-text-disabled:
|
|
38
|
-
--color-text-placeholder:
|
|
144
|
+
--color-text: var(--text);
|
|
145
|
+
--color-text-secondary: var(--text-secondary);
|
|
146
|
+
--color-text-muted: var(--text-muted);
|
|
147
|
+
--color-text-disabled: var(--text-disabled);
|
|
148
|
+
--color-text-placeholder: var(--text-placeholder);
|
|
39
149
|
|
|
40
150
|
/* ─── Interactive States ─── */
|
|
41
|
-
--color-highlight:
|
|
42
|
-
--color-on-highlight:
|
|
43
|
-
--color-focus-ring:
|
|
44
|
-
--color-skeleton:
|
|
151
|
+
--color-highlight: var(--highlight);
|
|
152
|
+
--color-on-highlight: var(--on-highlight);
|
|
153
|
+
--color-focus-ring: var(--focus-ring);
|
|
154
|
+
--color-skeleton: var(--skeleton);
|
|
45
155
|
|
|
46
156
|
/* ─── Misc ─── */
|
|
47
|
-
--color-indicator:
|
|
48
|
-
--color-disabled-bg:
|
|
157
|
+
--color-indicator: var(--indicator);
|
|
158
|
+
--color-disabled-bg: var(--disabled-bg);
|
|
49
159
|
|
|
50
160
|
/* ─── Animations ─── */
|
|
51
161
|
--animate-accordion-up: accordion-up 350ms ease;
|