@haklex/rich-editor-ui 0.0.80 → 0.0.81

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 +1072 -1127
  2. package/dist/rich-editor-ui.css +2 -1
  3. package/package.json +2 -2
package/dist/index.mjs CHANGED
@@ -1,436 +1,441 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { useState, useRef, useCallback, useEffect, createContext, use, createElement, useSyncExternalStore } from "react";
3
- import { ChevronDown, Check, X } from "lucide-react";
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { createContext, createElement, use, useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
3
+ import { Check, ChevronDown, X } from "lucide-react";
4
4
  import { Popover as Popover$1 } from "@base-ui/react/popover";
5
- import { PortalThemeWrapper, PortalThemeProvider } from "@haklex/rich-style-token";
6
- import { PortalThemeProvider as PortalThemeProvider2, PortalThemeWrapper as PortalThemeWrapper2, usePortalTheme } from "@haklex/rich-style-token";
5
+ import { PortalThemeProvider, PortalThemeProvider as PortalThemeProvider$1, PortalThemeWrapper, PortalThemeWrapper as PortalThemeWrapper$1, usePortalTheme } from "@haklex/rich-style-token";
7
6
  import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
8
7
  import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
9
8
  import { Menu } from "@base-ui/react/menu";
10
9
  import { Tooltip } from "@base-ui/react/tooltip";
10
+ //#region ../../node_modules/.pnpm/@vanilla-extract+recipes@0.5.7_@vanilla-extract+css@1.18.0/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
11
11
  function toPrimitive(t, r) {
12
- if ("object" != typeof t || !t) return t;
13
- var e = t[Symbol.toPrimitive];
14
- if (void 0 !== e) {
15
- var i = e.call(t, r);
16
- if ("object" != typeof i) return i;
17
- throw new TypeError("@@toPrimitive must return a primitive value.");
18
- }
19
- return ("string" === r ? String : Number)(t);
12
+ if ("object" != typeof t || !t) return t;
13
+ var e = t[Symbol.toPrimitive];
14
+ if (void 0 !== e) {
15
+ var i = e.call(t, r || "default");
16
+ if ("object" != typeof i) return i;
17
+ throw new TypeError("@@toPrimitive must return a primitive value.");
18
+ }
19
+ return ("string" === r ? String : Number)(t);
20
20
  }
21
21
  function toPropertyKey(t) {
22
- var i = toPrimitive(t, "string");
23
- return "symbol" == typeof i ? i : String(i);
22
+ var i = toPrimitive(t, "string");
23
+ return "symbol" == typeof i ? i : String(i);
24
24
  }
25
25
  function _defineProperty(obj, key, value) {
26
- key = toPropertyKey(key);
27
- if (key in obj) {
28
- Object.defineProperty(obj, key, {
29
- value,
30
- enumerable: true,
31
- configurable: true,
32
- writable: true
33
- });
34
- } else {
35
- obj[key] = value;
36
- }
37
- return obj;
26
+ key = toPropertyKey(key);
27
+ if (key in obj) Object.defineProperty(obj, key, {
28
+ value,
29
+ enumerable: true,
30
+ configurable: true,
31
+ writable: true
32
+ });
33
+ else obj[key] = value;
34
+ return obj;
38
35
  }
39
36
  function ownKeys(e, r) {
40
- var t = Object.keys(e);
41
- if (Object.getOwnPropertySymbols) {
42
- var o = Object.getOwnPropertySymbols(e);
43
- r && (o = o.filter(function(r2) {
44
- return Object.getOwnPropertyDescriptor(e, r2).enumerable;
45
- })), t.push.apply(t, o);
46
- }
47
- return t;
37
+ var t = Object.keys(e);
38
+ if (Object.getOwnPropertySymbols) {
39
+ var o = Object.getOwnPropertySymbols(e);
40
+ r && (o = o.filter(function(r) {
41
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
42
+ })), t.push.apply(t, o);
43
+ }
44
+ return t;
48
45
  }
49
46
  function _objectSpread2(e) {
50
- for (var r = 1; r < arguments.length; r++) {
51
- var t = null != arguments[r] ? arguments[r] : {};
52
- r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
53
- _defineProperty(e, r2, t[r2]);
54
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
55
- Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
56
- });
57
- }
58
- return e;
47
+ for (var r = 1; r < arguments.length; r++) {
48
+ var t = null != arguments[r] ? arguments[r] : {};
49
+ r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
50
+ _defineProperty(e, r, t[r]);
51
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
52
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
53
+ });
54
+ }
55
+ return e;
59
56
  }
60
57
  function mapValues(input, fn) {
61
- var result = {};
62
- for (var _key in input) {
63
- result[_key] = fn(input[_key], _key);
64
- }
65
- return result;
58
+ var result = {};
59
+ for (var _key in input) result[_key] = fn(input[_key], _key);
60
+ return result;
66
61
  }
67
62
  var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
68
- for (var key of Object.keys(compoundCheck)) {
69
- var _selections$key;
70
- if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
71
- return false;
72
- }
73
- }
74
- return true;
63
+ for (var key of Object.keys(compoundCheck)) {
64
+ var _selections$key;
65
+ if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) return false;
66
+ }
67
+ return true;
75
68
  };
76
69
  var createRuntimeFn = (config) => {
77
- var runtimeFn = (options) => {
78
- var className = config.defaultClassName;
79
- var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
80
- for (var variantName in selections) {
81
- var _selections$variantNa;
82
- var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
83
- if (variantSelection != null) {
84
- var selection = variantSelection;
85
- if (typeof selection === "boolean") {
86
- selection = selection === true ? "true" : "false";
87
- }
88
- var selectionClassName = (
89
- // @ts-expect-error
90
- config.variantClassNames[variantName][selection]
91
- );
92
- if (selectionClassName) {
93
- className += " " + selectionClassName;
94
- }
95
- }
96
- }
97
- for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
98
- if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
99
- className += " " + compoundClassName;
100
- }
101
- }
102
- return className;
103
- };
104
- runtimeFn.variants = () => Object.keys(config.variantClassNames);
105
- runtimeFn.classNames = {
106
- get base() {
107
- return config.defaultClassName.split(" ")[0];
108
- },
109
- get variants() {
110
- return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
111
- }
112
- };
113
- return runtimeFn;
70
+ var runtimeFn = (options) => {
71
+ var className = config.defaultClassName;
72
+ var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
73
+ for (var variantName in selections) {
74
+ var _selections$variantNa;
75
+ var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
76
+ if (variantSelection != null) {
77
+ var selection = variantSelection;
78
+ if (typeof selection === "boolean") selection = selection === true ? "true" : "false";
79
+ var selectionClassName = config.variantClassNames[variantName][selection];
80
+ if (selectionClassName) className += " " + selectionClassName;
81
+ }
82
+ }
83
+ for (var [compoundCheck, compoundClassName] of config.compoundVariants) if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += " " + compoundClassName;
84
+ return className;
85
+ };
86
+ runtimeFn.variants = () => Object.keys(config.variantClassNames);
87
+ runtimeFn.classNames = {
88
+ get base() {
89
+ return config.defaultClassName.split(" ")[0];
90
+ },
91
+ get variants() {
92
+ return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
93
+ }
94
+ };
95
+ return runtimeFn;
96
+ };
97
+ //#endregion
98
+ //#region src/components/action-button/styles.css.ts
99
+ var semanticClassNames = {
100
+ actionBar: "re-ui-action-bar",
101
+ actionButton: "re-ui-action-btn",
102
+ actionButtonEnd: "re-ui-action-btn--end",
103
+ actionButtonDanger: "re-ui-action-btn--danger",
104
+ actionButtonIcon: "re-ui-action-btn--icon"
114
105
  };
115
- 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" };
116
106
  var actionBar = "_73ej2i0";
117
- var actionButton = 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" } }, defaultVariants: { variant: "ghost", size: "sm", icon: false, end: false, danger: false }, compoundVariants: [[{ icon: true, size: "sm" }, "_73ej2if"], [{ icon: true, size: "md" }, "_73ej2ig"], [{ danger: true }, "_73ej2ih"]] });
107
+ var actionButton = createRuntimeFn({
108
+ defaultClassName: "_73ej2i1",
109
+ variantClassNames: {
110
+ variant: {
111
+ ghost: "_73ej2i2",
112
+ solid: "_73ej2i3",
113
+ outline: "_73ej2i4",
114
+ accent: "_73ej2i5"
115
+ },
116
+ size: {
117
+ sm: "_73ej2i6",
118
+ md: "_73ej2i7",
119
+ lg: "_73ej2i8"
120
+ },
121
+ icon: {
122
+ true: "_73ej2i9",
123
+ false: "_73ej2ia"
124
+ },
125
+ end: {
126
+ true: "_73ej2ib",
127
+ false: "_73ej2ic"
128
+ },
129
+ danger: {
130
+ true: "_73ej2id",
131
+ false: "_73ej2ie"
132
+ }
133
+ },
134
+ defaultVariants: {
135
+ variant: "ghost",
136
+ size: "sm",
137
+ icon: false,
138
+ end: false,
139
+ danger: false
140
+ },
141
+ compoundVariants: [
142
+ [{
143
+ icon: true,
144
+ size: "sm"
145
+ }, "_73ej2if"],
146
+ [{
147
+ icon: true,
148
+ size: "md"
149
+ }, "_73ej2ig"],
150
+ [{ danger: true }, "_73ej2ih"]
151
+ ]
152
+ });
153
+ //#endregion
154
+ //#region src/components/action-button/index.tsx
118
155
  function ActionBar({ className, gap, style, ...props }) {
119
- return /* @__PURE__ */ jsx(
120
- "div",
121
- {
122
- className: `${actionBar} ${semanticClassNames.actionBar}${className ? ` ${className}` : ""}`,
123
- style: gap != null ? { ...style, gap } : style,
124
- ...props
125
- }
126
- );
127
- }
128
- function ActionButton({
129
- variant,
130
- size,
131
- end = false,
132
- danger = false,
133
- icon = false,
134
- className,
135
- type = "button",
136
- ...props
137
- }) {
138
- const semanticParts = [semanticClassNames.actionButton];
139
- if (end) semanticParts.push(semanticClassNames.actionButtonEnd);
140
- if (danger) semanticParts.push(semanticClassNames.actionButtonDanger);
141
- if (icon) semanticParts.push(semanticClassNames.actionButtonIcon);
142
- const recipeClass = actionButton({ variant, size, end, danger, icon });
143
- return /* @__PURE__ */ jsx(
144
- "button",
145
- {
146
- className: `${recipeClass} ${semanticParts.join(" ")}${className ? ` ${className}` : ""}`,
147
- type,
148
- ...props
149
- }
150
- );
156
+ return /* @__PURE__ */ jsx("div", {
157
+ className: `${actionBar} ${semanticClassNames.actionBar}${className ? ` ${className}` : ""}`,
158
+ style: gap != null ? {
159
+ ...style,
160
+ gap
161
+ } : style,
162
+ ...props
163
+ });
164
+ }
165
+ function ActionButton({ variant, size, end = false, danger = false, icon = false, className, type = "button", ...props }) {
166
+ const semanticParts = [semanticClassNames.actionButton];
167
+ if (end) semanticParts.push(semanticClassNames.actionButtonEnd);
168
+ if (danger) semanticParts.push(semanticClassNames.actionButtonDanger);
169
+ if (icon) semanticParts.push(semanticClassNames.actionButtonIcon);
170
+ return /* @__PURE__ */ jsx("button", {
171
+ className: `${actionButton({
172
+ variant,
173
+ size,
174
+ end,
175
+ danger,
176
+ icon
177
+ })} ${semanticParts.join(" ")}${className ? ` ${className}` : ""}`,
178
+ type,
179
+ ...props
180
+ });
151
181
  }
