@sqlrooms/ui 0.29.0-rc.1 → 0.29.0-rc.11
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/LICENSE.md +2 -1
- package/README.md +98 -4
- package/dist/components/accordion.d.ts +2 -2
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js +3 -3
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/alert.js +1 -1
- package/dist/components/alert.js.map +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/card.js.map +1 -1
- package/dist/components/combobox.d.ts +67 -1
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +58 -32
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/command.js +1 -1
- package/dist/components/command.js.map +1 -1
- package/dist/components/editable-text.d.ts +2 -1
- package/dist/components/editable-text.d.ts.map +1 -1
- package/dist/components/editable-text.js +38 -11
- package/dist/components/editable-text.js.map +1 -1
- package/dist/components/error-pane.d.ts.map +1 -1
- package/dist/components/error-pane.js +2 -2
- package/dist/components/error-pane.js.map +1 -1
- package/dist/components/hover-card.d.ts +7 -0
- package/dist/components/hover-card.d.ts.map +1 -0
- package/dist/components/hover-card.js +15 -0
- package/dist/components/hover-card.js.map +1 -0
- package/dist/components/modifier-scroll-overlay.d.ts +16 -0
- package/dist/components/modifier-scroll-overlay.d.ts.map +1 -0
- package/dist/components/modifier-scroll-overlay.js +31 -0
- package/dist/components/modifier-scroll-overlay.js.map +1 -0
- package/dist/components/progress-modal.d.ts +2 -0
- package/dist/components/progress-modal.d.ts.map +1 -1
- package/dist/components/progress-modal.js +2 -2
- package/dist/components/progress-modal.js.map +1 -1
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js.map +1 -1
- package/dist/components/resizable.d.ts +302 -20
- package/dist/components/resizable.d.ts.map +1 -1
- package/dist/components/resizable.js +12 -5
- package/dist/components/resizable.js.map +1 -1
- package/dist/components/run-button.d.ts +19 -0
- package/dist/components/run-button.d.ts.map +1 -0
- package/dist/components/run-button.js +17 -0
- package/dist/components/run-button.js.map +1 -0
- package/dist/components/settings-panel-header.d.ts +16 -0
- package/dist/components/settings-panel-header.d.ts.map +1 -0
- package/dist/components/settings-panel-header.js +9 -0
- package/dist/components/settings-panel-header.js.map +1 -0
- package/dist/components/sidebar.d.ts +3 -2
- package/dist/components/sidebar.d.ts.map +1 -1
- package/dist/components/sidebar.js +16 -12
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/sonner.d.ts +4 -0
- package/dist/components/sonner.d.ts.map +1 -0
- package/dist/components/sonner.js +37 -0
- package/dist/components/sonner.js.map +1 -0
- package/dist/components/switch.d.ts +5 -1
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +7 -2
- package/dist/components/switch.js.map +1 -1
- package/dist/components/tab-strip.d.ts +27 -7
- package/dist/components/tab-strip.d.ts.map +1 -1
- package/dist/components/tab-strip.js +165 -26
- package/dist/components/tab-strip.js.map +1 -1
- package/dist/components/textarea.d.ts +3 -0
- package/dist/components/textarea.d.ts.map +1 -1
- package/dist/components/textarea.js +87 -11
- package/dist/components/textarea.js.map +1 -1
- package/dist/components/theme-switch.d.ts.map +1 -1
- package/dist/components/theme-switch.js +3 -3
- package/dist/components/theme-switch.js.map +1 -1
- package/dist/components/tree.d.ts.map +1 -1
- package/dist/components/tree.js +4 -3
- package/dist/components/tree.js.map +1 -1
- package/dist/hooks/use-mobile.d.ts.map +1 -1
- package/dist/hooks/use-mobile.js +1 -0
- package/dist/hooks/use-mobile.js.map +1 -1
- package/dist/hooks/useAspectRatioDimensions.js +3 -3
- package/dist/hooks/useAspectRatioDimensions.js.map +1 -1
- package/dist/hooks/useCombobox.d.ts +33 -0
- package/dist/hooks/useCombobox.d.ts.map +1 -0
- package/dist/hooks/useCombobox.js +30 -0
- package/dist/hooks/useCombobox.js.map +1 -0
- package/dist/hooks/useDebounce.d.ts +33 -0
- package/dist/hooks/useDebounce.d.ts.map +1 -0
- package/dist/hooks/useDebounce.js +45 -0
- package/dist/hooks/useDebounce.js.map +1 -0
- package/dist/hooks/useDebouncedCallback.d.ts +45 -0
- package/dist/hooks/useDebouncedCallback.d.ts.map +1 -0
- package/dist/hooks/useDebouncedCallback.js +70 -0
- package/dist/hooks/useDebouncedCallback.js.map +1 -0
- package/dist/hooks/useDebouncedValue.d.ts +23 -0
- package/dist/hooks/useDebouncedValue.d.ts.map +1 -0
- package/dist/hooks/useDebouncedValue.js +41 -0
- package/dist/hooks/useDebouncedValue.js.map +1 -0
- package/dist/index.d.ts +36 -29
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +34 -28
- package/dist/index.js.map +1 -1
- package/dist/theme/theme-provider.d.ts +22 -1
- package/dist/theme/theme-provider.d.ts.map +1 -1
- package/dist/theme/theme-provider.js +59 -20
- package/dist/theme/theme-provider.js.map +1 -1
- package/package.json +21 -16
- package/tailwind-preset.css +78 -0
- package/dist/components/toast.d.ts +0 -16
- package/dist/components/toast.d.ts.map +0 -1
- package/dist/components/toast.js +0 -35
- package/dist/components/toast.js.map +0 -1
- package/dist/components/toaster.d.ts +0 -3
- package/dist/components/toaster.d.ts.map +0 -1
- package/dist/components/toaster.js +0 -24
- package/dist/components/toaster.js.map +0 -1
- package/dist/hooks/use-toast.d.ts +0 -45
- package/dist/hooks/use-toast.d.ts.map +0 -1
- package/dist/hooks/use-toast.js +0 -129
- package/dist/hooks/use-toast.js.map +0 -1
package/LICENSE.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright
|
|
3
|
+
Copyright 2024-2026 SQLRooms Contributors
|
|
4
|
+
Copyright Vis.gl contributors
|
|
4
5
|
|
|
5
6
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
7
|
|
package/README.md
CHANGED
|
@@ -90,14 +90,91 @@ function MyComponent() {
|
|
|
90
90
|
|
|
91
91
|
## Available Components
|
|
92
92
|
|
|
93
|
-
- **Layout**: Card, Resizable, Tabs
|
|
94
|
-
- **Forms**: Button, Checkbox, Input, Select, Slider, Switch, Textarea
|
|
93
|
+
- **Layout**: Card, Resizable, SettingsPanelHeader, Tabs
|
|
94
|
+
- **Forms**: Button, Checkbox, Combobox, Input, Select, Slider, Switch, Textarea
|
|
95
95
|
- **Feedback**: Alert, Progress, Spinner, Toast
|
|
96
|
-
- **Navigation**: Accordion, Breadcrumb, Dropdown Menu
|
|
97
|
-
- **Overlay**: Dialog, Popover, Tooltip
|
|
96
|
+
- **Navigation**: Accordion, Breadcrumb, Dropdown Menu, TabStrip
|
|
97
|
+
- **Overlay**: Dialog, ModifierScrollOverlay, Popover, Tooltip
|
|
98
98
|
- **Data Display**: Badge, Table
|
|
99
99
|
- **Utility**: Error Boundary, Theme Switch
|
|
100
100
|
|
|
101
|
+
## Combobox
|
|
102
|
+
|
|
103
|
+
Use the compound `Combobox` component for searchable select dropdowns built on
|
|
104
|
+
the package's Popover and Command primitives.
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import {Combobox} from '@sqlrooms/ui';
|
|
108
|
+
|
|
109
|
+
function MySelector() {
|
|
110
|
+
const [value, setValue] = useState('');
|
|
111
|
+
const options = [
|
|
112
|
+
{value: 'option1', label: 'Option 1'},
|
|
113
|
+
{value: 'option2', label: 'Option 2'},
|
|
114
|
+
{value: 'option3', label: 'Option 3'},
|
|
115
|
+
];
|
|
116
|
+
const selectedLabel =
|
|
117
|
+
options.find((option) => option.value === value)?.label ?? 'Select option';
|
|
118
|
+
|
|
119
|
+
return (
|
|
120
|
+
<Combobox value={value} onChange={setValue}>
|
|
121
|
+
<Combobox.Trigger>
|
|
122
|
+
<span>{selectedLabel}</span>
|
|
123
|
+
</Combobox.Trigger>
|
|
124
|
+
<Combobox.Content
|
|
125
|
+
searchable
|
|
126
|
+
searchPlaceholder="Search..."
|
|
127
|
+
emptyMessage="No results found."
|
|
128
|
+
>
|
|
129
|
+
{options.map((option) => (
|
|
130
|
+
<Combobox.Item key={option.value} value={option.value}>
|
|
131
|
+
<span>{option.label}</span>
|
|
132
|
+
</Combobox.Item>
|
|
133
|
+
))}
|
|
134
|
+
</Combobox.Content>
|
|
135
|
+
</Combobox>
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Available compound components:
|
|
141
|
+
|
|
142
|
+
- `Combobox` (root) - Manages state and provides context
|
|
143
|
+
- `Combobox.Trigger` - Button to open the dropdown
|
|
144
|
+
- `Combobox.Content` - Popover content wrapper
|
|
145
|
+
- `Combobox.Item` - Individual selectable item
|
|
146
|
+
|
|
147
|
+
Pass `disabled` to the root `Combobox` to disable opening the dropdown and
|
|
148
|
+
selecting items.
|
|
149
|
+
|
|
150
|
+
For advanced composition, the lower-level `useCombobox` hook is also exported.
|
|
151
|
+
|
|
152
|
+
## Settings Panel Header
|
|
153
|
+
|
|
154
|
+
Use `SettingsPanelHeader` for compact settings surfaces that should share the
|
|
155
|
+
standard settings icon and optional close affordance.
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
import {Button, SettingsPanelHeader} from '@sqlrooms/ui';
|
|
159
|
+
import {CodeIcon} from 'lucide-react';
|
|
160
|
+
|
|
161
|
+
function SettingsPanel({onClose}: {onClose: () => void}) {
|
|
162
|
+
return (
|
|
163
|
+
<div className="flex h-full flex-col gap-2 p-2">
|
|
164
|
+
<SettingsPanelHeader
|
|
165
|
+
actions={
|
|
166
|
+
<Button type="button" variant="ghost" size="icon">
|
|
167
|
+
<CodeIcon className="h-3.5 w-3.5" />
|
|
168
|
+
</Button>
|
|
169
|
+
}
|
|
170
|
+
onClose={onClose}
|
|
171
|
+
/>
|
|
172
|
+
{/* settings controls */}
|
|
173
|
+
</div>
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
|
|
101
178
|
## Advanced Features
|
|
102
179
|
|
|
103
180
|
- **Component Composition**: Build complex UIs by composing simple components
|
|
@@ -105,4 +182,21 @@ function MyComponent() {
|
|
|
105
182
|
- **Custom Styling**: Extend components with custom styles using Tailwind CSS
|
|
106
183
|
- **Animation**: Smooth transitions and animations for interactive elements
|
|
107
184
|
|
|
185
|
+
## TabStrip
|
|
186
|
+
|
|
187
|
+
`TabStrip` supports a `fontSize` prop for sizing tab labels, inline rename
|
|
188
|
+
inputs, search dropdown content, and built-in subcomponents consistently:
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
<TabStrip
|
|
192
|
+
tabs={tabs}
|
|
193
|
+
openTabs={openTabs}
|
|
194
|
+
selectedTabId={selectedTabId}
|
|
195
|
+
fontSize="12px"
|
|
196
|
+
/>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
Use `renderSearchItemLabel` when the search dropdown should show custom row
|
|
200
|
+
content, such as a status spinner next to a tab name.
|
|
201
|
+
|
|
108
202
|
For more information, visit the SQLRooms documentation.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
2
|
+
import * as React from 'react';
|
|
3
3
|
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
4
4
|
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
6
|
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
-
export { Accordion, AccordionItem, AccordionTrigger
|
|
7
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
8
8
|
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,SAAS,8JAA0B,CAAC;AAE1C,QAAA,MAAM,aAAa,iKASjB,CAAC;AAGH,QAAA,MAAM,gBAAgB,0KAiBpB,CAAC;AAGH,QAAA,MAAM,gBAAgB,oKAWpB,CAAC;AAGH,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAC,CAAC"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import * as React from 'react';
|
|
4
3
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
5
4
|
import { ChevronDown } from 'lucide-react';
|
|
5
|
+
import * as React from 'react';
|
|
6
6
|
import { cn } from '../lib/utils';
|
|
7
7
|
const Accordion = AccordionPrimitive.Root;
|
|
8
8
|
const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn('border-b', className), ...props })));
|
|
9
9
|
AccordionItem.displayName = 'AccordionItem';
|
|
10
10
|
const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn('flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDown, { className: "text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" })] }) })));
|
|
11
11
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
12
|
-
const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pb-4
|
|
12
|
+
const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pt-0 pb-4', className), children: children }) })));
|
|
13
13
|
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
|
14
|
-
export { Accordion, AccordionItem, AccordionTrigger
|
|
14
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
15
15
|
//# sourceMappingURL=accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAE1C,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,kBAAkB,CAAC,IAAI,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAChC,KAAK,GACT,CACH,CAAC,CAAC;AACH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1C,KAAC,kBAAkB,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACzC,MAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,KAAC,WAAW,IAAC,SAAS,EAAC,0EAA0E,GAAG,IACzE,GACH,CAC7B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1C,KAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,2GAA2G,KACjH,KAAK,YAET,cAAK,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,GACjC,CAC9B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["'use client';\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport {ChevronDown} from 'lucide-react';\nimport * as React from 'react';\n\nimport {cn} from '../lib/utils';\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({className, ...props}, ref) => (\n <AccordionPrimitive.Item\n ref={ref}\n className={cn('border-b', className)}\n {...props}\n />\n));\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({className, children, ...props}, ref) => (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n ref={ref}\n className={cn(\n 'flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n className,\n )}\n {...props}\n >\n {children}\n <ChevronDown className=\"text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200\" />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef<typeof AccordionPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({className, children, ...props}, ref) => (\n <AccordionPrimitive.Content\n ref={ref}\n className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n {...props}\n >\n <div className={cn('pt-0 pb-4', className)}>{children}</div>\n </AccordionPrimitive.Content>\n));\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport {Accordion, AccordionContent, AccordionItem, AccordionTrigger};\n"]}
|
package/dist/components/alert.js
CHANGED
|
@@ -15,7 +15,7 @@ const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm [
|
|
|
15
15
|
});
|
|
16
16
|
const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })));
|
|
17
17
|
Alert.displayName = 'Alert';
|
|
18
|
-
const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn('mb-1 font-medium
|
|
18
|
+
const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn('mb-1 leading-none font-medium tracking-tight', className), ...props })));
|
|
19
19
|
AlertTitle.displayName = 'AlertTitle';
|
|
20
20
|
const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('text-sm [&_p]:leading-relaxed', className), ...props })));
|
|
21
21
|
AlertDescription.displayName = 'AlertDescription';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,GAAG,EAAoB,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,aAAa,GAAG,GAAG,CACvB,yKAAyK,EACzK;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,+BAA+B;YACxC,WAAW,EACT,yFAAyF;SAC5F;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAC,OAAO,EAAC,CAAC,EAAE,SAAS,CAAC,KAC9C,KAAK,GACT,CACH,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,KACpE,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {cva, type VariantProps} from 'class-variance-authority';\n\nimport {cn} from '../lib/utils';\n\nconst alertVariants = cva(\n 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n {\n variants: {\n variant: {\n default: 'bg-background text-foreground',\n destructive:\n 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({className, variant, ...props}, ref) => (\n <div\n ref={ref}\n role=\"alert\"\n className={cn(alertVariants({variant}), className)}\n {...props}\n />\n));\nAlert.displayName = 'Alert';\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({className, ...props}, ref) => (\n <h5\n ref={ref}\n className={cn('mb-1 font-medium
|
|
1
|
+
{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,GAAG,EAAoB,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,aAAa,GAAG,GAAG,CACvB,yKAAyK,EACzK;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,+BAA+B;YACxC,WAAW,EACT,yFAAyF;SAC5F;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAC,OAAO,EAAC,CAAC,EAAE,SAAS,CAAC,KAC9C,KAAK,GACT,CACH,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,KACpE,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {cva, type VariantProps} from 'class-variance-authority';\n\nimport {cn} from '../lib/utils';\n\nconst alertVariants = cva(\n 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n {\n variants: {\n variant: {\n default: 'bg-background text-foreground',\n destructive:\n 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n },\n);\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({className, variant, ...props}, ref) => (\n <div\n ref={ref}\n role=\"alert\"\n className={cn(alertVariants({variant}), className)}\n {...props}\n />\n));\nAlert.displayName = 'Alert';\n\nconst AlertTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({className, ...props}, ref) => (\n <h5\n ref={ref}\n className={cn('mb-1 leading-none font-medium tracking-tight', className)}\n {...props}\n />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn('text-sm [&_p]:leading-relaxed', className)}\n {...props}\n />\n));\nAlertDescription.displayName = 'AlertDescription';\n\nexport {Alert, AlertTitle, AlertDescription};\n"]}
|
package/dist/components/card.js
CHANGED
|
@@ -6,7 +6,7 @@ const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { r
|
|
|
6
6
|
Card.displayName = 'Card';
|
|
7
7
|
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex flex-col space-y-1.5 p-6', className), ...props })));
|
|
8
8
|
CardHeader.displayName = 'CardHeader';
|
|
9
|
-
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('font-semibold
|
|
9
|
+
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('leading-none font-semibold tracking-tight', className), ...props })));
|
|
10
10
|
CardTitle.displayName = 'CardTitle';
|
|
11
11
|
const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('text-muted-foreground text-sm', className), ...props })));
|
|
12
12
|
CardDescription.displayName = 'CardDescription';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACnE,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAClD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAC,CAAC","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport {cn} from '../lib/utils';\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn(\n 'bg-card text-card-foreground rounded-xl border shadow',\n className,\n )}\n {...props}\n />\n));\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col space-y-1.5 p-6', className)}\n {...props}\n />\n));\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn('font-semibold
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACnE,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAClD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAC,CAAC","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport {cn} from '../lib/utils';\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn(\n 'bg-card text-card-foreground rounded-xl border shadow',\n className,\n )}\n {...props}\n />\n));\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col space-y-1.5 p-6', className)}\n {...props}\n />\n));\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn('leading-none font-semibold tracking-tight', className)}\n {...props}\n />\n));\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n));\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n));\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n <div\n ref={ref}\n className={cn('flex items-center p-6 pt-0', className)}\n {...props}\n />\n));\nCardFooter.displayName = 'CardFooter';\n\nexport {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent};\n"]}
|
|
@@ -1,2 +1,68 @@
|
|
|
1
|
-
|
|
1
|
+
import { type FC, type PropsWithChildren } from 'react';
|
|
2
|
+
import { type UseComboboxOptions } from '../hooks/useCombobox';
|
|
3
|
+
/**
|
|
4
|
+
* Root props for the compound Combobox component.
|
|
5
|
+
*/
|
|
6
|
+
export type ComboboxRootProps<T extends string = string> = PropsWithChildren<UseComboboxOptions<T> & {
|
|
7
|
+
/**
|
|
8
|
+
* Optional selected value used for item highlighting when it differs from
|
|
9
|
+
* the controlled value.
|
|
10
|
+
*/
|
|
11
|
+
currentValue?: string;
|
|
12
|
+
}>;
|
|
13
|
+
declare function ComboboxRoot<T extends string = string>({ value, onChange, currentValue, disabled, children, }: ComboboxRootProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
/**
|
|
15
|
+
* Props for the button that opens the combobox popover.
|
|
16
|
+
*/
|
|
17
|
+
export interface ComboboxTriggerProps {
|
|
18
|
+
className?: string;
|
|
19
|
+
ariaLabel?: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Props for the popover content that contains combobox options.
|
|
23
|
+
*/
|
|
24
|
+
export interface ComboboxContentProps {
|
|
25
|
+
searchable?: boolean;
|
|
26
|
+
searchPlaceholder?: string;
|
|
27
|
+
emptyMessage?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Props for an individual selectable combobox item.
|
|
31
|
+
*/
|
|
32
|
+
export interface ComboboxItemProps {
|
|
33
|
+
/**
|
|
34
|
+
* Stable item value committed through the Combobox onChange handler.
|
|
35
|
+
*/
|
|
36
|
+
value: string;
|
|
37
|
+
/**
|
|
38
|
+
* Optional display text or aliases used to match this item during search.
|
|
39
|
+
*/
|
|
40
|
+
keywords?: string[];
|
|
41
|
+
isSelected?: boolean;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Compound component for Popover-based combobox selectors.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* <Combobox value={value} onChange={setValue}>
|
|
49
|
+
* <Combobox.Trigger>
|
|
50
|
+
* <span>{selectedLabel}</span>
|
|
51
|
+
* </Combobox.Trigger>
|
|
52
|
+
* <Combobox.Content searchable searchPlaceholder="Search...">
|
|
53
|
+
* {options.map((option) => (
|
|
54
|
+
* <Combobox.Item key={option.value} value={option.value}>
|
|
55
|
+
* <span>{option.label}</span>
|
|
56
|
+
* </Combobox.Item>
|
|
57
|
+
* ))}
|
|
58
|
+
* </Combobox.Content>
|
|
59
|
+
* </Combobox>
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
export declare const Combobox: typeof ComboboxRoot & {
|
|
63
|
+
Trigger: FC<PropsWithChildren<ComboboxTriggerProps>>;
|
|
64
|
+
Content: FC<PropsWithChildren<ComboboxContentProps>>;
|
|
65
|
+
Item: FC<PropsWithChildren<ComboboxItemProps>>;
|
|
66
|
+
};
|
|
67
|
+
export {};
|
|
2
68
|
//# sourceMappingURL=combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAaf,OAAO,EAAc,KAAK,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAqB1E;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1E,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,CAAC;AAEF,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC/C,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAmBtB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuBD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAwBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ;;;;CAInB,CAAC"}
|
|
@@ -1,41 +1,67 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { createContext, useContext, } from 'react';
|
|
4
4
|
import { Check, ChevronsUpDown } from 'lucide-react';
|
|
5
5
|
import { cn } from '../lib/utils';
|
|
6
6
|
import { Button } from './button';
|
|
7
7
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command';
|
|
8
8
|
import { Popover, PopoverContent, PopoverTrigger } from './popover';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
value: 'nuxt.js',
|
|
20
|
-
label: 'Nuxt.js',
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
value: 'remix',
|
|
24
|
-
label: 'Remix',
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
value: 'astro',
|
|
28
|
-
label: 'Astro',
|
|
29
|
-
},
|
|
30
|
-
];
|
|
31
|
-
export function ComboboxDemo() {
|
|
32
|
-
const [open, setOpen] = React.useState(false);
|
|
33
|
-
const [value, setValue] = React.useState('');
|
|
34
|
-
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: "w-[200px] justify-between", children: [value
|
|
35
|
-
? frameworks.find((framework) => framework.value === value)?.label
|
|
36
|
-
: 'Select framework...', _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[200px] p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search framework..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No framework found." }), _jsx(CommandGroup, { children: frameworks.map((framework) => (_jsxs(CommandItem, { value: framework.value, onSelect: (currentValue) => {
|
|
37
|
-
setValue(currentValue === value ? '' : currentValue);
|
|
38
|
-
setOpen(false);
|
|
39
|
-
}, children: [_jsx(Check, { className: cn('mr-2 h-4 w-4', value === framework.value ? 'opacity-100' : 'opacity-0') }), framework.label] }, framework.value))) })] })] }) })] }));
|
|
9
|
+
import { useCombobox } from '../hooks/useCombobox';
|
|
10
|
+
const ComboboxContext = createContext(null);
|
|
11
|
+
function useComboboxContext() {
|
|
12
|
+
const context = useContext(ComboboxContext);
|
|
13
|
+
if (!context) {
|
|
14
|
+
throw new Error('Combobox compound components must be used within Combobox');
|
|
15
|
+
}
|
|
16
|
+
return context;
|
|
40
17
|
}
|
|
18
|
+
function ComboboxRoot({ value, onChange, currentValue, disabled, children, }) {
|
|
19
|
+
const { popoverProps, handleSelect, open } = useCombobox({
|
|
20
|
+
value,
|
|
21
|
+
onChange,
|
|
22
|
+
disabled,
|
|
23
|
+
});
|
|
24
|
+
return (_jsx(ComboboxContext.Provider, { value: {
|
|
25
|
+
open,
|
|
26
|
+
disabled: Boolean(disabled),
|
|
27
|
+
currentValue: currentValue ?? String(value),
|
|
28
|
+
handleSelect,
|
|
29
|
+
}, children: _jsx(Popover, { ...popoverProps, children: children }) }));
|
|
30
|
+
}
|
|
31
|
+
const ComboboxTrigger = ({ children, className, ariaLabel, }) => {
|
|
32
|
+
const { disabled, open } = useComboboxContext();
|
|
33
|
+
return (_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, className: cn('h-8 justify-between text-xs font-normal', className), children: [children, _jsx(ChevronsUpDown, { className: "ml-2 h-3.5 w-3.5 shrink-0 opacity-50" })] }) }));
|
|
34
|
+
};
|
|
35
|
+
const ComboboxContent = ({ children, searchable = false, searchPlaceholder = 'Search...', emptyMessage = 'No matching option.', }) => {
|
|
36
|
+
return (_jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0 text-xs", children: _jsxs(Command, { children: [searchable && (_jsx(CommandInput, { placeholder: searchPlaceholder, className: "text-xs" })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: children })] })] }) }));
|
|
37
|
+
};
|
|
38
|
+
const ComboboxItem = ({ value, keywords, children, isSelected, }) => {
|
|
39
|
+
const { currentValue, handleSelect } = useComboboxContext();
|
|
40
|
+
const selected = isSelected ?? currentValue === value;
|
|
41
|
+
return (_jsxs(CommandItem, { value: value, keywords: keywords, onSelect: handleSelect, children: [_jsx(Check, { className: cn('h-3.5 w-3.5 shrink-0', selected ? 'opacity-100' : 'opacity-0') }), children] }));
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Compound component for Popover-based combobox selectors.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* <Combobox value={value} onChange={setValue}>
|
|
49
|
+
* <Combobox.Trigger>
|
|
50
|
+
* <span>{selectedLabel}</span>
|
|
51
|
+
* </Combobox.Trigger>
|
|
52
|
+
* <Combobox.Content searchable searchPlaceholder="Search...">
|
|
53
|
+
* {options.map((option) => (
|
|
54
|
+
* <Combobox.Item key={option.value} value={option.value}>
|
|
55
|
+
* <span>{option.label}</span>
|
|
56
|
+
* </Combobox.Item>
|
|
57
|
+
* ))}
|
|
58
|
+
* </Combobox.Content>
|
|
59
|
+
* </Combobox>
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
export const Combobox = Object.assign(ComboboxRoot, {
|
|
63
|
+
Trigger: ComboboxTrigger,
|
|
64
|
+
Content: ComboboxContent,
|
|
65
|
+
Item: ComboboxItem,
|
|
66
|
+
});
|
|
41
67
|
//# sourceMappingURL=combobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,
|
|
1
|
+
{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {\n type FC,\n type PropsWithChildren,\n createContext,\n useContext,\n} from 'react';\nimport {Check, ChevronsUpDown} from 'lucide-react';\nimport {cn} from '../lib/utils';\nimport {Button} from './button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from './command';\nimport {Popover, PopoverContent, PopoverTrigger} from './popover';\nimport {useCombobox, type UseComboboxOptions} from '../hooks/useCombobox';\n\ninterface ComboboxContextValue {\n open: boolean;\n disabled: boolean;\n currentValue: string;\n handleSelect: (value: string) => void;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useComboboxContext() {\n const context = useContext(ComboboxContext);\n if (!context) {\n throw new Error(\n 'Combobox compound components must be used within Combobox',\n );\n }\n return context;\n}\n\n/**\n * Root props for the compound Combobox component.\n */\nexport type ComboboxRootProps<T extends string = string> = PropsWithChildren<\n UseComboboxOptions<T> & {\n /**\n * Optional selected value used for item highlighting when it differs from\n * the controlled value.\n */\n currentValue?: string;\n }\n>;\n\nfunction ComboboxRoot<T extends string = string>({\n value,\n onChange,\n currentValue,\n disabled,\n children,\n}: ComboboxRootProps<T>) {\n const {popoverProps, handleSelect, open} = useCombobox({\n value,\n onChange,\n disabled,\n });\n\n return (\n <ComboboxContext.Provider\n value={{\n open,\n disabled: Boolean(disabled),\n currentValue: currentValue ?? String(value),\n handleSelect,\n }}\n >\n <Popover {...popoverProps}>{children}</Popover>\n </ComboboxContext.Provider>\n );\n}\n\n/**\n * Props for the button that opens the combobox popover.\n */\nexport interface ComboboxTriggerProps {\n className?: string;\n ariaLabel?: string;\n}\n\nconst ComboboxTrigger: FC<PropsWithChildren<ComboboxTriggerProps>> = ({\n children,\n className,\n ariaLabel,\n}) => {\n const {disabled, open} = useComboboxContext();\n\n return (\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n role=\"combobox\"\n aria-expanded={open}\n aria-label={ariaLabel}\n disabled={disabled}\n className={cn('h-8 justify-between text-xs font-normal', className)}\n >\n {children}\n <ChevronsUpDown className=\"ml-2 h-3.5 w-3.5 shrink-0 opacity-50\" />\n </Button>\n </PopoverTrigger>\n );\n};\n\n/**\n * Props for the popover content that contains combobox options.\n */\nexport interface ComboboxContentProps {\n searchable?: boolean;\n searchPlaceholder?: string;\n emptyMessage?: string;\n}\n\nconst ComboboxContent: FC<PropsWithChildren<ComboboxContentProps>> = ({\n children,\n searchable = false,\n searchPlaceholder = 'Search...',\n emptyMessage = 'No matching option.',\n}) => {\n return (\n <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0 text-xs\">\n <Command>\n {searchable && (\n <CommandInput placeholder={searchPlaceholder} className=\"text-xs\" />\n )}\n <CommandList>\n <CommandEmpty>{emptyMessage}</CommandEmpty>\n <CommandGroup>{children}</CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n );\n};\n\n/**\n * Props for an individual selectable combobox item.\n */\nexport interface ComboboxItemProps {\n /**\n * Stable item value committed through the Combobox onChange handler.\n */\n value: string;\n /**\n * Optional display text or aliases used to match this item during search.\n */\n keywords?: string[];\n isSelected?: boolean;\n}\n\nconst ComboboxItem: FC<PropsWithChildren<ComboboxItemProps>> = ({\n value,\n keywords,\n children,\n isSelected,\n}) => {\n const {currentValue, handleSelect} = useComboboxContext();\n const selected = isSelected ?? currentValue === value;\n\n return (\n <CommandItem value={value} keywords={keywords} onSelect={handleSelect}>\n <Check\n className={cn(\n 'h-3.5 w-3.5 shrink-0',\n selected ? 'opacity-100' : 'opacity-0',\n )}\n />\n {children}\n </CommandItem>\n );\n};\n\n/**\n * Compound component for Popover-based combobox selectors.\n *\n * @example\n * ```tsx\n * <Combobox value={value} onChange={setValue}>\n * <Combobox.Trigger>\n * <span>{selectedLabel}</span>\n * </Combobox.Trigger>\n * <Combobox.Content searchable searchPlaceholder=\"Search...\">\n * {options.map((option) => (\n * <Combobox.Item key={option.value} value={option.value}>\n * <span>{option.label}</span>\n * </Combobox.Item>\n * ))}\n * </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport const Combobox = Object.assign(ComboboxRoot, {\n Trigger: ComboboxTrigger,\n Content: ComboboxContent,\n Item: ComboboxItem,\n});\n"]}
|
|
@@ -14,7 +14,7 @@ const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("
|
|
|
14
14
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
|
15
15
|
const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className), ...props })));
|
|
16
16
|
CommandList.displayName = CommandPrimitive.List.displayName;
|
|
17
|
-
const CommandEmpty = React.forwardRef((props, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className:
|
|
17
|
+
const CommandEmpty = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: cn('py-6 text-center text-sm', className), ...props })));
|
|
18
18
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
|
19
19
|
const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn('text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium', className), ...props })));
|
|
20
20
|
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.js","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,MAAM,CAAC;AACjD,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,MAAM,EAAE,aAAa,EAAC,MAAM,UAAU,CAAC;AAE/C,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAG9B,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,2FAA2F,EAC3F,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC;AAEnD,MAAM,aAAa,GAAG,CAAC,EAAC,QAAQ,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IAC1D,OAAO,CACL,KAAC,MAAM,OAAK,KAAK,YACf,KAAC,aAAa,IAAC,SAAS,EAAC,qBAAqB,YAC5C,KAAC,OAAO,IAAC,SAAS,EAAC,oXAAoX,YACpY,QAAQ,GACD,GACI,GACT,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAGnC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,eACE,SAAS,EAAC,iCAAiC,wBAExB,EAAE,aAErB,KAAC,MAAM,IAAC,SAAS,EAAC,kCAAkC,GAAG,EACvD,KAAC,gBAAgB,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,0JAA0J,EAC1J,SAAS,CACV,KACG,KAAK,GACT,IACE,CACP,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC;AAE9D,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,gBAAgB,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE,SAAS,CAAC,KACvE,KAAK,GACT,CACH,CAAC,CAAC;AAEH,WAAW,CAAC,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC;AAE5D,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAGnC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"command.js","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {type DialogProps} from '@radix-ui/react-dialog';\nimport {Command as CommandPrimitive} from 'cmdk';\nimport {Search} from 'lucide-react';\n\nimport {cn} from '../lib/utils';\nimport {Dialog, DialogContent} from './dialog';\n\nconst Command = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({className, ...props}, ref) => (\n <CommandPrimitive\n ref={ref}\n className={cn(\n 'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',\n className,\n )}\n {...props}\n />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nconst CommandDialog = ({children, ...props}: DialogProps) => {\n return (\n <Dialog {...props}>\n <DialogContent className=\"overflow-hidden p-0\">\n <Command className=\"**:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n );\n};\n\nconst CommandInput = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Input>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({className, ...props}, ref) => (\n <div\n className=\"flex items-center border-b px-3\"\n // eslint-disable-next-line react/no-unknown-property\n cmdk-input-wrapper=\"\"\n >\n <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <CommandPrimitive.Input\n ref={ref}\n className={cn(\n 'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n {...props}\n />\n </div>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst CommandList = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({className, ...props}, ref) => (\n <CommandPrimitive.List\n ref={ref}\n className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}\n {...props}\n />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Empty>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({className, ...props}, ref) => (\n <CommandPrimitive.Empty\n ref={ref}\n className={cn('py-6 text-center text-sm', className)}\n {...props}\n />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Group>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({className, ...props}, ref) => (\n <CommandPrimitive.Group\n ref={ref}\n className={cn(\n 'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',\n className,\n )}\n {...props}\n />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({className, ...props}, ref) => (\n <CommandPrimitive.Separator\n ref={ref}\n className={cn('bg-border -mx-1 h-px', className)}\n {...props}\n />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n React.ElementRef<typeof CommandPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({className, ...props}, ref) => (\n <CommandPrimitive.Item\n ref={ref}\n className={cn(\n 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n className,\n )}\n {...props}\n />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\n 'text-muted-foreground ml-auto text-xs tracking-widest',\n className,\n )}\n {...props}\n />\n );\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n};\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { CSSProperties, FC } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Component that allows the user to edit a string.
|
|
4
4
|
*
|
|
@@ -31,6 +31,7 @@ import { FC } from 'react';
|
|
|
31
31
|
*/
|
|
32
32
|
export declare const EditableText: FC<{
|
|
33
33
|
className?: string;
|
|
34
|
+
style?: CSSProperties;
|
|
34
35
|
isReadOnly?: boolean;
|
|
35
36
|
editTrigger?: 'click' | 'doubleClick';
|
|
36
37
|
value: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,aAAa,EACb,EAAE,EAKH,MAAM,OAAO,CAAC;AAKf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;;QAGI;IACJ,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;QAEI;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAuMA,CAAC"}
|