@spawn-llc/design-system 1.1.0 → 1.2.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/DESIGN-SYSTEM.md +4 -0
- package/README.md +8 -6
- package/SPEC.md +3 -1
- package/dist/DESIGN-SYSTEM.md +4 -0
- package/dist/chunk-227VGN2D.js +617 -0
- package/dist/chunk-2UK4FHS3.js +31 -0
- package/dist/chunk-36NOAJFW.js +53 -0
- package/dist/chunk-3EZ5FFYG.js +154 -0
- package/dist/chunk-3PN2XMRA.js +80 -0
- package/dist/chunk-3SLZRFKQ.js +107 -0
- package/dist/chunk-4ABNKOPC.js +18 -0
- package/dist/chunk-4IKPZU4X.js +34 -0
- package/dist/chunk-5YRMB7KW.js +31 -0
- package/dist/chunk-66R4755B.js +37 -0
- package/dist/chunk-ATBQXQM7.js +165 -0
- package/dist/chunk-AUWFUYJI.js +79 -0
- package/dist/chunk-BTGJV2P6.js +237 -0
- package/dist/chunk-BYJWYU66.js +95 -0
- package/dist/chunk-D6UXXTC6.js +18 -0
- package/dist/chunk-DFVSGTAN.js +24 -0
- package/dist/chunk-DQ52UWO2.js +28 -0
- package/dist/chunk-DXXFNPYR.js +20 -0
- package/dist/chunk-GBPD3QPO.js +60 -0
- package/dist/chunk-GHSVAEXO.js +227 -0
- package/dist/chunk-GQIUVLXP.js +42 -0
- package/dist/chunk-HG4AEMA5.js +74 -0
- package/dist/chunk-HK6P54FZ.js +139 -0
- package/dist/chunk-HSP43BHH.js +97 -0
- package/dist/chunk-HYBBZTLY.js +1 -0
- package/dist/chunk-IS2ZVRUW.js +186 -0
- package/dist/chunk-JSULEEYQ.js +9 -0
- package/dist/chunk-K46NYJUT.js +15 -0
- package/dist/chunk-L5SMHZJL.js +162 -0
- package/dist/chunk-LPPLLYOR.js +185 -0
- package/dist/chunk-LYDG55X2.js +194 -0
- package/dist/chunk-MLC45YHE.js +122 -0
- package/dist/chunk-MZEY2L46.js +186 -0
- package/dist/chunk-N34HFTEJ.js +22 -0
- package/dist/chunk-PPW4C342.js +232 -0
- package/dist/chunk-PZCXY6QZ.js +208 -0
- package/dist/chunk-Q3HD7YQZ.js +261 -0
- package/dist/chunk-QF7LZKLC.js +98 -0
- package/dist/chunk-QNUAUOJW.js +15 -0
- package/dist/chunk-QZSQXEOU.js +28 -0
- package/dist/chunk-RBTFEYGV.js +77 -0
- package/dist/chunk-SJMEO63M.js +116 -0
- package/dist/chunk-T6DWCVR3.js +73 -0
- package/dist/chunk-T7GS4AXQ.js +245 -0
- package/dist/chunk-TP35WWVP.js +46 -0
- package/dist/chunk-TQ6CJZMT.js +42 -0
- package/dist/chunk-U7N2A7A3.js +9 -0
- package/dist/chunk-V3NRC7QE.js +142 -0
- package/dist/chunk-VOHNOSMH.js +22 -0
- package/dist/chunk-W3PHWPYP.js +43 -0
- package/dist/chunk-WJ6DNG2Z.js +75 -0
- package/dist/chunk-WMXCMDSQ.js +126 -0
- package/dist/chunk-WSNSTJAR.js +58 -0
- package/dist/chunk-XG3HHC3U.js +79 -0
- package/dist/chunk-XOLQ37I2.js +118 -0
- package/dist/chunk-YFPY5SLS.js +19 -0
- package/dist/chunk-YFVERFQA.js +76 -0
- package/dist/chunk-YL4VCJKF.js +75 -0
- package/dist/chunk-ZMHTPZVQ.js +61 -0
- package/dist/chunk-ZO74KVH3.js +38 -0
- package/dist/components/ui/accordion.d.ts +9 -0
- package/dist/components/ui/accordion.js +3 -0
- package/dist/components/ui/alert-dialog.d.ts +24 -0
- package/dist/components/ui/alert-dialog.js +5 -0
- package/dist/components/ui/alert.d.ts +13 -0
- package/dist/components/ui/alert.js +3 -0
- package/dist/components/ui/aspect-ratio.d.ts +7 -0
- package/dist/components/ui/aspect-ratio.js +3 -0
- package/dist/components/ui/avatar.d.ts +13 -0
- package/dist/components/ui/avatar.js +3 -0
- package/dist/components/ui/badge.d.ts +11 -0
- package/dist/components/ui/badge.js +3 -0
- package/dist/components/ui/breadcrumb.d.ts +12 -0
- package/dist/components/ui/breadcrumb.js +3 -0
- package/dist/components/ui/button-group.d.ts +15 -0
- package/dist/components/ui/button-group.js +4 -0
- package/dist/components/ui/button.d.ts +9 -0
- package/dist/components/ui/button.js +4 -0
- package/dist/components/ui/calendar.d.ts +16 -0
- package/dist/components/ui/calendar.js +5 -0
- package/dist/components/ui/card.d.ts +13 -0
- package/dist/components/ui/card.js +3 -0
- package/dist/components/ui/carousel.d.ts +34 -0
- package/dist/components/ui/carousel.js +5 -0
- package/dist/components/ui/chart.d.ts +46 -0
- package/dist/components/ui/chart.js +3 -0
- package/dist/components/ui/checkbox.d.ts +6 -0
- package/dist/components/ui/checkbox.js +3 -0
- package/dist/components/ui/collapsible.d.ts +8 -0
- package/dist/components/ui/collapsible.js +2 -0
- package/dist/components/ui/combobox.d.ts +26 -0
- package/dist/components/ui/combobox.js +8 -0
- package/dist/components/ui/command.d.ts +22 -0
- package/dist/components/ui/command.js +9 -0
- package/dist/components/ui/context-menu.d.ts +31 -0
- package/dist/components/ui/context-menu.js +3 -0
- package/dist/components/ui/dialog.d.ts +19 -0
- package/dist/components/ui/dialog.js +5 -0
- package/dist/components/ui/direction.d.ts +1 -0
- package/dist/components/ui/direction.js +2 -0
- package/dist/components/ui/drawer.d.ts +15 -0
- package/dist/components/ui/drawer.js +3 -0
- package/dist/components/ui/dropdown-menu.d.ts +31 -0
- package/dist/components/ui/dropdown-menu.js +3 -0
- package/dist/components/ui/empty.d.ts +15 -0
- package/dist/components/ui/empty.js +3 -0
- package/dist/components/ui/field.d.ts +28 -0
- package/dist/components/ui/field.js +5 -0
- package/dist/components/ui/hover-card.d.ts +8 -0
- package/dist/components/ui/hover-card.js +3 -0
- package/dist/components/ui/input-group.d.ts +23 -0
- package/dist/components/ui/input-group.js +7 -0
- package/dist/components/ui/input-otp.d.ts +13 -0
- package/dist/components/ui/input-otp.js +3 -0
- package/dist/components/ui/input.d.ts +5 -0
- package/dist/components/ui/input.js +3 -0
- package/dist/components/ui/item.d.ts +26 -0
- package/dist/components/ui/item.js +4 -0
- package/dist/components/ui/kbd.d.ts +6 -0
- package/dist/components/ui/kbd.js +3 -0
- package/dist/components/ui/label.d.ts +5 -0
- package/dist/components/ui/label.js +3 -0
- package/dist/components/ui/logo.d.ts +17 -0
- package/dist/components/ui/logo.js +3 -0
- package/dist/components/ui/menubar.d.ts +31 -0
- package/dist/components/ui/menubar.js +4 -0
- package/dist/components/ui/native-select.d.ts +10 -0
- package/dist/components/ui/native-select.js +3 -0
- package/dist/components/ui/navigation-menu.d.ts +15 -0
- package/dist/components/ui/navigation-menu.js +3 -0
- package/dist/components/ui/pagination.d.ts +23 -0
- package/dist/components/ui/pagination.js +5 -0
- package/dist/components/ui/popover.d.ts +11 -0
- package/dist/components/ui/popover.js +3 -0
- package/dist/components/ui/progress.d.ts +10 -0
- package/dist/components/ui/progress.js +3 -0
- package/dist/components/ui/radio-group.d.ts +8 -0
- package/dist/components/ui/radio-group.js +3 -0
- package/dist/components/ui/resizable.d.ts +10 -0
- package/dist/components/ui/resizable.js +3 -0
- package/dist/components/ui/scroll-area.d.ts +7 -0
- package/dist/components/ui/scroll-area.js +3 -0
- package/dist/components/ui/select.d.ts +17 -0
- package/dist/components/ui/select.js +3 -0
- package/dist/components/ui/separator.d.ts +6 -0
- package/dist/components/ui/separator.js +3 -0
- package/dist/components/ui/sheet.d.ts +16 -0
- package/dist/components/ui/sheet.js +5 -0
- package/dist/components/ui/sidebar.d.ts +70 -0
- package/dist/components/ui/sidebar.js +11 -0
- package/dist/components/ui/skeleton.d.ts +5 -0
- package/dist/components/ui/skeleton.js +3 -0
- package/dist/components/ui/slider.d.ts +6 -0
- package/dist/components/ui/slider.js +3 -0
- package/dist/components/ui/sonner.d.ts +6 -0
- package/dist/components/ui/sonner.js +2 -0
- package/dist/components/ui/spinner.d.ts +5 -0
- package/dist/components/ui/spinner.js +3 -0
- package/dist/components/ui/switch.d.ts +8 -0
- package/dist/components/ui/switch.js +3 -0
- package/dist/components/ui/table.d.ts +12 -0
- package/dist/components/ui/table.js +3 -0
- package/dist/components/ui/tabs.d.ts +14 -0
- package/dist/components/ui/tabs.js +3 -0
- package/dist/components/ui/textarea.d.ts +5 -0
- package/dist/components/ui/textarea.js +3 -0
- package/dist/components/ui/toggle-group.d.ts +14 -0
- package/dist/components/ui/toggle-group.js +4 -0
- package/dist/components/ui/toggle.d.ts +12 -0
- package/dist/components/ui/toggle.js +3 -0
- package/dist/components/ui/tooltip.d.ts +9 -0
- package/dist/components/ui/tooltip.js +3 -0
- package/dist/hooks/use-mobile.d.ts +3 -0
- package/dist/hooks/use-mobile.js +2 -0
- package/dist/index.d.ts +98 -640
- package/dist/index.js +60 -5573
- package/dist/lib/button-variants.d.ts +17 -0
- package/dist/lib/button-variants.js +1 -0
- package/dist/lib/contrast.d.ts +9 -0
- package/dist/lib/contrast.js +1 -0
- package/dist/lib/utils.d.ts +5 -0
- package/dist/lib/utils.js +1 -0
- package/dist/styles.css +1 -1
- package/dist/theme.css +4 -0
- package/dist/{tokens.d.ts → tokens.generated.d.ts} +8 -0
- package/dist/{tokens.js → tokens.generated.js} +4 -0
- package/dist/variants.d.ts +3 -0
- package/dist/variants.js +1 -0
- package/package.json +17 -5
- package/tokens/tokens.css +2 -0
- package/tokens/tokens.json +5 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { cn } from './chunk-U7N2A7A3.js';
|
|
2
|
+
import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
|
|
3
|
+
import { CheckIcon } from 'lucide-react';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
function Checkbox({ className, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
Checkbox$1.Root,
|
|
9
|
+
{
|
|
10
|
+
"data-slot": "checkbox",
|
|
11
|
+
className: cn(
|
|
12
|
+
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[2px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
|
13
|
+
className
|
|
14
|
+
),
|
|
15
|
+
...props,
|
|
16
|
+
children: /* @__PURE__ */ jsx(
|
|
17
|
+
Checkbox$1.Indicator,
|
|
18
|
+
{
|
|
19
|
+
"data-slot": "checkbox-indicator",
|
|
20
|
+
className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
|
|
21
|
+
children: /* @__PURE__ */ jsx(
|
|
22
|
+
CheckIcon,
|
|
23
|
+
{}
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { Checkbox };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { cn } from './chunk-U7N2A7A3.js';
|
|
2
|
+
import { Slider as Slider$1 } from '@base-ui/react/slider';
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function Slider({
|
|
6
|
+
className,
|
|
7
|
+
defaultValue,
|
|
8
|
+
value,
|
|
9
|
+
min = 0,
|
|
10
|
+
max = 100,
|
|
11
|
+
...props
|
|
12
|
+
}) {
|
|
13
|
+
const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
|
|
14
|
+
return /* @__PURE__ */ jsx(
|
|
15
|
+
Slider$1.Root,
|
|
16
|
+
{
|
|
17
|
+
className: cn("data-horizontal:w-full data-vertical:h-full", className),
|
|
18
|
+
"data-slot": "slider",
|
|
19
|
+
defaultValue,
|
|
20
|
+
value,
|
|
21
|
+
min,
|
|
22
|
+
max,
|
|
23
|
+
thumbAlignment: "edge",
|
|
24
|
+
...props,
|
|
25
|
+
children: /* @__PURE__ */ jsxs(Slider$1.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [
|
|
26
|
+
/* @__PURE__ */ jsx(
|
|
27
|
+
Slider$1.Track,
|
|
28
|
+
{
|
|
29
|
+
"data-slot": "slider-track",
|
|
30
|
+
className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
|
|
31
|
+
children: /* @__PURE__ */ jsx(
|
|
32
|
+
Slider$1.Indicator,
|
|
33
|
+
{
|
|
34
|
+
"data-slot": "slider-range",
|
|
35
|
+
className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
|
|
36
|
+
}
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
|
|
41
|
+
Slider$1.Thumb,
|
|
42
|
+
{
|
|
43
|
+
"data-slot": "slider-thumb",
|
|
44
|
+
className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
|
|
45
|
+
},
|
|
46
|
+
index
|
|
47
|
+
))
|
|
48
|
+
] })
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export { Slider };
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { cn } from './chunk-U7N2A7A3.js';
|
|
2
|
+
import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { ChevronDownIcon } from 'lucide-react';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function NavigationMenu({
|
|
8
|
+
align = "start",
|
|
9
|
+
className,
|
|
10
|
+
children,
|
|
11
|
+
...props
|
|
12
|
+
}) {
|
|
13
|
+
return /* @__PURE__ */ jsxs(
|
|
14
|
+
NavigationMenu$1.Root,
|
|
15
|
+
{
|
|
16
|
+
"data-slot": "navigation-menu",
|
|
17
|
+
className: cn(
|
|
18
|
+
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
|
19
|
+
className
|
|
20
|
+
),
|
|
21
|
+
...props,
|
|
22
|
+
children: [
|
|
23
|
+
children,
|
|
24
|
+
/* @__PURE__ */ jsx(NavigationMenuPositioner, { align })
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
function NavigationMenuList({
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
|
+
}) {
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
34
|
+
NavigationMenu$1.List,
|
|
35
|
+
{
|
|
36
|
+
"data-slot": "navigation-menu-list",
|
|
37
|
+
className: cn(
|
|
38
|
+
"group flex flex-1 list-none items-center justify-center gap-0",
|
|
39
|
+
className
|
|
40
|
+
),
|
|
41
|
+
...props
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
function NavigationMenuItem({
|
|
46
|
+
className,
|
|
47
|
+
...props
|
|
48
|
+
}) {
|
|
49
|
+
return /* @__PURE__ */ jsx(
|
|
50
|
+
NavigationMenu$1.Item,
|
|
51
|
+
{
|
|
52
|
+
"data-slot": "navigation-menu-item",
|
|
53
|
+
className: cn("relative", className),
|
|
54
|
+
...props
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
var navigationMenuTriggerStyle = cva(
|
|
59
|
+
"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
|
|
60
|
+
);
|
|
61
|
+
function NavigationMenuTrigger({
|
|
62
|
+
className,
|
|
63
|
+
children,
|
|
64
|
+
...props
|
|
65
|
+
}) {
|
|
66
|
+
return /* @__PURE__ */ jsxs(
|
|
67
|
+
NavigationMenu$1.Trigger,
|
|
68
|
+
{
|
|
69
|
+
"data-slot": "navigation-menu-trigger",
|
|
70
|
+
className: cn(navigationMenuTriggerStyle(), "group", className),
|
|
71
|
+
...props,
|
|
72
|
+
children: [
|
|
73
|
+
children,
|
|
74
|
+
" ",
|
|
75
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
function NavigationMenuContent({
|
|
81
|
+
className,
|
|
82
|
+
...props
|
|
83
|
+
}) {
|
|
84
|
+
return /* @__PURE__ */ jsx(
|
|
85
|
+
NavigationMenu$1.Content,
|
|
86
|
+
{
|
|
87
|
+
"data-slot": "navigation-menu-content",
|
|
88
|
+
className: cn(
|
|
89
|
+
"data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
|
|
90
|
+
className
|
|
91
|
+
),
|
|
92
|
+
...props
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
function NavigationMenuPositioner({
|
|
97
|
+
className,
|
|
98
|
+
side = "bottom",
|
|
99
|
+
sideOffset = 8,
|
|
100
|
+
align = "start",
|
|
101
|
+
alignOffset = 0,
|
|
102
|
+
...props
|
|
103
|
+
}) {
|
|
104
|
+
return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(
|
|
105
|
+
NavigationMenu$1.Positioner,
|
|
106
|
+
{
|
|
107
|
+
side,
|
|
108
|
+
sideOffset,
|
|
109
|
+
align,
|
|
110
|
+
alignOffset,
|
|
111
|
+
className: cn(
|
|
112
|
+
"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
|
|
113
|
+
className
|
|
114
|
+
),
|
|
115
|
+
...props,
|
|
116
|
+
children: /* @__PURE__ */ jsx(NavigationMenu$1.Popup, { className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0", children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, { className: "relative size-full overflow-hidden" }) })
|
|
117
|
+
}
|
|
118
|
+
) });
|
|
119
|
+
}
|
|
120
|
+
function NavigationMenuLink({
|
|
121
|
+
className,
|
|
122
|
+
...props
|
|
123
|
+
}) {
|
|
124
|
+
return /* @__PURE__ */ jsx(
|
|
125
|
+
NavigationMenu$1.Link,
|
|
126
|
+
{
|
|
127
|
+
"data-slot": "navigation-menu-link",
|
|
128
|
+
className: cn(
|
|
129
|
+
"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
|
|
130
|
+
className
|
|
131
|
+
),
|
|
132
|
+
...props
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
function NavigationMenuIndicator({
|
|
137
|
+
className,
|
|
138
|
+
...props
|
|
139
|
+
}) {
|
|
140
|
+
return /* @__PURE__ */ jsx(
|
|
141
|
+
NavigationMenu$1.Icon,
|
|
142
|
+
{
|
|
143
|
+
"data-slot": "navigation-menu-indicator",
|
|
144
|
+
className: cn(
|
|
145
|
+
"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
|
|
146
|
+
className
|
|
147
|
+
),
|
|
148
|
+
...props,
|
|
149
|
+
children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
|
|
150
|
+
}
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { cn } from './chunk-U7N2A7A3.js';
|
|
2
|
+
import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
function Tabs({
|
|
7
|
+
className,
|
|
8
|
+
orientation = "horizontal",
|
|
9
|
+
...props
|
|
10
|
+
}) {
|
|
11
|
+
return /* @__PURE__ */ jsx(
|
|
12
|
+
Tabs$1.Root,
|
|
13
|
+
{
|
|
14
|
+
"data-slot": "tabs",
|
|
15
|
+
"data-orientation": orientation,
|
|
16
|
+
className: cn(
|
|
17
|
+
"group/tabs flex gap-2 data-horizontal:flex-col",
|
|
18
|
+
className
|
|
19
|
+
),
|
|
20
|
+
...props
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
var tabsListVariants = cva(
|
|
25
|
+
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
|
|
26
|
+
{
|
|
27
|
+
variants: {
|
|
28
|
+
variant: {
|
|
29
|
+
default: "bg-muted",
|
|
30
|
+
line: "gap-1 bg-transparent"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
defaultVariants: {
|
|
34
|
+
variant: "default"
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
function TabsList({
|
|
39
|
+
className,
|
|
40
|
+
variant = "default",
|
|
41
|
+
...props
|
|
42
|
+
}) {
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
Tabs$1.List,
|
|
45
|
+
{
|
|
46
|
+
"data-slot": "tabs-list",
|
|
47
|
+
"data-variant": variant,
|
|
48
|
+
className: cn(tabsListVariants({ variant }), className),
|
|
49
|
+
...props
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
function TabsTrigger({ className, ...props }) {
|
|
54
|
+
return /* @__PURE__ */ jsx(
|
|
55
|
+
Tabs$1.Tab,
|
|
56
|
+
{
|
|
57
|
+
"data-slot": "tabs-trigger",
|
|
58
|
+
className: cn(
|
|
59
|
+
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
60
|
+
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
|
61
|
+
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
|
62
|
+
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
|
63
|
+
className
|
|
64
|
+
),
|
|
65
|
+
...props
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
function TabsContent({ className, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx(
|
|
71
|
+
Tabs$1.Panel,
|
|
72
|
+
{
|
|
73
|
+
"data-slot": "tabs-content",
|
|
74
|
+
className: cn("flex-1 text-sm outline-none", className),
|
|
75
|
+
...props
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { cn } from './chunk-U7N2A7A3.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
function Table({ className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx(
|
|
6
|
+
"div",
|
|
7
|
+
{
|
|
8
|
+
"data-slot": "table-container",
|
|
9
|
+
className: "relative w-full overflow-x-auto",
|
|
10
|
+
children: /* @__PURE__ */ jsx(
|
|
11
|
+
"table",
|
|
12
|
+
{
|
|
13
|
+
"data-slot": "table",
|
|
14
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
15
|
+
...props
|
|
16
|
+
}
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
function TableHeader({ className, ...props }) {
|
|
22
|
+
return /* @__PURE__ */ jsx(
|
|
23
|
+
"thead",
|
|
24
|
+
{
|
|
25
|
+
"data-slot": "table-header",
|
|
26
|
+
className: cn("[&_tr]:border-b", className),
|
|
27
|
+
...props
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
function TableBody({ className, ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
"tbody",
|
|
34
|
+
{
|
|
35
|
+
"data-slot": "table-body",
|
|
36
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
37
|
+
...props
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
function TableFooter({ className, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx(
|
|
43
|
+
"tfoot",
|
|
44
|
+
{
|
|
45
|
+
"data-slot": "table-footer",
|
|
46
|
+
className: cn(
|
|
47
|
+
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
48
|
+
className
|
|
49
|
+
),
|
|
50
|
+
...props
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
function TableRow({ className, ...props }) {
|
|
55
|
+
return /* @__PURE__ */ jsx(
|
|
56
|
+
"tr",
|
|
57
|
+
{
|
|
58
|
+
"data-slot": "table-row",
|
|
59
|
+
className: cn(
|
|
60
|
+
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
61
|
+
className
|
|
62
|
+
),
|
|
63
|
+
...props
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
function TableHead({ className, ...props }) {
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
"th",
|
|
70
|
+
{
|
|
71
|
+
"data-slot": "table-head",
|
|
72
|
+
className: cn(
|
|
73
|
+
"h-10 px-2 text-left align-middle font-mono text-[10px] uppercase tracking-[0.12em] whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
|
74
|
+
className
|
|
75
|
+
),
|
|
76
|
+
...props
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
function TableCell({ className, ...props }) {
|
|
81
|
+
return /* @__PURE__ */ jsx(
|
|
82
|
+
"td",
|
|
83
|
+
{
|
|
84
|
+
"data-slot": "table-cell",
|
|
85
|
+
className: cn(
|
|
86
|
+
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
|
87
|
+
className
|
|
88
|
+
),
|
|
89
|
+
...props
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
function TableCaption({
|
|
94
|
+
className,
|
|
95
|
+
...props
|
|
96
|
+
}) {
|
|
97
|
+
return /* @__PURE__ */ jsx(
|
|
98
|
+
"caption",
|
|
99
|
+
{
|
|
100
|
+
"data-slot": "table-caption",
|
|
101
|
+
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
102
|
+
...props
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { cn } from './chunk-U7N2A7A3.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
function Label({ className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx(
|
|
6
|
+
"label",
|
|
7
|
+
{
|
|
8
|
+
"data-slot": "label",
|
|
9
|
+
className: cn(
|
|
10
|
+
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
11
|
+
className
|
|
12
|
+
),
|
|
13
|
+
...props
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { Label };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
|
|
3
|
+
// src/lib/button-variants.ts
|
|
4
|
+
var buttonVariants = cva(
|
|
5
|
+
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
6
|
+
{
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
10
|
+
outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
11
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
12
|
+
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
13
|
+
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
14
|
+
link: "text-foreground underline decoration-clay decoration-[1.5px] underline-offset-4 hover:text-foreground"
|
|
15
|
+
},
|
|
16
|
+
size: {
|
|
17
|
+
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
18
|
+
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
19
|
+
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
20
|
+
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
21
|
+
icon: "size-8",
|
|
22
|
+
"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
23
|
+
"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
|
24
|
+
"icon-lg": "size-9"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
variant: "default",
|
|
29
|
+
size: "default"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
export { buttonVariants };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { cn } from './chunk-U7N2A7A3.js';
|
|
2
|
+
import { Switch as Switch$1 } from '@base-ui/react/switch';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
function Switch({
|
|
6
|
+
className,
|
|
7
|
+
size = "default",
|
|
8
|
+
...props
|
|
9
|
+
}) {
|
|
10
|
+
return /* @__PURE__ */ jsx(
|
|
11
|
+
Switch$1.Root,
|
|
12
|
+
{
|
|
13
|
+
"data-slot": "switch",
|
|
14
|
+
"data-size": size,
|
|
15
|
+
className: cn(
|
|
16
|
+
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
|
|
17
|
+
className
|
|
18
|
+
),
|
|
19
|
+
...props,
|
|
20
|
+
children: /* @__PURE__ */ jsx(
|
|
21
|
+
Switch$1.Thumb,
|
|
22
|
+
{
|
|
23
|
+
"data-slot": "switch-thumb",
|
|
24
|
+
className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
|
|
25
|
+
}
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { Switch };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { useTheme } from 'next-themes';
|
|
2
|
+
import { Toaster as Toaster$1 } from 'sonner';
|
|
3
|
+
import { Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/components/ui/sonner.tsx
|
|
7
|
+
var Toaster = ({ ...props }) => {
|
|
8
|
+
const { theme = "system" } = useTheme();
|
|
9
|
+
return /* @__PURE__ */ jsx(
|
|
10
|
+
Toaster$1,
|
|
11
|
+
{
|
|
12
|
+
theme,
|
|
13
|
+
className: "toaster group",
|
|
14
|
+
icons: {
|
|
15
|
+
success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
|
|
16
|
+
info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
|
|
17
|
+
warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
|
|
18
|
+
error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
|
|
19
|
+
loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
|
|
20
|
+
},
|
|
21
|
+
style: {
|
|
22
|
+
"--normal-bg": "var(--popover)",
|
|
23
|
+
"--normal-text": "var(--popover-foreground)",
|
|
24
|
+
"--normal-border": "var(--border)",
|
|
25
|
+
"--border-radius": "var(--radius)"
|
|
26
|
+
},
|
|
27
|
+
toastOptions: {
|
|
28
|
+
classNames: {
|
|
29
|
+
toast: "cn-toast"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
...props
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { Toaster };
|