@floegence/floe-webapp-core 0.86.75 → 0.87.0

package/dist/components/ui/Checkbox.js

@@ -1,10 +1,11 @@
-import { createComponent as o, insert as l, effect as f, className as b, setAttribute as m, spread as D, mergeProps as M, template as v, use as N, memo as E } from "solid-js/web";
-import { splitProps as B, createUniqueId as U, Switch as V, Match as S, Show as p, 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-[var(--floe-accent-ink)]"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>"), ae = /* @__PURE__ */ v("<div>");
-const F = Q();
-function ie() {
-  return K(F);
+import { createComponent as n, insert as a, effect as f, className as g, setAttribute as m, spread as A, mergeProps as B, template as v, use as N, memo as G } from "solid-js/web";
+import { splitProps as P, createUniqueId as U, Switch as V, Match as j, Show as b, For as J, useContext as K, createEffect as Q, createContext as R } from "solid-js";
+import { useFormControl as T } from "./formFieldContext.js";
+import { cn as d } from "../../utils/cn.js";
+var W = /* @__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">'), X = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), Y = /* @__PURE__ */ v("<div role=group>"), Z = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator>"), ee = /* @__PURE__ */ v("<input>"), $ = /* @__PURE__ */ v("<span>"), re = /* @__PURE__ */ v('<div class="flex flex-col">'), te = /* @__PURE__ */ v('<label><div class="relative flex items-center justify-center pt-0.5">'), ne = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), oe = /* @__PURE__ */ v('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-[var(--floe-accent-ink)]"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>'), le = /* @__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">'), ae = /* @__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">'), ie = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), se = /* @__PURE__ */ v("<div>");
+const E = R();
+function ce() {
+  return K(E);
 }
 const C = {
   sm: {
@@ -25,15 +26,15 @@ const C = {
     label: "text-sm",
     description: "text-xs"
   }
-}, se = {
+}, de = {
   sm: "px-2.5 py-1 text-xs",
   md: "px-3 py-1.5 text-xs",
   lg: "px-4 py-2 text-sm"
-}, ce = {
+}, ue = {
   sm: "p-2.5",
   md: "p-3",
   lg: "p-4"
-}, G = {
+}, L = {
   sm: {
     container: "p-3 min-w-[80px]",
     icon: "w-5 h-5"
@@ -47,95 +48,97 @@ const C = {
     icon: "w-8 h-8"
   }
 };
-function A(w) {
+function O(x) {
   return (() => {
-    var i = R();
-    return f(() => m(i, "class", w.class)), i;
+    var s = W();
+    return f(() => m(s, "class", x.class)), s;
   })();
 }
-function de(w) {
+function fe(x) {
   return (() => {
-    var i = T();
-    return f(() => m(i, "class", w.class)), i;
+    var s = X();
+    return f(() => m(s, "class", x.class)), s;
   })();
 }
-function ue(w) {
-  const [i, e] = B(w, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), g = () => i.variant ?? "default", I = {
-    value: () => i.value ?? [],
-    onChange: (h, d) => {
-      const x = i.value ?? [], k = d ? [...x, h] : x.filter((c) => c !== h);
-      i.onChange?.(k);
+function ve(x) {
+  const [s, p] = P(x, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), e = () => s.variant ?? "default", M = {
+    value: () => s.value ?? [],
+    onChange: (h, y) => {
+      const u = s.value ?? [], w = y ? [...u, h] : u.filter((k) => k !== h);
+      s.onChange?.(w);
     },
-    size: () => i.size ?? "md",
-    variant: g,
-    disabled: () => i.disabled ?? !1
-  }, j = () => {
-    const h = g(), d = i.orientation === "horizontal";
-    return h === "button" ? u("inline-flex rounded-group border border-[var(--floe-line)] overflow-hidden", d ? "flex-row" : "flex-col") : h === "card" || h === "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");
+    size: () => s.size ?? "md",
+    variant: e,
+    disabled: () => s.disabled ?? !1
+  }, S = () => {
+    const h = e(), y = s.orientation === "horizontal";
+    return h === "button" ? d("inline-flex rounded-group border border-[var(--floe-line)] overflow-hidden", y ? "flex-row" : "flex-col") : h === "card" || h === "tile" ? d("grid gap-2", y ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : d("flex", y ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
   };
-  return o(F.Provider, {
-    value: I,
+  return n(E.Provider, {
+    value: M,
     get children() {
-      var h = W();
-      return D(h, M({
+      var h = Y();
+      return A(h, B({
         get "data-floe-surface"() {
-          return g() === "button" ? "inset" : void 0;
+          return e() === "button" ? "inset" : void 0;
         },
         get "data-floe-surface-part"() {
-          return g() === "button" ? "rail" : void 0;
+          return e() === "button" ? "rail" : void 0;
         },
         get class() {
-          return u(j(), i.class);
+          return d(S(), s.class);
         }
-      }, e), !1, !0), l(h, () => i.children), h;
+      }, p), !1, !0), a(h, () => s.children), h;
     }
   });
 }
-function fe(w) {
-  const i = ie(), [e, g] = B(w, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), I = U(), j = () => e.id ?? I, h = () => i !== void 0, d = () => e.size ?? i?.size() ?? "md", x = () => e.variant ?? i?.variant() ?? "default", k = () => e.disabled ?? i?.disabled() ?? !1, c = () => h() && e.value ? i.value().includes(e.value) : e.checked ?? !1, H = () => {
-    k() || (h() && e.value ? i.onChange(e.value, !c()) : e.onChange?.(!c()));
-  }, L = () => (() => {
-    var t = X();
-    return l(t, o(p, {
+function he(x) {
+  const s = T(), p = ce(), [e, M] = P(x, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), S = U(), h = () => e.id ?? (p ? S : s.id) ?? S, y = () => p !== void 0, u = () => e.size ?? p?.size() ?? "md", w = () => e.variant ?? p?.variant() ?? "default", k = () => e.disabled ?? (p?.disabled() || s.disabled || !1), c = () => y() && e.value ? p.value().includes(e.value) : e.checked ?? !1, H = () => {
+    k() || (y() && e.value ? p.onChange(e.value, !c()) : e.onChange?.(!c()));
+  }, q = () => (() => {
+    var t = Z();
+    return a(t, n(b, {
       get when() {
         return e.indeterminate;
       },
       get children() {
-        return o(de, {
+        return n(fe, {
           get class() {
-            return u(C[d()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
+            return d(C[u()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
           }
         });
       }
-    }), null), l(t, o(p, {
+    }), null), a(t, n(b, {
       get when() {
-        return E(() => !e.indeterminate)() && c();
+        return G(() => !e.indeterminate)() && c();
       },
       get children() {
-        return o(A, {
+        return n(O, {
           get class() {
-            return u(C[d()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
+            return d(C[u()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
           }
         });
       }
     }), null), f((r) => {
-      var n = c() || e.indeterminate ? "true" : void 0, a = u("rounded-xs border-2 transition-[background-color,border-color,color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "flex items-center justify-center", C[d()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-[var(--floe-control-edge)] bg-transparent hover:border-[var(--floe-control-edge-hover)]", k() && "cursor-not-allowed");
-      return n !== r.e && m(t, "data-floe-selected", r.e = n), a !== r.t && b(t, r.t = a), r;
+      var o = c() || e.indeterminate ? "true" : void 0, l = d("rounded-xs border-2 transition-[background-color,border-color,color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "flex items-center justify-center", C[u()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-[var(--floe-control-edge)] bg-transparent hover:border-[var(--floe-control-edge-hover)]", k() && "cursor-not-allowed");
+      return o !== r.e && m(t, "data-floe-selected", r.e = o), l !== r.t && g(t, r.t = l), r;
     }, {
       e: void 0,
       t: void 0
     }), t;
-  })(), z = (t) => {
+  })(), I = (t) => {
     let r;
-    return O(() => {
+    return Q(() => {
       r && (r.indeterminate = e.indeterminate ?? !1);
     }), (() => {
-      var n = Y();
-      return N((a) => {
-        r = a, typeof e.ref == "function" && e.ref(a);
-      }, n), n.addEventListener("change", H), D(n, M({
+      var o = ee();
+      return N((l) => {
+        r = l, typeof e.ref == "function" && e.ref(l);
+      }, o), A(o, B(s, {
+        "data-floe-choice-input": "",
+        type: "checkbox",
         get id() {
-          return j();
+          return h();
         },
         get value() {
           return e.value;
@@ -144,62 +147,66 @@ function fe(w) {
           return c();
         },
         get "aria-checked"() {
-          return E(() => !!e.indeterminate)() ? "mixed" : c();
+          return G(() => !!e.indeterminate)() ? "mixed" : c();
         },
         get disabled() {
           return k();
         },
+        onClick: (l) => {
+          (x.readOnly ?? s.readOnly) && l.preventDefault();
+        },
+        onChange: H,
         get class() {
           return t.class ?? "sr-only peer";
         }
-      }, g), !1, !1), n;
+      }, M), !1, !1), o;
     })();
   };
-  return o(V, {
+  return n(V, {
     get children() {
-      return [o(S, {
+      return [n(j, {
         get when() {
-          return x() === "default";
+          return w() === "default";
         },
         get children() {
-          var t = ee(), r = t.firstChild;
-          return l(r, o(z, {}), null), l(r, o(L, {}), null), l(t, o(p, {
+          var t = te(), r = t.firstChild;
+          return a(r, n(I, {}), null), a(r, n(q, {}), null), a(t, n(b, {
             get when() {
               return e.label || e.description;
             },
             get children() {
-              var n = Z();
-              return l(n, o(p, {
+              var o = re();
+              return a(o, n(b, {
                 get when() {
                   return e.label;
                 },
                 get children() {
-                  var a = _();
-                  return l(a, () => e.label), f(() => b(a, u("text-foreground", C[d()].label))), a;
+                  var l = $();
+                  return a(l, () => e.label), f(() => g(l, d("text-foreground", C[u()].label))), l;
                 }
-              }), null), l(n, o(p, {
+              }), null), a(o, n(b, {
                 get when() {
                   return e.description;
                 },
                 get children() {
-                  var a = _();
-                  return l(a, () => e.description), f(() => b(a, u("text-[var(--floe-ink-soft)]", C[d()].description))), a;
+                  var l = $();
+                  return a(l, () => e.description), f(() => g(l, d("text-[var(--floe-ink-soft)]", C[u()].description))), l;
                 }
-              }), null), n;
+              }), null), o;
             }
-          }), null), f(() => b(t, u("inline-flex items-start gap-2 cursor-pointer select-none", k() && "opacity-50 cursor-not-allowed", e.class))), t;
+          }), null), f(() => g(t, d("inline-flex items-start gap-2 cursor-pointer select-none", k() && "opacity-50 cursor-not-allowed", e.class))), t;
         }
-      }), o(S, {
+      }), n(j, {
         get when() {
-          return x() === "button";
+          return w() === "button";
         },
         get children() {
-          var t = re(), r = t.firstChild;
-          return l(t, o(z, {
+          var t = ne(), r = t.firstChild;
+          return a(t, n(I, {
             class: "sr-only"
-          }), r), l(r, () => e.label), f((n) => {
-            var a = c() ? "inset" : "raised", s = c() ? "true" : void 0, y = x(), $ = u("cursor-pointer select-none transition-colors duration-[var(--floe-duration-fast)]", "border-r border-[var(--floe-line)] last:border-r-0", se[d()], c() ? "bg-[var(--primary)] text-[var(--primary-foreground)] border-[var(--primary)]" : "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-[var(--floe-ink)]", k() && "opacity-50 cursor-not-allowed", e.class);
-            return a !== n.e && m(t, "data-floe-surface", n.e = a), s !== n.t && m(t, "data-floe-selected", n.t = s), y !== n.a && m(t, "data-floe-choice-variant", n.a = y), $ !== n.o && b(t, n.o = $), n;
+          }), r), a(r, () => e.label), f((o) => {
+            var l = c() ? "inset" : "raised", i = c() ? "true" : void 0, _ = w(), z = d("cursor-pointer select-none transition-colors duration-[var(--floe-duration-fast)]", "border-r border-[var(--floe-line)] last:border-r-0", de[u()], c() ? "bg-[var(--primary)] text-[var(--primary-foreground)] border-[var(--primary)]" : "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-[var(--floe-ink)]", k() && "opacity-50 cursor-not-allowed", e.class);
+            return l !== o.e && m(t, "data-floe-surface", o.e = l), i !== o.t && m(t, "data-floe-selected", o.t = i), _ !== o.a && m(t, "data-floe-choice-variant", o.a = _), z !== o.o && g(t, o.o = z), o;
           }, {
             e: void 0,
             t: void 0,
@@ -207,40 +214,40 @@ function fe(w) {
             o: void 0
           }), t;
         }
-      }), o(S, {
+      }), n(j, {
         get when() {
-          return x() === "card";
+          return w() === "card";
         },
         get children() {
-          var t = ne(), r = t.firstChild, n = r.firstChild, a = n.nextSibling;
-          return l(t, o(z, {
+          var t = le(), r = t.firstChild, o = r.firstChild, l = o.nextSibling;
+          return a(t, n(I, {
             class: "sr-only"
-          }), r), l(n, o(L, {})), l(a, o(p, {
+          }), r), a(o, n(q, {})), a(l, n(b, {
             get when() {
               return e.label;
             },
             get children() {
-              var s = _();
-              return l(s, () => e.label), f(() => b(s, u("font-medium text-foreground", C[d()].label))), s;
+              var i = $();
+              return a(i, () => e.label), f(() => g(i, d("font-medium text-foreground", C[u()].label))), i;
             }
-          }), null), l(a, o(p, {
+          }), null), a(l, n(b, {
             get when() {
               return e.description;
             },
             get children() {
-              var s = _();
-              return l(s, () => e.description), f(() => b(s, u("text-[var(--floe-ink-soft)] mt-0.5", C[d()].description))), s;
+              var i = $();
+              return a(i, () => e.description), f(() => g(i, d("text-[var(--floe-ink-soft)] mt-0.5", C[u()].description))), i;
             }
-          }), null), l(t, o(p, {
+          }), null), a(t, n(b, {
             get when() {
               return c();
             },
             get children() {
-              return te();
+              return oe();
             }
-          }), null), f((s) => {
-            var y = c() ? "inset" : "raised", $ = c() ? "true" : void 0, P = x(), q = u("relative cursor-pointer select-none rounded-group border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", ce[d()], c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
-            return y !== s.e && m(t, "data-floe-surface", s.e = y), $ !== s.t && m(t, "data-floe-selected", s.t = $), P !== s.a && m(t, "data-floe-choice-variant", s.a = P), q !== s.o && b(t, s.o = q), s;
+          }), null), f((i) => {
+            var _ = c() ? "inset" : "raised", z = c() ? "true" : void 0, D = w(), F = d("relative cursor-pointer select-none rounded-group border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", ue[u()], c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
+            return _ !== i.e && m(t, "data-floe-surface", i.e = _), z !== i.t && m(t, "data-floe-selected", i.t = z), D !== i.a && m(t, "data-floe-choice-variant", i.a = D), F !== i.o && g(t, i.o = F), i;
           }, {
             e: void 0,
             t: void 0,
@@ -248,58 +255,58 @@ function fe(w) {
             o: void 0
           }), t;
         }
-      }), o(S, {
+      }), n(j, {
         get when() {
-          return x() === "tile";
+          return w() === "tile";
         },
         get children() {
-          var t = le();
-          return l(t, o(z, {
+          var t = ie();
+          return a(t, n(I, {
             class: "sr-only"
-          }), null), l(t, o(p, {
+          }), null), a(t, n(b, {
             get when() {
               return e.icon;
             },
             children: (r) => {
-              const n = r();
+              const o = r();
               return (() => {
-                var a = ae();
-                return l(a, o(n, {
+                var l = se();
+                return a(l, n(o, {
                   get class() {
-                    return G[d()].icon;
+                    return L[u()].icon;
                   }
-                })), f(() => b(a, u("mb-2 transition-colors duration-[var(--floe-duration-fast)]", c() ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-quiet)]"))), a;
+                })), f(() => g(l, d("mb-2 transition-colors duration-[var(--floe-duration-fast)]", c() ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-quiet)]"))), l;
               })();
             }
-          }), null), l(t, o(p, {
+          }), null), a(t, n(b, {
             get when() {
               return e.label;
             },
             get children() {
-              var r = _();
-              return l(r, () => e.label), f(() => b(r, u("font-medium transition-colors duration-[var(--floe-duration-fast)]", C[d()].label, c() ? "text-[var(--floe-ink)]" : "text-[var(--floe-ink-soft)]"))), r;
+              var r = $();
+              return a(r, () => e.label), f(() => g(r, d("font-medium transition-colors duration-[var(--floe-duration-fast)]", C[u()].label, c() ? "text-[var(--floe-ink)]" : "text-[var(--floe-ink-soft)]"))), r;
             }
-          }), null), l(t, o(p, {
+          }), null), a(t, n(b, {
             get when() {
               return e.description;
             },
             get children() {
-              var r = _();
-              return l(r, () => e.description), f(() => b(r, u("text-[var(--floe-ink-soft)] mt-0.5", C[d()].description))), r;
+              var r = $();
+              return a(r, () => e.description), f(() => g(r, d("text-[var(--floe-ink-soft)] mt-0.5", C[u()].description))), r;
             }
-          }), null), l(t, o(p, {
+          }), null), a(t, n(b, {
             get when() {
               return c();
             },
             get children() {
-              var r = oe(), n = r.firstChild;
-              return l(n, o(A, {
+              var r = ae(), o = r.firstChild;
+              return a(o, n(O, {
                 class: "w-2.5 h-2.5 text-primary-foreground"
               })), r;
             }
           }), null), f((r) => {
-            var n = c() ? "inset" : "raised", a = c() ? "true" : void 0, s = x(), y = u("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-control border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] text-center", G[d()].container, c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
-            return n !== r.e && m(t, "data-floe-surface", r.e = n), a !== r.t && m(t, "data-floe-selected", r.t = a), s !== r.a && m(t, "data-floe-choice-variant", r.a = s), y !== r.o && b(t, r.o = y), r;
+            var o = c() ? "inset" : "raised", l = c() ? "true" : void 0, i = w(), _ = d("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-control border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] text-center", L[u()].container, c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
+            return o !== r.e && m(t, "data-floe-surface", r.e = o), l !== r.t && m(t, "data-floe-selected", r.t = l), i !== r.a && m(t, "data-floe-choice-variant", r.a = i), _ !== r.o && g(t, r.o = _), r;
           }, {
             e: void 0,
             t: void 0,
@@ -311,29 +318,29 @@ function fe(w) {
     }
   });
 }
-function be(w) {
-  const [i, e] = B(w, ["options"]);
-  return o(ue, M(e, {
+function xe(x) {
+  const [s, p] = P(x, ["options"]);
+  return n(ve, B(p, {
     get children() {
-      return o(J, {
+      return n(J, {
         get each() {
-          return i.options;
+          return s.options;
         },
-        children: (g) => o(fe, {
+        children: (e) => n(he, {
           get value() {
-            return g.value;
+            return e.value;
           },
           get label() {
-            return g.label;
+            return e.label;
           },
           get description() {
-            return g.description;
+            return e.description;
           },
           get icon() {
-            return g.icon;
+            return e.icon;
           },
           get disabled() {
-            return g.disabled;
+            return e.disabled;
           }
         })
       });
@@ -341,7 +348,7 @@ function be(w) {
   }));
 }
 export {
-  fe as Checkbox,
-  ue as CheckboxGroup,
-  be as CheckboxList
+  he as Checkbox,
+  ve as CheckboxGroup,
+  xe as CheckboxList
 };

package/dist/components/ui/DataTable.d.ts

@@ -0,0 +1,33 @@
+import { type JSX } from 'solid-js';
+import type { TableSort } from './dataTableModel';
+export interface DataTableColumn<T> {
+    id: string;
+    header: string;
+    cell: (row: T) => JSX.Element;
+    sortable?: boolean;
+    class?: string;
+}
+export interface DataTableProps<T> {
+    /** Rows are already filtered, sorted and paginated by the host or createTableModel. */
+    rows: readonly T[];
+    columns: readonly DataTableColumn<T>[];
+    rowKey: (row: T) => string;
+    ariaLabel: string;
+    caption?: string;
+    sort?: TableSort;
+    onSortChange?: (sort: TableSort) => void;
+    selectedKeys?: readonly string[];
+    onSelectionChange?: (keys: string[]) => void;
+    isRowSelectable?: (row: T) => boolean;
+    rowLabel?: (row: T) => string;
+    hiddenColumns?: readonly string[];
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    empty?: JSX.Element;
+    /** Product-owned search, column visibility and bulk actions. */
+    toolbar?: JSX.Element;
+    pagination?: JSX.Element;
+    class?: string;
+}
+export declare function DataTable<T>(props: DataTableProps<T>): JSX.Element;