@companix/uikit 0.0.11 → 0.0.14

package/dist/bundle.es46.js

@@ -0,0 +1,45 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-toast";
+import { attr as C } from "@companix/utils-browser";
+import { useState as h, useRef as v, useEffect as N, useLayoutEffect as x } from "react";
+import { RemoveListener as R } from "./bundle.es36.js";
+const E = (i) => {
+  const [c, l] = h(!1), o = v(null), {
+    appearance: d = "neutral",
+    icon: r,
+    title: a,
+    description: s,
+    duration: m,
+    closeIcon: u,
+    onRemoving: p,
+    onRemoved: f,
+    onInitialized: L
+  } = i;
+  return N(() => {
+    l(!0);
+  }, []), x(() => {
+    o.current && L(o.current);
+  }, []), /* @__PURE__ */ n(
+    t.Root,
+    {
+      ref: o,
+      "data-expanded": !0,
+      "data-appearance": d,
+      "data-mounted": C(c),
+      className: "toaster",
+      duration: m,
+      children: [
+        /* @__PURE__ */ e(R, { callback: f }),
+        r && /* @__PURE__ */ e("div", { className: "toaster-icon", children: r }),
+        /* @__PURE__ */ n("div", { className: "toaster-content", children: [
+          a && /* @__PURE__ */ e(t.Title, { className: "toaster-title", children: a }),
+          s && /* @__PURE__ */ e(t.Description, { className: "toaster-description", children: s })
+        ] }),
+        /* @__PURE__ */ e(t.Close, { className: "toaster-close", onClick: p, children: u ?? /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z" }) }) })
+      ]
+    }
+  );
+};
+export {
+  E as Toast
+};

package/dist/bundle.es8.js

@@ -1,87 +1,83 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as E, useEffect as I } from "react";
-import { OptionsList as b } from "./bundle.es12.js";
-import { OptionItem as B } from "./bundle.es10.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as S, useEffect as A } from "react";
+import { OptionsList as E } from "./bundle.es12.js";
+import { OptionItem as b } from "./bundle.es10.js";
 import { Popover as F } from "./bundle.es6.js";
-import { useFroozeClosing as z } from "./bundle.es30.js";
-import { SelectInput as D } from "./bundle.es31.js";
-import { useScrollListController as L } from "./bundle.es32.js";
-const y = (c) => {
+import { useFroozeClosing as I } from "./bundle.es31.js";
+import { SelectInput as z } from "./bundle.es32.js";
+import { useScrollListController as D } from "./bundle.es33.js";
+const M = (c) => {
   const {
     options: e,
-    onChange: i,
+    onChange: l,
+    value: s,
     minimalOptions: a,
-    clearButton: m,
-    clearButtonIcon: u,
-    matchTarget: f = "width",
-    value: l,
-    children: n,
-    disabled: s,
-    ...d
-  } = c, p = E(() => {
-    const o = e.findIndex((t) => t.value === l);
+    matchTarget: m = "width",
+    children: u,
+    disabled: p,
+    ...n
+  } = c, t = S(() => {
+    const o = e.findIndex((r) => r.value === s);
     return {
       index: o,
       option: e[o]
     };
-  }, [e, l]), v = p.option?.value ?? null, { popoverRef: h, froozePopoverPosition: x, handleAnimationEnd: O } = z(), { scrollToElement: C, optionsWrapperRef: g, scrollBoxRef: P } = L(), R = (o, t) => {
-    x(), i(o), t();
-  }, S = (o) => {
-    o.stopPropagation(), i(null);
-  }, A = () => {
-    p.index !== -1 && C(p.index, !0);
+  }, [e, s]), f = t.option?.value ?? null, { popoverRef: d, froozePopoverPosition: v, handleAnimationEnd: h } = I(), { scrollToElement: x, optionsWrapperRef: O, scrollBoxRef: C } = D(), g = (o, r) => {
+    v(), l(o), r();
+  }, P = (o) => {
+    o.stopPropagation(), l(null);
+  }, R = () => {
+    t.index !== -1 && x(t.index, !0);
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ i(
     F,
     {
       minimal: !0,
-      ref: h,
+      ref: d,
       sideOffset: 0,
-      matchTarget: f,
-      onAnimationEnd: O,
+      matchTarget: m,
+      onAnimationEnd: h,
       onOpenAutoFocus: (o) => o.preventDefault(),
       onCloseAutoFocus: (o) => o.preventDefault(),
-      disabled: s,
-      content: ({ close: o }) => /* @__PURE__ */ r(
-        T,
+      disabled: p,
+      content: ({ close: o }) => /* @__PURE__ */ i(
+        L,
         {
           options: e,
-          active: v,
-          scrollboxRef: P,
-          optionsWrapperRef: g,
+          active: f,
+          scrollboxRef: C,
+          optionsWrapperRef: O,
           minimalOptions: a,
-          onOpened: A,
-          onSelect: (t) => R(t, o)
+          onOpened: R,
+          onSelect: (r) => g(r, o)
         }
       ),
-      children: n ?? /* @__PURE__ */ r(
-        D,
+      children: u ?? /* @__PURE__ */ i(
+        z,
         {
-          ...d,
-          disabled: s,
-          value: p.option?.title ?? "",
-          onClear: S,
-          clearButton: m,
-          clearButtonIcon: u
+          ...n,
+          disabled: p,
+          value: t.option?.title ?? "",
+          onClear: P
         }
       )
     }
   );
-}, T = (c) => {
-  const { active: e, onOpened: i, scrollboxRef: a, optionsWrapperRef: m, options: u, onSelect: f, minimalOptions: l } = c;
-  return I(() => {
-    i?.();
-  }, []), /* @__PURE__ */ r(b, { scrollboxRef: a, optionsWrapperRef: m, maxHeight: 300, children: u.map((n, s) => /* @__PURE__ */ r(
-    B,
+}, L = (c) => {
+  const { active: e, onOpened: l, scrollboxRef: s, optionsWrapperRef: a, options: m, onSelect: u, minimalOptions: p } = c;
+  return A(() => {
+    l?.();
+  }, []), /* @__PURE__ */ i(E, { scrollboxRef: s, optionsWrapperRef: a, maxHeight: 300, children: m.map((n, t) => /* @__PURE__ */ i(
+    b,
     {
       active: e === n.value,
-      onClick: () => f?.(n.value),
-      minimal: l,
+      onClick: () => u?.(n.value),
+      minimal: p,
       ...n
     },
-    `option-item-${n.value}-${s}`
+    `option-item-${n.value}-${t}`
   )) });
 };
 export {
-  y as Select
+  M as Select
 };

package/dist/bundle.es9.js

@@ -1,7 +1,7 @@
 import { jsxs as z, jsx as n } from "react/jsx-runtime";
 import A from "classnames";
 import M from "react-input-mask";
-import { useLayoutAndUpdate as U } from "./bundle.es33.js";
+import { useLayoutAndUpdate as U } from "./bundle.es34.js";
 import { attr as c } from "@companix/utils-browser";
 import { forwardRef as R, useRef as l, useCallback as g } from "react";
 import { mergeRefs as v } from "react-merge-refs";

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { TextArea } from './TextArea';
 export { SelectTags } from './SelectTags';
 export { DatePicker } from './DatePicker';
 export { FileOverlay } from './File';
+export { FormGroup } from './FormGroup';
 export * from './__hooks/use-local-storage';
 export { createAlertAgent } from './DialogAlert';
 export { createToaster } from './Toaster';

package/dist/index.scss

@@ -23,4 +23,4 @@
 @use './Spinner/Spinner.scss';
 @use './ButtonGroup/ButtonGroup.scss';
 @use './Scrollable/Scrollable.scss';
-@use './FormLabel/FormLabel.scss';
+@use './FormGroup/FormGroup.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",
   "type": "module",