@haklex/rich-editor-ui 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.mjs +1903 -1853
  2. package/dist/rich-editor-ui.css +2 -1
  3. package/package.json +8 -8
package/dist/index.mjs CHANGED
@@ -1,812 +1,886 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { AlertCircle, AlertTriangle, Info, Check, Copy, ChevronDown, ChevronRight, ArrowLeft, Pipette, Plus, X, ChevronUp } from "lucide-react";
3
- import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle, useMemo, createContext, use, createElement, useSyncExternalStore } from "react";
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { AlertCircle, AlertTriangle, ArrowLeft, Check, ChevronDown, ChevronRight, ChevronUp, Copy, Info, Pipette, Plus, X } from "lucide-react";
3
+ import { createContext, createElement, forwardRef, use, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
4
4
  import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
5
5
  import { Popover as Popover$1 } from "@base-ui/react/popover";
6
- import { PortalThemeWrapper, PortalThemeProvider } from "@haklex/rich-style-token";
7
- import { PortalThemeProvider as PortalThemeProvider2, PortalThemeWrapper as PortalThemeWrapper2, usePortalTheme } from "@haklex/rich-style-token";
6
+ import { PortalThemeProvider, PortalThemeProvider as PortalThemeProvider$1, PortalThemeWrapper, PortalThemeWrapper as PortalThemeWrapper$1, usePortalTheme } from "@haklex/rich-style-token";
8
7
  import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
9
8
  import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
10
9
  import { Menu } from "@base-ui/react/menu";
11
10
  import { Select as Select$1 } from "@base-ui/react/select";
12
11
  import { Tooltip } from "@base-ui/react/tooltip";
12
+ //#region ../../node_modules/.pnpm/@vanilla-extract+recipes@0.5.7_@vanilla-extract+css@1.20.1_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
13
13
  function toPrimitive(t, r) {
14
- if ("object" != typeof t || !t) return t;
15
- var e = t[Symbol.toPrimitive];
16
- if (void 0 !== e) {
17
- var i = e.call(t, r);
18
- if ("object" != typeof i) return i;
19
- throw new TypeError("@@toPrimitive must return a primitive value.");
20
- }
21
- return ("string" === r ? String : Number)(t);
14
+ if ("object" != typeof t || !t) return t;
15
+ var e = t[Symbol.toPrimitive];
16
+ if (void 0 !== e) {
17
+ var i = e.call(t, r || "default");
18
+ if ("object" != typeof i) return i;
19
+ throw new TypeError("@@toPrimitive must return a primitive value.");
20
+ }
21
+ return ("string" === r ? String : Number)(t);
22
22
  }
23
23
  function toPropertyKey(t) {
24
- var i = toPrimitive(t, "string");
25
- return "symbol" == typeof i ? i : String(i);
24
+ var i = toPrimitive(t, "string");
25
+ return "symbol" == typeof i ? i : String(i);
26
26
  }
27
27
  function _defineProperty(obj, key, value) {
28
- key = toPropertyKey(key);
29
- if (key in obj) {
30
- Object.defineProperty(obj, key, {
31
- value,
32
- enumerable: true,
33
- configurable: true,
34
- writable: true
35
- });
36
- } else {
37
- obj[key] = value;
38
- }
39
- return obj;
28
+ key = toPropertyKey(key);
29
+ if (key in obj) Object.defineProperty(obj, key, {
30
+ value,
31
+ enumerable: true,
32
+ configurable: true,
33
+ writable: true
34
+ });
35
+ else obj[key] = value;
36
+ return obj;
40
37
  }
41
38
  function ownKeys(e, r) {
42
- var t = Object.keys(e);
43
- if (Object.getOwnPropertySymbols) {
44
- var o = Object.getOwnPropertySymbols(e);
45
- r && (o = o.filter(function(r2) {
46
- return Object.getOwnPropertyDescriptor(e, r2).enumerable;
47
- })), t.push.apply(t, o);
48
- }
49
- return t;
39
+ var t = Object.keys(e);
40
+ if (Object.getOwnPropertySymbols) {
41
+ var o = Object.getOwnPropertySymbols(e);
42
+ r && (o = o.filter(function(r) {
43
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
44
+ })), t.push.apply(t, o);
45
+ }
46
+ return t;
50
47
  }
51
48
  function _objectSpread2(e) {
52
- for (var r = 1; r < arguments.length; r++) {
53
- var t = null != arguments[r] ? arguments[r] : {};
54
- r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
55
- _defineProperty(e, r2, t[r2]);
56
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
57
- Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
58
- });
59
- }
60
- return e;
49
+ for (var r = 1; r < arguments.length; r++) {
50
+ var t = null != arguments[r] ? arguments[r] : {};
51
+ r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
52
+ _defineProperty(e, r, t[r]);
53
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
54
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
55
+ });
56
+ }
57
+ return e;
61
58
  }
62
59
  function mapValues(input, fn) {
63
- var result = {};
64
- for (var _key in input) {
65
- result[_key] = fn(input[_key], _key);
66
- }
67
- return result;
60
+ var result = {};
61
+ for (var _key in input) result[_key] = fn(input[_key], _key);
62
+ return result;
68
63
  }
69
64
  var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
70
- for (var key of Object.keys(compoundCheck)) {
71
- var _selections$key;
72
- if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
73
- return false;
74
- }
75
- }
76
- return true;
65
+ for (var key of Object.keys(compoundCheck)) {
66
+ var _selections$key;
67
+ if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) return false;
68
+ }
69
+ return true;
77
70
  };
78
71
  var createRuntimeFn = (config) => {
79
- var runtimeFn = (options) => {
80
- var className = config.defaultClassName;
81
- var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
82
- for (var variantName in selections) {
83
- var _selections$variantNa;
84
- var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
85
- if (variantSelection != null) {
86
- var selection = variantSelection;
87
- if (typeof selection === "boolean") {
88
- selection = selection === true ? "true" : "false";
89
- }
90
- var selectionClassName = (
91
- // @ts-expect-error
92
- config.variantClassNames[variantName][selection]
93
- );
94
- if (selectionClassName) {
95
- className += " " + selectionClassName;
96
- }
97
- }
98
- }
99
- for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
100
- if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
101
- className += " " + compoundClassName;
102
- }
103
- }
104
- return className;
105
- };
106
- runtimeFn.variants = () => Object.keys(config.variantClassNames);
107
- runtimeFn.classNames = {
108
- get base() {
109
- return config.defaultClassName.split(" ")[0];
110
- },
111
- get variants() {
112
- return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
113
- }
114
- };
115
- return runtimeFn;
72
+ var runtimeFn = (options) => {
73
+ var className = config.defaultClassName;
74
+ var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
75
+ for (var variantName in selections) {
76
+ var _selections$variantNa;
77
+ var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
78
+ if (variantSelection != null) {
79
+ var selection = variantSelection;
80
+ if (typeof selection === "boolean") selection = selection === true ? "true" : "false";
81
+ var selectionClassName = config.variantClassNames[variantName][selection];
82
+ if (selectionClassName) className += " " + selectionClassName;
83
+ }
84
+ }
85
+ for (var [compoundCheck, compoundClassName] of config.compoundVariants) if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += " " + compoundClassName;
86
+ return className;
87
+ };
88
+ runtimeFn.variants = () => Object.keys(config.variantClassNames);
89
+ runtimeFn.classNames = {
90
+ get base() {
91
+ return config.defaultClassName.split(" ")[0];
92
+ },
93
+ get variants() {
94
+ return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
95
+ }
96
+ };
97
+ return runtimeFn;
98
+ };
99
+ //#endregion
100
+ //#region src/components/action-button/styles.css.ts
101
+ var semanticClassNames = {
102
+ actionBar: "re-ui-action-bar",
103
+ actionButton: "re-ui-action-btn",
104
+ actionButtonEnd: "re-ui-action-btn--end",
105
+ actionButtonDanger: "re-ui-action-btn--danger",
106
+ actionButtonIcon: "re-ui-action-btn--icon"
116
107
  };
117
- var semanticClassNames = { actionBar: "re-ui-action-bar", actionButton: "re-ui-action-btn", actionButtonEnd: "re-ui-action-btn--end", actionButtonDanger: "re-ui-action-btn--danger", actionButtonIcon: "re-ui-action-btn--icon" };
118
108
  var actionBar = "_73ej2i0";
119
- var actionButton$1 = createRuntimeFn({ defaultClassName: "_73ej2i1", variantClassNames: { variant: { ghost: "_73ej2i2", solid: "_73ej2i3", outline: "_73ej2i4", accent: "_73ej2i5" }, size: { sm: "_73ej2i6", md: "_73ej2i7", lg: "_73ej2i8" }, icon: { true: "_73ej2i9", false: "_73ej2ia" }, end: { true: "_73ej2ib", false: "_73ej2ic" }, danger: { true: "_73ej2id", false: "_73ej2ie" }, rounded: { true: "_73ej2if", false: "_73ej2ig" } }, defaultVariants: { variant: "ghost", size: "sm", icon: false, end: false, danger: false, rounded: false }, compoundVariants: [[{ icon: true, size: "sm" }, "_73ej2ih"], [{ icon: true, size: "md" }, "_73ej2ii"], [{ icon: true, size: "lg" }, "_73ej2ij"], [{ rounded: true, icon: true }, "_73ej2ik"], [{ danger: true }, "_73ej2il"]] });
109
+ var actionButton$1 = createRuntimeFn({
110
+ defaultClassName: "_73ej2i1",
111
+ variantClassNames: {
112
+ variant: {
113
+ ghost: "_73ej2i2",
114
+ solid: "_73ej2i3",
115
+ outline: "_73ej2i4",
116
+ accent: "_73ej2i5"
117
+ },
118
+ size: {
119
+ sm: "_73ej2i6",
120
+ md: "_73ej2i7",
121
+ lg: "_73ej2i8"
122
+ },
123
+ icon: {
124
+ true: "_73ej2i9",
125
+ false: "_73ej2ia"
126
+ },
127
+ end: {
128
+ true: "_73ej2ib",
129
+ false: "_73ej2ic"
130
+ },
131
+ danger: {
132
+ true: "_73ej2id",
133
+ false: "_73ej2ie"
134
+ },
135
+ rounded: {
136
+ true: "_73ej2if",
137
+ false: "_73ej2ig"
138
+ }
139
+ },
140
+ defaultVariants: {
141
+ variant: "ghost",
142
+ size: "sm",
143
+ icon: false,
144
+ end: false,
145
+ danger: false,
146
+ rounded: false
147
+ },
148
+ compoundVariants: [
149
+ [{
150
+ icon: true,
151
+ size: "sm"
152
+ }, "_73ej2ih"],
153
+ [{
154
+ icon: true,
155
+ size: "md"
156
+ }, "_73ej2ii"],
157
+ [{
158
+ icon: true,
159
+ size: "lg"
160
+ }, "_73ej2ij"],
161
+ [{
162
+ rounded: true,
163
+ icon: true
164
+ }, "_73ej2ik"],
165
+ [{ danger: true }, "_73ej2il"]
166
+ ]
167
+ });
168
+ //#endregion
169
+ //#region src/components/action-button/index.tsx
120
170
  function ActionBar({ className, gap, style, ...props }) {
121
- return /* @__PURE__ */ jsx(
122
- "div",
123
- {
124
- className: `${actionBar} ${semanticClassNames.actionBar}${className ? ` ${className}` : ""}`,
125
- style: gap != null ? { ...style, gap } : style,
126
- ...props
127
- }
128
- );
129
- }
130
- function ActionButton({
131
- variant,
132
- size,
133
- end = false,
134
- danger = false,
135
- icon: icon2 = false,
136
- rounded = false,
137
- className,
138
- type = "button",
139
- ...props
140
- }) {
141
- const semanticParts = [semanticClassNames.actionButton];
142
- if (end) semanticParts.push(semanticClassNames.actionButtonEnd);
143
- if (danger) semanticParts.push(semanticClassNames.actionButtonDanger);
144
- if (icon2) semanticParts.push(semanticClassNames.actionButtonIcon);
145
- const recipeClass = actionButton$1({ variant, size, end, danger, icon: icon2, rounded });
146
- return /* @__PURE__ */ jsx(
147
- "button",
148
- {
149
- className: `${recipeClass} ${semanticParts.join(" ")}${className ? ` ${className}` : ""}`,
150
- type,
151
- ...props
152
- }
153
- );
171
+ return /* @__PURE__ */ jsx("div", {
172
+ className: `${actionBar} ${semanticClassNames.actionBar}${className ? ` ${className}` : ""}`,
173
+ style: gap != null ? {
174
+ ...style,
175
+ gap
176
+ } : style,
177
+ ...props
178
+ });
179
+ }
180
+ function ActionButton({ variant, size, end = false, danger = false, icon = false, rounded = false, className, type = "button", ...props }) {
181
+ const semanticParts = [semanticClassNames.actionButton];
182
+ if (end) semanticParts.push(semanticClassNames.actionButtonEnd);
183
+ if (danger) semanticParts.push(semanticClassNames.actionButtonDanger);
184
+ if (icon) semanticParts.push(semanticClassNames.actionButtonIcon);
185
+ return /* @__PURE__ */ jsx("button", {
186
+ className: `${actionButton$1({
187
+ variant,
188
+ size,
189
+ end,
190
+ danger,
191
+ icon,
192
+ rounded
193
+ })} ${semanticParts.join(" ")}${className ? ` ${className}` : ""}`,
194
+ type,
195
+ ...props
196
+ });
154
197
  }
155
198
  function getActionButtonClassName(options) {
156
- return `${actionButton$1(options)} ${semanticClassNames.actionButton}`;
157
- }
158
- var alert = createRuntimeFn({ defaultClassName: "_15r7gwx0", variantClassNames: { variant: { info: "_15r7gwx1", warning: "_15r7gwx2", error: "_15r7gwx3" } }, defaultVariants: { variant: "info" }, compoundVariants: [] });
199
+ return `${actionButton$1(options)} ${semanticClassNames.actionButton}`;
200
+ }
201
+ //#endregion
202
+ //#region src/components/alert/styles.css.ts
203
+ var alert = createRuntimeFn({
204
+ defaultClassName: "_15r7gwx0",
205
+ variantClassNames: { variant: {
206
+ info: "_15r7gwx1",
207
+ warning: "_15r7gwx2",
208
+ error: "_15r7gwx3"
209
+ } },
210
+ defaultVariants: { variant: "info" },
211
+ compoundVariants: []
212
+ });
159
213
  var alertContent = "_15r7gwx4";
160
214
  var alertIcon = "_15r7gwx5";
161
- var alertAction = "_15r7gwx6";
162
- const icons = {
163
- info: Info,
164
- warning: AlertTriangle,
165
- error: AlertCircle
215
+ //#endregion
216
+ //#region src/components/alert/index.tsx
217
+ var icons = {
218
+ info: Info,
219
+ warning: AlertTriangle,
220
+ error: AlertCircle
166
221
  };
167
222
  function Alert({ variant, children, action, className }) {
168
- const IconComponent = icons[variant];
169
- return /* @__PURE__ */ jsxs("div", { className: `${alert({ variant })}${className ? ` ${className}` : ""}`, role: "alert", children: [
170
- /* @__PURE__ */ jsx(IconComponent, { className: alertIcon }),
171
- /* @__PURE__ */ jsx("div", { className: alertContent, children }),
172
- action && /* @__PURE__ */ jsx("div", { className: alertAction, children: action })
173
- ] });
174
- }
223
+ const IconComponent = icons[variant];
224
+ return /* @__PURE__ */ jsxs("div", {
225
+ className: `${alert({ variant })}${className ? ` ${className}` : ""}`,
226
+ role: "alert",
227
+ children: [
228
+ /* @__PURE__ */ jsx(IconComponent, { className: alertIcon }),
229
+ /* @__PURE__ */ jsx("div", {
230
+ className: alertContent,
231
+ children
232
+ }),
233
+ action && /* @__PURE__ */ jsx("div", {
234
+ className: "_15r7gwx6",
235
+ children: action
236
+ })
237
+ ]
238
+ });
239
+ }
240
+ //#endregion
241
+ //#region src/components/animated-tabs/styles.css.ts
175
242
  var root$1 = "iryuae0";
176
243
  var tablist = "iryuae1";
177
244
  var tab = "iryuae2";
178
245
  var tabActive = "iryuae3";
179
246
  var border = "iryuae4";
180
247
  var indicator$1 = "iryuae5";
248
+ //#endregion
249
+ //#region src/components/animated-tabs/index.tsx
181
250
  function cn(...parts) {
182
- return parts.filter(Boolean).join(" ");
251
+ return parts.filter(Boolean).join(" ");
183
252
  }
184
253
  function AnimatedTabs({ tabs, defaultTab, value, onChange, className }) {
185
- const isControlled = value !== void 0;
186
- const [internalTab, setInternalTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
187
- const activeTab = isControlled ? value : internalTab;
188
- const [indicator2, setIndicator] = useState({
189
- left: 0,
190
- width: 0
191
- });
192
- const tabRefs = useRef(/* @__PURE__ */ new Map());
193
- const containerRef = useRef(null);
194
- const updateIndicator = useCallback(() => {
195
- const activeEl = tabRefs.current.get(activeTab);
196
- const container2 = containerRef.current;
197
- if (activeEl && container2) {
198
- const containerRect = container2.getBoundingClientRect();
199
- const tabRect = activeEl.getBoundingClientRect();
200
- setIndicator({
201
- left: tabRect.left - containerRect.left,
202
- width: tabRect.width
203
- });
204
- }
205
- }, [activeTab]);
206
- useEffect(() => {
207
- updateIndicator();
208
- }, [updateIndicator]);
209
- useEffect(() => {
210
- window.addEventListener("resize", updateIndicator);
211
- return () => window.removeEventListener("resize", updateIndicator);
212
- }, [updateIndicator]);
213
- const handleTabClick = (tabId) => {
214
- if (!isControlled) {
215
- setInternalTab(tabId);
216
- }
217
- onChange?.(tabId);
218
- };
219
- return /* @__PURE__ */ jsxs("div", { className: cn(root$1, className), ref: containerRef, children: [
220
- /* @__PURE__ */ jsx("div", { "aria-orientation": "horizontal", className: tablist, role: "tablist", children: tabs.map((tab$1) => /* @__PURE__ */ jsx(
221
- "button",
222
- {
223
- "aria-selected": activeTab === tab$1.id,
224
- className: cn(tab, activeTab === tab$1.id ? tabActive : void 0),
225
- role: "tab",
226
- type: "button",
227
- ref: (el) => {
228
- if (el) {
229
- tabRefs.current.set(tab$1.id, el);
230
- } else {
231
- tabRefs.current.delete(tab$1.id);
232
- }
233
- },
234
- onClick: () => handleTabClick(tab$1.id),
235
- children: tab$1.label
236
- },
237
- tab$1.id
238
- )) }),
239
- /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: border }),
240
- /* @__PURE__ */ jsx(
241
- "div",
242
- {
243
- "aria-hidden": "true",
244
- className: indicator$1,
245
- style: {
246
- left: indicator2.left,
247
- width: indicator2.width
248
- }
249
- }
250
- )
251
- ] });
252
- }
254
+ const isControlled = value !== void 0;
255
+ const [internalTab, setInternalTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
256
+ const activeTab = isControlled ? value : internalTab;
257
+ const [indicator, setIndicator] = useState({
258
+ left: 0,
259
+ width: 0
260
+ });
261
+ const tabRefs = useRef(/* @__PURE__ */ new Map());
262
+ const containerRef = useRef(null);
263
+ const updateIndicator = useCallback(() => {
264
+ const activeEl = tabRefs.current.get(activeTab);
265
+ const container = containerRef.current;
266
+ if (activeEl && container) {
267
+ const containerRect = container.getBoundingClientRect();
268
+ const tabRect = activeEl.getBoundingClientRect();
269
+ setIndicator({
270
+ left: tabRect.left - containerRect.left,
271
+ width: tabRect.width
272
+ });
273
+ }
274
+ }, [activeTab]);
275
+ useEffect(() => {
276
+ updateIndicator();
277
+ }, [updateIndicator]);
278
+ useEffect(() => {
279
+ window.addEventListener("resize", updateIndicator);
280
+ return () => window.removeEventListener("resize", updateIndicator);
281
+ }, [updateIndicator]);
282
+ const handleTabClick = (tabId) => {
283
+ if (!isControlled) setInternalTab(tabId);
284
+ onChange?.(tabId);
285
+ };
286
+ return /* @__PURE__ */ jsxs("div", {
287
+ className: cn(root$1, className),
288
+ ref: containerRef,
289
+ children: [
290
+ /* @__PURE__ */ jsx("div", {
291
+ "aria-orientation": "horizontal",
292
+ className: tablist,
293
+ role: "tablist",
294
+ children: tabs.map((tab$1) => /* @__PURE__ */ jsx("button", {
295
+ "aria-selected": activeTab === tab$1.id,
296
+ className: cn(tab, activeTab === tab$1.id ? tabActive : void 0),
297
+ role: "tab",
298
+ type: "button",
299
+ ref: (el) => {
300
+ if (el) tabRefs.current.set(tab$1.id, el);
301
+ else tabRefs.current.delete(tab$1.id);
302
+ },
303
+ onClick: () => handleTabClick(tab$1.id),
304
+ children: tab$1.label
305
+ }, tab$1.id))
306
+ }),
307
+ /* @__PURE__ */ jsx("div", {
308
+ "aria-hidden": "true",
309
+ className: border
310
+ }),
311
+ /* @__PURE__ */ jsx("div", {
312
+ "aria-hidden": "true",
313
+ className: indicator$1,
314
+ style: {
315
+ left: indicator.left,
316
+ width: indicator.width
317
+ }
318
+ })
319
+ ]
320
+ });
321
+ }
322
+ //#endregion
323
+ //#region src/components/auto-resize-textarea/styles.css.ts
253
324
  var textarea = "_1b25hgb0";