152
182
  function getActionButtonClassName(options) {
153
- return `${actionButton(options)} ${semanticClassNames.actionButton}`;
183
+ return `${actionButton(options)} ${semanticClassNames.actionButton}`;
154
184
  }
185
+ //#endregion
186
+ //#region src/components/animated-tabs/styles.css.ts
155
187
  var root$1 = "iryuae0";
156
188
  var tablist = "iryuae1";
157
189
  var tab = "iryuae2";
158
190
  var tabActive = "iryuae3";
159
191
  var border = "iryuae4";
160
192
  var indicator$1 = "iryuae5";
193
+ //#endregion
194
+ //#region src/components/animated-tabs/index.tsx
161
195
  function cn(...parts) {
162
- return parts.filter(Boolean).join(" ");
196
+ return parts.filter(Boolean).join(" ");
163
197
  }
164
198
  function AnimatedTabs({ tabs, defaultTab, value, onChange, className }) {
165
- const isControlled = value !== void 0;
166
- const [internalTab, setInternalTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
167
- const activeTab = isControlled ? value : internalTab;
168
- const [indicator2, setIndicator] = useState({
169
- left: 0,
170
- width: 0
171
- });
172
- const tabRefs = useRef(/* @__PURE__ */ new Map());
173
- const containerRef = useRef(null);
174
- const updateIndicator = useCallback(() => {
175
- const activeEl = tabRefs.current.get(activeTab);
176
- const container2 = containerRef.current;
177
- if (activeEl && container2) {
178
- const containerRect = container2.getBoundingClientRect();
179
- const tabRect = activeEl.getBoundingClientRect();
180
- setIndicator({
181
- left: tabRect.left - containerRect.left,
182
- width: tabRect.width
183
- });
184
- }
185
- }, [activeTab]);
186
- useEffect(() => {
187
- updateIndicator();
188
- }, [updateIndicator]);
189
- useEffect(() => {
190
- window.addEventListener("resize", updateIndicator);
191
- return () => window.removeEventListener("resize", updateIndicator);
192
- }, [updateIndicator]);
193
- const handleTabClick = (tabId) => {
194
- if (!isControlled) {
195
- setInternalTab(tabId);
196
- }
197
- onChange?.(tabId);
198
- };
199
- return /* @__PURE__ */ jsxs("div", { className: cn(root$1, className), ref: containerRef, children: [
200
- /* @__PURE__ */ jsx("div", { "aria-orientation": "horizontal", className: tablist, role: "tablist", children: tabs.map((tab$1) => /* @__PURE__ */ jsx(
201
- "button",
202
- {
203
- "aria-selected": activeTab === tab$1.id,
204
- className: cn(tab, activeTab === tab$1.id ? tabActive : void 0),
205
- role: "tab",
206
- type: "button",
207
- ref: (el) => {
208
- if (el) {
209
- tabRefs.current.set(tab$1.id, el);
210
- } else {
211
- tabRefs.current.delete(tab$1.id);
212
- }
213
- },
214
- onClick: () => handleTabClick(tab$1.id),
215
- children: tab$1.label
216
- },
217
- tab$1.id
218
- )) }),
219
- /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: border }),
220
- /* @__PURE__ */ jsx(
221
- "div",
222
- {
223
- "aria-hidden": "true",
224
- className: indicator$1,
225
- style: {
226
- left: indicator2.left,
227
- width: indicator2.width
228
- }
229
- }
230
- )
231
- ] });
232
- }
199
+ const isControlled = value !== void 0;
200
+ const [internalTab, setInternalTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
201
+ const activeTab = isControlled ? value : internalTab;
202
+ const [indicator, setIndicator] = useState({
203
+ left: 0,
204
+ width: 0
205
+ });
206
+ const tabRefs = useRef(/* @__PURE__ */ new Map());
207
+ const containerRef = useRef(null);
208
+ const updateIndicator = useCallback(() => {
209
+ const activeEl = tabRefs.current.get(activeTab);
210
+ const container = containerRef.current;
211
+ if (activeEl && container) {
212
+ const containerRect = container.getBoundingClientRect();
213
+ const tabRect = activeEl.getBoundingClientRect();
214
+ setIndicator({
215
+ left: tabRect.left - containerRect.left,
216
+ width: tabRect.width
217
+ });
218
+ }
219
+ }, [activeTab]);
220
+ useEffect(() => {
221
+ updateIndicator();
222
+ }, [updateIndicator]);
223
+ useEffect(() => {
224
+ window.addEventListener("resize", updateIndicator);
225
+ return () => window.removeEventListener("resize", updateIndicator);
226
+ }, [updateIndicator]);
227
+ const handleTabClick = (tabId) => {
228
+ if (!isControlled) setInternalTab(tabId);
229
+ onChange?.(tabId);
230
+ };
231
+ return /* @__PURE__ */ jsxs("div", {
232
+ className: cn(root$1, className),
233
+ ref: containerRef,
234
+ children: [
235
+ /* @__PURE__ */ jsx("div", {
236
+ "aria-orientation": "horizontal",
237
+ className: tablist,
238
+ role: "tablist",
239
+ children: tabs.map((tab$1) => /* @__PURE__ */ jsx("button", {
240
+ "aria-selected": activeTab === tab$1.id,
241
+ className: cn(tab, activeTab === tab$1.id ? tabActive : void 0),
242
+ role: "tab",
243
+ type: "button",
244
+ ref: (el) => {
245
+ if (el) tabRefs.current.set(tab$1.id, el);
246
+ else tabRefs.current.delete(tab$1.id);
247
+ },
248
+ onClick: () => handleTabClick(tab$1.id),
249
+ children: tab$1.label
250
+ }, tab$1.id))
251
+ }),
252
+ /* @__PURE__ */ jsx("div", {
253
+ "aria-hidden": "true",
254
+ className: border
255
+ }),
256
+ /* @__PURE__ */ jsx("div", {
257
+ "aria-hidden": "true",
258
+ className: indicator$1,
259
+ style: {
260
+ left: indicator.left,
261
+ width: indicator.width
262
+ }
263
+ })
264
+ ]
265
+ });
266
+ }
267
+ //#endregion
268
+ //#region src/components/checkbox/styles.css.ts
233
269
  var root = "_10muorc2";
234
- var rootDisabled = "_10muorc3";
235
270
  var box = "_10muorc4";
236
271
  var boxUnchecked = "_10muorc5";
237
272
  var boxChecked = "_10muorc6";
238
- var boxBouncing = "_10muorc7";
239
273
  var checkmark = "_10muorc8";
240
274
  var checkmarkVisible = "_10muorc9";
241
275
  var checkmarkHidden = "_10muorca";
242
276
  var ripple = "_10muorcb";
243
- var rippleActive = "_10muorcc";
244
- var labelArea = "_10muorcd";
245
- var label$1 = "_10muorce";
246
- var labelDisabled = "_10muorcf";
247
- var description$2 = "_10muorcg";
277
+ //#endregion
278
+ //#region src/components/checkbox/index.tsx
248
279
  function cx(...args) {
249
- return args.filter(Boolean).join(" ");
250
- }
251
- function AnimatedCheckbox({
252
- label: label2,
253
- description: description2,
254
- checked: controlledChecked,
255
- defaultChecked = false,
256
- onChange,
257
- disabled = false,
258
- className
259
- }) {
260
- const [internalChecked, setInternalChecked] = useState(defaultChecked);
261
- const [bouncing, setBouncing] = useState(false);
262
- const isControlled = controlledChecked !== void 0;
263
- const isChecked = isControlled ? controlledChecked : internalChecked;
264
- const isFirstRender = useRef(true);
265
- const rippleKey = useRef(0);
266
- useEffect(() => {
267
- if (isFirstRender.current) {
268
- isFirstRender.current = false;
269
- return;
270
- }
271
- setBouncing(true);
272
- rippleKey.current += 1;
273
- const timer = setTimeout(() => setBouncing(false), 400);
274
- return () => clearTimeout(timer);
275
- }, [isChecked]);
276
- const handleToggle = () => {
277
- if (disabled) return;
278
- const next = !isChecked;
279
- if (!isControlled) setInternalChecked(next);
280
- onChange?.(next);
281
- };
282
- return /* @__PURE__ */ jsxs(
283
- "button",
284
- {
285
- "aria-checked": isChecked,
286
- "aria-disabled": disabled,
287
- className: cx(root, disabled && rootDisabled, className),
288
- role: "checkbox",
289
- type: "button",
290
- onClick: handleToggle,
291
- children: [
292
- /* @__PURE__ */ jsxs(
293
- "span",
294
- {
295
- className: cx(
296
- box,
297
- isChecked ? boxChecked : boxUnchecked,
298
- bouncing && boxBouncing
299
- ),
300
- children: [
301
- /* @__PURE__ */ jsx(
302
- "svg",
303
- {
304
- className: cx(checkmark, isChecked ? checkmarkVisible : checkmarkHidden),
305
- fill: "none",
306
- viewBox: "0 0 12 10",
307
- children: /* @__PURE__ */ jsx(
308
- "path",
309
- {
310
- d: "M1 5.5L4 8.5L11 1.5",
311
- stroke: "currentColor",
312
- strokeLinecap: "round",
313
- strokeLinejoin: "round",
314
- strokeWidth: "2",
315
- style: {
316
- color: "#fff",
317
- strokeDasharray: 20,
318
- strokeDashoffset: isChecked ? 0 : 20,
319
- transition: isChecked ? "stroke-dashoffset 0.4s ease-out 0.1s" : "stroke-dashoffset 0.2s ease-in"
320
- }
321
- }
322
- )
323
- }
324
- ),
325
- /* @__PURE__ */ jsx("span", { className: cx(ripple, bouncing && rippleActive) }, rippleKey.current)
326
- ]
327
- }
328
- ),
329
- (label2 || description2) && /* @__PURE__ */ jsxs("span", { className: labelArea, children: [
330
- label2 && /* @__PURE__ */ jsx("span", { className: cx(label$1, disabled && labelDisabled), children: label2 }),
331
- description2 && /* @__PURE__ */ jsx("span", { className: description$2, children: description2 })
332
- ] })
333
- ]
334
- }
335
- );
336
- }
280
+ return args.filter(Boolean).join(" ");
281
+ }
282
+ function AnimatedCheckbox({ label, description, checked: controlledChecked, defaultChecked = false, onChange, disabled = false, className }) {
283
+ const [internalChecked, setInternalChecked] = useState(defaultChecked);
284
+ const [bouncing, setBouncing] = useState(false);
285
+ const isControlled = controlledChecked !== void 0;
286
+ const isChecked = isControlled ? controlledChecked : internalChecked;
287
+ const isFirstRender = useRef(true);
288
+ const rippleKey = useRef(0);
289
+ useEffect(() => {
290
+ if (isFirstRender.current) {
291
+ isFirstRender.current = false;
292
+ return;
293
+ }
294
+ setBouncing(true);
295
+ rippleKey.current += 1;
296
+ const timer = setTimeout(() => setBouncing(false), 400);
297
+ return () => clearTimeout(timer);
298
+ }, [isChecked]);
299
+ const handleToggle = () => {
300
+ if (disabled) return;
301
+ const next = !isChecked;
302
+ if (!isControlled) setInternalChecked(next);
303
+ onChange?.(next);
304
+ };
305
+ return /* @__PURE__ */ jsxs("button", {
306
+ "aria-checked": isChecked,
307
+ "aria-disabled": disabled,
308
+ className: cx(root, disabled && "_10muorc3", className),
309
+ role: "checkbox",
310
+ type: "button",
311
+ onClick: handleToggle,
312
+ children: [/* @__PURE__ */ jsxs("span", {
313
+ className: cx(box, isChecked ? boxChecked : boxUnchecked, bouncing && "_10muorc7"),
314
+ children: [/* @__PURE__ */ jsx("svg", {
315
+ className: cx(checkmark, isChecked ? checkmarkVisible : checkmarkHidden),
316
+ fill: "none",
317
+ viewBox: "0 0 12 10",
318
+ children: /* @__PURE__ */ jsx("path", {
319
+ d: "M1 5.5L4 8.5L11 1.5",
320
+ stroke: "currentColor",
321
+ strokeLinecap: "round",
322
+ strokeLinejoin: "round",
323
+ strokeWidth: "2",
324
+ style: {
325
+ color: "#fff",
326
+ strokeDasharray: 20,
327
+ strokeDashoffset: isChecked ? 0 : 20,
328
+ transition: isChecked ? "stroke-dashoffset 0.4s ease-out 0.1s" : "stroke-dashoffset 0.2s ease-in"
329
+ }
330
+ })
331
+ }), /* @__PURE__ */ jsx("span", { className: cx(ripple, bouncing && "_10muorcc") }, rippleKey.current)]
332
+ }), (label || description) && /* @__PURE__ */ jsxs("span", {
333
+ className: "_10muorcd",
334
+ children: [label && /* @__PURE__ */ jsx("span", {
335
+ className: cx("_10muorce", disabled && "_10muorcf"),
336
+ children: label
337
+ }), description && /* @__PURE__ */ jsx("span", {
338
+ className: "_10muorcg",
339
+ children: description
340
+ })]
341
+ })]
342
+ });
343
+ }
344
+ //#endregion
345
+ //#region src/lib/get-strict-context.tsx
337
346
  function getStrictContext(name) {
338
- const Context = createContext(void 0);
339
- const Provider = ({
340
- value,
341
- children
342
- }) => /* @__PURE__ */ jsx(Context.Provider, { value, children });
343
- const useSafeContext = () => {
344
- const ctx = use(Context);
345
- if (ctx === void 0) {
346
- throw new Error(`useContext must be used within ${name}`);
347
- }
348
- return ctx;
349
- };
350
- return [Provider, useSafeContext];
351
- }
347
+ const Context = createContext(void 0);
348
+ const Provider = ({ value, children }) => /* @__PURE__ */ jsx(Context.Provider, {
349
+ value,
350
+ children
351
+ });
352
+ const useSafeContext = () => {
353
+ const ctx = use(Context);
354
+ if (ctx === void 0) throw new Error(`useContext must be used within ${name ?? "a Provider"}`);
355
+ return ctx;
356
+ };
357
+ return [Provider, useSafeContext];
358
+ }
359
+ //#endregion
360
+ //#region src/components/popover/styles.css.ts
352
361
  var popup$4 = "f2q44l2";
