@tachui/primitives 0.10.0 → 0.11.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 (6) hide show
  1. package/dist/{Picker-BN1w3R0n.js → Picker-DoiXP31Q.js} +306 -231
  2. package/dist/controls/Button.d.ts +67 -3
  3. package/dist/controls/Button.d.ts.map +1 -1
  4. package/dist/controls/index.js +1 -1
  5. package/dist/index.js +2 -2
  6. package/package.json +3 -3
package/dist/{Picker-BN1w3R0n.js → Picker-DoiXP31Q.js} RENAMED
@@ -1,8 +1,8 @@
1
- import { withModifiers as A, ComponentWithCSSClasses as J, createSignal as z, useLifecycle as Q, createEffect as X, isSignal as l, ColorAsset as $, h as a, text as d, ConcatenatedComponent as R, clonePropsPreservingReactivity as N, resetLifecycleState as U, createComputed as ee } from "@tachui/core";
2
- import { createComponentInstance as te } from "@tachui/core/components";
3
- import { T as W } from "./Text-DmpfnY1o.js";
4
- var ie = Object.defineProperty, se = (s, e, t) => e in s ? ie(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, m = (s, e, t) => se(s, typeof e != "symbol" ? e + "" : e, t);
5
- const ne = {
1
+ import { withModifiers as A, ComponentWithCSSClasses as ee, createSignal as $, useLifecycle as te, createEffect as K, untrack as ie, isSignal as l, ColorAsset as E, getOwner as N, createMemo as U, h as a, text as d, ConcatenatedComponent as P, clonePropsPreservingReactivity as W, resetLifecycleState as G, createComputed as se } from "@tachui/core";
2
+ import { createComponentInstance as re } from "@tachui/core/components";
3
+ import { T as j } from "./Text-DmpfnY1o.js";
4
+ var ne = Object.defineProperty, oe = (s, e, t) => e in s ? ne(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, b = (s, e, t) => oe(s, typeof e != "symbol" ? e + "" : e, t);
5
+ const ae = {
6
6
  colors: {
7
7
  primary: "#007AFF",
8
8
  secondary: "#5856D6",
@@ -31,17 +31,17 @@ const ne = {
31
31
  large: { size: 18, weight: "600" }
32
32
  }
33
33
  };
34
- class F extends J {
35
- constructor(e, t = ne) {
36
- super(), m(this, "props", e), m(this, "type", "component"), m(this, "id"), m(this, "mounted", !1), m(this, "cleanup", []), m(this, "stateSignal"), m(this, "setState"), m(this, "theme"), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
37
- const [i, r] = z("normal");
38
- this.stateSignal = i, this.setState = r, this.setupDOMEventListeners();
34
+ class z extends ee {
35
+ constructor(e, t = ae) {
36
+ super(), b(this, "props", e), b(this, "type", "component"), b(this, "id"), b(this, "mounted", !1), b(this, "cleanup", []), b(this, "stateSignal"), b(this, "setState"), b(this, "theme"), b(this, "ownStyleProperties", /* @__PURE__ */ new Set()), b(this, "warnedOwnerless", !1), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
37
+ const [i, n] = $("normal");
38
+ this.stateSignal = i, this.setState = n, this.setupDOMEventListeners();
39
39
  }
40
40
  /**
41
41
  * Set up DOM event listeners for button interactions
42
42
  */
43
43
  setupDOMEventListeners() {
44
- Q(this, {
44
+ te(this, {
45
45
  onDOMReady: (e, t) => {
46
46
  t instanceof HTMLButtonElement && this.setupReactiveStyles(t);
47
47
  }
@@ -51,12 +51,11 @@ class F extends J {
51
51
  * Set up reactive style updates based on state changes
52
52
  */
53
53
  setupReactiveStyles(e) {
54
- const t = X(() => {
55
- this.stateSignal(), this.isEnabled(), this.isLoading();
56
- const { tint: i, backgroundColor: r, foregroundColor: n } = this.props;
57
- i && l(i) ? i() : i instanceof $ && i.resolve(), r && l(r) ? r() : r instanceof $ && r.resolve(), n && l(n) ? n() : n instanceof $ && n.resolve();
58
- const o = this.getButtonStyles();
59
- this.applyStylesToElement(e, o);
54
+ const t = K(() => {
55
+ this.stateSignal(), ie(() => {
56
+ const { tint: i, backgroundColor: n, foregroundColor: r } = this.props;
57
+ i && l(i) ? i() : i instanceof E && i.resolve(), n && l(n) ? n() : n instanceof E && n.resolve(), r && l(r) ? r() : r instanceof E && r.resolve(), this.applyStylesToElement(e, this.getButtonStyles());
58
+ });
60
59
  });
61
60
  this.cleanup.push(() => {
62
61
  t && typeof t.dispose == "function" && t.dispose();
@@ -66,11 +65,11 @@ class F extends J {
66
65
  * Apply computed styles to the button element, respecting modifier-applied styles
67
66
  */
68
67
  applyStylesToElement(e, t) {
69
- Object.entries(t).forEach(([i, r]) => {
70
- const n = this.camelToKebabCase(i);
71
- if (typeof r == "string" || typeof r == "number") {
72
- const o = e.style.getPropertyValue(n), c = o && o !== "" && o !== "inherit";
73
- process.env.NODE_ENV === "development" && n === "font-family" && (console.log("[Button.applyButtonStyles] Font-family check:"), console.log("[Button.applyButtonStyles] property:", i, "cssProperty:", n), console.log("[Button.applyButtonStyles] currentValue:", o), console.log("[Button.applyButtonStyles] hasModifierValue:", c), console.log("[Button.applyButtonStyles] will set to:", r)), n === "transform" ? e.style.setProperty(n, String(r)) : c ? process.env.NODE_ENV === "development" && n === "font-family" && console.log("[Button.applyButtonStyles] Button SKIPPED font-family (has modifier value):", o) : (e.style.setProperty(n, String(r)), process.env.NODE_ENV === "development" && n === "font-family" && (console.log("[Button.applyButtonStyles] Button SET font-family to:", String(r)), console.log("[Button.applyButtonStyles] Element after set:", e.style.fontFamily)));
68
+ Object.entries(t).forEach(([i, n]) => {
69
+ const r = this.camelToKebabCase(i);
70
+ if (typeof n == "string" || typeof n == "number") {
71
+ const o = e.style.getPropertyValue(r), c = o && o !== "" && o !== "inherit" && !this.ownStyleProperties.has(r);
72
+ process.env.NODE_ENV === "development" && r === "font-family" && (console.log("[Button.applyButtonStyles] Font-family check:"), console.log("[Button.applyButtonStyles] property:", i, "cssProperty:", r), console.log("[Button.applyButtonStyles] currentValue:", o), console.log("[Button.applyButtonStyles] hasModifierValue:", c), console.log("[Button.applyButtonStyles] will set to:", n)), r === "transform" ? (this.ownStyleProperties.add(r), e.style.setProperty(r, String(n))) : c ? process.env.NODE_ENV === "development" && r === "font-family" && console.log("[Button.applyButtonStyles] Button SKIPPED font-family (has modifier value):", o) : (this.ownStyleProperties.add(r), e.style.setProperty(r, String(n)), process.env.NODE_ENV === "development" && r === "font-family" && (console.log("[Button.applyButtonStyles] Button SET font-family to:", String(n)), console.log("[Button.applyButtonStyles] Element after set:", e.style.fontFamily)));
74
73
  }
75
74
  });
76
75
  }
@@ -89,23 +88,89 @@ class F extends J {
89
88
  return e;
90
89
  if (l(e))
91
90
  return e();
92
- if (e instanceof $)
91
+ if (e instanceof E)
93
92
  return e.resolve();
94
93
  }
95
94
  }
96
95
  /**
97
- * Check if button is enabled
96
+ * Check if button is enabled.
97
+ *
98
+ * Resolves, the way `isLoading` already did. Handing back the signal itself
99
+ * made every consumer wrong in the same direction: `if (!isEnabled)` on a
100
+ * function is never true, so disabled styling never applied and the press
101
+ * guard never fired, while a reactive effect reading this subscribed to
102
+ * nothing.
98
103
  */
99
104
  isEnabled() {
105
+ const e = this.enabledSource();
106
+ return typeof e == "function" ? e() : e;
107
+ }
108
+ /**
109
+ * The `isEnabled` prop in the form it was given, signal and all.
110
+ *
111
+ * `render` needs the unresolved form: a boolean it can hand straight to the
112
+ * renderer, or a signal the renderer can subscribe to. Everything else wants
113
+ * the resolved value and should use {@link isEnabled}.
114
+ */
115
+ enabledSource() {
100
116
  const { isEnabled: e } = this.props;
101
117
  return e === void 0 ? !0 : typeof e == "boolean" || l(e) ? e : !0;
102
118
  }
119
+ /**
120
+ * `disabled` as the renderer wants it.
121
+ *
122
+ * The renderer subscribes to a prop whose value is a signal and re-applies
123
+ * it on change, which is the only path that works here — the reactive style
124
+ * effect runs on DOM-ready, which `renderComponent` never fires.
125
+ *
126
+ * Built fresh on every render rather than cached, and the identity matters
127
+ * as much as the value. A render happens inside an effect, so an enclosing
128
+ * component re-rendering for any reason at all disposes this scope and takes
129
+ * the renderer's prop subscription with it. The renderer then diffs the new
130
+ * props against the old by identity and skips anything unchanged — so a
131
+ * cached accessor would be recognised, skipped, and never resubscribed,
132
+ * leaving the attribute frozen at whatever it last read. A new memo each
133
+ * time is a prop that has changed, which is precisely what has happened.
134
+ */
135
+ /**
136
+ * The computed styles, as the renderer wants them.
137
+ *
138
+ * Owned the same way `disabled` is, and for the same reason: a subscription
139
+ * made where nothing disposes it is held for the life of the process. With an
140
+ * owner the renderer tracks the styles and re-applies them; without one they
141
+ * are a snapshot, which is still more than the DOM-ready effect managed on
142
+ * that path.
143
+ *
144
+ * Applied *before* modifiers, which is the ordering that makes modifier
145
+ * precedence work by construction rather than by inspecting what is already
146
+ * on the element.
147
+ */
148
+ /**
149
+ * Says once, in development, that this Button is rendering where nothing can
150
+ * dispose a subscription — so its reactive props are snapshots.
151
+ *
152
+ * The alternative is a control that silently stops tracking depending on how
153
+ * its container happened to mount it. The comparison is written inline so a
154
+ * bundler can drop it.
155
+ */
156
+ warnOwnerlessRender() {
157
+ process.env.NODE_ENV === "production" || this.warnedOwnerless || (this.warnedOwnerless = !0, console.warn(
158
+ "[tachUI] Button is rendering outside a reactive owner, so its `disabled` attribute and its styles are snapshots and will not follow their signals. Subscribing here would never be released, because nothing would dispose it. Both of the framework's own mount paths provide an owner; reaching this means render() was called directly. Render through renderComponent() or mountComponentTree(), or wrap the call in createRoot()."
159
+ ));
160
+ }
161
+ styleProp() {
162
+ return N() === null ? (this.warnOwnerlessRender(), this.getButtonStyles()) : U(() => this.getButtonStyles());
163
+ }
164
+ disabledProp() {
165
+ const e = this.enabledSource();
166
+ return typeof e == "boolean" ? !e : N() === null ? (this.warnOwnerlessRender(), !e()) : U(() => !e());
167
+ }
103
168
  /**
104
169
  * Render the button component
105
170
  */
106
171
  render() {
107
- const e = this.isEnabled(), t = [];
108
- this.props.systemImage && t.push(
172
+ const e = [];
173
+ this.props.systemImage && e.push(
109
174
  a(
110
175
  "span",
111
176
  {
@@ -117,7 +182,7 @@ class F extends J {
117
182
  },
118
183
  d(this.props.systemImage)
119
184
  )
120
- ), t.push(
185
+ ), e.push(
121
186
  a(
122
187
  "span",
123
188
  {
@@ -126,26 +191,36 @@ class F extends J {
126
191
  d(this.props.title || "")
127
192
  )
128
193
  );
129
- const i = ["tachui-button"];
194
+ const t = ["tachui-button"];
130
195
  return [{
131
196
  type: "element",
132
197
  tag: "button",
133
198
  props: {
134
- className: this.createClassString(this.props, i),
199
+ className: this.createClassString(this.props, t),
135
200
  type: "button",
136
- disabled: typeof e == "boolean" ? !e : !e(),
137
- // Invert enabled to disabled
201
+ // A signal here rather than a snapshot of one: the renderer subscribes
202
+ // to a reactive prop and re-applies it, which is what makes `disabled`
203
+ // follow its signal instead of freezing at whatever it read on mount.
204
+ disabled: this.disabledProp(),
205
+ // Styles travel with the element rather than being written onto it
206
+ // afterwards. The effect that used to do it runs on DOM ready, which
207
+ // the ordinary render path never fires — so a Button rendered that way
208
+ // had no styles at all, disabled or otherwise. Here the renderer owns
209
+ // the subscription, applies it before modifiers run, and disposes it
210
+ // with the element.
211
+ style: this.styleProp(),
138
212
  onClick: this.props.action ? () => {
139
- try {
140
- this.props.action?.();
141
- } catch (o) {
142
- console.error("Button action error:", o);
143
- }
213
+ if (!(!this.isEnabled() || this.isLoading()))
214
+ try {
215
+ this.props.action?.();
216
+ } catch (r) {
217
+ console.error("Button action error:", r);
218
+ }
144
219
  } : void 0,
145
220
  // Pass through debug label for debug system
146
221
  ...this.props.debugLabel && { debugLabel: this.props.debugLabel }
147
222
  },
148
- children: t,
223
+ children: e,
149
224
  // Attach component metadata for modifier processing
150
225
  componentMetadata: {
151
226
  id: this.id,
@@ -166,7 +241,7 @@ class F extends J {
166
241
  */
167
242
  hasColorModifiers() {
168
243
  let e = this.modifiers;
169
- return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((t) => t.type === "appearance" || t.constructor?.name === "AppearanceModifier" ? t.properties && (t.properties.foregroundColor !== void 0 || t.properties.color !== void 0) : t.properties ? ["foregroundColor", "color", "textColor"].some((r) => t.properties[r] !== void 0) : !1);
244
+ return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((t) => t.type === "appearance" || t.constructor?.name === "AppearanceModifier" ? t.properties && (t.properties.foregroundColor !== void 0 || t.properties.color !== void 0) : t.properties ? ["foregroundColor", "color", "textColor"].some((n) => t.properties[n] !== void 0) : !1);
170
245
  }
171
246
  /**
172
247
  * Check if the button has typography-related modifiers applied
@@ -191,13 +266,13 @@ class F extends J {
191
266
  variant: e,
192
267
  size: t,
193
268
  role: i = "none",
194
- tint: r,
195
- backgroundColor: n,
269
+ tint: n,
270
+ backgroundColor: r,
196
271
  foregroundColor: o
197
- } = this.props, c = this.stateSignal(), h = this.isLoading(), T = this.isEnabled(), g = this.hasColorModifiers(), v = this.hasTypographyModifiers(), w = {
272
+ } = this.props, c = this.stateSignal(), h = this.isLoading(), T = this.isEnabled(), m = this.hasColorModifiers(), v = this.hasTypographyModifiers(), x = {
198
273
  // Only set color property if no modifiers will handle it
199
274
  // This prevents conflicts between Button styles and AppearanceModifier
200
- ...!g && !o && !e && { color: "inherit" },
275
+ ...!m && !o && !e && { color: "inherit" },
201
276
  // Only set text-related properties if no typography modifiers will handle them
202
277
  // This prevents conflicts between Button styles and TypographyModifier
203
278
  ...!v && {
@@ -215,17 +290,17 @@ class F extends J {
215
290
  // Let modifiers control: fontFamily, fontSize, fontWeight, letterSpacing, textAlign
216
291
  };
217
292
  if (t) {
218
- const k = this.theme.spacing[t] || this.theme.spacing.medium, K = this.theme.borderRadius[t] || this.theme.borderRadius.medium, H = this.theme.typography[t] || this.theme.typography.medium, q = {
293
+ const k = this.theme.spacing[t] || this.theme.spacing.medium, J = this.theme.borderRadius[t] || this.theme.borderRadius.medium, H = this.theme.typography[t] || this.theme.typography.medium, Q = {
219
294
  small: "32px",
220
295
  medium: "40px",
221
296
  large: "48px"
222
297
  };
223
- w.padding = `${k}px ${k * 2}px`, w.borderRadius = `${K}px`, w.fontSize = `${H.size}px`, w.fontWeight = H.weight, w.minHeight = q[t];
298
+ x.padding = `${k}px ${k * 2}px`, x.borderRadius = `${J}px`, x.fontSize = `${H.size}px`, x.fontWeight = H.weight, x.minHeight = Q[t];
224
299
  }
225
300
  let f = "transparent", S = "transparent", _ = "1px", C;
226
- const Z = this.resolveColorValue(r), D = this.resolveColorValue(n), E = this.resolveColorValue(o);
301
+ const q = this.resolveColorValue(n), O = this.resolveColorValue(r), D = this.resolveColorValue(o);
227
302
  if (e) {
228
- const k = Z || this.theme.colors.primary;
303
+ const k = q || this.theme.colors.primary;
229
304
  switch (e) {
230
305
  case "filled":
231
306
  i === "destructive" ? f = this.theme.colors.destructive : i === "cancel" ? f = this.theme.colors.secondary : f = k, C = this.theme.colors.onPrimary;
@@ -241,14 +316,14 @@ class F extends J {
241
316
  break;
242
317
  }
243
318
  }
244
- D && (f = D), E && (C = E);
245
- let P = "1", I = "auto", B, V = "none";
246
- T ? h ? (P = "0.6", I = "none") : c === "pressed" ? (f = this.darkenColor(f, 0.1), S = this.darkenColor(S, 0.1), B = "scale(0.95)") : c === "focused" && (V = "0 0 0 3px #007AFF40") : (f = this.theme.colors.disabled, S = this.theme.colors.disabled, C = this.theme.colors.disabled, P = "0.6", I = "none");
319
+ O && (f = O), D && (C = D);
320
+ let F = "1", I = "auto", B, V = "none";
321
+ T ? h ? (F = "0.6", I = "none") : c === "pressed" ? (f = this.darkenColor(f, 0.1), S = this.darkenColor(S, 0.1), B = "scale(0.95)") : c === "focused" && (V = "0 0 0 3px #007AFF40") : (f = this.theme.colors.disabled, S = this.theme.colors.disabled, C = this.theme.colors.disabled, F = "0.6", I = "none");
247
322
  const p = {
248
- ...w
323
+ ...x
249
324
  // Size-based styles (only if size provided)
250
325
  };
251
- return e && (p.backgroundColor = f, p.borderColor = S, p.borderWidth = _, C !== void 0 && (p.color = C)), D && (p.backgroundColor = D), E && (p.color = E), p.cursor = T ? "pointer" : "not-allowed", p.opacity = P, p.pointerEvents = I, p.transform = B !== void 0 ? B : "none", this.hasShadowModifier() || (p.boxShadow = V), p.transition = "all 0.2s ease", p;
326
+ return e && (p.backgroundColor = f, p.borderColor = S, p.borderWidth = _, C !== void 0 && (p.color = C)), O && (p.backgroundColor = O), D && (p.color = D), p.cursor = T ? "pointer" : "not-allowed", p.opacity = F, p.pointerEvents = I, p.transform = B !== void 0 ? B : "none", this.hasShadowModifier() || (p.boxShadow = V), p.transition = "all 0.2s ease", p;
252
327
  }
253
328
  /**
254
329
  * Handle button press with proper state management
@@ -279,8 +354,8 @@ class F extends J {
279
354
  darkenColor(e, t) {
280
355
  if (e === "transparent") return e;
281
356
  if (e.startsWith("#")) {
282
- const i = e.slice(1), r = parseInt(i, 16), n = Math.max(0, Math.floor((r >> 16) * (1 - t))), o = Math.max(0, Math.floor((r >> 8 & 255) * (1 - t))), c = Math.max(0, Math.floor((r & 255) * (1 - t)));
283
- return `#${(n << 16 | o << 8 | c).toString(16).padStart(6, "0")}`;
357
+ const i = e.slice(1), n = parseInt(i, 16), r = Math.max(0, Math.floor((n >> 16) * (1 - t))), o = Math.max(0, Math.floor((n >> 8 & 255) * (1 - t))), c = Math.max(0, Math.floor((n & 255) * (1 - t)));
358
+ return `#${(r << 16 | o << 8 | c).toString(16).padStart(6, "0")}`;
284
359
  }
285
360
  return e;
286
361
  }
@@ -291,16 +366,16 @@ class F extends J {
291
366
  * Concatenate this button with another concatenatable component
292
367
  */
293
368
  concat(e) {
294
- const t = this.toSegment(), i = e.toSegment(), r = {
295
- totalSegments: e instanceof R ? e.segments.length + 1 : 2,
296
- accessibilityRole: e instanceof R ? this.mergeAccessibilityRoles(
369
+ const t = this.toSegment(), i = e.toSegment(), n = {
370
+ totalSegments: e instanceof P ? e.segments.length + 1 : 2,
371
+ accessibilityRole: e instanceof P ? this.mergeAccessibilityRoles(
297
372
  "composite",
298
373
  e.metadata.accessibilityRole
299
374
  ) : this.determineAccessibilityRole(e),
300
375
  semanticStructure: "inline"
301
376
  // Buttons are typically inline in concatenation
302
377
  };
303
- return new R([t, i], r);
378
+ return new P([t, i], n);
304
379
  }
305
380
  /**
306
381
  * Convert this button to a segment for concatenation
@@ -352,14 +427,14 @@ class F extends J {
352
427
  return e.deep ? this.deepClone() : this.shallowClone();
353
428
  }
354
429
  shallowClone() {
355
- const e = N(this.props), t = new F(e, this.theme);
356
- return this.syncStateToClone(t), U(t), t;
430
+ const e = W(this.props), t = new z(e, this.theme);
431
+ return this.syncStateToClone(t), G(t), t;
357
432
  }
358
433
  deepClone() {
359
- const e = N(this.props, {
434
+ const e = W(this.props, {
360
435
  deep: !0
361
- }), t = new F(e, this.theme);
362
- return this.syncStateToClone(t), U(t), t;
436
+ }), t = new z(e, this.theme);
437
+ return this.syncStateToClone(t), G(t), t;
363
438
  }
364
439
  syncStateToClone(e) {
365
440
  try {
@@ -370,21 +445,21 @@ class F extends J {
370
445
  }
371
446
  }
372
447
  }
373
- function G(s, e, t = {}) {
374
- const i = typeof e == "function" ? e : void 0, n = {
448
+ function Y(s, e, t = {}) {
449
+ const i = typeof e == "function" ? e : void 0, r = {
375
450
  ...e != null && typeof e != "function" ? e : t,
376
451
  title: s,
377
452
  ...i && { action: i }
378
- }, o = te(F, n);
453
+ }, o = re(z, r);
379
454
  return A(o);
380
455
  }
381
456
  function L(s) {
382
- return (t, i, r = {}) => i == null || typeof i == "function" ? G(t, i, {
383
- ...r,
457
+ return (t, i, n = {}) => i == null || typeof i == "function" ? Y(t, i, {
458
+ ...n,
384
459
  ...s
385
- }) : G(t, { ...i, ...s });
460
+ }) : Y(t, { ...i, ...s });
386
461
  }
387
- const me = {
462
+ const we = {
388
463
  /**
389
464
  * Filled button (primary)
390
465
  */
@@ -409,7 +484,7 @@ const me = {
409
484
  * Cancel button
410
485
  */
411
486
  Cancel: L({ role: "cancel" })
412
- }, re = `
487
+ }, le = `
413
488
  @keyframes spin {
414
489
  from { transform: rotate(0deg); }
415
490
  to { transform: rotate(360deg); }
@@ -417,10 +492,10 @@ const me = {
417
492
  `;
418
493
  if (typeof document < "u") {
419
494
  const s = document.createElement("style");
420
- s.textContent = re, document.head.appendChild(s);
495
+ s.textContent = le, document.head.appendChild(s);
421
496
  }
422
- var oe = Object.defineProperty, ae = (s, e, t) => e in s ? oe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, M = (s, e, t) => ae(s, typeof e != "symbol" ? e + "" : e, t);
423
- class j {
497
+ var ce = Object.defineProperty, de = (s, e, t) => e in s ? ce(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, M = (s, e, t) => de(s, typeof e != "symbol" ? e + "" : e, t);
498
+ class X {
424
499
  constructor(e) {
425
500
  M(this, "type", "component"), M(this, "id"), M(this, "props"), this.props = e, this.id = `enhanced-link-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
426
501
  }
@@ -442,8 +517,8 @@ class j {
442
517
  return this.resolveValue(this.props.routingMode) || "auto";
443
518
  }
444
519
  getRel() {
445
- const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), n = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
446
- return e && n ? `${e} ${n}`.trim() : e || n;
520
+ const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), r = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
521
+ return e && r ? `${e} ${r}`.trim() : e || r;
447
522
  }
448
523
  getDownload() {
449
524
  return this.resolveValue(this.props.download);
@@ -475,8 +550,8 @@ class j {
475
550
  if (this.props.onPress)
476
551
  try {
477
552
  this.props.onPress(e);
478
- } catch (n) {
479
- console.error("Link onPress error:", n);
553
+ } catch (r) {
554
+ console.error("Link onPress error:", r);
480
555
  }
481
556
  const t = this.getDestination();
482
557
  if (this.isSpecialScheme(t) || (e.preventDefault(), this.props.openURLAction && this.props.openURLAction(t) === "handled"))
@@ -485,19 +560,19 @@ class j {
485
560
  try {
486
561
  if (!await this.props.onBeforeNavigation(t))
487
562
  return;
488
- } catch (n) {
489
- throw console.error("Link onBeforeNavigation error:", n), n;
563
+ } catch (r) {
564
+ throw console.error("Link onBeforeNavigation error:", r), r;
490
565
  }
491
- const i = this.getTarget(), r = this.getRoutingMode();
566
+ const i = this.getTarget(), n = this.getRoutingMode();
492
567
  if (this.shouldUseInternalRouting(t)) {
493
568
  if (this.props.onInternalNavigation)
494
569
  try {
495
570
  if (await this.props.onInternalNavigation(t))
496
571
  return;
497
- } catch (n) {
498
- console.error("Link onInternalNavigation error:", n);
572
+ } catch (r) {
573
+ console.error("Link onInternalNavigation error:", r);
499
574
  }
500
- r === "spa" ? this.handleSPANavigation(t) : i === "_blank" ? window.open(t, i) : window.location.href = t;
575
+ n === "spa" ? this.handleSPANavigation(t) : i === "_blank" ? window.open(t, i) : window.location.href = t;
501
576
  } else
502
577
  i === "_blank" || i === "_top" || i === "_parent" ? window.open(t, i) : window.location.href = t;
503
578
  }
@@ -513,14 +588,14 @@ class j {
513
588
  }
514
589
  renderContent() {
515
590
  if (this.props.label) {
516
- const n = this.props.label().render();
517
- return Array.isArray(n) ? n : [n];
591
+ const r = this.props.label().render();
592
+ return Array.isArray(r) ? r : [r];
518
593
  }
519
594
  if (this.props.children)
520
595
  return this.renderChildren();
521
596
  let e;
522
- this.props.text ? e = this.props.text : l(this.props.destination) ? e = ee(() => this.getDestination()) : e = this.getDestination();
523
- const i = W(e).render();
597
+ this.props.text ? e = this.props.text : l(this.props.destination) ? e = se(() => this.getDestination()) : e = this.getDestination();
598
+ const i = j(e).render();
524
599
  return Array.isArray(i) ? i : [i];
525
600
  }
526
601
  renderChildren() {
@@ -529,7 +604,7 @@ class j {
529
604
  }
530
605
  renderChild(e) {
531
606
  if (typeof e == "string") {
532
- const i = W(e).render();
607
+ const i = j(e).render();
533
608
  return Array.isArray(i) ? i : [i];
534
609
  } else {
535
610
  const t = e.render();
@@ -542,16 +617,16 @@ class j {
542
617
  "data-component": "enhanced-link"
543
618
  };
544
619
  l(this.props.destination) ? i.href = () => this.getDestination() : i.href = this.getDestination(), this.props.target && (l(this.props.target) ? i.target = () => this.getTarget() : i.target = this.getTarget());
545
- const r = this.getRel();
546
- r && (l(this.props.rel) || l(this.props.target) ? i.rel = () => this.getRel() : i.rel = r);
547
- const n = this.getDownload();
548
- n !== void 0 && (l(this.props.download) ? i.download = () => this.getDownload() : n === !0 ? i.download = !0 : typeof n == "string" && (i.download = n));
620
+ const n = this.getRel();
621
+ n && (l(this.props.rel) || l(this.props.target) ? i.rel = () => this.getRel() : i.rel = n);
622
+ const r = this.getDownload();
623
+ r !== void 0 && (l(this.props.download) ? i.download = () => this.getDownload() : r === !0 ? i.download = !0 : typeof r == "string" && (i.download = r));
549
624
  const o = this.getAccessibilityLabel();
550
625
  o && (l(this.props.accessibilityLabel) ? i["aria-label"] = () => this.getAccessibilityLabel() : i["aria-label"] = o);
551
626
  const c = this.getAccessibilityHint();
552
627
  c && (l(this.props.accessibilityHint) ? i["aria-describedby"] = () => this.getAccessibilityHint() : i["aria-describedby"] = c);
553
628
  const h = this.getAccessibilityRole();
554
- return h && (l(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = h), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (g) => this.handleClick(g), i.style = {
629
+ return h && (l(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = h), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (m) => this.handleClick(m), i.style = {
555
630
  textDecoration: "none",
556
631
  color: "inherit",
557
632
  cursor: t ? "not-allowed" : "pointer",
@@ -560,12 +635,12 @@ class j {
560
635
  }
561
636
  // Concatenation support
562
637
  concat(e) {
563
- const t = this.toSegment(), i = e.toSegment(), r = {
638
+ const t = this.toSegment(), i = e.toSegment(), n = {
564
639
  totalSegments: 2,
565
640
  accessibilityRole: "composite",
566
641
  semanticStructure: "inline"
567
642
  };
568
- return new R([t, i], r);
643
+ return new P([t, i], n);
569
644
  }
570
645
  toSegment() {
571
646
  return {
@@ -579,18 +654,18 @@ class j {
579
654
  return !0;
580
655
  }
581
656
  }
582
- function ye(s, e) {
657
+ function ve(s, e) {
583
658
  if (e !== void 0) {
584
- const r = {
659
+ const n = {
585
660
  text: s,
586
661
  destination: e
587
- }, n = new j(r);
588
- return A(n);
662
+ }, r = new X(n);
663
+ return A(r);
589
664
  }
590
- const t = s, i = new j(t);
665
+ const t = s, i = new X(t);
591
666
  return A(i);
592
667
  }
593
- const x = {
668
+ const w = {
594
669
  /**
595
670
  * Create an external link that opens in a new tab
596
671
  */
@@ -634,10 +709,10 @@ const x = {
634
709
  * Create an email link with optional subject and body
635
710
  */
636
711
  email(s, e, t, i) {
637
- let r = `mailto:${s}`;
638
- const n = new URLSearchParams();
639
- return e && n.append("subject", e), t && n.append("body", t), n.toString() && (r += `?${n.toString()}`), {
640
- destination: r,
712
+ let n = `mailto:${s}`;
713
+ const r = new URLSearchParams();
714
+ return e && r.append("subject", e), t && r.append("body", t), r.toString() && (n += `?${r.toString()}`), {
715
+ destination: n,
641
716
  children: i || s,
642
717
  accessibilityLabel: `Send email to ${s}`,
643
718
  accessibilityHint: "Opens your email app"
@@ -671,35 +746,35 @@ const x = {
671
746
  */
672
747
  social: {
673
748
  twitter(s, e) {
674
- return x.external(
749
+ return w.external(
675
750
  `https://twitter.com/${s}`,
676
751
  e || `@${s}`,
677
752
  { accessibilityLabel: `Visit ${s} on Twitter` }
678
753
  );
679
754
  },
680
755
  github(s, e) {
681
- return x.external(
756
+ return w.external(
682
757
  `https://github.com/${s}`,
683
758
  e || s,
684
759
  { accessibilityLabel: `Visit ${s} on GitHub` }
685
760
  );
686
761
  },
687
762
  linkedin(s, e) {
688
- return x.external(
763
+ return w.external(
689
764
  `https://linkedin.com/in/${s}`,
690
765
  e || s,
691
766
  { accessibilityLabel: `Visit ${s} on LinkedIn` }
692
767
  );
693
768
  },
694
769
  instagram(s, e) {
695
- return x.external(
770
+ return w.external(
696
771
  `https://instagram.com/${s}`,
697
772
  e || `@${s}`,
698
773
  { accessibilityLabel: `Visit ${s} on Instagram` }
699
774
  );
700
775
  },
701
776
  facebook(s, e) {
702
- return x.external(
777
+ return w.external(
703
778
  `https://facebook.com/${s}`,
704
779
  e || s,
705
780
  { accessibilityLabel: `Visit ${s} on Facebook` }
@@ -711,7 +786,7 @@ const x = {
711
786
  */
712
787
  appStore: {
713
788
  ios(s, e) {
714
- return x.external(
789
+ return w.external(
715
790
  `https://apps.apple.com/app/id${s}`,
716
791
  e || "Download from App Store",
717
792
  {
@@ -721,7 +796,7 @@ const x = {
721
796
  );
722
797
  },
723
798
  android(s, e) {
724
- return x.external(
799
+ return w.external(
725
800
  `https://play.google.com/store/apps/details?id=${s}`,
726
801
  e || "Get it on Google Play",
727
802
  {
@@ -738,18 +813,18 @@ const x = {
738
813
  return (e) => s(e) ? "handled" : "systemAction";
739
814
  }
740
815
  };
741
- var le = Object.defineProperty, ce = (s, e, t) => e in s ? le(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => ce(s, typeof e != "symbol" ? e + "" : e, t);
742
- class de {
816
+ var pe = Object.defineProperty, he = (s, e, t) => e in s ? pe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => he(s, typeof e != "symbol" ? e + "" : e, t);
817
+ class ue {
743
818
  constructor(e) {
744
819
  y(this, "props", e), y(this, "type", "component"), y(this, "id"), y(this, "mounted", !1), y(this, "cleanup", []), y(this, "toggleElement", null), y(this, "setIsAnimating"), y(this, "handleToggle", async (i) => {
745
820
  if (i.preventDefault(), this.isDisabled()) return;
746
- const r = !this.getIsOn();
821
+ const n = !this.getIsOn();
747
822
  this.props.animated !== !1 && (this.setIsAnimating(!0), setTimeout(() => {
748
823
  this.setIsAnimating(!1);
749
- }, 200)), this.props.onToggle && this.props.onToggle(r);
824
+ }, 200)), this.props.onToggle && this.props.onToggle(n);
750
825
  }), this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
751
- const [, t] = z(!1);
752
- this.setIsAnimating = t, X(() => {
826
+ const [, t] = $(!1);
827
+ this.setIsAnimating = t, K(() => {
753
828
  const i = this.getIsOn();
754
829
  this.toggleElement && this.toggleElement.checked !== i && (this.toggleElement.checked = i);
755
830
  });
@@ -850,11 +925,11 @@ class de {
850
925
  */
851
926
  renderSwitch() {
852
927
  const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), {
853
- color: r = "#007AFF",
854
- offColor: n = "#e2e8f0",
928
+ color: n = "#007AFF",
929
+ offColor: r = "#e2e8f0",
855
930
  thumbColor: o = "#ffffff",
856
931
  animated: c = !0
857
- } = this.props, h = e ? r : n, T = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)", g = this.getInputAccessibilityProps();
932
+ } = this.props, h = e ? n : r, T = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)", m = this.getInputAccessibilityProps();
858
933
  return a(
859
934
  "div",
860
935
  {
@@ -871,7 +946,7 @@ class de {
871
946
  }));
872
947
  },
873
948
  type: "checkbox",
874
- id: g.id,
949
+ id: m.id,
875
950
  checked: e,
876
951
  disabled: t,
877
952
  style: {
@@ -882,9 +957,9 @@ class de {
882
957
  margin: 0,
883
958
  cursor: t ? "not-allowed" : "pointer"
884
959
  },
885
- "aria-label": g["aria-label"],
886
- "aria-labelledby": g["aria-labelledby"],
887
- "aria-describedby": g["aria-describedby"]
960
+ "aria-label": m["aria-label"],
961
+ "aria-labelledby": m["aria-labelledby"],
962
+ "aria-describedby": m["aria-describedby"]
888
963
  }),
889
964
  // Switch track
890
965
  a(
@@ -925,7 +1000,7 @@ class de {
925
1000
  * Render checkbox variant
926
1001
  */
927
1002
  renderCheckbox() {
928
- const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF" } = this.props, n = this.getInputAccessibilityProps();
1003
+ const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: n = "#007AFF" } = this.props, r = this.getInputAccessibilityProps();
929
1004
  return a(
930
1005
  "div",
931
1006
  {
@@ -942,7 +1017,7 @@ class de {
942
1017
  }));
943
1018
  },
944
1019
  type: "checkbox",
945
- id: n.id,
1020
+ id: r.id,
946
1021
  checked: e,
947
1022
  disabled: t,
948
1023
  style: {
@@ -953,9 +1028,9 @@ class de {
953
1028
  margin: 0,
954
1029
  cursor: t ? "not-allowed" : "pointer"
955
1030
  },
956
- "aria-label": n["aria-label"],
957
- "aria-labelledby": n["aria-labelledby"],
958
- "aria-describedby": n["aria-describedby"]
1031
+ "aria-label": r["aria-label"],
1032
+ "aria-labelledby": r["aria-labelledby"],
1033
+ "aria-describedby": r["aria-describedby"]
959
1034
  }),
960
1035
  // Checkbox visual
961
1036
  a(
@@ -964,9 +1039,9 @@ class de {
964
1039
  style: {
965
1040
  width: i.thumbSize,
966
1041
  height: i.thumbSize,
967
- border: `2px solid ${e ? r : "#d1d5db"}`,
1042
+ border: `2px solid ${e ? n : "#d1d5db"}`,
968
1043
  borderRadius: "4px",
969
- backgroundColor: e ? r : "#ffffff",
1044
+ backgroundColor: e ? n : "#ffffff",
970
1045
  display: "flex",
971
1046
  alignItems: "center",
972
1047
  justifyContent: "center",
@@ -997,7 +1072,7 @@ class de {
997
1072
  * Render button variant
998
1073
  */
999
1074
  renderButton() {
1000
- const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF", offColor: n = "#f3f4f6" } = this.props;
1075
+ const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: n = "#007AFF", offColor: r = "#f3f4f6" } = this.props;
1001
1076
  return a(
1002
1077
  "button",
1003
1078
  {
@@ -1010,9 +1085,9 @@ class de {
1010
1085
  disabled: t,
1011
1086
  style: {
1012
1087
  padding: "8px 16px",
1013
- backgroundColor: e ? r : n,
1088
+ backgroundColor: e ? n : r,
1014
1089
  color: e ? "#ffffff" : "#374151",
1015
- border: `1px solid ${e ? r : "#d1d5db"}`,
1090
+ border: `1px solid ${e ? n : "#d1d5db"}`,
1016
1091
  borderRadius: "6px",
1017
1092
  fontSize: i.fontSize,
1018
1093
  fontWeight: "500",
@@ -1067,14 +1142,14 @@ class de {
1067
1142
  variant: e = "switch",
1068
1143
  labelPosition: t = "trailing",
1069
1144
  spacing: i = 8,
1070
- accessibilityHint: r
1071
- } = this.props, n = this.renderLabel(e === "button"), o = this.renderToggleControl(), c = t === "leading" && n ? [n, o] : n ? [o, n] : [o], h = e === "button" ? a(
1145
+ accessibilityHint: n
1146
+ } = this.props, r = this.renderLabel(e === "button"), o = this.renderToggleControl(), c = t === "leading" && r ? [r, o] : r ? [o, r] : [o], h = e === "button" ? a(
1072
1147
  "div",
1073
1148
  {
1074
1149
  style: {
1075
1150
  display: "flex",
1076
1151
  alignItems: "center",
1077
- gap: n ? `${i}px` : "0",
1152
+ gap: r ? `${i}px` : "0",
1078
1153
  cursor: this.isDisabled() ? "not-allowed" : "pointer"
1079
1154
  }
1080
1155
  },
@@ -1086,7 +1161,7 @@ class de {
1086
1161
  style: {
1087
1162
  display: "flex",
1088
1163
  alignItems: "center",
1089
- gap: n ? `${i}px` : "0",
1164
+ gap: r ? `${i}px` : "0",
1090
1165
  cursor: this.isDisabled() ? "not-allowed" : "pointer"
1091
1166
  }
1092
1167
  },
@@ -1095,10 +1170,10 @@ class de {
1095
1170
  return a(
1096
1171
  "div",
1097
1172
  {
1098
- "aria-describedby": r ? `${this.id}-hint` : void 0
1173
+ "aria-describedby": n ? `${this.id}-hint` : void 0
1099
1174
  },
1100
1175
  h,
1101
- ...r ? [
1176
+ ...n ? [
1102
1177
  a(
1103
1178
  "div",
1104
1179
  {
@@ -1111,75 +1186,75 @@ class de {
1111
1186
  width: "100%"
1112
1187
  }
1113
1188
  },
1114
- d(r)
1189
+ d(n)
1115
1190
  )
1116
1191
  ] : []
1117
1192
  );
1118
1193
  }
1119
1194
  }
1120
- function b(s, e = {}) {
1121
- const t = { ...e, isOn: s }, i = new de(t);
1195
+ function g(s, e = {}) {
1196
+ const t = { ...e, isOn: s }, i = new ue(t);
1122
1197
  return A(i);
1123
1198
  }
1124
- function Y(s, e, t = {}) {
1125
- return b(e, { ...t, label: s });
1199
+ function Z(s, e, t = {}) {
1200
+ return g(e, { ...t, label: s });
1126
1201
  }
1127
- const Se = {
1202
+ const xe = {
1128
1203
  /**
1129
1204
  * Switch toggle (default)
1130
1205
  */
1131
1206
  Switch(s, e = {}) {
1132
- return b(s, { ...e, variant: "switch" });
1207
+ return g(s, { ...e, variant: "switch" });
1133
1208
  },
1134
1209
  /**
1135
1210
  * Checkbox toggle
1136
1211
  */
1137
1212
  Checkbox(s, e = {}) {
1138
- return b(s, { ...e, variant: "checkbox" });
1213
+ return g(s, { ...e, variant: "checkbox" });
1139
1214
  },
1140
1215
  /**
1141
1216
  * Button toggle
1142
1217
  */
1143
1218
  Button(s, e = {}) {
1144
- return b(s, { ...e, variant: "button" });
1219
+ return g(s, { ...e, variant: "button" });
1145
1220
  },
1146
1221
  /**
1147
1222
  * Small toggle
1148
1223
  */
1149
1224
  Small(s, e = {}) {
1150
- return b(s, { ...e, size: "small" });
1225
+ return g(s, { ...e, size: "small" });
1151
1226
  },
1152
1227
  /**
1153
1228
  * Large toggle
1154
1229
  */
1155
1230
  Large(s, e = {}) {
1156
- return b(s, { ...e, size: "large" });
1231
+ return g(s, { ...e, size: "large" });
1157
1232
  },
1158
1233
  /**
1159
1234
  * Custom color toggle
1160
1235
  */
1161
1236
  CustomColor(s, e, t = {}) {
1162
- return b(s, { ...t, color: e });
1237
+ return g(s, { ...t, color: e });
1163
1238
  },
1164
1239
  /**
1165
1240
  * Toggle with leading label
1166
1241
  */
1167
1242
  WithLeadingLabel(s, e, t = {}) {
1168
- return b(e, { ...t, label: s, labelPosition: "leading" });
1243
+ return g(e, { ...t, label: s, labelPosition: "leading" });
1169
1244
  },
1170
1245
  /**
1171
1246
  * Toggle with trailing label (default)
1172
1247
  */
1173
1248
  WithTrailingLabel(s, e, t = {}) {
1174
- return b(e, { ...t, label: s, labelPosition: "trailing" });
1249
+ return g(e, { ...t, label: s, labelPosition: "trailing" });
1175
1250
  }
1176
- }, xe = {
1251
+ }, Ce = {
1177
1252
  /**
1178
1253
  * Create a toggle group with multiple options
1179
1254
  */
1180
1255
  createGroup(s, e = {}) {
1181
1256
  return s.map(
1182
- (t) => Y(t.label, t.isOn, {
1257
+ (t) => Z(t.label, t.isOn, {
1183
1258
  ...e,
1184
1259
  onToggle: t.onToggle
1185
1260
  })
@@ -1189,12 +1264,12 @@ const Se = {
1189
1264
  * Create exclusive toggle group (radio-like behavior)
1190
1265
  */
1191
1266
  createExclusiveGroup(s, e, t, i = {}) {
1192
- const r = () => l(e) ? e() : e;
1267
+ const n = () => l(e) ? e() : e;
1193
1268
  return s.map(
1194
- (n) => Y(n.label, r() === n.key, {
1269
+ (r) => Z(r.label, n() === r.key, {
1195
1270
  ...i,
1196
1271
  onToggle: (o) => {
1197
- o && t && t(n.key);
1272
+ o && t && t(r.key);
1198
1273
  }
1199
1274
  })
1200
1275
  );
@@ -1231,16 +1306,16 @@ const Se = {
1231
1306
  }
1232
1307
  }
1233
1308
  };
1234
- var pe = Object.defineProperty, he = (s, e, t) => e in s ? pe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, u = (s, e, t) => he(s, typeof e != "symbol" ? e + "" : e, t);
1235
- class ue {
1309
+ var fe = Object.defineProperty, be = (s, e, t) => e in s ? fe(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, u = (s, e, t) => be(s, typeof e != "symbol" ? e + "" : e, t);
1310
+ class ge {
1236
1311
  constructor(e) {
1237
1312
  u(this, "props", e), u(this, "type", "component"), u(this, "id"), u(this, "mounted", !1), u(this, "cleanup", []), u(this, "isOpen"), u(this, "setIsOpen"), u(this, "searchTerm"), u(this, "setSearchTerm"), u(this, "handleSelection", (o) => {
1238
1313
  this.props.onSelectionChange && this.props.onSelectionChange(o), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
1239
1314
  }), u(this, "toggleOpen", () => {
1240
1315
  this.isDisabled() || this.setIsOpen(!this.isOpen());
1241
1316
  }), this.id = `picker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
1242
- const [t, i] = z(!1), [r, n] = z("");
1243
- if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = r, this.setSearchTerm = n, typeof window < "u") {
1317
+ const [t, i] = $(!1), [n, r] = $("");
1318
+ if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = n, this.setSearchTerm = r, typeof window < "u") {
1244
1319
  const o = (c) => {
1245
1320
  const h = document.getElementById(this.id);
1246
1321
  h && !h.contains(c.target) && this.setIsOpen(!1);
@@ -1317,7 +1392,7 @@ class ue {
1317
1392
  * Render dropdown variant
1318
1393
  */
1319
1394
  renderDropdown() {
1320
- const e = this.getSelectedOption(), t = this.getFilteredOptions(), i = this.getSizeStyles(), r = this.isOpen();
1395
+ const e = this.getSelectedOption(), t = this.getFilteredOptions(), i = this.getSizeStyles(), n = this.isOpen();
1321
1396
  return a(
1322
1397
  "div",
1323
1398
  {
@@ -1346,7 +1421,7 @@ class ue {
1346
1421
  borderRadius: "6px",
1347
1422
  cursor: this.isDisabled() ? "not-allowed" : "pointer",
1348
1423
  opacity: this.isDisabled() ? 0.6 : 1,
1349
- ...r && {
1424
+ ...n && {
1350
1425
  borderColor: this.props.tint || "#007AFF",
1351
1426
  boxShadow: `0 0 0 1px ${this.props.tint || "#007AFF"}`
1352
1427
  }
@@ -1369,14 +1444,14 @@ class ue {
1369
1444
  style: {
1370
1445
  fontSize: "12px",
1371
1446
  color: "#6b7280",
1372
- transform: r ? "rotate(180deg)" : "rotate(0deg)",
1447
+ transform: n ? "rotate(180deg)" : "rotate(0deg)",
1373
1448
  transition: "transform 0.2s"
1374
1449
  }
1375
1450
  },
1376
1451
  d("▼")
1377
1452
  )
1378
1453
  ),
1379
- ...r ? [
1454
+ ...n ? [
1380
1455
  a(
1381
1456
  "div",
1382
1457
  {
@@ -1408,8 +1483,8 @@ class ue {
1408
1483
  type: "text",
1409
1484
  placeholder: "Search options...",
1410
1485
  value: this.searchTerm(),
1411
- onInput: (n) => {
1412
- const o = n.target;
1486
+ onInput: (r) => {
1487
+ const o = r.target;
1413
1488
  this.setSearchTerm(o.value);
1414
1489
  },
1415
1490
  style: {
@@ -1423,21 +1498,21 @@ class ue {
1423
1498
  )
1424
1499
  ] : [],
1425
1500
  ...t.map(
1426
- (n) => a(
1501
+ (r) => a(
1427
1502
  "button",
1428
1503
  {
1429
1504
  type: "button",
1430
- key: String(n.value),
1431
- onClick: () => this.handleSelection(n.value),
1432
- disabled: n.disabled,
1505
+ key: String(r.value),
1506
+ onClick: () => this.handleSelection(r.value),
1507
+ disabled: r.disabled,
1433
1508
  style: {
1434
1509
  width: "100%",
1435
1510
  padding: "8px 12px",
1436
1511
  textAlign: "left",
1437
- backgroundColor: n.value === this.getSelection() ? "#f3f4f6" : "transparent",
1512
+ backgroundColor: r.value === this.getSelection() ? "#f3f4f6" : "transparent",
1438
1513
  border: "none",
1439
- cursor: n.disabled ? "not-allowed" : "pointer",
1440
- opacity: n.disabled ? 0.5 : 1,
1514
+ cursor: r.disabled ? "not-allowed" : "pointer",
1515
+ opacity: r.disabled ? 0.5 : 1,
1441
1516
  fontSize: "14px",
1442
1517
  display: "flex",
1443
1518
  alignItems: "center",
@@ -1447,18 +1522,18 @@ class ue {
1447
1522
  }
1448
1523
  }
1449
1524
  },
1450
- ...n.icon ? [
1525
+ ...r.icon ? [
1451
1526
  a(
1452
1527
  "span",
1453
1528
  { style: { fontSize: "16px" } },
1454
- d(n.icon)
1529
+ d(r.icon)
1455
1530
  )
1456
1531
  ] : [],
1457
1532
  a(
1458
1533
  "div",
1459
1534
  {},
1460
- a("div", {}, d(n.label)),
1461
- ...n.description ? [
1535
+ a("div", {}, d(r.label)),
1536
+ ...r.description ? [
1462
1537
  a(
1463
1538
  "div",
1464
1539
  {
@@ -1468,7 +1543,7 @@ class ue {
1468
1543
  marginTop: "2px"
1469
1544
  }
1470
1545
  },
1471
- d(n.description)
1546
+ d(r.description)
1472
1547
  )
1473
1548
  ] : []
1474
1549
  )
@@ -1510,33 +1585,33 @@ class ue {
1510
1585
  "aria-label": this.props.accessibilityLabel
1511
1586
  },
1512
1587
  ...e.map(
1513
- (r, n) => a(
1588
+ (n, r) => a(
1514
1589
  "button",
1515
1590
  {
1516
1591
  type: "button",
1517
- key: String(r.value),
1518
- onClick: () => this.handleSelection(r.value),
1519
- disabled: r.disabled || this.isDisabled(),
1592
+ key: String(n.value),
1593
+ onClick: () => this.handleSelection(n.value),
1594
+ disabled: n.disabled || this.isDisabled(),
1520
1595
  role: "radio",
1521
- "aria-checked": r.value === t,
1596
+ "aria-checked": n.value === t,
1522
1597
  style: {
1523
1598
  ...i,
1524
1599
  flex: 1,
1525
1600
  border: "none",
1526
1601
  borderRadius: "6px",
1527
- backgroundColor: r.value === t ? "#ffffff" : "transparent",
1528
- color: r.value === t ? "#1a1a1a" : "#6b7280",
1529
- fontWeight: r.value === t ? "600" : "400",
1530
- cursor: r.disabled || this.isDisabled() ? "not-allowed" : "pointer",
1531
- opacity: r.disabled || this.isDisabled() ? 0.5 : 1,
1532
- boxShadow: r.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
1602
+ backgroundColor: n.value === t ? "#ffffff" : "transparent",
1603
+ color: n.value === t ? "#1a1a1a" : "#6b7280",
1604
+ fontWeight: n.value === t ? "600" : "400",
1605
+ cursor: n.disabled || this.isDisabled() ? "not-allowed" : "pointer",
1606
+ opacity: n.disabled || this.isDisabled() ? 0.5 : 1,
1607
+ boxShadow: n.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
1533
1608
  transition: "all 0.2s",
1534
1609
  margin: "0",
1535
- ...n === 0 && { marginRight: "1px" },
1536
- ...n === e.length - 1 && { marginLeft: "1px" }
1610
+ ...r === 0 && { marginRight: "1px" },
1611
+ ...r === e.length - 1 && { marginLeft: "1px" }
1537
1612
  }
1538
1613
  },
1539
- ...r.icon ? [
1614
+ ...n.icon ? [
1540
1615
  a(
1541
1616
  "span",
1542
1617
  {
@@ -1545,10 +1620,10 @@ class ue {
1545
1620
  fontSize: "14px"
1546
1621
  }
1547
1622
  },
1548
- d(r.icon)
1623
+ d(n.icon)
1549
1624
  )
1550
1625
  ] : [],
1551
- d(r.label)
1626
+ d(n.label)
1552
1627
  )
1553
1628
  )
1554
1629
  );
@@ -1563,10 +1638,10 @@ class ue {
1563
1638
  {
1564
1639
  value: String(t),
1565
1640
  onChange: (i) => {
1566
- const r = i.target, n = e.find(
1567
- (o) => String(o.value) === r.value
1641
+ const n = i.target, r = e.find(
1642
+ (o) => String(o.value) === n.value
1568
1643
  );
1569
- n && this.handleSelection(n.value);
1644
+ r && this.handleSelection(r.value);
1570
1645
  },
1571
1646
  disabled: this.isDisabled(),
1572
1647
  style: {
@@ -1597,26 +1672,26 @@ class ue {
1597
1672
  variant: e = "dropdown",
1598
1673
  accessibilityLabel: t,
1599
1674
  accessibilityHint: i
1600
- } = this.props, r = {
1675
+ } = this.props, n = {
1601
1676
  "aria-label": t,
1602
1677
  "aria-describedby": i ? `${this.id}-hint` : void 0
1603
1678
  };
1604
- let n;
1679
+ let r;
1605
1680
  switch (e) {
1606
1681
  case "segmented":
1607
- n = this.renderSegmented();
1682
+ r = this.renderSegmented();
1608
1683
  break;
1609
1684
  case "wheel":
1610
- n = this.renderWheel();
1685
+ r = this.renderWheel();
1611
1686
  break;
1612
1687
  default:
1613
- n = this.renderDropdown();
1688
+ r = this.renderDropdown();
1614
1689
  break;
1615
1690
  }
1616
1691
  return a(
1617
1692
  "div",
1618
- r,
1619
1693
  n,
1694
+ r,
1620
1695
  ...i ? [
1621
1696
  a(
1622
1697
  "div",
@@ -1634,40 +1709,40 @@ class ue {
1634
1709
  );
1635
1710
  }
1636
1711
  }
1637
- function O(s, e, t = {}) {
1638
- const i = { ...t, selection: s, options: e }, r = new ue(i);
1639
- return A(r);
1712
+ function R(s, e, t = {}) {
1713
+ const i = { ...t, selection: s, options: e }, n = new ge(i);
1714
+ return A(n);
1640
1715
  }
1641
- const ve = {
1716
+ const ke = {
1642
1717
  /**
1643
1718
  * Dropdown picker (default)
1644
1719
  */
1645
1720
  // biome-ignore lint/suspicious/noExplicitAny: Generic dropdown picker requires flexible type
1646
1721
  Dropdown(s, e, t = {}) {
1647
- return O(s, e, { ...t, variant: "dropdown" });
1722
+ return R(s, e, { ...t, variant: "dropdown" });
1648
1723
  },
1649
1724
  /**
1650
1725
  * Segmented picker
1651
1726
  */
1652
1727
  // biome-ignore lint/suspicious/noExplicitAny: Generic segmented picker requires flexible type
1653
1728
  Segmented(s, e, t = {}) {
1654
- return O(s, e, { ...t, variant: "segmented" });
1729
+ return R(s, e, { ...t, variant: "segmented" });
1655
1730
  },
1656
1731
  /**
1657
1732
  * Wheel picker (native select)
1658
1733
  */
1659
1734
  // biome-ignore lint/suspicious/noExplicitAny: Generic wheel picker requires flexible type
1660
1735
  Wheel(s, e, t = {}) {
1661
- return O(s, e, { ...t, variant: "wheel" });
1736
+ return R(s, e, { ...t, variant: "wheel" });
1662
1737
  },
1663
1738
  /**
1664
1739
  * Menu picker
1665
1740
  */
1666
1741
  // biome-ignore lint/suspicious/noExplicitAny: Generic menu picker requires flexible type
1667
1742
  Menu(s, e, t = {}) {
1668
- return O(s, e, { ...t, variant: "menu" });
1743
+ return R(s, e, { ...t, variant: "menu" });
1669
1744
  }
1670
- }, we = {
1745
+ }, Le = {
1671
1746
  /**
1672
1747
  * Create options from simple array
1673
1748
  */
@@ -1700,19 +1775,19 @@ const ve = {
1700
1775
  }
1701
1776
  };
1702
1777
  export {
1703
- G as B,
1704
- F as E,
1705
- ye as L,
1706
- O as P,
1707
- b as T,
1708
- me as a,
1709
- ue as b,
1710
- de as c,
1711
- x as d,
1712
- ve as e,
1713
- we as f,
1714
- Se as g,
1715
- xe as h,
1716
- Y as i,
1717
- ne as j
1778
+ Y as B,
1779
+ z as E,
1780
+ ve as L,
1781
+ R as P,
1782
+ g as T,
1783
+ we as a,
1784
+ ge as b,
1785
+ ue as c,
1786
+ w as d,
1787
+ ke as e,
1788
+ Le as f,
1789
+ xe as g,
1790
+ Ce as h,
1791
+ Z as i,
1792
+ ae as j
1718
1793
  };