254
325
  var overflowing = "_1b25hgb1";
255
- const AutoResizeTextArea = forwardRef(
256
- function AutoResizeTextArea2({ maxRows = 6, minRows = 1, className, onInput, ...props }, ref) {
257
- const innerRef = useRef(null);
258
- useImperativeHandle(ref, () => innerRef.current);
259
- const resize = useCallback(() => {
260
- const el = innerRef.current;
261
- if (!el) return;
262
- el.style.height = "auto";
263
- const lineHeight = Number.parseFloat(getComputedStyle(el).lineHeight) || 21;
264
- const maxHeight = lineHeight * maxRows + 16;
265
- const scrollHeight = el.scrollHeight;
266
- if (scrollHeight > maxHeight) {
267
- el.style.height = `${maxHeight}px`;
268
- el.classList.add(overflowing);
269
- } else {
270
- el.style.height = `${scrollHeight}px`;
271
- el.classList.remove(overflowing);
272
- }
273
- }, [maxRows]);
274
- useEffect(() => {
275
- resize();
276
- }, [resize, props.value]);
277
- return /* @__PURE__ */ jsx(
278
- "textarea",
279
- {
280
- className: `${textarea}${className ? ` ${className}` : ""}`,
281
- ref: innerRef,
282
- rows: minRows,
283
- onInput: (e) => {
284
- resize();
285
- onInput?.(e);
286
- },
287
- ...props
288
- }
289
- );
290
- }
291
- );
292
- var badge = createRuntimeFn({ defaultClassName: "_1vt0sm10", variantClassNames: { variant: { neutral: "_1vt0sm11", success: "_1vt0sm12", error: "_1vt0sm13", warning: "_1vt0sm14", info: "_1vt0sm15" }, size: { sm: "_1vt0sm16", md: "_1vt0sm17" } }, defaultVariants: { variant: "neutral", size: "sm" }, compoundVariants: [] });
326
+ //#endregion
327
+ //#region src/components/auto-resize-textarea/index.tsx
328
+ var AutoResizeTextArea = forwardRef(function AutoResizeTextArea({ maxRows = 6, minRows = 1, className, onInput, ...props }, ref) {
329
+ const innerRef = useRef(null);
330
+ useImperativeHandle(ref, () => innerRef.current);
331
+ const resize = useCallback(() => {
332
+ const el = innerRef.current;
333
+ if (!el) return;
334
+ el.style.height = "auto";
335
+ const maxHeight = (Number.parseFloat(getComputedStyle(el).lineHeight) || 21) * maxRows + 16;
336
+ const scrollHeight = el.scrollHeight;
337
+ if (scrollHeight > maxHeight) {
338
+ el.style.height = `${maxHeight}px`;
339
+ el.classList.add(overflowing);
340
+ } else {
341
+ el.style.height = `${scrollHeight}px`;
342
+ el.classList.remove(overflowing);
343
+ }
344
+ }, [maxRows]);
345
+ useEffect(() => {
346
+ resize();
347
+ }, [resize, props.value]);
348
+ return /* @__PURE__ */ jsx("textarea", {
349
+ className: `${textarea}${className ? ` ${className}` : ""}`,
350
+ ref: innerRef,
351
+ rows: minRows,
352
+ onInput: (e) => {
353
+ resize();
354
+ onInput?.(e);
355
+ },
356
+ ...props
357
+ });
358
+ });
359
+ //#endregion
360
+ //#region src/components/badge/styles.css.ts
361
+ var badge = createRuntimeFn({
362
+ defaultClassName: "_1vt0sm10",
363
+ variantClassNames: {
364
+ variant: {
365
+ neutral: "_1vt0sm11",
366
+ success: "_1vt0sm12",
367
+ error: "_1vt0sm13",
368
+ warning: "_1vt0sm14",
369
+ info: "_1vt0sm15"
370
+ },
371
+ size: {
372
+ sm: "_1vt0sm16",
373
+ md: "_1vt0sm17"
374
+ }
375
+ },
376
+ defaultVariants: {
377
+ variant: "neutral",
378
+ size: "sm"
379
+ },
380
+ compoundVariants: []
381
+ });
382
+ //#endregion
383
+ //#region src/components/badge/index.tsx
293
384
  function Badge({ variant, size, children, className }) {
294
- return /* @__PURE__ */ jsx("span", { className: `${badge({ variant, size })}${className ? ` ${className}` : ""}`, children });
295
- }
385
+ return /* @__PURE__ */ jsx("span", {
386
+ className: `${badge({
387
+ variant,
388
+ size
389
+ })}${className ? ` ${className}` : ""}`,
390
+ children
391
+ });
392
+ }
393
+ //#endregion
394
+ //#region src/components/checkbox/styles.css.ts
296
395
  var root = "_10muorc2";
297
- var rootDisabled = "_10muorc3";
298
396
  var box = "_10muorc4";
299
397
  var boxUnchecked = "_10muorc5";
300
398
  var boxChecked = "_10muorc6";
301
- var boxBouncing = "_10muorc7";
302
399
  var checkmark = "_10muorc8";
303
400
  var checkmarkVisible = "_10muorc9";
304
401
  var checkmarkHidden = "_10muorca";
305
402
  var ripple = "_10muorcb";
306
- var rippleActive = "_10muorcc";
307
- var labelArea = "_10muorcd";
308
- var label$1 = "_10muorce";
309
- var labelDisabled = "_10muorcf";
310
- var description$2 = "_10muorcg";
403
+ //#endregion
404
+ //#region src/components/checkbox/index.tsx
311
405
  function cx(...args) {
312
- return args.filter(Boolean).join(" ");
313
- }
314
- function AnimatedCheckbox({
315
- label: label2,
316
- description: description2,
317
- checked: controlledChecked,
318
- defaultChecked = false,
319
- onChange,
320
- disabled = false,
321
- className
322
- }) {
323
- const [internalChecked, setInternalChecked] = useState(defaultChecked);
324
- const [bouncing, setBouncing] = useState(false);
325
- const isControlled = controlledChecked !== void 0;
326
- const isChecked = isControlled ? controlledChecked : internalChecked;
327
- const isFirstRender = useRef(true);
328
- const rippleKey = useRef(0);
329
- useEffect(() => {
330
- if (isFirstRender.current) {
331
- isFirstRender.current = false;
332
- return;
333
- }
334
- setBouncing(true);
335
- rippleKey.current += 1;
336
- const timer = setTimeout(() => setBouncing(false), 400);
337
- return () => clearTimeout(timer);
338
- }, [isChecked]);
339
- const handleToggle = () => {
340
- if (disabled) return;
341
- const next = !isChecked;
342
- if (!isControlled) setInternalChecked(next);
343
- onChange?.(next);
344
- };
345
- return /* @__PURE__ */ jsxs(
346
- "button",
347
- {
348
- "aria-checked": isChecked,
349
- "aria-disabled": disabled,
350
- className: cx(root, disabled && rootDisabled, className),
351
- role: "checkbox",
352
- type: "button",
353
- onClick: handleToggle,
354
- children: [
355
- /* @__PURE__ */ jsxs(
356
- "span",
357
- {
358
- className: cx(
359
- box,
360
- isChecked ? boxChecked : boxUnchecked,
361
- bouncing && boxBouncing
362
- ),
363
- children: [
364
- /* @__PURE__ */ jsx(
365
- "svg",
366
- {
367
- className: cx(checkmark, isChecked ? checkmarkVisible : checkmarkHidden),
368
- fill: "none",
369
- viewBox: "0 0 12 10",
370
- children: /* @__PURE__ */ jsx(
371
- "path",
372
- {
373
- d: "M1 5.5L4 8.5L11 1.5",
374
- stroke: "currentColor",
375
- strokeLinecap: "round",
376
- strokeLinejoin: "round",
377
- strokeWidth: "2",
378
- style: {
379
- color: "#fff",
380
- strokeDasharray: 20,
381
- strokeDashoffset: isChecked ? 0 : 20,
382
- transition: isChecked ? "stroke-dashoffset 0.4s ease-out 0.1s" : "stroke-dashoffset 0.2s ease-in"
383
- }
384
- }
385
- )
386
- }
387
- ),
388
- /* @__PURE__ */ jsx("span", { className: cx(ripple, bouncing && rippleActive) }, rippleKey.current)
389
- ]
390
- }
391
- ),
392
- (label2 || description2) && /* @__PURE__ */ jsxs("span", { className: labelArea, children: [
393
- label2 && /* @__PURE__ */ jsx("span", { className: cx(label$1, disabled && labelDisabled), children: label2 }),
394
- description2 && /* @__PURE__ */ jsx("span", { className: description$2, children: description2 })
395
- ] })
396
- ]
397
- }
398
- );
399
- }
400
- const languageToColorMap = {
401
- javascript: "#f7df1e",
402
- js: "#f7df1e",
403
- typescript: "#3178c6",
404
- ts: "#3178c6",
405
- jsx: "#61dafb",
406
- tsx: "#61dafb",
407
- html: "#e34f26",
408
- css: "#1572b6",
409
- scss: "#cc6699",
410
- json: "#f59e0b",
411
- markdown: "#737373",
412
- md: "#737373",
413
- bash: "#4eaa25",
414
- sh: "#4eaa25",
415
- shell: "#4eaa25",
416
- zsh: "#4eaa25",
417
- python: "#3776ab",
418
- py: "#3776ab",
419
- rust: "#dea584",
420
- go: "#00add8",
421
- java: "#b07219",
422
- c: "#a8b9cc",
423
- cpp: "#00599c",
424
- "c++": "#00599c",
425
- swift: "#fa7343",
426
- kotlin: "#7f52ff",
427
- yaml: "#cb171e",
428
- yml: "#cb171e",
429
- sql: "#e38c00"
406
+ return args.filter(Boolean).join(" ");
407
+ }
408
+ function AnimatedCheckbox({ label, description, checked: controlledChecked, defaultChecked = false, onChange, disabled = false, className }) {
409
+ const [internalChecked, setInternalChecked] = useState(defaultChecked);
410
+ const [bouncing, setBouncing] = useState(false);
411
+ const isControlled = controlledChecked !== void 0;
412
+ const isChecked = isControlled ? controlledChecked : internalChecked;
413
+ const isFirstRender = useRef(true);
414
+ const rippleKey = useRef(0);
415
+ useEffect(() => {
416
+ if (isFirstRender.current) {
417
+ isFirstRender.current = false;
418
+ return;
419
+ }
420
+ setBouncing(true);
421
+ rippleKey.current += 1;
422
+ const timer = setTimeout(() => setBouncing(false), 400);
423
+ return () => clearTimeout(timer);
424
+ }, [isChecked]);
425
+ const handleToggle = () => {
426
+ if (disabled) return;
427
+ const next = !isChecked;
428
+ if (!isControlled) setInternalChecked(next);
429
+ onChange?.(next);
430
+ };
431
+ return /* @__PURE__ */ jsxs("button", {
432
+ "aria-checked": isChecked,
433
+ "aria-disabled": disabled,
434
+ className: cx(root, disabled && "_10muorc3", className),
435
+ role: "checkbox",
436
+ type: "button",
437
+ onClick: handleToggle,
438
+ children: [/* @__PURE__ */ jsxs("span", {
439
+ className: cx(box, isChecked ? boxChecked : boxUnchecked, bouncing && "_10muorc7"),
440
+ children: [/* @__PURE__ */ jsx("svg", {
441
+ className: cx(checkmark, isChecked ? checkmarkVisible : checkmarkHidden),
442
+ fill: "none",
443
+ viewBox: "0 0 12 10",
444
+ children: /* @__PURE__ */ jsx("path", {
445
+ d: "M1 5.5L4 8.5L11 1.5",
446
+ stroke: "currentColor",
447
+ strokeLinecap: "round",
448
+ strokeLinejoin: "round",
449
+ strokeWidth: "2",
450
+ style: {
451
+ color: "#fff",
452
+ strokeDasharray: 20,
453
+ strokeDashoffset: isChecked ? 0 : 20,
454
+ transition: isChecked ? "stroke-dashoffset 0.4s ease-out 0.1s" : "stroke-dashoffset 0.2s ease-in"
455
+ }
456
+ })
457
+ }), /* @__PURE__ */ jsx("span", { className: cx(ripple, bouncing && "_10muorcc") }, rippleKey.current)]
458
+ }), (label || description) && /* @__PURE__ */ jsxs("span", {
459
+ className: "_10muorcd",
460
+ children: [label && /* @__PURE__ */ jsx("span", {
461
+ className: cx("_10muorce", disabled && "_10muorcf"),
462
+ children: label
463
+ }), description && /* @__PURE__ */ jsx("span", {
464
+ className: "_10muorcg",
465
+ children: description
466
+ })]
467
+ })]
468
+ });
469
+ }
470
+ //#endregion
471
+ //#region src/components/code-block/constants.ts
472
+ var languageToColorMap = {
473
+ javascript: "#f7df1e",
474
+ js: "#f7df1e",
475
+ typescript: "#3178c6",
476
+ ts: "#3178c6",
477
+ jsx: "#61dafb",
478
+ tsx: "#61dafb",
479
+ html: "#e34f26",
480
+ css: "#1572b6",
481
+ scss: "#cc6699",
482
+ json: "#f59e0b",
483
+ markdown: "#737373",
484
+ md: "#737373",
485
+ bash: "#4eaa25",
486
+ sh: "#4eaa25",
487
+ shell: "#4eaa25",
488
+ zsh: "#4eaa25",
489
+ python: "#3776ab",
490
+ py: "#3776ab",
491
+ rust: "#dea584",
492
+ go: "#00add8",
493
+ java: "#b07219",
494
+ c: "#a8b9cc",
495
+ cpp: "#00599c",
496
+ "c++": "#00599c",
497
+ swift: "#fa7343",
498
+ kotlin: "#7f52ff",
499
+ yaml: "#cb171e",
500
+ yml: "#cb171e",
501
+ sql: "#e38c00"
430
502
  };
431
- function normalizeLanguage(lang2) {
432
- if (!lang2) return "text";
433
- return lang2.trim().toLowerCase() || "text";
503
+ function normalizeLanguage(lang) {
504
+ if (!lang) return "text";
505
+ return lang.trim().toLowerCase() || "text";
434
506
  }
435
- function getLanguageDisplayName(lang2) {
436
- if (lang2 === "text") return "TEXT";
437
- return lang2.toUpperCase();
507
+ function getLanguageDisplayName(lang) {
508
+ if (lang === "text") return "TEXT";
509
+ return lang.toUpperCase();
438
510
  }
511
+ //#endregion
512
+ //#region src/components/code-block/styles.css.ts
439
513
  var card = "_1gq8hf90";
440
- var lang = "_1gq8hf91";
441
- var copyButton = "_1gq8hf92";
442
514
  var bodyBackground = "_1gq8hf93";
443
515
  var bodyBackgroundStatic = "_1gq8hf94 _1gq8hf93";
444
516
  var scroll = "_1gq8hf95";
445
- var scrollCollapsed = "_1gq8hf96";
446
- var expandWrap = "_1gq8hf97";
447
- var expandButton = "_1gq8hf98";
448
- var lined = "_1gq8hf99";
449
- var linedWithNumbers = "_1gq8hf9a";
450
- const CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
451
- const CheckIcon$1 = /* @__PURE__ */ jsx(Check, { size: 16 });
452
- const ExpandIcon = /* @__PURE__ */ jsx(ChevronDown, { size: 14 });
453
- function CodeBlockCard({
454
- children,
455
- className,
456
- code,
457
- collapsible = true,
458
- language,
459
- showCopyButton = true,
460
- static: staticMode = false
461
- }) {
462
- const normalizedLanguage = normalizeLanguage(language);
463
- const languageLabel = getLanguageDisplayName(normalizedLanguage);
464
- const accent = languageToColorMap[normalizedLanguage] || "#737373";
465
- const [copied, setCopied] = useState(false);
466
- const copyTimerRef = useRef(void 0);
467
- const [isCollapsed, setIsCollapsed] = useState(true);
468
- const [isOverflow, setIsOverflow] = useState(false);
469
- const scrollRef = useRef(null);
470
- useEffect(() => {
471
- if (!collapsible) {
472
- setIsOverflow(false);
473
- return;
474
- }
475
- const el = scrollRef.current;
476
- if (!el) return;
477
- const check = () => {
478
- const halfVh = window.innerHeight / 2;
479
- setIsOverflow(el.scrollHeight >= halfVh);
480
- };
481
- const raf = requestAnimationFrame(check);
482
- return () => cancelAnimationFrame(raf);
483
- }, [children, code, collapsible]);
484
- useEffect(() => () => clearTimeout(copyTimerRef.current), []);
485
- const handleCopy = useCallback(() => {
486
- navigator.clipboard.writeText(code).then(() => {
487
- setCopied(true);
488
- clearTimeout(copyTimerRef.current);
489
- copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
490
- }).catch(() => {
491
- });
492
- }, [code]);
493
- const cardStyle = useMemo(() => ({ "--rr-code-accent": accent }), [accent]);
494
- const scrollClassName = [
495
- scroll,
496
- collapsible && isCollapsed && isOverflow && scrollCollapsed
497
- ].filter(Boolean).join(" ");
498
- return /* @__PURE__ */ jsxs(
499
- "div",
500
- {
501
- className: `${card}${className ? ` ${className}` : ""}`,
502
- style: cardStyle,
503
- children: [
504
- language && normalizedLanguage !== "text" && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: lang, children: /* @__PURE__ */ jsx("span", { children: languageLabel }) }),
505
- showCopyButton && /* @__PURE__ */ jsx(
506
- "button",
507
- {
508
- "aria-label": copied ? "Copied" : "Copy code",
509
- className: copyButton,
510
- type: "button",
511
- onClick: handleCopy,
512
- children: copied ? CheckIcon$1 : CopyIcon
513
- }
514
- ),
515
- /* @__PURE__ */ jsxs("div", { className: staticMode ? bodyBackgroundStatic : bodyBackground, children: [
516
- /* @__PURE__ */ jsx("div", { className: scrollClassName, ref: scrollRef, children }),
517
- collapsible && isOverflow && isCollapsed && /* @__PURE__ */ jsx("div", { className: expandWrap, children: /* @__PURE__ */ jsxs(
518
- "button",
519
- {
520
- className: expandButton,
521
- type: "button",
522
- onClick: () => setIsCollapsed(false),
523
- children: [
524
- ExpandIcon,
525
- /* @__PURE__ */ jsx("span", { children: "Expand" })
526
- ]
527
- }
528
- ) })
529
- ] })
530
- ]
531
- }
532
- );
533
- }
534
- let highlighterPromise = null;
517
+ //#endregion
518
+ //#region src/components/code-block/CodeBlockCard.tsx
519
+ var CopyIcon = /* @__PURE__ */ jsx(Copy, { size: 16 });
520
+ var CheckIcon$1 = /* @__PURE__ */ jsx(Check, { size: 16 });
521
+ var ExpandIcon = /* @__PURE__ */ jsx(ChevronDown, { size: 14 });
522
+ function CodeBlockCard({ children, className, code, collapsible = true, language, showCopyButton = true, static: staticMode = false }) {
523
+ const normalizedLanguage = normalizeLanguage(language);
524
+ const languageLabel = getLanguageDisplayName(normalizedLanguage);
525
+ const accent = languageToColorMap[normalizedLanguage] || "#737373";
526
+ const [copied, setCopied] = useState(false);
527
+ const copyTimerRef = useRef(void 0);
528
+ const [isCollapsed, setIsCollapsed] = useState(true);
529
+ const [isOverflow, setIsOverflow] = useState(false);
530
+ const scrollRef = useRef(null);
531
+ useEffect(() => {
532
+ if (!collapsible) {
533
+ setIsOverflow(false);
534
+ return;
535
+ }
536
+ const el = scrollRef.current;
537
+ if (!el) return;
538
+ const check = () => {
539
+ const halfVh = window.innerHeight / 2;
540
+ setIsOverflow(el.scrollHeight >= halfVh);
541
+ };
542
+ const raf = requestAnimationFrame(check);
543
+ return () => cancelAnimationFrame(raf);
544
+ }, [
545
+ children,
546
+ code,
547
+ collapsible
548
+ ]);
549
+ useEffect(() => () => clearTimeout(copyTimerRef.current), []);
550
+ const handleCopy = useCallback(() => {
551
+ navigator.clipboard.writeText(code).then(() => {
552
+ setCopied(true);
553
+ clearTimeout(copyTimerRef.current);
554
+ copyTimerRef.current = setTimeout(() => setCopied(false), 2e3);
555
+ }).catch(() => {});
556
+ }, [code]);
557
+ const cardStyle = useMemo(() => ({ "--rr-code-accent": accent }), [accent]);
558
+ const scrollClassName = [scroll, collapsible && isCollapsed && isOverflow && "_1gq8hf96"].filter(Boolean).join(" ");
559
+ return /* @__PURE__ */ jsxs("div", {
560
+ className: `${card}${className ? ` ${className}` : ""}`,
561
+ style: cardStyle,
562
+ children: [
563
+ language && normalizedLanguage !== "text" && /* @__PURE__ */ jsx("div", {
564
+ "aria-hidden": true,
565
+ className: "_1gq8hf91",
566
+ children: /* @__PURE__ */ jsx("span", { children: languageLabel })
567
+ }),
568
+ showCopyButton && /* @__PURE__ */ jsx("button", {
569
+ "aria-label": copied ? "Copied" : "Copy code",
570
+ className: "_1gq8hf92",
571
+ type: "button",
572
+ onClick: handleCopy,
573
+ children: copied ? CheckIcon$1 : CopyIcon
574
+ }),
575
+ /* @__PURE__ */ jsxs("div", {
576
+ className: staticMode ? bodyBackgroundStatic : bodyBackground,
577
+ children: [/* @__PURE__ */ jsx("div", {
578
+ className: scrollClassName,
579
+ ref: scrollRef,
580
+ children
581
+ }), collapsible && isOverflow && isCollapsed && /* @__PURE__ */ jsx("div", {
582
+ className: "_1gq8hf97",
583
+ children: /* @__PURE__ */ jsxs("button", {
584
+ className: "_1gq8hf98",
585
+ type: "button",
586
+ onClick: () => setIsCollapsed(false),
587
+ children: [ExpandIcon, /* @__PURE__ */ jsx("span", { children: "Expand" })]
588
+ })
589
+ })]
590
+ })
591
+ ]
592
+ });
593
+ }
594
+ //#endregion
595
+ //#region src/components/code-block/shiki.ts
596
+ var highlighterPromise = null;
535
597
  function getHighlighter() {
536
- if (!highlighterPromise) {
537
- highlighterPromise = import("shiki/bundle/web").then(
538
- (mod) => mod.createHighlighter({
539
- langs: [],
540
- themes: ["github-light", "github-dark"]
541
- })
542
- );
543
- }
544
- return highlighterPromise;
598
+ if (!highlighterPromise) highlighterPromise = import("shiki/bundle/web").then((mod) => mod.createHighlighter({
599
+ langs: [],
600
+ themes: ["github-light", "github-dark"]
601
+ }));
602
+ return highlighterPromise;
545
603
  }
