@devalok/shilp-sutra 0.48.0 → 0.49.1
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/BREAKING.json +32 -0
- package/MIGRATION.md +891 -881
- package/dist/_chunks/badge-group.js +52 -65
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/block-shell.js +1 -1
- package/dist/_chunks/chart-container.js +1 -1
- package/dist/_chunks/chat.js +4 -4
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/colors.js +2 -2
- package/dist/_chunks/document-preview.js +4 -4
- package/dist/_chunks/emoji-suggestion.js +5 -5
- package/dist/_chunks/emoji-suggestion.js.map +1 -1
- package/dist/_chunks/emoji.js +1 -1
- package/dist/_chunks/field-state.js +8 -0
- package/dist/_chunks/field-state.js.map +1 -0
- package/dist/_chunks/grid-lines.js +1 -1
- package/dist/_chunks/image-preview.js +7 -7
- package/dist/_chunks/keybinding.js +1 -1
- package/dist/_chunks/link-context.js +1 -1
- package/dist/_chunks/mention-suggestion.js +2 -2
- package/dist/_chunks/mention.js +1 -1
- package/dist/_chunks/motion-provider.js +1 -1
- package/dist/_chunks/normalize-icon.js +1 -1
- package/dist/_chunks/oauth-button.js +2 -2
- package/dist/_chunks/popover.js +55 -52
- package/dist/_chunks/popover.js.map +1 -1
- package/dist/_chunks/primitives.js +155 -155
- package/dist/_chunks/primitives.js.map +1 -1
- package/dist/_chunks/shared.js +5 -5
- package/dist/_chunks/success.js +4 -4
- package/dist/_chunks/tiptap.js +8 -8
- package/dist/_chunks/tooltip.js +1 -1
- package/dist/_chunks/tree-view.js +2 -2
- package/dist/_chunks/use-calendar.js +2 -2
- package/dist/_chunks/use-calendar.js.map +1 -1
- package/dist/_chunks/use-controllable-open.js +15 -0
- package/dist/_chunks/use-controllable-open.js.map +1 -0
- package/dist/_chunks/vendor-client.js +1 -1
- package/dist/_chunks/vendor-utils.js +1 -1
- package/dist/ai/block-renderer.js +7 -7
- package/dist/ai/blocks/error.js +1 -1
- package/dist/ai/blocks/index.js +2 -2
- package/dist/ai/blocks/text.js +1 -1
- package/dist/ai/command-bar.js +6 -6
- package/dist/ai/conversation.js +2 -2
- package/dist/ai/index.js +3 -3
- package/dist/composed/avatar-group.js +1 -1
- package/dist/composed/bulk-action-bar.js +1 -1
- package/dist/composed/command-palette.js +9 -9
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/confirm-dialog.js +3 -3
- package/dist/composed/confirm-dialog.js.map +1 -1
- package/dist/composed/content-card.js +1 -1
- package/dist/composed/date-picker/index.js +13 -13
- package/dist/composed/date-picker/index.js.map +1 -1
- package/dist/composed/emoji-picker.js +4 -4
- package/dist/composed/empty-state.js +1 -1
- package/dist/composed/error-boundary.js +1 -1
- package/dist/composed/error-boundary.js.map +1 -1
- package/dist/composed/extensions/emoji-node.js +1 -1
- package/dist/composed/extensions/emoji-suggestion.js +1 -1
- package/dist/composed/file-preview.js +14 -14
- package/dist/composed/filter-bar.js +1 -1
- package/dist/composed/index.d.ts +3 -1
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/index.js +4 -3
- package/dist/composed/loading-skeleton.js +15 -15
- package/dist/composed/loading-skeleton.js.map +1 -1
- package/dist/composed/multi-select-popover.js +3 -3
- package/dist/composed/page-header.d.ts.map +1 -1
- package/dist/composed/page-header.js +32 -45
- package/dist/composed/page-header.js.map +1 -1
- package/dist/composed/page-skeletons.js +19 -19
- package/dist/composed/page-skeletons.js.map +1 -1
- package/dist/composed/priority-indicator.js +1 -1
- package/dist/composed/responsive-modal.d.ts +39 -0
- package/dist/composed/responsive-modal.d.ts.map +1 -0
- package/dist/composed/responsive-modal.js +212 -0
- package/dist/composed/responsive-modal.js.map +1 -0
- package/dist/composed/rich-chat-input.js +445 -445
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +29 -29
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.d.ts +1 -1
- package/dist/composed/schedule-view.d.ts.map +1 -1
- package/dist/composed/schedule-view.js +48 -54
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/composed/status-badge.d.ts +13 -11
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +54 -130
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/motion/index.js +2 -2
- package/dist/shell/bottom-navbar.js +3 -3
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/index.js +2 -2
- package/dist/shell/link-context.js +2 -2
- package/dist/shell/notification-center.js +3 -3
- package/dist/shell/sidebar.js +2 -2
- package/dist/shell/top-bar.js +2 -2
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tokens/semantic.css +8 -1
- package/dist/ui/accordion.js +11 -11
- package/dist/ui/alert-dialog.js +34 -34
- package/dist/ui/alert.js +1 -1
- package/dist/ui/aspect-ratio.js +1 -1
- package/dist/ui/autocomplete.js +7 -7
- package/dist/ui/avatar.d.ts.map +1 -1
- package/dist/ui/avatar.js +84 -79
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-group.js +1 -1
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/badge.js +1 -1
- package/dist/ui/banner.js +1 -1
- package/dist/ui/breadcrumb.d.ts +0 -1
- package/dist/ui/breadcrumb.d.ts.map +1 -1
- package/dist/ui/breadcrumb.js +58 -35
- package/dist/ui/breadcrumb.js.map +1 -1
- package/dist/ui/button.js +3 -3
- package/dist/ui/card.js +1 -1
- package/dist/ui/charts/area-chart.js +6 -6
- package/dist/ui/charts/bar-chart.js +6 -6
- package/dist/ui/charts/chart-container.js +1 -1
- package/dist/ui/charts/gauge-chart.js +2 -2
- package/dist/ui/charts/index.js +2 -2
- package/dist/ui/charts/line-chart.js +6 -6
- package/dist/ui/charts/pie-chart.js +5 -5
- package/dist/ui/charts/radar-chart.js +5 -5
- package/dist/ui/charts/sparkline.js +2 -2
- package/dist/ui/chat/index.js +2 -2
- package/dist/ui/checkbox.d.ts +4 -2
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +33 -28
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/collapsible.js +5 -5
- package/dist/ui/color-input.js +4 -4
- package/dist/ui/combobox.d.ts +3 -0
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +137 -132
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/context-menu.js +32 -32
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +49 -46
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dot.d.ts +38 -0
- package/dist/ui/dot.d.ts.map +1 -0
- package/dist/ui/dot.js +92 -0
- package/dist/ui/dot.js.map +1 -0
- package/dist/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/ui/dropdown-menu.js +81 -76
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/hover-card.js +6 -6
- package/dist/ui/icon-button.js +1 -1
- package/dist/ui/index.d.ts +3 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +67 -67
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/input-otp.js +1 -1
- package/dist/ui/input-otp.js.map +1 -1
- package/dist/ui/input.d.ts +4 -2
- package/dist/ui/input.d.ts.map +1 -1
- package/dist/ui/input.js +39 -38
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/label.js +1 -1
- package/dist/ui/lib/field-state.d.ts +21 -0
- package/dist/ui/lib/field-state.d.ts.map +1 -0
- package/dist/ui/lib/use-controllable-open.d.ts +32 -0
- package/dist/ui/lib/use-controllable-open.d.ts.map +1 -0
- package/dist/ui/lib/utils.js +4 -4
- package/dist/ui/link.js +1 -1
- package/dist/ui/menubar.js +53 -53
- package/dist/ui/navigation-menu.js +27 -27
- package/dist/ui/number-input.d.ts +4 -2
- package/dist/ui/number-input.d.ts.map +1 -1
- package/dist/ui/number-input.js +52 -51
- package/dist/ui/number-input.js.map +1 -1
- package/dist/ui/oauth-button/index.js +2 -2
- package/dist/ui/pagination.js +1 -1
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/popover.js +2 -2
- package/dist/ui/progress.d.ts +66 -42
- package/dist/ui/progress.d.ts.map +1 -1
- package/dist/ui/progress.js +144 -40
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.d.ts +6 -2
- package/dist/ui/radio.d.ts.map +1 -1
- package/dist/ui/radio.js +44 -33
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/segmented-control.js +1 -1
- package/dist/ui/select.d.ts +1 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +56 -55
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/separator.js +2 -2
- package/dist/ui/separator.js.map +1 -1
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +56 -53
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/sidebar.js +6 -6
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/skeleton.js +1 -1
- package/dist/ui/slider.js +8 -8
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/split-button.js +3 -3
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +123 -126
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/stat-flash.js +1 -1
- package/dist/ui/stepper.js +1 -1
- package/dist/ui/surface.js +2 -2
- package/dist/ui/switch.d.ts +3 -1
- package/dist/ui/switch.d.ts.map +1 -1
- package/dist/ui/switch.js +32 -27
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/table-row-link.js +1 -1
- package/dist/ui/tabs.js +13 -13
- package/dist/ui/text.js +1 -1
- package/dist/ui/textarea.d.ts +3 -3
- package/dist/ui/textarea.d.ts.map +1 -1
- package/dist/ui/textarea.js +19 -18
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast.js +2 -2
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toggle-group.js +1 -1
- package/dist/ui/toggle.js +2 -2
- package/dist/ui/tooltip.d.ts.map +1 -1
- package/dist/ui/tooltip.js +37 -34
- package/dist/ui/tooltip.js.map +1 -1
- package/dist/ui/tree-view/index.js +2 -2
- package/docs/components/ai/ai-command-provider.md +46 -0
- package/docs/components/ai/block-renderer.md +59 -0
- package/docs/components/ai/command-bar.md +78 -0
- package/docs/components/ai/conversation.md +59 -0
- package/docs/components/ai/devadoot-icon.md +41 -0
- package/docs/components/composed/page-header.md +1 -1
- package/docs/components/composed/responsive-modal.md +66 -0
- package/docs/components/composed/schedule-view.md +6 -2
- package/docs/components/ui/breadcrumb.md +1 -1
- package/docs/components/ui/checkbox.md +4 -1
- package/docs/components/ui/combobox.md +4 -0
- package/docs/components/ui/dot.md +61 -0
- package/docs/components/ui/progress.md +54 -16
- package/docs/components/ui/radio.md +6 -2
- package/docs/components/ui/select.md +9 -5
- package/docs/components/ui/switch.md +4 -1
- package/docs/components/ui/table.md +2 -1
- package/llms.txt +11 -3
- package/make-kit/components/form.md +2 -2
- package/make-kit/components/icon.md +2 -2
- package/make-kit/components/overview.md +2 -2
- package/make-kit/components/select.md +1 -1
- package/make-kit/components/table.md +1 -1
- package/mcp-manifest.json +2656 -1068
- package/mcp-manifest.schema.json +18 -0
- package/package.json +11 -6
- package/skill/SKILL.md +1 -1
- package/skill/references/components.md +11 -3
- package/dist/ui/status-dot.d.ts +0 -27
- package/dist/ui/status-dot.d.ts.map +0 -1
- package/dist/ui/status-dot.js +0 -68
- package/dist/ui/status-dot.js.map +0 -1
- package/docs/components/ui/status-dot.md +0 -35
package/dist/ui/select.js
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { $ as e,
|
|
2
|
+
import { Content2$2 as e, Group as t, Icon as n, Item$1 as r, ItemIndicator as i, ItemText as a, Label as o, Portal$1 as s, Root2$3 as c, ScrollDownButton as l, ScrollUpButton as u, Separator as d, Trigger$4 as f, Value as p, Viewport$1 as m } from "../_chunks/primitives.js";
|
|
3
3
|
import { springs as h, tweens as g } from "./lib/motion.js";
|
|
4
|
-
import {
|
|
4
|
+
import { cva as _ } from "../_chunks/vendor-utils.js";
|
|
5
5
|
import { cn as v } from "./lib/utils.js";
|
|
6
6
|
import { Icon as y } from "./icon.js";
|
|
7
7
|
import { useFormField as b } from "./form.js";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
8
|
+
import { resolveFieldState as x } from "../_chunks/field-state.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";
|
|
12
13
|
//#region src/ui/select.tsx
|
|
13
|
-
var
|
|
14
|
+
var k = c, A = t, j = p, M = _("flex w-full items-center justify-between whitespace-nowrap rounded-control placeholder:text-surface-fg-subtle 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", {
|
|
14
15
|
variants: {
|
|
15
16
|
variant: {
|
|
16
17
|
default: "border border-surface-border-strong bg-surface-raised-hover focus-visible:border-accent-7",
|
|
17
18
|
outline: "border border-surface-border-strong bg-transparent focus-visible:border-accent-7",
|
|
18
19
|
ghost: "border border-transparent bg-transparent hover:bg-surface-raised-hover focus-visible:border-accent-7"
|
|
19
20
|
},
|
|
20
|
-
|
|
21
|
+
state: {
|
|
21
22
|
default: "",
|
|
22
23
|
error: "border-error-7 text-error-11 focus-visible:ring-error-9",
|
|
23
24
|
success: "border-success-7",
|
|
@@ -32,59 +33,59 @@ var O = e, k = r, A = u, j = _("flex w-full items-center justify-between whitesp
|
|
|
32
33
|
},
|
|
33
34
|
defaultVariants: {
|
|
34
35
|
variant: "default",
|
|
35
|
-
|
|
36
|
+
state: "default",
|
|
36
37
|
size: "md"
|
|
37
38
|
}
|
|
38
|
-
}),
|
|
39
|
-
let
|
|
40
|
-
return /* @__PURE__ */
|
|
41
|
-
ref:
|
|
42
|
-
className: v(
|
|
43
|
-
variant:
|
|
44
|
-
|
|
45
|
-
size:
|
|
39
|
+
}), N = S.forwardRef(({ className: e, children: t, variant: r, state: i, size: a, ...o }, s) => {
|
|
40
|
+
let c = b(), l = x(i ?? void 0, c.state), u = o["aria-describedby"] ?? c.helperTextId, d = o["aria-required"] ?? c.required;
|
|
41
|
+
return /* @__PURE__ */ w(f, {
|
|
42
|
+
ref: s,
|
|
43
|
+
className: v(M({
|
|
44
|
+
variant: r,
|
|
45
|
+
state: l ?? "default",
|
|
46
|
+
size: a
|
|
46
47
|
}), e),
|
|
47
|
-
"aria-invalid":
|
|
48
|
-
"aria-describedby":
|
|
49
|
-
"aria-required":
|
|
50
|
-
...
|
|
51
|
-
children: [t, /* @__PURE__ */
|
|
48
|
+
"aria-invalid": l === "error" || void 0,
|
|
49
|
+
"aria-describedby": u,
|
|
50
|
+
"aria-required": d || void 0,
|
|
51
|
+
...o,
|
|
52
|
+
children: [t, /* @__PURE__ */ C(n, {
|
|
52
53
|
asChild: !0,
|
|
53
|
-
children: /* @__PURE__ */
|
|
54
|
-
icon:
|
|
54
|
+
children: /* @__PURE__ */ C(y, {
|
|
55
|
+
icon: E,
|
|
55
56
|
size: "sm",
|
|
56
57
|
className: "opacity-50"
|
|
57
58
|
})
|
|
58
59
|
})]
|
|
59
60
|
});
|
|
60
61
|
});
|
|
61
|
-
|
|
62
|
-
var
|
|
62
|
+
N.displayName = f.displayName;
|
|
63
|
+
var P = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(u, {
|
|
63
64
|
ref: n,
|
|
64
65
|
className: v("flex cursor-default items-center justify-center py-ds-02", e),
|
|
65
66
|
...t,
|
|
66
|
-
children: /* @__PURE__ */
|
|
67
|
-
icon:
|
|
67
|
+
children: /* @__PURE__ */ C(y, {
|
|
68
|
+
icon: D,
|
|
68
69
|
size: "sm"
|
|
69
70
|
})
|
|
70
71
|
}));
|
|
71
|
-
|
|
72
|
-
var
|
|
72
|
+
P.displayName = u.displayName;
|
|
73
|
+
var F = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(l, {
|
|
73
74
|
ref: n,
|
|
74
75
|
className: v("flex cursor-default items-center justify-center py-ds-02", e),
|
|
75
76
|
...t,
|
|
76
|
-
children: /* @__PURE__ */
|
|
77
|
-
icon:
|
|
77
|
+
children: /* @__PURE__ */ C(y, {
|
|
78
|
+
icon: E,
|
|
78
79
|
size: "sm"
|
|
79
80
|
})
|
|
80
81
|
}));
|
|
81
|
-
|
|
82
|
-
var
|
|
83
|
-
ref:
|
|
82
|
+
F.displayName = l.displayName;
|
|
83
|
+
var I = S.forwardRef(({ className: t, children: n, position: r = "popper", ...i }, a) => /* @__PURE__ */ C(s, { children: /* @__PURE__ */ C(e, {
|
|
84
|
+
ref: a,
|
|
84
85
|
position: r,
|
|
85
86
|
asChild: !0,
|
|
86
|
-
...
|
|
87
|
-
children: /* @__PURE__ */
|
|
87
|
+
...i,
|
|
88
|
+
children: /* @__PURE__ */ w(O.div, {
|
|
88
89
|
initial: {
|
|
89
90
|
opacity: 0,
|
|
90
91
|
scale: .95
|
|
@@ -97,45 +98,45 @@ var F = x.forwardRef(({ className: e, children: n, position: r = "popper", ...a
|
|
|
97
98
|
...h.snappy,
|
|
98
99
|
opacity: g.fade
|
|
99
100
|
},
|
|
100
|
-
className: v("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating", r === "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",
|
|
101
|
+
className: v("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating", r === "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", t),
|
|
101
102
|
children: [
|
|
102
|
-
/* @__PURE__ */
|
|
103
|
-
/* @__PURE__ */
|
|
103
|
+
/* @__PURE__ */ C(P, {}),
|
|
104
|
+
/* @__PURE__ */ C(m, {
|
|
104
105
|
className: v("p-ds-02", r === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
|
|
105
106
|
children: n
|
|
106
107
|
}),
|
|
107
|
-
/* @__PURE__ */
|
|
108
|
+
/* @__PURE__ */ C(F, {})
|
|
108
109
|
]
|
|
109
110
|
})
|
|
110
111
|
}) }));
|
|
111
|
-
|
|
112
|
-
var
|
|
112
|
+
I.displayName = e.displayName;
|
|
113
|
+
var L = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(o, {
|
|
113
114
|
ref: n,
|
|
114
115
|
className: v("px-ds-03 py-ds-02b text-ds-md font-semibold", e),
|
|
115
116
|
...t
|
|
116
117
|
}));
|
|
117
|
-
|
|
118
|
-
var
|
|
119
|
-
ref:
|
|
118
|
+
L.displayName = o.displayName;
|
|
119
|
+
var R = S.forwardRef(({ className: e, children: t, ...n }, o) => /* @__PURE__ */ w(r, {
|
|
120
|
+
ref: o,
|
|
120
121
|
className: v("relative flex w-full cursor-default select-none items-center rounded-control py-ds-02b pl-ds-03 pr-ds-07 text-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
|
|
121
|
-
...
|
|
122
|
-
children: [/* @__PURE__ */
|
|
122
|
+
...n,
|
|
123
|
+
children: [/* @__PURE__ */ C("span", {
|
|
123
124
|
className: "absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
|
|
124
|
-
children: /* @__PURE__ */
|
|
125
|
-
icon:
|
|
125
|
+
children: /* @__PURE__ */ C(i, { children: /* @__PURE__ */ C(y, {
|
|
126
|
+
icon: T,
|
|
126
127
|
size: "sm"
|
|
127
128
|
}) })
|
|
128
|
-
}), /* @__PURE__ */
|
|
129
|
+
}), /* @__PURE__ */ C(a, {
|
|
129
130
|
className: "min-w-0 line-clamp-1",
|
|
130
131
|
children: t
|
|
131
132
|
})]
|
|
132
133
|
}));
|
|
133
|
-
|
|
134
|
-
var
|
|
134
|
+
R.displayName = r.displayName;
|
|
135
|
+
var z = S.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ C(d, {
|
|
135
136
|
ref: n,
|
|
136
137
|
className: v("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
|
|
137
138
|
...t
|
|
138
139
|
}));
|
|
139
|
-
|
|
140
|
+
z.displayName = d.displayName;
|
|
140
141
|
//#endregion
|
|
141
|
-
export {
|
|
142
|
+
export { k as Select, I as SelectContent, A as SelectGroup, R as SelectItem, L as SelectLabel, F as SelectScrollDownButton, P as SelectScrollUpButton, z as SelectSeparator, N as SelectTrigger, j as SelectValue, M 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 { 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-subtle 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-strong bg-surface-raised-hover focus-visible:border-accent-7',\n outline:\n 'border border-surface-border-strong bg-transparent focus-visible:border-accent-7',\n ghost:\n 'border border-transparent bg-transparent hover:bg-surface-raised-hover focus-visible:border-accent-7',\n },\n color: {\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-ds-sm px-ds-02',\n sm: 'h-ds-sm text-ds-sm px-ds-03',\n md: 'h-ds-md text-ds-md px-ds-04',\n lg: 'h-ds-lg text-ds-md px-ds-05',\n },\n },\n defaultVariants: { variant: 'default', color: '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, color, size, ...props }, ref) => {\n const fieldCtx = useFormField()\n const isError =\n color === 'error' ||\n (fieldCtx.state === 'error' && color == null)\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, color: isError && !color ? 'error' : color, size }), className)}\n aria-invalid={isError || undefined}\n aria-describedby={ariaDescribedBy}\n aria-required={ariaRequired || undefined}\n {...props}\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-ds-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-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised 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 { 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-subtle 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-strong bg-surface-raised-hover focus-visible:border-accent-7',\n outline:\n 'border border-surface-border-strong bg-transparent focus-visible:border-accent-7',\n ghost:\n 'border border-transparent bg-transparent hover:bg-surface-raised-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-ds-sm px-ds-02',\n sm: 'h-ds-sm text-ds-sm px-ds-03',\n md: 'h-ds-md text-ds-md px-ds-04',\n lg: 'h-ds-lg text-ds-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 >\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-ds-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-ds-md outline-hidden transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised focus:bg-surface-raised 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/separator.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Root$4 as e } from "../_chunks/primitives.js";
|
|
3
3
|
import { cn as t } from "./lib/utils.js";
|
|
4
4
|
import * as n from "react";
|
|
5
5
|
import { jsx as r } from "react/jsx-runtime";
|
|
@@ -8,7 +8,7 @@ var i = n.forwardRef(({ className: n, orientation: i = "horizontal", decorative:
|
|
|
8
8
|
ref: c,
|
|
9
9
|
decorative: a,
|
|
10
10
|
orientation: i,
|
|
11
|
-
className: t("shrink-0 bg-surface-border", i === "horizontal" ? "h-
|
|
11
|
+
className: t("shrink-0 bg-surface-border", i === "horizontal" ? "h-px w-full" : "h-full w-px", n),
|
|
12
12
|
...s
|
|
13
13
|
}));
|
|
14
14
|
i.displayName = e.displayName;
|
package/dist/ui/separator.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"separator.js","names":[],"sources":["../../src/ui/separator.tsx"],"sourcesContent":["'use client'\n\nimport * as SeparatorPrimitive from '@primitives/react-separator'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nexport interface SeparatorProps\n extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n /**\n * @deprecated Separator is always a solid hairline. The `gradient` /\n * `gradient-left` / `gradient-right` variants were decorative (and never\n * rendered in production — the interpolated class couldn't be emitted by the\n * Tailwind 4 scanner). They now render solid; the `variant` prop is removed in\n * 0.45.0.\n */\n variant?: 'default' | 'gradient' | 'gradient-left' | 'gradient-right'\n}\n\nconst Separator = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n SeparatorProps\n>(\n (\n // `variant` accepted for back-compat but no longer rendered (see @deprecated above).\n { className, orientation = 'horizontal', decorative = true, variant: _variant, ...props },\n ref,\n ) => {\n return (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n 'shrink-0 bg-surface-border',\n orientation === 'horizontal' ? 'h-
|
|
1
|
+
{"version":3,"file":"separator.js","names":[],"sources":["../../src/ui/separator.tsx"],"sourcesContent":["'use client'\n\nimport * as SeparatorPrimitive from '@primitives/react-separator'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nexport interface SeparatorProps\n extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n /**\n * @deprecated Separator is always a solid hairline. The `gradient` /\n * `gradient-left` / `gradient-right` variants were decorative (and never\n * rendered in production — the interpolated class couldn't be emitted by the\n * Tailwind 4 scanner). They now render solid; the `variant` prop is removed in\n * 0.45.0.\n */\n variant?: 'default' | 'gradient' | 'gradient-left' | 'gradient-right'\n}\n\nconst Separator = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n SeparatorProps\n>(\n (\n // `variant` accepted for back-compat but no longer rendered (see @deprecated above).\n { className, orientation = 'horizontal', decorative = true, variant: _variant, ...props },\n ref,\n ) => {\n return (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n 'shrink-0 bg-surface-border',\n orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"],"mappings":";;;;;;AAmBA,IAAM,IAAY,EAAM,YAMpB,EAAE,cAAW,iBAAc,cAAc,gBAAa,IAAM,SAAS,GAAU,GAAG,KAClF,MAGE,kBAAC,GAAD;CACO;CACO;CACC;CACb,WAAW,EACT,8BACA,MAAgB,eAAe,gBAAgB,eAC/C,EACD;CACD,GAAI;CACJ,CAAA,CAGP;AACD,EAAU,cAAA,EAAsC"}
|
package/dist/ui/sheet.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/ui/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAqB/E,CAAA;AAGD,QAAA,MAAM,YAAY,6GAAyB,CAAA;AAE3C,QAAA,MAAM,UAAU,2GAAuB,CAAA;AAEvC,QAAA,MAAM,WAAW,4CAAwB,CAAA;AAEzC,QAAA,MAAM,YAAY,6JAehB,CAAA;AAmBF,QAAA,MAAM,aAAa;;8EAelB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EACnE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,YAAY,0FAmEhB,CAAA;AAGF,QAAA,MAAM,WAAW,6GAWhB,CAAA;AAGD,QAAA,MAAM,WAAW,6GAWhB,CAAA;AAGD,QAAA,MAAM,UAAU,mKASd,CAAA;AAGF,QAAA,MAAM,gBAAgB,6KASpB,CAAA;AAGF,OAAO,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,UAAU,EACV,YAAY,GACb,CAAA"}
|
package/dist/ui/sheet.js
CHANGED
|
@@ -1,40 +1,43 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Close as e, Content$2 as t, Description as n, Overlay as r, Portal$4 as i, Root$8 as a, Title as o, Trigger$9 as s } from "../_chunks/primitives.js";
|
|
3
3
|
import { motionProps as c, springs as l, tweens as u } from "./lib/motion.js";
|
|
4
|
-
import {
|
|
4
|
+
import { cva as d } from "../_chunks/vendor-utils.js";
|
|
5
5
|
import { cn as f } from "./lib/utils.js";
|
|
6
6
|
import { Icon as p } from "./icon.js";
|
|
7
7
|
import { useIsMobile as m } from "../hooks/use-mobile.js";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
8
|
+
import { useControllableOpen as h } from "../_chunks/use-controllable-open.js";
|
|
9
|
+
import * as g from "react";
|
|
10
|
+
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
11
|
+
import { IconX as y } from "@tabler/icons-react";
|
|
12
|
+
import { AnimatePresence as b, motion as x, useReducedMotion as S } from "framer-motion";
|
|
12
13
|
//#region src/ui/sheet.tsx
|
|
13
|
-
var
|
|
14
|
+
var C = g.createContext({
|
|
14
15
|
open: !1,
|
|
15
16
|
onClose: () => {}
|
|
16
|
-
}),
|
|
17
|
-
let
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
}), w = ({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r, ...i }) => {
|
|
18
|
+
let { open: o, setOpen: s, close: c } = h({
|
|
19
|
+
open: e,
|
|
20
|
+
defaultOpen: t,
|
|
21
|
+
onOpenChange: n
|
|
22
|
+
}), l = g.useMemo(() => ({
|
|
23
|
+
open: o,
|
|
24
|
+
onClose: c
|
|
25
|
+
}), [o, c]);
|
|
26
|
+
return /* @__PURE__ */ _(C.Provider, {
|
|
27
|
+
value: l,
|
|
28
|
+
children: /* @__PURE__ */ _(a, {
|
|
29
|
+
open: o,
|
|
30
|
+
onOpenChange: s,
|
|
28
31
|
...i,
|
|
29
32
|
children: r
|
|
30
33
|
})
|
|
31
34
|
});
|
|
32
35
|
};
|
|
33
|
-
|
|
34
|
-
var
|
|
36
|
+
w.displayName = "Sheet";
|
|
37
|
+
var T = s, E = e, D = i, O = g.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ _(r, {
|
|
35
38
|
forceMount: !0,
|
|
36
39
|
asChild: !0,
|
|
37
|
-
children: /* @__PURE__ */
|
|
40
|
+
children: /* @__PURE__ */ _(x.div, {
|
|
38
41
|
ref: n,
|
|
39
42
|
className: f("fixed inset-0 z-modal bg-overlay", e),
|
|
40
43
|
initial: { opacity: 0 },
|
|
@@ -44,18 +47,18 @@ var w = i, T = n, E = e, D = h.forwardRef(({ className: e, ...t }, n) => /* @__P
|
|
|
44
47
|
...c(t)
|
|
45
48
|
})
|
|
46
49
|
}));
|
|
47
|
-
|
|
48
|
-
var
|
|
50
|
+
O.displayName = r.displayName;
|
|
51
|
+
var k = {
|
|
49
52
|
top: { y: "-100%" },
|
|
50
53
|
bottom: { y: "100%" },
|
|
51
54
|
left: { x: "-100%" },
|
|
52
55
|
right: { x: "100%" }
|
|
53
|
-
},
|
|
56
|
+
}, A = {
|
|
54
57
|
top: { y: 0 },
|
|
55
58
|
bottom: { y: 0 },
|
|
56
59
|
left: { x: 0 },
|
|
57
60
|
right: { x: 0 }
|
|
58
|
-
},
|
|
61
|
+
}, j = d("fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay", {
|
|
59
62
|
variants: { side: {
|
|
60
63
|
top: "inset-x-0 top-0 border-b border-surface-border-strong",
|
|
61
64
|
bottom: "inset-x-0 bottom-0 border-t border-surface-border-strong",
|
|
@@ -63,23 +66,23 @@ var O = {
|
|
|
63
66
|
right: "inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm"
|
|
64
67
|
} },
|
|
65
68
|
defaultVariants: { side: "right" }
|
|
66
|
-
}),
|
|
67
|
-
let u = m(), d = r !== !1 && u,
|
|
69
|
+
}), M = g.forwardRef(({ side: n = "right", responsive: r, className: i, children: a, ...o }, s) => {
|
|
70
|
+
let u = m(), d = r !== !1 && u, h = S(), { open: w, onClose: T } = g.useContext(C), E = d ? "bottom" : n ?? "right", M = g.useRef(null), N = g.useCallback((e) => {
|
|
68
71
|
M.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
|
|
69
72
|
}, [s]);
|
|
70
|
-
return /* @__PURE__ */
|
|
73
|
+
return /* @__PURE__ */ _(b, { children: w && /* @__PURE__ */ v(D, {
|
|
71
74
|
forceMount: !0,
|
|
72
|
-
children: [/* @__PURE__ */
|
|
75
|
+
children: [/* @__PURE__ */ _(O, {}), /* @__PURE__ */ _(t, {
|
|
73
76
|
forceMount: !0,
|
|
74
77
|
asChild: !0,
|
|
75
|
-
children: /* @__PURE__ */
|
|
78
|
+
children: /* @__PURE__ */ v(x.div, {
|
|
76
79
|
ref: N,
|
|
77
|
-
className: f(
|
|
78
|
-
initial:
|
|
79
|
-
animate:
|
|
80
|
-
exit:
|
|
80
|
+
className: f(j({ side: E }), i),
|
|
81
|
+
initial: k[E],
|
|
82
|
+
animate: A[E],
|
|
83
|
+
exit: k[E],
|
|
81
84
|
transition: l.smooth,
|
|
82
|
-
drag: d && !
|
|
85
|
+
drag: d && !h ? "y" : !1,
|
|
83
86
|
dragConstraints: { top: 0 },
|
|
84
87
|
dragElastic: .2,
|
|
85
88
|
onDragEnd: d ? (e, t) => {
|
|
@@ -88,17 +91,17 @@ var O = {
|
|
|
88
91
|
} : void 0,
|
|
89
92
|
...c(o),
|
|
90
93
|
children: [
|
|
91
|
-
d && /* @__PURE__ */
|
|
94
|
+
d && /* @__PURE__ */ _("div", {
|
|
92
95
|
className: "flex justify-center pt-ds-03 pb-ds-02",
|
|
93
|
-
children: /* @__PURE__ */
|
|
96
|
+
children: /* @__PURE__ */ _("div", { className: "h-1 w-8 rounded-pill bg-surface-border" })
|
|
94
97
|
}),
|
|
95
|
-
/* @__PURE__ */
|
|
98
|
+
/* @__PURE__ */ v(e, {
|
|
96
99
|
title: "Close",
|
|
97
100
|
className: "absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
|
|
98
|
-
children: [/* @__PURE__ */
|
|
99
|
-
icon:
|
|
101
|
+
children: [/* @__PURE__ */ _(p, {
|
|
102
|
+
icon: y,
|
|
100
103
|
size: "sm"
|
|
101
|
-
}), /* @__PURE__ */
|
|
104
|
+
}), /* @__PURE__ */ _("span", {
|
|
102
105
|
className: "sr-only",
|
|
103
106
|
children: "Close"
|
|
104
107
|
})]
|
|
@@ -109,30 +112,30 @@ var O = {
|
|
|
109
112
|
})]
|
|
110
113
|
}) });
|
|
111
114
|
});
|
|
112
|
-
|
|
113
|
-
var
|
|
115
|
+
M.displayName = t.displayName;
|
|
116
|
+
var N = g.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ _("div", {
|
|
114
117
|
ref: n,
|
|
115
118
|
className: f("flex flex-col space-y-ds-03 text-center sm:text-left", e),
|
|
116
119
|
...t
|
|
117
120
|
}));
|
|
118
|
-
|
|
119
|
-
var
|
|
121
|
+
N.displayName = "SheetHeader";
|
|
122
|
+
var P = g.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ _("div", {
|
|
120
123
|
ref: n,
|
|
121
124
|
className: f("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03", e),
|
|
122
125
|
...t
|
|
123
126
|
}));
|
|
124
|
-
|
|
125
|
-
var
|
|
127
|
+
P.displayName = "SheetFooter";
|
|
128
|
+
var F = g.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ _(o, {
|
|
126
129
|
ref: n,
|
|
127
130
|
className: f("text-ds-lg font-semibold text-surface-fg", e),
|
|
128
131
|
...t
|
|
129
132
|
}));
|
|
130
|
-
|
|
131
|
-
var
|
|
132
|
-
ref:
|
|
133
|
+
F.displayName = o.displayName;
|
|
134
|
+
var I = g.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ _(n, {
|
|
135
|
+
ref: r,
|
|
133
136
|
className: f("text-ds-md text-surface-fg-muted", e),
|
|
134
137
|
...t
|
|
135
138
|
}));
|
|
136
|
-
|
|
139
|
+
I.displayName = n.displayName;
|
|
137
140
|
//#endregion
|
|
138
|
-
export {
|
|
141
|
+
export { w as Sheet, E as SheetClose, M as SheetContent, I as SheetDescription, P as SheetFooter, N as SheetHeader, O as SheetOverlay, D as SheetPortal, F as SheetTitle, T as SheetTrigger };
|
package/dist/ui/sheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n}) => {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n const isControlled = controlledOpen !== undefined\n const open = isControlled ? controlledOpen : uncontrolledOpen\n\n const handleOpenChange = React.useCallback(\n (value: boolean) => {\n if (!isControlled) setUncontrolledOpen(value)\n onOpenChange?.(value)\n },\n [isControlled, onOpenChange],\n )\n\n const contextValue = React.useMemo(\n () => ({ open, onClose: () => handleOpenChange(false) }),\n [open, handleOpenChange],\n )\n\n return (\n <SheetOpenContext.Provider value={contextValue}>\n <SheetPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props}>\n {children}\n </SheetPrimitive.Root>\n </SheetOpenContext.Provider>\n )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay forceMount asChild>\n <motion.div\n ref={ref}\n className={cn('fixed inset-0 z-modal bg-overlay', className)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={tweens.fade}\n {...motionProps(props)}\n />\n </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n top: { y: '-100%' },\n bottom: { y: '100%' },\n left: { x: '-100%' },\n right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n top: { y: 0 },\n bottom: { y: 0 },\n left: { x: 0 },\n right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n 'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {\n /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n const isMobileRaw = useIsMobile()\n const isMobile = responsive !== false && isMobileRaw\n const isReduced = useReducedMotion()\n const { open, onClose } = React.useContext(SheetOpenContext)\n const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n const internalRef = React.useRef<HTMLDivElement>(null)\n const composedRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n internalRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n },\n [ref],\n )\n\n return (\n <AnimatePresence>\n {open && (\n <SheetPortal forceMount>\n <SheetOverlay />\n <SheetPrimitive.Content forceMount asChild>\n <motion.div\n ref={composedRef}\n className={cn(sheetVariants({ side: effectiveSide }), className)}\n initial={slideInitial[effectiveSide]}\n animate={slideAnimate[effectiveSide]}\n exit={slideInitial[effectiveSide]}\n transition={springs.smooth}\n drag={isMobile && !isReduced ? 'y' : false}\n dragConstraints={{ top: 0 }}\n dragElastic={0.2}\n onDragEnd={\n isMobile\n ? (\n _: unknown,\n info: { offset: { y: number }; velocity: { y: number } },\n ) => {\n const h =\n internalRef.current?.getBoundingClientRect().height ?? 300\n if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n onClose()\n }\n : undefined\n }\n {...motionProps(props)}\n >\n {isMobile && (\n <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n </div>\n )}\n <SheetPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n <Icon icon={IconX} size=\"sm\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n {children}\n </motion.div>\n </SheetPrimitive.Content>\n </SheetPortal>\n )}\n </AnimatePresence>\n )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col space-y-ds-03 text-center sm:text-left',\n className,\n )}\n {...props}\n />\n ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n className,\n )}\n {...props}\n />\n ),\n)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn('text-ds-lg font-semibold text-surface-fg', className)}\n {...props}\n />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn('text-ds-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sheet.js","names":[],"sources":["../../src/ui/sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as SheetPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from './icon'\nimport { motionProps,springs, tweens } from './lib/motion'\nimport { useControllableOpen } from './lib/use-controllable-open'\nimport { cn } from './lib/utils'\n\n// ── Internal open-state context ──────────────────────────────────────\n\nconst SheetOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\n/**\n * Sheet compound component — accessible sliding panel anchored to a screen edge, with focus trap\n * and Escape dismissal. Built on the Dialog primitive.\n *\n * **Parts (in composition order):**\n * - `Sheet` — manages open/closed state (this root)\n * - `SheetTrigger` — element that opens the sheet (use `asChild` to render your own button)\n * - `SheetContent` — the sliding panel (use `side=\"right\"|\"left\"|\"top\"|\"bottom\"`, default `\"right\"`)\n * - `SheetHeader` — optional layout wrapper for title + description\n * - `SheetTitle` — required for accessibility (sets the sheet's ARIA label)\n * - `SheetDescription` — optional subtitle text\n * - `SheetFooter` — optional layout wrapper for action buttons\n * - `SheetClose` — manual close trigger (a close button is already built into SheetContent)\n * - `SheetPortal` — low-level portal wrapper (exported for custom layout; used internally by SheetContent)\n * - `SheetOverlay` — the backdrop element (exported for custom overlay styling)\n *\n * @compound\n *\n * Note: The `side` prop goes on `SheetContent`, NOT on `Sheet`.\n * A close button is auto-rendered in the top corner of `SheetContent`.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n */\nconst Sheet: React.FC<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>> = ({\n open: controlledOpen,\n defaultOpen = false,\n onOpenChange,\n children,\n ...props\n}) => {\n const { open, setOpen, close } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n const contextValue = React.useMemo(\n () => ({ open, onClose: close }),\n [open, close],\n )\n\n return (\n <SheetOpenContext.Provider value={contextValue}>\n <SheetPrimitive.Root open={open} onOpenChange={setOpen} {...props}>\n {children}\n </SheetPrimitive.Root>\n </SheetOpenContext.Provider>\n )\n}\nSheet.displayName = 'Sheet'\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay forceMount asChild>\n <motion.div\n ref={ref}\n className={cn('fixed inset-0 z-modal bg-overlay', className)}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={tweens.fade}\n {...motionProps(props)}\n />\n </SheetPrimitive.Overlay>\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\n// ── Slide direction map ──────────────────────────────────────────────\n\nconst slideInitial = {\n top: { y: '-100%' },\n bottom: { y: '100%' },\n left: { x: '-100%' },\n right: { x: '100%' },\n} as const\n\nconst slideAnimate = {\n top: { y: 0 },\n bottom: { y: 0 },\n left: { x: 0 },\n right: { x: 0 },\n} as const\n\nconst sheetVariants = cva(\n 'fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay',\n {\n variants: {\n side: {\n top: 'inset-x-0 top-0 border-b border-surface-border-strong',\n bottom: 'inset-x-0 bottom-0 border-t border-surface-border-strong',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-surface-border-strong sm:max-w-sm',\n right: 'inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm',\n },\n },\n defaultVariants: {\n side: 'right',\n },\n },\n)\n\n/**\n * Props for SheetContent — the sliding panel content that appears from one of four screen edges.\n * Built on the Dialog primitive: accessible, focus-trapped, and dismissible with Escape.\n *\n * **`side` variants:** `right` (default, slide from right) | `left` | `top` | `bottom`\n *\n * **Usage pattern:** Wrap the whole sheet in `<Sheet>`, add a `<SheetTrigger>`, and put content\n * inside `<SheetContent>`. Use `<SheetHeader>`, `<SheetTitle>`, and `<SheetDescription>` for\n * accessible structure. A close button is auto-rendered in the top corner.\n *\n * @example\n * // Right-side settings panel (default):\n * <Sheet>\n * <SheetTrigger asChild><Button>Open settings</Button></SheetTrigger>\n * <SheetContent>\n * <SheetHeader>\n * <SheetTitle>Account settings</SheetTitle>\n * <SheetDescription>Manage your profile and preferences.</SheetDescription>\n * </SheetHeader>\n * </SheetContent>\n * </Sheet>\n *\n * @example\n * // Bottom sheet for a mobile-friendly action drawer:\n * <Sheet>\n * <SheetTrigger asChild><Button variant=\"ghost\">More options</Button></SheetTrigger>\n * <SheetContent side=\"bottom\">\n * <SheetTitle>Actions</SheetTitle>\n * <div className=\"flex flex-col gap-ds-03 mt-ds-05\">\n * <Button variant=\"outline\" color=\"error\" fullWidth>Delete item</Button>\n * <Button variant=\"outline\" fullWidth>Duplicate</Button>\n * </div>\n * </SheetContent>\n * </Sheet>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {\n /** When true (default), Sheet slides from bottom on mobile with swipe-to-dismiss. */\n responsive?: boolean\n}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = 'right', responsive, className, children, ...props }, ref) => {\n const isMobileRaw = useIsMobile()\n const isMobile = responsive !== false && isMobileRaw\n const isReduced = useReducedMotion()\n const { open, onClose } = React.useContext(SheetOpenContext)\n const effectiveSide = isMobile ? 'bottom' : (side ?? 'right')\n\n const internalRef = React.useRef<HTMLDivElement>(null)\n const composedRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n internalRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n },\n [ref],\n )\n\n return (\n <AnimatePresence>\n {open && (\n <SheetPortal forceMount>\n <SheetOverlay />\n <SheetPrimitive.Content forceMount asChild>\n <motion.div\n ref={composedRef}\n className={cn(sheetVariants({ side: effectiveSide }), className)}\n initial={slideInitial[effectiveSide]}\n animate={slideAnimate[effectiveSide]}\n exit={slideInitial[effectiveSide]}\n transition={springs.smooth}\n drag={isMobile && !isReduced ? 'y' : false}\n dragConstraints={{ top: 0 }}\n dragElastic={0.2}\n onDragEnd={\n isMobile\n ? (\n _: unknown,\n info: { offset: { y: number }; velocity: { y: number } },\n ) => {\n const h =\n internalRef.current?.getBoundingClientRect().height ?? 300\n if (info.offset.y > h * 0.3 || info.velocity.y > 500)\n onClose()\n }\n : undefined\n }\n {...motionProps(props)}\n >\n {isMobile && (\n <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n </div>\n )}\n <SheetPrimitive.Close title=\"Close\" className=\"absolute right-ds-05 top-ds-05 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none\">\n <Icon icon={IconX} size=\"sm\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n {children}\n </motion.div>\n </SheetPrimitive.Content>\n </SheetPortal>\n )}\n </AnimatePresence>\n )\n})\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col space-y-ds-03 text-center sm:text-left',\n className,\n )}\n {...props}\n />\n ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n className,\n )}\n {...props}\n />\n ),\n)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn('text-ds-lg font-semibold text-surface-fg', className)}\n {...props}\n />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn('text-ds-md text-surface-fg-muted', className)}\n {...props}\n />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,IAAmB,EAAM,cAAsD;CAAE,MAAM;CAAO,eAAe;CAAI,CAAC,EAgDlH,KAA+E,EACnF,MAAM,GACN,iBAAc,IACd,iBACA,aACA,GAAG,QACC;CACJ,IAAM,EAAE,SAAM,YAAS,aAAU,EAAoB;EAAE,MAAM;EAAgB;EAAa;EAAc,CAAC,EAEnG,IAAe,EAAM,eAClB;EAAE;EAAM,SAAS;EAAO,GAC/B,CAAC,GAAM,EAAM,CACd;AAED,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,GAAD;GAA2B;GAAM,cAAc;GAAS,GAAI;GACzD;GACmB,CAAA;EACI,CAAA;;AAGhC,EAAM,cAAc;AAEpB,IAAM,IAAe,GAEf,IAAa,GAEb,IAAc,GAEd,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CAAwB,YAAA;CAAW,SAAA;WACjC,kBAAC,EAAO,KAAR;EACO;EACL,WAAW,EAAG,oCAAoC,EAAU;EAC5D,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,MAAM,EAAE,SAAS,GAAG;EACpB,YAAY,EAAO;EACnB,GAAI,EAAY,EAAM;EACtB,CAAA;CACqB,CAAA,CACzB;AACF,EAAa,cAAA,EAAqC;AAIlD,IAAM,IAAe;CACnB,KAAK,EAAE,GAAG,SAAS;CACnB,QAAQ,EAAE,GAAG,QAAQ;CACrB,MAAM,EAAE,GAAG,SAAS;CACpB,OAAO,EAAE,GAAG,QAAQ;CACrB,EAEK,IAAe;CACnB,KAAK,EAAE,GAAG,GAAG;CACb,QAAQ,EAAE,GAAG,GAAG;CAChB,MAAM,EAAE,GAAG,GAAG;CACd,OAAO,EAAE,GAAG,GAAG;CAChB,EAEK,IAAgB,EACpB,qEACA;CACE,UAAU,EACR,MAAM;EACJ,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF,EA6CK,IAAe,EAAM,YAGxB,EAAE,UAAO,SAAS,eAAY,cAAW,aAAU,GAAG,KAAS,MAAQ;CACxE,IAAM,IAAc,GAAa,EAC3B,IAAW,MAAe,MAAS,GACnC,IAAY,GAAkB,EAC9B,EAAE,SAAM,eAAY,EAAM,WAAW,EAAiB,EACtD,IAAgB,IAAW,WAAY,KAAQ,SAE/C,IAAc,EAAM,OAAuB,KAAK,EAChD,IAAc,EAAM,aACvB,MAAgC;AAE/B,EADA,EAAY,UAAU,GAClB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN;AAED,QACE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EAAa,YAAA;YAAb,CACE,kBAAC,GAAD,EAAgB,CAAA,EAChB,kBAAC,GAAD;GAAwB,YAAA;GAAW,SAAA;aACjC,kBAAC,EAAO,KAAR;IACE,KAAK;IACL,WAAW,EAAG,EAAc,EAAE,MAAM,GAAe,CAAC,EAAE,EAAU;IAChE,SAAS,EAAa;IACtB,SAAS,EAAa;IACtB,MAAM,EAAa;IACnB,YAAY,EAAQ;IACpB,MAAM,KAAY,CAAC,IAAY,MAAM;IACrC,iBAAiB,EAAE,KAAK,GAAG;IAC3B,aAAa;IACb,WACE,KAEM,GACA,MACG;KACH,IAAM,IACJ,EAAY,SAAS,uBAAuB,CAAC,UAAU;AACzD,MAAI,EAAK,OAAO,IAAI,IAAI,MAAO,EAAK,SAAS,IAAI,QAC/C,GAAS;QAEb,KAAA;IAEN,GAAI,EAAY,EAAM;cAvBxB;KAyBG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,OAAD,EAAK,WAAU,0CAA2C,CAAA;MACtD,CAAA;KAER,kBAAC,GAAD;MAAsB,OAAM;MAAQ,WAAU;gBAA9C,CACE,kBAAC,GAAD;OAAM,MAAM;OAAO,MAAK;OAAO,CAAA,EAC/B,kBAAC,QAAD;OAAM,WAAU;iBAAU;OAAY,CAAA,CACjB;;KACtB;KACU;;GACU,CAAA,CACb;KAEA,CAAA;EAEpB;AACF,EAAa,cAAA,EAAqC;AAElD,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wDACA,EACD;CACD,GAAI;CACJ,CAAA,CAEL;AACD,EAAY,cAAc;AAE1B,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,qEACA,EACD;CACD,GAAI;CACJ,CAAA,CAEL;AACD,EAAY,cAAc;AAE1B,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,4CAA4C,EAAU;CACpE,GAAI;CACJ,CAAA,CACF;AACF,EAAW,cAAA,EAAmC;AAE9C,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,oCAAoC,EAAU;CAC5D,GAAI;CACJ,CAAA,CACF;AACF,EAAiB,cAAA,EAAyC"}
|
package/dist/ui/sidebar.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Slot as e } from "../_chunks/primitives.js";
|
|
3
3
|
import { springs as t } from "./lib/motion.js";
|
|
4
|
-
import {
|
|
4
|
+
import { cva as n } from "../_chunks/vendor-utils.js";
|
|
5
5
|
import { cn as r } from "./lib/utils.js";
|
|
6
6
|
import { Icon as i } from "./icon.js";
|
|
7
7
|
import { useIsMobile as a } from "../hooks/use-mobile.js";
|
|
@@ -92,7 +92,7 @@ var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanv
|
|
|
92
92
|
let { isMobile: c, state: l, openMobile: u, setOpenMobile: d } = A();
|
|
93
93
|
return n === "none" ? /* @__PURE__ */ T("aside", {
|
|
94
94
|
"aria-label": "Sidebar",
|
|
95
|
-
className: r("flex h-full w-(--sidebar-width) flex-col bg-surface-
|
|
95
|
+
className: r("flex h-full w-(--sidebar-width) flex-col bg-surface-chrome text-surface-fg", i),
|
|
96
96
|
ref: s,
|
|
97
97
|
...o,
|
|
98
98
|
children: a
|
|
@@ -103,7 +103,7 @@ var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanv
|
|
|
103
103
|
children: /* @__PURE__ */ T(h, {
|
|
104
104
|
"data-sidebar": "sidebar",
|
|
105
105
|
"data-mobile": "true",
|
|
106
|
-
className: "w-(--sidebar-width) bg-surface-
|
|
106
|
+
className: "w-(--sidebar-width) bg-surface-chrome p-0 text-surface-fg [&>button]:hidden",
|
|
107
107
|
style: { "--sidebar-width": ae },
|
|
108
108
|
side: e,
|
|
109
109
|
responsive: !1,
|
|
@@ -130,7 +130,7 @@ var M = _(({ side: e = "left", variant: t = "sidebar", collapsible: n = "offcanv
|
|
|
130
130
|
children: /* @__PURE__ */ T("aside", {
|
|
131
131
|
"aria-label": "Sidebar",
|
|
132
132
|
"data-sidebar": "sidebar",
|
|
133
|
-
className: "flex h-full w-full flex-col bg-surface-
|
|
133
|
+
className: "flex h-full w-full flex-col bg-surface-chrome group-data-[variant=floating]:rounded-surface group-data-[variant=floating]:shadow-raised",
|
|
134
134
|
children: a
|
|
135
135
|
})
|
|
136
136
|
})]
|
|
@@ -168,7 +168,7 @@ var P = _(({ className: e, ...t }, n) => {
|
|
|
168
168
|
tabIndex: -1,
|
|
169
169
|
onClick: i,
|
|
170
170
|
title: "Toggle Sidebar",
|
|
171
|
-
className: r("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-
|
|
171
|
+
className: r("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", "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-surface-raised-hover", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", e),
|
|
172
172
|
...t
|
|
173
173
|
});
|
|
174
174
|
});
|