353
362
  var arrow = "f2q44l3";
354
363
  var title$1 = "f2q44l4";
355
364
  var description$1 = "f2q44l5";
356
- const [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
365
+ //#endregion
366
+ //#region src/components/popover/index.tsx
367
+ var [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
357
368
  function Popover(props) {
358
- const [isOpen, setIsOpen] = useState(props?.defaultOpen ?? false);
359
- useEffect(() => {
360
- if (props.open !== void 0) setIsOpen(props.open);
361
- }, [props.open]);
362
- const handleOpenChange = (open, details) => {
363
- setIsOpen(open);
364
- props.onOpenChange?.(open, details);
365
- };
366
- return /* @__PURE__ */ jsx(PopoverProvider, { value: { isOpen }, children: /* @__PURE__ */ jsx(Popover$1.Root, { ...props, onOpenChange: handleOpenChange }) });
369
+ const [isOpen, setIsOpen] = useState(props?.defaultOpen ?? false);
370
+ useEffect(() => {
371
+ if (props.open !== void 0) setIsOpen(props.open);
372
+ }, [props.open]);
373
+ const handleOpenChange = (open, details) => {
374
+ setIsOpen(open);
375
+ props.onOpenChange?.(open, details);
376
+ };
377
+ return /* @__PURE__ */ jsx(PopoverProvider, {
378
+ value: { isOpen },
379
+ children: /* @__PURE__ */ jsx(Popover$1.Root, {
380
+ ...props,
381
+ onOpenChange: handleOpenChange
382
+ })
383
+ });
367
384
  }
368
385
  function PopoverTrigger(props) {
369
- return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props });
386
+ return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props });
370
387
  }
371
388
  function PopoverPortal({ children, ...props }) {
372
- return /* @__PURE__ */ jsx(Popover$1.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
389
+ return /* @__PURE__ */ jsx(Popover$1.Portal, {
390
+ ...props,
391
+ children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
392
+ });
373
393
  }
374
394
  function PopoverPositioner(props) {
375
- return /* @__PURE__ */ jsx(Popover$1.Positioner, { ...props });
376
- }
377
- function PopoverPopup({
378
- className,
379
- children,
380
- ...props
381
- }) {
382
- return /* @__PURE__ */ jsx(
383
- Popover$1.Popup,
384
- {
385
- className: `${popup$4}${className ? ` ${className}` : ""}`,
386
- ...props,
387
- children
388
- }
389
- );
390
- }
391
- function PopoverPanel({
392
- align = "center",
393
- side,
394
- sideOffset = 4,
395
- className,
396
- children,
397
- ...popupProps
398
- }) {
399
- return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, { align, side, sideOffset, children: /* @__PURE__ */ jsx(PopoverPopup, { className, ...popupProps, children }) }) });
395
+ return /* @__PURE__ */ jsx(Popover$1.Positioner, { ...props });
396
+ }
397
+ function PopoverPopup({ className, children, ...props }) {
398
+ return /* @__PURE__ */ jsx(Popover$1.Popup, {
399
+ className: `${popup$4}${className ? ` ${className}` : ""}`,
400
+ ...props,
401
+ children
402
+ });
403
+ }
404
+ function PopoverPanel({ align = "center", side, sideOffset = 4, className, children, ...popupProps }) {
405
+ return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
406
+ align,
407
+ side,
408
+ sideOffset,
409
+ children: /* @__PURE__ */ jsx(PopoverPopup, {
410
+ className,
411
+ ...popupProps,
412
+ children
413
+ })
414
+ }) });
400
415
  }
401
416
  function PopoverArrow({ className, ...props }) {
402
- return /* @__PURE__ */ jsx(
403
- Popover$1.Arrow,
404
- {
405
- className: `${arrow}${className ? ` ${className}` : ""}`,
406
- ...props
407
- }
408
- );
417
+ return /* @__PURE__ */ jsx(Popover$1.Arrow, {
418
+ className: `${arrow}${className ? ` ${className}` : ""}`,
419
+ ...props
420
+ });
409
421
  }
410
422
  function PopoverClose(props) {
411
- return /* @__PURE__ */ jsx(Popover$1.Close, { ...props });
423
+ return /* @__PURE__ */ jsx(Popover$1.Close, { ...props });
412
424
  }
413
425
  function PopoverTitle({ className, ...props }) {
414
- return /* @__PURE__ */ jsx(
415
- Popover$1.Title,
416
- {
417
- className: `${title$1}${className ? ` ${className}` : ""}`,
418
- ...props
419
- }
420
- );
421
- }
422
- function PopoverDescription({
423
- className,
424
- ...props
425
- }) {
426
- return /* @__PURE__ */ jsx(
427
- Popover$1.Description,
428
- {
429
- className: `${description$1}${className ? ` ${className}` : ""}`,
430
- ...props
431
- }
432
- );
433
- }
426
+ return /* @__PURE__ */ jsx(Popover$1.Title, {
427
+ className: `${title$1}${className ? ` ${className}` : ""}`,
428
+ ...props
429
+ });
430
+ }
431
+ function PopoverDescription({ className, ...props }) {
432
+ return /* @__PURE__ */ jsx(Popover$1.Description, {
433
+ className: `${description$1}${className ? ` ${className}` : ""}`,
434
+ ...props
435
+ });
436
+ }
437
+ //#endregion
438
+ //#region src/components/color-picker/styles.css.ts
434
439
  var trigger = "_17r50hf1";
435
440
  var triggerLabel = "_17r50hf2";
436
441
  var triggerLetter = "_17r50hf3";
@@ -440,141 +445,155 @@ var panel = "_17r50hf6";
440
445
  var grid = "_17r50hf7";
441
446
  var swatch = "_17r50hf8";
442
447
  var swatchDot = "_17r50hf9";
