@floegence/floe-webapp-core 0.53.0 → 0.53.1

package/dist/components/layout/BottomBar.js

@@ -2,62 +2,62 @@ import { insert as n, effect as a, className as u, createComponent as c, templat
 import { Show as s } from "solid-js";
 import { cn as m } from "../../utils/cn.js";
 import { useResolvedFloeConfig as f } from "../../context/FloeConfigContext.js";
-var h = /* @__PURE__ */ i("<footer data-floe-shell-slot=bottom-bar style=border-top-color:var(--bottom-bar-border)>"), g = /* @__PURE__ */ i('<span class="w-2.5 h-2.5">'), $ = /* @__PURE__ */ i("<button type=button>"), d = /* @__PURE__ */ i("<span>");
-function C(e) {
+var h = /* @__PURE__ */ i("<footer data-floe-shell-slot=bottom-bar style=background-color:var(--activity-bar);border-top-color:var(--bottom-bar-border)>"), g = /* @__PURE__ */ i('<span class="w-2.5 h-2.5">'), v = /* @__PURE__ */ i("<button type=button>"), d = /* @__PURE__ */ i("<span>");
+function C(t) {
   return (() => {
     var r = h();
-    return n(r, () => e.children), a(() => u(r, m(e.height ?? "h-5", "shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-border", "text-[10px] text-muted-foreground font-mono", e.class))), r;
+    return n(r, () => t.children), a(() => u(r, m(t.height ?? "h-5", "shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-border", "text-[10px] text-muted-foreground font-mono", t.class))), r;
   })();
 }
-function v(e) {
-  const r = () => m("flex items-center gap-1 px-1 py-0.5 rounded-sm", e.onClick && "hover:bg-muted/80 cursor-pointer", "transition-colors duration-75", e.class);
+function $(t) {
+  const r = () => m("flex items-center gap-1 px-1 py-0.5 rounded-sm", t.onClick && "hover:bg-muted/80 cursor-pointer", "transition-colors duration-75", t.class);
   return c(s, {
     get when() {
-      return e.onClick;
+      return t.onClick;
     },
     get fallback() {
       return (() => {
-        var t = d();
-        return n(t, c(s, {
+        var e = d();
+        return n(e, c(s, {
           get when() {
-            return e.icon;
+            return t.icon;
           },
           get children() {
             var o = g();
-            return n(o, () => e.icon), o;
+            return n(o, () => t.icon), o;
           }
-        }), null), n(t, () => e.children, null), a(() => u(t, r())), t;
+        }), null), n(e, () => t.children, null), a(() => u(e, r())), e;
       })();
     },
     get children() {
-      var t = $();
-      return t.$$click = () => e.onClick?.(), n(t, c(s, {
+      var e = v();
+      return e.$$click = () => t.onClick?.(), n(e, c(s, {
         get when() {
-          return e.icon;
+          return t.icon;
         },
         get children() {
           var o = g();
-          return n(o, () => e.icon), o;
+          return n(o, () => t.icon), o;
         }
-      }), null), n(t, () => e.children, null), a(() => u(t, r())), t;
+      }), null), n(e, () => t.children, null), a(() => u(e, r())), e;
     }
   });
 }
-function y(e) {
-  const r = f(), t = {
+function y(t) {
+  const r = f(), e = {
     connected: "bg-success",
     disconnected: "bg-muted-foreground",
     connecting: "bg-warning animate-pulse",
     error: "bg-error"
   }, o = () => r.config.strings.statusIndicator;
-  return c(v, {
+  return c($, {
     get children() {
       return [(() => {
         var l = d();
-        return a(() => u(l, m("w-1.5 h-1.5 rounded-full", t[e.status]))), l;
+        return a(() => u(l, m("w-1.5 h-1.5 rounded-full", e[t.status]))), l;
       })(), (() => {
         var l = d();
-        return n(l, () => e.label ?? o()[e.status]), l;
+        return n(l, () => t.label ?? o()[t.status]), l;
       })()];
     }
   });
@@ -65,6 +65,6 @@ function y(e) {
 b(["click"]);
 export {
   C as BottomBar,
-  v as BottomBarItem,
+  $ as BottomBarItem,
   y as StatusIndicator
 };

package/dist/components/layout/TopBar.js

@@ -1,15 +1,15 @@
 import { insert as t, createComponent as s, effect as y, className as h, setAttribute as $, template as l, delegateEvents as _ } from "solid-js/web";
-import { Show as x } from "solid-js";
-import { cn as v } from "../../utils/cn.js";
+import { Show as v } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
 import { useCommand as w } from "../../context/CommandContext.js";
 import { Search as C } from "../icons/index.js";
 import { useResolvedFloeConfig as S } from "../../context/FloeConfigContext.js";
-var B = /* @__PURE__ */ l('<span class="font-medium text-[11px] tracking-tight hidden sm:inline">'), E = /* @__PURE__ */ l('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/60 border border-border/40 font-mono shrink-0 leading-none">'), F = /* @__PURE__ */ l('<header data-floe-shell-slot=top-bar style=border-bottom-color:var(--top-bar-border)><div class="h-10 flex items-center gap-2 px-3"><div class="flex items-center gap-2 flex-shrink-0"></div><button type=button><span class="flex-1 text-left hidden sm:inline truncate"></span></button><div class="flex items-center gap-0.5">'), j = /* @__PURE__ */ l('<div class="w-6 h-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
+var B = /* @__PURE__ */ l('<span class="font-medium text-[11px] tracking-tight hidden sm:inline">'), E = /* @__PURE__ */ l('<kbd class="hidden md:inline text-[10px] px-1 py-0.5 rounded bg-background/60 border border-border/40 font-mono shrink-0 leading-none">'), F = /* @__PURE__ */ l('<header data-floe-shell-slot=top-bar style=background-color:var(--activity-bar);border-bottom-color:var(--top-bar-border)><div class="h-10 flex items-center gap-2 px-3"><div class="flex items-center gap-2 flex-shrink-0"></div><button type=button><span class="flex-1 text-left hidden sm:inline truncate"></span></button><div class="flex items-center gap-0.5">'), j = /* @__PURE__ */ l('<div class="w-6 h-6 rounded bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold">F');
 function R(o) {
   const c = w(), a = S(), n = () => a.config.commands.palette.enabled;
   return (() => {
     var i = F(), p = i.firstChild, d = p.firstChild, r = d.nextSibling, m = r.firstChild, k = r.nextSibling;
-    return t(d, () => o.logo || j(), null), t(d, s(x, {
+    return t(d, () => o.logo || j(), null), t(d, s(v, {
       get when() {
         return o.title;
       },
@@ -19,7 +19,7 @@ function R(o) {
       }
     }), null), r.$$click = () => n() && c.open(), t(r, s(C, {
       class: "w-3 h-3 shrink-0"
-    }), m), t(m, () => a.config.strings.topBar.searchPlaceholder), t(r, s(x, {
+    }), m), t(m, () => a.config.strings.topBar.searchPlaceholder), t(r, s(v, {
       get when() {
         return n();
       },
@@ -28,12 +28,12 @@ function R(o) {
         return t(e, () => c.getKeybindDisplay(a.config.commands.palette.keybind)), e;
       }
     }), null), t(k, () => o.actions), y((e) => {
-      var b = v(
+      var b = x(
         // Safe-area padding must not be applied on a fixed-height element (border-box),
         // otherwise the content gets squeezed on iOS notch devices.
         "shrink-0 bg-background border-b border-border safe-top safe-left safe-right",
         o.class
-      ), f = o.ariaLabel, u = !n(), g = v("flex-1 max-w-sm flex items-center gap-2 h-[26px] px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-[11px] text-muted-foreground tracking-tight", "bg-muted/30 hover:bg-muted/60 rounded-md", "border border-border/40 hover:border-border/70", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-50 hover:bg-muted/30");
+      ), f = o.ariaLabel, u = !n(), g = x("flex-1 max-w-sm flex items-center gap-2 h-[26px] px-2.5", n() ? "cursor-pointer" : "cursor-not-allowed", "text-[11px] text-muted-foreground tracking-tight", "bg-muted/30 hover:bg-muted/60 rounded-md", "border border-border/40 hover:border-border/70", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !n() && "opacity-50 hover:bg-muted/30");
       return b !== e.e && h(i, e.e = b), f !== e.t && $(i, "aria-label", e.t = f), u !== e.a && (r.disabled = e.a = u), g !== e.o && h(r, e.o = g), e;
     }, {
       e: void 0,

package/dist/components/ui/Button.js

@@ -33,7 +33,7 @@ function k(i) {
         return r.variant === "ghost" || r.variant === "ghost-destructive" ? void 0 : "raised";
       },
       get class() {
-        return a("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color,box-shadow] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", v[r.variant ?? "default"], f[r.size ?? "md"], r.class);
+        return a("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", v[r.variant ?? "default"], f[r.size ?? "md"], r.class);
       },
       get disabled() {
         return r.disabled || r.loading;

package/dist/components/ui/Card.js

@@ -37,7 +37,7 @@ function oe(l) {
   B(() => {
     s !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(s), s = null);
   });
-  const k = "rounded-lg duration-180 ease-out", P = () => e.enableTilt || r() === "hover-lift" ? "transition-[color,background-color,border-color,box-shadow,transform]" : "transition-[color,background-color,border-color,box-shadow]", j = {
+  const k = "rounded-[10px] duration-180 ease-out", P = () => e.enableTilt || r() === "hover-lift" ? "transition-[color,background-color,border-color,box-shadow,transform]" : "transition-[color,background-color,border-color]", j = {
     default: "bg-card border border-border shadow-sm hover:shadow-sm",
     "hover-lift": "bg-card border border-border shadow-sm hover:shadow-md hover:-translate-y-0.5",
     "gradient-border": "relative bg-card overflow-hidden",

package/dist/components/ui/Checkbox.js

@@ -1,7 +1,7 @@
-import { createComponent as l, insert as o, effect as f, className as m, setAttribute as p, spread as D, mergeProps as M, template as v, use as N, memo as G } from "solid-js/web";
-import { splitProps as B, createUniqueId as U, Switch as V, Match as S, Show as b, For as J, useContext as K, createEffect as O, createContext as Q } from "solid-js";
+import { createComponent as o, insert as l, effect as f, className as b, setAttribute as p, spread as D, mergeProps as M, template as v, use as N, memo as G } from "solid-js/web";
+import { splitProps as B, createUniqueId as U, Switch as V, Match as S, Show as m, For as J, useContext as K, createEffect as O, createContext as Q } from "solid-js";
 import { cn as u } from "../../utils/cn.js";
-var R = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), T = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), W = /* @__PURE__ */ v("<div role=group>"), X = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator>"), Y = /* @__PURE__ */ v("<input data-floe-choice-input type=checkbox>"), _ = /* @__PURE__ */ v("<span>"), Z = /* @__PURE__ */ v('<div class="flex flex-col">'), ee = /* @__PURE__ */ v('<label><div class="relative flex items-center justify-center pt-0.5">'), re = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), te = /* @__PURE__ */ v('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-primary"fill=currentColor viewBox="0 0 20 20"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"clip-rule=evenodd>'), ne = /* @__PURE__ */ v('<label data-floe-surface-part=choice><div class="flex items-start gap-3"><div class="flex items-center justify-center pt-0.5"></div><div class="flex flex-col flex-1 min-w-0">'), le = /* @__PURE__ */ v('<div class="absolute top-1.5 right-1.5"><div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">'), oe = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), ie = /* @__PURE__ */ v("<div>");
+var R = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), T = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), W = /* @__PURE__ */ v("<div role=group>"), X = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator>"), Y = /* @__PURE__ */ v("<input data-floe-choice-input type=checkbox>"), _ = /* @__PURE__ */ v("<span>"), Z = /* @__PURE__ */ v('<div class="flex flex-col">'), ee = /* @__PURE__ */ v('<label><div class="relative flex items-center justify-center pt-0.5">'), re = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), te = /* @__PURE__ */ v('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-primary"fill=currentColor viewBox="0 0 20 20"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"clip-rule=evenodd>'), ne = /* @__PURE__ */ v('<label data-floe-surface-part=choice><div class="flex items-start gap-3"><div class="flex items-center justify-center pt-0.5"></div><div class="flex flex-col flex-1 min-w-0">'), oe = /* @__PURE__ */ v('<div class="absolute top-1.5 right-1.5"><div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">'), le = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), ie = /* @__PURE__ */ v("<div>");
 const F = Q();
 function ae() {
   return K(F);
@@ -29,7 +29,7 @@ const C = {
   sm: "px-2.5 py-1 text-xs",
   md: "px-3 py-1.5 text-xs",
   lg: "px-4 py-2 text-sm"
-}, de = {
+}, ce = {
   sm: "p-2.5",
   md: "p-3",
   lg: "p-4"
@@ -53,7 +53,7 @@ function A(w) {
     return f(() => p(a, "class", w.class)), a;
   })();
 }
-function ce(w) {
+function de(w) {
   return (() => {
     var a = T();
     return f(() => p(a, "class", w.class)), a;
@@ -62,18 +62,18 @@ function ce(w) {
 function ue(w) {
   const [a, e] = B(w, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), h = () => a.variant ?? "default", I = {
     value: () => a.value ?? [],
-    onChange: (g, c) => {
-      const x = a.value ?? [], y = c ? [...x, g] : x.filter((d) => d !== g);
+    onChange: (g, d) => {
+      const x = a.value ?? [], y = d ? [...x, g] : x.filter((c) => c !== g);
       a.onChange?.(y);
     },
     size: () => a.size ?? "md",
     variant: h,
     disabled: () => a.disabled ?? !1
   }, j = () => {
-    const g = h(), c = a.orientation === "horizontal";
-    return g === "button" ? u("inline-flex rounded-md border border-border overflow-hidden", c ? "flex-row" : "flex-col") : g === "card" || g === "tile" ? u("grid gap-2", c ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : u("flex", c ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
+    const g = h(), d = a.orientation === "horizontal";
+    return g === "button" ? u("inline-flex rounded-md border border-border overflow-hidden", d ? "flex-row" : "flex-col") : g === "card" || g === "tile" ? u("grid gap-2", d ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : u("flex", d ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
   };
-  return l(F.Provider, {
+  return o(F.Provider, {
     value: I,
     get children() {
       var g = W();
@@ -87,40 +87,40 @@ function ue(w) {
         get class() {
           return u(j(), a.class);
         }
-      }, e), !1, !0), o(g, () => a.children), g;
+      }, e), !1, !0), l(g, () => a.children), g;
     }
   });
 }
 function fe(w) {
-  const a = ae(), [e, h] = B(w, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), I = U(), j = () => e.id ?? I, g = () => a !== void 0, c = () => e.size ?? a?.size() ?? "md", x = () => e.variant ?? a?.variant() ?? "default", y = () => e.disabled ?? a?.disabled() ?? !1, d = () => g() && e.value ? a.value().includes(e.value) : e.checked ?? !1, H = () => {
-    y() || (g() && e.value ? a.onChange(e.value, !d()) : e.onChange?.(!d()));
+  const a = ae(), [e, h] = B(w, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), I = U(), j = () => e.id ?? I, g = () => a !== void 0, d = () => e.size ?? a?.size() ?? "md", x = () => e.variant ?? a?.variant() ?? "default", y = () => e.disabled ?? a?.disabled() ?? !1, c = () => g() && e.value ? a.value().includes(e.value) : e.checked ?? !1, H = () => {
+    y() || (g() && e.value ? a.onChange(e.value, !c()) : e.onChange?.(!c()));
   }, L = () => (() => {
     var t = X();
-    return o(t, l(b, {
+    return l(t, o(m, {
       get when() {
         return e.indeterminate;
       },
       get children() {
-        return l(ce, {
+        return o(de, {
           get class() {
-            return u(C[c()].icon, "transition-transform duration-150");
+            return u(C[d()].icon, "transition-transform duration-150");
           }
         });
       }
-    }), null), o(t, l(b, {
+    }), null), l(t, o(m, {
       get when() {
-        return G(() => !e.indeterminate)() && d();
+        return G(() => !e.indeterminate)() && c();
       },
       get children() {
-        return l(A, {
+        return o(A, {
           get class() {
-            return u(C[c()].icon, "transition-transform duration-150");
+            return u(C[d()].icon, "transition-transform duration-150");
           }
         });
       }
     }), null), f((r) => {
-      var n = d() || e.indeterminate ? "true" : void 0, i = u("rounded-[3px] border-2 transition-all duration-150", "flex items-center justify-center", C[c()].box, d() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-input bg-background hover:border-primary/50", y() && "cursor-not-allowed");
-      return n !== r.e && p(t, "data-floe-selected", r.e = n), i !== r.t && m(t, r.t = i), r;
+      var n = c() || e.indeterminate ? "true" : void 0, i = u("rounded-[3px] border-2 transition-[background-color,border-color,color] duration-120", "flex items-center justify-center", C[d()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-input bg-background hover:border-primary/50", y() && "cursor-not-allowed");
+      return n !== r.e && p(t, "data-floe-selected", r.e = n), i !== r.t && b(t, r.t = i), r;
     }, {
       e: void 0,
       t: void 0
@@ -141,10 +141,10 @@ function fe(w) {
           return e.value;
         },
         get checked() {
-          return d();
+          return c();
         },
         get "aria-checked"() {
-          return G(() => !!e.indeterminate)() ? "mixed" : d();
+          return G(() => !!e.indeterminate)() ? "mixed" : c();
         },
         get disabled() {
           return y();
@@ -155,51 +155,51 @@ function fe(w) {
       }, h), !1, !1), n;
     })();
   };
-  return l(V, {
+  return o(V, {
     get children() {
-      return [l(S, {
+      return [o(S, {
         get when() {
           return x() === "default";
         },
         get children() {
           var t = ee(), r = t.firstChild;
-          return o(r, l(z, {}), null), o(r, l(L, {}), null), o(t, l(b, {
+          return l(r, o(z, {}), null), l(r, o(L, {}), null), l(t, o(m, {
             get when() {
               return e.label || e.description;
             },
             get children() {
               var n = Z();
-              return o(n, l(b, {
+              return l(n, o(m, {
                 get when() {
                   return e.label;
                 },
                 get children() {
                   var i = _();
-                  return o(i, () => e.label), f(() => m(i, u("text-foreground", C[c()].label))), i;
+                  return l(i, () => e.label), f(() => b(i, u("text-foreground", C[d()].label))), i;
                 }
-              }), null), o(n, l(b, {
+              }), null), l(n, o(m, {
                 get when() {
                   return e.description;
                 },
                 get children() {
                   var i = _();
-                  return o(i, () => e.description), f(() => m(i, u("text-muted-foreground", C[c()].description))), i;
+                  return l(i, () => e.description), f(() => b(i, u("text-muted-foreground", C[d()].description))), i;
                 }
               }), null), n;
             }
-          }), null), f(() => m(t, u("inline-flex items-start gap-2 cursor-pointer select-none", y() && "opacity-50 cursor-not-allowed", e.class))), t;
+          }), null), f(() => b(t, u("inline-flex items-start gap-2 cursor-pointer select-none", y() && "opacity-50 cursor-not-allowed", e.class))), t;
         }
-      }), l(S, {
+      }), o(S, {
         get when() {
           return x() === "button";
         },
         get children() {
           var t = re(), r = t.firstChild;
-          return o(t, l(z, {
+          return l(t, o(z, {
             class: "sr-only"
-          }), r), o(r, () => e.label), f((n) => {
-            var i = d() ? "inset" : "raised", s = d() ? "true" : void 0, k = x(), $ = u("cursor-pointer select-none transition-colors duration-150", "border-r border-border last:border-r-0", se[c()], d() ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted", y() && "opacity-50 cursor-not-allowed", e.class);
-            return i !== n.e && p(t, "data-floe-surface", n.e = i), s !== n.t && p(t, "data-floe-selected", n.t = s), k !== n.a && p(t, "data-floe-choice-variant", n.a = k), $ !== n.o && m(t, n.o = $), n;
+          }), r), l(r, () => e.label), f((n) => {
+            var i = c() ? "inset" : "raised", s = c() ? "true" : void 0, k = x(), $ = u("cursor-pointer select-none transition-colors duration-150", "border-r border-border last:border-r-0", se[d()], c() ? "bg-primary text-primary-foreground" : "bg-background text-foreground hover:bg-muted", y() && "opacity-50 cursor-not-allowed", e.class);
+            return i !== n.e && p(t, "data-floe-surface", n.e = i), s !== n.t && p(t, "data-floe-selected", n.t = s), k !== n.a && p(t, "data-floe-choice-variant", n.a = k), $ !== n.o && b(t, n.o = $), n;
           }, {
             e: void 0,
             t: void 0,
@@ -207,40 +207,40 @@ function fe(w) {
             o: void 0
           }), t;
         }
-      }), l(S, {
+      }), o(S, {
         get when() {
           return x() === "card";
         },
         get children() {
           var t = ne(), r = t.firstChild, n = r.firstChild, i = n.nextSibling;
-          return o(t, l(z, {
+          return l(t, o(z, {
             class: "sr-only"
-          }), r), o(n, l(L, {})), o(i, l(b, {
+          }), r), l(n, o(L, {})), l(i, o(m, {
             get when() {
               return e.label;
             },
             get children() {
               var s = _();
-              return o(s, () => e.label), f(() => m(s, u("font-medium text-foreground", C[c()].label))), s;
+              return l(s, () => e.label), f(() => b(s, u("font-medium text-foreground", C[d()].label))), s;
             }
-          }), null), o(i, l(b, {
+          }), null), l(i, o(m, {
             get when() {
               return e.description;
             },
             get children() {
               var s = _();
-              return o(s, () => e.description), f(() => m(s, u("text-muted-foreground mt-0.5", C[c()].description))), s;
+              return l(s, () => e.description), f(() => b(s, u("text-muted-foreground mt-0.5", C[d()].description))), s;
             }
-          }), null), o(t, l(b, {
+          }), null), l(t, o(m, {
             get when() {
-              return d();
+              return c();
             },
             get children() {
               return te();
             }
           }), null), f((s) => {
-            var k = d() ? "inset" : "raised", $ = d() ? "true" : void 0, P = x(), E = u("relative cursor-pointer select-none rounded-lg border-2 transition-all duration-150", de[c()], d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", y() && "opacity-50 cursor-not-allowed", e.class);
-            return k !== s.e && p(t, "data-floe-surface", s.e = k), $ !== s.t && p(t, "data-floe-selected", s.t = $), P !== s.a && p(t, "data-floe-choice-variant", s.a = P), E !== s.o && m(t, s.o = E), s;
+            var k = c() ? "inset" : "raised", $ = c() ? "true" : void 0, P = x(), E = u("relative cursor-pointer select-none rounded-lg border-2 transition-[background-color,border-color,color] duration-120", ce[d()], c() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", y() && "opacity-50 cursor-not-allowed", e.class);
+            return k !== s.e && p(t, "data-floe-surface", s.e = k), $ !== s.t && p(t, "data-floe-selected", s.t = $), P !== s.a && p(t, "data-floe-choice-variant", s.a = P), E !== s.o && b(t, s.o = E), s;
           }, {
             e: void 0,
             t: void 0,
@@ -248,15 +248,15 @@ function fe(w) {
             o: void 0
           }), t;
         }
-      }), l(S, {
+      }), o(S, {
         get when() {
           return x() === "tile";
         },
         get children() {
-          var t = oe();
-          return o(t, l(z, {
+          var t = le();
+          return l(t, o(z, {
             class: "sr-only"
-          }), null), o(t, l(b, {
+          }), null), l(t, o(m, {
             get when() {
               return e.icon;
             },
@@ -264,42 +264,42 @@ function fe(w) {
               const n = r();
               return (() => {
                 var i = ie();
-                return o(i, l(n, {
+                return l(i, o(n, {
                   get class() {
-                    return q[c()].icon;
+                    return q[d()].icon;
                   }
-                })), f(() => m(i, u("mb-2 transition-colors duration-150", d() ? "text-primary" : "text-muted-foreground"))), i;
+                })), f(() => b(i, u("mb-2 transition-colors duration-150", c() ? "text-primary" : "text-muted-foreground"))), i;
               })();
             }
-          }), null), o(t, l(b, {
+          }), null), l(t, o(m, {
             get when() {
               return e.label;
             },
             get children() {
               var r = _();
-              return o(r, () => e.label), f(() => m(r, u("font-medium transition-colors duration-150", C[c()].label, d() ? "text-primary" : "text-foreground"))), r;
+              return l(r, () => e.label), f(() => b(r, u("font-medium transition-colors duration-150", C[d()].label, c() ? "text-primary" : "text-foreground"))), r;
             }
-          }), null), o(t, l(b, {
+          }), null), l(t, o(m, {
             get when() {
               return e.description;
             },
             get children() {
               var r = _();
-              return o(r, () => e.description), f(() => m(r, u("text-muted-foreground mt-0.5", C[c()].description))), r;
+              return l(r, () => e.description), f(() => b(r, u("text-muted-foreground mt-0.5", C[d()].description))), r;
             }
-          }), null), o(t, l(b, {
+          }), null), l(t, o(m, {
             get when() {
-              return d();
+              return c();
             },
             get children() {
-              var r = le(), n = r.firstChild;
-              return o(n, l(A, {
+              var r = oe(), n = r.firstChild;
+              return l(n, o(A, {
                 class: "w-2.5 h-2.5 text-primary-foreground"
               })), r;
             }
           }), null), f((r) => {
-            var n = d() ? "inset" : "raised", i = d() ? "true" : void 0, s = x(), k = u("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-lg border-2 transition-all duration-150 text-center", q[c()].container, d() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", y() && "opacity-50 cursor-not-allowed", e.class);
-            return n !== r.e && p(t, "data-floe-surface", r.e = n), i !== r.t && p(t, "data-floe-selected", r.t = i), s !== r.a && p(t, "data-floe-choice-variant", r.a = s), k !== r.o && m(t, r.o = k), r;
+            var n = c() ? "inset" : "raised", i = c() ? "true" : void 0, s = x(), k = u("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-lg border-2 transition-[background-color,border-color,color] duration-120 text-center", q[d()].container, c() ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/50 hover:bg-muted/50", y() && "opacity-50 cursor-not-allowed", e.class);
+            return n !== r.e && p(t, "data-floe-surface", r.e = n), i !== r.t && p(t, "data-floe-selected", r.t = i), s !== r.a && p(t, "data-floe-choice-variant", r.a = s), k !== r.o && b(t, r.o = k), r;
           }, {
             e: void 0,
             t: void 0,
@@ -311,15 +311,15 @@ function fe(w) {
     }
   });
 }
-function me(w) {
+function be(w) {
   const [a, e] = B(w, ["options"]);
-  return l(ue, M(e, {
+  return o(ue, M(e, {
     get children() {
-      return l(J, {
+      return o(J, {
         get each() {
           return a.options;
         },
-        children: (h) => l(fe, {
+        children: (h) => o(fe, {
           get value() {
             return h.value;
           },
@@ -343,5 +343,5 @@ function me(w) {
 export {
   fe as Checkbox,
   ue as CheckboxGroup,
-  me as CheckboxList
+  be as CheckboxList
 };