@companix/uikit 0.0.3 → 0.0.4

package/dist/bundle.es13.js

@@ -1,33 +1,10 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useState as m, useRef as p } from "react";
-import { Form as l } from "./bundle.es11.js";
-const N = ({ value: r, onChange: u, ...e }) => {
-  const [, t] = m([]), n = p(o(r));
-  return +n.current !== r && (n.current = o(r)), /* @__PURE__ */ f(
-    l,
-    {
-      ...e,
-      value: n.current,
-      onChange: (i) => {
-        const s = i.currentTarget.value.trim();
-        if (s === "")
-          return n.current = "", u(null);
-        if (!(s.startsWith(".") || s.replace(".", "").split("").some((c) => isNaN(parseInt(c))))) {
-          if (n.current = a(s.split("")), +n.current === r)
-            return t([]);
-          u(+n.current);
-        }
-      }
-    }
-  );
-}, o = (r) => r === null ? "" : r.toString(), a = (r) => {
-  const u = [...r], e = [...r];
-  if (e.every((t) => t === "0"))
-    return "0";
-  for (let t = 0; t < e.length && e[t] === "0"; t++)
-    e[t] === "0" && e[t + 1] !== "." && u.shift();
-  return u.join("");
-};
+import { forwardRef as p } from "react";
+import a from "classnames";
+import { attr as i } from "@companix/utils-browser";
+const c = p(
+  ({ children: r, className: o, fill: t }, m) => /* @__PURE__ */ f("div", { ref: m, className: a("button-group", o), "data-fill": i(t), children: r })
+);
 export {
-  N as NumberInput
+  c as ButtonGroup
 };

package/dist/bundle.es14.js

@@ -1,18 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Scrollable as n } from "./bundle.es5.js";
-const s = ({ children: o, maxHeight: t, scrollboxRef: i, optionsWrapperRef: e }) => /* @__PURE__ */ r(
-  n,
-  {
-    ref: i,
-    implementation: "inner",
-    padding: 10,
-    thumbPadding: 3,
-    thumbColor: "#0000002b",
-    maxHeight: t,
-    scrollY: !0,
-    children: /* @__PURE__ */ r("div", { className: "option-list", ref: e, children: o })
-  }
-);
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-checkbox";
+import { Icon as h } from "./bundle.es34.js";
+import { faCheck as l } from "@fortawesome/free-solid-svg-icons";
+import { useId as n } from "react";
+import { attr as c } from "@companix/utils-browser";
+const u = ({ checked: e, required: m, disabled: r, onCheckedChange: s, size: d, label: a }) => {
+  const i = n();
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: "checkbox",
+      "data-size": d ?? "md",
+      "data-required": c(m && !e),
+      "data-disabled": c(r),
+      children: [
+        /* @__PURE__ */ o(
+          t.Root,
+          {
+            className: "checkbox-box",
+            checked: e,
+            onCheckedChange: s,
+            disabled: r,
+            id: i,
+            children: /* @__PURE__ */ o(t.Indicator, { className: "checkbox-icon", children: /* @__PURE__ */ o(h, { icon: l, size: "xxxs" }) })
+          }
+        ),
+        a && /* @__PURE__ */ o("label", { className: "checkbox-label", htmlFor: i, "data-disabled": c(r), children: a })
+      ]
+    }
+  );
+};
 export {
-  s as OptionsList
+  u as Checkbox
 };

package/dist/bundle.es15.js

@@ -1,11 +1,27 @@
-import { jsx as p } from "react/jsx-runtime";
-/* empty css            */
-import { forwardRef as f } from "react";
-import i from "classnames";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-switch";
 import { attr as a } from "@companix/utils-browser";
