@companix/uikit 0.0.23 → 0.0.25

package/dist/Button/index.d.ts

@@ -14,6 +14,7 @@ export interface InternButtonProps {
     text?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
+    Component?: React.ElementType;
 }
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, InternButtonProps {
 }

package/dist/File/index.d.ts

@@ -2,9 +2,9 @@ export interface FileOverlayProps {
     multiple?: true;
     onChange?: (file: File[]) => void;
     children: React.ReactNode;
-    mimes?: string[];
     disabled?: boolean;
     className?: string;
+    mimes?: ('image' | 'video' | 'audio' | 'text' | 'application')[];
 }
-declare const FileOverlay: ({ onChange, disabled, mimes, children, multiple, className }: FileOverlayProps) => import("react/jsx-runtime").JSX.Element;
+declare const FileOverlay: ({ onChange, disabled, children, multiple, mimes, className }: FileOverlayProps) => import("react/jsx-runtime").JSX.Element;
 export { FileOverlay };

package/dist/Progress/Progress.scss

@@ -0,0 +1,47 @@
+@use '../mixins.scss';
+
+.progress-bar {
+  @include mixins.use-styles(progress);
+
+  display: block;
+  overflow: hidden;
+  position: relative;
+  border-radius: 100px;
+  width: 100%;
+
+  &-thumb {
+    animation: linear-progress-bar-stripes 0.3s linear infinite reverse;
+    background: linear-gradient(
+      -45deg,
+      hsla(0, 0%, 100%, 0.2) 25%,
+      transparent 0,
+      transparent 50%,
+      hsla(0, 0%, 100%, 0.2) 0,
+      hsla(0, 0%, 100%, 0.2) 75%,
+      transparent 0
+    );
+    background-size: 30px 30px;
+    border-radius: 40px;
+    height: 100%;
+    position: absolute;
+    transition: width 0.2s cubic-bezier(0.4, 1, 0.75, 0.9);
+    width: 100%;
+
+    @include mixins.use-styles(progress, thumb);
+
+    @each $appearance, $v in mixins.$appearances {
+      &[data-appearance='#{$appearance}'] {
+        @include mixins.use-styles(progress, thumb, $appearance);
+      }
+    }
+  }
+}
+
+@keyframes linear-progress-bar-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 30px 0;
+  }
+}

package/dist/Progress/index.d.ts