443
- var swatchCheck = "_17r50hfa";
444
- const TEXT_COLORS = [
445
- { name: "Default", value: "inherit" },
446
- { name: "Gray", value: "#6b7280" },
447
- { name: "Red", value: "#ef4444" },
448
- { name: "Orange", value: "#f97316" },
449
- { name: "Amber", value: "#f59e0b" },
450
- { name: "Green", value: "#22c55e" },
451
- { name: "Teal", value: "#14b8a6" },
452
- { name: "Blue", value: "#3b82f6" },
453
- { name: "Indigo", value: "#6366f1" },
454
- { name: "Pink", value: "#ec4899" }
448
+ //#endregion
449
+ //#region src/components/color-picker/index.tsx
450
+ var TEXT_COLORS = [
451
+ {
452
+ name: "Default",
453
+ value: "inherit"
454
+ },
455
+ {
456
+ name: "Gray",
457
+ value: "#6b7280"
458
+ },
459
+ {
460
+ name: "Red",
461
+ value: "#ef4444"
462
+ },
463
+ {
464
+ name: "Orange",
465
+ value: "#f97316"
466
+ },
467
+ {
468
+ name: "Amber",
469
+ value: "#f59e0b"
470
+ },
471
+ {
472
+ name: "Green",
473
+ value: "#22c55e"
474
+ },
475
+ {
476
+ name: "Teal",
477
+ value: "#14b8a6"
478
+ },
479
+ {
480
+ name: "Blue",
481
+ value: "#3b82f6"
482
+ },
483
+ {
484
+ name: "Indigo",
485
+ value: "#6366f1"
486
+ },
487
+ {
488
+ name: "Pink",
489
+ value: "#ec4899"
490
+ }
455
491
  ];
456
492
  function ColorPicker({ currentColor, onSelect, className }) {
457
- const displayColor = currentColor === "inherit" || !currentColor ? "currentColor" : currentColor;
458
- return /* @__PURE__ */ jsxs(Popover, { children: [
459
- /* @__PURE__ */ jsxs(
460
- PopoverTrigger,
461
- {
462
- className: `${trigger}${className ? ` ${className}` : ""}`,
463
- render: /* @__PURE__ */ jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault() }),
464
- children: [
465
- /* @__PURE__ */ jsxs("span", { className: triggerLabel, children: [
466
- /* @__PURE__ */ jsx("span", { className: triggerLetter, style: { color: displayColor }, children: "A" }),
467
- /* @__PURE__ */ jsx("span", { className: triggerBar, style: { backgroundColor: displayColor } })
468
- ] }),
469
- /* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })
470
- ]
471
- }
472
- ),
473
- /* @__PURE__ */ jsx(PopoverPanel, { className: panel, side: "bottom", sideOffset: 6, children: /* @__PURE__ */ jsx("div", { className: grid, children: TEXT_COLORS.map((color) => /* @__PURE__ */ jsxs(
474
- "button",
475
- {
476
- "aria-label": color.name,
477
- className: swatch,
478
- type: "button",
479
- onMouseDown: (e) => {
480
- e.preventDefault();
481
- onSelect(color.value);
482
- },
483
- children: [
484
- /* @__PURE__ */ jsx(
485
- "span",
486
- {
487
- className: swatchDot,
488
- style: {
489
- backgroundColor: color.value === "inherit" ? "currentColor" : color.value
490
- }
491
- }
492
- ),
493
- currentColor === color.value && /* @__PURE__ */ jsx(Check, { className: swatchCheck })
494
- ]
495
- },
496
- color.value
497
- )) }) })
498
- ] });
499
- }
493
+ const displayColor = currentColor === "inherit" || !currentColor ? "currentColor" : currentColor;
494
+ return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
495
+ className: `${trigger}${className ? ` ${className}` : ""}`,
496
+ render: /* @__PURE__ */ jsx("button", {
497
+ type: "button",
498
+ onMouseDown: (e) => e.preventDefault()
499
+ }),
500
+ children: [/* @__PURE__ */ jsxs("span", {
501
+ className: triggerLabel,
502
+ children: [/* @__PURE__ */ jsx("span", {
503
+ className: triggerLetter,
504
+ style: { color: displayColor },
505
+ children: "A"
506
+ }), /* @__PURE__ */ jsx("span", {
507
+ className: triggerBar,
508
+ style: { backgroundColor: displayColor }
509
+ })]
510
+ }), /* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })]
511
+ }), /* @__PURE__ */ jsx(PopoverPanel, {
512
+ className: panel,
513
+ side: "bottom",
514
+ sideOffset: 6,
515
+ children: /* @__PURE__ */ jsx("div", {
516
+ className: grid,
517
+ children: TEXT_COLORS.map((color) => /* @__PURE__ */ jsxs("button", {
518
+ "aria-label": color.name,
519
+ className: swatch,
520
+ type: "button",
521
+ onMouseDown: (e) => {
522
+ e.preventDefault();
523
+ onSelect(color.value);
524
+ },
525
+ children: [/* @__PURE__ */ jsx("span", {
526
+ className: swatchDot,
527
+ style: { backgroundColor: color.value === "inherit" ? "currentColor" : color.value }
528
+ }), currentColor === color.value && /* @__PURE__ */ jsx(Check, { className: "_17r50hfa" })]
529
+ }, color.value))
530
+ })
531
+ })] });
532
+ }
533
+ //#endregion
534
+ //#region src/components/combobox/styles.css.ts
500
535
  var popup$3 = "_2buwsh0";
501
536
  var item$2 = "_2buwsh1";
502
537
  var empty = "_2buwsh2";
538
+ //#endregion
539
+ //#region src/components/combobox/index.tsx
503
540
  function Combobox(props) {
504
- return /* @__PURE__ */ jsx(Combobox$1.Root, { ...props });
541
+ return /* @__PURE__ */ jsx(Combobox$1.Root, { ...props });
505
542
  }
506
543
  function ComboboxInput({ className, ...props }) {
507
- return /* @__PURE__ */ jsx(Combobox$1.Input, { className, ...props });
544
+ return /* @__PURE__ */ jsx(Combobox$1.Input, {
545
+ className,
546
+ ...props
547
+ });
508
548
  }
509
549
  function ComboboxPortal({ children }) {
510
- return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
511
- }
512
- function ComboboxContent({
513
- align = "start",
514
- alignOffset = 0,
515
- side = "bottom",
516
- sideOffset = 4,
517
- className,
518
- positionMethod = "absolute",
519
- children,
520
- ...popupProps
521
- }) {
522
- return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(
523
- Combobox$1.Positioner,
524
- {
525
- align,
526
- alignOffset,
527
- positionMethod,
528
- side,
529
- sideOffset,
530
- style: { zIndex: 50 },
531
- children: /* @__PURE__ */ jsx(
532
- Combobox$1.Popup,
533
- {
534
- className: `${popup$3}${className ? ` ${className}` : ""}`,
535
- ...popupProps,
536
- children
537
- }
538
- )
539
- }
540
- ) });
550
+ return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children }) });
551
+ }
552
+ function ComboboxContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, positionMethod = "absolute", children, ...popupProps }) {
553
+ return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
554
+ align,
555
+ alignOffset,
556
+ positionMethod,
557
+ side,
558
+ sideOffset,
559
+ style: { zIndex: 50 },
560
+ children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
561
+ className: `${popup$3}${className ? ` ${className}` : ""}`,
562
+ ...popupProps,
563
+ children
564
+ })
565
+ }) });
541
566
  }
542
567
  function ComboboxList(props) {
543
- return /* @__PURE__ */ jsx(Combobox$1.List, { ...props });
568
+ return /* @__PURE__ */ jsx(Combobox$1.List, { ...props });
544
569
  }
545
570
  function ComboboxItem({ className, ...props }) {
546
- return /* @__PURE__ */ jsx(
547
- Combobox$1.Item,
548
- {
549
- className: `${item$2}${className ? ` ${className}` : ""}`,
550
- ...props
551
- }
552
- );
571
+ return /* @__PURE__ */ jsx(Combobox$1.Item, {
572
+ className: `${item$2}${className ? ` ${className}` : ""}`,
573
+ ...props
574
+ });
553
575
  }
554
576
  function ComboboxItemIndicator(props) {
555
- return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { ...props });
577
+ return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { ...props });
556
578
  }
557
579
  function ComboboxEmpty({ className, ...props }) {
558
- return /* @__PURE__ */ jsx(
559
- Combobox$1.Empty,
560
- {
561
- className: `${empty}${className ? ` ${className}` : ""}`,
562
- ...props
563
- }
564
- );
580
+ return /* @__PURE__ */ jsx(Combobox$1.Empty, {
581
+ className: `${empty}${className ? ` ${className}` : ""}`,
582
+ ...props
583
+ });
565
584
  }
566
585
  function ComboboxGroup(props) {
567
- return /* @__PURE__ */ jsx(Combobox$1.Group, { ...props });
586
+ return /* @__PURE__ */ jsx(Combobox$1.Group, { ...props });
568
587
  }
569
588
  function ComboboxGroupLabel(props) {
570
- return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, { ...props });
589
+ return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, { ...props });
571
590
  }
591
+ //#endregion
592
+ //#region src/components/dialog/styles.css.ts
572
593
  var backdrop = "vwlngv4";
573
594
  var popup$2 = "vwlngv5";
574
- var closeButton = "vwlngv6";
575
595
  var header = "vwlngv7";
576
596
  var headerContent = "vwlngv8";
577
- var headerCloseButton = "vwlngv9";
578
597
  var footer = "vwlngva";
579
598
  var title = "vwlngvb";
580
599
  var description = "vwlngvc";
@@ -583,328 +602,320 @@ var sheetContainer = "vwlngvg";
583
602
  var sheetDragHandle = "vwlngvh";
584
603
  var sheetDragPill = "vwlngvi";
585
604
  var sheetContent = "vwlngvj";
586
- var sheetHeader = "vwlngvk";
605
+ //#endregion
606
+ //#region src/components/dialog/index.tsx
587
607
  function Dialog(props) {
588
- return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
608
+ return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
589
609
  }
590
610
  function DialogTrigger(props) {
591
- return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props });
611
+ return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ...props });
592
612
  }
593
613
  function DialogPortal({ children, ...props }) {
594
- return /* @__PURE__ */ jsx(Dialog$1.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
614
+ return /* @__PURE__ */ jsx(Dialog$1.Portal, {
615
+ ...props,
616
+ children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
617
+ });
595
618
  }
596
619
  function DialogBackdrop({ className, ...props }) {
597
- return /* @__PURE__ */ jsx(
598
- Dialog$1.Backdrop,
599
- {
600
- className: `${backdrop}${className ? ` ${className}` : ""}`,
601
- ...props
602
- }
603
- );
604
- }
605
- function DialogPopup({
606
- showCloseButton = true,
607
- className,
608
- children,
609
- ...props
610
- }) {
611
- return /* @__PURE__ */ jsxs(DialogPortal, { children: [
612
- /* @__PURE__ */ jsx(DialogBackdrop, {}),
613
- /* @__PURE__ */ jsxs(
614
- Dialog$1.Popup,
615
- {
616
- className: `${popup$2}${className ? ` ${className}` : ""}`,
617
- ...props,
618
- children: [
619
- children,
620
- showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { className: closeButton, children: /* @__PURE__ */ jsx(X, {}) })
621
- ]
622
- }
623
- )
624
- ] });
620
+ return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
621
+ className: `${backdrop}${className ? ` ${className}` : ""}`,
622
+ ...props
623
+ });
624
+ }
625
+ function DialogPopup({ showCloseButton = true, className, children, ...props }) {
626
+ return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
627
+ className: `${popup$2}${className ? ` ${className}` : ""}`,
628
+ ...props,
629
+ children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
630
+ className: "vwlngv6",
631
+ children: /* @__PURE__ */ jsx(X, {})
632
+ })]
633
+ })] });
625
634
  }
626
635
  function DialogClose(props) {
627
- return /* @__PURE__ */ jsx(Dialog$1.Close, { ...props });
636
+ return /* @__PURE__ */ jsx(Dialog$1.Close, { ...props });
628
637
  }
629
638
  function DialogHeader({ className, children, ...props }) {
630
- return /* @__PURE__ */ jsx("div", { className: `${header}${className ? ` ${className}` : ""}`, ...props, children: /* @__PURE__ */ jsx("div", { className: headerContent, children }) });
639
+ return /* @__PURE__ */ jsx("div", {
640
+ className: `${header}${className ? ` ${className}` : ""}`,
641
+ ...props,
642
+ children: /* @__PURE__ */ jsx("div", {
643
+ className: headerContent,
644
+ children
645
+ })
646
+ });
631
647
  }
632
648
  function DialogFooter({ className, ...props }) {
633
- return /* @__PURE__ */ jsx("div", { className: `${footer}${className ? ` ${className}` : ""}`, ...props });
649
+ return /* @__PURE__ */ jsx("div", {
650
+ className: `${footer}${className ? ` ${className}` : ""}`,
651
+ ...props
652
+ });
634
653
  }
635
654
  function DialogTitle({ className, ...props }) {
636
- return /* @__PURE__ */ jsx(
637
- Dialog$1.Title,
638
- {
639
- className: `${title}${className ? ` ${className}` : ""}`,
640
- ...props
641
- }
642
- );
655
+ return /* @__PURE__ */ jsx(Dialog$1.Title, {
656
+ className: `${title}${className ? ` ${className}` : ""}`,
657
+ ...props
658
+ });
643
659
  }
644
660
  function DialogDescription({ className, ...props }) {
645
- return /* @__PURE__ */ jsx(
646
- Dialog$1.Description,
647
- {
648
- className: `${description}${className ? ` ${className}` : ""}`,
649
- ...props
650
- }
651
- );
652
- }
653
- let stack = [];
654
- let idCounter = 0;
655
- const listeners = /* @__PURE__ */ new Set();
661
+ return /* @__PURE__ */ jsx(Dialog$1.Description, {
662
+ className: `${description}${className ? ` ${className}` : ""}`,
663
+ ...props
664
+ });
665
+ }
666
+ //#endregion
667
+ //#region src/components/dialog/store.ts
668
+ var stack = [];
669
+ var idCounter = 0;
670
+ var listeners = /* @__PURE__ */ new Set();
656
671
  function emit() {
657
- for (const fn of listeners) fn();
672
+ for (const fn of listeners) fn();
658
673
  }
