@companix/uikit 0.0.16 → 0.0.18

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 {};

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

@@ -2,59 +2,64 @@ import { Button as e } from "./bundle.es2.js";
 import { Spinner as p } from "./bundle.es3.js";
 import { Scrollable as x } from "./bundle.es4.js";
 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 { Popover as l } from "./bundle.es6.js";
+import { Tooltip as u } 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 { 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 { 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 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 { 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";
-import { AlertDialog as R } from "./bundle.es19.js";
-import { LoadButton as q } from "./bundle.es20.js";
-import { Tabs as E } from "./bundle.es21.js";
-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 { AlertDialog as j } from "./bundle.es19.js";
+import { LoadButton as z } from "./bundle.es20.js";
+import { Tabs as H } from "./bundle.es21.js";
+import { Countdown as K } from "./bundle.es22.js";
+import { TextArea as Q } from "./bundle.es23.js";
+import { SelectTags as V } from "./bundle.es24.js";
+import { DatePicker as X } from "./bundle.es25.js";
+import { DateInput as Z } from "./bundle.es26.js";
+import { FileOverlay as $ } from "./bundle.es27.js";
+import { FormGroup as ro } from "./bundle.es28.js";
+import { TimePicker as to } from "./bundle.es29.js";
+import { useLocalStorage as mo } from "./bundle.es30.js";
+import { createAlertAgent as fo } from "./bundle.es31.js";
+import { createToaster as io } from "./bundle.es32.js";
 export {
-  R as AlertDialog,
+  j as AlertDialog,
   e as Button,
-  B as ButtonGroup,
-  O as Checkbox,
-  J as Countdown,
-  W as DatePicker,
+  w as ButtonGroup,
+  G as Checkbox,
+  K as Countdown,
+  Z as DateInput,
+  X as DatePicker,
   y as Dialog,
-  G as Drawer,
-  Y as FileOverlay,
-  _ as FormGroup,
+  F as Drawer,
+  $ as FileOverlay,
+  ro as FormGroup,
   a as ImitateScroll,
-  g as Input,
-  q as LoadButton,
-  D as NumberInput,
-  b as OptionItem,
-  d as OptionsList,
-  i as Popover,
-  C as Radio,
+  T as Input,
+  z as LoadButton,
+  b as NumberInput,
+  D as OptionItem,
+  A as OptionsList,
+  l as Popover,
+  h as Radio,
+  v as RadioGroup,
   x as Scrollable,
   S as Select,
-  U as SelectTags,
+  V as SelectTags,
   p as Spinner,
-  k as Switch,
-  E as Tabs,
-  M as TextArea,
-  c as Tooltip,
-  eo as createAlertAgent,
-  po as createToaster,
-  oo as useLocalStorage
+  O as Switch,
+  H as Tabs,
+  Q as TextArea,
+  to as TimePicker,
+  u as Tooltip,
+  fo as createAlertAgent,
+  io as createToaster,
+  mo 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.es16.js

@@ -1,23 +1,47 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useId as c } from "react";
-import * as d from "@radix-ui/react-radio-group";
-import { attr as i } from "@companix/utils-browser";
-const h = ({ value: t, label: e, size: m = "md", disabled: a, required: s }) => {
-  const o = c();
-  return /* @__PURE__ */ l(
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useId as p } from "react";
+import * as l from "@radix-ui/react-radio-group";
+import { attr as s } from "@companix/utils-browser";
+const q = (t) => {
+  const { options: m, value: a, onChange: r, disabled: d, required: e, size: n } = t;
+  return /* @__PURE__ */ o(
+    l.Root,
+    {
+      className: "radio-group",
+      disabled: d,
+      "data-required": s(e && !a),
+      "data-v": a,
+      value: a,
+      onValueChange: (i) => r(i),
+      children: m.map((i, c) => /* @__PURE__ */ o(
+        h,
+        {
+          ...i,
+          size: n,
+          disabled: d,
+          required: e && !a
+        },
+        `radio-${i.value}-${c}`
+      ))
+    }
+  );
+}, h = ({ value: t, label: m, size: a = "md", disabled: r, required: d }) => {
+  const e = p();
+  return /* @__PURE__ */ u(
     "span",
     {
       className: "radio",
-      "data-disabled": i(a),
-      "data-size": m,
-      "data-required": i(s),
+      "data-disabled": s(r),
+      "data-size": a,
+      "data-required": s(d),
       children: [
-        /* @__PURE__ */ r(d.Item, { className: "radio-box", value: t, disabled: a, id: o, children: /* @__PURE__ */ r(d.Indicator, { className: "radio-mark" }) }),
-        /* @__PURE__ */ r("label", { className: "radio-label", htmlFor: o, "data-disabled": i(a), children: e })
+        /* @__PURE__ */ o(l.Item, { className: "radio-box", value: t, disabled: r, id: e, children: /* @__PURE__ */ o(l.Indicator, { className: "radio-mark" }) }),
+        /* @__PURE__ */ o("label", { className: "radio-label", htmlFor: e, "data-disabled": s(r), children: m })
       ]
     }
   );
 };
 export {
-  h as Radio
+  h as Radio,
+  q as RadioGroup
 };

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";