-const d = f(
-  ({ children: r, className: o, fill: t }, m) => /* @__PURE__ */ p("div", { ref: m, className: i("button-group", o), "data-fill": a(t), children: r })
-);
+import { useId as n } from "react";
+const u = (m) => {
+  const { checked: e, disabled: s, onCheckedChange: o, uncheckedIcon: i, checkedIcon: t, label: h } = m, l = n();
+  return /* @__PURE__ */ d("div", { className: "switch", "data-disabled": a(s), children: [
+    /* @__PURE__ */ c(
+      r.Root,
+      {
+        className: "switch-track",
+        checked: e,
+        onCheckedChange: o,
+        disabled: s,
+        id: l,
+        children: /* @__PURE__ */ d(r.Thumb, { className: "switch-thumb", children: [
+          i && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(!e), children: i }),
+          t && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(e), children: t })
+        ] })
+      }
+    ),
+    h && /* @__PURE__ */ c("label", { className: "switch-label", htmlFor: l, "data-disabled": s, children: h })
+  ] });
+};
 export {
-  d as ButtonGroup
+  u as Switch
 };

package/dist/bundle.es16.js

@@ -1,35 +1,23 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-checkbox";
-import { Icon as h } from "./bundle.es37.js";
-import { faCheck as l } from "@fortawesome/free-solid-svg-icons";
-import { useId as n } from "react";
-import { attr as c } from "@companix/utils-browser";
-const u = ({ checked: e, required: m, disabled: r, onCheckedChange: s, size: d, label: a }) => {
-  const i = n();
-  return /* @__PURE__ */ x(
-    "div",
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useId as c } from "react";
+import * as d from "@radix-ui/react-radio-group";
+import { attr as i } from "@companix/utils-browser";
+const h = ({ value: t, label: e, size: m = "md", disabled: a, required: s }) => {
+  const o = c();
+  return /* @__PURE__ */ l(
+    "span",
     {
-      className: "checkbox",
-      "data-size": d ?? "md",
-      "data-required": c(m && !e),
-      "data-disabled": c(r),
+      className: "radio",
+      "data-disabled": i(a),
+      "data-size": m,
+      "data-required": i(s),
       children: [
-        /* @__PURE__ */ o(
-          t.Root,
-          {
-            className: "checkbox-box",
-            checked: e,
-            onCheckedChange: s,
-            disabled: r,
-            id: i,
-            children: /* @__PURE__ */ o(t.Indicator, { className: "checkbox-icon", children: /* @__PURE__ */ o(h, { icon: l, size: "xxxs" }) })
-          }
-        ),
-        a && /* @__PURE__ */ o("label", { className: "checkbox-label", htmlFor: i, "data-disabled": c(r), children: a })
+        /* @__PURE__ */ r(d.Item, { className: "radio-box", value: t, disabled: a, id: o, children: /* @__PURE__ */ r(d.Indicator, { className: "radio-mark" }) }),
+        /* @__PURE__ */ r("label", { className: "radio-label", htmlFor: o, "data-disabled": i(a), children: e })
       ]
     }
   );
 };
 export {
-  u as Checkbox
+  h as Radio
 };

package/dist/bundle.es17.js

@@ -1,27 +1,24 @@
-import { jsxs as d, jsx as c } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-switch";
-import { attr as a } from "@companix/utils-browser";
-import { useId as n } from "react";
-const u = (m) => {
-  const { checked: e, disabled: s, onCheckedChange: o, uncheckedIcon: i, checkedIcon: t, label: h } = m, l = n();
-  return /* @__PURE__ */ d("div", { className: "switch", "data-disabled": a(s), children: [
-    /* @__PURE__ */ c(
-      r.Root,
-      {
-        className: "switch-track",
-        checked: e,
-        onCheckedChange: o,
-        disabled: s,
-        id: l,
-        children: /* @__PURE__ */ d(r.Thumb, { className: "switch-thumb", children: [
-          i && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(!e), children: i }),
-          t && /* @__PURE__ */ c("span", { className: "switch-thumb-icon", "data-visible": a(e), children: t })
-        ] })
-      }
-    ),
-    h && /* @__PURE__ */ c("label", { className: "switch-label", htmlFor: l, "data-disabled": s, children: h })
-  ] });
-};
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import d from "classnames";
+import * as r from "@radix-ui/react-dialog";
+import { VisuallyHidden as n } from "@radix-ui/react-visually-hidden";
+import { varToStyle as c } from "@companix/utils-browser";
+const p = ({ open: i, onOpenChange: t, children: a, size: l, direction: s, className: m }) => /* @__PURE__ */ e(r.Root, { open: i, onOpenChange: t, children: /* @__PURE__ */ o(r.Portal, { children: [
+  /* @__PURE__ */ e(r.Overlay, { className: "drawer-overlay" }),
+  /* @__PURE__ */ o(
+    r.Content,
+    {
+      style: c({ "--drawer-size": l ?? "50%" }),
+      className: d("drawer", m),
+      "data-direction": s,
+      children: [
+        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(r.Title, {}) }),
+        a
+      ]
+    }
+  )
+] }) });
+p.Close = r.Close;
 export {
-  u as Switch
+  p as Drawer
 };

