@justanarthur/modo-ui 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocks/sidebar-app/index.d.ts +1 -1
- package/dist/blocks/sidebar-app/index.js +28 -31
- package/dist/components/badge/index.d.ts +1 -1
- package/dist/components/badge/index.js +12 -14
- package/dist/components/button/index.d.ts +1 -1
- package/dist/components/button/index.js +10 -12
- package/dist/components/card/index.d.ts +1 -1
- package/dist/components/card/index.js +38 -40
- package/dist/components/inputs/checkbox-group/index.d.ts +1 -1
- package/dist/components/inputs/checkbox-group/index.js +17 -19
- package/dist/components/inputs/color-picker/index.d.ts +1 -1
- package/dist/components/inputs/color-picker/index.js +31 -33
- package/dist/components/inputs/combobox/index.d.ts +1 -1
- package/dist/components/inputs/combobox/index.js +31 -34
- package/dist/components/inputs/date-time/calendar/index.d.ts +1 -1
- package/dist/components/inputs/date-time/calendar/index.js +14 -16
- package/dist/components/inputs/date-time/date-picker/index.d.ts +1 -1
- package/dist/components/inputs/date-time/date-picker/index.js +28 -30
- package/dist/components/inputs/date-time/date-range-picker/index.d.ts +1 -1
- package/dist/components/inputs/date-time/date-range-picker/index.js +27 -29
- package/dist/components/inputs/date-time/duration-picker/index.d.ts +1 -1
- package/dist/components/inputs/date-time/duration-picker/index.js +27 -29
- package/dist/components/inputs/date-time/month-picker/index.d.ts +1 -1
- package/dist/components/inputs/date-time/month-picker/index.js +26 -28
- package/dist/components/inputs/date-time/time-picker/index.d.ts +1 -1
- package/dist/components/inputs/date-time/time-picker/index.js +27 -29
- package/dist/components/inputs/input/index.d.ts +1 -1
- package/dist/components/inputs/input/index.js +15 -16
- package/dist/components/inputs/input-copy/index.d.ts +1 -1
- package/dist/components/inputs/input-copy/index.js +12 -14
- package/dist/components/inputs/input-message/index.d.ts +1 -1
- package/dist/components/inputs/input-message/index.js +21 -23
- package/dist/components/inputs/radio-group/index.d.ts +1 -1
- package/dist/components/inputs/radio-group/index.js +16 -18
- package/dist/components/inputs/search/index.d.ts +1 -1
- package/dist/components/inputs/search/index.js +21 -24
- package/dist/components/inputs/select/index.d.ts +1 -1
- package/dist/components/inputs/select/index.js +30 -33
- package/dist/components/inputs/slider/index.d.ts +1 -1
- package/dist/components/inputs/slider/index.js +10 -12
- package/dist/components/inputs/switch/index.d.ts +1 -1
- package/dist/components/inputs/switch/index.js +10 -12
- package/dist/components/navigation/accordion/index.d.ts +1 -1
- package/dist/components/navigation/accordion/index.js +24 -26
- package/dist/components/navigation/sidebar/index.d.ts +3 -3
- package/dist/components/navigation/sidebar/index.js +95 -97
- package/dist/components/navigation/tabs/index.d.ts +1 -1
- package/dist/components/navigation/tabs/index.js +19 -21
- package/dist/components/navigation/tabs-subtle/index.d.ts +1 -1
- package/dist/components/navigation/tabs-subtle/index.js +17 -19
- package/dist/components/overlays/alert-dialog/index.d.ts +2 -2
- package/dist/components/overlays/alert-dialog/index.js +18 -20
- package/dist/components/overlays/command/index.d.ts +1 -1
- package/dist/components/overlays/command/index.js +32 -35
- package/dist/components/overlays/context-menu/index.d.ts +1 -1
- package/dist/components/overlays/context-menu/index.js +25 -28
- package/dist/components/overlays/dialog/index.d.ts +1 -1
- package/dist/components/overlays/dialog/index.js +33 -35
- package/dist/components/overlays/dropdown/index.d.ts +1 -1
- package/dist/components/overlays/dropdown/index.js +40 -43
- package/dist/components/overlays/popover/index.d.ts +1 -1
- package/dist/components/overlays/popover/index.js +22 -24
- package/dist/components/overlays/preview-card/index.d.ts +1 -1
- package/dist/components/overlays/preview-card/index.js +15 -17
- package/dist/components/overlays/sheet/index.d.ts +1 -1
- package/dist/components/overlays/sheet/index.js +20 -22
- package/dist/components/overlays/toast/index.d.ts +1 -1
- package/dist/components/overlays/toast/index.js +17 -19
- package/dist/components/overlays/tooltip/index.d.ts +1 -1
- package/dist/components/overlays/tooltip/index.js +13 -15
- package/dist/components/table/index.d.ts +1 -1
- package/dist/components/table/index.js +22 -24
- package/dist/components/thinking-indicator/index.d.ts +1 -1
- package/dist/components/thinking-indicator/index.js +9 -11
- package/dist/index.d.ts +51 -51
- package/dist/index.js +506 -508
- package/dist/preset.d.ts +1 -1
- package/dist/preset.js +5 -5
- package/dist/primitives/code/index.d.ts +1 -1
- package/dist/primitives/code/index.js +8 -9
- package/dist/primitives/craft/index.d.ts +1 -1
- package/dist/primitives/craft/index.js +6 -8
- package/dist/primitives/fluid-hover/index.d.ts +1 -1
- package/dist/primitives/fluid-hover/index.js +18 -20
- package/dist/primitives/morph/index.d.ts +1 -1
- package/dist/primitives/morph/index.js +15 -17
- package/dist/primitives/motion/index.d.ts +1 -1
- package/dist/primitives/motion/index.js +15 -16
- package/dist/primitives/scroll-area/index.d.ts +1 -1
- package/dist/primitives/scroll-area/index.js +8 -9
- package/dist/primitives/sizes/index.d.ts +1 -1
- package/dist/primitives/sizes/index.js +17 -18
- package/dist/primitives/surface/index.d.ts +1 -1
- package/dist/primitives/surface/index.js +11 -12
- package/dist/shared/components-0ke6xada.js +123 -0
- package/dist/shared/{components-jxgznftn.js → components-0q0sqfh4.js} +16 -16
- package/dist/shared/{components-x3rz4cyn.js → components-0sn7ypjw.js} +14 -14
- package/dist/shared/{components-p2vmyfe1.js → components-1j9791sn.js} +42 -42
- package/dist/shared/{components-6phwsry6.js → components-1rfwbyyc.js} +25 -25
- package/dist/shared/{components-vc1k7yv2.js → components-1v7rxytx.js} +3 -3
- package/dist/shared/{components-tm88ghva.js → components-1xekx2hx.js} +58 -58
- package/dist/shared/{components-6t6nr33r.js → components-39jq9va1.js} +26 -26
- package/dist/shared/{components-j65qt1mq.js → components-3gae8nta.js} +101 -101
- package/dist/shared/{components-r2gke5p6.js → components-3k8xpnpq.js} +125 -125
- package/dist/shared/{components-6y1th6k4.js → components-3mkepka5.js} +31 -31
- package/dist/shared/{components-vktws5r6.js → components-3wk0w46f.js} +72 -72
- package/dist/shared/{components-zx2hr57f.js → components-4cnjmgex.js} +15 -15
- package/dist/shared/{components-e46kf6cp.js → components-59efxjd9.js} +8 -8
- package/dist/shared/{components-rc63qsy6.js → components-5xc2j8jz.js} +10 -10
- package/dist/shared/{components-7gv95yfy.js → components-62ybc7t2.js} +83 -83
- package/dist/shared/{components-brnzrp2t.js → components-66mv71kx.js} +41 -41
- package/dist/shared/{components-taxmgbnh.js → components-7ans7ce5.js} +17 -17
- package/dist/shared/{components-hzfp4tjb.js → components-7btqt08d.js} +42 -42
- package/dist/shared/{components-9p8s8n5q.js → components-7r3etddy.js} +22 -22
- package/dist/shared/{components-5zry9te1.js → components-7x9kawxv.js} +26 -26
- package/dist/shared/{components-4hh0gm0v.js → components-8fpr3s4p.js} +61 -61
- package/dist/shared/{components-x2xyckd5.js → components-9jvzzvt1.js} +20 -20
- package/dist/shared/{components-bf2d9k02.js → components-apdwtweq.js} +94 -94
- package/dist/shared/{components-hjkrv00c.js → components-asr5pg50.js} +18 -18
- package/dist/shared/{components-5pkcfprd.js → components-b2wyq2cq.js} +22 -22
- package/dist/shared/{components-nn6xezy2.js → components-ca2c898n.js} +226 -226
- package/dist/shared/{components-xszag63d.js → components-cbxjn9p8.js} +12 -12
- package/dist/shared/{components-kf2ehztc.js → components-chacnk61.js} +16 -16
- package/dist/shared/{components-7zp99w5d.js → components-cv16mryv.js} +2 -2
- package/dist/shared/{components-4xxtggzp.js → components-ez65vtbq.js} +18 -18
- package/dist/shared/{components-0f0as45n.js → components-ezxhrmer.js} +2 -2
- package/dist/shared/{components-s3yfvfkr.js → components-gc5vtq2f.js} +42 -42
- package/dist/shared/components-gf5s6ap9.js +42 -0
- package/dist/shared/{components-7cqq1sqy.js → components-gvr9w41t.js} +40 -40
- package/dist/shared/{components-ess3ch6w.js → components-h2dpcwgc.js} +23 -23
- package/dist/shared/{components-ed7cmssr.js → components-hawvy2qz.js} +18 -18
- package/dist/shared/{components-7nww01w4.js → components-hqeq3w9q.js} +34 -34
- package/dist/shared/{components-vb033rns.js → components-jjw69c4c.js} +6 -6
- package/dist/shared/{components-tad5h7ta.js → components-jwst3vtj.js} +48 -48
- package/dist/shared/{components-r22vtgqc.js → components-kvr7f9hy.js} +11 -11
- package/dist/shared/{components-gndm6am4.js → components-ng72k97e.js} +17 -17
- package/dist/shared/{components-40j34hdb.js → components-nh8tma1n.js} +116 -116
- package/dist/shared/{components-s5pkbjx1.js → components-njzgqdwy.js} +56 -56
- package/dist/shared/{components-54nf2x99.js → components-ny774h8p.js} +42 -42
- package/dist/shared/{components-r4jt6hgd.js → components-q4daerx0.js} +6 -6
- package/dist/shared/{components-peg09pzs.js → components-q5xj5c16.js} +11 -11
- package/dist/shared/{components-r43mqnd6.js → components-rr7a6ja9.js} +46 -46
- package/dist/shared/{components-bkvb6nem.js → components-s2bz1xpk.js} +11 -11
- package/dist/shared/{components-zvb11ker.js → components-tqvarbfv.js} +47 -47
- package/dist/shared/{components-aaq3yk4f.js → components-v6xp325t.js} +43 -43
- package/dist/shared/{components-v7es8aan.js → components-v7wtz8hk.js} +15 -15
- package/dist/shared/components-vc7vq5nz.js +32 -0
- package/dist/shared/{components-6hzwfmfd.js → components-vfbhxf5r.js} +8 -8
- package/dist/shared/{components-8hk9ve3r.js → components-wvp1m52g.js} +57 -57
- package/dist/shared/{components-gjfrycb5.js → components-yh3kwdhr.js} +63 -66
- package/dist/shared/{components-y3cqdrgy.js → components-ytb2tefr.js} +43 -43
- package/dist/shared/{components-61ckf42z.js → components-zfnmn5d4.js} +64 -64
- package/dist/shared/{components-m5br529r.js → components-zrkzcayz.js} +2 -2
- package/dist/shared/{components-csxz9f52.js → components-zx6b6yby.js} +4 -4
- package/dist/styles.css +1 -1
- package/package.json +3 -3
- package/dist/shared/components-74c20v2f.js +0 -32
- package/dist/shared/components-8hzbsfbd.js +0 -123
- package/dist/shared/components-dphg9gjr.js +0 -42
- package/dist/shared/components-kpbcms10.js +0 -9
- /package/dist/shared/{components-5vxtcp88.js → components-3ky44908.js} +0 -0
- /package/dist/shared/{components-4xxddc44.js → components-c6s6b43g.js} +0 -0
- /package/dist/shared/{components-nnnd2xef.js → components-men63rwj.js} +0 -0
- /package/dist/shared/{components-de8xsm9y.js → components-mhd39z7x.js} +0 -0
- /package/dist/shared/{components-dg0w8g5p.js → components-n7mjr357.js} +0 -0
- /package/dist/shared/{components-jw16snbn.js → components-vynjtrk6.js} +0 -0
|
@@ -1,58 +1,58 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "./components-
|
|
2
|
+
useControllableState
|
|
3
|
+
} from "./components-n7mjr357.js";
|
|
4
4
|
import {
|
|
5
|
-
|
|
6
|
-
} from "./components-
|
|
5
|
+
cn2
|
|
6
|
+
} from "./components-ezxhrmer.js";
|
|
7
7
|
import {
|
|
8
|
-
|
|
9
|
-
} from "./components-
|
|
10
|
-
import {
|
|
11
|
-
Tooltip
|
|
12
|
-
} from "./components-gndm6am4.js";
|
|
8
|
+
useShape
|
|
9
|
+
} from "./components-cv16mryv.js";
|
|
13
10
|
import {
|
|
14
|
-
|
|
15
|
-
} from "./components-
|
|
11
|
+
ScrollArea2
|
|
12
|
+
} from "./components-hawvy2qz.js";
|
|
16
13
|
import {
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
surfaceClasses2,
|
|
15
|
+
useSurface2,
|
|
16
|
+
SurfaceProvider2
|
|
17
|
+
} from "./components-zx6b6yby.js";
|
|
19
18
|
import {
|
|
20
19
|
useIcon
|
|
21
|
-
} from "./components-
|
|
20
|
+
} from "./components-zrkzcayz.js";
|
|
22
21
|
import {
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
useSizeVariant2,
|
|
23
|
+
useSize2
|
|
24
|
+
} from "./components-0sn7ypjw.js";
|
|
25
25
|
import {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
useSurface
|
|
29
|
-
} from "./components-csxz9f52.js";
|
|
26
|
+
Button2
|
|
27
|
+
} from "./components-b2wyq2cq.js";
|
|
30
28
|
import {
|
|
31
|
-
|
|
32
|
-
} from "./components-
|
|
29
|
+
Sheet2
|
|
30
|
+
} from "./components-rr7a6ja9.js";
|
|
33
31
|
import {
|
|
34
|
-
|
|
35
|
-
} from "./components-
|
|
32
|
+
fieldVariants
|
|
33
|
+
} from "./components-mhd39z7x.js";
|
|
36
34
|
import {
|
|
37
|
-
|
|
38
|
-
} from "./components-
|
|
35
|
+
useIsMobile
|
|
36
|
+
} from "./components-c6s6b43g.js";
|
|
39
37
|
import {
|
|
40
|
-
|
|
41
|
-
} from "./components-
|
|
38
|
+
Tooltip2
|
|
39
|
+
} from "./components-ng72k97e.js";
|
|
42
40
|
import {
|
|
43
41
|
GooIndicator
|
|
44
|
-
} from "./components-
|
|
42
|
+
} from "./components-chacnk61.js";
|
|
43
|
+
import {
|
|
44
|
+
FluidHoverHighlight2
|
|
45
|
+
} from "./components-kvr7f9hy.js";
|
|
45
46
|
import {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} from "./components-vc1k7yv2.js";
|
|
47
|
+
useFluidHover2
|
|
48
|
+
} from "./components-59efxjd9.js";
|
|
49
49
|
import {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
} from "./components-x3rz4cyn.js";
|
|
50
|
+
SizeProvider2
|
|
51
|
+
} from "./components-jjw69c4c.js";
|
|
53
52
|
import {
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
spring2,
|
|
54
|
+
exitFallbackMs2
|
|
55
|
+
} from "./components-1v7rxytx.js";
|
|
56
56
|
|
|
57
57
|
// components/navigation/sidebar/index.tsx
|
|
58
58
|
import {
|
|
@@ -79,20 +79,20 @@ import {
|
|
|
79
79
|
useState
|
|
80
80
|
} from "react";
|
|
81
81
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
82
|
-
var
|
|
83
|
-
var
|
|
84
|
-
var
|
|
85
|
-
var
|
|
86
|
-
var
|
|
87
|
-
var
|
|
88
|
-
var
|
|
89
|
-
var
|
|
82
|
+
var SIDEBAR_COOKIE_NAME2 = "sidebar_state";
|
|
83
|
+
var SIDEBAR_COOKIE_MAX_AGE2 = 60 * 60 * 24 * 7;
|
|
84
|
+
var SIDEBAR_WIDTH2 = "16rem";
|
|
85
|
+
var SIDEBAR_WIDTH_MOBILE2 = "18rem";
|
|
86
|
+
var SIDEBAR_KEYBOARD_SHORTCUT2 = "[";
|
|
87
|
+
var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2 = "]";
|
|
88
|
+
var SIDEBAR_MIN_WIDTH2 = 160;
|
|
89
|
+
var SIDEBAR_MAX_WIDTH2 = 360;
|
|
90
90
|
var SIDEBAR_COLLAPSE_SLOP = 56;
|
|
91
91
|
var SIDEBAR_HOVER_STRIP = 12;
|
|
92
92
|
var SIDEBAR_HOVER_TRIGGER_GAP = 24;
|
|
93
93
|
var mountedProviders = [];
|
|
94
94
|
var SidebarContext = createContext(null);
|
|
95
|
-
function
|
|
95
|
+
function useSidebar2() {
|
|
96
96
|
const ctx = useContext(SidebarContext);
|
|
97
97
|
if (!ctx)
|
|
98
98
|
throw new Error("useSidebar must be used within a SidebarProvider");
|
|
@@ -115,7 +115,7 @@ function inHoverZone(event, side, frame, shell, triggers) {
|
|
|
115
115
|
}
|
|
116
116
|
return side === "left" ? event.clientX >= bounds.left && event.clientX < inner + reach : event.clientX <= bounds.right && event.clientX > inner - reach;
|
|
117
117
|
}
|
|
118
|
-
var
|
|
118
|
+
var SidebarProvider2 = forwardRef(({
|
|
119
119
|
defaultOpen = true,
|
|
120
120
|
open: openProp,
|
|
121
121
|
onOpenChange,
|
|
@@ -123,8 +123,8 @@ var SidebarProvider = forwardRef(({
|
|
|
123
123
|
shortcut: shortcutProp,
|
|
124
124
|
mobileBreakpoint = 768,
|
|
125
125
|
openOnHover = false,
|
|
126
|
-
width: widthProp =
|
|
127
|
-
widthMobile =
|
|
126
|
+
width: widthProp = SIDEBAR_WIDTH2,
|
|
127
|
+
widthMobile = SIDEBAR_WIDTH_MOBILE2,
|
|
128
128
|
className,
|
|
129
129
|
style,
|
|
130
130
|
children,
|
|
@@ -149,19 +149,19 @@ var SidebarProvider = forwardRef(({
|
|
|
149
149
|
const [width, setWidth] = useState(widthProp);
|
|
150
150
|
useEffect(() => setWidth(widthProp), [widthProp]);
|
|
151
151
|
const [isResizing, setIsResizing] = useState(false);
|
|
152
|
-
const shortcut = shortcutProp === undefined ? side === "right" ?
|
|
152
|
+
const shortcut = shortcutProp === undefined ? side === "right" ? SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2 : SIDEBAR_KEYBOARD_SHORTCUT2 : shortcutProp;
|
|
153
153
|
const [internalOpen, setInternalOpen] = useState(defaultOpen);
|
|
154
154
|
const open = openProp ?? internalOpen;
|
|
155
155
|
const openRef = useRef(open);
|
|
156
156
|
openRef.current = open;
|
|
157
|
-
const setOpen = useCallback((
|
|
158
|
-
const next = typeof
|
|
157
|
+
const setOpen = useCallback((value) => {
|
|
158
|
+
const next = typeof value === "function" ? value(openRef.current) : value;
|
|
159
159
|
if (onOpenChange)
|
|
160
160
|
onOpenChange(next);
|
|
161
161
|
else
|
|
162
162
|
setInternalOpen(next);
|
|
163
163
|
if (persist) {
|
|
164
|
-
document.cookie = `${
|
|
164
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME2}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE2}`;
|
|
165
165
|
}
|
|
166
166
|
}, [onOpenChange, persist]);
|
|
167
167
|
const toggleSidebar = useCallback(() => {
|
|
@@ -297,7 +297,7 @@ var SidebarProvider = forwardRef(({
|
|
|
297
297
|
ref.current = node;
|
|
298
298
|
},
|
|
299
299
|
"data-slot": "sidebar-wrapper",
|
|
300
|
-
className:
|
|
300
|
+
className: cn2("group/sidebar-wrapper relative flex min-h-svh w-full", className),
|
|
301
301
|
style: {
|
|
302
302
|
"--sidebar-width": width,
|
|
303
303
|
"--sidebar-width-mobile": widthMobile,
|
|
@@ -308,7 +308,7 @@ var SidebarProvider = forwardRef(({
|
|
|
308
308
|
})
|
|
309
309
|
});
|
|
310
310
|
});
|
|
311
|
-
|
|
311
|
+
SidebarProvider2.displayName = "SidebarProvider";
|
|
312
312
|
function composeRefs(...refs) {
|
|
313
313
|
return (node) => {
|
|
314
314
|
for (const r of refs) {
|
|
@@ -346,7 +346,7 @@ function slotElement(template, DefaultTag, props, content) {
|
|
|
346
346
|
const merged = {
|
|
347
347
|
...props,
|
|
348
348
|
...templateProps,
|
|
349
|
-
className:
|
|
349
|
+
className: cn2(props.className, templateProps.className),
|
|
350
350
|
style: { ...props.style, ...templateProps.style }
|
|
351
351
|
};
|
|
352
352
|
for (const key of Object.keys(props)) {
|
|
@@ -373,10 +373,10 @@ var BREAKPOINT_HIDDEN = {
|
|
|
373
373
|
1280: "max-xl:hidden max-xl:opacity-0 max-xl:duration-moderate xl:duration-slow xl:starting:opacity-0"
|
|
374
374
|
};
|
|
375
375
|
var SidebarShell = forwardRef(({ side, variant, bordered = true, rail = true, railTooltipOpen, className, children, ...props }, ref) => {
|
|
376
|
-
const { open: kept, hoverOpen, width, mobileBreakpoint, isMobile, isResizing, shellRef } =
|
|
376
|
+
const { open: kept, hoverOpen, width, mobileBreakpoint, isMobile, isResizing, shellRef } = useSidebar2();
|
|
377
377
|
const open = kept || hoverOpen;
|
|
378
378
|
const shape = useShape();
|
|
379
|
-
const substrate =
|
|
379
|
+
const substrate = useSurface2();
|
|
380
380
|
const floatingLevel = Math.min(substrate + 1, 8);
|
|
381
381
|
const reduceMotion = useReducedMotion() ?? false;
|
|
382
382
|
const [dragFlip, setDragFlip] = useState(false);
|
|
@@ -392,10 +392,10 @@ var SidebarShell = forwardRef(({ side, variant, bordered = true, rail = true, ra
|
|
|
392
392
|
if (!flipped)
|
|
393
393
|
return;
|
|
394
394
|
setDragFlip(true);
|
|
395
|
-
const id = setTimeout(() => setDragFlip(false),
|
|
395
|
+
const id = setTimeout(() => setDragFlip(false), exitFallbackMs2(spring2.moderate));
|
|
396
396
|
return () => clearTimeout(id);
|
|
397
397
|
}, [open, isResizing]);
|
|
398
|
-
const widthTransition = reduceMotion ? { duration: 0 } : isResizing ? openFlipped || dragFlip ? open ?
|
|
398
|
+
const widthTransition = reduceMotion ? { duration: 0 } : isResizing ? openFlipped || dragFlip ? open ? spring2.moderate : spring2.moderate.exit : { duration: 0 } : open ? spring2.slow : spring2.slow.exit;
|
|
399
399
|
return /* @__PURE__ */ jsx(motion.div, {
|
|
400
400
|
ref: (node) => {
|
|
401
401
|
shellRef.current = node;
|
|
@@ -409,13 +409,13 @@ var SidebarShell = forwardRef(({ side, variant, bordered = true, rail = true, ra
|
|
|
409
409
|
"data-collapsible": open ? "" : "offcanvas",
|
|
410
410
|
"data-variant": variant,
|
|
411
411
|
"data-side": side,
|
|
412
|
-
className:
|
|
412
|
+
className: cn2("peer shrink-0 sticky top-0 h-svh overflow-hidden", side === "right" && "order-last", variant === "inset" && "[--scroll-divider-inset:8px]", BREAKPOINT_FADE_BASE, BREAKPOINT_HIDDEN[mobileBreakpoint], !BREAKPOINT_HIDDEN[mobileBreakpoint] && isMobile && "hidden", className),
|
|
413
413
|
initial: false,
|
|
414
414
|
animate: { width: open ? width : "0rem" },
|
|
415
415
|
transition: widthTransition,
|
|
416
416
|
...props,
|
|
417
417
|
children: /* @__PURE__ */ jsxs(motion.div, {
|
|
418
|
-
className:
|
|
418
|
+
className: cn2("absolute inset-y-0 flex h-full flex-col", side === "left" ? "left-0" : "right-0", variant === "floating" && "p-2", variant === "inset" && "py-2"),
|
|
419
419
|
style: { width },
|
|
420
420
|
initial: false,
|
|
421
421
|
animate: { x: open ? "0%" : side === "left" ? "-100%" : "100%" },
|
|
@@ -424,19 +424,19 @@ var SidebarShell = forwardRef(({ side, variant, bordered = true, rail = true, ra
|
|
|
424
424
|
children: [
|
|
425
425
|
variant === "floating" ? /* @__PURE__ */ jsx("div", {
|
|
426
426
|
"data-sidebar": "sidebar",
|
|
427
|
-
className:
|
|
428
|
-
children: /* @__PURE__ */ jsx(
|
|
427
|
+
className: cn2("flex h-full w-full min-h-0 flex-col", shape.container, surfaceClasses2(floatingLevel, 3)),
|
|
428
|
+
children: /* @__PURE__ */ jsx(SurfaceProvider2, {
|
|
429
429
|
value: floatingLevel,
|
|
430
430
|
children
|
|
431
431
|
})
|
|
432
432
|
}) : /* @__PURE__ */ jsx("div", {
|
|
433
433
|
"data-sidebar": "sidebar",
|
|
434
|
-
className:
|
|
434
|
+
className: cn2("flex h-full w-full min-h-0 flex-col", bordered && variant === "sidebar" && (side === "left" ? "border-r border-border" : "border-l border-border")),
|
|
435
435
|
children
|
|
436
436
|
}),
|
|
437
|
-
rail && /* @__PURE__ */ jsx(
|
|
437
|
+
rail && /* @__PURE__ */ jsx(SidebarRail2, {
|
|
438
438
|
tooltipOpen: railTooltipOpen,
|
|
439
|
-
className:
|
|
439
|
+
className: cn2(variant === "floating" && (side === "left" ? "right-1 after:right-[3.5px]" : "left-1 after:left-[3.5px]"), variant !== "sidebar" && "after:inset-y-2 after:[mask-image:linear-gradient(to_bottom,transparent_var(--rail-fade-start),black_var(--rail-fade-end),black_calc(100%-var(--rail-fade-end)),transparent_calc(100%-var(--rail-fade-start)))]"),
|
|
440
440
|
style: variant !== "sidebar" ? {
|
|
441
441
|
"--rail-fade-start": `${shape.bgRadius >= 20 ? 24 : 12}px`,
|
|
442
442
|
"--rail-fade-end": `${(shape.bgRadius >= 20 ? 24 : 12) + 24}px`
|
|
@@ -454,20 +454,20 @@ function ShortcutKbd({ children }) {
|
|
|
454
454
|
});
|
|
455
455
|
}
|
|
456
456
|
function useShortcutKey() {
|
|
457
|
-
const { side, shortcut } =
|
|
458
|
-
return shortcut ?? (side === "right" ?
|
|
457
|
+
const { side, shortcut } = useSidebar2();
|
|
458
|
+
return shortcut ?? (side === "right" ? SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2 : SIDEBAR_KEYBOARD_SHORTCUT2);
|
|
459
459
|
}
|
|
460
|
-
var
|
|
461
|
-
const { toggleSidebar, open, openMobile, isMobile, side, openOnHover, registerTrigger } =
|
|
460
|
+
var SidebarTrigger2 = forwardRef(({ onClick, size, children, ...props }, ref) => {
|
|
461
|
+
const { toggleSidebar, open, openMobile, isMobile, side, openOnHover, registerTrigger } = useSidebar2();
|
|
462
462
|
const shortcutKey = useShortcutKey();
|
|
463
463
|
const hoverMode = openOnHover && !isMobile;
|
|
464
464
|
const TriggerIcon = useIcon(`panel-${side}${hoverMode && !open ? "-dashed" : ""}`);
|
|
465
|
-
const iconSize =
|
|
465
|
+
const iconSize = useSizeVariant2() === "compact" ? "icon-compact" : "icon";
|
|
466
466
|
const collapsed = isMobile ? !openMobile : !open;
|
|
467
467
|
const label = hoverMode ? open ? "Show sidebar on hover" : "Keep sidebar open" : collapsed ? "Expand sidebar" : "Collapse sidebar";
|
|
468
468
|
const node = useRef(null);
|
|
469
469
|
useEffect(() => node.current ? registerTrigger(node.current) : undefined, [registerTrigger]);
|
|
470
|
-
return /* @__PURE__ */ jsx(
|
|
470
|
+
return /* @__PURE__ */ jsx(Tooltip2, {
|
|
471
471
|
side: "bottom",
|
|
472
472
|
content: /* @__PURE__ */ jsxs("span", {
|
|
473
473
|
className: "flex items-center gap-1.5",
|
|
@@ -481,7 +481,7 @@ var SidebarTrigger = forwardRef(({ onClick, size, children, ...props }, ref) =>
|
|
|
481
481
|
})
|
|
482
482
|
]
|
|
483
483
|
}),
|
|
484
|
-
children: /* @__PURE__ */ jsx(
|
|
484
|
+
children: /* @__PURE__ */ jsx(Button2, {
|
|
485
485
|
ref: (element) => {
|
|
486
486
|
node.current = element;
|
|
487
487
|
if (typeof ref === "function")
|
|
@@ -502,9 +502,9 @@ var SidebarTrigger = forwardRef(({ onClick, size, children, ...props }, ref) =>
|
|
|
502
502
|
})
|
|
503
503
|
});
|
|
504
504
|
});
|
|
505
|
-
|
|
506
|
-
var
|
|
507
|
-
const { toggleSidebar, open, setOpen, setHoverOpen, setWidth, side, setIsResizing } =
|
|
505
|
+
SidebarTrigger2.displayName = "SidebarTrigger";
|
|
506
|
+
var SidebarRail2 = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
|
|
507
|
+
const { toggleSidebar, open, setOpen, setHoverOpen, setWidth, side, setIsResizing } = useSidebar2();
|
|
508
508
|
const shortcutKey = useShortcutKey();
|
|
509
509
|
const railRef = useRef(null);
|
|
510
510
|
const dragRef = useRef(null);
|
|
@@ -536,10 +536,10 @@ var SidebarRail = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
|
|
|
536
536
|
}
|
|
537
537
|
const delta = side === "left" ? dx : -dx;
|
|
538
538
|
const raw = drag.startWidth + delta;
|
|
539
|
-
if (raw <
|
|
539
|
+
if (raw < SIDEBAR_MIN_WIDTH2 - SIDEBAR_COLLAPSE_SLOP) {
|
|
540
540
|
if (!drag.collapsed) {
|
|
541
541
|
drag.collapsed = true;
|
|
542
|
-
setWidth(`${
|
|
542
|
+
setWidth(`${SIDEBAR_MIN_WIDTH2}px`);
|
|
543
543
|
(drag.kept ? setOpen : setHoverOpen)(false);
|
|
544
544
|
}
|
|
545
545
|
return;
|
|
@@ -548,7 +548,7 @@ var SidebarRail = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
|
|
|
548
548
|
drag.collapsed = false;
|
|
549
549
|
(drag.kept ? setOpen : setHoverOpen)(true);
|
|
550
550
|
}
|
|
551
|
-
const next = Math.max(
|
|
551
|
+
const next = Math.max(SIDEBAR_MIN_WIDTH2, Math.min(SIDEBAR_MAX_WIDTH2, raw));
|
|
552
552
|
setWidth(`${next}px`);
|
|
553
553
|
};
|
|
554
554
|
const onPointerUp = (event) => {
|
|
@@ -569,7 +569,7 @@ var SidebarRail = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
|
|
|
569
569
|
setDragging(false);
|
|
570
570
|
setIsResizing(false);
|
|
571
571
|
};
|
|
572
|
-
return /* @__PURE__ */ jsx(
|
|
572
|
+
return /* @__PURE__ */ jsx(Tooltip2, {
|
|
573
573
|
side: side === "left" ? "right" : "left",
|
|
574
574
|
sideOffset: 8,
|
|
575
575
|
followCursor: "y",
|
|
@@ -623,59 +623,59 @@ var SidebarRail = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
|
|
|
623
623
|
onPointerMove,
|
|
624
624
|
onPointerUp,
|
|
625
625
|
onPointerCancel,
|
|
626
|
-
className:
|
|
626
|
+
className: cn2("absolute inset-y-0 z-20 w-2 cursor-col-resize touch-none outline-none", side === "left" ? "right-0" : "left-0", "after:absolute after:inset-y-0 after:w-px after:bg-transparent hover:after:bg-foreground/25 after:transition-colors after:duration-fast", tooltipOpen && "after:bg-foreground/25", side === "left" ? "after:right-0" : "after:left-0", className),
|
|
627
627
|
...props
|
|
628
628
|
})
|
|
629
629
|
});
|
|
630
630
|
});
|
|
631
|
-
|
|
632
|
-
var
|
|
631
|
+
SidebarRail2.displayName = "SidebarRail";
|
|
632
|
+
var SidebarInset2 = forwardRef(({ className, ...props }, ref) => {
|
|
633
633
|
const shape = useShape();
|
|
634
634
|
return /* @__PURE__ */ jsx("main", {
|
|
635
635
|
ref,
|
|
636
636
|
"data-slot": "sidebar-inset",
|
|
637
|
-
className:
|
|
637
|
+
className: cn2("relative flex min-h-0 w-full min-w-0 flex-1 flex-col bg-background", "peer-data-[variant=inset]:m-2 peer-data-[variant=inset]:peer-data-[side=left]:ml-0 peer-data-[variant=inset]:peer-data-[side=right]:mr-0", "peer-data-[variant=inset]:peer-data-[state=collapsed]:peer-data-[side=left]:ml-2 peer-data-[variant=inset]:peer-data-[state=collapsed]:peer-data-[side=right]:mr-2", "transition-[margin] duration-fast", shape.bgRadius >= 20 ? "peer-data-[variant=inset]:rounded-3xl" : "peer-data-[variant=inset]:rounded-xl", "peer-data-[variant=inset]:bg-surface-2 peer-data-[variant=inset]:shadow-surface-2", className),
|
|
638
638
|
...props
|
|
639
639
|
});
|
|
640
640
|
});
|
|
641
|
-
|
|
642
|
-
var
|
|
641
|
+
SidebarInset2.displayName = "SidebarInset";
|
|
642
|
+
var SidebarInput2 = forwardRef(({ className, ...props }, ref) => {
|
|
643
643
|
const shape = useShape();
|
|
644
|
-
const size =
|
|
644
|
+
const size = useSize2();
|
|
645
645
|
return /* @__PURE__ */ jsx("input", {
|
|
646
646
|
ref,
|
|
647
647
|
"data-sidebar": "input",
|
|
648
|
-
className:
|
|
648
|
+
className: cn2(fieldVariants(), "w-full px-3 text-foreground placeholder:text-muted-foreground outline-none", "focus-visible:ring-focus-ring", size.variant === "compact" ? "h-7" : "h-8", size.text, shape.input, className),
|
|
649
649
|
...props
|
|
650
650
|
});
|
|
651
651
|
});
|
|
652
|
-
|
|
653
|
-
var
|
|
652
|
+
SidebarInput2.displayName = "SidebarInput";
|
|
653
|
+
var SidebarHeader2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
654
654
|
ref,
|
|
655
655
|
"data-sidebar": "header",
|
|
656
|
-
className:
|
|
656
|
+
className: cn2("flex shrink-0 flex-col gap-2 p-2", className),
|
|
657
657
|
...props
|
|
658
658
|
}));
|
|
659
|
-
|
|
660
|
-
var
|
|
659
|
+
SidebarHeader2.displayName = "SidebarHeader";
|
|
660
|
+
var SidebarFooter2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
661
661
|
ref,
|
|
662
662
|
"data-sidebar": "footer",
|
|
663
|
-
className:
|
|
663
|
+
className: cn2("mt-auto flex shrink-0 flex-col gap-2 p-2", className),
|
|
664
664
|
...props
|
|
665
665
|
}));
|
|
666
|
-
|
|
667
|
-
var
|
|
666
|
+
SidebarFooter2.displayName = "SidebarFooter";
|
|
667
|
+
var SidebarSeparator2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
668
668
|
ref,
|
|
669
669
|
"data-sidebar": "separator",
|
|
670
670
|
role: "separator",
|
|
671
671
|
"aria-orientation": "horizontal",
|
|
672
|
-
className:
|
|
672
|
+
className: cn2("mx-2 h-px shrink-0 bg-border", className),
|
|
673
673
|
...props
|
|
674
674
|
}));
|
|
675
|
-
|
|
675
|
+
SidebarSeparator2.displayName = "SidebarSeparator";
|
|
676
676
|
var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
677
677
|
var SidebarGroupContext = createContext(null);
|
|
678
|
-
var
|
|
678
|
+
var SidebarGroup2 = forwardRef(({ className, collapsible = false, open: openProp, defaultOpen = true, onOpenChange, children, ...props }, ref) => {
|
|
679
679
|
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
|
680
680
|
const open = openProp ?? uncontrolledOpen;
|
|
681
681
|
const contentId = useId();
|
|
@@ -710,17 +710,17 @@ var SidebarGroup = forwardRef(({ className, collapsible = false, open: openProp,
|
|
|
710
710
|
prevOpenRef.current = open;
|
|
711
711
|
togglingRef.current = true;
|
|
712
712
|
}
|
|
713
|
-
const isHeaderAction = (k) => isValidElement(k) && (k.type ===
|
|
713
|
+
const isHeaderAction = (k) => isValidElement(k) && (k.type === SidebarGroupAction2 || k.type === SidebarGroupActions2);
|
|
714
714
|
let inner = children;
|
|
715
715
|
let actionsCount = 0;
|
|
716
716
|
if (collapsible) {
|
|
717
717
|
const kids = Children.toArray(children);
|
|
718
|
-
const labelIdx = kids.findIndex((k) => isValidElement(k) && k.type ===
|
|
718
|
+
const labelIdx = kids.findIndex((k) => isValidElement(k) && k.type === SidebarGroupLabel2);
|
|
719
719
|
if (labelIdx !== -1) {
|
|
720
720
|
const tail = kids.slice(labelIdx + 1);
|
|
721
721
|
const headerActions = tail.filter(isHeaderAction);
|
|
722
722
|
const rest = tail.filter((k) => !isHeaderAction(k));
|
|
723
|
-
actionsCount = headerActions.reduce((n, k) => n + (isValidElement(k) && k.type ===
|
|
723
|
+
actionsCount = headerActions.reduce((n, k) => n + (isValidElement(k) && k.type === SidebarGroupActions2 ? Children.count(k.props.children) : 1), 0);
|
|
724
724
|
inner = /* @__PURE__ */ jsxs(Fragment, {
|
|
725
725
|
children: [
|
|
726
726
|
kids.slice(0, labelIdx),
|
|
@@ -734,10 +734,10 @@ var SidebarGroup = forwardRef(({ className, collapsible = false, open: openProp,
|
|
|
734
734
|
/* @__PURE__ */ jsx(motion.div, {
|
|
735
735
|
id: contentId,
|
|
736
736
|
"aria-hidden": open ? undefined : true,
|
|
737
|
-
className:
|
|
737
|
+
className: cn2(open && settled ? "overflow-visible" : "overflow-hidden", !measured && !open && "h-0"),
|
|
738
738
|
initial: false,
|
|
739
739
|
animate: measured ? { height: open ? contentHeight : 0, opacity: open ? 1 : 0 } : { opacity: open ? 1 : 0 },
|
|
740
|
-
transition: togglingRef.current ? open ?
|
|
740
|
+
transition: togglingRef.current ? open ? spring2.moderate : spring2.moderate.exit : { duration: 0 },
|
|
741
741
|
onAnimationComplete: () => {
|
|
742
742
|
togglingRef.current = false;
|
|
743
743
|
if (open)
|
|
@@ -759,7 +759,7 @@ var SidebarGroup = forwardRef(({ className, collapsible = false, open: openProp,
|
|
|
759
759
|
ref,
|
|
760
760
|
"data-sidebar": "group",
|
|
761
761
|
"data-state": collapsible ? open ? "open" : "closed" : undefined,
|
|
762
|
-
className:
|
|
762
|
+
className: cn2("relative flex w-full min-w-0 flex-col p-2", className),
|
|
763
763
|
...props,
|
|
764
764
|
children: /* @__PURE__ */ jsx(SidebarGroupContext.Provider, {
|
|
765
765
|
value: collapsible ? ctx : null,
|
|
@@ -767,10 +767,10 @@ var SidebarGroup = forwardRef(({ className, collapsible = false, open: openProp,
|
|
|
767
767
|
})
|
|
768
768
|
});
|
|
769
769
|
});
|
|
770
|
-
|
|
771
|
-
var
|
|
772
|
-
const sizeVariant =
|
|
773
|
-
const sizeClasses =
|
|
770
|
+
SidebarGroup2.displayName = "SidebarGroup";
|
|
771
|
+
var SidebarGroupLabel2 = forwardRef(({ className, render, asChild, children, ...props }, ref) => {
|
|
772
|
+
const sizeVariant = useSizeVariant2();
|
|
773
|
+
const sizeClasses = useSize2();
|
|
774
774
|
const group = useContext(SidebarGroupContext);
|
|
775
775
|
const shape = useShape();
|
|
776
776
|
const ChevronRightIcon = useIcon("chevron-right");
|
|
@@ -799,17 +799,17 @@ var SidebarGroupLabel = forwardRef(({ className, render, asChild, children, ...p
|
|
|
799
799
|
"aria-controls": group.contentId,
|
|
800
800
|
onClick: group.toggle,
|
|
801
801
|
style: group.actionsCount > 0 ? { "--group-actions-pad": `${group.actionsCount * 28 + 6}px` } : undefined,
|
|
802
|
-
className:
|
|
802
|
+
className: cn2("flex h-8 w-full shrink-0 cursor-pointer select-none items-center gap-2 px-2 text-left text-muted-foreground/70 outline-none", "transition-colors duration-fast hover:text-muted-foreground", group.actionsCount > 0 && "pr-[var(--group-actions-pad)]", "focus-visible:ring-1 focus-visible:ring-focus-ring", shape.item, sizeVariant === "compact" ? "text-caption-compact" : "text-caption", className),
|
|
803
803
|
...props
|
|
804
804
|
}, /* @__PURE__ */ jsxs(Fragment, {
|
|
805
805
|
children: [
|
|
806
806
|
labelContent,
|
|
807
807
|
/* @__PURE__ */ jsx("span", {
|
|
808
|
-
className:
|
|
808
|
+
className: cn2("ml-auto flex h-6 shrink-0 items-center justify-center overflow-hidden", group.open ? "w-0 opacity-0 group-hover/group-header:w-6 group-hover/group-header:opacity-100 group-focus-within/group-header:w-6 group-focus-within/group-header:opacity-100 group-has-[[data-sidebar=group-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/group-header:w-6 group-has-[[data-sidebar=group-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/group-header:opacity-100 pointer-coarse:w-6 pointer-coarse:opacity-100" : "w-6 opacity-100"),
|
|
809
809
|
children: /* @__PURE__ */ jsx(motion.span, {
|
|
810
810
|
className: "inline-flex",
|
|
811
811
|
animate: { rotate: group.open ? 90 : 0 },
|
|
812
|
-
transition:
|
|
812
|
+
transition: spring2.fast,
|
|
813
813
|
children: /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
814
814
|
size: sizeClasses.icon,
|
|
815
815
|
strokeWidth: 1.5,
|
|
@@ -823,22 +823,22 @@ var SidebarGroupLabel = forwardRef(({ className, render, asChild, children, ...p
|
|
|
823
823
|
return slotElement(template, "div", {
|
|
824
824
|
ref,
|
|
825
825
|
"data-sidebar": "group-label",
|
|
826
|
-
className:
|
|
826
|
+
className: cn2("flex h-8 shrink-0 items-center gap-2 px-2 text-muted-foreground/70 outline-none", sizeVariant === "compact" ? "text-caption-compact" : "text-caption", className),
|
|
827
827
|
...props
|
|
828
828
|
}, labelContent);
|
|
829
829
|
});
|
|
830
|
-
|
|
830
|
+
SidebarGroupLabel2.displayName = "SidebarGroupLabel";
|
|
831
831
|
var GroupActionsContext = createContext(false);
|
|
832
|
-
var
|
|
832
|
+
var SidebarGroupAction2 = forwardRef(({ className, render, asChild, children, ...props }, ref) => {
|
|
833
833
|
const shape = useShape();
|
|
834
|
-
const sizeClasses =
|
|
834
|
+
const sizeClasses = useSize2();
|
|
835
835
|
const inCluster = useContext(GroupActionsContext);
|
|
836
836
|
const { template, content } = resolveSlotTemplate(render, asChild, children);
|
|
837
837
|
return slotElement(template, "button", {
|
|
838
838
|
ref,
|
|
839
839
|
type: template ? undefined : "button",
|
|
840
840
|
"data-sidebar": "group-action",
|
|
841
|
-
className:
|
|
841
|
+
className: cn2(inCluster ? "relative flex size-6 items-center justify-center text-muted-foreground outline-none" : "absolute right-3.5 top-3 flex size-6 items-center justify-center text-muted-foreground outline-none", "hover:bg-hover hover:text-foreground transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", "[&_svg]:size-[var(--icon-size)] [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast hover:[&_svg]:stroke-[2]", shape.item, className),
|
|
842
842
|
...props,
|
|
843
843
|
style: {
|
|
844
844
|
...{ "--icon-size": `${sizeClasses.icon}px` },
|
|
@@ -846,12 +846,12 @@ var SidebarGroupAction = forwardRef(({ className, render, asChild, children, ...
|
|
|
846
846
|
}
|
|
847
847
|
}, content);
|
|
848
848
|
});
|
|
849
|
-
|
|
850
|
-
var
|
|
849
|
+
SidebarGroupAction2.displayName = "SidebarGroupAction";
|
|
850
|
+
var SidebarGroupActions2 = forwardRef(({ className, children, ...props }, ref) => {
|
|
851
851
|
return /* @__PURE__ */ jsx("div", {
|
|
852
852
|
ref,
|
|
853
853
|
"data-sidebar": "group-actions",
|
|
854
|
-
className:
|
|
854
|
+
className: cn2("absolute right-3.5 top-2 z-10 flex h-8 items-center gap-1", className),
|
|
855
855
|
...props,
|
|
856
856
|
children: /* @__PURE__ */ jsx(GroupActionsContext.Provider, {
|
|
857
857
|
value: true,
|
|
@@ -859,14 +859,14 @@ var SidebarGroupActions = forwardRef(({ className, children, ...props }, ref) =>
|
|
|
859
859
|
})
|
|
860
860
|
});
|
|
861
861
|
});
|
|
862
|
-
|
|
863
|
-
var
|
|
862
|
+
SidebarGroupActions2.displayName = "SidebarGroupActions";
|
|
863
|
+
var SidebarGroupContent2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
|
|
864
864
|
ref,
|
|
865
865
|
"data-sidebar": "group-content",
|
|
866
|
-
className:
|
|
866
|
+
className: cn2("w-full", className),
|
|
867
867
|
...props
|
|
868
868
|
}));
|
|
869
|
-
|
|
869
|
+
SidebarGroupContent2.displayName = "SidebarGroupContent";
|
|
870
870
|
|
|
871
871
|
// components/navigation/sidebar/sidebar-menu.tsx
|
|
872
872
|
import { cva } from "class-variance-authority";
|
|
@@ -887,7 +887,7 @@ import {
|
|
|
887
887
|
import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
888
888
|
var useIsoLayoutEffect2 = typeof window !== "undefined" ? useLayoutEffect2 : useEffect2;
|
|
889
889
|
var MenuScopeContext = createContext2(null);
|
|
890
|
-
var
|
|
890
|
+
var SidebarSelection2 = createContext2(null);
|
|
891
891
|
var MenuItemContext = createContext2(null);
|
|
892
892
|
var MenuActionsClusterContext = createContext2(false);
|
|
893
893
|
function rowHidden(el) {
|
|
@@ -917,7 +917,7 @@ function sameElements(a, b) {
|
|
|
917
917
|
return a.length === b.length && a.every((el, i) => el === b[i]);
|
|
918
918
|
}
|
|
919
919
|
function useMenuScope(containerRef, { focusRing = true } = {}) {
|
|
920
|
-
const { activeIndex, setActiveIndex, itemRects, isMeasured, sessionRef, handlers, registerItem } =
|
|
920
|
+
const { activeIndex, setActiveIndex, itemRects, isMeasured, sessionRef, handlers, registerItem } = useFluidHover2(containerRef, { isItemDisabled: rowSkipped });
|
|
921
921
|
const rowsRef = useRef2(new Set);
|
|
922
922
|
const rowButtonsRef = useRef2(new Map);
|
|
923
923
|
const activeMapRef = useRef2(new Map);
|
|
@@ -1092,15 +1092,15 @@ function useMenuScope(containerRef, { focusRing = true } = {}) {
|
|
|
1092
1092
|
className: "pointer-events-none absolute top-0 left-0",
|
|
1093
1093
|
initial: false,
|
|
1094
1094
|
animate: { opacity: 1 },
|
|
1095
|
-
exit: { opacity: 0, transition:
|
|
1095
|
+
exit: { opacity: 0, transition: spring2.moderate.exit },
|
|
1096
1096
|
children: /* @__PURE__ */ jsx2(GooIndicator, {
|
|
1097
1097
|
rect,
|
|
1098
|
-
className:
|
|
1099
|
-
transition: rowChanged ?
|
|
1098
|
+
className: cn2("bg-active", shape.bg),
|
|
1099
|
+
transition: rowChanged ? spring2.moderate : false
|
|
1100
1100
|
})
|
|
1101
1101
|
}, key))
|
|
1102
1102
|
}),
|
|
1103
|
-
/* @__PURE__ */ jsx2(
|
|
1103
|
+
/* @__PURE__ */ jsx2(FluidHoverHighlight2, {
|
|
1104
1104
|
rect: hoverRect,
|
|
1105
1105
|
session: sessionRef.current,
|
|
1106
1106
|
from: hoverAnchorRect,
|
|
@@ -1117,8 +1117,8 @@ function useMenuScope(containerRef, { focusRing = true } = {}) {
|
|
|
1117
1117
|
width: focusRect.width + 4,
|
|
1118
1118
|
height: focusRect.height + 4
|
|
1119
1119
|
},
|
|
1120
|
-
exit: { opacity: 0, transition:
|
|
1121
|
-
transition: focusRowChanged ? { ...
|
|
1120
|
+
exit: { opacity: 0, transition: spring2.fast.exit },
|
|
1121
|
+
transition: focusRowChanged ? { ...spring2.fast, opacity: { duration: 0.08 } } : { duration: 0 }
|
|
1122
1122
|
})
|
|
1123
1123
|
})
|
|
1124
1124
|
]
|
|
@@ -1138,7 +1138,7 @@ function useMenuScope(containerRef, { focusRing = true } = {}) {
|
|
|
1138
1138
|
overlays
|
|
1139
1139
|
};
|
|
1140
1140
|
}
|
|
1141
|
-
var
|
|
1141
|
+
var SidebarMenu2 = forwardRef2(({ className, size, focusRing, children, ...props }, ref) => {
|
|
1142
1142
|
const containerRef = useRef2(null);
|
|
1143
1143
|
const { value, containerProps, overlays } = useMenuScope(containerRef, { focusRing });
|
|
1144
1144
|
const content = /* @__PURE__ */ jsx2(MenuScopeContext.Provider, {
|
|
@@ -1152,7 +1152,7 @@ var SidebarMenu = forwardRef2(({ className, size, focusRing, children, ...props
|
|
|
1152
1152
|
ref.current = node;
|
|
1153
1153
|
},
|
|
1154
1154
|
"data-sidebar": "menu",
|
|
1155
|
-
className:
|
|
1155
|
+
className: cn2("relative flex w-full min-w-0 flex-col select-none", className),
|
|
1156
1156
|
...containerProps,
|
|
1157
1157
|
...props,
|
|
1158
1158
|
children: [
|
|
@@ -1161,12 +1161,12 @@ var SidebarMenu = forwardRef2(({ className, size, focusRing, children, ...props
|
|
|
1161
1161
|
]
|
|
1162
1162
|
})
|
|
1163
1163
|
});
|
|
1164
|
-
return size ? /* @__PURE__ */ jsx2(
|
|
1164
|
+
return size ? /* @__PURE__ */ jsx2(SizeProvider2, {
|
|
1165
1165
|
size,
|
|
1166
1166
|
children: content
|
|
1167
1167
|
}) : content;
|
|
1168
1168
|
});
|
|
1169
|
-
|
|
1169
|
+
SidebarMenu2.displayName = "SidebarMenu";
|
|
1170
1170
|
function useMenuRow(rowRef, isSubRow = false, sub) {
|
|
1171
1171
|
const scope = useContext2(MenuScopeContext);
|
|
1172
1172
|
const registerRow = scope?.registerRow;
|
|
@@ -1246,7 +1246,7 @@ function rowGutter(actionCount, hasBadge) {
|
|
|
1246
1246
|
const inset = hasBadge ? ROW_BADGE_INSET : ROW_ACTION_INSET;
|
|
1247
1247
|
return inset + runWidth + ROW_GAP;
|
|
1248
1248
|
}
|
|
1249
|
-
var
|
|
1249
|
+
var SidebarMenuItem2 = forwardRef2(({ collapsible, open, defaultOpen, onOpenChange, className, children, ...props }, ref) => {
|
|
1250
1250
|
const rowRef = useRef2(null);
|
|
1251
1251
|
const item = useMenuRow(rowRef, false, { collapsible, open, defaultOpen, onOpenChange });
|
|
1252
1252
|
const { attachRow } = item;
|
|
@@ -1262,14 +1262,14 @@ var SidebarMenuItem = forwardRef2(({ collapsible, open, defaultOpen, onOpenChang
|
|
|
1262
1262
|
children: /* @__PURE__ */ jsx2("li", {
|
|
1263
1263
|
ref: refCb,
|
|
1264
1264
|
"data-sidebar": "menu-item",
|
|
1265
|
-
className:
|
|
1265
|
+
className: cn2("group/menu-item relative", className),
|
|
1266
1266
|
...props,
|
|
1267
1267
|
children
|
|
1268
1268
|
})
|
|
1269
1269
|
});
|
|
1270
1270
|
});
|
|
1271
|
-
|
|
1272
|
-
var
|
|
1271
|
+
SidebarMenuItem2.displayName = "SidebarMenuItem";
|
|
1272
|
+
var SidebarMenuSubItem2 = forwardRef2(({ className, children, ...props }, ref) => {
|
|
1273
1273
|
const rowRef = useRef2(null);
|
|
1274
1274
|
const item = useMenuRow(rowRef, true);
|
|
1275
1275
|
const { attachRow } = item;
|
|
@@ -1285,13 +1285,13 @@ var SidebarMenuSubItem = forwardRef2(({ className, children, ...props }, ref) =>
|
|
|
1285
1285
|
children: /* @__PURE__ */ jsx2("li", {
|
|
1286
1286
|
ref: refCb,
|
|
1287
1287
|
"data-sidebar": "menu-sub-item",
|
|
1288
|
-
className:
|
|
1288
|
+
className: cn2("group/menu-sub-item relative", className),
|
|
1289
1289
|
...props,
|
|
1290
1290
|
children
|
|
1291
1291
|
})
|
|
1292
1292
|
});
|
|
1293
1293
|
});
|
|
1294
|
-
|
|
1294
|
+
SidebarMenuSubItem2.displayName = "SidebarMenuSubItem";
|
|
1295
1295
|
function MenuRowLabel({
|
|
1296
1296
|
content,
|
|
1297
1297
|
lit,
|
|
@@ -1309,14 +1309,14 @@ function MenuRowLabel({
|
|
|
1309
1309
|
const rest = nodes.slice(i);
|
|
1310
1310
|
if (!label) {
|
|
1311
1311
|
return /* @__PURE__ */ jsx2("span", {
|
|
1312
|
-
className:
|
|
1312
|
+
className: cn2("flex min-w-0 flex-1 items-center gap-2 transition-colors duration-fast", lit ? "text-foreground" : "text-muted-foreground", textClass),
|
|
1313
1313
|
children: content
|
|
1314
1314
|
});
|
|
1315
1315
|
}
|
|
1316
1316
|
return /* @__PURE__ */ jsxs2(Fragment2, {
|
|
1317
1317
|
children: [
|
|
1318
1318
|
/* @__PURE__ */ jsxs2("span", {
|
|
1319
|
-
className:
|
|
1319
|
+
className: cn2("inline-grid min-w-0 text-left", textClass),
|
|
1320
1320
|
children: [
|
|
1321
1321
|
/* @__PURE__ */ jsx2("span", {
|
|
1322
1322
|
className: "col-start-1 row-start-1 invisible truncate pt-[0.25em] -mt-[0.25em] pb-[0.25em] -mb-[0.25em] weight-semibold [text-box:trim-both_cap_alphabetic]",
|
|
@@ -1324,7 +1324,7 @@ function MenuRowLabel({
|
|
|
1324
1324
|
children: label
|
|
1325
1325
|
}),
|
|
1326
1326
|
/* @__PURE__ */ jsx2("span", {
|
|
1327
|
-
className:
|
|
1327
|
+
className: cn2("col-start-1 row-start-1 truncate pt-[0.25em] -mt-[0.25em] pb-[0.25em] -mb-[0.25em] transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", lit ? "text-foreground" : "text-muted-foreground", emphasized ? "weight-semibold" : "weight-normal"),
|
|
1328
1328
|
children: label
|
|
1329
1329
|
})
|
|
1330
1330
|
]
|
|
@@ -1333,7 +1333,7 @@ function MenuRowLabel({
|
|
|
1333
1333
|
]
|
|
1334
1334
|
});
|
|
1335
1335
|
}
|
|
1336
|
-
var
|
|
1336
|
+
var sidebarMenuButtonVariants2 = cva("peer/menu-button relative z-10 flex w-full cursor-pointer select-none items-center gap-2 pl-2 text-left outline-none disabled:opacity-50 disabled:pointer-events-none transition-[padding] duration-fast pr-[var(--row-gutter)] group-hover/menu-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-item:pr-[var(--row-gutter-hover)] group-hover/menu-sub-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-sub-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-sub-item:pr-[var(--row-gutter-hover)]", {
|
|
1337
1337
|
variants: {
|
|
1338
1338
|
variant: {
|
|
1339
1339
|
default: "",
|
|
@@ -1342,7 +1342,7 @@ var sidebarMenuButtonVariants = cva("peer/menu-button relative z-10 flex w-full
|
|
|
1342
1342
|
},
|
|
1343
1343
|
defaultVariants: { variant: "default" }
|
|
1344
1344
|
});
|
|
1345
|
-
var
|
|
1345
|
+
var SidebarMenuButton2 = forwardRef2(({
|
|
1346
1346
|
isActive = false,
|
|
1347
1347
|
size = "default",
|
|
1348
1348
|
variant,
|
|
@@ -1360,9 +1360,9 @@ var SidebarMenuButton = forwardRef2(({
|
|
|
1360
1360
|
}, ref) => {
|
|
1361
1361
|
const scope = useContext2(MenuScopeContext);
|
|
1362
1362
|
const item = useContext2(MenuItemContext);
|
|
1363
|
-
const selection = useContext2(
|
|
1363
|
+
const selection = useContext2(SidebarSelection2);
|
|
1364
1364
|
const shape = useShape();
|
|
1365
|
-
const sizeClasses =
|
|
1365
|
+
const sizeClasses = useSize2();
|
|
1366
1366
|
const buttonRef = useRef2(null);
|
|
1367
1367
|
const ChevronRightIcon = useIcon("chevron-right");
|
|
1368
1368
|
const subOpen = item?.subOpen;
|
|
@@ -1396,13 +1396,13 @@ var SidebarMenuButton = forwardRef2(({
|
|
|
1396
1396
|
Icon && /* @__PURE__ */ jsx2(Icon, {
|
|
1397
1397
|
size: sizeClasses.icon,
|
|
1398
1398
|
strokeWidth: lit ? 2 : 1.5,
|
|
1399
|
-
className:
|
|
1399
|
+
className: cn2("shrink-0 transition-[color,stroke-width] duration-fast", lit ? "text-foreground" : "text-muted-foreground")
|
|
1400
1400
|
}),
|
|
1401
1401
|
!Icon && resolvedDot && /* @__PURE__ */ jsx2("span", {
|
|
1402
1402
|
className: "flex shrink-0 items-center justify-center",
|
|
1403
1403
|
style: { width: sizeClasses.icon, height: sizeClasses.icon },
|
|
1404
1404
|
children: /* @__PURE__ */ jsx2("span", {
|
|
1405
|
-
className:
|
|
1405
|
+
className: cn2("size-2 rounded-full transition-colors duration-fast", resolvedDot === "filled" ? lit ? "bg-foreground/60" : "bg-muted-foreground/50" : lit ? "border border-foreground/60" : "border border-muted-foreground/50")
|
|
1406
1406
|
})
|
|
1407
1407
|
}),
|
|
1408
1408
|
/* @__PURE__ */ jsx2(MenuRowLabel, {
|
|
@@ -1420,11 +1420,11 @@ var SidebarMenuButton = forwardRef2(({
|
|
|
1420
1420
|
children: /* @__PURE__ */ jsx2(motion2.span, {
|
|
1421
1421
|
className: "inline-flex",
|
|
1422
1422
|
animate: { rotate: subOpen ? 90 : 0 },
|
|
1423
|
-
transition:
|
|
1423
|
+
transition: spring2.fast,
|
|
1424
1424
|
children: /* @__PURE__ */ jsx2(ChevronRightIcon, {
|
|
1425
1425
|
size: sizeClasses.icon,
|
|
1426
1426
|
strokeWidth: 1.5,
|
|
1427
|
-
className:
|
|
1427
|
+
className: cn2("text-muted-foreground transition-opacity duration-fast", subOpen ? "opacity-0 group-hover/parent-row:opacity-100 group-focus-within/parent-row:opacity-100" : "opacity-100")
|
|
1428
1428
|
})
|
|
1429
1429
|
})
|
|
1430
1430
|
})
|
|
@@ -1446,7 +1446,7 @@ var SidebarMenuButton = forwardRef2(({
|
|
|
1446
1446
|
"aria-current": effectiveActive ? "page" : undefined,
|
|
1447
1447
|
"aria-expanded": subOpen,
|
|
1448
1448
|
tabIndex: tabIdx,
|
|
1449
|
-
className:
|
|
1449
|
+
className: cn2(sidebarMenuButtonVariants2({ variant }), heightClass, shape.item, collapsible && "group/parent-row", className),
|
|
1450
1450
|
onClick: (event) => {
|
|
1451
1451
|
onClick?.(event);
|
|
1452
1452
|
if (collapsible)
|
|
@@ -1462,10 +1462,10 @@ var SidebarMenuButton = forwardRef2(({
|
|
|
1462
1462
|
}
|
|
1463
1463
|
}, inner);
|
|
1464
1464
|
});
|
|
1465
|
-
|
|
1466
|
-
var
|
|
1465
|
+
SidebarMenuButton2.displayName = "SidebarMenuButton";
|
|
1466
|
+
var SidebarMenuAction2 = forwardRef2(({ className, showOnHover = false, render, asChild, children, onClick, ...props }, ref) => {
|
|
1467
1467
|
const shape = useShape();
|
|
1468
|
-
const sizeClasses =
|
|
1468
|
+
const sizeClasses = useSize2();
|
|
1469
1469
|
const item = useContext2(MenuItemContext);
|
|
1470
1470
|
const inCluster = useContext2(MenuActionsClusterContext);
|
|
1471
1471
|
const { template, content } = resolveSlotTemplate(render, asChild, children);
|
|
@@ -1481,7 +1481,7 @@ var SidebarMenuAction = forwardRef2(({ className, showOnHover = false, render, a
|
|
|
1481
1481
|
type: template ? undefined : "button",
|
|
1482
1482
|
"data-sidebar": "menu-action",
|
|
1483
1483
|
"data-show-on-hover": showOnHover ? "" : undefined,
|
|
1484
|
-
className:
|
|
1484
|
+
className: cn2(inCluster ? "relative flex size-6 shrink-0 items-center justify-center text-muted-foreground outline-none" : "absolute right-1.5 z-10 flex size-6 items-center justify-center text-muted-foreground outline-none", !inCluster && (item?.isSubRow ? "group-has-[>[data-sidebar=menu-badge]]/menu-sub-item:right-8.5" : "group-has-[>[data-sidebar=menu-badge]]/menu-item:right-8.5"), !inCluster && (item?.isSubRow || sizeClasses.variant === "compact" ? "top-0.5" : "top-1"), "hover:bg-hover hover:text-foreground transition-[color,background-color,opacity] duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", "[&_svg]:size-[var(--icon-size)] [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast hover:[&_svg]:stroke-[2]", shape.item, !inCluster && showOnHover && (item?.isSubRow ? "opacity-0 group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:opacity-100 data-[state=open]:opacity-100 aria-expanded:opacity-100" : "opacity-0 peer-hover/menu-button:opacity-100 peer-focus-visible/menu-button:opacity-100 hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 aria-expanded:opacity-100"), className),
|
|
1485
1485
|
onClick: (event) => {
|
|
1486
1486
|
event.stopPropagation();
|
|
1487
1487
|
onClick?.(event);
|
|
@@ -1490,10 +1490,10 @@ var SidebarMenuAction = forwardRef2(({ className, showOnHover = false, render, a
|
|
|
1490
1490
|
style: { ...{ "--icon-size": `${sizeClasses.icon}px` }, ...props.style ?? {} }
|
|
1491
1491
|
}, content);
|
|
1492
1492
|
});
|
|
1493
|
-
|
|
1494
|
-
var
|
|
1493
|
+
SidebarMenuAction2.displayName = "SidebarMenuAction";
|
|
1494
|
+
var SidebarMenuActions2 = forwardRef2(({ className, showOnHover = false, children, ...props }, ref) => {
|
|
1495
1495
|
const item = useContext2(MenuItemContext);
|
|
1496
|
-
const sizeClasses =
|
|
1496
|
+
const sizeClasses = useSize2();
|
|
1497
1497
|
const count = Children2.count(children);
|
|
1498
1498
|
const setActions = item?.setActions;
|
|
1499
1499
|
useIsoLayoutEffect2(() => {
|
|
@@ -1503,7 +1503,7 @@ var SidebarMenuActions = forwardRef2(({ className, showOnHover = false, children
|
|
|
1503
1503
|
return /* @__PURE__ */ jsx2("div", {
|
|
1504
1504
|
ref,
|
|
1505
1505
|
"data-sidebar": "menu-actions",
|
|
1506
|
-
className:
|
|
1506
|
+
className: cn2("absolute right-1.5 z-10 flex items-center gap-1", item?.isSubRow ? "group-has-[>[data-sidebar=menu-badge]]/menu-sub-item:right-8.5" : "group-has-[>[data-sidebar=menu-badge]]/menu-item:right-8.5", item?.isSubRow || sizeClasses.variant === "compact" ? "top-0.5" : "top-1", showOnHover && (item?.isSubRow ? "opacity-0 transition-opacity duration-fast group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:opacity-100 has-[[data-state=open]]:opacity-100 has-[[data-popup-open]]:opacity-100" : "opacity-0 transition-opacity duration-fast peer-hover/menu-button:opacity-100 peer-focus-visible/menu-button:opacity-100 hover:opacity-100 focus-within:opacity-100 has-[[data-state=open]]:opacity-100 has-[[data-popup-open]]:opacity-100"), className),
|
|
1507
1507
|
...props,
|
|
1508
1508
|
children: /* @__PURE__ */ jsx2(MenuActionsClusterContext.Provider, {
|
|
1509
1509
|
value: true,
|
|
@@ -1511,10 +1511,10 @@ var SidebarMenuActions = forwardRef2(({ className, showOnHover = false, children
|
|
|
1511
1511
|
})
|
|
1512
1512
|
});
|
|
1513
1513
|
});
|
|
1514
|
-
|
|
1515
|
-
var
|
|
1514
|
+
SidebarMenuActions2.displayName = "SidebarMenuActions";
|
|
1515
|
+
var SidebarMenuBadge2 = forwardRef2(({ className, ...props }, ref) => {
|
|
1516
1516
|
const item = useContext2(MenuItemContext);
|
|
1517
|
-
const sizeClasses =
|
|
1517
|
+
const sizeClasses = useSize2();
|
|
1518
1518
|
const lit = item?.isActiveRow ?? false;
|
|
1519
1519
|
const setHasBadge = item?.setHasBadge;
|
|
1520
1520
|
useIsoLayoutEffect2(() => {
|
|
@@ -1524,14 +1524,14 @@ var SidebarMenuBadge = forwardRef2(({ className, ...props }, ref) => {
|
|
|
1524
1524
|
return /* @__PURE__ */ jsx2("div", {
|
|
1525
1525
|
ref,
|
|
1526
1526
|
"data-sidebar": "menu-badge",
|
|
1527
|
-
className:
|
|
1527
|
+
className: cn2("pointer-events-none absolute right-2 z-10 flex h-5 min-w-5 items-center justify-center px-1 tabular-nums", sizeClasses.variant === "compact" ? "top-1 text-micro-compact" : "top-1.5 text-micro", "transition-[color,font-variation-settings] duration-fast", lit ? "text-foreground weight-semibold" : "text-muted-foreground weight-normal", className),
|
|
1528
1528
|
...props
|
|
1529
1529
|
});
|
|
1530
1530
|
});
|
|
1531
|
-
|
|
1531
|
+
SidebarMenuBadge2.displayName = "SidebarMenuBadge";
|
|
1532
1532
|
var SKELETON_WIDTHS = ["62%", "74%", "55%", "82%", "68%"];
|
|
1533
|
-
var
|
|
1534
|
-
const sizeClasses =
|
|
1533
|
+
var SidebarMenuSkeleton2 = forwardRef2(({ className, showIcon = false, ...props }, ref) => {
|
|
1534
|
+
const sizeClasses = useSize2();
|
|
1535
1535
|
const id = useId2();
|
|
1536
1536
|
let sum = 0;
|
|
1537
1537
|
for (let i = 0;i < id.length; i++)
|
|
@@ -1540,7 +1540,7 @@ var SidebarMenuSkeleton = forwardRef2(({ className, showIcon = false, ...props }
|
|
|
1540
1540
|
return /* @__PURE__ */ jsxs2("div", {
|
|
1541
1541
|
ref,
|
|
1542
1542
|
"data-sidebar": "menu-skeleton",
|
|
1543
|
-
className:
|
|
1543
|
+
className: cn2("flex items-center gap-2 px-2", sizeClasses.variant === "compact" ? "h-7" : "h-8", className),
|
|
1544
1544
|
...props,
|
|
1545
1545
|
children: [
|
|
1546
1546
|
showIcon && /* @__PURE__ */ jsx2("div", {
|
|
@@ -1555,8 +1555,8 @@ var SidebarMenuSkeleton = forwardRef2(({ className, showIcon = false, ...props }
|
|
|
1555
1555
|
]
|
|
1556
1556
|
});
|
|
1557
1557
|
});
|
|
1558
|
-
|
|
1559
|
-
var
|
|
1558
|
+
SidebarMenuSkeleton2.displayName = "SidebarMenuSkeleton";
|
|
1559
|
+
var SidebarMenuSub2 = forwardRef2(({ className, open: openProp, children, ...props }, ref) => {
|
|
1560
1560
|
const containerRef = useRef2(null);
|
|
1561
1561
|
const row = useContext2(MenuItemContext);
|
|
1562
1562
|
const open = openProp ?? row?.subOpen ?? true;
|
|
@@ -1585,10 +1585,10 @@ var SidebarMenuSub = forwardRef2(({ className, open: openProp, children, ...prop
|
|
|
1585
1585
|
}
|
|
1586
1586
|
return /* @__PURE__ */ jsx2(motion2.div, {
|
|
1587
1587
|
"data-slot": "sidebar-menu-sub-wrapper",
|
|
1588
|
-
className:
|
|
1588
|
+
className: cn2("overflow-hidden", !measured && !open && "h-0"),
|
|
1589
1589
|
initial: false,
|
|
1590
1590
|
animate: measured ? { height: open ? contentHeight : 0, opacity: open ? 1 : 0 } : { opacity: open ? 1 : 0 },
|
|
1591
|
-
transition: togglingRef.current ? open ?
|
|
1591
|
+
transition: togglingRef.current ? open ? spring2.moderate : spring2.moderate.exit : { duration: 0 },
|
|
1592
1592
|
onAnimationComplete: () => {
|
|
1593
1593
|
togglingRef.current = false;
|
|
1594
1594
|
},
|
|
@@ -1604,14 +1604,14 @@ var SidebarMenuSub = forwardRef2(({ className, open: openProp, children, ...prop
|
|
|
1604
1604
|
"data-state": open ? "open" : "closed",
|
|
1605
1605
|
"aria-hidden": open ? undefined : true,
|
|
1606
1606
|
...open ? {} : { inert: "" },
|
|
1607
|
-
className:
|
|
1607
|
+
className: cn2("relative ml-[15px] flex min-w-0 flex-col border-l border-border pl-2 select-none", className),
|
|
1608
1608
|
...props,
|
|
1609
1609
|
children
|
|
1610
1610
|
})
|
|
1611
1611
|
});
|
|
1612
1612
|
});
|
|
1613
|
-
|
|
1614
|
-
var
|
|
1613
|
+
SidebarMenuSub2.displayName = "SidebarMenuSub";
|
|
1614
|
+
var SidebarMenuSubButton2 = forwardRef2(({
|
|
1615
1615
|
isActive: isActiveProp = false,
|
|
1616
1616
|
size = "md",
|
|
1617
1617
|
icon: Icon,
|
|
@@ -1624,10 +1624,10 @@ var SidebarMenuSubButton = forwardRef2(({
|
|
|
1624
1624
|
...props
|
|
1625
1625
|
}, ref) => {
|
|
1626
1626
|
const item = useContext2(MenuItemContext);
|
|
1627
|
-
const selection = useContext2(
|
|
1627
|
+
const selection = useContext2(SidebarSelection2);
|
|
1628
1628
|
const isActive = isActiveProp || value !== undefined && selection?.value === value;
|
|
1629
1629
|
const shape = useShape();
|
|
1630
|
-
const sizeClasses =
|
|
1630
|
+
const sizeClasses = useSize2();
|
|
1631
1631
|
const buttonRef = useRef2(null);
|
|
1632
1632
|
const setActive = item?.setActive;
|
|
1633
1633
|
useIsoLayoutEffect2(() => {
|
|
@@ -1663,7 +1663,7 @@ var SidebarMenuSubButton = forwardRef2(({
|
|
|
1663
1663
|
"data-active": isActive ? "true" : undefined,
|
|
1664
1664
|
"aria-current": isActive ? "page" : undefined,
|
|
1665
1665
|
tabIndex: tabIdx,
|
|
1666
|
-
className:
|
|
1666
|
+
className: cn2("relative z-10 flex w-full cursor-pointer select-none items-center gap-2 pl-2 text-left outline-none", "transition-[padding] duration-fast pr-[var(--row-gutter)] group-hover/menu-sub-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-sub-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-sub-item:pr-[var(--row-gutter-hover)]", size === "sm" ? "h-6" : sizeClasses.variant === "compact" ? "h-6" : "h-7", shape.item, className),
|
|
1667
1667
|
onClick: (event) => {
|
|
1668
1668
|
onClick?.(event);
|
|
1669
1669
|
if (value !== undefined)
|
|
@@ -1676,7 +1676,7 @@ var SidebarMenuSubButton = forwardRef2(({
|
|
|
1676
1676
|
Icon && /* @__PURE__ */ jsx2(Icon, {
|
|
1677
1677
|
size: sizeClasses.icon,
|
|
1678
1678
|
strokeWidth: lit ? 2 : 1.5,
|
|
1679
|
-
className:
|
|
1679
|
+
className: cn2("shrink-0 transition-[color,stroke-width] duration-fast", lit ? "text-foreground" : "text-muted-foreground")
|
|
1680
1680
|
}),
|
|
1681
1681
|
/* @__PURE__ */ jsx2(MenuRowLabel, {
|
|
1682
1682
|
content,
|
|
@@ -1687,17 +1687,17 @@ var SidebarMenuSubButton = forwardRef2(({
|
|
|
1687
1687
|
]
|
|
1688
1688
|
}));
|
|
1689
1689
|
});
|
|
1690
|
-
|
|
1690
|
+
SidebarMenuSubButton2.displayName = "SidebarMenuSubButton";
|
|
1691
1691
|
|
|
1692
1692
|
// components/navigation/sidebar/index.tsx
|
|
1693
1693
|
import { jsx as jsx3, jsxs as jsxs3, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
1694
1694
|
function SidebarSheet({ side, children }) {
|
|
1695
|
-
const { openMobile, setOpenMobile, widthMobile } =
|
|
1696
|
-
return /* @__PURE__ */ jsx3(
|
|
1695
|
+
const { openMobile, setOpenMobile, widthMobile } = useSidebar2();
|
|
1696
|
+
return /* @__PURE__ */ jsx3(Sheet2, {
|
|
1697
1697
|
side,
|
|
1698
1698
|
open: openMobile,
|
|
1699
1699
|
onOpenChange: setOpenMobile,
|
|
1700
|
-
children: /* @__PURE__ */ jsx3(
|
|
1700
|
+
children: /* @__PURE__ */ jsx3(Sheet2.Content, {
|
|
1701
1701
|
"aria-label": "Sidebar",
|
|
1702
1702
|
"data-sidebar": "sidebar",
|
|
1703
1703
|
"data-mobile": "true",
|
|
@@ -1709,7 +1709,7 @@ function SidebarSheet({ side, children }) {
|
|
|
1709
1709
|
})
|
|
1710
1710
|
});
|
|
1711
1711
|
}
|
|
1712
|
-
var
|
|
1712
|
+
var Sidebar2 = forwardRef3(({
|
|
1713
1713
|
side = "left",
|
|
1714
1714
|
variant = "sidebar",
|
|
1715
1715
|
collapsible = "offcanvas",
|
|
@@ -1724,10 +1724,10 @@ var Sidebar = forwardRef3(({
|
|
|
1724
1724
|
children: parts,
|
|
1725
1725
|
...props
|
|
1726
1726
|
}, ref) => {
|
|
1727
|
-
const { isMobile, width, registerSide } =
|
|
1727
|
+
const { isMobile, width, registerSide } = useSidebar2();
|
|
1728
1728
|
const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
|
|
1729
1729
|
const selection = useMemo3(() => ({ value, select: setValue }), [value, setValue]);
|
|
1730
|
-
const children = /* @__PURE__ */ jsx3(
|
|
1730
|
+
const children = /* @__PURE__ */ jsx3(SidebarSelection2.Provider, {
|
|
1731
1731
|
value: selection,
|
|
1732
1732
|
children: parts
|
|
1733
1733
|
});
|
|
@@ -1738,12 +1738,12 @@ var Sidebar = forwardRef3(({
|
|
|
1738
1738
|
"data-slot": "sidebar",
|
|
1739
1739
|
"data-variant": variant,
|
|
1740
1740
|
"data-side": side,
|
|
1741
|
-
className:
|
|
1741
|
+
className: cn2("peer sticky top-0 flex h-svh shrink-0 flex-col", side === "right" && "order-last", className),
|
|
1742
1742
|
style: { width, ...style },
|
|
1743
1743
|
...props,
|
|
1744
1744
|
children: /* @__PURE__ */ jsx3("div", {
|
|
1745
1745
|
"data-sidebar": "sidebar",
|
|
1746
|
-
className:
|
|
1746
|
+
className: cn2("flex h-full w-full min-h-0 flex-col", bordered && variant === "sidebar" && (side === "left" ? "border-r border-border" : "border-l border-border")),
|
|
1747
1747
|
children
|
|
1748
1748
|
})
|
|
1749
1749
|
});
|
|
@@ -1769,24 +1769,24 @@ var Sidebar = forwardRef3(({
|
|
|
1769
1769
|
]
|
|
1770
1770
|
});
|
|
1771
1771
|
});
|
|
1772
|
-
|
|
1773
|
-
var
|
|
1774
|
-
const { isMobile } =
|
|
1772
|
+
Sidebar2.displayName = "Sidebar";
|
|
1773
|
+
var SidebarContent2 = forwardRef3(({ className, viewportClassName, children, ...props }, ref) => {
|
|
1774
|
+
const { isMobile } = useSidebar2();
|
|
1775
1775
|
if (isMobile) {
|
|
1776
1776
|
return /* @__PURE__ */ jsx3("div", {
|
|
1777
1777
|
className: "scroll-divider [--scroll-divider-inset:8px] flex min-h-0 w-full flex-1 flex-col",
|
|
1778
1778
|
children: /* @__PURE__ */ jsx3("div", {
|
|
1779
1779
|
ref,
|
|
1780
1780
|
"data-sidebar": "content",
|
|
1781
|
-
className:
|
|
1781
|
+
className: cn2("scroll-fade flex min-h-0 w-full flex-1 flex-col overflow-y-auto", className),
|
|
1782
1782
|
...props,
|
|
1783
1783
|
children
|
|
1784
1784
|
})
|
|
1785
1785
|
});
|
|
1786
1786
|
}
|
|
1787
|
-
return /* @__PURE__ */ jsx3(
|
|
1788
|
-
className:
|
|
1789
|
-
viewportClassName:
|
|
1787
|
+
return /* @__PURE__ */ jsx3(ScrollArea2, {
|
|
1788
|
+
className: cn2("scroll-divider min-h-0 w-full flex-1", className),
|
|
1789
|
+
viewportClassName: cn2("scroll-fade [&>div]:!block [&>div]:!min-w-0", viewportClassName),
|
|
1790
1790
|
children: /* @__PURE__ */ jsx3("div", {
|
|
1791
1791
|
ref,
|
|
1792
1792
|
"data-sidebar": "content",
|
|
@@ -1796,33 +1796,33 @@ var SidebarContent = forwardRef3(({ className, viewportClassName, children, ...p
|
|
|
1796
1796
|
})
|
|
1797
1797
|
});
|
|
1798
1798
|
});
|
|
1799
|
-
|
|
1800
|
-
Object.assign(
|
|
1801
|
-
Provider:
|
|
1802
|
-
Trigger:
|
|
1803
|
-
Rail:
|
|
1804
|
-
Inset:
|
|
1805
|
-
Input:
|
|
1806
|
-
Header:
|
|
1807
|
-
Content:
|
|
1808
|
-
Footer:
|
|
1809
|
-
Separator:
|
|
1810
|
-
Group:
|
|
1811
|
-
GroupLabel:
|
|
1812
|
-
GroupAction:
|
|
1813
|
-
GroupActions:
|
|
1814
|
-
GroupContent:
|
|
1815
|
-
Menu:
|
|
1816
|
-
MenuItem:
|
|
1817
|
-
MenuButton:
|
|
1818
|
-
MenuAction:
|
|
1819
|
-
MenuActions:
|
|
1820
|
-
MenuBadge:
|
|
1821
|
-
MenuSkeleton:
|
|
1822
|
-
MenuSub:
|
|
1823
|
-
MenuSubItem:
|
|
1824
|
-
MenuSubButton:
|
|
1799
|
+
SidebarContent2.displayName = "SidebarContent";
|
|
1800
|
+
Object.assign(Sidebar2, {
|
|
1801
|
+
Provider: SidebarProvider2,
|
|
1802
|
+
Trigger: SidebarTrigger2,
|
|
1803
|
+
Rail: SidebarRail2,
|
|
1804
|
+
Inset: SidebarInset2,
|
|
1805
|
+
Input: SidebarInput2,
|
|
1806
|
+
Header: SidebarHeader2,
|
|
1807
|
+
Content: SidebarContent2,
|
|
1808
|
+
Footer: SidebarFooter2,
|
|
1809
|
+
Separator: SidebarSeparator2,
|
|
1810
|
+
Group: SidebarGroup2,
|
|
1811
|
+
GroupLabel: SidebarGroupLabel2,
|
|
1812
|
+
GroupAction: SidebarGroupAction2,
|
|
1813
|
+
GroupActions: SidebarGroupActions2,
|
|
1814
|
+
GroupContent: SidebarGroupContent2,
|
|
1815
|
+
Menu: SidebarMenu2,
|
|
1816
|
+
MenuItem: SidebarMenuItem2,
|
|
1817
|
+
MenuButton: SidebarMenuButton2,
|
|
1818
|
+
MenuAction: SidebarMenuAction2,
|
|
1819
|
+
MenuActions: SidebarMenuActions2,
|
|
1820
|
+
MenuBadge: SidebarMenuBadge2,
|
|
1821
|
+
MenuSkeleton: SidebarMenuSkeleton2,
|
|
1822
|
+
MenuSub: SidebarMenuSub2,
|
|
1823
|
+
MenuSubItem: SidebarMenuSubItem2,
|
|
1824
|
+
MenuSubButton: SidebarMenuSubButton2
|
|
1825
1825
|
});
|
|
1826
|
-
var sidebar_default =
|
|
1826
|
+
var sidebar_default = Sidebar2;
|
|
1827
1827
|
|
|
1828
|
-
export {
|
|
1828
|
+
export { SIDEBAR_COOKIE_NAME2, SIDEBAR_COOKIE_MAX_AGE2, SIDEBAR_WIDTH2, SIDEBAR_WIDTH_MOBILE2, SIDEBAR_KEYBOARD_SHORTCUT2, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2, SIDEBAR_MIN_WIDTH2, SIDEBAR_MAX_WIDTH2, useSidebar2, SidebarProvider2, SidebarTrigger2, SidebarRail2, SidebarInset2, SidebarInput2, SidebarHeader2, SidebarFooter2, SidebarSeparator2, SidebarGroup2, SidebarGroupLabel2, SidebarGroupAction2, SidebarGroupActions2, SidebarGroupContent2, SidebarSelection2, SidebarMenu2, SidebarMenuItem2, SidebarMenuSubItem2, sidebarMenuButtonVariants2, SidebarMenuButton2, SidebarMenuAction2, SidebarMenuActions2, SidebarMenuBadge2, SidebarMenuSkeleton2, SidebarMenuSub2, SidebarMenuSubButton2, Sidebar2, SidebarContent2, sidebar_default };
|