@siyahi/ui 0.1.9-next.2 → 0.1.9-next.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -176
- package/THIRD_PARTY_NOTICES.md +11 -11
- package/agents/examples/accordion.tsx +39 -0
- package/agents/examples/alert.tsx +25 -0
- package/agents/examples/app-sidebar.tsx +38 -0
- package/agents/examples/avatar.tsx +14 -0
- package/agents/examples/badge.tsx +18 -0
- package/agents/examples/bar-list-labels.tsx +22 -0
- package/agents/examples/bar-list-sides.tsx +30 -0
- package/agents/examples/bar-list.tsx +24 -0
- package/agents/examples/breadcrumb.tsx +28 -0
- package/agents/examples/button.tsx +21 -0
- package/agents/examples/calendar.tsx +15 -0
- package/agents/examples/card.tsx +34 -0
- package/agents/examples/chart-area.tsx +38 -0
- package/agents/examples/chart-bar-flows.tsx +31 -0
- package/agents/examples/chart-bar-hourly.tsx +28 -0
- package/agents/examples/chart-bar-losses.tsx +29 -0
- package/agents/examples/chart-bar-sectors.tsx +70 -0
- package/agents/examples/chart-bar-years.tsx +40 -0
- package/agents/examples/chart-bar.tsx +56 -0
- package/agents/examples/chart-category-ticks.tsx +50 -0
- package/agents/examples/chart-line-events.tsx +47 -0
- package/agents/examples/chart-line-timeline.tsx +41 -0
- package/agents/examples/chart-line.tsx +57 -0
- package/agents/examples/code-block.tsx +38 -0
- package/agents/examples/collapsible.tsx +16 -0
- package/agents/examples/command.tsx +27 -0
- package/agents/examples/context-menu.tsx +15 -0
- package/agents/examples/copy-button.tsx +8 -0
- package/agents/examples/data-bar.tsx +121 -0
- package/agents/examples/data-table-filters.tsx +103 -0
- package/agents/examples/data-table.tsx +98 -0
- package/agents/examples/delta.tsx +13 -0
- package/agents/examples/dialog.tsx +28 -0
- package/agents/examples/distribution-bar-budget.tsx +30 -0
- package/agents/examples/distribution-bar-tug.tsx +72 -0
- package/agents/examples/dropdown-menu.tsx +31 -0
- package/agents/examples/formatters.tsx +42 -0
- package/agents/examples/heatmap-calendar.tsx +50 -0
- package/agents/examples/heatmap-status.tsx +51 -0
- package/agents/examples/heatmap-weekday.tsx +53 -0
- package/agents/examples/input.tsx +17 -0
- package/agents/examples/local-time.tsx +14 -0
- package/agents/examples/metric-strip.tsx +40 -0
- package/agents/examples/page-section.tsx +52 -0
- package/agents/examples/popover.tsx +23 -0
- package/agents/examples/price-chart.tsx +32 -0
- package/agents/examples/progress-tone.tsx +28 -0
- package/agents/examples/progress.tsx +10 -0
- package/agents/examples/scroll-area.tsx +20 -0
- package/agents/examples/section-cards-select.tsx +27 -0
- package/agents/examples/section-cards-trend.tsx +30 -0
- package/agents/examples/section-cards.tsx +48 -0
- package/agents/examples/select.tsx +27 -0
- package/agents/examples/separator.tsx +13 -0
- package/agents/examples/sheet.tsx +15 -0
- package/agents/examples/skeleton.tsx +11 -0
- package/agents/examples/slider.tsx +5 -0
- package/agents/examples/surfaces.tsx +115 -0
- package/agents/examples/table.tsx +50 -0
- package/agents/examples/tabs.tsx +16 -0
- package/agents/examples/toggle-group.tsx +12 -0
- package/agents/examples/toggle.tsx +11 -0
- package/agents/examples/tooltip.tsx +13 -0
- package/agents/examples/treemap.tsx +87 -0
- package/agents/manifest.json +931 -0
- package/agents/report-rules.json +7 -0
- package/dist/components/registry/charts/bar-chart-card.js +33 -26
- package/dist/components/registry/dashboard-01/section-cards.d.ts +2 -0
- package/dist/components/registry/dashboard-01/section-cards.js +42 -35
- package/dist/components/registry/dashboardcn/bar-list.js +9 -8
- package/dist/components/registry/dashboardcn/distribution-bar.js +1 -1
- package/dist/components/registry/dashboardcn/kpi-row-card.d.ts +29 -0
- package/dist/components/registry/dashboardcn/kpi-row-card.js +81 -0
- package/dist/components/registry/dashboardcn/sparkline.d.ts +18 -0
- package/dist/components/registry/dashboardcn/sparkline.js +95 -0
- package/dist/components/registry/heatmap/calendar-heatmap.js +8 -1
- package/dist/components/registry/heatmap/status-heatmap.js +8 -1
- package/dist/components/registry/heatmap/weekday-heatmap.d.ts +6 -2
- package/dist/components/registry/heatmap/weekday-heatmap.js +56 -37
- package/dist/components/registry/niko-table/core/data-table-context.d.ts +2 -0
- package/dist/components/registry/niko-table/core/data-table-context.js +21 -0
- package/dist/components/registry/niko-table/core/data-table-grouped-row.js +3 -1
- package/dist/components/registry/niko-table/core/data-table-structure.js +15 -12
- package/dist/components/registry/niko-table/core/data-table.d.ts +2 -2
- package/dist/components/registry/niko-table/core/data-table.js +5 -1
- package/dist/components/registry/niko-table/filters/table-faceted-filter.js +4 -4
- package/dist/components/registry/niko-table/filters/table-search-filter.js +1 -1
- package/dist/components/registry/niko-table/lib/flex-columns.d.ts +1 -1
- package/dist/components/registry/niko-table/lib/flex-columns.js +3 -3
- package/dist/components/registry/niko-table/lib/styles.d.ts +1 -1
- package/dist/components/registry/niko-table/lib/styles.js +2 -2
- package/dist/components/registry/niko-table/ui/table.js +2 -2
- package/dist/components/registry/sidebar-07/app-sidebar.d.ts +1 -1
- package/dist/components/registry/sidebar-07/app-sidebar.js +3 -1
- package/dist/components/registry/sidebar-07/nav-main.d.ts +1 -1
- package/dist/components/registry/sidebar-07/nav-main.js +7 -1
- package/dist/components/siyahi/data-bar.d.ts +19 -0
- package/dist/components/siyahi/data-bar.js +29 -0
- package/dist/components/siyahi/page-section.d.ts +4 -1
- package/dist/components/siyahi/page-section.js +6 -3
- package/dist/components/siyahi/panel-grid.d.ts +22 -0
- package/dist/components/siyahi/panel-grid.js +34 -0
- package/dist/components/siyahi/siyahi-provider.d.ts +13 -2
- package/dist/components/siyahi/siyahi-provider.js +17 -4
- package/dist/components/siyahi/treemap.js +46 -4
- package/dist/components/ui/accordion.js +5 -5
- package/dist/components/ui/alert.js +2 -2
- package/dist/components/ui/badge.js +1 -1
- package/dist/components/ui/breadcrumb.js +2 -2
- package/dist/components/ui/button.js +10 -10
- package/dist/components/ui/calendar.js +1 -1
- package/dist/components/ui/card.js +4 -4
- package/dist/components/ui/chart.js +1 -1
- package/dist/components/ui/code-block.js +13 -12
- package/dist/components/ui/command.js +7 -6
- package/dist/components/ui/context-menu.js +7 -7
- package/dist/components/ui/dialog.js +5 -5
- package/dist/components/ui/dropdown-menu.js +8 -8
- package/dist/components/ui/input-group.js +11 -11
- package/dist/components/ui/input.js +1 -1
- package/dist/components/ui/popover.js +3 -3
- package/dist/components/ui/progress.js +1 -1
- package/dist/components/ui/select.js +6 -6
- package/dist/components/ui/sheet.js +5 -5
- package/dist/components/ui/sidebar.js +17 -18
- package/dist/components/ui/skeleton.js +1 -1
- package/dist/components/ui/slider.js +2 -2
- package/dist/components/ui/table.js +2 -2
- package/dist/components/ui/tabs.js +2 -2
- package/dist/components/ui/textarea.js +1 -1
- package/dist/components/ui/toggle-group.js +2 -2
- package/dist/components/ui/toggle.js +4 -4
- package/dist/components/ui/tooltip.js +2 -2
- package/dist/index.d.ts +7 -4
- package/dist/index.js +7 -4
- package/dist/lib/chart-frame.d.ts +13 -5
- package/dist/lib/chart-frame.js +207 -127
- package/dist/lib/chart-series.d.ts +7 -4
- package/dist/lib/format.js +32 -13
- package/dist/lib/heatmap-navigation.d.ts +8 -0
- package/dist/lib/heatmap-navigation.js +49 -0
- package/package.json +3 -1
- package/registry.lock.json +16 -0
- package/report.css +11 -11
- package/styles/siyahi.css +77 -11
- package/dist/lib/recharts.d.ts +0 -2
- package/dist/lib/recharts.js +0 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
|
|
2
3
|
import { InputGroup, InputGroupAddon } from "./input-group.js";
|
|
3
4
|
import { cn } from "cn";
|
|
@@ -9,7 +10,7 @@ import { Command as Command$1 } from "cmdk";
|
|
|
9
10
|
function Command({ className, ...props }) {
|
|
10
11
|
return /* @__PURE__ */ jsx(Command$1, {
|
|
11
12
|
"data-slot": "command",
|
|
12
|
-
className: cn("flex size-full flex-col overflow-hidden rounded-
|
|
13
|
+
className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
|
|
13
14
|
...props
|
|
14
15
|
});
|
|
15
16
|
}
|
|
@@ -20,7 +21,7 @@ function CommandDialog({ title = "Command Palette", description = "Search for a
|
|
|
20
21
|
className: "sr-only",
|
|
21
22
|
children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
|
|
22
23
|
}), /* @__PURE__ */ jsx(DialogContent, {
|
|
23
|
-
className: cn("top-1/3 translate-y-0 overflow-hidden rounded-
|
|
24
|
+
className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
|
|
24
25
|
showCloseButton,
|
|
25
26
|
children
|
|
26
27
|
})]
|
|
@@ -31,7 +32,7 @@ function CommandInput({ className, ...props }) {
|
|
|
31
32
|
"data-slot": "command-input-wrapper",
|
|
32
33
|
className: "p-1 pb-0",
|
|
33
34
|
children: /* @__PURE__ */ jsxs(InputGroup, {
|
|
34
|
-
className: "h-
|
|
35
|
+
className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!",
|
|
35
36
|
children: [/* @__PURE__ */ jsx(Command$1.Input, {
|
|
36
37
|
"data-slot": "command-input",
|
|
37
38
|
className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
@@ -57,21 +58,21 @@ function CommandEmpty({ className, ...props }) {
|
|
|
57
58
|
function CommandGroup({ className, ...props }) {
|
|
58
59
|
return /* @__PURE__ */ jsx(Command$1.Group, {
|
|
59
60
|
"data-slot": "command-group",
|
|
60
|
-
className: cn("overflow-hidden p-1
|
|
61
|
+
className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
|
|
61
62
|
...props
|
|
62
63
|
});
|
|
63
64
|
}
|
|
64
65
|
function CommandSeparator({ className, ...props }) {
|
|
65
66
|
return /* @__PURE__ */ jsx(Command$1.Separator, {
|
|
66
67
|
"data-slot": "command-separator",
|
|
67
|
-
className: cn("
|
|
68
|
+
className: cn("-mx-1 h-px bg-border", className),
|
|
68
69
|
...props
|
|
69
70
|
});
|
|
70
71
|
}
|
|
71
72
|
function CommandItem({ className, children, ...props }) {
|
|
72
73
|
return /* @__PURE__ */ jsxs(Command$1.Item, {
|
|
73
74
|
"data-slot": "command-item",
|
|
74
|
-
className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-
|
|
75
|
+
className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className),
|
|
75
76
|
...props,
|
|
76
77
|
children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })]
|
|
77
78
|
});
|
|
@@ -32,7 +32,7 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
|
|
|
32
32
|
sideOffset,
|
|
33
33
|
children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
|
|
34
34
|
"data-slot": "context-menu-content",
|
|
35
|
-
className: cn("z-50 max-h-(--available-height) min-w-
|
|
35
|
+
className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
36
36
|
...props
|
|
37
37
|
})
|
|
38
38
|
}) });
|
|
@@ -47,7 +47,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
|
|
|
47
47
|
return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
|
|
48
48
|
"data-slot": "context-menu-label",
|
|
49
49
|
"data-inset": inset,
|
|
50
|
-
className: cn("px-
|
|
50
|
+
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
51
51
|
...props
|
|
52
52
|
});
|
|
53
53
|
}
|
|
@@ -56,7 +56,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
|
56
56
|
"data-slot": "context-menu-item",
|
|
57
57
|
"data-inset": inset,
|
|
58
58
|
"data-variant": variant,
|
|
59
|
-
className: cn("group/context-menu-item relative flex cursor-default items-center gap-
|
|
59
|
+
className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
60
60
|
...props
|
|
61
61
|
});
|
|
62
62
|
}
|
|
@@ -70,7 +70,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
|
70
70
|
return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
|
|
71
71
|
"data-slot": "context-menu-sub-trigger",
|
|
72
72
|
"data-inset": inset,
|
|
73
|
-
className: cn("flex cursor-default items-center rounded-
|
|
73
|
+
className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
74
74
|
...props,
|
|
75
75
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
|
|
76
76
|
});
|
|
@@ -87,7 +87,7 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
|
|
|
87
87
|
return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
|
|
88
88
|
"data-slot": "context-menu-checkbox-item",
|
|
89
89
|
"data-inset": inset,
|
|
90
|
-
className: cn("relative flex cursor-default items-center gap-
|
|
90
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
91
91
|
checked,
|
|
92
92
|
...props,
|
|
93
93
|
children: [/* @__PURE__ */ jsx("span", {
|
|
@@ -106,7 +106,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
106
106
|
return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
|
|
107
107
|
"data-slot": "context-menu-radio-item",
|
|
108
108
|
"data-inset": inset,
|
|
109
|
-
className: cn("relative flex cursor-default items-center gap-
|
|
109
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
110
110
|
...props,
|
|
111
111
|
children: [/* @__PURE__ */ jsx("span", {
|
|
112
112
|
className: "pointer-events-none absolute right-2",
|
|
@@ -117,7 +117,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
117
117
|
function ContextMenuSeparator({ className, ...props }) {
|
|
118
118
|
return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
|
|
119
119
|
"data-slot": "context-menu-separator",
|
|
120
|
-
className: cn("-mx-1
|
|
120
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
121
121
|
...props
|
|
122
122
|
});
|
|
123
123
|
}
|
|
@@ -32,20 +32,20 @@ function DialogClose({ ...props }) {
|
|
|
32
32
|
function DialogOverlay({ className, ...props }) {
|
|
33
33
|
return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
|
|
34
34
|
"data-slot": "dialog-overlay",
|
|
35
|
-
className: cn("fixed inset-0 isolate z-50 bg-black/
|
|
35
|
+
className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
|
|
36
36
|
...props
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
39
|
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
40
40
|
return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
|
|
41
41
|
"data-slot": "dialog-content",
|
|
42
|
-
className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-
|
|
42
|
+
className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
43
43
|
...props,
|
|
44
44
|
children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
|
|
45
45
|
"data-slot": "dialog-close",
|
|
46
46
|
render: /* @__PURE__ */ jsx(Button, {
|
|
47
47
|
variant: "ghost",
|
|
48
|
-
className: "absolute top-
|
|
48
|
+
className: "absolute top-2 right-2",
|
|
49
49
|
size: "icon-sm"
|
|
50
50
|
}),
|
|
51
51
|
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
@@ -58,14 +58,14 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
|
|
|
58
58
|
function DialogHeader({ className, ...props }) {
|
|
59
59
|
return /* @__PURE__ */ jsx("div", {
|
|
60
60
|
"data-slot": "dialog-header",
|
|
61
|
-
className: cn("flex flex-col gap-
|
|
61
|
+
className: cn("flex flex-col gap-2", className),
|
|
62
62
|
...props
|
|
63
63
|
});
|
|
64
64
|
}
|
|
65
65
|
function DialogFooter({ className, showCloseButton = false, children, ...props }) {
|
|
66
66
|
return /* @__PURE__ */ jsxs("div", {
|
|
67
67
|
"data-slot": "dialog-footer",
|
|
68
|
-
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
68
|
+
className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
|
|
69
69
|
...props,
|
|
70
70
|
children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
|
|
71
71
|
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
@@ -32,7 +32,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
|
|
|
32
32
|
sideOffset,
|
|
33
33
|
children: /* @__PURE__ */ jsx(Menu.Popup, {
|
|
34
34
|
"data-slot": "dropdown-menu-content",
|
|
35
|
-
className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-
|
|
35
|
+
className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
36
36
|
...props
|
|
37
37
|
})
|
|
38
38
|
}) });
|
|
@@ -47,7 +47,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
|
|
|
47
47
|
return /* @__PURE__ */ jsx(Menu.GroupLabel, {
|
|
48
48
|
"data-slot": "dropdown-menu-label",
|
|
49
49
|
"data-inset": inset,
|
|
50
|
-
className: cn("px-
|
|
50
|
+
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
51
51
|
...props
|
|
52
52
|
});
|
|
53
53
|
}
|
|
@@ -56,7 +56,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
|
56
56
|
"data-slot": "dropdown-menu-item",
|
|
57
57
|
"data-inset": inset,
|
|
58
58
|
"data-variant": variant,
|
|
59
|
-
className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-
|
|
59
|
+
className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
60
60
|
...props
|
|
61
61
|
});
|
|
62
62
|
}
|
|
@@ -70,7 +70,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
|
70
70
|
return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
|
|
71
71
|
"data-slot": "dropdown-menu-sub-trigger",
|
|
72
72
|
"data-inset": inset,
|
|
73
|
-
className: cn("flex cursor-default items-center gap-
|
|
73
|
+
className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
74
74
|
...props,
|
|
75
75
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
|
|
76
76
|
});
|
|
@@ -78,7 +78,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
|
78
78
|
function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
|
|
79
79
|
return /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
80
80
|
"data-slot": "dropdown-menu-sub-content",
|
|
81
|
-
className: cn("w-auto min-w-
|
|
81
|
+
className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
82
82
|
align,
|
|
83
83
|
alignOffset,
|
|
84
84
|
side,
|
|
@@ -90,7 +90,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
|
|
|
90
90
|
return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
|
|
91
91
|
"data-slot": "dropdown-menu-checkbox-item",
|
|
92
92
|
"data-inset": inset,
|
|
93
|
-
className: cn("relative flex cursor-default items-center gap-
|
|
93
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
94
94
|
checked,
|
|
95
95
|
...props,
|
|
96
96
|
children: [/* @__PURE__ */ jsx("span", {
|
|
@@ -110,7 +110,7 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
110
110
|
return /* @__PURE__ */ jsxs(Menu.RadioItem, {
|
|
111
111
|
"data-slot": "dropdown-menu-radio-item",
|
|
112
112
|
"data-inset": inset,
|
|
113
|
-
className: cn("relative flex cursor-default items-center gap-
|
|
113
|
+
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
114
114
|
...props,
|
|
115
115
|
children: [/* @__PURE__ */ jsx("span", {
|
|
116
116
|
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
@@ -122,7 +122,7 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
|
122
122
|
function DropdownMenuSeparator({ className, ...props }) {
|
|
123
123
|
return /* @__PURE__ */ jsx(Menu.Separator, {
|
|
124
124
|
"data-slot": "dropdown-menu-separator",
|
|
125
|
-
className: cn("-mx-1
|
|
125
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
126
126
|
...props
|
|
127
127
|
});
|
|
128
128
|
}
|
|
@@ -11,16 +11,16 @@ function InputGroup({ className, ...props }) {
|
|
|
11
11
|
return /* @__PURE__ */ jsx("div", {
|
|
12
12
|
"data-slot": "input-group",
|
|
13
13
|
role: "group",
|
|
14
|
-
className: cn("group/input-group relative flex h-
|
|
14
|
+
className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
|
|
15
15
|
...props
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
|
-
const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-
|
|
18
|
+
const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
|
|
19
19
|
variants: { align: {
|
|
20
|
-
"inline-start": "order-first pl-
|
|
21
|
-
"inline-end": "order-last pr-
|
|
22
|
-
"block-start": "order-first w-full justify-start px-
|
|
23
|
-
"block-end": "order-last w-full justify-start px-
|
|
20
|
+
"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
|
21
|
+
"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
|
22
|
+
"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
|
23
|
+
"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
|
|
24
24
|
} },
|
|
25
25
|
defaultVariants: { align: "inline-start" }
|
|
26
26
|
});
|
|
@@ -37,11 +37,11 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
|
|
|
37
37
|
...props
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
const inputGroupButtonVariants = cva("flex items-center gap-2
|
|
40
|
+
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
|
|
41
41
|
variants: { size: {
|
|
42
|
-
xs: "h-6 gap-1 rounded-
|
|
42
|
+
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
43
43
|
sm: "",
|
|
44
|
-
"icon-xs": "size-6 rounded-
|
|
44
|
+
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
|
45
45
|
"icon-sm": "size-8 p-0 has-[>svg]:p-0"
|
|
46
46
|
} },
|
|
47
47
|
defaultVariants: { size: "xs" }
|
|
@@ -64,14 +64,14 @@ function InputGroupText({ className, ...props }) {
|
|
|
64
64
|
function InputGroupInput({ className, ...props }) {
|
|
65
65
|
return /* @__PURE__ */ jsx(Input, {
|
|
66
66
|
"data-slot": "input-group-control",
|
|
67
|
-
className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className),
|
|
67
|
+
className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
|
|
68
68
|
...props
|
|
69
69
|
});
|
|
70
70
|
}
|
|
71
71
|
function InputGroupTextarea({ className, ...props }) {
|
|
72
72
|
return /* @__PURE__ */ jsx(Textarea, {
|
|
73
73
|
"data-slot": "input-group-control",
|
|
74
|
-
className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2
|
|
74
|
+
className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
|
|
75
75
|
...props
|
|
76
76
|
});
|
|
77
77
|
}
|
|
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }) {
|
|
|
7
7
|
return /* @__PURE__ */ jsx(Input$1, {
|
|
8
8
|
type,
|
|
9
9
|
"data-slot": "input",
|
|
10
|
-
className: cn("h-
|
|
10
|
+
className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
11
11
|
...props
|
|
12
12
|
});
|
|
13
13
|
}
|
|
@@ -24,7 +24,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
|
|
|
24
24
|
className: "isolate z-50",
|
|
25
25
|
children: /* @__PURE__ */ jsx(Popover$1.Popup, {
|
|
26
26
|
"data-slot": "popover-content",
|
|
27
|
-
className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-
|
|
27
|
+
className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
28
28
|
...props
|
|
29
29
|
})
|
|
30
30
|
}) });
|
|
@@ -32,14 +32,14 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
|
|
|
32
32
|
function PopoverHeader({ className, ...props }) {
|
|
33
33
|
return /* @__PURE__ */ jsx("div", {
|
|
34
34
|
"data-slot": "popover-header",
|
|
35
|
-
className: cn("flex flex-col gap-
|
|
35
|
+
className: cn("flex flex-col gap-0.5 text-sm", className),
|
|
36
36
|
...props
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
39
|
function PopoverTitle({ className, ...props }) {
|
|
40
40
|
return /* @__PURE__ */ jsx(Popover$1.Title, {
|
|
41
41
|
"data-slot": "popover-title",
|
|
42
|
-
className: cn("
|
|
42
|
+
className: cn("font-medium", className),
|
|
43
43
|
...props
|
|
44
44
|
});
|
|
45
45
|
}
|
|
@@ -14,7 +14,7 @@ function Progress({ className, children, value, ...props }) {
|
|
|
14
14
|
}
|
|
15
15
|
function ProgressTrack({ className, ...props }) {
|
|
16
16
|
return /* @__PURE__ */ jsx(Progress$1.Track, {
|
|
17
|
-
className: cn("relative flex h-
|
|
17
|
+
className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className),
|
|
18
18
|
"data-slot": "progress-track",
|
|
19
19
|
...props
|
|
20
20
|
});
|
|
@@ -9,7 +9,7 @@ const Select = Select$1.Root;
|
|
|
9
9
|
function SelectGroup({ className, ...props }) {
|
|
10
10
|
return /* @__PURE__ */ jsx(Select$1.Group, {
|
|
11
11
|
"data-slot": "select-group",
|
|
12
|
-
className: cn("scroll-my-1
|
|
12
|
+
className: cn("scroll-my-1 p-1", className),
|
|
13
13
|
...props
|
|
14
14
|
});
|
|
15
15
|
}
|
|
@@ -24,7 +24,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
|
24
24
|
return /* @__PURE__ */ jsxs(Select$1.Trigger, {
|
|
25
25
|
"data-slot": "select-trigger",
|
|
26
26
|
"data-size": size,
|
|
27
|
-
className: cn("flex w-fit items-center justify-between gap-1.5 rounded-
|
|
27
|
+
className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none 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 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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", className),
|
|
28
28
|
...props,
|
|
29
29
|
children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
|
|
30
30
|
});
|
|
@@ -40,7 +40,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
|
|
|
40
40
|
children: /* @__PURE__ */ jsxs(Select$1.Popup, {
|
|
41
41
|
"data-slot": "select-content",
|
|
42
42
|
"data-align-trigger": alignItemWithTrigger,
|
|
43
|
-
className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-
|
|
43
|
+
className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
44
44
|
...props,
|
|
45
45
|
children: [
|
|
46
46
|
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
@@ -53,14 +53,14 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
|
|
|
53
53
|
function SelectLabel({ className, ...props }) {
|
|
54
54
|
return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
|
|
55
55
|
"data-slot": "select-label",
|
|
56
|
-
className: cn("px-
|
|
56
|
+
className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
|
|
57
57
|
...props
|
|
58
58
|
});
|
|
59
59
|
}
|
|
60
60
|
function SelectItem({ className, children, ...props }) {
|
|
61
61
|
return /* @__PURE__ */ jsxs(Select$1.Item, {
|
|
62
62
|
"data-slot": "select-item",
|
|
63
|
-
className: cn("relative flex w-full cursor-default items-center gap-
|
|
63
|
+
className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
|
|
64
64
|
...props,
|
|
65
65
|
children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
|
|
66
66
|
className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
|
|
@@ -74,7 +74,7 @@ function SelectItem({ className, children, ...props }) {
|
|
|
74
74
|
function SelectSeparator({ className, ...props }) {
|
|
75
75
|
return /* @__PURE__ */ jsx(Select$1.Separator, {
|
|
76
76
|
"data-slot": "select-separator",
|
|
77
|
-
className: cn("pointer-events-none -mx-1
|
|
77
|
+
className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
|
|
78
78
|
...props
|
|
79
79
|
});
|
|
80
80
|
}
|
|
@@ -33,7 +33,7 @@ function SheetPortal({ ...props }) {
|
|
|
33
33
|
function SheetOverlay({ className, ...props }) {
|
|
34
34
|
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
35
35
|
"data-slot": "sheet-overlay",
|
|
36
|
-
className: cn("fixed inset-0 z-50 bg-black/
|
|
36
|
+
className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className),
|
|
37
37
|
...props
|
|
38
38
|
});
|
|
39
39
|
}
|
|
@@ -41,13 +41,13 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
|
|
|
41
41
|
return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
42
42
|
"data-slot": "sheet-content",
|
|
43
43
|
"data-side": side,
|
|
44
|
-
className: cn("fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-
|
|
44
|
+
className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
|
|
45
45
|
...props,
|
|
46
46
|
children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
|
|
47
47
|
"data-slot": "sheet-close",
|
|
48
48
|
render: /* @__PURE__ */ jsx(Button, {
|
|
49
49
|
variant: "ghost",
|
|
50
|
-
className: "absolute top-
|
|
50
|
+
className: "absolute top-3 right-3",
|
|
51
51
|
size: "icon-sm"
|
|
52
52
|
}),
|
|
53
53
|
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
@@ -60,14 +60,14 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
|
|
|
60
60
|
function SheetHeader({ className, ...props }) {
|
|
61
61
|
return /* @__PURE__ */ jsx("div", {
|
|
62
62
|
"data-slot": "sheet-header",
|
|
63
|
-
className: cn("flex flex-col gap-
|
|
63
|
+
className: cn("flex flex-col gap-0.5 p-4", className),
|
|
64
64
|
...props
|
|
65
65
|
});
|
|
66
66
|
}
|
|
67
67
|
function SheetFooter({ className, ...props }) {
|
|
68
68
|
return /* @__PURE__ */ jsx("div", {
|
|
69
69
|
"data-slot": "sheet-footer",
|
|
70
|
-
className: cn("mt-auto flex flex-col gap-2 p-
|
|
70
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
71
71
|
...props
|
|
72
72
|
});
|
|
73
73
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { Button } from "./button.js";
|
|
3
2
|
import { Input } from "./input.js";
|
|
4
3
|
import { Separator } from "./separator.js";
|
|
@@ -134,7 +133,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
|
|
|
134
133
|
children: /* @__PURE__ */ jsx("div", {
|
|
135
134
|
"data-sidebar": "sidebar",
|
|
136
135
|
"data-slot": "sidebar-inner",
|
|
137
|
-
className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-
|
|
136
|
+
className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
|
|
138
137
|
children
|
|
139
138
|
})
|
|
140
139
|
})]
|
|
@@ -175,7 +174,7 @@ function SidebarRail({ className, ...props }) {
|
|
|
175
174
|
function SidebarInset({ className, ...props }) {
|
|
176
175
|
return /* @__PURE__ */ jsx("main", {
|
|
177
176
|
"data-slot": "sidebar-inset",
|
|
178
|
-
className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-
|
|
177
|
+
className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
|
|
179
178
|
...props
|
|
180
179
|
});
|
|
181
180
|
}
|
|
@@ -183,7 +182,7 @@ function SidebarInput({ className, ...props }) {
|
|
|
183
182
|
return /* @__PURE__ */ jsx(Input, {
|
|
184
183
|
"data-slot": "sidebar-input",
|
|
185
184
|
"data-sidebar": "input",
|
|
186
|
-
className: cn("h-8 w-full bg-
|
|
185
|
+
className: cn("h-8 w-full bg-background shadow-none", className),
|
|
187
186
|
...props
|
|
188
187
|
});
|
|
189
188
|
}
|
|
@@ -191,7 +190,7 @@ function SidebarHeader({ className, ...props }) {
|
|
|
191
190
|
return /* @__PURE__ */ jsx("div", {
|
|
192
191
|
"data-slot": "sidebar-header",
|
|
193
192
|
"data-sidebar": "header",
|
|
194
|
-
className: cn("flex flex-col gap-2 p-2
|
|
193
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
195
194
|
...props
|
|
196
195
|
});
|
|
197
196
|
}
|
|
@@ -215,7 +214,7 @@ function SidebarContent({ className, ...props }) {
|
|
|
215
214
|
return /* @__PURE__ */ jsx("div", {
|
|
216
215
|
"data-slot": "sidebar-content",
|
|
217
216
|
"data-sidebar": "content",
|
|
218
|
-
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-
|
|
217
|
+
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
|
|
219
218
|
...props
|
|
220
219
|
});
|
|
221
220
|
}
|
|
@@ -230,7 +229,7 @@ function SidebarGroup({ className, ...props }) {
|
|
|
230
229
|
function SidebarGroupLabel({ className, render, ...props }) {
|
|
231
230
|
return useRender({
|
|
232
231
|
defaultTagName: "div",
|
|
233
|
-
props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-
|
|
232
|
+
props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
234
233
|
render,
|
|
235
234
|
state: {
|
|
236
235
|
slot: "sidebar-group-label",
|
|
@@ -241,7 +240,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
|
|
|
241
240
|
function SidebarGroupAction({ className, render, ...props }) {
|
|
242
241
|
return useRender({
|
|
243
242
|
defaultTagName: "button",
|
|
244
|
-
props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-
|
|
243
|
+
props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
245
244
|
render,
|
|
246
245
|
state: {
|
|
247
246
|
slot: "sidebar-group-action",
|
|
@@ -261,7 +260,7 @@ function SidebarMenu({ className, ...props }) {
|
|
|
261
260
|
return /* @__PURE__ */ jsx("ul", {
|
|
262
261
|
"data-slot": "sidebar-menu",
|
|
263
262
|
"data-sidebar": "menu",
|
|
264
|
-
className: cn("flex w-full min-w-0 flex-col gap-0
|
|
263
|
+
className: cn("flex w-full min-w-0 flex-col gap-0", className),
|
|
265
264
|
...props
|
|
266
265
|
});
|
|
267
266
|
}
|
|
@@ -273,16 +272,16 @@ function SidebarMenuItem({ className, ...props }) {
|
|
|
273
272
|
...props
|
|
274
273
|
});
|
|
275
274
|
}
|
|
276
|
-
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-
|
|
275
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
|
|
277
276
|
variants: {
|
|
278
277
|
variant: {
|
|
279
278
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
280
279
|
outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
|
|
281
280
|
},
|
|
282
281
|
size: {
|
|
283
|
-
default: "h-
|
|
284
|
-
sm: "h-
|
|
285
|
-
lg: "h-
|
|
282
|
+
default: "h-8 text-sm",
|
|
283
|
+
sm: "h-7 text-xs",
|
|
284
|
+
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
|
|
286
285
|
}
|
|
287
286
|
},
|
|
288
287
|
defaultVariants: {
|
|
@@ -318,7 +317,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
|
|
|
318
317
|
function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
|
|
319
318
|
return useRender({
|
|
320
319
|
defaultTagName: "button",
|
|
321
|
-
props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-
|
|
320
|
+
props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className) }, props),
|
|
322
321
|
render,
|
|
323
322
|
state: {
|
|
324
323
|
slot: "sidebar-menu-action",
|
|
@@ -330,7 +329,7 @@ function SidebarMenuBadge({ className, ...props }) {
|
|
|
330
329
|
return /* @__PURE__ */ jsx("div", {
|
|
331
330
|
"data-slot": "sidebar-menu-badge",
|
|
332
331
|
"data-sidebar": "menu-badge",
|
|
333
|
-
className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-
|
|
332
|
+
className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
|
|
334
333
|
...props
|
|
335
334
|
});
|
|
336
335
|
}
|
|
@@ -341,10 +340,10 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
|
341
340
|
return /* @__PURE__ */ jsxs("div", {
|
|
342
341
|
"data-slot": "sidebar-menu-skeleton",
|
|
343
342
|
"data-sidebar": "menu-skeleton",
|
|
344
|
-
className: cn("flex h-8 items-center gap-2 rounded-
|
|
343
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
345
344
|
...props,
|
|
346
345
|
children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
|
|
347
|
-
className: "size-4 rounded-
|
|
346
|
+
className: "size-4 rounded-md",
|
|
348
347
|
"data-sidebar": "menu-skeleton-icon"
|
|
349
348
|
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
350
349
|
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
@@ -372,7 +371,7 @@ function SidebarMenuSubItem({ className, ...props }) {
|
|
|
372
371
|
function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
|
|
373
372
|
return useRender({
|
|
374
373
|
defaultTagName: "a",
|
|
375
|
-
props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-
|
|
374
|
+
props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className) }, props),
|
|
376
375
|
render,
|
|
377
376
|
state: {
|
|
378
377
|
slot: "sidebar-menu-sub-button",
|