@companix/uikit 0.0.33 → 0.0.35

package/dist/bundle.es12.js

@@ -1,58 +1,77 @@
-import { jsx as t } from "react/jsx-runtime";
-import C from "classnames";
-import { forwardRef as j, useRef as w } from "react";
-import { mergeRefs as y } from "react-merge-refs";
-import { InputContainer as F } from "./bundle.es45.js";
-import { NumericFormat as V } from "react-number-format";
-const D = j(
-  ({
-    onChange: m,
-    onValueChange: o,
-    readOnly: f,
-    inputClassName: i,
-    value: n,
-    placeholder: u,
-    thousandSeparator: a,
-    decimalSeparator: p,
-    allowedDecimalSeparators: l,
-    thousandsGroupStyle: s,
-    decimalScale: d,
-    fixedDecimalScale: b,
-    allowNegative: R = !1,
-    allowLeadingZeros: c,
-    suffix: g,
-    prefix: x,
-    inputRef: I,
-    ...e
-  }, N) => {
-    const r = w(null);
-    return /* @__PURE__ */ t(F, { ref: N, inputRef: r, ...e, children: /* @__PURE__ */ t(
-      V,
-      {
-        type: "text",
-        getInputRef: y([r, I]),
-        className: C("form-input form-input-base", i),
-        "aria-disabled": e.disabled,
-        onChange: m,
-        onValueChange: ({ floatValue: h }) => o?.(h ?? null),
-        value: n,
-        placeholder: u,
-        disabled: e.disabled,
-        readOnly: f,
-        thousandSeparator: a,
-        decimalSeparator: p,
-        allowedDecimalSeparators: l,
-        thousandsGroupStyle: s,
-        decimalScale: d,
-        fixedDecimalScale: b,
-        allowNegative: R,
-        allowLeadingZeros: c,
-        suffix: g,
-        prefix: x
-      }
-    ) });
-  }
-);
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as F, useImperativeHandle as I } from "react";
+import { Popover as T } from "./bundle.es10.js";
+import { useFroozeClosing as b } from "./bundle.es44.js";
+import { SelectInput as z } from "./bundle.es45.js";
+import { useScrollListController as B } from "./bundle.es46.js";
+import { SelectOptions as D } from "./bundle.es47.js";
+import { mergeRefs as j } from "react-merge-refs";
+const G = (a) => {
+  const {
+    options: n,
+    onChange: i,
+    value: r,
+    minimalOptions: m,
+    matchTarget: f = "width",
+    children: u,
+    disabled: p,
+    scrollRef: d,
+    popoverRef: v,
+    clearButton: s,
+    ...h
+  } = a, t = F(() => {
+    const o = r === null ? -1 : n.findIndex((e) => e.value === r);
+    return {
+      index: o,
+      option: n[o]
+    };
+  }, [n, r]), x = t.option?.value ?? null, { popoverRef: R, froozePopoverPosition: C, handleAnimationEnd: g } = b(), { scrollToElement: c, optionsWrapperRef: O, scrollBoxRef: P } = B();
+  I(d, () => ({
+    scrollTo: (o) => c(o, "top")
+  }));
+  const S = (o, e) => {
+    C(), i(o), e();
+  }, A = (o) => {
+    o.stopPropagation(), s && i(null);
+  }, E = () => {
+    t.index !== -1 && c(t.index, "center");
+  };
+  return /* @__PURE__ */ l(
+    T,
+    {
+      minimal: !0,
+      ref: j([R, v]),
+      sideOffset: 0,
+      matchTarget: f,
+      onAnimationEnd: g,
+      onOpenAutoFocus: (o) => o.preventDefault(),
+      onCloseAutoFocus: (o) => o.preventDefault(),
+      disabled: p,
+      content: ({ close: o }) => /* @__PURE__ */ l(
+        D,
+        {
+          options: n,
+          active: x,
+          scrollboxRef: P,
+          optionsWrapperRef: O,
+          minimalOptions: m,
+          onOpened: E,
+          onSelect: (e) => S(e, o)
+        }
+      ),
+      children: u ?? /* @__PURE__ */ l(
+        z,
+        {
+          ...h,
+          disabled: p,
+          clearButton: s,
+          value: t.option?.title ?? "",
+          onClear: A
+        }
+      )
+    }
+  );
+};
 export {
-  D as NumberInput
+  G as Select
 };

