@cloudflare/kumo 2.5.1 → 2.6.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/CHANGELOG.md +32 -0
- package/ai/component-registry.json +176 -124
- package/ai/component-registry.md +171 -51
- package/ai/schemas.ts +23 -12
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +75 -48
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +207 -197
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/SankeyChart-g1tng405ml2e0qg2.js +890 -0
- package/dist/chunks/SankeyChart-g1tng405ml2e0qg2.js.map +1 -0
- package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js → autocomplete-hgprlcuf0ixbbo6d.js} +18 -18
- package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js.map → autocomplete-hgprlcuf0ixbbo6d.js.map} +1 -1
- package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js → breadcrumbs-lyj8ljudrm2owx5y.js} +2 -2
- package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js.map → breadcrumbs-lyj8ljudrm2owx5y.js.map} +1 -1
- package/dist/chunks/button-gtdhvogt5rlrf1is.js +237 -0
- package/dist/chunks/button-gtdhvogt5rlrf1is.js.map +1 -0
- package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js → checkbox-byg8t8r9vbmif696.js} +3 -3
- package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js.map → checkbox-byg8t8r9vbmif696.js.map} +1 -1
- package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js → clipboard-text-lf909phvldd8rfk8.js} +4 -4
- package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js.map → clipboard-text-lf909phvldd8rfk8.js.map} +1 -1
- package/dist/chunks/{collapsible-nzqcf9zwnjkxqzr6.js → collapsible-dl61f8gd4j897hmv.js} +4 -4
- package/dist/chunks/{collapsible-nzqcf9zwnjkxqzr6.js.map → collapsible-dl61f8gd4j897hmv.js.map} +1 -1
- package/dist/chunks/{combobox-msvukodjsqzlvpqc.js → combobox-dxff22zxzq846nec.js} +4 -4
- package/dist/chunks/{combobox-msvukodjsqzlvpqc.js.map → combobox-dxff22zxzq846nec.js.map} +1 -1
- package/dist/chunks/{command-palette-fqhyacp33fhyf696.js → command-palette-i4r0402b838wiy0j.js} +21 -21
- package/dist/chunks/{command-palette-fqhyacp33fhyf696.js.map → command-palette-i4r0402b838wiy0j.js.map} +1 -1
- package/dist/chunks/{dialog-3mpu1i1wssrsz8i6.js → dialog-g1b8161nbyixdit0.js} +7 -7
- package/dist/chunks/{dialog-3mpu1i1wssrsz8i6.js.map → dialog-g1b8161nbyixdit0.js.map} +1 -1
- package/dist/chunks/{dropdown-g4sb4cw9ffqaw5gx.js → dropdown-irp18txvgz8590e9.js} +27 -27
- package/dist/chunks/{dropdown-g4sb4cw9ffqaw5gx.js.map → dropdown-irp18txvgz8590e9.js.map} +1 -1
- package/dist/chunks/{empty-n17inn1z67bpohkw.js → empty-daa6d7u9oleaw24a.js} +2 -2
- package/dist/chunks/{empty-n17inn1z67bpohkw.js.map → empty-daa6d7u9oleaw24a.js.map} +1 -1
- package/dist/chunks/{field-c8o7h3rlam4c9pcx.js → field-f1hy08um3jf9jos6.js} +3 -3
- package/dist/chunks/{field-c8o7h3rlam4c9pcx.js.map → field-f1hy08um3jf9jos6.js.map} +1 -1
- package/dist/chunks/{input-area-eurk3seud30ricwn.js → input-area-bwyujceeulpfkpxv.js} +4 -4
- package/dist/chunks/{input-area-eurk3seud30ricwn.js.map → input-area-bwyujceeulpfkpxv.js.map} +1 -1
- package/dist/chunks/{input-en8hhb14mmt3tfwn.js → input-f2ct7obgdzypjmp2.js} +3 -3
- package/dist/chunks/{input-en8hhb14mmt3tfwn.js.map → input-f2ct7obgdzypjmp2.js.map} +1 -1
- package/dist/chunks/{input-group-d09ocmjcbdai0gze.js → input-group-kcd3jin5pbdijmw8.js} +5 -5
- package/dist/chunks/{input-group-d09ocmjcbdai0gze.js.map → input-group-kcd3jin5pbdijmw8.js.map} +1 -1
- package/dist/chunks/{label-c8rz453pti66slki.js → label-himqjkdhh0hgfdsa.js} +3 -3
- package/dist/chunks/{label-c8rz453pti66slki.js.map → label-himqjkdhh0hgfdsa.js.map} +1 -1
- package/dist/chunks/{layer-card-er4flkcxmzfug8jw.js → layer-card-cshi5vydqg3phyfx.js} +2 -2
- package/dist/chunks/{layer-card-er4flkcxmzfug8jw.js.map → layer-card-cshi5vydqg3phyfx.js.map} +1 -1
- package/dist/chunks/{link-i6vnwyjcwvjz5btm.js → link-bw21ofmgg58igq5n.js} +4 -4
- package/dist/chunks/{link-i6vnwyjcwvjz5btm.js.map → link-bw21ofmgg58igq5n.js.map} +1 -1
- package/dist/chunks/{menubar-ng5if56amh1tto4j.js → menubar-m12wcbbucuszspw4.js} +2 -2
- package/dist/chunks/{menubar-ng5if56amh1tto4j.js.map → menubar-m12wcbbucuszspw4.js.map} +1 -1
- package/dist/chunks/{meter-d5igshkjqttl1fdj.js → meter-dn8vgc0smpk0du75.js} +4 -4
- package/dist/chunks/{meter-d5igshkjqttl1fdj.js.map → meter-dn8vgc0smpk0du75.js.map} +1 -1
- package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js → pagination-oafyxvdndm9m8250.js} +3 -3
- package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js.map → pagination-oafyxvdndm9m8250.js.map} +1 -1
- package/dist/chunks/{popover-ozf1j7oi7pxiudyz.js → popover-bbxr39l1lx175hum.js} +18 -18
- package/dist/chunks/{popover-ozf1j7oi7pxiudyz.js.map → popover-bbxr39l1lx175hum.js.map} +1 -1
- package/dist/chunks/radio-ffx05ih9nc764evh.js +226 -0
- package/dist/chunks/radio-ffx05ih9nc764evh.js.map +1 -0
- package/dist/chunks/{select-dw9iw35ug7yer3o3.js → select-kl1skfh3pmwc33rp.js} +6 -6
- package/dist/chunks/{select-dw9iw35ug7yer3o3.js.map → select-kl1skfh3pmwc33rp.js.map} +1 -1
- package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js → sensitive-input-izmbyk1t7r56ciiq.js} +4 -4
- package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js.map → sensitive-input-izmbyk1t7r56ciiq.js.map} +1 -1
- package/dist/chunks/{sidebar-nbdw4rgvuabxp5nj.js → sidebar-ior8rnhsd7gy5am5.js} +49 -49
- package/dist/chunks/sidebar-ior8rnhsd7gy5am5.js.map +1 -0
- package/dist/chunks/{surface-iyejjbqogjbo7ise.js → surface-g5a1buofz4erjov2.js} +2 -2
- package/dist/chunks/{surface-iyejjbqogjbo7ise.js.map → surface-g5a1buofz4erjov2.js.map} +1 -1
- package/dist/chunks/{switch-g8f77h69h34xld06.js → switch-kh8a6l3l0hszm9h4.js} +3 -3
- package/dist/chunks/{switch-g8f77h69h34xld06.js.map → switch-kh8a6l3l0hszm9h4.js.map} +1 -1
- package/dist/chunks/{table-e1te1im2tt2ez05y.js → table-dz2k55oab66h2vi9.js} +2 -2
- package/dist/chunks/{table-e1te1im2tt2ez05y.js.map → table-dz2k55oab66h2vi9.js.map} +1 -1
- package/dist/chunks/{tabs-ho9t1gkq22jb855l.js → tabs-kcw98wibdz4mhpkc.js} +2 -2
- package/dist/chunks/{tabs-ho9t1gkq22jb855l.js.map → tabs-kcw98wibdz4mhpkc.js.map} +1 -1
- package/dist/chunks/{toast-kvbgct0jvfmn4mas.js → toast-dkdo1lu72tnefya6.js} +7 -7
- package/dist/chunks/{toast-kvbgct0jvfmn4mas.js.map → toast-dkdo1lu72tnefya6.js.map} +1 -1
- package/dist/chunks/toolbar-o7xe6pd189evdd53.js +172 -0
- package/dist/chunks/toolbar-o7xe6pd189evdd53.js.map +1 -0
- package/dist/chunks/{tooltip-ken77ixya0qpidie.js → tooltip-eqnhjdbvwapy8gj4.js} +4 -4
- package/dist/chunks/{tooltip-ken77ixya0qpidie.js.map → tooltip-eqnhjdbvwapy8gj4.js.map} +1 -1
- package/dist/chunks/{vendor-base-ui-knphx7dts1vm1x37.js → vendor-base-ui-f9z44m829vvptrg0.js} +2209 -2207
- package/dist/chunks/{vendor-base-ui-knphx7dts1vm1x37.js.map → vendor-base-ui-f9z44m829vvptrg0.js.map} +1 -1
- package/dist/code.js +1 -1
- package/dist/components/autocomplete.js +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/collapsible.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input-group.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/layer-card.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/surface.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/toolbar.js +8 -0
- package/dist/components/toolbar.js.map +1 -0
- package/dist/components/tooltip.js +1 -1
- package/dist/index.js +199 -195
- package/dist/index.js.map +1 -1
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/csp-provider.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/drawer.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/otp-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/scripts/theme-generator/config.d.ts.map +1 -1
- package/dist/scripts/theme-generator/config.js +13 -2
- package/dist/scripts/theme-generator/config.js.map +1 -1
- package/dist/src/components/button/button.d.ts +5 -5
- package/dist/src/components/button/button.d.ts.map +1 -1
- package/dist/src/components/chart/EChart.d.ts +12 -4
- package/dist/src/components/chart/EChart.d.ts.map +1 -1
- package/dist/src/components/chart/Legend.d.ts +11 -2
- package/dist/src/components/chart/Legend.d.ts.map +1 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts +15 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
- package/dist/src/components/radio/index.d.ts +1 -1
- package/dist/src/components/radio/index.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts +49 -10
- package/dist/src/components/radio/radio.d.ts.map +1 -1
- package/dist/src/components/radio/radio.type-spec.d.ts +12 -0
- package/dist/src/components/radio/radio.type-spec.d.ts.map +1 -0
- package/dist/src/components/toolbar/index.d.ts +2 -0
- package/dist/src/components/toolbar/index.d.ts.map +1 -0
- package/dist/src/components/toolbar/toolbar.d.ts +50 -0
- package/dist/src/components/toolbar/toolbar.d.ts.map +1 -0
- package/dist/src/index.d.ts +2 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/theme-kumo.css +11 -4
- package/package.json +5 -1
- package/scripts/component-registry/discovery.ts +16 -11
- package/scripts/component-registry/metadata.ts +30 -0
- package/scripts/theme-generator/config.ts +14 -2
- package/dist/chunks/SankeyChart-i1m7zv0lys3j0iq6.js +0 -775
- package/dist/chunks/SankeyChart-i1m7zv0lys3j0iq6.js.map +0 -1
- package/dist/chunks/button-mnrxu6dud2x5js5b.js +0 -210
- package/dist/chunks/button-mnrxu6dud2x5js5b.js.map +0 -1
- package/dist/chunks/radio-gpg6kmzonr2cayq1.js +0 -218
- package/dist/chunks/radio-gpg6kmzonr2cayq1.js.map +0 -1
- package/dist/chunks/sidebar-nbdw4rgvuabxp5nj.js.map +0 -1
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as e, jsxs as p } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as I, createContext as C, useContext as G } from "react";
|
|
4
|
-
import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
import { r as x } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
|
|
6
|
-
import { R as L, U as O, Q as w, bu as v, bv as R } from "./vendor-base-ui-knphx7dts1vm1x37.js";
|
|
7
|
-
const N = {
|
|
8
|
-
variant: {
|
|
9
|
-
default: {
|
|
10
|
-
classes: "ring-kumo-hairline",
|
|
11
|
-
description: "Default radio appearance"
|
|
12
|
-
},
|
|
13
|
-
error: {
|
|
14
|
-
classes: "ring-kumo-danger",
|
|
15
|
-
description: "Error state for validation failures"
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
appearance: {
|
|
19
|
-
default: {
|
|
20
|
-
classes: "",
|
|
21
|
-
description: "Standard inline radio item"
|
|
22
|
-
},
|
|
23
|
-
card: {
|
|
24
|
-
classes: "rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint",
|
|
25
|
-
description: "Choice card appearance with border, padding, and highlighted selection state"
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}, f = {
|
|
29
|
-
variant: "default",
|
|
30
|
-
appearance: "default"
|
|
31
|
-
};
|
|
32
|
-
function P({
|
|
33
|
-
variant: t = f.variant,
|
|
34
|
-
appearance: a = f.appearance
|
|
35
|
-
} = {}) {
|
|
36
|
-
return r(
|
|
37
|
-
x(N.variant, t, f.variant).classes,
|
|
38
|
-
x(N.appearance, a, f.appearance).classes
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
const y = C({
|
|
42
|
-
controlPosition: void 0,
|
|
43
|
-
appearance: "default"
|
|
44
|
-
}), A = I(
|
|
45
|
-
({
|
|
46
|
-
className: t,
|
|
47
|
-
disabled: a,
|
|
48
|
-
variant: o = "default",
|
|
49
|
-
appearance: s,
|
|
50
|
-
label: n,
|
|
51
|
-
description: i,
|
|
52
|
-
value: c
|
|
53
|
-
}, l) => {
|
|
54
|
-
const { controlPosition: g, appearance: u } = G(y), d = (s ?? u) === "card", m = g ?? (d ? "end" : "start");
|
|
55
|
-
return d ? /* @__PURE__ */ p(
|
|
56
|
-
"label",
|
|
57
|
-
{
|
|
58
|
-
"data-kumo-component": "Radio",
|
|
59
|
-
"data-kumo-part": "item-label",
|
|
60
|
-
className: r(
|
|
61
|
-
"m-0 group relative flex items-start gap-3 rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint",
|
|
62
|
-
m === "start" && "flex-row-reverse",
|
|
63
|
-
o === "error" && "border-kumo-danger has-[[data-checked]]:border-kumo-danger has-[[data-checked]]:bg-kumo-base",
|
|
64
|
-
a ? "cursor-not-allowed opacity-50" : r(
|
|
65
|
-
"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 cursor-pointer",
|
|
66
|
-
o !== "error" && "hover:not-has-[[data-disabled]]:bg-kumo-tint"
|
|
67
|
-
),
|
|
68
|
-
t
|
|
69
|
-
),
|
|
70
|
-
children: [
|
|
71
|
-
/* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
72
|
-
/* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: n }),
|
|
73
|
-
i && /* @__PURE__ */ e("span", { className: "text-sm text-kumo-subtle", children: i })
|
|
74
|
-
] }),
|
|
75
|
-
/* @__PURE__ */ e(
|
|
76
|
-
v,
|
|
77
|
-
{
|
|
78
|
-
ref: l,
|
|
79
|
-
"data-kumo-component": "Radio",
|
|
80
|
-
"data-kumo-part": "item",
|
|
81
|
-
value: c,
|
|
82
|
-
disabled: a,
|
|
83
|
-
className: r(
|
|
84
|
-
"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring ring-2 focus:outline-none focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand",
|
|
85
|
-
o === "error" ? "ring-kumo-danger" : "ring-kumo-line",
|
|
86
|
-
!a && o !== "error" && "group-hover:ring-kumo-hairline focus-visible:outline-offset-3",
|
|
87
|
-
!a && o === "error" && "focus-visible:outline-offset-3",
|
|
88
|
-
"data-[checked]:bg-kumo-contrast"
|
|
89
|
-
),
|
|
90
|
-
children: /* @__PURE__ */ e(
|
|
91
|
-
R,
|
|
92
|
-
{
|
|
93
|
-
keepMounted: !0,
|
|
94
|
-
className: "flex items-center justify-center",
|
|
95
|
-
children: /* @__PURE__ */ e("span", { className: "h-2 w-2 rounded-full bg-kumo-base" })
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
]
|
|
101
|
-
}
|
|
102
|
-
) : /* @__PURE__ */ p(
|
|
103
|
-
"label",
|
|
104
|
-
{
|
|
105
|
-
"data-kumo-component": "Radio",
|
|
106
|
-
"data-kumo-part": "item-label",
|
|
107
|
-
className: r(
|
|
108
|
-
"m-0 group relative inline-flex items-start gap-2",
|
|
109
|
-
// "start" (default): radio before label
|
|
110
|
-
// "end": label before radio using flex-row-reverse
|
|
111
|
-
m === "end" && "flex-row-reverse justify-end",
|
|
112
|
-
a ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
113
|
-
t
|
|
114
|
-
),
|
|
115
|
-
children: [
|
|
116
|
-
/* @__PURE__ */ e(
|
|
117
|
-
v,
|
|
118
|
-
{
|
|
119
|
-
ref: l,
|
|
120
|
-
"data-kumo-component": "Radio",
|
|
121
|
-
"data-kumo-part": "item",
|
|
122
|
-
value: c,
|
|
123
|
-
disabled: a,
|
|
124
|
-
className: r(
|
|
125
|
-
"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2",
|
|
126
|
-
o === "error" ? "ring-kumo-danger" : "ring-kumo-line",
|
|
127
|
-
!a && o !== "error" && "group-hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:outline-offset-3",
|
|
128
|
-
!a && o === "error" && "focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:outline-offset-3",
|
|
129
|
-
"data-[checked]:bg-kumo-contrast"
|
|
130
|
-
),
|
|
131
|
-
children: /* @__PURE__ */ e(
|
|
132
|
-
R,
|
|
133
|
-
{
|
|
134
|
-
keepMounted: !0,
|
|
135
|
-
className: "flex items-center justify-center",
|
|
136
|
-
children: /* @__PURE__ */ e("span", { className: "h-2 w-2 rounded-full bg-kumo-base" })
|
|
137
|
-
}
|
|
138
|
-
)
|
|
139
|
-
}
|
|
140
|
-
),
|
|
141
|
-
/* @__PURE__ */ e("span", { className: "text-base text-kumo-default", children: n })
|
|
142
|
-
]
|
|
143
|
-
}
|
|
144
|
-
);
|
|
145
|
-
}
|
|
146
|
-
);
|
|
147
|
-
A.displayName = "Radio.Item";
|
|
148
|
-
function j({ children: t, className: a }) {
|
|
149
|
-
return /* @__PURE__ */ e(
|
|
150
|
-
w,
|
|
151
|
-
{
|
|
152
|
-
className: r("text-base font-medium text-kumo-default", a),
|
|
153
|
-
children: t
|
|
154
|
-
}
|
|
155
|
-
);
|
|
156
|
-
}
|
|
157
|
-
j.displayName = "Radio.Legend";
|
|
158
|
-
function k({
|
|
159
|
-
legend: t,
|
|
160
|
-
children: a,
|
|
161
|
-
orientation: o = "vertical",
|
|
162
|
-
appearance: s = "default",
|
|
163
|
-
error: n,
|
|
164
|
-
description: i,
|
|
165
|
-
defaultValue: c,
|
|
166
|
-
value: l,
|
|
167
|
-
onValueChange: g,
|
|
168
|
-
disabled: u,
|
|
169
|
-
controlPosition: h,
|
|
170
|
-
name: d,
|
|
171
|
-
className: m
|
|
172
|
-
}) {
|
|
173
|
-
return /* @__PURE__ */ e(y.Provider, { value: { controlPosition: h, appearance: s }, children: /* @__PURE__ */ e(
|
|
174
|
-
L,
|
|
175
|
-
{
|
|
176
|
-
defaultValue: c,
|
|
177
|
-
value: l,
|
|
178
|
-
onValueChange: (b) => g?.(b),
|
|
179
|
-
disabled: u,
|
|
180
|
-
name: d,
|
|
181
|
-
children: /* @__PURE__ */ p(
|
|
182
|
-
O,
|
|
183
|
-
{
|
|
184
|
-
disabled: u,
|
|
185
|
-
className: r("flex flex-col gap-4", m),
|
|
186
|
-
children: [
|
|
187
|
-
t && /* @__PURE__ */ e(w, { className: "text-base font-medium text-kumo-default", children: t }),
|
|
188
|
-
/* @__PURE__ */ e(
|
|
189
|
-
"div",
|
|
190
|
-
{
|
|
191
|
-
className: r(
|
|
192
|
-
o === "vertical" ? r("flex flex-col", s === "card" ? "gap-3" : "gap-2") : s === "card" ? "grid grid-cols-2 gap-3" : "flex flex-row flex-wrap gap-2"
|
|
193
|
-
),
|
|
194
|
-
children: a
|
|
195
|
-
}
|
|
196
|
-
),
|
|
197
|
-
n && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: n }),
|
|
198
|
-
i && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: i })
|
|
199
|
-
]
|
|
200
|
-
}
|
|
201
|
-
)
|
|
202
|
-
}
|
|
203
|
-
) });
|
|
204
|
-
}
|
|
205
|
-
k.displayName = "Radio.Group";
|
|
206
|
-
const U = Object.assign(k, {
|
|
207
|
-
Item: A,
|
|
208
|
-
Group: k,
|
|
209
|
-
Legend: j
|
|
210
|
-
});
|
|
211
|
-
export {
|
|
212
|
-
N as K,
|
|
213
|
-
U as R,
|
|
214
|
-
k as a,
|
|
215
|
-
f as b,
|
|
216
|
-
P as r
|
|
217
|
-
};
|
|
218
|
-
//# sourceMappingURL=radio-gpg6kmzonr2cayq1.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"radio-gpg6kmzonr2cayq1.js","sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_RADIO_VARIANTS = {\n variant: {\n default: {\n classes: \"ring-kumo-hairline\",\n description: \"Default radio appearance\",\n },\n error: {\n classes: \"ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n appearance: {\n default: {\n classes: \"\",\n description: \"Standard inline radio item\",\n },\n card: {\n classes:\n \"rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n description:\n \"Choice card appearance with border, padding, and highlighted selection state\",\n },\n },\n} as const;\n\nexport const KUMO_RADIO_DEFAULT_VARIANTS = {\n variant: \"default\",\n appearance: \"default\",\n} as const;\n\n// Derived types from KUMO_RADIO_VARIANTS\nexport type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;\nexport type KumoRadioAppearance = keyof typeof KUMO_RADIO_VARIANTS.appearance;\n\nexport interface KumoRadioVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard radio appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoRadioVariant;\n /**\n * Visual appearance.\n * - `\"default\"` — Standard inline radio item\n * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n * @default \"default\"\n */\n appearance?: KumoRadioAppearance;\n}\n\nexport function radioVariants({\n variant = KUMO_RADIO_DEFAULT_VARIANTS.variant,\n appearance = KUMO_RADIO_DEFAULT_VARIANTS.appearance,\n}: KumoRadioVariantsProps = {}) {\n return cn(\n resolveVariant(KUMO_RADIO_VARIANTS.variant, variant, KUMO_RADIO_DEFAULT_VARIANTS.variant).classes,\n resolveVariant(KUMO_RADIO_VARIANTS.appearance, appearance, KUMO_RADIO_DEFAULT_VARIANTS.appearance).classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = KumoRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition and appearance from Group to Items.\n// `controlPosition` may be undefined so each item can fall back to an\n// appearance-appropriate default (start for default, end for card).\nconst RadioGroupContext = createContext<{\n controlPosition: RadioControlPosition | undefined;\n appearance: KumoRadioAppearance;\n}>({\n controlPosition: undefined,\n appearance: \"default\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n * <Radio.Item label=\"Small\" value=\"sm\" />\n * <Radio.Item label=\"Medium\" value=\"md\" />\n * <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n * legend=\"Payment method\"\n * error=\"Please select a payment method\"\n * description=\"Choose how you'd like to pay\"\n * >\n * <Radio.Item label=\"Credit Card\" value=\"card\" />\n * <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\n/**\n * Props for Radio.Legend — a composable sub-component for labeling a Radio.Group.\n *\n * Place as a direct child of `<Radio.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Radio.Group>\n * <Radio.Legend className=\"sr-only\">Paths</Radio.Legend>\n * <Radio.Item label=\"Allow all paths\" value=\"all\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioLegendProps {\n /** Legend content */\n children: ReactNode;\n /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n className?: string;\n}\n\nexport interface RadioGroupProps {\n /**\n * Legend text for the group (required for accessibility).\n * For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead.\n */\n legend?: string;\n /** Child Radio.Item components (and optionally a Radio.Legend) */\n children: ReactNode;\n /** Layout direction of the radio items */\n orientation?: \"vertical\" | \"horizontal\";\n /**\n * Visual appearance applied to all Radio.Item children.\n * - `\"default\"` — Standard inline radio items\n * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n *\n * Individual items can override this with their own `appearance` prop.\n * @default \"default\"\n */\n appearance?: KumoRadioAppearance;\n /** Error message for the group */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Value of the radio that should be initially selected (uncontrolled) */\n defaultValue?: string;\n /** Value of the radio that should be selected (controlled) */\n value?: string;\n /** Event handler called when radio value changes */\n onValueChange?: (value: string) => void;\n /** Whether all radios in the group are disabled */\n disabled?: boolean;\n /** Position of radio control relative to label: \"start\" puts radio before label, \"end\" puts label before radio. Defaults to \"start\" for default appearance and \"end\" for card appearance. */\n controlPosition?: RadioControlPosition;\n /** Form submission name for the radio group */\n name?: string;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: RadioVariant;\n /**\n * Visual appearance of the radio item.\n * - `\"default\"` — Standard inline radio item\n * - `\"card\"` — Choice card with border, padding, and highlighted selection state\n *\n * When set on an individual item, overrides the group-level `appearance`.\n * @default \"default\"\n */\n appearance?: KumoRadioAppearance;\n /** Label content displayed next to radio (required). Accepts strings or React nodes for rich content. */\n label: ReactNode;\n /** Description text displayed below the label (only visible in card appearance) */\n description?: ReactNode;\n /** Value of the radio (required) */\n value: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n /** Whether the radio is disabled */\n disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n (\n {\n className,\n disabled,\n variant = \"default\",\n appearance: appearanceProp,\n label,\n description,\n value,\n },\n ref,\n ) => {\n const { controlPosition, appearance: groupAppearance } =\n useContext(RadioGroupContext);\n const appearance = appearanceProp ?? groupAppearance;\n const isCard = appearance === \"card\";\n\n // Fall back to an appearance-appropriate default when controlPosition is\n // not provided: card defaults to \"end\" (radio on the right), default\n // appearance defaults to \"start\" (radio on the left).\n const effectiveControlPosition: RadioControlPosition =\n controlPosition ?? (isCard ? \"end\" : \"start\");\n\n if (isCard) {\n const controlAtStart = effectiveControlPosition === \"start\";\n return (\n <label\n data-kumo-component=\"Radio\"\n data-kumo-part=\"item-label\"\n className={cn(\n \"m-0 group relative flex items-start gap-3 rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint\",\n controlAtStart && \"flex-row-reverse\",\n variant === \"error\" &&\n \"border-kumo-danger has-[[data-checked]]:border-kumo-danger has-[[data-checked]]:bg-kumo-base\",\n disabled\n ? \"cursor-not-allowed opacity-50\"\n : cn(\n \"has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50 cursor-pointer\",\n variant !== \"error\" &&\n \"hover:not-has-[[data-disabled]]:bg-kumo-tint\",\n ),\n className,\n )}\n >\n <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <span className=\"text-base font-medium text-kumo-default\">\n {label}\n </span>\n {description && (\n <span className=\"text-sm text-kumo-subtle\">{description}</span>\n )}\n </div>\n <BaseRadio.Root\n ref={ref}\n data-kumo-component=\"Radio\"\n data-kumo-part=\"item\"\n value={value}\n disabled={disabled}\n className={cn(\n \"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring ring-2 focus:outline-none focus:ring-kumo-focus focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n variant !== \"error\" &&\n \"group-hover:ring-kumo-hairline focus-visible:outline-offset-3\",\n !disabled &&\n variant === \"error\" &&\n \"focus-visible:outline-offset-3\",\n \"data-[checked]:bg-kumo-contrast\",\n )}\n >\n <BaseRadio.Indicator\n keepMounted\n className=\"flex items-center justify-center\"\n >\n <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n </BaseRadio.Indicator>\n </BaseRadio.Root>\n </label>\n );\n }\n\n return (\n <label\n data-kumo-component=\"Radio\"\n data-kumo-part=\"item-label\"\n className={cn(\n \"m-0 group relative inline-flex items-start gap-2\",\n // \"start\" (default): radio before label\n // \"end\": label before radio using flex-row-reverse\n effectiveControlPosition === \"end\" && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseRadio.Root\n ref={ref}\n data-kumo-component=\"Radio\"\n data-kumo-part=\"item\"\n value={value}\n disabled={disabled}\n className={cn(\n \"relative mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n variant !== \"error\" &&\n \"group-hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:outline-offset-3\",\n !disabled &&\n variant === \"error\" &&\n \"focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand focus-visible:outline-offset-3\",\n \"data-[checked]:bg-kumo-contrast\",\n )}\n >\n <BaseRadio.Indicator\n keepMounted\n className=\"flex items-center justify-center\"\n >\n <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n </BaseRadio.Indicator>\n </BaseRadio.Root>\n <span className=\"text-base text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Legend — composable legend sub-component for Radio.Group\nfunction RadioLegend({ children, className }: RadioLegendProps) {\n return (\n <Fieldset.Legend\n className={cn(\"text-base font-medium text-kumo-default\", className)}\n >\n {children}\n </Fieldset.Legend>\n );\n}\n\nRadioLegend.displayName = \"Radio.Legend\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n legend,\n children,\n orientation = \"vertical\",\n appearance = \"default\",\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n disabled,\n controlPosition,\n name,\n className,\n}: RadioGroupProps) {\n return (\n <RadioGroupContext.Provider value={{ controlPosition, appearance }}>\n <BaseRadioGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={(newValue) => onValueChange?.(newValue)}\n disabled={disabled}\n name={name}\n >\n <Fieldset.Root\n disabled={disabled}\n className={cn(\"flex flex-col gap-4\", className)}\n >\n {legend && (\n <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n )}\n <div\n className={cn(\n orientation === \"vertical\"\n ? cn(\"flex flex-col\", appearance === \"card\" ? \"gap-3\" : \"gap-2\")\n : appearance === \"card\"\n ? \"grid grid-cols-2 gap-3\"\n : \"flex flex-row flex-wrap gap-2\",\n )}\n >\n {children}\n </div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseRadioGroup>\n </RadioGroupContext.Provider>\n );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset), `Radio.Item`, and `Radio.Legend`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * // Simple: legend as a string prop\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n *\n * // Composable: Radio.Legend for full styling control (e.g. visually hidden)\n * <Radio.Group defaultValue=\"email\">\n * <Radio.Legend className=\"sr-only\">Notification preference</Radio.Legend>\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = Object.assign(RadioGroup, {\n Item: RadioItem,\n Group: RadioGroup,\n Legend: RadioLegend,\n});\n"],"names":["KUMO_RADIO_VARIANTS","KUMO_RADIO_DEFAULT_VARIANTS","radioVariants","variant","appearance","cn","resolveVariant","RadioGroupContext","createContext","RadioItem","forwardRef","className","disabled","appearanceProp","label","description","value","ref","controlPosition","groupAppearance","useContext","isCard","effectiveControlPosition","jsxs","jsx","BaseRadio.Root","BaseRadio.Indicator","RadioLegend","children","Fieldset.Legend","RadioGroup","legend","orientation","error","defaultValue","onValueChange","name","BaseRadioGroup","newValue","Fieldset.Root","Radio"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-nbdw4rgvuabxp5nj.js","sources":["../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import React, {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { ScrollArea as ScrollAreaBase } from \"@base-ui/react/scroll-area\";\n\nimport { CaretRightIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by Kumo convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const KUMO_SIDEBAR_VARIANTS = {\n variant: {\n sidebar: {\n classes: \"\",\n description: \"Standard sidebar with border separator\",\n },\n floating: {\n classes: \"\",\n description: \"Floating sidebar with shadow and rounded corners\",\n },\n inset: {\n classes: \"\",\n description: \"Inset sidebar within the content area\",\n },\n },\n collapsible: {\n icon: {\n classes: \"\",\n description: \"Collapses to show icons only\",\n },\n offcanvas: {\n classes: \"\",\n description: \"Slides off screen when collapsed\",\n },\n none: {\n classes: \"\",\n description: \"Cannot be collapsed\",\n },\n },\n side: {\n left: {\n classes: \"\",\n description: \"Left-aligned sidebar\",\n },\n right: {\n classes: \"\",\n description: \"Right-aligned sidebar\",\n },\n },\n} as const;\n\nexport const KUMO_SIDEBAR_DEFAULT_VARIANTS = {\n variant: \"sidebar\",\n collapsible: \"icon\",\n side: \"left\",\n} as const;\n\nexport const KUMO_SIDEBAR_STYLING = {\n width: {\n expanded: \"16.25rem\",\n icon: \"57px\",\n },\n mobile: {\n breakpoint: 768,\n },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16.25rem\";\nconst SIDEBAR_WIDTH_ICON = \"57px\";\nconst SIDEBAR_EASING = \"cubic-bezier(0.77, 0, 0.175, 1)\";\nconst SIDEBAR_ANIMATION_DURATION_MS = 250;\nconst MOBILE_BREAKPOINT = 768;\nconst FOCUSABLE_SELECTOR =\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile(breakpoint: number = MOBILE_BREAKPOINT) {\n const [isMobile, setIsMobile] = useState(() => {\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;\n });\n\n useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);\n const onChange = () => setIsMobile(mql.matches);\n mql.addEventListener(\"change\", onChange);\n setIsMobile(mql.matches);\n return () => mql.removeEventListener(\"change\", onChange);\n }, [breakpoint]);\n\n return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport type SidebarState = \"expanded\" | \"collapsed\" | \"peeking\";\n\nexport interface SidebarContextValue {\n state: SidebarState;\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n variant: \"sidebar\" | \"floating\" | \"inset\";\n side: \"left\" | \"right\";\n collapsible: \"icon\" | \"offcanvas\" | \"none\";\n width: number;\n resizable: boolean;\n minWidth: number;\n maxWidth: number;\n isResizing: boolean;\n setIsResizing: (resizing: boolean) => void;\n setWidth: (width: number) => void;\n isPeeking: boolean;\n peekable: boolean;\n startPeek: () => void;\n stopPeek: () => void;\n contained: boolean;\n animationDuration: number;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n }\n return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n /** Initial open state when uncontrolled. @default true */\n defaultOpen?: boolean;\n /** Controlled open state. */\n open?: boolean;\n /** Callback when open state changes (controlled mode). */\n onOpenChange?: (open: boolean) => void;\n /** Sidebar layout variant. @default \"sidebar\" */\n variant?: SidebarVariant;\n /** Which side the sidebar is on. @default \"left\" */\n side?: SidebarSide;\n collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n /** Enable drag-to-resize on the sidebar edge. @default false */\n resizable?: boolean;\n /** Initial width in pixels when resizable. @default 256 */\n defaultWidth?: number;\n /** Minimum width in pixels when resizing. @default 200 */\n minWidth?: number;\n /** Maximum width in pixels when resizing. @default 480 */\n maxWidth?: number;\n /** Callback when width changes during resize. */\n onWidthChange?: (width: number) => void;\n /**\n * When true, the collapsed sidebar uses absolute positioning instead of fixed,\n * keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars.\n * @default false\n */\n contained?: boolean;\n /**\n * When true, hovering or focusing the collapsed sidebar temporarily expands it.\n * The `state` will be `\"peeking\"` during the peek. Moving away collapses it back.\n * @default false\n */\n peekable?: boolean;\n /**\n * Duration of sidebar expand/collapse animation in milliseconds.\n * @default 250\n */\n animationDuration?: number;\n /**\n * Viewport width (in px) below which the sidebar renders as a mobile dialog\n * sheet instead of the desktop aside rail.\n * @default 768\n */\n mobileBreakpoint?: number;\n /** Content — typically `<Sidebar>` + main content. */\n children: ReactNode;\n /** Additional CSS classes for the wrapper div. */\n className?: string;\n /** Inline styles for the wrapper div. */\n style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>{...}</Sidebar>\n * <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n variant = KUMO_SIDEBAR_DEFAULT_VARIANTS.variant,\n side = KUMO_SIDEBAR_DEFAULT_VARIANTS.side,\n collapsible = KUMO_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n resizable = false,\n defaultWidth = DEFAULT_WIDTH_PX,\n minWidth = MIN_WIDTH_PX,\n maxWidth = MAX_WIDTH_PX,\n onWidthChange,\n contained = false,\n peekable = false,\n animationDuration = SIDEBAR_ANIMATION_DURATION_MS,\n mobileBreakpoint,\n children,\n className,\n style,\n}: SidebarProviderProps) {\n const isMobile = useIsMobile(mobileBreakpoint);\n const [_openMobile, _setOpenMobile] = useState(false);\n const [width, setWidthState] = useState(defaultWidth);\n const [isResizing, setIsResizing] = useState(false);\n const [isPeeking, setIsPeeking] = useState(false);\n\n // When controlled (`openProp` provided), use it directly for mobile too.\n // When uncontrolled, use internal `_openMobile` state.\n const openMobile =\n isMobile && openProp !== undefined ? openProp : _openMobile;\n\n const setOpenMobile = useCallback(\n (next: boolean) => {\n _setOpenMobile(next);\n // In controlled mode on mobile, notify the consumer\n if (isMobile && openProp !== undefined) {\n setOpenProp?.(next);\n }\n },\n [isMobile, openProp, setOpenProp],\n );\n\n const setWidth = useCallback(\n (newWidth: number) => {\n const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n setWidthState(clamped);\n onWidthChange?.(clamped);\n },\n [minWidth, maxWidth, onWidthChange],\n );\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((prev: boolean) => boolean)) => {\n const next = typeof value === \"function\" ? value(open) : value;\n setOpenProp?.(next);\n _setOpen(next);\n },\n [setOpenProp, open],\n );\n\n const toggleSidebar = useCallback(() => {\n if (isMobile) {\n setOpenMobile(!openMobile);\n } else {\n setIsPeeking(false);\n setOpen((prev: boolean) => !prev);\n }\n }, [isMobile, openMobile, setOpenMobile, setOpen]);\n\n const startPeek = useCallback(() => {\n if (peekable && !open && !isMobile) {\n setIsPeeking(true);\n }\n }, [peekable, open, isMobile]);\n\n const stopPeek = useCallback(() => {\n setIsPeeking(false);\n }, []);\n\n const state: SidebarState = isPeeking\n ? \"peeking\"\n : open\n ? \"expanded\"\n : \"collapsed\";\n\n const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n // eslint-disable-next-line react-hooks/exhaustive-deps -- all values are\n // either stable (props, setters) or derived from state that triggers re-render\n const contextValue = useMemo<SidebarContextValue>(\n () => ({\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n variant,\n side,\n collapsible,\n width,\n resizable,\n minWidth,\n maxWidth,\n isResizing,\n setIsResizing,\n setWidth,\n isPeeking,\n peekable,\n startPeek,\n stopPeek,\n contained,\n animationDuration,\n }),\n [state, open, openMobile, isMobile, width, isResizing, isPeeking],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-sidebar-wrapper=\"\"\n data-state={state}\n data-side={side}\n style={\n {\n \"--sidebar-width\": sidebarWidthValue,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n \"--sidebar-animation-duration\": `${animationDuration}ms`,\n \"--sidebar-easing\": SIDEBAR_EASING,\n ...style,\n } as CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper relative isolate flex w-full [--sidebar-bg:var(--color-kumo-base)] [--sidebar-active-bg:var(--color-kumo-tint)]\",\n !contained && !isMobile && \"min-h-svh\",\n \"has-data-[variant=inset]:bg-kumo-recessed\",\n isResizing && \"select-none\",\n className,\n )}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n /** Additional CSS classes for the sidebar element. */\n className?: string;\n /** Additional CSS classes for the inner content container. */\n contentClassName?: string;\n /** Sidebar content — Header, Content, Footer, etc. */\n children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, modal sidebar sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n * <Sidebar>\n * <Sidebar.Header>...</Sidebar.Header>\n * <Sidebar.Content>...</Sidebar.Content>\n * <Sidebar.Footer>...</Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n ({ className, contentClassName, children, ...props }, ref) => {\n const {\n state,\n open,\n isMobile,\n openMobile,\n setOpenMobile,\n side,\n variant,\n collapsible,\n isResizing,\n resizable,\n width,\n isPeeking,\n startPeek,\n stopPeek,\n contained,\n } = useSidebar();\n\n // --- Mobile a11y hooks (must be before early returns) ---\n\n // Imperatively set inert on the mobile sidebar — React 18 doesn't\n // reliably forward the inert attribute as a JSX prop on initial mount.\n const mobileAsideRef = useCallback(\n (node: HTMLElement | null) => {\n if (node) {\n if (!openMobile) {\n node.setAttribute(\"inert\", \"\");\n } else {\n node.removeAttribute(\"inert\");\n }\n }\n },\n [openMobile],\n );\n\n // Merge forwarded ref with inert ref for the mobile aside\n const mergedMobileRef = useCallback(\n (node: HTMLElement | null) => {\n mobileAsideRef(node);\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n }\n },\n [ref, mobileAsideRef],\n );\n\n // Refs for mobile focus management (declared before effects that use them)\n const triggerRef = useRef<Element | null>(null);\n const mobileNodeRef = useRef<HTMLElement | null>(null);\n const shouldRestoreFocusRef = useRef(false);\n\n // Escape key and focus-leave close the mobile sidebar\n useEffect(() => {\n if (!isMobile || !openMobile) return;\n const node = mobileNodeRef.current;\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n shouldRestoreFocusRef.current = true;\n setOpenMobile(false);\n }\n };\n const handleFocusOut = (e: FocusEvent) => {\n if (node && !node.contains(e.relatedTarget as Node)) {\n shouldRestoreFocusRef.current = false;\n setOpenMobile(false);\n }\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n node?.addEventListener(\"focusout\", handleFocusOut);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n node?.removeEventListener(\"focusout\", handleFocusOut);\n };\n }, [isMobile, openMobile, setOpenMobile]);\n\n // When the mobile sidebar opens, move focus into it;\n // when it closes, return focus to the element that opened it.\n useEffect(() => {\n if (!isMobile) return;\n if (openMobile) {\n triggerRef.current = document.activeElement;\n shouldRestoreFocusRef.current = false;\n // Wait a frame so the aside is no longer inert before focusing\n requestAnimationFrame(() => {\n const firstFocusable = mobileNodeRef.current?.querySelector<HTMLElement>(\n FOCUSABLE_SELECTOR,\n );\n (firstFocusable ?? mobileNodeRef.current)?.focus();\n });\n } else if (\n shouldRestoreFocusRef.current &&\n triggerRef.current instanceof HTMLElement\n ) {\n triggerRef.current.focus();\n shouldRestoreFocusRef.current = false;\n triggerRef.current = null;\n }\n }, [isMobile, openMobile]);\n\n const handlePeekBlur = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n stopPeek();\n }\n },\n [stopPeek],\n );\n\n if (collapsible === \"none\") {\n return (\n <aside\n ref={ref}\n data-state=\"expanded\"\n data-side={side}\n data-variant={variant}\n data-sidebar=\"sidebar\"\n style={{\n width: \"var(--sidebar-width)\",\n minWidth: \"var(--sidebar-width)\",\n maxWidth: \"var(--sidebar-width)\",\n }}\n className={cn(\n \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-(--sidebar-bg) text-kumo-default\",\n variant === \"sidebar\" &&\n (side === \"left\"\n ? \"border-r border-kumo-line\"\n : \"border-l border-kumo-line\"),\n variant === \"floating\" &&\n \"m-2 rounded-lg border border-kumo-line shadow-lg\",\n className,\n )}\n {...props}\n >\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <>\n {/* Backdrop — click to close */}\n <div\n data-sidebar-backdrop=\"\"\n className={cn(\n contained ? \"absolute inset-0 z-40 bg-kumo-recessed\" : \"fixed inset-0 z-40 bg-kumo-recessed\",\n \"transition-opacity duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n openMobile ? \"opacity-80\" : \"opacity-0 pointer-events-none\",\n )}\n onClick={() => {\n shouldRestoreFocusRef.current = true;\n setOpenMobile(false);\n }}\n aria-hidden=\"true\"\n />\n\n {/* Mobile sidebar — navigation landmark with focus management */}\n <nav\n ref={(node) => {\n mergedMobileRef(node);\n mobileNodeRef.current = node;\n }}\n tabIndex={-1}\n aria-label=\"Navigation\"\n aria-hidden={!openMobile}\n data-state={openMobile ? \"expanded\" : \"collapsed\"}\n data-side={side}\n data-variant={variant}\n data-collapsible={collapsible}\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className={cn(\n contained\n ? \"group/sidebar absolute inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden\"\n : \"group/sidebar fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden\",\n \"border-r border-kumo-line bg-(--sidebar-bg) text-kumo-default\",\n \"transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n side === \"left\" && \"left-0\",\n side === \"right\" && \"right-0\",\n side === \"left\" &&\n (openMobile ? \"translate-x-0\" : \"-translate-x-full\"),\n side === \"right\" &&\n (openMobile ? \"translate-x-0\" : \"translate-x-full\"),\n className,\n )}\n {...props}\n >\n {children}\n </nav>\n </>\n );\n }\n\n // --- Desktop two-layer architecture ---\n // Rail: the <aside> whose width drives layout (stays collapsed during peek).\n // Content container: holds actual sidebar content, can overlay when peeking.\n\n // Rail width: based on open state only (not peeking)\n const collapsedWidth =\n collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n const railWidth = open ? expandedWidth : collapsedWidth;\n\n // Content container width: expanded during peek\n const contentExpanded = open || isPeeking;\n const contentWidth = contentExpanded ? expandedWidth : collapsedWidth;\n\n const borderClasses =\n variant === \"sidebar\"\n ? side === \"left\"\n ? \"border-r border-kumo-line\"\n : \"border-l border-kumo-line\"\n : variant === \"floating\"\n ? \"border border-kumo-line\"\n : \"\";\n\n return (\n <aside\n ref={ref}\n data-state={state}\n data-side={side}\n data-variant={variant}\n data-collapsible={collapsible}\n data-sidebar=\"sidebar\"\n style={{ width: railWidth }}\n className={cn(\n \"group/sidebar relative h-full shrink-0 grow-0\",\n \"overflow-visible\", // allow content container to overlay when peeking\n \"transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n isResizing && \"transition-none!\",\n variant === \"floating\" && \"m-2 rounded-lg shadow-lg\",\n className,\n )}\n {...props}\n >\n <TooltipProvider>\n {(() => {\n // Separate footer children from the rest so hovering the footer\n // doesn't trigger peeking. Footer is rendered outside the peek zone.\n const childArray = React.Children.toArray(children);\n const footerChildren = childArray.filter(\n (child) =>\n React.isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName ===\n \"Sidebar.Footer\",\n );\n const nonFooterChildren = childArray.filter(\n (child) =>\n !React.isValidElement(child) ||\n (child.type as { displayName?: string })?.displayName !==\n \"Sidebar.Footer\",\n );\n\n return (\n <div\n data-sidebar=\"content-container\"\n style={{ width: contentWidth }}\n className={cn(\n \"flex h-full flex-col\",\n \"min-w-0 overflow-hidden whitespace-nowrap\",\n \"bg-(--sidebar-bg) text-kumo-default\",\n borderClasses,\n \"transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n isResizing && \"transition-none!\",\n !open &&\n cn(\n contained ? \"absolute\" : \"fixed\",\n \"inset-y-0 z-40\",\n side === \"left\" && \"left-0\",\n side === \"right\" && \"right-0\",\n ),\n open && \"relative\",\n contentClassName,\n )}\n >\n {/* Peek zone — header + content (not footer) */}\n <div\n data-sidebar=\"peek-zone\"\n className=\"flex flex-1 flex-col min-h-0\"\n onMouseEnter={startPeek}\n onMouseLeave={stopPeek}\n onFocus={startPeek}\n onBlur={handlePeekBlur}\n >\n {nonFooterChildren}\n </div>\n {/* Footer — outside peek zone */}\n {footerChildren}\n </div>\n );\n })()}\n </TooltipProvider>\n </aside>\n );\n },\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n * <CloudflareLogo />\n * <span>Design Engineering</span>\n * <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"header\"\n className={cn(\n \"flex h-[58px] shrink-0 items-center gap-1 border-b border-kumo-line\",\n \"px-3 overflow-hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n * <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n <ScrollAreaBase.Root\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\"relative min-w-0 flex-1 overflow-hidden\", className)}\n {...props}\n >\n <ScrollAreaBase.Viewport\n tabIndex={-1}\n className={cn(\n \"h-full px-[11px] py-3 group-not-data-[state=collapsed]/sidebar:px-3.5\",\n \"transition-[padding] duration-(--sidebar-animation-duration)\",\n \"group-data-[state=collapsed]/sidebar:overflow-x-hidden!\",\n // Scroll fade via CSS mask driven by Base UI overflow CSS variables\n \"[mask-image:linear-gradient(to_bottom,transparent_0,black_min(24px,var(--scroll-area-overflow-y-start,24px)),black_calc(100%-min(24px,var(--scroll-area-overflow-y-end,24px))),transparent_100%)]\",\n )}\n >\n <ScrollAreaBase.Content className=\"flex min-w-0! flex-col\">\n {children}\n </ScrollAreaBase.Content>\n </ScrollAreaBase.Viewport>\n <ScrollAreaBase.Scrollbar\n orientation=\"vertical\"\n className={cn(\n \"flex w-1.5 touch-none select-none p-px\",\n \"opacity-0 transition-opacity duration-150\",\n \"data-[scrolling]:opacity-100 data-[hovering]:opacity-100\",\n )}\n >\n <ScrollAreaBase.Thumb className=\"flex-1 rounded-full bg-kumo-line\" />\n </ScrollAreaBase.Scrollbar>\n </ScrollAreaBase.Root>\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Rendered outside the peek zone\n * so hovering the footer doesn't trigger a peek. Tracks sidebar width\n * to stay aligned with the content container.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"footer\"\n className={cn(\n \"flex h-12 shrink-0 items-center gap-4 overflow-hidden whitespace-nowrap border-t border-kumo-line\",\n \"px-[11px] group-not-data-[state=collapsed]/sidebar:px-4\",\n \"bg-(--sidebar-bg)\",\n \"w-(--sidebar-width)\",\n \"transition-[width,padding] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n \"sticky bottom-0\",\n \"group-data-[state=collapsed]/sidebar:w-(--sidebar-width-icon) bg-clip-padding\",\n \"group-data-[state=collapsed]/sidebar:border-r group-data-[state=collapsed]/sidebar:border-kumo-line\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/**\n * Groups related menu items with an optional label.\n *\n * @example\n * ```tsx\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn(\"flex min-w-0 flex-col gap-y-px\", className)}\n {...props}\n >\n {children}\n </div>\n));\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * When the sidebar is collapsed, renders as a thin horizontal divider.\n * When it's the first group, the divider is hidden (nothing above to separate from).\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n // Grid-rows for smooth collapse animation\n \"grid overflow-hidden\",\n \"transition-[grid-template-rows,margin,border-color] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n // Mobile: no collapse animation — sidebar is always expanded\n \"group-data-[mobile=true]/sidebar:transition-none\",\n // Collapsed: spacer with divider line between icon groups\n \"grid-rows-[0fr] my-3 border-b border-kumo-line\",\n // First group: no spacer or divider needed\n \"[[data-sidebar=group]:first-child_&]:my-0 [[data-sidebar=group]:first-child_&]:border-transparent\",\n // Expanded: reveal the label text\n \"group-not-data-[state=collapsed]/sidebar:grid-rows-[1fr] group-not-data-[state=collapsed]/sidebar:my-0 group-not-data-[state=collapsed]/sidebar:border-transparent\",\n // Mobile: always show labels (sidebar content is always expanded on mobile)\n \"group-data-[mobile=true]/sidebar:grid-rows-[1fr] group-data-[mobile=true]/sidebar:my-0 group-data-[mobile=true]/sidebar:border-transparent\",\n className,\n )}\n {...props}\n >\n <div className=\"min-h-0 min-w-0\">\n <div\n className={cn(\n \"truncate px-3 mt-6 mb-2 text-sm font-medium text-kumo-subtle\",\n // First group: less top margin\n \"[[data-sidebar=group]:first-child_&]:mt-2\",\n )}\n >\n {children}\n </div>\n </div>\n </div>\n));\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for Collapsible wrapper)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible>...</Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n className={cn(\n \"m-0 flex min-w-0 list-none flex-col items-stretch gap-y-px p-0\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when wrapping a `Collapsible`.\n *\n * @example Explicit usage (wrapping a Collapsible)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible>...</Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn(\n \"relative group-data-[state=collapsed]/sidebar:overflow-hidden\",\n className,\n )}\n {...props}\n >\n {children}\n </li>\n </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps\n extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\" | \"children\"\n > {\n icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n active?: boolean;\n /**\n * Button size.\n * - `\"base\"` — Standard nav item\n * - `\"sm\"` — Compact nav item\n * @default \"base\"\n */\n size?: SidebarMenuButtonSize;\n href?: string;\n /** Link target — only meaningful when `href` is provided. */\n target?: React.HTMLAttributeAnchorTarget;\n tooltip?: string;\n className?: string;\n children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when wrapping a `Collapsible`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With Collapsible (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible>\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>} />\n * <Sidebar.CollapsibleContent>...</Sidebar.CollapsibleContent>\n * </Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n className,\n icon: IconProp,\n active = false,\n size = \"base\",\n href,\n target,\n tooltip,\n children,\n ...props\n },\n ref,\n ) => {\n const { state, peekable } = useSidebar();\n const LinkComponent = useLinkComponent();\n const isInsideMenuItem = useContext(MenuItemContext);\n\n // Render icon — supports both component types and React elements\n const iconNode = (() => {\n if (!IconProp) return null;\n if (React.isValidElement(IconProp)) return IconProp;\n const Comp = IconProp as React.ComponentType<{ className?: string }>;\n return (\n <Comp\n className={cn(\n \"shrink-0 opacity-40\",\n size === \"base\" ? \"size-4\" : \"size-3.5\",\n )}\n />\n );\n })();\n\n const content = (\n <div\n className={cn(\n \"flex flex-1 items-center min-w-0 gap-3\",\n \"translate-x-[-3px] group-not-data-[state=collapsed]/sidebar:translate-x-0\",\n \"transition-transform duration-(--sidebar-animation-duration)\",\n )}\n >\n {iconNode}\n <span\n className={cn(\n \"flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden\",\n )}\n >\n {React.Children.map(children, (child) =>\n typeof child === \"string\" || typeof child === \"number\" ? (\n <span className=\"truncate\">{child}</span>\n ) : (\n child\n ),\n )}\n </span>\n </div>\n );\n\n const buttonClasses = cn(\n // Layout\n \"group/menu-button relative flex w-full min-w-0 items-center gap-2.5 rounded-lg outline-none cursor-pointer\",\n \"before:absolute before:inset-x-0 before:-inset-y-px\",\n // Sizing\n size === \"base\" && \"min-h-8.5 px-3 py-0 text-sm font-medium\",\n size === \"sm\" && \"min-h-7 px-2 py-0 text-sm\",\n \"text-kumo-default\",\n \"transition-[color,box-shadow,outline] duration-(--sidebar-animation-duration)\",\n !active && \"hover:bg-(--sidebar-active-bg)\",\n // Active state\n active && \"bg-(--sidebar-active-bg)\",\n // When a child sub-button is active, don't show active styling on the parent trigger\n \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-(--sidebar-active-bg)\",\n // Focus\n \"focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-(--sidebar-active-bg)\",\n className,\n );\n\n let button: React.ReactNode;\n\n if (href) {\n button = (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n target={target}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-button-link\"\n data-size={size}\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n );\n } else {\n button = (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-button\"\n data-size={size}\n {...props}\n >\n {content}\n </button>\n );\n }\n\n // Always wrap in Tooltip when tooltip text is provided so the DOM\n // structure stays stable across expand/collapse — preventing React from\n // remounting the button (which would kill CSS transitions).\n // The tooltip popup only shows when collapsed and peeking is disabled —\n // when peekable, hovering reveals the full sidebar so tooltips are redundant.\n const showTooltip = state === \"collapsed\" && !peekable;\n if (tooltip) {\n button = (\n <Tooltip\n content={showTooltip ? tooltip : null}\n side=\"right\"\n render={button}\n />\n );\n }\n\n // Auto-wrap in <li> when not already inside a MenuItem\n if (!isInsideMenuItem) {\n return (\n <li\n data-sidebar=\"menu-item\"\n className=\"relative group-data-[state=collapsed]/sidebar:overflow-hidden\"\n >\n {button}\n </li>\n );\n }\n\n return button;\n },\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling matching the Cloudflare design system.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n * Containers\n * <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n HTMLSpanElement,\n ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n \"inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-line\",\n \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-strong\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, children, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n \"relative m-0 flex min-w-0 list-none flex-col gap-y-px p-0 pl-7 pr-0 overflow-hidden\",\n className,\n )}\n {...props}\n >\n <div className=\"absolute left-[19px] inset-y-px w-px bg-kumo-line z-10\" />\n {children}\n </ul>\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuSubItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-sub-item\"\n className={cn(\"relative\", className)}\n {...props}\n >\n {children}\n </li>\n </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /** Marks this sub-item as currently active/selected. @default false */\n active?: boolean;\n /** Navigation URL. When set, renders as a link via LinkProvider. */\n href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n HTMLButtonElement,\n SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n const LinkComponent = useLinkComponent();\n const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n const buttonClasses = cn(\n \"group/menu-button relative flex w-full min-w-0 items-center gap-2 rounded-lg min-h-8.5 px-3 py-0 text-sm font-medium outline-none cursor-pointer\",\n \"before:absolute before:inset-x-0 before:-inset-y-px\",\n \"text-kumo-default transition-[color] duration-150\",\n !active && \"hover:bg-(--sidebar-active-bg)\",\n active && \"bg-(--sidebar-active-bg)\",\n \"focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-(--sidebar-active-bg)\",\n className,\n );\n\n const content = (\n <span className=\"flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden\">\n {React.Children.map(children, (child) =>\n typeof child === \"string\" || typeof child === \"number\" ? (\n <span className=\"truncate\">{child}</span>\n ) : (\n child\n ),\n )}\n </span>\n );\n\n let button: React.ReactNode;\n\n if (href) {\n button = (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-sub-button-link\"\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n );\n } else {\n button = (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-sub-button\"\n {...props}\n >\n {content}\n </button>\n );\n }\n\n // Auto-wrap in <li> when not already inside a MenuSubItem\n if (!isInsideMenuSubItem) {\n return (\n <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n {button}\n </li>\n );\n }\n\n return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"separator\"\n className={cn(\"my-3 px-2\", className)}\n {...props}\n >\n <div className=\"border-b border-kumo-line\" />\n </div>\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n// ============================================================================\n// Sidebar PanelIcon\n// ============================================================================\n\n/**\n * Animated sidebar panel icon. The vertical divider line slides based\n * on the sidebar's open/closed state.\n */\nfunction SidebarPanelIcon({ className }: { className?: string }) {\n const { open } = useSidebar();\n\n return (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n className={cn(\"shrink-0\", className)}\n >\n <path d=\"M21.25 6.72v10.56a2.97 2.97 0 0 1-2.97 2.97H5.72a2.97 2.97 0 0 1-2.97-2.97V6.72a2.97 2.97 0 0 1 2.97-2.97h12.56a2.97 2.97 0 0 1 2.97 2.97\" />\n <path\n d=\"M6.25 7.25v9.5\"\n className={cn(\n \"transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n open ? \"translate-x-px\" : \"translate-x-[10.5px]\",\n )}\n />\n </svg>\n );\n}\n\nSidebarPanelIcon.displayName = \"Sidebar.PanelIcon\";\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to an animated `SidebarPanelIcon`.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * ```\n */\nconst SidebarTrigger = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n const { open, toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"trigger\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"trigger\"\n aria-expanded={open}\n aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n className={cn(\n \"flex shrink-0 size-8.5 justify-center items-center rounded-lg cursor-pointer\",\n \"text-kumo-subtle hover:text-kumo-default hover:bg-(--sidebar-active-bg)\",\n \"focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand\",\n className,\n )}\n onClick={(e) => {\n onClick?.(e);\n toggleSidebar();\n }}\n {...props}\n >\n {children ?? <SidebarPanelIcon />}\n </button>\n );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"rail\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"rail\"\n aria-label=\"Toggle sidebar\"\n tabIndex={-1}\n className={cn(\n \"absolute inset-y-0 z-1 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n \"hover:after:bg-kumo-brand/20\",\n \"group-data-[side=left]/sidebar-wrapper:right-0\",\n \"group-data-[side=right]/sidebar-wrapper:left-0\",\n \"sm:flex\",\n className,\n )}\n onClick={toggleSidebar}\n {...props}\n />\n );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n * tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n const {\n side,\n resizable,\n setIsResizing,\n setWidth,\n setOpen,\n open,\n minWidth,\n width: currentWidth,\n maxWidth,\n } = useSidebar();\n const startX = useRef(0);\n const startWidth = useRef(0);\n const wasCollapsed = useRef(false);\n\n if (!resizable) return null;\n\n const KEYBOARD_STEP = 10;\n\n const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n e.preventDefault();\n setIsResizing(true);\n startX.current = e.clientX;\n wasCollapsed.current = !open;\n\n const wrapper = (e.currentTarget as HTMLElement).closest(\n \"[data-sidebar-wrapper]\",\n );\n const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n const cleanup = () => {\n setIsResizing(false);\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n };\n\n const handlePointerMove = (moveEvent: PointerEvent) => {\n const delta =\n side === \"left\"\n ? moveEvent.clientX - startX.current\n : startX.current - moveEvent.clientX;\n const rawWidth = startWidth.current + delta;\n\n if (wasCollapsed.current) {\n // Dragging outward from collapsed — expand once past minWidth\n if (rawWidth >= minWidth) {\n wasCollapsed.current = false;\n setOpen(true);\n setWidth(rawWidth);\n }\n return;\n }\n\n // Dragging inward while expanded — collapse when below minWidth\n if (rawWidth < minWidth) {\n setOpen(false);\n wasCollapsed.current = true;\n return;\n }\n\n setWidth(rawWidth);\n };\n\n const handlePointerUp = () => {\n cleanup();\n };\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n const grow = side === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n const shrink = side === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n\n if (e.key === grow) {\n e.preventDefault();\n if (!open) {\n setOpen(true);\n setWidth(minWidth);\n } else {\n setWidth(Math.min(currentWidth + KEYBOARD_STEP, maxWidth));\n }\n } else if (e.key === shrink) {\n e.preventDefault();\n const next = currentWidth - KEYBOARD_STEP;\n if (next < minWidth) {\n setOpen(false);\n } else {\n setWidth(next);\n }\n } else if (e.key === \"Home\") {\n e.preventDefault();\n setOpen(false);\n } else if (e.key === \"End\") {\n e.preventDefault();\n setOpen(true);\n setWidth(maxWidth);\n }\n };\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Resize sidebar\"\n tabIndex={0}\n data-sidebar=\"resize-handle\"\n className={cn(\n // Hit area inside the sidebar edge; thin visual line pinned to the edge via ::after\n \"absolute inset-y-0 z-2 hidden w-3 cursor-col-resize sm:block\",\n \"after:absolute after:inset-y-0 after:w-0.5\",\n \"after:bg-transparent after:transition-colors\",\n \"hover:after:bg-kumo-hairline active:after:bg-kumo-hairline focus-visible:after:bg-kumo-hairline\",\n \"focus:outline-none\",\n side === \"left\" && \"right-0 after:right-0\",\n side === \"right\" && \"left-0 after:left-0\",\n className,\n )}\n onPointerDown={handlePointerDown}\n onKeyDown={handleKeyDown}\n {...props}\n />\n );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Collapsible context + components (custom implementation, no Base UI dep)\n// ============================================================================\n\ninterface SidebarCollapseContextValue {\n contentId: string;\n isOpen: boolean;\n isCollapsible: boolean;\n autoScrollOnOpen: boolean;\n toggle: () => void;\n}\n\nconst SidebarCollapseContext = createContext<SidebarCollapseContextValue>({\n contentId: \"\",\n isOpen: true,\n isCollapsible: false,\n autoScrollOnOpen: false,\n toggle: () => {},\n});\n\nexport interface SidebarCollapsibleProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /** Initial open state (uncontrolled). @default false */\n defaultOpen?: boolean;\n /** Controlled open state. */\n open?: boolean;\n /** Callback when open state changes. */\n onOpenChange?: (open: boolean) => void;\n /** Scroll the expanded content into view after opening. @default false */\n autoScrollOnOpen?: boolean;\n}\n\n/**\n * Collapsible wrapper for sidebar sub-menu expand/collapse.\n * Manages open/close state and provides context to Trigger and Content children.\n *\n * Keyboard behaviour: when a child receives keyboard focus (`focus-visible`)\n * while collapsed, the section auto-expands. It collapses again on blur\n * unless it was explicitly opened via click or a child has `data-active`.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible defaultOpen>\n * <Sidebar.CollapsibleTrigger\n * render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}\n * />\n * <Sidebar.CollapsibleContent>\n * <Sidebar.MenuSub>...</Sidebar.MenuSub>\n * </Sidebar.CollapsibleContent>\n * </Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarCollapsible = forwardRef<HTMLDivElement, SidebarCollapsibleProps>(\n (\n {\n defaultOpen = false,\n open: openProp,\n onOpenChange,\n autoScrollOnOpen = false,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = openProp ?? internalOpen;\n const contentId = useId();\n const keyboardExpandedRef = useRef(false);\n\n const toggle = useCallback(() => {\n const next = !isOpen;\n setInternalOpen(next);\n onOpenChange?.(next);\n // If user explicitly clicks, clear the keyboard-expanded flag\n keyboardExpandedRef.current = false;\n }, [isOpen, onOpenChange]);\n\n const contextValue = useMemo<SidebarCollapseContextValue>(\n () => ({\n contentId,\n isOpen,\n isCollapsible: true,\n autoScrollOnOpen,\n toggle,\n }),\n [contentId, isOpen, autoScrollOnOpen, toggle],\n );\n\n const handleFocusIn = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n // Auto-expand on keyboard focus (focus-visible) when collapsed\n if (!isOpen && (e.target as HTMLElement).matches(\":focus-visible\")) {\n keyboardExpandedRef.current = true;\n setInternalOpen(true);\n onOpenChange?.(true);\n }\n },\n [isOpen, onOpenChange],\n );\n\n const handleFocusOut = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n // Auto-collapse on blur if it was keyboard-expanded (not click-expanded)\n // and no child has data-active\n if (\n keyboardExpandedRef.current &&\n !e.currentTarget.contains(e.relatedTarget as Node) &&\n !e.currentTarget.querySelector(\"[data-active]\")\n ) {\n keyboardExpandedRef.current = false;\n setInternalOpen(false);\n onOpenChange?.(false);\n }\n },\n [onOpenChange],\n );\n\n return (\n <SidebarCollapseContext.Provider value={contextValue}>\n <div\n ref={ref}\n data-open={isOpen || undefined}\n className={cn(\"min-w-0\", className)}\n onFocus={handleFocusIn}\n onBlur={handleFocusOut}\n {...props}\n >\n {children}\n </div>\n </SidebarCollapseContext.Provider>\n );\n },\n);\n\nSidebarCollapsible.displayName = \"Sidebar.Collapsible\";\n\nexport interface SidebarCollapsibleTriggerProps {\n /** Element to render as the trigger. Gets aria-expanded, aria-controls, and onClick merged. */\n render: React.ReactElement;\n}\n\n/**\n * Trigger for a sidebar collapsible section. Uses `render` prop to compose\n * with `Sidebar.MenuButton` or `Sidebar.MenuSubButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger\n * render={\n * <Sidebar.MenuButton icon={CodeIcon}>\n * Compute\n * <Sidebar.MenuChevron />\n * </Sidebar.MenuButton>\n * }\n * />\n * ```\n */\nfunction SidebarCollapsibleTrigger({ render }: SidebarCollapsibleTriggerProps) {\n const { contentId, isOpen, toggle } = useContext(SidebarCollapseContext);\n\n return React.cloneElement(render, {\n \"aria-expanded\": isOpen,\n \"aria-controls\": contentId,\n \"data-open\": isOpen || undefined,\n onClick: (e: React.MouseEvent) => {\n // Call any existing onClick on the render element\n const existingOnClick = (\n render.props as { onClick?: (e: React.MouseEvent) => void }\n ).onClick;\n existingOnClick?.(e);\n toggle();\n },\n } as Record<string, unknown>);\n}\n\nSidebarCollapsibleTrigger.displayName = \"Sidebar.CollapsibleTrigger\";\n\n/**\n * Animated collapsible content panel. Uses CSS grid-rows for smooth\n * height transitions without measuring DOM height.\n *\n * Always mounted (no unmount on close) so exit animations play.\n */\nconst SidebarCollapsibleContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n const { contentId, isOpen: isCollapsibleOpen } = useContext(\n SidebarCollapseContext,\n );\n const { state, animationDuration } = useSidebar();\n const { autoScrollOnOpen } = useContext(SidebarCollapseContext);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const isOpen = isCollapsibleOpen && state !== \"collapsed\";\n\n useEffect(() => {\n if (!isOpen || !autoScrollOnOpen) return;\n\n const timeout = window.setTimeout(() => {\n const prefersReducedMotion = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\",\n ).matches;\n contentRef.current?.scrollIntoView({\n block: \"nearest\",\n behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\n });\n }, animationDuration);\n\n return () => window.clearTimeout(timeout);\n }, [isOpen, autoScrollOnOpen, animationDuration]);\n\n // Imperatively set inert — React 18 doesn't reliably forward\n // the inert attribute as a JSX prop on initial mount.\n const inertRef = useCallback(\n (node: HTMLDivElement | null) => {\n if (node) {\n if (!isOpen) {\n node.setAttribute(\"inert\", \"\");\n } else {\n node.removeAttribute(\"inert\");\n }\n }\n },\n [isOpen],\n );\n\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n contentRef.current = node;\n inertRef(node);\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref, inertRef],\n );\n\n return (\n <div\n ref={mergedRef}\n id={contentId}\n role=\"region\"\n aria-hidden={!isOpen}\n className={cn(\n \"grid\",\n \"transition-[grid-template-rows] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n isOpen ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n className,\n )}\n {...props}\n >\n <div className=\"overflow-hidden\">{children}</div>\n </div>\n );\n});\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. Reads open state from\n * the nearest `SidebarCollapseContext` and rotates accordingly.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger\n * render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}\n * />\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n const { isOpen, isCollapsible } = useContext(SidebarCollapseContext);\n\n return (\n <CaretRightIcon\n size={12}\n weight=\"bold\"\n className={cn(\n \"ml-auto shrink-0 opacity-40 group-hover/menu-button:opacity-100 transition-[transform,rotate,opacity] duration-200\",\n isCollapsible && isOpen && \"rotate-90\",\n // Hidden when sidebar is collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n />\n );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// SlidingViews — animated horizontal transitions between navigation surfaces\n// ============================================================================\n\nconst SlidingViewActiveContext = createContext<string>(\"\");\n\nexport interface SidebarSlidingViewsProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /** Key of the currently active view. Must match a child `SlidingView` value. */\n activeKey: string;\n /**\n * Slide direction for the transition.\n * - `\"left\"`: new view slides in from the right\n * - `\"right\"`: new view slides in from the left\n * @default \"left\"\n */\n direction?: \"left\" | \"right\";\n}\n\n/**\n * Container for animated horizontal transitions between navigation surfaces\n * (e.g., account ↔ zone). Inactive views are marked `aria-hidden` and `inert`.\n *\n * Animation respects `prefers-reduced-motion`.\n *\n * @example\n * ```tsx\n * <Sidebar.SlidingViews activeKey={surface} direction=\"left\">\n * <Sidebar.SlidingView value=\"account\">\n * <Sidebar.Content>...account nav...</Sidebar.Content>\n * </Sidebar.SlidingView>\n * <Sidebar.SlidingView value=\"zone\">\n * <Sidebar.Content>...zone nav...</Sidebar.Content>\n * </Sidebar.SlidingView>\n * </Sidebar.SlidingViews>\n * ```\n */\nconst SidebarSlidingViews = forwardRef<\n HTMLDivElement,\n SidebarSlidingViewsProps\n>(\n (\n {\n activeKey,\n direction: _direction = \"left\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const childArray = React.Children.toArray(children);\n const activeIndex = childArray.findIndex(\n (child) =>\n React.isValidElement(child) &&\n (child.props as { value?: string }).value === activeKey,\n );\n const prefersReducedMotion =\n typeof window !== \"undefined\" &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n const translateX = activeIndex > 0 ? `-${activeIndex * 100}%` : \"0%\";\n\n return (\n <SlidingViewActiveContext.Provider value={activeKey}>\n <div\n ref={ref}\n data-sidebar=\"sliding-views\"\n className={cn(\n \"flex flex-1 min-h-0 max-w-(--sidebar-width) overflow-hidden\",\n className,\n )}\n {...props}\n >\n <div\n className=\"flex min-h-0 w-full shrink-0\"\n style={{\n transform: `translateX(${translateX})`,\n transition: prefersReducedMotion\n ? \"none\"\n : `transform var(--sidebar-animation-duration) var(--sidebar-easing)`,\n }}\n >\n {children}\n </div>\n </div>\n </SlidingViewActiveContext.Provider>\n );\n },\n);\n\nSidebarSlidingViews.displayName = \"Sidebar.SlidingViews\";\n\nexport interface SidebarSlidingViewProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /** Unique key matching this view. Must correspond to `activeKey` on `SlidingViews`. */\n value: string;\n}\n\n/**\n * Individual panel inside `SlidingViews`. Inactive views are automatically\n * marked `aria-hidden` and `inert` so they're unreachable by keyboard/screen readers.\n */\nconst SidebarSlidingView = forwardRef<HTMLDivElement, SidebarSlidingViewProps>(\n ({ value, className, children, ...props }, ref) => {\n const activeKey = useContext(SlidingViewActiveContext);\n const isActive = activeKey === value;\n\n // Imperatively set inert — React 18.2 doesn't reliably forward the inert\n // attribute to the DOM when set as a JSX prop on initial mount.\n const inertRef = useCallback(\n (node: HTMLDivElement | null) => {\n if (node) {\n if (!isActive) {\n node.setAttribute(\"inert\", \"\");\n } else {\n node.removeAttribute(\"inert\");\n }\n }\n },\n [isActive],\n );\n\n // Merge forwarded ref with inert ref\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n inertRef(node);\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref, inertRef],\n );\n\n return (\n <div\n ref={mergedRef}\n data-sidebar=\"sliding-view\"\n data-value={value}\n aria-hidden={!isActive}\n className={cn(\n \"flex w-full shrink-0 flex-col min-h-0\",\n !isActive && \"pointer-events-none\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nSidebarSlidingView.displayName = \"Sidebar.SlidingView\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>\n * <Sidebar.Content>\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * </Sidebar.Group>\n * </Sidebar.Content>\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * </Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n Provider: SidebarProvider,\n Header: SidebarHeader,\n Content: SidebarContent,\n Footer: SidebarFooter,\n Group: SidebarGroup,\n GroupLabel: SidebarGroupLabel,\n Menu: SidebarMenu,\n MenuItem: SidebarMenuItem,\n MenuButton: SidebarMenuButton,\n MenuBadge: SidebarMenuBadge,\n MenuSub: SidebarMenuSub,\n MenuSubItem: SidebarMenuSubItem,\n MenuSubButton: SidebarMenuSubButton,\n Separator: SidebarSeparator,\n Trigger: SidebarTrigger,\n Rail: SidebarRail,\n ResizeHandle: SidebarResizeHandle,\n MenuChevron: SidebarMenuChevron,\n Collapsible: SidebarCollapsible,\n CollapsibleTrigger: SidebarCollapsibleTrigger,\n CollapsibleContent: SidebarCollapsibleContent,\n SlidingViews: SidebarSlidingViews,\n SlidingView: SidebarSlidingView,\n});\n\nexport {\n SidebarProvider,\n SidebarRoot,\n SidebarHeader,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n SidebarMenuBadge,\n SidebarMenuSub,\n SidebarMenuSubItem,\n SidebarMenuSubButton,\n SidebarSeparator,\n SidebarTrigger,\n SidebarRail,\n SidebarResizeHandle,\n SidebarMenuChevron,\n SidebarCollapsible,\n SidebarCollapsibleTrigger,\n SidebarCollapsibleContent,\n SidebarSlidingViews,\n SidebarSlidingView,\n};\n"],"names":["KUMO_SIDEBAR_VARIANTS","KUMO_SIDEBAR_DEFAULT_VARIANTS","KUMO_SIDEBAR_STYLING","SIDEBAR_WIDTH","SIDEBAR_WIDTH_ICON","SIDEBAR_EASING","SIDEBAR_ANIMATION_DURATION_MS","MOBILE_BREAKPOINT","FOCUSABLE_SELECTOR","useIsMobile","breakpoint","isMobile","setIsMobile","useState","useEffect","mql","onChange","SidebarContext","createContext","useSidebar","context","useContext","DEFAULT_WIDTH_PX","MIN_WIDTH_PX","MAX_WIDTH_PX","SidebarProvider","defaultOpen","openProp","setOpenProp","variant","side","collapsible","resizable","defaultWidth","minWidth","maxWidth","onWidthChange","contained","peekable","animationDuration","mobileBreakpoint","children","className","style","_openMobile","_setOpenMobile","width","setWidthState","isResizing","setIsResizing","isPeeking","setIsPeeking","openMobile","setOpenMobile","useCallback","next","setWidth","newWidth","clamped","_open","_setOpen","open","setOpen","value","toggleSidebar","prev","startPeek","stopPeek","state","sidebarWidthValue","contextValue","useMemo","jsx","cn","SidebarRoot","forwardRef","contentClassName","props","ref","mobileAsideRef","node","mergedMobileRef","triggerRef","useRef","mobileNodeRef","shouldRestoreFocusRef","handleKeyDown","e","handleFocusOut","handlePeekBlur","jsxs","Fragment","collapsedWidth","expandedWidth","railWidth","contentWidth","borderClasses","TooltipProvider","childArray","React","footerChildren","child","nonFooterChildren","SidebarHeader","SidebarContent","ScrollAreaBase.Root","ScrollAreaBase.Viewport","ScrollAreaBase.Content","ScrollAreaBase.Scrollbar","ScrollAreaBase.Thumb","SidebarFooter","SidebarGroup","SidebarGroupLabel","MenuItemContext","MenuSubItemContext","SidebarMenu","SidebarMenuItem","SidebarMenuButton","IconProp","active","size","href","target","tooltip","LinkComponent","useLinkComponent","isInsideMenuItem","iconNode","content","buttonClasses","button","Tooltip","SidebarMenuBadge","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton","isInsideMenuSubItem","SidebarSeparator","SidebarPanelIcon","SidebarTrigger","onClick","SidebarRail","SidebarResizeHandle","currentWidth","startX","startWidth","wasCollapsed","KEYBOARD_STEP","handlePointerDown","sidebar","cleanup","handlePointerMove","handlePointerUp","moveEvent","delta","rawWidth","grow","shrink","SidebarCollapseContext","SidebarCollapsible","onOpenChange","autoScrollOnOpen","internalOpen","setInternalOpen","isOpen","contentId","useId","keyboardExpandedRef","toggle","handleFocusIn","SidebarCollapsibleTrigger","render","existingOnClick","SidebarCollapsibleContent","isCollapsibleOpen","contentRef","timeout","prefersReducedMotion","inertRef","mergedRef","SidebarMenuChevron","isCollapsible","CaretRightIcon","SlidingViewActiveContext","SidebarSlidingViews","activeKey","_direction","activeIndex","translateX","SidebarSlidingView","isActive","Sidebar"],"mappings":"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"}
|