package/dist/bundle.es18.js

@@ -1,23 +1,15 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useId as c } from "react";
-import * as d from "@radix-ui/react-radio-group";
-import { attr as i } from "@companix/utils-browser";
-const h = ({ value: t, label: e, size: m = "md", disabled: a, required: s }) => {
-  const o = c();
-  return /* @__PURE__ */ l(
-    "span",
-    {
-      className: "radio",
-      "data-disabled": i(a),
-      "data-size": m,
-      "data-required": i(s),
-      children: [
-        /* @__PURE__ */ r(d.Item, { className: "radio-box", value: t, disabled: a, id: o, children: /* @__PURE__ */ r(d.Indicator, { className: "radio-mark" }) }),
-        /* @__PURE__ */ r("label", { className: "radio-label", htmlFor: o, "data-disabled": i(a), children: e })
-      ]
-    }
-  );
-};
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import n from "classnames";
+import * as o from "@radix-ui/react-dialog";
+import { VisuallyHidden as p } from "@radix-ui/react-visually-hidden";
+const c = ({ size: e = "s", open: l, onOpenChange: a, children: s, className: t }) => /* @__PURE__ */ i(o.Root, { open: l, onOpenChange: a, children: /* @__PURE__ */ r(o.Portal, { children: [
+  /* @__PURE__ */ i(o.Overlay, { className: "popup-overlay dialog-overlay" }),
+  /* @__PURE__ */ i(o.Content, { className: "popup-container dialog-container", "data-size": e, children: /* @__PURE__ */ r("div", { className: n("popup dialog", t), children: [
+    /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(o.Title, {}) }),
+    s
+  ] }) })
+] }) });
+c.Close = o.Close;
 export {
-  h as Radio
+  c as Dialog
 };

package/dist/bundle.es19.js

