@companix/uikit 0.0.16 → 0.0.17

package/dist/DatePicker/index.d.ts

@@ -1,11 +1,10 @@
-import { FormProps } from '../Input';
+import { InputProps } from '../Input/Input';
 import { CalendarProps } from './Calendar';
-interface DatePickerProps extends Omit<CalendarProps, 'onChange'>, Omit<FormProps, 'value' | 'onChange' | 'rightElement'> {
+interface DatePickerProps extends Omit<CalendarProps, 'onChange'>, Omit<InputProps, 'value' | 'onChange' | 'rightElement'> {
     onChange?: (value: Date | null) => void;
     clearButton?: boolean;
     clearButtonIcon?: boolean;
     children?: React.ReactNode;
-    minimalOptions?: boolean;
 }
 export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Input/Form.scss

@@ -31,10 +31,6 @@
 
   &[data-fill] {
     width: 100%;
-
-    .form-input {
-      width: 100%;
-    }
   }
 
   &[data-required] {
@@ -56,6 +52,7 @@
 
 .form-input {
   outline: none;
+  width: 100%;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {

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

@@ -1,17 +1,13 @@
-export interface FormProps extends React.HTMLAttributes<HTMLDivElement> {
-    required?: boolean;
-    disabled?: boolean;
-    leftElement?: React.ReactNode;
-    rightElement?: React.ReactNode;
+import { InputContainerProps } from './InputContainer';
+export interface InputProps extends Omit<InputContainerProps, 'inputRef' | 'children'> {
     placeholder?: string;
     value?: string | number;
     readOnly?: boolean;
     onValueChange?: (value: string, targetElement: HTMLInputElement) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     inputRef?: React.Ref<HTMLInputElement>;
-    size?: 'sm' | 'md' | 'lg';
-    fill?: boolean;
+    inputClassName?: string;
     mask?: string;
     maskChar?: string;
 }
-export declare const Input: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Input/Input.scss

@@ -22,3 +22,26 @@
     align-items: center;
   }
 }
+
+.inline-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  &-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
+    overflow: hidden;
+    height: var(--form_size_md_height);
+  }
+
+  &-title {
+    padding: 0px var(--form_space, 0);
+    opacity: 0;
+  }
+}

package/dist/Input/InputContainer.d.ts

@@ -0,0 +1,11 @@
+export interface InputContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    leftElement?: React.ReactNode;
+    rightElement?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    fill?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    inputRef: React.RefObject<HTMLInputElement>;
+    children: React.ReactNode;
+}
+export declare const InputContainer: import('react').ForwardRefExoticComponent<InputContainerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Input/InputElement.d.ts

@@ -0,0 +1,7 @@
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children'> {
+    mask?: string;
+    maskChar?: string;
+    onValueChange?: (value: string, targetElement: HTMLInputElement) => void;
+}
+export declare const InputElement: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/NumberInput/index.d.ts

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

package/dist/Select/SelectOptions.d.ts