659
674
  function subscribe(fn) {
660
- listeners.add(fn);
661
- return () => {
662
- listeners.delete(fn);
663
- };
675
+ listeners.add(fn);
676
+ return () => {
677
+ listeners.delete(fn);
678
+ };
664
679
  }
665
680
  function getSnapshot() {
666
- return stack;
681
+ return stack;
667
682
  }
668
683
  function presentDialog(props) {
669
- const id = `dialog-${++idCounter}`;
670
- stack = [...stack, { ...props, id, open: true }];
671
- emit();
672
- return () => dismissDialog(id);
684
+ const id = `dialog-${++idCounter}`;
685
+ stack = [...stack, {
686
+ ...props,
687
+ id,
688
+ open: true
689
+ }];
690
+ emit();
691
+ return () => dismissDialog(id);
673
692
  }
674
693
  function removeDialog(id) {
675
- stack = stack.filter((item2) => item2.id !== id);
676
- emit();
694
+ stack = stack.filter((item) => item.id !== id);
695
+ emit();
677
696
  }
678
697
  function dismissDialog(id) {
679
- stack = stack.map((item2) => item2.id === id ? { ...item2, open: false } : item2);
680
- emit();
698
+ stack = stack.map((item) => item.id === id ? {
699
+ ...item,
700
+ open: false
701
+ } : item);
702
+ emit();
681
703
  }
682
704
  function dismissTopDialog() {
683
- for (let i = stack.length - 1; i >= 0; i--) {
684
- if (stack[i].open) {
685
- dismissDialog(stack[i].id);
686
- return;
687
- }
688
- }
705
+ for (let i = stack.length - 1; i >= 0; i--) if (stack[i].open) {
706
+ dismissDialog(stack[i].id);
707
+ return;
708
+ }
689
709
  }
690
710
  function dismissAllDialogs() {
691
- stack = stack.map((item2) => ({ ...item2, open: false }));
692
- emit();
693
- }
694
- const SheetStackEntry = ({ item: item2, index }) => {
695
- const {
696
- id,
697
- open,
698
- title: title$12,
699
- description: description$12,
700
- content,
701
- className,
702
- portalClassName,
703
- theme = "light",
704
- clickOutsideToDismiss = true
705
- } = item2;
706
- const dismiss = useCallback(() => dismissDialog(id), [id]);
707
- useEffect(() => {
708
- if (!open) {
709
- const timer = setTimeout(() => removeDialog(id), 200);
710
- return () => clearTimeout(timer);
711
- }
712
- }, [open, id]);
713
- useEffect(() => {
714
- const original = document.body.style.overflow;
715
- document.body.style.overflow = "hidden";
716
- return () => {
717
- document.body.style.overflow = original;
718
- };
719
- }, []);
720
- const sheetRef = useRef(null);
721
- const contentRef = useRef(null);
722
- const dragState = useRef(null);
723
- const [translateY, setTranslateY] = useState(0);
724
- const [isDragging, setIsDragging] = useState(false);
725
- const handleTouchStart = useCallback((e) => {
726
- const touch = e.touches[0];
727
- const target = e.target;
728
- const isHandle = target.closest(`.${sheetDragHandle}`) !== null;
729
- const contentEl = contentRef.current;
730
- const isContentAtTop = !contentEl || contentEl.scrollTop <= 0;
731
- if (!isHandle && !isContentAtTop) return;
732
- dragState.current = {
733
- startY: touch.clientY,
734
- startTime: Date.now(),
735
- currentY: touch.clientY,
736
- isDragging: false
737
- };
738
- }, []);
739
- const handleTouchMove = useCallback((e) => {
740
- const state = dragState.current;
741
- if (!state) return;
742
- const touch = e.touches[0];
743
- const deltaY = touch.clientY - state.startY;
744
- if (deltaY < 0) {
745
- if (state.isDragging) {
746
- setTranslateY(0);
747
- setIsDragging(false);
748
- state.isDragging = false;
749
- }
750
- return;
751
- }
752
- if (!state.isDragging && deltaY > 5) {
753
- state.isDragging = true;
754
- setIsDragging(true);
755
- }
756
- if (state.isDragging) {
757
- e.preventDefault();
758
- state.currentY = touch.clientY;
759
- setTranslateY(deltaY);
760
- }
761
- }, []);
762
- const handleTouchEnd = useCallback(() => {
763
- const state = dragState.current;
764
- if (!state || !state.isDragging) {
765
- dragState.current = null;
766
- return;
767
- }
768
- const deltaY = state.currentY - state.startY;
769
- const elapsed = Date.now() - state.startTime;
770
- const velocity = deltaY / Math.max(elapsed, 1) * 1e3;
771
- const sheetHeight2 = sheetRef.current?.offsetHeight ?? 0;
772
- const threshold = sheetHeight2 * 0.25;
773
- if (deltaY > threshold || velocity > 500) {
774
- dismiss();
775
- } else {
776
- setTranslateY(0);
777
- }
778
- setIsDragging(false);
779
- dragState.current = null;
780
- }, [dismiss]);
781
- const zIndex = 50 + index;
782
- const sheetHeight = sheetRef.current?.offsetHeight || 1;
783
- const backdropOpacity = isDragging ? Math.max(0, 1 - translateY / sheetHeight) * 0.5 : 0.5;
784
- return /* @__PURE__ */ jsx(PortalThemeProvider, { className: portalClassName ?? "", theme, children: /* @__PURE__ */ jsxs(PortalThemeWrapper, { children: [
785
- /* @__PURE__ */ jsx(
786
- "div",
787
- {
788
- className: sheetBackdrop,
789
- style: {
790
- zIndex,
791
- opacity: open ? backdropOpacity : 0,
792
- pointerEvents: open ? "auto" : "none"
793
- },
794
- onClick: clickOutsideToDismiss ? dismiss : void 0
795
- }
796
- ),
797
- /* @__PURE__ */ jsxs(
798
- "div",
799
- {
800
- className: `${sheetContainer}${className ? ` ${className}` : ""}`,
801
- "data-closed": !open ? "" : void 0,
802
- "data-open": open ? "" : void 0,
803
- ref: sheetRef,
804
- style: {
805
- zIndex: zIndex + 1,
806
- transform: isDragging ? `translateY(${translateY}px)` : void 0,
807
- transition: isDragging ? "none" : "transform 300ms cubic-bezier(0.32, 0.72, 0, 1)"
808
- },
809
- onTouchEnd: handleTouchEnd,
810
- onTouchMove: handleTouchMove,
811
- onTouchStart: handleTouchStart,
812
- children: [
813
- /* @__PURE__ */ jsx("div", { className: sheetDragHandle, children: /* @__PURE__ */ jsx("div", { className: sheetDragPill }) }),
814
- (title$12 || description$12) && /* @__PURE__ */ jsxs("div", { className: sheetHeader, children: [
815
- title$12 && /* @__PURE__ */ jsx("div", { className: title, children: title$12 }),
816
- description$12 && /* @__PURE__ */ jsx("div", { className: description, children: description$12 })
817
- ] }),
818
- /* @__PURE__ */ jsx("div", { className: sheetContent, ref: contentRef, children: createElement(content, { dismiss }) })
819
- ]
820
- }
821
- )
822
- ] }) });
711
+ stack = stack.map((item) => ({
712
+ ...item,
713
+ open: false
714
+ }));
715
+ emit();
716
+ }
717
+ //#endregion
718
+ //#region src/components/dialog/sheet.tsx
719
+ var SheetStackEntry = ({ item, index }) => {
720
+ const { id, open, title: title$3, description: description$4, content, className, portalClassName, theme = "light", clickOutsideToDismiss = true } = item;
721
+ const dismiss = useCallback(() => dismissDialog(id), [id]);
722
+ useEffect(() => {
723
+ if (!open) {
724
+ const timer = setTimeout(() => removeDialog(id), 200);
725
+ return () => clearTimeout(timer);
726
+ }
727
+ }, [open, id]);
728
+ useEffect(() => {
729
+ const original = document.body.style.overflow;
730
+ document.body.style.overflow = "hidden";
731
+ return () => {
732
+ document.body.style.overflow = original;
733
+ };
734
+ }, []);
735
+ const sheetRef = useRef(null);
736
+ const contentRef = useRef(null);
737
+ const dragState = useRef(null);
738
+ const [translateY, setTranslateY] = useState(0);
739
+ const [isDragging, setIsDragging] = useState(false);
740
+ const handleTouchStart = useCallback((e) => {
741
+ const touch = e.touches[0];
742
+ const isHandle = e.target.closest(`.${sheetDragHandle}`) !== null;
743
+ const contentEl = contentRef.current;
744
+ const isContentAtTop = !contentEl || contentEl.scrollTop <= 0;
745
+ if (!isHandle && !isContentAtTop) return;
746
+ dragState.current = {
747
+ startY: touch.clientY,
748
+ startTime: Date.now(),
749
+ currentY: touch.clientY,
750
+ isDragging: false
751
+ };
752
+ }, []);
753
+ const handleTouchMove = useCallback((e) => {
754
+ const state = dragState.current;
755
+ if (!state) return;
756
+ const touch = e.touches[0];
757
+ const deltaY = touch.clientY - state.startY;
758
+ if (deltaY < 0) {
759
+ if (state.isDragging) {
760
+ setTranslateY(0);
761
+ setIsDragging(false);
762
+ state.isDragging = false;
763
+ }
764
+ return;
765
+ }
766
+ if (!state.isDragging && deltaY > 5) {
767
+ state.isDragging = true;
768
+ setIsDragging(true);
769
+ }
770
+ if (state.isDragging) {
771
+ e.preventDefault();
772
+ state.currentY = touch.clientY;
773
+ setTranslateY(deltaY);
774
+ }
775
+ }, []);
776
+ const handleTouchEnd = useCallback(() => {
777
+ const state = dragState.current;
778
+ if (!state || !state.isDragging) {
779
+ dragState.current = null;
780
+ return;
781
+ }
782
+ const deltaY = state.currentY - state.startY;
783
+ const elapsed = Date.now() - state.startTime;
784
+ const velocity = deltaY / Math.max(elapsed, 1) * 1e3;
785
+ if (deltaY > (sheetRef.current?.offsetHeight ?? 0) * .25 || velocity > 500) dismiss();
786
+ else setTranslateY(0);
787
+ setIsDragging(false);
788
+ dragState.current = null;
789
+ }, [dismiss]);
790
+ const zIndex = 50 + index;
791
+ const sheetHeight = sheetRef.current?.offsetHeight || 1;
792
+ const backdropOpacity = isDragging ? Math.max(0, 1 - translateY / sheetHeight) * .5 : .5;
793
+ return /* @__PURE__ */ jsx(PortalThemeProvider$1, {
794
+ className: portalClassName ?? "",
795
+ theme,
796
+ children: /* @__PURE__ */ jsxs(PortalThemeWrapper$1, { children: [/* @__PURE__ */ jsx("div", {
797
+ className: sheetBackdrop,
798
+ style: {
799
+ zIndex,
800
+ opacity: open ? backdropOpacity : 0,
801
+ pointerEvents: open ? "auto" : "none"
802
+ },
803
+ onClick: clickOutsideToDismiss ? dismiss : void 0
804
+ }), /* @__PURE__ */ jsxs("div", {
805
+ className: `${sheetContainer}${className ? ` ${className}` : ""}`,
806
+ "data-closed": !open ? "" : void 0,
807
+ "data-open": open ? "" : void 0,
808
+ ref: sheetRef,
809
+ style: {
810
+ zIndex: zIndex + 1,
811
+ transform: isDragging ? `translateY(${translateY}px)` : void 0,
812
+ transition: isDragging ? "none" : "transform 300ms cubic-bezier(0.32, 0.72, 0, 1)"
813
+ },
814
+ onTouchEnd: handleTouchEnd,
815
+ onTouchMove: handleTouchMove,
816
+ onTouchStart: handleTouchStart,
817
+ children: [
818
+ /* @__PURE__ */ jsx("div", {
819
+ className: sheetDragHandle,
820
+ children: /* @__PURE__ */ jsx("div", { className: sheetDragPill })
821
+ }),
822
+ (title$3 || description$4) && /* @__PURE__ */ jsxs("div", {
823
+ className: "vwlngvk",
824
+ children: [title$3 && /* @__PURE__ */ jsx("div", {
825
+ className: "vwlngvb",
826
+ children: title$3
827
+ }), description$4 && /* @__PURE__ */ jsx("div", {
828
+ className: "vwlngvc",
829
+ children: description$4
830
+ })]
831
+ }),
832
+ /* @__PURE__ */ jsx("div", {
833
+ className: sheetContent,
834
+ ref: contentRef,
835
+ children: createElement(content, { dismiss })
836
+ })
837
+ ]
838
+ })] })
839
+ });
823
840
  };
