@devalok/shilp-sutra 0.55.1 → 0.57.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/BREAKING.json +13 -0
- package/MIGRATION.md +163 -0
- package/README.md +16 -1
- package/dist/_chunks/badge-group.js +92 -78
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chat.js +91 -75
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/document-preview.js +1 -1
- package/dist/_chunks/document-preview.js.map +1 -1
- package/dist/_chunks/emoji-suggestion.js +32 -30
- package/dist/_chunks/emoji-suggestion.js.map +1 -1
- package/dist/_chunks/mention-suggestion.js +36 -35
- package/dist/_chunks/mention-suggestion.js.map +1 -1
- package/dist/_chunks/oauth-button.js +1 -1
- package/dist/_chunks/oauth-button.js.map +1 -1
- package/dist/_chunks/primitives-internal.js +437 -537
- package/dist/_chunks/primitives-internal.js.map +1 -1
- package/dist/_chunks/success.js +2 -2
- package/dist/_chunks/success.js.map +1 -1
- package/dist/_chunks/tree-view.js +1 -1
- package/dist/_chunks/tree-view.js.map +1 -1
- package/dist/_chunks/use-calendar.js +4 -4
- package/dist/_chunks/use-calendar.js.map +1 -1
- package/dist/ai/blocks/text.js +1 -1
- package/dist/ai/blocks/text.js.map +1 -1
- package/dist/ai/command-bar.js +9 -9
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.js +2 -2
- package/dist/ai/conversation.js.map +1 -1
- package/dist/composed/activity-feed.js +1 -1
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/avatar-group.d.ts +7 -2
- package/dist/composed/avatar-group.d.ts.map +1 -1
- package/dist/composed/avatar-group.js +3 -3
- package/dist/composed/avatar-group.js.map +1 -1
- package/dist/composed/command-palette.js +7 -7
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/content-card.js +20 -20
- package/dist/composed/content-card.js.map +1 -1
- package/dist/composed/date-picker/index.js +4 -4
- package/dist/composed/date-picker/index.js.map +1 -1
- package/dist/composed/diff.d.ts +23 -2
- package/dist/composed/diff.d.ts.map +1 -1
- package/dist/composed/diff.js +341 -260
- package/dist/composed/diff.js.map +1 -1
- package/dist/composed/emoji-picker.js +3 -3
- package/dist/composed/emoji-picker.js.map +1 -1
- package/dist/composed/error-boundary.js +2 -2
- package/dist/composed/error-boundary.js.map +1 -1
- package/dist/composed/extensions/emoji-node.js +8 -7
- package/dist/composed/extensions/emoji-node.js.map +1 -1
- package/dist/composed/file-preview.js +1 -1
- package/dist/composed/file-preview.js.map +1 -1
- package/dist/composed/filter-bar.js +1 -1
- package/dist/composed/filter-bar.js.map +1 -1
- package/dist/composed/inline-edit.js +1 -1
- package/dist/composed/inline-edit.js.map +1 -1
- package/dist/composed/loading-skeleton.js +3 -3
- package/dist/composed/loading-skeleton.js.map +1 -1
- package/dist/composed/master-detail.js +1 -1
- package/dist/composed/master-detail.js.map +1 -1
- package/dist/composed/member-picker.js +1 -1
- package/dist/composed/member-picker.js.map +1 -1
- package/dist/composed/multi-select-popover.js +1 -1
- package/dist/composed/multi-select-popover.js.map +1 -1
- package/dist/composed/page-skeletons.js +4 -4
- package/dist/composed/page-skeletons.js.map +1 -1
- package/dist/composed/responsive-modal.js +1 -1
- package/dist/composed/responsive-modal.js.map +1 -1
- package/dist/composed/rich-chat-input.js +549 -540
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +206 -198
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.js +5 -5
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +4 -3
- package/dist/hooks/use-container-size.d.ts +18 -0
- package/dist/hooks/use-container-size.d.ts.map +1 -0
- package/dist/hooks/use-container-size.js +28 -0
- package/dist/hooks/use-container-size.js.map +1 -0
- package/dist/shell/app-shell.d.ts +101 -0
- package/dist/shell/app-shell.d.ts.map +1 -0
- package/dist/shell/app-shell.js +76 -0
- package/dist/shell/app-shell.js.map +1 -0
- package/dist/shell/bottom-navbar.js +2 -2
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/index.d.ts +1 -0
- package/dist/shell/index.d.ts.map +1 -1
- package/dist/shell/index.js +6 -5
- package/dist/shell/notification-center.js +4 -4
- 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 +7 -7
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/tokens/generate-scale.d.ts +49 -0
- package/dist/tokens/generate-scale.d.ts.map +1 -1
- package/dist/tokens/primitives.css +29 -26
- package/dist/tokens/semantic.css +98 -39
- package/dist/tokens/variants.css +1 -1
- package/dist/ui/accordion.js +1 -1
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/alert-dialog.js +1 -1
- package/dist/ui/alert-dialog.js.map +1 -1
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +36 -36
- package/dist/ui/alert.js.map +1 -1
- package/dist/ui/avatar.js +44 -44
- package/dist/ui/avatar.js.map +1 -1
- package/dist/ui/badge-indicator.js +1 -1
- package/dist/ui/badge-indicator.js.map +1 -1
- package/dist/ui/badge.d.ts +47 -33
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/banner.js +26 -26
- package/dist/ui/banner.js.map +1 -1
- package/dist/ui/button.js +35 -35
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.js +42 -42
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/chat/date-separator.d.ts +8 -1
- package/dist/ui/chat/date-separator.d.ts.map +1 -1
- package/dist/ui/checkbox.js +1 -1
- package/dist/ui/checkbox.js.map +1 -1
- package/dist/ui/code.js +2 -2
- package/dist/ui/code.js.map +1 -1
- package/dist/ui/color-input.js +3 -3
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/combobox.js +139 -139
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/context-menu.js +4 -4
- package/dist/ui/context-menu.js.map +1 -1
- package/dist/ui/data-table-body.d.ts +3 -1
- package/dist/ui/data-table-body.d.ts.map +1 -1
- package/dist/ui/data-table-body.js +93 -92
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-bulk-actions.d.ts +7 -1
- package/dist/ui/data-table-bulk-actions.d.ts.map +1 -1
- package/dist/ui/data-table-bulk-actions.js +14 -8
- package/dist/ui/data-table-bulk-actions.js.map +1 -1
- package/dist/ui/data-table-card.d.ts.map +1 -1
- package/dist/ui/data-table-card.js +66 -47
- package/dist/ui/data-table-card.js.map +1 -1
- package/dist/ui/data-table-context.d.ts +4 -0
- package/dist/ui/data-table-context.d.ts.map +1 -1
- 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 +18 -15
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table-pagination.js +3 -3
- package/dist/ui/data-table-pagination.js.map +1 -1
- package/dist/ui/data-table-toolbar.d.ts +11 -1
- package/dist/ui/data-table-toolbar.d.ts.map +1 -1
- package/dist/ui/data-table-toolbar.js +7 -7
- package/dist/ui/data-table-toolbar.js.map +1 -1
- package/dist/ui/data-table.d.ts +52 -5
- package/dist/ui/data-table.d.ts.map +1 -1
- package/dist/ui/data-table.js +181 -169
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/dialog.js +1 -1
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/dot.js +13 -13
- package/dist/ui/dot.js.map +1 -1
- package/dist/ui/dropdown-menu.js +4 -4
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/file-upload.js +3 -3
- package/dist/ui/file-upload.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.js +30 -30
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/lib/utils.js +2 -1
- package/dist/ui/lib/utils.js.map +1 -1
- package/dist/ui/menubar.js +5 -5
- package/dist/ui/menubar.js.map +1 -1
- package/dist/ui/navigation-menu.js +1 -1
- package/dist/ui/navigation-menu.js.map +1 -1
- package/dist/ui/number-input.js +36 -36
- package/dist/ui/number-input.js.map +1 -1
- package/dist/ui/pagination.js +1 -1
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/progress-ring.js +2 -2
- package/dist/ui/progress-ring.js.map +1 -1
- package/dist/ui/progress.d.ts.map +1 -1
- package/dist/ui/progress.js +66 -62
- package/dist/ui/progress.js.map +1 -1
- package/dist/ui/radio.js +1 -1
- package/dist/ui/radio.js.map +1 -1
- package/dist/ui/select.js +61 -61
- package/dist/ui/select.js.map +1 -1
- package/dist/ui/sheet.js +47 -47
- package/dist/ui/sheet.js.map +1 -1
- package/dist/ui/sidebar.js +132 -132
- package/dist/ui/sidebar.js.map +1 -1
- package/dist/ui/skeleton.js +39 -39
- package/dist/ui/slider.js +18 -18
- package/dist/ui/slider.js.map +1 -1
- package/dist/ui/split-button.js +3 -3
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stat-card.js +1 -1
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/stepper.js +2 -2
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/surface.d.ts.map +1 -1
- package/dist/ui/surface.js +11 -11
- package/dist/ui/surface.js.map +1 -1
- package/dist/ui/switch.js +1 -1
- package/dist/ui/switch.js.map +1 -1
- package/dist/ui/table.js +1 -1
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +48 -48
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/text.js +8 -8
- package/dist/ui/textarea.js +17 -17
- package/dist/ui/textarea.js.map +1 -1
- package/dist/ui/toast.js +1 -1
- package/dist/ui/toast.js.map +1 -1
- package/dist/ui/toggle.js +15 -15
- package/dist/ui/toggle.js.map +1 -1
- package/docs/components/composed/avatar-group.md +4 -4
- package/docs/components/composed/diff.md +10 -2
- package/docs/components/composed/schedule-view.md +1 -1
- package/docs/components/shell/app-shell.md +132 -0
- package/docs/components/ui/avatar.md +1 -1
- package/docs/components/ui/button.md +1 -1
- package/docs/components/ui/chat.md +7 -1
- package/docs/components/ui/color-swatch.md +1 -1
- package/docs/components/ui/data-table-toolbar.md +6 -2
- package/docs/components/ui/data-table.md +41 -7
- package/docs/components/ui/dot.md +1 -1
- package/docs/components/ui/progress.md +1 -0
- package/docs/components/ui/surface.md +3 -3
- package/docs/components/ui/table.md +2 -2
- package/docs/recipes/install-astro.md +3 -2
- package/docs/recipes/install-next-app-router.md +3 -2
- package/docs/recipes/install-remix.md +3 -2
- package/docs/recipes/install-tanstack-start.md +3 -2
- package/docs/recipes/install-vite.md +3 -2
- package/docs/recipes/troubleshoot.md +26 -5
- package/llms.txt +2 -1
- package/make-kit/Guidelines.md +2 -2
- package/make-kit/components/button.md +1 -1
- package/make-kit/components/card.md +6 -6
- package/make-kit/components/surface.md +4 -4
- package/make-kit/foundations/color.md +4 -4
- package/make-kit/foundations/dark-mode.md +1 -1
- package/make-kit/foundations/radius.md +1 -1
- package/make-kit/foundations/surfaces.md +9 -9
- package/mcp-manifest.json +373 -34
- package/package.json +43 -13
- package/skill/SKILL.md +12 -6
- package/skill/references/components.md +2 -1
- package/skill/references/setup-astro.md +3 -2
- package/skill/references/setup-next-app-router.md +3 -2
- package/skill/references/setup-remix.md +3 -2
- package/skill/references/setup-tanstack-start.md +3 -2
- package/skill/references/setup-vite.md +3 -2
- package/skill/references/troubleshoot.md +26 -5
- package/dist/_chunks/tiptap.js +0 -18809
- package/dist/_chunks/tiptap.js.map +0 -1
- package/dist/_chunks/vendor-utils.js +0 -1766
- package/dist/_chunks/vendor-utils.js.map +0 -1
- package/dist/primitives/react-toast.d.ts +0 -120
- package/dist/ui/charts/_internal/scales.d.ts +0 -5
- package/dist/ui/charts/_internal/scales.d.ts.map +0 -1
- package/dist/ui/lib/slot.d.ts +0 -8
- package/dist/ui/lib/slot.d.ts.map +0 -1
- package/scripts/welcome.mjs +0 -312
package/dist/ui/select.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
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 { cn as n } from "./lib/utils.js";
|
|
4
|
+
import { Icon as r } from "./icon.js";
|
|
5
|
+
import { useFormField as i } from "./form.js";
|
|
6
|
+
import { resolveFieldState as a } from "../_chunks/field-state.js";
|
|
7
|
+
import { Content2 as o, Group as s, Icon as c, Item as l, ItemIndicator as u, ItemText as d, Label as f, Portal as p, Root2 as m, ScrollDownButton as h, ScrollUpButton as g, Separator as _, Trigger as v, Value as y, Viewport as b } from "../_chunks/primitives/react-select.js";
|
|
8
|
+
import * as x from "react";
|
|
9
|
+
import { jsx as S, jsxs as C } from "react/jsx-runtime";
|
|
10
|
+
import { IconCheck as w, IconChevronDown as T, IconChevronUp as E } from "@tabler/icons-react";
|
|
11
|
+
import { motion as D } from "framer-motion";
|
|
12
|
+
import { cva as O } from "class-variance-authority";
|
|
13
13
|
//#region src/ui/select.tsx
|
|
14
|
-
var k =
|
|
14
|
+
var k = m, A = s, j = y, M = O("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
15
|
variants: {
|
|
16
16
|
variant: {
|
|
17
|
-
default: "border border-surface-border-
|
|
18
|
-
outline: "border border-surface-border-
|
|
19
|
-
ghost: "border border-transparent bg-transparent hover:bg-surface-
|
|
17
|
+
default: "border border-surface-border-interactive bg-surface-panel-hover focus-visible:border-accent-7",
|
|
18
|
+
outline: "border border-surface-border-interactive bg-transparent focus-visible:border-accent-7",
|
|
19
|
+
ghost: "border border-transparent bg-transparent hover:bg-surface-panel-hover focus-visible:border-accent-7"
|
|
20
20
|
},
|
|
21
21
|
state: {
|
|
22
22
|
default: "",
|
|
@@ -36,57 +36,57 @@ var k = h, A = c, j = b, M = n("flex w-full items-center justify-between whitesp
|
|
|
36
36
|
state: "default",
|
|
37
37
|
size: "md"
|
|
38
38
|
}
|
|
39
|
-
}), N =
|
|
40
|
-
let f =
|
|
41
|
-
return /* @__PURE__ */
|
|
39
|
+
}), N = x.forwardRef(({ className: e, children: t, variant: o, state: s, size: l, ...u }, d) => {
|
|
40
|
+
let f = i(), p = a(s ?? void 0, f.state), m = u["aria-describedby"] ?? f.helperTextId, h = u["aria-required"] ?? f.required;
|
|
41
|
+
return /* @__PURE__ */ C(v, {
|
|
42
42
|
ref: d,
|
|
43
|
-
className:
|
|
44
|
-
variant:
|
|
43
|
+
className: n(M({
|
|
44
|
+
variant: o,
|
|
45
45
|
state: p ?? "default",
|
|
46
|
-
size:
|
|
46
|
+
size: l
|
|
47
47
|
}), e),
|
|
48
48
|
"aria-invalid": p === "error" || void 0,
|
|
49
49
|
"aria-describedby": m,
|
|
50
50
|
"aria-required": h || void 0,
|
|
51
51
|
...u,
|
|
52
52
|
id: u.id ?? f.inputId,
|
|
53
|
-
children: [t, /* @__PURE__ */
|
|
53
|
+
children: [t, /* @__PURE__ */ S(c, {
|
|
54
54
|
asChild: !0,
|
|
55
|
-
children: /* @__PURE__ */
|
|
56
|
-
icon:
|
|
55
|
+
children: /* @__PURE__ */ S(r, {
|
|
56
|
+
icon: T,
|
|
57
57
|
size: "sm",
|
|
58
58
|
className: "opacity-50"
|
|
59
59
|
})
|
|
60
60
|
})]
|
|
61
61
|
});
|
|
62
62
|
});
|
|
63
|
-
N.displayName =
|
|
64
|
-
var P =
|
|
65
|
-
ref:
|
|
66
|
-
className:
|
|
63
|
+
N.displayName = v.displayName;
|
|
64
|
+
var P = x.forwardRef(({ className: e, ...t }, i) => /* @__PURE__ */ S(g, {
|
|
65
|
+
ref: i,
|
|
66
|
+
className: n("flex cursor-default items-center justify-center py-ds-02", e),
|
|
67
67
|
...t,
|
|
68
|
-
children: /* @__PURE__ */
|
|
69
|
-
icon:
|
|
68
|
+
children: /* @__PURE__ */ S(r, {
|
|
69
|
+
icon: E,
|
|
70
70
|
size: "sm"
|
|
71
71
|
})
|
|
72
72
|
}));
|
|
73
|
-
P.displayName =
|
|
74
|
-
var F =
|
|
75
|
-
ref:
|
|
76
|
-
className:
|
|
73
|
+
P.displayName = g.displayName;
|
|
74
|
+
var F = x.forwardRef(({ className: e, ...t }, i) => /* @__PURE__ */ S(h, {
|
|
75
|
+
ref: i,
|
|
76
|
+
className: n("flex cursor-default items-center justify-center py-ds-02", e),
|
|
77
77
|
...t,
|
|
78
|
-
children: /* @__PURE__ */
|
|
79
|
-
icon:
|
|
78
|
+
children: /* @__PURE__ */ S(r, {
|
|
79
|
+
icon: T,
|
|
80
80
|
size: "sm"
|
|
81
81
|
})
|
|
82
82
|
}));
|
|
83
|
-
F.displayName =
|
|
84
|
-
var I =
|
|
83
|
+
F.displayName = h.displayName;
|
|
84
|
+
var I = x.forwardRef(({ className: r, children: i, position: a = "popper", ...s }, c) => /* @__PURE__ */ S(p, { children: /* @__PURE__ */ S(o, {
|
|
85
85
|
ref: c,
|
|
86
86
|
position: a,
|
|
87
87
|
asChild: !0,
|
|
88
|
-
...
|
|
89
|
-
children: /* @__PURE__ */
|
|
88
|
+
...s,
|
|
89
|
+
children: /* @__PURE__ */ C(D.div, {
|
|
90
90
|
initial: {
|
|
91
91
|
opacity: 0,
|
|
92
92
|
scale: .95
|
|
@@ -99,45 +99,45 @@ var I = S.forwardRef(({ className: n, children: i, position: a = "popper", ...o
|
|
|
99
99
|
...e.snappy,
|
|
100
100
|
opacity: t.fade
|
|
101
101
|
},
|
|
102
|
-
className:
|
|
102
|
+
className: n("relative z-popover max-h-96 min-w-[8rem] overflow-hidden rounded-overlay bg-surface-overlay text-surface-fg shadow-floating", a === "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", r),
|
|
103
103
|
children: [
|
|
104
|
-
/* @__PURE__ */
|
|
105
|
-
/* @__PURE__ */
|
|
106
|
-
className:
|
|
104
|
+
/* @__PURE__ */ S(P, {}),
|
|
105
|
+
/* @__PURE__ */ S(b, {
|
|
106
|
+
className: n("p-ds-02", a === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
|
|
107
107
|
children: i
|
|
108
108
|
}),
|
|
109
|
-
/* @__PURE__ */
|
|
109
|
+
/* @__PURE__ */ S(F, {})
|
|
110
110
|
]
|
|
111
111
|
})
|
|
112
112
|
}) }));
|
|
113
|
-
I.displayName =
|
|
114
|
-
var L =
|
|
115
|
-
ref:
|
|
116
|
-
className:
|
|
113
|
+
I.displayName = o.displayName;
|
|
114
|
+
var L = x.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ S(f, {
|
|
115
|
+
ref: r,
|
|
116
|
+
className: n("px-ds-03 py-ds-02b text-body-md font-semibold", e),
|
|
117
117
|
...t
|
|
118
118
|
}));
|
|
119
|
-
L.displayName =
|
|
120
|
-
var R =
|
|
119
|
+
L.displayName = f.displayName;
|
|
120
|
+
var R = x.forwardRef(({ className: e, children: t, ...i }, a) => /* @__PURE__ */ C(l, {
|
|
121
121
|
ref: a,
|
|
122
|
-
className:
|
|
123
|
-
...
|
|
124
|
-
children: [/* @__PURE__ */
|
|
122
|
+
className: 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", e),
|
|
123
|
+
...i,
|
|
124
|
+
children: [/* @__PURE__ */ S("span", {
|
|
125
125
|
className: "absolute right-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",
|
|
126
|
-
children: /* @__PURE__ */
|
|
127
|
-
icon:
|
|
126
|
+
children: /* @__PURE__ */ S(u, { children: /* @__PURE__ */ S(r, {
|
|
127
|
+
icon: w,
|
|
128
128
|
size: "sm"
|
|
129
129
|
}) })
|
|
130
|
-
}), /* @__PURE__ */
|
|
130
|
+
}), /* @__PURE__ */ S(d, {
|
|
131
131
|
className: "min-w-0 line-clamp-1",
|
|
132
132
|
children: t
|
|
133
133
|
})]
|
|
134
134
|
}));
|
|
135
|
-
R.displayName =
|
|
136
|
-
var z =
|
|
137
|
-
ref:
|
|
138
|
-
className:
|
|
135
|
+
R.displayName = l.displayName;
|
|
136
|
+
var z = x.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ S(_, {
|
|
137
|
+
ref: r,
|
|
138
|
+
className: n("-mx-ds-01 my-ds-02 h-px bg-surface-border", e),
|
|
139
139
|
...t
|
|
140
140
|
}));
|
|
141
|
-
z.displayName =
|
|
141
|
+
z.displayName = _.displayName;
|
|
142
142
|
//#endregion
|
|
143
143
|
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 { 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-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-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-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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"}
|
package/dist/ui/sheet.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { motionProps as e, springs as t, tweens as n } 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 { cn as r } from "./lib/utils.js";
|
|
4
|
+
import { Icon as i } from "./icon.js";
|
|
5
|
+
import { Close as a, Content as o, Description as s, Overlay as c, Portal as l, Root as u, Title as d, Trigger as f } from "../_chunks/primitives/react-alert-dialog.js";
|
|
6
|
+
import { useIsMobile as p } from "../hooks/use-mobile.js";
|
|
7
|
+
import { useControllableOpen as m } from "../_chunks/use-controllable-open.js";
|
|
8
|
+
import * as h from "react";
|
|
9
|
+
import { jsx as g, jsxs as _ } from "react/jsx-runtime";
|
|
10
|
+
import { IconX as v } from "@tabler/icons-react";
|
|
11
|
+
import { AnimatePresence as y, motion as b, useReducedMotion as x } from "framer-motion";
|
|
12
|
+
import { cva as S } from "class-variance-authority";
|
|
13
13
|
//#region src/ui/sheet.tsx
|
|
14
|
-
var C =
|
|
14
|
+
var C = h.createContext({
|
|
15
15
|
open: !1,
|
|
16
16
|
onClose: () => {}
|
|
17
17
|
}), w = ({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r, ...i }) => {
|
|
18
|
-
let { open: a, setOpen: o, close: s } =
|
|
18
|
+
let { open: a, setOpen: o, close: s } = m({
|
|
19
19
|
open: e,
|
|
20
20
|
defaultOpen: t,
|
|
21
21
|
onOpenChange: n
|
|
22
|
-
}), c =
|
|
22
|
+
}), c = h.useMemo(() => ({
|
|
23
23
|
open: a,
|
|
24
24
|
onClose: s
|
|
25
25
|
}), [a, s]);
|
|
26
|
-
return /* @__PURE__ */
|
|
26
|
+
return /* @__PURE__ */ g(C.Provider, {
|
|
27
27
|
value: c,
|
|
28
|
-
children: /* @__PURE__ */
|
|
28
|
+
children: /* @__PURE__ */ g(u, {
|
|
29
29
|
open: a,
|
|
30
30
|
onOpenChange: o,
|
|
31
31
|
...i,
|
|
@@ -34,20 +34,20 @@ var C = g.createContext({
|
|
|
34
34
|
});
|
|
35
35
|
};
|
|
36
36
|
w.displayName = "Sheet";
|
|
37
|
-
var T =
|
|
37
|
+
var T = f, E = a, D = l, O = h.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ g(c, {
|
|
38
38
|
forceMount: !0,
|
|
39
39
|
asChild: !0,
|
|
40
|
-
children: /* @__PURE__ */
|
|
40
|
+
children: /* @__PURE__ */ g(b.div, {
|
|
41
41
|
ref: a,
|
|
42
|
-
className:
|
|
42
|
+
className: r("fixed inset-0 z-modal bg-overlay", t),
|
|
43
43
|
initial: { opacity: 0 },
|
|
44
44
|
animate: { opacity: 1 },
|
|
45
45
|
exit: { opacity: 0 },
|
|
46
46
|
transition: n.fade,
|
|
47
|
-
...e(
|
|
47
|
+
...e(i)
|
|
48
48
|
})
|
|
49
49
|
}));
|
|
50
|
-
O.displayName =
|
|
50
|
+
O.displayName = c.displayName;
|
|
51
51
|
var k = {
|
|
52
52
|
top: { y: "-100%" },
|
|
53
53
|
bottom: { y: "100%" },
|
|
@@ -58,7 +58,7 @@ var k = {
|
|
|
58
58
|
bottom: { y: 0 },
|
|
59
59
|
left: { x: 0 },
|
|
60
60
|
right: { x: 0 }
|
|
61
|
-
}, j =
|
|
61
|
+
}, j = S("fixed z-modal gap-ds-05 bg-surface-overlay p-ds-06 shadow-overlay", {
|
|
62
62
|
variants: { side: {
|
|
63
63
|
top: "inset-x-0 top-0 border-b border-surface-border-strong",
|
|
64
64
|
bottom: "inset-x-0 bottom-0 border-t border-surface-border-strong",
|
|
@@ -66,42 +66,42 @@ var k = {
|
|
|
66
66
|
right: "inset-y-0 right-0 h-full w-3/4 border-l border-surface-border-strong sm:max-w-sm"
|
|
67
67
|
} },
|
|
68
68
|
defaultVariants: { side: "right" }
|
|
69
|
-
}), M =
|
|
70
|
-
let f =
|
|
69
|
+
}), M = h.forwardRef(({ side: n = "right", responsive: s, className: c, children: l, ...u }, d) => {
|
|
70
|
+
let f = p(), m = s !== !1 && f, S = x(), { open: w, onClose: T } = h.useContext(C), E = m ? "bottom" : n ?? "right", M = h.useRef(null), N = h.useCallback((e) => {
|
|
71
71
|
M.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
|
|
72
72
|
}, [d]);
|
|
73
|
-
return /* @__PURE__ */
|
|
73
|
+
return /* @__PURE__ */ g(y, { children: w && /* @__PURE__ */ _(D, {
|
|
74
74
|
forceMount: !0,
|
|
75
|
-
children: [/* @__PURE__ */
|
|
75
|
+
children: [/* @__PURE__ */ g(O, {}), /* @__PURE__ */ g(o, {
|
|
76
76
|
forceMount: !0,
|
|
77
77
|
asChild: !0,
|
|
78
|
-
children: /* @__PURE__ */
|
|
78
|
+
children: /* @__PURE__ */ _(b.div, {
|
|
79
79
|
ref: N,
|
|
80
|
-
className:
|
|
80
|
+
className: r(j({ side: E }), c),
|
|
81
81
|
initial: k[E],
|
|
82
82
|
animate: A[E],
|
|
83
83
|
exit: k[E],
|
|
84
84
|
transition: t.smooth,
|
|
85
|
-
drag:
|
|
85
|
+
drag: m && !S ? "y" : !1,
|
|
86
86
|
dragConstraints: { top: 0 },
|
|
87
87
|
dragElastic: .2,
|
|
88
|
-
onDragEnd:
|
|
88
|
+
onDragEnd: m ? (e, t) => {
|
|
89
89
|
let n = M.current?.getBoundingClientRect().height ?? 300;
|
|
90
90
|
(t.offset.y > n * .3 || t.velocity.y > 500) && T();
|
|
91
91
|
} : void 0,
|
|
92
92
|
...e(u),
|
|
93
93
|
children: [
|
|
94
|
-
|
|
94
|
+
m && /* @__PURE__ */ g("div", {
|
|
95
95
|
className: "flex justify-center pt-ds-03 pb-ds-02",
|
|
96
|
-
children: /* @__PURE__ */
|
|
96
|
+
children: /* @__PURE__ */ g("div", { className: "h-1 w-8 rounded-pill bg-surface-border" })
|
|
97
97
|
}),
|
|
98
|
-
/* @__PURE__ */
|
|
98
|
+
/* @__PURE__ */ _(a, {
|
|
99
99
|
title: "Close",
|
|
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-
|
|
101
|
-
children: [/* @__PURE__ */
|
|
102
|
-
icon:
|
|
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-panel-hover active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 disabled:pointer-events-none",
|
|
101
|
+
children: [/* @__PURE__ */ g(i, {
|
|
102
|
+
icon: v,
|
|
103
103
|
size: "sm"
|
|
104
|
-
}), /* @__PURE__ */
|
|
104
|
+
}), /* @__PURE__ */ g("span", {
|
|
105
105
|
className: "sr-only",
|
|
106
106
|
children: "Close"
|
|
107
107
|
})]
|
|
@@ -112,30 +112,30 @@ var k = {
|
|
|
112
112
|
})]
|
|
113
113
|
}) });
|
|
114
114
|
});
|
|
115
|
-
M.displayName =
|
|
116
|
-
var N =
|
|
115
|
+
M.displayName = o.displayName;
|
|
116
|
+
var N = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g("div", {
|
|
117
117
|
ref: n,
|
|
118
|
-
className:
|
|
118
|
+
className: r("flex flex-col space-y-ds-03 text-center sm:text-left", e),
|
|
119
119
|
...t
|
|
120
120
|
}));
|
|
121
121
|
N.displayName = "SheetHeader";
|
|
122
|
-
var P =
|
|
122
|
+
var P = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g("div", {
|
|
123
123
|
ref: n,
|
|
124
|
-
className:
|
|
124
|
+
className: r("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03", e),
|
|
125
125
|
...t
|
|
126
126
|
}));
|
|
127
127
|
P.displayName = "SheetFooter";
|
|
128
|
-
var F =
|
|
128
|
+
var F = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g(d, {
|
|
129
129
|
ref: n,
|
|
130
|
-
className:
|
|
130
|
+
className: r("text-heading-xs font-semibold text-surface-fg", e),
|
|
131
131
|
...t
|
|
132
132
|
}));
|
|
133
|
-
F.displayName =
|
|
134
|
-
var I =
|
|
133
|
+
F.displayName = d.displayName;
|
|
134
|
+
var I = h.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ g(s, {
|
|
135
135
|
ref: n,
|
|
136
|
-
className:
|
|
136
|
+
className: r("text-body-md text-surface-fg-muted", e),
|
|
137
137
|
...t
|
|
138
138
|
}));
|
|
139
|
-
I.displayName =
|
|
139
|
+
I.displayName = s.displayName;
|
|
140
140
|
//#endregion
|
|
141
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 { 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-heading-xs 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-body-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-panel-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-heading-xs 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-body-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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"}
|