@tachui/primitives 0.8.1-alpha → 0.8.5-alpha

package/dist/{Picker-DrZ7ibdt.js → Picker-DKphYduj.js}

@@ -1,7 +1,8 @@
-import { withModifiers as T, ComponentWithCSSClasses as K, createSignal as z, useLifecycle as X, createEffect as W, isSignal as l, ColorAsset as A, h as a, text as p, ConcatenatedComponent as R, createComputed as Z } from "@tachui/core";
-import { T as V } from "./Text-DYyFBJ6i.js";
-var q = Object.defineProperty, J = (s, e, t) => e in s ? q(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, v = (s, e, t) => J(s, typeof e != "symbol" ? e + "" : e, t);
-const Q = {
+import { withModifiers as T, ComponentWithCSSClasses as q, createSignal as R, useLifecycle as J, createEffect as j, isSignal as l, ColorAsset as A, h as a, text as d, ConcatenatedComponent as $, clonePropsPreservingReactivity as H, resetLifecycleState as N, createComputed as Q } from "@tachui/core";
+import { createComponentInstance as ee } from "@tachui/core/components";
+import { T as U } from "./Text-D0CYYD-Q.js";
+var te = Object.defineProperty, ie = (s, e, t) => e in s ? te(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => ie(s, typeof e != "symbol" ? e + "" : e, t);
+const se = {
   colors: {
     primary: "#007AFF",
     secondary: "#5856D6",
@@ -30,19 +31,19 @@ const Q = {
     large: { size: 18, weight: "600" }
   }
 };
-class ee extends K {
-  constructor(e, t = Q) {
-    super(), this.props = e, v(this, "type", "component"), v(this, "id"), v(this, "mounted", !1), v(this, "cleanup", []), v(this, "stateSignal"), v(this, "setState"), v(this, "theme"), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
-    const [i, r] = z("normal");
+class z extends q {
+  constructor(e, t = se) {
+    super(), this.props = e, y(this, "type", "component"), y(this, "id"), y(this, "mounted", !1), y(this, "cleanup", []), y(this, "stateSignal"), y(this, "setState"), y(this, "theme"), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
+    const [i, r] = R("normal");
     this.stateSignal = i, this.setState = r, this.setupDOMEventListeners();
   }
   /**
    * Set up DOM event listeners for button interactions
    */
   setupDOMEventListeners() {
-    X(this, {
+    J(this, {
       onDOMReady: (e, t) => {
-        t instanceof HTMLButtonElement && (this.attachInteractionEvents(t), this.setupReactiveStyles(t));
+        t instanceof HTMLButtonElement && this.setupReactiveStyles(t);
       }
     });
   }
@@ -50,12 +51,12 @@ class ee extends K {
    * Set up reactive style updates based on state changes
    */
   setupReactiveStyles(e) {
-    const t = W(() => {
+    const t = j(() => {
       this.stateSignal(), this.isEnabled(), this.isLoading();
-      const { tint: i, backgroundColor: r, foregroundColor: n } = this.props;
-      i && l(i) ? i() : i instanceof A && i.resolve(), r && l(r) ? r() : r instanceof A && r.resolve(), n && l(n) ? n() : n instanceof A && n.resolve();
-      const o = this.getButtonStyles();
-      this.applyStylesToElement(e, o);
+      const { tint: i, backgroundColor: r, foregroundColor: o } = this.props;
+      i && l(i) ? i() : i instanceof A && i.resolve(), r && l(r) ? r() : r instanceof A && r.resolve(), o && l(o) ? o() : o instanceof A && o.resolve();
+      const n = this.getButtonStyles();
+      this.applyStylesToElement(e, n);
     });
     this.cleanup.push(() => {
       t && typeof t.dispose == "function" && t.dispose();
@@ -66,10 +67,10 @@ class ee extends K {
    */
   applyStylesToElement(e, t) {
     Object.entries(t).forEach(([i, r]) => {
-      const n = this.camelToKebabCase(i);
+      const o = this.camelToKebabCase(i);
       if (typeof r == "string" || typeof r == "number") {
-        const o = e.style.getPropertyValue(n);
-        n === "transform" ? e.style.setProperty(n, String(r)) : o && o !== "" && o !== "inherit" || e.style.setProperty(n, String(r));
+        const n = e.style.getPropertyValue(o), c = n && n !== "" && n !== "inherit";
+        process.env.NODE_ENV === "development" && o === "font-family" && (console.log("[Button.applyButtonStyles] Font-family check:"), console.log("[Button.applyButtonStyles] property:", i, "cssProperty:", o), console.log("[Button.applyButtonStyles] currentValue:", n), console.log("[Button.applyButtonStyles] hasModifierValue:", c), console.log("[Button.applyButtonStyles] will set to:", r)), o === "transform" ? e.style.setProperty(o, String(r)) : c ? process.env.NODE_ENV === "development" && o === "font-family" && console.log("[Button.applyButtonStyles] Button SKIPPED font-family (has modifier value):", n) : (e.style.setProperty(o, String(r)), process.env.NODE_ENV === "development" && o === "font-family" && (console.log("[Button.applyButtonStyles] Button SET font-family to:", String(r)), console.log("[Button.applyButtonStyles] Element after set:", e.style.fontFamily)));
       }
     });
   }
@@ -92,36 +93,6 @@ class ee extends K {
         return e.resolve();
     }
   }
-  /**
-   * Attach interaction event listeners to the button element
-   */
-  attachInteractionEvents(e) {
-    const t = () => {
-      const c = this.isEnabled();
-      return typeof c == "boolean" ? c : c();
-    };
-    let i = null;
-    const r = (c) => {
-      t() && c.button === 0 && (this.setState("pressed"), i = () => {
-        this.stateSignal() === "pressed" && this.setState("normal"), i && (document.removeEventListener("mouseup", i), i = null);
-      }, document.addEventListener("mouseup", i));
-    }, n = () => {
-      t() && this.stateSignal() === "pressed" && (this.setState("normal"), i && (document.removeEventListener("mouseup", i), i = null));
-    }, o = () => {
-      t() && (this.setState("normal"), i && (document.removeEventListener("mouseup", i), i = null));
-    }, d = () => {
-      t() && this.stateSignal() !== "pressed" && this.setState("focused");
-    }, u = () => {
-      t() && this.stateSignal() === "focused" && this.setState("normal");
-    }, y = (c) => {
-      t() && (c.key === " " || c.key === "Enter") && (c.preventDefault(), this.setState("pressed"));
-    }, f = (c) => {
-      t() && (c.key === " " || c.key === "Enter") && (c.preventDefault(), this.setState("normal"), this.props.action?.());
-    };
-    e.addEventListener("mousedown", r), e.addEventListener("mouseup", n), e.addEventListener("mouseleave", o), e.addEventListener("focus", d), e.addEventListener("blur", u), e.addEventListener("keydown", y), e.addEventListener("keyup", f), this.cleanup.push(() => {
-      e.removeEventListener("mousedown", r), e.removeEventListener("mouseup", n), e.removeEventListener("mouseleave", o), e.removeEventListener("focus", d), e.removeEventListener("blur", u), e.removeEventListener("keydown", y), e.removeEventListener("keyup", f), i && (document.removeEventListener("mouseup", i), i = null);
-    });
-  }
   /**
    * Check if button is enabled
    */
@@ -144,7 +115,7 @@ class ee extends K {
             fontSize: "1.2em"
           }
         },
-        p(this.props.systemImage)
+        d(this.props.systemImage)
       )
     ), t.push(
       a(
@@ -152,7 +123,7 @@ class ee extends K {
         {
           class: "button-title"
         },
-        p(this.props.title || "")
+        d(this.props.title || "")
       )
     );
     const i = ["tachui-button"];
@@ -162,13 +133,13 @@ class ee extends K {
       props: {
         className: this.createClassString(this.props, i),
         type: "button",
-        disabled: typeof e == "boolean" ? !e : () => !e(),
+        disabled: typeof e == "boolean" ? !e : !e(),
         // Invert enabled to disabled
         onClick: this.props.action ? () => {
           try {
             this.props.action?.();
-          } catch (o) {
-            console.error("Button action error:", o);
+          } catch (n) {
+            console.error("Button action error:", n);
           }
         } : void 0,
         // Pass through debug label for debug system
@@ -204,6 +175,13 @@ class ee extends K {
     let e = this.modifiers;
     return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((i) => i.type === "typography" || i.constructor?.name === "TypographyModifier" ? i.properties && (i.properties.transform !== void 0 || i.properties.textTransform !== void 0) : !1);
   }
+  /**
+   * Check if the button has a shadow modifier applied
+   */
+  hasShadowModifier() {
+    let e = this.modifiers;
+    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((i) => i.type === "appearance" || i.type === "shadow" || i.constructor?.name === "AppearanceModifier" || i.constructor?.name === "ShadowModifier" ? i.properties && i.properties.shadow !== void 0 : !1);
+  }
   /**
    * Get computed button styles based on variant, size, role, and state
    */
@@ -214,15 +192,15 @@ class ee extends K {
       size: t,
       role: i = "none",
       tint: r,
-      backgroundColor: n,
-      foregroundColor: o
-    } = this.props, d = this.stateSignal(), u = this.isLoading(), y = this.isEnabled(), f = this.hasColorModifiers(), c = this.hasTypographyModifiers(), C = {
+      backgroundColor: o,
+      foregroundColor: n
+    } = this.props, c = this.stateSignal(), f = this.isLoading(), L = this.isEnabled(), b = this.hasColorModifiers(), Y = this.hasTypographyModifiers(), v = {
       // Only set color property if no modifiers will handle it
       // This prevents conflicts between Button styles and AppearanceModifier
-      ...!f && !o && !e && { color: "inherit" },
+      ...!b && !n && !e && { color: "inherit" },
       // Only set text-related properties if no typography modifiers will handle them
       // This prevents conflicts between Button styles and TypographyModifier
-      ...!c && {
+      ...!Y && {
         fontStyle: "inherit",
         lineHeight: "inherit",
         textTransform: "inherit",
@@ -237,40 +215,40 @@ class ee extends K {
       // Let modifiers control: fontFamily, fontSize, fontWeight, letterSpacing, textAlign
     };
     if (t) {
-      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, Y = {
+      const C = this.theme.spacing[t] || this.theme.spacing.medium, Z = this.theme.borderRadius[t] || this.theme.borderRadius.medium, V = this.theme.typography[t] || this.theme.typography.medium, K = {
         small: "32px",
         medium: "40px",
         large: "48px"
       };
-      C.padding = `${k}px ${k * 2}px`, C.borderRadius = `${j}px`, C.fontSize = `${H.size}px`, C.fontWeight = H.weight, C.minHeight = Y[t];
+      v.padding = `${C}px ${C * 2}px`, v.borderRadius = `${Z}px`, v.fontSize = `${V.size}px`, v.fontWeight = V.weight, v.minHeight = K[t];
     }
-    let g = "transparent", S = "transparent", _ = "1px", L;
-    const G = this.resolveColorValue(r), D = this.resolveColorValue(n), O = this.resolveColorValue(o);
+    let h = "transparent", m = "transparent", _ = "1px", w;
+    const X = this.resolveColorValue(r), O = this.resolveColorValue(o), E = this.resolveColorValue(n);
     if (e) {
-      const k = G || this.theme.colors.primary;
+      const C = X || this.theme.colors.primary;
       switch (e) {
         case "filled":
-          i === "destructive" ? g = this.theme.colors.destructive : i === "cancel" ? g = this.theme.colors.secondary : g = k, L = this.theme.colors.onPrimary;
+          i === "destructive" ? h = this.theme.colors.destructive : i === "cancel" ? h = this.theme.colors.secondary : h = C, w = this.theme.colors.onPrimary;
           break;
         case "outlined":
-          S = i === "destructive" ? this.theme.colors.destructive : k, L = i === "destructive" ? this.theme.colors.destructive : k;
+          m = i === "destructive" ? this.theme.colors.destructive : C, w = i === "destructive" ? this.theme.colors.destructive : C;
           break;
         case "bordered":
-          g = this.theme.colors.background, S = this.theme.colors.border;
+          h = this.theme.colors.background, m = this.theme.colors.border;
           break;
         case "borderedProminent":
-          g = this.theme.colors.surface, S = this.theme.colors.primary, _ = "2px";
+          h = this.theme.colors.surface, m = this.theme.colors.primary, _ = "2px";
           break;
       }
     }
-    D && (g = D), O && (L = O);
-    let F = "1", P = "auto", M, B = "none";
-    y ? u ? (F = "0.6", P = "none") : d === "pressed" ? (g = this.darkenColor(g, 0.1), S = this.darkenColor(S, 0.1), M = "scale(0.95)") : d === "focused" && (B = "0 0 0 3px #007AFF40") : (g = this.theme.colors.disabled, S = this.theme.colors.disabled, L = this.theme.colors.disabled, F = "0.6", P = "none");
-    const h = {
-      ...C
+    O && (h = O), E && (w = E);
+    let F = "1", P = "auto", B, I = "none";
+    L ? f ? (F = "0.6", P = "none") : c === "pressed" ? (h = this.darkenColor(h, 0.1), m = this.darkenColor(m, 0.1), B = "scale(0.95)") : c === "focused" && (I = "0 0 0 3px #007AFF40") : (h = this.theme.colors.disabled, m = this.theme.colors.disabled, w = this.theme.colors.disabled, F = "0.6", P = "none");
+    const p = {
+      ...v
       // Size-based styles (only if size provided)
     };
-    return e && (h.backgroundColor = g, h.borderColor = S, h.borderWidth = _, L !== void 0 && (h.color = L)), D && (h.backgroundColor = D), O && (h.color = O), h.cursor = y ? "pointer" : "not-allowed", h.opacity = F, h.pointerEvents = P, h.transform = M !== void 0 ? M : "none", h.boxShadow = B, h.transition = "all 0.2s ease", h;
+    return e && (p.backgroundColor = h, p.borderColor = m, p.borderWidth = _, w !== void 0 && (p.color = w)), O && (p.backgroundColor = O), E && (p.color = E), p.cursor = L ? "pointer" : "not-allowed", p.opacity = F, p.pointerEvents = P, p.transform = B !== void 0 ? B : "none", this.hasShadowModifier() || (p.boxShadow = I), p.transition = "all 0.2s ease", p;
   }
   /**
    * Handle button press with proper state management
@@ -301,8 +279,8 @@ class ee extends K {
   darkenColor(e, t) {
     if (e === "transparent") return e;
     if (e.startsWith("#")) {
-      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))), d = Math.max(0, Math.floor((r & 255) * (1 - t)));
-      return `#${(n << 16 | o << 8 | d).toString(16).padStart(6, "0")}`;
+      const i = e.slice(1), r = parseInt(i, 16), o = Math.max(0, Math.floor((r >> 16) * (1 - t))), n = Math.max(0, Math.floor((r >> 8 & 255) * (1 - t))), c = Math.max(0, Math.floor((r & 255) * (1 - t)));
+      return `#${(o << 16 | n << 8 | c).toString(16).padStart(6, "0")}`;
     }
     return e;
   }
@@ -314,15 +292,15 @@ class ee extends K {
    */
   concat(e) {
     const t = this.toSegment(), i = e.toSegment(), r = {
-      totalSegments: e instanceof R ? e.segments.length + 1 : 2,
-      accessibilityRole: e instanceof R ? this.mergeAccessibilityRoles(
+      totalSegments: e instanceof $ ? e.segments.length + 1 : 2,
+      accessibilityRole: e instanceof $ ? this.mergeAccessibilityRoles(
         "composite",
         e.metadata.accessibilityRole
       ) : this.determineAccessibilityRole(e),
       semanticStructure: "inline"
       // Buttons are typically inline in concatenation
     };
-    return new R([t, i], r);
+    return new $([t, i], r);
   }
   /**
    * Convert this button to a segment for concatenation
@@ -370,41 +348,62 @@ class ee extends K {
   mergeAccessibilityRoles(e, t) {
     return "composite";
   }
+  clone(e = {}) {
+    return e.deep ? this.deepClone() : this.shallowClone();
+  }
+  shallowClone() {
+    const e = H(this.props), t = new z(e, this.theme);
+    return this.syncStateToClone(t), N(t), t;
+  }
+  deepClone() {
+    const e = H(this.props, {
+      deep: !0
+    }), t = new z(e, this.theme);
+    return this.syncStateToClone(t), N(t), t;
+  }
+  syncStateToClone(e) {
+    try {
+      const t = this.stateSignal();
+      e.setState(t);
+    } catch (t) {
+      process.env.NODE_ENV !== "production" && console.warn("Failed to sync button state to clone:", t);
+    }
+  }
 }
-function E(s, e, t = {}) {
+function k(s, e, t = {}) {
   const i = {
     ...t,
     title: s,
     ...e && { action: e }
-  }, r = new ee(i);
+  }, r = ee(z, i);
   return T(r);
 }
-const he = {
+const be = {
   /**
    * Filled button (primary)
    */
-  Filled: (s, e, t = {}) => E(s, e, { ...t, variant: "filled" }),
+  Filled: (s, e, t = {}) => k(s, e, { ...t, variant: "filled" }),
   /**
    * Outlined button
    */
-  Outlined: (s, e, t = {}) => E(s, e, { ...t, variant: "outlined" }),
+  Outlined: (s, e, t = {}) => k(s, e, { ...t, variant: "outlined" }),
   /**
    * Plain button (text only)
    */
-  Plain: (s, e, t = {}) => E(s, e, { ...t, variant: "plain" }),
+  Plain: (s, e, t = {}) => k(s, e, { ...t, variant: "plain" }),
   /**
    * Bordered button
    */
-  Bordered: (s, e, t = {}) => E(s, e, { ...t, variant: "bordered" }),
+  Bordered: (s, e, t = {}) => k(s, e, { ...t, variant: "bordered" }),
   /**
    * Destructive button
    */
-  Destructive: (s, e, t = {}) => E(s, e, { ...t, role: "destructive" }),
+  Destructive: (s, e, t = {}) => k(s, e, { ...t, role: "destructive" }),
   /**
    * Cancel button
    */
-  Cancel: (s, e, t = {}) => E(s, e, { ...t, role: "cancel" })
-}, te = `
+  Cancel: (s, e, t = {}) => k(s, e, { ...t, role: "cancel" })
+}, oe = `
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
@@ -412,12 +411,12 @@ const he = {
 `;
 if (typeof document < "u") {
   const s = document.createElement("style");
-  s.textContent = te, document.head.appendChild(s);
+  s.textContent = oe, document.head.appendChild(s);
 }
-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, I = (s, e, t) => se(s, typeof e != "symbol" ? e + "" : e, t);
-class U {
+var re = Object.defineProperty, ne = (s, e, t) => e in s ? re(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, M = (s, e, t) => ne(s, typeof e != "symbol" ? e + "" : e, t);
+class W {
   constructor(e) {
-    I(this, "type", "component"), I(this, "id"), I(this, "props"), this.props = e, this.id = `enhanced-link-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    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)}`;
   }
   resolveValue(e) {
     return l(e) ? e() : e;
@@ -437,8 +436,8 @@ class U {
     return this.resolveValue(this.props.routingMode) || "auto";
   }
   getRel() {
-    const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), n = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
-    return e && n ? `${e} ${n}`.trim() : e || n;
+    const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), o = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
+    return e && o ? `${e} ${o}`.trim() : e || o;
   }
   getDownload() {
     return this.resolveValue(this.props.download);
@@ -470,8 +469,8 @@ class U {
     if (this.props.onPress)
       try {
         this.props.onPress(e);
-      } catch (n) {
-        console.error("Link onPress error:", n);
+      } catch (o) {
+        console.error("Link onPress error:", o);
       }
     const t = this.getDestination();
     if (this.isSpecialScheme(t) || (e.preventDefault(), this.props.openURLAction && this.props.openURLAction(t) === "handled"))
@@ -480,8 +479,8 @@ class U {
       try {
         if (!await this.props.onBeforeNavigation(t))
           return;
-      } catch (n) {
-        throw console.error("Link onBeforeNavigation error:", n), n;
+      } catch (o) {
+        throw console.error("Link onBeforeNavigation error:", o), o;
       }
     const i = this.getTarget(), r = this.getRoutingMode();
     if (this.shouldUseInternalRouting(t)) {
@@ -489,8 +488,8 @@ class U {
         try {
           if (await this.props.onInternalNavigation(t))
             return;
-        } catch (n) {
-          console.error("Link onInternalNavigation error:", n);
+        } catch (o) {
+          console.error("Link onInternalNavigation error:", o);
         }
       r === "spa" ? this.handleSPANavigation(t) : i === "_blank" ? window.open(t, i) : window.location.href = t;
     } else
@@ -508,14 +507,14 @@ class U {
   }
   renderContent() {
     if (this.props.label) {
-      const n = this.props.label().render();
-      return Array.isArray(n) ? n : [n];
+      const o = this.props.label().render();
+      return Array.isArray(o) ? o : [o];
     }
     if (this.props.children)
       return this.renderChildren();
     let e;
-    this.props.text ? e = this.props.text : l(this.props.destination) ? e = Z(() => this.getDestination()) : e = this.getDestination();
-    const i = V(e).render();
+    this.props.text ? e = this.props.text : l(this.props.destination) ? e = Q(() => this.getDestination()) : e = this.getDestination();
+    const i = U(e).render();
     return Array.isArray(i) ? i : [i];
   }
   renderChildren() {
@@ -524,7 +523,7 @@ class U {
   }
   renderChild(e) {
     if (typeof e == "string") {
-      const i = V(e).render();
+      const i = U(e).render();
       return Array.isArray(i) ? i : [i];
     } else {
       const t = e.render();
@@ -539,14 +538,14 @@ class U {
     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());
     const r = this.getRel();
     r && (l(this.props.rel) || l(this.props.target) ? i.rel = () => this.getRel() : i.rel = r);
-    const n = this.getDownload();
-    n !== void 0 && (l(this.props.download) ? i.download = () => this.getDownload() : n === !0 ? i.download = !0 : typeof n == "string" && (i.download = n));
-    const o = this.getAccessibilityLabel();
-    o && (l(this.props.accessibilityLabel) ? i["aria-label"] = () => this.getAccessibilityLabel() : i["aria-label"] = o);
-    const d = this.getAccessibilityHint();
-    d && (l(this.props.accessibilityHint) ? i["aria-describedby"] = () => this.getAccessibilityHint() : i["aria-describedby"] = d);
-    const u = this.getAccessibilityRole();
-    return u && (l(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = u), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (f) => this.handleClick(f), i.style = {
+    const o = this.getDownload();
+    o !== void 0 && (l(this.props.download) ? i.download = () => this.getDownload() : o === !0 ? i.download = !0 : typeof o == "string" && (i.download = o));
+    const n = this.getAccessibilityLabel();
+    n && (l(this.props.accessibilityLabel) ? i["aria-label"] = () => this.getAccessibilityLabel() : i["aria-label"] = n);
+    const c = this.getAccessibilityHint();
+    c && (l(this.props.accessibilityHint) ? i["aria-describedby"] = () => this.getAccessibilityHint() : i["aria-describedby"] = c);
+    const f = this.getAccessibilityRole();
+    return f && (l(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = f), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (b) => this.handleClick(b), i.style = {
       textDecoration: "none",
       color: "inherit",
       cursor: t ? "not-allowed" : "pointer",
@@ -560,7 +559,7 @@ class U {
       accessibilityRole: "composite",
       semanticStructure: "inline"
     };
-    return new R([t, i], r);
+    return new $([t, i], r);
   }
   toSegment() {
     return {
@@ -574,18 +573,18 @@ class U {
     return !0;
   }
 }
-function ue(s, e) {
+function me(s, e) {
   if (e !== void 0) {
     const r = {
       text: s,
       destination: e
-    }, n = new U(r);
-    return T(n);
+    }, o = new W(r);
+    return T(o);
   }
-  const t = s, i = new U(t);
+  const t = s, i = new W(t);
   return T(i);
 }
-const x = {
+const S = {
   /**
    * Create an external link that opens in a new tab
    */
@@ -630,8 +629,8 @@ const x = {
    */
   email(s, e, t, i) {
     let r = `mailto:${s}`;
-    const n = new URLSearchParams();
-    return e && n.append("subject", e), t && n.append("body", t), n.toString() && (r += `?${n.toString()}`), {
+    const o = new URLSearchParams();
+    return e && o.append("subject", e), t && o.append("body", t), o.toString() && (r += `?${o.toString()}`), {
       destination: r,
       children: i || s,
       accessibilityLabel: `Send email to ${s}`,
@@ -666,35 +665,35 @@ const x = {
    */
   social: {
     twitter(s, e) {
-      return x.external(
+      return S.external(
         `https://twitter.com/${s}`,
         e || `@${s}`,
         { accessibilityLabel: `Visit ${s} on Twitter` }
       );
     },
     github(s, e) {
-      return x.external(
+      return S.external(
         `https://github.com/${s}`,
         e || s,
         { accessibilityLabel: `Visit ${s} on GitHub` }
       );
     },
     linkedin(s, e) {
-      return x.external(
+      return S.external(
         `https://linkedin.com/in/${s}`,
         e || s,
         { accessibilityLabel: `Visit ${s} on LinkedIn` }
       );
     },
     instagram(s, e) {
-      return x.external(
+      return S.external(
         `https://instagram.com/${s}`,
         e || `@${s}`,
         { accessibilityLabel: `Visit ${s} on Instagram` }
       );
     },
     facebook(s, e) {
-      return x.external(
+      return S.external(
         `https://facebook.com/${s}`,
         e || s,
         { accessibilityLabel: `Visit ${s} on Facebook` }
@@ -706,7 +705,7 @@ const x = {
    */
   appStore: {
     ios(s, e) {
-      return x.external(
+      return S.external(
         `https://apps.apple.com/app/id${s}`,
         e || "Download from App Store",
         {
@@ -716,7 +715,7 @@ const x = {
       );
     },
     android(s, e) {
-      return x.external(
+      return S.external(
         `https://play.google.com/store/apps/details?id=${s}`,
         e || "Get it on Google Play",
         {
@@ -733,18 +732,18 @@ const x = {
     return (e) => s(e) ? "handled" : "systemAction";
   }
 };
-var ne = Object.defineProperty, re = (s, e, t) => e in s ? ne(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, w = (s, e, t) => re(s, typeof e != "symbol" ? e + "" : e, t);
-class oe {
+var ae = Object.defineProperty, le = (s, e, t) => e in s ? ae(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, x = (s, e, t) => le(s, typeof e != "symbol" ? e + "" : e, t);
+class ce {
   constructor(e) {
-    this.props = e, w(this, "type", "component"), w(this, "id"), w(this, "mounted", !1), w(this, "cleanup", []), w(this, "toggleElement", null), w(this, "setIsAnimating"), w(this, "handleToggle", async (i) => {
+    this.props = e, x(this, "type", "component"), x(this, "id"), x(this, "mounted", !1), x(this, "cleanup", []), x(this, "toggleElement", null), x(this, "setIsAnimating"), x(this, "handleToggle", async (i) => {
       if (i.preventDefault(), this.isDisabled()) return;
       const r = !this.getIsOn();
       this.props.animated !== !1 && (this.setIsAnimating(!0), setTimeout(() => {
         this.setIsAnimating(!1);
       }, 200)), this.props.onToggle && this.props.onToggle(r);
     }), this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [, t] = z(!1);
-    this.setIsAnimating = t, W(() => {
+    const [, t] = R(!1);
+    this.setIsAnimating = t, j(() => {
       const i = this.getIsOn();
       this.toggleElement && this.toggleElement.checked !== i && (this.toggleElement.checked = i);
     });
@@ -831,10 +830,10 @@ class oe {
   renderSwitch() {
     const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), {
       color: r = "#007AFF",
-      offColor: n = "#e2e8f0",
-      thumbColor: o = "#ffffff",
-      animated: d = !0
-    } = this.props, u = e ? r : n, y = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)";
+      offColor: o = "#e2e8f0",
+      thumbColor: n = "#ffffff",
+      animated: c = !0
+    } = this.props, f = e ? r : o, L = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)";
     return a(
       "div",
       {
@@ -845,9 +844,9 @@ class oe {
       },
       // Hidden input for form integration
       a("input", {
-        ref: (f) => {
-          this.toggleElement = f, f && !this.mounted && (f.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            f.removeEventListener("change", this.handleToggle);
+        ref: (b) => {
+          this.toggleElement = b, b && !this.mounted && (b.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
+            b.removeEventListener("change", this.handleToggle);
           }));
         },
         type: "checkbox",
@@ -871,12 +870,12 @@ class oe {
           style: {
             width: i.width,
             height: i.height,
-            backgroundColor: u,
+            backgroundColor: f,
             borderRadius: i.height,
             position: "relative",
             cursor: t ? "not-allowed" : "pointer",
             opacity: t ? 0.5 : 1,
-            transition: d ? "background-color 0.2s ease" : "none",
+            transition: c ? "background-color 0.2s ease" : "none",
             border: "1px solid rgba(0,0,0,0.1)",
             boxShadow: "inset 0 1px 2px rgba(0,0,0,0.1)"
           },
@@ -887,12 +886,12 @@ class oe {
           style: {
             width: i.thumbSize,
             height: i.thumbSize,
-            backgroundColor: o,
+            backgroundColor: n,
             borderRadius: "50%",
             position: "absolute",
             top: "50%",
-            transform: `translateY(-50%) ${y}`,
-            transition: d ? "transform 0.2s ease" : "none",
+            transform: `translateY(-50%) ${L}`,
+            transition: c ? "transform 0.2s ease" : "none",
             boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
             border: "1px solid rgba(0,0,0,0.1)"
           }
@@ -915,9 +914,9 @@ class oe {
       },
       // Hidden input
       a("input", {
-        ref: (n) => {
-          this.toggleElement = n, n && !this.mounted && (n.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            n.removeEventListener("change", this.handleToggle);
+        ref: (o) => {
+          this.toggleElement = o, o && !this.mounted && (o.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
+            o.removeEventListener("change", this.handleToggle);
           }));
         },
         type: "checkbox",
@@ -973,20 +972,20 @@ class oe {
    * Render button variant
    */
   renderButton() {
-    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF", offColor: n = "#f3f4f6" } = this.props;
+    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF", offColor: o = "#f3f4f6" } = this.props;
     return a(
       "button",
       {
-        ref: (o) => {
-          o && !this.mounted && (o.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
-            o.removeEventListener("click", this.handleToggle);
+        ref: (n) => {
+          n && !this.mounted && (n.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
+            n.removeEventListener("click", this.handleToggle);
           }));
         },
         type: "button",
         disabled: t,
         style: {
           padding: "8px 16px",
-          backgroundColor: e ? r : n,
+          backgroundColor: e ? r : o,
           color: e ? "#ffffff" : "#374151",
           border: `1px solid ${e ? r : "#d1d5db"}`,
           borderRadius: "6px",
@@ -1000,7 +999,7 @@ class oe {
         "aria-pressed": e,
         "aria-label": this.props.accessibilityLabel
       },
-      p(e ? "ON" : "OFF")
+      d(e ? "ON" : "OFF")
     );
   }
   /**
@@ -1034,7 +1033,7 @@ class oe {
         },
         onClick: this.isDisabled() ? void 0 : this.handleToggle
       },
-      ...typeof e == "string" ? [p(e)] : this.renderComponentContent(e)
+      ...typeof e == "string" ? [d(e)] : this.renderComponentContent(e)
     );
   }
   render() {
@@ -1042,7 +1041,7 @@ class oe {
       labelPosition: e = "trailing",
       spacing: t = 8,
       accessibilityHint: i
-    } = this.props, r = this.renderLabel(), n = this.renderToggleControl(), o = e === "leading" && r ? [r, n] : r ? [n, r] : [n];
+    } = this.props, r = this.renderLabel(), o = this.renderToggleControl(), n = e === "leading" && r ? [r, o] : r ? [o, r] : [o];
     return a(
       "div",
       {
@@ -1054,7 +1053,7 @@ class oe {
         },
         "aria-describedby": i ? `${this.id}-hint` : void 0
       },
-      ...o,
+      ...n,
       ...i ? [
         a(
           "div",
@@ -1068,75 +1067,75 @@ class oe {
               width: "100%"
             }
           },
-          p(i)
+          d(i)
         )
       ] : []
     );
   }
 }
-function m(s, e = {}) {
-  const t = { ...e, isOn: s }, i = new oe(t);
+function g(s, e = {}) {
+  const t = { ...e, isOn: s }, i = new ce(t);
   return T(i);
 }
-function N(s, e, t = {}) {
-  return m(e, { ...t, label: s });
+function G(s, e, t = {}) {
+  return g(e, { ...t, label: s });
 }
-const fe = {
+const ye = {
   /**
    * Switch toggle (default)
    */
   Switch(s, e = {}) {
-    return m(s, { ...e, variant: "switch" });
+    return g(s, { ...e, variant: "switch" });
   },
   /**
    * Checkbox toggle
    */
   Checkbox(s, e = {}) {
-    return m(s, { ...e, variant: "checkbox" });
+    return g(s, { ...e, variant: "checkbox" });
   },
   /**
    * Button toggle
    */
   Button(s, e = {}) {
-    return m(s, { ...e, variant: "button" });
+    return g(s, { ...e, variant: "button" });
   },
   /**
    * Small toggle
    */
   Small(s, e = {}) {
-    return m(s, { ...e, size: "small" });
+    return g(s, { ...e, size: "small" });
   },
   /**
    * Large toggle
    */
   Large(s, e = {}) {
-    return m(s, { ...e, size: "large" });
+    return g(s, { ...e, size: "large" });
   },
   /**
    * Custom color toggle
    */
   CustomColor(s, e, t = {}) {
-    return m(s, { ...t, color: e });
+    return g(s, { ...t, color: e });
   },
   /**
    * Toggle with leading label
    */
   WithLeadingLabel(s, e, t = {}) {
-    return m(e, { ...t, label: s, labelPosition: "leading" });
+    return g(e, { ...t, label: s, labelPosition: "leading" });
   },
   /**
    * Toggle with trailing label (default)
    */
   WithTrailingLabel(s, e, t = {}) {
-    return m(e, { ...t, label: s, labelPosition: "trailing" });
+    return g(e, { ...t, label: s, labelPosition: "trailing" });
   }
-}, ge = {
+}, Se = {
   /**
    * Create a toggle group with multiple options
    */
   createGroup(s, e = {}) {
     return s.map(
-      (t) => N(t.label, t.isOn, {
+      (t) => G(t.label, t.isOn, {
         ...e,
         onToggle: t.onToggle
       })
@@ -1148,10 +1147,10 @@ const fe = {
   createExclusiveGroup(s, e, t, i = {}) {
     const r = () => l(e) ? e() : e;
     return s.map(
-      (n) => N(n.label, r() === n.key, {
+      (o) => G(o.label, r() === o.key, {
         ...i,
-        onToggle: (o) => {
-          o && t && t(n.key);
+        onToggle: (n) => {
+          n && t && t(o.key);
         }
       })
     );
@@ -1188,22 +1187,22 @@ const fe = {
     }
   }
 };
-var ae = Object.defineProperty, le = (s, e, t) => e in s ? ae(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, b = (s, e, t) => le(s, typeof e != "symbol" ? e + "" : e, t);
-class de {
+var de = Object.defineProperty, pe = (s, e, t) => e in s ? de(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, u = (s, e, t) => pe(s, typeof e != "symbol" ? e + "" : e, t);
+class he {
   constructor(e) {
-    this.props = e, b(this, "type", "component"), b(this, "id"), b(this, "mounted", !1), b(this, "cleanup", []), b(this, "isOpen"), b(this, "setIsOpen"), b(this, "searchTerm"), b(this, "setSearchTerm"), b(this, "handleSelection", (o) => {
-      this.props.onSelectionChange && this.props.onSelectionChange(o), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
-    }), b(this, "toggleOpen", () => {
+    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", (n) => {
+      this.props.onSelectionChange && this.props.onSelectionChange(n), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
+    }), u(this, "toggleOpen", () => {
       this.isDisabled() || this.setIsOpen(!this.isOpen());
     }), this.id = `picker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [t, i] = z(!1), [r, n] = z("");
-    if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = r, this.setSearchTerm = n, typeof window < "u") {
-      const o = (d) => {
-        const u = document.getElementById(this.id);
-        u && !u.contains(d.target) && this.setIsOpen(!1);
+    const [t, i] = R(!1), [r, o] = R("");
+    if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = r, this.setSearchTerm = o, typeof window < "u") {
+      const n = (c) => {
+        const f = document.getElementById(this.id);
+        f && !f.contains(c.target) && this.setIsOpen(!1);
       };
-      document.addEventListener("click", o), this.cleanup.push(() => {
-        document.removeEventListener("click", o);
+      document.addEventListener("click", n), this.cleanup.push(() => {
+        document.removeEventListener("click", n);
       });
     }
   }
@@ -1316,7 +1315,7 @@ class de {
               color: e ? "#1a1a1a" : "#6b7280"
             }
           },
-          p(
+          d(
             e?.label || this.props.placeholder || "Select an option"
           )
         ),
@@ -1330,7 +1329,7 @@ class de {
               transition: "transform 0.2s"
             }
           },
-          p("▼")
+          d("▼")
         )
       ),
       ...r ? [
@@ -1365,9 +1364,9 @@ class de {
                 type: "text",
                 placeholder: "Search options...",
                 value: this.searchTerm(),
-                onInput: (n) => {
-                  const o = n.target;
-                  this.setSearchTerm(o.value);
+                onInput: (o) => {
+                  const n = o.target;
+                  this.setSearchTerm(n.value);
                 },
                 style: {
                   width: "100%",
@@ -1380,21 +1379,21 @@ class de {
             )
           ] : [],
           ...t.map(
-            (n) => a(
+            (o) => a(
               "button",
               {
                 type: "button",
-                key: String(n.value),
-                onClick: () => this.handleSelection(n.value),
-                disabled: n.disabled,
+                key: String(o.value),
+                onClick: () => this.handleSelection(o.value),
+                disabled: o.disabled,
                 style: {
                   width: "100%",
                   padding: "8px 12px",
                   textAlign: "left",
-                  backgroundColor: n.value === this.getSelection() ? "#f3f4f6" : "transparent",
+                  backgroundColor: o.value === this.getSelection() ? "#f3f4f6" : "transparent",
                   border: "none",
-                  cursor: n.disabled ? "not-allowed" : "pointer",
-                  opacity: n.disabled ? 0.5 : 1,
+                  cursor: o.disabled ? "not-allowed" : "pointer",
+                  opacity: o.disabled ? 0.5 : 1,
                   fontSize: "14px",
                   display: "flex",
                   alignItems: "center",
@@ -1404,18 +1403,18 @@ class de {
                   }
                 }
               },
-              ...n.icon ? [
+              ...o.icon ? [
                 a(
                   "span",
                   { style: { fontSize: "16px" } },
-                  p(n.icon)
+                  d(o.icon)
                 )
               ] : [],
               a(
                 "div",
                 {},
-                a("div", {}, p(n.label)),
-                ...n.description ? [
+                a("div", {}, d(o.label)),
+                ...o.description ? [
                   a(
                     "div",
                     {
@@ -1425,7 +1424,7 @@ class de {
                         marginTop: "2px"
                       }
                     },
-                    p(n.description)
+                    d(o.description)
                   )
                 ] : []
               )
@@ -1442,7 +1441,7 @@ class de {
                   fontSize: "14px"
                 }
               },
-              p("No options found")
+              d("No options found")
             )
           ] : []
         )
@@ -1467,7 +1466,7 @@ class de {
         "aria-label": this.props.accessibilityLabel
       },
       ...e.map(
-        (r, n) => a(
+        (r, o) => a(
           "button",
           {
             type: "button",
@@ -1489,8 +1488,8 @@ class de {
               boxShadow: r.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
               transition: "all 0.2s",
               margin: "0",
-              ...n === 0 && { marginRight: "1px" },
-              ...n === e.length - 1 && { marginLeft: "1px" }
+              ...o === 0 && { marginRight: "1px" },
+              ...o === e.length - 1 && { marginLeft: "1px" }
             }
           },
           ...r.icon ? [
@@ -1502,10 +1501,10 @@ class de {
                   fontSize: "14px"
                 }
               },
-              p(r.icon)
+              d(r.icon)
             )
           ] : [],
-          p(r.label)
+          d(r.label)
         )
       )
     );
@@ -1520,10 +1519,10 @@ class de {
       {
         value: String(t),
         onChange: (i) => {
-          const r = i.target, n = e.find(
-            (o) => String(o.value) === r.value
+          const r = i.target, o = e.find(
+            (n) => String(n.value) === r.value
           );
-          n && this.handleSelection(n.value);
+          o && this.handleSelection(o.value);
         },
         disabled: this.isDisabled(),
         style: {
@@ -1544,7 +1543,7 @@ class de {
             value: String(i.value),
             disabled: i.disabled
           },
-          p(i.label)
+          d(i.label)
         )
       )
     );
@@ -1558,22 +1557,22 @@ class de {
       "aria-label": t,
       "aria-describedby": i ? `${this.id}-hint` : void 0
     };
-    let n;
+    let o;
     switch (e) {
       case "segmented":
-        n = this.renderSegmented();
+        o = this.renderSegmented();
         break;
       case "wheel":
-        n = this.renderWheel();
+        o = this.renderWheel();
         break;
       default:
-        n = this.renderDropdown();
+        o = this.renderDropdown();
         break;
     }
     return a(
       "div",
       r,
-      n,
+      o,
       ...i ? [
         a(
           "div",
@@ -1585,46 +1584,46 @@ class de {
               marginTop: "4px"
             }
           },
-          p(i)
+          d(i)
         )
       ] : []
     );
   }
 }
-function $(s, e, t = {}) {
-  const i = { ...t, selection: s, options: e }, r = new de(i);
+function D(s, e, t = {}) {
+  const i = { ...t, selection: s, options: e }, r = new he(i);
   return T(r);
 }
-const be = {
+const xe = {
   /**
    * Dropdown picker (default)
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic dropdown picker requires flexible type
   Dropdown(s, e, t = {}) {
-    return $(s, e, { ...t, variant: "dropdown" });
+    return D(s, e, { ...t, variant: "dropdown" });
   },
   /**
    * Segmented picker
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic segmented picker requires flexible type
   Segmented(s, e, t = {}) {
-    return $(s, e, { ...t, variant: "segmented" });
+    return D(s, e, { ...t, variant: "segmented" });
   },
   /**
    * Wheel picker (native select)
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic wheel picker requires flexible type
   Wheel(s, e, t = {}) {
-    return $(s, e, { ...t, variant: "wheel" });
+    return D(s, e, { ...t, variant: "wheel" });
   },
   /**
    * Menu picker
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic menu picker requires flexible type
   Menu(s, e, t = {}) {
-    return $(s, e, { ...t, variant: "menu" });
+    return D(s, e, { ...t, variant: "menu" });
   }
-}, me = {
+}, ve = {
   /**
    * Create options from simple array
    */
@@ -1657,19 +1656,19 @@ const be = {
   }
 };
 export {
-  E as B,
-  ee as E,
-  ue as L,
-  $ as P,
-  m as T,
-  he as a,
-  x as b,
-  oe as c,
-  Q as d,
-  fe as e,
-  ge as f,
-  N as g,
-  de as h,
-  be as i,
-  me as j
+  k as B,
+  z as E,
+  me as L,
+  D as P,
+  g as T,
+  be as a,
+  S as b,
+  ce as c,
+  se as d,
+  ye as e,
+  Se as f,
+  G as g,
+  he as h,
+  xe as i,
+  ve as j
 };