@@ -1,24 +1,40 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import d from "classnames";
-import * as r from "@radix-ui/react-dialog";
-import { VisuallyHidden as n } from "@radix-ui/react-visually-hidden";
-import { varToStyle as c } from "@companix/utils-browser";
-const p = ({ open: i, onOpenChange: t, children: a, size: l, direction: s, className: m }) => /* @__PURE__ */ e(r.Root, { open: i, onOpenChange: t, children: /* @__PURE__ */ o(r.Portal, { children: [
-  /* @__PURE__ */ e(r.Overlay, { className: "drawer-overlay" }),
-  /* @__PURE__ */ o(
-    r.Content,
-    {
-      style: c({ "--drawer-size": l ?? "50%" }),
-      className: d("drawer", m),
-      "data-direction": s,
-      children: [
-        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(r.Title, {}) }),
-        a
-      ]
-    }
-  )
-] }) });
-p.Close = r.Close;
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-alert-dialog";
+import { Button as c } from "./bundle.es2.js";
+import { RemoveListener as N } from "./bundle.es35.js";
+import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
+const C = ({
+  open: d,
+  defaultOpen: p,
+  onOpenChange: m,
+  onUnMounted: h,
+  icon: i,
+  title: l,
+  description: o,
+  cancelDefaultText: n,
+  cancel: t,
+  disableCancel: v,
+  confirm: s
+}) => /* @__PURE__ */ a(r.Root, { open: d, defaultOpen: p, onOpenChange: m, children: [
+  /* @__PURE__ */ e(N, { callback: h }),
+  /* @__PURE__ */ a(r.Portal, { children: [
+    /* @__PURE__ */ e(r.Overlay, { className: "popup-overlay dialog-overlay" }),
+    /* @__PURE__ */ e(r.Content, { className: "popup-container dialog-container", children: /* @__PURE__ */ a("div", { className: "popup alert", children: [
+      /* @__PURE__ */ a("div", { className: "alert-body", children: [
+        i && /* @__PURE__ */ e("span", { className: "alert-icon", children: i }),
+        /* @__PURE__ */ a("div", { className: "alert-content", children: [
+          l && /* @__PURE__ */ e(r.Title, { className: "alert-title", children: l }),
+          !l && /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(r.Title, {}) }),
+          o && /* @__PURE__ */ e(r.Description, { className: "alert-description", children: o })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "alert-footer", children: [
+        !v && (t?.text || n) && /* @__PURE__ */ e(r.Cancel, { asChild: !0, children: /* @__PURE__ */ e(c, { appearance: "neutral", ...t, text: t?.text ?? n }) }),
+        s?.text && /* @__PURE__ */ e(r.Action, { asChild: !0, children: /* @__PURE__ */ e(c, { appearance: "negative", ...s }) })
+      ] })
+    ] }) })
+  ] })
+] });
 export {
-  p as Drawer
+  C as AlertDialog
 };

package/dist/bundle.es2.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as b, Fragment as h } from "react/jsx-runtime";
+import j from "classnames";
+import { Spinner as k } from "./bundle.es3.js";
+import { forwardRef as v } from "react";
+import { attr as r } from "@companix/utils-browser";
+const F = v(
+  ({
+    children: d,
+    fill: o,
+    text: m,
+    active: l,
+    mode: c = "default",
+    appearance: f = "neutral",
+    size: s = "md",
+    align: p,
+    icon: n,
+    loading: a,
+    className: u,
+    iconRight: i,
+    ...t
+  }, x) => /* @__PURE__ */ e(
+    "button",
+    {
+      ref: x,
+      className: j("button", u),
+      "data-size": s,
+      "data-loading": r(a),
+      "data-align": a ? "center" : p ?? (n && i ? "left" : "center"),
+      "data-appearance": f,
+      "data-mode": c,
+      "data-fill": r(o),
+      "data-active": r(l),
+      ...t,
+      onClick: a ?? t.disabled ? void 0 : t.onClick,
+      children: a ? /* @__PURE__ */ e(k, { size: 14, width: 2 }) : /* @__PURE__ */ b(h, { children: [
+        n,
+        (d ?? m) && /* @__PURE__ */ e("span", { className: "button-text", children: m ?? d }),
+        i
+      ] })
+    }
+  )
+);
+export {
+  F as Button
+};

package/dist/bundle.es20.js

@@ -1,15 +1,18 @@
-import { jsx as i, jsxs as r } from "react/jsx-runtime";
-import n from "classnames";
-import * as o from "@radix-ui/react-dialog";
-import { VisuallyHidden as p } from "@radix-ui/react-visually-hidden";
-const c = ({ size: e = "s", open: l, onOpenChange: a, children: s, className: t }) => /* @__PURE__ */ i(o.Root, { open: l, onOpenChange: a, children: /* @__PURE__ */ r(o.Portal, { children: [
-  /* @__PURE__ */ i(o.Overlay, { className: "popup-overlay dialog-overlay" }),
-  /* @__PURE__ */ i(o.Content, { className: "popup-container dialog-container", "data-size": e, children: /* @__PURE__ */ r("div", { className: n("popup dialog", t), children: [
-    /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(o.Title, {}) }),
-    s
-  ] }) })
-] }) });
-c.Close = o.Close;
+import { jsx as e } from "react/jsx-runtime";
+import { Button as m } from "./bundle.es2.js";
+import { useLoading as p } from "./bundle.es36.js";
+const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
+  const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
+  return /* @__PURE__ */ e(
+    m,
+    {
+      appearance: t ? "negative" : r,
+      ...i,
+      loading: n,
+      onClick: a
+    }
+  );
+};
 export {
-  c as Dialog
+  g as LoadButton
 };

package/dist/bundle.es21.js