package/dist/bundle.es13.js

@@ -1,23 +1,43 @@
-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 { jsx as t } from "react/jsx-runtime";
+import { forwardRef as b, useRef as R } from "react";
+import { mergeRefs as c } from "react-merge-refs";
+import { InputElement as x } from "./bundle.es48.js";
+import { InputContainer as I } from "./bundle.es49.js";
+import g from "classnames";
+const N = b(
+  ({
+    onChange: m,
+    onValueChange: f,
+    readOnly: i,
+    inputClassName: o,
+    value: p,
+    placeholder: n,
+    mask: d,
+    inputType: s = "text",
+    maskChar: u,
+    inputRef: a,
+    ...e
+  }, l) => {
+    const r = R(null);
+    return /* @__PURE__ */ t(I, { ref: l, inputRef: r, ...e, children: /* @__PURE__ */ t(
+      x,
+      {
+        type: s,
+        ref: c([r, a]),
+        className: g("form-input form-input-base", o),
+        "aria-disabled": e.disabled,
+        onChange: m,
+        onValueChange: f,
+        value: p,
+        placeholder: n,
+        disabled: e.disabled,
+        readOnly: i,
+        maskChar: u,
+        mask: d
+      }
+    ) });
   }
 );
 export {
-  s as OptionsList
+  N as Input
 };

package/dist/bundle.es14.js

@@ -1,35 +1,38 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-checkbox";
-import { Icon as h } from "./bundle.es30.js";
-import { f as l } from "./bundle.es46.js";
-import { useId as n } from "react";
-import { attr as c } from "@companix/utils-browser";
-const N = ({ checked: a, required: s, disabled: r, onCheckedChange: m, size: x, label: e }) => {
-  const i = n();
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      className: "checkbox",
-      "data-size": x ?? "md",
-      "data-required": c(s && !a),
-      "data-disabled": c(r),
-      children: [
-        /* @__PURE__ */ o(
-          t.Root,
-          {
-            className: "checkbox-box",
-            checked: a,
-            onCheckedChange: m,
-            disabled: r,
-            id: i,
-            children: /* @__PURE__ */ o(t.Indicator, { className: "checkbox-icon", children: /* @__PURE__ */ o(h, { icon: l.faCheck, size: "xxxs" }) })
-          }
-        ),
-        e && /* @__PURE__ */ o("label", { className: "checkbox-label", htmlFor: i, "data-disabled": c(r), children: e })
-      ]
-    }
-  );
-};
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import N from "classnames";
+import { Icon as v } from "./bundle.es33.js";
+import { attr as t } from "@companix/utils-browser";
+import { forwardRef as k } from "react";
+import { f as x } from "./bundle.es50.js";
+const E = k(
+  ({ title: s, icon: c, active: e, label: n, disabled: a, minimal: r, onClick: d, className: l, ...m }, p) => {
+    const f = (h) => {
+      a || d?.(h);
+    };
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: p,
+        ...m,
+        className: N("option", l),
+        "data-selected": t(e),
+        "data-disabled": t(a),
+        "data-minimal": t(r),
+        onClick: f,
+        children: [
+          /* @__PURE__ */ i("div", { className: "option-content", children: [
+            c && /* @__PURE__ */ o("div", { className: "option-icon", children: c }),
+            /* @__PURE__ */ i("div", { className: "option-content-layout", children: [
+              /* @__PURE__ */ o("div", { className: "option-title", children: s }),
+              n && /* @__PURE__ */ o("div", { className: "option-label", children: n })
+            ] })
+          ] }),
+          e && !r && /* @__PURE__ */ o("div", { className: "option-check", children: /* @__PURE__ */ o(v, { icon: x.faCheck }) })
+        ]
+      }
+    );
+  }
+);
 export {
-  N as Checkbox
+  E as OptionItem
 };

package/dist/bundle.es15.js