546
604
  async function getHighlighterWithLang(language) {
547
- const highlighter = await getHighlighter();
548
- if (language && language !== "text" && language !== "plaintext") {
549
- const loaded = highlighter.getLoadedLanguages();
550
- if (!loaded.includes(language)) {
551
- try {
552
- await highlighter.loadLanguage(language);
553
- } catch {
554
- }
555
- }
556
- }
557
- return highlighter;
558
- }
559
- const SHIKI_DUAL_THEMES = {
560
- light: "github-light",
561
- dark: "github-dark"
605
+ const highlighter = await getHighlighter();
606
+ if (language && language !== "text" && language !== "plaintext") {
607
+ if (!highlighter.getLoadedLanguages().includes(language)) try {
608
+ await highlighter.loadLanguage(language);
609
+ } catch {}
610
+ }
611
+ return highlighter;
612
+ }
613
+ var SHIKI_DUAL_THEMES = {
614
+ light: "github-light",
615
+ dark: "github-dark"
562
616
  };
563
- function CodeBlock({
564
- className,
565
- collapsible = true,
566
- code,
567
- language,
568
- showCopyButton = true,
569
- showLineNumbers = false
570
- }) {
571
- const normalizedLanguage = normalizeLanguage(language);
572
- const [html, setHtml] = useState(null);
573
- useEffect(() => {
574
- let cancelled = false;
575
- setHtml(null);
576
- (async () => {
577
- const highlighter = await getHighlighterWithLang(normalizedLanguage);
578
- if (cancelled) return;
579
- const loaded = highlighter.getLoadedLanguages();
580
- const lang2 = loaded.includes(normalizedLanguage) ? normalizedLanguage : "text";
581
- const result = highlighter.codeToHtml(code, {
582
- lang: lang2,
583
- themes: SHIKI_DUAL_THEMES
584
- });
585
- if (!cancelled) {
586
- setHtml(result);
587
- }
588
- })();
589
- return () => {
590
- cancelled = true;
591
- };
592
- }, [code, normalizedLanguage]);
593
- const fallbackLines = useMemo(() => code.split("\n"), [code]);
594
- const linedClassName = [
595
- showLineNumbers && lined,
596
- showLineNumbers && linedWithNumbers
597
- ].filter(Boolean).join(" ");
598
- return /* @__PURE__ */ jsx(
599
- CodeBlockCard,
600
- {
601
- className,
602
- code,
603
- collapsible,
604
- language,
605
- showCopyButton,
606
- static: true,
607
- children: html ? /* @__PURE__ */ jsx("div", { className: linedClassName, dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx("pre", { className: linedClassName, children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) }) })
608
- }
609
- );
610
- }
617
+ //#endregion
618
+ //#region src/components/code-block/index.tsx
619
+ function CodeBlock({ className, collapsible = true, code, language, showCopyButton = true, showLineNumbers = false }) {
620
+ const normalizedLanguage = normalizeLanguage(language);
621
+ const [html, setHtml] = useState(null);
622
+ useEffect(() => {
623
+ let cancelled = false;
624
+ setHtml(null);
625
+ (async () => {
626
+ const highlighter = await getHighlighterWithLang(normalizedLanguage);
627
+ if (cancelled) return;
628
+ const lang = highlighter.getLoadedLanguages().includes(normalizedLanguage) ? normalizedLanguage : "text";
629
+ const result = highlighter.codeToHtml(code, {
630
+ lang,
631
+ themes: SHIKI_DUAL_THEMES
632
+ });
633
+ if (!cancelled) setHtml(result);
634
+ })();
635
+ return () => {
636
+ cancelled = true;
637
+ };
638
+ }, [code, normalizedLanguage]);
639
+ const fallbackLines = useMemo(() => code.split("\n"), [code]);
640
+ const linedClassName = [showLineNumbers && "_1gq8hf99", showLineNumbers && "_1gq8hf9a"].filter(Boolean).join(" ");
641
+ return /* @__PURE__ */ jsx(CodeBlockCard, {
642
+ className,
643
+ code,
644
+ collapsible,
645
+ language,
646
+ showCopyButton,
647
+ static: true,
648
+ children: html ? /* @__PURE__ */ jsx("div", {
649
+ className: linedClassName,
650
+ dangerouslySetInnerHTML: { __html: html }
651
+ }) : /* @__PURE__ */ jsx("pre", {
652
+ className: linedClassName,
653
+ children: /* @__PURE__ */ jsx("code", { children: fallbackLines.map((line, i) => /* @__PURE__ */ jsx("span", {
654
+ className: "line",
655
+ children: line
656
+ }, i)) })
657
+ })
658
+ });
659
+ }
660
+ //#endregion
661
+ //#region src/components/collapsible/styles.css.ts
611
662
  var trigger$1 = "_1hdi6a90";
612
- var chevron = "_1hdi6a91";
613
663
  var panel$1 = "_1hdi6a92";
664
+ //#endregion
665
+ //#region src/components/collapsible/index.tsx
614
666
  function Collapsible(props) {
615
- return /* @__PURE__ */ jsx(Collapsible$1.Root, { ...props });
616
- }
617
- function CollapsibleTrigger({
618
- children,
619
- className,
620
- hideChevron,
621
- ...props
622
- }) {
623
- return /* @__PURE__ */ jsxs(
624
- Collapsible$1.Trigger,
625
- {
626
- ...props,
627
- className: `${trigger$1}${className ? ` ${className}` : ""}`,
628
- children: [
629
- !hideChevron && /* @__PURE__ */ jsx(ChevronRight, { className: chevron }),
630
- children
631
- ]
632
- }
633
- );
634
- }
635
- function CollapsiblePanel({
636
- children,
637
- className,
638
- ...props
639
- }) {
640
- return /* @__PURE__ */ jsx(
641
- Collapsible$1.Panel,
642
- {
643
- ...props,
644
- className: `${panel$1}${className ? ` ${className}` : ""}`,
645
- children
646
- }
647
- );
648
- }
667
+ return /* @__PURE__ */ jsx(Collapsible$1.Root, { ...props });
668
+ }
669
+ function CollapsibleTrigger({ children, className, hideChevron, ...props }) {
670
+ return /* @__PURE__ */ jsxs(Collapsible$1.Trigger, {
671
+ ...props,
672
+ className: `${trigger$1}${className ? ` ${className}` : ""}`,
673
+ children: [!hideChevron && /* @__PURE__ */ jsx(ChevronRight, { className: "_1hdi6a91" }), children]
674
+ });
675
+ }
676
+ function CollapsiblePanel({ children, className, ...props }) {
677
+ return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
678
+ ...props,
679
+ className: `${panel$1}${className ? ` ${className}` : ""}`,
680
+ children
681
+ });
682
+ }
683
+ //#endregion
684
+ //#region src/lib/get-strict-context.tsx
649
685
  function getStrictContext(name) {
650
- const Context = createContext(void 0);
651
- const Provider = ({
652
- value,
653
- children
654
- }) => /* @__PURE__ */ jsx(Context.Provider, { value, children });
655
- const useSafeContext = () => {
656
- const ctx = use(Context);
657
- if (ctx === void 0) {
658
- throw new Error(`useContext must be used within ${name}`);
659
- }
660
- return ctx;
661
- };
662
- return [Provider, useSafeContext];
663
- }
686
+ const Context = createContext(void 0);
687
+ const Provider = ({ value, children }) => /* @__PURE__ */ jsx(Context.Provider, {
688
+ value,
689
+ children
690
+ });
691
+ const useSafeContext = () => {
692
+ const ctx = use(Context);
693
+ if (ctx === void 0) throw new Error(`useContext must be used within ${name ?? "a Provider"}`);
694
+ return ctx;
695
+ };
696
+ return [Provider, useSafeContext];
697
+ }
698
+ //#endregion
699
+ //#region src/components/popover/styles.css.ts
664
700
  var popup$5 = "f2q44l2";
665
701
  var arrow = "f2q44l3";
666
702
  var title$1 = "f2q44l4";
667
703
  var description$1 = "f2q44l5";
668
- const [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
704
+ //#endregion
705
+ //#region src/components/popover/index.tsx
706
+ var [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
669
707
  function Popover(props) {
670
- const [isOpen, setIsOpen] = useState(props?.defaultOpen ?? false);
671
- useEffect(() => {
672
- if (props.open !== void 0) setIsOpen(props.open);
673
- }, [props.open]);
674
- const handleOpenChange = (open, details) => {
675
- setIsOpen(open);
676
- props.onOpenChange?.(open, details);
677
- };
678
- return /* @__PURE__ */ jsx(PopoverProvider, { value: { isOpen }, children: /* @__PURE__ */ jsx(Popover$1.Root, { ...props, onOpenChange: handleOpenChange }) });
708
+ const [isOpen, setIsOpen] = useState(props?.defaultOpen ?? false);
709
+ useEffect(() => {
710
+ if (props.open !== void 0) setIsOpen(props.open);
711
+ }, [props.open]);
712
+ const handleOpenChange = (open, details) => {
713
+ setIsOpen(open);
714
+ props.onOpenChange?.(open, details);
715
+ };
716
+ return /* @__PURE__ */ jsx(PopoverProvider, {
717
+ value: { isOpen },
718
+ children: /* @__PURE__ */ jsx(Popover$1.Root, {
719
+ ...props,
720
+ onOpenChange: handleOpenChange
721
+ })
722
+ });
679
723
  }
680
724
  function PopoverTrigger(props) {
681
- return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props });
725
+ return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props });
682
726
  }
683
727
  function PopoverPortal({ children, ...props }) {
684
- return /* @__PURE__ */ jsx(Popover$1.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
728
+ return /* @__PURE__ */ jsx(Popover$1.Portal, {
729
+ ...props,
730
+ children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
731
+ });
685
732
  }
686
733
  function PopoverPositioner(props) {
687
- return /* @__PURE__ */ jsx(Popover$1.Positioner, { ...props });
688
- }
689
- function PopoverPopup({
690
- className,
691
- children,
692
- ...props
693
- }) {
694
- return /* @__PURE__ */ jsx(
695
- Popover$1.Popup,
696
- {
697
- className: `${popup$5}${className ? ` ${className}` : ""}`,
698
- ...props,
699
- children
700
- }
701
- );
702
- }
703
- function PopoverPanel({
704
- align = "center",
705
- side,
706
- sideOffset = 4,
707
- className,
708
- children,
709
- ...popupProps
710
- }) {
711
- return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, { align, side, sideOffset, children: /* @__PURE__ */ jsx(PopoverPopup, { className, ...popupProps, children }) }) });
734
+ return /* @__PURE__ */ jsx(Popover$1.Positioner, { ...props });
735
+ }
736
+ function PopoverPopup({ className, children, ...props }) {
737
+ return /* @__PURE__ */ jsx(Popover$1.Popup, {
738
+ className: `${popup$5}${className ? ` ${className}` : ""}`,
739
+ ...props,
740
+ children
741
+ });
742
+ }
743
+ function PopoverPanel({ align = "center", side, sideOffset = 4, className, children, ...popupProps }) {
744
+ return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
745
+ align,
746
+ side,
747
+ sideOffset,
748
+ children: /* @__PURE__ */ jsx(PopoverPopup, {
749
+ className,
750
+ ...popupProps,
751
+ children
752
+ })
753
+ }) });
712
754
  }
713
755
  function PopoverArrow({ className, ...props }) {
714
- return /* @__PURE__ */ jsx(
715
- Popover$1.Arrow,
716
- {
717
- className: `${arrow}${className ? ` ${className}` : ""}`,
718
- ...props
719
- }
720
- );
756
+ return /* @__PURE__ */ jsx(Popover$1.Arrow, {
757
+ className: `${arrow}${className ? ` ${className}` : ""}`,
758
+ ...props
759
+ });
721
760
  }
722
761
  function PopoverClose(props) {
723
- return /* @__PURE__ */ jsx(Popover$1.Close, { ...props });
762
+ return /* @__PURE__ */ jsx(Popover$1.Close, { ...props });
724
763
  }
725
764
  function PopoverTitle({ className, ...props }) {
726
- return /* @__PURE__ */ jsx(
727
- Popover$1.Title,
728
- {
729
- className: `${title$1}${className ? ` ${className}` : ""}`,
730
- ...props
731
- }
732
- );
733
- }
734
- function PopoverDescription({
735
- className,
736
- ...props
737
- }) {
738
- return /* @__PURE__ */ jsx(
739
- Popover$1.Description,
740
- {
741
- className: `${description$1}${className ? ` ${className}` : ""}`,
742
- ...props
743
- }
744
- );
745
- }
746
- const clamp = (n, min, max) => n < min ? min : n > max ? max : n;
747
- const to255 = (n) => Math.round(clamp(n, 0, 1) * 255);
748
- const pad2 = (n) => n.toString(16).padStart(2, "0");
765
+ return /* @__PURE__ */ jsx(Popover$1.Title, {
766
+ className: `${title$1}${className ? ` ${className}` : ""}`,
767
+ ...props
768
+ });
769
+ }
770
+ function PopoverDescription({ className, ...props }) {
771
+ return /* @__PURE__ */ jsx(Popover$1.Description, {
772
+ className: `${description$1}${className ? ` ${className}` : ""}`,
773
+ ...props
774
+ });
775
+ }
776
+ //#endregion
777
+ //#region src/components/color-picker/color-math.ts
778
+ var clamp = (n, min, max) => n < min ? min : n > max ? max : n;
779
+ var to255 = (n) => Math.round(clamp(n, 0, 1) * 255);
780
+ var pad2 = (n) => n.toString(16).padStart(2, "0");
749
781
  function hsvToRgb(h, s, v) {
750
- const hh = (h % 360 + 360) % 360 / 60;
751
- const ss = clamp(s, 0, 1);
752
- const vv = clamp(v, 0, 1);
753
- const c = vv * ss;
754
- const x = c * (1 - Math.abs(hh % 2 - 1));
755
- const m = vv - c;
756
- let r;
757
- let g;
758
- let b;
759
- if (hh < 1) [r, g, b] = [c, x, 0];
760
- else if (hh < 2) [r, g, b] = [x, c, 0];
761
- else if (hh < 3) [r, g, b] = [0, c, x];
762
- else if (hh < 4) [r, g, b] = [0, x, c];
763
- else if (hh < 5) [r, g, b] = [x, 0, c];
764
- else [r, g, b] = [c, 0, x];
765
- return { r: r + m, g: g + m, b: b + m };
782
+ const hh = (h % 360 + 360) % 360 / 60;
783
+ const ss = clamp(s, 0, 1);
784
+ const vv = clamp(v, 0, 1);
785
+ const c = vv * ss;
786
+ const x = c * (1 - Math.abs(hh % 2 - 1));
787
+ const m = vv - c;
788
+ let r;
789
+ let g;
790
+ let b;
791
+ if (hh < 1) [r, g, b] = [
792
+ c,
793
+ x,
794
+ 0
795
+ ];
796
+ else if (hh < 2) [r, g, b] = [
797
+ x,
798
+ c,
799
+ 0
800
+ ];
801
+ else if (hh < 3) [r, g, b] = [
802
+ 0,
803
+ c,
804
+ x
805
+ ];
806
+ else if (hh < 4) [r, g, b] = [
807
+ 0,
808
+ x,
809
+ c
810
+ ];
811
+ else if (hh < 5) [r, g, b] = [
812
+ x,
813
+ 0,
814
+ c
815
+ ];
816
+ else [r, g, b] = [
817
+ c,
818
+ 0,
819
+ x
820
+ ];
821
+ return {
822
+ r: r + m,
823
+ g: g + m,
824
+ b: b + m
825
+ };
766
826
  }