@@ -1,41 +1,36 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-alert-dialog";
-/* empty css           */
-import { Button as c } from "./bundle.es3.js";
-import { RemoveListener as N } from "./bundle.es43.js";
-import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
-const A = ({
-  open: d,
-  defaultOpen: p,
-  onOpenChange: m,
-  onUnMounted: h,
-  icon: i,
-  title: l,
-  description: o,
-  cancelDefaultText: n,
-  cancel: t,
-  disableCancel: v,
-  confirm: s
-}) => /* @__PURE__ */ a(r.Root, { open: d, defaultOpen: p, onOpenChange: m, children: [
-  /* @__PURE__ */ e(N, { callback: h }),
-  /* @__PURE__ */ a(r.Portal, { children: [
-    /* @__PURE__ */ e(r.Overlay, { className: "popup-overlay dialog-overlay" }),
-    /* @__PURE__ */ e(r.Content, { className: "popup-container dialog-container", children: /* @__PURE__ */ a("div", { className: "popup alert", children: [
-      /* @__PURE__ */ a("div", { className: "alert-body", children: [
-        i && /* @__PURE__ */ e("span", { className: "alert-icon", children: i }),
-        /* @__PURE__ */ a("div", { className: "alert-content", children: [
-          l && /* @__PURE__ */ e(r.Title, { className: "alert-title", children: l }),
-          !l && /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(r.Title, {}) }),
-          o && /* @__PURE__ */ e(r.Description, { className: "alert-description", children: o })
-        ] })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "alert-footer", children: [
-        !v && (t?.text || n) && /* @__PURE__ */ e(r.Cancel, { asChild: !0, children: /* @__PURE__ */ e(c, { appearance: "neutral", ...t, text: t?.text ?? n }) }),
-        s?.text && /* @__PURE__ */ e(r.Action, { asChild: !0, children: /* @__PURE__ */ e(c, { appearance: "negative", ...s }) })
-      ] })
-    ] }) })
-  ] })
-] });
+import { jsx as n, jsxs as T } from "react/jsx-runtime";
+import * as c from "@radix-ui/react-tabs";
+import { useRef as g, useId as p, createContext as v, useState as I, useContext as d, useEffect as R } from "react";
+const l = v({ baseId: "", listRef: {} }), b = (t, e) => `radix-${t}-trigger-${e}`, y = ({ children: t, value: e, onChange: s }) => {
+  const r = g(null), o = p();
+  return /* @__PURE__ */ n(c.Root, { value: e, onValueChange: s, children: /* @__PURE__ */ n(l.Provider, { value: { baseId: o, listRef: r }, children: /* @__PURE__ */ T(c.List, { className: "tabs", ref: r, children: [
+    /* @__PURE__ */ n($, { value: e }),
+    t
+  ] }) }) });
+}, $ = ({ value: t }) => {
+  const [e, s] = I({}), { baseId: r, listRef: o } = d(l);
+  return R(() => {
+    const a = { observer: null };
+    if (o.current) {
+      const f = `.tab[id="${b(r, t)}"]`, i = o.current.querySelector(f);
+      i != null ? (a.observer = new ResizeObserver(() => {
+        const { clientHeight: u, clientWidth: m, offsetLeft: h, offsetTop: x } = i;
+        s({
+          height: u,
+          transform: `translateX(${Math.floor(h)}px) translateY(${Math.floor(x)}px)`,
+          width: m
+        });
+      }), a.observer.observe(i)) : s({ display: "none" });
+    }
+    return () => {
+      a.observer && a.observer.disconnect();
+    };
+  }, [t]), /* @__PURE__ */ n("div", { className: "tab-indicator-container", style: e, children: /* @__PURE__ */ n("div", { className: "tab-indicator" }) });
+}, C = ({ children: t, value: e, ...s }) => {
+  const { baseId: r } = d(l), o = b(r, e);
+  return /* @__PURE__ */ n(c.Trigger, { ...s, id: o, className: "tab", value: e, children: t });
+};
+y.Tab = C;
 export {
-  A as AlertDialog
+  y as Tabs
 };

package/dist/bundle.es22.js