@@ -1,27 +1,58 @@
-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,
+import { jsx as t } from "react/jsx-runtime";
+import C from "classnames";
+import { forwardRef as j, useRef as w } from "react";
+import { mergeRefs as y } from "react-merge-refs";
+import { InputContainer as F } from "./bundle.es49.js";
+import { NumericFormat as V } from "react-number-format";
+const D = j(
+  ({
+    onChange: m,
+    onValueChange: o,
+    readOnly: f,
+    inputClassName: i,
+    value: n,
+    placeholder: u,
+    thousandSeparator: a,
+    decimalSeparator: p,
+    allowedDecimalSeparators: l,
+    thousandsGroupStyle: s,
+    decimalScale: d,
+    fixedDecimalScale: b,
+    allowNegative: R = !1,
+    allowLeadingZeros: c,
+    suffix: g,
+    prefix: x,
+    inputRef: I,
+    ...e
+  }, N) => {
+    const r = w(null);
+    return /* @__PURE__ */ t(F, { ref: N, inputRef: r, ...e, children: /* @__PURE__ */ t(
+      V,
       {
-        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 })
-        ] })
+        type: "text",
+        getInputRef: y([r, I]),
+        className: C("form-input form-input-base", i),
+        "aria-disabled": e.disabled,
+        onChange: m,
+        onValueChange: ({ floatValue: h }) => o?.(h ?? null),
+        value: n,
+        placeholder: u,
+        disabled: e.disabled,
+        readOnly: f,
+        thousandSeparator: a,
+        decimalSeparator: p,
+        allowedDecimalSeparators: l,
+        thousandsGroupStyle: s,
+        decimalScale: d,
+        fixedDecimalScale: b,
+        allowNegative: R,
+        allowLeadingZeros: c,
+        suffix: g,
+        prefix: x
       }
-    ),
-    h && /* @__PURE__ */ c("label", { className: "switch-label", htmlFor: l, "data-disabled": s, children: h })
-  ] });
-};
+    ) });
+  }
+);
 export {
-  u as Switch
+  D as NumberInput
 };

package/dist/bundle.es16.js

@@ -1,47 +1,23 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { useId as p } from "react";
-import * as l from "@radix-ui/react-radio-group";
-import { attr as s } from "@companix/utils-browser";
-const q = (t) => {
-  const { options: m, value: a, onChange: r, disabled: d, required: e, size: n } = t;
-  return /* @__PURE__ */ o(
-    l.Root,
-    {
-      className: "radio-group",
-      disabled: d,
-      "data-required": s(e && !a),
-      "data-v": a,
-      value: a,
-      onValueChange: (i) => r(i),
-      children: m.map((i, c) => /* @__PURE__ */ o(
-        h,
-        {
-          ...i,
-          size: n,
-          disabled: d,
-          required: e && !a
-        },
-        `radio-${i.value}-${c}`
-      ))
-    }
-  );
-}, h = ({ value: t, label: m, size: a = "md", disabled: r, required: d }) => {
-  const e = p();
-  return /* @__PURE__ */ u(
-    "span",
-    {
-      className: "radio",
-      "data-disabled": s(r),
-      "data-size": a,
-      "data-required": s(d),
-      children: [
-        /* @__PURE__ */ o(l.Item, { className: "radio-box", value: t, disabled: r, id: e, children: /* @__PURE__ */ o(l.Indicator, { className: "radio-mark" }) }),
-        /* @__PURE__ */ o("label", { className: "radio-label", htmlFor: e, "data-disabled": s(r), children: m })
-      ]
-    }
-  );
-};
+import { jsx as r } from "react/jsx-runtime";
+import { Scrollable as n } from "./bundle.es7.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 })
+  }
+);
 export {
-  h as Radio,
-  q as RadioGroup
+  s as OptionsList
 };

package/dist/bundle.es17.js