767
827
  function rgbToHsv(r, g, b) {
768
- const max = Math.max(r, g, b);
769
- const min = Math.min(r, g, b);
770
- const d = max - min;
771
- const v = max;
772
- const s = max === 0 ? 0 : d / max;
773
- let h = 0;
774
- if (d !== 0) {
775
- if (max === r) h = (g - b) / d % 6;
776
- else if (max === g) h = (b - r) / d + 2;
777
- else h = (r - g) / d + 4;
778
- h *= 60;
779
- if (h < 0) h += 360;
780
- }
781
- return { h, s, v };
828
+ const max = Math.max(r, g, b);
829
+ const d = max - Math.min(r, g, b);
830
+ const v = max;
831
+ const s = max === 0 ? 0 : d / max;
832
+ let h = 0;
833
+ if (d !== 0) {
834
+ if (max === r) h = (g - b) / d % 6;
835
+ else if (max === g) h = (b - r) / d + 2;
836
+ else h = (r - g) / d + 4;
837
+ h *= 60;
838
+ if (h < 0) h += 360;
839
+ }
840
+ return {
841
+ h,
842
+ s,
843
+ v
844
+ };
782
845
  }
783
846
  function hsvaToHex(hsva) {
784
- const { r, g, b } = hsvToRgb(hsva.h, hsva.s, hsva.v);
785
- const hex = `#${pad2(to255(r))}${pad2(to255(g))}${pad2(to255(b))}`;
786
- return hsva.a < 1 ? `${hex}${pad2(to255(hsva.a))}` : hex;
847
+ const { r, g, b } = hsvToRgb(hsva.h, hsva.s, hsva.v);
848
+ const hex = `#${pad2(to255(r))}${pad2(to255(g))}${pad2(to255(b))}`;
849
+ return hsva.a < 1 ? `${hex}${pad2(to255(hsva.a))}` : hex;
787
850
  }
788
851
  function parseHex(input) {
789
- let s = input.trim().replace(/^#/, "");
790
- if (!/^[\da-f]+$/i.test(s)) return null;
791
- if (s.length === 3 || s.length === 4) {
792
- s = s.split("").map((c) => c + c).join("");
793
- }
794
- if (s.length !== 6 && s.length !== 8) return null;
795
- const r = Number.parseInt(s.slice(0, 2), 16) / 255;
796
- const g = Number.parseInt(s.slice(2, 4), 16) / 255;
797
- const b = Number.parseInt(s.slice(4, 6), 16) / 255;
798
- const a = s.length === 8 ? Number.parseInt(s.slice(6, 8), 16) / 255 : 1;
799
- return { r, g, b, a };
852
+ let s = input.trim().replace(/^#/, "");
853
+ if (!/^[\da-f]+$/i.test(s)) return null;
854
+ if (s.length === 3 || s.length === 4) s = s.split("").map((c) => c + c).join("");
855
+ if (s.length !== 6 && s.length !== 8) return null;
856
+ return {
857
+ r: Number.parseInt(s.slice(0, 2), 16) / 255,
858
+ g: Number.parseInt(s.slice(2, 4), 16) / 255,
859
+ b: Number.parseInt(s.slice(4, 6), 16) / 255,
860
+ a: s.length === 8 ? Number.parseInt(s.slice(6, 8), 16) / 255 : 1
861
+ };
800
862
  }
801
863
  function hexToHsva(input) {
802
- const rgba = parseHex(input);
803
- if (!rgba) return null;
804
- const { h, s, v } = rgbToHsv(rgba.r, rgba.g, rgba.b);
805
- return { h, s, v, a: rgba.a };
864
+ const rgba = parseHex(input);
865
+ if (!rgba) return null;
866
+ const { h, s, v } = rgbToHsv(rgba.r, rgba.g, rgba.b);
867
+ return {
868
+ h,
869
+ s,
870
+ v,
871
+ a: rgba.a
872
+ };
806
873
  }
807
874
  function huePreviewHex(h) {
808
- return hsvaToHex({ h, s: 1, v: 1, a: 1 });
809
- }
875
+ return hsvaToHex({
876
+ h,
877
+ s: 1,
878
+ v: 1,
879
+ a: 1
880
+ });
881
+ }
882
+ //#endregion
883
+ //#region src/components/color-picker/styles.css.ts
810
884
  var trigger = "_17r50hf1";
811
885
  var triggerLabel = "_17r50hf2";
812
886
  var triggerLetter = "_17r50hf3";
@@ -816,7 +890,6 @@ var panel = "_17r50hf6";
816
890
  var grid = "_17r50hf7";
817
891
  var swatch = "_17r50hf8";
818
892
  var swatchDot = "_17r50hf9";
819
- var swatchCheck = "_17r50hfa";
820
893
  var addSwatchDot = "_17r50hfb";
821
894
  var addSwatchIcon = "_17r50hfc";
822
895
  var pickerView = "_17r50hfd";
@@ -833,402 +906,423 @@ var sliderThumb = "_17r50hfn";
833
906
  var hexRow = "_17r50hfo";
834
907
  var hexInput = "_17r50hfp";
835
908
  var hexInputInvalid = "_17r50hfq";
836
- var iconButton = "_17r50hfr";
837
- var icon = "_17r50hfs";
838
909
  var previewPair = "_17r50hft";
839
910
  var previewCell = "_17r50hfu";
840
911
  var actionRow = "_17r50hfv";
841
912
  var actionButton = "_17r50hfw";
842
913
  var actionButtonPrimary = "_17r50hfx";
843
- const FALLBACK = { h: 0, s: 0, v: 0, a: 1 };
914
+ //#endregion
915
+ //#region src/components/color-picker/picker-view.tsx
916
+ var FALLBACK = {
917
+ h: 0,
918
+ s: 0,
919
+ v: 0,
920
+ a: 1
921
+ };
844
922
  function seedHsva(input) {
845
- if (!input || input === "inherit" || input === "currentColor") return FALLBACK;
846
- return hexToHsva(input) ?? FALLBACK;
923
+ if (!input || input === "inherit" || input === "currentColor") return FALLBACK;
924
+ return hexToHsva(input) ?? FALLBACK;
847
925
  }
848
926
  function PickerView({ initialColor, onApply, onCancel, onBack }) {
849
- const [hsva, setHsva] = useState(() => seedHsva(initialColor));
850
- const [hexDraft, setHexDraft] = useState(() => hsvaToHex(seedHsva(initialColor)));
851
- const [hexInvalid, setHexInvalid] = useState(false);
852
- const [hasEyeDropper, setHasEyeDropper] = useState(false);
853
- const oldColorRef = useRef(initialColor);
854
- const satRef = useRef(null);
855
- const hueRef = useRef(null);
856
- const alphaRef = useRef(null);
857
- useEffect(() => {
858
- setHasEyeDropper(
859
- typeof window !== "undefined" && "EyeDropper" in window
860
- );
861
- }, []);
862
- useEffect(() => {
863
- if (document.activeElement?.tagName !== "INPUT") {
864
- setHexDraft(hsvaToHex(hsva));
865
- setHexInvalid(false);
866
- }
867
- }, [hsva]);
868
- const currentHex = hsvaToHex(hsva);
869
- const updateFromPointer = (target, ev) => {
870
- const el = target === "sat" ? satRef.current : target === "hue" ? hueRef.current : alphaRef.current;
871
- if (!el) return;
872
- const rect = el.getBoundingClientRect();
873
- const x = clamp((ev.clientX - rect.left) / rect.width, 0, 1);
874
- const y = clamp((ev.clientY - rect.top) / rect.height, 0, 1);
875
- setHsva((prev) => {
876
- if (target === "sat") return { ...prev, s: x, v: 1 - y };
877
- if (target === "hue") return { ...prev, h: x * 360 };
878
- return { ...prev, a: x };
879
- });
880
- };
881
- const startDrag = (target) => (ev) => {
882
- ev.preventDefault();
883
- ev.currentTarget.setPointerCapture(ev.pointerId);
884
- updateFromPointer(target, ev);
885
- };
886
- const onMove = (target) => (ev) => {
887
- if (ev.buttons === 0) return;
888
- updateFromPointer(target, ev);
889
- };
890
- const onHexChange = (value) => {
891
- setHexDraft(value);
892
- const parsed = parseHex(value);
893
- if (!parsed) {
894
- setHexInvalid(true);
895
- return;
896
- }
897
- setHexInvalid(false);
898
- const { h, s, v } = rgbToHsv(parsed.r, parsed.g, parsed.b);
899
- setHsva({ h, s, v, a: parsed.a });
900
- };
901
- const onHexBlur = () => {
902
- if (hexInvalid) {
903
- setHexDraft(currentHex);
904
- setHexInvalid(false);
905
- }
906
- };
907
- const openEyeDropper = async () => {
908
- const Ctor = window.EyeDropper;
909
- if (!Ctor) return;
910
- try {
911
- const result = await new Ctor().open();
912
- const parsed = parseHex(result.sRGBHex);
913
- if (!parsed) return;
914
- const { h, s, v } = rgbToHsv(parsed.r, parsed.g, parsed.b);
915
- setHsva((prev) => ({ h, s, v, a: prev.a }));
916
- } catch {
917
- }
918
- };
919
- const handleApply = () => onApply(currentHex);
920
- const hueHex = huePreviewHex(hsva.h);
921
- const previewNewCss = hsvaToHex(hsva);
922
- const previewOldCss = oldColorRef.current === "inherit" || !oldColorRef.current ? "transparent" : oldColorRef.current;
923
- return /* @__PURE__ */ jsxs("div", { className: pickerView, children: [
924
- /* @__PURE__ */ jsxs(
925
- "button",
926
- {
927
- "aria-label": "Back to presets",
928
- className: backButton,
929
- type: "button",
930
- onClick: onBack,
931
- onMouseDown: (e) => e.preventDefault(),
932
- children: [
933
- /* @__PURE__ */ jsx(ArrowLeft, { className: backIcon }),
934
- /* @__PURE__ */ jsx("span", { children: "Back" })
935
- ]
936
- }
937
- ),
938
- /* @__PURE__ */ jsxs(
939
- "div",
940
- {
941
- className: satSquare,
942
- ref: satRef,
943
- style: { backgroundColor: hueHex },
944
- onPointerDown: startDrag("sat"),
945
- onPointerMove: onMove("sat"),
946
- children: [
947
- /* @__PURE__ */ jsx("div", { className: satOverlayX }),
948
- /* @__PURE__ */ jsx("div", { className: satOverlayY }),
949
- /* @__PURE__ */ jsx(
950
- "div",
951
- {
952
- className: satThumb,
953
- style: {
954
- left: `${hsva.s * 100}%`,
955
- top: `${(1 - hsva.v) * 100}%`,
956
- backgroundColor: hsvaToHex({ ...hsva, a: 1 })
957
- }
958
- }
959
- )
960
- ]
961
- }
962
- ),
963
- /* @__PURE__ */ jsx(
964
- "div",
965
- {
966
- className: hueTrack,
967
- ref: hueRef,
968
- onPointerDown: startDrag("hue"),
969
- onPointerMove: onMove("hue"),
970
- children: /* @__PURE__ */ jsx(
971
- "div",
972
- {
973
- className: sliderThumb,
974
- style: { left: `${hsva.h / 360 * 100}%`, backgroundColor: hueHex }
975
- }
976
- )
977
- }
978
- ),
979
- /* @__PURE__ */ jsxs(
980
- "div",
981
- {
982
- className: alphaTrack,
983
- ref: alphaRef,
984
- onPointerDown: startDrag("alpha"),
985
- onPointerMove: onMove("alpha"),
986
- children: [
987
- /* @__PURE__ */ jsx(
988
- "div",
989
- {
990
- className: alphaGradient,
991
- style: {
992
- background: `linear-gradient(to right, transparent, ${hsvaToHex({ ...hsva, a: 1 })})`
993
- }
994
- }
995
- ),
996
- /* @__PURE__ */ jsx(
997
- "div",
998
- {
999
- className: sliderThumb,
1000
- style: { left: `${hsva.a * 100}%`, backgroundColor: currentHex }
1001
- }
1002
- )
1003
- ]
1004
- }
1005
- ),
1006
- /* @__PURE__ */ jsxs("div", { className: hexRow, children: [
1007
- /* @__PURE__ */ jsx(
1008
- "input",
1009
- {
1010
- "aria-invalid": hexInvalid || void 0,
1011
- "aria-label": "Hex color",
1012
- className: `${hexInput}${hexInvalid ? ` ${hexInputInvalid}` : ""}`,
1013
- spellCheck: false,
1014
- type: "text",
1015
- value: hexDraft,
1016
- onBlur: onHexBlur,
1017
- onChange: (e) => onHexChange(e.target.value)
1018
- }
1019
- ),
1020
- hasEyeDropper && /* @__PURE__ */ jsx(
1021
- "button",
1022
- {
1023
- "aria-label": "Pick color from screen",
1024
- className: iconButton,
1025
- type: "button",
1026
- onClick: openEyeDropper,
1027
- onMouseDown: (e) => e.preventDefault(),
1028
- children: /* @__PURE__ */ jsx(Pipette, { className: icon })
1029
- }
1030
- ),
1031
- /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: previewPair, children: [
1032
- /* @__PURE__ */ jsx("div", { className: previewCell, style: { backgroundColor: previewOldCss } }),
1033
- /* @__PURE__ */ jsx("div", { className: previewCell, style: { backgroundColor: previewNewCss } })
1034
- ] })
1035
- ] }),
1036
- /* @__PURE__ */ jsxs("div", { className: actionRow, children: [
1037
- /* @__PURE__ */ jsx(
1038
- "button",
1039
- {
1040
- className: actionButton,
1041
- type: "button",
1042
- onClick: onCancel,
1043
- onMouseDown: (e) => e.preventDefault(),
1044
- children: "Cancel"
1045
- }
1046
- ),
1047
- /* @__PURE__ */ jsx(
1048
- "button",
1049
- {
1050
- className: `${actionButton} ${actionButtonPrimary}`,
1051
- type: "button",
1052
- onClick: handleApply,
1053
- onMouseDown: (e) => e.preventDefault(),
1054
- children: "Apply"
1055
- }
1056
- )
1057
- ] })
1058
- ] });
1059
- }
1060
- const TEXT_COLORS = [
1061
- { name: "Default", value: "inherit" },
1062
- { name: "Gray", value: "#6b7280" },
1063
- { name: "Red", value: "#ef4444" },
1064
- { name: "Orange", value: "#f97316" },
1065
- { name: "Amber", value: "#f59e0b" },
1066
- { name: "Green", value: "#22c55e" },
1067
- { name: "Teal", value: "#14b8a6" },
1068
- { name: "Blue", value: "#3b82f6" },
1069
- { name: "Indigo", value: "#6366f1" },
1070
- { name: "Purple", value: "#a855f7" },
1071
- { name: "Pink", value: "#ec4899" }
927
+ const [hsva, setHsva] = useState(() => seedHsva(initialColor));
928
+ const [hexDraft, setHexDraft] = useState(() => hsvaToHex(seedHsva(initialColor)));
929
+ const [hexInvalid, setHexInvalid] = useState(false);
930
+ const [hasEyeDropper, setHasEyeDropper] = useState(false);
931
+ const oldColorRef = useRef(initialColor);
932
+ const satRef = useRef(null);
933
+ const hueRef = useRef(null);
934
+ const alphaRef = useRef(null);
935
+ useEffect(() => {
936
+ setHasEyeDropper(typeof window !== "undefined" && "EyeDropper" in window);
937
+ }, []);
938
+ useEffect(() => {
939
+ if (document.activeElement?.tagName !== "INPUT") {
940
+ setHexDraft(hsvaToHex(hsva));
941
+ setHexInvalid(false);
942
+ }
943
+ }, [hsva]);
944
+ const currentHex = hsvaToHex(hsva);
945
+ const updateFromPointer = (target, ev) => {
946
+ const el = target === "sat" ? satRef.current : target === "hue" ? hueRef.current : alphaRef.current;
947
+ if (!el) return;
948
+ const rect = el.getBoundingClientRect();
949
+ const x = clamp((ev.clientX - rect.left) / rect.width, 0, 1);
950
+ const y = clamp((ev.clientY - rect.top) / rect.height, 0, 1);
951
+ setHsva((prev) => {
952
+ if (target === "sat") return {
953
+ ...prev,
954
+ s: x,
955
+ v: 1 - y
956
+ };
957
+ if (target === "hue") return {
958
+ ...prev,
959
+ h: x * 360
960
+ };
961
+ return {
962
+ ...prev,
963
+ a: x
964
+ };
965
+ });
966
+ };
967
+ const startDrag = (target) => (ev) => {
968
+ ev.preventDefault();
969
+ ev.currentTarget.setPointerCapture(ev.pointerId);
970
+ updateFromPointer(target, ev);
971
+ };
972
+ const onMove = (target) => (ev) => {
973
+ if (ev.buttons === 0) return;
974
+ updateFromPointer(target, ev);
975
+ };
976
+ const onHexChange = (value) => {
977
+ setHexDraft(value);
978
+ const parsed = parseHex(value);
979
+ if (!parsed) {
980
+ setHexInvalid(true);
981
+ return;
982
+ }
983
+ setHexInvalid(false);
984
+ const { h, s, v } = rgbToHsv(parsed.r, parsed.g, parsed.b);
985
+ setHsva({
986
+ h,
987
+ s,
988
+ v,
989
+ a: parsed.a
990
+ });
991
+ };
992
+ const onHexBlur = () => {
993
+ if (hexInvalid) {
994
+ setHexDraft(currentHex);
995
+ setHexInvalid(false);
996
+ }
997
+ };
998
+ const openEyeDropper = async () => {
999
+ const Ctor = window.EyeDropper;
1000
+ if (!Ctor) return;
1001
+ try {
1002
+ const parsed = parseHex((await new Ctor().open()).sRGBHex);
1003
+ if (!parsed) return;
1004
+ const { h, s, v } = rgbToHsv(parsed.r, parsed.g, parsed.b);
1005
+ setHsva((prev) => ({
1006
+ h,
1007
+ s,
1008
+ v,
1009
+ a: prev.a
1010
+ }));
1011
+ } catch {}
1012
+ };
1013
+ const handleApply = () => onApply(currentHex);
1014
+ const hueHex = huePreviewHex(hsva.h);
1015
+ const previewNewCss = hsvaToHex(hsva);
1016
+ const previewOldCss = oldColorRef.current === "inherit" || !oldColorRef.current ? "transparent" : oldColorRef.current;
1017
+ return /* @__PURE__ */ jsxs("div", {
1018
+ className: pickerView,
1019
+ children: [
1020
+ /* @__PURE__ */ jsxs("button", {
1021
+ "aria-label": "Back to presets",
1022
+ className: backButton,
1023
+ type: "button",
1024
+ onClick: onBack,
1025
+ onMouseDown: (e) => e.preventDefault(),
1026
+ children: [/* @__PURE__ */ jsx(ArrowLeft, { className: backIcon }), /* @__PURE__ */ jsx("span", { children: "Back" })]
1027
+ }),
1028
+ /* @__PURE__ */ jsxs("div", {
1029
+ className: satSquare,
1030
+ ref: satRef,
1031
+ style: { backgroundColor: hueHex },
1032
+ onPointerDown: startDrag("sat"),
1033
+ onPointerMove: onMove("sat"),
1034
+ children: [
1035
+ /* @__PURE__ */ jsx("div", { className: satOverlayX }),
1036
+ /* @__PURE__ */ jsx("div", { className: satOverlayY }),
1037
+ /* @__PURE__ */ jsx("div", {
1038
+ className: satThumb,
1039
+ style: {
1040
+ left: `${hsva.s * 100}%`,
1041
+ top: `${(1 - hsva.v) * 100}%`,
1042
+ backgroundColor: hsvaToHex({
1043
+ ...hsva,
1044
+ a: 1
1045
+ })
1046
+ }
1047
+ })
1048
+ ]
1049
+ }),
1050
+ /* @__PURE__ */ jsx("div", {
1051
+ className: hueTrack,
1052
+ ref: hueRef,
1053
+ onPointerDown: startDrag("hue"),
1054
+ onPointerMove: onMove("hue"),
1055
+ children: /* @__PURE__ */ jsx("div", {
1056
+ className: sliderThumb,
1057
+ style: {
1058
+ left: `${hsva.h / 360 * 100}%`,
1059
+ backgroundColor: hueHex
1060
+ }
1061
+ })
1062
+ }),
1063
+ /* @__PURE__ */ jsxs("div", {
1064
+ className: alphaTrack,
1065
+ ref: alphaRef,
1066
+ onPointerDown: startDrag("alpha"),
1067
+ onPointerMove: onMove("alpha"),
1068
+ children: [/* @__PURE__ */ jsx("div", {
1069
+ className: alphaGradient,
1070
+ style: { background: `linear-gradient(to right, transparent, ${hsvaToHex({
1071
+ ...hsva,
1072
+ a: 1
1073
+ })})` }
1074
+ }), /* @__PURE__ */ jsx("div", {
1075
+ className: sliderThumb,
1076
+ style: {
1077
+ left: `${hsva.a * 100}%`,
1078
+ backgroundColor: currentHex
1079
+ }
1080
+ })]
1081
+ }),
1082
+ /* @__PURE__ */ jsxs("div", {
1083
+ className: hexRow,
1084
+ children: [
1085
+ /* @__PURE__ */ jsx("input", {
1086
+ "aria-invalid": hexInvalid || void 0,
1087
+ "aria-label": "Hex color",
1088
+ className: `${hexInput}${hexInvalid ? ` ${hexInputInvalid}` : ""}`,
1089
+ spellCheck: false,
1090
+ type: "text",
1091
+ value: hexDraft,
1092
+ onBlur: onHexBlur,
1093
+ onChange: (e) => onHexChange(e.target.value)
1094
+ }),
1095
+ hasEyeDropper && /* @__PURE__ */ jsx("button", {
1096
+ "aria-label": "Pick color from screen",
1097
+ className: "_17r50hfr",
1098
+ type: "button",
1099
+ onClick: openEyeDropper,
1100
+ onMouseDown: (e) => e.preventDefault(),
1101
+ children: /* @__PURE__ */ jsx(Pipette, { className: "_17r50hfs" })
1102
+ }),
1103
+ /* @__PURE__ */ jsxs("div", {
1104
+ "aria-hidden": true,
1105
+ className: previewPair,
1106
+ children: [/* @__PURE__ */ jsx("div", {
1107
+ className: previewCell,
1108
+ style: { backgroundColor: previewOldCss }
1109
+ }), /* @__PURE__ */ jsx("div", {
1110
+ className: previewCell,
1111
+ style: { backgroundColor: previewNewCss }
1112
+ })]
1113
+ })
1114
+ ]
1115
+ }),
1116
+ /* @__PURE__ */ jsxs("div", {
1117
+ className: actionRow,
1118
+ children: [/* @__PURE__ */ jsx("button", {
1119
+ className: actionButton,
1120
+ type: "button",
1121
+ onClick: onCancel,
1122
+ onMouseDown: (e) => e.preventDefault(),
1123
+ children: "Cancel"
1124
+ }), /* @__PURE__ */ jsx("button", {
1125
+ className: `${actionButton} ${actionButtonPrimary}`,
1126
+ type: "button",
1127
+ onClick: handleApply,
1128
+ onMouseDown: (e) => e.preventDefault(),
1129
+ children: "Apply"
1130
+ })]
1131
+ })
1132
+ ]
1133
+ });
1134
+ }
1135
+ //#endregion
1136
+ //#region src/components/color-picker/index.tsx
1137
+ var TEXT_COLORS = [
1138
+ {
1139
+ name: "Default",
1140
+ value: "inherit"
1141
+ },
1142
+ {
1143
+ name: "Gray",
1144
+ value: "#6b7280"
1145
+ },
1146
+ {
1147
+ name: "Red",
1148
+ value: "#ef4444"
1149
+ },
1150
+ {
1151
+ name: "Orange",
1152
+ value: "#f97316"
1153
+ },
1154
+ {
1155
+ name: "Amber",
1156
+ value: "#f59e0b"
1157
+ },
1158
+ {
1159
+ name: "Green",
1160
+ value: "#22c55e"
1161
+ },
1162
+ {
1163
+ name: "Teal",
1164
+ value: "#14b8a6"
1165
+ },
1166
+ {
1167
+ name: "Blue",
1168
+ value: "#3b82f6"
1169
+ },
1170
+ {
1171
+ name: "Indigo",
1172
+ value: "#6366f1"
1173
+ },
1174
+ {
1175
+ name: "Purple",
1176
+ value: "#a855f7"
1177
+ },
1178
+ {
1179
+ name: "Pink",
1180
+ value: "#ec4899"
1181
+ }
1072
1182
  ];
