@companix/uikit 0.0.17 → 0.0.19

package/dist/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import { InputContainerProps } from './InputContainer';
 export interface InputProps extends Omit<InputContainerProps, 'inputRef' | 'children'> {
     placeholder?: string;
-    value?: string | number;
+    value?: string;
     readOnly?: boolean;
     onValueChange?: (value: string, targetElement: HTMLInputElement) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/Input/InputElement.d.ts

@@ -1,4 +1,6 @@
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children'> {
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'value' | 'defaultValue'> {
+    defaultValue?: string;
+    value?: string;
     mask?: string;
     maskChar?: string;
     onValueChange?: (value: string, targetElement: HTMLInputElement) => void;

package/dist/NumberInput/index.d.ts

@@ -1,6 +1,23 @@
-import { InputProps } from '../Input/Input';
-export interface NumberInputProps extends Omit<InputProps, 'value' | 'onChange'> {
-    value: number | null;
-    onChange: (value: number | null) => void;
+import { InputContainerProps } from '../Input/InputContainer';
+export interface ReactNumberFormatParams {
+    thousandSeparator?: boolean | string;
+    decimalSeparator?: string;
+    allowedDecimalSeparators?: Array<string>;
+    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+    allowNegative?: boolean;
+    allowLeadingZeros?: boolean;
+    suffix?: string;
+    prefix?: string;
 }
-export declare const NumberInput: ({ value, onChange, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export interface NumberInputProps extends Omit<InputContainerProps, 'inputRef' | 'children'>, ReactNumberFormatParams {
+    placeholder?: string;
+    value?: number | null;
+    readOnly?: boolean;
+    onValueChange?: (value: number | null) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+    inputClassName?: string;
+}
+export declare const NumberInput: import('react').ForwardRefExoticComponent<NumberInputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Radio/index.d.ts

@@ -1,4 +1,4 @@
-interface RadioOption<T> {
+export interface RadioOption<T> {
     value: T;
     label: React.ReactNode;
 }

package/dist/Select/index.d.ts

@@ -20,5 +20,5 @@ type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'
         scrollTo: (index: number) => void;
     }>;
 };
-export declare const Select: <T extends string | number>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/bundle.es.js

@@ -2,63 +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 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 { OptionsList as A } from "./bundle.es12.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 { 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 { 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";
+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,
   w as ButtonGroup,
-  L as Checkbox,
-  J as Countdown,
-  Y as DateInput,
-  W as DatePicker,
+  G as Checkbox,
+  K as Countdown,
+  Z as DateInput,
+  X as DatePicker,
   y as Dialog,
   F as Drawer,
-  _ as FileOverlay,
-  oo as FormGroup,
+  $ as FileOverlay,
+  ro as FormGroup,
   a as ImitateScroll,
   T as Input,
-  q as LoadButton,
+  z as LoadButton,
   b as NumberInput,
   D as OptionItem,
-  d as OptionsList,
-  i as Popover,
-  v as Radio,
+  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,
-  P as Switch,
-  E as Tabs,
-  M as TextArea,
-  eo as TimePicker,
-  c as Tooltip,
-  xo as createAlertAgent,
-  ao as createToaster,
-  po 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.es11.js

@@ -1,33 +1,58 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as p, useRef as m } from "react";
-import { Input as l } from "./bundle.es9.js";
-const N = ({ value: r, onChange: u, ...e }) => {
-  const [, t] = p([]), n = m(i(r));
-  return +n.current !== r && (n.current = i(r)), /* @__PURE__ */ f(
-    l,
-    {
-      ...e,
-      value: n.current,
-      onChange: (o) => {
-        const s = o.currentTarget.value.trim();
-        if (s === "")
-          return n.current = "", u(null);
-        if (!(s.startsWith(".") || s.replace(".", "").split("").some((c) => isNaN(parseInt(c))))) {
-          if (n.current = a(s.split("")), +n.current === r)
-            return t([]);
-          u(+n.current);
-        }
+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.es38.js";
+import { NumericFormat as V } from "react-number-format";
+const D = j(
+  ({
+    onChange: m,
+    onValueChange: o,
+    readOnly: i,
+    inputClassName: f,
+    value: n,
+    placeholder: u,
+    thousandSeparator: p,
+    decimalSeparator: a,
+    allowedDecimalSeparators: l,
+    thousandsGroupStyle: d,
+    decimalScale: s,
+    fixedDecimalScale: b,
+    allowNegative: R,
+    allowLeadingZeros: c,
+    suffix: g,
+    prefix: x,
+    inputRef: I,
+    ...e
+  }, N) => {
+    const r = w(null);
+    return /* @__PURE__ */ t(F, { ref: N, inputRef: r, ...e, children: /* @__PURE__ */ t(
+      V,
+      {
+        type: "text",
+        getInputRef: y([r, I]),
+        className: C("form-input form-input-base", f),
+        "aria-disabled": e.disabled,
+        onChange: m,
+        onValueChange: ({ floatValue: h }) => o?.(h ?? null),
+        value: n,
+        placeholder: u,
+        disabled: e.disabled,
+        readOnly: i,
+        thousandSeparator: p,
+        decimalSeparator: a,
+        allowedDecimalSeparators: l,
+        thousandsGroupStyle: d,
+        decimalScale: s,
+        fixedDecimalScale: b,
+        allowNegative: R,
+        allowLeadingZeros: c,
+        suffix: g,
+        prefix: x
       }
-    }
-  );
-}, i = (r) => r === null ? "" : r.toString(), a = (r) => {
-  const u = [...r], e = [...r];
-  if (e.every((t) => t === "0"))
-    return "0";
-  for (let t = 0; t < e.length && e[t] === "0"; t++)
-    e[t] === "0" && e[t + 1] !== "." && u.shift();
-  return u.join("");
-};
+    ) });
+  }
+);
 export {
-  N as NumberInput
+  D as NumberInput
 };

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.es37.js

@@ -2,7 +2,7 @@ import { jsx as u } from "react/jsx-runtime";
 import { forwardRef as m, useCallback as i } from "react";
 import c from "react-input-mask";
 const I = m(
-  ({ mask: r, maskChar: f, onChange: n, onValueChange: o, ...a }, e) => {
+  ({ mask: r, maskChar: f = "_", onChange: n, onValueChange: o, ...a }, e) => {
     const p = i(
       (t) => {
         n?.(t), o?.(t.target.value, t.target);

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export { OptionsList } from './OptionItem/OptionsList';
 export { ButtonGroup } from './ButtonGroup';
 export { Checkbox } from './Checkbox';
 export { Switch } from './Switch';
-export { Radio } from './Radio';
+export { Radio, RadioGroup } from './Radio';
 export { Drawer } from './Drawer';
 export { Dialog } from './Dialog';
 export { AlertDialog } from './DialogAlert/Alert';
@@ -26,8 +26,10 @@ export { DateInput } from './DateInput';
 export { FileOverlay } from './File';
 export { FormGroup } from './FormGroup';
 export { TimePicker } from './TimePicker';
-export * from './__hooks/use-local-storage';
+export { useLocalStorage } from './__hooks/use-local-storage';
 export { createAlertAgent } from './DialogAlert';
 export { createToaster } from './Toaster';
 export * from './types';
 export type { Appearance } from './Button';
+export type { RadioOption } from './Radio';
+export type { NumberInputProps, ReactNumberFormatParams } from './NumberInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -37,7 +37,8 @@
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "classnames": "^2.5.1",
     "react-input-mask": "^2.0.4",
-    "react-merge-refs": "^3.0.2"
+    "react-merge-refs": "^3.0.2",
+    "react-number-format": "^5.4.4"
   },
   "devDependencies": {
     "@blueprintjs/core": "^6.2.1",

package/dist/Stepper/StepperInput.scss

@@ -1,35 +0,0 @@
-.number-input-container {
-  display: flex;
-  gap: 4px;
-}
-
-.number-stepper {
-  display: flex;
-  flex-direction: column;
-  height: 30px;
-  min-height: 30px;
-  line-height: 30px;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 47%);
-  border-radius: 4px;
-
-  &-splitter {
-    height: 1px;
-    background-color: var(--border-color);
-  }
-
-  &-slot {
-    border-radius: 0px;
-    height: 13.5px;
-
-    &[data-slot='decrement'] {
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-
-    &[data-slot='increment'] {
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-    }
-  }
-}

package/dist/Stepper/index.d.ts

@@ -1,8 +0,0 @@
-import { StepperInputOptions } from '../__hooks/use-stepper-input';
-interface StepperInputProps extends StepperInputOptions {
-    buttons?: boolean;
-    placeholder?: string;
-    inputStyle?: React.CSSProperties;
-}
-export declare const StepperInput: ({ inputStyle, placeholder, buttons, ...options }: StepperInputProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,13 +0,0 @@
-export interface StepperInputOptions {
-    value: number;
-    onChange: (value: number) => void;
-    step: number;
-    minValue?: number;
-}
-export declare const useStepperInput: ({ minValue, value, onChange, step }: StepperInputOptions) => {
-    inputRef: import('react').RefObject<HTMLInputElement>;
-    value: string;
-    increment: () => void;
-    decrement: () => void;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-};