@floegence/floe-webapp-core 0.90.11 → 0.90.12

package/dist/components/ui/SegmentedControl.js

@@ -1,8 +1,8 @@
-import { spread as C, mergeProps as w, insert as i, createComponent as g, memo as z, effect as _, setAttribute as m, className as $, template as p, delegateEvents as S } from "solid-js/web";
-import { splitProps as P, For as A } from "solid-js";
-import { cn as b } from "../../utils/cn.js";
-var D = /* @__PURE__ */ p("<div role=group data-floe-surface=inset data-floe-surface-part=rail>"), E = /* @__PURE__ */ p('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5">');
-const F = {
+import { use as $, spread as V, mergeProps as q, insert as k, createComponent as W, memo as B, effect as j, setAttribute as p, className as A, setStyleProperty as x, template as H, delegateEvents as G } from "solid-js/web";
+import { splitProps as I, createSignal as J, createEffect as K, onMount as Q, onCleanup as D, For as U, untrack as X } from "solid-js";
+import { cn as z } from "../../utils/cn.js";
+var Y = /* @__PURE__ */ H("<div role=group data-floe-surface=inset data-floe-surface-part=rail><span aria-hidden=true>"), Z = /* @__PURE__ */ H('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5"><span class=floe-segmented-control__label>');
+const ee = {
   sm: {
     container: "p-0.5 gap-0.5",
     button: "h-[var(--floe-control-height-xs)] px-[var(--floe-control-padding-sm)] rounded-sm",
@@ -19,46 +19,113 @@ const F = {
     icon: "w-4 h-4"
   }
 };
-function B(h) {
-  const [o, x] = P(h, ["value", "onChange", "options", "size", "disabled", "class"]), y = () => o.size ?? "md", a = () => F[y()], k = (n, r) => {
-    o.disabled || r || n !== o.value && o.onChange(n);
+function ne(L) {
+  const [r, N] = I(L, ["value", "onChange", "options", "size", "disabled", "class"]);
+  let d, c;
+  const b = /* @__PURE__ */ new Map(), [s, S] = J();
+  let f, u, h;
+  const y = () => {
+    const o = b.get(r.value);
+    if (!d || !o) {
+      u?.cancel(), S(void 0), h = void 0;
+      return;
+    }
+    if (!o.offsetWidth || !d.getClientRects().length) return;
+    const n = {
+      x: o.offsetLeft,
+      y: o.offsetTop,
+      width: o.offsetWidth,
+      height: o.offsetHeight
+    }, v = X(s);
+    if (v && Object.keys(n).every((a) => n[a] === v[a]) && h === r.value) return;
+    const e = v && h !== r.value && c && !window.matchMedia("(prefers-reduced-motion: reduce), (forced-colors: active)").matches ? getComputedStyle(c) : void 0, l = e ? {
+      transform: e.transform,
+      width: e.width
+    } : void 0;
+    if (u?.cancel(), S(n), h = r.value, l && c) {
+      const a = getComputedStyle(d);
+      u = c.animate([l, {
+        transform: `translate(${n.x}px, ${n.y}px)`,
+        width: `${n.width}px`
+      }], {
+        duration: parseFloat(a.getPropertyValue("--floe-duration-base")) || 200,
+        easing: a.getPropertyValue("--floe-ease-out").trim() || "ease-out"
+      }), u.id = "floe-segmented-selection";
+    }
+  };
+  K(() => {
+    r.value, r.options, r.size, y();
+  }), Q(() => {
+    if (typeof ResizeObserver < "u") {
+      f = new ResizeObserver(y), f.observe(d);
+      for (const o of b.values()) f.observe(o);
+    }
+    y();
+  }), D(() => {
+    f?.disconnect(), u?.cancel();
+  });
+  const P = () => r.size ?? "md", w = () => ee[P()], T = (o, n) => {
+    r.disabled || n || o !== r.value && r.onChange(o);
   };
   return (() => {
-    var n = D();
-    return C(n, w({
+    var o = Y(), n = o.firstChild, v = d;
+    typeof v == "function" ? $(v, o) : d = o, V(o, q({
+      get "data-floe-segmented-pill"() {
+        return s() ? "true" : void 0;
+      },
+      get "data-floe-segmented-motion"() {
+        return s() ? "ready" : void 0;
+      },
       get class() {
-        return b("floe-segmented-control inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", a().container, o.disabled && "opacity-50 pointer-events-none", o.class);
+        return z("floe-segmented-control relative inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", w().container, r.disabled && "opacity-50 pointer-events-none", r.class);
       }
-    }, x), !1, !0), i(n, g(A, {
+    }, N), !1, !0);
+    var C = c;
+    return typeof C == "function" ? $(C, n) : c = n, k(o, W(U, {
       get each() {
-        return o.options;
+        return r.options;
       },
-      children: (r) => {
-        const l = () => o.value === r.value, s = () => o.disabled || r.disabled;
+      children: (e) => {
+        const l = () => r.value === e.value, a = () => r.disabled || e.disabled;
         return (() => {
-          var t = E(), c = t.firstChild;
-          return t.$$click = () => k(r.value, r.disabled), i(c, (() => {
-            var e = z(() => !!r.icon);
-            return () => e() && g(r.icon, {
+          var i = Z(), g = i.firstChild, m = g.firstChild;
+          return i.$$click = () => T(e.value, e.disabled), $((t) => {
+            b.set(e.value, t), f?.observe(t), D(() => {
+              f?.unobserve(t), b.delete(e.value);
+            });
+          }, i), k(g, (() => {
+            var t = B(() => !!e.icon);
+            return () => t() && W(e.icon, {
               get class() {
-                return a().icon;
+                return w().icon;
               }
             });
-          })(), null), i(c, () => r.label, null), _((e) => {
-            var d = l() ? "raised" : "flat", f = l(), u = s(), v = b("floe-segmented-control__item font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", a().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", s() && "cursor-not-allowed opacity-50");
-            return d !== e.e && m(t, "data-floe-surface", e.e = d), f !== e.t && m(t, "aria-checked", e.t = f), u !== e.a && (t.disabled = e.a = u), v !== e.o && $(t, e.o = v), e;
+          })(), m), k(m, () => e.label), j((t) => {
+            var _ = e.label, M = e.label, O = l() ? "raised" : "flat", R = l(), E = a(), F = z("floe-segmented-control__item relative font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", w().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", a() && "cursor-not-allowed opacity-50");
+            return _ !== t.e && p(i, "aria-label", t.e = _), M !== t.t && p(i, "title", t.t = M), O !== t.a && p(i, "data-floe-surface", t.a = O), R !== t.o && p(i, "aria-checked", t.o = R), E !== t.i && (i.disabled = t.i = E), F !== t.n && A(i, t.n = F), t;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
-            o: void 0
-          }), t;
+            o: void 0,
+            i: void 0,
+            n: void 0
+          }), i;
         })();
       }
-    })), n;
+    }), null), j((e) => {
+      var l = z("floe-segmented-control__pill", P() === "lg" ? "rounded-md" : "rounded-sm"), a = s() ? "visible" : "hidden", i = `translate(${s()?.x ?? 0}px, ${s()?.y ?? 0}px)`, g = `${s()?.width ?? 0}px`, m = `${s()?.height ?? 0}px`;
+      return l !== e.e && A(n, e.e = l), a !== e.t && x(n, "visibility", e.t = a), i !== e.a && x(n, "transform", e.a = i), g !== e.o && x(n, "width", e.o = g), m !== e.i && x(n, "height", e.i = m), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), o;
   })();
 }
-S(["click"]);
+G(["click"]);
 export {
-  B as SegmentedControl
+  ne as SegmentedControl
 };