1073
1183
  function ColorPicker({ currentColor, onSelect, className }) {
1074
- const [open, setOpen] = useState(false);
1075
- const [view, setView] = useState("preset");
1076
- const displayColor = currentColor === "inherit" || !currentColor ? "currentColor" : currentColor;
1077
- const handleOpenChange = (next) => {
1078
- setOpen(next);
1079
- if (!next) setView("preset");
1080
- };
1081
- const handlePreset = (value) => {
1082
- onSelect(value);
1083
- handleOpenChange(false);
1084
- };
1085
- const handleApply = (hex) => {
1086
- onSelect(hex);
1087
- handleOpenChange(false);
1088
- };
1089
- const handleCancel = () => handleOpenChange(false);
1090
- return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
1091
- /* @__PURE__ */ jsxs(
1092
- PopoverTrigger,
1093
- {
1094
- className: `${trigger}${className ? ` ${className}` : ""}`,
1095
- render: /* @__PURE__ */ jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault() }),
1096
- children: [
1097
- /* @__PURE__ */ jsxs("span", { className: triggerLabel, children: [
1098
- /* @__PURE__ */ jsx("span", { className: triggerLetter, style: { color: displayColor }, children: "A" }),
1099
- /* @__PURE__ */ jsx("span", { className: triggerBar, style: { backgroundColor: displayColor } })
1100
- ] }),
1101
- /* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })
1102
- ]
1103
- }
1104
- ),
1105
- /* @__PURE__ */ jsx(PopoverPanel, { className: panel, side: "bottom", sideOffset: 6, children: view === "preset" ? /* @__PURE__ */ jsxs("div", { className: grid, children: [
1106
- TEXT_COLORS.map((color) => /* @__PURE__ */ jsxs(
1107
- "button",
1108
- {
1109
- "aria-label": color.name,
1110
- className: swatch,
1111
- type: "button",
1112
- onClick: () => handlePreset(color.value),
1113
- onMouseDown: (e) => e.preventDefault(),
1114
- children: [
1115
- /* @__PURE__ */ jsx(
1116
- "span",
1117
- {
1118
- className: swatchDot,
1119
- style: {
1120
- backgroundColor: color.value === "inherit" ? "currentColor" : color.value
1121
- }
1122
- }
1123
- ),
1124
- currentColor === color.value && /* @__PURE__ */ jsx(Check, { className: swatchCheck })
1125
- ]
1126
- },
1127
- color.value
1128
- )),
1129
- /* @__PURE__ */ jsx(
1130
- "button",
1131
- {
1132
- "aria-label": "Custom color",
1133
- className: swatch,
1134
- type: "button",
1135
- onClick: () => setView("picker"),
1136
- onMouseDown: (e) => e.preventDefault(),
1137
- children: /* @__PURE__ */ jsx("span", { className: addSwatchDot, children: /* @__PURE__ */ jsx(Plus, { className: addSwatchIcon }) })
1138
- }
1139
- )
1140
- ] }) : /* @__PURE__ */ jsx(
1141
- PickerView,
1142
- {
1143
- initialColor: currentColor,
1144
- onApply: handleApply,
1145
- onBack: () => setView("preset"),
1146
- onCancel: handleCancel
1147
- }
1148
- ) })
1149
- ] });
1150
- }
1184
+ const [open, setOpen] = useState(false);
1185
+ const [view, setView] = useState("preset");
1186
+ const displayColor = currentColor === "inherit" || !currentColor ? "currentColor" : currentColor;
1187
+ const handleOpenChange = (next) => {
1188
+ setOpen(next);
1189
+ if (!next) setView("preset");
1190
+ };
1191
+ const handlePreset = (value) => {
1192
+ onSelect(value);
1193
+ handleOpenChange(false);
1194
+ };
1195
+ const handleApply = (hex) => {
1196
+ onSelect(hex);
1197
+ handleOpenChange(false);
1198
+ };
1199
+ const handleCancel = () => handleOpenChange(false);
1200
+ return /* @__PURE__ */ jsxs(Popover, {
1201
+ open,
1202
+ onOpenChange: handleOpenChange,
1203
+ children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
1204
+ className: `${trigger}${className ? ` ${className}` : ""}`,
1205
+ render: /* @__PURE__ */ jsx("button", {
1206
+ type: "button",
1207
+ onMouseDown: (e) => e.preventDefault()
1208
+ }),
1209
+ children: [/* @__PURE__ */ jsxs("span", {
1210
+ className: triggerLabel,
1211
+ children: [/* @__PURE__ */ jsx("span", {
1212
+ className: triggerLetter,
1213
+ style: { color: displayColor },
1214
+ children: "A"
1215
+ }), /* @__PURE__ */ jsx("span", {
1216
+ className: triggerBar,
1217
+ style: { backgroundColor: displayColor }
1218
+ })]
1219
+ }), /* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })]
1220
+ }), /* @__PURE__ */ jsx(PopoverPanel, {
1221
+ className: panel,
1222
+ side: "bottom",
1223
+ sideOffset: 6,
1224
+ children: view === "preset" ? /* @__PURE__ */ jsxs("div", {
1225
+ className: grid,
1226
+ children: [TEXT_COLORS.map((color) => /* @__PURE__ */ jsxs("button", {
1227
+ "aria-label": color.name,
1228
+ className: swatch,
1229
+ type: "button",
1230
+ onClick: () => handlePreset(color.value),
1231
+ onMouseDown: (e) => e.preventDefault(),
1232
+ children: [/* @__PURE__ */ jsx("span", {
1233
+ className: swatchDot,
1234
+ style: { backgroundColor: color.value === "inherit" ? "currentColor" : color.value }
1235
+ }), currentColor === color.value && /* @__PURE__ */ jsx(Check, { className: "_17r50hfa" })]
1236
+ }, color.value)), /* @__PURE__ */ jsx("button", {
1237
+ "aria-label": "Custom color",
1238
+ className: swatch,
1239
+ type: "button",
1240
+ onClick: () => setView("picker"),
1241
+ onMouseDown: (e) => e.preventDefault(),
1242
+ children: /* @__PURE__ */ jsx("span", {
1243
+ className: addSwatchDot,
1244
+ children: /* @__PURE__ */ jsx(Plus, { className: addSwatchIcon })
1245
+ })
1246
+ })]
1247
+ }) : /* @__PURE__ */ jsx(PickerView, {
1248
+ initialColor: currentColor,
1249
+ onApply: handleApply,
1250
+ onBack: () => setView("preset"),
1251
+ onCancel: handleCancel
1252
+ })
1253
+ })]
1254
+ });
1255
+ }
1256
+ //#endregion
1257
+ //#region src/components/combobox/styles.css.ts
1151
1258
  var popup$4 = "_2buwsh0";
1152
1259
  var item$3 = "_2buwsh1";
1153
1260
  var empty = "_2buwsh2";
1261
+ //#endregion
1262
+ //#region src/components/combobox/index.tsx
1154
1263
  function Combobox(props) {
1155
- return /* @__PURE__ */ jsx(Combobox$1.Root, { ...props });
1264
+ return /* @__PURE__ */ jsx(Combobox$1.Root, { ...props });
1156
1265
  }
1157
1266
  function ComboboxTrigger({ className, ...props }) {
1158
- return /* @__PURE__ */ jsx(Combobox$1.Trigger, { className, ...props });
1267
+ return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
1268
+ className,
1269
+ ...props
1270
+ });
1159
1271
  }
1160
1272
  function ComboboxInput({ className, ...props }) {
1161
- return /* @__PURE__ */ jsx(Combobox$1.Input, { className, ...props });
1273
+ return /* @__PURE__ */ jsx(Combobox$1.Input, {
1274
+ className,
1275
+ ...props
1276
+ });
1162
1277
  }
1163
1278
  function ComboboxPortal({ children }) {
1164
- return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
1165
- }
1166
- function ComboboxContent({
1167
- align = "start",
1168
- alignOffset = 0,
1169
- side = "bottom",
1170
- sideOffset = 4,
1171
- className,
1172
- positionMethod = "absolute",
1173
- children,
1174
- ...popupProps
1175
- }) {
1176
- return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(
1177
- Combobox$1.Positioner,
1178
- {
1179
- align,
1180
- alignOffset,
1181
- positionMethod,
1182
- side,
1183
- sideOffset,
1184
- style: { zIndex: 50 },
1185
- children: /* @__PURE__ */ jsx(
1186
- Combobox$1.Popup,
1187
- {
1188
- className: `${popup$4}${className ? ` ${className}` : ""}`,
1189
- ...popupProps,
1190
- children
1191
- }
1192
- )
1193
- }
1194
- ) });
1279
+ return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children }) });
1280
+ }
1281
+ function ComboboxContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, positionMethod = "absolute", children, ...popupProps }) {
1282
+ return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
1283
+ align,
1284
+ alignOffset,
1285
+ positionMethod,
1286
+ side,
1287
+ sideOffset,
1288
+ style: { zIndex: 50 },
1289
+ children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
1290
+ className: `${popup$4}${className ? ` ${className}` : ""}`,
1291
+ ...popupProps,
1292
+ children
1293
+ })
1294
+ }) });
1195
1295
  }
1196
1296
  function ComboboxList(props) {
1197
- return /* @__PURE__ */ jsx(Combobox$1.List, { ...props });
1297
+ return /* @__PURE__ */ jsx(Combobox$1.List, { ...props });
1198
1298
  }
1199
1299
  function ComboboxItem({ className, ...props }) {
1200
- return /* @__PURE__ */ jsx(
1201
- Combobox$1.Item,
1202
- {
1203
- className: `${item$3}${className ? ` ${className}` : ""}`,
1204
- ...props
1205
- }
1206
- );
1300
+ return /* @__PURE__ */ jsx(Combobox$1.Item, {
1301
+ className: `${item$3}${className ? ` ${className}` : ""}`,
1302
+ ...props
1303
+ });
1207
1304
  }
1208
1305
  function ComboboxItemIndicator(props) {
1209
- return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { ...props });
1306
+ return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { ...props });
1210
1307
  }
1211
1308
  function ComboboxEmpty({ className, ...props }) {
1212
- return /* @__PURE__ */ jsx(
1213
- Combobox$1.Empty,
1214
- {
1215
- className: `${empty}${className ? ` ${className}` : ""}`,
1216
- ...props
1217
- }
1218
- );
1309
+ return /* @__PURE__ */ jsx(Combobox$1.Empty, {
1310
+ className: `${empty}${className ? ` ${className}` : ""}`,
1311
+ ...props
1312
+ });
1219
1313
  }
1220
1314
  function ComboboxGroup(props) {
1221
- return /* @__PURE__ */ jsx(Combobox$1.Group, { ...props });
1315
+ return /* @__PURE__ */ jsx(Combobox$1.Group, { ...props });
1222
1316
  }
1223
1317
  function ComboboxGroupLabel(props) {
1224
- return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, { ...props });
1318
+ return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, { ...props });
1225
1319
  }
1320
+ //#endregion
1321
+ //#region src/components/dialog/styles.css.ts
1226
1322
  var backdrop = "vwlngv4";
1227
1323
  var popup$3 = "vwlngv5";
1228
- var closeButton = "vwlngv6";
1229
1324
  var header = "vwlngv7";
1230
1325
  var headerContent = "vwlngv8";
1231
- var headerCloseButton = "vwlngv9";
1232
1326
  var footer = "vwlngva";
1233
1327
  var title = "vwlngvb";
1234
1328
  var description = "vwlngvc";
@@ -1237,328 +1331,320 @@ var sheetContainer = "vwlngvg";
1237
1331
  var sheetDragHandle = "vwlngvh";
1238
1332
  var sheetDragPill = "vwlngvi";
1239
1333
  var sheetContent = "vwlngvj";
1240
- var sheetHeader = "vwlngvk";
1334
+ //#endregion
1335
+ //#region src/components/dialog/index.tsx
1241
1336
  function Dialog(props) {
1242
- return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
1337
+ return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
1243
1338
  }
1244
1339
  function DialogTrigger(props) {
1245
- return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props });
1340
+ return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props });
1246
1341
  }
1247
1342
  function DialogPortal({ children, ...props }) {
1248
- return /* @__PURE__ */ jsx(Dialog$1.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
1343
+ return /* @__PURE__ */ jsx(Dialog$1.Portal, {
1344
+ ...props,
1345
+ children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
1346
+ });
1249
1347
  }
1250
1348
  function DialogBackdrop({ className, ...props }) {
1251
- return /* @__PURE__ */ jsx(
1252
- Dialog$1.Backdrop,
1253
- {
1254
- className: `${backdrop}${className ? ` ${className}` : ""}`,
1255
- ...props
1256
- }
1257
- );
1258
- }
1259
- function DialogPopup({
1260
- showCloseButton = true,
1261
- className,
1262
- children,
1263
- ...props
1264
- }) {
1265
- return /* @__PURE__ */ jsxs(DialogPortal, { children: [
1266
- /* @__PURE__ */ jsx(DialogBackdrop, {}),
1267
- /* @__PURE__ */ jsxs(
1268
- Dialog$1.Popup,
1269
- {
1270
- className: `${popup$3}${className ? ` ${className}` : ""}`,
1271
- ...props,
1272
- children: [
1273
- children,
1274
- showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { className: closeButton, children: /* @__PURE__ */ jsx(X, {}) })
1275
- ]
1276
- }
1277
- )
1278
- ] });
1349
+ return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
1350
+ className: `${backdrop}${className ? ` ${className}` : ""}`,
1351
+ ...props
1352
+ });
1353
+ }
1354
+ function DialogPopup({ showCloseButton = true, className, children, ...props }) {
1355
+ return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
1356
+ className: `${popup$3}${className ? ` ${className}` : ""}`,
1357
+ ...props,
1358
+ children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
1359
+ className: "vwlngv6",
1360
+ children: /* @__PURE__ */ jsx(X, {})
1361
+ })]
1362
+ })] });
1279
1363
  }
1280
1364
  function DialogClose(props) {
1281
- return /* @__PURE__ */ jsx(Dialog$1.Close, { ...props });
1365
+ return /* @__PURE__ */ jsx(Dialog$1.Close, { ...props });
1282
1366
  }
1283
1367
  function DialogHeader({ className, children, ...props }) {
1284
- return /* @__PURE__ */ jsx("div", { className: `${header}${className ? ` ${className}` : ""}`, ...props, children: /* @__PURE__ */ jsx("div", { className: headerContent, children }) });
1368
+ return /* @__PURE__ */ jsx("div", {
1369
+ className: `${header}${className ? ` ${className}` : ""}`,
1370
+ ...props,
1371
+ children: /* @__PURE__ */ jsx("div", {
1372
+ className: headerContent,
1373
+ children
1374
+ })
1375
+ });
1285
1376
  }
1286
1377
  function DialogFooter({ className, ...props }) {
1287
- return /* @__PURE__ */ jsx("div", { className: `${footer}${className ? ` ${className}` : ""}`, ...props });
1378
+ return /* @__PURE__ */ jsx("div", {
1379
+ className: `${footer}${className ? ` ${className}` : ""}`,
1380
+ ...props
1381
+ });
1288
1382
  }
1289
1383
  function DialogTitle({ className, ...props }) {
1290
- return /* @__PURE__ */ jsx(
1291
- Dialog$1.Title,
1292
- {
1293
- className: `${title}${className ? ` ${className}` : ""}`,
1294
- ...props
1295
- }
1296
- );
1384
+ return /* @__PURE__ */ jsx(Dialog$1.Title, {
1385
+ className: `${title}${className ? ` ${className}` : ""}`,
1386
+ ...props
1387
+ });
1297
1388
  }
1298
1389
  function DialogDescription({ className, ...props }) {
1299
- return /* @__PURE__ */ jsx(
1300
- Dialog$1.Description,
1301
- {
1302
- className: `${description}${className ? ` ${className}` : ""}`,
1303
- ...props
1304
- }
1305
- );
1306
- }
1307
- let stack = [];
1308
- let idCounter = 0;
1309
- const listeners = /* @__PURE__ */ new Set();
1390
+ return /* @__PURE__ */ jsx(Dialog$1.Description, {
1391
+ className: `${description}${className ? ` ${className}` : ""}`,
1392
+ ...props
1393
+ });
1394
+ }
1395
+ //#endregion
1396
+ //#region src/components/dialog/store.ts
1397
+ var stack = [];
1398
+ var idCounter = 0;
1399
+ var listeners = /* @__PURE__ */ new Set();
1310
1400
  function emit() {
1311
- for (const fn of listeners) fn();
1401
+ for (const fn of listeners) fn();
1312
1402
  }
