@companix/uikit 0.0.9 → 0.0.11

package/README.md

@@ -0,0 +1,16 @@
+# Unset browser styles
+
+If you're not using @tailwind with preflighting, you'll need to override the browser's default styles using the `modern-normalize` package.
+Tailwind's preflighting is actually built on top of the `modern-normalize` package.
+
+## Install
+
+```sh
+npm i modern-normalize
+```
+
+## Usage
+
+```css
+@import 'node_modules/modern-normalize/modern-normalize.css';
+```

package/dist/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
-import { FormProps } from '../Form';
+import { FormProps } from '../Input';
 import { CalendarProps } from './Calendar';
 interface DatePickerProps extends Omit<CalendarProps, 'onChange'>, Omit<FormProps, 'value' | 'onChange' | 'rightElement'> {
     onChange?: (value: Date | null) => void;

package/dist/FormLabel/FormLabel.scss

@@ -0,0 +1,32 @@
+@use '../mixins.scss';
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+
+  &[data-fill] {
+    width: 100%;
+  }
+
+  &-label {
+    @include mixins.truncate-text();
+    @include mixins.use-styles(form-group, label);
+  }
+
+  &-caption {
+    @include mixins.truncate-text();
+    @include mixins.use-styles(form-group, caption);
+
+    &[data-appearance='neutral'] {
+      @include mixins.use-styles(form-group, caption, neutral);
+    }
+
+    &[data-appearance='positive'] {
+      @include mixins.use-styles(form-group, caption, positive);
+    }
+
+    &[data-appearance='negative'] {
+      @include mixins.use-styles(form-group, caption, negative);
+    }
+  }
+}

package/dist/FormLabel/index.d.ts

