@devalok/shilp-sutra 0.57.0 → 0.59.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/MIGRATION.md +91 -0
- package/dist/_chunks/badge-group.js +75 -188
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chat.js +244 -243
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/image-preview.js +71 -70
- package/dist/_chunks/image-preview.js.map +1 -1
- package/dist/_chunks/motion-preference.js +15 -0
- package/dist/_chunks/motion-preference.js.map +1 -0
- package/dist/_chunks/motion-provider.js +1 -1
- package/dist/_chunks/motion-provider.js.map +1 -1
- package/dist/_chunks/popover.js +50 -49
- package/dist/_chunks/popover.js.map +1 -1
- package/dist/_chunks/primitives-internal.js +29 -29
- package/dist/_chunks/primitives-internal.js.map +1 -1
- package/dist/_chunks/shared.js +48 -47
- package/dist/_chunks/shared.js.map +1 -1
- package/dist/_chunks/success.js +34 -34
- package/dist/_chunks/tree-view.js +1 -1
- package/dist/_chunks/tree-view.js.map +1 -1
- package/dist/ai/block-renderer.js +8 -8
- package/dist/ai/command-bar.js +65 -65
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.js +35 -35
- package/dist/ai/conversation.js.map +1 -1
- package/dist/ai/index.js +4 -4
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js +108 -107
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/command-palette.js +137 -137
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/content-card.js +1 -1
- package/dist/composed/content-card.js.map +1 -1
- package/dist/composed/date-picker/index.js +5 -5
- package/dist/composed/date-picker/index.js.map +1 -1
- package/dist/composed/empty-state.js +4 -4
- package/dist/composed/file-preview/image-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/shared.d.ts.map +1 -1
- package/dist/composed/file-preview/video-preview.d.ts.map +1 -1
- package/dist/composed/file-preview.js +151 -150
- package/dist/composed/file-preview.js.map +1 -1
- package/dist/composed/filter-bar.d.ts.map +1 -1
- package/dist/composed/filter-bar.js +53 -52
- package/dist/composed/filter-bar.js.map +1 -1
- package/dist/composed/form-section.d.ts.map +1 -1
- package/dist/composed/form-section.js +38 -37
- package/dist/composed/form-section.js.map +1 -1
- package/dist/composed/master-detail.d.ts.map +1 -1
- package/dist/composed/master-detail.js +1 -1
- package/dist/composed/master-detail.js.map +1 -1
- package/dist/composed/multi-select-popover.d.ts.map +1 -1
- package/dist/composed/multi-select-popover.js +109 -108
- package/dist/composed/multi-select-popover.js.map +1 -1
- package/dist/composed/rich-chat-input/attachment-strip.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/reply-banner.d.ts.map +1 -1
- package/dist/composed/rich-chat-input/schedule-send.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.js +467 -466
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +3 -3
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.js +2 -2
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +29 -28
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/motion/index.d.ts +1 -0
- package/dist/motion/index.d.ts.map +1 -1
- package/dist/motion/index.js +2 -15
- package/dist/motion/motion-preference.d.ts +36 -0
- package/dist/motion/motion-preference.d.ts.map +1 -0
- package/dist/motion/motion-provider.d.ts +2 -1
- package/dist/motion/motion-provider.d.ts.map +1 -1
- package/dist/motion/primitives-index.js +103 -102
- package/dist/motion/primitives-index.js.map +1 -1
- package/dist/motion/primitives.d.ts.map +1 -1
- package/dist/shell/bottom-navbar.js +19 -19
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/index.d.ts +1 -1
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/notification-center.d.ts +17 -0
- package/dist/shell/notification-center.d.ts.map +1 -1
- package/dist/shell/notification-center.js +109 -104
- package/dist/shell/notification-center.js.map +1 -1
- package/dist/shell/notification-preferences.js +1 -1
- package/dist/shell/notification-preferences.js.map +1 -1
- package/dist/shell/top-bar.js +1 -1
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tokens/index.css +1 -0
- package/dist/tokens/palettes.css +292 -0
- package/dist/tokens/semantic.css +72 -8
- package/dist/tokens/shilp-sutra.css +1 -0
- package/dist/tokens/utilities.css +10 -7
- package/dist/ui/accordion.d.ts.map +1 -1
- package/dist/ui/accordion.js +27 -26
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/alert-dialog.d.ts.map +1 -1
- package/dist/ui/alert-dialog.js +60 -59
- package/dist/ui/alert-dialog.js.map +1 -1
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +55 -113
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/autocomplete.js +80 -80
- package/dist/ui/autocomplete.js.map +1 -1
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +69 -68
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-indicator.d.ts +4 -8
- package/dist/ui/badge-indicator.d.ts.map +1 -1
- package/dist/ui/badge-indicator.js +3 -8
- package/dist/ui/badge-indicator.js.map +1 -1
- package/dist/ui/badge.d.ts +8 -1
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/banner.d.ts.map +1 -1
- package/dist/ui/banner.js +42 -40
- package/dist/ui/banner.js.map +1 -1
- package/dist/ui/button-group.d.ts.map +1 -1
- package/dist/ui/button-group.js +3 -23
- package/dist/ui/button-group.js.map +1 -1
- package/dist/ui/button.d.ts +10 -1
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +79 -212
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +75 -72
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/charts/radar-chart.d.ts.map +1 -1
- package/dist/ui/charts/radar-chart.js +1 -1
- package/dist/ui/charts/radar-chart.js.map +1 -1
- package/dist/ui/chat/message-list.d.ts.map +1 -1
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/chat/typing-indicator.d.ts.map +1 -1
- package/dist/ui/code.js +1 -1
- package/dist/ui/code.js.map +1 -1
- package/dist/ui/color-input.d.ts.map +1 -1
- package/dist/ui/color-input.js +151 -150
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/combobox.d.ts +14 -0
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +152 -148
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/context-menu.d.ts.map +1 -1
- package/dist/ui/context-menu.js +70 -69
- package/dist/ui/context-menu.js.map +1 -1
- package/dist/ui/data-table-body.js +2 -2
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-context.js +2 -2
- package/dist/ui/data-table-context.js.map +1 -1
- package/dist/ui/data-table-header.d.ts.map +1 -1
- package/dist/ui/data-table-header.js +41 -40
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table-pagination.js +2 -2
- package/dist/ui/data-table-pagination.js.map +1 -1
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +61 -60
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dot.d.ts.map +1 -1
- package/dist/ui/dot.js +10 -41
- package/dist/ui/dot.js.map +1 -1
- package/dist/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/ui/dropdown-menu.js +79 -78
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/file-upload.d.ts.map +1 -1
- package/dist/ui/file-upload.js +116 -115
- package/dist/ui/file-upload.js.map +1 -1
- package/dist/ui/form.d.ts.map +1 -1
- package/dist/ui/form.js +27 -26
- package/dist/ui/form.js.map +1 -1
- package/dist/ui/hover-card.d.ts.map +1 -1
- package/dist/ui/hover-card.js +26 -25
- package/dist/ui/hover-card.js.map +1 -1
- package/dist/ui/icon.js +7 -7
- package/dist/ui/index.d.ts +2 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +3 -3
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/input.js +1 -1
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/menubar.d.ts.map +1 -1
- package/dist/ui/menubar.js +73 -72
- package/dist/ui/menubar.js.map +1 -1
- package/dist/ui/navigation-menu.d.ts.map +1 -1
- package/dist/ui/navigation-menu.js +80 -79
- package/dist/ui/navigation-menu.js.map +1 -1
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/progress.d.ts.map +1 -1
- package/dist/ui/progress.js +72 -68
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.d.ts.map +1 -1
- package/dist/ui/radio.js +32 -31
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/search-input.d.ts.map +1 -1
- package/dist/ui/search-input.js +28 -27
- package/dist/ui/search-input.js.map +1 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +64 -63
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/sidebar.d.ts.map +1 -1
- package/dist/ui/sidebar.js +4 -4
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/slider.d.ts +63 -9
- package/dist/ui/slider.d.ts.map +1 -1
- package/dist/ui/slider.js +74 -32
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/split-button.d.ts +8 -2
- package/dist/ui/split-button.d.ts.map +1 -1
- package/dist/ui/split-button.js +49 -95
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +89 -88
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/stat-flash.js +16 -16
- package/dist/ui/stepper.d.ts.map +1 -1
- package/dist/ui/stepper.js +63 -62
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/table.js +3 -3
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +67 -66
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/textarea.js +1 -1
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +195 -194
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toggle.d.ts.map +1 -1
- package/dist/ui/toggle.js +24 -22
- package/dist/ui/toggle.js.map +1 -1
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +37 -36
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tree-view/tree-item.d.ts.map +1 -1
- package/docs/recipes/customize-brand.md +58 -0
- package/docs/recipes/install-astro.md +1 -1
- package/docs/recipes/install-next-app-router.md +1 -1
- package/docs/recipes/install-next-pages.md +22 -1
- package/docs/recipes/install-remix.md +1 -1
- package/docs/recipes/install-tanstack-start.md +1 -1
- package/docs/recipes/install-vite.md +2 -1
- package/docs/recipes/server-components.md +7 -4
- package/docs/recipes/troubleshoot.md +1 -0
- package/llms.txt +1 -1
- package/mcp-manifest.json +9 -4
- package/package.json +3 -2
- package/skill/SKILL.md +1 -1
- package/skill/references/components.md +1 -1
- package/skill/references/customize-brand.md +58 -0
- package/skill/references/server-components.md +7 -4
- package/skill/references/setup-astro.md +1 -1
- package/skill/references/setup-next-app-router.md +1 -1
- package/skill/references/setup-next-pages.md +22 -1
- package/skill/references/setup-remix.md +1 -1
- package/skill/references/setup-tanstack-start.md +1 -1
- package/skill/references/setup-vite.md +2 -1
- package/skill/references/troubleshoot.md +1 -0
- package/dist/motion/check-motion-provider.d.ts +0 -2
- package/dist/motion/check-motion-provider.d.ts.map +0 -1
- package/dist/motion/index.js.map +0 -1
package/dist/ui/select.js
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { springs as e, tweens as t } from "./lib/motion.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
3
|
+
import { MotionPreference as n } from "../_chunks/motion-preference.js";
|
|
4
|
+
import { cn as r } from "./lib/utils.js";
|
|
5
|
+
import { Icon as i } from "./icon.js";
|
|
6
|
+
import { useFormField as a } from "./form.js";
|
|
7
|
+
import { resolveFieldState as o } from "../_chunks/field-state.js";
|
|
8
|
+
import { Content2 as s, Group as c, Icon as l, Item as u, ItemIndicator as d, ItemText as f, Label as p, Portal as m, Root2 as h, ScrollDownButton as g, ScrollUpButton as _, Separator as v, Trigger as y, Value as b, Viewport as x } from "../_chunks/primitives/react-select.js";
|
|
9
|
+
import * as S from "react";
|
|
10
|
+
import { jsx as C, jsxs as w } from "react/jsx-runtime";
|
|
11
|
+
import { IconCheck as T, IconChevronDown as E, IconChevronUp as D } from "@tabler/icons-react";
|
|
12
|
+
import { motion as O } from "framer-motion";
|
|
13
|
+
import { cva as k } from "class-variance-authority";
|
|
13
14
|
//#region src/ui/select.tsx
|
|
14
|
-
var
|
|
15
|
+
var A = h, j = c, M = b, N = k("flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1 [&>span]:min-w-0", {
|
|
15
16
|
variants: {
|
|
16
17
|
variant: {
|
|
17
18
|
default: "border border-surface-border-interactive bg-surface-panel-hover focus-visible:border-accent-7",
|
|
@@ -36,57 +37,57 @@ var k = m, A = s, j = y, M = O("flex w-full items-center justify-between whitesp
|
|
|
36
37
|
state: "default",
|
|
37
38
|
size: "md"
|
|
38
39
|
}
|
|
39
|
-
}),
|
|
40
|
-
let f =
|
|
41
|
-
return /* @__PURE__ */
|
|
40
|
+
}), P = S.forwardRef(({ className: e, children: t, variant: n, state: s, size: c, ...u }, d) => {
|
|
41
|
+
let f = a(), p = o(s ?? void 0, f.state), m = u["aria-describedby"] ?? f.helperTextId, h = u["aria-required"] ?? f.required;
|
|
42
|
+
return /* @__PURE__ */ w(y, {
|
|
42
43
|
ref: d,
|
|
43
|
-
className:
|
|
44
|
-
variant:
|
|
44
|
+
className: r(N({
|
|
45
|
+
variant: n,
|
|
45
46
|
state: p ?? "default",
|
|
46
|
-
size:
|
|
47
|
+
size: c
|
|
47
48
|
}), e),
|
|
48
49
|
"aria-invalid": p === "error" || void 0,
|
|
49
50
|
"aria-describedby": m,
|
|
50
51
|
"aria-required": h || void 0,
|
|
51
52
|
...u,
|
|
52
53
|
id: u.id ?? f.inputId,
|
|
53
|
-
children: [t, /* @__PURE__ */
|
|
54
|
+
children: [t, /* @__PURE__ */ C(l, {
|
|
54
55
|
asChild: !0,
|
|
55
|
-
children: /* @__PURE__ */
|
|
56
|
-
icon:
|
|
56
|
+
children: /* @__PURE__ */ C(i, {
|
|
57
|
+
icon: E,
|
|
57
58
|
size: "sm",
|
|
58
59
|
className: "opacity-50"
|
|
59
60
|
})
|
|
60
61
|
})]
|
|
61
62
|
});
|
|
62
63
|
});
|
|
63
|
-
|
|
64
|
-
var
|
|
65
|
-
ref:
|
|
66
|
-
className:
|
|
64
|
+
P.displayName = y.displayName;
|
|
65
|
+
var F = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(_, {
|
|
66
|
+
ref: n,
|
|
67
|
+
className: r("flex cursor-default items-center justify-center py-ds-02", e),
|
|
67
68
|
...t,
|
|
68
|
-
children: /* @__PURE__ */
|
|
69
|
-
icon:
|
|
69
|
+
children: /* @__PURE__ */ C(i, {
|
|
70
|
+
icon: D,
|
|
70
71
|
size: "sm"
|
|
71
72
|
})
|
|
72
73
|
}));
|
|
73
|
-
|
|
74
|
-
var
|
|
75
|
-
ref:
|
|
76
|
-
className:
|
|
74
|
+
F.displayName = _.displayName;
|
|
75
|
+
var I = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(g, {
|
|
76
|
+
ref: n,
|
|
77
|
+
className: r("flex cursor-default items-center justify-center py-ds-02", e),
|
|
77
78
|
...t,
|
|
78
|
-
children: /* @__PURE__ */
|
|
79
|
-
icon:
|
|
79
|
+
children: /* @__PURE__ */ C(i, {
|
|
80
|
+
icon: E,
|
|
80
81
|
size: "sm"
|
|
81
82
|
})
|
|
82
83
|
}));
|
|
83
|
-
|
|
84
|
-
var
|
|
85
|
-
ref:
|
|
86
|
-
position:
|
|
84
|
+
I.displayName = g.displayName;
|
|
85
|
+
var L = S.forwardRef(({ className: i, children: a, position: o = "popper", ...c }, l) => /* @__PURE__ */ C(n, { children: /* @__PURE__ */ C(m, { children: /* @__PURE__ */ C(s, {
|
|
86
|
+
ref: l,
|
|
87
|
+
position: o,
|
|
87
88
|
asChild: !0,
|
|
88
|
-
...
|
|
89
|
-
children: /* @__PURE__ */
|
|
89
|
+
...c,
|
|
90
|
+
children: /* @__PURE__ */ w(O.div, {
|
|
90
91
|
initial: {
|
|
91
92
|
opacity: 0,
|
|
92
93
|
scale: .95
|
|
@@ -99,45 +100,45 @@ var I = x.forwardRef(({ className: r, children: i, position: a = "popper", ...s
|
|
|
99
100
|
...e.snappy,
|
|
100
101
|
opacity: t.fade
|
|
101
102
|
},
|
|
102
|
-
className:
|
|
103
|
+
className: r("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating", o === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", i),
|
|
103
104
|
children: [
|
|
104
|
-
/* @__PURE__ */
|
|
105
|
-
/* @__PURE__ */
|
|
106
|
-
className:
|
|
107
|
-
children:
|
|
105
|
+
/* @__PURE__ */ C(F, {}),
|
|
106
|
+
/* @__PURE__ */ C(x, {
|
|
107
|
+
className: r("p-ds-02", o === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
|
|
108
|
+
children: a
|
|
108
109
|
}),
|
|
109
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ C(I, {})
|
|
110
111
|
]
|
|
111
112
|
})
|
|
112
|
-
}) }));
|
|
113
|
-
|
|
114
|
-
var
|
|
115
|
-
ref:
|
|
116
|
-
className:
|
|
113
|
+
}) }) }));
|
|
114
|
+
L.displayName = s.displayName;
|
|
115
|
+
var R = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(p, {
|
|
116
|
+
ref: n,
|
|
117
|
+
className: r("px-ds-03 py-ds-02b text-body-md font-semibold", e),
|
|
117
118
|
...t
|
|
118
119
|
}));
|
|
119
|
-
|
|
120
|
-
var
|
|
120
|
+
R.displayName = p.displayName;
|
|
121
|
+
var z = S.forwardRef(({ className: e, children: t, ...n }, a) => /* @__PURE__ */ w(u, {
|
|
121
122
|
ref: a,
|
|
122
|
-
className:
|
|
123
|
-
...
|
|
124
|
-
children: [/* @__PURE__ */
|
|
123
|
+
className: r("relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-body-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-panel-hover focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
|
|
124
|
+
...n,
|
|
125
|
+
children: [/* @__PURE__ */ C("span", {
|
|
125
126
|
className: "absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
|
|
126
|
-
children: /* @__PURE__ */
|
|
127
|
-
icon:
|
|
127
|
+
children: /* @__PURE__ */ C(d, { children: /* @__PURE__ */ C(i, {
|
|
128
|
+
icon: T,
|
|
128
129
|
size: "sm"
|
|
129
130
|
}) })
|
|
130
|
-
}), /* @__PURE__ */
|
|
131
|
+
}), /* @__PURE__ */ C(f, {
|
|
131
132
|
className: "min-w-0 line-clamp-1",
|
|
132
133
|
children: t
|
|
133
134
|
})]
|
|
134
135
|
}));
|
|
135
|
-
|
|
136
|
-
var
|
|
137
|
-
ref:
|
|
138
|
-
className:
|
|
136
|
+
z.displayName = u.displayName;
|
|
137
|
+
var B = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(v, {
|
|
138
|
+
ref: n,
|
|
139
|
+
className: r("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
|
|
139
140
|
...t
|
|
140
141
|
}));
|
|
141
|
-
|
|
142
|
+
B.displayName = v.displayName;
|
|
142
143
|
//#endregion
|
|
143
|
-
export {
|
|
144
|
+
export { A as Select, L as SelectContent, j as SelectGroup, z as SelectItem, R as SelectLabel, I as SelectScrollDownButton, F as SelectScrollUpButton, B as SelectSeparator, P as SelectTrigger, M as SelectValue, N as selectTriggerVariants };
|
package/dist/ui/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n * <SelectTrigger size=\"lg\">\n * <SelectValue placeholder=\"Choose...\" />\n * </SelectTrigger>\n * <SelectContent>\n * <SelectItem value=\"a\">Option A</SelectItem>\n * <SelectItem value=\"b\">Option B</SelectItem>\n * </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n 'flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1 [&>span]:min-w-0',\n {\n variants: {\n variant: {\n default:\n 'border border-surface-border-interactive bg-surface-panel-hover focus-visible:border-accent-7',\n outline:\n 'border border-surface-border-interactive bg-transparent focus-visible:border-accent-7',\n ghost:\n 'border border-transparent bg-transparent hover:bg-surface-panel-hover focus-visible:border-accent-7',\n },\n state: {\n default: '',\n error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n success: 'border-success-7',\n warning: 'border-warning-7',\n },\n size: {\n xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n sm: 'h-ds-sm text-body-sm px-ds-03',\n md: 'h-ds-md text-body-md px-ds-04',\n lg: 'h-ds-lg text-body-md px-ds-05',\n },\n },\n defaultVariants: { variant: 'default', state: 'default', size: 'md' },\n },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n * <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n SelectTriggerProps\n>(({ className, children, variant, state: stateProp, size, ...props }, ref) => {\n const fieldCtx = useFormField()\n // Explicit `state` prop wins over FormField context (shared precedence).\n const state = resolveFieldState((stateProp ?? undefined) as FieldState | undefined, fieldCtx.state)\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(selectTriggerVariants({ variant, state: state ?? 'default', size }), className)}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\n // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n id={props.id ?? fieldCtx.inputId}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronUp} size=\"sm\" />\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronDown} size=\"sm\" />\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n position={position}\n asChild\n {...props}\n >\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ ...springs.snappy, opacity: tweens.fade }}\n className={cn(\n 'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className,\n )}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-ds-02',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </motion.div>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-ds-03 py-ds-02b text-body-md font-semibold', className)}\n {...props}\n />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-body-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-panel-hover focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Icon icon={IconCheck} size=\"sm\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText className=\"min-w-0 line-clamp-1\">{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n {...props}\n />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@primitives/react-select'\nimport { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Select root — manages open/close state and selected value.\n *\n * **Important:** `size` is NOT a prop on `Select`. Set it on `SelectTrigger` instead.\n * Passing `size` directly to `Select` produces no TypeScript error but has no effect.\n *\n * @example\n * // CORRECT — size goes on SelectTrigger:\n * <Select onValueChange={setValue}>\n * <SelectTrigger size=\"lg\">\n * <SelectValue placeholder=\"Choose...\" />\n * </SelectTrigger>\n * <SelectContent>\n * <SelectItem value=\"a\">Option A</SelectItem>\n * <SelectItem value=\"b\">Option B</SelectItem>\n * </SelectContent>\n * </Select>\n *\n * // WRONG — size on Select root is silently ignored (no TypeScript error):\n * // <Select size=\"lg\">...</Select>\n */\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nexport const selectTriggerVariants = cva(\n 'flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled [&>span]:line-clamp-1 [&>span]:min-w-0',\n {\n variants: {\n variant: {\n default:\n 'border border-surface-border-interactive bg-surface-panel-hover focus-visible:border-accent-7',\n outline:\n 'border border-surface-border-interactive bg-transparent focus-visible:border-accent-7',\n ghost:\n 'border border-transparent bg-transparent hover:bg-surface-panel-hover focus-visible:border-accent-7',\n },\n state: {\n default: '',\n error: 'border-error-7 text-error-11 focus-visible:ring-error-9',\n success: 'border-success-7',\n warning: 'border-warning-7',\n },\n size: {\n xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n sm: 'h-ds-sm text-body-sm px-ds-03',\n md: 'h-ds-md text-body-md px-ds-04',\n lg: 'h-ds-lg text-body-md px-ds-05',\n },\n },\n defaultVariants: { variant: 'default', state: 'default', size: 'md' },\n },\n)\n\n/**\n * Props for SelectTrigger. Use `size` here (not on the `Select` root).\n *\n * @example\n * <SelectTrigger size=\"lg\" className=\"w-[200px]\">\n * <SelectValue placeholder=\"Select an option\" />\n * </SelectTrigger>\n */\nexport interface SelectTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'color'>,\n VariantProps<typeof selectTriggerVariants> {}\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Trigger>,\n SelectTriggerProps\n>(({ className, children, variant, state: stateProp, size, ...props }, ref) => {\n const fieldCtx = useFormField()\n // Explicit `state` prop wins over FormField context (shared precedence).\n const state = resolveFieldState((stateProp ?? undefined) as FieldState | undefined, fieldCtx.state)\n const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n return (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(selectTriggerVariants({ variant, state: state ?? 'default', size }), className)}\n aria-invalid={state === 'error' || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\n // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n id={props.id ?? fieldCtx.inputId}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <Icon icon={IconChevronDown} size=\"sm\" className=\"opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n )\n})\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronUp} size=\"sm\" />\n </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-ds-02',\n className,\n )}\n {...props}\n >\n <Icon icon={IconChevronDown} size=\"sm\" />\n </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <MotionPreference>\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n position={position}\n asChild\n {...props}\n >\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ ...springs.snappy, opacity: tweens.fade }}\n className={cn(\n 'relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className,\n )}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-ds-02',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </motion.div>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n </MotionPreference>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-ds-03 py-ds-02b text-body-md font-semibold', className)}\n {...props}\n />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-body-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-panel-hover focus:bg-surface-panel-hover focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled',\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <Icon icon={IconCheck} size=\"sm\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText className=\"min-w-0 line-clamp-1\">{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef<typeof SelectPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-ds-01 my-ds-02 h-px bg-surface-border', className)}\n {...props}\n />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n"],"mappings":"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"}
|
package/dist/ui/sidebar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/ui/sidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAM,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EACL,cAAc,EAWf,MAAM,OAAO,CAAA;AAWd,OAAO,EAEL,cAAc,EAGf,MAAM,WAAW,CAAA;AASlB,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,UAAU,GAAG,WAAW,CAAA;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,cAAc,gDAA6C,CAAA;AAEjE,iBAAS,UAAU,mBAOlB;AAED,QAAA,MAAM,eAAe;kBAGH,OAAO;WACd,OAAO;mBACC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;0DAoGzC,CAAA;AAsDD,QAAA,MAAM,OAAO;WAGF,MAAM,GAAG,OAAO;cACb,SAAS,GAAG,UAAU,GAAG,OAAO;kBAC5B,WAAW,GAAG,MAAM,GAAG,MAAM;
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/ui/sidebar.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/sidebar.js
CHANGED
|
@@ -125,7 +125,7 @@ var M = g(({ side: e = "left", variant: t = "sidebar", collapsible: r = "offcanv
|
|
|
125
125
|
"data-variant": t,
|
|
126
126
|
"data-side": e,
|
|
127
127
|
children: [/* @__PURE__ */ C("div", { className: n("relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", t === "floating" || t === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), /* @__PURE__ */ C("div", {
|
|
128
|
-
className: n("fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex", e === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", t === "floating" || t === "inset" ? "p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", i),
|
|
128
|
+
className: n("fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex", e === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", t === "floating" || t === "inset" ? "p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) border-surface-border group-data-[side=left]:border-r group-data-[side=right]:border-l", i),
|
|
129
129
|
...o,
|
|
130
130
|
children: /* @__PURE__ */ C("aside", {
|
|
131
131
|
"aria-label": "Sidebar",
|
|
@@ -258,7 +258,7 @@ var K = g(({ className: e, ...t }, r) => /* @__PURE__ */ C("li", {
|
|
|
258
258
|
...t
|
|
259
259
|
}));
|
|
260
260
|
K.displayName = "SidebarMenuItem";
|
|
261
|
-
var ce = ne("peer/menu-button hover:bg-surface-panel-hover active:bg-
|
|
261
|
+
var ce = ne("peer/menu-button hover:bg-surface-panel-hover active:bg-surface-panel-active data-[active=true]:bg-accent-4 data-[state=open]:hover:bg-surface-panel-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0", {
|
|
262
262
|
variants: {
|
|
263
263
|
variant: {
|
|
264
264
|
default: "hover:bg-surface-panel-hover hover:text-surface-fg",
|
|
@@ -287,7 +287,7 @@ var ce = ne("peer/menu-button hover:bg-surface-panel-hover active:bg-accent-2 da
|
|
|
287
287
|
...p,
|
|
288
288
|
children: r ? d : /* @__PURE__ */ w(S, { children: [i && /* @__PURE__ */ C(E.span, {
|
|
289
289
|
layoutId: "sidebar-active-indicator",
|
|
290
|
-
className: "absolute inset-0 rounded-control bg-accent-
|
|
290
|
+
className: "absolute inset-0 rounded-control bg-accent-4",
|
|
291
291
|
transition: t.smooth
|
|
292
292
|
}), /* @__PURE__ */ C("span", {
|
|
293
293
|
className: "relative z-[1] flex w-full items-center gap-[inherit]",
|
|
@@ -354,7 +354,7 @@ var $ = g(({ asChild: t = !1, size: r = "md", isActive: i, className: a, ...o },
|
|
|
354
354
|
"data-sidebar": "menu-sub-button",
|
|
355
355
|
"data-size": r,
|
|
356
356
|
"data-active": i,
|
|
357
|
-
className: n("hover:bg-surface-panel-hover active:bg-
|
|
357
|
+
className: n("hover:bg-surface-panel-hover active:bg-surface-panel-active flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg", "data-[active=true]:bg-accent-4 data-[active=true]:text-surface-fg", r === "sm" && "text-body-sm", r === "md" && "text-body-md", "group-data-[collapsible=icon]:hidden", a),
|
|
358
358
|
...o
|
|
359
359
|
}));
|
|
360
360
|
$.displayName = "SidebarMenuSubButton";
|
package/dist/ui/sidebar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n ComponentProps,\n createContext,\n CSSProperties,\n ElementRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n const context = useContext(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n\n return context\n}\n\nconst SidebarProvider = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n }\n>(\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n },\n ref,\n ) => {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = useState(false)\n const [_open, _setOpen] = useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n if (typeof document !== 'undefined') {\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n }\n },\n [setOpenProp, open],\n )\n\n const toggleSidebar = useCallback(() => {\n return isMobile\n ? setOpenMobile((open) => !open)\n : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [toggleSidebar])\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = useMemo<SidebarContext>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n ],\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as CSSProperties\n }\n className={cn(\n 'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n )\n },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n side,\n onClose,\n children,\n}: {\n side: 'left' | 'right'\n onClose: () => void\n children: React.ReactNode\n}) {\n const isReduced = useReducedMotion()\n const panelRef = useRef<HTMLDivElement>(null)\n\n // For a left sidebar, user swipes left (negative x) to close.\n // For a right sidebar, user swipes right (positive x) to close.\n const dragAxis = 'x' as const\n const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n return (\n <motion.div\n ref={panelRef}\n className=\"h-full w-full\"\n drag={!isReduced ? dragAxis : false}\n dragConstraints={dragConstraints}\n dragElastic={0.2}\n onDragEnd={(\n _: unknown,\n info: { offset: { x: number }; velocity: { x: number } },\n ) => {\n const w = panelRef.current?.getBoundingClientRect().width ?? 280\n if (side === 'left') {\n // Swipe left to close: negative offset\n if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n onClose()\n }\n } else {\n // Swipe right to close: positive offset\n if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n onClose()\n }\n }\n }}\n >\n {children}\n </motion.div>\n )\n}\n\nconst Sidebar = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & {\n side?: 'left' | 'right'\n variant?: 'sidebar' | 'floating' | 'inset'\n collapsible?: 'offcanvas' | 'icon' | 'none'\n }\n>(\n (\n {\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === 'none') {\n return (\n <aside\n aria-label=\"Sidebar\"\n className={cn(\n 'flex h-full w-(--sidebar-width) flex-col bg-surface-base text-surface-fg',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </aside>\n )\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-surface-base p-0 text-surface-fg [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as CSSProperties\n }\n side={side}\n responsive={false}\n >\n <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n </SidebarSwipeWrapper>\n </SheetContent>\n </Sheet>\n )\n }\n\n return (\n <div\n ref={ref}\n className=\"group peer hidden text-surface-fg md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n >\n <div\n className={cn(\n 'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n className={cn(\n 'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n variant === 'floating' || variant === 'inset'\n ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className,\n )}\n {...props}\n >\n <aside\n aria-label=\"Sidebar\"\n data-sidebar=\"sidebar\"\n className=\"flex h-full w-full flex-col bg-surface-base group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised\"\n >\n {children}\n </aside>\n </div>\n </div>\n )\n },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n ElementRef<typeof Button>,\n ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <Button\n ref={ref}\n data-sidebar=\"trigger\"\n variant=\"ghost\"\n size=\"icon-md\"\n className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n onClick={(event) => {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n >\n <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n ({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <button\n ref={ref}\n data-sidebar=\"rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-panel-hover',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n ({ className, ...props }, ref) => {\n return (\n <main\n ref={ref}\n className={cn(\n 'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n 'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n ElementRef<typeof Input>,\n ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n return (\n <Input\n ref={ref}\n data-sidebar=\"input\"\n size=\"sm\"\n wrapperClassName={cn(\n 'bg-surface-panel shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n wrapperClassName,\n )}\n className={cn('w-full', className)}\n {...props}\n />\n )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n {...props}\n />\n )\n },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n {...props}\n />\n )\n },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n ElementRef<typeof Separator>,\n ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n return (\n <Separator\n ref={ref}\n data-sidebar=\"separator\"\n className={cn(\n 'bg-surface-border mx-ds-03 w-auto',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n {...props}\n />\n )\n },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-body-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n HTMLButtonElement,\n ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-action\"\n className={cn(\n 'hover:bg-surface-panel-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn('w-full text-body-md', className)}\n {...props}\n />\n ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n ({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n {...props}\n />\n ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button hover:bg-surface-panel-hover active:bg-accent-2 data-[active=true]:bg-accent-2 data-[state=open]:hover:bg-surface-panel-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n {\n variants: {\n variant: {\n default:\n 'hover:bg-surface-panel-hover hover:text-surface-fg',\n outline:\n 'hover:bg-surface-panel-hover bg-surface-panel shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n },\n size: {\n md: 'h-ds-sm text-body-md',\n sm: 'h-ds-xs-plus text-body-sm',\n lg: 'h-ds-lg text-body-md group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n },\n)\n\nconst SidebarMenuButton = forwardRef<\n HTMLButtonElement,\n ComponentProps<'button'> & {\n asChild?: boolean\n isActive?: boolean\n tooltip?: string | ComponentProps<typeof TooltipContent>\n } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n (\n {\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'md',\n tooltip,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : 'button'\n const { isMobile, state } = useSidebar()\n\n const button = (\n <Comp\n ref={ref}\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n {...props}\n >\n {asChild ? children : (\n <>\n {isActive && (\n <motion.span\n layoutId=\"sidebar-active-indicator\"\n className=\"absolute inset-0 rounded-control bg-accent-2\"\n transition={springs.smooth}\n />\n )}\n <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n </>\n )}\n </Comp>\n )\n\n if (!tooltip) {\n return button\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n }\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== 'collapsed' || isMobile}\n {...tooltip}\n />\n </Tooltip>\n )\n },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n HTMLButtonElement,\n ComponentProps<'button'> & {\n asChild?: boolean\n showOnHover?: boolean\n }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-action\"\n className={cn(\n 'hover:bg-surface-panel-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=md]/menu-button:top-ds-02b',\n 'peer-data-[size=lg]/menu-button:top-ds-03',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-body-sm font-medium tabular-nums text-surface-fg',\n 'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=md]/menu-button:top-ds-02b',\n 'peer-data-[size=lg]/menu-button:top-ds-03',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & {\n showIcon?: boolean\n }\n>(({ className, showIcon = false, ...props }, ref) => {\n const width = useMemo(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`\n }, [])\n\n return (\n <div\n ref={ref}\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03', className)}\n {...props}\n >\n {showIcon && (\n <Skeleton\n className=\"h-ico-sm w-ico-sm rounded-control\"\n data-sidebar=\"menu-skeleton-icon\"\n />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as CSSProperties\n }\n />\n </div>\n )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n ({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n HTMLAnchorElement,\n ComponentProps<'a'> & {\n asChild?: boolean\n size?: 'sm' | 'md'\n isActive?: boolean\n }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'hover:bg-surface-panel-hover active:bg-accent-2 flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n 'data-[active=true]:bg-accent-2 data-[active=true]:text-surface-fg',\n size === 'sm' && 'text-body-sm',\n size === 'md' && 'text-body-md',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sidebar.js","names":[],"sources":["../../src/ui/sidebar.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react'\nimport { cva,VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport {\n ComponentProps,\n createContext,\n CSSProperties,\n ElementRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { Input } from './input'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Separator } from './separator'\nimport { Sheet, SheetContent } from './sheet'\nimport { Skeleton } from './skeleton'\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip'\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar:state'\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = '16rem'\nconst SIDEBAR_WIDTH_MOBILE = '18rem'\nconst SIDEBAR_WIDTH_ICON = '3rem'\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\ntype SidebarContext = {\n state: 'expanded' | 'collapsed'\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n const context = useContext(SidebarContext)\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.')\n }\n\n return context\n}\n\nconst SidebarProvider = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n }\n>(\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n },\n ref,\n ) => {\n const isMobile = useIsMobile()\n const [openMobile, setOpenMobile] = useState(false)\n const [_open, _setOpen] = useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n if (typeof document !== 'undefined') {\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n }\n },\n [setOpenProp, open],\n )\n\n const toggleSidebar = useCallback(() => {\n return isMobile\n ? setOpenMobile((open) => !open)\n : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [toggleSidebar])\n const state = open ? 'expanded' : 'collapsed'\n\n const contextValue = useMemo<SidebarContext>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n ],\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as CSSProperties\n }\n className={cn(\n 'group/sidebar-wrapper flex min-h-svh has-[[data-variant=inset]]:bg-surface-sunken',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n )\n },\n)\nSidebarProvider.displayName = 'SidebarProvider'\n\n// ── SidebarSwipeWrapper (swipe-to-close on mobile) ─────────────────\n\n// TODO: edge-swipe-to-open (swipe from left edge to open sidebar)\n\nfunction SidebarSwipeWrapper({\n side,\n onClose,\n children,\n}: {\n side: 'left' | 'right'\n onClose: () => void\n children: React.ReactNode\n}) {\n const isReduced = useReducedMotion()\n const panelRef = useRef<HTMLDivElement>(null)\n\n // For a left sidebar, user swipes left (negative x) to close.\n // For a right sidebar, user swipes right (positive x) to close.\n const dragAxis = 'x' as const\n const dragConstraints = side === 'left' ? { right: 0 } : { left: 0 }\n\n return (\n <motion.div\n ref={panelRef}\n className=\"h-full w-full\"\n drag={!isReduced ? dragAxis : false}\n dragConstraints={dragConstraints}\n dragElastic={0.2}\n onDragEnd={(\n _: unknown,\n info: { offset: { x: number }; velocity: { x: number } },\n ) => {\n const w = panelRef.current?.getBoundingClientRect().width ?? 280\n if (side === 'left') {\n // Swipe left to close: negative offset\n if (info.offset.x < -(w * 0.3) || info.velocity.x < -500) {\n onClose()\n }\n } else {\n // Swipe right to close: positive offset\n if (info.offset.x > w * 0.3 || info.velocity.x > 500) {\n onClose()\n }\n }\n }}\n >\n {children}\n </motion.div>\n )\n}\n\nconst Sidebar = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & {\n side?: 'left' | 'right'\n variant?: 'sidebar' | 'floating' | 'inset'\n collapsible?: 'offcanvas' | 'icon' | 'none'\n }\n>(\n (\n {\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === 'none') {\n return (\n <aside\n aria-label=\"Sidebar\"\n className={cn(\n 'flex h-full w-(--sidebar-width) flex-col bg-surface-base text-surface-fg',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n </aside>\n )\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-surface-base p-0 text-surface-fg [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as CSSProperties\n }\n side={side}\n responsive={false}\n >\n <SidebarSwipeWrapper side={side} onClose={() => setOpenMobile(false)}>\n <aside aria-label=\"Sidebar\" className=\"flex h-full w-full flex-col\">{children}</aside>\n </SidebarSwipeWrapper>\n </SheetContent>\n </Sheet>\n )\n }\n\n return (\n <div\n ref={ref}\n className=\"group peer hidden text-surface-fg md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n >\n <div\n className={cn(\n 'relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-moderate-02 ease-productive-exit',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n )}\n />\n <div\n className={cn(\n 'fixed inset-y-0 z-raised hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-moderate-02 ease-productive-exit md:flex',\n side === 'left'\n ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n variant === 'floating' || variant === 'inset'\n ? 'p-ds-03 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+2px)]'\n // `border-surface-border` is load-bearing: Tailwind 4 leaves an\n // uncoloured border at `currentColor`, so a bare `border-r` here\n // inherited `text-surface-fg` and drew a 12.69:1 (light) /\n // 15.44:1 (dark) rule down the full height of the app.\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) border-surface-border group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className,\n )}\n {...props}\n >\n <aside\n aria-label=\"Sidebar\"\n data-sidebar=\"sidebar\"\n className=\"flex h-full w-full flex-col bg-surface-base group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised\"\n >\n {children}\n </aside>\n </div>\n </div>\n )\n },\n)\nSidebar.displayName = 'Sidebar'\n\nconst SidebarTrigger = forwardRef<\n ElementRef<typeof Button>,\n ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <Button\n ref={ref}\n data-sidebar=\"trigger\"\n variant=\"ghost\"\n size=\"icon-md\"\n className={cn('h-ds-xs-plus w-ds-xs-plus', className)}\n onClick={(event) => {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n >\n <Icon icon={IconLayoutSidebarLeftCollapse} size=\"sm\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )\n})\nSidebarTrigger.displayName = 'SidebarTrigger'\n\nconst SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(\n ({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <button\n ref={ref}\n data-sidebar=\"rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'hover:after:bg-surface-border-strong absolute inset-y-0 z-raised hidden w-4 -translate-x-1/2 transition-colors ease-productive-standard after:absolute after:inset-y-0 after:left-1/2 after:w-ds-01 group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-panel-hover',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarRail.displayName = 'SidebarRail'\n\nconst SidebarInset = forwardRef<HTMLDivElement, ComponentProps<'main'>>(\n ({ className, ...props }, ref) => {\n return (\n <main\n ref={ref}\n className={cn(\n 'relative flex min-h-svh flex-1 flex-col bg-surface-base',\n 'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-ds-03 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-ds-03 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-overlay-lg',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarInset.displayName = 'SidebarInset'\n\nconst SidebarInput = forwardRef<\n ElementRef<typeof Input>,\n ComponentProps<typeof Input>\n>(({ className, wrapperClassName, ...props }, ref) => {\n return (\n <Input\n ref={ref}\n data-sidebar=\"input\"\n size=\"sm\"\n wrapperClassName={cn(\n 'bg-surface-panel shadow-none focus-within:ring-2 focus-within:ring-accent-9',\n wrapperClassName,\n )}\n className={cn('w-full', className)}\n {...props}\n />\n )\n})\nSidebarInput.displayName = 'SidebarInput'\n\nconst SidebarHeader = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"header\"\n className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n {...props}\n />\n )\n },\n)\nSidebarHeader.displayName = 'SidebarHeader'\n\nconst SidebarFooter = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"footer\"\n className={cn('flex flex-col gap-ds-03 p-ds-03', className)}\n {...props}\n />\n )\n },\n)\nSidebarFooter.displayName = 'SidebarFooter'\n\nconst SidebarSeparator = forwardRef<\n ElementRef<typeof Separator>,\n ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n return (\n <Separator\n ref={ref}\n data-sidebar=\"separator\"\n className={cn(\n 'bg-surface-border mx-ds-03 w-auto',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarSeparator.displayName = 'SidebarSeparator'\n\nconst SidebarContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-ds-03 overflow-auto group-data-[collapsible=icon]:overflow-hidden',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSidebarContent.displayName = 'SidebarContent'\n\nconst SidebarGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn('relative flex w-full min-w-0 flex-col p-ds-03', className)}\n {...props}\n />\n )\n },\n)\nSidebarGroup.displayName = 'SidebarGroup'\n\nconst SidebarGroupLabel = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-ds-sm shrink-0 items-center rounded-control px-ds-03 text-body-sm font-medium text-surface-fg-muted outline-hidden ring-accent-9 transition-[margin,opacity] duration-moderate-02 ease-productive-exit focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarGroupLabel.displayName = 'SidebarGroupLabel'\n\nconst SidebarGroupAction = forwardRef<\n HTMLButtonElement,\n ComponentProps<'button'> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-action\"\n className={cn(\n 'hover:bg-surface-panel-hover absolute right-ds-04 top-ds-04 flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarGroupAction.displayName = 'SidebarGroupAction'\n\nconst SidebarGroupContent = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn('w-full text-body-md', className)}\n {...props}\n />\n ),\n)\nSidebarGroupContent.displayName = 'SidebarGroupContent'\n\nconst SidebarMenu = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n ({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n className={cn('flex w-full min-w-0 flex-col gap-ds-02', className)}\n {...props}\n />\n ),\n)\nSidebarMenu.displayName = 'SidebarMenu'\n\nconst SidebarMenuItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn('group/menu-item relative', className)}\n {...props}\n />\n ),\n)\nSidebarMenuItem.displayName = 'SidebarMenuItem'\n\nconst sidebarMenuButtonVariants = cva(\n 'peer/menu-button hover:bg-surface-panel-hover active:bg-surface-panel-active data-[active=true]:bg-accent-4 data-[state=open]:hover:bg-surface-panel-hover flex w-full items-center gap-ds-03 overflow-hidden rounded-control p-ds-03 text-left outline-hidden ring-accent-9 transition-[width,height,padding] hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-ds-07 aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled data-[active=true]:font-medium data-[active=true]:text-surface-fg data-[state=open]:hover:text-surface-fg group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-ds-03! [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n {\n variants: {\n variant: {\n default:\n 'hover:bg-surface-panel-hover hover:text-surface-fg',\n outline:\n 'hover:bg-surface-panel-hover bg-surface-panel shadow-[0_0_0_1px_var(--color-surface-border)] hover:text-surface-fg hover:shadow-[0_0_0_1px_var(--color-surface-border-strong)]',\n },\n size: {\n md: 'h-ds-sm text-body-md',\n sm: 'h-ds-xs-plus text-body-sm',\n lg: 'h-ds-lg text-body-md group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'md',\n },\n },\n)\n\nconst SidebarMenuButton = forwardRef<\n HTMLButtonElement,\n ComponentProps<'button'> & {\n asChild?: boolean\n isActive?: boolean\n tooltip?: string | ComponentProps<typeof TooltipContent>\n } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n (\n {\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'md',\n tooltip,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : 'button'\n const { isMobile, state } = useSidebar()\n\n const button = (\n <Comp\n ref={ref}\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), !asChild && 'relative', className)}\n {...props}\n >\n {asChild ? children : (\n <>\n {isActive && (\n <motion.span\n layoutId=\"sidebar-active-indicator\"\n className=\"absolute inset-0 rounded-control bg-accent-4\"\n transition={springs.smooth}\n />\n )}\n <span className=\"relative z-[1] flex w-full items-center gap-[inherit]\">{children}</span>\n </>\n )}\n </Comp>\n )\n\n if (!tooltip) {\n return button\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n }\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== 'collapsed' || isMobile}\n {...tooltip}\n />\n </Tooltip>\n )\n },\n)\nSidebarMenuButton.displayName = 'SidebarMenuButton'\n\nconst SidebarMenuAction = forwardRef<\n HTMLButtonElement,\n ComponentProps<'button'> & {\n asChild?: boolean\n showOnHover?: boolean\n }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-action\"\n className={cn(\n 'hover:bg-surface-panel-hover absolute right-ds-02 top-ds-02b flex aspect-square w-5 items-center justify-center rounded-control p-0 text-surface-fg outline-hidden ring-accent-9 transition-transform hover:text-surface-fg focus-visible:ring-2 peer-hover/menu-button:text-surface-fg [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0',\n 'after:absolute after:-inset-2 after:md:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=md]/menu-button:top-ds-02b',\n 'peer-data-[size=lg]/menu-button:top-ds-03',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-surface-fg md:opacity-0',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarMenuAction.displayName = 'SidebarMenuAction'\n\nconst SidebarMenuBadge = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-ds-02 flex h-5 min-w-5 select-none items-center justify-center rounded-control px-ds-02 text-body-sm font-medium tabular-nums text-surface-fg',\n 'peer-hover/menu-button:text-surface-fg peer-data-[active=true]/menu-button:text-surface-fg',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=md]/menu-button:top-ds-02b',\n 'peer-data-[size=lg]/menu-button:top-ds-03',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuBadge.displayName = 'SidebarMenuBadge'\n\nconst SidebarMenuSkeleton = forwardRef<\n HTMLDivElement,\n ComponentProps<'div'> & {\n showIcon?: boolean\n }\n>(({ className, showIcon = false, ...props }, ref) => {\n const width = useMemo(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`\n }, [])\n\n return (\n <div\n ref={ref}\n data-sidebar=\"menu-skeleton\"\n className={cn('flex h-ds-sm items-center gap-ds-03 rounded-control px-ds-03', className)}\n {...props}\n >\n {showIcon && (\n <Skeleton\n className=\"h-ico-sm w-ico-sm rounded-control\"\n data-sidebar=\"menu-skeleton-icon\"\n />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as CSSProperties\n }\n />\n </div>\n )\n})\nSidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'\n\nconst SidebarMenuSub = forwardRef<HTMLUListElement, ComponentProps<'ul'>>(\n ({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-ds-04 flex min-w-0 translate-x-px flex-col gap-ds-02 border-l border-surface-border px-ds-03 py-ds-01',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n ),\n)\nSidebarMenuSub.displayName = 'SidebarMenuSub'\n\nconst SidebarMenuSubItem = forwardRef<HTMLLIElement, ComponentProps<'li'>>(\n ({ ...props }, ref) => <li ref={ref} {...props} />,\n)\nSidebarMenuSubItem.displayName = 'SidebarMenuSubItem'\n\nconst SidebarMenuSubButton = forwardRef<\n HTMLAnchorElement,\n ComponentProps<'a'> & {\n asChild?: boolean\n size?: 'sm' | 'md'\n isActive?: boolean\n }\n>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'hover:bg-surface-panel-hover active:bg-surface-panel-active flex h-ds-xs-plus min-w-0 -translate-x-px items-center gap-ds-03 overflow-hidden rounded-control px-ds-03 text-surface-fg outline-hidden ring-accent-9 hover:text-surface-fg focus-visible:ring-2 active:text-surface-fg disabled:pointer-events-none disabled:opacity-action-disabled aria-disabled:pointer-events-none aria-disabled:opacity-action-disabled [&>span:last-child]:truncate [&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:shrink-0 [&>svg]:text-surface-fg',\n 'data-[active=true]:bg-accent-4 data-[active=true]:text-surface-fg',\n size === 'sm' && 'text-body-sm',\n size === 'md' && 'text-body-md',\n 'group-data-[collapsible=icon]:hidden',\n className,\n )}\n {...props}\n />\n )\n})\nSidebarMenuSubButton.displayName = 'SidebarMenuSubButton'\n\nexport type SidebarProps = React.ComponentPropsWithoutRef<'div'> & { side?: 'left' | 'right'; variant?: 'sidebar' | 'floating' | 'inset'; collapsible?: 'offcanvas' | 'icon' | 'none' }\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n"],"mappings":"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"}
|
package/dist/ui/slider.d.ts
CHANGED
|
@@ -10,25 +10,79 @@ declare const sliderThumbVariants: (props?: ({
|
|
|
10
10
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
11
11
|
export type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>;
|
|
12
12
|
export type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>;
|
|
13
|
+
/** One tick on the scale. A bare number is shorthand for `{ value: n, label: n }`. */
|
|
14
|
+
export interface SliderMark {
|
|
15
|
+
/** Position on the scale, in the slider's own units (between `min` and `max`). */
|
|
16
|
+
value: number;
|
|
17
|
+
/**
|
|
18
|
+
* What to print under the tick. Defaults to the value itself. Pass `null`
|
|
19
|
+
* for a tick with no caption.
|
|
20
|
+
*/
|
|
21
|
+
label?: React.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
export interface SliderMarkProps extends SliderMark {
|
|
24
|
+
/** Caption for this tick. Overrides `label`. */
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* A single tick, as a child of `Slider`.
|
|
29
|
+
*
|
|
30
|
+
* ```tsx
|
|
31
|
+
* <Slider>
|
|
32
|
+
* <Slider.Mark value={30}>Launch</Slider.Mark>
|
|
33
|
+
* </Slider>
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* Never rendered directly — `Slider` reads the props off it and draws the tick
|
|
37
|
+
* itself, because a tick has to be positioned against the track. Returning
|
|
38
|
+
* `null` keeps it out of the DOM if someone renders one outside a Slider.
|
|
39
|
+
*/
|
|
40
|
+
declare function SliderMarkComponent(_props: SliderMarkProps): React.ReactElement | null;
|
|
41
|
+
declare namespace SliderMarkComponent {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
13
44
|
export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {
|
|
14
45
|
/** Size of the slider. Controls track height and thumb diameter. */
|
|
15
46
|
size?: SliderSize;
|
|
16
47
|
/** Color of the range fill and thumb border. */
|
|
17
48
|
color?: SliderColor;
|
|
49
|
+
/**
|
|
50
|
+
* Tick marks along the scale. Numbers are shorthand, so
|
|
51
|
+
* `marks={[0, 50, 100]}` is the common case in one line. For custom captions
|
|
52
|
+
* use objects, or the `Slider.Mark` children form.
|
|
53
|
+
*/
|
|
54
|
+
marks?: Array<number | SliderMark>;
|
|
55
|
+
/**
|
|
56
|
+
* Show the current value in a bubble above the thumb.
|
|
57
|
+
*
|
|
58
|
+
* - `false` (default) — no bubble.
|
|
59
|
+
* - `'always'` — always visible.
|
|
60
|
+
* - `'interact'` — only while the thumb is focused or being dragged, which
|
|
61
|
+
* keeps a dense form quiet until someone is actually using the control.
|
|
62
|
+
*
|
|
63
|
+
* `true` is accepted as an alias for `'always'`.
|
|
64
|
+
*/
|
|
65
|
+
showValue?: boolean | 'always' | 'interact';
|
|
66
|
+
/** Format the bubble's text. Defaults to the raw number. */
|
|
67
|
+
formatValue?: (value: number) => React.ReactNode;
|
|
18
68
|
}
|
|
19
69
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`
|
|
23
|
-
* for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.
|
|
70
|
+
* Slider with an optional scale.
|
|
24
71
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
72
|
+
* Two ways to declare ticks, because the common case should be one line and the
|
|
73
|
+
* custom case should still be possible:
|
|
27
74
|
*
|
|
28
|
-
*
|
|
75
|
+
* ```tsx
|
|
76
|
+
* <Slider marks={[0, 25, 50, 75, 100]} />
|
|
29
77
|
*
|
|
30
|
-
*
|
|
78
|
+
* <Slider showValue="interact">
|
|
79
|
+
* <Slider.Mark value={0}>Off</Slider.Mark>
|
|
80
|
+
* <Slider.Mark value={80}>Recommended</Slider.Mark>
|
|
81
|
+
* </Slider>
|
|
82
|
+
* ```
|
|
31
83
|
*/
|
|
32
|
-
declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement
|
|
84
|
+
declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>> & {
|
|
85
|
+
Mark: typeof SliderMarkComponent;
|
|
86
|
+
};
|
|
33
87
|
export { Slider, sliderThumbVariants, sliderTrackVariants };
|
|
34
88
|
//# sourceMappingURL=slider.d.ts.map
|
package/dist/ui/slider.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,mBAAmB;;8EAYxB,CAAA;AAED,QAAA,MAAM,mBAAmB;;;
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,mBAAmB;;8EAYxB,CAAA;AAED,QAAA,MAAM,mBAAmB;;;8EAwBxB,CAAA;AAKD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACtF,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AAExF,sFAAsF;AACtF,MAAM,WAAW,UAAU;IACzB,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAAC,MAAM,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAE/E;kBAFQ,mBAAmB;;;AAK5B,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAClF,oEAAoE;IACpE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,CAAA;IAClC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC3C,4DAA4D;IAC5D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CACjD;AAkKD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,MAAM;;CAA2D,CAAA;AAKvE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAC,mBAAmB,EAAE,CAAA"}
|