1313
1403
  function subscribe(fn) {
1314
- listeners.add(fn);
1315
- return () => {
1316
- listeners.delete(fn);
1317
- };
1404
+ listeners.add(fn);
1405
+ return () => {
1406
+ listeners.delete(fn);
1407
+ };
1318
1408
  }
1319
1409
  function getSnapshot() {
1320
- return stack;
1410
+ return stack;
1321
1411
  }
1322
1412
  function presentDialog(props) {
1323
- const id = `dialog-${++idCounter}`;
1324
- stack = [...stack, { ...props, id, open: true }];
1325
- emit();
1326
- return () => dismissDialog(id);
1413
+ const id = `dialog-${++idCounter}`;
1414
+ stack = [...stack, {
1415
+ ...props,
1416
+ id,
1417
+ open: true
1418
+ }];
1419
+ emit();
1420
+ return () => dismissDialog(id);
1327
1421
  }
1328
1422
  function removeDialog(id) {
1329
- stack = stack.filter((item2) => item2.id !== id);
1330
- emit();
1423
+ stack = stack.filter((item) => item.id !== id);
1424
+ emit();
1331
1425
  }
1332
1426
  function dismissDialog(id) {
1333
- stack = stack.map((item2) => item2.id === id ? { ...item2, open: false } : item2);
1334
- emit();
1427
+ stack = stack.map((item) => item.id === id ? {
1428
+ ...item,
1429
+ open: false
1430
+ } : item);
1431
+ emit();
1335
1432
  }
1336
1433
  function dismissTopDialog() {
1337
- for (let i = stack.length - 1; i >= 0; i--) {
1338
- if (stack[i].open) {
1339
- dismissDialog(stack[i].id);
1340
- return;
1341
- }
1342
- }
1434
+ for (let i = stack.length - 1; i >= 0; i--) if (stack[i].open) {
1435
+ dismissDialog(stack[i].id);
1436
+ return;
1437
+ }
1343
1438
  }
1344
1439
  function dismissAllDialogs() {
1345
- stack = stack.map((item2) => ({ ...item2, open: false }));
1346
- emit();
1347
- }
1348
- const SheetStackEntry = ({ item: item2, index }) => {
1349
- const {
1350
- id,
1351
- open,
1352
- title: title$12,
1353
- description: description$12,
1354
- content,
1355
- className,
1356
- portalClassName,
1357
- theme = "light",
1358
- clickOutsideToDismiss = true
1359
- } = item2;
1360
- const dismiss = useCallback(() => dismissDialog(id), [id]);
1361
- useEffect(() => {
1362
- if (!open) {
1363
- const timer = setTimeout(() => removeDialog(id), 200);
1364
- return () => clearTimeout(timer);
1365
- }
1366
- }, [open, id]);
1367
- useEffect(() => {
1368
- const original = document.body.style.overflow;
1369
- document.body.style.overflow = "hidden";
1370
- return () => {
1371
- document.body.style.overflow = original;
1372
- };
1373
- }, []);
1374
- const sheetRef = useRef(null);
1375
- const contentRef = useRef(null);
1376
- const dragState = useRef(null);
1377
- const [translateY, setTranslateY] = useState(0);
1378
- const [isDragging, setIsDragging] = useState(false);
1379
- const handleTouchStart = useCallback((e) => {
1380
- const touch = e.touches[0];
1381
- const target = e.target;
1382
- const isHandle = target.closest(`.${sheetDragHandle}`) !== null;
1383
- const contentEl = contentRef.current;
1384
- const isContentAtTop = !contentEl || contentEl.scrollTop <= 0;
1385
- if (!isHandle && !isContentAtTop) return;
1386
- dragState.current = {
1387
- startY: touch.clientY,
1388
- startTime: Date.now(),
1389
- currentY: touch.clientY,
1390
- isDragging: false
1391
- };
1392
- }, []);
1393
- const handleTouchMove = useCallback((e) => {
1394
- const state = dragState.current;
1395
- if (!state) return;
1396
- const touch = e.touches[0];
1397
- const deltaY = touch.clientY - state.startY;
1398
- if (deltaY < 0) {
1399
- if (state.isDragging) {
1400
- setTranslateY(0);
1401
- setIsDragging(false);
1402
- state.isDragging = false;
1403
- }
1404
- return;
1405
- }
1406
- if (!state.isDragging && deltaY > 5) {
1407
- state.isDragging = true;
1408
- setIsDragging(true);
1409
- }
1410
- if (state.isDragging) {
1411
- e.preventDefault();
1412
- state.currentY = touch.clientY;
1413
- setTranslateY(deltaY);
1414
- }
1415
- }, []);
1416
- const handleTouchEnd = useCallback(() => {
1417
- const state = dragState.current;
1418
- if (!state || !state.isDragging) {
1419
- dragState.current = null;
1420
- return;
1421
- }
1422
- const deltaY = state.currentY - state.startY;
1423
- const elapsed = Date.now() - state.startTime;
1424
- const velocity = deltaY / Math.max(elapsed, 1) * 1e3;
1425
- const sheetHeight2 = sheetRef.current?.offsetHeight ?? 0;
1426
- const threshold = sheetHeight2 * 0.25;
1427
- if (deltaY > threshold || velocity > 500) {
1428
- dismiss();
1429
- } else {
1430
- setTranslateY(0);
1431
- }
1432
- setIsDragging(false);
1433
- dragState.current = null;
1434
- }, [dismiss]);
1435
- const zIndex = 50 + index;
1436
- const sheetHeight = sheetRef.current?.offsetHeight || 1;
1437
- const backdropOpacity = isDragging ? Math.max(0, 1 - translateY / sheetHeight) * 0.5 : 0.5;
1438
- return /* @__PURE__ */ jsx(PortalThemeProvider, { className: portalClassName ?? "", theme, children: /* @__PURE__ */ jsxs(PortalThemeWrapper, { children: [
1439
- /* @__PURE__ */ jsx(
1440
- "div",
1441
- {
1442
- className: sheetBackdrop,
1443
- style: {
1444
- zIndex,
1445
- opacity: open ? backdropOpacity : 0,
1446
- pointerEvents: open ? "auto" : "none"
1447
- },
1448
- onClick: clickOutsideToDismiss ? dismiss : void 0
1449
- }
1450
- ),
1451
- /* @__PURE__ */ jsxs(
1452
- "div",
1453
- {
1454
- className: `${sheetContainer}${className ? ` ${className}` : ""}`,
1455
- "data-closed": !open ? "" : void 0,
1456
- "data-open": open ? "" : void 0,
1457
- ref: sheetRef,
1458
- style: {
1459
- zIndex: zIndex + 1,
1460
- transform: isDragging ? `translateY(${translateY}px)` : void 0,
1461
- transition: isDragging ? "none" : "transform 300ms cubic-bezier(0.32, 0.72, 0, 1)"
1462
- },
1463
- onTouchEnd: handleTouchEnd,
1464
- onTouchMove: handleTouchMove,
1465
- onTouchStart: handleTouchStart,
1466
- children: [
1467
- /* @__PURE__ */ jsx("div", { className: sheetDragHandle, children: /* @__PURE__ */ jsx("div", { className: sheetDragPill }) }),
1468
- (title$12 || description$12) && /* @__PURE__ */ jsxs("div", { className: sheetHeader, children: [
1469
- title$12 && /* @__PURE__ */ jsx("div", { className: title, children: title$12 }),
1470
- description$12 && /* @__PURE__ */ jsx("div", { className: description, children: description$12 })
1471
- ] }),
1472
- /* @__PURE__ */ jsx("div", { className: sheetContent, ref: contentRef, children: createElement(content, { dismiss }) })
1473
- ]
1474
- }
1475
- )
1476
- ] }) });
1440
+ stack = stack.map((item) => ({
1441
+ ...item,
1442
+ open: false
1443
+ }));
1444
+ emit();
1445
+ }
1446
+ //#endregion
1447
+ //#region src/components/dialog/sheet.tsx
1448
+ var SheetStackEntry = ({ item, index }) => {
1449
+ const { id, open, title: title$3, description: description$4, content, className, portalClassName, theme = "light", clickOutsideToDismiss = true } = item;
1450
+ const dismiss = useCallback(() => dismissDialog(id), [id]);
1451
+ useEffect(() => {
1452
+ if (!open) {
1453
+ const timer = setTimeout(() => removeDialog(id), 200);
1454
+ return () => clearTimeout(timer);
1455
+ }
1456
+ }, [open, id]);
1457
+ useEffect(() => {
1458
+ const original = document.body.style.overflow;
1459
+ document.body.style.overflow = "hidden";
1460
+ return () => {
1461
+ document.body.style.overflow = original;
1462
+ };
1463
+ }, []);
1464
+ const sheetRef = useRef(null);
1465
+ const contentRef = useRef(null);
1466
+ const dragState = useRef(null);
1467
+ const [translateY, setTranslateY] = useState(0);
1468
+ const [isDragging, setIsDragging] = useState(false);
1469
+ const handleTouchStart = useCallback((e) => {
1470
+ const touch = e.touches[0];
1471
+ const isHandle = e.target.closest(`.${sheetDragHandle}`) !== null;
1472
+ const contentEl = contentRef.current;
1473
+ const isContentAtTop = !contentEl || contentEl.scrollTop <= 0;
1474
+ if (!isHandle && !isContentAtTop) return;
1475
+ dragState.current = {
1476
+ startY: touch.clientY,
1477
+ startTime: Date.now(),
1478
+ currentY: touch.clientY,
1479
+ isDragging: false
1480
+ };
1481
+ }, []);
1482
+ const handleTouchMove = useCallback((e) => {
1483
+ const state = dragState.current;
1484
+ if (!state) return;
1485
+ const touch = e.touches[0];
1486
+ const deltaY = touch.clientY - state.startY;
1487
+ if (deltaY < 0) {
1488
+ if (state.isDragging) {
1489
+ setTranslateY(0);
1490
+ setIsDragging(false);
1491
+ state.isDragging = false;
1492
+ }
1493
+ return;
1494
+ }
1495
+ if (!state.isDragging && deltaY > 5) {
1496
+ state.isDragging = true;
1497
+ setIsDragging(true);
1498
+ }
1499
+ if (state.isDragging) {
1500
+ e.preventDefault();
1501
+ state.currentY = touch.clientY;
1502
+ setTranslateY(deltaY);
1503
+ }
1504
+ }, []);
1505
+ const handleTouchEnd = useCallback(() => {
1506
+ const state = dragState.current;
1507
+ if (!state || !state.isDragging) {
1508
+ dragState.current = null;
1509
+ return;
1510
+ }
1511
+ const deltaY = state.currentY - state.startY;
1512
+ const elapsed = Date.now() - state.startTime;
1513
+ const velocity = deltaY / Math.max(elapsed, 1) * 1e3;
1514
+ if (deltaY > (sheetRef.current?.offsetHeight ?? 0) * .25 || velocity > 500) dismiss();
1515
+ else setTranslateY(0);
1516
+ setIsDragging(false);
1517
+ dragState.current = null;
1518
+ }, [dismiss]);
1519
+ const zIndex = 50 + index;
1520
+ const sheetHeight = sheetRef.current?.offsetHeight || 1;
1521
+ const backdropOpacity = isDragging ? Math.max(0, 1 - translateY / sheetHeight) * .5 : .5;
1522
+ return /* @__PURE__ */ jsx(PortalThemeProvider$1, {
1523
+ className: portalClassName ?? "",
1524
+ theme,
1525
+ children: /* @__PURE__ */ jsxs(PortalThemeWrapper$1, { children: [/* @__PURE__ */ jsx("div", {
1526
+ className: sheetBackdrop,
1527
+ style: {
1528
+ zIndex,
1529
+ opacity: open ? backdropOpacity : 0,
1530
+ pointerEvents: open ? "auto" : "none"
1531
+ },
1532
+ onClick: clickOutsideToDismiss ? dismiss : void 0
1533
+ }), /* @__PURE__ */ jsxs("div", {
1534
+ className: `${sheetContainer}${className ? ` ${className}` : ""}`,
1535
+ "data-closed": !open ? "" : void 0,
1536
+ "data-open": open ? "" : void 0,
1537
+ ref: sheetRef,
1538
+ style: {
1539
+ zIndex: zIndex + 1,
1540
+ transform: isDragging ? `translateY(${translateY}px)` : void 0,
1541
+ transition: isDragging ? "none" : "transform 300ms cubic-bezier(0.32, 0.72, 0, 1)"
1542
+ },
1543
+ onTouchEnd: handleTouchEnd,
1544
+ onTouchMove: handleTouchMove,
1545
+ onTouchStart: handleTouchStart,
1546
+ children: [
1547
+ /* @__PURE__ */ jsx("div", {
1548
+ className: sheetDragHandle,
1549
+ children: /* @__PURE__ */ jsx("div", { className: sheetDragPill })
1550
+ }),
1551
+ (title$3 || description$4) && /* @__PURE__ */ jsxs("div", {
1552
+ className: "vwlngvk",
1553
+ children: [title$3 && /* @__PURE__ */ jsx("div", {
1554
+ className: "vwlngvb",
1555
+ children: title$3
1556
+ }), description$4 && /* @__PURE__ */ jsx("div", {
1557
+ className: "vwlngvc",
1558
+ children: description$4
1559
+ })]
1560
+ }),
1561
+ /* @__PURE__ */ jsx("div", {
1562
+ className: sheetContent,
1563
+ ref: contentRef,
1564
+ children: createElement(content, { dismiss })
1565
+ })
1566
+ ]
1567
+ })] })
1568
+ });
1477
1569
  };
1478
- const MOBILE_QUERY = "(max-width: 640px)";
1570
+ //#endregion
1571
+ //#region src/components/dialog/stack.tsx
1572
+ var MOBILE_QUERY = "(max-width: 640px)";
1479
1573
  function useIsMobile() {
1480
- return useSyncExternalStore(
1481
- (cb) => {
1482
- const mql = window.matchMedia(MOBILE_QUERY);
1483
- mql.addEventListener("change", cb);
1484
- return () => mql.removeEventListener("change", cb);
1485
- },
1486
- () => window.matchMedia(MOBILE_QUERY).matches,
1487
- () => false
1488
- );
1574
+ return useSyncExternalStore((cb) => {
1575
+ const mql = window.matchMedia(MOBILE_QUERY);
1576
+ mql.addEventListener("change", cb);
1577
+ return () => mql.removeEventListener("change", cb);
1578
+ }, () => window.matchMedia(MOBILE_QUERY).matches, () => false);
1489
1579
  }
1490
1580
  function shouldUseSheet(sheet, isMobile) {
1491
- if (sheet === true) return true;
1492
- if (sheet === "auto") return isMobile;
1493
- return false;
1494
- }
1495
- const CloseIcon = () => /* @__PURE__ */ jsx(X, {});
1496
- const DialogStackEntry = ({ item: item2, index }) => {
1497
- const {
1498
- id,
1499
- open,
1500
- title: title$12,
1501
- description: description$12,
1502
- content,
1503
- className,
1504
- portalClassName,
1505
- theme = "light",
1506
- showCloseButton = true,
1507
- clickOutsideToDismiss = true
1508
- } = item2;
1509
- const dismiss = useCallback(() => dismissDialog(id), [id]);
1510
- useEffect(() => {
1511
- if (!open) {
1512
- const timer = setTimeout(() => {
1513
- removeDialog(id);
1514
- }, 150);
1515
- return () => clearTimeout(timer);
1516
- }
1517
- }, [open, id]);
1518
- const zIndex = 50 + index;
1519
- return /* @__PURE__ */ jsx(
1520
- Dialog$1.Root,
1521
- {
1522
- disablePointerDismissal: !clickOutsideToDismiss,
1523
- open,
1524
- onOpenChange: (open2) => {
1525
- if (!open2) dismiss();
1526
- },
1527
- children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeProvider, { className: portalClassName ?? "", theme, children: /* @__PURE__ */ jsxs(PortalThemeWrapper, { children: [
1528
- /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: backdrop, style: { zIndex } }),
1529
- /* @__PURE__ */ jsxs(
1530
- Dialog$1.Popup,
1531
- {
1532
- suppressHydrationWarning: true,
1533
- className: `${popup$3}${className ? ` ${className}` : ""}`,
1534
- "data-theme": theme,
1535
- style: { zIndex: zIndex + 1 },
1536
- children: [
1537
- (title$12 || description$12 || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: header, children: [
1538
- (title$12 || description$12) && /* @__PURE__ */ jsxs("div", { className: headerContent, children: [
1539
- title$12 && /* @__PURE__ */ jsx(Dialog$1.Title, { className: title, children: title$12 }),
1540
- description$12 && /* @__PURE__ */ jsx(Dialog$1.Description, { className: description, children: description$12 })
1541
- ] }),
1542
- showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { className: headerCloseButton, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
1543
- ] }),
1544
- createElement(content, { dismiss })
1545
- ]
1546
- }
1547
- )
1548
- ] }) }) })
1549
- }
1550
- );
1581
+ if (sheet === true) return true;
1582
+ if (sheet === "auto") return isMobile;
1583
+ return false;
1584
+ }
1585
+ var CloseIcon = () => /* @__PURE__ */ jsx(X, {});
1586
+ var DialogStackEntry = ({ item, index }) => {
1587
+ const { id, open, title: title$2, description: description$3, content, className, portalClassName, theme = "light", showCloseButton = true, clickOutsideToDismiss = true } = item;
1588
+ const dismiss = useCallback(() => dismissDialog(id), [id]);
1589
+ useEffect(() => {
1590
+ if (!open) {
1591
+ const timer = setTimeout(() => {
1592
+ removeDialog(id);
1593
+ }, 150);
1594
+ return () => clearTimeout(timer);
1595
+ }
1596
+ }, [open, id]);
1597
+ const zIndex = 50 + index;
1598
+ return /* @__PURE__ */ jsx(Dialog$1.Root, {
1599
+ disablePointerDismissal: !clickOutsideToDismiss,
1600
+ open,
1601
+ onOpenChange: (open) => {
1602
+ if (!open) dismiss();
1603
+ },
1604
+ children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeProvider$1, {
1605
+ className: portalClassName ?? "",
1606
+ theme,
1607
+ children: /* @__PURE__ */ jsxs(PortalThemeWrapper$1, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
1608
+ className: backdrop,
1609
+ style: { zIndex }
1610
+ }), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
1611
+ suppressHydrationWarning: true,
1612
+ className: `${popup$3}${className ? ` ${className}` : ""}`,
1613
+ "data-theme": theme,
1614
+ style: { zIndex: zIndex + 1 },
1615
+ children: [(title$2 || description$3 || showCloseButton) && /* @__PURE__ */ jsxs("div", {
1616
+ className: "vwlngv7",
1617
+ children: [(title$2 || description$3) && /* @__PURE__ */ jsxs("div", {
1618
+ className: "vwlngv8",
1619
+ children: [title$2 && /* @__PURE__ */ jsx(Dialog$1.Title, {
1620
+ className: "vwlngvb",
1621
+ children: title$2
1622
+ }), description$3 && /* @__PURE__ */ jsx(Dialog$1.Description, {
1623
+ className: "vwlngvc",
1624
+ children: description$3
1625
+ })]
1626
+ }), showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
1627
+ className: "vwlngv9",
1628
+ children: /* @__PURE__ */ jsx(CloseIcon, {})
1629
+ })]
1630
+ }), createElement(content, { dismiss })]
1631
+ })] })
1632
+ }) })
1633
+ });
1551
1634
  };