824
- const MOBILE_QUERY = "(max-width: 640px)";
841
+ //#endregion
842
+ //#region src/components/dialog/stack.tsx
843
+ var MOBILE_QUERY = "(max-width: 640px)";
825
844
  function useIsMobile() {
826
- return useSyncExternalStore(
827
- (cb) => {
828
- const mql = window.matchMedia(MOBILE_QUERY);
829
- mql.addEventListener("change", cb);
830
- return () => mql.removeEventListener("change", cb);
831
- },
832
- () => window.matchMedia(MOBILE_QUERY).matches,
833
- () => false
834
- );
845
+ return useSyncExternalStore((cb) => {
846
+ const mql = window.matchMedia(MOBILE_QUERY);
847
+ mql.addEventListener("change", cb);
848
+ return () => mql.removeEventListener("change", cb);
849
+ }, () => window.matchMedia(MOBILE_QUERY).matches, () => false);
835
850
  }
836
851
  function shouldUseSheet(sheet, isMobile) {
837
- if (sheet === true) return true;
838
- if (sheet === "auto") return isMobile;
839
- return false;
840
- }
841
- const CloseIcon = () => /* @__PURE__ */ jsx(X, {});
842
- const DialogStackEntry = ({ item: item2, index }) => {
843
- const {
844
- id,
845
- open,
846
- title: title$12,
847
- description: description$12,
848
- content,
849
- className,
850
- portalClassName,
851
- theme = "light",
852
- showCloseButton = true,
853
- clickOutsideToDismiss = true
854
- } = item2;
855
- const dismiss = useCallback(() => dismissDialog(id), [id]);
856
- useEffect(() => {
857
- if (!open) {
858
- const timer = setTimeout(() => {
859
- removeDialog(id);
860
- }, 150);
861
- return () => clearTimeout(timer);
862
- }
863
- }, [open, id]);
864
- const zIndex = 50 + index;
865
- return /* @__PURE__ */ jsx(
866
- Dialog$1.Root,
867
- {
868
- disablePointerDismissal: !clickOutsideToDismiss,
869
- open,
870
- onOpenChange: (open2) => {
871
- if (!open2) dismiss();
872
- },
873
- children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeProvider, { className: portalClassName ?? "", theme, children: /* @__PURE__ */ jsxs(PortalThemeWrapper, { children: [
874
- /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: backdrop, style: { zIndex } }),
875
- /* @__PURE__ */ jsxs(
876
- Dialog$1.Popup,
877
- {
878
- suppressHydrationWarning: true,
879
- className: `${popup$2}${className ? ` ${className}` : ""}`,
880
- "data-theme": theme,
881
- style: { zIndex: zIndex + 1 },
882
- children: [
883
- (title$12 || description$12 || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: header, children: [
884
- (title$12 || description$12) && /* @__PURE__ */ jsxs("div", { className: headerContent, children: [
885
- title$12 && /* @__PURE__ */ jsx(Dialog$1.Title, { className: title, children: title$12 }),
886
- description$12 && /* @__PURE__ */ jsx(Dialog$1.Description, { className: description, children: description$12 })
887
- ] }),
888
- showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { className: headerCloseButton, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
889
- ] }),
890
- createElement(content, { dismiss })
891
- ]
892
- }
893
- )
894
- ] }) }) })
895
- }
896
- );
852
+ if (sheet === true) return true;
853
+ if (sheet === "auto") return isMobile;
854
+ return false;
855
+ }
856
+ var CloseIcon = () => /* @__PURE__ */ jsx(X, {});
857
+ var DialogStackEntry = ({ item, index }) => {
858
+ const { id, open, title: title$2, description: description$3, content, className, portalClassName, theme = "light", showCloseButton = true, clickOutsideToDismiss = true } = item;
859
+ const dismiss = useCallback(() => dismissDialog(id), [id]);
860
+ useEffect(() => {
861
+ if (!open) {
862
+ const timer = setTimeout(() => {
863
+ removeDialog(id);
864
+ }, 150);
865
+ return () => clearTimeout(timer);
866
+ }
867
+ }, [open, id]);
868
+ const zIndex = 50 + index;
869
+ return /* @__PURE__ */ jsx(Dialog$1.Root, {
870
+ disablePointerDismissal: !clickOutsideToDismiss,
871
+ open,
872
+ onOpenChange: (open) => {
873
+ if (!open) dismiss();
874
+ },
875
+ children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeProvider$1, {
876
+ className: portalClassName ?? "",
877
+ theme,
878
+ children: /* @__PURE__ */ jsxs(PortalThemeWrapper$1, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
879
+ className: backdrop,
880
+ style: { zIndex }
881
+ }), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
882
+ suppressHydrationWarning: true,
883
+ className: `${popup$2}${className ? ` ${className}` : ""}`,
884
+ "data-theme": theme,
885
+ style: { zIndex: zIndex + 1 },
886
+ children: [(title$2 || description$3 || showCloseButton) && /* @__PURE__ */ jsxs("div", {
887
+ className: "vwlngv7",
888
+ children: [(title$2 || description$3) && /* @__PURE__ */ jsxs("div", {
889
+ className: "vwlngv8",
890
+ children: [title$2 && /* @__PURE__ */ jsx(Dialog$1.Title, {
891
+ className: "vwlngvb",
892
+ children: title$2
893
+ }), description$3 && /* @__PURE__ */ jsx(Dialog$1.Description, {
894
+ className: "vwlngvc",
895
+ children: description$3
896
+ })]
897
+ }), showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
898
+ className: "vwlngv9",
899
+ children: /* @__PURE__ */ jsx(CloseIcon, {})
900
+ })]
901
+ }), createElement(content, { dismiss })]
902
+ })] })
903
+ }) })
904
+ });
897
905
  };
898
- const DialogStackProvider = ({ children }) => {
899
- const stack2 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
900
- const isMobile = useIsMobile();
901
- return /* @__PURE__ */ jsxs(Fragment, { children: [
902
- children,
903
- stack2.map(
904
- (item2, index) => shouldUseSheet(item2.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, { index, item: item2 }, item2.id) : /* @__PURE__ */ jsx(DialogStackEntry, { index, item: item2 }, item2.id)
905
- )
906
- ] });
906
+ var DialogStackProvider = ({ children }) => {
907
+ const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
908
+ const isMobile = useIsMobile();
909
+ return /* @__PURE__ */ jsxs(Fragment, { children: [children, stack.map((item, index) => shouldUseSheet(item.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, {
910
+ index,
911
+ item
912
+ }, item.id) : /* @__PURE__ */ jsx(DialogStackEntry, {
913
+ index,
914
+ item
915
+ }, item.id))] });
907
916
  };
917
+ //#endregion
918
+ //#region src/components/dropdown-menu/styles.css.ts
908
919
  var popup$1 = "oih0op0";
909
920
  var positioner$1 = "oih0op1";
910
921
  var item$1 = "oih0op2";
@@ -914,397 +925,331 @@ var checkboxItem = "oih0op3";
914
925
  var radioItem = "oih0op3";
915
926
  var checkboxIndicator = "oih0op4";
916
927
  var radioIndicator = "oih0op5";
928
+ //#endregion
929
+ //#region src/components/dropdown-menu/index.tsx
917
930
  function DropdownMenu(props) {
918
- return /* @__PURE__ */ jsx(Menu.Root, { "data-slot": "dropdown-menu", ...props });
931
+ return /* @__PURE__ */ jsx(Menu.Root, {
932
+ "data-slot": "dropdown-menu",
933
+ ...props
934
+ });
919
935
  }
920
936
  function DropdownMenuTrigger(props) {
921
- return /* @__PURE__ */ jsx(Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
937
+ return /* @__PURE__ */ jsx(Menu.Trigger, {
938
+ "data-slot": "dropdown-menu-trigger",
939
+ ...props
940
+ });
922
941
  }
923
942
  function DropdownMenuPortal({ children }) {
924
- return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
925
- }
926
- function DropdownMenuContent({
927
- align = "start",
928
- alignOffset = 0,
929
- side = "bottom",
930
- sideOffset = 4,
931
- className,
932
- positionMethod = "absolute",
933
- children,
934
- ...popupProps
935
- }) {
936
- return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
937
- Menu.Positioner,
938
- {
939
- align,
940
- alignOffset,
941
- className: positioner$1,
942
- "data-slot": "dropdown-menu-positioner",
943
- positionMethod,
944
- side,
945
- sideOffset,
946
- style: { zIndex: 50 },
947
- children: /* @__PURE__ */ jsx(
948
- Menu.Popup,
949
- {
950
- className: `${popup$1}${className ? ` ${className}` : ""}`,
951
- "data-slot": "dropdown-menu-content",
952
- ...popupProps,
953
- children
954
- }
955
- )
956
- }
957
- ) });
943
+ return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children }) });
944
+ }
945
+ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, positionMethod = "absolute", children, ...popupProps }) {
946
+ return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
947
+ align,
948
+ alignOffset,
949
+ className: positioner$1,
950
+ "data-slot": "dropdown-menu-positioner",
951
+ positionMethod,
952
+ side,
953
+ sideOffset,
954
+ style: { zIndex: 50 },
955
+ children: /* @__PURE__ */ jsx(Menu.Popup, {
956
+ className: `${popup$1}${className ? ` ${className}` : ""}`,
957
+ "data-slot": "dropdown-menu-content",
958
+ ...popupProps,
959
+ children
960
+ })
961
+ }) });
958
962
  }
959
963
  function DropdownMenuGroup(props) {
960
- return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
964
+ return /* @__PURE__ */ jsx(Menu.Group, {
965
+ "data-slot": "dropdown-menu-group",
966
+ ...props
967
+ });
961
968
  }