@@ -1,18 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Button as m } from "./bundle.es3.js";
-import { useLoading as p } from "./bundle.es44.js";
-const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
-  const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
-  return /* @__PURE__ */ e(
-    m,
-    {
-      appearance: t ? "negative" : r,
-      ...i,
-      loading: n,
-      onClick: a
-    }
-  );
+import { jsx as d, Fragment as p } from "react/jsx-runtime";
+import { getNextCandleTime as T, sleep as S, getTimes as x } from "@companix/utils-js";
+import { useRef as g, useState as v, useEffect as s } from "react";
+const n = (t) => String(t).padStart(2, "0"), j = ({ expiration: t, separator: m = ":", onExpired: a }) => {
+  const e = g(null), [, o] = v([]);
+  s(() => {
+    const c = Date.now(), f = T(c, "1s") - c;
+    return e.current && clearInterval(e.current), S(f).then(() => {
+      o([]), e.current = setInterval(() => {
+        o([]);
+      }, 1e3);
+    }), () => {
+      e.current && clearInterval(e.current);
+    };
+  }, [t]);
+  const r = t - Date.now(), { hours: i, minutes: u, seconds: l } = x(r);
+  return s(() => {
+    r <= 0 && (a?.(), e.current && clearInterval(e.current));
+  }, [r <= 0]), /* @__PURE__ */ d(p, { children: [n(i), n(u), n(l)].join(m) });
 };
 export {
-  g as LoadButton
+  j as Countdown
 };

package/dist/bundle.es23.js

@@ -1,36 +1,42 @@
-import { jsx as n, jsxs as T } from "react/jsx-runtime";
-import * as c from "@radix-ui/react-tabs";
-import { useRef as g, useId as p, createContext as v, useState as I, useContext as d, useEffect as R } from "react";
-const l = v({ baseId: "", listRef: {} }), b = (t, e) => `radix-${t}-trigger-${e}`, y = ({ children: t, value: e, onChange: s }) => {
-  const r = g(null), o = p();
-  return /* @__PURE__ */ n(c.Root, { value: e, onValueChange: s, children: /* @__PURE__ */ n(l.Provider, { value: { baseId: o, listRef: r }, children: /* @__PURE__ */ T(c.List, { className: "tabs", ref: r, children: [
-    /* @__PURE__ */ n($, { value: e }),
-    t
-  ] }) }) });
-}, $ = ({ value: t }) => {
-  const [e, s] = I({}), { baseId: r, listRef: o } = d(l);
-  return R(() => {
-    const a = { observer: null };
-    if (o.current) {
-      const f = `.tab[id="${b(r, t)}"]`, i = o.current.querySelector(f);
-      i != null ? (a.observer = new ResizeObserver(() => {
-        const { clientHeight: u, clientWidth: m, offsetLeft: h, offsetTop: x } = i;
-        s({
-          height: u,
-          transform: `translateX(${Math.floor(h)}px) translateY(${Math.floor(x)}px)`,
-          width: m
-        });
-      }), a.observer.observe(i)) : s({ display: "none" });
+import { jsx as f } from "react/jsx-runtime";
+import { useResizeTextarea as p } from "./bundle.es37.js";
+import { attr as e, callMultiple as x } from "@companix/utils-browser";
+import { useEffect as u } from "react";
+const R = ({
+  onResize: s,
+  grow: a = !1,
+  value: t,
+  onChange: i,
+  disabled: o,
+  required: m,
+  rows: l = 2,
+  fill: c = !1,
+  ...d
+}) => {
+  const [n, r] = p(s, a);
+  return u(r, [r, t]), /* @__PURE__ */ f(
+    "div",
+    {
+      className: "form form-textarea",
+      "data-required": e(m),
+      "data-disabled": e(o),
+      "data-fill": e(c),
+      children: /* @__PURE__ */ f(
+        "textarea",
+        {
+          className: "form-input",
+          "data-grow": e(a),
+          value: t,
+          ref: n,
+          rows: l,
+          disabled: o,
+          onChange: x(i, r),
+          ...d
+        }
+      )
     }
-    return () => {
-      a.observer && a.observer.disconnect();
-    };
-  }, [t]), /* @__PURE__ */ n("div", { className: "tab-indicator-container", style: e, children: /* @__PURE__ */ n("div", { className: "tab-indicator" }) });
-}, C = ({ children: t, value: e, ...s }) => {
-  const { baseId: r } = d(l), o = b(r, e);
-  return /* @__PURE__ */ n(c.Trigger, { ...s, id: o, className: "tab", value: e, children: t });
+  );
 };
-y.Tab = C;
 export {
-  y as Tabs
+  R as TextArea
 };