@@ -0,0 +1,12 @@
+import { Option } from '..';
+interface SelectPopoverProps<T> {
+    scrollboxRef?: React.RefObject<HTMLDivElement>;
+    optionsWrapperRef?: React.RefObject<HTMLDivElement>;
+    options: Option<T>[];
+    minimalOptions?: boolean;
+    active?: T | null;
+    onSelect?: (value: T) => void;
+    onOpened?: () => void;
+}
+export declare const SelectOptions: <T>(props: SelectPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Select/SelectRight.d.ts

@@ -0,0 +1,8 @@
+interface SelectRightElementsProps {
+    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    clearButton?: boolean;
+    clearButtonIcon?: React.ReactNode;
+    value: boolean;
+}
+export declare const SelectRightElements: (props: SelectRightElementsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Select/index.d.ts

@@ -15,6 +15,10 @@ type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'
     children?: React.ReactNode;
     minimalOptions?: boolean;
     matchTarget?: 'width' | 'min-width';
+    popoverRef?: React.Ref<HTMLDivElement>;
+    scrollRef?: React.Ref<{
+        scrollTo: (index: number) => void;
+    }>;
 };
-export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends string | number>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/TimePicker/index.d.ts

@@ -0,0 +1,10 @@
+import { InputProps } from '../Input/Input';
+import { TimeFormat } from '..';
+export interface TimePickerProps extends Omit<InputProps, 'value' | 'onChange' | 'rightElement'> {
+    required?: boolean;
+    value: TimeFormat | null;
+    onChange: (value: TimeFormat | null) => void;
+    clearButton?: boolean;
+    clearButtonIcon?: boolean;
+}
+export declare const TimePicker: (props: TimePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/__hooks/use-input-padding.d.ts

@@ -0,0 +1,5 @@
+declare const useInputPadding: (inputRef: React.RefObject<HTMLInputElement>, deps?: React.DependencyList) => {
+    rightRef: import('react').RefObject<HTMLSpanElement>;
+    leftRef: import('react').RefObject<HTMLSpanElement>;
+};
+export { useInputPadding };

package/dist/__hooks/use-scrollbox.d.ts

@@ -1,7 +1,7 @@
 interface UseScrollListControllerReturn {
     scrollBoxRef: React.RefObject<HTMLDivElement>;
     optionsWrapperRef: React.RefObject<HTMLDivElement>;
-    scrollToElement: (index: number, center?: boolean) => void;
+    scrollToElement: (index: number, position?: 'center' | 'top') => void;
 }
 export declare const useScrollListController: () => UseScrollListControllerReturn;
 export {};

package/dist/__hooks/use-update.d.ts

@@ -1 +1 @@
-export declare const useLayoutAndUpdate: (callback: () => void, deps?: React.DependencyList | undefined) => void;
+export declare const useEffectWithLayout: (callback: () => void, deps?: React.DependencyList | undefined) => void;

package/dist/__utils/utils.d.ts

@@ -1,4 +1,4 @@
-import { DateFormat, Option } from '..';
+import { DateFormat, Option, TimeFormat } from '..';
 export declare const getMonthMaxDay: (month: number, year: number) => number;
 export declare const getFirstDay: (month: number, year: number) => number;
 export declare const getDayIndex: (day: number) => number;
@@ -23,3 +23,17 @@ export declare const DEFAULT_MAX_YEAR = 9999;
 export declare const DEFAULT_MIN_YEAR = 100;
 export declare const getYears: (currentYear: number, range: number) => Option<number>[];
 export declare const getMonths: (locale?: string) => Option<number>[];
+export declare const removeDigits: (value: string, signs: string[]) => string;
+export declare const convertTimeToOption: ({ hours, minutes }: TimeFormat, char?: string) => string;
+interface TimeOption extends Option<string> {
+    hours: string;
+    minutes: string;
+}
+export declare const getTimeValue: (time: TimeFormat, char?: string) => {
+    title: string;
+    value: string;
+    hours: string;
+    minutes: string;
+};
+export declare const getTimesOptions: (step: number, char?: string) => TimeOption[];
+export {};

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 { Input as g } from "./bundle.es9.js";
-import { OptionItem as b } from "./bundle.es10.js";
-import { NumberInput as D } from "./bundle.es11.js";
+import { Input as T } from "./bundle.es9.js";
+import { OptionItem as D } from "./bundle.es10.js";
+import { NumberInput as b } from "./bundle.es11.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 G } from "./bundle.es17.js";
+import { ButtonGroup as w } from "./bundle.es13.js";
+import { Checkbox as L } from "./bundle.es14.js";
+import { Switch as P } from "./bundle.es15.js";
+import { Radio as v } from "./bundle.es16.js";
+import { Drawer as F } from "./bundle.es17.js";
 import { Dialog as y } from "./bundle.es18.js";
 import { AlertDialog as R } from "./bundle.es19.js";
 import { LoadButton as q } from "./bundle.es20.js";
@@ -22,39 +22,43 @@ import { Countdown as J } from "./bundle.es22.js";
 import { TextArea as M } from "./bundle.es23.js";
 import { SelectTags as U } from "./bundle.es24.js";
 import { DatePicker as W } from "./bundle.es25.js";
-import { FileOverlay as Y } from "./bundle.es26.js";
-import { FormGroup as _ } from "./bundle.es27.js";
-import { useLocalStorage as oo } from "./bundle.es28.js";
-import { createAlertAgent as eo } from "./bundle.es29.js";
-import { createToaster as po } from "./bundle.es30.js";
+import { DateInput as Y } from "./bundle.es26.js";
+import { FileOverlay as _ } from "./bundle.es27.js";
+import { FormGroup as oo } from "./bundle.es28.js";
+import { TimePicker as eo } from "./bundle.es29.js";
+import { useLocalStorage as po } from "./bundle.es30.js";
+import { createAlertAgent as xo } from "./bundle.es31.js";
+import { createToaster as ao } from "./bundle.es32.js";
 export {
   R as AlertDialog,
   e as Button,
-  B as ButtonGroup,
-  O as Checkbox,
+  w as ButtonGroup,
+  L as Checkbox,
   J as Countdown,
+  Y as DateInput,
   W as DatePicker,
   y as Dialog,
-  G as Drawer,
-  Y as FileOverlay,
-  _ as FormGroup,
+  F as Drawer,
+  _ as FileOverlay,
+  oo as FormGroup,
   a as ImitateScroll,
-  g as Input,
+  T as Input,
   q as LoadButton,
-  D as NumberInput,
-  b as OptionItem,
+  b as NumberInput,
+  D as OptionItem,
   d as OptionsList,
   i as Popover,
-  C as Radio,
+  v as Radio,
   x as Scrollable,
   S as Select,
   U as SelectTags,
   p as Spinner,
-  k as Switch,
+  P as Switch,
   E as Tabs,
   M as TextArea,
+  eo as TimePicker,
   c as Tooltip,
-  eo as createAlertAgent,
-  po as createToaster,
-  oo as useLocalStorage
+  xo as createAlertAgent,
+  ao as createToaster,
+  po as useLocalStorage
 };

package/dist/bundle.es10.js

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

package/dist/bundle.es14.js

@@ -1,6 +1,6 @@
 import { jsxs as x, jsx as o } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-checkbox";
-import { Icon as h } from "./bundle.es35.js";
+import { Icon as h } from "./bundle.es39.js";
 import { faCheck as l } from "@fortawesome/free-solid-svg-icons";
 import { useId as n } from "react";
 import { attr as c } from "@companix/utils-browser";

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

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.es37.js";
+import { useLoading as p } from "./bundle.es41.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.es38.js";
+import { useResizeTextarea as x } from "./bundle.es42.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,10 +1,10 @@
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { useFroozeClosing as M } from "./bundle.es31.js";
+import { useFroozeClosing as M } from "./bundle.es33.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 { useState as B, useRef as d, useMemo as h } from "react";
-import { Icon as g } from "./bundle.es35.js";
+import { Icon as g } from "./bundle.es39.js";
 import { faClose as H, faChevronDown as Q } from "@fortawesome/free-solid-svg-icons";
 import { attr as v, getActiveElementByAnotherElement as G, contains as J } from "@companix/utils-browser";
 import { mergeRefs as K } from "react-merge-refs";

package/dist/bundle.es25.js

@@ -1,114 +1,122 @@
-import { jsx as l, jsxs as O, Fragment as R } from "react/jsx-runtime";
-import { Popover as z } from "./bundle.es6.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 k } from "./bundle.es35.js";
-import { useState as _, useRef as q } from "react";
-import { Calendar as G } from "./bundle.es39.js";
-import { useDayDisableCheker as H } from "./bundle.es40.js";
-import { formatTime as y, getNum as d } from "@companix/utils-js";
-const h = (t, i = "-") => {
-  if (t) {
-    const n = y(t.getDate()), r = y(t.getMonth() + 1), s = t.getFullYear();
-    return [n, r, s].join(i);
-  }
-  return "";
-}, 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])];
-    if (r && s && a) {
-      const o = new Date(a, s - 1, r);
-      if (o.getFullYear() === a && o.getDate() === r && o.getMonth() === s - 1)
-        return o;
+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.es43.js";
+import { useDayDisableCheker as N } from "./bundle.es44.js";
+import { getNum as f, formatTime as v } from "@companix/utils-js";
+import { removeDigits as O } from "./bundle.es45.js";
+import { SelectRightElements as Y } from "./bundle.es46.js";
+const i = {
+  char: "-",
+  toString: (e) => {
+    if (e) {
+      const n = v(e.getDate()), r = v(e.getMonth() + 1), l = e.getFullYear();
+      return [n, r, l].join(i.char);
+    }
+    return "";
+  },
+  toValue: (e) => {
+    const n = e.split(i.char);
+    if (n.length === 3) {
+      const [r, l, a] = [f(n[0]), f(n[1]), f(n[2])];
+      if (r && l && a) {
+        const o = new Date(a, l - 1, r);
+        if (o.getFullYear() === a && o.getDate() === r && o.getMonth() === l - 1)
+          return o;
+      }
     }
+    return null;
   }
-  return null;
-}, te = (t) => {
+}, U = (e) => {
   const {
-    minimalOptions: i,
     clearButton: n,
     clearButtonIcon: r,
-    children: s,
+    children: l,
     disabled: a,
     // calendar props
     value: o,
-    enableTime: P,
-    disablePickers: v,
-    showNeighboringMonth: A,
-    onChange: u,
-    shouldDisableDate: g,
-    viewDate: N,
-    disablePast: D,
-    disableFuture: C,
-    minDateTime: b,
-    maxDateTime: x,
+    enableTime: y,
+    disablePickers: I,
+    showNeighboringMonth: P,
+    onChange: c,
+    shouldDisableDate: d,
+    viewDate: S,
+    disablePast: g,
+    disableFuture: D,
+    minDateTime: C,
+    maxDateTime: b,
     // input props
-    ...T
-  } = t, [m, c] = _(() => h(o ?? null)), p = q(null), I = H({
-    disableFuture: C,
-    disablePast: D,
-    shouldDisableDate: g,
-    minDateTime: b,
-    maxDateTime: x
-  }), w = (e) => {
-    a || p.current && p.current.getAttribute("data-state") === "open" && e.preventDefault();
-  }, B = (e) => {
-    e.stopPropagation(), c(""), u?.(null);
-  }, V = (e) => {
-    c(e);
-    const f = F(e);
-    f && !I(f) && u?.(f);
-  }, j = () => {
-    const e = F(m);
-    (!e || I(e)) && c(h(o ?? null));
-  }, M = (e) => {
-    u?.(e), c(h(e));
+    ...V
+  } = e, [m, s] = M(() => i.toString(o ?? null)), p = j(null), k = N({
+    disableFuture: D,
+    disablePast: g,
+    shouldDisableDate: d,
+    minDateTime: C,
+    maxDateTime: b
+  }), B = (t) => {
+    a || p.current && p.current.getAttribute("data-state") === "open" && t.preventDefault();
+  }, F = (t) => {
+    t.stopPropagation(), s(""), c?.(null);
+  }, R = (t) => {
+    s(t);
+    const h = i.toValue(t);
+    h && !k(h) && c?.(h);
+  }, T = () => {
+    const t = i.toValue(m);
+    (!t || k(t)) && s(i.toString(o ?? null));
+  }, w = (t) => {
+    c?.(t), s(i.toString(t));
   };
-  return /* @__PURE__ */ l(
-    z,
+  return /* @__PURE__ */ u(
+    x,
     {
       minimal: !0,
       ref: p,
       sideOffset: 0,
-      onOpenAutoFocus: (e) => e.preventDefault(),
-      onCloseAutoFocus: (e) => e.preventDefault(),
+      onOpenAutoFocus: (t) => t.preventDefault(),
+      onCloseAutoFocus: (t) => t.preventDefault(),
       disabled: a,
-      content: () => /* @__PURE__ */ l(
-        G,
+      content: () => /* @__PURE__ */ u(
+        E,
         {
           value: o,
-          disablePast: D,
-          disableFuture: C,
-          enableTime: P,
-          disablePickers: v,
-          showNeighboringMonth: A,
-          onChange: M,
-          shouldDisableDate: g,
-          viewDate: N,
-          minDateTime: b,
-          maxDateTime: x
+          disablePast: g,
+          disableFuture: D,
+          enableTime: y,
+          disablePickers: I,
+          showNeighboringMonth: P,
+          onChange: w,
+          shouldDisableDate: d,
+          viewDate: S,
+          minDateTime: C,
+          maxDateTime: b
         }
       ),
-      children: /* @__PURE__ */ l(
-        Y,
+      children: /* @__PURE__ */ u(
+        A,
         {
-          ...T,
+          ...V,
           value: m,
           disabled: a,
-          onClick: w,
-          onValueChange: V,
-          onBlur: j,
+          onClick: B,
+          onValueChange: R,
+          onBlur: T,
           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(k, { className: "select-close-icon", icon: E, size: "xxxs" }) }),
-            /* @__PURE__ */ l(k, { className: "expand-icon select-expand", icon: S, size: "xxxs" })
-          ] })
+          rightElement: /* @__PURE__ */ u(
+            Y,
+            {
+              clearButton: n,
+              clearButtonIcon: r,
+              value: !!O(m, ["-", "_"]),
+              onClear: F
+            }
+          )
         }
       )
     }
   );
-}, J = (t) => t.trim().replaceAll("-", "").replaceAll("_", "");
+};
 export {
-  te as DatePicker
+  U as DatePicker
 };