962
969
  function DropdownMenuLabel({ className, ...props }) {
963
- return /* @__PURE__ */ jsx(
964
- Menu.GroupLabel,
965
- {
966
- className: `${label}${className ? ` ${className}` : ""}`,
967
- "data-slot": "dropdown-menu-label",
968
- ...props
969
- }
970
- );
970
+ return /* @__PURE__ */ jsx(Menu.GroupLabel, {
971
+ className: `${label}${className ? ` ${className}` : ""}`,
972
+ "data-slot": "dropdown-menu-label",
973
+ ...props
974
+ });
971
975
  }
972
976
  function DropdownMenuItem({ className, ...props }) {
973
- return /* @__PURE__ */ jsx(
974
- Menu.Item,
975
- {
976
- className: `${item$1}${className ? ` ${className}` : ""}`,
977
- "data-slot": "dropdown-menu-item",
978
- ...props
979
- }
980
- );
977
+ return /* @__PURE__ */ jsx(Menu.Item, {
978
+ className: `${item$1}${className ? ` ${className}` : ""}`,
979
+ "data-slot": "dropdown-menu-item",
980
+ ...props
981
+ });
981
982
  }
982
983
  function DropdownMenuSeparator({ className, ...props }) {
983
- return /* @__PURE__ */ jsx(
984
- Menu.Separator,
985
- {
986
- className: `${separator}${className ? ` ${className}` : ""}`,
987
- "data-slot": "dropdown-menu-separator",
988
- ...props
989
- }
990
- );
984
+ return /* @__PURE__ */ jsx(Menu.Separator, {
985
+ className: `${separator}${className ? ` ${className}` : ""}`,
986
+ "data-slot": "dropdown-menu-separator",
987
+ ...props
988
+ });
991
989
  }
992
990
  function DropdownMenuRadioGroup(props) {
993
- return /* @__PURE__ */ jsx(Menu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
994
- }
995
- function DropdownMenuRadioItem({
996
- className,
997
- children,
998
- ...props
999
- }) {
1000
- return /* @__PURE__ */ jsxs(
1001
- Menu.RadioItem,
1002
- {
1003
- className: `${item$1} ${radioItem}${className ? ` ${className}` : ""}`,
1004
- "data-slot": "dropdown-menu-radio-item",
1005
- ...props,
1006
- children: [
1007
- children,
1008
- /* @__PURE__ */ jsx(
1009
- Menu.RadioItemIndicator,
1010
- {
1011
- className: radioIndicator,
1012
- "data-slot": "dropdown-menu-radio-item-indicator",
1013
- children: /* @__PURE__ */ jsx(CheckIcon, {})
1014
- }
1015
- )
1016
- ]
1017
- }
1018
- );
1019
- }
1020
- function DropdownMenuCheckboxItem({
1021
- className,
1022
- children,
1023
- ...props
1024
- }) {
1025
- return /* @__PURE__ */ jsxs(
1026
- Menu.CheckboxItem,
1027
- {
1028
- className: `${item$1} ${checkboxItem}${className ? ` ${className}` : ""}`,
1029
- "data-slot": "dropdown-menu-checkbox-item",
1030
- ...props,
1031
- children: [
1032
- children,
1033
- /* @__PURE__ */ jsx(
1034
- Menu.CheckboxItemIndicator,
1035
- {
1036
- className: checkboxIndicator,
1037
- "data-slot": "dropdown-menu-checkbox-item-indicator",
1038
- children: /* @__PURE__ */ jsx(CheckIcon, {})
1039
- }
1040
- )
1041
- ]
1042
- }
1043
- );
991
+ return /* @__PURE__ */ jsx(Menu.RadioGroup, {
992
+ "data-slot": "dropdown-menu-radio-group",
993
+ ...props
994
+ });
995
+ }
996
+ function DropdownMenuRadioItem({ className, children, ...props }) {
997
+ return /* @__PURE__ */ jsxs(Menu.RadioItem, {
998
+ className: `${item$1} ${radioItem}${className ? ` ${className}` : ""}`,
999
+ "data-slot": "dropdown-menu-radio-item",
1000
+ ...props,
1001
+ children: [children, /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
1002
+ className: radioIndicator,
1003
+ "data-slot": "dropdown-menu-radio-item-indicator",
1004
+ children: /* @__PURE__ */ jsx(CheckIcon, {})
1005
+ })]
1006
+ });
1007
+ }
1008
+ function DropdownMenuCheckboxItem({ className, children, ...props }) {
1009
+ return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
1010
+ className: `${item$1} ${checkboxItem}${className ? ` ${className}` : ""}`,
1011
+ "data-slot": "dropdown-menu-checkbox-item",
1012
+ ...props,
1013
+ children: [children, /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
1014
+ className: checkboxIndicator,
1015
+ "data-slot": "dropdown-menu-checkbox-item-indicator",
1016
+ children: /* @__PURE__ */ jsx(CheckIcon, {})
1017
+ })]
1018
+ });
1044
1019
  }
1045
1020
  function CheckIcon() {
1046
- return /* @__PURE__ */ jsx(Check, { size: 16 });
1047
- }
1048
- var container = createRuntimeFn({ defaultClassName: "_6d8tz20", variantClassNames: { size: { sm: "_6d8tz21", md: "_6d8tz22" }, fullWidth: { true: "_6d8tz23", false: "_6d8tz24" } }, defaultVariants: { size: "sm", fullWidth: false }, compoundVariants: [] });
1049
- var indicator = createRuntimeFn({ defaultClassName: "_6d8tz25", variantClassNames: { ready: { true: "_6d8tz26", false: "_6d8tz27" } }, defaultVariants: { ready: true }, compoundVariants: [] });
1050
- var item = 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: [] });
1051
- function SegmentedControl({
1052
- items,
1053
- value,
1054
- onChange,
1055
- size = "sm",
1056
- fullWidth = false,
1057
- className
1058
- }) {
1059
- const containerRef = useRef(null);
1060
- const itemElementsRef = useRef(/* @__PURE__ */ new Map());
1061
- const [indicator$12, setIndicator] = useState({ left: 0, width: 0 });
1062
- const [isReady, setIsReady] = useState(false);
1063
- const updateIndicator = useCallback(() => {
1064
- const container2 = containerRef.current;
1065
- const activeEl = itemElementsRef.current.get(value);
1066
- if (!container2 || !activeEl) return;
1067
- const containerRect = container2.getBoundingClientRect();
1068
- const activeRect = activeEl.getBoundingClientRect();
1069
- setIndicator({
1070
- left: activeRect.left - containerRect.left,
1071
- width: activeRect.width
1072
- });
1073
- setIsReady(true);
1074
- }, [value]);
1075
- useEffect(() => {
1076
- updateIndicator();
1077
- }, [updateIndicator]);
1078
- useEffect(() => {
1079
- const container2 = containerRef.current;
1080
- if (!container2) return;
1081
- const observer = new ResizeObserver(() => {
1082
- updateIndicator();
1083
- });
1084
- observer.observe(container2);
1085
- return () => observer.disconnect();
1086
- }, [updateIndicator]);
1087
- const handleKeyDown = (e) => {
1088
- const enabledItems = items.filter((item2) => !item2.disabled);
1089
- const currentIndex = enabledItems.findIndex((item2) => item2.value === value);
1090
- let nextIndex = currentIndex;
1091
- switch (e.key) {
1092
- case "ArrowRight":
1093
- case "ArrowDown": {
1094
- e.preventDefault();
1095
- nextIndex = (currentIndex + 1) % enabledItems.length;
1096
- break;
1097
- }
1098
- case "ArrowLeft":
1099
- case "ArrowUp": {
1100
- e.preventDefault();
1101
- nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
1102
- break;
1103
- }
1104
- case "Home": {
1105
- e.preventDefault();
1106
- nextIndex = 0;
1107
- break;
1108
- }
1109
- case "End": {
1110
- e.preventDefault();
1111
- nextIndex = enabledItems.length - 1;
1112
- break;
1113
- }
1114
- }
1115
- if (nextIndex !== currentIndex) {
1116
- const nextItem = enabledItems[nextIndex];
1117
- onChange(nextItem.value);
1118
- itemElementsRef.current.get(nextItem.value)?.focus();
1119
- }
1120
- };
1121
- return /* @__PURE__ */ jsxs(
1122
- "div",
1123
- {
1124
- "aria-orientation": "horizontal",
1125
- className: `${container({ size, fullWidth })} ${className || ""}`.trim(),
1126
- ref: containerRef,
1127
- role: "tablist",
1128
- onKeyDown: handleKeyDown,
1129
- children: [
1130
- /* @__PURE__ */ jsx(
1131
- "div",
1132
- {
1133
- "aria-hidden": "true",
1134
- className: indicator({ ready: isReady }),
1135
- style: {
1136
- left: indicator$12.left,
1137
- width: indicator$12.width
1138
- }
1139
- }
1140
- ),
1141
- items.map((item$12) => {
1142
- const isActive = item$12.value === value;
1143
- return /* @__PURE__ */ jsx(
1144
- "button",
1145
- {
1146
- "aria-selected": isActive,
1147
- "data-active": isActive || void 0,
1148
- disabled: item$12.disabled,
1149
- role: "tab",
1150
- tabIndex: isActive ? 0 : -1,
1151
- type: "button",
1152
- className: item({
1153
- size,
1154
- active: isActive,
1155
- disabled: Boolean(item$12.disabled),
1156
- fullWidth
1157
- }),
1158
- ref: (el) => {
1159
- if (el) itemElementsRef.current.set(item$12.value, el);
1160
- else itemElementsRef.current.delete(item$12.value);
1161
- },
1162
- onClick: () => onChange(item$12.value),
1163
- children: item$12.label
1164
- },
1165
- item$12.value
1166
- );
1167
- })
1168
- ]
1169
- }
1170
- );
1171
- }
1021
+ return /* @__PURE__ */ jsx(Check, { size: 16 });
1022
+ }
1023
+ //#endregion
1024
+ //#region src/components/segmented-control/styles.css.ts
1025
+ var container = createRuntimeFn({
1026
+ defaultClassName: "_6d8tz20",
1027
+ variantClassNames: {
1028
+ size: {
1029
+ sm: "_6d8tz21",
1030
+ md: "_6d8tz22"
1031
+ },
1032
+ fullWidth: {
1033
+ true: "_6d8tz23",
1034
+ false: "_6d8tz24"
1035
+ }
1036
+ },
1037
+ defaultVariants: {
1038
+ size: "sm",
1039
+ fullWidth: false
1040
+ },
1041
+ compoundVariants: []
1042
+ });
1043
+ var indicator = createRuntimeFn({
1044
+ defaultClassName: "_6d8tz25",
1045
+ variantClassNames: { ready: {
1046
+ true: "_6d8tz26",
1047
+ false: "_6d8tz27"
1048
+ } },
1049
+ defaultVariants: { ready: true },
1050
+ compoundVariants: []
1051
+ });
1052
+ var item = createRuntimeFn({
1053
+ defaultClassName: "_6d8tz28",
1054
+ variantClassNames: {
1055
+ size: {
1056
+ sm: "_6d8tz29",
1057
+ md: "_6d8tz2a"
1058
+ },
1059
+ active: {
1060
+ true: "_6d8tz2b",
1061
+ false: "_6d8tz2c"
1062
+ },
1063
+ disabled: {
1064
+ true: "_6d8tz2d",
1065
+ false: "_6d8tz2e"
1066
+ },
1067
+ fullWidth: {
1068
+ true: "_6d8tz2f",
1069
+ false: "_6d8tz2g"
1070
+ }
1071
+ },
1072
+ defaultVariants: {
1073
+ size: "sm",
1074
+ active: false,
1075
+ disabled: false,
1076
+ fullWidth: false
1077
+ },
1078
+ compoundVariants: []
1079
+ });
1080
+ //#endregion
1081
+ //#region src/components/segmented-control/index.tsx
1082
+ function SegmentedControl({ items, value, onChange, size = "sm", fullWidth = false, className }) {
1083
+ const containerRef = useRef(null);
1084
+ const itemElementsRef = useRef(/* @__PURE__ */ new Map());
1085
+ const [indicator$2, setIndicator] = useState({
1086
+ left: 0,
1087
+ width: 0
1088
+ });
1089
+ const [isReady, setIsReady] = useState(false);
1090
+ const updateIndicator = useCallback(() => {
1091
+ const container = containerRef.current;
1092
+ const activeEl = itemElementsRef.current.get(value);
1093
+ if (!container || !activeEl) return;
1094
+ const containerRect = container.getBoundingClientRect();
1095
+ const activeRect = activeEl.getBoundingClientRect();
1096
+ setIndicator({
1097
+ left: activeRect.left - containerRect.left,
1098
+ width: activeRect.width
1099
+ });
1100
+ setIsReady(true);
1101
+ }, [value]);
1102
+ useEffect(() => {
1103
+ updateIndicator();
1104
+ }, [updateIndicator]);
1105
+ useEffect(() => {
1106
+ const container = containerRef.current;
1107
+ if (!container) return;
1108
+ const observer = new ResizeObserver(() => {
1109
+ updateIndicator();
1110
+ });
1111
+ observer.observe(container);
1112
+ return () => observer.disconnect();
1113
+ }, [updateIndicator]);
1114
+ const handleKeyDown = (e) => {
1115
+ const enabledItems = items.filter((item) => !item.disabled);
1116
+ const currentIndex = enabledItems.findIndex((item) => item.value === value);
1117
+ let nextIndex = currentIndex;
1118
+ switch (e.key) {
1119
+ case "ArrowRight":
1120
+ case "ArrowDown":
1121
+ e.preventDefault();
1122
+ nextIndex = (currentIndex + 1) % enabledItems.length;
1123
+ break;
1124
+ case "ArrowLeft":
1125
+ case "ArrowUp":
1126
+ e.preventDefault();
1127
+ nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
1128
+ break;
1129
+ case "Home":
1130
+ e.preventDefault();
1131
+ nextIndex = 0;
1132
+ break;
1133
+ case "End":
1134
+ e.preventDefault();
1135
+ nextIndex = enabledItems.length - 1;
1136
+ break;
1137
+ }
1138
+ if (nextIndex !== currentIndex) {
1139
+ const nextItem = enabledItems[nextIndex];
1140
+ onChange(nextItem.value);
1141
+ itemElementsRef.current.get(nextItem.value)?.focus();
1142
+ }
1143
+ };
1144
+ return /* @__PURE__ */ jsxs("div", {
1145
+ "aria-orientation": "horizontal",
1146
+ className: `${container({
1147
+ size,
1148
+ fullWidth
1149
+ })} ${className || ""}`.trim(),
1150
+ ref: containerRef,
1151
+ role: "tablist",
1152
+ onKeyDown: handleKeyDown,
1153
+ children: [/* @__PURE__ */ jsx("div", {
1154
+ "aria-hidden": "true",
1155
+ className: indicator({ ready: isReady }),
1156
+ style: {
1157
+ left: indicator$2.left,
1158
+ width: indicator$2.width
1159
+ }
1160
+ }), items.map((item$3) => {
1161
+ const isActive = item$3.value === value;
1162
+ return /* @__PURE__ */ jsx("button", {
1163
+ "aria-selected": isActive,
1164
+ "data-active": isActive || void 0,
1165
+ disabled: item$3.disabled,
1166
+ role: "tab",
1167
+ tabIndex: isActive ? 0 : -1,
1168
+ type: "button",
1169
+ className: item({
1170
+ size,
1171
+ active: isActive,
1172
+ disabled: Boolean(item$3.disabled),
1173
+ fullWidth
1174
+ }),
1175
+ ref: (el) => {
1176
+ if (el) itemElementsRef.current.set(item$3.value, el);
1177
+ else itemElementsRef.current.delete(item$3.value);
1178
+ },
1179
+ onClick: () => onChange(item$3.value),
1180
+ children: item$3.label
1181
+ }, item$3.value);
1182
+ })]
1183
+ });
1184
+ }
1185
+ //#endregion
1186
+ //#region src/components/tooltip/styles.css.ts
1172
1187
  var positioner = "_1cspf2m2";
