@companix/uikit 0.1.13 → 0.1.14

package/dist/__hooks/use-local-storage.d.ts

@@ -1 +1,13 @@
-export declare const useLocalStorage: <T>(token: string, defaultValue: T) => [T, React.Dispatch<React.SetStateAction<T>>];
+import { EventEmmiter } from '@companix/utils-js';
+export declare class LocalStorageService<T> {
+    emmiter: EventEmmiter<T>;
+    constructor(emmiter: EventEmmiter<T>);
+    getStorageValue(token: string, defaultValue: T): any;
+    setValue(token: string, value: T): void;
+}
+export declare const useLocalStorage: <T>(token: string, defaultValue: T) => readonly [T, (value: T) => void];
+interface LocalStorageProviderProps {
+    children: React.ReactNode;
+}
+export declare const LocalStorageProvider: ({ children }: LocalStorageProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/bundle.es.js

@@ -6,14 +6,14 @@ import { ButtonGroup as l } from "./bundle.es6.js";
 import { Spinner as S } from "./bundle.es7.js";
 import { Scrollable as g } from "./bundle.es8.js";
 import { ImitateScroll as d } from "./bundle.es9.js";
-import { Segments as B } from "./bundle.es10.js";
+import { Segments as P } from "./bundle.es10.js";
 import { Popover as y } from "./bundle.es11.js";
 import { Tooltip as T } from "./bundle.es12.js";
-import { Select as b } from "./bundle.es13.js";
+import { Select as v } from "./bundle.es13.js";
 import { SelectTags as A } from "./bundle.es14.js";
 import { Input as R } from "./bundle.es15.js";
-import { OptionItem as w } from "./bundle.es16.js";
-import { NumberInput as L } from "./bundle.es17.js";
+import { OptionItem as L } from "./bundle.es16.js";
+import { NumberInput as C } from "./bundle.es17.js";
 import { OptionsList as F } from "./bundle.es18.js";
 import { Checkbox as G } from "./bundle.es19.js";
 import { Switch as E } from "./bundle.es20.js";
@@ -33,28 +33,28 @@ import { FormGroup as ce } from "./bundle.es33.js";
 import { TimePicker as ue } from "./bundle.es34.js";
 import { Icon as De } from "./bundle.es35.js";
 import { ProgressBar as he } from "./bundle.es36.js";
-import { Skeleton as Pe } from "./bundle.es37.js";
+import { Skeleton as Be } from "./bundle.es37.js";
 import { Blank as Ie } from "./bundle.es38.js";
 import { ProgressRing as ke } from "./bundle.es39.js";
-import { WriteBar as ve } from "./bundle.es40.js";
+import { WriteBar as be } from "./bundle.es40.js";
 import { Editor as Oe } from "./bundle.es41.js";
-import { DropArea as ze, DropAreaProvider as we, useDragEnter as Ce } from "./bundle.es42.js";
+import { DropArea as ze, DropAreaProvider as Le, useDragEnter as we } from "./bundle.es42.js";
 import { Table as Me } from "./bundle.es43.js";
 import { ThemeProvider as Ne, useTheme as Ge } from "./bundle.es44.js";
 import { ColorSchemeScript as Ee, colorSchemeScript as Ye } from "./bundle.es45.js";
-import { useLocalStorage as qe } from "./bundle.es46.js";
-import { useBooleanState as Je } from "./bundle.es47.js";
-import { useResizeTextarea as Qe } from "./bundle.es48.js";
-import { useLoading as Ve } from "./bundle.es49.js";
-import { NowContextProvider as Ze, useNow as _e } from "./bundle.es50.js";
-import { createAlertAgent as er } from "./bundle.es51.js";
-import { createToaster as or } from "./bundle.es52.js";
-import { Toast as pr } from "./bundle.es53.js";
-import { DialogShell as ar, DrawerShell as xr, createPopupRegistry as fr, usePopup as ir } from "./bundle.es54.js";
-import { createPopoversRegistry as nr } from "./bundle.es55.js";
-import { createScope as cr, createStaticScope as Sr } from "./bundle.es56.js";
-import { RemoveListener as gr } from "./bundle.es57.js";
-import { MONDAY as dr, addMonths as hr, createDayDisableChecker as Br, endOfDay as Pr, endOfWeek as yr, isDayMinMaxRestricted as Ir, isSameDate as Tr, setMonth as kr, setYear as br, startOfDay as vr, startOfWeek as Ar, subMonths as Or, useDayDisableCheker as Rr } from "./bundle.es58.js";
+import { LocalStorageProvider as qe, useLocalStorage as He } from "./bundle.es46.js";
+import { useBooleanState as Ke } from "./bundle.es47.js";
+import { useResizeTextarea as Ue } from "./bundle.es48.js";
+import { useLoading as Xe } from "./bundle.es49.js";
+import { NowContextProvider as _e, useNow as $e } from "./bundle.es50.js";
+import { createAlertAgent as rr } from "./bundle.es51.js";
+import { createToaster as tr } from "./bundle.es52.js";
+import { Toast as mr } from "./bundle.es53.js";
+import { DialogShell as xr, DrawerShell as fr, createPopupRegistry as ir, usePopup as sr } from "./bundle.es54.js";
+import { createPopoversRegistry as lr } from "./bundle.es55.js";
+import { createScope as Sr, createStaticScope as ur } from "./bundle.es56.js";
+import { RemoveListener as Dr } from "./bundle.es57.js";
+import { MONDAY as hr, addMonths as Pr, createDayDisableChecker as Br, endOfDay as yr, endOfWeek as Ir, isDayMinMaxRestricted as Tr, isSameDate as kr, setMonth as vr, setYear as br, startOfDay as Ar, startOfWeek as Or, subMonths as Rr, useDayDisableCheker as zr } from "./bundle.es58.js";
 export {
   Z as AlertDialog,
   o as Avatar,
@@ -67,11 +67,11 @@ export {
   ie as DateInput,
   xe as DatePicker,
   Q as Dialog,
-  ar as DialogShell,
+  xr as DialogShell,
   J as Drawer,
-  xr as DrawerShell,
+  fr as DrawerShell,
   ze as DropArea,
-  we as DropAreaProvider,
+  Le as DropAreaProvider,
   Oe as Editor,
   ne as FileOverlay,
   ce as FormGroup,
@@ -79,10 +79,11 @@ export {
   d as ImitateScroll,
   R as Input,
   $ as LoadingButton,
-  dr as MONDAY,
-  Ze as NowContextProvider,
-  L as NumberInput,
-  w as OptionItem,
+  qe as LocalStorageProvider,
+  hr as MONDAY,
+  _e as NowContextProvider,
+  C as NumberInput,
+  L as OptionItem,
   F as OptionsList,
   y as Popover,
   V as PopupLayout,
@@ -90,12 +91,12 @@ export {
   ke as ProgressRing,
   j as Radio,
   q as RadioGroup,
-  gr as RemoveListener,
+  Dr as RemoveListener,
   g as Scrollable,
-  B as Segments,
-  b as Select,
+  P as Segments,
+  v as Select,
   A as SelectTags,
-  Pe as Skeleton,
+  Be as Skeleton,
   S as Spinner,
   E as Switch,
   Me as Table,
@@ -103,38 +104,38 @@ export {
   me as TextArea,
   Ne as ThemeProvider,
   ue as TimePicker,
-  pr as Toast,
+  mr as Toast,
   T as Tooltip,
-  ve as WriteBar,
-  hr as addMonths,
+  be as WriteBar,
+  Pr as addMonths,
   p as avatarSizes,
   Ye as colorSchemeScript,
-  er as createAlertAgent,
+  rr as createAlertAgent,
   Br as createDayDisableChecker,
-  nr as createPopoversRegistry,
-  fr as createPopupRegistry,
-  cr as createScope,
-  Sr as createStaticScope,
-  or as createToaster,
-  Pr as endOfDay,
-  yr as endOfWeek,
+  lr as createPopoversRegistry,
+  ir as createPopupRegistry,
+  Sr as createScope,
+  ur as createStaticScope,
+  tr as createToaster,
+  yr as endOfDay,
+  Ir as endOfWeek,
   a as getBadgeIconSizeByImageBaseSize,
   x as getFallbackIconSizeByImageBaseSize,
   f as getInitialsFontSize,
-  Ir as isDayMinMaxRestricted,
-  Tr as isSameDate,
-  kr as setMonth,
+  Tr as isDayMinMaxRestricted,
+  kr as isSameDate,
+  vr as setMonth,
   br as setYear,
-  vr as startOfDay,
-  Ar as startOfWeek,
-  Or as subMonths,
-  Je as useBooleanState,
-  Rr as useDayDisableCheker,
-  Ce as useDragEnter,
-  Ve as useLoading,
-  qe as useLocalStorage,
-  _e as useNow,
-  ir as usePopup,
-  Qe as useResizeTextarea,
+  Ar as startOfDay,
+  Or as startOfWeek,
+  Rr as subMonths,
+  Ke as useBooleanState,
+  zr as useDayDisableCheker,
+  we as useDragEnter,
+  Xe as useLoading,
+  He as useLocalStorage,
+  $e as useNow,
+  sr as usePopup,
+  Ue as useResizeTextarea,
   Ge as useTheme
 };

package/dist/bundle.es46.js

@@ -1,13 +1,52 @@
-import { useState as s, useEffect as c } from "react";
-const l = (e, a) => {
-  const [t, o] = s(() => {
+import { jsx as m } from "react/jsx-runtime";
+import { EventEmmiter as g } from "@companix/utils-js";
+import { useContext as S, createContext as l, useState as f, useEffect as n, useRef as w } from "react";
+const a = l({});
+class d {
+  constructor(e) {
+    this.emmiter = e;
+  }
+  getStorageValue(e, t) {
+    if (typeof window > "u")
+      return t;
     const r = localStorage.getItem(e);
-    return r ? JSON.parse(r) : a;
-  });
-  return c(() => {
-    localStorage.setItem(e, JSON.stringify(t));
-  }, [t]), [t, o];
+    return r ? JSON.parse(r) : t;
+  }
+  setValue(e, t) {
+    localStorage.setItem(e, JSON.stringify(t)), this.emmiter.emit(e, t);
+  }
+}
+const x = (o, e) => {
+  const t = S(a), [r, i] = f(() => t.getStorageValue(o, e));
+  n(() => {
+    i(t.getStorageValue(o, e));
+  }, [o]);
+  const c = (s) => {
+    t.setValue(o, s);
+  };
+  return n(() => {
+    const s = t.emmiter.subscribe(o, (u) => {
+      i(u);
+    });
+    return () => {
+      s();
+    };
+  }, [o]), [r, c];
+}, y = ({ children: o }) => {
+  const e = w(new d(new g()));
+  return n(() => {
+    if (!window || !e.current)
+      return;
+    const t = (r) => {
+      r.key && e.current.emmiter.store[r.key] && r.newValue && e.current.emmiter.emit(r.key, JSON.parse(r.newValue));
+    };
+    return window.addEventListener("storage", t), () => {
+      window.removeEventListener("storage", t);
+    };
+  }, []), /* @__PURE__ */ m(a.Provider, { value: e.current, children: o });
 };
 export {
-  l as useLocalStorage
+  y as LocalStorageProvider,
+  d as LocalStorageService,
+  x as useLocalStorage
 };

package/dist/bundle.es66.js

@@ -2,7 +2,7 @@ import { jsxs as b, jsx as o } from "react/jsx-runtime";
 import h from "classnames";
 import { attr as e } from "@companix/utils-browser";
 import { forwardRef as x } from "react";
-import { useInputPadding as N } from "./bundle.es78.js";
+import { useInputPadding as N } from "./bundle.es76.js";
 const v = x(
   ({
     required: s,

package/dist/bundle.es67.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.es64.js";
-import { CalendarHeader as F } from "./bundle.es76.js";
-import { useCalendar as j } from "./bundle.es77.js";
+import { CalendarHeader as F } from "./bundle.es77.js";
+import { useCalendar as j } from "./bundle.es78.js";
 import { attr as m } from "@companix/utils-browser";
 import { isSameDate as f } from "./bundle.es58.js";
 import { useLayoutEffect as I } from "react";

package/dist/bundle.es76.js

@@ -1,77 +1,16 @@
-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.es13.js";
-import { getMonths as k, getYears as z, DEFAULT_MAX_YEAR as f, DEFAULT_MIN_YEAR as g } from "./bundle.es64.js";
-import { Icon as C } from "./bundle.es35.js";
-import { faChevronLeft as E, faChevronRight as T } from "@companix/icons-solid";
-import { setMonth as _, setYear as F } from "./bundle.es58.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)
-        }
-      ),
-      /* @__PURE__ */ o(
-        p,
-        {
-          fill: !0,
-          options: A,
-          size: "sm",
-          className: "capitalize",
-          value: r,
-          minimalOptions: !0,
-          matchTarget: "min-width",
-          onChange: (t) => M(t)
-        }
-      )
-    ] }),
-    !l && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "right", onClick: N, children: /* @__PURE__ */ o(C, { icon: T }) })
-  ] });
+import { useRef as l, useCallback as p } from "react";
+import { useEffectWithLayout as d } from "./bundle.es79.js";
+const g = (r, f) => {
+  const c = l(null), i = l(null), o = { Right: c, Left: i }, u = p((t) => {
+    if (r.current) {
+      const n = r.current.style, e = o[t];
+      e.current && e.current.clientWidth ? n[`padding${t}`] !== `${e.current.clientWidth}px` && (n[`padding${t}`] = `${e.current.clientWidth}px`) : n[`padding${t}`] && (n[`padding${t}`] = "");
+    }
+  }, []);
+  return d(() => {
+    u("Left"), u("Right");
+  }, f), { rightRef: c, leftRef: i };
 };
 export {
-  y as CalendarHeader
+  g as useInputPadding
 };

