@nsaa/core 0.1.0-alpha.1 → 0.1.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/accordion.d.ts +7 -0
- package/dist/accordion/accordion.js +54 -0
- package/dist/accordion/index.d.ts +3 -0
- package/dist/alert/alert.d.ts +18 -0
- package/dist/alert/alert.js +53 -0
- package/dist/alert/index.d.ts +3 -0
- package/dist/alert-dialog/alert-dialog.d.ts +19 -0
- package/dist/alert-dialog/alert-dialog.js +100 -0
- package/dist/alert-dialog/index.d.ts +3 -0
- package/dist/avatar/avatar.d.ts +12 -0
- package/dist/avatar/avatar.js +50 -0
- package/dist/avatar/index.d.ts +3 -0
- package/dist/badge/badge.d.ts +8 -0
- package/dist/badge/badge.js +29 -0
- package/dist/badge/index.d.ts +3 -0
- package/dist/button/button.d.ts +25 -0
- package/dist/button/button.js +136 -0
- package/dist/button/index.d.ts +3 -0
- package/dist/calendar/calendar.d.ts +11 -0
- package/dist/calendar/calendar.js +131 -0
- package/dist/calendar/index.d.ts +3 -0
- package/dist/card/card.d.ts +12 -0
- package/dist/card/card.js +55 -0
- package/dist/card/index.d.ts +3 -0
- package/dist/checkbox/checkbox.d.ts +4 -0
- package/dist/checkbox/checkbox.js +35 -0
- package/dist/checkbox/index.d.ts +3 -0
- package/dist/collapsible/collapsible.d.ts +6 -0
- package/dist/collapsible/collapsible.js +24 -0
- package/dist/collapsible/index.d.ts +3 -0
- package/dist/combobox/combobox.d.ts +27 -0
- package/dist/combobox/combobox.js +226 -0
- package/dist/combobox/index.d.ts +3 -0
- package/dist/command/command.d.ts +20 -0
- package/dist/command/command.js +116 -0
- package/dist/command/index.d.ts +3 -0
- package/dist/context-menu/context-menu.d.ts +30 -0
- package/dist/context-menu/context-menu.js +173 -0
- package/dist/context-menu/index.d.ts +3 -0
- package/dist/dialog/dialog.d.ts +18 -0
- package/dist/dialog/dialog.js +106 -0
- package/dist/dialog/index.d.ts +3 -0
- package/dist/direction.d.ts +3 -0
- package/dist/direction.js +2 -0
- package/dist/drawer/drawer.d.ts +17 -0
- package/dist/drawer/drawer.js +136 -0
- package/dist/drawer/index.d.ts +3 -0
- package/dist/dropdown-menu/dropdown-menu.d.ts +30 -0
- package/dist/dropdown-menu/dropdown-menu.js +177 -0
- package/dist/dropdown-menu/index.d.ts +3 -0
- package/dist/empty/empty.d.ts +35 -0
- package/dist/empty/empty.js +93 -0
- package/dist/empty/index.d.ts +3 -0
- package/dist/field/field.d.ts +26 -0
- package/dist/field/field.js +109 -0
- package/dist/field/index.d.ts +3 -0
- package/dist/index.d.ts +89 -674
- package/dist/index.js +48 -3876
- package/dist/input/index.d.ts +3 -0
- package/dist/input/input.d.ts +4 -0
- package/dist/input/input.js +14 -0
- package/dist/input-group/index.d.ts +3 -0
- package/dist/input-group/input-group.d.ts +19 -0
- package/dist/input-group/input-group.js +78 -0
- package/dist/input-otp/index.d.ts +3 -0
- package/dist/input-otp/input-otp.d.ts +12 -0
- package/dist/input-otp/input-otp.js +73 -0
- package/dist/kbd/index.d.ts +3 -0
- package/dist/kbd/kbd.d.ts +5 -0
- package/dist/kbd/kbd.js +19 -0
- package/dist/label/index.d.ts +3 -0
- package/dist/label/label.d.ts +4 -0
- package/dist/label/label.js +13 -0
- package/dist/legacy/icon-button/icon-swap.js +58 -0
- package/dist/lib/cn.d.ts +3 -0
- package/dist/{cn-DxFBFdwT.js → lib/cn.js} +1 -1
- package/dist/lib/control-defaults.js +8 -0
- package/dist/lib/icon-swap.d.ts +15 -0
- package/dist/lib/icon-swap.js +26 -0
- package/dist/lib/input-modality.js +39 -0
- package/dist/lib/merge-refs.js +21 -0
- package/dist/lib/shortcut.js +50 -0
- package/dist/lib/track-input-modality.d.ts +2 -0
- package/dist/lib/track-input-modality.js +4 -0
- package/dist/lib/tv.js +7 -0
- package/dist/lib/use-press.js +48 -0
- package/dist/lib/user-action.js +13 -0
- package/dist/loaders/arc.d.ts +6 -0
- package/dist/loaders/arc.js +31 -0
- package/dist/loaders/atom.d.ts +5 -0
- package/dist/loaders/atom.js +70 -0
- package/dist/loaders/blocks.d.ts +8 -0
- package/dist/loaders/blocks.js +74 -0
- package/dist/loaders/bouncing-dots.d.ts +3 -0
- package/dist/loaders/bouncing-dots.js +45 -0
- package/dist/loaders/cap.d.ts +6 -0
- package/dist/loaders/cap.js +7 -0
- package/dist/loaders/cascade.d.ts +5 -0
- package/dist/loaders/cascade.js +50 -0
- package/dist/loaders/circular-dots.d.ts +3 -0
- package/dist/loaders/circular-dots.js +40 -0
- package/dist/loaders/classic-v2.d.ts +3 -0
- package/dist/loaders/classic-v2.js +41 -0
- package/dist/loaders/classic.d.ts +3 -0
- package/dist/loaders/classic.js +48 -0
- package/dist/loaders/clock.d.ts +5 -0
- package/dist/loaders/clock.js +31 -0
- package/dist/loaders/comet.d.ts +5 -0
- package/dist/loaders/comet.js +52 -0
- package/dist/loaders/compass.d.ts +3 -0
- package/dist/loaders/compass.js +39 -0
- package/dist/loaders/dual.d.ts +6 -0
- package/dist/loaders/dual.js +47 -0
- package/dist/loaders/easing.d.ts +6 -0
- package/dist/loaders/easing.js +34 -0
- package/dist/loaders/eclipse.d.ts +3 -0
- package/dist/loaders/eclipse.js +69 -0
- package/dist/loaders/fade.js +28 -0
- package/dist/loaders/flip.d.ts +3 -0
- package/dist/loaders/flip.js +41 -0
- package/dist/{frame-CK9IBOZB.js → loaders/frame.js} +2 -50
- package/dist/loaders/gather.d.ts +3 -0
- package/dist/loaders/gather.js +85 -0
- package/dist/loaders/leap.d.ts +3 -0
- package/dist/loaders/leap.js +67 -0
- package/dist/loaders/linear-dots.d.ts +3 -0
- package/dist/loaders/linear-dots.js +54 -0
- package/dist/loaders/loading.d.ts +3 -0
- package/dist/loaders/loading.js +64 -0
- package/dist/loaders/morph.d.ts +3 -0
- package/dist/loaders/morph.js +40 -0
- package/dist/loaders/motion.d.ts +35 -0
- package/dist/loaders/motion.js +51 -0
- package/dist/loaders/orbit.d.ts +5 -0
- package/dist/loaders/orbit.js +44 -0
- package/dist/loaders/pulse.d.ts +3 -0
- package/dist/loaders/pulse.js +52 -0
- package/dist/loaders/radar.d.ts +5 -0
- package/dist/loaders/radar.js +64 -0
- package/dist/loaders/ring.d.ts +6 -0
- package/dist/loaders/ring.js +38 -0
- package/dist/loaders/ripple.d.ts +8 -0
- package/dist/loaders/ripple.js +57 -0
- package/dist/loaders/slide.d.ts +3 -0
- package/dist/loaders/slide.js +74 -0
- package/dist/loaders/snake.d.ts +6 -0
- package/dist/loaders/snake.js +59 -0
- package/dist/loaders/spinners.d.ts +61 -0
- package/dist/loaders/spinners.js +63 -0
- package/dist/loaders/swirl.d.ts +3 -0
- package/dist/loaders/swirl.js +50 -0
- package/dist/loaders/text/shared.js +25 -0
- package/dist/loaders/text/text-loaders.d.ts +48 -0
- package/dist/loaders/text/text-loaders.js +723 -0
- package/dist/loaders/trace.d.ts +6 -0
- package/dist/loaders/trace.js +46 -0
- package/dist/loaders/types.d.ts +10 -0
- package/dist/loaders/wave.d.ts +8 -0
- package/dist/loaders/wave.js +59 -0
- package/dist/loaders-text.d.ts +2 -47
- package/dist/loaders-text.js +1 -743
- package/dist/loaders.d.ts +36 -132
- package/dist/loaders.js +35 -1096
- package/dist/native-select/index.d.ts +3 -0
- package/dist/native-select/native-select.d.ts +9 -0
- package/dist/native-select/native-select.js +44 -0
- package/dist/pagination/index.d.ts +3 -0
- package/dist/pagination/pagination.d.ts +18 -0
- package/dist/pagination/pagination.js +134 -0
- package/dist/popover/index.d.ts +3 -0
- package/dist/popover/popover.d.ts +10 -0
- package/dist/popover/popover.js +54 -0
- package/dist/radio-group/index.d.ts +3 -0
- package/dist/radio-group/radio-group.d.ts +6 -0
- package/dist/radio-group/radio-group.js +33 -0
- package/dist/select/index.d.ts +3 -0
- package/dist/select/select.d.ts +16 -0
- package/dist/select/select.js +148 -0
- package/dist/separator/index.d.ts +3 -0
- package/dist/separator/separator.d.ts +4 -0
- package/dist/separator/separator.js +15 -0
- package/dist/skeleton/index.d.ts +3 -0
- package/dist/skeleton/skeleton.d.ts +10 -0
- package/dist/skeleton/skeleton.js +24 -0
- package/dist/slider/index.d.ts +3 -0
- package/dist/slider/slider.d.ts +4 -0
- package/dist/slider/slider.js +39 -0
- package/dist/sound/sound-map.d.ts +70 -0
- package/dist/sound/sound-map.js +72 -0
- package/dist/sound/sound.d.ts +38 -0
- package/dist/sound/sound.js +136 -0
- package/dist/sound/uisfx.d.ts +37 -0
- package/dist/sound/uisfx.js +59 -0
- package/dist/sound-uisfx.d.ts +2 -37
- package/dist/sound-uisfx.js +1 -58
- package/dist/spinner/index.d.ts +5 -0
- package/dist/spinner/loader-provider.d.ts +16 -0
- package/dist/spinner/loader-provider.js +28 -0
- package/dist/spinner/registry.d.ts +9 -0
- package/dist/spinner/registry.js +15 -0
- package/dist/spinner/spinner.d.ts +26 -0
- package/dist/spinner/spinner.js +143 -0
- package/dist/switch/index.d.ts +3 -0
- package/dist/switch/switch.d.ts +6 -0
- package/dist/switch/switch.js +25 -0
- package/dist/table/index.d.ts +3 -0
- package/dist/table/table.d.ts +17 -0
- package/dist/table/table.js +66 -0
- package/dist/tabs/index.d.ts +3 -0
- package/dist/tabs/tabs.d.ts +11 -0
- package/dist/tabs/tabs.js +46 -0
- package/dist/textarea/index.d.ts +3 -0
- package/dist/textarea/textarea.d.ts +4 -0
- package/dist/textarea/textarea.js +12 -0
- package/dist/toast/index.d.ts +3 -0
- package/dist/toast/toast.d.ts +17 -0
- package/dist/toast/toast.js +211 -0
- package/dist/toggle-group/index.d.ts +3 -0
- package/dist/toggle-group/toggle-group.d.ts +64 -0
- package/dist/toggle-group/toggle-group.js +95 -0
- package/dist/tokens/dist/motion.d.ts +24 -0
- package/dist/{motion-NQq2BA78.js → tokens/dist/motion.js} +1 -1
- package/dist/toolbar/index.d.ts +3 -0
- package/dist/toolbar/overflow.d.ts +4 -0
- package/dist/toolbar/overflow.js +242 -0
- package/dist/toolbar/toolbar-item.d.ts +29 -0
- package/dist/toolbar/toolbar-item.js +71 -0
- package/dist/toolbar/toolbar.d.ts +73 -0
- package/dist/toolbar/toolbar.js +250 -0
- package/dist/tooltip/index.d.ts +3 -0
- package/dist/tooltip/tooltip.d.ts +7 -0
- package/dist/tooltip/tooltip.js +41 -0
- package/package.json +4 -3
- package/dist/registry-2PyPW9Xw.js +0 -390
- package/dist/registry-DjfWNw3R.d.ts +0 -18
- package/dist/sound-DiYNAnR_.d.ts +0 -61
package/dist/index.js
CHANGED
|
@@ -1,3878 +1,50 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import { AlertDialog
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import { Dialog
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
function AccordionItem({ className, ...props }) {
|
|
51
|
-
return /* @__PURE__ */ jsx(Accordion$1.Item, {
|
|
52
|
-
"data-slot": "accordion-item",
|
|
53
|
-
className: cn("not-last:border-b", className),
|
|
54
|
-
...props
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
function AccordionTrigger({ className, children, ...props }) {
|
|
58
|
-
return /* @__PURE__ */ jsx(Accordion$1.Header, {
|
|
59
|
-
className: "flex",
|
|
60
|
-
children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
|
|
61
|
-
"data-slot": "accordion-trigger",
|
|
62
|
-
className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
|
|
63
|
-
...props,
|
|
64
|
-
children: [children, /* @__PURE__ */ jsx("svg", {
|
|
65
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
66
|
-
viewBox: "0 0 24 24",
|
|
67
|
-
fill: "none",
|
|
68
|
-
stroke: "currentColor",
|
|
69
|
-
strokeWidth: "2",
|
|
70
|
-
strokeLinecap: "round",
|
|
71
|
-
strokeLinejoin: "round",
|
|
72
|
-
"data-slot": "accordion-trigger-icon",
|
|
73
|
-
className: "pointer-events-none shrink-0",
|
|
74
|
-
"aria-hidden": "true",
|
|
75
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
76
|
-
})]
|
|
77
|
-
})
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
function AccordionContent({ className, children, ...props }) {
|
|
81
|
-
return /* @__PURE__ */ jsx(Accordion$1.Panel, {
|
|
82
|
-
"data-slot": "accordion-content",
|
|
83
|
-
className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
|
|
84
|
-
...props,
|
|
85
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
86
|
-
className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
|
|
87
|
-
children
|
|
88
|
-
})
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
// src/lib/input-modality.ts
|
|
92
|
-
let modality = "pointer";
|
|
93
|
-
let installed = false;
|
|
94
|
-
let interactedAt = null;
|
|
95
|
-
/** The attribute on <html> that feel.css reads: keyboard-opened surfaces open without motion (#71, #108). */
|
|
96
|
-
const MODALITY_ATTRIBUTE = "data-nsaa-input";
|
|
97
|
-
/**
|
|
98
|
-
* Tracks the latest input modality in the capture phase, so a state change driven by a page
|
|
99
|
-
* hotkey (Space, M, mod+B, mod+K) is known to be keyboard-initiated even though no button was
|
|
100
|
-
* clicked. A pointer that moves takes over again, so hovering after typing animates. Idempotent;
|
|
101
|
-
* `@nsaa/core` installs it when it loads.
|
|
102
|
-
*/
|
|
103
|
-
function trackInputModality() {
|
|
104
|
-
if (installed || typeof document === "undefined") return;
|
|
105
|
-
installed = true;
|
|
106
|
-
document.addEventListener("keydown", () => interact("keyboard"), true);
|
|
107
|
-
document.addEventListener("pointerdown", () => interact("pointer"), true);
|
|
108
|
-
document.addEventListener("pointermove", () => setInputModality("pointer"), true);
|
|
109
|
-
}
|
|
110
|
-
function interact(next) {
|
|
111
|
-
interactedAt = Date.now();
|
|
112
|
-
setInputModality(next);
|
|
113
|
-
}
|
|
114
|
-
/** When the person last pressed a key or a pointer (not a pointer move), or null before that. */
|
|
115
|
-
function lastInteractionAt() {
|
|
116
|
-
return interactedAt;
|
|
117
|
-
}
|
|
118
|
-
function setInputModality(next) {
|
|
119
|
-
if (next === modality && installed) {
|
|
120
|
-
if (document.documentElement.getAttribute("data-nsaa-input") === next) return;
|
|
121
|
-
}
|
|
122
|
-
modality = next;
|
|
123
|
-
if (typeof document !== "undefined") document.documentElement.setAttribute(MODALITY_ATTRIBUTE, next);
|
|
124
|
-
}
|
|
125
|
-
function getInputModality() {
|
|
126
|
-
return modality;
|
|
127
|
-
}
|
|
128
|
-
/** True when the person pressed a key or a pointer within the window: a state that appears now is
|
|
129
|
-
* most likely their action's result (a failed payment Alert), not something on load. */
|
|
130
|
-
function recentUserAction(now = Date.now()) {
|
|
131
|
-
const at = lastInteractionAt();
|
|
132
|
-
return at !== null && now - at < 5e3;
|
|
133
|
-
}
|
|
134
|
-
// src/sound/sound.tsx
|
|
135
|
-
/** One moment per player (per SoundProvider), outside React state: one cue per moment (#71). */
|
|
136
|
-
const moments = /* @__PURE__ */ new WeakMap();
|
|
137
|
-
function momentOf(player) {
|
|
138
|
-
let moment = moments.get(player);
|
|
139
|
-
if (!moment) {
|
|
140
|
-
moment = {
|
|
141
|
-
lastAt: 0,
|
|
142
|
-
pending: null
|
|
143
|
-
};
|
|
144
|
-
moments.set(player, moment);
|
|
145
|
-
}
|
|
146
|
-
return moment;
|
|
147
|
-
}
|
|
148
|
-
const MUTE_KEY = "nsaa-sound-muted";
|
|
149
|
-
function readMuted() {
|
|
150
|
-
try {
|
|
151
|
-
return localStorage.getItem(MUTE_KEY) === "true";
|
|
152
|
-
} catch {
|
|
153
|
-
return false;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
function writeMuted(muted) {
|
|
157
|
-
try {
|
|
158
|
-
localStorage.setItem(MUTE_KEY, String(muted));
|
|
159
|
-
} catch {}
|
|
160
|
-
}
|
|
161
|
-
const SoundContext = createContext(null);
|
|
162
|
-
/** The app's own switch on <html data-motion> (feel.css reads it too): "reduce" silences sound,
|
|
163
|
-
* "full" overrides the OS setting. */
|
|
164
|
-
function htmlMotion() {
|
|
165
|
-
return typeof document === "undefined" ? void 0 : document.documentElement.dataset.motion;
|
|
166
|
-
}
|
|
167
|
-
/** Global sound settings: one remembered mute for the whole app. */
|
|
168
|
-
function SoundProvider({ children, player, enabled = sound.enabled, volume = sound.volume }) {
|
|
169
|
-
const [muted, setMutedState] = useState(readMuted);
|
|
170
|
-
const setMuted = useCallback((next) => {
|
|
171
|
-
setMutedState(next);
|
|
172
|
-
writeMuted(next);
|
|
173
|
-
}, []);
|
|
174
|
-
const value = useMemo(() => ({
|
|
175
|
-
enabled,
|
|
176
|
-
volume,
|
|
177
|
-
muted,
|
|
178
|
-
setMuted,
|
|
179
|
-
player
|
|
180
|
-
}), [
|
|
181
|
-
enabled,
|
|
182
|
-
volume,
|
|
183
|
-
muted,
|
|
184
|
-
setMuted,
|
|
185
|
-
player
|
|
186
|
-
]);
|
|
187
|
-
return /* @__PURE__ */ jsx(SoundContext.Provider, {
|
|
188
|
-
value,
|
|
189
|
-
children
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
|
-
/**
|
|
193
|
-
* Plays interface sounds with manners: only from a user action (call `play` in an event handler),
|
|
194
|
-
* never when muted, turned off, or when the user asks for reduced motion; repeats are throttled.
|
|
195
|
-
*/
|
|
196
|
-
function useSound() {
|
|
197
|
-
const context = useContext(SoundContext);
|
|
198
|
-
const reducedMotion = useReducedMotionConfig() ?? false;
|
|
199
|
-
const enabled = context?.enabled ?? sound.enabled;
|
|
200
|
-
const muted = context?.muted ?? false;
|
|
201
|
-
const player = context?.player;
|
|
202
|
-
const volume = context?.volume ?? sound.volume;
|
|
203
|
-
const last = useRef(null);
|
|
204
|
-
return {
|
|
205
|
-
play: useCallback((cue, options) => {
|
|
206
|
-
if (!enabled || muted || !player) return;
|
|
207
|
-
const html = htmlMotion();
|
|
208
|
-
if (html === "reduce" || reducedMotion && html !== "full") return;
|
|
209
|
-
const moment = momentOf(player);
|
|
210
|
-
const fire = () => {
|
|
211
|
-
const now = Date.now();
|
|
212
|
-
if (last.current?.cue === cue && now - last.current.at < 80) return;
|
|
213
|
-
last.current = {
|
|
214
|
-
cue,
|
|
215
|
-
at: now
|
|
216
|
-
};
|
|
217
|
-
moment.lastAt = now;
|
|
218
|
-
player(cue, {
|
|
219
|
-
asset: sound.cue[cue],
|
|
220
|
-
volume
|
|
221
|
-
});
|
|
222
|
-
};
|
|
223
|
-
if (!options?.yield) {
|
|
224
|
-
if (moment.pending) clearTimeout(moment.pending);
|
|
225
|
-
moment.pending = null;
|
|
226
|
-
fire();
|
|
227
|
-
return;
|
|
228
|
-
}
|
|
229
|
-
const scheduledAt = Date.now();
|
|
230
|
-
if (moment.pending) clearTimeout(moment.pending);
|
|
231
|
-
moment.pending = setTimeout(() => {
|
|
232
|
-
moment.pending = null;
|
|
233
|
-
if (scheduledAt - moment.lastAt < 100) return;
|
|
234
|
-
fire();
|
|
235
|
-
}, 0);
|
|
236
|
-
}, [
|
|
237
|
-
enabled,
|
|
238
|
-
muted,
|
|
239
|
-
reducedMotion,
|
|
240
|
-
player,
|
|
241
|
-
volume
|
|
242
|
-
]),
|
|
243
|
-
loop: useCallback((cue) => {
|
|
244
|
-
if (!enabled || muted || !player) return () => {};
|
|
245
|
-
const html = htmlMotion();
|
|
246
|
-
if (html === "reduce" || reducedMotion && html !== "full") return () => {};
|
|
247
|
-
const stop = player(cue, {
|
|
248
|
-
asset: sound.cue[cue],
|
|
249
|
-
volume
|
|
250
|
-
});
|
|
251
|
-
return typeof stop === "function" ? stop : () => {};
|
|
252
|
-
}, [
|
|
253
|
-
enabled,
|
|
254
|
-
muted,
|
|
255
|
-
reducedMotion,
|
|
256
|
-
player,
|
|
257
|
-
volume
|
|
258
|
-
]),
|
|
259
|
-
muted,
|
|
260
|
-
setMuted: context?.setMuted ?? writeMuted,
|
|
261
|
-
enabled
|
|
262
|
-
};
|
|
263
|
-
}
|
|
264
|
-
// src/sound/sound-map.ts
|
|
265
|
-
/**
|
|
266
|
-
* The one table of interface sounds: component × event → cue (feel layer, §4). Components play
|
|
267
|
-
* from here, so the map is reviewable in one place. Surfaces that aren't listed (Popover, Tooltip,
|
|
268
|
-
* Command, menu open and close, Select open, Tabs, Accordion, Collapsible, inputs) are silent: opening a light surface isn't a commit,
|
|
269
|
-
* and the palette is a 100+/day tool. Nothing plays on hover, load or typing.
|
|
270
|
-
*/
|
|
271
|
-
const SOUND_MAP = {
|
|
272
|
-
button: { press: "input.press" },
|
|
273
|
-
checkbox: {
|
|
274
|
-
on: "input.toggle-on",
|
|
275
|
-
off: "input.toggle-off"
|
|
276
|
-
},
|
|
277
|
-
"radio-group": { change: "selection.select" },
|
|
278
|
-
switch: {
|
|
279
|
-
on: "input.toggle-on",
|
|
280
|
-
off: "input.toggle-off"
|
|
281
|
-
},
|
|
282
|
-
slider: { commit: "movement.snap" },
|
|
283
|
-
"input-otp": { invalid: "feedback.error" },
|
|
284
|
-
alert: { destructive: "feedback.error" },
|
|
285
|
-
dialog: {
|
|
286
|
-
open: "navigation.open",
|
|
287
|
-
close: "navigation.close"
|
|
288
|
-
},
|
|
289
|
-
"alert-dialog": {
|
|
290
|
-
open: "navigation.open",
|
|
291
|
-
close: "navigation.close"
|
|
292
|
-
},
|
|
293
|
-
drawer: {
|
|
294
|
-
open: "navigation.open",
|
|
295
|
-
close: "navigation.close",
|
|
296
|
-
snap: "movement.snap"
|
|
297
|
-
},
|
|
298
|
-
select: { choose: "selection.select" },
|
|
299
|
-
calendar: { select: "selection.select" },
|
|
300
|
-
combobox: {
|
|
301
|
-
choose: "selection.select",
|
|
302
|
-
clear: "input.press",
|
|
303
|
-
"chip-remove": "input.press"
|
|
304
|
-
},
|
|
305
|
-
"dropdown-menu": { check: "selection.select" },
|
|
306
|
-
"context-menu": { check: "selection.select" },
|
|
307
|
-
toast: {
|
|
308
|
-
success: "feedback.success",
|
|
309
|
-
warning: "feedback.warning",
|
|
310
|
-
error: "feedback.error"
|
|
311
|
-
}
|
|
312
|
-
};
|
|
313
|
-
const SilentContext = createContext(false);
|
|
314
|
-
/** Silences the sound map below it (CommandDialog reuses Dialog but stays silent, §4). */
|
|
315
|
-
function SoundSilence({ children }) {
|
|
316
|
-
return createElement(SilentContext.Provider, { value: true }, children);
|
|
317
|
-
}
|
|
318
|
-
/** Plays a component's mapped cue for an event, through `useSound()` and its safeguards. */
|
|
319
|
-
function useCue(component) {
|
|
320
|
-
const { play } = useSound();
|
|
321
|
-
const silent = useContext(SilentContext);
|
|
322
|
-
return useCallback((event, options) => {
|
|
323
|
-
if (silent) return;
|
|
324
|
-
const cue = SOUND_MAP[component][event];
|
|
325
|
-
if (cue) play(cue, options);
|
|
326
|
-
}, [
|
|
327
|
-
component,
|
|
328
|
-
play,
|
|
329
|
-
silent
|
|
330
|
-
]);
|
|
331
|
-
}
|
|
332
|
-
// src/alert/alert.tsx
|
|
333
|
-
const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
|
|
334
|
-
variants: { variant: {
|
|
335
|
-
default: "bg-card text-card-foreground",
|
|
336
|
-
destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
|
|
337
|
-
} },
|
|
338
|
-
defaultVariants: { variant: "default" }
|
|
339
|
-
});
|
|
340
|
-
function Alert({ className, variant, announce, ...props }) {
|
|
341
|
-
const cue = useCue("alert");
|
|
342
|
-
const destructive = variant === "destructive";
|
|
343
|
-
const appear = React.useEffectEvent(() => {
|
|
344
|
-
if (announce === true || destructive && recentUserAction()) cue("destructive");
|
|
345
|
-
});
|
|
346
|
-
React.useEffect(() => {
|
|
347
|
-
if (announce !== false && (destructive || announce)) appear();
|
|
348
|
-
}, [destructive, announce]);
|
|
349
|
-
return /* @__PURE__ */ jsx("div", {
|
|
350
|
-
"data-slot": "alert",
|
|
351
|
-
role: "alert",
|
|
352
|
-
className: cn(alertVariants({ variant }), className),
|
|
353
|
-
...props
|
|
354
|
-
});
|
|
355
|
-
}
|
|
356
|
-
function AlertTitle({ className, ...props }) {
|
|
357
|
-
return /* @__PURE__ */ jsx("div", {
|
|
358
|
-
"data-slot": "alert-title",
|
|
359
|
-
className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className),
|
|
360
|
-
...props
|
|
361
|
-
});
|
|
362
|
-
}
|
|
363
|
-
function AlertDescription({ className, ...props }) {
|
|
364
|
-
return /* @__PURE__ */ jsx("div", {
|
|
365
|
-
"data-slot": "alert-description",
|
|
366
|
-
className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
|
|
367
|
-
...props
|
|
368
|
-
});
|
|
369
|
-
}
|
|
370
|
-
function AlertAction({ className, ...props }) {
|
|
371
|
-
return /* @__PURE__ */ jsx("div", {
|
|
372
|
-
"data-slot": "alert-action",
|
|
373
|
-
className: cn("absolute top-2 right-2", className),
|
|
374
|
-
...props
|
|
375
|
-
});
|
|
376
|
-
}
|
|
377
|
-
// src/lib/control-defaults.tsx
|
|
378
|
-
const ControlDefaultsContext = createContext({});
|
|
379
|
-
function useControlDefaults() {
|
|
380
|
-
return useContext(ControlDefaultsContext);
|
|
381
|
-
}
|
|
382
|
-
// src/lib/use-press.ts
|
|
383
|
-
/**
|
|
384
|
-
* Parts of a larger shape, or high-frequency toggles: their buttons don't scale on their own
|
|
385
|
-
* (legacy `pressScale={false}`). A Toggle Group outside a Toolbar counts too (#128, alpha-4), and
|
|
386
|
-
* Pagination and the Calendar's day grid (#136).
|
|
387
|
-
*/
|
|
388
|
-
const SEGMENT = "[data-slot=\"input-group\"], [data-slot=\"button-group\"], [data-slot=\"toolbar\"], [data-slot=\"toggle-group\"], [data-slot=\"pagination-link\"], [data-slot=\"calendar\"]";
|
|
389
|
-
/**
|
|
390
|
-
* Pointer-only press: scale to `scale.press` on pointer-down and back on release, on `spring.snap`,
|
|
391
|
-
* interruptible from the live value. Never on hover, on keyboard activation, when disabled, under
|
|
392
|
-
* reduced motion (the OS or `<html data-motion>`), or inside a segmented shape.
|
|
393
|
-
*/
|
|
394
|
-
function usePress() {
|
|
395
|
-
const prefersReduced = useReducedMotion() ?? false;
|
|
396
|
-
const configReduced = useReducedMotionConfig() ?? false;
|
|
397
|
-
const pressed = useRef(null);
|
|
398
|
-
const reduced = useCallback(() => {
|
|
399
|
-
const html = document.documentElement.dataset.motion;
|
|
400
|
-
if (html === "reduce") return true;
|
|
401
|
-
if (html === "full") return false;
|
|
402
|
-
return prefersReduced || configReduced;
|
|
403
|
-
}, [prefersReduced, configReduced]);
|
|
404
|
-
const release = useCallback(() => {
|
|
405
|
-
const el = pressed.current;
|
|
406
|
-
if (!el) return;
|
|
407
|
-
pressed.current = null;
|
|
408
|
-
animate(el, { scale: 1 }, spring.snap);
|
|
409
|
-
}, []);
|
|
410
|
-
return {
|
|
411
|
-
onPointerDown: useCallback((event) => {
|
|
412
|
-
const el = event.currentTarget;
|
|
413
|
-
if (event.defaultPrevented || event.button !== 0 || reduced()) return;
|
|
414
|
-
if (el.matches(":disabled, [aria-disabled='true'], [data-disabled]")) return;
|
|
415
|
-
if (el.closest(SEGMENT)) return;
|
|
416
|
-
if (el.hasAttribute("aria-haspopup")) return;
|
|
417
|
-
pressed.current = el;
|
|
418
|
-
animate(el, { scale: scale.press }, spring.snap);
|
|
419
|
-
}, [reduced]),
|
|
420
|
-
onPointerUp: release,
|
|
421
|
-
onPointerLeave: release,
|
|
422
|
-
onPointerCancel: release
|
|
423
|
-
};
|
|
424
|
-
}
|
|
425
|
-
// src/spinner/loader-provider.tsx
|
|
426
|
-
const LoaderContext = createContext({});
|
|
427
|
-
function useLoaderContext() {
|
|
428
|
-
return useContext(LoaderContext);
|
|
429
|
-
}
|
|
430
|
-
/**
|
|
431
|
-
* Cascades the loader play state and speed to a region (`display: contents`, so it adds no box) and
|
|
432
|
-
* gives its Spinners a default label.
|
|
433
|
-
*/
|
|
434
|
-
function LoaderProvider({ children, paused, duration, label }) {
|
|
435
|
-
const style = {
|
|
436
|
-
display: "contents",
|
|
437
|
-
...duration === void 0 ? null : { "--nsaa-loader-duration": `${duration}ms` }
|
|
438
|
-
};
|
|
439
|
-
return /* @__PURE__ */ jsx(LoaderContext.Provider, {
|
|
440
|
-
value: { label },
|
|
441
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
442
|
-
"data-slot": "loader-provider",
|
|
443
|
-
"data-loader-paused": paused ? "" : void 0,
|
|
444
|
-
style,
|
|
445
|
-
children
|
|
446
|
-
})
|
|
447
|
-
});
|
|
448
|
-
}
|
|
449
|
-
// src/spinner/spinner.tsx
|
|
450
|
-
registerLoaders({
|
|
451
|
-
arc: Arc,
|
|
452
|
-
ring: Ring,
|
|
453
|
-
classic: Classic,
|
|
454
|
-
"circular-dots": CircularDots,
|
|
455
|
-
"bouncing-dots": BouncingDots,
|
|
456
|
-
pulse: Pulse,
|
|
457
|
-
orbit: Orbit,
|
|
458
|
-
wave: Wave
|
|
459
|
-
});
|
|
460
|
-
/** The decorative glyph: a registered loader (Arc when the name isn't registered) or shadcn's Loader2. */
|
|
461
|
-
function glyph(variant) {
|
|
462
|
-
if (variant !== "lucide") return React.createElement(getLoader(variant) ?? Arc);
|
|
463
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
464
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
465
|
-
viewBox: "0 0 24 24",
|
|
466
|
-
fill: "none",
|
|
467
|
-
stroke: "currentColor",
|
|
468
|
-
strokeWidth: "2",
|
|
469
|
-
strokeLinecap: "round",
|
|
470
|
-
strokeLinejoin: "round",
|
|
471
|
-
"aria-hidden": "true",
|
|
472
|
-
"data-loader": "lucide",
|
|
473
|
-
className: "animate-spin",
|
|
474
|
-
children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
|
|
475
|
-
});
|
|
476
|
-
}
|
|
477
|
-
/** Paused while scrolled out of view or while the tab is hidden (performance, #63). */
|
|
478
|
-
function useOutOfSight(element, active) {
|
|
479
|
-
const [offscreen, setOffscreen] = React.useState(false);
|
|
480
|
-
const [hidden, setHidden] = React.useState(false);
|
|
481
|
-
React.useEffect(() => {
|
|
482
|
-
if (!active) return;
|
|
483
|
-
const el = element.current;
|
|
484
|
-
const onVisibility = () => setHidden(document.visibilityState === "hidden");
|
|
485
|
-
onVisibility();
|
|
486
|
-
document.addEventListener("visibilitychange", onVisibility);
|
|
487
|
-
let observer;
|
|
488
|
-
if (el && typeof IntersectionObserver !== "undefined") {
|
|
489
|
-
observer = new IntersectionObserver(([entry]) => setOffscreen(!entry?.isIntersecting));
|
|
490
|
-
observer.observe(el);
|
|
491
|
-
}
|
|
492
|
-
return () => {
|
|
493
|
-
document.removeEventListener("visibilitychange", onVisibility);
|
|
494
|
-
observer?.disconnect();
|
|
495
|
-
};
|
|
496
|
-
}, [element, active]);
|
|
497
|
-
return offscreen || hidden;
|
|
498
|
-
}
|
|
499
|
-
function Spinner({ variant = "arc", size, label, delay: delayProp, minDisplay = loader["min-display"], loading = true, duration, paused = false, sound = false, className, style, ...props }) {
|
|
500
|
-
const context = useLoaderContext();
|
|
501
|
-
const root = React.useRef(null);
|
|
502
|
-
const delay = delayProp ?? loader.delay;
|
|
503
|
-
const [phase, setPhase] = React.useState(!loading ? "hidden" : delay > 0 ? "pending" : "shown");
|
|
504
|
-
const shownAt = React.useRef(0);
|
|
505
|
-
const [wasLoading, setWasLoading] = React.useState(loading);
|
|
506
|
-
if (loading !== wasLoading) {
|
|
507
|
-
setWasLoading(loading);
|
|
508
|
-
if (loading && phase === "hidden") setPhase(delay > 0 ? "pending" : "shown");
|
|
509
|
-
if (!loading && phase === "pending") setPhase("hidden");
|
|
510
|
-
}
|
|
511
|
-
React.useEffect(() => {
|
|
512
|
-
if (phase === "shown") shownAt.current = Date.now();
|
|
513
|
-
}, [phase]);
|
|
514
|
-
React.useEffect(() => {
|
|
515
|
-
if (loading && phase === "pending") {
|
|
516
|
-
const timer = setTimeout(() => setPhase("shown"), delay);
|
|
517
|
-
return () => clearTimeout(timer);
|
|
518
|
-
}
|
|
519
|
-
if (!loading && phase === "shown") {
|
|
520
|
-
const left = shownAt.current + minDisplay - Date.now();
|
|
521
|
-
const timer = setTimeout(() => setPhase("hidden"), Math.max(0, left));
|
|
522
|
-
return () => clearTimeout(timer);
|
|
523
|
-
}
|
|
524
|
-
}, [
|
|
525
|
-
loading,
|
|
526
|
-
phase,
|
|
527
|
-
delay,
|
|
528
|
-
minDisplay
|
|
529
|
-
]);
|
|
530
|
-
const pendingRef = React.useCallback((node) => {
|
|
531
|
-
root.current = node;
|
|
532
|
-
if (node?.closest("button, [role=\"button\"], [data-slot=\"input-group\"]")) setPhase("shown");
|
|
533
|
-
}, []);
|
|
534
|
-
const outOfSight = useOutOfSight(root, phase === "shown");
|
|
535
|
-
const { loop } = useSound();
|
|
536
|
-
const audible = sound && phase === "shown" && !paused && !outOfSight;
|
|
537
|
-
React.useEffect(() => {
|
|
538
|
-
if (!audible) return;
|
|
539
|
-
return loop("progress.loop");
|
|
540
|
-
}, [audible, loop]);
|
|
541
|
-
if (phase === "hidden") return null;
|
|
542
|
-
if (phase === "pending") return /* @__PURE__ */ jsx("span", {
|
|
543
|
-
ref: pendingRef,
|
|
544
|
-
role: "status",
|
|
545
|
-
"data-slot": "spinner",
|
|
546
|
-
"data-pending": "",
|
|
547
|
-
className,
|
|
548
|
-
style,
|
|
549
|
-
...props
|
|
550
|
-
});
|
|
551
|
-
const vars = {
|
|
552
|
-
...size === void 0 && /(^|\s)size-/.test(className ?? "") ? { "--nsaa-loader-size": "100%" } : null,
|
|
553
|
-
...size === void 0 ? null : { "--nsaa-loader-size": typeof size === "number" ? `${size}px` : `var(--nsaa-loader-size-${size})` },
|
|
554
|
-
...duration === void 0 ? null : { "--nsaa-loader-duration": `${duration}ms` }
|
|
555
|
-
};
|
|
556
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
557
|
-
ref: root,
|
|
558
|
-
role: "status",
|
|
559
|
-
"data-slot": "spinner",
|
|
560
|
-
"data-variant": variant,
|
|
561
|
-
"data-loader-paused": paused || outOfSight ? "" : void 0,
|
|
562
|
-
className: cn("inline-flex shrink-0 items-center gap-1.5", className),
|
|
563
|
-
style: {
|
|
564
|
-
...vars,
|
|
565
|
-
...style
|
|
566
|
-
},
|
|
567
|
-
...props,
|
|
568
|
-
children: [glyph(variant), /* @__PURE__ */ jsx("span", {
|
|
569
|
-
"data-slot": "spinner-label",
|
|
570
|
-
className: "sr-only",
|
|
571
|
-
children: label ?? context.label ?? "Loading"
|
|
572
|
-
})]
|
|
573
|
-
});
|
|
574
|
-
}
|
|
575
|
-
// src/button/button.tsx
|
|
576
|
-
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
577
|
-
variants: {
|
|
578
|
-
variant: {
|
|
579
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
580
|
-
outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
581
|
-
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
582
|
-
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
583
|
-
destructive: "bg-destructive/10 text-destructive hover:text-destructive-hover-foreground focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
584
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
585
|
-
},
|
|
586
|
-
size: {
|
|
587
|
-
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
588
|
-
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
589
|
-
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
590
|
-
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
591
|
-
icon: "size-8",
|
|
592
|
-
"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
593
|
-
"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
|
594
|
-
"icon-lg": "size-9"
|
|
595
|
-
}
|
|
596
|
-
},
|
|
597
|
-
defaultVariants: {
|
|
598
|
-
variant: "default",
|
|
599
|
-
size: "default"
|
|
600
|
-
}
|
|
601
|
-
});
|
|
602
|
-
const SPINNER_SIZE = {
|
|
603
|
-
default: "md",
|
|
604
|
-
xs: "xs",
|
|
605
|
-
sm: "sm",
|
|
606
|
-
lg: "md",
|
|
607
|
-
icon: "md",
|
|
608
|
-
"icon-xs": "xs",
|
|
609
|
-
"icon-sm": "md",
|
|
610
|
-
"icon-lg": "md"
|
|
611
|
-
};
|
|
612
|
-
function hasStartIcon(children) {
|
|
613
|
-
return Children.toArray(children).some((child) => isValidElement(child) && child.props["data-icon"] === "inline-start");
|
|
614
|
-
}
|
|
615
|
-
/** `auto` (#130): `start` with a start icon or on an icon size, else `center`. */
|
|
616
|
-
function resolvePlacement(placement, children, size) {
|
|
617
|
-
if (placement !== "auto") return placement;
|
|
618
|
-
return size.startsWith("icon") || hasStartIcon(children) ? "start" : "center";
|
|
619
|
-
}
|
|
620
|
-
/**
|
|
621
|
-
* Loading content. `start` (#128): the Arc spinner takes the start icon's place at once, so the
|
|
622
|
-
* width stays the same; icon-only sizes swap their icon; with no start icon it sits before the
|
|
623
|
-
* label and the button grows. `center` (#130): the spinner sits over the middle and the content
|
|
624
|
-
* keeps its place, transparent (opacity, not visibility, so it still names the button).
|
|
625
|
-
*/
|
|
626
|
-
function loadingContent(children, size, label, placement) {
|
|
627
|
-
if (placement === "center") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
628
|
-
"data-slot": "button-spinner",
|
|
629
|
-
className: "absolute inset-0 flex items-center justify-center",
|
|
630
|
-
children: /* @__PURE__ */ jsx(Spinner, {
|
|
631
|
-
size: SPINNER_SIZE[size],
|
|
632
|
-
label
|
|
633
|
-
})
|
|
634
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
635
|
-
"data-slot": "button-content",
|
|
636
|
-
className: "inline-flex items-center gap-[inherit] opacity-0",
|
|
637
|
-
children
|
|
638
|
-
})] });
|
|
639
|
-
const spinner = /* @__PURE__ */ jsx(Spinner, {
|
|
640
|
-
"data-icon": "inline-start",
|
|
641
|
-
size: SPINNER_SIZE[size],
|
|
642
|
-
label
|
|
643
|
-
}, "spinner");
|
|
644
|
-
if (size.startsWith("icon")) return spinner;
|
|
645
|
-
let swapped = false;
|
|
646
|
-
const rest = Children.map(children, (child) => {
|
|
647
|
-
if (!swapped && isValidElement(child) && child.props["data-icon"] === "inline-start") {
|
|
648
|
-
swapped = true;
|
|
649
|
-
return spinner;
|
|
650
|
-
}
|
|
651
|
-
return child;
|
|
652
|
-
});
|
|
653
|
-
return swapped ? rest : [spinner, ...rest ?? []];
|
|
654
|
-
}
|
|
655
|
-
function Button({ className, variant = "default", size = "default", loading = false, loadingLabel = "Loading", loadingPlacement = "auto", children, onClick, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, ...props }) {
|
|
656
|
-
const press = usePress();
|
|
657
|
-
const cue = useCue("button");
|
|
658
|
-
const { sound = true } = useControlDefaults();
|
|
659
|
-
const placement = loading ? resolvePlacement(loadingPlacement, children, size ?? "default") : null;
|
|
660
|
-
return /* @__PURE__ */ jsx(Button$1, {
|
|
661
|
-
"data-slot": "button",
|
|
662
|
-
className: cn(buttonVariants({
|
|
663
|
-
variant,
|
|
664
|
-
size
|
|
665
|
-
}), placement === "center" && "relative", className),
|
|
666
|
-
"aria-busy": loading || void 0,
|
|
667
|
-
"data-loading": loading ? "" : void 0,
|
|
668
|
-
"data-loading-placement": placement ?? void 0,
|
|
669
|
-
onPointerDown: (event) => {
|
|
670
|
-
onPointerDown?.(event);
|
|
671
|
-
if (!loading) press.onPointerDown(event);
|
|
672
|
-
},
|
|
673
|
-
onPointerUp: (event) => {
|
|
674
|
-
onPointerUp?.(event);
|
|
675
|
-
press.onPointerUp();
|
|
676
|
-
},
|
|
677
|
-
onPointerLeave: (event) => {
|
|
678
|
-
onPointerLeave?.(event);
|
|
679
|
-
press.onPointerLeave();
|
|
680
|
-
},
|
|
681
|
-
onPointerCancel: (event) => {
|
|
682
|
-
onPointerCancel?.(event);
|
|
683
|
-
press.onPointerCancel();
|
|
684
|
-
},
|
|
685
|
-
onClick: (event) => {
|
|
686
|
-
if (loading) {
|
|
687
|
-
event.preventDefault();
|
|
688
|
-
event.preventBaseUIHandler();
|
|
689
|
-
return;
|
|
690
|
-
}
|
|
691
|
-
onClick?.(event);
|
|
692
|
-
const el = event.currentTarget;
|
|
693
|
-
const trigger = el.hasAttribute("aria-haspopup") || el.hasAttribute("aria-expanded");
|
|
694
|
-
if (sound && !event.defaultPrevented && !trigger) cue("press", { yield: true });
|
|
695
|
-
},
|
|
696
|
-
...props,
|
|
697
|
-
children: placement ? loadingContent(children, size ?? "default", loadingLabel, placement) : children
|
|
698
|
-
});
|
|
699
|
-
}
|
|
700
|
-
// src/alert-dialog/alert-dialog.tsx
|
|
701
|
-
function AlertDialog({ onOpenChange, ...props }) {
|
|
702
|
-
const cue = useCue("alert-dialog");
|
|
703
|
-
return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
|
|
704
|
-
"data-slot": "alert-dialog",
|
|
705
|
-
onOpenChange: (open, details) => {
|
|
706
|
-
onOpenChange?.(open, details);
|
|
707
|
-
if (!details.isCanceled) cue(open ? "open" : "close");
|
|
708
|
-
},
|
|
709
|
-
...props
|
|
710
|
-
});
|
|
711
|
-
}
|
|
712
|
-
function AlertDialogTrigger({ ...props }) {
|
|
713
|
-
return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
|
|
714
|
-
"data-slot": "alert-dialog-trigger",
|
|
715
|
-
...props
|
|
716
|
-
});
|
|
717
|
-
}
|
|
718
|
-
function AlertDialogPortal({ ...props }) {
|
|
719
|
-
return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
|
|
720
|
-
"data-slot": "alert-dialog-portal",
|
|
721
|
-
...props
|
|
722
|
-
});
|
|
723
|
-
}
|
|
724
|
-
function AlertDialogOverlay({ className, ...props }) {
|
|
725
|
-
return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
|
|
726
|
-
"data-slot": "alert-dialog-overlay",
|
|
727
|
-
className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
|
|
728
|
-
...props
|
|
729
|
-
});
|
|
730
|
-
}
|
|
731
|
-
function AlertDialogContent({ className, size = "default", ...props }) {
|
|
732
|
-
return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
|
|
733
|
-
"data-slot": "alert-dialog-content",
|
|
734
|
-
"data-size": size,
|
|
735
|
-
className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
736
|
-
...props
|
|
737
|
-
})] });
|
|
738
|
-
}
|
|
739
|
-
function AlertDialogHeader({ className, ...props }) {
|
|
740
|
-
return /* @__PURE__ */ jsx("div", {
|
|
741
|
-
"data-slot": "alert-dialog-header",
|
|
742
|
-
className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
|
|
743
|
-
...props
|
|
744
|
-
});
|
|
745
|
-
}
|
|
746
|
-
function AlertDialogFooter({ className, ...props }) {
|
|
747
|
-
return /* @__PURE__ */ jsx("div", {
|
|
748
|
-
"data-slot": "alert-dialog-footer",
|
|
749
|
-
className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
|
|
750
|
-
...props
|
|
751
|
-
});
|
|
752
|
-
}
|
|
753
|
-
function AlertDialogMedia({ className, ...props }) {
|
|
754
|
-
return /* @__PURE__ */ jsx("div", {
|
|
755
|
-
"data-slot": "alert-dialog-media",
|
|
756
|
-
className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
|
|
757
|
-
...props
|
|
758
|
-
});
|
|
759
|
-
}
|
|
760
|
-
function AlertDialogTitle({ className, ...props }) {
|
|
761
|
-
return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
|
|
762
|
-
"data-slot": "alert-dialog-title",
|
|
763
|
-
className: cn("cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
|
|
764
|
-
...props
|
|
765
|
-
});
|
|
766
|
-
}
|
|
767
|
-
function AlertDialogDescription({ className, ...props }) {
|
|
768
|
-
return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
|
|
769
|
-
"data-slot": "alert-dialog-description",
|
|
770
|
-
className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
|
|
771
|
-
...props
|
|
772
|
-
});
|
|
773
|
-
}
|
|
774
|
-
function AlertDialogAction({ className, ...props }) {
|
|
775
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
776
|
-
"data-slot": "alert-dialog-action",
|
|
777
|
-
className: cn(className),
|
|
778
|
-
...props
|
|
779
|
-
});
|
|
780
|
-
}
|
|
781
|
-
function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
|
|
782
|
-
return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
|
|
783
|
-
"data-slot": "alert-dialog-cancel",
|
|
784
|
-
className: cn(className),
|
|
785
|
-
render: /* @__PURE__ */ jsx(Button, {
|
|
786
|
-
variant,
|
|
787
|
-
size
|
|
788
|
-
}),
|
|
789
|
-
...props
|
|
790
|
-
});
|
|
791
|
-
}
|
|
792
|
-
// src/avatar/avatar.tsx
|
|
793
|
-
function Avatar({ className, size = "default", ...props }) {
|
|
794
|
-
return /* @__PURE__ */ jsx(Avatar$1.Root, {
|
|
795
|
-
"data-slot": "avatar",
|
|
796
|
-
"data-size": size,
|
|
797
|
-
className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
|
|
798
|
-
...props
|
|
799
|
-
});
|
|
800
|
-
}
|
|
801
|
-
function AvatarImage({ className, ...props }) {
|
|
802
|
-
return /* @__PURE__ */ jsx(Avatar$1.Image, {
|
|
803
|
-
"data-slot": "avatar-image",
|
|
804
|
-
className: cn("aspect-square size-full rounded-full object-cover", className),
|
|
805
|
-
...props
|
|
806
|
-
});
|
|
807
|
-
}
|
|
808
|
-
function AvatarFallback({ className, ...props }) {
|
|
809
|
-
return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
|
|
810
|
-
"data-slot": "avatar-fallback",
|
|
811
|
-
className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
|
|
812
|
-
...props
|
|
813
|
-
});
|
|
814
|
-
}
|
|
815
|
-
function AvatarBadge({ className, ...props }) {
|
|
816
|
-
return /* @__PURE__ */ jsx("span", {
|
|
817
|
-
"data-slot": "avatar-badge",
|
|
818
|
-
className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
|
|
819
|
-
...props
|
|
820
|
-
});
|
|
821
|
-
}
|
|
822
|
-
function AvatarGroup({ className, ...props }) {
|
|
823
|
-
return /* @__PURE__ */ jsx("div", {
|
|
824
|
-
"data-slot": "avatar-group",
|
|
825
|
-
className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
|
|
826
|
-
...props
|
|
827
|
-
});
|
|
828
|
-
}
|
|
829
|
-
function AvatarGroupCount({ className, ...props }) {
|
|
830
|
-
return /* @__PURE__ */ jsx("div", {
|
|
831
|
-
"data-slot": "avatar-group-count",
|
|
832
|
-
className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
|
|
833
|
-
...props
|
|
834
|
-
});
|
|
835
|
-
}
|
|
836
|
-
// src/badge/badge.tsx
|
|
837
|
-
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
838
|
-
variants: { variant: {
|
|
839
|
-
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
840
|
-
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
841
|
-
destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:text-destructive-hover-foreground",
|
|
842
|
-
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
843
|
-
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
844
|
-
link: "text-primary underline-offset-4 hover:underline"
|
|
845
|
-
} },
|
|
846
|
-
defaultVariants: { variant: "default" }
|
|
847
|
-
});
|
|
848
|
-
function Badge({ className, variant = "default", render, ...props }) {
|
|
849
|
-
return useRender({
|
|
850
|
-
defaultTagName: "span",
|
|
851
|
-
props: mergeProps({ className: cn(badgeVariants({ variant }), className) }, props),
|
|
852
|
-
render,
|
|
853
|
-
state: {
|
|
854
|
-
slot: "badge",
|
|
855
|
-
variant
|
|
856
|
-
}
|
|
857
|
-
});
|
|
858
|
-
}
|
|
859
|
-
// src/calendar/calendar.tsx
|
|
860
|
-
/** Lucide's chevrons, in place of shadcn's icon placeholder. */
|
|
861
|
-
function ChevronIcon({ className, orientation }) {
|
|
862
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
863
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
864
|
-
viewBox: "0 0 24 24",
|
|
865
|
-
fill: "none",
|
|
866
|
-
stroke: "currentColor",
|
|
867
|
-
strokeWidth: "2",
|
|
868
|
-
strokeLinecap: "round",
|
|
869
|
-
strokeLinejoin: "round",
|
|
870
|
-
"aria-hidden": "true",
|
|
871
|
-
className,
|
|
872
|
-
children: /* @__PURE__ */ jsx("path", { d: orientation === "left" ? "m15 18-6-6 6-6" : orientation === "right" ? "m9 18 6-6-6-6" : "m6 9 6 6 6-6" })
|
|
873
|
-
});
|
|
874
|
-
}
|
|
875
|
-
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
|
|
876
|
-
const defaultClassNames = getDefaultClassNames();
|
|
877
|
-
return /* @__PURE__ */ jsx(DayPicker, {
|
|
878
|
-
showOutsideDays,
|
|
879
|
-
className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
|
|
880
|
-
captionLayout,
|
|
881
|
-
locale,
|
|
882
|
-
formatters: {
|
|
883
|
-
formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
|
|
884
|
-
...formatters
|
|
885
|
-
},
|
|
886
|
-
classNames: {
|
|
887
|
-
root: cn("w-fit", defaultClassNames.root),
|
|
888
|
-
months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
|
|
889
|
-
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
|
890
|
-
nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
|
|
891
|
-
button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
|
|
892
|
-
button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
|
|
893
|
-
month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
|
|
894
|
-
dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
|
|
895
|
-
dropdown_root: cn("cn-calendar-dropdown-root relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
|
|
896
|
-
dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
|
|
897
|
-
caption_label: cn("font-medium select-none", captionLayout === "label" ? "cn-calendar-caption text-sm" : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
|
|
898
|
-
month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
|
|
899
|
-
weekdays: cn("flex", defaultClassNames.weekdays),
|
|
900
|
-
weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
|
|
901
|
-
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
|
902
|
-
week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
|
|
903
|
-
week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
|
|
904
|
-
day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
|
|
905
|
-
range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
|
|
906
|
-
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
|
907
|
-
range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
|
|
908
|
-
today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
|
|
909
|
-
outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
|
|
910
|
-
disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
|
|
911
|
-
hidden: cn("invisible", defaultClassNames.hidden),
|
|
912
|
-
...classNames
|
|
913
|
-
},
|
|
914
|
-
components: {
|
|
915
|
-
Root: ({ className, rootRef, ...props }) => {
|
|
916
|
-
return /* @__PURE__ */ jsx("div", {
|
|
917
|
-
"data-slot": "calendar",
|
|
918
|
-
ref: rootRef,
|
|
919
|
-
className: cn(className),
|
|
920
|
-
...props
|
|
921
|
-
});
|
|
922
|
-
},
|
|
923
|
-
Chevron: ({ className, orientation }) => {
|
|
924
|
-
if (orientation === "left") return /* @__PURE__ */ jsx(ChevronIcon, {
|
|
925
|
-
orientation: "left",
|
|
926
|
-
className: cn("cn-rtl-flip size-4", className)
|
|
927
|
-
});
|
|
928
|
-
if (orientation === "right") return /* @__PURE__ */ jsx(ChevronIcon, {
|
|
929
|
-
orientation: "right",
|
|
930
|
-
className: cn("cn-rtl-flip size-4", className)
|
|
931
|
-
});
|
|
932
|
-
return /* @__PURE__ */ jsx(ChevronIcon, {
|
|
933
|
-
orientation: "down",
|
|
934
|
-
className: cn("size-4", className)
|
|
935
|
-
});
|
|
936
|
-
},
|
|
937
|
-
DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
|
|
938
|
-
locale,
|
|
939
|
-
...props
|
|
940
|
-
}),
|
|
941
|
-
WeekNumber: ({ children, ...props }) => {
|
|
942
|
-
return /* @__PURE__ */ jsx("td", {
|
|
943
|
-
...props,
|
|
944
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
945
|
-
className: "flex size-(--cell-size) items-center justify-center text-center",
|
|
946
|
-
children
|
|
947
|
-
})
|
|
948
|
-
});
|
|
949
|
-
},
|
|
950
|
-
...components
|
|
951
|
-
},
|
|
952
|
-
...props
|
|
953
|
-
});
|
|
954
|
-
}
|
|
955
|
-
function CalendarDayButton({ className, day, modifiers, locale, onClick, "aria-label": label, ...props }) {
|
|
956
|
-
const defaultClassNames = getDefaultClassNames();
|
|
957
|
-
const cue = useCue("calendar");
|
|
958
|
-
const ref = React.useRef(null);
|
|
959
|
-
React.useEffect(() => {
|
|
960
|
-
if (modifiers.focused) ref.current?.focus();
|
|
961
|
-
}, [modifiers.focused]);
|
|
962
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
963
|
-
variant: "ghost",
|
|
964
|
-
size: "icon",
|
|
965
|
-
"data-day": day.date.toLocaleDateString(locale?.code),
|
|
966
|
-
"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
|
|
967
|
-
"data-range-start": modifiers.range_start,
|
|
968
|
-
"data-range-end": modifiers.range_end,
|
|
969
|
-
"data-range-middle": modifiers.range_middle,
|
|
970
|
-
ref,
|
|
971
|
-
"aria-label": label?.replace(/\b(\d{1,2})(?:st|nd|rd|th)\b/, "$1"),
|
|
972
|
-
"aria-current": modifiers.today ? "date" : void 0,
|
|
973
|
-
onClick: (event) => {
|
|
974
|
-
onClick?.(event);
|
|
975
|
-
if (!modifiers.disabled) cue("select");
|
|
976
|
-
},
|
|
977
|
-
className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
|
|
978
|
-
...props
|
|
979
|
-
});
|
|
980
|
-
}
|
|
981
|
-
// src/card/card.tsx
|
|
982
|
-
function Card({ className, size = "default", ...props }) {
|
|
983
|
-
return /* @__PURE__ */ jsx("div", {
|
|
984
|
-
"data-slot": "card",
|
|
985
|
-
"data-size": size,
|
|
986
|
-
className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
|
|
987
|
-
...props
|
|
988
|
-
});
|
|
989
|
-
}
|
|
990
|
-
function CardHeader({ className, ...props }) {
|
|
991
|
-
return /* @__PURE__ */ jsx("div", {
|
|
992
|
-
"data-slot": "card-header",
|
|
993
|
-
className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className),
|
|
994
|
-
...props
|
|
995
|
-
});
|
|
996
|
-
}
|
|
997
|
-
function CardTitle({ className, ...props }) {
|
|
998
|
-
return /* @__PURE__ */ jsx("div", {
|
|
999
|
-
"data-slot": "card-title",
|
|
1000
|
-
className: cn("cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
|
|
1001
|
-
...props
|
|
1002
|
-
});
|
|
1003
|
-
}
|
|
1004
|
-
function CardDescription({ className, ...props }) {
|
|
1005
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1006
|
-
"data-slot": "card-description",
|
|
1007
|
-
className: cn("text-sm text-muted-foreground", className),
|
|
1008
|
-
...props
|
|
1009
|
-
});
|
|
1010
|
-
}
|
|
1011
|
-
function CardAction({ className, ...props }) {
|
|
1012
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1013
|
-
"data-slot": "card-action",
|
|
1014
|
-
className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
|
|
1015
|
-
...props
|
|
1016
|
-
});
|
|
1017
|
-
}
|
|
1018
|
-
function CardContent({ className, ...props }) {
|
|
1019
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1020
|
-
"data-slot": "card-content",
|
|
1021
|
-
className: cn("px-(--card-spacing)", className),
|
|
1022
|
-
...props
|
|
1023
|
-
});
|
|
1024
|
-
}
|
|
1025
|
-
function CardFooter({ className, ...props }) {
|
|
1026
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1027
|
-
"data-slot": "card-footer",
|
|
1028
|
-
className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className),
|
|
1029
|
-
...props
|
|
1030
|
-
});
|
|
1031
|
-
}
|
|
1032
|
-
// src/checkbox/checkbox.tsx
|
|
1033
|
-
function Checkbox({ className, onCheckedChange, ...props }) {
|
|
1034
|
-
const cue = useCue("checkbox");
|
|
1035
|
-
return /* @__PURE__ */ jsx(Checkbox$1.Root, {
|
|
1036
|
-
"data-slot": "checkbox",
|
|
1037
|
-
className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className),
|
|
1038
|
-
onCheckedChange: (checked, details) => {
|
|
1039
|
-
onCheckedChange?.(checked, details);
|
|
1040
|
-
if (!details.isCanceled) cue(checked ? "on" : "off");
|
|
1041
|
-
},
|
|
1042
|
-
...props,
|
|
1043
|
-
children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
|
|
1044
|
-
"data-slot": "checkbox-indicator",
|
|
1045
|
-
className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
|
|
1046
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
1047
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1048
|
-
viewBox: "0 0 24 24",
|
|
1049
|
-
fill: "none",
|
|
1050
|
-
stroke: "currentColor",
|
|
1051
|
-
strokeWidth: "2",
|
|
1052
|
-
strokeLinecap: "round",
|
|
1053
|
-
strokeLinejoin: "round",
|
|
1054
|
-
"aria-hidden": "true",
|
|
1055
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1056
|
-
})
|
|
1057
|
-
})
|
|
1058
|
-
});
|
|
1059
|
-
}
|
|
1060
|
-
// src/collapsible/collapsible.tsx
|
|
1061
|
-
function Collapsible({ ...props }) {
|
|
1062
|
-
return /* @__PURE__ */ jsx(Collapsible$1.Root, {
|
|
1063
|
-
"data-slot": "collapsible",
|
|
1064
|
-
...props
|
|
1065
|
-
});
|
|
1066
|
-
}
|
|
1067
|
-
function CollapsibleTrigger({ ...props }) {
|
|
1068
|
-
return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
|
|
1069
|
-
"data-slot": "collapsible-trigger",
|
|
1070
|
-
...props
|
|
1071
|
-
});
|
|
1072
|
-
}
|
|
1073
|
-
function CollapsibleContent({ ...props }) {
|
|
1074
|
-
return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
|
|
1075
|
-
"data-slot": "collapsible-content",
|
|
1076
|
-
...props
|
|
1077
|
-
});
|
|
1078
|
-
}
|
|
1079
|
-
// src/input/input.tsx
|
|
1080
|
-
function Input({ className, type, ...props }) {
|
|
1081
|
-
return /* @__PURE__ */ jsx(Input$1, {
|
|
1082
|
-
type,
|
|
1083
|
-
"data-slot": "input",
|
|
1084
|
-
className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
1085
|
-
...props
|
|
1086
|
-
});
|
|
1087
|
-
}
|
|
1088
|
-
// src/textarea/textarea.tsx
|
|
1089
|
-
function Textarea({ className, ...props }) {
|
|
1090
|
-
return /* @__PURE__ */ jsx("textarea", {
|
|
1091
|
-
"data-slot": "textarea",
|
|
1092
|
-
className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
|
|
1093
|
-
...props
|
|
1094
|
-
});
|
|
1095
|
-
}
|
|
1096
|
-
// src/input-group/input-group.tsx
|
|
1097
|
-
function InputGroup({ className, ...props }) {
|
|
1098
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1099
|
-
"data-slot": "input-group",
|
|
1100
|
-
role: "group",
|
|
1101
|
-
className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
|
|
1102
|
-
...props
|
|
1103
|
-
});
|
|
1104
|
-
}
|
|
1105
|
-
const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
|
|
1106
|
-
variants: { align: {
|
|
1107
|
-
"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
|
|
1108
|
-
"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
|
|
1109
|
-
"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
|
1110
|
-
"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
|
|
1111
|
-
} },
|
|
1112
|
-
defaultVariants: { align: "inline-start" }
|
|
1113
|
-
});
|
|
1114
|
-
function InputGroupAddon({ className, align = "inline-start", ...props }) {
|
|
1115
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1116
|
-
role: "group",
|
|
1117
|
-
"data-slot": "input-group-addon",
|
|
1118
|
-
"data-align": align,
|
|
1119
|
-
className: cn(inputGroupAddonVariants({ align }), className),
|
|
1120
|
-
onClick: (e) => {
|
|
1121
|
-
if (e.target.closest("button")) return;
|
|
1122
|
-
e.currentTarget.parentElement?.querySelector("input, textarea")?.focus();
|
|
1123
|
-
},
|
|
1124
|
-
...props
|
|
1125
|
-
});
|
|
1126
|
-
}
|
|
1127
|
-
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
|
|
1128
|
-
variants: { size: {
|
|
1129
|
-
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
1130
|
-
sm: "",
|
|
1131
|
-
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
|
|
1132
|
-
"icon-sm": "size-8 p-0 has-[>svg]:p-0"
|
|
1133
|
-
} },
|
|
1134
|
-
defaultVariants: { size: "xs" }
|
|
1135
|
-
});
|
|
1136
|
-
function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
|
|
1137
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
1138
|
-
type,
|
|
1139
|
-
"data-size": size,
|
|
1140
|
-
variant,
|
|
1141
|
-
className: cn(inputGroupButtonVariants({ size }), className),
|
|
1142
|
-
...props
|
|
1143
|
-
});
|
|
1144
|
-
}
|
|
1145
|
-
function InputGroupText({ className, ...props }) {
|
|
1146
|
-
return /* @__PURE__ */ jsx("span", {
|
|
1147
|
-
className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
|
|
1148
|
-
...props
|
|
1149
|
-
});
|
|
1150
|
-
}
|
|
1151
|
-
function InputGroupInput({ className, ...props }) {
|
|
1152
|
-
return /* @__PURE__ */ jsx(Input, {
|
|
1153
|
-
"data-slot": "input-group-control",
|
|
1154
|
-
className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
|
|
1155
|
-
...props
|
|
1156
|
-
});
|
|
1157
|
-
}
|
|
1158
|
-
function InputGroupTextarea({ className, ...props }) {
|
|
1159
|
-
return /* @__PURE__ */ jsx(Textarea, {
|
|
1160
|
-
"data-slot": "input-group-control",
|
|
1161
|
-
className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
|
|
1162
|
-
...props
|
|
1163
|
-
});
|
|
1164
|
-
}
|
|
1165
|
-
// src/combobox/combobox.tsx
|
|
1166
|
-
const COMBOBOX_CUE = {
|
|
1167
|
-
"item-press": "choose",
|
|
1168
|
-
"clear-press": "clear",
|
|
1169
|
-
"escape-key": "clear",
|
|
1170
|
-
"chip-remove-press": "chip-remove"
|
|
1171
|
-
};
|
|
1172
|
-
function Combobox({ onValueChange, ...props }) {
|
|
1173
|
-
const cue = useCue("combobox");
|
|
1174
|
-
return /* @__PURE__ */ jsx(Combobox$1.Root, {
|
|
1175
|
-
onValueChange: (value, details) => {
|
|
1176
|
-
onValueChange?.(value, details);
|
|
1177
|
-
const reason = details.reason === "none" && Array.isArray(value) ? "chip-remove-press" : details.reason;
|
|
1178
|
-
const event = COMBOBOX_CUE[reason];
|
|
1179
|
-
if (!details.isCanceled && event) cue(event);
|
|
1180
|
-
},
|
|
1181
|
-
...props
|
|
1182
|
-
});
|
|
1183
|
-
}
|
|
1184
|
-
function ComboboxValue({ ...props }) {
|
|
1185
|
-
return /* @__PURE__ */ jsx(Combobox$1.Value, {
|
|
1186
|
-
"data-slot": "combobox-value",
|
|
1187
|
-
...props
|
|
1188
|
-
});
|
|
1189
|
-
}
|
|
1190
|
-
function ComboboxTrigger({ className, children, ...props }) {
|
|
1191
|
-
return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
|
|
1192
|
-
"data-slot": "combobox-trigger",
|
|
1193
|
-
"aria-label": "Show options",
|
|
1194
|
-
className: cn("[&_svg:not([class*='size-'])]:size-4", className),
|
|
1195
|
-
...props,
|
|
1196
|
-
children: [children, /* @__PURE__ */ jsx("svg", {
|
|
1197
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1198
|
-
viewBox: "0 0 24 24",
|
|
1199
|
-
fill: "none",
|
|
1200
|
-
stroke: "currentColor",
|
|
1201
|
-
strokeWidth: "2",
|
|
1202
|
-
strokeLinecap: "round",
|
|
1203
|
-
strokeLinejoin: "round",
|
|
1204
|
-
className: "pointer-events-none size-4 text-muted-foreground",
|
|
1205
|
-
"aria-hidden": "true",
|
|
1206
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
1207
|
-
})]
|
|
1208
|
-
});
|
|
1209
|
-
}
|
|
1210
|
-
function ComboboxClear({ className, ...props }) {
|
|
1211
|
-
return /* @__PURE__ */ jsx(Combobox$1.Clear, {
|
|
1212
|
-
"data-slot": "combobox-clear",
|
|
1213
|
-
"aria-label": "Clear",
|
|
1214
|
-
render: /* @__PURE__ */ jsx(InputGroupButton, {
|
|
1215
|
-
variant: "ghost",
|
|
1216
|
-
size: "icon-xs"
|
|
1217
|
-
}),
|
|
1218
|
-
className: cn(className),
|
|
1219
|
-
...props,
|
|
1220
|
-
children: /* @__PURE__ */ jsxs("svg", {
|
|
1221
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1222
|
-
viewBox: "0 0 24 24",
|
|
1223
|
-
fill: "none",
|
|
1224
|
-
stroke: "currentColor",
|
|
1225
|
-
strokeWidth: "2",
|
|
1226
|
-
strokeLinecap: "round",
|
|
1227
|
-
strokeLinejoin: "round",
|
|
1228
|
-
className: "pointer-events-none",
|
|
1229
|
-
"aria-hidden": "true",
|
|
1230
|
-
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
1231
|
-
})
|
|
1232
|
-
});
|
|
1233
|
-
}
|
|
1234
|
-
function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
|
|
1235
|
-
return /* @__PURE__ */ jsxs(InputGroup, {
|
|
1236
|
-
className: cn("w-auto", className),
|
|
1237
|
-
children: [
|
|
1238
|
-
/* @__PURE__ */ jsx(Combobox$1.Input, {
|
|
1239
|
-
render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
|
|
1240
|
-
...props
|
|
1241
|
-
}),
|
|
1242
|
-
/* @__PURE__ */ jsxs(InputGroupAddon, {
|
|
1243
|
-
align: "inline-end",
|
|
1244
|
-
children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
|
|
1245
|
-
size: "icon-xs",
|
|
1246
|
-
variant: "ghost",
|
|
1247
|
-
render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
|
|
1248
|
-
"data-slot": "input-group-button",
|
|
1249
|
-
className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
|
|
1250
|
-
disabled
|
|
1251
|
-
}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
|
|
1252
|
-
}),
|
|
1253
|
-
children
|
|
1254
|
-
]
|
|
1255
|
-
});
|
|
1256
|
-
}
|
|
1257
|
-
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
1258
|
-
return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
|
|
1259
|
-
side,
|
|
1260
|
-
sideOffset,
|
|
1261
|
-
align,
|
|
1262
|
-
alignOffset,
|
|
1263
|
-
anchor,
|
|
1264
|
-
className: "isolate z-50",
|
|
1265
|
-
children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
|
|
1266
|
-
"data-slot": "combobox-content",
|
|
1267
|
-
"data-chips": !!anchor,
|
|
1268
|
-
className: cn("cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
1269
|
-
...props
|
|
1270
|
-
})
|
|
1271
|
-
}) });
|
|
1272
|
-
}
|
|
1273
|
-
function ComboboxList({ className, ...props }) {
|
|
1274
|
-
return /* @__PURE__ */ jsx(Combobox$1.List, {
|
|
1275
|
-
"data-slot": "combobox-list",
|
|
1276
|
-
className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className),
|
|
1277
|
-
...props
|
|
1278
|
-
});
|
|
1279
|
-
}
|
|
1280
|
-
function ComboboxItem({ className, children, ...props }) {
|
|
1281
|
-
return /* @__PURE__ */ jsxs(Combobox$1.Item, {
|
|
1282
|
-
"data-slot": "combobox-item",
|
|
1283
|
-
className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
1284
|
-
...props,
|
|
1285
|
-
children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
|
|
1286
|
-
render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
|
|
1287
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
1288
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1289
|
-
viewBox: "0 0 24 24",
|
|
1290
|
-
fill: "none",
|
|
1291
|
-
stroke: "currentColor",
|
|
1292
|
-
strokeWidth: "2",
|
|
1293
|
-
strokeLinecap: "round",
|
|
1294
|
-
strokeLinejoin: "round",
|
|
1295
|
-
className: "pointer-events-none",
|
|
1296
|
-
"aria-hidden": "true",
|
|
1297
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1298
|
-
})
|
|
1299
|
-
})]
|
|
1300
|
-
});
|
|
1301
|
-
}
|
|
1302
|
-
function ComboboxGroup({ className, ...props }) {
|
|
1303
|
-
return /* @__PURE__ */ jsx(Combobox$1.Group, {
|
|
1304
|
-
"data-slot": "combobox-group",
|
|
1305
|
-
className: cn(className),
|
|
1306
|
-
...props
|
|
1307
|
-
});
|
|
1308
|
-
}
|
|
1309
|
-
function ComboboxLabel({ className, ...props }) {
|
|
1310
|
-
return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
|
|
1311
|
-
"data-slot": "combobox-label",
|
|
1312
|
-
className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
|
|
1313
|
-
...props
|
|
1314
|
-
});
|
|
1315
|
-
}
|
|
1316
|
-
function ComboboxCollection({ ...props }) {
|
|
1317
|
-
return /* @__PURE__ */ jsx(Combobox$1.Collection, {
|
|
1318
|
-
"data-slot": "combobox-collection",
|
|
1319
|
-
...props
|
|
1320
|
-
});
|
|
1321
|
-
}
|
|
1322
|
-
function ComboboxEmpty({ className, ...props }) {
|
|
1323
|
-
return /* @__PURE__ */ jsx(Combobox$1.Empty, {
|
|
1324
|
-
"data-slot": "combobox-empty",
|
|
1325
|
-
className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className),
|
|
1326
|
-
...props
|
|
1327
|
-
});
|
|
1328
|
-
}
|
|
1329
|
-
function ComboboxSeparator({ className, ...props }) {
|
|
1330
|
-
return /* @__PURE__ */ jsx(Combobox$1.Separator, {
|
|
1331
|
-
"data-slot": "combobox-separator",
|
|
1332
|
-
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
1333
|
-
...props
|
|
1334
|
-
});
|
|
1335
|
-
}
|
|
1336
|
-
function ComboboxChips({ className, ...props }) {
|
|
1337
|
-
return /* @__PURE__ */ jsx(Combobox$1.Chips, {
|
|
1338
|
-
"data-slot": "combobox-chips",
|
|
1339
|
-
className: cn("flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className),
|
|
1340
|
-
...props
|
|
1341
|
-
});
|
|
1342
|
-
}
|
|
1343
|
-
function ComboboxChip({ className, children, showRemove = true, removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove", ...props }) {
|
|
1344
|
-
return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
|
|
1345
|
-
"data-slot": "combobox-chip",
|
|
1346
|
-
className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
|
|
1347
|
-
...props,
|
|
1348
|
-
children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
|
|
1349
|
-
render: /* @__PURE__ */ jsx(Button, {
|
|
1350
|
-
variant: "ghost",
|
|
1351
|
-
size: "icon-xs"
|
|
1352
|
-
}),
|
|
1353
|
-
className: "-ml-1 opacity-50 hover:opacity-100",
|
|
1354
|
-
"data-slot": "combobox-chip-remove",
|
|
1355
|
-
"aria-label": removeLabel,
|
|
1356
|
-
children: /* @__PURE__ */ jsxs("svg", {
|
|
1357
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1358
|
-
viewBox: "0 0 24 24",
|
|
1359
|
-
fill: "none",
|
|
1360
|
-
stroke: "currentColor",
|
|
1361
|
-
strokeWidth: "2",
|
|
1362
|
-
strokeLinecap: "round",
|
|
1363
|
-
strokeLinejoin: "round",
|
|
1364
|
-
className: "pointer-events-none",
|
|
1365
|
-
"aria-hidden": "true",
|
|
1366
|
-
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
1367
|
-
})
|
|
1368
|
-
})]
|
|
1369
|
-
});
|
|
1370
|
-
}
|
|
1371
|
-
function ComboboxChipsInput({ className, ...props }) {
|
|
1372
|
-
return /* @__PURE__ */ jsx(Combobox$1.Input, {
|
|
1373
|
-
"data-slot": "combobox-chip-input",
|
|
1374
|
-
className: cn("min-w-16 flex-1 outline-none", className),
|
|
1375
|
-
...props
|
|
1376
|
-
});
|
|
1377
|
-
}
|
|
1378
|
-
function useComboboxAnchor() {
|
|
1379
|
-
return React.useRef(null);
|
|
1380
|
-
}
|
|
1381
|
-
// src/dialog/dialog.tsx
|
|
1382
|
-
function Dialog({ onOpenChange, ...props }) {
|
|
1383
|
-
const cue = useCue("dialog");
|
|
1384
|
-
return /* @__PURE__ */ jsx(Dialog$1.Root, {
|
|
1385
|
-
"data-slot": "dialog",
|
|
1386
|
-
onOpenChange: (open, details) => {
|
|
1387
|
-
onOpenChange?.(open, details);
|
|
1388
|
-
if (!details.isCanceled) cue(open ? "open" : "close");
|
|
1389
|
-
},
|
|
1390
|
-
...props
|
|
1391
|
-
});
|
|
1392
|
-
}
|
|
1393
|
-
function DialogTrigger({ ...props }) {
|
|
1394
|
-
return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
|
|
1395
|
-
"data-slot": "dialog-trigger",
|
|
1396
|
-
...props
|
|
1397
|
-
});
|
|
1398
|
-
}
|
|
1399
|
-
function DialogPortal({ ...props }) {
|
|
1400
|
-
return /* @__PURE__ */ jsx(Dialog$1.Portal, {
|
|
1401
|
-
"data-slot": "dialog-portal",
|
|
1402
|
-
...props
|
|
1403
|
-
});
|
|
1404
|
-
}
|
|
1405
|
-
function DialogClose({ ...props }) {
|
|
1406
|
-
return /* @__PURE__ */ jsx(Dialog$1.Close, {
|
|
1407
|
-
"data-slot": "dialog-close",
|
|
1408
|
-
...props
|
|
1409
|
-
});
|
|
1410
|
-
}
|
|
1411
|
-
function DialogOverlay({ className, ...props }) {
|
|
1412
|
-
return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
|
|
1413
|
-
"data-slot": "dialog-overlay",
|
|
1414
|
-
className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
|
|
1415
|
-
...props
|
|
1416
|
-
});
|
|
1417
|
-
}
|
|
1418
|
-
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
1419
|
-
return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
|
|
1420
|
-
"data-slot": "dialog-content",
|
|
1421
|
-
className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
1422
|
-
...props,
|
|
1423
|
-
children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
|
|
1424
|
-
"data-slot": "dialog-close",
|
|
1425
|
-
render: /* @__PURE__ */ jsx(Button, {
|
|
1426
|
-
variant: "ghost",
|
|
1427
|
-
className: "absolute top-2 right-2",
|
|
1428
|
-
size: "icon-sm"
|
|
1429
|
-
}),
|
|
1430
|
-
children: [/* @__PURE__ */ jsxs("svg", {
|
|
1431
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1432
|
-
viewBox: "0 0 24 24",
|
|
1433
|
-
fill: "none",
|
|
1434
|
-
stroke: "currentColor",
|
|
1435
|
-
strokeWidth: "2",
|
|
1436
|
-
strokeLinecap: "round",
|
|
1437
|
-
strokeLinejoin: "round",
|
|
1438
|
-
"aria-hidden": "true",
|
|
1439
|
-
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
1440
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
1441
|
-
className: "sr-only",
|
|
1442
|
-
children: "Close"
|
|
1443
|
-
})]
|
|
1444
|
-
})]
|
|
1445
|
-
})] });
|
|
1446
|
-
}
|
|
1447
|
-
function DialogHeader({ className, ...props }) {
|
|
1448
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1449
|
-
"data-slot": "dialog-header",
|
|
1450
|
-
className: cn("flex flex-col gap-2", className),
|
|
1451
|
-
...props
|
|
1452
|
-
});
|
|
1453
|
-
}
|
|
1454
|
-
function DialogFooter({ className, showCloseButton = false, children, ...props }) {
|
|
1455
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
1456
|
-
"data-slot": "dialog-footer",
|
|
1457
|
-
className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
|
|
1458
|
-
...props,
|
|
1459
|
-
children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
|
|
1460
|
-
render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
|
|
1461
|
-
children: "Close"
|
|
1462
|
-
})]
|
|
1463
|
-
});
|
|
1464
|
-
}
|
|
1465
|
-
function DialogTitle({ className, ...props }) {
|
|
1466
|
-
return /* @__PURE__ */ jsx(Dialog$1.Title, {
|
|
1467
|
-
"data-slot": "dialog-title",
|
|
1468
|
-
className: cn("cn-font-heading text-base leading-none font-medium", className),
|
|
1469
|
-
...props
|
|
1470
|
-
});
|
|
1471
|
-
}
|
|
1472
|
-
function DialogDescription({ className, ...props }) {
|
|
1473
|
-
return /* @__PURE__ */ jsx(Dialog$1.Description, {
|
|
1474
|
-
"data-slot": "dialog-description",
|
|
1475
|
-
className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
|
|
1476
|
-
...props
|
|
1477
|
-
});
|
|
1478
|
-
}
|
|
1479
|
-
// src/command/command.tsx
|
|
1480
|
-
function Command({ className, ...props }) {
|
|
1481
|
-
return /* @__PURE__ */ jsx(Command$1, {
|
|
1482
|
-
"data-slot": "command",
|
|
1483
|
-
className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
|
|
1484
|
-
...props
|
|
1485
|
-
});
|
|
1486
|
-
}
|
|
1487
|
-
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
|
|
1488
|
-
return /* @__PURE__ */ jsx(SoundSilence, { children: /* @__PURE__ */ jsxs(Dialog, {
|
|
1489
|
-
...props,
|
|
1490
|
-
children: [/* @__PURE__ */ jsxs(DialogHeader, {
|
|
1491
|
-
className: "sr-only",
|
|
1492
|
-
children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
|
|
1493
|
-
}), /* @__PURE__ */ jsx(DialogContent, {
|
|
1494
|
-
className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
|
|
1495
|
-
showCloseButton,
|
|
1496
|
-
children
|
|
1497
|
-
})]
|
|
1498
|
-
}) });
|
|
1499
|
-
}
|
|
1500
|
-
function CommandInput({ className, ...props }) {
|
|
1501
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1502
|
-
"data-slot": "command-input-wrapper",
|
|
1503
|
-
className: "p-1 pb-0",
|
|
1504
|
-
children: /* @__PURE__ */ jsxs(InputGroup, {
|
|
1505
|
-
className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!",
|
|
1506
|
-
children: [/* @__PURE__ */ jsx(Command$1.Input, {
|
|
1507
|
-
"data-slot": "command-input",
|
|
1508
|
-
className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
1509
|
-
...props
|
|
1510
|
-
}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsxs("svg", {
|
|
1511
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1512
|
-
viewBox: "0 0 24 24",
|
|
1513
|
-
fill: "none",
|
|
1514
|
-
stroke: "currentColor",
|
|
1515
|
-
strokeWidth: "2",
|
|
1516
|
-
strokeLinecap: "round",
|
|
1517
|
-
strokeLinejoin: "round",
|
|
1518
|
-
className: "size-4 shrink-0 opacity-50",
|
|
1519
|
-
"aria-hidden": "true",
|
|
1520
|
-
children: [/* @__PURE__ */ jsx("path", { d: "m21 21-4.34-4.34" }), /* @__PURE__ */ jsx("circle", {
|
|
1521
|
-
cx: "11",
|
|
1522
|
-
cy: "11",
|
|
1523
|
-
r: "8"
|
|
1524
|
-
})]
|
|
1525
|
-
}) })]
|
|
1526
|
-
})
|
|
1527
|
-
});
|
|
1528
|
-
}
|
|
1529
|
-
function CommandList({ className, ...props }) {
|
|
1530
|
-
return /* @__PURE__ */ jsx(Command$1.List, {
|
|
1531
|
-
"data-slot": "command-list",
|
|
1532
|
-
className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className),
|
|
1533
|
-
...props
|
|
1534
|
-
});
|
|
1535
|
-
}
|
|
1536
|
-
function CommandEmpty({ className, ...props }) {
|
|
1537
|
-
return /* @__PURE__ */ jsx(Command$1.Empty, {
|
|
1538
|
-
"data-slot": "command-empty",
|
|
1539
|
-
className: cn("py-6 text-center text-sm", className),
|
|
1540
|
-
...props
|
|
1541
|
-
});
|
|
1542
|
-
}
|
|
1543
|
-
function CommandGroup({ className, ...props }) {
|
|
1544
|
-
return /* @__PURE__ */ jsx(Command$1.Group, {
|
|
1545
|
-
"data-slot": "command-group",
|
|
1546
|
-
className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
|
|
1547
|
-
...props
|
|
1548
|
-
});
|
|
1549
|
-
}
|
|
1550
|
-
function CommandSeparator({ className, alwaysRender, ...props }) {
|
|
1551
|
-
if (useCommandState((state) => state.search !== "") && !alwaysRender) return null;
|
|
1552
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1553
|
-
role: "none",
|
|
1554
|
-
"cmdk-separator": "",
|
|
1555
|
-
"data-slot": "command-separator",
|
|
1556
|
-
className: cn("-mx-1 h-px bg-border", className),
|
|
1557
|
-
...props
|
|
1558
|
-
});
|
|
1559
|
-
}
|
|
1560
|
-
function CommandItem({ className, children, ...props }) {
|
|
1561
|
-
return /* @__PURE__ */ jsxs(Command$1.Item, {
|
|
1562
|
-
"data-slot": "command-item",
|
|
1563
|
-
className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className),
|
|
1564
|
-
...props,
|
|
1565
|
-
children: [children, /* @__PURE__ */ jsx("svg", {
|
|
1566
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1567
|
-
viewBox: "0 0 24 24",
|
|
1568
|
-
fill: "none",
|
|
1569
|
-
stroke: "currentColor",
|
|
1570
|
-
strokeWidth: "2",
|
|
1571
|
-
strokeLinecap: "round",
|
|
1572
|
-
strokeLinejoin: "round",
|
|
1573
|
-
className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100",
|
|
1574
|
-
"aria-hidden": "true",
|
|
1575
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1576
|
-
})]
|
|
1577
|
-
});
|
|
1578
|
-
}
|
|
1579
|
-
function CommandShortcut({ className, ...props }) {
|
|
1580
|
-
return /* @__PURE__ */ jsx("span", {
|
|
1581
|
-
"data-slot": "command-shortcut",
|
|
1582
|
-
className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
|
|
1583
|
-
...props
|
|
1584
|
-
});
|
|
1585
|
-
}
|
|
1586
|
-
// src/context-menu/context-menu.tsx
|
|
1587
|
-
function ContextMenu({ ...props }) {
|
|
1588
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
|
|
1589
|
-
"data-slot": "context-menu",
|
|
1590
|
-
...props
|
|
1591
|
-
});
|
|
1592
|
-
}
|
|
1593
|
-
function ContextMenuPortal({ ...props }) {
|
|
1594
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
|
|
1595
|
-
"data-slot": "context-menu-portal",
|
|
1596
|
-
...props
|
|
1597
|
-
});
|
|
1598
|
-
}
|
|
1599
|
-
function ContextMenuTrigger({ className, ...props }) {
|
|
1600
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
|
|
1601
|
-
"data-slot": "context-menu-trigger",
|
|
1602
|
-
className: cn("select-none", className),
|
|
1603
|
-
...props
|
|
1604
|
-
});
|
|
1605
|
-
}
|
|
1606
|
-
function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
|
|
1607
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
|
|
1608
|
-
className: "isolate z-50 outline-none",
|
|
1609
|
-
align,
|
|
1610
|
-
alignOffset,
|
|
1611
|
-
side,
|
|
1612
|
-
sideOffset,
|
|
1613
|
-
children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
|
|
1614
|
-
"data-slot": "context-menu-content",
|
|
1615
|
-
className: cn("cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
1616
|
-
...props
|
|
1617
|
-
})
|
|
1618
|
-
}) });
|
|
1619
|
-
}
|
|
1620
|
-
function ContextMenuGroup({ ...props }) {
|
|
1621
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
|
|
1622
|
-
"data-slot": "context-menu-group",
|
|
1623
|
-
...props
|
|
1624
|
-
});
|
|
1625
|
-
}
|
|
1626
|
-
function ContextMenuLabel({ className, inset, ...props }) {
|
|
1627
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
|
|
1628
|
-
"data-slot": "context-menu-label",
|
|
1629
|
-
"data-inset": inset,
|
|
1630
|
-
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
1631
|
-
...props
|
|
1632
|
-
});
|
|
1633
|
-
}
|
|
1634
|
-
function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
1635
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
|
|
1636
|
-
"data-slot": "context-menu-item",
|
|
1637
|
-
"data-inset": inset,
|
|
1638
|
-
"data-variant": variant,
|
|
1639
|
-
className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
1640
|
-
...props
|
|
1641
|
-
});
|
|
1642
|
-
}
|
|
1643
|
-
function ContextMenuSub({ ...props }) {
|
|
1644
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
|
|
1645
|
-
"data-slot": "context-menu-sub",
|
|
1646
|
-
...props
|
|
1647
|
-
});
|
|
1648
|
-
}
|
|
1649
|
-
function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
1650
|
-
return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
|
|
1651
|
-
"data-slot": "context-menu-sub-trigger",
|
|
1652
|
-
"data-inset": inset,
|
|
1653
|
-
className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
1654
|
-
...props,
|
|
1655
|
-
children: [children, /* @__PURE__ */ jsx("svg", {
|
|
1656
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1657
|
-
viewBox: "0 0 24 24",
|
|
1658
|
-
fill: "none",
|
|
1659
|
-
stroke: "currentColor",
|
|
1660
|
-
strokeWidth: "2",
|
|
1661
|
-
strokeLinecap: "round",
|
|
1662
|
-
strokeLinejoin: "round",
|
|
1663
|
-
className: "cn-rtl-flip ml-auto",
|
|
1664
|
-
"aria-hidden": "true",
|
|
1665
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
|
|
1666
|
-
})]
|
|
1667
|
-
});
|
|
1668
|
-
}
|
|
1669
|
-
function ContextMenuSubContent({ ...props }) {
|
|
1670
|
-
return /* @__PURE__ */ jsx(ContextMenuContent, {
|
|
1671
|
-
"data-slot": "context-menu-sub-content",
|
|
1672
|
-
className: "cn-menu-target cn-menu-translucent shadow-lg",
|
|
1673
|
-
side: "right",
|
|
1674
|
-
...props
|
|
1675
|
-
});
|
|
1676
|
-
}
|
|
1677
|
-
function ContextMenuCheckboxItem({ className, children, checked, inset, onCheckedChange, ...props }) {
|
|
1678
|
-
const cue = useCue("context-menu");
|
|
1679
|
-
return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
|
|
1680
|
-
"data-slot": "context-menu-checkbox-item",
|
|
1681
|
-
"data-inset": inset,
|
|
1682
|
-
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
1683
|
-
checked,
|
|
1684
|
-
onCheckedChange: (next, details) => {
|
|
1685
|
-
onCheckedChange?.(next, details);
|
|
1686
|
-
if (!details.isCanceled) cue("check");
|
|
1687
|
-
},
|
|
1688
|
-
...props,
|
|
1689
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
1690
|
-
className: "pointer-events-none absolute right-2",
|
|
1691
|
-
children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
|
|
1692
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1693
|
-
viewBox: "0 0 24 24",
|
|
1694
|
-
fill: "none",
|
|
1695
|
-
stroke: "currentColor",
|
|
1696
|
-
strokeWidth: "2",
|
|
1697
|
-
strokeLinecap: "round",
|
|
1698
|
-
strokeLinejoin: "round",
|
|
1699
|
-
"aria-hidden": "true",
|
|
1700
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1701
|
-
}) })
|
|
1702
|
-
}), children]
|
|
1703
|
-
});
|
|
1704
|
-
}
|
|
1705
|
-
function ContextMenuRadioGroup({ onValueChange, ...props }) {
|
|
1706
|
-
const cue = useCue("context-menu");
|
|
1707
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
|
|
1708
|
-
"data-slot": "context-menu-radio-group",
|
|
1709
|
-
onValueChange: (value, details) => {
|
|
1710
|
-
onValueChange?.(value, details);
|
|
1711
|
-
if (!details.isCanceled) cue("check");
|
|
1712
|
-
},
|
|
1713
|
-
...props
|
|
1714
|
-
});
|
|
1715
|
-
}
|
|
1716
|
-
function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
1717
|
-
return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
|
|
1718
|
-
"data-slot": "context-menu-radio-item",
|
|
1719
|
-
"data-inset": inset,
|
|
1720
|
-
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
1721
|
-
...props,
|
|
1722
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
1723
|
-
className: "pointer-events-none absolute right-2",
|
|
1724
|
-
children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
|
|
1725
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1726
|
-
viewBox: "0 0 24 24",
|
|
1727
|
-
fill: "none",
|
|
1728
|
-
stroke: "currentColor",
|
|
1729
|
-
strokeWidth: "2",
|
|
1730
|
-
strokeLinecap: "round",
|
|
1731
|
-
strokeLinejoin: "round",
|
|
1732
|
-
"aria-hidden": "true",
|
|
1733
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1734
|
-
}) })
|
|
1735
|
-
}), children]
|
|
1736
|
-
});
|
|
1737
|
-
}
|
|
1738
|
-
function ContextMenuSeparator({ className, ...props }) {
|
|
1739
|
-
return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
|
|
1740
|
-
"data-slot": "context-menu-separator",
|
|
1741
|
-
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
1742
|
-
...props
|
|
1743
|
-
});
|
|
1744
|
-
}
|
|
1745
|
-
function ContextMenuShortcut({ className, ...props }) {
|
|
1746
|
-
return /* @__PURE__ */ jsx("span", {
|
|
1747
|
-
"data-slot": "context-menu-shortcut",
|
|
1748
|
-
className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
|
|
1749
|
-
...props
|
|
1750
|
-
});
|
|
1751
|
-
}
|
|
1752
|
-
// src/drawer/drawer.tsx
|
|
1753
|
-
const DrawerContext = React.createContext(null);
|
|
1754
|
-
function useDrawer() {
|
|
1755
|
-
const context = React.useContext(DrawerContext);
|
|
1756
|
-
if (!context) throw new Error("useDrawer must be used within a Drawer.");
|
|
1757
|
-
return context;
|
|
1758
|
-
}
|
|
1759
|
-
function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", onOpenChange, onSnapPointChange, ...props }) {
|
|
1760
|
-
const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
|
|
1761
|
-
const cue = useCue("drawer");
|
|
1762
|
-
const closing = React.useRef(false);
|
|
1763
|
-
const contextValue = React.useMemo(() => ({
|
|
1764
|
-
hasSnapPoints,
|
|
1765
|
-
modal,
|
|
1766
|
-
showSwipeHandle,
|
|
1767
|
-
swipeDirection
|
|
1768
|
-
}), [
|
|
1769
|
-
hasSnapPoints,
|
|
1770
|
-
modal,
|
|
1771
|
-
showSwipeHandle,
|
|
1772
|
-
swipeDirection
|
|
1773
|
-
]);
|
|
1774
|
-
return /* @__PURE__ */ jsx(DrawerContext.Provider, {
|
|
1775
|
-
value: contextValue,
|
|
1776
|
-
children: /* @__PURE__ */ jsx(Drawer$1.Root, {
|
|
1777
|
-
"data-slot": "drawer",
|
|
1778
|
-
modal,
|
|
1779
|
-
snapPoints,
|
|
1780
|
-
swipeDirection,
|
|
1781
|
-
onOpenChange: (open, details) => {
|
|
1782
|
-
onOpenChange?.(open, details);
|
|
1783
|
-
if (details.isCanceled) return;
|
|
1784
|
-
closing.current = !open;
|
|
1785
|
-
cue(open ? "open" : "close");
|
|
1786
|
-
},
|
|
1787
|
-
onSnapPointChange: (snapPoint, details) => {
|
|
1788
|
-
onSnapPointChange?.(snapPoint, details);
|
|
1789
|
-
if (!details.isCanceled && snapPoint != null && !closing.current) cue("snap");
|
|
1790
|
-
},
|
|
1791
|
-
...props
|
|
1792
|
-
})
|
|
1793
|
-
});
|
|
1794
|
-
}
|
|
1795
|
-
function DrawerTrigger({ ...props }) {
|
|
1796
|
-
return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
|
|
1797
|
-
"data-slot": "drawer-trigger",
|
|
1798
|
-
...props
|
|
1799
|
-
});
|
|
1800
|
-
}
|
|
1801
|
-
function DrawerPortal({ ...props }) {
|
|
1802
|
-
return /* @__PURE__ */ jsx(Drawer$1.Portal, {
|
|
1803
|
-
"data-slot": "drawer-portal",
|
|
1804
|
-
...props
|
|
1805
|
-
});
|
|
1806
|
-
}
|
|
1807
|
-
function DrawerClose({ ...props }) {
|
|
1808
|
-
return /* @__PURE__ */ jsx(Drawer$1.Close, {
|
|
1809
|
-
"data-slot": "drawer-close",
|
|
1810
|
-
...props
|
|
1811
|
-
});
|
|
1812
|
-
}
|
|
1813
|
-
function DrawerOverlay({ className, ...props }) {
|
|
1814
|
-
return /* @__PURE__ */ jsx(Drawer$1.Backdrop, {
|
|
1815
|
-
"data-slot": "drawer-overlay",
|
|
1816
|
-
className: cn("fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className),
|
|
1817
|
-
...props
|
|
1818
|
-
});
|
|
1819
|
-
}
|
|
1820
|
-
function DrawerSwipeHandle({ className, ...props }) {
|
|
1821
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1822
|
-
"data-slot": "drawer-swipe-handle",
|
|
1823
|
-
"aria-hidden": "true",
|
|
1824
|
-
className: cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", className),
|
|
1825
|
-
...props
|
|
1826
|
-
});
|
|
1827
|
-
}
|
|
1828
|
-
function DrawerContent({ className, children, ...props }) {
|
|
1829
|
-
const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
|
|
1830
|
-
const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
|
|
1831
|
-
return /* @__PURE__ */ jsxs(DrawerPortal, {
|
|
1832
|
-
"data-slot": "drawer-portal",
|
|
1833
|
-
children: [modal === true && /* @__PURE__ */ jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : void 0 }), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
|
|
1834
|
-
"data-slot": "drawer-viewport",
|
|
1835
|
-
"data-modal": modal,
|
|
1836
|
-
className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto",
|
|
1837
|
-
children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
|
|
1838
|
-
"data-slot": "drawer-popup",
|
|
1839
|
-
"data-swipe-axis": swipeAxis,
|
|
1840
|
-
"data-snap-points": hasSnapPoints ? "" : void 0,
|
|
1841
|
-
className: cn("group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className),
|
|
1842
|
-
...props,
|
|
1843
|
-
children: [showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}), /* @__PURE__ */ jsx(Drawer$1.Content, {
|
|
1844
|
-
"data-slot": "drawer-content",
|
|
1845
|
-
className: cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"),
|
|
1846
|
-
children
|
|
1847
|
-
})]
|
|
1848
|
-
})
|
|
1849
|
-
})]
|
|
1850
|
-
});
|
|
1851
|
-
}
|
|
1852
|
-
function DrawerHeader({ className, ...props }) {
|
|
1853
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1854
|
-
"data-slot": "drawer-header",
|
|
1855
|
-
className: cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className),
|
|
1856
|
-
...props
|
|
1857
|
-
});
|
|
1858
|
-
}
|
|
1859
|
-
function DrawerFooter({ className, ...props }) {
|
|
1860
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1861
|
-
"data-slot": "drawer-footer",
|
|
1862
|
-
className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className),
|
|
1863
|
-
...props
|
|
1864
|
-
});
|
|
1865
|
-
}
|
|
1866
|
-
function DrawerTitle({ className, ...props }) {
|
|
1867
|
-
return /* @__PURE__ */ jsx(Drawer$1.Title, {
|
|
1868
|
-
"data-slot": "drawer-title",
|
|
1869
|
-
className: cn("cn-font-heading text-base font-medium text-foreground", className),
|
|
1870
|
-
...props
|
|
1871
|
-
});
|
|
1872
|
-
}
|
|
1873
|
-
function DrawerDescription({ className, ...props }) {
|
|
1874
|
-
return /* @__PURE__ */ jsx(Drawer$1.Description, {
|
|
1875
|
-
"data-slot": "drawer-description",
|
|
1876
|
-
className: cn("text-sm text-balance text-muted-foreground", className),
|
|
1877
|
-
...props
|
|
1878
|
-
});
|
|
1879
|
-
}
|
|
1880
|
-
// src/dropdown-menu/dropdown-menu.tsx
|
|
1881
|
-
function DropdownMenu({ ...props }) {
|
|
1882
|
-
return /* @__PURE__ */ jsx(Menu.Root, {
|
|
1883
|
-
"data-slot": "dropdown-menu",
|
|
1884
|
-
...props
|
|
1885
|
-
});
|
|
1886
|
-
}
|
|
1887
|
-
function DropdownMenuPortal({ ...props }) {
|
|
1888
|
-
return /* @__PURE__ */ jsx(Menu.Portal, {
|
|
1889
|
-
"data-slot": "dropdown-menu-portal",
|
|
1890
|
-
...props
|
|
1891
|
-
});
|
|
1892
|
-
}
|
|
1893
|
-
function DropdownMenuTrigger({ ...props }) {
|
|
1894
|
-
return /* @__PURE__ */ jsx(Menu.Trigger, {
|
|
1895
|
-
"data-slot": "dropdown-menu-trigger",
|
|
1896
|
-
...props
|
|
1897
|
-
});
|
|
1898
|
-
}
|
|
1899
|
-
function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
|
|
1900
|
-
return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
|
|
1901
|
-
className: "isolate z-50 outline-none",
|
|
1902
|
-
align,
|
|
1903
|
-
alignOffset,
|
|
1904
|
-
side,
|
|
1905
|
-
sideOffset,
|
|
1906
|
-
children: /* @__PURE__ */ jsx(Menu.Popup, {
|
|
1907
|
-
"data-slot": "dropdown-menu-content",
|
|
1908
|
-
className: cn("cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
1909
|
-
...props
|
|
1910
|
-
})
|
|
1911
|
-
}) });
|
|
1912
|
-
}
|
|
1913
|
-
function DropdownMenuGroup({ ...props }) {
|
|
1914
|
-
return /* @__PURE__ */ jsx(Menu.Group, {
|
|
1915
|
-
"data-slot": "dropdown-menu-group",
|
|
1916
|
-
...props
|
|
1917
|
-
});
|
|
1918
|
-
}
|
|
1919
|
-
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
1920
|
-
return /* @__PURE__ */ jsx(Menu.GroupLabel, {
|
|
1921
|
-
"data-slot": "dropdown-menu-label",
|
|
1922
|
-
"data-inset": inset,
|
|
1923
|
-
className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
|
|
1924
|
-
...props
|
|
1925
|
-
});
|
|
1926
|
-
}
|
|
1927
|
-
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
1928
|
-
return /* @__PURE__ */ jsx(Menu.Item, {
|
|
1929
|
-
"data-slot": "dropdown-menu-item",
|
|
1930
|
-
"data-inset": inset,
|
|
1931
|
-
"data-variant": variant,
|
|
1932
|
-
className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
|
|
1933
|
-
...props
|
|
1934
|
-
});
|
|
1935
|
-
}
|
|
1936
|
-
function DropdownMenuSub({ ...props }) {
|
|
1937
|
-
return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
|
|
1938
|
-
"data-slot": "dropdown-menu-sub",
|
|
1939
|
-
...props
|
|
1940
|
-
});
|
|
1941
|
-
}
|
|
1942
|
-
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
1943
|
-
return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
|
|
1944
|
-
"data-slot": "dropdown-menu-sub-trigger",
|
|
1945
|
-
"data-inset": inset,
|
|
1946
|
-
className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
1947
|
-
...props,
|
|
1948
|
-
children: [children, /* @__PURE__ */ jsx("svg", {
|
|
1949
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1950
|
-
viewBox: "0 0 24 24",
|
|
1951
|
-
fill: "none",
|
|
1952
|
-
stroke: "currentColor",
|
|
1953
|
-
strokeWidth: "2",
|
|
1954
|
-
strokeLinecap: "round",
|
|
1955
|
-
strokeLinejoin: "round",
|
|
1956
|
-
className: "cn-rtl-flip ml-auto",
|
|
1957
|
-
"aria-hidden": "true",
|
|
1958
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
|
|
1959
|
-
})]
|
|
1960
|
-
});
|
|
1961
|
-
}
|
|
1962
|
-
function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
|
|
1963
|
-
return /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
1964
|
-
"data-slot": "dropdown-menu-sub-content",
|
|
1965
|
-
className: cn("cn-menu-target cn-menu-translucent w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
1966
|
-
align,
|
|
1967
|
-
alignOffset,
|
|
1968
|
-
side,
|
|
1969
|
-
sideOffset,
|
|
1970
|
-
...props
|
|
1971
|
-
});
|
|
1972
|
-
}
|
|
1973
|
-
function DropdownMenuCheckboxItem({ className, children, checked, inset, onCheckedChange, ...props }) {
|
|
1974
|
-
const cue = useCue("dropdown-menu");
|
|
1975
|
-
return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
|
|
1976
|
-
"data-slot": "dropdown-menu-checkbox-item",
|
|
1977
|
-
"data-inset": inset,
|
|
1978
|
-
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
1979
|
-
checked,
|
|
1980
|
-
onCheckedChange: (next, details) => {
|
|
1981
|
-
onCheckedChange?.(next, details);
|
|
1982
|
-
if (!details.isCanceled) cue("check");
|
|
1983
|
-
},
|
|
1984
|
-
...props,
|
|
1985
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
1986
|
-
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
1987
|
-
"data-slot": "dropdown-menu-checkbox-item-indicator",
|
|
1988
|
-
children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
|
|
1989
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1990
|
-
viewBox: "0 0 24 24",
|
|
1991
|
-
fill: "none",
|
|
1992
|
-
stroke: "currentColor",
|
|
1993
|
-
strokeWidth: "2",
|
|
1994
|
-
strokeLinecap: "round",
|
|
1995
|
-
strokeLinejoin: "round",
|
|
1996
|
-
"aria-hidden": "true",
|
|
1997
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
1998
|
-
}) })
|
|
1999
|
-
}), children]
|
|
2000
|
-
});
|
|
2001
|
-
}
|
|
2002
|
-
function DropdownMenuRadioGroup({ onValueChange, ...props }) {
|
|
2003
|
-
const cue = useCue("dropdown-menu");
|
|
2004
|
-
return /* @__PURE__ */ jsx(Menu.RadioGroup, {
|
|
2005
|
-
"data-slot": "dropdown-menu-radio-group",
|
|
2006
|
-
onValueChange: (value, details) => {
|
|
2007
|
-
onValueChange?.(value, details);
|
|
2008
|
-
if (!details.isCanceled) cue("check");
|
|
2009
|
-
},
|
|
2010
|
-
...props
|
|
2011
|
-
});
|
|
2012
|
-
}
|
|
2013
|
-
function DropdownMenuRadioItem({ className, children, inset, ...props }) {
|
|
2014
|
-
return /* @__PURE__ */ jsxs(Menu.RadioItem, {
|
|
2015
|
-
"data-slot": "dropdown-menu-radio-item",
|
|
2016
|
-
"data-inset": inset,
|
|
2017
|
-
className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
2018
|
-
...props,
|
|
2019
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
2020
|
-
className: "pointer-events-none absolute right-2 flex items-center justify-center",
|
|
2021
|
-
"data-slot": "dropdown-menu-radio-item-indicator",
|
|
2022
|
-
children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
|
|
2023
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2024
|
-
viewBox: "0 0 24 24",
|
|
2025
|
-
fill: "none",
|
|
2026
|
-
stroke: "currentColor",
|
|
2027
|
-
strokeWidth: "2",
|
|
2028
|
-
strokeLinecap: "round",
|
|
2029
|
-
strokeLinejoin: "round",
|
|
2030
|
-
"aria-hidden": "true",
|
|
2031
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
2032
|
-
}) })
|
|
2033
|
-
}), children]
|
|
2034
|
-
});
|
|
2035
|
-
}
|
|
2036
|
-
function DropdownMenuSeparator({ className, ...props }) {
|
|
2037
|
-
return /* @__PURE__ */ jsx(Menu.Separator, {
|
|
2038
|
-
"data-slot": "dropdown-menu-separator",
|
|
2039
|
-
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
2040
|
-
...props
|
|
2041
|
-
});
|
|
2042
|
-
}
|
|
2043
|
-
function DropdownMenuShortcut({ className, ...props }) {
|
|
2044
|
-
return /* @__PURE__ */ jsx("span", {
|
|
2045
|
-
"data-slot": "dropdown-menu-shortcut",
|
|
2046
|
-
className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
|
|
2047
|
-
...props
|
|
2048
|
-
});
|
|
2049
|
-
}
|
|
2050
|
-
// src/empty/empty.tsx
|
|
2051
|
-
function Empty({ className, ...props }) {
|
|
2052
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2053
|
-
"data-slot": "empty",
|
|
2054
|
-
className: cn("il-host flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className),
|
|
2055
|
-
...props
|
|
2056
|
-
});
|
|
2057
|
-
}
|
|
2058
|
-
function EmptyHeader({ className, ...props }) {
|
|
2059
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2060
|
-
"data-slot": "empty-header",
|
|
2061
|
-
className: cn("flex max-w-sm flex-col items-center gap-2", className),
|
|
2062
|
-
...props
|
|
2063
|
-
});
|
|
2064
|
-
}
|
|
2065
|
-
const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
|
|
2066
|
-
variants: { variant: {
|
|
2067
|
-
default: "bg-transparent",
|
|
2068
|
-
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
|
2069
|
-
illustration: "bg-transparent data-[size=lg]:size-60 data-[size=md]:size-42 data-[size=sm]:size-30 [&_svg]:size-full"
|
|
2070
|
-
} },
|
|
2071
|
-
defaultVariants: { variant: "default" }
|
|
2072
|
-
});
|
|
2073
|
-
const EmptyIllustrationContext = React.createContext(null);
|
|
2074
|
-
/**
|
|
2075
|
-
* The options of the `EmptyMedia variant="illustration"` around an illustration, or null outside
|
|
2076
|
-
* one. Illustration components (`@nsaa/illustrations`) read it to pick their projection; the
|
|
2077
|
-
* variant classes sit on the media itself (#125).
|
|
2078
|
-
*/
|
|
2079
|
-
function useEmptyIllustration() {
|
|
2080
|
-
return React.useContext(EmptyIllustrationContext);
|
|
2081
|
-
}
|
|
2082
|
-
/** The engine's variant classes for these options. They work from an ancestor of `.il` (#125). */
|
|
2083
|
-
function illustrationClasses({ appearance, lines, backdrop }) {
|
|
2084
|
-
return cn(appearance === "filled" && "il--filled", lines === "brand" && "il--brand", backdrop === "floor" && "il--floor", backdrop === "grid" && "il--grid");
|
|
2085
|
-
}
|
|
2086
|
-
function EmptyMedia({ className, variant = "default", size = "md", appearance = "outlined", lines = "ink", backdrop = "none", projection = "isometric", children, ...props }) {
|
|
2087
|
-
const illustration = variant === "illustration";
|
|
2088
|
-
const options = React.useMemo(() => ({
|
|
2089
|
-
appearance,
|
|
2090
|
-
lines,
|
|
2091
|
-
backdrop,
|
|
2092
|
-
projection
|
|
2093
|
-
}), [
|
|
2094
|
-
appearance,
|
|
2095
|
-
lines,
|
|
2096
|
-
backdrop,
|
|
2097
|
-
projection
|
|
2098
|
-
]);
|
|
2099
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2100
|
-
"data-slot": "empty-icon",
|
|
2101
|
-
"data-variant": variant,
|
|
2102
|
-
"data-size": illustration ? size : void 0,
|
|
2103
|
-
"data-projection": illustration ? projection : void 0,
|
|
2104
|
-
className: cn(emptyMediaVariants({ variant }), illustration && illustrationClasses(options), className),
|
|
2105
|
-
...props,
|
|
2106
|
-
children: illustration ? /* @__PURE__ */ jsx(EmptyIllustrationContext.Provider, {
|
|
2107
|
-
value: options,
|
|
2108
|
-
children
|
|
2109
|
-
}) : children
|
|
2110
|
-
});
|
|
2111
|
-
}
|
|
2112
|
-
/** A div by default (base-nova); `render={<h2 />}` when the title heads a region. */
|
|
2113
|
-
function EmptyTitle({ className, render, ...props }) {
|
|
2114
|
-
return useRender({
|
|
2115
|
-
defaultTagName: "div",
|
|
2116
|
-
props: mergeProps({ className: cn("cn-font-heading text-label-heading", className) }, props),
|
|
2117
|
-
render,
|
|
2118
|
-
state: { slot: "empty-title" }
|
|
2119
|
-
});
|
|
2120
|
-
}
|
|
2121
|
-
function EmptyDescription({ className, ...props }) {
|
|
2122
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2123
|
-
"data-slot": "empty-description",
|
|
2124
|
-
className: cn("text-body-sm-loose text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
|
|
2125
|
-
...props
|
|
2126
|
-
});
|
|
2127
|
-
}
|
|
2128
|
-
function EmptyContent({ className, ...props }) {
|
|
2129
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2130
|
-
"data-slot": "empty-content",
|
|
2131
|
-
className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className),
|
|
2132
|
-
...props
|
|
2133
|
-
});
|
|
2134
|
-
}
|
|
2135
|
-
// src/label/label.tsx
|
|
2136
|
-
function Label({ className, ...props }) {
|
|
2137
|
-
return /* @__PURE__ */ jsx("label", {
|
|
2138
|
-
"data-slot": "label",
|
|
2139
|
-
className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50", className),
|
|
2140
|
-
...props
|
|
2141
|
-
});
|
|
2142
|
-
}
|
|
2143
|
-
// src/separator/separator.tsx
|
|
2144
|
-
function Separator({ className, orientation = "horizontal", ...props }) {
|
|
2145
|
-
return /* @__PURE__ */ jsx(Separator$1, {
|
|
2146
|
-
"data-slot": "separator",
|
|
2147
|
-
orientation,
|
|
2148
|
-
className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className),
|
|
2149
|
-
...props
|
|
2150
|
-
});
|
|
2151
|
-
}
|
|
2152
|
-
// src/field/field.tsx
|
|
2153
|
-
function FieldSet({ className, ...props }) {
|
|
2154
|
-
return /* @__PURE__ */ jsx("fieldset", {
|
|
2155
|
-
"data-slot": "field-set",
|
|
2156
|
-
className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
|
|
2157
|
-
...props
|
|
2158
|
-
});
|
|
2159
|
-
}
|
|
2160
|
-
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
2161
|
-
return /* @__PURE__ */ jsx("legend", {
|
|
2162
|
-
"data-slot": "field-legend",
|
|
2163
|
-
"data-variant": variant,
|
|
2164
|
-
className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className),
|
|
2165
|
-
...props
|
|
2166
|
-
});
|
|
2167
|
-
}
|
|
2168
|
-
function FieldGroup({ className, ...props }) {
|
|
2169
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2170
|
-
"data-slot": "field-group",
|
|
2171
|
-
className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className),
|
|
2172
|
-
...props
|
|
2173
|
-
});
|
|
2174
|
-
}
|
|
2175
|
-
const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
|
|
2176
|
-
variants: { orientation: {
|
|
2177
|
-
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
|
2178
|
-
horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
2179
|
-
responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
2180
|
-
} },
|
|
2181
|
-
defaultVariants: { orientation: "vertical" }
|
|
2182
|
-
});
|
|
2183
|
-
function Field({ className, orientation = "vertical", ...props }) {
|
|
2184
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2185
|
-
role: "group",
|
|
2186
|
-
"data-slot": "field",
|
|
2187
|
-
"data-orientation": orientation,
|
|
2188
|
-
className: cn(fieldVariants({ orientation }), className),
|
|
2189
|
-
...props
|
|
2190
|
-
});
|
|
2191
|
-
}
|
|
2192
|
-
function FieldContent({ className, ...props }) {
|
|
2193
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2194
|
-
"data-slot": "field-content",
|
|
2195
|
-
className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
|
|
2196
|
-
...props
|
|
2197
|
-
});
|
|
2198
|
-
}
|
|
2199
|
-
function FieldLabel({ className, ...props }) {
|
|
2200
|
-
return /* @__PURE__ */ jsx(Label, {
|
|
2201
|
-
"data-slot": "field-label",
|
|
2202
|
-
className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
|
|
2203
|
-
...props
|
|
2204
|
-
});
|
|
2205
|
-
}
|
|
2206
|
-
function FieldTitle({ className, ...props }) {
|
|
2207
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2208
|
-
"data-slot": "field-label",
|
|
2209
|
-
className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className),
|
|
2210
|
-
...props
|
|
2211
|
-
});
|
|
2212
|
-
}
|
|
2213
|
-
function FieldDescription({ className, ...props }) {
|
|
2214
|
-
return /* @__PURE__ */ jsx("p", {
|
|
2215
|
-
"data-slot": "field-description",
|
|
2216
|
-
className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
|
|
2217
|
-
...props
|
|
2218
|
-
});
|
|
2219
|
-
}
|
|
2220
|
-
function FieldSeparator({ children, className, ...props }) {
|
|
2221
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2222
|
-
"data-slot": "field-separator",
|
|
2223
|
-
"data-content": !!children,
|
|
2224
|
-
className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
|
|
2225
|
-
...props,
|
|
2226
|
-
children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
|
|
2227
|
-
className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
|
|
2228
|
-
"data-slot": "field-separator-content",
|
|
2229
|
-
children
|
|
2230
|
-
})]
|
|
2231
|
-
});
|
|
2232
|
-
}
|
|
2233
|
-
function FieldError({ className, children, errors, ...props }) {
|
|
2234
|
-
const content = useMemo(() => {
|
|
2235
|
-
if (children) return children;
|
|
2236
|
-
if (!errors?.length) return null;
|
|
2237
|
-
const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
|
|
2238
|
-
if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
|
|
2239
|
-
return /* @__PURE__ */ jsx("ul", {
|
|
2240
|
-
className: "ml-4 flex list-disc flex-col gap-1",
|
|
2241
|
-
children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
|
|
2242
|
-
});
|
|
2243
|
-
}, [children, errors]);
|
|
2244
|
-
if (!content) return null;
|
|
2245
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2246
|
-
role: "alert",
|
|
2247
|
-
"data-slot": "field-error",
|
|
2248
|
-
className: cn("text-sm font-normal text-destructive", className),
|
|
2249
|
-
...props,
|
|
2250
|
-
children: content
|
|
2251
|
-
});
|
|
2252
|
-
}
|
|
2253
|
-
// src/input-otp/input-otp.tsx
|
|
2254
|
-
function InputOTP({ className, containerClassName, ...props }) {
|
|
2255
|
-
const cue = useCue("input-otp");
|
|
2256
|
-
const invalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
|
|
2257
|
-
const complete = typeof props.value === "string" && props.value.length === props.maxLength;
|
|
2258
|
-
const wasInvalid = React.useRef(invalid);
|
|
2259
|
-
React.useEffect(() => {
|
|
2260
|
-
if (invalid && !wasInvalid.current && complete && recentUserAction()) cue("invalid");
|
|
2261
|
-
wasInvalid.current = invalid;
|
|
2262
|
-
}, [
|
|
2263
|
-
invalid,
|
|
2264
|
-
complete,
|
|
2265
|
-
cue
|
|
2266
|
-
]);
|
|
2267
|
-
return /* @__PURE__ */ jsx(OTPInput, {
|
|
2268
|
-
"data-slot": "input-otp",
|
|
2269
|
-
containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName),
|
|
2270
|
-
spellCheck: false,
|
|
2271
|
-
className: cn("disabled:cursor-not-allowed", className),
|
|
2272
|
-
...props
|
|
2273
|
-
});
|
|
2274
|
-
}
|
|
2275
|
-
function InputOTPGroup({ className, ...props }) {
|
|
2276
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2277
|
-
"data-slot": "input-otp-group",
|
|
2278
|
-
className: cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
|
|
2279
|
-
...props
|
|
2280
|
-
});
|
|
2281
|
-
}
|
|
2282
|
-
function InputOTPSlot({ index, className, ...props }) {
|
|
2283
|
-
const { char, hasFakeCaret, isActive } = React.useContext(OTPInputContext)?.slots[index] ?? {};
|
|
2284
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2285
|
-
"data-slot": "input-otp-slot",
|
|
2286
|
-
"data-active": isActive,
|
|
2287
|
-
className: cn("relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
|
|
2288
|
-
...props,
|
|
2289
|
-
children: [char && /* @__PURE__ */ jsx("span", {
|
|
2290
|
-
"data-slot": "input-otp-char",
|
|
2291
|
-
children: char
|
|
2292
|
-
}, char), hasFakeCaret && /* @__PURE__ */ jsx("div", {
|
|
2293
|
-
className: "pointer-events-none absolute inset-0 flex items-center justify-center",
|
|
2294
|
-
children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground" })
|
|
2295
|
-
})]
|
|
2296
|
-
});
|
|
2297
|
-
}
|
|
2298
|
-
function InputOTPSeparator({ ...props }) {
|
|
2299
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2300
|
-
"data-slot": "input-otp-separator",
|
|
2301
|
-
className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
|
|
2302
|
-
role: "separator",
|
|
2303
|
-
...props,
|
|
2304
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
2305
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2306
|
-
viewBox: "0 0 24 24",
|
|
2307
|
-
fill: "none",
|
|
2308
|
-
stroke: "currentColor",
|
|
2309
|
-
strokeWidth: "2",
|
|
2310
|
-
strokeLinecap: "round",
|
|
2311
|
-
strokeLinejoin: "round",
|
|
2312
|
-
"aria-hidden": "true",
|
|
2313
|
-
children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
|
|
2314
|
-
})
|
|
2315
|
-
});
|
|
2316
|
-
}
|
|
2317
|
-
// src/kbd/kbd.tsx
|
|
2318
|
-
function Kbd({ className, ...props }) {
|
|
2319
|
-
return /* @__PURE__ */ jsx("kbd", {
|
|
2320
|
-
"data-slot": "kbd",
|
|
2321
|
-
className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
|
|
2322
|
-
...props
|
|
2323
|
-
});
|
|
2324
|
-
}
|
|
2325
|
-
function KbdGroup({ className, ...props }) {
|
|
2326
|
-
return /* @__PURE__ */ jsx("kbd", {
|
|
2327
|
-
"data-slot": "kbd-group",
|
|
2328
|
-
className: cn("inline-flex items-center gap-1", className),
|
|
2329
|
-
...props
|
|
2330
|
-
});
|
|
2331
|
-
}
|
|
2332
|
-
// src/legacy/icon-button/icon-swap.tsx
|
|
2333
|
-
const INSTANT = { duration: 0 };
|
|
2334
|
-
const blurred = (radius) => `blur(${radius}px)`;
|
|
2335
|
-
/**
|
|
2336
|
-
* Swap states, as functions of `custom`, so an exiting icon reads the latest instant / reduced
|
|
2337
|
-
* values from AnimatePresence rather than the props it had when it was last rendered. Instant
|
|
2338
|
-
* and reduced swaps never scale or blur, not even for a frame.
|
|
2339
|
-
*/
|
|
2340
|
-
const iconSwapVariants = {
|
|
2341
|
-
hidden: ({ instant, reduced }) => ({
|
|
2342
|
-
opacity: 0,
|
|
2343
|
-
transform: `scale(${instant || reduced ? 1 : scale["icon-from"]})`,
|
|
2344
|
-
filter: blurred(instant || reduced ? 0 : blur.icon),
|
|
2345
|
-
transition: instant ? INSTANT : spring.icon
|
|
2346
|
-
}),
|
|
2347
|
-
shown: ({ instant }) => ({
|
|
2348
|
-
opacity: 1,
|
|
2349
|
-
transform: "scale(1)",
|
|
2350
|
-
filter: blurred(0),
|
|
2351
|
-
transition: instant ? INSTANT : spring.icon,
|
|
2352
|
-
transitionEnd: { filter: "none" }
|
|
2353
|
-
})
|
|
2354
|
-
};
|
|
2355
|
-
/**
|
|
2356
|
-
* Cross-fades between icons stacked in one grid cell, so the container never resizes. Nothing
|
|
2357
|
-
* animates on mount (`initial={false}`); springs retarget from the live value when interrupted,
|
|
2358
|
-
* and the latest content always wins.
|
|
2359
|
-
*/
|
|
2360
|
-
function IconSwap$1({ contentKey, instant, reduced, slot, layerClassName, className, children }) {
|
|
2361
|
-
const custom = {
|
|
2362
|
-
instant,
|
|
2363
|
-
reduced
|
|
2364
|
-
};
|
|
2365
|
-
return /* @__PURE__ */ jsx("span", {
|
|
2366
|
-
"aria-hidden": "true",
|
|
2367
|
-
className: cn(className, "grid place-items-center"),
|
|
2368
|
-
children: /* @__PURE__ */ jsx(AnimatePresence, {
|
|
2369
|
-
initial: false,
|
|
2370
|
-
custom,
|
|
2371
|
-
children: /* @__PURE__ */ jsx(motion.span, {
|
|
2372
|
-
"data-slot": slot,
|
|
2373
|
-
custom,
|
|
2374
|
-
variants: iconSwapVariants,
|
|
2375
|
-
initial: "hidden",
|
|
2376
|
-
animate: "shown",
|
|
2377
|
-
exit: "hidden",
|
|
2378
|
-
className: cn("inline-flex size-full items-center justify-center [grid-area:1/1] [&_svg]:size-full", layerClassName),
|
|
2379
|
-
children
|
|
2380
|
-
}, contentKey)
|
|
2381
|
-
})
|
|
2382
|
-
});
|
|
2383
|
-
}
|
|
2384
|
-
// src/lib/icon-swap.tsx
|
|
2385
|
-
/**
|
|
2386
|
-
* Cross-fades icons in one cell: scale 0.25 → 1, opacity, blur 4 → 0 on `spring.icon`. Instant
|
|
2387
|
-
* after a key press (input modality, #71 (3)); an opacity fade only under reduced motion (the OS,
|
|
2388
|
-
* a MotionConfig or `<html data-motion>`). Nothing animates on mount.
|
|
2389
|
-
*/
|
|
2390
|
-
function IconSwap({ contentKey, className, children }) {
|
|
2391
|
-
const prefersReduced = useReducedMotion() ?? false;
|
|
2392
|
-
const configReduced = useReducedMotionConfig() ?? false;
|
|
2393
|
-
const html = typeof document === "undefined" ? void 0 : document.documentElement.dataset.motion;
|
|
2394
|
-
const reduced = html === "reduce" || html !== "full" && (prefersReduced || configReduced);
|
|
2395
|
-
return /* @__PURE__ */ jsx(IconSwap$1, {
|
|
2396
|
-
contentKey,
|
|
2397
|
-
instant: getInputModality() === "keyboard",
|
|
2398
|
-
reduced,
|
|
2399
|
-
slot: "icon-swap",
|
|
2400
|
-
className,
|
|
2401
|
-
children
|
|
2402
|
-
});
|
|
2403
|
-
}
|
|
2404
|
-
// src/native-select/native-select.tsx
|
|
2405
|
-
function NativeSelect({ className, size = "default", ...props }) {
|
|
2406
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2407
|
-
className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
|
|
2408
|
-
"data-slot": "native-select-wrapper",
|
|
2409
|
-
"data-size": size,
|
|
2410
|
-
children: [/* @__PURE__ */ jsx("select", {
|
|
2411
|
-
"data-slot": "native-select",
|
|
2412
|
-
"data-size": size,
|
|
2413
|
-
className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
2414
|
-
...props
|
|
2415
|
-
}), /* @__PURE__ */ jsx("svg", {
|
|
2416
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2417
|
-
viewBox: "0 0 24 24",
|
|
2418
|
-
fill: "none",
|
|
2419
|
-
stroke: "currentColor",
|
|
2420
|
-
strokeWidth: "2",
|
|
2421
|
-
strokeLinecap: "round",
|
|
2422
|
-
strokeLinejoin: "round",
|
|
2423
|
-
className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
|
|
2424
|
-
"aria-hidden": "true",
|
|
2425
|
-
"data-slot": "native-select-icon",
|
|
2426
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
2427
|
-
})]
|
|
2428
|
-
});
|
|
2429
|
-
}
|
|
2430
|
-
function NativeSelectOption({ className, ...props }) {
|
|
2431
|
-
return /* @__PURE__ */ jsx("option", {
|
|
2432
|
-
"data-slot": "native-select-option",
|
|
2433
|
-
className: cn("bg-[Canvas] text-[CanvasText]", className),
|
|
2434
|
-
...props
|
|
2435
|
-
});
|
|
2436
|
-
}
|
|
2437
|
-
function NativeSelectOptGroup({ className, ...props }) {
|
|
2438
|
-
return /* @__PURE__ */ jsx("optgroup", {
|
|
2439
|
-
"data-slot": "native-select-optgroup",
|
|
2440
|
-
className: cn("bg-[Canvas] text-[CanvasText]", className),
|
|
2441
|
-
...props
|
|
2442
|
-
});
|
|
2443
|
-
}
|
|
2444
|
-
// src/pagination/pagination.tsx
|
|
2445
|
-
function Pagination({ className, ...props }) {
|
|
2446
|
-
return /* @__PURE__ */ jsx("nav", {
|
|
2447
|
-
role: "navigation",
|
|
2448
|
-
"aria-label": "pagination",
|
|
2449
|
-
"data-slot": "pagination",
|
|
2450
|
-
className: cn("mx-auto flex w-full justify-center", className),
|
|
2451
|
-
...props
|
|
2452
|
-
});
|
|
2453
|
-
}
|
|
2454
|
-
function PaginationContent({ className, ...props }) {
|
|
2455
|
-
return /* @__PURE__ */ jsx("ul", {
|
|
2456
|
-
"data-slot": "pagination-content",
|
|
2457
|
-
className: cn("flex items-center gap-0.5", className),
|
|
2458
|
-
...props
|
|
2459
|
-
});
|
|
2460
|
-
}
|
|
2461
|
-
function PaginationItem({ ...props }) {
|
|
2462
|
-
return /* @__PURE__ */ jsx("li", {
|
|
2463
|
-
"data-slot": "pagination-item",
|
|
2464
|
-
...props
|
|
2465
|
-
});
|
|
2466
|
-
}
|
|
2467
|
-
function PaginationLink({ className, isActive, size = "icon", ...props }) {
|
|
2468
|
-
return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
|
|
2469
|
-
value: SILENT,
|
|
2470
|
-
children: /* @__PURE__ */ jsx(Button, {
|
|
2471
|
-
variant: isActive ? "outline" : "ghost",
|
|
2472
|
-
size,
|
|
2473
|
-
className: cn(className),
|
|
2474
|
-
nativeButton: false,
|
|
2475
|
-
render: /* @__PURE__ */ jsx("a", {
|
|
2476
|
-
role: "link",
|
|
2477
|
-
"aria-current": isActive ? "page" : void 0,
|
|
2478
|
-
"data-slot": "pagination-link",
|
|
2479
|
-
"data-active": isActive,
|
|
2480
|
-
...props
|
|
2481
|
-
})
|
|
2482
|
-
})
|
|
2483
|
-
});
|
|
2484
|
-
}
|
|
2485
|
-
const SILENT = { sound: false };
|
|
2486
|
-
function PaginationPrevious({ className, text = "Previous", ...props }) {
|
|
2487
|
-
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
2488
|
-
"aria-label": "Go to previous page",
|
|
2489
|
-
size: "default",
|
|
2490
|
-
className: cn("pl-1.5!", className),
|
|
2491
|
-
...props,
|
|
2492
|
-
children: [/* @__PURE__ */ jsx("svg", {
|
|
2493
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2494
|
-
viewBox: "0 0 24 24",
|
|
2495
|
-
fill: "none",
|
|
2496
|
-
stroke: "currentColor",
|
|
2497
|
-
strokeWidth: "2",
|
|
2498
|
-
strokeLinecap: "round",
|
|
2499
|
-
strokeLinejoin: "round",
|
|
2500
|
-
"aria-hidden": "true",
|
|
2501
|
-
"data-icon": "inline-start",
|
|
2502
|
-
className: "cn-rtl-flip",
|
|
2503
|
-
children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
|
|
2504
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
2505
|
-
className: "hidden sm:block",
|
|
2506
|
-
children: text
|
|
2507
|
-
})]
|
|
2508
|
-
});
|
|
2509
|
-
}
|
|
2510
|
-
function PaginationNext({ className, text = "Next", ...props }) {
|
|
2511
|
-
return /* @__PURE__ */ jsxs(PaginationLink, {
|
|
2512
|
-
"aria-label": "Go to next page",
|
|
2513
|
-
size: "default",
|
|
2514
|
-
className: cn("pr-1.5!", className),
|
|
2515
|
-
...props,
|
|
2516
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
2517
|
-
className: "hidden sm:block",
|
|
2518
|
-
children: text
|
|
2519
|
-
}), /* @__PURE__ */ jsx("svg", {
|
|
2520
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2521
|
-
viewBox: "0 0 24 24",
|
|
2522
|
-
fill: "none",
|
|
2523
|
-
stroke: "currentColor",
|
|
2524
|
-
strokeWidth: "2",
|
|
2525
|
-
strokeLinecap: "round",
|
|
2526
|
-
strokeLinejoin: "round",
|
|
2527
|
-
"aria-hidden": "true",
|
|
2528
|
-
"data-icon": "inline-end",
|
|
2529
|
-
className: "cn-rtl-flip",
|
|
2530
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
|
|
2531
|
-
})]
|
|
2532
|
-
});
|
|
2533
|
-
}
|
|
2534
|
-
function PaginationEllipsis({ className, ...props }) {
|
|
2535
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
2536
|
-
"aria-hidden": true,
|
|
2537
|
-
"data-slot": "pagination-ellipsis",
|
|
2538
|
-
className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className),
|
|
2539
|
-
...props,
|
|
2540
|
-
children: [/* @__PURE__ */ jsxs("svg", {
|
|
2541
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2542
|
-
viewBox: "0 0 24 24",
|
|
2543
|
-
fill: "none",
|
|
2544
|
-
stroke: "currentColor",
|
|
2545
|
-
strokeWidth: "2",
|
|
2546
|
-
strokeLinecap: "round",
|
|
2547
|
-
strokeLinejoin: "round",
|
|
2548
|
-
"aria-hidden": "true",
|
|
2549
|
-
children: [
|
|
2550
|
-
/* @__PURE__ */ jsx("circle", {
|
|
2551
|
-
cx: "12",
|
|
2552
|
-
cy: "12",
|
|
2553
|
-
r: "1"
|
|
2554
|
-
}),
|
|
2555
|
-
/* @__PURE__ */ jsx("circle", {
|
|
2556
|
-
cx: "19",
|
|
2557
|
-
cy: "12",
|
|
2558
|
-
r: "1"
|
|
2559
|
-
}),
|
|
2560
|
-
/* @__PURE__ */ jsx("circle", {
|
|
2561
|
-
cx: "5",
|
|
2562
|
-
cy: "12",
|
|
2563
|
-
r: "1"
|
|
2564
|
-
})
|
|
2565
|
-
]
|
|
2566
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
2567
|
-
className: "sr-only",
|
|
2568
|
-
children: "More pages"
|
|
2569
|
-
})]
|
|
2570
|
-
});
|
|
2571
|
-
}
|
|
2572
|
-
// src/popover/popover.tsx
|
|
2573
|
-
function Popover({ ...props }) {
|
|
2574
|
-
return /* @__PURE__ */ jsx(Popover$1.Root, {
|
|
2575
|
-
"data-slot": "popover",
|
|
2576
|
-
...props
|
|
2577
|
-
});
|
|
2578
|
-
}
|
|
2579
|
-
function PopoverTrigger({ ...props }) {
|
|
2580
|
-
return /* @__PURE__ */ jsx(Popover$1.Trigger, {
|
|
2581
|
-
"data-slot": "popover-trigger",
|
|
2582
|
-
...props
|
|
2583
|
-
});
|
|
2584
|
-
}
|
|
2585
|
-
function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
|
|
2586
|
-
return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
|
|
2587
|
-
align,
|
|
2588
|
-
alignOffset,
|
|
2589
|
-
side,
|
|
2590
|
-
sideOffset,
|
|
2591
|
-
className: "isolate z-50",
|
|
2592
|
-
children: /* @__PURE__ */ jsx(Popover$1.Popup, {
|
|
2593
|
-
"data-slot": "popover-content",
|
|
2594
|
-
className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
2595
|
-
...props
|
|
2596
|
-
})
|
|
2597
|
-
}) });
|
|
2598
|
-
}
|
|
2599
|
-
function PopoverHeader({ className, ...props }) {
|
|
2600
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2601
|
-
"data-slot": "popover-header",
|
|
2602
|
-
className: cn("flex flex-col gap-0.5 text-sm", className),
|
|
2603
|
-
...props
|
|
2604
|
-
});
|
|
2605
|
-
}
|
|
2606
|
-
function PopoverTitle({ className, ...props }) {
|
|
2607
|
-
return /* @__PURE__ */ jsx(Popover$1.Title, {
|
|
2608
|
-
"data-slot": "popover-title",
|
|
2609
|
-
className: cn("font-medium", className),
|
|
2610
|
-
...props
|
|
2611
|
-
});
|
|
2612
|
-
}
|
|
2613
|
-
function PopoverDescription({ className, ...props }) {
|
|
2614
|
-
return /* @__PURE__ */ jsx(Popover$1.Description, {
|
|
2615
|
-
"data-slot": "popover-description",
|
|
2616
|
-
className: cn("text-muted-foreground", className),
|
|
2617
|
-
...props
|
|
2618
|
-
});
|
|
2619
|
-
}
|
|
2620
|
-
// src/radio-group/radio-group.tsx
|
|
2621
|
-
function RadioGroup({ className, onValueChange, ...props }) {
|
|
2622
|
-
const cue = useCue("radio-group");
|
|
2623
|
-
return /* @__PURE__ */ jsx(RadioGroup$1, {
|
|
2624
|
-
"data-slot": "radio-group",
|
|
2625
|
-
className: cn("grid w-full gap-2", className),
|
|
2626
|
-
onValueChange: (value, details) => {
|
|
2627
|
-
onValueChange?.(value, details);
|
|
2628
|
-
if (!details.isCanceled) cue("change");
|
|
2629
|
-
},
|
|
2630
|
-
...props
|
|
2631
|
-
});
|
|
2632
|
-
}
|
|
2633
|
-
function RadioGroupItem({ className, ...props }) {
|
|
2634
|
-
return /* @__PURE__ */ jsx(Radio.Root, {
|
|
2635
|
-
"data-slot": "radio-group-item",
|
|
2636
|
-
className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className),
|
|
2637
|
-
...props,
|
|
2638
|
-
children: /* @__PURE__ */ jsx(Radio.Indicator, {
|
|
2639
|
-
"data-slot": "radio-group-indicator",
|
|
2640
|
-
className: "flex size-4 items-center justify-center",
|
|
2641
|
-
children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" })
|
|
2642
|
-
})
|
|
2643
|
-
});
|
|
2644
|
-
}
|
|
2645
|
-
// src/select/select.tsx
|
|
2646
|
-
function Select({ onValueChange, ...props }) {
|
|
2647
|
-
const cue = useCue("select");
|
|
2648
|
-
return /* @__PURE__ */ jsx(Select$1.Root, {
|
|
2649
|
-
onValueChange: (value, details) => {
|
|
2650
|
-
onValueChange?.(value, details);
|
|
2651
|
-
if (!details.isCanceled) cue("choose");
|
|
2652
|
-
},
|
|
2653
|
-
...props
|
|
2654
|
-
});
|
|
2655
|
-
}
|
|
2656
|
-
function SelectGroup({ className, ...props }) {
|
|
2657
|
-
return /* @__PURE__ */ jsx(Select$1.Group, {
|
|
2658
|
-
"data-slot": "select-group",
|
|
2659
|
-
className: cn("scroll-my-1 p-1", className),
|
|
2660
|
-
...props
|
|
2661
|
-
});
|
|
2662
|
-
}
|
|
2663
|
-
function SelectValue({ className, ...props }) {
|
|
2664
|
-
return /* @__PURE__ */ jsx(Select$1.Value, {
|
|
2665
|
-
"data-slot": "select-value",
|
|
2666
|
-
className: cn("flex flex-1 text-left", className),
|
|
2667
|
-
...props
|
|
2668
|
-
});
|
|
2669
|
-
}
|
|
2670
|
-
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
2671
|
-
return /* @__PURE__ */ jsxs(Select$1.Trigger, {
|
|
2672
|
-
"data-slot": "select-trigger",
|
|
2673
|
-
"data-size": size,
|
|
2674
|
-
className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
2675
|
-
...props,
|
|
2676
|
-
children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx("svg", {
|
|
2677
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2678
|
-
viewBox: "0 0 24 24",
|
|
2679
|
-
fill: "none",
|
|
2680
|
-
stroke: "currentColor",
|
|
2681
|
-
strokeWidth: "2",
|
|
2682
|
-
strokeLinecap: "round",
|
|
2683
|
-
strokeLinejoin: "round",
|
|
2684
|
-
className: "pointer-events-none size-4 text-muted-foreground",
|
|
2685
|
-
"aria-hidden": "true",
|
|
2686
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
2687
|
-
}) })]
|
|
2688
|
-
});
|
|
2689
|
-
}
|
|
2690
|
-
function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
|
|
2691
|
-
return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
|
|
2692
|
-
side,
|
|
2693
|
-
sideOffset,
|
|
2694
|
-
align,
|
|
2695
|
-
alignOffset,
|
|
2696
|
-
alignItemWithTrigger,
|
|
2697
|
-
className: "isolate z-50",
|
|
2698
|
-
children: /* @__PURE__ */ jsxs(Select$1.Popup, {
|
|
2699
|
-
"data-slot": "select-content",
|
|
2700
|
-
"data-align-trigger": alignItemWithTrigger,
|
|
2701
|
-
className: cn("cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
2702
|
-
...props,
|
|
2703
|
-
children: [
|
|
2704
|
-
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
2705
|
-
/* @__PURE__ */ jsx(Select$1.List, { children }),
|
|
2706
|
-
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
2707
|
-
]
|
|
2708
|
-
})
|
|
2709
|
-
}) });
|
|
2710
|
-
}
|
|
2711
|
-
function SelectLabel({ className, ...props }) {
|
|
2712
|
-
return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
|
|
2713
|
-
"data-slot": "select-label",
|
|
2714
|
-
className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
|
|
2715
|
-
...props
|
|
2716
|
-
});
|
|
2717
|
-
}
|
|
2718
|
-
function SelectItem({ className, children, ...props }) {
|
|
2719
|
-
return /* @__PURE__ */ jsxs(Select$1.Item, {
|
|
2720
|
-
"data-slot": "select-item",
|
|
2721
|
-
className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
|
|
2722
|
-
...props,
|
|
2723
|
-
children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
|
|
2724
|
-
className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
|
|
2725
|
-
children
|
|
2726
|
-
}), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
|
|
2727
|
-
render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
|
|
2728
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
2729
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2730
|
-
viewBox: "0 0 24 24",
|
|
2731
|
-
fill: "none",
|
|
2732
|
-
stroke: "currentColor",
|
|
2733
|
-
strokeWidth: "2",
|
|
2734
|
-
strokeLinecap: "round",
|
|
2735
|
-
strokeLinejoin: "round",
|
|
2736
|
-
className: "pointer-events-none",
|
|
2737
|
-
"aria-hidden": "true",
|
|
2738
|
-
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
2739
|
-
})
|
|
2740
|
-
})]
|
|
2741
|
-
});
|
|
2742
|
-
}
|
|
2743
|
-
function SelectSeparator({ className, ...props }) {
|
|
2744
|
-
return /* @__PURE__ */ jsx(Select$1.Separator, {
|
|
2745
|
-
"data-slot": "select-separator",
|
|
2746
|
-
className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
|
|
2747
|
-
...props
|
|
2748
|
-
});
|
|
2749
|
-
}
|
|
2750
|
-
function SelectScrollUpButton({ className, ...props }) {
|
|
2751
|
-
return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
|
|
2752
|
-
"data-slot": "select-scroll-up-button",
|
|
2753
|
-
className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
|
|
2754
|
-
...props,
|
|
2755
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
2756
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2757
|
-
viewBox: "0 0 24 24",
|
|
2758
|
-
fill: "none",
|
|
2759
|
-
stroke: "currentColor",
|
|
2760
|
-
strokeWidth: "2",
|
|
2761
|
-
strokeLinecap: "round",
|
|
2762
|
-
strokeLinejoin: "round",
|
|
2763
|
-
"aria-hidden": "true",
|
|
2764
|
-
children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
|
|
2765
|
-
})
|
|
2766
|
-
});
|
|
2767
|
-
}
|
|
2768
|
-
function SelectScrollDownButton({ className, ...props }) {
|
|
2769
|
-
return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
|
|
2770
|
-
"data-slot": "select-scroll-down-button",
|
|
2771
|
-
className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
|
|
2772
|
-
...props,
|
|
2773
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
2774
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
2775
|
-
viewBox: "0 0 24 24",
|
|
2776
|
-
fill: "none",
|
|
2777
|
-
stroke: "currentColor",
|
|
2778
|
-
strokeWidth: "2",
|
|
2779
|
-
strokeLinecap: "round",
|
|
2780
|
-
strokeLinejoin: "round",
|
|
2781
|
-
"aria-hidden": "true",
|
|
2782
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
2783
|
-
})
|
|
2784
|
-
});
|
|
2785
|
-
}
|
|
2786
|
-
// src/skeleton/skeleton.tsx
|
|
2787
|
-
function Skeleton({ className, ...props }) {
|
|
2788
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2789
|
-
"data-slot": "skeleton",
|
|
2790
|
-
className: cn("animate-pulse rounded-md bg-muted", className),
|
|
2791
|
-
...props
|
|
2792
|
-
});
|
|
2793
|
-
}
|
|
2794
|
-
/**
|
|
2795
|
-
* What replaces a Skeleton once it loads (#128): it fades in over duration.fast (opacity only;
|
|
2796
|
-
* feel.css), instantly under reduced motion or after keyboard input. Render it in the Skeleton's
|
|
2797
|
-
* place: `{loading ? <Skeleton className="h-4 w-40" /> : <SkeletonContent>…</SkeletonContent>}`.
|
|
2798
|
-
*/
|
|
2799
|
-
function SkeletonContent({ className, ...props }) {
|
|
2800
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2801
|
-
"data-slot": "skeleton-content",
|
|
2802
|
-
className,
|
|
2803
|
-
...props
|
|
2804
|
-
});
|
|
2805
|
-
}
|
|
2806
|
-
// src/slider/slider.tsx
|
|
2807
|
-
function Slider({ className, defaultValue, value, min = 0, max = 100, onValueCommitted, ...props }) {
|
|
2808
|
-
const cue = useCue("slider");
|
|
2809
|
-
const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
|
|
2810
|
-
return /* @__PURE__ */ jsx(Slider$1.Root, {
|
|
2811
|
-
className: cn("data-horizontal:w-full data-vertical:h-full", className),
|
|
2812
|
-
"data-slot": "slider",
|
|
2813
|
-
defaultValue,
|
|
2814
|
-
value,
|
|
2815
|
-
min,
|
|
2816
|
-
max,
|
|
2817
|
-
thumbAlignment: "edge",
|
|
2818
|
-
onValueCommitted: (next, details) => {
|
|
2819
|
-
onValueCommitted?.(next, details);
|
|
2820
|
-
cue("commit");
|
|
2821
|
-
},
|
|
2822
|
-
...props,
|
|
2823
|
-
children: /* @__PURE__ */ jsxs(Slider$1.Control, {
|
|
2824
|
-
className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
|
|
2825
|
-
children: [/* @__PURE__ */ jsx(Slider$1.Track, {
|
|
2826
|
-
"data-slot": "slider-track",
|
|
2827
|
-
className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
|
|
2828
|
-
children: /* @__PURE__ */ jsx(Slider$1.Indicator, {
|
|
2829
|
-
"data-slot": "slider-range",
|
|
2830
|
-
className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full"
|
|
2831
|
-
})
|
|
2832
|
-
}), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
|
|
2833
|
-
"data-slot": "slider-thumb",
|
|
2834
|
-
className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
|
|
2835
|
-
}, index))]
|
|
2836
|
-
})
|
|
2837
|
-
});
|
|
2838
|
-
}
|
|
2839
|
-
// src/switch/switch.tsx
|
|
2840
|
-
function Switch({ className, size = "default", onCheckedChange, ...props }) {
|
|
2841
|
-
const cue = useCue("switch");
|
|
2842
|
-
return /* @__PURE__ */ jsx(Switch$1.Root, {
|
|
2843
|
-
"data-slot": "switch",
|
|
2844
|
-
"data-size": size,
|
|
2845
|
-
className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
|
|
2846
|
-
onCheckedChange: (checked, details) => {
|
|
2847
|
-
onCheckedChange?.(checked, details);
|
|
2848
|
-
if (!details.isCanceled) cue(checked ? "on" : "off");
|
|
2849
|
-
},
|
|
2850
|
-
...props,
|
|
2851
|
-
children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
|
|
2852
|
-
"data-slot": "switch-thumb",
|
|
2853
|
-
className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
|
|
2854
|
-
})
|
|
2855
|
-
});
|
|
2856
|
-
}
|
|
2857
|
-
// src/table/table.tsx
|
|
2858
|
-
function Table({ className, containerProps, ...props }) {
|
|
2859
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2860
|
-
"data-slot": "table-container",
|
|
2861
|
-
...containerProps,
|
|
2862
|
-
className: cn("relative w-full overflow-x-auto", containerProps?.className),
|
|
2863
|
-
children: /* @__PURE__ */ jsx("table", {
|
|
2864
|
-
"data-slot": "table",
|
|
2865
|
-
className: cn("w-full caption-bottom text-sm", className),
|
|
2866
|
-
...props
|
|
2867
|
-
})
|
|
2868
|
-
});
|
|
2869
|
-
}
|
|
2870
|
-
function TableHeader({ className, ...props }) {
|
|
2871
|
-
return /* @__PURE__ */ jsx("thead", {
|
|
2872
|
-
"data-slot": "table-header",
|
|
2873
|
-
className: cn("[&_tr]:border-b", className),
|
|
2874
|
-
...props
|
|
2875
|
-
});
|
|
2876
|
-
}
|
|
2877
|
-
function TableBody({ className, ...props }) {
|
|
2878
|
-
return /* @__PURE__ */ jsx("tbody", {
|
|
2879
|
-
"data-slot": "table-body",
|
|
2880
|
-
className: cn("[&_tr:last-child]:border-0", className),
|
|
2881
|
-
...props
|
|
2882
|
-
});
|
|
2883
|
-
}
|
|
2884
|
-
function TableFooter({ className, ...props }) {
|
|
2885
|
-
return /* @__PURE__ */ jsx("tfoot", {
|
|
2886
|
-
"data-slot": "table-footer",
|
|
2887
|
-
className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
|
|
2888
|
-
...props
|
|
2889
|
-
});
|
|
2890
|
-
}
|
|
2891
|
-
function TableRow({ className, ...props }) {
|
|
2892
|
-
return /* @__PURE__ */ jsx("tr", {
|
|
2893
|
-
"data-slot": "table-row",
|
|
2894
|
-
className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
|
|
2895
|
-
...props
|
|
2896
|
-
});
|
|
2897
|
-
}
|
|
2898
|
-
function TableHead({ className, ...props }) {
|
|
2899
|
-
return /* @__PURE__ */ jsx("th", {
|
|
2900
|
-
"data-slot": "table-head",
|
|
2901
|
-
className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
|
|
2902
|
-
...props
|
|
2903
|
-
});
|
|
2904
|
-
}
|
|
2905
|
-
function TableCell({ className, ...props }) {
|
|
2906
|
-
return /* @__PURE__ */ jsx("td", {
|
|
2907
|
-
"data-slot": "table-cell",
|
|
2908
|
-
className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
|
|
2909
|
-
...props
|
|
2910
|
-
});
|
|
2911
|
-
}
|
|
2912
|
-
function TableCaption({ className, ...props }) {
|
|
2913
|
-
return /* @__PURE__ */ jsx("caption", {
|
|
2914
|
-
"data-slot": "table-caption",
|
|
2915
|
-
className: cn("mt-4 text-sm text-muted-foreground", className),
|
|
2916
|
-
...props
|
|
2917
|
-
});
|
|
2918
|
-
}
|
|
2919
|
-
// src/tabs/tabs.tsx
|
|
2920
|
-
function Tabs({ className, orientation = "horizontal", ...props }) {
|
|
2921
|
-
return /* @__PURE__ */ jsx(Tabs$1.Root, {
|
|
2922
|
-
"data-slot": "tabs",
|
|
2923
|
-
"data-orientation": orientation,
|
|
2924
|
-
orientation,
|
|
2925
|
-
className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
|
|
2926
|
-
...props
|
|
2927
|
-
});
|
|
2928
|
-
}
|
|
2929
|
-
const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
|
|
2930
|
-
variants: { variant: {
|
|
2931
|
-
default: "bg-muted",
|
|
2932
|
-
line: "gap-1 bg-transparent"
|
|
2933
|
-
} },
|
|
2934
|
-
defaultVariants: { variant: "default" }
|
|
2935
|
-
});
|
|
2936
|
-
function TabsList({ className, variant = "default", ...props }) {
|
|
2937
|
-
return /* @__PURE__ */ jsx(Tabs$1.List, {
|
|
2938
|
-
"data-slot": "tabs-list",
|
|
2939
|
-
"data-variant": variant,
|
|
2940
|
-
className: cn(tabsListVariants({ variant }), className),
|
|
2941
|
-
...props
|
|
2942
|
-
});
|
|
2943
|
-
}
|
|
2944
|
-
function TabsTrigger({ className, ...props }) {
|
|
2945
|
-
return /* @__PURE__ */ jsx(Tabs$1.Tab, {
|
|
2946
|
-
"data-slot": "tabs-trigger",
|
|
2947
|
-
className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
|
|
2948
|
-
...props
|
|
2949
|
-
});
|
|
2950
|
-
}
|
|
2951
|
-
function TabsContent({ className, ...props }) {
|
|
2952
|
-
return /* @__PURE__ */ jsx(Tabs$1.Panel, {
|
|
2953
|
-
"data-slot": "tabs-content",
|
|
2954
|
-
className: cn("flex-1 text-sm outline-none", className),
|
|
2955
|
-
...props
|
|
2956
|
-
});
|
|
2957
|
-
}
|
|
2958
|
-
// src/toast/toast.tsx
|
|
2959
|
-
const toast = Toast$1.createToastManager();
|
|
2960
|
-
function ToastProvider({ ...props }) {
|
|
2961
|
-
return /* @__PURE__ */ jsx(Toast$1.Provider, { ...props });
|
|
2962
|
-
}
|
|
2963
|
-
function ToastPortal({ ...props }) {
|
|
2964
|
-
return /* @__PURE__ */ jsx(Toast$1.Portal, {
|
|
2965
|
-
"data-slot": "toast-portal",
|
|
2966
|
-
...props
|
|
2967
|
-
});
|
|
2968
|
-
}
|
|
2969
|
-
function ToastViewport({ className, ...props }) {
|
|
2970
|
-
return /* @__PURE__ */ jsx(Toast$1.Viewport, {
|
|
2971
|
-
"data-slot": "toast-viewport",
|
|
2972
|
-
className: cn("pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full", className),
|
|
2973
|
-
...props
|
|
2974
|
-
});
|
|
2975
|
-
}
|
|
2976
|
-
function Toast({ className, ...props }) {
|
|
2977
|
-
return /* @__PURE__ */ jsx(Toast$1.Root, {
|
|
2978
|
-
"data-slot": "toast",
|
|
2979
|
-
className: cn("group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]", "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']", "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", className),
|
|
2980
|
-
...props
|
|
2981
|
-
});
|
|
2982
|
-
}
|
|
2983
|
-
function ToastContent({ className, ...props }) {
|
|
2984
|
-
return /* @__PURE__ */ jsx(Toast$1.Content, {
|
|
2985
|
-
"data-slot": "toast-content",
|
|
2986
|
-
className: cn("flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100", className),
|
|
2987
|
-
...props
|
|
2988
|
-
});
|
|
2989
|
-
}
|
|
2990
|
-
function ToastTitle({ className, ...props }) {
|
|
2991
|
-
return /* @__PURE__ */ jsx(Toast$1.Title, {
|
|
2992
|
-
"data-slot": "toast-title",
|
|
2993
|
-
className: cn("text-sm font-medium", className),
|
|
2994
|
-
...props
|
|
2995
|
-
});
|
|
2996
|
-
}
|
|
2997
|
-
function ToastDescription({ className, ...props }) {
|
|
2998
|
-
return /* @__PURE__ */ jsx(Toast$1.Description, {
|
|
2999
|
-
"data-slot": "toast-description",
|
|
3000
|
-
className: cn("text-sm text-muted-foreground", className),
|
|
3001
|
-
...props
|
|
3002
|
-
});
|
|
3003
|
-
}
|
|
3004
|
-
function ToastAction({ className, render = /* @__PURE__ */ jsx(Button, {
|
|
3005
|
-
variant: "outline",
|
|
3006
|
-
size: "sm"
|
|
3007
|
-
}), ...props }) {
|
|
3008
|
-
return /* @__PURE__ */ jsx(Toast$1.Action, {
|
|
3009
|
-
"data-slot": "toast-action",
|
|
3010
|
-
render,
|
|
3011
|
-
className: cn("shrink-0", className),
|
|
3012
|
-
...props
|
|
3013
|
-
});
|
|
3014
|
-
}
|
|
3015
|
-
function ToastClose({ className, children, render = /* @__PURE__ */ jsx(Button, {
|
|
3016
|
-
variant: "ghost",
|
|
3017
|
-
size: "icon-sm"
|
|
3018
|
-
}), ...props }) {
|
|
3019
|
-
return /* @__PURE__ */ jsx(Toast$1.Close, {
|
|
3020
|
-
"data-slot": "toast-close",
|
|
3021
|
-
"aria-label": "Close toast",
|
|
3022
|
-
"aria-hidden": false,
|
|
3023
|
-
render,
|
|
3024
|
-
className: cn("relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground", className),
|
|
3025
|
-
...props,
|
|
3026
|
-
children: children ?? /* @__PURE__ */ jsxs("svg", {
|
|
3027
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3028
|
-
viewBox: "0 0 24 24",
|
|
3029
|
-
fill: "none",
|
|
3030
|
-
stroke: "currentColor",
|
|
3031
|
-
strokeWidth: "2",
|
|
3032
|
-
strokeLinecap: "round",
|
|
3033
|
-
strokeLinejoin: "round",
|
|
3034
|
-
"aria-hidden": "true",
|
|
3035
|
-
children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
|
|
3036
|
-
})
|
|
3037
|
-
});
|
|
3038
|
-
}
|
|
3039
|
-
function ToastIcon({ type }) {
|
|
3040
|
-
let icon = null;
|
|
3041
|
-
if (type === "success") icon = /* @__PURE__ */ jsxs("svg", {
|
|
3042
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3043
|
-
viewBox: "0 0 24 24",
|
|
3044
|
-
fill: "none",
|
|
3045
|
-
stroke: "currentColor",
|
|
3046
|
-
strokeWidth: "2",
|
|
3047
|
-
strokeLinecap: "round",
|
|
3048
|
-
strokeLinejoin: "round",
|
|
3049
|
-
"aria-hidden": "true",
|
|
3050
|
-
children: [/* @__PURE__ */ jsx("circle", {
|
|
3051
|
-
cx: "12",
|
|
3052
|
-
cy: "12",
|
|
3053
|
-
r: "10"
|
|
3054
|
-
}), /* @__PURE__ */ jsx("path", { d: "m16 9-5.5 5.5L8 12" })]
|
|
3055
|
-
});
|
|
3056
|
-
if (type === "info") icon = /* @__PURE__ */ jsxs("svg", {
|
|
3057
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3058
|
-
viewBox: "0 0 24 24",
|
|
3059
|
-
fill: "none",
|
|
3060
|
-
stroke: "currentColor",
|
|
3061
|
-
strokeWidth: "2",
|
|
3062
|
-
strokeLinecap: "round",
|
|
3063
|
-
strokeLinejoin: "round",
|
|
3064
|
-
"aria-hidden": "true",
|
|
3065
|
-
children: [
|
|
3066
|
-
/* @__PURE__ */ jsx("circle", {
|
|
3067
|
-
cx: "12",
|
|
3068
|
-
cy: "12",
|
|
3069
|
-
r: "10"
|
|
3070
|
-
}),
|
|
3071
|
-
/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
|
|
3072
|
-
/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
|
|
3073
|
-
]
|
|
3074
|
-
});
|
|
3075
|
-
if (type === "warning") icon = /* @__PURE__ */ jsxs("svg", {
|
|
3076
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3077
|
-
viewBox: "0 0 24 24",
|
|
3078
|
-
fill: "none",
|
|
3079
|
-
stroke: "currentColor",
|
|
3080
|
-
strokeWidth: "2",
|
|
3081
|
-
strokeLinecap: "round",
|
|
3082
|
-
strokeLinejoin: "round",
|
|
3083
|
-
"aria-hidden": "true",
|
|
3084
|
-
children: [
|
|
3085
|
-
/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
|
|
3086
|
-
/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
|
|
3087
|
-
/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
|
|
3088
|
-
]
|
|
3089
|
-
});
|
|
3090
|
-
if (type === "error") icon = /* @__PURE__ */ jsxs("svg", {
|
|
3091
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3092
|
-
viewBox: "0 0 24 24",
|
|
3093
|
-
fill: "none",
|
|
3094
|
-
stroke: "currentColor",
|
|
3095
|
-
strokeWidth: "2",
|
|
3096
|
-
strokeLinecap: "round",
|
|
3097
|
-
strokeLinejoin: "round",
|
|
3098
|
-
className: "text-destructive",
|
|
3099
|
-
"aria-hidden": "true",
|
|
3100
|
-
children: [
|
|
3101
|
-
/* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
|
|
3102
|
-
/* @__PURE__ */ jsx("path", { d: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z" }),
|
|
3103
|
-
/* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
|
|
3104
|
-
]
|
|
3105
|
-
});
|
|
3106
|
-
if (type === "loading") icon = /* @__PURE__ */ jsx(Arc, {});
|
|
3107
|
-
if (!icon) return null;
|
|
3108
|
-
return /* @__PURE__ */ jsx("span", {
|
|
3109
|
-
"data-slot": "toast-icon",
|
|
3110
|
-
className: "shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
3111
|
-
children: icon
|
|
3112
|
-
});
|
|
3113
|
-
}
|
|
3114
|
-
/**
|
|
3115
|
-
* Nsaa feel layer (#108): success, warning and error toasts play their feedback cue once, when the
|
|
3116
|
-
* toast appears or when a promise toast settles into that type. Default, info and loading are silent.
|
|
3117
|
-
*/
|
|
3118
|
-
function useToastCues(toasts) {
|
|
3119
|
-
const cue = useCue("toast");
|
|
3120
|
-
const played = React.useRef(null);
|
|
3121
|
-
React.useEffect(() => {
|
|
3122
|
-
const first = played.current === null;
|
|
3123
|
-
played.current ??= /* @__PURE__ */ new Map();
|
|
3124
|
-
const activated = typeof navigator === "undefined" || navigator.userActivation?.hasBeenActive !== false;
|
|
3125
|
-
for (const { id, type } of toasts) {
|
|
3126
|
-
if (played.current.get(id) === type) continue;
|
|
3127
|
-
played.current.set(id, type);
|
|
3128
|
-
if (type && !first && activated) cue(type);
|
|
3129
|
-
}
|
|
3130
|
-
const live = new Set(toasts.map((t) => t.id));
|
|
3131
|
-
for (const id of played.current.keys()) if (!live.has(id)) played.current.delete(id);
|
|
3132
|
-
}, [toasts, cue]);
|
|
3133
|
-
}
|
|
3134
|
-
function ToastList() {
|
|
3135
|
-
const { toasts } = Toast$1.useToastManager();
|
|
3136
|
-
useToastCues(toasts);
|
|
3137
|
-
return toasts.map((toastItem) => /* @__PURE__ */ jsx(Toast, {
|
|
3138
|
-
toast: toastItem,
|
|
3139
|
-
children: /* @__PURE__ */ jsxs(ToastContent, { children: [
|
|
3140
|
-
/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }),
|
|
3141
|
-
/* @__PURE__ */ jsxs("div", {
|
|
3142
|
-
className: "flex min-w-0 flex-1 flex-col gap-1",
|
|
3143
|
-
children: [/* @__PURE__ */ jsx(ToastTitle, {}), /* @__PURE__ */ jsx(ToastDescription, {})]
|
|
3144
|
-
}),
|
|
3145
|
-
/* @__PURE__ */ jsx(ToastAction, {}),
|
|
3146
|
-
/* @__PURE__ */ jsx(ToastClose, {})
|
|
3147
|
-
] })
|
|
3148
|
-
}, toastItem.id));
|
|
3149
|
-
}
|
|
3150
|
-
function Toaster({ children, toastManager = toast, ...props }) {
|
|
3151
|
-
return /* @__PURE__ */ jsxs(ToastProvider, {
|
|
3152
|
-
toastManager,
|
|
3153
|
-
...props,
|
|
3154
|
-
children: [children, /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(ToastViewport, { children: /* @__PURE__ */ jsx(ToastList, {}) }) })]
|
|
3155
|
-
});
|
|
3156
|
-
}
|
|
3157
|
-
const createToastManager = Toast$1.createToastManager;
|
|
3158
|
-
const useToastManager = Toast$1.useToastManager;
|
|
3159
|
-
// src/lib/tv.ts
|
|
3160
|
-
/** tailwind-variants configured with the same merge rules as cn(). */
|
|
3161
|
-
const tv = createTV({ twMergeConfig });
|
|
3162
|
-
// src/lib/shortcut.ts
|
|
3163
|
-
const APPLE = /Mac|iPhone|iPad|iPod/i;
|
|
3164
|
-
function isApple() {
|
|
3165
|
-
if (typeof navigator === "undefined") return false;
|
|
3166
|
-
const nav = navigator;
|
|
3167
|
-
return APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? nav.userAgent);
|
|
3168
|
-
}
|
|
3169
|
-
const APPLE_KEYS = {
|
|
3170
|
-
mod: "⌘",
|
|
3171
|
-
ctrl: "⌃",
|
|
3172
|
-
alt: "⌥",
|
|
3173
|
-
shift: "⇧"
|
|
3174
|
-
};
|
|
3175
|
-
const OTHER_KEYS = {
|
|
3176
|
-
mod: "Ctrl",
|
|
3177
|
-
ctrl: "Ctrl",
|
|
3178
|
-
alt: "Alt",
|
|
3179
|
-
shift: "Shift"
|
|
3180
|
-
};
|
|
3181
|
-
const ARIA_KEYS = {
|
|
3182
|
-
mod: ["Meta", "Control"],
|
|
3183
|
-
ctrl: ["Control", "Control"],
|
|
3184
|
-
alt: ["Alt", "Alt"],
|
|
3185
|
-
shift: ["Shift", "Shift"]
|
|
3186
|
-
};
|
|
3187
|
-
/**
|
|
3188
|
-
* The same shortcut for `aria-keyshortcuts` (`"mod+B"` → `"Meta+B"` on Apple, `"Control+B"`
|
|
3189
|
-
* elsewhere), so assistive tech gets what the tooltip shows only visually.
|
|
3190
|
-
*/
|
|
3191
|
-
function ariaShortcut(shortcut, apple = isApple()) {
|
|
3192
|
-
return shortcut.split("+").map((part) => {
|
|
3193
|
-
const key = part.trim();
|
|
3194
|
-
const named = ARIA_KEYS[key.toLowerCase()];
|
|
3195
|
-
if (named) return apple ? named[0] : named[1];
|
|
3196
|
-
return key.length === 1 ? key.toUpperCase() : key;
|
|
3197
|
-
}).join("+");
|
|
3198
|
-
}
|
|
3199
|
-
/**
|
|
3200
|
-
* Formats a display-only shortcut such as `"mod+B"`: `⌘B` on Apple platforms, `Ctrl+B` elsewhere.
|
|
3201
|
-
* The app binds the keys; this only shows them.
|
|
3202
|
-
*/
|
|
3203
|
-
function formatShortcut(shortcut, apple = isApple()) {
|
|
3204
|
-
const keys = apple ? APPLE_KEYS : OTHER_KEYS;
|
|
3205
|
-
return shortcut.split("+").map((part) => {
|
|
3206
|
-
const key = part.trim();
|
|
3207
|
-
return keys[key.toLowerCase()] ?? (key.length === 1 ? key.toUpperCase() : key);
|
|
3208
|
-
}).join(apple ? "" : "+");
|
|
3209
|
-
}
|
|
3210
|
-
// src/tooltip/tooltip.tsx
|
|
3211
|
-
function TooltipProvider({ delay = 600, ...props }) {
|
|
3212
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
|
|
3213
|
-
"data-slot": "tooltip-provider",
|
|
3214
|
-
delay,
|
|
3215
|
-
...props
|
|
3216
|
-
});
|
|
3217
|
-
}
|
|
3218
|
-
function Tooltip({ ...props }) {
|
|
3219
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Root, {
|
|
3220
|
-
"data-slot": "tooltip",
|
|
3221
|
-
...props
|
|
3222
|
-
});
|
|
3223
|
-
}
|
|
3224
|
-
function TooltipTrigger({ ...props }) {
|
|
3225
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
|
|
3226
|
-
"data-slot": "tooltip-trigger",
|
|
3227
|
-
...props
|
|
3228
|
-
});
|
|
3229
|
-
}
|
|
3230
|
-
function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
|
|
3231
|
-
return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
|
|
3232
|
-
align,
|
|
3233
|
-
alignOffset,
|
|
3234
|
-
side,
|
|
3235
|
-
sideOffset,
|
|
3236
|
-
className: "isolate z-50",
|
|
3237
|
-
children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
|
|
3238
|
-
"data-slot": "tooltip-content",
|
|
3239
|
-
className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
|
|
3240
|
-
...props,
|
|
3241
|
-
children: [children, /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
|
|
3242
|
-
})
|
|
3243
|
-
}) });
|
|
3244
|
-
}
|
|
3245
|
-
// src/toolbar/toolbar-item.tsx
|
|
3246
|
-
const ICON_SIZE = {
|
|
3247
|
-
xs: "icon-xs",
|
|
3248
|
-
sm: "icon-sm",
|
|
3249
|
-
md: "icon",
|
|
3250
|
-
lg: "icon-lg"
|
|
3251
|
-
};
|
|
3252
|
-
const TEXT_SIZE = {
|
|
3253
|
-
xs: "xs",
|
|
3254
|
-
sm: "sm",
|
|
3255
|
-
md: "default",
|
|
3256
|
-
lg: "lg"
|
|
3257
|
-
};
|
|
3258
|
-
const SIDE = {
|
|
3259
|
-
top: "top",
|
|
3260
|
-
bottom: "bottom",
|
|
3261
|
-
left: "inline-start",
|
|
3262
|
-
right: "inline-end"
|
|
3263
|
-
};
|
|
3264
|
-
/**
|
|
3265
|
-
* A ghost Button (#84) sized to its toolbar, as a toggle when it has `pressed`, `onPressedChange`
|
|
3266
|
-
* or a `value`, with a tooltip for icon-only items. On-state: shadcn's toggle (`bg-muted`).
|
|
3267
|
-
*/
|
|
3268
|
-
function ToolbarItem({ icon, children, pressed, onPressedChange, value, tooltip, size: sizeProp, className, type, ...rest }) {
|
|
3269
|
-
const defaults = useControlDefaults();
|
|
3270
|
-
const size = sizeProp ?? defaults.size ?? "md";
|
|
3271
|
-
const iconOnly = icon !== void 0 && (children === void 0 || children === null);
|
|
3272
|
-
const toggle = pressed !== void 0 || onPressedChange !== void 0 || value !== void 0;
|
|
3273
|
-
const label = rest["aria-label"];
|
|
3274
|
-
const button = /* @__PURE__ */ jsx(Button, {
|
|
3275
|
-
...rest,
|
|
3276
|
-
type: type ?? "button",
|
|
3277
|
-
variant: "ghost",
|
|
3278
|
-
size: iconOnly ? ICON_SIZE[size] : TEXT_SIZE[size],
|
|
3279
|
-
className: cn("data-pressed:bg-muted data-pressed:text-foreground", defaults.instantColors && "transition-none", className),
|
|
3280
|
-
children: iconOnly ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [icon !== void 0 && /* @__PURE__ */ jsx("span", {
|
|
3281
|
-
"data-icon": "inline-start",
|
|
3282
|
-
"aria-hidden": "true",
|
|
3283
|
-
className: "contents",
|
|
3284
|
-
children: icon
|
|
3285
|
-
}), children] })
|
|
3286
|
-
});
|
|
3287
|
-
let root = button;
|
|
3288
|
-
if (toggle) root = /* @__PURE__ */ jsx(Toggle, {
|
|
3289
|
-
disabled: rest.disabled,
|
|
3290
|
-
value,
|
|
3291
|
-
pressed,
|
|
3292
|
-
onPressedChange,
|
|
3293
|
-
render: button
|
|
3294
|
-
});
|
|
3295
|
-
const options = tooltip === false ? void 0 : tooltip === true ? {} : tooltip;
|
|
3296
|
-
const content = options?.content ?? (iconOnly || options ? label?.trim() : void 0);
|
|
3297
|
-
if ((iconOnly || tooltip !== void 0) && options && content) root = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
3298
|
-
render: root,
|
|
3299
|
-
"aria-keyshortcuts": options.shortcut ? ariaShortcut(options.shortcut) : void 0
|
|
3300
|
-
}), /* @__PURE__ */ jsxs(TooltipContent, {
|
|
3301
|
-
side: SIDE[options.side ?? "top"],
|
|
3302
|
-
children: [content, options.shortcut && /* @__PURE__ */ jsx(Kbd, { children: formatShortcut(options.shortcut) })]
|
|
3303
|
-
})] });
|
|
3304
|
-
return root;
|
|
3305
|
-
}
|
|
3306
|
-
// src/toolbar/overflow.tsx
|
|
3307
|
-
/**
|
|
3308
|
-
* Units register here; the Toolbar measures them and decides which are hidden. Hidden units stay
|
|
3309
|
-
* mounted (so a ToggleGroup keeps its state) but render nothing inline and show their `menu`
|
|
3310
|
-
* form in the More menu instead.
|
|
3311
|
-
*/
|
|
3312
|
-
var OverflowStore = class {
|
|
3313
|
-
units = /* @__PURE__ */ new Map();
|
|
3314
|
-
hidden = /* @__PURE__ */ new Set();
|
|
3315
|
-
listeners = /* @__PURE__ */ new Set();
|
|
3316
|
-
version = 0;
|
|
3317
|
-
moreWidth = 0;
|
|
3318
|
-
subscribe = (listener) => {
|
|
3319
|
-
this.listeners.add(listener);
|
|
3320
|
-
return () => this.listeners.delete(listener);
|
|
3321
|
-
};
|
|
3322
|
-
getVersion = () => this.version;
|
|
3323
|
-
isHidden = (id) => this.hidden.has(id);
|
|
3324
|
-
emit() {
|
|
3325
|
-
this.version++;
|
|
3326
|
-
for (const listener of this.listeners) listener();
|
|
3327
|
-
}
|
|
3328
|
-
ensure(id) {
|
|
3329
|
-
let unit = this.units.get(id);
|
|
3330
|
-
if (!unit) {
|
|
3331
|
-
unit = {
|
|
3332
|
-
kind: "item",
|
|
3333
|
-
priority: 0,
|
|
3334
|
-
menu: null,
|
|
3335
|
-
el: null,
|
|
3336
|
-
width: 0,
|
|
3337
|
-
rank: Number.MAX_SAFE_INTEGER
|
|
3338
|
-
};
|
|
3339
|
-
this.units.set(id, unit);
|
|
3340
|
-
}
|
|
3341
|
-
return unit;
|
|
3342
|
-
}
|
|
3343
|
-
upsert(id, patch) {
|
|
3344
|
-
Object.assign(this.ensure(id), patch);
|
|
3345
|
-
if (this.hidden.has(id)) this.emit();
|
|
3346
|
-
}
|
|
3347
|
-
remove(id) {
|
|
3348
|
-
this.units.delete(id);
|
|
3349
|
-
if (this.hidden.delete(id)) this.emit();
|
|
3350
|
-
}
|
|
3351
|
-
elementOf(id) {
|
|
3352
|
-
return this.units.get(id)?.el ?? null;
|
|
3353
|
-
}
|
|
3354
|
-
setElement(id, el) {
|
|
3355
|
-
this.ensure(id).el = el;
|
|
3356
|
-
}
|
|
3357
|
-
setMoreWidth(width) {
|
|
3358
|
-
if (width > 0) this.moreWidth = width;
|
|
3359
|
-
}
|
|
3360
|
-
/** Hidden units' menu forms in toolbar order, for the More menu. */
|
|
3361
|
-
hiddenMenus() {
|
|
3362
|
-
return [...this.units.entries()].filter(([id, unit]) => this.hidden.has(id) && unit.kind !== "separator").sort(([, a], [, b]) => a.rank - b.rank).map(([id, unit]) => ({
|
|
3363
|
-
id,
|
|
3364
|
-
kind: unit.kind,
|
|
3365
|
-
menu: unit.menu
|
|
3366
|
-
}));
|
|
3367
|
-
}
|
|
3368
|
-
/** Measures the toolbar and hides the fewest units (highest priority number first). */
|
|
3369
|
-
layout(root) {
|
|
3370
|
-
const parent = root.parentElement;
|
|
3371
|
-
if (!parent) return;
|
|
3372
|
-
const rootStyle = getComputedStyle(root);
|
|
3373
|
-
const parentStyle = getComputedStyle(parent);
|
|
3374
|
-
const px = (value) => Number.parseFloat(value) || 0;
|
|
3375
|
-
const room = parent.clientWidth - px(parentStyle.paddingLeft) - px(parentStyle.paddingRight) - (root.offsetWidth - root.clientWidth) - px(rootStyle.paddingLeft) - px(rootStyle.paddingRight);
|
|
3376
|
-
const gap = px(rootStyle.columnGap);
|
|
3377
|
-
const unitEls = [...root.querySelectorAll("[data-overflow-unit]")];
|
|
3378
|
-
for (const [id, unit] of this.units) {
|
|
3379
|
-
if (!unit.el?.isConnected) continue;
|
|
3380
|
-
unit.rank = unitEls.indexOf(unit.el);
|
|
3381
|
-
if (!this.hidden.has(id)) unit.width = unit.el.getBoundingClientRect().width;
|
|
3382
|
-
}
|
|
3383
|
-
const more = this.moreWidth || Math.max(0, ...[...this.units.values()].map((u) => u.el?.getBoundingClientRect().height ?? 0));
|
|
3384
|
-
const ordered = [...this.units.entries()].sort(([, a], [, b]) => a.rank - b.rank);
|
|
3385
|
-
const needs = (hidden) => {
|
|
3386
|
-
const shown = ordered.filter(([id]) => !hidden.has(id));
|
|
3387
|
-
const items = shown.reduce((sum, [, u]) => sum + u.width, 0);
|
|
3388
|
-
const slots = shown.length + (hidden.size > 0 ? 1 : 0);
|
|
3389
|
-
return items + (hidden.size > 0 ? more : 0) + gap * Math.max(0, slots - 1);
|
|
3390
|
-
};
|
|
3391
|
-
const hidden = /* @__PURE__ */ new Set();
|
|
3392
|
-
if (needs(hidden) > room) {
|
|
3393
|
-
const candidates = ordered.filter(([, u]) => u.kind !== "separator" && u.priority !== "never").sort(([, a], [, b]) => {
|
|
3394
|
-
const pa = a.priority;
|
|
3395
|
-
return b.priority - pa || b.rank - a.rank;
|
|
3396
|
-
});
|
|
3397
|
-
for (const [id] of candidates) {
|
|
3398
|
-
hidden.add(id);
|
|
3399
|
-
hideOrphanSeparators(ordered, hidden);
|
|
3400
|
-
if (needs(hidden) <= room) break;
|
|
3401
|
-
}
|
|
3402
|
-
}
|
|
3403
|
-
if (!(hidden.size === this.hidden.size && [...hidden].every((id) => this.hidden.has(id)))) {
|
|
3404
|
-
const active = root.ownerDocument.activeElement;
|
|
3405
|
-
this.refocus = [...hidden].some((id) => {
|
|
3406
|
-
const el = this.units.get(id)?.el;
|
|
3407
|
-
return !this.hidden.has(id) && el !== null && el !== void 0 && el.contains(active);
|
|
3408
|
-
});
|
|
3409
|
-
const more = this.moreEl;
|
|
3410
|
-
const onMore = more?.isConnected && (more.contains(active) || more.getAttribute("aria-expanded") === "true" && active?.closest("[role=\"menu\"]")?.id === more.getAttribute("aria-controls"));
|
|
3411
|
-
const returning = hidden.size === 0 && onMore ? ordered.find(([id]) => this.hidden.has(id) && this.units.get(id)?.kind !== "separator") : void 0;
|
|
3412
|
-
this.focusOnReturn = returning?.[0] ?? null;
|
|
3413
|
-
this.hidden = hidden;
|
|
3414
|
-
this.emit();
|
|
3415
|
-
}
|
|
3416
|
-
}
|
|
3417
|
-
refocus = false;
|
|
3418
|
-
focusOnReturn = null;
|
|
3419
|
-
/** True once for the unit that should take focus when it renders again (see `layout`). */
|
|
3420
|
-
takeFocusOnReturn(id) {
|
|
3421
|
-
if (this.focusOnReturn !== id) return false;
|
|
3422
|
-
this.focusOnReturn = null;
|
|
3423
|
-
return true;
|
|
3424
|
-
}
|
|
3425
|
-
/** The More button, while it is shown. */
|
|
3426
|
-
moreEl = null;
|
|
3427
|
-
setMoreElement(el) {
|
|
3428
|
-
this.moreEl = el;
|
|
3429
|
-
}
|
|
3430
|
-
/** True once after a layout hid the focused item; the More button then takes focus. */
|
|
3431
|
-
takeRefocus() {
|
|
3432
|
-
const refocus = this.refocus;
|
|
3433
|
-
this.refocus = false;
|
|
3434
|
-
return refocus;
|
|
3435
|
-
}
|
|
3436
|
-
};
|
|
3437
|
-
/** A separator hides when the unit on either side of it is hidden or missing. */
|
|
3438
|
-
function hideOrphanSeparators(ordered, hidden) {
|
|
3439
|
-
const items = (list) => list.filter(([, u]) => u.kind !== "separator");
|
|
3440
|
-
ordered.forEach(([id, u], index) => {
|
|
3441
|
-
if (u.kind !== "separator") return;
|
|
3442
|
-
const before = items(ordered.slice(0, index)).at(-1);
|
|
3443
|
-
const after = items(ordered.slice(index + 1))[0];
|
|
3444
|
-
if (!before || !after || hidden.has(before[0]) || hidden.has(after[0])) hidden.add(id);
|
|
3445
|
-
});
|
|
3446
|
-
}
|
|
3447
|
-
const OverflowContext = createContext(null);
|
|
3448
|
-
/**
|
|
3449
|
-
* Registers a toolbar part for overflow. Returns `hidden` (render nothing inline) and the props
|
|
3450
|
-
* for its element. Outside an `overflow="menu"` toolbar it does nothing.
|
|
3451
|
-
*/
|
|
3452
|
-
function useOverflowUnit({ kind, priority = 0, menu }) {
|
|
3453
|
-
const store = useContext(OverflowContext);
|
|
3454
|
-
const id = useId();
|
|
3455
|
-
const hidden = useSyncExternalStore(store?.subscribe ?? noopSubscribe, () => store?.isHidden(id) ?? false, () => false);
|
|
3456
|
-
useLayoutEffect(() => {
|
|
3457
|
-
store?.upsert(id, {
|
|
3458
|
-
kind,
|
|
3459
|
-
priority,
|
|
3460
|
-
menu
|
|
3461
|
-
});
|
|
3462
|
-
});
|
|
3463
|
-
useLayoutEffect(() => store ? () => store.remove(id) : void 0, [store, id]);
|
|
3464
|
-
const ref = useCallback((el) => store?.setElement(id, el), [store, id]);
|
|
3465
|
-
const shown = store !== null && !hidden;
|
|
3466
|
-
useLayoutEffect(() => {
|
|
3467
|
-
if (!shown || !store?.takeFocusOnReturn(id)) return;
|
|
3468
|
-
const el = store.elementOf(id);
|
|
3469
|
-
(el?.matches("button, a[href]") ? el : el?.querySelector("button:not(:disabled), a[href]"))?.focus();
|
|
3470
|
-
}, [
|
|
3471
|
-
shown,
|
|
3472
|
-
store,
|
|
3473
|
-
id
|
|
3474
|
-
]);
|
|
3475
|
-
return {
|
|
3476
|
-
hidden: store !== null && hidden,
|
|
3477
|
-
unitProps: store ? {
|
|
3478
|
-
ref,
|
|
3479
|
-
"data-overflow-unit": ""
|
|
3480
|
-
} : {},
|
|
3481
|
-
/** Render this while hidden: it keeps the unit's place in the toolbar order. */
|
|
3482
|
-
placeholder: store ? /* @__PURE__ */ jsx("span", {
|
|
3483
|
-
hidden: true,
|
|
3484
|
-
ref,
|
|
3485
|
-
"data-overflow-unit": ""
|
|
3486
|
-
}) : null
|
|
3487
|
-
};
|
|
3488
|
-
}
|
|
3489
|
-
const noopSubscribe = () => () => {};
|
|
3490
|
-
const Ellipsis = () => /* @__PURE__ */ jsxs("svg", {
|
|
3491
|
-
viewBox: "0 0 16 16",
|
|
3492
|
-
"aria-hidden": "true",
|
|
3493
|
-
children: [
|
|
3494
|
-
/* @__PURE__ */ jsx("circle", {
|
|
3495
|
-
cx: "3.5",
|
|
3496
|
-
cy: "8",
|
|
3497
|
-
r: "1.25",
|
|
3498
|
-
fill: "currentColor"
|
|
3499
|
-
}),
|
|
3500
|
-
/* @__PURE__ */ jsx("circle", {
|
|
3501
|
-
cx: "8",
|
|
3502
|
-
cy: "8",
|
|
3503
|
-
r: "1.25",
|
|
3504
|
-
fill: "currentColor"
|
|
3505
|
-
}),
|
|
3506
|
-
/* @__PURE__ */ jsx("circle", {
|
|
3507
|
-
cx: "12.5",
|
|
3508
|
-
cy: "8",
|
|
3509
|
-
r: "1.25",
|
|
3510
|
-
fill: "currentColor"
|
|
3511
|
-
})
|
|
3512
|
-
]
|
|
3513
|
-
});
|
|
3514
|
-
/** The trailing More button: shows the hidden units' menu forms, in toolbar order. */
|
|
3515
|
-
function OverflowMore({ store, label }) {
|
|
3516
|
-
const version = useSyncExternalStore(store.subscribe, store.getVersion, store.getVersion);
|
|
3517
|
-
const menus = store.hiddenMenus();
|
|
3518
|
-
const button = useRef(null);
|
|
3519
|
-
const measure = useCallback((el) => {
|
|
3520
|
-
button.current = el;
|
|
3521
|
-
store.setMoreElement(el);
|
|
3522
|
-
if (el) store.setMoreWidth(el.getBoundingClientRect().width);
|
|
3523
|
-
}, [store]);
|
|
3524
|
-
useLayoutEffect(() => {
|
|
3525
|
-
if (version && store.takeRefocus()) button.current?.focus();
|
|
3526
|
-
}, [store, version]);
|
|
3527
|
-
if (menus.length === 0) return null;
|
|
3528
|
-
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Toolbar$1.Button, {
|
|
3529
|
-
"data-slot": "toolbar-overflow",
|
|
3530
|
-
ref: measure,
|
|
3531
|
-
render: /* @__PURE__ */ jsx(ToolbarItem, {
|
|
3532
|
-
icon: /* @__PURE__ */ jsx(Ellipsis, {}),
|
|
3533
|
-
"aria-label": label
|
|
3534
|
-
})
|
|
3535
|
-
}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
|
|
3536
|
-
align: "end",
|
|
3537
|
-
className: "w-auto",
|
|
3538
|
-
children: menus.map(({ id, kind, menu }, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 && (kind === "group" || menus[index - 1]?.kind === "group") && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), menu] }, id))
|
|
3539
|
-
})] });
|
|
3540
|
-
}
|
|
3541
|
-
// src/toggle-group/toggle-group.tsx
|
|
3542
|
-
const groupStyles = tv({
|
|
3543
|
-
base: ["inline-flex items-center data-[orientation=vertical]:flex-col", "data-[orientation=horizontal]:pointer-coarse:[&_button]:before:min-w-0 data-[orientation=vertical]:pointer-coarse:[&_button]:before:min-h-0"],
|
|
3544
|
-
variants: { variant: {
|
|
3545
|
-
ghost: "gap-0.5",
|
|
3546
|
-
outline: "gap-0 rounded-control border border-border-default [&>*]:rounded-none [&>*:first-child]:rounded-s-control [&>*:last-child]:rounded-e-control [&>*+*]:border-s-border-default data-[orientation=vertical]:[&>*+*]:border-s-transparent data-[orientation=vertical]:[&>*+*]:border-t-border-default"
|
|
3547
|
-
} },
|
|
3548
|
-
defaultVariants: { variant: "ghost" }
|
|
3549
|
-
});
|
|
3550
|
-
/**
|
|
3551
|
-
* A set of toggles where one (`type="single"`) or several (`"multiple"`) can be on, on Base UI
|
|
3552
|
-
* `ToggleGroup`. Inside a `Toolbar` its items join the toolbar's arrow-key navigation.
|
|
3553
|
-
*/
|
|
3554
|
-
function ToggleGroup(props) {
|
|
3555
|
-
const { type = "single", value: valueProp, defaultValue, onValueChange, required = false, variant = "ghost", size: sizeProp, overflowPriority, orientation: orientationProp, className, children, ...rest } = props;
|
|
3556
|
-
const defaults = useControlDefaults();
|
|
3557
|
-
const multiple = type === "multiple";
|
|
3558
|
-
const toArray = (v) => Array.isArray(v) ? v : v === null || v === void 0 ? [] : [v];
|
|
3559
|
-
const [inner, setInner] = useState(() => toArray(defaultValue));
|
|
3560
|
-
const controlled = valueProp !== void 0;
|
|
3561
|
-
const current = controlled ? toArray(valueProp) : inner;
|
|
3562
|
-
const handleChange = (next) => {
|
|
3563
|
-
if (!multiple && required && next.length === 0) return;
|
|
3564
|
-
if (!controlled) setInner(next);
|
|
3565
|
-
onValueChange?.(multiple ? next : next[0] ?? null);
|
|
3566
|
-
};
|
|
3567
|
-
const size = sizeProp ?? defaults.size ?? "md";
|
|
3568
|
-
const orientation = orientationProp ?? defaults.orientation ?? "horizontal";
|
|
3569
|
-
const items = Children.toArray(children).flatMap((child) => isValidElement(child) && child.type === ToggleGroupItem ? [child.props] : []);
|
|
3570
|
-
const label = rest["aria-label"];
|
|
3571
|
-
const { hidden, unitProps, placeholder } = useOverflowUnit({
|
|
3572
|
-
kind: "group",
|
|
3573
|
-
priority: overflowPriority,
|
|
3574
|
-
menu: multiple ? /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [label && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
|
|
3575
|
-
disabled: item.disabled,
|
|
3576
|
-
checked: current.includes(item.value),
|
|
3577
|
-
onCheckedChange: (on) => handleChange(on ? [...current, item.value] : current.filter((v) => v !== item.value)),
|
|
3578
|
-
children: [item.icon, item["aria-label"] ?? item.children ?? item.value]
|
|
3579
|
-
}, item.value))] }) : /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [label && /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
|
|
3580
|
-
value: current[0] ?? null,
|
|
3581
|
-
onValueChange: (next) => handleChange(next ? [next] : []),
|
|
3582
|
-
children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
|
|
3583
|
-
value: item.value,
|
|
3584
|
-
disabled: item.disabled,
|
|
3585
|
-
children: [item.icon, item["aria-label"] ?? item.children ?? item.value]
|
|
3586
|
-
}, item.value))
|
|
3587
|
-
})] })
|
|
3588
|
-
});
|
|
3589
|
-
if (hidden) return placeholder;
|
|
3590
|
-
return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
|
|
3591
|
-
value: {
|
|
3592
|
-
...defaults,
|
|
3593
|
-
size,
|
|
3594
|
-
iconTransition: defaults.iconTransition ?? "instant",
|
|
3595
|
-
sound: defaults.sound ?? false
|
|
3596
|
-
},
|
|
3597
|
-
children: /* @__PURE__ */ jsx(ToggleGroup$1, {
|
|
3598
|
-
"data-slot": "toggle-group",
|
|
3599
|
-
"data-variant": variant,
|
|
3600
|
-
"data-size": size,
|
|
3601
|
-
multiple,
|
|
3602
|
-
orientation,
|
|
3603
|
-
value: current,
|
|
3604
|
-
onValueChange: handleChange,
|
|
3605
|
-
className: cn(groupStyles({ variant }), className),
|
|
3606
|
-
...unitProps,
|
|
3607
|
-
...rest,
|
|
3608
|
-
children
|
|
3609
|
-
})
|
|
3610
|
-
});
|
|
3611
|
-
}
|
|
3612
|
-
/**
|
|
3613
|
-
* One toggle in a `ToggleGroup`: a ghost Button (#84), icon-only (with a tooltip) when it has
|
|
3614
|
-
* only an `icon`, a text toggle otherwise. A shortcut shows in the tooltip for both.
|
|
3615
|
-
*/
|
|
3616
|
-
function ToggleGroupItem({ shortcut, tooltip, ...rest }) {
|
|
3617
|
-
return /* @__PURE__ */ jsx(ToolbarItem, {
|
|
3618
|
-
...rest,
|
|
3619
|
-
"data-slot": "toggle-group-item",
|
|
3620
|
-
tooltip: tooltip ?? (shortcut ? { shortcut } : void 0)
|
|
3621
|
-
});
|
|
3622
|
-
}
|
|
3623
|
-
ToggleGroup.Item = ToggleGroupItem;
|
|
3624
|
-
// src/lib/merge-refs.ts
|
|
3625
|
-
/** Combines refs into one callback ref (React 19 cleanup-aware). */
|
|
3626
|
-
function mergeRefs(...refs) {
|
|
3627
|
-
return (node) => {
|
|
3628
|
-
const cleanups = [];
|
|
3629
|
-
for (const ref of refs) if (typeof ref === "function") {
|
|
3630
|
-
const cleanup = ref(node);
|
|
3631
|
-
cleanups.push(typeof cleanup === "function" ? cleanup : () => ref(null));
|
|
3632
|
-
} else if (ref) {
|
|
3633
|
-
ref.current = node;
|
|
3634
|
-
cleanups.push(() => {
|
|
3635
|
-
ref.current = null;
|
|
3636
|
-
});
|
|
3637
|
-
}
|
|
3638
|
-
return () => {
|
|
3639
|
-
for (const cleanup of cleanups) cleanup();
|
|
3640
|
-
};
|
|
3641
|
-
};
|
|
3642
|
-
}
|
|
3643
|
-
// src/toolbar/toolbar.tsx
|
|
3644
|
-
const toolbarStyles = tv({
|
|
3645
|
-
base: "flex items-center gap-0.5 data-[orientation=vertical]:flex-col",
|
|
3646
|
-
variants: {
|
|
3647
|
-
surface: {
|
|
3648
|
-
none: "",
|
|
3649
|
-
floating: "nsaa-surface w-fit rounded-surface p-1 shadow-default"
|
|
3650
|
-
},
|
|
3651
|
-
overflow: {
|
|
3652
|
-
menu: "flex-nowrap",
|
|
3653
|
-
none: "flex-wrap",
|
|
3654
|
-
scroll: [
|
|
3655
|
-
"snap-x snap-proximity scroll-px-4 overflow-x-auto overscroll-x-contain p-1 pointer-coarse:py-1.5 [scrollbar-width:none] [&>*]:snap-start",
|
|
3656
|
-
"[--fade-l:0px] [--fade-r:0px] data-fade-left:[--fade-l:--spacing(4)] data-fade-right:[--fade-r:--spacing(4)]",
|
|
3657
|
-
"[mask-image:linear-gradient(to_right,transparent,black_var(--fade-l),black_calc(100%-var(--fade-r)),transparent)]"
|
|
3658
|
-
]
|
|
3659
|
-
}
|
|
3660
|
-
},
|
|
3661
|
-
defaultVariants: {
|
|
3662
|
-
surface: "none",
|
|
3663
|
-
overflow: "menu"
|
|
3664
|
-
}
|
|
3665
|
-
});
|
|
3666
|
-
/** Marks which edges of a scrolling toolbar hide items (`data-fade-left` / `data-fade-right`). */
|
|
3667
|
-
function useScrollEdges(enabled) {
|
|
3668
|
-
const node = useRef(null);
|
|
3669
|
-
useEffect(() => {
|
|
3670
|
-
const el = node.current;
|
|
3671
|
-
if (!enabled || !el) return;
|
|
3672
|
-
const update = () => {
|
|
3673
|
-
const max = el.scrollWidth - el.clientWidth;
|
|
3674
|
-
const fromLeft = getComputedStyle(el).direction === "rtl" ? max + el.scrollLeft : el.scrollLeft;
|
|
3675
|
-
el.toggleAttribute("data-fade-left", fromLeft > 1);
|
|
3676
|
-
el.toggleAttribute("data-fade-right", max - fromLeft > 1);
|
|
3677
|
-
};
|
|
3678
|
-
update();
|
|
3679
|
-
el.addEventListener("scroll", update, { passive: true });
|
|
3680
|
-
const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
|
|
3681
|
-
observer?.observe(el);
|
|
3682
|
-
return () => {
|
|
3683
|
-
el.removeEventListener("scroll", update);
|
|
3684
|
-
observer?.disconnect();
|
|
3685
|
-
};
|
|
3686
|
-
}, [enabled]);
|
|
3687
|
-
return node;
|
|
3688
|
-
}
|
|
3689
|
-
/**
|
|
3690
|
-
* Groups related controls behind one Tab stop, with arrow keys, Home and End moving between items
|
|
3691
|
-
* (Base UI `Toolbar`). Items get the toolbar's size, swap icons instantly, change colour without
|
|
3692
|
-
* transitions and stay silent unless `sound` is set: a toolbar is high-frequency.
|
|
3693
|
-
*/
|
|
3694
|
-
function ToolbarRoot({ size = "sm", surface = "none", overflow = "menu", overflowLabel = "More", sound = false, orientation = "horizontal", className, children, onKeyDown, ref, ...props }) {
|
|
3695
|
-
const edges = useScrollEdges(overflow === "scroll");
|
|
3696
|
-
const root = useRef(null);
|
|
3697
|
-
const setRef = useCallback((el) => mergeRefs(root, edges, ref)(el), [edges, ref]);
|
|
3698
|
-
const [store] = useState(() => new OverflowStore());
|
|
3699
|
-
const collapses = overflow === "menu" && orientation === "horizontal";
|
|
3700
|
-
useLayoutEffect(() => {
|
|
3701
|
-
if (collapses && root.current) store.layout(root.current);
|
|
3702
|
-
});
|
|
3703
|
-
useEffect(() => {
|
|
3704
|
-
const el = root.current;
|
|
3705
|
-
if (!collapses || !el || typeof ResizeObserver === "undefined") return;
|
|
3706
|
-
const observer = new ResizeObserver(() => store.layout(el));
|
|
3707
|
-
observer.observe(el);
|
|
3708
|
-
if (el.parentElement) observer.observe(el.parentElement);
|
|
3709
|
-
return () => observer.disconnect();
|
|
3710
|
-
}, [collapses, store]);
|
|
3711
|
-
const handleKeyDown = (event) => {
|
|
3712
|
-
onKeyDown?.(event);
|
|
3713
|
-
if (event.defaultPrevented || event.key !== "Home" && event.key !== "End") return;
|
|
3714
|
-
if (event.target.closest("input, textarea, [contenteditable]")) return;
|
|
3715
|
-
const items = [...event.currentTarget.querySelectorAll("button:not(:disabled), a[href], input:not(:disabled)")];
|
|
3716
|
-
const target = event.key === "Home" ? items[0] : items.at(-1);
|
|
3717
|
-
if (!target) return;
|
|
3718
|
-
event.preventDefault();
|
|
3719
|
-
target.focus();
|
|
3720
|
-
};
|
|
3721
|
-
return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
|
|
3722
|
-
value: {
|
|
3723
|
-
size,
|
|
3724
|
-
sound,
|
|
3725
|
-
orientation,
|
|
3726
|
-
iconTransition: "instant",
|
|
3727
|
-
instantColors: true
|
|
3728
|
-
},
|
|
3729
|
-
children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Toolbar$1.Root, {
|
|
3730
|
-
ref: setRef,
|
|
3731
|
-
"data-slot": "toolbar",
|
|
3732
|
-
"data-size": size,
|
|
3733
|
-
"data-surface": surface,
|
|
3734
|
-
orientation,
|
|
3735
|
-
className: cn(toolbarStyles({
|
|
3736
|
-
surface,
|
|
3737
|
-
overflow
|
|
3738
|
-
}), "data-[orientation=horizontal]:pointer-coarse:[&_:is(button,a)]:before:min-w-0", "data-[orientation=vertical]:pointer-coarse:[&_:is(button,a)]:before:min-h-0", className),
|
|
3739
|
-
onKeyDown: handleKeyDown,
|
|
3740
|
-
...props,
|
|
3741
|
-
children: [/* @__PURE__ */ jsx(OverflowContext.Provider, {
|
|
3742
|
-
value: collapses ? store : null,
|
|
3743
|
-
children
|
|
3744
|
-
}), collapses && /* @__PURE__ */ jsx(OverflowMore, {
|
|
3745
|
-
store,
|
|
3746
|
-
label: overflowLabel
|
|
3747
|
-
})]
|
|
3748
|
-
}) })
|
|
3749
|
-
});
|
|
3750
|
-
}
|
|
3751
|
-
/** A toolbar button's form in the More menu: a menu item, or a checkbox item for a toggle. */
|
|
3752
|
-
function buttonMenuItem(p, disabled) {
|
|
3753
|
-
const label = p["aria-label"] ?? p.children;
|
|
3754
|
-
const shortcut = typeof p.tooltip === "object" ? p.tooltip.shortcut : void 0;
|
|
3755
|
-
if (p.pressed !== void 0 || p.onPressedChange !== void 0) return /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
|
|
3756
|
-
"aria-keyshortcuts": shortcut ? ariaShortcut(shortcut) : void 0,
|
|
3757
|
-
checked: p.pressed ?? false,
|
|
3758
|
-
disabled,
|
|
3759
|
-
onCheckedChange: (on, details) => p.onPressedChange?.(on, details),
|
|
3760
|
-
children: [
|
|
3761
|
-
p.icon,
|
|
3762
|
-
label,
|
|
3763
|
-
shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: formatShortcut(shortcut) })
|
|
3764
|
-
]
|
|
3765
|
-
});
|
|
3766
|
-
return /* @__PURE__ */ jsxs(DropdownMenuItem, {
|
|
3767
|
-
"aria-keyshortcuts": shortcut ? ariaShortcut(shortcut) : void 0,
|
|
3768
|
-
disabled,
|
|
3769
|
-
onClick: p.onClick,
|
|
3770
|
-
children: [
|
|
3771
|
-
p.icon,
|
|
3772
|
-
label,
|
|
3773
|
-
shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: formatShortcut(shortcut) })
|
|
3774
|
-
]
|
|
3775
|
-
});
|
|
3776
|
-
}
|
|
3777
|
-
/**
|
|
3778
|
-
* A ghost Button (#84): icon-only (with a tooltip) when it has only an `icon`, labelled otherwise;
|
|
3779
|
-
* a toggle with `pressed`. Disabled items stay focusable so people can discover them.
|
|
3780
|
-
*/
|
|
3781
|
-
function ToolbarButton({ disabled, overflowPriority, ...props }) {
|
|
3782
|
-
const { hidden, unitProps, placeholder } = useOverflowUnit({
|
|
3783
|
-
kind: "item",
|
|
3784
|
-
priority: props["aria-haspopup"] !== void 0 ? "never" : overflowPriority,
|
|
3785
|
-
menu: buttonMenuItem(props, disabled)
|
|
3786
|
-
});
|
|
3787
|
-
if (hidden) return placeholder;
|
|
3788
|
-
return /* @__PURE__ */ jsx(Toolbar$1.Button, {
|
|
3789
|
-
...unitProps,
|
|
3790
|
-
"data-slot": "toolbar-button",
|
|
3791
|
-
disabled,
|
|
3792
|
-
focusableWhenDisabled: true,
|
|
3793
|
-
render: /* @__PURE__ */ jsx(ToolbarItem, { ...props })
|
|
3794
|
-
});
|
|
3795
|
-
}
|
|
3796
|
-
const LINK_SIZE = {
|
|
3797
|
-
xs: "xs",
|
|
3798
|
-
sm: "sm",
|
|
3799
|
-
md: "default",
|
|
3800
|
-
lg: "lg",
|
|
3801
|
-
xl: "lg"
|
|
3802
|
-
};
|
|
3803
|
-
/** A link styled like a ghost toolbar item. */
|
|
3804
|
-
function ToolbarLink({ className, overflowPriority, ...props }) {
|
|
3805
|
-
const { size } = useControlDefaults();
|
|
3806
|
-
const { hidden, unitProps, placeholder } = useOverflowUnit({
|
|
3807
|
-
kind: "item",
|
|
3808
|
-
priority: overflowPriority,
|
|
3809
|
-
menu: /* @__PURE__ */ jsx(DropdownMenuItem, {
|
|
3810
|
-
render: /* @__PURE__ */ jsx("a", { href: props.href }),
|
|
3811
|
-
children: props.children
|
|
3812
|
-
})
|
|
3813
|
-
});
|
|
3814
|
-
if (hidden) return placeholder;
|
|
3815
|
-
return /* @__PURE__ */ jsx(Toolbar$1.Link, {
|
|
3816
|
-
...unitProps,
|
|
3817
|
-
"data-slot": "toolbar-link",
|
|
3818
|
-
className: cn(buttonVariants({
|
|
3819
|
-
variant: "ghost",
|
|
3820
|
-
size: LINK_SIZE[size ?? "md"]
|
|
3821
|
-
}), "transition-none", className),
|
|
3822
|
-
...props
|
|
3823
|
-
});
|
|
3824
|
-
}
|
|
3825
|
-
/** A labelled cluster of items. */
|
|
3826
|
-
function ToolbarGroup({ className, ...props }) {
|
|
3827
|
-
return /* @__PURE__ */ jsx(Toolbar$1.Group, {
|
|
3828
|
-
"data-slot": "toolbar-group",
|
|
3829
|
-
role: "group",
|
|
3830
|
-
className: cn("flex items-center gap-0.5 data-[orientation=vertical]:flex-col", className),
|
|
3831
|
-
...props
|
|
3832
|
-
});
|
|
3833
|
-
}
|
|
3834
|
-
/** 1 px `border-default`, 60% of the item height, perpendicular to the toolbar. */
|
|
3835
|
-
function ToolbarSeparator({ className, ...props }) {
|
|
3836
|
-
const { hidden, unitProps, placeholder } = useOverflowUnit({
|
|
3837
|
-
kind: "separator",
|
|
3838
|
-
menu: null
|
|
3839
|
-
});
|
|
3840
|
-
if (hidden) return placeholder;
|
|
3841
|
-
return /* @__PURE__ */ jsx(Toolbar$1.Separator, {
|
|
3842
|
-
...unitProps,
|
|
3843
|
-
"data-slot": "toolbar-separator",
|
|
3844
|
-
className: cn("shrink-0 self-stretch bg-border-default", "data-[orientation=vertical]:mx-0.5 data-[orientation=vertical]:w-px data-[orientation=vertical]:scale-y-60", "data-[orientation=horizontal]:my-0.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:scale-x-60", className),
|
|
3845
|
-
...props
|
|
3846
|
-
});
|
|
3847
|
-
}
|
|
3848
|
-
/**
|
|
3849
|
-
* A text input in the toolbar (search, find, a URL). At most one, placed last: arrow keys move
|
|
3850
|
-
* the caret inside it (Base UI). The base-nova Input (#84) without its resting border; never
|
|
3851
|
-
* collapses.
|
|
3852
|
-
*/
|
|
3853
|
-
function ToolbarInput({ className, ...props }) {
|
|
3854
|
-
const { unitProps } = useOverflowUnit({
|
|
3855
|
-
kind: "item",
|
|
3856
|
-
priority: "never",
|
|
3857
|
-
menu: null
|
|
3858
|
-
});
|
|
3859
|
-
return /* @__PURE__ */ jsx("span", {
|
|
3860
|
-
...unitProps,
|
|
3861
|
-
"data-slot": "toolbar-input",
|
|
3862
|
-
className: "inline-flex min-w-0 shrink",
|
|
3863
|
-
children: /* @__PURE__ */ jsx(Toolbar$1.Input, { render: /* @__PURE__ */ jsx(Input, {
|
|
3864
|
-
className: cn("border-transparent dark:bg-transparent", className),
|
|
3865
|
-
...props
|
|
3866
|
-
}) })
|
|
3867
|
-
});
|
|
3868
|
-
}
|
|
3869
|
-
const Toolbar = Object.assign(ToolbarRoot, {
|
|
3870
|
-
Button: ToolbarButton,
|
|
3871
|
-
Input: ToolbarInput,
|
|
3872
|
-
Link: ToolbarLink,
|
|
3873
|
-
Group: ToolbarGroup,
|
|
3874
|
-
Separator: ToolbarSeparator
|
|
3875
|
-
});
|
|
3876
|
-
// src/index.ts
|
|
3877
|
-
trackInputModality();
|
|
2
|
+
import { cn } from "./lib/cn.js";
|
|
3
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion/accordion.js";
|
|
4
|
+
import { SoundProvider, useSound } from "./sound/sound.js";
|
|
5
|
+
import { SOUND_MAP } from "./sound/sound-map.js";
|
|
6
|
+
import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert/alert.js";
|
|
7
|
+
import { LoaderProvider } from "./spinner/loader-provider.js";
|
|
8
|
+
import { registerLoader, registerLoaders } from "./spinner/registry.js";
|
|
9
|
+
import { Spinner } from "./spinner/spinner.js";
|
|
10
|
+
import { Button, buttonVariants } from "./button/button.js";
|
|
11
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog/alert-dialog.js";
|
|
12
|
+
import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./avatar/avatar.js";
|
|
13
|
+
import { Badge, badgeVariants } from "./badge/badge.js";
|
|
14
|
+
import { Calendar, CalendarDayButton } from "./calendar/calendar.js";
|
|
15
|
+
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card/card.js";
|
|
16
|
+
import { Checkbox } from "./checkbox/checkbox.js";
|
|
17
|
+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible/collapsible.js";
|
|
18
|
+
import { Input } from "./input/input.js";
|
|
19
|
+
import { Textarea } from "./textarea/textarea.js";
|
|
20
|
+
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group/input-group.js";
|
|
21
|
+
import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./combobox/combobox.js";
|
|
22
|
+
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./dialog/dialog.js";
|
|
23
|
+
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./command/command.js";
|
|
24
|
+
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./context-menu/context-menu.js";
|
|
25
|
+
import { DirectionProvider } from "./direction.js";
|
|
26
|
+
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from "./drawer/drawer.js";
|
|
27
|
+
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu/dropdown-menu.js";
|
|
28
|
+
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, useEmptyIllustration } from "./empty/empty.js";
|
|
29
|
+
import { Label } from "./label/label.js";
|
|
30
|
+
import { Separator } from "./separator/separator.js";
|
|
31
|
+
import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./field/field.js";
|
|
32
|
+
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./input-otp/input-otp.js";
|
|
33
|
+
import { Kbd, KbdGroup } from "./kbd/kbd.js";
|
|
34
|
+
import { IconSwap } from "./lib/icon-swap.js";
|
|
35
|
+
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./native-select/native-select.js";
|
|
36
|
+
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination/pagination.js";
|
|
37
|
+
import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./popover/popover.js";
|
|
38
|
+
import { RadioGroup, RadioGroupItem } from "./radio-group/radio-group.js";
|
|
39
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./select/select.js";
|
|
40
|
+
import { Skeleton, SkeletonContent } from "./skeleton/skeleton.js";
|
|
41
|
+
import { Slider } from "./slider/slider.js";
|
|
42
|
+
import { Switch } from "./switch/switch.js";
|
|
43
|
+
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table/table.js";
|
|
44
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./tabs/tabs.js";
|
|
45
|
+
import { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager } from "./toast/toast.js";
|
|
46
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip/tooltip.js";
|
|
47
|
+
import { ToggleGroup } from "./toggle-group/toggle-group.js";
|
|
48
|
+
import { Toolbar } from "./toolbar/toolbar.js";
|
|
49
|
+
import "./lib/track-input-modality.js";
|
|
3878
50
|
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, LoaderProvider, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, SoundProvider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
|