@@ -0,0 +1,5 @@
+export interface ProgressBarProps {
+    appearance?: 'primary' | 'neutral' | 'positive' | 'negative';
+    value: number;
+}
+export declare const ProgressBar: ({ appearance, value }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Toaster/Toast.d.ts

@@ -1,9 +1,15 @@
 import { ToastOptions } from '.';
 interface ToastProps extends ToastOptions {
-    onRemoved: () => void;
-    onRemoving: () => void;
+    id: string;
+    onClosed: () => void;
+    onClosing: () => void;
     onInitialized: (ref: HTMLLIElement) => void;
-    closeIcon?: React.ReactNode;
 }
-export declare const Toast: (options: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: {
+    (options: ToastProps): import("react/jsx-runtime").JSX.Element;
+    Close({ closeIcon, className }?: {
+        closeIcon?: React.ReactNode;
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+};
 export {};

package/dist/Toaster/Toaster.scss

@@ -99,6 +99,7 @@
   &-content {
     display: flex;
     flex-direction: column;
+    width: 100%;
 
     @include mixins.use-styles(toaster, content);
   }
@@ -111,11 +112,14 @@
     @include mixins.use-styles(toaster, description);
   }
 
-  &-close {
-    cursor: pointer;
+  &-close-placement {
     top: var(--toaster_close_space, 0);
     right: var(--toaster_close_space, 0);
     position: absolute;
+  }
+
+  &-close {
+    cursor: pointer;
     transition: color 0.2s;
 
     @include mixins.use-styles(toaster, close);

package/dist/Toaster/Viewport.d.ts

@@ -9,5 +9,6 @@ export interface ViewportProps {
 }
 export interface ViewportRef {
     addToast: (toast: InnerToast) => void;
+    updateToast: (toast: InnerToast) => void;
 }
 export declare const Viewport: import('react').ForwardRefExoticComponent<ViewportProps & import('react').RefAttributes<ViewportRef>>;

package/dist/Toaster/index.d.ts

@@ -1,15 +1,21 @@
 import { ViewportProps } from './Viewport';
 export interface ToastOptions {
+    id?: string;
     appearance?: 'primary' | 'neutral' | 'positive' | 'negative' | 'warning';
     icon?: React.ReactNode;
     title?: React.ReactNode;
     description?: React.ReactNode;
     duration?: number;
+    closeIcon?: React.ReactNode;
+    closable?: boolean;
 }
 export interface InnerToast extends ToastOptions {
     id: string;
 }
 export declare const createToaster: (rootProps?: ViewportProps) => {
-    send: (toast: ToastOptions) => void;
+    api: {
+        add: (toast: ToastOptions) => string;
+        update: (toast: InnerToast) => void;
+    };
     Viewport: (props?: ViewportProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/bundle.es.js

@@ -4,14 +4,14 @@ import { Scrollable as x } from "./bundle.es4.js";
 import { ImitateScroll as a } from "./bundle.es5.js";
 import { Popover as l } from "./bundle.es6.js";
 import { Tooltip as c } from "./bundle.es7.js";
-import { Select as S } from "./bundle.es8.js";
-import { Input as I } from "./bundle.es9.js";
-import { OptionItem as g } from "./bundle.es10.js";
+import { Select as s } from "./bundle.es8.js";
+import { Input as T } from "./bundle.es9.js";
+import { OptionItem as I } from "./bundle.es10.js";
 import { NumberInput as b } from "./bundle.es11.js";
 import { OptionsList as A } from "./bundle.es12.js";
-import { ButtonGroup as w } from "./bundle.es13.js";
-import { Checkbox as G } from "./bundle.es14.js";
-import { Switch as O } from "./bundle.es15.js";
+import { ButtonGroup as P } from "./bundle.es13.js";
+import { Checkbox as w } from "./bundle.es14.js";
+import { Switch as L } from "./bundle.es15.js";
 import { Radio as h, RadioGroup as v } from "./bundle.es16.js";
 import { Drawer as F } from "./bundle.es17.js";
 import { Dialog as y } from "./bundle.es18.js";
@@ -27,14 +27,16 @@ import { FileOverlay as $ } from "./bundle.es27.js";
 import { FormGroup as ro } from "./bundle.es28.js";
 import { TimePicker as to } from "./bundle.es29.js";
 import { Icon as mo } from "./bundle.es30.js";
-import { useLocalStorage as fo } from "./bundle.es31.js";
-import { createAlertAgent as io } from "./bundle.es32.js";
-import { createToaster as no } from "./bundle.es33.js";
+import { ProgressBar as fo } from "./bundle.es31.js";
+import { useLocalStorage as io } from "./bundle.es32.js";
+import { createAlertAgent as no } from "./bundle.es33.js";
+import { createToaster as uo } from "./bundle.es34.js";
+import { Toast as So } from "./bundle.es35.js";
 export {
   j as AlertDialog,
   e as Button,
-  w as ButtonGroup,
-  G as Checkbox,
+  P as ButtonGroup,
+  w as Checkbox,
   K as Countdown,
   Z as DateInput,
   X as DatePicker,
@@ -44,24 +46,26 @@ export {
   ro as FormGroup,
   mo as Icon,
   a as ImitateScroll,
-  I as Input,
+  T as Input,
   z as LoadButton,
   b as NumberInput,
-  g as OptionItem,
+  I as OptionItem,
   A as OptionsList,
   l as Popover,
+  fo as ProgressBar,
   h as Radio,
   v as RadioGroup,
   x as Scrollable,
-  S as Select,
+  s as Select,
   V as SelectTags,
   p as Spinner,
-  O as Switch,
+  L as Switch,
   H as Tabs,
   Q as TextArea,
   to as TimePicker,
+  So as Toast,
   c as Tooltip,
-  io as createAlertAgent,
-  no as createToaster,
-  fo as useLocalStorage
+  no as createAlertAgent,
+  uo as createToaster,
+  io as useLocalStorage
 };

package/dist/bundle.es10.js

@@ -3,7 +3,7 @@ import N from "classnames";
 import { Icon as v } from "./bundle.es30.js";
 import { attr as t } from "@companix/utils-browser";
 import { forwardRef as k } from "react";
-import { f as x } from "./bundle.es40.js";
+import { f as x } from "./bundle.es42.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) => {

package/dist/bundle.es11.js

@@ -2,7 +2,7 @@ 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.es39.js";
+import { InputContainer as F } from "./bundle.es41.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es14.js

@@ -1,7 +1,7 @@
 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.es40.js";
+import { f as l } from "./bundle.es42.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 }) => {

package/dist/bundle.es19.js

@@ -1,7 +1,7 @@
 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.es41.js";
+import { RemoveListener as N } from "./bundle.es43.js";
 import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
 const C = ({
   open: d,

package/dist/bundle.es2.js

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

package/dist/bundle.es20.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Button as m } from "./bundle.es2.js";
-import { useLoading as p } from "./bundle.es42.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(

package/dist/bundle.es23.js

@@ -1,5 +1,5 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useResizeTextarea as x } from "./bundle.es43.js";
+import { useResizeTextarea as x } from "./bundle.es45.js";
 import { attr as e, callMultiple as u } from "@companix/utils-browser";
 import { useEffect as z } from "react";
 import { mergeRefs as R } from "react-merge-refs";

package/dist/bundle.es24.js

@@ -1,12 +1,12 @@
 import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import { useFroozeClosing as M } from "./bundle.es34.js";
+import { useFroozeClosing as M } from "./bundle.es36.js";
 import { Popover as j } from "./bundle.es6.js";
 import { OptionItem as q } from "./bundle.es10.js";
 import { OptionsList as V } from "./bundle.es12.js";
 import { Icon as d } from "./bundle.es30.js";
 import { useState as B, useRef as h, useMemo as g } from "react";
-import { f as H } from "./bundle.es44.js";
-import { f as Q } from "./bundle.es45.js";
+import { f as H } from "./bundle.es46.js";
+import { f as Q } from "./bundle.es47.js";
 import { attr as x, getActiveElementByAnotherElement as G, contains as J } from "@companix/utils-browser";
 import { mergeRefs as K } from "react-merge-refs";
 const se = (C) => {

package/dist/bundle.es25.js

@@ -2,11 +2,11 @@ import { jsx as u } from "react/jsx-runtime";
 import { Popover as x } from "./bundle.es6.js";
 import { Input as A } from "./bundle.es9.js";
 import { useState as M, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es46.js";
-import { useDayDisableCheker as N } from "./bundle.es47.js";
+import { Calendar as E } from "./bundle.es48.js";
+import { useDayDisableCheker as N } from "./bundle.es49.js";
 import { getNum as f, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es48.js";
-import { SelectRightElements as Y } from "./bundle.es49.js";
+import { removeDigits as O } from "./bundle.es50.js";
+import { SelectRightElements as Y } from "./bundle.es51.js";
 const i = {
   char: "-",
   toString: (e) => {

package/dist/bundle.es26.js

@@ -1,8 +1,8 @@
 import { jsxs as D, jsx as h } from "react/jsx-runtime";
 import { useMemo as M, useEffect as C } from "react";
 import { Select as c } from "./bundle.es8.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es48.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es50.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es50.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es52.js";
 const B = ({
   min: o = j,
   max: e = N,

package/dist/bundle.es27.js

@@ -1,38 +1,35 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { VisuallyHidden as s } from "@radix-ui/react-visually-hidden";
-import { useRef as p } from "react";
-const d = ({
-  onChange: n,
-  disabled: r,
-  mimes: l,
-  children: a,
-  multiple: i,
-  className: f
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { VisuallyHidden as p } from "@radix-ui/react-visually-hidden";
+import { useRef as h, useMemo as m } from "react";
+const j = ({
+  onChange: l,
+  disabled: n,
+  children: o,
+  multiple: f,
+  mimes: e,
+  className: a
 }) => {
-  const e = p(null), u = (t) => {
-    r || (t.target.files && n?.(Array.from(t.target.files)), e.current && (e.current.value = ""));
-  };
-  return /* @__PURE__ */ c("label", { className: f, children: [
-    a,
-    /* @__PURE__ */ o(s, { asChild: !0, children: /* @__PURE__ */ o(
+  const t = h(null), u = (r) => {
+    n || (r.target.files && l?.(Array.from(r.target.files)), t.current && (t.current.value = ""));
+  }, c = m(() => {
+    if (e)
+      return e.map((r) => `${r}/*`).join(",");
+  }, [e]);
+  return /* @__PURE__ */ s("label", { className: a, children: [
+    o,
+    /* @__PURE__ */ i(p, { asChild: !0, children: /* @__PURE__ */ i(
       "input",
       {
-        ref: e,
-        hidden: !0,
+        ref: t,
         type: "file",
-        autoComplete: "off",
-        autoCapitalize: "none",
-        autoCorrect: "off",
-        spellCheck: "false",
-        "aria-autocomplete": "none",
-        multiple: i,
-        accept: (l ?? []).join(", "),
+        multiple: f,
+        accept: c,
         onChange: u,
-        disabled: r
+        disabled: n
       }
     ) })
   ] });
 };
 export {
-  d as FileOverlay
+  j as FileOverlay
 };

package/dist/bundle.es29.js

@@ -1,8 +1,8 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as _, useMemo as b, useState as P, useEffect as j } from "react";
 import { getNum as v } from "@companix/utils-js";
-import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es48.js";
-import { SelectRightElements as w } from "./bundle.es49.js";
+import { getTimesOptions as D, getTimeValue as A, removeDigits as W, convertTimeToOption as q } from "./bundle.es50.js";
+import { SelectRightElements as w } from "./bundle.es51.js";
 import { Select as y } from "./bundle.es8.js";
 import { Input as z } from "./bundle.es9.js";
 const r = {

package/dist/bundle.es31.js

@@ -1,13 +1,9 @@
-import { useState as s, useEffect as c } from "react";
-const l = (e, a) => {
-  const [t, o] = s(() => {
-    const r = localStorage.getItem(e);
-    return r ? JSON.parse(r) : a;
-  });
-  return c(() => {
-    localStorage.setItem(e, JSON.stringify(t));
-  }, [t]), [t, o];
+import { jsx as r } from "react/jsx-runtime";
+import { clamp as o, pc as p } from "@companix/utils-browser";
+const i = ({ appearance: a = "primary", value: e }) => {
+  const s = 100 * o(e, 0, 1);
+  return /* @__PURE__ */ r("div", { "aria-valuemax": 100, "aria-valuemin": 0, role: "progressbar", className: "progress-bar", children: /* @__PURE__ */ r("div", { className: "progress-bar-thumb", "data-appearance": a, style: { width: p(s) } }) });
 };
 export {
-  l as useLocalStorage
+  i as ProgressBar
 };

package/dist/bundle.es32.js

@@ -1,27 +1,13 @@
-import { jsx as i } from "react/jsx-runtime";
-import { hash as m } from "@companix/utils-js";
-import { useRef as n, useMemo as s } from "react";
-import { Viewport as u } from "./bundle.es51.js";
-const h = (t = {}) => {
-  const e = {
-    emit: (r) => {
-      console.error("uninitialized", r);
-    }
-  };
-  return {
-    show: (r) => {
-      e.emit({ ...r, id: m() });
-    },
-    Viewport: () => {
-      const r = n(null);
-      return s(() => {
-        e.emit = (o) => {
-          r.current && r.current.showAlert(o);
-        };
-      }, []), /* @__PURE__ */ i(u, { ref: r, ...t });
-    }
-  };
+import { useState as s, useEffect as c } from "react";
+const l = (e, a) => {
+  const [t, o] = s(() => {
+    const r = localStorage.getItem(e);
+    return r ? JSON.parse(r) : a;
+  });
+  return c(() => {
+    localStorage.setItem(e, JSON.stringify(t));
+  }, [t]), [t, o];
 };
 export {
-  h as createAlertAgent
+  l as useLocalStorage
 };

package/dist/bundle.es33.js

@@ -1,38 +1,27 @@
-import { jsx as a } from "react/jsx-runtime";
-import { hash as d } from "@companix/utils-js";
-import { Viewport as s } from "./bundle.es52.js";
-import { useRef as c, useMemo as l } from "react";
-const f = (i = {}) => {
-  const t = {
-    emit: (e) => {
-      console.error("uninitialized", e);
+import { jsx as i } from "react/jsx-runtime";
+import { hash as m } from "@companix/utils-js";
+import { useRef as n, useMemo as s } from "react";
+import { Viewport as u } from "./bundle.es53.js";
+const h = (t = {}) => {
+  const e = {
+    emit: (r) => {
+      console.error("uninitialized", r);
     }
   };
   return {
-    send: (e) => {
-      t.emit({ ...e, id: d() });
+    show: (r) => {
+      e.emit({ ...r, id: m() });
     },
-    Viewport: (e = {}) => {
-      const n = c(null);
-      return l(() => {
-        t.emit = (r) => {
-          n.current && n.current.addToast(r);
+    Viewport: () => {
+      const r = n(null);
+      return s(() => {
+        e.emit = (o) => {
+          r.current && r.current.showAlert(o);
         };
-      }, []), /* @__PURE__ */ a(
-        s,
-        {
-          ref: n,
-          align: e.align ?? i.align,
-          closeIcon: e.closeIcon ?? i.closeIcon,
-          duration: e.duration ?? i.duration,
-          gap: e.gap ?? i.gap,
-          side: e.side ?? i.side,
-          swipeThreshold: e.swipeThreshold ?? i.swipeThreshold
-        }
-      );
+      }, []), /* @__PURE__ */ i(u, { ref: r, ...t });
     }
   };
 };
 export {
-  f as createToaster
+  h as createAlertAgent
 };