@@ -0,0 +1,10 @@
+interface FormLabelProps {
+    label: React.ReactNode;
+    children: React.ReactNode;
+    caption?: React.ReactNode;
+    apperance?: 'neutral' | 'positive' | 'negative';
+    fill?: boolean;
+    className?: string;
+}
+export declare const FormGroup: (props: FormLabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/{Form → Input}/index.d.ts

@@ -14,4 +14,4 @@ export interface FormProps extends React.HTMLAttributes<HTMLDivElement> {
     mask?: string;
     maskChar?: string;
 }
-export declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Input: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/NumberInput/index.d.ts

@@ -1,4 +1,4 @@
-import { FormProps } from '../Form';
+import { FormProps } from '../Input';
 export interface NumberInputProps extends Omit<FormProps, 'value' | 'onChange'> {
     value: number | null;
     onChange: (value: number | null) => void;

package/dist/Select/index.d.ts

@@ -1,4 +1,4 @@
-import { FormProps } from '../Form';
+import { FormProps } from '../Input';
 import { Option } from '../types';
 interface SelectProps<T> extends Omit<FormProps, 'value' | 'onChange' | 'rightElement'> {
     options: Option<T>[];

package/dist/bundle.es.js

@@ -5,15 +5,15 @@ import { ImitateScroll as a } from "./bundle.es5.js";
 import { Popover as i } from "./bundle.es6.js";
 import { Tooltip as c } from "./bundle.es7.js";
 import { Select as S } from "./bundle.es8.js";
-import { Form as g } from "./bundle.es9.js";
+import { Input as g } from "./bundle.es9.js";
 import { OptionItem as b } from "./bundle.es10.js";
 import { NumberInput as D } from "./bundle.es11.js";
-import { OptionsList as w } from "./bundle.es12.js";
-import { ButtonGroup as I } from "./bundle.es13.js";
+import { OptionsList as d } from "./bundle.es12.js";
+import { ButtonGroup as B } from "./bundle.es13.js";
 import { Checkbox as O } from "./bundle.es14.js";
 import { Switch as k } from "./bundle.es15.js";
 import { Radio as C } from "./bundle.es16.js";
-import { Drawer as P } from "./bundle.es17.js";
+import { Drawer as y } from "./bundle.es17.js";
 import { Dialog as G } from "./bundle.es18.js";
 import { AlertDialog as R } from "./bundle.es19.js";
 import { LoadButton as q } from "./bundle.es20.js";
@@ -29,19 +29,19 @@ import { createToaster as eo } from "./bundle.es29.js";
 export {
   R as AlertDialog,
   e as Button,
-  I as ButtonGroup,
+  B as ButtonGroup,
   O as Checkbox,
   J as Countdown,
   W as DatePicker,
   G as Dialog,
-  P as Drawer,
+  y as Drawer,
   Y as FileOverlay,
-  g as Form,
   a as ImitateScroll,
+  g as Input,
   q as LoadButton,
   D as NumberInput,
   b as OptionItem,
-  w as OptionsList,
+  d as OptionsList,
   i as Popover,
   C as Radio,
   x as Scrollable,

package/dist/bundle.es11.js

@@ -1,15 +1,15 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useState as m, useRef as p } from "react";
-import { Form as l } from "./bundle.es9.js";
+import { useState as p, useRef as m } from "react";
+import { Input as l } from "./bundle.es9.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(
+  const [, t] = p([]), n = m(i(r));
+  return +n.current !== r && (n.current = i(r)), /* @__PURE__ */ f(
     l,
     {
       ...e,
       value: n.current,
-      onChange: (i) => {
-        const s = i.currentTarget.value.trim();
+      onChange: (o) => {
+        const s = o.currentTarget.value.trim();
         if (s === "")
           return n.current = "", u(null);
         if (!(s.startsWith(".") || s.replace(".", "").split("").some((c) => isNaN(parseInt(c))))) {
@@ -20,7 +20,7 @@ const N = ({ value: r, onChange: u, ...e }) => {
       }
     }
   );
-}, o = (r) => r === null ? "" : r.toString(), a = (r) => {
+}, i = (r) => r === null ? "" : r.toString(), a = (r) => {
   const u = [...r], e = [...r];
   if (e.every((t) => t === "0"))
     return "0";

package/dist/bundle.es25.js

@@ -1,19 +1,19 @@
 import { jsx as l, jsxs as O, Fragment as R } from "react/jsx-runtime";
 import { Popover as z } from "./bundle.es6.js";
-import { Form as Y } from "./bundle.es9.js";
+import { Input as Y } from "./bundle.es9.js";
 import { faClose as E, faChevronDown as S } from "@fortawesome/free-solid-svg-icons";
-import { Icon as F } from "./bundle.es34.js";
+import { Icon as k } from "./bundle.es34.js";
 import { useState as _, useRef as q } from "react";
 import { Calendar as G } from "./bundle.es38.js";
 import { useDayDisableCheker as H } from "./bundle.es39.js";
-import { formatTime as I, getNum as d } from "@companix/utils-js";
+import { formatTime as y, getNum as d } from "@companix/utils-js";
 const h = (t, i = "-") => {
   if (t) {
-    const n = I(t.getDate()), r = I(t.getMonth() + 1), s = t.getFullYear();
+    const n = y(t.getDate()), r = y(t.getMonth() + 1), s = t.getFullYear();
     return [n, r, s].join(i);
   }
   return "";
-}, y = (t, i = "-") => {
+}, F = (t, i = "-") => {
   const n = t.split(i);
   if (n.length === 3) {
     const [r, s, a] = [d(n[0]), d(n[1]), d(n[2])];
@@ -45,7 +45,7 @@ const h = (t, i = "-") => {
     maxDateTime: x,
     // input props
     ...T
-  } = t, [m, c] = _(() => h(o ?? null)), p = q(null), k = H({
+  } = t, [m, c] = _(() => h(o ?? null)), p = q(null), I = H({
     disableFuture: C,
     disablePast: D,
     shouldDisableDate: g,
@@ -57,11 +57,11 @@ const h = (t, i = "-") => {
     e.stopPropagation(), c(""), u?.(null);
   }, V = (e) => {
     c(e);
-    const f = y(e);
-    f && !k(f) && u?.(f);
+    const f = F(e);
+    f && !I(f) && u?.(f);
   }, j = () => {
-    const e = y(m);
-    (!e || k(e)) && c(h(o ?? null));
+    const e = F(m);
+    (!e || I(e)) && c(h(o ?? null));
   }, M = (e) => {
     u?.(e), c(h(e));
   };
@@ -101,8 +101,8 @@ const h = (t, i = "-") => {
           onBlur: j,
           mask: "99-99-9999",
           rightElement: /* @__PURE__ */ O(R, { children: [
-            n && J(m) && /* @__PURE__ */ l("button", { className: "select-close-button", onClick: B, children: r ?? /* @__PURE__ */ l(F, { className: "select-close-icon", icon: E, size: "xxxs" }) }),
-            /* @__PURE__ */ l(F, { className: "expand-icon select-expand", icon: S, size: "xxxs" })
+            n && J(m) && /* @__PURE__ */ l("button", { className: "select-close-button", onClick: B, children: r ?? /* @__PURE__ */ l(k, { className: "select-close-icon", icon: E, size: "xxxs" }) }),
+            /* @__PURE__ */ l(k, { className: "expand-icon select-expand", icon: S, size: "xxxs" })
           ] })
         }
       )

package/dist/bundle.es38.js

@@ -1,7 +1,7 @@
 import { jsxs as D, jsx as t } from "react/jsx-runtime";
-import { dateToFormat as $, weeks as g, createVoids as p, getDayIndex as b, getFirstDay as u, getMonthMaxDay as k } from "./bundle.es43.js";
-import { CalendarHeader as F } from "./bundle.es44.js";
-import { useCalendar as j } from "./bundle.es45.js";
+import { dateToFormat as $, weeks as g, createVoids as p, getDayIndex as b, getFirstDay as u, getMonthMaxDay as k } from "./bundle.es42.js";
+import { CalendarHeader as F } from "./bundle.es43.js";
+import { useCalendar as j } from "./bundle.es44.js";
 import { attr as m } from "@companix/utils-browser";
 import { isSameDate as f } from "./bundle.es39.js";
 import { useLayoutEffect as I } from "react";

package/dist/bundle.es41.js

@@ -2,7 +2,7 @@ import { jsxs as T, jsx as $ } from "react/jsx-runtime";
 import { forwardRef as b, useState as I, useMemo as P, useImperativeHandle as R, useCallback as j, createElement as k } from "react";
 import * as c from "@radix-ui/react-toast";
 import { varToStyle as w } from "@companix/utils-browser";
-import { Toast as C } from "./bundle.es42.js";
+import { Toast as C } from "./bundle.es45.js";
 var g = /* @__PURE__ */ ((e) => (e["top-center"] = "up", e["top-left"] = "left", e["top-right"] = "right", e["bottom-center"] = "down", e["bottom-left"] = "left", e["bottom-right"] = "right", e))(g || {});
 const M = b((e, h) => {
   const { side: f = "top", align: i = "center", gap: m = 14, duration: u, swipeThreshold: v, closeIcon: x } = e, [l, p] = I([]), o = P(() => ({}), []);

package/dist/bundle.es42.js

@@ -1,45 +1,33 @@
-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.es35.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" }) }) })
-      ]
-    }
-  );
+import { clamp as a } from "@companix/utils-browser";
+const D = (t, e) => new Date(e, t, 0).getDate(), g = (t, e) => new Date(e, t - 1, 1).getDay(), i = (t) => t === 0 ? 6 : t - 1, u = (t) => new Array(t).fill(0), h = (t) => ({
+  day: t.getDate(),
+  month: t.getMonth() + 1,
+  year: t.getFullYear()
+}), y = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"], s = 9999, c = 100, f = (t, e) => {
+  const o = [], n = a(t - e, c, s), l = a(t + e, c, s);
+  for (let r = n; r <= l; r++)
+    o.push({ title: String(r).padStart(4, "0"), value: r });
+  return o;
+}, p = (t) => {
+  const e = [], o = new Intl.DateTimeFormat(t, {
+    month: "long"
+  });
+  for (let n = 0; n < 12; n++)
+    e.push({
+      title: o.format(new Date(2023, n, 15)),
+      value: n
+    });
+  return e;
 };
 export {
-  E as Toast
+  s as DEFAULT_MAX_YEAR,
+  c as DEFAULT_MIN_YEAR,
+  u as createVoids,
+  h as dateToFormat,
+  i as getDayIndex,
+  g as getFirstDay,
+  D as getMonthMaxDay,
+  p as getMonths,
+  f as getYears,
+  y as weeks
 };

package/dist/bundle.es43.js

@@ -1,33 +1,77 @@
-import { clamp as a } from "@companix/utils-browser";
-const D = (t, e) => new Date(e, t, 0).getDate(), g = (t, e) => new Date(e, t - 1, 1).getDay(), i = (t) => t === 0 ? 6 : t - 1, u = (t) => new Array(t).fill(0), h = (t) => ({
-  day: t.getDate(),
-  month: t.getMonth() + 1,
-  year: t.getFullYear()
-}), y = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"], s = 9999, c = 100, f = (t, e) => {
-  const o = [], n = a(t - e, c, s), l = a(t + e, c, s);
-  for (let r = n; r <= l; r++)
-    o.push({ title: String(r).padStart(4, "0"), value: r });
-  return o;
-}, p = (t) => {
-  const e = [], o = new Intl.DateTimeFormat(t, {
-    month: "long"
-  });
-  for (let n = 0; n < 12; n++)
-    e.push({
-      title: o.format(new Date(2023, n, 15)),
-      value: n
-    });
-  return e;
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { useCallback as u, useMemo as h } from "react";
+import { Select as p } from "./bundle.es8.js";
+import { getMonths as k, getYears as z, DEFAULT_MAX_YEAR as f, DEFAULT_MIN_YEAR as g } from "./bundle.es42.js";
+import { Icon as C } from "./bundle.es34.js";
+import { faChevronLeft as E, faChevronRight as T } from "@fortawesome/free-solid-svg-icons";
+import { setMonth as _, setYear as F } from "./bundle.es39.js";
+const y = ({
+  viewDate: n,
+  onChange: c,
+  isMonthDisabled: a,
+  isYearDisabled: m,
+  onNextMonth: N,
+  onPrevMonth: v
+}) => {
+  const e = n.getFullYear(), r = n.getMonth(), s = "ru", M = u(
+    (t) => {
+      c(_(n, t));
+    },
+    [c, n]
+  ), x = u(
+    (t) => {
+      c(F(n, t));
+    },
+    [c, n]
+  ), A = h(() => k(s).map((t) => ({
+    ...t,
+    className: "capitalize",
+    disabled: a && a(t.value)
+  })), [s, a]), Y = h(() => z(e, 100).map((t) => ({
+    ...t,
+    disabled: m && m(t.value)
+  })), [e, m]);
+  let l = r === 11 && e === f;
+  a && !l && (l = a(
+    r === 11 ? 0 : r + 1,
+    r === 11 ? Math.min(e + 1, f) : e
+  ));
+  let i = r === 0 && e === g;
+  return a && !i && (i = a(
+    r === 0 ? 11 : r - 1,
+    r === 0 ? Math.max(e - 1, g) : e
+  )), /* @__PURE__ */ d("div", { className: "calendar-header", children: [
+    !i && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "left", onClick: v, children: /* @__PURE__ */ o(C, { icon: E }) }),
+    /* @__PURE__ */ d("div", { className: "calendar-pickers", children: [
+      /* @__PURE__ */ o(
+        p,
+        {
+          fill: !0,
+          options: Y,
+          size: "sm",
+          value: e,
+          minimalOptions: !0,
+          matchTarget: "min-width",
+          onChange: (t) => x(t || 0)
+        }
+      ),
+      /* @__PURE__ */ o(
+        p,
+        {
+          fill: !0,
+          options: A,
+          size: "sm",
+          className: "capitalize",
+          value: r,
+          minimalOptions: !0,
+          matchTarget: "min-width",
+          onChange: (t) => M(t || 0)
+        }
+      )
+    ] }),
+    !l && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "right", onClick: N, children: /* @__PURE__ */ o(C, { icon: T }) })
+  ] });
 };
 export {
-  s as DEFAULT_MAX_YEAR,
-  c as DEFAULT_MIN_YEAR,
-  u as createVoids,
-  h as dateToFormat,
-  i as getDayIndex,
-  g as getFirstDay,
-  D as getMonthMaxDay,
-  p as getMonths,
-  f as getYears,
-  y as weeks
+  y as CalendarHeader
 };

package/dist/bundle.es44.js

@@ -1,77 +1,51 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { useCallback as u, useMemo as h } from "react";
-import { Select as p } from "./bundle.es8.js";
-import { getMonths as k, getYears as z, DEFAULT_MAX_YEAR as f, DEFAULT_MIN_YEAR as g } from "./bundle.es43.js";
-import { Icon as C } from "./bundle.es34.js";
-import { faChevronLeft as E, faChevronRight as T } from "@fortawesome/free-solid-svg-icons";
-import { setMonth as _, setYear as F } from "./bundle.es39.js";
-const y = ({
-  viewDate: n,
-  onChange: c,
-  isMonthDisabled: a,
-  isYearDisabled: m,
-  onNextMonth: N,
-  onPrevMonth: v
+import { subMonths as L, addMonths as N, useDayDisableCheker as R } from "./bundle.es39.js";
+import { DEFAULT_MIN_YEAR as w, DEFAULT_MAX_YEAR as A } from "./bundle.es42.js";
+import { useState as U, useCallback as M } from "react";
+const X = ({
+  value: p,
+  disablePast: r,
+  disableFuture: c,
+  shouldDisableDate: E,
+  minDateTime: l,
+  maxDateTime: s
 }) => {
-  const e = n.getFullYear(), r = n.getMonth(), s = "ru", M = u(
-    (t) => {
-      c(_(n, t));
+  const [e, u] = U(p || /* @__PURE__ */ new Date()), _ = M(() => {
+    u(L(e));
+  }, [e]), C = M(() => {
+    u(N(e, 1));
+  }, [e]), D = R({
+    disableFuture: c,
+    disablePast: r,
+    shouldDisableDate: E,
+    minDateTime: l,
+    maxDateTime: s
+  }), k = M(
+    (o, t) => {
+      const n = /* @__PURE__ */ new Date();
+      t = t || e.getFullYear();
+      const h = l ? l.getMonth() : 0, Y = s ? s.getMonth() : 11, F = l?.getFullYear() || w, f = s?.getFullYear() || A;
+      let g = t >= F && t <= f ? t === F && h > o || t === f && o > Y : !0;
+      return c && (g = g || (t === n.getFullYear() ? o > n.getMonth() : t > n.getFullYear())), r && (g = g || (t === n.getFullYear() ? o < n.getMonth() : t < n.getFullYear())), g;
     },
-    [c, n]
-  ), x = u(
-    (t) => {
-      c(F(n, t));
+    [c, r, e, l, s]
+  ), v = M(
+    (o) => {
+      const t = /* @__PURE__ */ new Date(), n = l?.getFullYear() || w, h = s?.getFullYear() || A;
+      let Y = n > o || o > h;
+      return c && (Y = Y || o > t.getFullYear()), r && (Y = Y || o < t.getFullYear()), Y;
     },
-    [c, n]
-  ), A = h(() => k(s).map((t) => ({
-    ...t,
-    className: "capitalize",
-    disabled: a && a(t.value)
-  })), [s, a]), Y = h(() => z(e, 100).map((t) => ({
-    ...t,
-    disabled: m && m(t.value)
-  })), [e, m]);
-  let l = r === 11 && e === f;
-  a && !l && (l = a(
-    r === 11 ? 0 : r + 1,
-    r === 11 ? Math.min(e + 1, f) : e
-  ));
-  let i = r === 0 && e === g;
-  return a && !i && (i = a(
-    r === 0 ? 11 : r - 1,
-    r === 0 ? Math.max(e - 1, g) : e
-  )), /* @__PURE__ */ d("div", { className: "calendar-header", children: [
-    !i && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "left", onClick: v, children: /* @__PURE__ */ o(C, { icon: E }) }),
-    /* @__PURE__ */ d("div", { className: "calendar-pickers", children: [
-      /* @__PURE__ */ o(
-        p,
-        {
-          fill: !0,
-          options: Y,
-          size: "sm",
-          value: e,
-          minimalOptions: !0,
-          matchTarget: "min-width",
-          onChange: (t) => x(t || 0)
-        }
-      ),
-      /* @__PURE__ */ o(
-        p,
-        {
-          fill: !0,
-          options: A,
-          size: "sm",
-          className: "capitalize",
-          value: r,
-          minimalOptions: !0,
-          matchTarget: "min-width",
-          onChange: (t) => M(t || 0)
-        }
-      )
-    ] }),
-    !l && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "right", onClick: N, children: /* @__PURE__ */ o(C, { icon: T }) })
-  ] });
+    [c, r, l, s]
+  );
+  return {
+    viewDate: e,
+    setViewDate: u,
+    setPrevMonth: _,
+    setNextMonth: C,
+    isDayDisabled: D,
+    isMonthDisabled: k,
+    isYearDisabled: v
+  };
 };
 export {
-  y as CalendarHeader
+  X as useCalendar
 };

package/dist/bundle.es45.js

@@ -1,51 +1,45 @@
-import { subMonths as L, addMonths as N, useDayDisableCheker as R } from "./bundle.es39.js";
-import { DEFAULT_MIN_YEAR as w, DEFAULT_MAX_YEAR as A } from "./bundle.es43.js";
-import { useState as U, useCallback as M } from "react";
-const X = ({
-  value: p,
-  disablePast: r,
-  disableFuture: c,
-  shouldDisableDate: E,
-  minDateTime: l,
-  maxDateTime: s
-}) => {
-  const [e, u] = U(p || /* @__PURE__ */ new Date()), _ = M(() => {
-    u(L(e));
-  }, [e]), C = M(() => {
-    u(N(e, 1));
-  }, [e]), D = R({
-    disableFuture: c,
-    disablePast: r,
-    shouldDisableDate: E,
-    minDateTime: l,
-    maxDateTime: s
-  }), k = M(
-    (o, t) => {
-      const n = /* @__PURE__ */ new Date();
-      t = t || e.getFullYear();
-      const h = l ? l.getMonth() : 0, Y = s ? s.getMonth() : 11, F = l?.getFullYear() || w, f = s?.getFullYear() || A;
-      let g = t >= F && t <= f ? t === F && h > o || t === f && o > Y : !0;
-      return c && (g = g || (t === n.getFullYear() ? o > n.getMonth() : t > n.getFullYear())), r && (g = g || (t === n.getFullYear() ? o < n.getMonth() : t < n.getFullYear())), g;
-    },
-    [c, r, e, l, s]
-  ), v = M(
-    (o) => {
-      const t = /* @__PURE__ */ new Date(), n = l?.getFullYear() || w, h = s?.getFullYear() || A;
-      let Y = n > o || o > h;
-      return c && (Y = Y || o > t.getFullYear()), r && (Y = Y || o < t.getFullYear()), Y;
-    },
-    [c, r, l, s]
+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.es35.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" }) }) })
+      ]
+    }
   );
-  return {
-    viewDate: e,
-    setViewDate: u,
-    setPrevMonth: _,
-    setNextMonth: C,
-    isDayDisabled: D,
-    isMonthDisabled: k,
-    isYearDisabled: v
-  };
 };
 export {
-  X as useCalendar
+  E as Toast
 };

package/dist/bundle.es9.js

@@ -1,21 +1,21 @@
-import { jsxs as z, jsx as r } from "react/jsx-runtime";
+import { jsxs as z, jsx as n } from "react/jsx-runtime";
 import A from "classnames";
-import F from "react-input-mask";
-import { useLayoutAndUpdate as M } from "./bundle.es33.js";
+import M from "react-input-mask";
+import { useLayoutAndUpdate as U } from "./bundle.es33.js";
 import { attr as c } from "@companix/utils-browser";
-import { forwardRef as R, useRef as m, useCallback as g } from "react";
-import { mergeRefs as U } from "react-merge-refs";
+import { forwardRef as R, useRef as l, useCallback as g } from "react";
+import { mergeRefs as v } from "react-merge-refs";
 const Q = R(
   ({
-    required: n,
-    size: f,
+    required: r,
+    size: u,
     fill: a,
     leftElement: e,
-    rightElement: u,
+    rightElement: f,
     onChange: x,
     onValueChange: $,
-    readOnly: b,
-    className: I,
+    readOnly: I,
+    className: b,
     value: N,
     placeholder: W,
     disabled: p,
@@ -24,15 +24,15 @@ const Q = R(
     inputRef: L,
     ...j
   }, k) => {
-    const s = m(null), l = m(null), d = m(null), q = { Right: l, Left: d }, h = g((t) => {
+    const s = l(null), m = l(null), d = l(null), q = { Right: m, Left: d }, h = g((t) => {
       if (s.current) {
         const i = s.current.style, o = q[t];
         o.current && o.current.clientWidth ? i[`padding${t}`] !== `${o.current.clientWidth}px` && (i[`padding${t}`] = `${o.current.clientWidth}px`) : i[`padding${t}`] && (i[`padding${t}`] = "");
       }
     }, []);
-    M(() => {
+    U(() => {
       h("Left"), h("Right");
-    }, [u, e]);
+    }, [f, e]);
     const w = g((t) => {
       x?.(t), $?.(t.target.value, t.target);
     }, []);
@@ -40,36 +40,38 @@ const Q = R(
       "div",
       {
         ref: k,
-        className: A("form", I),
-        "data-size": f ?? "md",
+        className: A("form", b),
+        "data-size": u ?? "md",
         "data-fill": c(a),
-        "data-required": c(n),
+        "data-required": c(r),
         "data-disabled": c(p),
         ...j,
         children: [
-          e && /* @__PURE__ */ r("span", { ref: d, className: "form-input-base-left-element", children: e }),
-          /* @__PURE__ */ r(
-            v,
+          e && /* @__PURE__ */ n("span", { ref: d, className: "form-input-base-left-element", children: e }),
+          /* @__PURE__ */ n(
+            B,
             {
               type: "text",
-              ref: U([s, L]),
+              ref: v([s, L]),
               className: "form-input form-input-base",
               "aria-disabled": p,
               onChange: w,
               value: N,
               placeholder: W,
               disabled: p,
-              readOnly: b,
+              readOnly: I,
               maskChar: C,
               mask: y
             }
           ),
-          u && /* @__PURE__ */ r("span", { ref: l, className: "form-input-base-right-element", children: u })
+          f && /* @__PURE__ */ n("span", { ref: m, className: "form-input-base-right-element", children: f })
         ]
       }
     );
   }
-), v = R(({ mask: n, maskChar: f, ...a }, e) => n ? /* @__PURE__ */ r(F, { inputRef: e, mask: n, maskChar: f, ...a }) : /* @__PURE__ */ r("input", { ref: e, ...a }));
+), B = R(
+  ({ mask: r, maskChar: u, ...a }, e) => r ? /* @__PURE__ */ n(M, { inputRef: e, mask: r, maskChar: u, ...a }) : /* @__PURE__ */ n("input", { ref: e, ...a })
+);
 export {
-  Q as Form
+  Q as Input
 };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { ImitateScroll } from './Scrollable/ImitateScroll';
 export { Popover } from './Popover';
 export { Tooltip } from './Tooltip';
 export { Select } from './Select';
-export { Form } from './Form';
+export { Input } from './Input';
 export { OptionItem } from './OptionItem/OptionItem';
 export { NumberInput } from './NumberInput';
 export { OptionsList } from './OptionItem/OptionsList';

package/dist/index.scss

@@ -10,7 +10,6 @@
 @use './Dialog/Dialog.scss';
 @use './DialogAlert/Alert.scss';
 @use './Drawer/Drawer.scss';
-@use './Form/Form.scss';
 @use './Select/Select.scss';
 @use './TextArea/TextArea.scss';
 @use './SelectTags/SelectTags.scss';
@@ -18,8 +17,10 @@
 @use './DateInput/DateInput.scss';
 @use './DatePicker/DatePicker.scss';
 @use './DatePicker/Calendar.scss';
-@use './Form/Input.scss';
+@use './Input/Input.scss';
+@use './Input/Form.scss';
 @use './Switch/Switch.scss';
 @use './Spinner/Spinner.scss';
 @use './ButtonGroup/ButtonGroup.scss';
 @use './Scrollable/Scrollable.scss';
+@use './FormLabel/FormLabel.scss';

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.09",
+  "version": "0.0.11",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "author": "Pavel Victorov",
   "scripts": {

package/dist/normalize.css

@@ -1,376 +0,0 @@
-/*
-  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-  2. Remove default margins and padding
-  3. Reset all borders.
-*/
-
-:root {
-  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-    monospace;
-}
-
-*,
-::after,
-::before,
-::backdrop,
-::file-selector-button {
-  box-sizing: border-box; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 2 */
-  border: 0 solid; /* 3 */
-}
-
-/*
-  1. Use a consistent sensible line-height in all browsers.
-  2. Prevent adjustments of font size after orientation changes in iOS.
-  3. Use a more readable tab size.
-  4. Use the user's configured `sans` font-family by default.
-  5. Use the user's configured `sans` font-feature-settings by default.
-  6. Use the user's configured `sans` font-variation-settings by default.
-  7. Disable tap highlights on iOS.
-*/
-
-html,
-:host {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  tab-size: 4; /* 3 */
-  font-family: var(--font-sans);
-  -webkit-tap-highlight-color: transparent; /* 7 */
-}
-
-/*
-  1. Add the correct height in Firefox.
-  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-  3. Reset the default border style to a 1px solid border.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-  Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-
-/*
-  Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-  Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  -webkit-text-decoration: inherit;
-  text-decoration: inherit;
-}
-
-/*
-  Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-  1. Use the user's configured `mono` font-family by default.
-  2. Use the user's configured `mono` font-feature-settings by default.
-  3. Use the user's configured `mono` font-variation-settings by default.
-  4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--font-mono);
-}
-
-/*
-  Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-  3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-  Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-  Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-  Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-  Make lists unstyled by default.
-*/
-
-ol,
-ul,
-menu {
-  list-style: none;
-}
-
-/*
-  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-      This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/*
-  1. Inherit font styles in all browsers.
-  2. Remove border radius in all browsers.
-  3. Remove background color in all browsers.
-  4. Ensure consistent opacity for disabled states in all browsers.
-*/
-
-button,
-input,
-select,
-optgroup,
-textarea,
-::file-selector-button {
-  font: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  border-radius: 0; /* 2 */
-  background-color: transparent; /* 3 */
-  opacity: 1; /* 4 */
-}
-
-/*
-  Restore default font weight.
-*/
-
-:where(select:is([multiple], [size])) optgroup {
-  font-weight: bolder;
-}
-
-/*
-  Restore indentation.
-*/
-
-:where(select:is([multiple], [size])) optgroup option {
-  padding-inline-start: 20px;
-}
-
-/*
-  Restore space after button.
-*/
-
-::file-selector-button {
-  margin-inline-end: 4px;
-}
-
-/*
-  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-*/
-
-::placeholder {
-  opacity: 1;
-}
-
-/*
-  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
-  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
-*/
-
-@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
-  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
-  ::placeholder {
-    color: color-mix(in oklab, currentcolor 50%, transparent);
-  }
-}
-
-/*
-  Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-  Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-  1. Ensure date/time inputs have the same height when empty in iOS Safari.
-  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
-*/
-
-::-webkit-date-and-time-value {
-  min-height: 1lh; /* 1 */
-  text-align: inherit; /* 2 */
-}
-
-/*
-  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
-*/
-
-::-webkit-datetime-edit {
-  display: inline-flex;
-}
-
-/*
-  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
-*/
-
-::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-
-::-webkit-datetime-edit,
-::-webkit-datetime-edit-year-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-minute-field,
-::-webkit-datetime-edit-second-field,
-::-webkit-datetime-edit-millisecond-field,
-::-webkit-datetime-edit-meridiem-field {
-  padding-block: 0;
-}
-
-/*
-  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
-*/
-
-::-webkit-calendar-picker-indicator {
-  line-height: 1;
-}
-
-/*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-  Correct the inability to style the border radius in iOS Safari.
-*/
-
-button,
-input:where([type='button'], [type='reset'], [type='submit']),
-::file-selector-button {
-  appearance: button;
-}
-
-/*
-  Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-  Make elements with the HTML hidden attribute stay hidden by default.
-*/
-
-[hidden]:where(:not([hidden='until-found'])) {
-  display: none !important;
-}