package/dist/bundle.es77.js

@@ -1,51 +1,77 @@
-import { subMonths as L, addMonths as N, useDayDisableCheker as R } from "./bundle.es58.js";
-import { DEFAULT_MIN_YEAR as w, DEFAULT_MAX_YEAR as A } from "./bundle.es64.js";
-import { useState as U, useCallback as M } from "react";
-const X = ({
-  value: p,
-  disablePast: r,
-  disableFuture: c,
-  shouldDisableDate: E,
-  minDateTime: l,
-  maxDateTime: s
+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.es13.js";
+import { getMonths as k, getYears as z, DEFAULT_MAX_YEAR as f, DEFAULT_MIN_YEAR as g } from "./bundle.es64.js";
+import { Icon as C } from "./bundle.es35.js";
+import { faChevronLeft as E, faChevronRight as T } from "@companix/icons-solid";
+import { setMonth as _, setYear as F } from "./bundle.es58.js";
+const y = ({
+  viewDate: n,
+  onChange: c,
+  isMonthDisabled: a,
+  isYearDisabled: m,
+  onNextMonth: N,
+  onPrevMonth: v
 }) => {
-  const [e, u] = U(p || /* @__PURE__ */ new Date()), _ = M(() => {
-    u(L(e, 1));
-  }, [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;
+  const e = n.getFullYear(), r = n.getMonth(), s = "ru", M = u(
+    (t) => {
+      c(_(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]
+  ), x = u(
+    (t) => {
+      c(F(n, t));
     },
-    [c, r, l, s]
-  );
-  return {
-    viewDate: e,
-    setViewDate: u,
-    setPrevMonth: _,
-    setNextMonth: C,
-    isDayDisabled: D,
-    isMonthDisabled: k,
-    isYearDisabled: v
-  };
+    [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)
+        }
+      ),
+      /* @__PURE__ */ o(
+        p,
+        {
+          fill: !0,
+          options: A,
+          size: "sm",
+          className: "capitalize",
+          value: r,
+          minimalOptions: !0,
+          matchTarget: "min-width",
+          onChange: (t) => M(t)
+        }
+      )
+    ] }),
+    !l && /* @__PURE__ */ o("button", { className: "calendar-navigation", "data-side": "right", onClick: N, children: /* @__PURE__ */ o(C, { icon: T }) })
+  ] });
 };
 export {
-  X as useCalendar
+  y as CalendarHeader
 };

