rivet-ui 0.1.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/LICENSE +21 -0
- package/README.md +120 -0
- package/dist/chunk-fjtwj9cw.js +79 -0
- package/dist/chunk-fjtwj9cw.js.map +10 -0
- package/dist/components/Accordion/Accordion.d.ts +7 -0
- package/dist/components/Accordion/Accordion.stories.d.ts +10 -0
- package/dist/components/Accordion/index.d.ts +1 -0
- package/dist/components/Accordion/index.js +62 -0
- package/dist/components/Accordion/index.js.map +10 -0
- package/dist/components/Alert/Alert.d.ts +15 -0
- package/dist/components/Alert/Alert.stories.d.ts +23 -0
- package/dist/components/Alert/index.d.ts +2 -0
- package/dist/components/Alert/index.js +57 -0
- package/dist/components/Alert/index.js.map +10 -0
- package/dist/components/AlertDialog/AlertDialog.d.ts +11 -0
- package/dist/components/AlertDialog/AlertDialog.stories.d.ts +9 -0
- package/dist/components/AlertDialog/index.d.ts +1 -0
- package/dist/components/AlertDialog/index.js +66 -0
- package/dist/components/AlertDialog/index.js.map +10 -0
- package/dist/components/Autocomplete/Autocomplete.d.ts +17 -0
- package/dist/components/Autocomplete/Autocomplete.stories.d.ts +6 -0
- package/dist/components/Autocomplete/index.d.ts +1 -0
- package/dist/components/Autocomplete/index.js +109 -0
- package/dist/components/Autocomplete/index.js.map +10 -0
- package/dist/components/Avatar/Avatar.d.ts +19 -0
- package/dist/components/Avatar/Avatar.stories.d.ts +29 -0
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/Avatar/index.js +65 -0
- package/dist/components/Avatar/index.js.map +10 -0
- package/dist/components/AvatarLabel/AvatarLabel.d.ts +12 -0
- package/dist/components/AvatarLabel/AvatarLabel.stories.d.ts +10 -0
- package/dist/components/AvatarLabel/index.d.ts +2 -0
- package/dist/components/AvatarLabel/index.js +74 -0
- package/dist/components/AvatarLabel/index.js.map +10 -0
- package/dist/components/Badge/Badge.d.ts +13 -0
- package/dist/components/Badge/Badge.stories.d.ts +25 -0
- package/dist/components/Badge/index.d.ts +2 -0
- package/dist/components/Badge/index.js +38 -0
- package/dist/components/Badge/index.js.map +10 -0
- package/dist/components/Button/Button.d.ts +15 -0
- package/dist/components/Button/Button.stories.d.ts +35 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/Button/index.js +44 -0
- package/dist/components/Button/index.js.map +10 -0
- package/dist/components/Card/Card.d.ts +6 -0
- package/dist/components/Card/Card.stories.d.ts +13 -0
- package/dist/components/Card/index.d.ts +1 -0
- package/dist/components/Card/index.js +47 -0
- package/dist/components/Card/index.js.map +10 -0
- package/dist/components/Checkbox/Checkbox.d.ts +6 -0
- package/dist/components/Checkbox/Checkbox.stories.d.ts +25 -0
- package/dist/components/Checkbox/index.d.ts +1 -0
- package/dist/components/Checkbox/index.js +68 -0
- package/dist/components/Checkbox/index.js.map +10 -0
- package/dist/components/Collapsible/Collapsible.d.ts +4 -0
- package/dist/components/Collapsible/Collapsible.stories.d.ts +10 -0
- package/dist/components/Collapsible/index.d.ts +1 -0
- package/dist/components/Collapsible/index.js +34 -0
- package/dist/components/Collapsible/index.js.map +10 -0
- package/dist/components/Combobox/Combobox.d.ts +24 -0
- package/dist/components/Combobox/Combobox.stories.d.ts +13 -0
- package/dist/components/Combobox/index.d.ts +1 -0
- package/dist/components/Combobox/index.js +162 -0
- package/dist/components/Combobox/index.js.map +10 -0
- package/dist/components/ConfirmDialog/ConfirmDialog.d.ts +22 -0
- package/dist/components/ConfirmDialog/ConfirmDialog.stories.d.ts +10 -0
- package/dist/components/ConfirmDialog/index.d.ts +2 -0
- package/dist/components/ConfirmDialog/index.js +85 -0
- package/dist/components/ConfirmDialog/index.js.map +10 -0
- package/dist/components/ContextMenu/ContextMenu.d.ts +21 -0
- package/dist/components/ContextMenu/ContextMenu.stories.d.ts +7 -0
- package/dist/components/ContextMenu/index.d.ts +1 -0
- package/dist/components/ContextMenu/index.js +117 -0
- package/dist/components/ContextMenu/index.js.map +10 -0
- package/dist/components/Dialog/Dialog.d.ts +11 -0
- package/dist/components/Dialog/Dialog.stories.d.ts +10 -0
- package/dist/components/Dialog/index.d.ts +1 -0
- package/dist/components/Dialog/index.js +66 -0
- package/dist/components/Dialog/index.js.map +10 -0
- package/dist/components/Drawer/Drawer.d.ts +13 -0
- package/dist/components/Drawer/Drawer.stories.d.ts +9 -0
- package/dist/components/Drawer/index.d.ts +1 -0
- package/dist/components/Drawer/index.js +81 -0
- package/dist/components/Drawer/index.js.map +10 -0
- package/dist/components/Field/Field.d.ts +8 -0
- package/dist/components/Field/Field.stories.d.ts +21 -0
- package/dist/components/Field/index.d.ts +1 -0
- package/dist/components/Field/index.js +52 -0
- package/dist/components/Field/index.js.map +10 -0
- package/dist/components/Fieldset/Fieldset.d.ts +3 -0
- package/dist/components/Fieldset/Fieldset.stories.d.ts +14 -0
- package/dist/components/Fieldset/index.d.ts +1 -0
- package/dist/components/Fieldset/index.js +27 -0
- package/dist/components/Fieldset/index.js.map +10 -0
- package/dist/components/Form/Form.d.ts +5 -0
- package/dist/components/Form/Form.stories.d.ts +5 -0
- package/dist/components/Form/index.d.ts +1 -0
- package/dist/components/Form/index.js +20 -0
- package/dist/components/Form/index.js.map +10 -0
- package/dist/components/Input/Input.d.ts +16 -0
- package/dist/components/Input/Input.stories.d.ts +34 -0
- package/dist/components/Input/index.d.ts +2 -0
- package/dist/components/Input/index.js +44 -0
- package/dist/components/Input/index.js.map +10 -0
- package/dist/components/Menu/Menu.d.ts +21 -0
- package/dist/components/Menu/Menu.stories.d.ts +9 -0
- package/dist/components/Menu/index.d.ts +1 -0
- package/dist/components/Menu/index.js +117 -0
- package/dist/components/Menu/index.js.map +10 -0
- package/dist/components/Menubar/Menubar.d.ts +2 -0
- package/dist/components/Menubar/Menubar.stories.d.ts +5 -0
- package/dist/components/Menubar/index.d.ts +1 -0
- package/dist/components/Menubar/index.js +20 -0
- package/dist/components/Menubar/index.js.map +10 -0
- package/dist/components/Meter/Meter.d.ts +6 -0
- package/dist/components/Meter/Meter.stories.d.ts +7 -0
- package/dist/components/Meter/index.d.ts +1 -0
- package/dist/components/Meter/index.js +48 -0
- package/dist/components/Meter/index.js.map +10 -0
- package/dist/components/NavigationMenu/NavigationMenu.d.ts +12 -0
- package/dist/components/NavigationMenu/NavigationMenu.stories.d.ts +5 -0
- package/dist/components/NavigationMenu/index.d.ts +1 -0
- package/dist/components/NavigationMenu/index.js +100 -0
- package/dist/components/NavigationMenu/index.js.map +10 -0
- package/dist/components/NumberField/NumberField.d.ts +8 -0
- package/dist/components/NumberField/NumberField.stories.d.ts +7 -0
- package/dist/components/NumberField/index.d.ts +1 -0
- package/dist/components/NumberField/index.js +84 -0
- package/dist/components/NumberField/index.js.map +10 -0
- package/dist/components/PageHeader/PageHeader.d.ts +10 -0
- package/dist/components/PageHeader/PageHeader.stories.d.ts +10 -0
- package/dist/components/PageHeader/index.d.ts +2 -0
- package/dist/components/PageHeader/index.js +48 -0
- package/dist/components/PageHeader/index.js.map +10 -0
- package/dist/components/Popover/Popover.d.ts +12 -0
- package/dist/components/Popover/Popover.stories.d.ts +9 -0
- package/dist/components/Popover/index.d.ts +1 -0
- package/dist/components/Popover/index.js +74 -0
- package/dist/components/Popover/index.js.map +10 -0
- package/dist/components/PreviewCard/PreviewCard.d.ts +9 -0
- package/dist/components/PreviewCard/PreviewCard.stories.d.ts +8 -0
- package/dist/components/PreviewCard/index.d.ts +1 -0
- package/dist/components/PreviewCard/index.js +53 -0
- package/dist/components/PreviewCard/index.js.map +10 -0
- package/dist/components/ProfileCard/ProfileCard.d.ts +19 -0
- package/dist/components/ProfileCard/ProfileCard.stories.d.ts +11 -0
- package/dist/components/ProfileCard/index.d.ts +2 -0
- package/dist/components/ProfileCard/index.js +97 -0
- package/dist/components/ProfileCard/index.js.map +10 -0
- package/dist/components/Progress/Progress.d.ts +6 -0
- package/dist/components/Progress/Progress.stories.d.ts +7 -0
- package/dist/components/Progress/index.d.ts +1 -0
- package/dist/components/Progress/index.js +48 -0
- package/dist/components/Progress/index.js.map +10 -0
- package/dist/components/Radio/Radio.d.ts +6 -0
- package/dist/components/Radio/Radio.stories.d.ts +20 -0
- package/dist/components/Radio/index.d.ts +1 -0
- package/dist/components/Radio/index.js +35 -0
- package/dist/components/Radio/index.js.map +10 -0
- package/dist/components/ScrollArea/ScrollArea.d.ts +7 -0
- package/dist/components/ScrollArea/ScrollArea.stories.d.ts +6 -0
- package/dist/components/ScrollArea/index.d.ts +1 -0
- package/dist/components/ScrollArea/index.js +55 -0
- package/dist/components/ScrollArea/index.js.map +10 -0
- package/dist/components/SearchField/SearchField.d.ts +11 -0
- package/dist/components/SearchField/SearchField.stories.d.ts +9 -0
- package/dist/components/SearchField/index.d.ts +2 -0
- package/dist/components/SearchField/index.js +65 -0
- package/dist/components/SearchField/index.js.map +10 -0
- package/dist/components/Select/Select.d.ts +19 -0
- package/dist/components/Select/Select.stories.d.ts +20 -0
- package/dist/components/Select/index.d.ts +1 -0
- package/dist/components/Select/index.js +143 -0
- package/dist/components/Select/index.js.map +10 -0
- package/dist/components/Separator/Separator.d.ts +2 -0
- package/dist/components/Separator/Separator.stories.d.ts +10 -0
- package/dist/components/Separator/index.d.ts +1 -0
- package/dist/components/Separator/index.js +20 -0
- package/dist/components/Separator/index.js.map +10 -0
- package/dist/components/Slider/Slider.d.ts +10 -0
- package/dist/components/Slider/Slider.stories.d.ts +7 -0
- package/dist/components/Slider/index.d.ts +1 -0
- package/dist/components/Slider/index.js +55 -0
- package/dist/components/Slider/index.js.map +10 -0
- package/dist/components/Switch/Switch.d.ts +3 -0
- package/dist/components/Switch/Switch.stories.d.ts +24 -0
- package/dist/components/Switch/index.d.ts +1 -0
- package/dist/components/Switch/index.js +27 -0
- package/dist/components/Switch/index.js.map +10 -0
- package/dist/components/Tabs/Tabs.d.ts +6 -0
- package/dist/components/Tabs/Tabs.stories.d.ts +9 -0
- package/dist/components/Tabs/index.d.ts +1 -0
- package/dist/components/Tabs/index.js +43 -0
- package/dist/components/Tabs/index.js.map +10 -0
- package/dist/components/Toast/Toast.d.ts +14 -0
- package/dist/components/Toast/Toast.stories.d.ts +8 -0
- package/dist/components/Toast/index.d.ts +1 -0
- package/dist/components/Toast/index.js +127 -0
- package/dist/components/Toast/index.js.map +10 -0
- package/dist/components/Toggle/Toggle.d.ts +3 -0
- package/dist/components/Toggle/Toggle.stories.d.ts +8 -0
- package/dist/components/Toggle/index.d.ts +1 -0
- package/dist/components/Toggle/index.js +20 -0
- package/dist/components/Toggle/index.js.map +10 -0
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +3 -0
- package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +6 -0
- package/dist/components/ToggleGroup/index.d.ts +1 -0
- package/dist/components/ToggleGroup/index.js +20 -0
- package/dist/components/ToggleGroup/index.js.map +10 -0
- package/dist/components/Toolbar/Toolbar.d.ts +7 -0
- package/dist/components/Toolbar/Toolbar.stories.d.ts +7 -0
- package/dist/components/Toolbar/index.d.ts +1 -0
- package/dist/components/Toolbar/index.js +50 -0
- package/dist/components/Toolbar/index.js.map +10 -0
- package/dist/components/Tooltip/Tooltip.d.ts +9 -0
- package/dist/components/Tooltip/Tooltip.stories.d.ts +9 -0
- package/dist/components/Tooltip/index.d.ts +1 -0
- package/dist/components/Tooltip/index.js +48 -0
- package/dist/components/Tooltip/index.js.map +10 -0
- package/dist/fonts.css +3 -0
- package/dist/index.d.ts +55 -0
- package/dist/index.js +620 -0
- package/dist/index.js.map +9 -0
- package/dist/stories/Camps.stories.d.ts +11 -0
- package/dist/stories/Plains.stories.d.ts +11 -0
- package/dist/stories/Theming.stories.d.ts +8 -0
- package/dist/stories/Typography.stories.d.ts +5 -0
- package/dist/styles.css +2 -0
- package/dist/utils/cn.d.ts +2 -0
- package/dist/utils/cn.js +1806 -0
- package/dist/utils/cn.js.map +12 -0
- package/dist/utils/cn.test.d.ts +1 -0
- package/package.json +266 -0
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare const ProgressRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
3
|
+
export declare const ProgressLabel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
4
|
+
export declare const ProgressTrack: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export declare const ProgressValue: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ProgressRoot, ProgressLabel, ProgressTrack, ProgressIndicator, ProgressValue } from './Progress';
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "../../utils/cn.js";
|
|
4
|
+
|
|
5
|
+
// src/components/Progress/Progress.tsx
|
|
6
|
+
import * as React from "react";
|
|
7
|
+
import { Progress } from "@base-ui/react/progress";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var ProgressRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Progress.Root, {
|
|
10
|
+
ref,
|
|
11
|
+
className: cn("flex w-full flex-col gap-1", className),
|
|
12
|
+
...props
|
|
13
|
+
}));
|
|
14
|
+
ProgressRoot.displayName = "ProgressRoot";
|
|
15
|
+
var ProgressLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Progress.Label, {
|
|
16
|
+
ref,
|
|
17
|
+
className: cn("text-sm font-medium text-kraft", className),
|
|
18
|
+
...props
|
|
19
|
+
}));
|
|
20
|
+
ProgressLabel.displayName = "ProgressLabel";
|
|
21
|
+
var ProgressTrack = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Progress.Track, {
|
|
22
|
+
ref,
|
|
23
|
+
className: cn("h-2 w-full overflow-hidden rounded-full bg-kraft/15", className),
|
|
24
|
+
...props
|
|
25
|
+
}));
|
|
26
|
+
ProgressTrack.displayName = "ProgressTrack";
|
|
27
|
+
var ProgressIndicator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Progress.Indicator, {
|
|
28
|
+
ref,
|
|
29
|
+
className: cn("h-full bg-ribbon transition-[width] duration-300 ease-in-out data-[status=indeterminate]:w-1/3 data-[status=indeterminate]:animate-[slide-in_1.5s_ease-in-out_infinite]", className),
|
|
30
|
+
...props
|
|
31
|
+
}));
|
|
32
|
+
ProgressIndicator.displayName = "ProgressIndicator";
|
|
33
|
+
var ProgressValue = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Progress.Value, {
|
|
34
|
+
ref,
|
|
35
|
+
className: cn("text-xs text-kraft/60", className),
|
|
36
|
+
...props
|
|
37
|
+
}));
|
|
38
|
+
ProgressValue.displayName = "ProgressValue";
|
|
39
|
+
export {
|
|
40
|
+
ProgressValue,
|
|
41
|
+
ProgressTrack,
|
|
42
|
+
ProgressRoot,
|
|
43
|
+
ProgressLabel,
|
|
44
|
+
ProgressIndicator
|
|
45
|
+
};
|
|
46
|
+
export { ProgressRoot, ProgressLabel, ProgressTrack, ProgressIndicator, ProgressValue };
|
|
47
|
+
|
|
48
|
+
//# debugId=EF3C47DB7BDFAAF864756E2164756E21
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/Progress/Progress.tsx"],
|
|
4
|
+
"sourcesContent": [
|
|
5
|
+
"import * as React from 'react';\nimport { Progress } from '@base-ui/react/progress';\nimport { cn } from '../../utils/cn';\n\nexport const ProgressRoot = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof Progress.Root>\n>(({ className, ...props }, ref) => (\n <Progress.Root\n ref={ref}\n className={cn('flex w-full flex-col gap-1', className)}\n {...props}\n />\n));\nProgressRoot.displayName = 'ProgressRoot';\n\nexport const ProgressLabel = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<typeof Progress.Label>\n>(({ className, ...props }, ref) => (\n <Progress.Label\n ref={ref}\n className={cn('text-sm font-medium text-kraft', className)}\n {...props}\n />\n));\nProgressLabel.displayName = 'ProgressLabel';\n\nexport const ProgressTrack = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof Progress.Track>\n>(({ className, ...props }, ref) => (\n <Progress.Track\n ref={ref}\n className={cn(\n 'h-2 w-full overflow-hidden rounded-full bg-kraft/15',\n className\n )}\n {...props}\n />\n));\nProgressTrack.displayName = 'ProgressTrack';\n\nexport const ProgressIndicator = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof Progress.Indicator>\n>(({ className, ...props }, ref) => (\n <Progress.Indicator\n ref={ref}\n className={cn(\n 'h-full bg-ribbon transition-[width] duration-300 ease-in-out data-[status=indeterminate]:w-1/3 data-[status=indeterminate]:animate-[slide-in_1.5s_ease-in-out_infinite]',\n className\n )}\n {...props}\n />\n));\nProgressIndicator.displayName = 'ProgressIndicator';\n\nexport const ProgressValue = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<typeof Progress.Value>\n>(({ className, ...props }, ref) => (\n <Progress.Value\n ref={ref}\n className={cn('text-xs text-kraft/60', className)}\n {...props}\n />\n));\nProgressValue.displayName = 'ProgressValue';\n"
|
|
6
|
+
],
|
|
7
|
+
"mappings": ";;;;;AAAA;AACA;;AAGO,IAAM,eAAqB,iBAGhC,GAAG,cAAc,SAAS,wBACxB,IAAC,SAAS,MAAV;AAAA,EACI;AAAA,EACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,KACjD;AAAA,CACR,CACH;AACD,aAAa,cAAc;AAEpB,IAAM,gBAAsB,iBAGjC,GAAG,cAAc,SAAS,wBACxB,IAAC,SAAS,OAAV;AAAA,EACI;AAAA,EACA,WAAW,GAAG,kCAAkC,SAAS;AAAA,KACrD;AAAA,CACR,CACH;AACD,cAAc,cAAc;AAErB,IAAM,gBAAsB,iBAGjC,GAAG,cAAc,SAAS,wBACxB,IAAC,SAAS,OAAV;AAAA,EACI;AAAA,EACA,WAAW,GACP,uDACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,cAAc,cAAc;AAErB,IAAM,oBAA0B,iBAGrC,GAAG,cAAc,SAAS,wBACxB,IAAC,SAAS,WAAV;AAAA,EACI;AAAA,EACA,WAAW,GACP,2KACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,kBAAkB,cAAc;AAEzB,IAAM,gBAAsB,iBAGjC,GAAG,cAAc,SAAS,wBACxB,IAAC,SAAS,OAAV;AAAA,EACI;AAAA,EACA,WAAW,GAAG,yBAAyB,SAAS;AAAA,KAC5C;AAAA,CACR,CACH;AACD,cAAc,cAAc;",
|
|
8
|
+
"debugId": "EF3C47DB7BDFAAF864756E2164756E21",
|
|
9
|
+
"names": []
|
|
10
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Radio as BaseRadio } from '@base-ui/react/radio';
|
|
2
|
+
import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<BaseRadioGroup.Props<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const RadioRoot: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").RadioGroup.Props<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
tags: string[];
|
|
10
|
+
argTypes: {
|
|
11
|
+
disabled: {
|
|
12
|
+
control: "boolean";
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default meta;
|
|
17
|
+
type Story = StoryObj<typeof meta>;
|
|
18
|
+
export declare const Default: Story;
|
|
19
|
+
export declare const Disabled: Story;
|
|
20
|
+
export declare const Horizontal: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { RadioGroup, RadioRoot, RadioIndicator } from './Radio';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "../../utils/cn.js";
|
|
4
|
+
|
|
5
|
+
// src/components/Radio/Radio.tsx
|
|
6
|
+
import { Radio as BaseRadio } from "@base-ui/react/radio";
|
|
7
|
+
import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
|
|
8
|
+
import React from "react";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var RadioGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseRadioGroup, {
|
|
11
|
+
ref,
|
|
12
|
+
className: cn("flex flex-col gap-2", className),
|
|
13
|
+
...props
|
|
14
|
+
}));
|
|
15
|
+
RadioGroup.displayName = "RadioGroup";
|
|
16
|
+
var RadioRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseRadio.Root, {
|
|
17
|
+
ref,
|
|
18
|
+
className: cn("flex size-5 shrink-0 items-center justify-center rounded-full border border-kraft/30 bg-surface transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-checked:border-ribbon data-checked:bg-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
|
|
19
|
+
...props
|
|
20
|
+
}));
|
|
21
|
+
RadioRoot.displayName = "RadioRoot";
|
|
22
|
+
var RadioIndicator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseRadio.Indicator, {
|
|
23
|
+
ref,
|
|
24
|
+
className: cn("flex before:size-2 before:rounded-full before:bg-white data-unchecked:hidden", className),
|
|
25
|
+
...props
|
|
26
|
+
}));
|
|
27
|
+
RadioIndicator.displayName = "RadioIndicator";
|
|
28
|
+
export {
|
|
29
|
+
RadioRoot,
|
|
30
|
+
RadioIndicator,
|
|
31
|
+
RadioGroup
|
|
32
|
+
};
|
|
33
|
+
export { RadioGroup, RadioRoot, RadioIndicator };
|
|
34
|
+
|
|
35
|
+
//# debugId=B8B585145B4DCD3B64756E2164756E21
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/Radio/Radio.tsx"],
|
|
4
|
+
"sourcesContent": [
|
|
5
|
+
"import { Radio as BaseRadio } from '@base-ui/react/radio';\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';\nimport React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const RadioGroup = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseRadioGroup>\n>(({ className, ...props }, ref) => (\n <BaseRadioGroup\n ref={ref}\n className={cn('flex flex-col gap-2', className)}\n {...props}\n />\n));\nRadioGroup.displayName = 'RadioGroup';\n\nexport const RadioRoot = React.forwardRef<\n HTMLButtonElement,\n React.ComponentPropsWithoutRef<typeof BaseRadio.Root>\n>(({ className, ...props }, ref) => (\n <BaseRadio.Root\n ref={ref}\n className={cn(\n 'flex size-5 shrink-0 items-center justify-center rounded-full border border-kraft/30 bg-surface transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-checked:border-ribbon data-checked:bg-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50',\n className\n )}\n {...props}\n />\n));\nRadioRoot.displayName = 'RadioRoot';\n\nexport const RadioIndicator = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<typeof BaseRadio.Indicator>\n>(({ className, ...props }, ref) => (\n <BaseRadio.Indicator\n ref={ref}\n className={cn(\n 'flex before:size-2 before:rounded-full before:bg-white data-unchecked:hidden',\n className\n )}\n {...props}\n />\n));\nRadioIndicator.displayName = 'RadioIndicator';\n"
|
|
6
|
+
],
|
|
7
|
+
"mappings": ";;;;;AAAA,kBAAS;AACT,uBAAS;AACT;;AAGO,IAAM,aAAa,MAAM,WAG9B,GAAG,cAAc,SAAS,wBACxB,IAAC,gBAAD;AAAA,EACI;AAAA,EACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,KAC1C;AAAA,CACR,CACH;AACD,WAAW,cAAc;AAElB,IAAM,YAAY,MAAM,WAG7B,GAAG,cAAc,SAAS,wBACxB,IAAC,UAAU,MAAX;AAAA,EACI;AAAA,EACA,WAAW,GACP,uUACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,UAAU,cAAc;AAEjB,IAAM,iBAAiB,MAAM,WAGlC,GAAG,cAAc,SAAS,wBACxB,IAAC,UAAU,WAAX;AAAA,EACI;AAAA,EACA,WAAW,GACP,gFACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,eAAe,cAAc;",
|
|
8
|
+
"debugId": "B8B585145B4DCD3B64756E2164756E21",
|
|
9
|
+
"names": []
|
|
10
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
3
|
+
export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
export declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner } from './ScrollArea';
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "../../utils/cn.js";
|
|
4
|
+
|
|
5
|
+
// src/components/ScrollArea/ScrollArea.tsx
|
|
6
|
+
import * as React from "react";
|
|
7
|
+
import { ScrollArea } from "@base-ui/react/scroll-area";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var ScrollAreaRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea.Root, {
|
|
10
|
+
ref,
|
|
11
|
+
className: cn("relative overflow-hidden", className),
|
|
12
|
+
...props
|
|
13
|
+
}));
|
|
14
|
+
ScrollAreaRoot.displayName = "ScrollAreaRoot";
|
|
15
|
+
var ScrollAreaViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea.Viewport, {
|
|
16
|
+
ref,
|
|
17
|
+
className: cn("h-full w-full rounded-[inherit]", className),
|
|
18
|
+
...props
|
|
19
|
+
}));
|
|
20
|
+
ScrollAreaViewport.displayName = "ScrollAreaViewport";
|
|
21
|
+
var ScrollAreaContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea.Content, {
|
|
22
|
+
ref,
|
|
23
|
+
className: cn("min-w-full table", className),
|
|
24
|
+
...props
|
|
25
|
+
}));
|
|
26
|
+
ScrollAreaContent.displayName = "ScrollAreaContent";
|
|
27
|
+
var ScrollAreaScrollbar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
|
|
28
|
+
ref,
|
|
29
|
+
className: cn("flex touch-none select-none rounded-full p-0.5 transition-[width,height,opacity] duration-150 ease-out data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5", className),
|
|
30
|
+
...props
|
|
31
|
+
}));
|
|
32
|
+
ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
|
|
33
|
+
var ScrollAreaThumb = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea.Thumb, {
|
|
34
|
+
ref,
|
|
35
|
+
className: cn("relative flex-1 rounded-full bg-kraft/25 transition-colors hover:bg-kraft/40", className),
|
|
36
|
+
...props
|
|
37
|
+
}));
|
|
38
|
+
ScrollAreaThumb.displayName = "ScrollAreaThumb";
|
|
39
|
+
var ScrollAreaCorner = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea.Corner, {
|
|
40
|
+
ref,
|
|
41
|
+
className: cn("bg-kraft/5", className),
|
|
42
|
+
...props
|
|
43
|
+
}));
|
|
44
|
+
ScrollAreaCorner.displayName = "ScrollAreaCorner";
|
|
45
|
+
export {
|
|
46
|
+
ScrollAreaViewport,
|
|
47
|
+
ScrollAreaThumb,
|
|
48
|
+
ScrollAreaScrollbar,
|
|
49
|
+
ScrollAreaRoot,
|
|
50
|
+
ScrollAreaCorner,
|
|
51
|
+
ScrollAreaContent
|
|
52
|
+
};
|
|
53
|
+
export { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner };
|
|
54
|
+
|
|
55
|
+
//# debugId=96891DEF6FB88A9464756E2164756E21
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/ScrollArea/ScrollArea.tsx"],
|
|
4
|
+
"sourcesContent": [
|
|
5
|
+
"import * as React from 'react';\nimport { ScrollArea } from '@base-ui/react/scroll-area';\nimport { cn } from '../../utils/cn';\n\nexport const ScrollAreaRoot = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof ScrollArea.Root>\n>(({ className, ...props }, ref) => (\n <ScrollArea.Root\n ref={ref}\n className={cn('relative overflow-hidden', className)}\n {...props}\n />\n));\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nexport const ScrollAreaViewport = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof ScrollArea.Viewport>\n>(({ className, ...props }, ref) => (\n <ScrollArea.Viewport\n ref={ref}\n className={cn('h-full w-full rounded-[inherit]', className)}\n {...props}\n />\n));\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof ScrollArea.Content>\n>(({ className, ...props }, ref) => (\n <ScrollArea.Content\n ref={ref}\n className={cn('min-w-full table', className)}\n {...props}\n />\n));\nScrollAreaContent.displayName = 'ScrollAreaContent';\n\nexport const ScrollAreaScrollbar = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof ScrollArea.Scrollbar>\n>(({ className, ...props }, ref) => (\n <ScrollArea.Scrollbar\n ref={ref}\n className={cn(\n 'flex touch-none select-none rounded-full p-0.5 transition-[width,height,opacity] duration-150 ease-out data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5',\n className\n )}\n {...props}\n />\n));\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof ScrollArea.Thumb>\n>(({ className, ...props }, ref) => (\n <ScrollArea.Thumb\n ref={ref}\n className={cn(\n 'relative flex-1 rounded-full bg-kraft/25 transition-colors hover:bg-kraft/40',\n className\n )}\n {...props}\n />\n));\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof ScrollArea.Corner>\n>(({ className, ...props }, ref) => (\n <ScrollArea.Corner\n ref={ref}\n className={cn('bg-kraft/5', className)}\n {...props}\n />\n));\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"
|
|
6
|
+
],
|
|
7
|
+
"mappings": ";;;;;AAAA;AACA;;AAGO,IAAM,iBAAuB,iBAGlC,GAAG,cAAc,SAAS,wBACxB,IAAC,WAAW,MAAZ;AAAA,EACI;AAAA,EACA,WAAW,GAAG,4BAA4B,SAAS;AAAA,KAC/C;AAAA,CACR,CACH;AACD,eAAe,cAAc;AAEtB,IAAM,qBAA2B,iBAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,WAAW,UAAZ;AAAA,EACI;AAAA,EACA,WAAW,GAAG,mCAAmC,SAAS;AAAA,KACtD;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;AAE1B,IAAM,oBAA0B,iBAGrC,GAAG,cAAc,SAAS,wBACxB,IAAC,WAAW,SAAZ;AAAA,EACI;AAAA,EACA,WAAW,GAAG,oBAAoB,SAAS;AAAA,KACvC;AAAA,CACR,CACH;AACD,kBAAkB,cAAc;AAEzB,IAAM,sBAA4B,iBAGvC,GAAG,cAAc,SAAS,wBACxB,IAAC,WAAW,WAAZ;AAAA,EACI;AAAA,EACA,WAAW,GACP,uNACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,oBAAoB,cAAc;AAE3B,IAAM,kBAAwB,iBAGnC,GAAG,cAAc,SAAS,wBACxB,IAAC,WAAW,OAAZ;AAAA,EACI;AAAA,EACA,WAAW,GACP,gFACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,gBAAgB,cAAc;AAEvB,IAAM,mBAAyB,iBAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,WAAW,QAAZ;AAAA,EACI;AAAA,EACA,WAAW,GAAG,cAAc,SAAS;AAAA,KACjC;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;",
|
|
8
|
+
"debugId": "96891DEF6FB88A9464756E2164756E21",
|
|
9
|
+
"names": []
|
|
10
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface SearchFieldProps {
|
|
2
|
+
placeholder?: string;
|
|
3
|
+
buttonLabel?: string;
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
value?: string;
|
|
6
|
+
onValueChange?: (value: string) => void;
|
|
7
|
+
onSearch?: (value: string) => void;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare function SearchField({ placeholder, buttonLabel, defaultValue, value: controlledValue, onValueChange, onSearch, disabled, className }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { SearchField } from './SearchField';
|
|
3
|
+
declare const meta: Meta<typeof SearchField>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof SearchField>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Disabled: Story;
|
|
8
|
+
export declare const WithCallback: Story;
|
|
9
|
+
export declare const Controlled: Story;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Input
|
|
3
|
+
} from "../Input/index.js";
|
|
4
|
+
import {
|
|
5
|
+
Button
|
|
6
|
+
} from "../Button/index.js";
|
|
7
|
+
import"../../chunk-fjtwj9cw.js";
|
|
8
|
+
import {
|
|
9
|
+
cn
|
|
10
|
+
} from "../../utils/cn.js";
|
|
11
|
+
|
|
12
|
+
// src/components/SearchField/SearchField.tsx
|
|
13
|
+
import * as React from "react";
|
|
14
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
+
function SearchField({
|
|
16
|
+
placeholder = "Search…",
|
|
17
|
+
buttonLabel = "Search",
|
|
18
|
+
defaultValue,
|
|
19
|
+
value: controlledValue,
|
|
20
|
+
onValueChange,
|
|
21
|
+
onSearch,
|
|
22
|
+
disabled,
|
|
23
|
+
className
|
|
24
|
+
}) {
|
|
25
|
+
const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
|
|
26
|
+
const isControlled = controlledValue !== undefined;
|
|
27
|
+
const value = isControlled ? controlledValue : internalValue;
|
|
28
|
+
function handleChange(e) {
|
|
29
|
+
if (isControlled) {
|
|
30
|
+
onValueChange?.(e.target.value);
|
|
31
|
+
} else {
|
|
32
|
+
setInternalValue(e.target.value);
|
|
33
|
+
onValueChange?.(e.target.value);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
function handleSubmit(e) {
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
onSearch?.(value);
|
|
39
|
+
}
|
|
40
|
+
return /* @__PURE__ */ jsxs("form", {
|
|
41
|
+
onSubmit: handleSubmit,
|
|
42
|
+
className: cn("flex gap-2", className),
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ jsx(Input, {
|
|
45
|
+
placeholder,
|
|
46
|
+
value,
|
|
47
|
+
onChange: handleChange,
|
|
48
|
+
disabled,
|
|
49
|
+
className: "flex-1",
|
|
50
|
+
"aria-label": placeholder
|
|
51
|
+
}),
|
|
52
|
+
/* @__PURE__ */ jsx(Button, {
|
|
53
|
+
type: "submit",
|
|
54
|
+
disabled,
|
|
55
|
+
children: buttonLabel
|
|
56
|
+
})
|
|
57
|
+
]
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
export {
|
|
61
|
+
SearchField
|
|
62
|
+
};
|
|
63
|
+
export { SearchField };
|
|
64
|
+
|
|
65
|
+
//# debugId=0CD0DAA7301F214464756E2164756E21
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/SearchField/SearchField.tsx"],
|
|
4
|
+
"sourcesContent": [
|
|
5
|
+
"import * as React from 'react';\nimport { Input } from '../Input';\nimport { Button } from '../Button';\nimport { cn } from '../../utils/cn';\n\nexport interface SearchFieldProps {\n placeholder?: string;\n buttonLabel?: string;\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n onSearch?: (value: string) => void;\n disabled?: boolean;\n className?: string;\n}\n\nexport function SearchField({\n placeholder = 'Search…',\n buttonLabel = 'Search',\n defaultValue,\n value: controlledValue,\n onValueChange,\n onSearch,\n disabled,\n className\n}: SearchFieldProps) {\n const [internalValue, setInternalValue] = React.useState(\n defaultValue ?? ''\n );\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n\n function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n if (isControlled) {\n onValueChange?.(e.target.value);\n } else {\n setInternalValue(e.target.value);\n onValueChange?.(e.target.value);\n }\n }\n\n function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n onSearch?.(value);\n }\n\n return (\n <form onSubmit={handleSubmit} className={cn('flex gap-2', className)}>\n <Input\n placeholder={placeholder}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n className=\"flex-1\"\n aria-label={placeholder}\n />\n <Button type=\"submit\" disabled={disabled}>\n {buttonLabel}\n </Button>\n </form>\n );\n}\n"
|
|
6
|
+
],
|
|
7
|
+
"mappings": ";;;;;;;;;;;;AAAA;;AAgBO,SAAS,WAAW;AAAA,EACvB,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GACiB;AAAA,EACjB,OAAO,eAAe,oBAA0B,eAC5C,gBAAgB,EACpB;AAAA,EACA,MAAM,eAAe,oBAAoB;AAAA,EACzC,MAAM,QAAQ,eAAe,kBAAkB;AAAA,EAE/C,SAAS,YAAY,CAAC,GAAwC;AAAA,IAC1D,IAAI,cAAc;AAAA,MACd,gBAAgB,EAAE,OAAO,KAAK;AAAA,IAClC,EAAO;AAAA,MACH,iBAAiB,EAAE,OAAO,KAAK;AAAA,MAC/B,gBAAgB,EAAE,OAAO,KAAK;AAAA;AAAA;AAAA,EAItC,SAAS,YAAY,CAAC,GAAoB;AAAA,IACtC,EAAE,eAAe;AAAA,IACjB,WAAW,KAAK;AAAA;AAAA,EAGpB,uBACI,KAYE,QAZF;AAAA,IAAM,UAAU;AAAA,IAAc,WAAW,GAAG,cAAc,SAAS;AAAA,IAAnE,UAYE;AAAA,sBAXE,IAAC,OAAD;AAAA,QACI;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,WAAU;AAAA,QACV,cAAY;AAAA,OAChB;AAAA,sBACA,IAEE,QAFF;AAAA,QAAQ,MAAK;AAAA,QAAS;AAAA,QAAtB,UACK;AAAA,OACH;AAAA;AAAA,GACJ;AAAA;",
|
|
8
|
+
"debugId": "0CD0DAA7301F214464756E2164756E21",
|
|
9
|
+
"names": []
|
|
10
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Select as BaseSelect } from '@base-ui/react/select';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export declare const SelectRoot: typeof BaseSelect.Root;
|
|
4
|
+
export declare const SelectPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
export declare const SelectBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
export declare const SelectValue: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
10
|
+
export declare const SelectIcon: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
11
|
+
export declare const SelectPositioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export declare const SelectList: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export declare const SelectItem: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export declare const SelectItemText: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemTextProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
+
export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
17
|
+
export declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof import("@base-ui/react").SelectRoot;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
argTypes: {
|
|
10
|
+
disabled: {
|
|
11
|
+
control: "boolean";
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
type Story = StoryObj<typeof meta>;
|
|
17
|
+
export declare const Default: Story;
|
|
18
|
+
export declare const WithDefaultValue: Story;
|
|
19
|
+
export declare const Disabled: Story;
|
|
20
|
+
export declare const Grouped: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SelectRoot, SelectPortal, SelectBackdrop, SelectGroup, SelectSeparator, SelectTrigger, SelectValue, SelectIcon, SelectPositioner, SelectPopup, SelectList, SelectItem, SelectItemText, SelectItemIndicator, SelectGroupLabel, SelectScrollUpArrow, SelectScrollDownArrow } from './Select';
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import {
|
|
2
|
+
cn
|
|
3
|
+
} from "../../utils/cn.js";
|
|
4
|
+
|
|
5
|
+
// src/components/Select/Select.tsx
|
|
6
|
+
import { Select as BaseSelect } from "@base-ui/react/select";
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
function CheckIcon(props) {
|
|
10
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
11
|
+
fill: "currentcolor",
|
|
12
|
+
width: "10",
|
|
13
|
+
height: "10",
|
|
14
|
+
viewBox: "0 0 10 10",
|
|
15
|
+
"aria-hidden": true,
|
|
16
|
+
...props,
|
|
17
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
18
|
+
d: "M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"
|
|
19
|
+
})
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function ChevronUpDownIcon(props) {
|
|
23
|
+
return /* @__PURE__ */ jsxs("svg", {
|
|
24
|
+
width: "8",
|
|
25
|
+
height: "12",
|
|
26
|
+
viewBox: "0 0 8 12",
|
|
27
|
+
fill: "none",
|
|
28
|
+
stroke: "currentcolor",
|
|
29
|
+
strokeWidth: "1.5",
|
|
30
|
+
"aria-hidden": true,
|
|
31
|
+
...props,
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ jsx("path", {
|
|
34
|
+
d: "M0.5 4.5L4 1.5L7.5 4.5"
|
|
35
|
+
}),
|
|
36
|
+
/* @__PURE__ */ jsx("path", {
|
|
37
|
+
d: "M0.5 7.5L4 10.5L7.5 7.5"
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
var SelectRoot = BaseSelect.Root;
|
|
43
|
+
var SelectPortal = BaseSelect.Portal;
|
|
44
|
+
var SelectBackdrop = BaseSelect.Backdrop;
|
|
45
|
+
var SelectGroup = BaseSelect.Group;
|
|
46
|
+
var SelectSeparator = BaseSelect.Separator;
|
|
47
|
+
var SelectTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.Trigger, {
|
|
48
|
+
ref,
|
|
49
|
+
className: cn("flex h-10 min-w-36 items-center justify-between gap-2 rounded-lg border border-kraft/25 bg-surface px-3 text-sm text-kraft transition-colors select-none hover:not-data-disabled:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-popup-open:bg-canvas data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
|
|
50
|
+
...props
|
|
51
|
+
}));
|
|
52
|
+
SelectTrigger.displayName = "SelectTrigger";
|
|
53
|
+
var SelectValue = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.Value, {
|
|
54
|
+
ref,
|
|
55
|
+
className: cn("data-placeholder:text-kraft/40", className),
|
|
56
|
+
...props
|
|
57
|
+
}));
|
|
58
|
+
SelectValue.displayName = "SelectValue";
|
|
59
|
+
var SelectIcon = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.Icon, {
|
|
60
|
+
ref,
|
|
61
|
+
className: cn("flex text-kraft/50", className),
|
|
62
|
+
...props,
|
|
63
|
+
children: children ?? /* @__PURE__ */ jsx(ChevronUpDownIcon, {})
|
|
64
|
+
}));
|
|
65
|
+
SelectIcon.displayName = "SelectIcon";
|
|
66
|
+
var SelectPositioner = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.Positioner, {
|
|
67
|
+
ref,
|
|
68
|
+
className: cn("z-50 outline-none select-none", className),
|
|
69
|
+
sideOffset: 8,
|
|
70
|
+
...props
|
|
71
|
+
}));
|
|
72
|
+
SelectPositioner.displayName = "SelectPositioner";
|
|
73
|
+
var SelectPopup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.Popup, {
|
|
74
|
+
ref,
|
|
75
|
+
className: cn("min-w-[var(--anchor-width)] max-h-[min(var(--available-height),22rem)] overflow-y-auto rounded-lg border border-kraft/15 bg-surface py-1 shadow-lg shadow-kraft/10 origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0", className),
|
|
76
|
+
...props
|
|
77
|
+
}));
|
|
78
|
+
SelectPopup.displayName = "SelectPopup";
|
|
79
|
+
var SelectList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.List, {
|
|
80
|
+
ref,
|
|
81
|
+
className: cn("outline-none relative scroll-py-6 py-1", className),
|
|
82
|
+
...props
|
|
83
|
+
}));
|
|
84
|
+
SelectList.displayName = "SelectList";
|
|
85
|
+
var SelectItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.Item, {
|
|
86
|
+
ref,
|
|
87
|
+
className: cn("relative grid cursor-default select-none grid-cols-[0.875rem_1fr] items-center gap-2 px-3 py-2 text-sm text-kraft outline-none data-disabled:pointer-events-none data-disabled:opacity-50", 'data-highlighted:before:absolute data-highlighted:before:inset-x-1.5 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-lg data-highlighted:before:bg-kraft data-highlighted:before:content-[""] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white', className),
|
|
88
|
+
...props
|
|
89
|
+
}));
|
|
90
|
+
SelectItem.displayName = "SelectItem";
|
|
91
|
+
var SelectItemText = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.ItemText, {
|
|
92
|
+
ref,
|
|
93
|
+
className: cn("col-start-2", className),
|
|
94
|
+
...props
|
|
95
|
+
}));
|
|
96
|
+
SelectItemText.displayName = "SelectItemText";
|
|
97
|
+
var SelectItemIndicator = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.ItemIndicator, {
|
|
98
|
+
ref,
|
|
99
|
+
className: cn("col-start-1", className),
|
|
100
|
+
...props,
|
|
101
|
+
children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
|
|
102
|
+
}));
|
|
103
|
+
SelectItemIndicator.displayName = "SelectItemIndicator";
|
|
104
|
+
var SelectGroupLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.GroupLabel, {
|
|
105
|
+
ref,
|
|
106
|
+
className: cn("px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-kraft/50", className),
|
|
107
|
+
...props
|
|
108
|
+
}));
|
|
109
|
+
SelectGroupLabel.displayName = "SelectGroupLabel";
|
|
110
|
+
var SelectScrollUpArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.ScrollUpArrow, {
|
|
111
|
+
ref,
|
|
112
|
+
className: cn('top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center text-kraft/50 before:absolute before:inset-x-0 before:h-full before:content-[""]', className),
|
|
113
|
+
...props
|
|
114
|
+
}));
|
|
115
|
+
SelectScrollUpArrow.displayName = "SelectScrollUpArrow";
|
|
116
|
+
var SelectScrollDownArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseSelect.ScrollDownArrow, {
|
|
117
|
+
ref,
|
|
118
|
+
className: cn('bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center text-kraft/50 before:absolute before:inset-x-0 before:h-full before:content-[""]', className),
|
|
119
|
+
...props
|
|
120
|
+
}));
|
|
121
|
+
SelectScrollDownArrow.displayName = "SelectScrollDownArrow";
|
|
122
|
+
export {
|
|
123
|
+
SelectValue,
|
|
124
|
+
SelectTrigger,
|
|
125
|
+
SelectSeparator,
|
|
126
|
+
SelectScrollUpArrow,
|
|
127
|
+
SelectScrollDownArrow,
|
|
128
|
+
SelectRoot,
|
|
129
|
+
SelectPositioner,
|
|
130
|
+
SelectPortal,
|
|
131
|
+
SelectPopup,
|
|
132
|
+
SelectList,
|
|
133
|
+
SelectItemText,
|
|
134
|
+
SelectItemIndicator,
|
|
135
|
+
SelectItem,
|
|
136
|
+
SelectIcon,
|
|
137
|
+
SelectGroupLabel,
|
|
138
|
+
SelectGroup,
|
|
139
|
+
SelectBackdrop
|
|
140
|
+
};
|
|
141
|
+
export { SelectRoot, SelectPortal, SelectBackdrop, SelectGroup, SelectSeparator, SelectTrigger, SelectValue, SelectIcon, SelectPositioner, SelectPopup, SelectList, SelectItem, SelectItemText, SelectItemIndicator, SelectGroupLabel, SelectScrollUpArrow, SelectScrollDownArrow };
|
|
142
|
+
|
|
143
|
+
//# debugId=9A78DFC081AB978C64756E2164756E21
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/Select/Select.tsx"],
|
|
4
|
+
"sourcesContent": [
|
|
5
|
+
"import { Select as BaseSelect } from '@base-ui/react/select';\nimport React from 'react';\nimport { cn } from '../../utils/cn';\n\nfunction CheckIcon(props: React.ComponentProps<'svg'>) {\n return (\n <svg\n fill=\"currentcolor\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n aria-hidden\n {...props}\n >\n <path d=\"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z\" />\n </svg>\n );\n}\n\nfunction ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {\n return (\n <svg\n width=\"8\"\n height=\"12\"\n viewBox=\"0 0 8 12\"\n fill=\"none\"\n stroke=\"currentcolor\"\n strokeWidth=\"1.5\"\n aria-hidden\n {...props}\n >\n <path d=\"M0.5 4.5L4 1.5L7.5 4.5\" />\n <path d=\"M0.5 7.5L4 10.5L7.5 7.5\" />\n </svg>\n );\n}\n\nexport const SelectRoot = BaseSelect.Root;\nexport const SelectPortal = BaseSelect.Portal;\nexport const SelectBackdrop = BaseSelect.Backdrop;\nexport const SelectGroup = BaseSelect.Group;\nexport const SelectSeparator = BaseSelect.Separator;\n\nexport const SelectTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>\n>(({ className, ...props }, ref) => (\n <BaseSelect.Trigger\n ref={ref}\n className={cn(\n 'flex h-10 min-w-36 items-center justify-between gap-2 rounded-lg border border-kraft/25 bg-surface px-3 text-sm text-kraft transition-colors select-none hover:not-data-disabled:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-popup-open:bg-canvas data-disabled:cursor-not-allowed data-disabled:opacity-50',\n className\n )}\n {...props}\n />\n));\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport const SelectValue = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.Value>\n>(({ className, ...props }, ref) => (\n <BaseSelect.Value\n ref={ref}\n className={cn('data-placeholder:text-kraft/40', className)}\n {...props}\n />\n));\nSelectValue.displayName = 'SelectValue';\n\nexport const SelectIcon = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.Icon>\n>(({ className, children, ...props }, ref) => (\n <BaseSelect.Icon\n ref={ref}\n className={cn('flex text-kraft/50', className)}\n {...props}\n >\n {children ?? <ChevronUpDownIcon />}\n </BaseSelect.Icon>\n));\nSelectIcon.displayName = 'SelectIcon';\n\nexport const SelectPositioner = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.Positioner>\n>(({ className, ...props }, ref) => (\n <BaseSelect.Positioner\n ref={ref}\n className={cn('z-50 outline-none select-none', className)}\n sideOffset={8}\n {...props}\n />\n));\nSelectPositioner.displayName = 'SelectPositioner';\n\nexport const SelectPopup = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.Popup>\n>(({ className, ...props }, ref) => (\n <BaseSelect.Popup\n ref={ref}\n className={cn(\n 'min-w-[var(--anchor-width)] max-h-[min(var(--available-height),22rem)] overflow-y-auto rounded-lg border border-kraft/15 bg-surface py-1 shadow-lg shadow-kraft/10 origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',\n className\n )}\n {...props}\n />\n));\nSelectPopup.displayName = 'SelectPopup';\n\nexport const SelectList = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.List>\n>(({ className, ...props }, ref) => (\n <BaseSelect.List\n ref={ref}\n className={cn('outline-none relative scroll-py-6 py-1', className)}\n {...props}\n />\n));\nSelectList.displayName = 'SelectList';\n\nexport const SelectItem = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.Item>\n>(({ className, ...props }, ref) => (\n <BaseSelect.Item\n ref={ref}\n className={cn(\n 'relative grid cursor-default select-none grid-cols-[0.875rem_1fr] items-center gap-2 px-3 py-2 text-sm text-kraft outline-none data-disabled:pointer-events-none data-disabled:opacity-50',\n 'data-highlighted:before:absolute data-highlighted:before:inset-x-1.5 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-lg data-highlighted:before:bg-kraft data-highlighted:before:content-[\"\"] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white',\n className\n )}\n {...props}\n />\n));\nSelectItem.displayName = 'SelectItem';\n\nexport const SelectItemText = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.ItemText>\n>(({ className, ...props }, ref) => (\n <BaseSelect.ItemText\n ref={ref}\n className={cn('col-start-2', className)}\n {...props}\n />\n));\nSelectItemText.displayName = 'SelectItemText';\n\nexport const SelectItemIndicator = React.forwardRef<\n HTMLSpanElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>\n>(({ className, children, ...props }, ref) => (\n <BaseSelect.ItemIndicator\n ref={ref}\n className={cn('col-start-1', className)}\n {...props}\n >\n {children ?? <CheckIcon />}\n </BaseSelect.ItemIndicator>\n));\nSelectItemIndicator.displayName = 'SelectItemIndicator';\n\nexport const SelectGroupLabel = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>\n>(({ className, ...props }, ref) => (\n <BaseSelect.GroupLabel\n ref={ref}\n className={cn(\n 'px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-kraft/50',\n className\n )}\n {...props}\n />\n));\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport const SelectScrollUpArrow = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.ScrollUpArrow>\n>(({ className, ...props }, ref) => (\n <BaseSelect.ScrollUpArrow\n ref={ref}\n className={cn(\n 'top-0 z-[1] flex h-4 w-full cursor-default items-center justify-center text-kraft/50 before:absolute before:inset-x-0 before:h-full before:content-[\"\"]',\n className\n )}\n {...props}\n />\n));\nSelectScrollUpArrow.displayName = 'SelectScrollUpArrow';\n\nexport const SelectScrollDownArrow = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<typeof BaseSelect.ScrollDownArrow>\n>(({ className, ...props }, ref) => (\n <BaseSelect.ScrollDownArrow\n ref={ref}\n className={cn(\n 'bottom-0 z-[1] flex h-4 w-full cursor-default items-center justify-center text-kraft/50 before:absolute before:inset-x-0 before:h-full before:content-[\"\"]',\n className\n )}\n {...props}\n />\n));\nSelectScrollDownArrow.displayName = 'SelectScrollDownArrow';\n"
|
|
6
|
+
],
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "9A78DFC081AB978C64756E2164756E21",
|
|
9
|
+
"names": []
|
|
10
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
tags: string[];
|
|
5
|
+
};
|
|
6
|
+
export default meta;
|
|
7
|
+
type Story = StoryObj;
|
|
8
|
+
export declare const Horizontal: Story;
|
|
9
|
+
export declare const Vertical: Story;
|
|
10
|
+
export declare const InNav: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SeparatorRoot } from './Separator';
|