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