@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/components/ui/Progress.js

@@ -1,7 +1,7 @@
-import { spread as T, mergeProps as W, memo as B, insert as w, createComponent as P, effect as y, setAttribute as d, className as x, setStyleProperty as E, style as H, template as p } from "solid-js/web";
+import { spread as T, mergeProps as W, memo as B, insert as p, createComponent as P, effect as k, setAttribute as c, className as x, setStyleProperty as E, style as H, template as w } from "solid-js/web";
 import { splitProps as A, Show as j, For as G } from "solid-js";
 import { cn as i } from "../../utils/cn.js";
-var J = /* @__PURE__ */ p('<div class="flex justify-between mb-1"><span>Progress</span><span>'), K = /* @__PURE__ */ p('<div class="absolute inset-0 bg-muted-foreground/20 transition-all duration-300 rounded-full">'), O = /* @__PURE__ */ p(`<div><div data-floe-surface=inset data-floe-surface-part=progress-track role=progressbar aria-valuemin=0><div data-floe-surface=raised data-floe-surface-part=progress-fill></div></div><style>
+var J = /* @__PURE__ */ w('<div class="mb-[var(--floe-gap-inline)] flex items-baseline justify-between"><span>Progress</span><span>'), K = /* @__PURE__ */ w('<div class="absolute inset-0 rounded-xs bg-[color-mix(in_srgb,var(--floe-ink)_16%,transparent)] transition-[width] duration-[var(--floe-duration-slow)] ease-[var(--floe-ease-out)]">'), O = /* @__PURE__ */ w(`<div><div data-floe-surface=inset data-floe-surface-part=progress-track role=progressbar aria-valuemin=0><div data-floe-surface=raised data-floe-surface-part=progress-fill></div></div><style>
         .bg-striped {
           background-image: linear-gradient(
             45deg,
@@ -29,19 +29,19 @@ var J = /* @__PURE__ */ p('<div class="flex justify-between mb-1"><span>Progress
         .animate-indeterminate {
           animation: indeterminate 1.5s ease-in-out infinite;
         }
-      `), Q = /* @__PURE__ */ p("<svg><circle fill=none stroke=currentColor class=text-muted></svg>", !1, !0, !1), R = /* @__PURE__ */ p("<span>"), U = /* @__PURE__ */ p("<div data-floe-surface-part=progress-circle role=progressbar aria-valuemin=0><svg><circle fill=none stroke=currentColor stroke-linecap=round>"), Y = /* @__PURE__ */ p('<div class="flex justify-between mb-1"><span>Progress</span><span>%'), Z = /* @__PURE__ */ p("<div><div class=flex role=progressbar aria-valuemin=0>"), ee = /* @__PURE__ */ p("<div data-floe-surface-part=progress-fill>"), te = /* @__PURE__ */ p("<div>"), re = /* @__PURE__ */ p("<div data-floe-surface=inset data-floe-surface-part=progress-track>"), ae = /* @__PURE__ */ p("<div><div><div data-floe-surface-part=step></div></div><span>"), ne = /* @__PURE__ */ p('<svg class="w-3 h-3"viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2><path d="M2 6l3 3 5-6">');
-const _ = {
+      `), Q = /* @__PURE__ */ w("<svg><circle fill=none stroke=currentColor class=text-[var(--floe-well-strong)]></svg>", !1, !0, !1), R = /* @__PURE__ */ w("<span>"), U = /* @__PURE__ */ w("<div data-floe-surface-part=progress-circle role=progressbar aria-valuemin=0><svg><circle fill=none stroke=currentColor stroke-linecap=round>"), Y = /* @__PURE__ */ w('<div class="mb-[var(--floe-gap-inline)] flex items-baseline justify-between"><span>Progress</span><span>%'), Z = /* @__PURE__ */ w("<div><div class=flex role=progressbar aria-valuemin=0>"), ee = /* @__PURE__ */ w("<div data-floe-surface-part=progress-fill>"), te = /* @__PURE__ */ w("<div>"), re = /* @__PURE__ */ w("<div data-floe-surface=inset data-floe-surface-part=progress-track>"), ae = /* @__PURE__ */ w("<div><div><div data-floe-surface-part=step></div></div><span>"), oe = /* @__PURE__ */ w('<svg class="w-3 h-3"viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2><path d="M2 6l3 3 5-6">');
+const F = {
   sm: {
     track: "h-1",
-    label: "text-[10px]"
+    label: "text-[length:var(--floe-type-caption)]"
   },
   md: {
-    track: "h-2",
-    label: "text-xs"
+    track: "h-1.5",
+    label: "text-[length:var(--floe-type-caption)]"
   },
   lg: {
-    track: "h-3",
-    label: "text-xs"
+    track: "h-2",
+    label: "text-[length:var(--floe-type-supporting)]"
   }
 }, S = {
   primary: {
@@ -65,66 +65,63 @@ const _ = {
     label: "text-info"
   }
 };
-function de(L) {
-  const [e, F] = A(L, ["value", "max", "size", "color", "showLabel", "labelFormat", "striped", "animated", "indeterminate", "buffer", "class"]), l = () => e.size ?? "md", g = () => e.color ?? "primary", u = () => e.max ?? 100, h = () => Math.min(Math.max(e.value ?? 0, 0), u()), f = () => h() / u() * 100, C = () => e.buffer ? Math.min(e.buffer / u() * 100, 100) : 0, b = () => e.labelFormat ? e.labelFormat(h(), u()) : `${Math.round(f())}%`;
+function ce(_) {
+  const [e, L] = A(_, ["value", "max", "size", "color", "showLabel", "labelFormat", "striped", "animated", "indeterminate", "buffer", "class"]), s = () => e.size ?? "md", g = () => e.color ?? "primary", u = () => e.max ?? 100, b = () => Math.min(Math.max(e.value ?? 0, 0), u()), f = () => b() / u() * 100, C = () => e.buffer ? Math.min(e.buffer / u() * 100, 100) : 0, h = () => e.labelFormat ? e.labelFormat(b(), u()) : `${Math.round(f())}%`;
   return (() => {
-    var c = O(), m = c.firstChild, v = m.firstChild;
-    return T(c, W({
+    var d = O(), v = d.firstChild, m = v.firstChild;
+    return T(d, W({
       get class() {
         return i("w-full", e.class);
       }
-    }, F), !1, !0), w(c, P(j, {
+    }, L), !1, !0), p(d, P(j, {
       get when() {
         return e.showLabel;
       },
       get children() {
-        var a = J(), n = a.firstChild, s = n.nextSibling;
-        return w(s, b), y((r) => {
-          var t = i("text-muted-foreground", _[l()].label), o = i("font-medium tabular-nums", _[l()].label, S[g()].label);
-          return t !== r.e && x(n, r.e = t), o !== r.t && x(s, r.t = o), r;
+        var a = J(), o = a.firstChild, l = o.nextSibling;
+        return p(l, h), k((r) => {
+          var t = i("text-[var(--floe-ink-soft)]", F[s()].label), n = i("font-medium tabular-nums", F[s()].label, S[g()].label);
+          return t !== r.e && x(o, r.e = t), n !== r.t && x(l, r.t = n), r;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), m), w(m, P(j, {
+    }), v), p(v, P(j, {
       get when() {
         return e.buffer;
       },
       get children() {
         var a = K();
-        return y((n) => E(a, "width", `${C()}%`)), a;
+        return k((o) => E(a, "width", `${C()}%`)), a;
       }
-    }), v), y((a) => {
-      var n = i("relative w-full overflow-hidden rounded-full bg-muted", _[l()].track), s = e.indeterminate ? void 0 : h(), r = u(), t = i("h-full rounded-full transition-all duration-300", S[g()].bar, e.striped && "bg-striped", e.animated && e.striped && "animate-stripe", e.indeterminate && "animate-indeterminate w-1/3"), o = e.indeterminate ? void 0 : {
+    }), m), k((a) => {
+      var o = i("relative w-full overflow-hidden rounded-xs bg-[var(--floe-well)]", F[s()].track), l = e.indeterminate ? void 0 : b(), r = u(), t = i("h-full rounded-xs transition-[width] duration-[var(--floe-duration-slow)] ease-[var(--floe-ease-out)]", S[g()].bar, e.striped && "bg-striped", e.animated && e.striped && "animate-stripe", e.indeterminate && "animate-indeterminate w-1/3"), n = e.indeterminate ? void 0 : {
         width: `${f()}%`
       };
-      return n !== a.e && x(m, a.e = n), s !== a.t && d(m, "aria-valuenow", a.t = s), r !== a.a && d(m, "aria-valuemax", a.a = r), t !== a.o && x(v, a.o = t), a.i = H(v, o, a.i), a;
+      return o !== a.e && x(v, a.e = o), l !== a.t && c(v, "aria-valuenow", a.t = l), r !== a.a && c(v, "aria-valuemax", a.a = r), t !== a.o && x(m, a.o = t), a.i = H(m, n, a.i), a;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), c;
+    }), d;
   })();
 }
-const oe = {
+const ne = {
   sm: 32,
   md: 48,
   lg: 64
 };
-function ce(L) {
-  const [e, F] = A(L, ["value", "max", "size", "strokeWidth", "color", "showLabel", "labelFormat", "indeterminate", "showTrack", "class"]), l = () => {
-    const n = e.size ?? "md";
-    return typeof n == "number" ? n : oe[n];
-  }, g = () => e.strokeWidth ?? l() / 10, u = () => e.color ?? "primary", h = () => e.max ?? 100, f = () => Math.min(Math.max(e.value ?? 0, 0), h()), C = () => f() / h() * 100, b = () => (l() - g()) / 2, c = () => 2 * Math.PI * b(), m = () => c() - C() / 100 * c(), v = () => e.labelFormat ? e.labelFormat(f(), h()) : `${Math.round(C())}%`, a = () => {
-    const n = l();
-    return n <= 32 ? "text-[8px]" : n <= 48 ? "text-[10px]" : n <= 64 ? "text-xs" : "text-sm";
-  };
+function de(_) {
+  const [e, L] = A(_, ["value", "max", "size", "strokeWidth", "color", "showLabel", "labelFormat", "indeterminate", "showTrack", "class"]), s = () => {
+    const o = e.size ?? "md";
+    return typeof o == "number" ? o : ne[o];
+  }, g = () => e.strokeWidth ?? s() / 10, u = () => e.color ?? "primary", b = () => e.max ?? 100, f = () => Math.min(Math.max(e.value ?? 0, 0), b()), C = () => f() / b() * 100, h = () => (s() - g()) / 2, d = () => 2 * Math.PI * h(), v = () => d() - C() / 100 * d(), m = () => e.labelFormat ? e.labelFormat(f(), b()) : `${Math.round(C())}%`, a = () => s() <= 48 ? "text-[length:var(--floe-type-caption)]" : "text-[length:var(--floe-type-supporting)]";
   return (() => {
-    var n = U(), s = n.firstChild, r = s.firstChild;
-    return T(n, W({
+    var o = U(), l = o.firstChild, r = l.firstChild;
+    return T(o, W({
       get "data-floe-surface"() {
         return e.showTrack !== !1 ? "inset" : void 0;
       },
@@ -133,25 +130,25 @@ function ce(L) {
       },
       get style() {
         return {
-          width: `${l()}px`,
-          height: `${l()}px`
+          width: `${s()}px`,
+          height: `${s()}px`
         };
       },
       get "aria-valuenow"() {
         return B(() => !!e.indeterminate)() ? void 0 : f();
       },
       get "aria-valuemax"() {
-        return h();
+        return b();
       }
-    }, F), !1, !0), w(s, P(j, {
+    }, L), !1, !0), p(l, P(j, {
       get when() {
         return e.showTrack !== !1;
       },
       get children() {
         var t = Q();
-        return y((o) => {
-          var k = l() / 2, z = l() / 2, M = b(), $ = g();
-          return k !== o.e && d(t, "cx", o.e = k), z !== o.t && d(t, "cy", o.t = z), M !== o.a && d(t, "r", o.a = M), $ !== o.o && d(t, "stroke-width", o.o = $), o;
+        return k((n) => {
+          var y = s() / 2, z = s() / 2, M = h(), $ = g();
+          return y !== n.e && c(t, "cx", n.e = y), z !== n.t && c(t, "cy", n.t = z), M !== n.a && c(t, "r", n.a = M), $ !== n.o && c(t, "stroke-width", n.o = $), n;
         }, {
           e: void 0,
           t: void 0,
@@ -159,17 +156,17 @@ function ce(L) {
           o: void 0
         }), t;
       }
-    }), r), w(n, P(j, {
+    }), r), p(o, P(j, {
       get when() {
         return B(() => !!e.showLabel)() && !e.indeterminate;
       },
       get children() {
         var t = R();
-        return w(t, v), y(() => x(t, i("absolute font-medium tabular-nums", a(), S[u()].label))), t;
+        return p(t, m), k(() => x(t, i("absolute font-medium tabular-nums", a(), S[u()].label))), t;
       }
-    }), null), y((t) => {
-      var o = i("transform -rotate-90", e.indeterminate && "animate-spin"), k = l(), z = l(), M = l() / 2, $ = l() / 2, D = b(), I = g(), N = String(c()), V = e.indeterminate ? c() * 0.75 : m(), q = i("transition-all duration-300", S[u()].label);
-      return o !== t.e && d(s, "class", t.e = o), k !== t.t && d(s, "width", t.t = k), z !== t.a && d(s, "height", t.a = z), M !== t.o && d(r, "cx", t.o = M), $ !== t.i && d(r, "cy", t.i = $), D !== t.n && d(r, "r", t.n = D), I !== t.s && d(r, "stroke-width", t.s = I), N !== t.h && d(r, "stroke-dasharray", t.h = N), V !== t.r && d(r, "stroke-dashoffset", t.r = V), q !== t.d && d(r, "class", t.d = q), t;
+    }), null), k((t) => {
+      var n = i("transform -rotate-90", e.indeterminate && "animate-spin"), y = s(), z = s(), M = s() / 2, $ = s() / 2, D = h(), I = g(), N = String(d()), V = e.indeterminate ? d() * 0.75 : v(), q = i("transition-[stroke-dashoffset] duration-[var(--floe-duration-slow)] ease-[var(--floe-ease-out)]", S[u()].label);
+      return n !== t.e && c(l, "class", t.e = n), y !== t.t && c(l, "width", t.t = y), z !== t.a && c(l, "height", t.a = z), M !== t.o && c(r, "cx", t.o = M), $ !== t.i && c(r, "cy", t.i = $), D !== t.n && c(r, "r", t.n = D), I !== t.s && c(r, "stroke-width", t.s = I), N !== t.h && c(r, "stroke-dasharray", t.h = N), V !== t.r && c(r, "stroke-dashoffset", t.r = V), q !== t.d && c(r, "class", t.d = q), t;
     }, {
       e: void 0,
       t: void 0,
@@ -181,104 +178,104 @@ function ce(L) {
       h: void 0,
       r: void 0,
       d: void 0
-    }), n;
+    }), o;
   })();
 }
-function ue(L) {
-  const [e, F] = A(L, ["value", "max", "segments", "size", "color", "showLabel", "gap", "class"]), l = () => e.size ?? "md", g = () => e.color ?? "primary", u = () => e.max ?? 100, h = () => e.segments ?? 5, f = () => e.gap ?? 2, C = () => Math.min(Math.max(e.value ?? 0, 0), u()), b = () => C() / u() * 100, c = () => Math.round(b() / 100 * h());
+function ue(_) {
+  const [e, L] = A(_, ["value", "max", "segments", "size", "color", "showLabel", "gap", "class"]), s = () => e.size ?? "md", g = () => e.color ?? "primary", u = () => e.max ?? 100, b = () => e.segments ?? 5, f = () => e.gap ?? 2, C = () => Math.min(Math.max(e.value ?? 0, 0), u()), h = () => C() / u() * 100, d = () => Math.round(h() / 100 * b());
   return (() => {
-    var m = Z(), v = m.firstChild;
-    return T(m, W({
+    var v = Z(), m = v.firstChild;
+    return T(v, W({
       get class() {
         return i("w-full", e.class);
       }
-    }, F), !1, !0), w(m, P(j, {
+    }, L), !1, !0), p(v, P(j, {
       get when() {
         return e.showLabel;
       },
       get children() {
-        var a = Y(), n = a.firstChild, s = n.nextSibling, r = s.firstChild;
-        return w(s, () => Math.round(b()), r), y((t) => {
-          var o = i("text-muted-foreground", _[l()].label), k = i("font-medium tabular-nums", _[l()].label, S[g()].label);
-          return o !== t.e && x(n, t.e = o), k !== t.t && x(s, t.t = k), t;
+        var a = Y(), o = a.firstChild, l = o.nextSibling, r = l.firstChild;
+        return p(l, () => Math.round(h()), r), k((t) => {
+          var n = i("text-[var(--floe-ink-soft)]", F[s()].label), y = i("font-medium tabular-nums", F[s()].label, S[g()].label);
+          return n !== t.e && x(o, t.e = n), y !== t.t && x(l, t.t = y), t;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), v), w(v, P(G, {
+    }), m), p(m, P(G, {
       get each() {
         return Array.from({
-          length: h()
+          length: b()
         });
       },
-      children: (a, n) => (() => {
-        var s = ee();
-        return y((r) => {
-          var t = n() < c() ? "raised" : "inset", o = i("flex-1 rounded-full transition-colors duration-200", _[l()].track, n() < c() ? S[g()].bar : "bg-muted");
-          return t !== r.e && d(s, "data-floe-surface", r.e = t), o !== r.t && x(s, r.t = o), r;
+      children: (a, o) => (() => {
+        var l = ee();
+        return k((r) => {
+          var t = o() < d() ? "raised" : "inset", n = i("flex-1 rounded-xs transition-colors duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]", F[s()].track, o() < d() ? S[g()].bar : "bg-[var(--floe-well)]");
+          return t !== r.e && c(l, "data-floe-surface", r.e = t), n !== r.t && x(l, r.t = n), r;
         }, {
           e: void 0,
           t: void 0
-        }), s;
+        }), l;
       })()
-    })), y((a) => {
-      var n = `${f()}px`, s = C(), r = u();
-      return n !== a.e && E(v, "gap", a.e = n), s !== a.t && d(v, "aria-valuenow", a.t = s), r !== a.a && d(v, "aria-valuemax", a.a = r), a;
+    })), k((a) => {
+      var o = `${f()}px`, l = C(), r = u();
+      return o !== a.e && E(m, "gap", a.e = o), l !== a.t && c(m, "aria-valuenow", a.t = l), r !== a.a && c(m, "aria-valuemax", a.a = r), a;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), m;
+    }), v;
   })();
 }
 const X = {
   sm: {
-    dot: "w-5 h-5 text-[10px]",
-    label: "text-[10px]",
-    connector: "h-0.5"
+    dot: "w-5 h-5 text-[length:var(--floe-type-caption)]",
+    label: "text-[length:var(--floe-type-caption)]",
+    connector: "h-px"
   },
   md: {
-    dot: "w-6 h-6 text-xs",
-    label: "text-xs",
-    connector: "h-0.5"
+    dot: "w-6 h-6 text-[length:var(--floe-type-caption)]",
+    label: "text-[length:var(--floe-type-supporting)]",
+    connector: "h-px"
   },
   lg: {
-    dot: "w-8 h-8 text-sm",
-    label: "text-sm",
-    connector: "h-1"
+    dot: "w-8 h-8 text-[length:var(--floe-type-supporting)]",
+    label: "text-[length:var(--floe-type-control)]",
+    connector: "h-0.5"
   }
 };
-function me(L) {
-  const [e, F] = A(L, ["current", "steps", "size", "color", "orientation", "class"]), l = () => e.size ?? "md", g = () => e.color ?? "primary", u = () => e.orientation === "vertical", h = (f) => f < e.current ? "completed" : f === e.current ? "current" : "pending";
+function ve(_) {
+  const [e, L] = A(_, ["current", "steps", "size", "color", "orientation", "class"]), s = () => e.size ?? "md", g = () => e.color ?? "primary", u = () => e.orientation === "vertical", b = (f) => f < e.current ? "completed" : f === e.current ? "current" : "pending";
   return (() => {
     var f = te();
     return T(f, W({
       get class() {
         return i("flex", u() ? "flex-col" : "flex-row items-start", e.class);
       }
-    }, F), !1, !0), w(f, P(G, {
+    }, L), !1, !0), p(f, P(G, {
       get each() {
         return e.steps;
       },
-      children: (C, b) => {
-        const c = () => h(b()), m = () => b() === e.steps.length - 1;
+      children: (C, h) => {
+        const d = () => b(h()), v = () => h() === e.steps.length - 1;
         return (() => {
-          var v = ae(), a = v.firstChild, n = a.firstChild, s = a.nextSibling;
-          return w(n, (() => {
-            var r = B(() => c() === "completed");
-            return () => r() ? ne() : b() + 1;
-          })()), w(a, P(j, {
+          var m = ae(), a = m.firstChild, o = a.firstChild, l = a.nextSibling;
+          return p(o, (() => {
+            var r = B(() => d() === "completed");
+            return () => r() ? oe() : h() + 1;
+          })()), p(a, P(j, {
             get when() {
-              return !m();
+              return !v();
             },
             get children() {
               var r = re();
-              return y(() => x(r, i("transition-colors duration-200", u() ? i("w-0.5 h-8 my-1", b() < e.current ? S[g()].bar : "bg-muted") : i("flex-1 mx-2", X[l()].connector, b() < e.current ? S[g()].bar : "bg-muted")))), r;
+              return k(() => x(r, i("transition-colors duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]", u() ? i("w-px h-8 my-1", h() < e.current ? S[g()].bar : "bg-[var(--floe-well-strong)]") : i("flex-1 mx-2", X[s()].connector, h() < e.current ? S[g()].bar : "bg-[var(--floe-well-strong)]")))), r;
             }
-          }), null), w(s, C), y((r) => {
-            var t = i("flex", u() ? "flex-row" : "flex-col items-center", !m() && "flex-1"), o = i("flex items-center", u() ? "flex-col" : "flex-row w-full"), k = c() === "pending" ? "inset" : "raised", z = c(), M = i("flex items-center justify-center rounded-full font-medium transition-colors duration-200 shrink-0", X[l()].dot, c() === "completed" && i(S[g()].bar, "text-primary-foreground"), c() === "current" && i("border-2", `border-current ${S[g()].label}`, "bg-background"), c() === "pending" && "bg-muted text-muted-foreground"), $ = i("mt-2 text-center", X[l()].label, c() === "current" ? "text-foreground font-medium" : "text-muted-foreground", u() && "ml-3 mt-0");
-            return t !== r.e && x(v, r.e = t), o !== r.t && x(a, r.t = o), k !== r.a && d(n, "data-floe-surface", r.a = k), z !== r.o && d(n, "data-floe-step-state", r.o = z), M !== r.i && x(n, r.i = M), $ !== r.n && x(s, r.n = $), r;
+          }), null), p(l, C), k((r) => {
+            var t = i("flex", u() ? "flex-row" : "flex-col items-center", !v() && "flex-1"), n = i("flex items-center", u() ? "flex-col" : "flex-row w-full"), y = d() === "pending" ? "inset" : "raised", z = d(), M = i("flex shrink-0 items-center justify-center rounded-full font-medium transition-colors duration-[var(--floe-duration-base)] ease-[var(--floe-ease-out)]", X[s()].dot, d() === "completed" && i(S[g()].bar, "text-primary-foreground"), d() === "current" && i(`border ${S[g()].label}`, "border-current bg-[var(--floe-plane)]"), d() === "pending" && "bg-[var(--floe-well)] text-[var(--floe-ink-soft)]"), $ = i("mt-2 text-center", X[s()].label, d() === "current" ? "font-medium text-[var(--floe-ink)]" : "text-[var(--floe-ink-soft)]", u() && "ml-3 mt-0");
+            return t !== r.e && x(m, r.e = t), n !== r.t && x(a, r.t = n), y !== r.a && c(o, "data-floe-surface", r.a = y), z !== r.o && c(o, "data-floe-step-state", r.o = z), M !== r.i && x(o, r.i = M), $ !== r.n && x(l, r.n = $), r;
           }, {
             e: void 0,
             t: void 0,
@@ -286,15 +283,15 @@ function me(L) {
             o: void 0,
             i: void 0,
             n: void 0
-          }), v;
+          }), m;
         })();
       }
     })), f;
   })();
 }
 export {
-  ce as CircularProgress,
-  de as LinearProgress,
+  de as CircularProgress,
+  ce as LinearProgress,
   ue as SegmentedProgress,
-  me as StepsProgress
+  ve as StepsProgress
 };

package/dist/components/ui/QuoteBlock.js

@@ -1,67 +1,67 @@
-import { spread as b, mergeProps as x, insert as r, createComponent as d, memo as h, effect as p, className as s, template as a } from "solid-js/web";
-import { splitProps as y, Show as i } from "solid-js";
+import { spread as v, mergeProps as b, insert as t, createComponent as i, memo as h, effect as p, className as s, template as a } from "solid-js/web";
+import { splitProps as x, Show as c } from "solid-js";
 import { cn as u } from "../../utils/cn.js";
-var v = /* @__PURE__ */ a("<span>"), $ = /* @__PURE__ */ a('<span class="mx-1 opacity-50">—'), _ = /* @__PURE__ */ a("<cite class=not-italic>"), w = /* @__PURE__ */ a("<footer>"), k = /* @__PURE__ */ a("<blockquote data-floe-surface=inset data-floe-surface-part=message><div>");
-function q(m) {
-  const [e, f] = y(m, ["variant", "citation", "author", "class", "children"]), t = () => e.variant ?? "default", g = () => t() === "inline" ? {} : {
-    "border-left-color": `color-mix(in srgb, var(--primary) ${(t() === "subtle" ? 0.5 : 0.7) * 100}%, transparent)`
+var y = /* @__PURE__ */ a("<span>"), $ = /* @__PURE__ */ a('<span class="mx-1 opacity-50">—'), w = /* @__PURE__ */ a("<cite class=not-italic>"), _ = /* @__PURE__ */ a("<footer>"), k = /* @__PURE__ */ a("<blockquote data-floe-surface=inset data-floe-surface-part=message><div>");
+function S(f) {
+  const [e, m] = x(f, ["variant", "citation", "author", "class", "children"]), r = () => e.variant ?? "default", g = () => r() === "inline" ? {} : {
+    "border-left-color": `color-mix(in srgb, var(--primary) ${(r() === "subtle" ? 0.5 : 0.7) * 100}%, transparent)`
   };
   return (() => {
-    var o = k(), c = o.firstChild;
-    return b(o, x({
+    var l = k(), d = l.firstChild;
+    return v(l, b({
       get class() {
         return u(
           "relative my-2",
           // Default variant - Gray background with solid primary left border
-          t() === "default" && ["pl-3 py-2 pr-3", "border-l-2", "bg-muted/50", "rounded-r"],
+          r() === "default" && ["pl-3 py-2 pr-3", "border-l-2", "bg-[var(--floe-well)]", "rounded-r"],
           // Subtle variant - Lighter background, visible border
-          t() === "subtle" && ["pl-3 py-1.5 pr-3", "border-l-2", "bg-muted/30", "rounded-r"],
+          r() === "subtle" && ["pl-3 py-1.5 pr-3", "border-l-2", "bg-[var(--floe-well)]", "rounded-r"],
           // Bordered variant - Full border for emphasis
-          t() === "bordered" && ["px-3 py-2", "border border-border rounded-md", "border-l-2", "bg-muted/40"],
+          r() === "bordered" && ["px-3 py-2", "border border-[var(--floe-line)] rounded-control", "border-l-2", "bg-[var(--floe-well)]"],
           // Code variant - Monospace, terminal-like
-          t() === "code" && ["px-3 py-2", "bg-muted/50 rounded", "font-mono", "border-l-2"],
+          r() === "code" && ["px-3 py-2", "bg-[var(--floe-well)] rounded-xs", "font-mono", "border-l-2"],
           // Inline variant - Compact, for tight spaces
-          t() === "inline" && ["px-2 py-1", "bg-muted/40 rounded", "text-muted-foreground"],
+          r() === "inline" && ["px-2 py-1", "bg-[var(--floe-well)] rounded-xs", "text-[var(--floe-ink-quiet)]"],
           e.class
         );
       },
       get style() {
         return g();
       }
-    }, f), !1, !0), r(c, () => e.children), r(o, d(i, {
+    }, m), !1, !0), t(d, () => e.children), t(l, i(c, {
       get when() {
         return e.citation || e.author;
       },
       get children() {
-        var n = w();
-        return r(n, d(i, {
+        var o = _();
+        return t(o, i(c, {
           get when() {
             return e.author;
           },
           get children() {
-            var l = v();
-            return r(l, () => e.author), l;
+            var n = y();
+            return t(n, () => e.author), n;
           }
-        }), null), r(n, d(i, {
+        }), null), t(o, i(c, {
           get when() {
             return h(() => !!e.author)() && e.citation;
           },
           get children() {
             return $();
           }
-        }), null), r(n, d(i, {
+        }), null), t(o, i(c, {
           get when() {
             return e.citation;
           },
           get children() {
-            var l = _();
-            return r(l, () => e.citation), l;
+            var n = w();
+            return t(n, () => e.citation), n;
           }
-        }), null), p(() => s(n, u("mt-1.5 text-[10px] text-muted-foreground/70 not-italic", t() === "code" && "font-mono"))), n;
+        }), null), p(() => s(o, u("mt-1.5 text-[length:var(--floe-type-caption)] text-[var(--floe-ink-quiet)] not-italic", r() === "code" && "font-mono"))), o;
       }
-    }), null), p(() => s(c, u("text-xs leading-relaxed text-foreground/80", t() === "code" && "text-[11px]", t() === "inline" && "text-[11px]"))), o;
+    }), null), p(() => s(d, u("text-xs leading-relaxed text-foreground/80", r() === "code" && "text-caption", r() === "inline" && "text-caption"))), l;
   })();
 }
 export {
-  q as QuoteBlock
+  S as QuoteBlock
 };