@companix/uikit 0.1.42 → 0.1.44

package/dist/CounterInput/CounterInput.scss

@@ -0,0 +1,29 @@
+@use '../mixins.scss';
+
+.counter-input-field {
+  text-align: center;
+}
+
+.counter-input-button {
+  pointer-events: auto;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0px var(--form_space, 0);
+  background: none;
+  border: none;
+  outline: none;
+
+  @include mixins.use-styles(select, tools);
+
+  &:hover:not(:disabled) {
+    @include mixins.use-styles(select, tools, hovered);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+}

package/dist/CounterInput/index.d.ts

@@ -0,0 +1,14 @@
+import { InputContainerProps } from '../Input/InputContainer';
+import { ReactNumberFormatParams } from '../NumberInput';
+export interface CounterInputProps extends Omit<InputContainerProps, 'inputRef' | 'children' | 'leftElement' | 'rightElement'>, ReactNumberFormatParams {
+    placeholder?: string;
+    value?: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    onValueChange?: (value: number | null) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+    inputClassName?: string;
+}
+export declare const CounterInput: import('react').ForwardRefExoticComponent<CounterInputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Select/index.d.ts

@@ -1,5 +1,6 @@
 import { SelectFormProps } from './SelectInput';
 import { OptionsSource, SelectOptionsPopoverParams } from './OptionsPopover';
+import { Option } from '../types';
 interface Cleanable<T> {
     clearButton: true;
     onChange: (value: T | null) => void;
@@ -16,9 +17,16 @@ export interface SelectParams extends SelectOptionsPopoverParams {
         scrollTo: (index: number) => void;
     }>;
 }
+export interface SelectTriggerParams<T> {
+    option: Option<T> | null;
+    title: string;
+    isOpen: boolean;
+    clear: (event: React.MouseEvent) => void;
+}
+export type SelectTrigger<T> = (params: SelectTriggerParams<T>) => React.ReactNode;
 export type SelectProps<T> = OptionsSource<T> & Omit<SelectFormProps, 'value'> & SelectParams & OnChangeValueType<T> & {
     value: T | null;
-    children?: React.ReactNode;
+    children?: React.ReactNode | SelectTrigger<T>;
 };
 export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/bundle.es.js

@@ -2,147 +2,149 @@ import { Avatar as o } from "./bundle.es2.js";
 import { avatarSizes as p } from "./bundle.es3.js";
 import { getBadgeIconSizeByImageBaseSize as a, getFallbackIconSizeByImageBaseSize as x, getInitialsFontSize as f } from "./bundle.es4.js";
 import { Button as s } from "./bundle.es5.js";
-import { ButtonGroup as n } from "./bundle.es6.js";
+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 { Popover as b } from "./bundle.es11.js";
-import { Tooltip as I } from "./bundle.es12.js";
+import { Popover as P } from "./bundle.es11.js";
+import { Tooltip as y } from "./bundle.es12.js";
 import { Select as k } from "./bundle.es13.js";
 import { SelectTags as w } from "./bundle.es14.js";
 import { Input as M } from "./bundle.es15.js";
 import { OptionItem as R } from "./bundle.es16.js";
-import { NumberInput as L } 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";
-import { Radio as j, RadioGroup as q } from "./bundle.es21.js";
-import { Drawer as J } from "./bundle.es22.js";
-import { MobileDrawer as Q } from "./bundle.es23.js";
-import { Dialog as V } from "./bundle.es24.js";
-import { PopupLayout as Z } from "./bundle.es25.js";
-import { AlertDialog as $ } from "./bundle.es26.js";
-import { LoadingButton as re } from "./bundle.es27.js";
-import { Tabs as te } from "./bundle.es28.js";
-import { Countdown as me } from "./bundle.es29.js";
-import { TextArea as xe } from "./bundle.es30.js";
-import { DatePicker as ie } from "./bundle.es31.js";
-import { DateInput as le } from "./bundle.es32.js";
-import { FileOverlay as ce } from "./bundle.es33.js";
-import { FormGroup as ue } from "./bundle.es34.js";
-import { TimePicker as De } from "./bundle.es35.js";
-import { Icon as he } from "./bundle.es36.js";
-import { ProgressBar as Pe } from "./bundle.es37.js";
-import { Skeleton as ye } from "./bundle.es38.js";
-import { Blank as Te } from "./bundle.es39.js";
-import { ProgressRing as ve } from "./bundle.es40.js";
-import { WriteBar as Ae } from "./bundle.es41.js";
-import { Editor as Oe } from "./bundle.es42.js";
-import { DropArea as ze, DropAreaProvider as Le, useDragEnter as Ce } from "./bundle.es43.js";
-import { Table as Ne } from "./bundle.es44.js";
-import { ImageBase as We } from "./bundle.es45.js";
-import { ThemeProvider as Ye, useTheme as je } from "./bundle.es46.js";
-import { ColorSchemeScript as He, colorSchemeScript as Je } from "./bundle.es47.js";
-import { LocalStorageProvider as Qe, useLocalStorage as Ue } from "./bundle.es48.js";
-import { useBooleanState as Xe } from "./bundle.es49.js";
-import { useResizeTextarea as _e } from "./bundle.es50.js";
-import { useLoading as er } from "./bundle.es51.js";
-import { NowContextProvider as or, useNow as tr } from "./bundle.es52.js";
-import { useSyncSubmit as mr } from "./bundle.es53.js";
-import { createAlertAgent as xr } from "./bundle.es54.js";
-import { createToaster as ir } from "./bundle.es55.js";
-import { Toast as lr } from "./bundle.es56.js";
-import { DialogShell as cr, DrawerShell as Sr, MobileDrawerShell as ur, createPopupRegistry as gr, usePopup as Dr } from "./bundle.es57.js";
-import { createPopoversRegistry as hr } from "./bundle.es58.js";
-import { createScope as Pr, createStaticScope as br } from "./bundle.es59.js";
-import { RemoveListener as Ir } from "./bundle.es60.js";
-import { MONDAY as kr, addMonths as vr, createDayDisableChecker as wr, endOfDay as Ar, endOfWeek as Mr, isDayMinMaxRestricted as Or, isSameDate as Rr, setMonth as zr, setYear as Lr, startOfDay as Cr, startOfWeek as Fr, subMonths as Nr, useDayDisableCheker as Gr } from "./bundle.es61.js";
+import { NumberInput as C } from "./bundle.es17.js";
+import { CounterInput as F } from "./bundle.es18.js";
+import { OptionsList as G } from "./bundle.es19.js";
+import { Checkbox as E } from "./bundle.es20.js";
+import { Switch as j } from "./bundle.es21.js";
+import { Radio as H, RadioGroup as J } from "./bundle.es22.js";
+import { Drawer as Q } from "./bundle.es23.js";
+import { MobileDrawer as V } from "./bundle.es24.js";
+import { Dialog as Z } from "./bundle.es25.js";
+import { PopupLayout as $ } from "./bundle.es26.js";
+import { AlertDialog as re } from "./bundle.es27.js";
+import { LoadingButton as te } from "./bundle.es28.js";
+import { Tabs as me } from "./bundle.es29.js";
+import { Countdown as xe } from "./bundle.es30.js";
+import { TextArea as ie } from "./bundle.es31.js";
+import { DatePicker as ne } from "./bundle.es32.js";
+import { DateInput as ce } from "./bundle.es33.js";
+import { FileOverlay as ue } from "./bundle.es34.js";
+import { FormGroup as De } from "./bundle.es35.js";
+import { TimePicker as he } from "./bundle.es36.js";
+import { Icon as Ie } from "./bundle.es37.js";
+import { ProgressBar as be } from "./bundle.es38.js";
+import { Skeleton as Te } from "./bundle.es39.js";
+import { Blank as ve } from "./bundle.es40.js";
+import { ProgressRing as Ae } from "./bundle.es41.js";
+import { WriteBar as Oe } from "./bundle.es42.js";
+import { Editor as ze } from "./bundle.es43.js";
+import { DropArea as Le, DropAreaProvider as Fe, useDragEnter as Ne } from "./bundle.es44.js";
+import { Table as We } from "./bundle.es45.js";
+import { ImageBase as Ye } from "./bundle.es46.js";
+import { ThemeProvider as qe, useTheme as He } from "./bundle.es47.js";
+import { ColorSchemeScript as Ke, colorSchemeScript as Qe } from "./bundle.es48.js";
+import { LocalStorageProvider as Ve, useLocalStorage as Xe } from "./bundle.es49.js";
+import { useBooleanState as _e } from "./bundle.es50.js";
+import { useResizeTextarea as er } from "./bundle.es51.js";
+import { useLoading as or } from "./bundle.es52.js";
+import { NowContextProvider as pr, useNow as mr } from "./bundle.es53.js";
+import { useSyncSubmit as xr } from "./bundle.es54.js";
+import { createAlertAgent as ir } from "./bundle.es55.js";
+import { createToaster as nr } from "./bundle.es56.js";
+import { Toast as cr } from "./bundle.es57.js";
+import { DialogShell as ur, DrawerShell as gr, MobileDrawerShell as Dr, createPopupRegistry as dr, usePopup as hr } from "./bundle.es58.js";
+import { createPopoversRegistry as Ir } from "./bundle.es59.js";
+import { createScope as br, createStaticScope as yr } from "./bundle.es60.js";
+import { RemoveListener as kr } from "./bundle.es61.js";
+import { MONDAY as wr, addMonths as Ar, createDayDisableChecker as Mr, endOfDay as Or, endOfWeek as Rr, isDayMinMaxRestricted as zr, isSameDate as Cr, setMonth as Lr, setYear as Fr, startOfDay as Nr, startOfWeek as Gr, subMonths as Wr, useDayDisableCheker as Er } from "./bundle.es62.js";
 export {
-  $ as AlertDialog,
+  re as AlertDialog,
   o as Avatar,
-  Te as Blank,
+  ve as Blank,
   s as Button,
-  n as ButtonGroup,
-  G as Checkbox,
-  He as ColorSchemeScript,
-  me as Countdown,
-  le as DateInput,
-  ie as DatePicker,
-  V as Dialog,
-  cr as DialogShell,
-  J as Drawer,
-  Sr as DrawerShell,
-  ze as DropArea,
-  Le as DropAreaProvider,
-  Oe as Editor,
-  ce as FileOverlay,
-  ue as FormGroup,
-  he as Icon,
-  We as ImageBase,
+  l as ButtonGroup,
+  E as Checkbox,
+  Ke as ColorSchemeScript,
+  xe as Countdown,
+  F as CounterInput,
+  ce as DateInput,
+  ne as DatePicker,
+  Z as Dialog,
+  ur as DialogShell,
+  Q as Drawer,
+  gr as DrawerShell,
+  Le as DropArea,
+  Fe as DropAreaProvider,
+  ze as Editor,
+  ue as FileOverlay,
+  De as FormGroup,
+  Ie as Icon,
+  Ye as ImageBase,
   d as ImitateScroll,
   M as Input,
-  re as LoadingButton,
-  Qe as LocalStorageProvider,
-  kr as MONDAY,
-  Q as MobileDrawer,
-  ur as MobileDrawerShell,
-  or as NowContextProvider,
-  L as NumberInput,
+  te as LoadingButton,
+  Ve as LocalStorageProvider,
+  wr as MONDAY,
+  V as MobileDrawer,
+  Dr as MobileDrawerShell,
+  pr as NowContextProvider,
+  C as NumberInput,
   R as OptionItem,
-  F as OptionsList,
-  b as Popover,
-  Z as PopupLayout,
-  Pe as ProgressBar,
-  ve as ProgressRing,
-  j as Radio,
-  q as RadioGroup,
-  Ir as RemoveListener,
+  G as OptionsList,
+  P as Popover,
+  $ as PopupLayout,
+  be as ProgressBar,
+  Ae as ProgressRing,
+  H as Radio,
+  J as RadioGroup,
+  kr as RemoveListener,
   g as Scrollable,
   B as Segments,
   k as Select,
   w as SelectTags,
-  ye as Skeleton,
+  Te as Skeleton,
   S as Spinner,
-  E as Switch,
-  Ne as Table,
-  te as Tabs,
-  xe as TextArea,
-  Ye as ThemeProvider,
-  De as TimePicker,
-  lr as Toast,
-  I as Tooltip,
-  Ae as WriteBar,
-  vr as addMonths,
+  j as Switch,
+  We as Table,
+  me as Tabs,
+  ie as TextArea,
+  qe as ThemeProvider,
+  he as TimePicker,
+  cr as Toast,
+  y as Tooltip,
+  Oe as WriteBar,
+  Ar as addMonths,
   p as avatarSizes,
-  Je as colorSchemeScript,
-  xr as createAlertAgent,
-  wr as createDayDisableChecker,
-  hr as createPopoversRegistry,
-  gr as createPopupRegistry,
-  Pr as createScope,
-  br as createStaticScope,
-  ir as createToaster,
-  Ar as endOfDay,
-  Mr as endOfWeek,
+  Qe as colorSchemeScript,
+  ir as createAlertAgent,
+  Mr as createDayDisableChecker,
+  Ir as createPopoversRegistry,
+  dr as createPopupRegistry,
+  br as createScope,
+  yr as createStaticScope,
+  nr as createToaster,
+  Or as endOfDay,
+  Rr as endOfWeek,
   a as getBadgeIconSizeByImageBaseSize,
   x as getFallbackIconSizeByImageBaseSize,
   f as getInitialsFontSize,
-  Or as isDayMinMaxRestricted,
-  Rr as isSameDate,
-  zr as setMonth,
-  Lr as setYear,
-  Cr as startOfDay,
-  Fr as startOfWeek,
-  Nr as subMonths,
-  Xe as useBooleanState,
-  Gr as useDayDisableCheker,
-  Ce as useDragEnter,
-  er as useLoading,
-  Ue as useLocalStorage,
-  tr as useNow,
-  Dr as usePopup,
-  _e as useResizeTextarea,
-  mr as useSyncSubmit,
-  je as useTheme
+  zr as isDayMinMaxRestricted,
+  Cr as isSameDate,
+  Lr as setMonth,
+  Fr as setYear,
+  Nr as startOfDay,
+  Gr as startOfWeek,
+  Wr as subMonths,
+  _e as useBooleanState,
+  Er as useDayDisableCheker,
+  Ne as useDragEnter,
+  or as useLoading,
+  Xe as useLocalStorage,
+  mr as useNow,
+  hr as usePopup,
+  er as useResizeTextarea,
+  xr as useSyncSubmit,
+  He as useTheme
 };

package/dist/bundle.es10.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { makeTabId as c, useTabSlider as i } from "./bundle.es62.js";
+import { makeTabId as c, useTabSlider as i } from "./bundle.es63.js";
 import { attr as o } from "@companix/utils-browser";
 import { useRef as u, useId as f } from "react";
 const h = ({ value: s, onChange: t, options: a }) => {

package/dist/bundle.es13.js

@@ -1,99 +1,105 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useRef as L, useMemo as j, useImperativeHandle as k } from "react";
-import { Popover as q } from "./bundle.es11.js";
-import { useFroozeClosing as w } from "./bundle.es63.js";
-import { SelectInput as H } from "./bundle.es64.js";
-import { useScrollListController as M } from "./bundle.es65.js";
-import { OptionsPopover as N } from "./bundle.es66.js";
-import { mergeRefs as W } from "react-merge-refs";
-const Z = (t) => {
+import { jsx as s } from "react/jsx-runtime";
+import { useRef as q, useState as w, useMemo as y, useImperativeHandle as H } from "react";
+import { Popover as M } from "./bundle.es11.js";
+import { useFroozeClosing as N } from "./bundle.es64.js";
+import { SelectInput as W } from "./bundle.es65.js";
+import { useScrollListController as G } from "./bundle.es66.js";
+import { OptionsPopover as J } from "./bundle.es67.js";
+import { mergeRefs as K } from "react-merge-refs";
+const oe = (t) => {
   const {
-    onChange: i,
-    value: n,
-    matchTarget: f = "width",
-    children: m,
-    scrollRef: d,
-    popoverRef: v,
-    clearButton: s,
+    onChange: a,
+    value: r,
+    matchTarget: v = "width",
+    children: l,
+    scrollRef: h,
+    popoverRef: O,
+    clearButton: c,
     // select props
-    disabled: a,
-    required: h,
-    className: O,
-    clearButtonIcon: R,
-    leftElement: C,
-    inputRef: P,
-    onClear: y,
-    fill: E,
-    size: g,
-    placeholder: A,
-    onClick: S,
+    disabled: p,
+    required: C,
+    className: R,
+    clearButtonIcon: g,
+    leftElement: P,
+    inputRef: E,
+    onClear: Q,
+    fill: S,
+    size: A,
+    placeholder: x,
+    onClick: I,
     // options popover
-    ...x
-  } = t, r = L({});
-  j(() => {
-    (t.options ?? t.defaultOptions ?? []).forEach((e) => {
-      r.current[e.value] = e;
+    ...T
+  } = t, i = q({}), [z, B] = w(!1), u = typeof l == "function";
+  y(() => {
+    (t.options ?? t.defaultOptions ?? []).forEach((o) => {
+      i.current[o.value] = o;
     });
   }, [t.options, t.defaultOptions]);
-  const c = n === null ? null : r.current[n] ?? null, { popoverRef: z, froozePopoverPosition: B, handleAnimationEnd: F } = w(), { scrollToElement: p, optionsWrapperRef: I, scrollBoxRef: T } = M();
-  k(d, () => ({
-    scrollTo: (o) => p(o, "top")
+  const n = r === null ? null : i.current[r] ?? null, { popoverRef: F, froozePopoverPosition: b, handleAnimationEnd: D } = N(), { scrollToElement: f, optionsWrapperRef: L, scrollBoxRef: j } = G();
+  H(h, () => ({
+    scrollTo: (e) => f(e, "top")
   }));
-  const b = (o, e) => {
-    B(), i(o), e();
-  }, D = (o) => {
-    o.stopPropagation(), s && i(null);
+  const k = (e, o) => {
+    b(), a(e), o();
+  }, m = (e) => {
+    e.stopPropagation(), c && a(null);
   };
-  return /* @__PURE__ */ l(
-    q,
+  return /* @__PURE__ */ s(
+    M,
     {
       minimal: !0,
-      ref: W([z, v]),
+      ref: K([F, O]),
       sideOffset: 0,
-      matchTarget: f,
-      onAnimationEnd: F,
-      onOpenAutoFocus: (o) => o.preventDefault(),
-      onCloseAutoFocus: (o) => o.preventDefault(),
-      disabled: a,
-      content: ({ close: o }) => /* @__PURE__ */ l(
-        N,
+      matchTarget: v,
+      onAnimationEnd: D,
+      onOpenChange: u ? B : void 0,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      disabled: p,
+      content: ({ close: e }) => /* @__PURE__ */ s(
+        J,
         {
-          ...x,
-          close: o,
-          isActive: (e) => e === n,
-          onSelect: (e) => b(e, o),
-          scrollboxRef: T,
-          optionsWrapperRef: I,
-          onOpened: (e) => p(e, "center"),
-          onOptionsLoaded: (e) => {
-            e.forEach((u) => {
-              r.current[u.value] = u;
+          ...T,
+          close: e,
+          isActive: (o) => o === r,
+          onSelect: (o) => k(o, e),
+          scrollboxRef: j,
+          optionsWrapperRef: L,
+          onOpened: (o) => f(o, "center"),
+          onOptionsLoaded: (o) => {
+            o.forEach((d) => {
+              i.current[d.value] = d;
             });
           }
         }
       ),
-      children: m ?? /* @__PURE__ */ l(
-        H,
+      children: u ? l({
+        option: n,
+        title: n?.title ?? "",
+        isOpen: z,
+        clear: m
+      }) : l ?? /* @__PURE__ */ s(
+        W,
         {
-          required: h,
-          className: O,
-          leftElement: C,
-          inputRef: P,
-          onClear: D,
-          fill: E,
-          size: g,
-          placeholder: A,
-          onClick: S,
-          disabled: a,
-          clearButton: s,
-          customElement: c?.indicator,
-          clearButtonIcon: R,
-          value: c?.title ?? ""
+          required: C,
+          className: R,
+          leftElement: P,
+          inputRef: E,
+          onClear: m,
+          fill: S,
+          size: A,
+          placeholder: x,
+          onClick: I,
+          disabled: p,
+          clearButton: c,
+          customElement: n?.indicator,
+          clearButtonIcon: g,
+          value: n?.title ?? ""
         }
       )
     }
   );
 };
 export {
-  Z as Select
+  oe as Select
 };

package/dist/bundle.es14.js

@@ -3,12 +3,12 @@ import { mergeRefs as T } from "react-merge-refs";
 import { useState as M, useRef as h, useMemo as j } from "react";
 import { matchPattern as q } from "@companix/utils-js";
 import { faXmark as V, faChevronDown as $ } from "@companix/icons-solid";
-import { useFroozeClosing as B } from "./bundle.es63.js";
+import { useFroozeClosing as B } from "./bundle.es64.js";
 import { Popover as L } from "./bundle.es11.js";
-import { Icon as g } from "./bundle.es36.js";
+import { Icon as g } from "./bundle.es37.js";
 import { attr as l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
-import { OptionsPopover as H } from "./bundle.es66.js";
-import { arrays as v } from "./bundle.es67.js";
+import { OptionsPopover as H } from "./bundle.es67.js";
+import { arrays as v } from "./bundle.es68.js";
 const ne = (r) => {
   const {
     closeAfterSelect: C,

package/dist/bundle.es15.js

@@ -1,8 +1,8 @@
 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.es68.js";
-import { InputContainer as I } from "./bundle.es69.js";
+import { InputElement as x } from "./bundle.es69.js";
+import { InputContainer as I } from "./bundle.es70.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es16.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import v from "classnames";
-import { Icon as k } from "./bundle.es36.js";
+import { Icon as k } from "./bundle.es37.js";
 import { attr as t } from "@companix/utils-browser";
 import { forwardRef as x } from "react";
 import { faCheck as C } from "@companix/icons-solid";

package/dist/bundle.es17.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.es69.js";
+import { InputContainer as F } from "./bundle.es70.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({