@giddaa-housing/ui 0.1.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -6
- package/css/base.css +37 -0
- package/css/components.css +135 -0
- package/css/generated/shared.css +1 -0
- package/css/giddaa.css +402 -0
- package/css/preset.css +77 -0
- package/css/styles.css +2 -0
- package/css/theme.css +255 -0
- package/dist/accordion.d.ts +9 -10
- package/dist/accordion.js +41 -117
- package/dist/activity-timeline.d.ts +29 -0
- package/dist/activity-timeline.js +97 -0
- package/dist/alert.d.ts +8 -9
- package/dist/alert.js +53 -141
- package/dist/auth-layout.d.ts +23 -0
- package/dist/auth-layout.js +153 -0
- package/dist/avatar.d.ts +6 -6
- package/dist/avatar.js +40 -142
- package/dist/badge.d.ts +12 -13
- package/dist/badge.js +66 -114
- package/dist/bar-chart.d.ts +136 -114
- package/dist/bar-chart.js +244 -297
- package/dist/breadcrumb.d.ts +5 -5
- package/dist/breadcrumb.js +56 -148
- package/dist/bullet-chart.d.ts +33 -33
- package/dist/bullet-chart.js +123 -183
- package/dist/button-BZIeyUw6.d.ts +17 -0
- package/dist/button-group.d.ts +13 -16
- package/dist/button-group.js +38 -163
- package/dist/button.d.ts +2 -19
- package/dist/button.js +90 -142
- package/dist/calendar.d.ts +6 -6
- package/dist/calendar.js +134 -288
- package/dist/card.d.ts +14 -16
- package/dist/card.js +58 -174
- package/dist/carousel.d.ts +34 -35
- package/dist/carousel.js +319 -378
- package/dist/chart.d.ts +58 -59
- package/dist/chart.js +350 -466
- package/dist/checkbox.d.ts +10 -12
- package/dist/checkbox.js +84 -84
- package/dist/cn-BI_4DMBf.js +23 -0
- package/dist/collapsible.d.ts +7 -8
- package/dist/collapsible.js +23 -77
- package/dist/combobox.d.ts +10 -10
- package/dist/combobox.js +220 -696
- package/dist/cta.d.ts +64 -0
- package/dist/cta.js +192 -0
- package/dist/currency-selector.d.ts +41 -0
- package/dist/currency-selector.js +114 -0
- package/dist/data-table.d.ts +164 -0
- package/dist/data-table.js +673 -0
- package/dist/date-picker.d.ts +27 -20
- package/dist/date-picker.js +122 -520
- package/dist/details-card.d.ts +19 -0
- package/dist/details-card.js +118 -0
- package/dist/dialog.d.ts +13 -14
- package/dist/dialog.js +117 -320
- package/dist/dropdown-menu.d.ts +14 -14
- package/dist/dropdown-menu.js +170 -365
- package/dist/dropzone.d.ts +55 -55
- package/dist/dropzone.js +328 -467
- package/dist/editorial-card.d.ts +27 -0
- package/dist/editorial-card.js +144 -0
- package/dist/empty-state.d.ts +8 -9
- package/dist/empty-state.js +48 -135
- package/dist/field.d.ts +23 -25
- package/dist/field.js +111 -327
- package/dist/filter.d.ts +118 -0
- package/dist/filter.js +775 -0
- package/dist/footer.d.ts +40 -0
- package/dist/footer.js +227 -0
- package/dist/funnel-chart.d.ts +38 -41
- package/dist/funnel-chart.js +168 -563
- package/dist/gallery-indicator.d.ts +17 -0
- package/dist/gallery-indicator.js +75 -0
- package/dist/heatmap-chart.d.ts +95 -0
- package/dist/heatmap-chart.js +197 -0
- package/dist/infotip.d.ts +10 -0
- package/dist/infotip.js +40 -0
- package/dist/input-CfoEJ8A6.d.ts +12 -0
- package/dist/input-group.d.ts +16 -19
- package/dist/input-group.js +92 -372
- package/dist/input-size-context-C-SFx9sx.d.ts +10 -0
- package/dist/input-size-context.d.ts +2 -11
- package/dist/input-size-context.js +14 -20
- package/dist/input.d.ts +2 -13
- package/dist/input.js +23 -79
- package/dist/item.d.ts +7 -8
- package/dist/item.js +22 -89
- package/dist/kpi-card.d.ts +18 -20
- package/dist/kpi-card.js +84 -232
- package/dist/label.d.ts +6 -6
- package/dist/label.js +39 -66
- package/dist/line-chart.d.ts +88 -89
- package/dist/line-chart.js +143 -262
- package/dist/logo.d.ts +4 -4
- package/dist/logo.js +87 -141
- package/dist/map-indicator.d.ts +13 -0
- package/dist/map-indicator.js +83 -0
- package/dist/match.d.ts +15 -0
- package/dist/match.js +68 -0
- package/dist/media-gallery-hero.d.ts +58 -0
- package/dist/media-gallery-hero.js +201 -0
- package/dist/media-player.d.ts +60 -0
- package/dist/media-player.js +919 -0
- package/dist/multi-step-form.d.ts +56 -0
- package/dist/multi-step-form.js +342 -0
- package/dist/number-input.d.ts +34 -34
- package/dist/number-input.js +62 -413
- package/dist/page-header.d.ts +10 -11
- package/dist/page-header.js +34 -107
- package/dist/pagination.d.ts +17 -20
- package/dist/pagination.js +132 -341
- package/dist/password-input.d.ts +5 -12
- package/dist/password-input.js +32 -354
- package/dist/phone-input.d.ts +19 -19
- package/dist/phone-input.js +232 -561
- package/dist/photo-gallery.d.ts +20 -20
- package/dist/photo-gallery.js +314 -746
- package/dist/picker-lzgmsNfG.js +32 -0
- package/dist/pie-chart.d.ts +60 -60
- package/dist/pie-chart.js +141 -184
- package/dist/popover.d.ts +9 -9
- package/dist/popover.js +60 -156
- package/dist/price-tag.d.ts +34 -0
- package/dist/price-tag.js +118 -0
- package/dist/progress.d.ts +18 -16
- package/dist/progress.js +156 -300
- package/dist/property-listing-card.d.ts +29 -0
- package/dist/property-listing-card.js +117 -0
- package/dist/radar-chart.d.ts +108 -0
- package/dist/radar-chart.js +172 -0
- package/dist/radio-group.d.ts +11 -13
- package/dist/radio-group.js +47 -96
- package/dist/review-block.d.ts +18 -0
- package/dist/review-block.js +154 -0
- package/dist/rich-text-editor.d.ts +30 -14
- package/dist/rich-text-editor.js +594 -979
- package/dist/scatter-chart.d.ts +140 -0
- package/dist/scatter-chart.js +248 -0
- package/dist/search-input.d.ts +8 -15
- package/dist/search-input.js +58 -408
- package/dist/select.d.ts +8 -8
- package/dist/select.js +131 -291
- package/dist/separator.d.ts +8 -9
- package/dist/separator.js +31 -70
- package/dist/sheet.d.ts +11 -11
- package/dist/sheet.js +84 -262
- package/dist/sidebar.d.ts +32 -37
- package/dist/sidebar.js +380 -1055
- package/dist/size-context-D4mYvcg8.d.ts +10 -0
- package/dist/size-context.d.ts +2 -11
- package/dist/size-context.js +14 -18
- package/dist/skeleton.d.ts +4 -5
- package/dist/skeleton.js +9 -45
- package/dist/slider.d.ts +27 -0
- package/dist/slider.js +81 -0
- package/dist/sparkline.d.ts +43 -46
- package/dist/sparkline.js +223 -561
- package/dist/stepper.d.ts +23 -24
- package/dist/stepper.js +149 -276
- package/dist/styles.css +9995 -2
- package/dist/switch.d.ts +10 -12
- package/dist/switch.js +49 -106
- package/dist/table-card.d.ts +35 -0
- package/dist/table-card.js +125 -0
- package/dist/table.d.ts +18 -14
- package/dist/table.js +114 -182
- package/dist/tabs.d.ts +23 -15
- package/dist/tabs.js +62 -149
- package/dist/tag.d.ts +22 -23
- package/dist/tag.js +104 -156
- package/dist/testimonial-block.d.ts +33 -0
- package/dist/testimonial-block.js +208 -0
- package/dist/textarea-IS_D8pXf.d.ts +11 -0
- package/dist/textarea.d.ts +2 -12
- package/dist/textarea.js +20 -74
- package/dist/time-picker.d.ts +11 -11
- package/dist/time-picker.js +247 -464
- package/dist/toast.d.ts +16 -18
- package/dist/toast.js +154 -310
- package/dist/tooltip.d.ts +9 -10
- package/dist/tooltip.js +33 -91
- package/dist/tree-map.d.ts +54 -57
- package/dist/tree-map.js +231 -646
- package/dist/use-uncontrolled-CLfM1XbB.js +21 -0
- package/dist/waterfall-chart.d.ts +126 -0
- package/dist/waterfall-chart.js +480 -0
- package/package.json +123 -34
- package/dist/accordion.js.map +0 -1
- package/dist/alert.js.map +0 -1
- package/dist/avatar.js.map +0 -1
- package/dist/badge.js.map +0 -1
- package/dist/bar-chart.js.map +0 -1
- package/dist/base.css +0 -32
- package/dist/breadcrumb.js.map +0 -1
- package/dist/bullet-chart.js.map +0 -1
- package/dist/button-group.js.map +0 -1
- package/dist/button.js.map +0 -1
- package/dist/calendar.js.map +0 -1
- package/dist/card.js.map +0 -1
- package/dist/carousel.js.map +0 -1
- package/dist/chart.js.map +0 -1
- package/dist/checkbox.js.map +0 -1
- package/dist/collapsible.js.map +0 -1
- package/dist/combobox.js.map +0 -1
- package/dist/date-picker.js.map +0 -1
- package/dist/dialog.js.map +0 -1
- package/dist/dropdown-menu.js.map +0 -1
- package/dist/dropzone.js.map +0 -1
- package/dist/empty-state.js.map +0 -1
- package/dist/field.js.map +0 -1
- package/dist/files/red-hat-display-latin-300-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-300-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-300-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-300-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-400-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-400-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-400-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-400-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-500-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-500-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-500-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-500-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-600-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-600-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-600-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-600-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-700-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-700-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-700-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-700-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-800-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-800-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-800-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-800-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-900-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-900-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-900-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-900-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-300-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-300-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-300-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-300-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-400-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-400-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-400-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-400-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-500-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-500-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-500-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-500-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-600-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-600-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-600-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-600-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-700-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-700-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-700-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-700-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-800-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-800-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-800-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-800-normal.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-900-italic.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-900-italic.woff2 +0 -0
- package/dist/files/red-hat-display-latin-ext-900-normal.woff +0 -0
- package/dist/files/red-hat-display-latin-ext-900-normal.woff2 +0 -0
- package/dist/funnel-chart.js.map +0 -1
- package/dist/index.d.ts +0 -87
- package/dist/index.js +0 -10448
- package/dist/index.js.map +0 -1
- package/dist/input-group.js.map +0 -1
- package/dist/input-size-context.js.map +0 -1
- package/dist/input.js.map +0 -1
- package/dist/item.js.map +0 -1
- package/dist/kpi-card.js.map +0 -1
- package/dist/label.js.map +0 -1
- package/dist/line-chart.js.map +0 -1
- package/dist/logo.js.map +0 -1
- package/dist/number-input.js.map +0 -1
- package/dist/page-header.js.map +0 -1
- package/dist/pagination.js.map +0 -1
- package/dist/password-input.js.map +0 -1
- package/dist/phone-input.js.map +0 -1
- package/dist/photo-gallery.js.map +0 -1
- package/dist/pie-chart.js.map +0 -1
- package/dist/popover.js.map +0 -1
- package/dist/progress.js.map +0 -1
- package/dist/radio-group.js.map +0 -1
- package/dist/red-hat-display.css +0 -2
- package/dist/rich-text-editor.js.map +0 -1
- package/dist/search-input.js.map +0 -1
- package/dist/select.js.map +0 -1
- package/dist/separator.js.map +0 -1
- package/dist/sheet.js.map +0 -1
- package/dist/sidebar.js.map +0 -1
- package/dist/size-context.js.map +0 -1
- package/dist/skeleton.js.map +0 -1
- package/dist/sparkline.js.map +0 -1
- package/dist/stepper.js.map +0 -1
- package/dist/switch.js.map +0 -1
- package/dist/tab-list.d.ts +0 -38
- package/dist/tab-list.js +0 -394
- package/dist/tab-list.js.map +0 -1
- package/dist/table.js.map +0 -1
- package/dist/tabs.js.map +0 -1
- package/dist/tag.js.map +0 -1
- package/dist/textarea.js.map +0 -1
- package/dist/theme/giddaa.css +0 -2
- package/dist/time-picker.js.map +0 -1
- package/dist/toast.js.map +0 -1
- package/dist/tooltip.js.map +0 -1
- package/dist/tree-map.js.map +0 -1
package/dist/sidebar.js
CHANGED
|
@@ -1,1078 +1,403 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as cn } from "./cn-BI_4DMBf.js";
|
|
3
|
+
import { Separator } from "./separator.js";
|
|
4
|
+
import { Button } from "./button.js";
|
|
5
|
+
import { Input } from "./input.js";
|
|
6
|
+
import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
|
|
7
|
+
import { Skeleton } from "./skeleton.js";
|
|
8
|
+
import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
|
|
9
|
+
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
|
|
10
|
+
import { Menu } from "lucide-react";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
12
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
3
13
|
import { useRender } from "@base-ui/react/use-render";
|
|
4
|
-
import { cva
|
|
5
|
-
import { Menu } from "lucide-react";
|
|
6
|
-
import * as React2 from "react";
|
|
7
|
-
|
|
8
|
-
// src/lib/cn.ts
|
|
9
|
-
import { clsx } from "clsx";
|
|
10
|
-
import { extendTailwindMerge } from "tailwind-merge";
|
|
11
|
-
var twMerge = extendTailwindMerge({
|
|
12
|
-
extend: {
|
|
13
|
-
classGroups: {
|
|
14
|
-
"font-size": [
|
|
15
|
-
{
|
|
16
|
-
text: [
|
|
17
|
-
"gdt-display",
|
|
18
|
-
"gdt-h1",
|
|
19
|
-
"gdt-h2",
|
|
20
|
-
"gdt-h3",
|
|
21
|
-
"gdt-h4",
|
|
22
|
-
"gdt-h5",
|
|
23
|
-
"gdt-xl",
|
|
24
|
-
"gdt-lg",
|
|
25
|
-
"gdt-md",
|
|
26
|
-
"gdt-sm",
|
|
27
|
-
"gdt-xs",
|
|
28
|
-
"gdt-subtext",
|
|
29
|
-
"gdt-capitalized"
|
|
30
|
-
]
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
function cn(...inputs) {
|
|
37
|
-
return twMerge(clsx(inputs));
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// src/lib/use-mobile.ts
|
|
14
|
+
import { cva } from "class-variance-authority";
|
|
41
15
|
import * as React from "react";
|
|
42
|
-
|
|
16
|
+
//#region src/lib/use-mobile.ts
|
|
17
|
+
const DEFAULT_MOBILE_BREAKPOINT = 1024;
|
|
43
18
|
function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
}) {
|
|
64
|
-
const [uncontrolledValue, setUncontrolledValue] = useState2(
|
|
65
|
-
defaultValue !== void 0 ? defaultValue : finalValue
|
|
66
|
-
);
|
|
67
|
-
const handleUncontrolledChange = (nextValue, ...payload) => {
|
|
68
|
-
setUncontrolledValue(nextValue);
|
|
69
|
-
onChange?.(nextValue, ...payload);
|
|
70
|
-
};
|
|
71
|
-
if (value !== void 0) {
|
|
72
|
-
return [value, onChange, true];
|
|
73
|
-
}
|
|
74
|
-
return [uncontrolledValue, handleUncontrolledChange, false];
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// src/components/ui/button.tsx
|
|
78
|
-
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
79
|
-
import { cva } from "class-variance-authority";
|
|
80
|
-
import { Loader } from "lucide-react";
|
|
81
|
-
|
|
82
|
-
// src/components/ui/size-context.tsx
|
|
83
|
-
import { createContext, useContext } from "react";
|
|
84
|
-
import { Fragment, jsx } from "react/jsx-runtime";
|
|
85
|
-
var SizeContext = createContext(void 0);
|
|
86
|
-
function SizeProvider({
|
|
87
|
-
children,
|
|
88
|
-
size
|
|
89
|
-
}) {
|
|
90
|
-
if (!size) {
|
|
91
|
-
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
92
|
-
}
|
|
93
|
-
return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
|
|
94
|
-
}
|
|
95
|
-
function useComponentSize(size, fallback = "md") {
|
|
96
|
-
const inheritedSize = useContext(SizeContext);
|
|
97
|
-
return size ?? inheritedSize ?? fallback;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// src/components/ui/button.tsx
|
|
101
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
102
|
-
var buttonVariants = cva(
|
|
103
|
-
"group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
104
|
-
{
|
|
105
|
-
variants: {
|
|
106
|
-
variant: {
|
|
107
|
-
primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
|
|
108
|
-
"primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
|
|
109
|
-
secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
|
|
110
|
-
"secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
|
|
111
|
-
tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
|
|
112
|
-
"tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
|
|
113
|
-
ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
|
|
114
|
-
danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
|
|
115
|
-
"glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
|
|
116
|
-
"link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
|
|
117
|
-
"link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
|
|
118
|
-
},
|
|
119
|
-
size: {
|
|
120
|
-
sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
|
|
121
|
-
md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
|
|
122
|
-
lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
|
|
123
|
-
xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
|
|
124
|
-
icon: "size-10",
|
|
125
|
-
"icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
|
|
126
|
-
"icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
|
|
127
|
-
"icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
|
|
128
|
-
"icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
defaultVariants: {
|
|
132
|
-
variant: "primary",
|
|
133
|
-
size: "md"
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
);
|
|
137
|
-
function Button({
|
|
138
|
-
className,
|
|
139
|
-
variant = "primary",
|
|
140
|
-
size,
|
|
141
|
-
isLoading = false,
|
|
142
|
-
children,
|
|
143
|
-
disabled = false,
|
|
144
|
-
...props
|
|
145
|
-
}) {
|
|
146
|
-
const inheritedSize = useComponentSize();
|
|
147
|
-
const resolvedSize = size ?? inheritedSize;
|
|
148
|
-
const _disabled = disabled || isLoading;
|
|
149
|
-
return /* @__PURE__ */ jsxs(
|
|
150
|
-
ButtonPrimitive,
|
|
151
|
-
{
|
|
152
|
-
"data-slot": "button",
|
|
153
|
-
className: cn(buttonVariants({ variant, size: resolvedSize, className })),
|
|
154
|
-
disabled: _disabled,
|
|
155
|
-
...props,
|
|
156
|
-
children: [
|
|
157
|
-
isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
|
|
158
|
-
" ",
|
|
159
|
-
children
|
|
160
|
-
]
|
|
161
|
-
}
|
|
162
|
-
);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
// src/components/ui/input.tsx
|
|
166
|
-
import { Input as InputPrimitive } from "@base-ui/react/input";
|
|
167
|
-
import { cva as cva2 } from "class-variance-authority";
|
|
168
|
-
|
|
169
|
-
// src/components/ui/input-size-context.tsx
|
|
170
|
-
import { createContext as createContext2, useContext as useContext2 } from "react";
|
|
171
|
-
import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
|
|
172
|
-
var InputSizeContext = createContext2(
|
|
173
|
-
void 0
|
|
174
|
-
);
|
|
175
|
-
function useInputComponentSize(size, fallback = "md") {
|
|
176
|
-
const inheritedSize = useContext2(InputSizeContext);
|
|
177
|
-
return size ?? inheritedSize ?? fallback;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
// src/components/ui/input.tsx
|
|
181
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
182
|
-
var inputVariants = cva2(
|
|
183
|
-
"flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
|
|
184
|
-
{
|
|
185
|
-
variants: {
|
|
186
|
-
size: {
|
|
187
|
-
sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
|
|
188
|
-
md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
|
|
189
|
-
lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
|
|
190
|
-
xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
|
|
191
|
-
}
|
|
192
|
-
},
|
|
193
|
-
defaultVariants: {
|
|
194
|
-
size: "md"
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
);
|
|
198
|
-
function Input({ className, size, type, ...props }) {
|
|
199
|
-
const resolvedSize = useInputComponentSize(size);
|
|
200
|
-
return /* @__PURE__ */ jsx4(
|
|
201
|
-
InputPrimitive,
|
|
202
|
-
{
|
|
203
|
-
type,
|
|
204
|
-
"data-slot": "input",
|
|
205
|
-
"data-size": resolvedSize,
|
|
206
|
-
className: cn(inputVariants({ size: resolvedSize }), className),
|
|
207
|
-
...props
|
|
208
|
-
}
|
|
209
|
-
);
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
// src/components/ui/separator.tsx
|
|
213
|
-
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
214
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
215
|
-
function Separator({
|
|
216
|
-
className,
|
|
217
|
-
orientation = "horizontal",
|
|
218
|
-
dashed = false,
|
|
219
|
-
shade = "feint",
|
|
220
|
-
thickness = "default",
|
|
221
|
-
...props
|
|
222
|
-
}) {
|
|
223
|
-
return /* @__PURE__ */ jsx5(
|
|
224
|
-
SeparatorPrimitive,
|
|
225
|
-
{
|
|
226
|
-
"data-slot": "separator",
|
|
227
|
-
orientation,
|
|
228
|
-
className: cn(
|
|
229
|
-
"shrink-0 data-horizontal:h-0 data-horizontal:w-full data-vertical:w-0 data-vertical:self-stretch",
|
|
230
|
-
// style
|
|
231
|
-
dashed ? "border-dashed" : "border-solid",
|
|
232
|
-
// shade
|
|
233
|
-
shade === "feint" && "border-line-subtle",
|
|
234
|
-
shade === "deep" && "border-line",
|
|
235
|
-
// thickness
|
|
236
|
-
thickness === "hairline" && "data-horizontal:border-t-[0.5px] data-vertical:border-l-[0.5px]",
|
|
237
|
-
thickness === "default" && "data-horizontal:border-t data-vertical:border-l",
|
|
238
|
-
thickness === "thick" && "data-horizontal:border-t-2 data-vertical:border-l-2",
|
|
239
|
-
thickness === "extra-thick" && "data-horizontal:border-t-[3px] data-vertical:border-l-[3px]",
|
|
240
|
-
className
|
|
241
|
-
),
|
|
242
|
-
...props
|
|
243
|
-
}
|
|
244
|
-
);
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
// src/components/ui/sheet.tsx
|
|
248
|
-
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
249
|
-
import { cva as cva3 } from "class-variance-authority";
|
|
250
|
-
import { XIcon } from "lucide-react";
|
|
251
|
-
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
252
|
-
function Sheet({ ...props }) {
|
|
253
|
-
return /* @__PURE__ */ jsx6(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
254
|
-
}
|
|
255
|
-
function SheetPortal({ ...props }) {
|
|
256
|
-
return /* @__PURE__ */ jsx6(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
257
|
-
}
|
|
258
|
-
function SheetOverlay({ className, ...props }) {
|
|
259
|
-
return /* @__PURE__ */ jsx6(
|
|
260
|
-
SheetPrimitive.Backdrop,
|
|
261
|
-
{
|
|
262
|
-
"data-slot": "sheet-overlay",
|
|
263
|
-
className: cn(
|
|
264
|
-
"fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl",
|
|
265
|
-
className
|
|
266
|
-
),
|
|
267
|
-
...props
|
|
268
|
-
}
|
|
269
|
-
);
|
|
270
|
-
}
|
|
271
|
-
var sheetContentVariants = cva3(
|
|
272
|
-
"group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] px-(--sheet-padding-x) **:data-[slot=tabs]:has-data-[variant=underline]:-mx-(--sheet-padding-x) **:has-data-[variant=underline]:*:px-(--sheet-padding-x)",
|
|
273
|
-
{
|
|
274
|
-
variants: {
|
|
275
|
-
size: {
|
|
276
|
-
sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
|
|
277
|
-
md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
|
|
278
|
-
lg: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-160 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h3)]",
|
|
279
|
-
fullscreen: "sm:[--sheet-padding-top:2rem] sm:[--sheet-padding-x:2.5rem] xl:[--sheet-padding-x:5rem] [--sheet-title:var(--text-gdt-h2)] h-[calc(100lvh-3.5rem)] rounded:xl sm:rounded-2xl"
|
|
280
|
-
}
|
|
281
|
-
},
|
|
282
|
-
defaultVariants: {
|
|
283
|
-
size: "md"
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
);
|
|
287
|
-
function SheetContent({
|
|
288
|
-
className,
|
|
289
|
-
children,
|
|
290
|
-
side = "left",
|
|
291
|
-
size = "md",
|
|
292
|
-
showCloseButton = true,
|
|
293
|
-
...props
|
|
294
|
-
}) {
|
|
295
|
-
const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
|
|
296
|
-
const contentSize = resolvedSize === "fullscreen" ? "lg" : resolvedSize;
|
|
297
|
-
return /* @__PURE__ */ jsxs2(SheetPortal, { children: [
|
|
298
|
-
/* @__PURE__ */ jsx6(SheetOverlay, {}),
|
|
299
|
-
/* @__PURE__ */ jsx6(SizeProvider, { size: contentSize, children: /* @__PURE__ */ jsxs2(
|
|
300
|
-
SheetPrimitive.Popup,
|
|
301
|
-
{
|
|
302
|
-
"data-slot": "sheet-content",
|
|
303
|
-
"data-side": side,
|
|
304
|
-
"data-size": resolvedSize,
|
|
305
|
-
className: cn(
|
|
306
|
-
sheetContentVariants({ size: resolvedSize }),
|
|
307
|
-
className
|
|
308
|
-
),
|
|
309
|
-
...props,
|
|
310
|
-
children: [
|
|
311
|
-
children,
|
|
312
|
-
showCloseButton && /* @__PURE__ */ jsx6(
|
|
313
|
-
SheetPrimitive.Close,
|
|
314
|
-
{
|
|
315
|
-
"data-slot": "sheet-close",
|
|
316
|
-
render: /* @__PURE__ */ jsxs2(
|
|
317
|
-
Button,
|
|
318
|
-
{
|
|
319
|
-
variant: "ghost",
|
|
320
|
-
className: "absolute z-10 size-8 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-10 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-10 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-10 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-10 group-data-[side=right]/sheet-content:top-4",
|
|
321
|
-
size: "icon-sm",
|
|
322
|
-
children: [
|
|
323
|
-
/* @__PURE__ */ jsx6(XIcon, {}),
|
|
324
|
-
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
|
|
325
|
-
]
|
|
326
|
-
}
|
|
327
|
-
)
|
|
328
|
-
}
|
|
329
|
-
)
|
|
330
|
-
]
|
|
331
|
-
}
|
|
332
|
-
) })
|
|
333
|
-
] });
|
|
334
|
-
}
|
|
335
|
-
function SheetHeader({ className, ...props }) {
|
|
336
|
-
return /* @__PURE__ */ jsx6(
|
|
337
|
-
"div",
|
|
338
|
-
{
|
|
339
|
-
"data-slot": "sheet-header",
|
|
340
|
-
className: cn(
|
|
341
|
-
"flex flex-col gap-1 -mx-(--sheet-padding-x) px-(--sheet-padding-x) pt-(--sheet-padding-top) pb-4 border-b border-line-subtle group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:border-b-0 group-has-[[data-slot=tabs-list][data-variant=underline]]/sheet-content:pb-2",
|
|
342
|
-
className
|
|
343
|
-
),
|
|
344
|
-
...props
|
|
345
|
-
}
|
|
346
|
-
);
|
|
347
|
-
}
|
|
348
|
-
function SheetTitle({ className, ...props }) {
|
|
349
|
-
return /* @__PURE__ */ jsx6(
|
|
350
|
-
SheetPrimitive.Title,
|
|
351
|
-
{
|
|
352
|
-
"data-slot": "sheet-title",
|
|
353
|
-
className: cn(
|
|
354
|
-
"font-extrabold text-fg-primary tracking-tight group-data-[size=fullscreen]/sheet-content:text-gdt-h2 group-data-[size=lg]/sheet-content:text-gdt-h3 group-data-[size=md]/sheet-content:text-gdt-h4 group-data-[size=sm]/sheet-content:text-gdt-h5",
|
|
355
|
-
className
|
|
356
|
-
),
|
|
357
|
-
...props
|
|
358
|
-
}
|
|
359
|
-
);
|
|
360
|
-
}
|
|
361
|
-
function SheetDescription({
|
|
362
|
-
className,
|
|
363
|
-
...props
|
|
364
|
-
}) {
|
|
365
|
-
return /* @__PURE__ */ jsx6(
|
|
366
|
-
SheetPrimitive.Description,
|
|
367
|
-
{
|
|
368
|
-
"data-slot": "sheet-description",
|
|
369
|
-
className: cn(
|
|
370
|
-
"text-fg-secondary group-data-[size=fullscreen]/sheet-content:text-gdt-lg group-data-[size=lg]/sheet-content:text-gdt-md group-data-[size=md]/sheet-content:text-gdt-sm group-data-[size=sm]/sheet-content:text-gdt-xs",
|
|
371
|
-
className
|
|
372
|
-
),
|
|
373
|
-
...props
|
|
374
|
-
}
|
|
375
|
-
);
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
// src/components/ui/skeleton.tsx
|
|
379
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
380
|
-
function Skeleton({ className, ...props }) {
|
|
381
|
-
return /* @__PURE__ */ jsx7(
|
|
382
|
-
"div",
|
|
383
|
-
{
|
|
384
|
-
"data-slot": "skeleton",
|
|
385
|
-
className: cn("animate-pulse rounded-md bg-line", className),
|
|
386
|
-
...props
|
|
387
|
-
}
|
|
388
|
-
);
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
// src/components/ui/tooltip.tsx
|
|
392
|
-
import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
|
|
393
|
-
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
394
|
-
function Tooltip({ ...props }) {
|
|
395
|
-
return /* @__PURE__ */ jsx8(PopoverPrimitive.Root, { "data-slot": "tooltip", ...props });
|
|
396
|
-
}
|
|
397
|
-
function TooltipTrigger({
|
|
398
|
-
...props
|
|
399
|
-
}) {
|
|
400
|
-
return /* @__PURE__ */ jsx8(
|
|
401
|
-
PopoverPrimitive.Trigger,
|
|
402
|
-
{
|
|
403
|
-
nativeButton: false,
|
|
404
|
-
"data-slot": "tooltip-trigger",
|
|
405
|
-
openOnHover: true,
|
|
406
|
-
delay: 100,
|
|
407
|
-
...props
|
|
408
|
-
}
|
|
409
|
-
);
|
|
410
|
-
}
|
|
411
|
-
function TooltipContent({
|
|
412
|
-
className,
|
|
413
|
-
side = "top",
|
|
414
|
-
sideOffset = 6,
|
|
415
|
-
align = "center",
|
|
416
|
-
alignOffset = 0,
|
|
417
|
-
showArrow = true,
|
|
418
|
-
children,
|
|
419
|
-
...props
|
|
420
|
-
}) {
|
|
421
|
-
return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
|
|
422
|
-
PopoverPrimitive.Positioner,
|
|
423
|
-
{
|
|
424
|
-
align,
|
|
425
|
-
alignOffset,
|
|
426
|
-
side,
|
|
427
|
-
sideOffset,
|
|
428
|
-
className: "isolate z-50",
|
|
429
|
-
children: /* @__PURE__ */ jsxs3(
|
|
430
|
-
PopoverPrimitive.Popup,
|
|
431
|
-
{
|
|
432
|
-
"data-slot": "tooltip-content",
|
|
433
|
-
className: cn(
|
|
434
|
-
"z-50 relative inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[6px] border border-line bg-surface-overlay px-3 py-2 text-gdt-sm font-medium text-fg-primary shadow-2 duration-100 has-data-[slot=kbd]:pr-1.5 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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-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",
|
|
435
|
-
className
|
|
436
|
-
),
|
|
437
|
-
...props,
|
|
438
|
-
children: [
|
|
439
|
-
children,
|
|
440
|
-
showArrow ? /* @__PURE__ */ jsx8(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
|
|
441
|
-
]
|
|
442
|
-
}
|
|
443
|
-
)
|
|
444
|
-
}
|
|
445
|
-
) });
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
// src/components/ui/sidebar.tsx
|
|
449
|
-
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
450
|
-
var SIDEBAR_LS_KEY = "sidebar_state";
|
|
451
|
-
var SIDEBAR_WIDTH = "17.5rem";
|
|
452
|
-
var SIDEBAR_WIDTH_MOBILE = "17.5rem";
|
|
453
|
-
var SIDEBAR_WIDTH_ICON = "4.5rem";
|
|
454
|
-
var SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
455
|
-
var SidebarContext = React2.createContext(null);
|
|
19
|
+
const [isMobile, setIsMobile] = React.useState(false);
|
|
20
|
+
React.useEffect(() => {
|
|
21
|
+
const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
22
|
+
const update = () => setIsMobile(window.innerWidth < breakpoint);
|
|
23
|
+
update();
|
|
24
|
+
mediaQuery.addEventListener("change", update);
|
|
25
|
+
return () => mediaQuery.removeEventListener("change", update);
|
|
26
|
+
}, [breakpoint]);
|
|
27
|
+
return isMobile;
|
|
28
|
+
}
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/sidebar.tsx
|
|
31
|
+
const SIDEBAR_LS_KEY = "sidebar_state";
|
|
32
|
+
const SIDEBAR_WIDTH = "17.5rem";
|
|
33
|
+
const SIDEBAR_WIDTH_MOBILE = "17.5rem";
|
|
34
|
+
const SIDEBAR_WIDTH_ICON = "4.5rem";
|
|
35
|
+
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
|
36
|
+
const SidebarContext = React.createContext(null);
|
|
456
37
|
function useSidebar() {
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
})
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
"relative w-(--layout-nav-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
598
|
-
"group-data-[collapsible=offcanvas]:w-0",
|
|
599
|
-
"group-data-[side=right]:rotate-180",
|
|
600
|
-
variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon)"
|
|
601
|
-
)
|
|
602
|
-
}
|
|
603
|
-
),
|
|
604
|
-
/* @__PURE__ */ jsx9(
|
|
605
|
-
"div",
|
|
606
|
-
{
|
|
607
|
-
"data-slot": "sidebar-container",
|
|
608
|
-
"data-side": side,
|
|
609
|
-
className: cn(
|
|
610
|
-
"fixed inset-y-0 z-10 hidden h-svh w-(--layout-nav-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--layout-nav-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--layout-nav-width)*-1)] lg:flex",
|
|
611
|
-
// Adjust the padding for floating and inset variants.
|
|
612
|
-
variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon) group-data-[side=left]:border-r group-data-[side=left]:border-r-line-subtle group-data-[side=right]:border-l group-data-[side=right]:border-l-line-subtle",
|
|
613
|
-
className
|
|
614
|
-
),
|
|
615
|
-
...props,
|
|
616
|
-
children: /* @__PURE__ */ jsx9(
|
|
617
|
-
"div",
|
|
618
|
-
{
|
|
619
|
-
"data-sidebar": "sidebar",
|
|
620
|
-
"data-slot": "sidebar-inner",
|
|
621
|
-
className: "flex size-full flex-col bg-surface group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border group-data-[variant=floating]:border-line-subtle group-data-[variant=floating]:shadow-[var(--elevation-e1-shadow)]",
|
|
622
|
-
children
|
|
623
|
-
}
|
|
624
|
-
)
|
|
625
|
-
}
|
|
626
|
-
)
|
|
627
|
-
]
|
|
628
|
-
}
|
|
629
|
-
);
|
|
630
|
-
}
|
|
631
|
-
function SidebarTrigger({
|
|
632
|
-
className,
|
|
633
|
-
onClick,
|
|
634
|
-
...props
|
|
635
|
-
}) {
|
|
636
|
-
const { toggleSidebar } = useSidebar();
|
|
637
|
-
return /* @__PURE__ */ jsxs4(
|
|
638
|
-
Button,
|
|
639
|
-
{
|
|
640
|
-
"data-sidebar": "trigger",
|
|
641
|
-
"data-slot": "sidebar-trigger",
|
|
642
|
-
variant: "ghost",
|
|
643
|
-
size: "icon-sm",
|
|
644
|
-
className: cn(className),
|
|
645
|
-
onClick: (event) => {
|
|
646
|
-
onClick?.(event);
|
|
647
|
-
toggleSidebar();
|
|
648
|
-
},
|
|
649
|
-
...props,
|
|
650
|
-
children: [
|
|
651
|
-
/* @__PURE__ */ jsx9(Menu, { className: "cn-rtl-flip" }),
|
|
652
|
-
/* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Toggle Sidebar" })
|
|
653
|
-
]
|
|
654
|
-
}
|
|
655
|
-
);
|
|
38
|
+
const context = React.useContext(SidebarContext);
|
|
39
|
+
if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
40
|
+
return context;
|
|
41
|
+
}
|
|
42
|
+
function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
|
|
43
|
+
const isMobile = useIsMobile();
|
|
44
|
+
const [openMobile, setOpenMobile] = React.useState(false);
|
|
45
|
+
const [open, setOpen] = useUncontrolled({
|
|
46
|
+
value: openProp,
|
|
47
|
+
onChange: (open) => {
|
|
48
|
+
setOpenProp?.(open);
|
|
49
|
+
if (typeof window !== "undefined") window.localStorage.setItem(SIDEBAR_LS_KEY, String(open));
|
|
50
|
+
},
|
|
51
|
+
defaultValue: defaultOpen
|
|
52
|
+
});
|
|
53
|
+
React.useEffect(() => {
|
|
54
|
+
if (openProp !== void 0) return;
|
|
55
|
+
const storedOpen = window.localStorage.getItem(SIDEBAR_LS_KEY);
|
|
56
|
+
if (storedOpen !== null) setOpen(storedOpen !== "false");
|
|
57
|
+
}, [openProp, setOpen]);
|
|
58
|
+
const toggleSidebar = React.useCallback(() => {
|
|
59
|
+
return isMobile ? setOpenMobile((open) => !open) : setOpen(!open);
|
|
60
|
+
}, [
|
|
61
|
+
isMobile,
|
|
62
|
+
open,
|
|
63
|
+
setOpen
|
|
64
|
+
]);
|
|
65
|
+
React.useEffect(() => {
|
|
66
|
+
const handleKeyDown = (event) => {
|
|
67
|
+
if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
toggleSidebar();
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
73
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
74
|
+
}, [toggleSidebar]);
|
|
75
|
+
const state = open ? "expanded" : "collapsed";
|
|
76
|
+
const contextValue = React.useMemo(() => ({
|
|
77
|
+
state,
|
|
78
|
+
open,
|
|
79
|
+
setOpen,
|
|
80
|
+
isMobile,
|
|
81
|
+
openMobile,
|
|
82
|
+
setOpenMobile,
|
|
83
|
+
toggleSidebar
|
|
84
|
+
}), [
|
|
85
|
+
state,
|
|
86
|
+
open,
|
|
87
|
+
setOpen,
|
|
88
|
+
isMobile,
|
|
89
|
+
openMobile,
|
|
90
|
+
toggleSidebar
|
|
91
|
+
]);
|
|
92
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, {
|
|
93
|
+
value: contextValue,
|
|
94
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
95
|
+
"data-slot": "sidebar-wrapper",
|
|
96
|
+
style: {
|
|
97
|
+
"--layout-nav-width": SIDEBAR_WIDTH,
|
|
98
|
+
"--layout-nav-width-icon": SIDEBAR_WIDTH_ICON,
|
|
99
|
+
...style
|
|
100
|
+
},
|
|
101
|
+
className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-surface", className),
|
|
102
|
+
...props,
|
|
103
|
+
children
|
|
104
|
+
})
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) {
|
|
108
|
+
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
109
|
+
if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
|
|
110
|
+
"data-slot": "sidebar",
|
|
111
|
+
className: cn("flex h-full w-(--layout-nav-width) flex-col bg-surface text-fg-secondary", className),
|
|
112
|
+
...props,
|
|
113
|
+
children
|
|
114
|
+
});
|
|
115
|
+
if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
|
|
116
|
+
open: openMobile,
|
|
117
|
+
onOpenChange: setOpenMobile,
|
|
118
|
+
...props,
|
|
119
|
+
children: /* @__PURE__ */ jsxs(SheetContent, {
|
|
120
|
+
dir,
|
|
121
|
+
"data-sidebar": "sidebar",
|
|
122
|
+
"data-slot": "sidebar",
|
|
123
|
+
"data-mobile": "true",
|
|
124
|
+
className: "min-w-10/12 w-(--layout-nav-width) max-w-screen border-none bg-surface p-0 text-fg-secondary [&>button]:hidden",
|
|
125
|
+
style: { "--layout-nav-width": SIDEBAR_WIDTH_MOBILE },
|
|
126
|
+
side: "right",
|
|
127
|
+
children: [/* @__PURE__ */ jsxs(SheetHeader, {
|
|
128
|
+
className: "sr-only",
|
|
129
|
+
children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
|
|
130
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
131
|
+
className: "flex h-full w-full flex-col",
|
|
132
|
+
children
|
|
133
|
+
})]
|
|
134
|
+
})
|
|
135
|
+
});
|
|
136
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
137
|
+
className: "group peer hidden text-fg-secondary lg:block",
|
|
138
|
+
"data-state": state,
|
|
139
|
+
"data-collapsible": state === "collapsed" ? collapsible : "",
|
|
140
|
+
"data-variant": variant,
|
|
141
|
+
"data-side": side,
|
|
142
|
+
"data-slot": "sidebar",
|
|
143
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
144
|
+
"data-slot": "sidebar-gap",
|
|
145
|
+
className: cn("relative w-(--layout-nav-width) bg-transparent transition-[width] duration-200 ease-out", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon)")
|
|
146
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
147
|
+
"data-slot": "sidebar-container",
|
|
148
|
+
"data-side": side,
|
|
149
|
+
className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--layout-nav-width) transition-[left,right,width] duration-200 ease-out data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--layout-nav-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--layout-nav-width)*-1)] lg:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--layout-nav-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--layout-nav-width-icon) group-data-[side=left]:border-r group-data-[side=left]:border-r-line-subtle group-data-[side=right]:border-l group-data-[side=right]:border-l-line-subtle", className),
|
|
150
|
+
...props,
|
|
151
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
152
|
+
"data-sidebar": "sidebar",
|
|
153
|
+
"data-slot": "sidebar-inner",
|
|
154
|
+
className: "flex size-full flex-col bg-surface group-data-[variant=floating]:rounded-xl group-data-[variant=floating]:border group-data-[variant=floating]:border-line-subtle group-data-[variant=floating]:shadow-[var(--elevation-e1-shadow)]",
|
|
155
|
+
children
|
|
156
|
+
})
|
|
157
|
+
})]
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
function SidebarTrigger({ className, onClick, ...props }) {
|
|
161
|
+
const { toggleSidebar } = useSidebar();
|
|
162
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
163
|
+
"data-sidebar": "trigger",
|
|
164
|
+
"data-slot": "sidebar-trigger",
|
|
165
|
+
variant: "ghost",
|
|
166
|
+
size: "icon-sm",
|
|
167
|
+
className: cn(className),
|
|
168
|
+
onClick: (event) => {
|
|
169
|
+
onClick?.(event);
|
|
170
|
+
toggleSidebar();
|
|
171
|
+
},
|
|
172
|
+
...props,
|
|
173
|
+
children: [/* @__PURE__ */ jsx(Menu, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
|
|
174
|
+
className: "sr-only",
|
|
175
|
+
children: "Toggle Sidebar"
|
|
176
|
+
})]
|
|
177
|
+
});
|
|
656
178
|
}
|
|
657
179
|
function SidebarRail({ className, ...props }) {
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-line-subtle sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
|
|
670
|
-
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
|
671
|
-
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
|
672
|
-
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface",
|
|
673
|
-
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
|
674
|
-
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
|
675
|
-
className
|
|
676
|
-
),
|
|
677
|
-
...props
|
|
678
|
-
}
|
|
679
|
-
);
|
|
180
|
+
const { toggleSidebar } = useSidebar();
|
|
181
|
+
return /* @__PURE__ */ jsx("button", {
|
|
182
|
+
"data-sidebar": "rail",
|
|
183
|
+
"data-slot": "sidebar-rail",
|
|
184
|
+
"aria-label": "Toggle Sidebar",
|
|
185
|
+
tabIndex: -1,
|
|
186
|
+
onClick: toggleSidebar,
|
|
187
|
+
title: "Toggle Sidebar",
|
|
188
|
+
className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-line-subtle sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-surface", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
|
|
189
|
+
...props
|
|
190
|
+
});
|
|
680
191
|
}
|
|
681
192
|
function SidebarInset({ className, ...props }) {
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
className,
|
|
696
|
-
...props
|
|
697
|
-
}) {
|
|
698
|
-
return /* @__PURE__ */ jsx9(
|
|
699
|
-
Input,
|
|
700
|
-
{
|
|
701
|
-
"data-slot": "sidebar-input",
|
|
702
|
-
"data-sidebar": "input",
|
|
703
|
-
className: cn("h-8 w-full bg-canvas shadow-none", className),
|
|
704
|
-
...props
|
|
705
|
-
}
|
|
706
|
-
);
|
|
193
|
+
return /* @__PURE__ */ jsx("main", {
|
|
194
|
+
"data-slot": "sidebar-inset",
|
|
195
|
+
className: cn("relative flex min-w-0 flex-1 flex-col bg-canvas lg:peer-data-[variant=inset]:m-2 lg:peer-data-[variant=inset]:ml-0 lg:peer-data-[variant=inset]:rounded-xl lg:peer-data-[variant=inset]:border lg:peer-data-[variant=inset]:border-line-subtle lg:peer-data-[variant=inset]:shadow-[var(--elevation-e1-shadow)] lg:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
|
|
196
|
+
...props
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
function SidebarInput({ className, ...props }) {
|
|
200
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
201
|
+
"data-slot": "sidebar-input",
|
|
202
|
+
"data-sidebar": "input",
|
|
203
|
+
className: cn("h-8 w-full bg-canvas shadow-none", className),
|
|
204
|
+
...props
|
|
205
|
+
});
|
|
707
206
|
}
|
|
708
207
|
function SidebarHeader({ className, ...props }) {
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
...props
|
|
716
|
-
}
|
|
717
|
-
);
|
|
208
|
+
return /* @__PURE__ */ jsx("div", {
|
|
209
|
+
"data-slot": "sidebar-header",
|
|
210
|
+
"data-sidebar": "header",
|
|
211
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
212
|
+
...props
|
|
213
|
+
});
|
|
718
214
|
}
|
|
719
215
|
function SidebarFooter({ className, ...props }) {
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
})
|
|
734
|
-
return /* @__PURE__ */ jsx9(
|
|
735
|
-
Separator,
|
|
736
|
-
{
|
|
737
|
-
"data-slot": "sidebar-separator",
|
|
738
|
-
"data-sidebar": "separator",
|
|
739
|
-
className: cn("mx-2 w-auto bg-line-subtle", className),
|
|
740
|
-
...props
|
|
741
|
-
}
|
|
742
|
-
);
|
|
216
|
+
return /* @__PURE__ */ jsx("div", {
|
|
217
|
+
"data-slot": "sidebar-footer",
|
|
218
|
+
"data-sidebar": "footer",
|
|
219
|
+
className: cn("flex flex-col gap-2 p-2", className),
|
|
220
|
+
...props
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
function SidebarSeparator({ className, ...props }) {
|
|
224
|
+
return /* @__PURE__ */ jsx(Separator, {
|
|
225
|
+
"data-slot": "sidebar-separator",
|
|
226
|
+
"data-sidebar": "separator",
|
|
227
|
+
className: cn("mx-2 w-auto bg-line-subtle", className),
|
|
228
|
+
...props
|
|
229
|
+
});
|
|
743
230
|
}
|
|
744
231
|
function SidebarContent({ className, ...props }) {
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
|
752
|
-
className
|
|
753
|
-
),
|
|
754
|
-
...props
|
|
755
|
-
}
|
|
756
|
-
);
|
|
232
|
+
return /* @__PURE__ */ jsx("div", {
|
|
233
|
+
"data-slot": "sidebar-content",
|
|
234
|
+
"data-sidebar": "content",
|
|
235
|
+
className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
|
|
236
|
+
...props
|
|
237
|
+
});
|
|
757
238
|
}
|
|
758
239
|
function SidebarGroup({ className, ...props }) {
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
...props
|
|
796
|
-
}) {
|
|
797
|
-
return useRender({
|
|
798
|
-
defaultTagName: "button",
|
|
799
|
-
props: mergeProps(
|
|
800
|
-
{
|
|
801
|
-
className: cn(
|
|
802
|
-
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
|
803
|
-
className
|
|
804
|
-
)
|
|
805
|
-
},
|
|
806
|
-
props
|
|
807
|
-
),
|
|
808
|
-
render,
|
|
809
|
-
state: {
|
|
810
|
-
slot: "sidebar-group-action",
|
|
811
|
-
sidebar: "group-action"
|
|
812
|
-
}
|
|
813
|
-
});
|
|
814
|
-
}
|
|
815
|
-
function SidebarGroupContent({
|
|
816
|
-
className,
|
|
817
|
-
...props
|
|
818
|
-
}) {
|
|
819
|
-
return /* @__PURE__ */ jsx9(
|
|
820
|
-
"div",
|
|
821
|
-
{
|
|
822
|
-
"data-slot": "sidebar-group-content",
|
|
823
|
-
"data-sidebar": "group-content",
|
|
824
|
-
className: cn("w-full text-sm", className),
|
|
825
|
-
...props
|
|
826
|
-
}
|
|
827
|
-
);
|
|
240
|
+
return /* @__PURE__ */ jsx("div", {
|
|
241
|
+
"data-slot": "sidebar-group",
|
|
242
|
+
"data-sidebar": "group",
|
|
243
|
+
className: cn("relative flex w-full min-w-0 flex-col p-2", className),
|
|
244
|
+
...props
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
function SidebarGroupLabel({ className, render, ...props }) {
|
|
248
|
+
return useRender({
|
|
249
|
+
defaultTagName: "div",
|
|
250
|
+
props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-fg-caption-placeholder outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
251
|
+
render,
|
|
252
|
+
state: {
|
|
253
|
+
slot: "sidebar-group-label",
|
|
254
|
+
sidebar: "group-label"
|
|
255
|
+
}
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
function SidebarGroupAction({ className, render, ...props }) {
|
|
259
|
+
return useRender({
|
|
260
|
+
defaultTagName: "button",
|
|
261
|
+
props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
|
|
262
|
+
render,
|
|
263
|
+
state: {
|
|
264
|
+
slot: "sidebar-group-action",
|
|
265
|
+
sidebar: "group-action"
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
}
|
|
269
|
+
function SidebarGroupContent({ className, ...props }) {
|
|
270
|
+
return /* @__PURE__ */ jsx("div", {
|
|
271
|
+
"data-slot": "sidebar-group-content",
|
|
272
|
+
"data-sidebar": "group-content",
|
|
273
|
+
className: cn("w-full text-sm", className),
|
|
274
|
+
...props
|
|
275
|
+
});
|
|
828
276
|
}
|
|
829
277
|
function SidebarMenu({ className, ...props }) {
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
...props
|
|
837
|
-
}
|
|
838
|
-
);
|
|
278
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
279
|
+
"data-slot": "sidebar-menu",
|
|
280
|
+
"data-sidebar": "menu",
|
|
281
|
+
className: cn("flex w-full min-w-0 flex-col gap-0", className),
|
|
282
|
+
...props
|
|
283
|
+
});
|
|
839
284
|
}
|
|
840
285
|
function SidebarMenuItem({ className, ...props }) {
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
}
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
{
|
|
928
|
-
className: cn(
|
|
929
|
-
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-fg-primary 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-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
|
930
|
-
showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-fg-brand aria-expanded:opacity-100 lg:opacity-0",
|
|
931
|
-
className
|
|
932
|
-
)
|
|
933
|
-
},
|
|
934
|
-
props
|
|
935
|
-
),
|
|
936
|
-
render,
|
|
937
|
-
state: {
|
|
938
|
-
slot: "sidebar-menu-action",
|
|
939
|
-
sidebar: "menu-action"
|
|
940
|
-
}
|
|
941
|
-
});
|
|
942
|
-
}
|
|
943
|
-
function SidebarMenuBadge({
|
|
944
|
-
className,
|
|
945
|
-
...props
|
|
946
|
-
}) {
|
|
947
|
-
return /* @__PURE__ */ jsx9(
|
|
948
|
-
"div",
|
|
949
|
-
{
|
|
950
|
-
"data-slot": "sidebar-menu-badge",
|
|
951
|
-
"data-sidebar": "menu-badge",
|
|
952
|
-
className: cn(
|
|
953
|
-
"pointer-events-none absolute right-4 flex h-5 min-w-5 items-center justify-center rounded-full bg-surface-brand px-1 text-gdt-subtext font-bold leading-none text-fg-on-brand tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-2.5 peer-data-[size=lg]/menu-button:top-4 peer-data-[size=sm]/menu-button:top-2",
|
|
954
|
-
className
|
|
955
|
-
),
|
|
956
|
-
...props
|
|
957
|
-
}
|
|
958
|
-
);
|
|
959
|
-
}
|
|
960
|
-
function SidebarMenuSkeleton({
|
|
961
|
-
className,
|
|
962
|
-
showIcon = false,
|
|
963
|
-
...props
|
|
964
|
-
}) {
|
|
965
|
-
const [width] = React2.useState(() => {
|
|
966
|
-
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
967
|
-
});
|
|
968
|
-
return /* @__PURE__ */ jsxs4(
|
|
969
|
-
"div",
|
|
970
|
-
{
|
|
971
|
-
"data-slot": "sidebar-menu-skeleton",
|
|
972
|
-
"data-sidebar": "menu-skeleton",
|
|
973
|
-
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
974
|
-
...props,
|
|
975
|
-
children: [
|
|
976
|
-
showIcon && /* @__PURE__ */ jsx9(
|
|
977
|
-
Skeleton,
|
|
978
|
-
{
|
|
979
|
-
className: "size-4 rounded-md",
|
|
980
|
-
"data-sidebar": "menu-skeleton-icon"
|
|
981
|
-
}
|
|
982
|
-
),
|
|
983
|
-
/* @__PURE__ */ jsx9(
|
|
984
|
-
Skeleton,
|
|
985
|
-
{
|
|
986
|
-
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
987
|
-
"data-sidebar": "menu-skeleton-text",
|
|
988
|
-
style: {
|
|
989
|
-
"--skeleton-width": width
|
|
990
|
-
}
|
|
991
|
-
}
|
|
992
|
-
)
|
|
993
|
-
]
|
|
994
|
-
}
|
|
995
|
-
);
|
|
286
|
+
return /* @__PURE__ */ jsx("li", {
|
|
287
|
+
"data-slot": "sidebar-menu-item",
|
|
288
|
+
"data-sidebar": "menu-item",
|
|
289
|
+
className: cn("group/menu-item relative", className),
|
|
290
|
+
...props
|
|
291
|
+
});
|
|
292
|
+
}
|
|
293
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-3 overflow-hidden rounded-[10px] px-3 py-3 text-left text-gdt-sm font-semibold text-fg-secondary outline-hidden transition-[width,height,padding,gap,color,background-color] duration-200 ease-out group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-5! group-data-[collapsible=icon]:[&>span]:max-w-0 group-data-[collapsible=icon]:[&>span]:opacity-0 hover:bg-surface-raised hover:text-fg-primary focus-visible:inset-ring-1 inset-ring-line-focus active:bg-surface-raised active:text-fg-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-surface-raised data-open:hover:text-fg-primary data-active:bg-surface-brand-subtle data-active:font-medium data-active:text-fg-brand [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-current [&>span]:min-w-0 [&>span]:truncate [&>span]:transition-[max-width,opacity] [&>span]:duration-200 [&>span]:ease-out", {
|
|
294
|
+
variants: {
|
|
295
|
+
variant: {
|
|
296
|
+
default: "",
|
|
297
|
+
outline: "bg-canvas text-fg-primary shadow-[inset_0_0_0_1px_var(--color-line-subtle)] hover:bg-surface-raised hover:text-fg-primary"
|
|
298
|
+
},
|
|
299
|
+
size: {
|
|
300
|
+
md: "h-12",
|
|
301
|
+
sm: "h-9 text-xs",
|
|
302
|
+
lg: "h-12 group-data-[collapsible=icon]:px-[18px]! [&_svg]:size-5"
|
|
303
|
+
}
|
|
304
|
+
},
|
|
305
|
+
defaultVariants: {
|
|
306
|
+
variant: "default",
|
|
307
|
+
size: "md"
|
|
308
|
+
}
|
|
309
|
+
});
|
|
310
|
+
function SidebarMenuButton({ render, isActive = false, variant = "default", size = "md", tooltip, className, ...props }) {
|
|
311
|
+
const { isMobile, state } = useSidebar();
|
|
312
|
+
const comp = useRender({
|
|
313
|
+
defaultTagName: "button",
|
|
314
|
+
props: mergeProps({ className: cn(sidebarMenuButtonVariants({
|
|
315
|
+
variant,
|
|
316
|
+
size
|
|
317
|
+
}), className) }, props),
|
|
318
|
+
render: !tooltip ? render : /* @__PURE__ */ jsx(TooltipTrigger, { render }),
|
|
319
|
+
state: {
|
|
320
|
+
slot: "sidebar-menu-button",
|
|
321
|
+
sidebar: "menu-button",
|
|
322
|
+
size,
|
|
323
|
+
active: isActive
|
|
324
|
+
}
|
|
325
|
+
});
|
|
326
|
+
if (!tooltip) return comp;
|
|
327
|
+
if (typeof tooltip === "string") tooltip = { children: tooltip };
|
|
328
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [comp, /* @__PURE__ */ jsx(TooltipContent, {
|
|
329
|
+
side: "right",
|
|
330
|
+
align: "center",
|
|
331
|
+
hidden: state !== "collapsed" || isMobile,
|
|
332
|
+
...tooltip
|
|
333
|
+
})] });
|
|
334
|
+
}
|
|
335
|
+
function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
|
|
336
|
+
return useRender({
|
|
337
|
+
defaultTagName: "button",
|
|
338
|
+
props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-secondary outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-fg-primary 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-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] lg: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-fg-brand aria-expanded:opacity-100 lg:opacity-0", className) }, props),
|
|
339
|
+
render,
|
|
340
|
+
state: {
|
|
341
|
+
slot: "sidebar-menu-action",
|
|
342
|
+
sidebar: "menu-action"
|
|
343
|
+
}
|
|
344
|
+
});
|
|
345
|
+
}
|
|
346
|
+
function SidebarMenuBadge({ className, ...props }) {
|
|
347
|
+
return /* @__PURE__ */ jsx("div", {
|
|
348
|
+
"data-slot": "sidebar-menu-badge",
|
|
349
|
+
"data-sidebar": "menu-badge",
|
|
350
|
+
className: cn("pointer-events-none absolute right-4 flex h-5 min-w-5 items-center justify-center rounded-full bg-surface-brand px-1 text-gdt-subtext font-bold leading-none text-fg-on-brand tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-2.5 peer-data-[size=lg]/menu-button:top-4 peer-data-[size=sm]/menu-button:top-2", className),
|
|
351
|
+
...props
|
|
352
|
+
});
|
|
353
|
+
}
|
|
354
|
+
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
355
|
+
const [width] = React.useState(() => {
|
|
356
|
+
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
357
|
+
});
|
|
358
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
359
|
+
"data-slot": "sidebar-menu-skeleton",
|
|
360
|
+
"data-sidebar": "menu-skeleton",
|
|
361
|
+
className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
|
|
362
|
+
...props,
|
|
363
|
+
children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
|
|
364
|
+
className: "size-4 rounded-md",
|
|
365
|
+
"data-sidebar": "menu-skeleton-icon"
|
|
366
|
+
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
367
|
+
className: "h-4 max-w-(--skeleton-width) flex-1",
|
|
368
|
+
"data-sidebar": "menu-skeleton-text",
|
|
369
|
+
style: { "--skeleton-width": width }
|
|
370
|
+
})]
|
|
371
|
+
});
|
|
996
372
|
}
|
|
997
373
|
function SidebarMenuSub({ className, ...props }) {
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
isActive = false,
|
|
1029
|
-
className,
|
|
1030
|
-
...props
|
|
1031
|
-
}) {
|
|
1032
|
-
return useRender({
|
|
1033
|
-
defaultTagName: "a",
|
|
1034
|
-
props: mergeProps(
|
|
1035
|
-
{
|
|
1036
|
-
className: cn(
|
|
1037
|
-
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-fg-secondary outline-hidden group-data-[collapsible=icon]:hidden hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-surface-raised active:text-fg-primary 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-surface-brand-subtle data-active:text-fg-brand [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-fg-muted",
|
|
1038
|
-
className
|
|
1039
|
-
)
|
|
1040
|
-
},
|
|
1041
|
-
props
|
|
1042
|
-
),
|
|
1043
|
-
render,
|
|
1044
|
-
state: {
|
|
1045
|
-
slot: "sidebar-menu-sub-button",
|
|
1046
|
-
sidebar: "menu-sub-button",
|
|
1047
|
-
size,
|
|
1048
|
-
active: isActive
|
|
1049
|
-
}
|
|
1050
|
-
});
|
|
1051
|
-
}
|
|
1052
|
-
export {
|
|
1053
|
-
Sidebar,
|
|
1054
|
-
SidebarContent,
|
|
1055
|
-
SidebarFooter,
|
|
1056
|
-
SidebarGroup,
|
|
1057
|
-
SidebarGroupAction,
|
|
1058
|
-
SidebarGroupContent,
|
|
1059
|
-
SidebarGroupLabel,
|
|
1060
|
-
SidebarHeader,
|
|
1061
|
-
SidebarInput,
|
|
1062
|
-
SidebarInset,
|
|
1063
|
-
SidebarMenu,
|
|
1064
|
-
SidebarMenuAction,
|
|
1065
|
-
SidebarMenuBadge,
|
|
1066
|
-
SidebarMenuButton,
|
|
1067
|
-
SidebarMenuItem,
|
|
1068
|
-
SidebarMenuSkeleton,
|
|
1069
|
-
SidebarMenuSub,
|
|
1070
|
-
SidebarMenuSubButton,
|
|
1071
|
-
SidebarMenuSubItem,
|
|
1072
|
-
SidebarProvider,
|
|
1073
|
-
SidebarRail,
|
|
1074
|
-
SidebarSeparator,
|
|
1075
|
-
SidebarTrigger,
|
|
1076
|
-
useSidebar
|
|
1077
|
-
};
|
|
1078
|
-
//# sourceMappingURL=sidebar.js.map
|
|
374
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
375
|
+
"data-slot": "sidebar-menu-sub",
|
|
376
|
+
"data-sidebar": "menu-sub",
|
|
377
|
+
className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-line-subtle px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
|
|
378
|
+
...props
|
|
379
|
+
});
|
|
380
|
+
}
|
|
381
|
+
function SidebarMenuSubItem({ className, ...props }) {
|
|
382
|
+
return /* @__PURE__ */ jsx("li", {
|
|
383
|
+
"data-slot": "sidebar-menu-sub-item",
|
|
384
|
+
"data-sidebar": "menu-sub-item",
|
|
385
|
+
className: cn("group/menu-sub-item relative", className),
|
|
386
|
+
...props
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
|
|
390
|
+
return useRender({
|
|
391
|
+
defaultTagName: "a",
|
|
392
|
+
props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-fg-secondary outline-hidden group-data-[collapsible=icon]:hidden hover:bg-surface-raised hover:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-surface-raised active:text-fg-primary 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-surface-brand-subtle data-active:text-fg-brand [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-fg-caption-placeholder", className) }, props),
|
|
393
|
+
render,
|
|
394
|
+
state: {
|
|
395
|
+
slot: "sidebar-menu-sub-button",
|
|
396
|
+
sidebar: "menu-sub-button",
|
|
397
|
+
size,
|
|
398
|
+
active: isActive
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
}
|
|
402
|
+
//#endregion
|
|
403
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
|