@@ -1,25 +1,35 @@
-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 i } from "@radix-ui/react-visually-hidden";
-import { varToStyle as c } from "@companix/utils-browser";
-const p = ({ open: t, onOpenChange: l, children: a, size: s, direction: m, className: n }) => /* @__PURE__ */ e(r.Root, { open: t, onOpenChange: l, children: /* @__PURE__ */ o(r.Portal, { children: [
-  /* @__PURE__ */ e(r.Overlay, { className: "drawer-overlay" }),
-  /* @__PURE__ */ o(
-    r.Content,
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-checkbox";
+import { Icon as h } from "./bundle.es33.js";
+import { f as l } from "./bundle.es50.js";
+import { useId as n } from "react";
+import { attr as c } from "@companix/utils-browser";
+const N = ({ checked: a, required: s, disabled: r, onCheckedChange: m, size: x, label: e }) => {
+  const i = n();
+  return /* @__PURE__ */ d(
+    "div",
     {
-      style: c({ "--drawer-size": s ?? "50%" }),
-      className: d("drawer", n),
-      "data-direction": m,
+      className: "checkbox",
+      "data-size": x ?? "md",
+      "data-required": c(s && !a),
+      "data-disabled": c(r),
       children: [
-        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r.Title, {}) }),
-        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r.Description, {}) }),
-        a
+        /* @__PURE__ */ o(
+          t.Root,
+          {
+            className: "checkbox-box",
+            checked: a,
+            onCheckedChange: m,
+            disabled: r,
+            id: i,
+            children: /* @__PURE__ */ o(t.Indicator, { className: "checkbox-icon", children: /* @__PURE__ */ o(h, { icon: l.faCheck, size: "xxxs" }) })
+          }
+        ),
+        e && /* @__PURE__ */ o("label", { className: "checkbox-label", htmlFor: i, "data-disabled": c(r), children: e })
       ]
     }
-  )
-] }) });
-p.Close = r.Close;
+  );
+};
 export {
-  p as Drawer
+  N as Checkbox
 };

package/dist/bundle.es18.js

@@ -1,31 +1,27 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import f from "classnames";
-import * as o from "@radix-ui/react-dialog";
-import { VisuallyHidden as a } from "@radix-ui/react-visually-hidden";
-import { RemoveListener as v } from "./bundle.es47.js";
-const g = (l) => {
-  const { size: n = "s", open: r, onOpenChange: s, children: c, onClosed: t, disableEsc: p, className: d } = l, m = (h) => {
-    p && h.preventDefault();
-  };
-  return /* @__PURE__ */ e(o.Root, { open: r, onOpenChange: s, children: /* @__PURE__ */ i(o.Portal, { children: [
-    /* @__PURE__ */ e(o.Overlay, { className: "popup-overlay dialog-overlay" }),
-    /* @__PURE__ */ e(
-      o.Content,
+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: "popup-container dialog-container",
-        "data-size": n,
-        onEscapeKeyDown: m,
-        children: /* @__PURE__ */ i("div", { className: f("popup dialog", d), children: [
-          /* @__PURE__ */ e(v, { callback: t }),
-          /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(o.Title, {}) }),
-          /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(o.Description, {}) }),
-          c
+        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 })
+  ] });
 };
-g.Close = o.Close;
 export {
-  g as Dialog
+  u as Switch
 };

package/dist/bundle.es19.js

@@ -1,40 +1,47 @@
-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.es47.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 }) })
-      ] })
-    ] }) })
-  ] })
-] });
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useId as p } from "react";
+import * as l from "@radix-ui/react-radio-group";
+import { attr as s } from "@companix/utils-browser";
+const q = (t) => {
+  const { options: m, value: a, onChange: r, disabled: d, required: e, size: n } = t;
+  return /* @__PURE__ */ o(
+    l.Root,
+    {
+      className: "radio-group",
+      disabled: d,
+      "data-required": s(e && !a),
+      "data-v": a,
+      value: a,
+      onValueChange: (i) => r(i),
+      children: m.map((i, c) => /* @__PURE__ */ o(
+        h,
+        {
+          ...i,
+          size: n,
+          disabled: d,
+          required: e && !a
+        },
+        `radio-${i.value}-${c}`
+      ))
+    }
+  );
+}, h = ({ value: t, label: m, size: a = "md", disabled: r, required: d }) => {
+  const e = p();
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      className: "radio",
+      "data-disabled": s(r),
+      "data-size": a,
+      "data-required": s(d),
+      children: [
+        /* @__PURE__ */ o(l.Item, { className: "radio-box", value: t, disabled: r, id: e, children: /* @__PURE__ */ o(l.Indicator, { className: "radio-mark" }) }),
+        /* @__PURE__ */ o("label", { className: "radio-label", htmlFor: e, "data-disabled": s(r), children: m })
+      ]
+    }
+  );
+};
 export {
-  C as AlertDialog
+  h as Radio,
+  q as RadioGroup
 };