package/dist/bundle.es78.js

@@ -1,16 +1,51 @@
-import { useRef as l, useCallback as p } from "react";
-import { useEffectWithLayout as d } from "./bundle.es79.js";
-const g = (r, f) => {
-  const c = l(null), i = l(null), o = { Right: c, Left: i }, u = p((t) => {
-    if (r.current) {
-      const n = r.current.style, e = o[t];
-      e.current && e.current.clientWidth ? n[`padding${t}`] !== `${e.current.clientWidth}px` && (n[`padding${t}`] = `${e.current.clientWidth}px`) : n[`padding${t}`] && (n[`padding${t}`] = "");
-    }
-  }, []);
-  return d(() => {
-    u("Left"), u("Right");
-  }, f), { rightRef: c, leftRef: i };
+import { subMonths as L, addMonths as N, useDayDisableCheker as R } from "./bundle.es58.js";
+import { DEFAULT_MIN_YEAR as w, DEFAULT_MAX_YEAR as A } from "./bundle.es64.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, 1));
+  }, [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]
+  );
+  return {
+    viewDate: e,
+    setViewDate: u,
+    setPrevMonth: _,
+    setNextMonth: C,
+    isDayDisabled: D,
+    isMonthDisabled: k,
+    isYearDisabled: v
+  };
 };
 export {
-  g as useInputPadding
+  X as useCalendar
 };

package/dist/index.d.ts

@@ -81,7 +81,7 @@ export { Table } from './Table';
 export type { TableProps } from './Table';
 export { ThemeProvider, useTheme } from './ThemeProvider';
 export { ColorSchemeScript, colorSchemeScript } from './ThemeProvider/script';
-export { useLocalStorage } from './__hooks/use-local-storage';
+export { useLocalStorage, LocalStorageProvider } from './__hooks/use-local-storage';
 export { useBooleanState } from './__hooks/use-boolean-state';
 export { useResizeTextarea } from './__hooks/use-resize';
 export { useLoading } from './__hooks/use-loading';

package/package.json

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