1173
1188
  var popup = "_1cspf2m3";
1189
+ //#endregion
1190
+ //#region src/components/tooltip/index.tsx
1174
1191
  function TooltipProvider(props) {
1175
- return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
1192
+ return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
1176
1193
  }
1177
1194
  function TooltipRoot(props) {
1178
- return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
1195
+ return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
1179
1196
  }
1180
1197
  function TooltipTrigger(props) {
1181
- return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
1198
+ return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
1182
1199
  }
1183
1200
  function TooltipPortal({ children, ...props }) {
1184
- return /* @__PURE__ */ jsx(Tooltip.Portal, { ...props, children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children }) });
1201
+ return /* @__PURE__ */ jsx(Tooltip.Portal, {
1202
+ ...props,
1203
+ children: /* @__PURE__ */ jsx(PortalThemeWrapper$1, { children })
1204
+ });
1185
1205
  }
1186
1206
  function TooltipPositioner(props) {
1187
- return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
1207
+ return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
1188
1208
  }
1189
1209
  function TooltipPopup({ className, children, ...props }) {
1190
- return /* @__PURE__ */ jsx(
1191
- Tooltip.Popup,
1192
- {
1193
- className: `${popup}${className ? ` ${className}` : ""}`,
1194
- ...props,
1195
- children
1196
- }
1197
- );
1198
- }
1199
- function TooltipContent({
1200
- side = "top",
1201
- sideOffset = 6,
1202
- align = "center",
1203
- className,
1204
- children,
1205
- ...popupProps
1206
- }) {
1207
- return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
1208
- TooltipPositioner,
1209
- {
1210
- align,
1211
- className: positioner,
1212
- side,
1213
- sideOffset,
1214
- children: /* @__PURE__ */ jsx(TooltipPopup, { className, ...popupProps, children })
1215
- }
1216
- ) });
1217
- }
1218
- const createTooltipHandle = Tooltip.createHandle;
1219
- function ViewportGate({
1220
- children,
1221
- fallback,
1222
- threshold = 0.5
1223
- }) {
1224
- const ref = useRef(null);
1225
- const [visible, setVisible] = useState(false);
1226
- useEffect(() => {
1227
- if (visible) return;
1228
- const el = ref.current;
1229
- if (!el) return;
1230
- const obs = new IntersectionObserver(
1231
- (entries) => {
1232
- if (entries.some((e) => e.isIntersecting)) {
1233
- setVisible(true);
1234
- obs.disconnect();
1235
- }
1236
- },
1237
- { threshold }
1238
- );
1239
- obs.observe(el);
1240
- return () => obs.disconnect();
1241
- }, [visible, threshold]);
1242
- if (visible) return /* @__PURE__ */ jsx(Fragment, { children });
1243
- return /* @__PURE__ */ jsx("div", { ref, children: fallback });
1244
- }
1245
- export {
1246
- ActionBar,
1247
- ActionButton,
1248
- AnimatedCheckbox,
1249
- AnimatedTabs,
1250
- ColorPicker,
1251
- Combobox,
1252
- ComboboxContent,
1253
- ComboboxEmpty,
1254
- ComboboxGroup,
1255
- ComboboxGroupLabel,
1256
- ComboboxInput,
1257
- ComboboxItem,
1258
- ComboboxItemIndicator,
1259
- ComboboxList,
1260
- Dialog,
1261
- DialogBackdrop,
1262
- DialogClose,
1263
- DialogDescription,
1264
- DialogFooter,
1265
- DialogHeader,
1266
- DialogPopup,
1267
- DialogPortal,
1268
- DialogStackProvider,
1269
- DialogTitle,
1270
- DialogTrigger,
1271
- DropdownMenu,
1272
- DropdownMenuCheckboxItem,
1273
- DropdownMenuContent,
1274
- DropdownMenuGroup,
1275
- DropdownMenuItem,
1276
- DropdownMenuLabel,
1277
- DropdownMenuRadioGroup,
1278
- DropdownMenuRadioItem,
1279
- DropdownMenuSeparator,
1280
- DropdownMenuTrigger,
1281
- Popover,
1282
- PopoverArrow,
1283
- PopoverClose,
1284
- PopoverDescription,
1285
- PopoverPanel,
1286
- PopoverPopup,
1287
- PopoverPortal,
1288
- PopoverPositioner,
1289
- PopoverTitle,
1290
- PopoverTrigger,
1291
- PortalThemeProvider2 as PortalThemeProvider,
1292
- PortalThemeWrapper2 as PortalThemeWrapper,
1293
- SegmentedControl,
1294
- TooltipContent,
1295
- TooltipPopup,
1296
- TooltipPortal,
1297
- TooltipPositioner,
1298
- TooltipProvider,
1299
- TooltipRoot,
1300
- TooltipTrigger,
1301
- ViewportGate,
1302
- createTooltipHandle,
1303
- dismissAllDialogs,
1304
- dismissDialog,
1305
- dismissTopDialog,
1306
- getActionButtonClassName,
1307
- presentDialog,
1308
- usePopover,
1309
- usePortalTheme
1310
- };
1210
+ return /* @__PURE__ */ jsx(Tooltip.Popup, {
1211
+ className: `${popup}${className ? ` ${className}` : ""}`,
1212
+ ...props,
1213
+ children
1214
+ });
1215
+ }
1216
+ function TooltipContent({ side = "top", sideOffset = 6, align = "center", className, children, ...popupProps }) {
1217
+ return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
1218
+ align,
1219
+ className: positioner,
1220
+ side,
1221
+ sideOffset,
1222
+ children: /* @__PURE__ */ jsx(TooltipPopup, {
1223
+ className,
1224
+ ...popupProps,
1225
+ children
1226
+ })
1227
+ }) });
1228
+ }
1229
+ var createTooltipHandle = Tooltip.createHandle;
1230
+ //#endregion
1231
+ //#region src/components/viewport-gate/index.tsx
1232
+ function ViewportGate({ children, fallback, threshold = .5 }) {
1233
+ const ref = useRef(null);
1234
+ const [visible, setVisible] = useState(false);
1235
+ useEffect(() => {
1236
+ if (visible) return;
1237
+ const el = ref.current;
1238
+ if (!el) return;
1239
+ const obs = new IntersectionObserver((entries) => {
1240
+ if (entries.some((e) => e.isIntersecting)) {
1241
+ setVisible(true);
1242
+ obs.disconnect();
1243
+ }
1244
+ }, { threshold });
1245
+ obs.observe(el);
1246
+ return () => obs.disconnect();
1247
+ }, [visible, threshold]);
1248
+ if (visible) return /* @__PURE__ */ jsx(Fragment, { children });
1249
+ return /* @__PURE__ */ jsx("div", {
1250
+ ref,
1251
+ children: fallback
1252
+ });
1253
+ }
1254
+ //#endregion
1255
+ export { ActionBar, ActionButton, AnimatedCheckbox, AnimatedTabs, ColorPicker, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, 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, SegmentedControl, TooltipContent, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, ViewportGate, createTooltipHandle, dismissAllDialogs, dismissDialog, dismissTopDialog, getActionButtonClassName, presentDialog, usePopover, usePortalTheme };