1552
- const DialogStackProvider = ({ children }) => {
1553
- const stack2 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
1554
- const isMobile = useIsMobile();
1555
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1556
- children,
1557
- stack2.map(
1558
- (item2, index) => shouldUseSheet(item2.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, { index, item: item2 }, item2.id) : /* @__PURE__ */ jsx(DialogStackEntry, { index, item: item2 }, item2.id)
1559
- )
1560
- ] });
1635
+ var DialogStackProvider = ({ children }) => {
1636
+ const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
1637
+ const isMobile = useIsMobile();
1638
+ return /* @__PURE__ */ jsxs(Fragment, { children: [children, stack.map((item, index) => shouldUseSheet(item.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, {
1639
+ index,
1640
+ item
1641
+ }, item.id) : /* @__PURE__ */ jsx(DialogStackEntry, {
1642
+ index,
1643
+ item
1644
+ }, item.id))] });
1561
1645
  };
1646
+ //#endregion
1647
+ //#region src/components/dropdown-menu/styles.css.ts
1562
1648
  var popup$2 = "oih0op0";
1563
1649
  var positioner$2 = "oih0op1";
1564
1650
  var item$2 = "oih0op2";
@@ -1568,293 +1654,295 @@ var checkboxItem = "oih0op3";
1568
1654
  var radioItem = "oih0op3";
1569
1655
  var checkboxIndicator = "oih0op4";
1570
1656
  var radioIndicator = "oih0op5";
1657
+ //#endregion
1658
+ //#region src/components/dropdown-menu/index.tsx
1571
1659
  function DropdownMenu(props) {
1572
- return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
1660
+ return /* @__PURE__ */ jsx(Menu.Root, {
1661
+ "data-slot": "dropdown-menu",
1662
+ ...props
1663
+ });
1573
1664
  }
1574
1665
  function DropdownMenuTrigger(props) {
1575
- return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
1666
+ return /* @__PURE__ */ jsx(Menu.Trigger, {
1667
+ "data-slot": "dropdown-menu-trigger",
1668
+ ...props
1669
+ });
1576
1670
  }
1577
1671
  function DropdownMenuPortal({ children }) {
1578
- return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
1579
- }
1580
- function DropdownMenuContent({
1581
- align = "start",
1582
- alignOffset = 0,
1583
- side = "bottom",
1584
- sideOffset = 4,
1585
- className,
1586
- positionMethod = "absolute",
1587
- children,
1588
- ...popupProps
1589
- }) {
1590
- return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
1591
- Menu.Positioner,
1592
- {
1593
- align,
1594
- alignOffset,
1595
- className: positioner$2,
1596
- "data-slot": "dropdown-menu-positioner",
1597
- positionMethod,
1598
- side,
1599
- sideOffset,
1600
- style: { zIndex: 50 },
1601
- children: /* @__PURE__ */ jsx(
1602
- Menu.Popup,
1603
- {
1604
- className: `${popup$2}${className ? ` ${className}` : ""}`,
1605
- "data-slot": "dropdown-menu-content",
1606
- ...popupProps,
1607
- children
1608
- }
1609
- )
1610
- }
1611
- ) });
1672
+ return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children }) });
1673
+ }
1674
+ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, positionMethod = "absolute", children, ...popupProps }) {
1675
+ return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
1676
+ align,
1677
+ alignOffset,
1678
+ className: positioner$2,
1679
+ "data-slot": "dropdown-menu-positioner",
1680
+ positionMethod,
1681
+ side,
1682
+ sideOffset,
1683
+ style: { zIndex: 50 },
1684
+ children: /* @__PURE__ */ jsx(Menu.Popup, {
1685
+ className: `${popup$2}${className ? ` ${className}` : ""}`,
1686
+ "data-slot": "dropdown-menu-content",
1687
+ ...popupProps,
1688
+ children
1689
+ })
1690
+ }) });
1612
1691
  }
1613
1692
  function DropdownMenuGroup(props) {
1614
- return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
1693
+ return /* @__PURE__ */ jsx(Menu.Group, {
1694
+ "data-slot": "dropdown-menu-group",
1695
+ ...props
1696
+ });
1615
1697
  }
1616
1698
  function DropdownMenuLabel({ className, ...props }) {
1617
- return /* @__PURE__ */ jsx(
1618
- Menu.GroupLabel,
1619
- {
1620
- className: `${label}${className ? ` ${className}` : ""}`,
1621
- "data-slot": "dropdown-menu-label",
1622
- ...props
1623
- }
1624
- );
1699
+ return /* @__PURE__ */ jsx(Menu.GroupLabel, {
1700
+ className: `${label}${className ? ` ${className}` : ""}`,
1701
+ "data-slot": "dropdown-menu-label",
1702
+ ...props
1703
+ });
1625
1704
  }
1626
1705
  function DropdownMenuItem({ className, ...props }) {
1627
- return /* @__PURE__ */ jsx(
1628
- Menu.Item,
1629
- {
1630
- className: `${item$2}${className ? ` ${className}` : ""}`,
1631
- "data-slot": "dropdown-menu-item",
1632
- ...props
1633
- }
1634
- );
1706
+ return /* @__PURE__ */ jsx(Menu.Item, {
1707
+ className: `${item$2}${className ? ` ${className}` : ""}`,
1708
+ "data-slot": "dropdown-menu-item",
1709
+ ...props
1710
+ });
1635
1711
  }
1636
1712
  function DropdownMenuSeparator({ className, ...props }) {
1637
- return /* @__PURE__ */ jsx(
1638
- Menu.Separator,
1639
- {
1640
- className: `${separator$1}${className ? ` ${className}` : ""}`,
1641
- "data-slot": "dropdown-menu-separator",
1642
- ...props
1643
- }
1644
- );
1713
+ return /* @__PURE__ */ jsx(Menu.Separator, {
1714
+ className: `${separator$1}${className ? ` ${className}` : ""}`,
1715
+ "data-slot": "dropdown-menu-separator",
1716
+ ...props
1717
+ });
1645
1718
  }
1646
1719
  function DropdownMenuRadioGroup(props) {
1647
- return /* @__PURE__ */ jsx(Menu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
1648
- }
1649
- function DropdownMenuRadioItem({
1650
- className,
1651
- children,
1652
- ...props
1653
- }) {
1654
- return /* @__PURE__ */ jsxs(
1655
- Menu.RadioItem,
1656
- {
1657
- className: `${item$2} ${radioItem}${className ? ` ${className}` : ""}`,
1658
- "data-slot": "dropdown-menu-radio-item",
1659
- ...props,
1660
- children: [
1661
- children,
1662
- /* @__PURE__ */ jsx(
1663
- Menu.RadioItemIndicator,
1664
- {
1665
- className: radioIndicator,
1666
- "data-slot": "dropdown-menu-radio-item-indicator",
1667
- children: /* @__PURE__ */ jsx(CheckIcon, {})
1668
- }
1669
- )
1670
- ]
1671
- }
1672
- );
1673
- }
1674
- function DropdownMenuCheckboxItem({
1675
- className,
1676
- children,
1677
- ...props
1678
- }) {
1679
- return /* @__PURE__ */ jsxs(
1680
- Menu.CheckboxItem,
1681
- {
1682
- className: `${item$2} ${checkboxItem}${className ? ` ${className}` : ""}`,
1683
- "data-slot": "dropdown-menu-checkbox-item",
1684
- ...props,
1685
- children: [
1686
- children,
1687
- /* @__PURE__ */ jsx(
1688
- Menu.CheckboxItemIndicator,
1689
- {
1690
- className: checkboxIndicator,
1691
- "data-slot": "dropdown-menu-checkbox-item-indicator",
1692
- children: /* @__PURE__ */ jsx(CheckIcon, {})
1693
- }
1694
- )
1695
- ]
1696
- }
1697
- );
1720
+ return /* @__PURE__ */ jsx(Menu.RadioGroup, {
1721
+ "data-slot": "dropdown-menu-radio-group",
1722
+ ...props
1723
+ });
1724
+ }
1725
+ function DropdownMenuRadioItem({ className, children, ...props }) {
1726
+ return /* @__PURE__ */ jsxs(Menu.RadioItem, {
1727
+ className: `${item$2} ${radioItem}${className ? ` ${className}` : ""}`,
1728
+ "data-slot": "dropdown-menu-radio-item",
1729
+ ...props,
1730
+ children: [children, /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
1731
+ className: radioIndicator,
1732
+ "data-slot": "dropdown-menu-radio-item-indicator",
1733
+ children: /* @__PURE__ */ jsx(CheckIcon, {})
1734
+ })]
1735
+ });
1736
+ }
1737
+ function DropdownMenuCheckboxItem({ className, children, ...props }) {
1738
+ return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
1739
+ className: `${item$2} ${checkboxItem}${className ? ` ${className}` : ""}`,
1740
+ "data-slot": "dropdown-menu-checkbox-item",
1741
+ ...props,
1742
+ children: [children, /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
1743
+ className: checkboxIndicator,
1744
+ "data-slot": "dropdown-menu-checkbox-item-indicator",
1745
+ children: /* @__PURE__ */ jsx(CheckIcon, {})
1746
+ })]
1747
+ });
1698
1748
  }
1699
1749
  function CheckIcon() {
1700
- return /* @__PURE__ */ jsx(Check, { size: 16 });
1750
+ return /* @__PURE__ */ jsx(Check, { size: 16 });
1701
1751
  }
1752
+ //#endregion
1753
+ //#region src/components/scroll-area/styles.css.ts
1702
1754
  var scrollArea = "_1y5k2ih0";
1703
- function ScrollArea({
1704
- children,
1705
- className,
1706
- autoScrollToBottom = false,
1707
- scrollRef
1708
- }) {
1709
- const innerRef = useRef(null);
1710
- const ref = scrollRef ?? innerRef;
1711
- const isAtBottomRef = useRef(true);
1712
- const handleScroll = useCallback(() => {
1713
- const el = ref.current;
1714
- if (!el) return;
1715
- const threshold = 40;
1716
- isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
1717
- }, [ref]);
1718
- useEffect(() => {
1719
- if (!autoScrollToBottom) return;
1720
- const el = ref.current;
1721
- if (!el || !isAtBottomRef.current) return;
1722
- el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
1723
- });
1724
- return /* @__PURE__ */ jsx(
1725
- "div",
1726
- {
1727
- className: `${scrollArea}${className ? ` ${className}` : ""}`,
1728
- ref,
1729
- onScroll: autoScrollToBottom ? handleScroll : void 0,
1730
- children
1731
- }
1732
- );
1733
- }
1734
- var container = createRuntimeFn({ defaultClassName: "_6d8tz20", variantClassNames: { size: { sm: "_6d8tz21", md: "_6d8tz22" }, fullWidth: { true: "_6d8tz23", false: "_6d8tz24" } }, defaultVariants: { size: "sm", fullWidth: false }, compoundVariants: [] });
1735
- var indicator = createRuntimeFn({ defaultClassName: "_6d8tz25", variantClassNames: { ready: { true: "_6d8tz26", false: "_6d8tz27" } }, defaultVariants: { ready: true }, compoundVariants: [] });
1736
- var item$1 = createRuntimeFn({ defaultClassName: "_6d8tz28", variantClassNames: { size: { sm: "_6d8tz29", md: "_6d8tz2a" }, active: { true: "_6d8tz2b", false: "_6d8tz2c" }, disabled: { true: "_6d8tz2d", false: "_6d8tz2e" }, fullWidth: { true: "_6d8tz2f", false: "_6d8tz2g" } }, defaultVariants: { size: "sm", active: false, disabled: false, fullWidth: false }, compoundVariants: [] });
1737
- function SegmentedControl({
1738
- items,
1739
- value,
1740
- onChange,
1741
- size = "sm",
1742
- fullWidth = false,
1743
- className
1744
- }) {
1745
- const containerRef = useRef(null);
1746
- const itemElementsRef = useRef(/* @__PURE__ */ new Map());
1747
- const [indicator$12, setIndicator] = useState({ left: 0, width: 0 });
1748
- const [isReady, setIsReady] = useState(false);
1749
- const updateIndicator = useCallback(() => {
1750
- const container2 = containerRef.current;
1751
- const activeEl = itemElementsRef.current.get(value);
1752
- if (!container2 || !activeEl) return;
1753
- const containerRect = container2.getBoundingClientRect();
1754
- const activeRect = activeEl.getBoundingClientRect();
1755
- setIndicator({
1756
- left: activeRect.left - containerRect.left,
1757
- width: activeRect.width
1758
- });
1759
- setIsReady(true);
1760
- }, [value]);
1761
- useEffect(() => {
1762
- updateIndicator();
1763
- }, [updateIndicator]);
1764
- useEffect(() => {
1765
- const container2 = containerRef.current;
1766
- if (!container2) return;
1767
- const observer = new ResizeObserver(() => {
1768
- updateIndicator();
1769
- });
1770
- observer.observe(container2);
1771
- return () => observer.disconnect();
1772
- }, [updateIndicator]);
1773
- const handleKeyDown = (e) => {
1774
- const enabledItems = items.filter((item2) => !item2.disabled);
1775
- const currentIndex = enabledItems.findIndex((item2) => item2.value === value);
1776
- let nextIndex = currentIndex;
1777
- switch (e.key) {
1778
- case "ArrowRight":
1779
- case "ArrowDown": {
1780
- e.preventDefault();
1781
- nextIndex = (currentIndex + 1) % enabledItems.length;
1782
- break;
1783
- }
1784
- case "ArrowLeft":
1785
- case "ArrowUp": {
1786
- e.preventDefault();
1787
- nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
1788
- break;
1789
- }
1790
- case "Home": {
1791
- e.preventDefault();
1792
- nextIndex = 0;
1793
- break;
1794
- }
1795
- case "End": {
1796
- e.preventDefault();
1797
- nextIndex = enabledItems.length - 1;
1798
- break;
1799
- }
1800
- }
1801
- if (nextIndex !== currentIndex) {
1802
- const nextItem = enabledItems[nextIndex];
1803
- onChange(nextItem.value);
1804
- itemElementsRef.current.get(nextItem.value)?.focus();
1805
- }
1806
- };
1807
- return /* @__PURE__ */ jsxs(
1808
- "div",
1809
- {
1810
- "aria-orientation": "horizontal",
1811
- className: `${container({ size, fullWidth })} ${className || ""}`.trim(),
1812
- ref: containerRef,
1813
- role: "tablist",
1814
- onKeyDown: handleKeyDown,
1815
- children: [
1816
- /* @__PURE__ */ jsx(
1817
- "div",
1818
- {
1819
- "aria-hidden": "true",
1820
- className: indicator({ ready: isReady }),
1821
- style: {
1822
- left: indicator$12.left,
1823
- width: indicator$12.width
1824
- }
1825
- }
1826
- ),
1827
- items.map((item2) => {
1828
- const isActive = item2.value === value;
1829
- return /* @__PURE__ */ jsx(
1830
- "button",
1831
- {
1832
- "aria-selected": isActive,
1833
- "data-active": isActive || void 0,
1834
- disabled: item2.disabled,
1835
- role: "tab",
1836
- tabIndex: isActive ? 0 : -1,
1837
- type: "button",
1838
- className: item$1({
1839
- size,
1840
- active: isActive,
1841
- disabled: Boolean(item2.disabled),
1842
- fullWidth
1843
- }),
1844
- ref: (el) => {
1845
- if (el) itemElementsRef.current.set(item2.value, el);
1846
- else itemElementsRef.current.delete(item2.value);
1847
- },
1848
- onClick: () => onChange(item2.value),
1849
- children: item2.label
1850
- },
1851
- item2.value
1852
- );
1853
- })
1854
- ]
1855
- }
1856
- );
1857
- }
1755
+ //#endregion
1756
+ //#region src/components/scroll-area/index.tsx
1757
+ function ScrollArea({ children, className, autoScrollToBottom = false, scrollRef }) {
1758
+ const innerRef = useRef(null);
1759
+ const ref = scrollRef ?? innerRef;
1760
+ const isAtBottomRef = useRef(true);
1761
+ const handleScroll = useCallback(() => {
1762
+ const el = ref.current;
1763
+ if (!el) return;
1764
+ isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
1765
+ }, [ref]);
1766
+ useEffect(() => {
1767
+ if (!autoScrollToBottom) return;
1768
+ const el = ref.current;
1769
+ if (!el || !isAtBottomRef.current) return;
1770
+ el.scrollTo({
1771
+ top: el.scrollHeight,
1772
+ behavior: "smooth"
1773
+ });
1774
+ });
1775
+ return /* @__PURE__ */ jsx("div", {
1776
+ className: `${scrollArea}${className ? ` ${className}` : ""}`,
1777
+ ref,
1778
+ onScroll: autoScrollToBottom ? handleScroll : void 0,
1779
+ children
1780
+ });
1781
+ }
1782
+ //#endregion
1783
+ //#region src/components/segmented-control/styles.css.ts
1784
+ var container = createRuntimeFn({
1785
+ defaultClassName: "_6d8tz20",
1786
+ variantClassNames: {
1787
+ size: {
1788
+ sm: "_6d8tz21",
1789
+ md: "_6d8tz22"
1790
+ },
1791
+ fullWidth: {
1792
+ true: "_6d8tz23",
1793
+ false: "_6d8tz24"
1794
+ }
1795
+ },
1796
+ defaultVariants: {
1797
+ size: "sm",
1798
+ fullWidth: false
1799
+ },
1800
+ compoundVariants: []
1801
+ });
1802
+ var indicator = createRuntimeFn({
1803
+ defaultClassName: "_6d8tz25",
1804
+ variantClassNames: { ready: {
1805
+ true: "_6d8tz26",
1806
+ false: "_6d8tz27"
1807
+ } },
1808
+ defaultVariants: { ready: true },
1809
+ compoundVariants: []
1810
+ });
1811
+ var item$1 = createRuntimeFn({
1812
+ defaultClassName: "_6d8tz28",
1813
+ variantClassNames: {
1814
+ size: {
1815
+ sm: "_6d8tz29",
1816
+ md: "_6d8tz2a"
1817
+ },
1818
+ active: {
1819
+ true: "_6d8tz2b",
1820
+ false: "_6d8tz2c"
1821
+ },
1822
+ disabled: {
1823
+ true: "_6d8tz2d",
1824
+ false: "_6d8tz2e"
1825
+ },
1826
+ fullWidth: {
1827
+ true: "_6d8tz2f",
1828
+ false: "_6d8tz2g"
1829
+ }
1830
+ },
1831
+ defaultVariants: {
1832
+ size: "sm",
1833
+ active: false,
1834
+ disabled: false,
1835
+ fullWidth: false
1836
+ },
1837
+ compoundVariants: []
1838
+ });
1839
+ //#endregion
1840
+ //#region src/components/segmented-control/index.tsx
1841
+ function SegmentedControl({ items, value, onChange, size = "sm", fullWidth = false, className }) {
1842
+ const containerRef = useRef(null);
1843
+ const itemElementsRef = useRef(/* @__PURE__ */ new Map());
1844
+ const [indicator$2, setIndicator] = useState({
1845
+ left: 0,
1846
+ width: 0
1847
+ });
1848
+ const [isReady, setIsReady] = useState(false);
1849
+ const updateIndicator = useCallback(() => {
1850
+ const container = containerRef.current;
1851
+ const activeEl = itemElementsRef.current.get(value);
1852
+ if (!container || !activeEl) return;
1853
+ const containerRect = container.getBoundingClientRect();
1854
+ const activeRect = activeEl.getBoundingClientRect();
1855
+ setIndicator({
1856
+ left: activeRect.left - containerRect.left,
1857
+ width: activeRect.width
1858
+ });
1859
+ setIsReady(true);
1860
+ }, [value]);
1861
+ useEffect(() => {
1862
+ updateIndicator();
1863
+ }, [updateIndicator]);
1864
+ useEffect(() => {
1865
+ const container = containerRef.current;
1866
+ if (!container) return;
1867
+ const observer = new ResizeObserver(() => {
1868
+ updateIndicator();
1869
+ });
1870
+ observer.observe(container);
1871
+ return () => observer.disconnect();
1872
+ }, [updateIndicator]);
1873
+ const handleKeyDown = (e) => {
1874
+ const enabledItems = items.filter((item) => !item.disabled);
1875
+ const currentIndex = enabledItems.findIndex((item) => item.value === value);
1876
+ let nextIndex = currentIndex;
1877
+ switch (e.key) {
1878
+ case "ArrowRight":
1879
+ case "ArrowDown":
1880
+ e.preventDefault();
1881
+ nextIndex = (currentIndex + 1) % enabledItems.length;
1882
+ break;
1883
+ case "ArrowLeft":
1884
+ case "ArrowUp":
1885
+ e.preventDefault();
1886
+ nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
1887
+ break;
1888
+ case "Home":
1889
+ e.preventDefault();
1890
+ nextIndex = 0;
1891
+ break;
1892
+ case "End":
1893
+ e.preventDefault();
1894
+ nextIndex = enabledItems.length - 1;
1895
+ break;
1896
+ }
1897
+ if (nextIndex !== currentIndex) {
1898
+ const nextItem = enabledItems[nextIndex];
1899
+ onChange(nextItem.value);
1900
+ itemElementsRef.current.get(nextItem.value)?.focus();
1901
+ }
1902
+ };
1903
+ return /* @__PURE__ */ jsxs("div", {
1904
+ "aria-orientation": "horizontal",
1905
+ className: `${container({
1906
+ size,
1907
+ fullWidth
1908
+ })} ${className || ""}`.trim(),
1909
+ ref: containerRef,
1910
+ role: "tablist",
1911
+ onKeyDown: handleKeyDown,
1912
+ children: [/* @__PURE__ */ jsx("div", {
1913
+ "aria-hidden": "true",
1914
+ className: indicator({ ready: isReady }),
1915
+ style: {
1916
+ left: indicator$2.left,
1917
+ width: indicator$2.width
1918
+ }
1919
+ }), items.map((item) => {
1920
+ const isActive = item.value === value;
1921
+ return /* @__PURE__ */ jsx("button", {
1922
+ "aria-selected": isActive,
1923
+ "data-active": isActive || void 0,
1924
+ disabled: item.disabled,
1925
+ role: "tab",
1926
+ tabIndex: isActive ? 0 : -1,
1927
+ type: "button",
1928
+ className: item$1({
1929
+ size,
1930
+ active: isActive,
1931
+ disabled: Boolean(item.disabled),
1932
+ fullWidth
1933
+ }),
1934
+ ref: (el) => {
1935
+ if (el) itemElementsRef.current.set(item.value, el);
1936
+ else itemElementsRef.current.delete(item.value);
1937
+ },
1938
+ onClick: () => onChange(item.value),
1939
+ children: item.label
1940
+ }, item.value);
1941
+ })]
1942
+ });
1943
+ }
1944
+ //#endregion
1945
+ //#region src/components/select/styles.css.ts
1858
1946
  var triggerButton = "p74a622";
