@annatarhe/lake-ui 0.0.20 → 0.0.23

package/dist/form/input-field.js

@@ -1,24 +1,54 @@
-import { jsx as l } from "react/jsx-runtime";
-import { cn as n } from "../utils/cn.js";
-function u(r) {
-  const { className: e, value: o, onChange: a, ...t } = r;
-  return /* @__PURE__ */ l(
-    "input",
-    {
-      type: "text",
-      value: o,
-      onChange: a,
-      className: n(
-        "w-full rounded-lg border border-gray-700 bg-gray-800/50 py-2 pl-10 pr-10",
-        "text-gray-200 placeholder-gray-500",
-        "focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500",
-        "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-700/50",
-        e
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../utils/cn.js";
+import { Loader2 as u } from "lucide-react";
+function p(s) {
+  const {
+    className: i,
+    value: n,
+    onChange: c,
+    label: o,
+    error: e,
+    loading: a,
+    disabled: t,
+    ...g
+  } = s;
+  return /* @__PURE__ */ d("div", { className: "w-full", children: [
+    o && /* @__PURE__ */ r(
+      "label",
+      {
+        className: l(
+          "block text-sm font-medium mb-1.5 transition-colors text-gray-700 dark:text-gray-300",
+          t && "opacity-60"
+        ),
+        children: o
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        "input",
+        {
+          type: "text",
+          value: n,
+          onChange: c,
+          disabled: t || a,
+          className: l(
+            "w-full rounded-lg border py-2 px-3 transition-colors",
+            "border-gray-300 bg-white text-gray-900 placeholder-gray-400",
+            "dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-200 dark:placeholder-gray-500",
+            "focus:outline-none focus:ring-2 focus:border-transparent",
+            "focus:ring-blue-400 dark:focus:ring-blue-500",
+            e && "border-red-500 focus:ring-red-400 dark:border-red-500/70 dark:focus:ring-red-500",
+            (t || a) && "opacity-60 cursor-not-allowed bg-gray-100 dark:bg-gray-700/50",
+            i
+          ),
+          ...g
+        }
       ),
-      ...t
-    }
-  );
+      a && /* @__PURE__ */ r("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ r(u, { className: "h-4 w-4 animate-spin text-gray-500 dark:text-gray-400" }) })
+    ] }),
+    e && /* @__PURE__ */ r("p", { className: "mt-1.5 text-sm text-red-500 dark:text-red-400", children: e })
+  ] });
 }
 export {
-  u as default
+  p as default
 };

package/dist/form/multi-select.js

@@ -1,142 +1,157 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { X as D, ChevronsUpDown as I, Search as _, Check as z } from "lucide-react";
-import n, { useCallback as B } from "react";
-import P from "../hooks/useClickOutside.js";
-import { cn as y } from "../utils/cn.js";
-function J(S) {
+import { jsxs as l, jsx as r, Fragment as I } from "react/jsx-runtime";
+import { Loader2 as _, X as z, ChevronsUpDown as B, Search as F, Check as P } from "lucide-react";
+import n, { useCallback as U } from "react";
+import X from "../hooks/useClickOutside.js";
+import { cn as d } from "../utils/cn.js";
+function W(S) {
   const {
-    options: g,
+    options: h,
     value: v,
     onChange: N,
     disabled: i,
-    clearable: U,
-    searchable: X,
-    label: k,
-    placeholder: O = "Select options...",
+    clearable: q,
+    searchable: A,
+    label: O,
+    placeholder: L = "Select options...",
     maxValues: s,
     ref: M,
-    error: h,
+    error: x,
+    loading: u,
     ...j
-  } = S, c = s === 1, r = c ? [v] : v, u = (e) => {
-    N(c ? e.length === 0 ? void 0 : e[0] : e);
-  }, d = n.useMemo(() => g.length === 0 ? [] : g.map((e) => typeof e == "string" ? {
+  } = S, o = s === 1, t = o ? [v] : v, g = (e) => {
+    N(o ? e.length === 0 ? void 0 : e[0] : e);
+  }, m = n.useMemo(() => h.length === 0 ? [] : h.map((e) => typeof e == "string" ? {
     value: e,
     label: e
-  } : e), [g]), [m, w] = n.useState(!1), [p, b] = n.useState(""), x = n.useRef(null), f = n.useMemo(() => p.toLowerCase().trim(), [p]), C = n.useMemo(() => f ? d.filter(
-    (e) => e.label.toLowerCase().includes(f) || e.value.toLowerCase().includes(f)
-  ) : d, [d, f]), L = (e) => {
+  } : e), [h]), [f, w] = n.useState(!1), [y, p] = n.useState(""), k = n.useRef(null), b = n.useMemo(() => y.toLowerCase().trim(), [y]), C = n.useMemo(() => b ? m.filter(
+    (e) => e.label.toLowerCase().includes(b) || e.value.toLowerCase().includes(b)
+  ) : m, [m, b]), R = (e) => {
     if (!i) {
-      if (r.includes(e)) {
-        u(r.filter((l) => l !== e));
+      if (t.includes(e)) {
+        g(t.filter((a) => a !== e));
         return;
       }
-      if (c) {
-        u([e]);
+      if (o) {
+        g([e]);
         return;
       }
-      (!s || r.length < s) && u([...r, e]);
+      (!s || t.length < s) && g([...t, e]);
     }
-  }, R = (e) => {
-    i || (e.stopPropagation(), u([]), b(""));
-  }, E = r.map((e) => {
-    const l = d.find((o) => o.value === e);
-    return l ? l.labelElement ?? l.label : !1;
+  }, E = (e) => {
+    i || (e.stopPropagation(), g([]), p(""));
+  }, Q = t.map((e) => {
+    const a = m.find((c) => c.value === e);
+    return a ? a.labelElement ?? a.label : !1;
   }).filter(Boolean);
   n.useEffect(() => {
-    m && x.current && x.current.focus();
-  }, [m]);
-  const Q = P(
-    B(() => {
-      w(!1), b("");
+    f && k.current && k.current.focus();
+  }, [f]);
+  const D = X(
+    U(() => {
+      w(!1), p("");
     }, [])
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: y("relative", i && "opacity-50"),
+      className: d("relative w-full", (i || u) && "opacity-60"),
       ref: (e) => {
-        Q.current = e, M(e);
+        D.current = e, M(e);
       },
       ...j,
       children: [
-        /* @__PURE__ */ a("label", { className: "mb-1 block text-sm font-medium text-gray-300", children: [
-          k,
-          s && !c && /* @__PURE__ */ a("span", { className: "ml-1 text-gray-400", children: [
-            "(",
-            r.length,
-            "/",
-            s,
-            ")"
-          ] })
-        ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ l(
+          "label",
+          {
+            className: d(
+              "mb-1.5 block text-sm font-medium transition-colors text-gray-700 dark:text-gray-300",
+              (i || u) && "opacity-60"
+            ),
+            children: [
+              O,
+              s && !o && /* @__PURE__ */ l("span", { className: "ml-1 text-gray-500 dark:text-gray-400", children: [
+                "(",
+                t.length,
+                "/",
+                s,
+                ")"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
           "div",
           {
-            className: y(
-              "relative rounded-lg border border-gray-700 bg-gray-800",
-              h && "border-red-500"
+            className: d(
+              "relative rounded-lg border transition-colors border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800/50",
+              x && "border-red-500 dark:border-red-500/70"
             ),
             children: [
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "button",
                 {
                   type: "button",
-                  className: "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-gray-300 hover:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500",
-                  onClick: () => w(!m),
-                  disabled: i,
+                  className: d(
+                    "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-colors",
+                    "text-gray-700 hover:bg-gray-100/80 dark:text-gray-300 dark:hover:bg-gray-700/50",
+                    "focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500"
+                  ),
+                  onClick: () => w(!f),
+                  disabled: i || u,
                   children: [
-                    /* @__PURE__ */ t("div", { className: "flex-1 truncate", children: r.length === 0 ? /* @__PURE__ */ t("span", { className: "text-gray-500", children: O }) : /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: E.map((e, l) => /* @__PURE__ */ t(
+                    /* @__PURE__ */ r("div", { className: "flex-1 truncate", children: t.length === 0 ? /* @__PURE__ */ r("span", { className: "text-gray-400 dark:text-gray-500", children: L }) : /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1", children: Q.map((e, a) => /* @__PURE__ */ r(
                       "span",
                       {
-                        className: "inline-flex items-center rounded bg-blue-500/20 px-1.5 text-sm text-blue-400",
+                        className: "inline-flex items-center rounded px-1.5 text-sm bg-blue-400/20 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400",
                         children: e
                       },
-                      l
+                      a
                     )) }) }),
-                    /* @__PURE__ */ a("div", { className: "ml-2 flex items-center gap-2", children: [
-                      r.length > 0 && /* @__PURE__ */ t(
+                    /* @__PURE__ */ r("div", { className: "ml-2 flex items-center gap-2", children: u ? /* @__PURE__ */ r(_, { className: "h-4 w-4 animate-spin text-gray-500 dark:text-gray-400" }) : /* @__PURE__ */ l(I, { children: [
+                      t.length > 0 && /* @__PURE__ */ r(
                         "button",
                         {
-                          onClick: R,
-                          className: "rounded-full p-1 transition-colors hover:bg-gray-700",
-                          children: /* @__PURE__ */ t(D, { className: "h-4 w-4 text-gray-400 hover:text-gray-300" })
+                          onClick: E,
+                          className: "rounded-full p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700",
+                          children: /* @__PURE__ */ r(z, { className: "h-4 w-4 text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300" })
                         }
                       ),
-                      /* @__PURE__ */ t(I, { className: "h-4 w-4 opacity-50" })
-                    ] })
+                      /* @__PURE__ */ r(B, { className: "h-4 w-4 opacity-50 text-gray-500 dark:text-gray-400" })
+                    ] }) })
                   ]
                 }
               ),
-              m && /* @__PURE__ */ a("div", { className: "absolute z-20 mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 shadow-lg animate-in fade-in-50 slide-in-from-top-2 isolate", children: [
-                /* @__PURE__ */ t("div", { className: "border-b border-gray-700 p-2", children: /* @__PURE__ */ a("div", { className: "relative", children: [
-                  /* @__PURE__ */ t(_, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" }),
-                  /* @__PURE__ */ t(
+              f && /* @__PURE__ */ l("div", { className: "absolute z-20 mt-1 w-full rounded-lg border shadow-lg animate-in fade-in-50 slide-in-from-top-2 isolate border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800", children: [
+                /* @__PURE__ */ r("div", { className: "border-b p-2 border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ l("div", { className: "relative", children: [
+                  /* @__PURE__ */ r(F, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400" }),
+                  /* @__PURE__ */ r(
                     "input",
                     {
-                      ref: x,
+                      ref: k,
                       type: "text",
-                      value: p,
-                      onChange: (e) => b(e.target.value),
-                      className: "w-full rounded-md bg-gray-900/50 py-1.5 pl-8 pr-4 text-sm text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500",
+                      value: y,
+                      onChange: (e) => p(e.target.value),
+                      className: "w-full rounded-md py-1.5 pl-8 pr-4 text-sm focus:outline-none focus:ring-2 bg-gray-100/70 text-gray-700 focus:ring-blue-400 dark:bg-gray-900/50 dark:text-gray-300 dark:focus:ring-blue-500",
                       placeholder: "Search options..."
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ t("div", { className: "max-h-60 overflow-auto", children: C.length === 0 ? /* @__PURE__ */ t("div", { className: "px-3 py-2 text-center text-sm text-gray-400", children: "No options found" }) : C.map((e) => {
-                  const l = r.includes(e.value);
-                  let o = !l && s && r.length >= s;
-                  return c && (o = !1), /* @__PURE__ */ a(
+                /* @__PURE__ */ r("div", { className: "max-h-60 overflow-auto", children: C.length === 0 ? /* @__PURE__ */ r("div", { className: "px-3 py-2 text-center text-sm text-gray-500 dark:text-gray-400", children: "No options found" }) : C.map((e) => {
+                  const a = t.includes(e.value);
+                  let c = !a && s && t.length >= s;
+                  return o && (c = !1), /* @__PURE__ */ l(
                     "div",
                     {
-                      className: y(
-                        "flex cursor-pointer items-center px-3 py-2 text-gray-300 hover:bg-gray-700/50",
-                        o && "cursor-not-allowed opacity-50"
+                      className: d(
+                        "flex cursor-pointer items-center px-3 py-2 transition-colors",
+                        "text-gray-700 hover:bg-gray-100/80 dark:text-gray-300 dark:hover:bg-gray-700/50",
+                        c && "cursor-not-allowed opacity-50"
                       ),
-                      onClick: () => !o && L(e.value),
+                      onClick: () => !c && R(e.value),
                       children: [
-                        !c && /* @__PURE__ */ t("div", { className: "mr-2 flex h-4 w-4 items-center justify-center rounded border border-gray-600", children: l && /* @__PURE__ */ t(z, { className: "h-3 w-3 text-blue-400" }) }),
+                        !o && /* @__PURE__ */ r("div", { className: "mr-2 flex h-4 w-4 items-center justify-center rounded border border-gray-400 dark:border-gray-600", children: a && /* @__PURE__ */ r(P, { className: "h-3 w-3 text-blue-500 dark:text-blue-400" }) }),
                         e.labelElement ?? e.label,
-                        o && /* @__PURE__ */ t("span", { className: "ml-auto text-xs text-gray-400", children: "Max limit reached" })
+                        c && /* @__PURE__ */ r("span", { className: "ml-auto text-xs text-gray-500 dark:text-gray-400", children: "Max limit reached" })
                       ]
                     },
                     e.value
@@ -146,11 +161,11 @@ function J(S) {
             ]
           }
         ),
-        h && /* @__PURE__ */ t("p", { className: "text-red-500 text-sm mt-1", children: h })
+        x && /* @__PURE__ */ r("p", { className: "mt-1.5 text-sm text-red-500 dark:text-red-400", children: x })
       ]
     }
   );
 }
 export {
-  J as default
+  W as default
 };

package/dist/form/number-field.js

@@ -1,25 +1,44 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { cn as n } from "../utils/cn.js";
-function i(o) {
-  const { label: l, disabled: e, ref: t, ...s } = o;
-  return /* @__PURE__ */ a("div", { children: [
-    /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: l }),
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { cn as o } from "../utils/cn.js";
+import { Loader2 as c } from "lucide-react";
+function g(l) {
+  const { label: s, disabled: e, ref: i, error: a, loading: t, ...n } = l;
+  return /* @__PURE__ */ d("div", { className: "w-full", children: [
     /* @__PURE__ */ r(
-      "input",
+      "label",
       {
-        type: "number",
-        ref: t,
-        disabled: e,
-        className: n(
-          "w-full bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500",
-          e && "opacity-50 cursor-not-allowed"
+        className: o(
+          "block text-sm font-medium mb-1.5 transition-colors text-gray-700 dark:text-gray-300",
+          e && "opacity-60"
         ),
-        ...s
+        children: s
       }
-    )
+    ),
+    /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        "input",
+        {
+          type: "number",
+          ref: i,
+          disabled: e || t,
+          className: o(
+            "w-full rounded-lg border py-2 px-3 transition-colors",
+            "border-gray-300 bg-white text-gray-900 placeholder-gray-400",
+            "dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-200 dark:placeholder-gray-500",
+            "focus:outline-none focus:ring-2 focus:border-transparent",
+            "focus:ring-blue-400 dark:focus:ring-blue-500",
+            a && "border-red-500 focus:ring-red-400 dark:border-red-500/70 dark:focus:ring-red-500",
+            (e || t) && "opacity-60 cursor-not-allowed bg-gray-100 dark:bg-gray-700/50"
+          ),
+          ...n
+        }
+      ),
+      t && /* @__PURE__ */ r("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ r(c, { className: "h-4 w-4 animate-spin text-gray-500 dark:text-gray-400" }) })
+    ] }),
+    a && /* @__PURE__ */ r("p", { className: "mt-1.5 text-sm text-red-500 dark:text-red-400", children: a })
   ] });
 }
-i.displayName = "NumberField";
+g.displayName = "NumberField";
 export {
-  i as default
+  g as default
 };

package/dist/form/select-field.js

@@ -1,19 +1,42 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-function i(r) {
-  const { label: a, options: s, disabled: t, hasError: d, classNames: c, ...o } = r;
-  return /* @__PURE__ */ n("div", { className: c, children: [
-    /* @__PURE__ */ l("label", { className: "block text-sm font-medium text-gray-300 mb-1", children: a }),
-    /* @__PURE__ */ l(
-      "select",
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { cn as o } from "../utils/cn.js";
+import { Loader2 as m, ChevronDown as u } from "lucide-react";
+function x(d) {
+  const { label: n, options: i, disabled: e, error: a, loading: t, className: c, ...g } = d;
+  return /* @__PURE__ */ s("div", { className: o("w-full", c), children: [
+    /* @__PURE__ */ r(
+      "label",
       {
-        className: "w-full bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-2 text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500",
-        disabled: t,
-        ...o,
-        children: s.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+        className: o(
+          "block text-sm font-medium mb-1.5 transition-colors text-gray-700 dark:text-gray-300",
+          e && "opacity-60"
+        ),
+        children: n
       }
-    )
+    ),
+    /* @__PURE__ */ s("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        "select",
+        {
+          className: o(
+            "w-full rounded-lg border py-2 px-3 pr-8 appearance-none transition-colors",
+            "border-gray-300 bg-white text-gray-900",
+            "dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-200",
+            "focus:outline-none focus:ring-2 focus:border-transparent",
+            "focus:ring-blue-400 dark:focus:ring-blue-500",
+            a && "border-red-500 focus:ring-red-400 dark:border-red-500/70 dark:focus:ring-red-500",
+            (e || t) && "opacity-60 cursor-not-allowed bg-gray-100 dark:bg-gray-700/50"
+          ),
+          disabled: e || t,
+          ...g,
+          children: i.map((l) => /* @__PURE__ */ r("option", { value: l.value, children: l.label }, l.value))
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: t ? /* @__PURE__ */ r(m, { className: "h-4 w-4 animate-spin text-gray-500 dark:text-gray-400" }) : /* @__PURE__ */ r(u, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }) })
+    ] }),
+    a && /* @__PURE__ */ r("p", { className: "mt-1.5 text-sm text-red-500 dark:text-red-400", children: a })
   ] });
 }
 export {
-  i as default
+  x as default
 };

package/dist/form/switch-field.js

@@ -1,52 +1,72 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { Loader2 as f } from "lucide-react";
-import { cn as l } from "../utils/cn.js";
-function b(a) {
-  const { label: o, loading: i, value: e, onChange: s, children: c, disabled: n } = a;
-  return /* @__PURE__ */ r("label", { className: "flex items-center gap-3 cursor-pointer", children: [
-    /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        className: l(
-          "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
-          e ? "bg-blue-600" : "bg-gray-700",
-          "focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-gray-900",
-          n && "opacity-50 cursor-not-allowed"
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Loader2 as u } from "lucide-react";
+import { cn as s } from "../utils/cn.js";
+function h(o) {
+  const {
+    label: c,
+    loading: i = !1,
+    value: t,
+    onChange: d,
+    children: f,
+    disabled: a,
+    error: l,
+    description: n
+  } = o;
+  return /* @__PURE__ */ r("div", { className: "w-full", children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ e(
+          "label",
+          {
+            className: s(
+              "text-sm font-medium transition-colors text-gray-700 dark:text-gray-300",
+              a && "opacity-60"
+            ),
+            children: c
+          }
         ),
-        role: "switch",
-        disabled: n,
-        onClick: () => {
-          s(!e);
-        },
-        "aria-checked": e,
-        "aria-label": o,
-        children: [
-          /* @__PURE__ */ t(
-            "span",
-            {
-              className: l(
-                "inline-block h-4 w-4 transform rounded-full bg-white transition-transform",
-                e ? "translate-x-6" : "translate-x-1"
-              )
-            }
-          ),
-          /* @__PURE__ */ t(
-            "div",
-            {
-              className: l(
-                "absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-2xl bg-slate-500 bg-opacity-55 backdrop-blur-md",
-                i ? "flex" : "hidden"
+        n && /* @__PURE__ */ e("p", { className: "text-xs mt-0.5 text-gray-500 dark:text-gray-400", children: n })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: s(
+              "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+              t ? "bg-blue-500 dark:bg-blue-600" : "bg-gray-300 dark:bg-gray-700",
+              "focus:outline-none focus:ring-2",
+              "focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-white",
+              "dark:focus:ring-blue-600 dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900",
+              a && "opacity-50 cursor-not-allowed",
+              l && "ring-2 ring-red-400 dark:ring-red-500"
+            ),
+            role: "switch",
+            disabled: a || i,
+            onClick: () => {
+              d(!t);
+            },
+            "aria-checked": t,
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: s(
+                    "inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm",
+                    t ? "translate-x-6" : "translate-x-1"
+                  )
+                }
               ),
-              children: /* @__PURE__ */ t(f, { className: l("h-3 w-3 animate-spin text-white") })
-            }
-          )
-        ]
-      }
-    ),
-    c
+              i && /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-full bg-slate-300/55 dark:bg-slate-500/55 backdrop-blur-md", children: /* @__PURE__ */ e(u, { className: "h-3 w-3 animate-spin text-white" }) })
+            ]
+          }
+        ),
+        f
+      ] })
+    ] }),
+    l && /* @__PURE__ */ e("p", { className: "mt-1.5 text-sm text-red-500 dark:text-red-400", children: l })
   ] });
 }
 export {
-  b as default
+  h as default
 };

package/dist/src/form/input-field.d.ts

@@ -1,3 +1,7 @@
-type Props = React.InputHTMLAttributes<HTMLInputElement>;
-declare function InputField(props: Props): import("react/jsx-runtime").JSX.Element;
+interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string | React.ReactNode;
+    error?: string;
+    loading?: boolean;
+}
+declare function InputField(props: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 export default InputField;

package/dist/src/form/multi-select.d.ts

@@ -9,7 +9,7 @@ interface MultiSelectProps {
     disabled?: boolean;
     value?: string[] | string;
     onChange: (value?: string[] | string) => void;
-    label: string;
+    label: string | React.ReactNode;
     placeholder?: string;
     maxValues?: number;
     searchable?: boolean;
@@ -18,6 +18,7 @@ interface MultiSelectProps {
     name?: string;
     ref: React.RefCallback<HTMLDivElement | null>;
     error?: string;
+    loading?: boolean;
 }
 declare function MultiSelect(props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/dist/src/form/number-field.d.ts

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
 interface NumberFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label: string;
+    label: string | React.ReactNode;
     disabled?: boolean;
     ref?: React.Ref<HTMLInputElement>;
+    error?: string;
+    loading?: boolean;
 }
 declare function NumberField(props: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberField {

package/dist/src/form/select-field.d.ts

@@ -5,10 +5,11 @@ interface SelectFieldProps extends React.SelectHTMLAttributes<HTMLSelectElement>
         value: string;
         label: string;
     }>;
-    ref: React.Ref<HTMLSelectElement>;
+    ref?: React.Ref<HTMLSelectElement>;
     disabled?: boolean;
-    hasError?: string;
-    classNames?: string;
+    error?: string;
+    loading?: boolean;
+    className?: string;
 }
 declare function SelectField(props: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
 export default SelectField;

package/dist/src/form/switch-field.d.ts

@@ -1,11 +1,13 @@
 import { default as React } from 'react';
-type Props = {
-    label: string;
-    loading: boolean;
+interface SwitchFieldProps {
+    label: string | React.ReactNode;
+    loading?: boolean;
     value: boolean;
-    onChange: (value: boolean) => Promise<unknown>;
+    onChange: (value: boolean) => Promise<unknown> | void;
     children?: React.ReactNode;
     disabled?: boolean;
-};
-declare function SwitchField(props: Props): import("react/jsx-runtime").JSX.Element;
+    error?: string;
+    description?: string;
+}
+declare function SwitchField(props: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;
 export default SwitchField;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@annatarhe/lake-ui",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.23",
   "type": "module",
   "license": "MIT",
   "exports": {