@lglab/compose-ui 0.28.0 → 0.29.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/dist/accordion.d.ts +49 -40
- package/dist/accordion.d.ts.map +1 -0
- package/dist/accordion.js +47 -45
- package/dist/accordion.js.map +1 -0
- package/dist/alert-dialog.d.ts +93 -87
- package/dist/alert-dialog.d.ts.map +1 -0
- package/dist/alert-dialog.js +94 -111
- package/dist/alert-dialog.js.map +1 -0
- package/dist/autocomplete.d.ts +99 -96
- package/dist/autocomplete.d.ts.map +1 -0
- package/dist/autocomplete.js +92 -116
- package/dist/autocomplete.js.map +1 -0
- package/dist/avatar.d.ts +56 -47
- package/dist/avatar.d.ts.map +1 -0
- package/dist/avatar.js +66 -79
- package/dist/avatar.js.map +1 -0
- package/dist/badge.d.ts +48 -42
- package/dist/badge.d.ts.map +1 -0
- package/dist/badge.js +195 -202
- package/dist/badge.js.map +1 -0
- package/dist/button.d.ts +26 -21
- package/dist/button.d.ts.map +1 -0
- package/dist/button.js +24 -24
- package/dist/button.js.map +1 -0
- package/dist/card.d.ts +105 -99
- package/dist/card.d.ts.map +1 -0
- package/dist/card.js +105 -66
- package/dist/card.js.map +1 -0
- package/dist/checkbox-group.d.ts +16 -12
- package/dist/checkbox-group.d.ts.map +1 -0
- package/dist/checkbox-group.js +18 -14
- package/dist/checkbox-group.js.map +1 -0
- package/dist/checkbox.d.ts +25 -19
- package/dist/checkbox.d.ts.map +1 -0
- package/dist/checkbox.js +26 -32
- package/dist/checkbox.js.map +1 -0
- package/dist/collapsible.d.ts +32 -26
- package/dist/collapsible.d.ts.map +1 -0
- package/dist/collapsible.js +32 -32
- package/dist/collapsible.js.map +1 -0
- package/dist/combobox.d.ts +191 -182
- package/dist/combobox.d.ts.map +1 -0
- package/dist/combobox.js +176 -250
- package/dist/combobox.js.map +1 -0
- package/dist/context-menu.d.ts +151 -138
- package/dist/context-menu.d.ts.map +1 -0
- package/dist/context-menu.js +151 -173
- package/dist/context-menu.js.map +1 -0
- package/dist/dialog.d.ts +101 -92
- package/dist/dialog.d.ts.map +1 -0
- package/dist/dialog.js +101 -105
- package/dist/dialog.js.map +1 -0
- package/dist/drawer.d.ts +109 -99
- package/dist/drawer.d.ts.map +1 -0
- package/dist/drawer.js +120 -111
- package/dist/drawer.js.map +1 -0
- package/dist/field.d.ts +61 -54
- package/dist/field.d.ts.map +1 -0
- package/dist/field.js +58 -27
- package/dist/field.js.map +1 -0
- package/dist/fieldset.d.ts +24 -19
- package/dist/fieldset.d.ts.map +1 -0
- package/dist/fieldset.js +26 -18
- package/dist/fieldset.js.map +1 -0
- package/dist/form.d.ts +16 -12
- package/dist/form.d.ts.map +1 -0
- package/dist/form.js +18 -8
- package/dist/form.js.map +1 -0
- package/dist/index.d.ts +44 -2115
- package/dist/index.js +44 -318
- package/dist/input.d.ts +16 -12
- package/dist/input.d.ts.map +1 -0
- package/dist/input.js +19 -9
- package/dist/input.js.map +1 -0
- package/dist/lib/arrow-svg.js +28 -0
- package/dist/lib/arrow-svg.js.map +1 -0
- package/dist/lib/button-variants.d.ts +6 -0
- package/dist/lib/button-variants.d.ts.map +1 -0
- package/dist/lib/button-variants.js +31 -0
- package/dist/lib/button-variants.js.map +1 -0
- package/dist/lib/control-variants.d.ts +6 -0
- package/dist/lib/control-variants.d.ts.map +1 -0
- package/dist/lib/control-variants.js +37 -0
- package/dist/lib/control-variants.js.map +1 -0
- package/dist/lib/form-variants.js +11 -0
- package/dist/lib/form-variants.js.map +1 -0
- package/dist/lib/tooltip-variants.d.ts +5 -0
- package/dist/lib/tooltip-variants.d.ts.map +1 -0
- package/dist/lib/tooltip-variants.js +36 -0
- package/dist/lib/tooltip-variants.js.map +1 -0
- package/dist/lib/utils.js +11 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/menu.d.ts +151 -138
- package/dist/menu.d.ts.map +1 -0
- package/dist/menu.js +151 -146
- package/dist/menu.js.map +1 -0
- package/dist/menubar.d.ts +168 -155
- package/dist/menubar.d.ts.map +1 -0
- package/dist/menubar.js +163 -169
- package/dist/menubar.js.map +1 -0
- package/dist/meter.d.ts +53 -43
- package/dist/meter.d.ts.map +1 -0
- package/dist/meter.js +59 -64
- package/dist/meter.js.map +1 -0
- package/dist/navigation-menu.d.ts +111 -96
- package/dist/navigation-menu.d.ts.map +1 -0
- package/dist/navigation-menu.js +117 -175
- package/dist/navigation-menu.js.map +1 -0
- package/dist/number-field.d.ts +64 -54
- package/dist/number-field.d.ts.map +1 -0
- package/dist/number-field.js +61 -69
- package/dist/number-field.js.map +1 -0
- package/dist/popover.d.ts +90 -82
- package/dist/popover.d.ts.map +1 -0
- package/dist/popover.js +85 -94
- package/dist/popover.js.map +1 -0
- package/dist/preview-card.d.ts +58 -54
- package/dist/preview-card.d.ts.map +1 -0
- package/dist/preview-card.js +57 -81
- package/dist/preview-card.js.map +1 -0
- package/dist/progress.d.ts +48 -40
- package/dist/progress.d.ts.map +1 -0
- package/dist/progress.js +46 -50
- package/dist/progress.js.map +1 -0
- package/dist/radio-group.d.ts +16 -12
- package/dist/radio-group.d.ts.map +1 -0
- package/dist/radio-group.js +18 -14
- package/dist/radio-group.js.map +1 -0
- package/dist/radio.d.ts +24 -19
- package/dist/radio.d.ts.map +1 -0
- package/dist/radio.js +25 -34
- package/dist/radio.js.map +1 -0
- package/dist/scroll-area.d.ts +57 -47
- package/dist/scroll-area.d.ts.map +1 -0
- package/dist/scroll-area.js +54 -56
- package/dist/scroll-area.js.map +1 -0
- package/dist/select.d.ts +146 -133
- package/dist/select.d.ts.map +1 -0
- package/dist/select.js +133 -167
- package/dist/select.js.map +1 -0
- package/dist/separator.d.ts +17 -12
- package/dist/separator.d.ts.map +1 -0
- package/dist/separator.js +19 -23
- package/dist/separator.js.map +1 -0
- package/dist/skeleton.d.ts +20 -0
- package/dist/skeleton.d.ts.map +1 -0
- package/dist/skeleton.js +27 -0
- package/dist/skeleton.js.map +1 -0
- package/dist/slider.d.ts +56 -47
- package/dist/slider.d.ts.map +1 -0
- package/dist/slider.js +53 -62
- package/dist/slider.js.map +1 -0
- package/dist/styles/default.css +14 -0
- package/dist/switch.d.ts +24 -19
- package/dist/switch.d.ts.map +1 -0
- package/dist/switch.js +23 -39
- package/dist/switch.js.map +1 -0
- package/dist/tabs.d.ts +60 -49
- package/dist/tabs.d.ts.map +1 -0
- package/dist/tabs.js +76 -84
- package/dist/tabs.js.map +1 -0
- package/dist/textarea.d.ts +15 -11
- package/dist/textarea.d.ts.map +1 -0
- package/dist/textarea.js +18 -14
- package/dist/textarea.js.map +1 -0
- package/dist/toast.d.ts +87 -81
- package/dist/toast.d.ts.map +1 -0
- package/dist/toast.js +79 -150
- package/dist/toast.js.map +1 -0
- package/dist/toggle-group.d.ts +34 -29
- package/dist/toggle-group.d.ts.map +1 -0
- package/dist/toggle-group.js +31 -34
- package/dist/toggle-group.js.map +1 -0
- package/dist/toggle.d.ts +24 -21
- package/dist/toggle.d.ts.map +1 -0
- package/dist/toggle.js +22 -15
- package/dist/toggle.js.map +1 -0
- package/dist/toolbar.d.ts +64 -56
- package/dist/toolbar.d.ts.map +1 -0
- package/dist/toolbar.js +57 -68
- package/dist/toolbar.js.map +1 -0
- package/dist/tooltip.d.ts +67 -62
- package/dist/tooltip.d.ts.map +1 -0
- package/dist/tooltip.js +65 -90
- package/dist/tooltip.js.map +1 -0
- package/package.json +8 -8
- package/dist/arrow-svg-C6zQTvgS.js +0 -40
- package/dist/button-variants-CbFMPwc8.js +0 -33
- package/dist/control-variants-Bwep4n0y.js +0 -37
- package/dist/form-variants-LJ8gIbk0.js +0 -9
- package/dist/utils-B6yFEsav.js +0 -8
package/dist/slider.js
CHANGED
|
@@ -1,63 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
);
|
|
14
|
-
t.displayName = "SliderValue";
|
|
15
|
-
const n = ({ className: e, ...r }) => /* @__PURE__ */ l(
|
|
16
|
-
o.Control,
|
|
17
|
-
{
|
|
18
|
-
className: a("flex w-full touch-none items-center py-2 select-none", e),
|
|
19
|
-
...r
|
|
20
|
-
}
|
|
21
|
-
);
|
|
22
|
-
n.displayName = "SliderControl";
|
|
23
|
-
const s = ({ className: e, ...r }) => /* @__PURE__ */ l(
|
|
24
|
-
o.Track,
|
|
25
|
-
{
|
|
26
|
-
className: a("relative h-1.5 w-full rounded-full bg-primary/20", e),
|
|
27
|
-
...r
|
|
28
|
-
}
|
|
29
|
-
);
|
|
30
|
-
s.displayName = "SliderTrack";
|
|
31
|
-
const d = ({ className: e, ...r }) => /* @__PURE__ */ l(
|
|
32
|
-
o.Indicator,
|
|
33
|
-
{
|
|
34
|
-
className: a("rounded-full bg-primary", e),
|
|
35
|
-
...r
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
d.displayName = "SliderIndicator";
|
|
39
|
-
const u = ({ className: e, ...r }) => /* @__PURE__ */ l(
|
|
40
|
-
o.Thumb,
|
|
41
|
-
{
|
|
42
|
-
className: a(
|
|
43
|
-
"size-4 rounded-full bg-background",
|
|
44
|
-
"outline",
|
|
45
|
-
"shadow-sm",
|
|
46
|
-
"transition-[box-shadow,outline-color] duration-150",
|
|
47
|
-
"hover:outline-primary/50",
|
|
48
|
-
"focus-visible:outline-2 focus-visible:outline-primary",
|
|
49
|
-
"data-dragging:outline-2 data-dragging:outline-primary",
|
|
50
|
-
e
|
|
51
|
-
),
|
|
52
|
-
...r
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
u.displayName = "SliderThumb";
|
|
56
|
-
export {
|
|
57
|
-
n as SliderControl,
|
|
58
|
-
d as SliderIndicator,
|
|
59
|
-
i as SliderRoot,
|
|
60
|
-
u as SliderThumb,
|
|
61
|
-
s as SliderTrack,
|
|
62
|
-
t as SliderValue
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "./lib/utils.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { Slider } from "@base-ui/react/slider";
|
|
7
|
+
|
|
8
|
+
//#region src/components/slider.tsx
|
|
9
|
+
const SliderRoot = ({ className, ...props }) => {
|
|
10
|
+
return /* @__PURE__ */ jsx(Slider.Root, {
|
|
11
|
+
className: cn("w-full", className),
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
63
14
|
};
|
|
15
|
+
SliderRoot.displayName = "SliderRoot";
|
|
16
|
+
const SliderValue = ({ className, ...props }) => {
|
|
17
|
+
return /* @__PURE__ */ jsx(Slider.Value, {
|
|
18
|
+
className: cn("text-sm font-medium text-foreground", className),
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
SliderValue.displayName = "SliderValue";
|
|
23
|
+
const SliderControl = ({ className, ...props }) => {
|
|
24
|
+
return /* @__PURE__ */ jsx(Slider.Control, {
|
|
25
|
+
className: cn("flex w-full touch-none items-center py-2 select-none", className),
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
SliderControl.displayName = "SliderControl";
|
|
30
|
+
const SliderTrack = ({ className, ...props }) => {
|
|
31
|
+
return /* @__PURE__ */ jsx(Slider.Track, {
|
|
32
|
+
className: cn("relative h-1.5 w-full rounded-full bg-primary/20", className),
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
SliderTrack.displayName = "SliderTrack";
|
|
37
|
+
const SliderIndicator = ({ className, ...props }) => {
|
|
38
|
+
return /* @__PURE__ */ jsx(Slider.Indicator, {
|
|
39
|
+
className: cn("rounded-full bg-primary", className),
|
|
40
|
+
...props
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
SliderIndicator.displayName = "SliderIndicator";
|
|
44
|
+
const SliderThumb = ({ className, ...props }) => {
|
|
45
|
+
return /* @__PURE__ */ jsx(Slider.Thumb, {
|
|
46
|
+
className: cn("size-4 rounded-full bg-background", "outline", "shadow-sm", "transition-[box-shadow,outline-color] duration-150", "hover:outline-primary/50", "focus-visible:outline-2 focus-visible:outline-primary", "data-dragging:outline-2 data-dragging:outline-primary", className),
|
|
47
|
+
...props
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
SliderThumb.displayName = "SliderThumb";
|
|
51
|
+
|
|
52
|
+
//#endregion
|
|
53
|
+
export { SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue };
|
|
54
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.js","names":["BaseSlider"],"sources":["../src/components/slider.tsx"],"sourcesContent":["'use client'\n\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// SliderRoot\n// ============================================================================\n\ntype SliderRootProps = React.ComponentProps<typeof BaseSlider.Root>\n\nconst SliderRoot = ({ className, ...props }: SliderRootProps) => {\n return <BaseSlider.Root className={cn('w-full', className)} {...props} />\n}\n\nSliderRoot.displayName = 'SliderRoot'\n\n// ============================================================================\n// SliderValue\n// ============================================================================\n\ntype SliderValueProps = React.ComponentProps<typeof BaseSlider.Value>\n\nconst SliderValue = ({ className, ...props }: SliderValueProps) => {\n return (\n <BaseSlider.Value\n className={cn('text-sm font-medium text-foreground', className)}\n {...props}\n />\n )\n}\n\nSliderValue.displayName = 'SliderValue'\n\n// ============================================================================\n// SliderControl\n// ============================================================================\n\ntype SliderControlProps = React.ComponentProps<typeof BaseSlider.Control>\n\nconst SliderControl = ({ className, ...props }: SliderControlProps) => {\n return (\n <BaseSlider.Control\n className={cn('flex w-full touch-none items-center py-2 select-none', className)}\n {...props}\n />\n )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n// ============================================================================\n// SliderTrack\n// ============================================================================\n\ntype SliderTrackProps = React.ComponentProps<typeof BaseSlider.Track>\n\nconst SliderTrack = ({ className, ...props }: SliderTrackProps) => {\n return (\n <BaseSlider.Track\n className={cn('relative h-1.5 w-full rounded-full bg-primary/20', className)}\n {...props}\n />\n )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n// ============================================================================\n// SliderIndicator\n// ============================================================================\n\ntype SliderIndicatorProps = React.ComponentProps<typeof BaseSlider.Indicator>\n\nconst SliderIndicator = ({ className, ...props }: SliderIndicatorProps) => {\n return (\n <BaseSlider.Indicator\n className={cn('rounded-full bg-primary', className)}\n {...props}\n />\n )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n// ============================================================================\n// SliderThumb\n// ============================================================================\n\ntype SliderThumbProps = React.ComponentProps<typeof BaseSlider.Thumb>\n\nconst SliderThumb = ({ className, ...props }: SliderThumbProps) => {\n return (\n <BaseSlider.Thumb\n className={cn(\n 'size-4 rounded-full bg-background',\n 'outline',\n 'shadow-sm',\n 'transition-[box-shadow,outline-color] duration-150',\n 'hover:outline-primary/50',\n 'focus-visible:outline-2 focus-visible:outline-primary',\n 'data-dragging:outline-2 data-dragging:outline-primary',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n SliderRoot,\n SliderValue,\n SliderControl,\n SliderTrack,\n SliderIndicator,\n SliderThumb,\n}\n\nexport type {\n SliderRootProps,\n SliderValueProps,\n SliderControlProps,\n SliderTrackProps,\n SliderIndicatorProps,\n SliderThumbProps,\n}\n"],"mappings":";;;;;;;;AAaA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA6B;AAC/D,QAAO,oBAACA,OAAW;EAAK,WAAW,GAAG,UAAU,UAAU;EAAE,GAAI;GAAS;;AAG3E,WAAW,cAAc;AAQzB,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;AACjE,QACE,oBAACA,OAAW;EACV,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;GACJ;;AAIN,YAAY,cAAc;AAQ1B,MAAM,iBAAiB,EAAE,WAAW,GAAG,YAAgC;AACrE,QACE,oBAACA,OAAW;EACV,WAAW,GAAG,wDAAwD,UAAU;EAChF,GAAI;GACJ;;AAIN,cAAc,cAAc;AAQ5B,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;AACjE,QACE,oBAACA,OAAW;EACV,WAAW,GAAG,oDAAoD,UAAU;EAC5E,GAAI;GACJ;;AAIN,YAAY,cAAc;AAQ1B,MAAM,mBAAmB,EAAE,WAAW,GAAG,YAAkC;AACzE,QACE,oBAACA,OAAW;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;GACJ;;AAIN,gBAAgB,cAAc;AAQ9B,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;AACjE,QACE,oBAACA,OAAW;EACV,WAAW,GACT,qCACA,WACA,aACA,sDACA,4BACA,yDACA,yDACA,UACD;EACD,GAAI;GACJ;;AAIN,YAAY,cAAc"}
|
package/dist/styles/default.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@theme inline {
|
|
2
|
+
--animate-shimmer: shimmer 2s infinite;
|
|
2
3
|
--radius-sm: calc(var(--radius) - 4px);
|
|
3
4
|
--radius-md: calc(var(--radius) - 2px);
|
|
4
5
|
--radius-lg: var(--radius);
|
|
@@ -25,6 +26,7 @@
|
|
|
25
26
|
--color-ring: var(--ring);
|
|
26
27
|
--color-card: var(--card);
|
|
27
28
|
--color-card-foreground: var(--card-foreground);
|
|
29
|
+
--color-skeleton: var(--skeleton);
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
:root {
|
|
@@ -48,6 +50,7 @@
|
|
|
48
50
|
--ring: oklch(0.708 0 0);
|
|
49
51
|
--card: oklch(1 0 0);
|
|
50
52
|
--card-foreground: oklch(0.145 0 0);
|
|
53
|
+
--skeleton: oklch(0.94 0 0);
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
.dark {
|
|
@@ -70,6 +73,7 @@
|
|
|
70
73
|
--ring: oklch(0.556 0 0);
|
|
71
74
|
--card: oklch(0.205 0 0);
|
|
72
75
|
--card-foreground: oklch(0.985 0 0);
|
|
76
|
+
--skeleton: oklch(0.269 0 0);
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
@media (prefers-color-scheme: dark) {
|
|
@@ -93,6 +97,7 @@
|
|
|
93
97
|
--ring: oklch(0.556 0 0);
|
|
94
98
|
--card: oklch(0.205 0 0);
|
|
95
99
|
--card-foreground: oklch(0.985 0 0);
|
|
100
|
+
--skeleton: oklch(0.9 0 0);
|
|
96
101
|
}
|
|
97
102
|
}
|
|
98
103
|
|
|
@@ -111,3 +116,12 @@
|
|
|
111
116
|
transition-duration: 0.01ms !important;
|
|
112
117
|
}
|
|
113
118
|
}
|
|
119
|
+
|
|
120
|
+
@keyframes shimmer {
|
|
121
|
+
0% {
|
|
122
|
+
transform: translateX(-100%);
|
|
123
|
+
}
|
|
124
|
+
100% {
|
|
125
|
+
transform: translateX(200%);
|
|
126
|
+
}
|
|
127
|
+
}
|
package/dist/switch.d.ts
CHANGED
|
@@ -1,19 +1,24 @@
|
|
|
1
|
-
import
|
|
2
|
-
import * as
|
|
3
|
-
import { Switch } from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as react_jsx_runtime124 from "react/jsx-runtime";
|
|
3
|
+
import { Switch } from "@base-ui/react/switch";
|
|
4
|
+
|
|
5
|
+
//#region src/components/switch.d.ts
|
|
6
|
+
type SwitchRootProps = React.ComponentProps<typeof Switch.Root>;
|
|
7
|
+
declare const SwitchRoot: {
|
|
8
|
+
({
|
|
9
|
+
className,
|
|
10
|
+
...props
|
|
11
|
+
}: SwitchRootProps): react_jsx_runtime124.JSX.Element;
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
14
|
+
type SwitchThumbProps = React.ComponentProps<typeof Switch.Thumb>;
|
|
15
|
+
declare const SwitchThumb: {
|
|
16
|
+
({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: SwitchThumbProps): react_jsx_runtime124.JSX.Element;
|
|
20
|
+
displayName: string;
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { SwitchRoot, type SwitchRootProps, SwitchThumb, type SwitchThumbProps };
|
|
24
|
+
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.d.ts","names":[],"sources":["../src/components/switch.tsx"],"sourcesContent":[],"mappings":";;;;;KASK,eAAA,GAAkB,KAAA,CAAM,sBAAsB,MAAA,CAAW;cAExD;;;;KAAuC,kBAAe,oBAAA,CAAA,GAAA,CAAA;EAFvD,WAAA,EAAA,MAAe;CAAA;KA0Bf,gBAAA,GAAmB,KAAA,CAAM,cA1BgC,CAAA,OA0BV,MAAA,CAAW,KA1BD,CAAA;cA4BxD,WA5BuB,EAAA;EAAc,CAAA;IAAA,SAAA;IAAA,GAAA;EAAA,CAAA,EA4BG,gBA5BH,CAAA,EA4BmB,oBAAA,CAAA,GAAA,CAAA,OA5BnB;EAErC,WAAA,EAgBL,MAAA;CAAA"}
|
package/dist/switch.js
CHANGED
|
@@ -1,40 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
"transition-[background-position,box-shadow] duration-125 ease-[cubic-bezier(0.26,0.75,0.38,0.45)]",
|
|
13
|
-
"data-checked:bg-position-[0%_0%]",
|
|
14
|
-
"dark:from-primary/50 dark:shadow-none",
|
|
15
|
-
o
|
|
16
|
-
),
|
|
17
|
-
...a
|
|
18
|
-
}
|
|
19
|
-
);
|
|
20
|
-
d.displayName = "SwitchRoot";
|
|
21
|
-
const i = ({ className: o, ...a }) => /* @__PURE__ */ r(
|
|
22
|
-
t.Thumb,
|
|
23
|
-
{
|
|
24
|
-
className: e(
|
|
25
|
-
"aspect-square h-full rounded-full bg-background",
|
|
26
|
-
"shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-muted-foreground/20",
|
|
27
|
-
"transition-all duration-200",
|
|
28
|
-
"data-checked:translate-x-4",
|
|
29
|
-
"dark:shadow-black/25 dark:bg-foreground dark:data-checked:bg-background",
|
|
30
|
-
"data-disabled:opacity-100",
|
|
31
|
-
o
|
|
32
|
-
),
|
|
33
|
-
...a
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
i.displayName = "SwitchThumb";
|
|
37
|
-
export {
|
|
38
|
-
d as SwitchRoot,
|
|
39
|
-
i as SwitchThumb
|
|
1
|
+
import { cn } from "./lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Switch } from "@base-ui/react/switch";
|
|
5
|
+
|
|
6
|
+
//#region src/components/switch.tsx
|
|
7
|
+
const SwitchRoot = ({ className, ...props }) => {
|
|
8
|
+
return /* @__PURE__ */ jsx(Switch.Root, {
|
|
9
|
+
className: cn("relative flex h-6 w-10 rounded-full", "bg-linear-to-r from-primary from-35% to-muted to-65% bg-size-[6.5rem_100%] bg-position-[100%_0%] bg-no-repeat", "p-px", "shadow-[inset_0_1.5px_2px] shadow-muted-foreground/20", "transition-[background-position,box-shadow] duration-125 ease-[cubic-bezier(0.26,0.75,0.38,0.45)]", "data-checked:bg-position-[0%_0%]", "dark:from-primary/50 dark:shadow-none", className),
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
40
12
|
};
|
|
13
|
+
SwitchRoot.displayName = "SwitchRoot";
|
|
14
|
+
const SwitchThumb = ({ className, ...props }) => {
|
|
15
|
+
return /* @__PURE__ */ jsx(Switch.Thumb, {
|
|
16
|
+
className: cn("aspect-square h-full rounded-full bg-background", "shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-muted-foreground/20", "transition-all duration-200", "data-checked:translate-x-4", "dark:shadow-black/25 dark:bg-foreground dark:data-checked:bg-background", "data-disabled:opacity-100", className),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
SwitchThumb.displayName = "SwitchThumb";
|
|
21
|
+
|
|
22
|
+
//#endregion
|
|
23
|
+
export { SwitchRoot, SwitchThumb };
|
|
24
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","names":["BaseSwitch"],"sources":["../src/components/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// SwitchRoot\n// ============================================================================\n\ntype SwitchRootProps = React.ComponentProps<typeof BaseSwitch.Root>\n\nconst SwitchRoot = ({ className, ...props }: SwitchRootProps) => {\n return (\n <BaseSwitch.Root\n className={cn(\n 'relative flex h-6 w-10 rounded-full',\n 'bg-linear-to-r from-primary from-35% to-muted to-65% bg-size-[6.5rem_100%] bg-position-[100%_0%] bg-no-repeat',\n 'p-px',\n 'shadow-[inset_0_1.5px_2px] shadow-muted-foreground/20',\n 'transition-[background-position,box-shadow] duration-125 ease-[cubic-bezier(0.26,0.75,0.38,0.45)]',\n 'data-checked:bg-position-[0%_0%]',\n 'dark:from-primary/50 dark:shadow-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nSwitchRoot.displayName = 'SwitchRoot'\n\n// ============================================================================\n// SwitchThumb\n// ============================================================================\n\ntype SwitchThumbProps = React.ComponentProps<typeof BaseSwitch.Thumb>\n\nconst SwitchThumb = ({ className, ...props }: SwitchThumbProps) => {\n return (\n <BaseSwitch.Thumb\n className={cn(\n 'aspect-square h-full rounded-full bg-background',\n 'shadow-[0_0_1px_1px,0_1px_1px,1px_2px_4px_-1px] shadow-muted-foreground/20',\n 'transition-all duration-200',\n 'data-checked:translate-x-4',\n 'dark:shadow-black/25 dark:bg-foreground dark:data-checked:bg-background',\n 'data-disabled:opacity-100',\n className,\n )}\n {...props}\n />\n )\n}\n\nSwitchThumb.displayName = 'SwitchThumb'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { SwitchRoot, SwitchThumb }\n\nexport type { SwitchRootProps, SwitchThumbProps }\n"],"mappings":";;;;;;AAWA,MAAM,cAAc,EAAE,WAAW,GAAG,YAA6B;AAC/D,QACE,oBAACA,OAAW;EACV,WAAW,GACT,uCACA,iHACA,QACA,yDACA,qGACA,oCACA,yCACA,UACD;EACD,GAAI;GACJ;;AAIN,WAAW,cAAc;AAQzB,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;AACjE,QACE,oBAACA,OAAW;EACV,WAAW,GACT,mDACA,8EACA,+BACA,8BACA,2EACA,6BACA,UACD;EACD,GAAI;GACJ;;AAIN,YAAY,cAAc"}
|
package/dist/tabs.d.ts
CHANGED
|
@@ -1,49 +1,60 @@
|
|
|
1
|
-
import
|
|
2
|
-
import * as
|
|
3
|
-
import { Tabs } from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as react_jsx_runtime137 from "react/jsx-runtime";
|
|
3
|
+
import { Tabs } from "@base-ui/react/tabs";
|
|
4
|
+
|
|
5
|
+
//#region src/components/tabs.d.ts
|
|
6
|
+
type TabsRootProps = React.ComponentProps<typeof Tabs.Root>;
|
|
7
|
+
declare const TabsRoot: {
|
|
8
|
+
({
|
|
9
|
+
className,
|
|
10
|
+
...props
|
|
11
|
+
}: TabsRootProps): react_jsx_runtime137.JSX.Element;
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
14
|
+
type TabsListProps = React.ComponentProps<typeof Tabs.List> & {
|
|
15
|
+
/** Orientation of the tabs list */
|
|
16
|
+
orientation?: 'horizontal' | 'vertical';
|
|
17
|
+
};
|
|
18
|
+
declare const TabsList: {
|
|
19
|
+
({
|
|
20
|
+
className,
|
|
21
|
+
orientation,
|
|
22
|
+
...props
|
|
23
|
+
}: TabsListProps): react_jsx_runtime137.JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
26
|
+
type TabsTabProps = React.ComponentProps<typeof Tabs.Tab> & {
|
|
27
|
+
/** Size of the tab */
|
|
28
|
+
size?: 'sm' | 'default' | 'lg';
|
|
29
|
+
};
|
|
30
|
+
declare const TabsTab: {
|
|
31
|
+
({
|
|
32
|
+
className,
|
|
33
|
+
size,
|
|
34
|
+
...props
|
|
35
|
+
}: TabsTabProps): react_jsx_runtime137.JSX.Element;
|
|
36
|
+
displayName: string;
|
|
37
|
+
};
|
|
38
|
+
type TabsIndicatorProps = React.ComponentProps<typeof Tabs.Indicator> & {
|
|
39
|
+
/** Orientation of the indicator (should match the tabs list orientation) */
|
|
40
|
+
orientation?: 'horizontal' | 'vertical';
|
|
41
|
+
};
|
|
42
|
+
declare const TabsIndicator: {
|
|
43
|
+
({
|
|
44
|
+
className,
|
|
45
|
+
orientation,
|
|
46
|
+
...props
|
|
47
|
+
}: TabsIndicatorProps): react_jsx_runtime137.JSX.Element;
|
|
48
|
+
displayName: string;
|
|
49
|
+
};
|
|
50
|
+
type TabsPanelProps = React.ComponentProps<typeof Tabs.Panel>;
|
|
51
|
+
declare const TabsPanel: {
|
|
52
|
+
({
|
|
53
|
+
className,
|
|
54
|
+
...props
|
|
55
|
+
}: TabsPanelProps): react_jsx_runtime137.JSX.Element;
|
|
56
|
+
displayName: string;
|
|
57
|
+
};
|
|
58
|
+
//#endregion
|
|
59
|
+
export { TabsIndicator, type TabsIndicatorProps, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsRoot, type TabsRootProps, TabsTab, type TabsTabProps };
|
|
60
|
+
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","names":[],"sources":["../src/components/tabs.tsx"],"sourcesContent":[],"mappings":";;;;;KAYK,aAAA,GAAgB,KAAA,CAAM,sBAAsB,IAAA,CAAS;cAEpD;;;;KAAqC,gBAAa,oBAAA,CAAA,GAAA,CAAA;EAFnD,WAAA,EAAA,MAAa;CAAA;KA2Bb,aAAA,GAAgB,KAAA,CAAM,cA3B+B,CAAA,OA2BT,IAAA,CAAS,IA3BA,CAAA,GAAA;;EAAjB,WAAA,CAAA,EAAA,YAAA,GAAA,UAAA;AAAA,CAAA;cAgCnC,QA5BL,EAAA;;;;;KA4BsE,gBAAa,oBAAA,CAAA,GAAA,CAAA;aA9BzC,EAAA,MAAA;;KAoEtC,YAAA,GAAe,KAAA,CAAM,cApE8B,CAAA,OAoER,IAAA,CAAS,GApED,CAAA,GAAA;EAyBnD;EAAa,IAAA,CAAA,EAAA,IAAA,GAAA,SAAA,GAAA,IAAA;;cAgDZ,OAhDqB,EAAA;EAAc,CAAA;IAAA,SAAA;IAAA,IAAA;IAAA,GAAA;EAAA,CAAA,EAgDO,YAhDP,CAAA,EAgDmB,oBAAA,CAAA,GAAA,CAAA,OAhDnB;EAKnC,WAOL,EAAA,MAAA;CAAA;KA+DI,kBAAA,GAAqB,KAAA,CAAM,sBAAsB,IAAA,CAAS;;aAtEQ,CAAA,EAAA,YAAA,GAAA,UAAA;;cA2EjE,aA3E8E,EAAA;EAsC/E,CAAA;IAAA,SAAA;IAAA,WAAY;IAAA,GAAA;EAAA,CAAA,EAyCd,kBAzCc,CAAA,EAyCI,oBAAA,CAAA,GAAA,CAAA,OAzCJ;EAAA,WAAA,EAAA,MAAA;;KAwDZ,cAAA,GAAiB,KAAA,CAAM,cAxDF,CAAA,OAwDwB,IAAA,CAAS,KAxDjC,CAAA;cA0DpB,SA1DkC,EAAA;EAKlC,CAAA;IAAA,SAEL;IAAA,GAAA;EAAA,CAAA,EAmD2C,cAnD3C,CAAA,EAmDyD,oBAAA,CAAA,GAAA,CAAA,OAnDzD;EAAA,WAAA,EAAA,MAAA"}
|
package/dist/tabs.js
CHANGED
|
@@ -1,85 +1,77 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
defaultVariants: {
|
|
18
|
-
orientation: "horizontal"
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
), c = ({ className: t, orientation: a = "horizontal", ...e }) => /* @__PURE__ */ o(
|
|
22
|
-
r.List,
|
|
23
|
-
{
|
|
24
|
-
className: i(l({ orientation: a }), t),
|
|
25
|
-
...e
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
c.displayName = "TabsList";
|
|
29
|
-
const d = s(
|
|
30
|
-
[
|
|
31
|
-
"relative z-10 inline-flex items-center justify-center whitespace-nowrap",
|
|
32
|
-
"rounded-md px-3 py-1.5 text-sm font-medium",
|
|
33
|
-
"transition-all duration-200",
|
|
34
|
-
"text-foreground/80",
|
|
35
|
-
"data-[active]:text-foreground",
|
|
36
|
-
"hover:text-foreground"
|
|
37
|
-
],
|
|
38
|
-
{
|
|
39
|
-
variants: {
|
|
40
|
-
size: {
|
|
41
|
-
sm: "px-2 py-1 text-xs",
|
|
42
|
-
default: "px-3 py-1.5 text-sm",
|
|
43
|
-
lg: "px-4 py-2 text-base"
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
defaultVariants: {
|
|
47
|
-
size: "default"
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
), m = ({ className: t, size: a, ...e }) => /* @__PURE__ */ o(r.Tab, { className: i(d({ size: a }), t), ...e });
|
|
51
|
-
m.displayName = "TabsTab";
|
|
52
|
-
const b = s(
|
|
53
|
-
["absolute rounded-md bg-background shadow-sm", "transition-all duration-200 ease-out"],
|
|
54
|
-
{
|
|
55
|
-
variants: {
|
|
56
|
-
orientation: {
|
|
57
|
-
horizontal: "bottom-1 top-1 left-[var(--active-tab-left)] w-[var(--active-tab-width)]",
|
|
58
|
-
vertical: "left-1 right-1 top-[var(--active-tab-top)] h-[var(--active-tab-height)]"
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
defaultVariants: {
|
|
62
|
-
orientation: "horizontal"
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
), f = ({
|
|
66
|
-
className: t,
|
|
67
|
-
orientation: a = "horizontal",
|
|
68
|
-
...e
|
|
69
|
-
}) => /* @__PURE__ */ o(
|
|
70
|
-
r.Indicator,
|
|
71
|
-
{
|
|
72
|
-
className: i(b({ orientation: a }), t),
|
|
73
|
-
...e
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
f.displayName = "TabsIndicator";
|
|
77
|
-
const u = ({ className: t, ...a }) => /* @__PURE__ */ o(r.Panel, { className: i("mt-2 ring-offset-background", t), ...a });
|
|
78
|
-
u.displayName = "TabsPanel";
|
|
79
|
-
export {
|
|
80
|
-
f as TabsIndicator,
|
|
81
|
-
c as TabsList,
|
|
82
|
-
u as TabsPanel,
|
|
83
|
-
n as TabsRoot,
|
|
84
|
-
m as TabsTab
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "./lib/utils.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { Tabs } from "@base-ui/react/tabs";
|
|
8
|
+
|
|
9
|
+
//#region src/components/tabs.tsx
|
|
10
|
+
const TabsRoot = ({ className, ...props }) => {
|
|
11
|
+
return /* @__PURE__ */ jsx(Tabs.Root, {
|
|
12
|
+
className: cn("flex flex-col w-full", className),
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
85
15
|
};
|
|
16
|
+
TabsRoot.displayName = "TabsRoot";
|
|
17
|
+
const tabsListVariants = cva(["relative inline-flex w-fit items-center gap-1", "rounded-lg bg-muted p-1"], {
|
|
18
|
+
variants: { orientation: {
|
|
19
|
+
horizontal: "flex-row",
|
|
20
|
+
vertical: "flex-col"
|
|
21
|
+
} },
|
|
22
|
+
defaultVariants: { orientation: "horizontal" }
|
|
23
|
+
});
|
|
24
|
+
const TabsList = ({ className, orientation = "horizontal", ...props }) => {
|
|
25
|
+
return /* @__PURE__ */ jsx(Tabs.List, {
|
|
26
|
+
className: cn(tabsListVariants({ orientation }), className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
TabsList.displayName = "TabsList";
|
|
31
|
+
const tabsTabVariants = cva([
|
|
32
|
+
"relative z-10 inline-flex items-center justify-center whitespace-nowrap",
|
|
33
|
+
"rounded-md px-3 py-1.5 text-sm font-medium",
|
|
34
|
+
"transition-all duration-200",
|
|
35
|
+
"text-foreground/80",
|
|
36
|
+
"data-[active]:text-foreground",
|
|
37
|
+
"hover:text-foreground"
|
|
38
|
+
], {
|
|
39
|
+
variants: { size: {
|
|
40
|
+
sm: "px-2 py-1 text-xs",
|
|
41
|
+
default: "px-3 py-1.5 text-sm",
|
|
42
|
+
lg: "px-4 py-2 text-base"
|
|
43
|
+
} },
|
|
44
|
+
defaultVariants: { size: "default" }
|
|
45
|
+
});
|
|
46
|
+
const TabsTab = ({ className, size, ...props }) => {
|
|
47
|
+
return /* @__PURE__ */ jsx(Tabs.Tab, {
|
|
48
|
+
className: cn(tabsTabVariants({ size }), className),
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
TabsTab.displayName = "TabsTab";
|
|
53
|
+
const tabsIndicatorVariants = cva(["absolute rounded-md bg-background shadow-sm", "transition-all duration-200 ease-out"], {
|
|
54
|
+
variants: { orientation: {
|
|
55
|
+
horizontal: "bottom-1 top-1 left-[var(--active-tab-left)] w-[var(--active-tab-width)]",
|
|
56
|
+
vertical: "left-1 right-1 top-[var(--active-tab-top)] h-[var(--active-tab-height)]"
|
|
57
|
+
} },
|
|
58
|
+
defaultVariants: { orientation: "horizontal" }
|
|
59
|
+
});
|
|
60
|
+
const TabsIndicator = ({ className, orientation = "horizontal", ...props }) => {
|
|
61
|
+
return /* @__PURE__ */ jsx(Tabs.Indicator, {
|
|
62
|
+
className: cn(tabsIndicatorVariants({ orientation }), className),
|
|
63
|
+
...props
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
TabsIndicator.displayName = "TabsIndicator";
|
|
67
|
+
const TabsPanel = ({ className, ...props }) => {
|
|
68
|
+
return /* @__PURE__ */ jsx(Tabs.Panel, {
|
|
69
|
+
className: cn("mt-2 ring-offset-background", className),
|
|
70
|
+
...props
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
TabsPanel.displayName = "TabsPanel";
|
|
74
|
+
|
|
75
|
+
//#endregion
|
|
76
|
+
export { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab };
|
|
77
|
+
//# sourceMappingURL=tabs.js.map
|
package/dist/tabs.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","names":["BaseTabs"],"sources":["../src/components/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// TabsRoot\n// ============================================================================\n\ntype TabsRootProps = React.ComponentProps<typeof BaseTabs.Root>\n\nconst TabsRoot = ({ className, ...props }: TabsRootProps) => {\n return <BaseTabs.Root className={cn('flex flex-col w-full', className)} {...props} />\n}\n\nTabsRoot.displayName = 'TabsRoot'\n\n// ============================================================================\n// TabsList\n// ============================================================================\n\nconst tabsListVariants = cva(\n ['relative inline-flex w-fit items-center gap-1', 'rounded-lg bg-muted p-1'],\n {\n variants: {\n orientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n },\n)\n\ntype TabsListProps = React.ComponentProps<typeof BaseTabs.List> & {\n /** Orientation of the tabs list */\n orientation?: 'horizontal' | 'vertical'\n}\n\nconst TabsList = ({ className, orientation = 'horizontal', ...props }: TabsListProps) => {\n return (\n <BaseTabs.List\n className={cn(tabsListVariants({ orientation }), className)}\n {...props}\n />\n )\n}\n\nTabsList.displayName = 'TabsList'\n\n// ============================================================================\n// TabsTab\n// ============================================================================\n\nconst tabsTabVariants = cva(\n [\n 'relative z-10 inline-flex items-center justify-center whitespace-nowrap',\n 'rounded-md px-3 py-1.5 text-sm font-medium',\n 'transition-all duration-200',\n 'text-foreground/80',\n 'data-[active]:text-foreground',\n 'hover:text-foreground',\n ],\n {\n variants: {\n size: {\n sm: 'px-2 py-1 text-xs',\n default: 'px-3 py-1.5 text-sm',\n lg: 'px-4 py-2 text-base',\n },\n },\n defaultVariants: {\n size: 'default',\n },\n },\n)\n\ntype TabsTabProps = React.ComponentProps<typeof BaseTabs.Tab> & {\n /** Size of the tab */\n size?: 'sm' | 'default' | 'lg'\n}\n\nconst TabsTab = ({ className, size, ...props }: TabsTabProps) => {\n return <BaseTabs.Tab className={cn(tabsTabVariants({ size }), className)} {...props} />\n}\n\nTabsTab.displayName = 'TabsTab'\n\n// ============================================================================\n// TabsIndicator\n// ============================================================================\n\nconst tabsIndicatorVariants = cva(\n ['absolute rounded-md bg-background shadow-sm', 'transition-all duration-200 ease-out'],\n {\n variants: {\n orientation: {\n horizontal:\n 'bottom-1 top-1 left-[var(--active-tab-left)] w-[var(--active-tab-width)]',\n vertical:\n 'left-1 right-1 top-[var(--active-tab-top)] h-[var(--active-tab-height)]',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n },\n)\n\ntype TabsIndicatorProps = React.ComponentProps<typeof BaseTabs.Indicator> & {\n /** Orientation of the indicator (should match the tabs list orientation) */\n orientation?: 'horizontal' | 'vertical'\n}\n\nconst TabsIndicator = ({\n className,\n orientation = 'horizontal',\n ...props\n}: TabsIndicatorProps) => {\n return (\n <BaseTabs.Indicator\n className={cn(tabsIndicatorVariants({ orientation }), className)}\n {...props}\n />\n )\n}\n\nTabsIndicator.displayName = 'TabsIndicator'\n\n// ============================================================================\n// TabsPanel\n// ============================================================================\n\ntype TabsPanelProps = React.ComponentProps<typeof BaseTabs.Panel>\n\nconst TabsPanel = ({ className, ...props }: TabsPanelProps) => {\n return (\n <BaseTabs.Panel className={cn('mt-2 ring-offset-background', className)} {...props} />\n )\n}\n\nTabsPanel.displayName = 'TabsPanel'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { TabsRoot, TabsList, TabsTab, TabsIndicator, TabsPanel }\n\nexport type {\n TabsRootProps,\n TabsListProps,\n TabsTabProps,\n TabsIndicatorProps,\n TabsPanelProps,\n}\n"],"mappings":";;;;;;;;;AAcA,MAAM,YAAY,EAAE,WAAW,GAAG,YAA2B;AAC3D,QAAO,oBAACA,KAAS;EAAK,WAAW,GAAG,wBAAwB,UAAU;EAAE,GAAI;GAAS;;AAGvF,SAAS,cAAc;AAMvB,MAAM,mBAAmB,IACvB,CAAC,iDAAiD,0BAA0B,EAC5E;CACE,UAAU,EACR,aAAa;EACX,YAAY;EACZ,UAAU;EACX,EACF;CACD,iBAAiB,EACf,aAAa,cACd;CACF,CACF;AAOD,MAAM,YAAY,EAAE,WAAW,cAAc,cAAc,GAAG,YAA2B;AACvF,QACE,oBAACA,KAAS;EACR,WAAW,GAAG,iBAAiB,EAAE,aAAa,CAAC,EAAE,UAAU;EAC3D,GAAI;GACJ;;AAIN,SAAS,cAAc;AAMvB,MAAM,kBAAkB,IACtB;CACE;CACA;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,WACP;CACF,CACF;AAOD,MAAM,WAAW,EAAE,WAAW,MAAM,GAAG,YAA0B;AAC/D,QAAO,oBAACA,KAAS;EAAI,WAAW,GAAG,gBAAgB,EAAE,MAAM,CAAC,EAAE,UAAU;EAAE,GAAI;GAAS;;AAGzF,QAAQ,cAAc;AAMtB,MAAM,wBAAwB,IAC5B,CAAC,+CAA+C,uCAAuC,EACvF;CACE,UAAU,EACR,aAAa;EACX,YACE;EACF,UACE;EACH,EACF;CACD,iBAAiB,EACf,aAAa,cACd;CACF,CACF;AAOD,MAAM,iBAAiB,EACrB,WACA,cAAc,cACd,GAAG,YACqB;AACxB,QACE,oBAACA,KAAS;EACR,WAAW,GAAG,sBAAsB,EAAE,aAAa,CAAC,EAAE,UAAU;EAChE,GAAI;GACJ;;AAIN,cAAc,cAAc;AAQ5B,MAAM,aAAa,EAAE,WAAW,GAAG,YAA4B;AAC7D,QACE,oBAACA,KAAS;EAAM,WAAW,GAAG,+BAA+B,UAAU;EAAE,GAAI;GAAS;;AAI1F,UAAU,cAAc"}
|
package/dist/textarea.d.ts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
import * as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as react_jsx_runtime161 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/textarea.d.ts
|
|
5
|
+
type TextareaProps = React.ComponentProps<'textarea'>;
|
|
6
|
+
declare const Textarea: {
|
|
7
|
+
({
|
|
8
|
+
className,
|
|
9
|
+
...props
|
|
10
|
+
}: TextareaProps): react_jsx_runtime161.JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
//#endregion
|
|
14
|
+
export { Textarea, type TextareaProps };
|
|
15
|
+
//# sourceMappingURL=textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","names":[],"sources":["../src/components/textarea.tsx"],"sourcesContent":[],"mappings":";;;;KAOK,aAAA,GAAgB,KAAA,CAAM;cAErB;;;;KAAqC,gBAAa,oBAAA,CAAA,GAAA,CAAA;EAFnD,WAAA,EAAA,MAAa;AAAuB,CAAA"}
|