1859
1947
  var triggerIcon = "p74a623";
1860
1948
  var positioner$1 = "p74a624";
@@ -1865,258 +1953,220 @@ var itemIndicator = "p74a628";
1865
1953
  var groupLabel = "p74a629";
1866
1954
  var separator = "p74a62a";
1867
1955
  var scrollButton = "p74a62b";
1956
+ //#endregion
1957
+ //#region src/components/select/index.tsx
1868
1958
  function Select(props) {
1869
- return /* @__PURE__ */ jsx(Select$1.Root, { ...props });
1959
+ return /* @__PURE__ */ jsx(Select$1.Root, { ...props });
1870
1960
  }
1871
1961
  function SelectTrigger({ children, className, ...props }) {
1872
- return /* @__PURE__ */ jsxs(
1873
- Select$1.Trigger,
1874
- {
1875
- ...props,
1876
- className: `${triggerButton}${className ? ` ${className}` : ""}`,
1877
- children: [
1878
- children,
1879
- /* @__PURE__ */ jsx(Select$1.Icon, { className: triggerIcon, children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
1880
- ]
1881
- }
1882
- );
1962
+ return /* @__PURE__ */ jsxs(Select$1.Trigger, {
1963
+ ...props,
1964
+ className: `${triggerButton}${className ? ` ${className}` : ""}`,
1965
+ children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
1966
+ className: triggerIcon,
1967
+ children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
1968
+ })]
1969
+ });
1883
1970
  }
1884
1971
  function SelectValue(props) {
1885
- return /* @__PURE__ */ jsx(Select$1.Value, { ...props });
1886
- }
1887
- function SelectContent({
1888
- children,
1889
- className,
1890
- align = "center",
1891
- alignItemWithTrigger = true,
1892
- side = "bottom",
1893
- sideOffset = 4,
1894
- ...props
1895
- }) {
1896
- return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children: /* @__PURE__ */ jsx(
1897
- Select$1.Positioner,
1898
- {
1899
- align,
1900
- alignItemWithTrigger,
1901
- className: positioner$1,
1902
- side,
1903
- sideOffset,
1904
- children: /* @__PURE__ */ jsxs(
1905
- Select$1.Popup,
1906
- {
1907
- ...props,
1908
- className: `${popup$1}${className ? ` ${className}` : ""}`,
1909
- children: [
1910
- /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, { className: scrollButton, children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 }) }),
1911
- /* @__PURE__ */ jsx(Select$1.List, { children }),
1912
- /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, { className: scrollButton, children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
1913
- ]
1914
- }
1915
- )
1916
- }
1917
- ) }) });
1972
+ return /* @__PURE__ */ jsx(Select$1.Value, { ...props });
1973
+ }
1974
+ function SelectContent({ children, className, align = "center", alignItemWithTrigger = true, side = "bottom", sideOffset = 4, ...props }) {
1975
+ return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
1976
+ align,
1977
+ alignItemWithTrigger,
1978
+ className: positioner$1,
1979
+ side,
1980
+ sideOffset,
1981
+ children: /* @__PURE__ */ jsxs(Select$1.Popup, {
1982
+ ...props,
1983
+ className: `${popup$1}${className ? ` ${className}` : ""}`,
1984
+ children: [
1985
+ /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
1986
+ className: scrollButton,
1987
+ children: /* @__PURE__ */ jsx(ChevronUp, { size: 16 })
1988
+ }),
1989
+ /* @__PURE__ */ jsx(Select$1.List, { children }),
1990
+ /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
1991
+ className: scrollButton,
1992
+ children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
1993
+ })
1994
+ ]
1995
+ })
1996
+ }) }) });
1918
1997
  }
1919
1998
  function SelectItem({ className, children, ...props }) {
1920
- return /* @__PURE__ */ jsxs(Select$1.Item, { ...props, className: `${item}${className ? ` ${className}` : ""}`, children: [
1921
- /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
1922
- /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
1923
- ] });
1999
+ return /* @__PURE__ */ jsxs(Select$1.Item, {
2000
+ ...props,
2001
+ className: `${item}${className ? ` ${className}` : ""}`,
2002
+ children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
2003
+ className: itemIndicator,
2004
+ children: /* @__PURE__ */ jsx(Check, { size: 16 })
2005
+ })]
2006
+ });
1924
2007
  }
1925
2008
  function SelectGroup({ className, ...props }) {
1926
- return /* @__PURE__ */ jsx(Select$1.Group, { ...props, className: `${group}${className ? ` ${className}` : ""}` });
2009
+ return /* @__PURE__ */ jsx(Select$1.Group, {
2010
+ ...props,
2011
+ className: `${group}${className ? ` ${className}` : ""}`
2012
+ });
1927
2013
  }
1928
2014
  function SelectGroupLabel({ className, ...props }) {
1929
- return /* @__PURE__ */ jsx(
1930
- Select$1.GroupLabel,
1931
- {
1932
- ...props,
1933
- className: `${groupLabel}${className ? ` ${className}` : ""}`
1934
- }
1935
- );
2015
+ return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
2016
+ ...props,
2017
+ className: `${groupLabel}${className ? ` ${className}` : ""}`
2018
+ });
1936
2019
  }
1937
2020
  function SelectSeparator({ className }) {
1938
- return /* @__PURE__ */ jsx("div", { className: `${separator}${className ? ` ${className}` : ""}` });
1939
- }
1940
- var spinner = createRuntimeFn({ defaultClassName: "_131cfek1", variantClassNames: { size: { sm: "_131cfek2", md: "_131cfek3" } }, defaultVariants: { size: "sm" }, compoundVariants: [] });
2021
+ return /* @__PURE__ */ jsx("div", { className: `${separator}${className ? ` ${className}` : ""}` });
2022
+ }
2023
+ //#endregion
2024
+ //#region src/components/spinner/styles.css.ts
2025
+ var spinner = createRuntimeFn({
2026
+ defaultClassName: "_131cfek1",
2027
+ variantClassNames: { size: {
2028
+ sm: "_131cfek2",
2029
+ md: "_131cfek3"
2030
+ } },
2031
+ defaultVariants: { size: "sm" },
2032
+ compoundVariants: []
2033
+ });
2034
+ //#endregion
2035
+ //#region src/components/spinner/index.tsx
1941
2036
  function Spinner({ size, className }) {
1942
- return /* @__PURE__ */ jsx(
1943
- "span",
1944
- {
1945
- "aria-hidden": "true",
1946
- className: `${spinner({ size })}${className ? ` ${className}` : ""}`,
1947
- role: "status"
1948
- }
1949
- );
1950
- }
2037
+ return /* @__PURE__ */ jsx("span", {
2038
+ "aria-hidden": "true",
2039
+ className: `${spinner({ size })}${className ? ` ${className}` : ""}`,
2040
+ role: "status"
2041
+ });
2042
+ }
2043
+ //#endregion
2044
+ //#region src/components/status-dot/styles.css.ts
1951
2045
  var statusDotWrapper = "_73cmpa1";
1952
- var dot = createRuntimeFn({ defaultClassName: "_73cmpa2", variantClassNames: { status: { idle: "_73cmpa3", active: "_73cmpa4", success: "_73cmpa5", error: "_73cmpa6", warning: "_73cmpa7" }, size: { sm: "_73cmpa8", md: "_73cmpa9" } }, defaultVariants: { status: "idle", size: "sm" }, compoundVariants: [] });
1953
- var pulseRing = createRuntimeFn({ defaultClassName: "_73cmpaa", variantClassNames: { status: { idle: "_73cmpab", active: "_73cmpac", success: "_73cmpad", error: "_73cmpae", warning: "_73cmpaf" }, size: { sm: "_73cmpag", md: "_73cmpah" } }, defaultVariants: { status: "idle", size: "sm" }, compoundVariants: [] });
1954
- function StatusDot({
1955
- status,
1956
- pulse: showPulse,
1957
- size,
1958
- className
1959
- }) {
1960
- return /* @__PURE__ */ jsxs("span", { className: `${statusDotWrapper}${className ? ` ${className}` : ""}`, children: [
1961
- showPulse && /* @__PURE__ */ jsx("span", { className: pulseRing({ status, size }) }),
1962
- /* @__PURE__ */ jsx("span", { className: dot({ status, size }) })
1963
- ] });
1964
- }
2046
+ var dot = createRuntimeFn({
2047
+ defaultClassName: "_73cmpa2",
2048
+ variantClassNames: {
2049
+ status: {
2050
+ idle: "_73cmpa3",
2051
+ active: "_73cmpa4",
2052
+ success: "_73cmpa5",
2053
+ error: "_73cmpa6",
2054
+ warning: "_73cmpa7"
2055
+ },
2056
+ size: {
2057
+ sm: "_73cmpa8",
2058
+ md: "_73cmpa9"
2059
+ }
2060
+ },
2061
+ defaultVariants: {
2062
+ status: "idle",
2063
+ size: "sm"
2064
+ },
2065
+ compoundVariants: []
2066
+ });
2067
+ var pulseRing = createRuntimeFn({
2068
+ defaultClassName: "_73cmpaa",
2069
+ variantClassNames: {
2070
+ status: {
2071
+ idle: "_73cmpab",
2072
+ active: "_73cmpac",
2073
+ success: "_73cmpad",
2074
+ error: "_73cmpae",
2075
+ warning: "_73cmpaf"
2076
+ },
2077
+ size: {
2078
+ sm: "_73cmpag",
2079
+ md: "_73cmpah"
2080
+ }
2081
+ },
2082
+ defaultVariants: {
2083
+ status: "idle",
2084
+ size: "sm"
2085
+ },
2086
+ compoundVariants: []
2087
+ });
2088
+ //#endregion
2089
+ //#region src/components/status-dot/index.tsx
2090
+ function StatusDot({ status, pulse: showPulse, size, className }) {
2091
+ return /* @__PURE__ */ jsxs("span", {
2092
+ className: `${statusDotWrapper}${className ? ` ${className}` : ""}`,
2093
+ children: [showPulse && /* @__PURE__ */ jsx("span", { className: pulseRing({
2094
+ status,
2095
+ size
2096
+ }) }), /* @__PURE__ */ jsx("span", { className: dot({
2097
+ status,
2098
+ size
2099
+ }) })]
2100
+ });
2101
+ }
2102
+ //#endregion
2103
+ //#region src/components/tooltip/styles.css.ts
1965
2104
  var positioner = "_1cspf2m2";
1966
2105
  var popup = "_1cspf2m3";
2106
+ //#endregion
2107
+ //#region src/components/tooltip/index.tsx
1967
2108
  function TooltipProvider(props) {
1968
- return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
2109
+ return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
1969
2110
  }
1970
2111
  function TooltipRoot(props) {
1971
- return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
2112
+ return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
1972
2113
  }
1973
2114
  function TooltipTrigger(props) {
1974
- return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
2115
+ return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
1975
2116
  }
1976
2117
  function TooltipPortal({ children, ...props }) {
1977
- return /* @__PURE__ */ jsx(Tooltip.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
2118
+ return /* @__PURE__ */ jsx(Tooltip.Portal, {
2119
+ ...props,
2120
+ children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
2121
+ });
1978
2122
  }
1979
2123
  function TooltipPositioner(props) {
1980
- return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
2124
+ return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
1981
2125
  }
1982
2126
  function TooltipPopup({ className, children, ...props }) {
1983
- return /* @__PURE__ */ jsx(
1984
- Tooltip.Popup,
1985
- {
1986
- className: `${popup}${className ? ` ${className}` : ""}`,
1987
- ...props,
1988
- children
1989
- }
1990
- );
1991
- }
1992
- function TooltipContent({
1993
- side = "top",
1994
- sideOffset = 6,
1995
- align = "center",
1996
- className,
1997
- children,
1998
- ...popupProps
1999
- }) {
2000
- return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
2001
- TooltipPositioner,
2002
- {
2003
- align,
2004
- className: positioner,
2005
- side,
2006
- sideOffset,
2007
- children: /* @__PURE__ */ jsx(TooltipPopup, { className, ...popupProps, children })
2008
- }
2009
- ) });
2010
- }
2011
- const createTooltipHandle = Tooltip.createHandle;
2012
- function ViewportGate({
2013
- children,
2014
- fallback,
2015
- threshold = 0.5
2016
- }) {
2017
- const ref = useRef(null);
2018
- const [visible, setVisible] = useState(false);
2019
- useEffect(() => {
2020
- if (visible) return;
2021
- const el = ref.current;
2022
- if (!el) return;
2023
- const obs = new IntersectionObserver(
2024
- (entries) => {
2025
- if (entries.some((e) => e.isIntersecting)) {
2026
- setVisible(true);
2027
- obs.disconnect();
2028
- }
2029
- },
2030
- { threshold }
2031
- );
2032
- obs.observe(el);
2033
- return () => obs.disconnect();
2034
- }, [visible, threshold]);
2035
- if (visible) return /* @__PURE__ */ jsx(Fragment, { children });
2036
- return /* @__PURE__ */ jsx("div", { ref, children: fallback });
2037
- }
2038
- export {
2039
- ActionBar,
2040
- ActionButton,
2041
- Alert,
2042
- AnimatedCheckbox,
2043
- AnimatedTabs,
2044
- AutoResizeTextArea,
2045
- Badge,
2046
- CodeBlock,
2047
- Collapsible,
2048
- CollapsiblePanel,
2049
- CollapsibleTrigger,
2050
- ColorPicker,
2051
- Combobox,
2052
- ComboboxContent,
2053
- ComboboxEmpty,
2054
- ComboboxGroup,
2055
- ComboboxGroupLabel,
2056
- ComboboxInput,
2057
- ComboboxItem,
2058
- ComboboxItemIndicator,
2059
- ComboboxList,
2060
- ComboboxTrigger,
2061
- Dialog,
2062
- DialogBackdrop,
2063
- DialogClose,
2064
- DialogDescription,
2065
- DialogFooter,
2066
- DialogHeader,
2067
- DialogPopup,
2068
- DialogPortal,
2069
- DialogStackProvider,
2070
- DialogTitle,
2071
- DialogTrigger,
2072
- DropdownMenu,
2073
- DropdownMenuCheckboxItem,
2074
- DropdownMenuContent,
2075
- DropdownMenuGroup,
2076
- DropdownMenuItem,
2077
- DropdownMenuLabel,
2078
- DropdownMenuRadioGroup,
2079
- DropdownMenuRadioItem,
2080
- DropdownMenuSeparator,
2081
- DropdownMenuTrigger,
2082
- Popover,
2083
- PopoverArrow,
2084
- PopoverClose,
2085
- PopoverDescription,
2086
- PopoverPanel,
2087
- PopoverPopup,
2088
- PopoverPortal,
2089
- PopoverPositioner,
2090
- PopoverTitle,
2091
- PopoverTrigger,
2092
- PortalThemeProvider2 as PortalThemeProvider,
2093
- PortalThemeWrapper2 as PortalThemeWrapper,
2094
- ScrollArea,
2095
- SegmentedControl,
2096
- Select,
2097
- SelectContent,
2098
- SelectGroup,
2099
- SelectGroupLabel,
2100
- SelectItem,
2101
- SelectSeparator,
2102
- SelectTrigger,
2103
- SelectValue,
2104
- Spinner,
2105
- StatusDot,
2106
- TooltipContent,
2107
- TooltipPopup,
2108
- TooltipPortal,
2109
- TooltipPositioner,
2110
- TooltipProvider,
2111
- TooltipRoot,
2112
- TooltipTrigger,
2113
- ViewportGate,
2114
- createTooltipHandle,
2115
- dismissAllDialogs,
2116
- dismissDialog,
2117
- dismissTopDialog,
2118
- getActionButtonClassName,
2119
- presentDialog,
2120
- usePopover,
2121
- usePortalTheme
2122
- };
2127
+ return /* @__PURE__ */ jsx(Tooltip.Popup, {
2128
+ className: `${popup}${className ? ` ${className}` : ""}`,
2129
+ ...props,
2130
+ children
2131
+ });
2132
+ }
2133
+ function TooltipContent({ side = "top", sideOffset = 6, align = "center", className, children, ...popupProps }) {
2134
+ return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
2135
+ align,
2136
+ className: positioner,
2137
+ side,
2138
+ sideOffset,
2139
+ children: /* @__PURE__ */ jsx(TooltipPopup, {
2140
+ className,
2141
+ ...popupProps,
2142
+ children
2143
+ })
2144
+ }) });
2145
+ }
2146
+ var createTooltipHandle = Tooltip.createHandle;
2147
+ //#endregion
2148
+ //#region src/components/viewport-gate/index.tsx
2149
+ function ViewportGate({ children, fallback, threshold = .5 }) {
2150
+ const ref = useRef(null);
2151
+ const [visible, setVisible] = useState(false);
2152
+ useEffect(() => {
2153
+ if (visible) return;
2154
+ const el = ref.current;
2155
+ if (!el) return;
2156
+ const obs = new IntersectionObserver((entries) => {
2157
+ if (entries.some((e) => e.isIntersecting)) {
2158
+ setVisible(true);
2159
+ obs.disconnect();
2160
+ }
2161
+ }, { threshold });
2162
+ obs.observe(el);
2163
+ return () => obs.disconnect();
2164
+ }, [visible, threshold]);
2165
+ if (visible) return /* @__PURE__ */ jsx(Fragment, { children });
2166
+ return /* @__PURE__ */ jsx("div", {
2167
+ ref,
2168
+ children: fallback
2169
+ });
2170
+ }
2171
+ //#endregion
2172
+ export { ActionBar, ActionButton, Alert, AnimatedCheckbox, AnimatedTabs, AutoResizeTextArea, Badge, CodeBlock, Collapsible, CollapsiblePanel, CollapsibleTrigger, ColorPicker, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogStackProvider, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Popover, PopoverArrow, PopoverClose, PopoverDescription, PopoverPanel, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, PortalThemeProvider, PortalThemeWrapper, ScrollArea, SegmentedControl, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spinner, StatusDot, TooltipContent, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, ViewportGate, createTooltipHandle, dismissAllDialogs, dismissDialog, dismissTopDialog, getActionButtonClassName, presentDialog, usePopover, usePortalTheme };