@j2-health/design-system 0.3.2 → 0.5.0

package/dist/src/components/input/AntdSearchInput.d.ts

@@ -1,13 +1,53 @@
 import { InputRef } from 'antd';
+import { SearchProps as AntDSearchProps } from 'antd/es/input/Search';
 export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<{
     [x: `data-${string}`]: string | undefined;
     inputPrefixCls?: string | undefined;
     onSearch?: ((value: string, event?: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>, info?: {
         source?: "clear" | "input";
     }) => void) | undefined;
+    searchIcon?: import('react').ReactNode;
     enterButton?: import('react').ReactNode;
     loading?: boolean | undefined;
     onPressEnter?: ((e: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+    classNames?: ((info: {
+        props: AntDSearchProps;
+    }) => import('antd/es/_util/hooks/useMergeSemantic/semanticType').DeepClassNameType<{
+        root?: string;
+        input?: string;
+        prefix?: string;
+        suffix?: string;
+        clear?: string;
+        count?: string;
+        button?: import('antd/es/button/Button').ButtonSemanticType["classNames"];
+    } | undefined>) | import('antd/es/_util/hooks/useMergeSemantic/semanticType').DeepClassNameType<{
+        root?: string;
+        input?: string;
+        prefix?: string;
+        suffix?: string;
+        clear?: string;
+        count?: string;
+        button?: import('antd/es/button/Button').ButtonSemanticType["classNames"];
+    } | undefined>;
+    styles?: ((info: {
+        props: AntDSearchProps;
+    }) => import('antd/es/_util/hooks/useMergeSemantic/semanticType').DeepStylesType<{
+        root?: React.CSSProperties;
+        input?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+        clear?: React.CSSProperties;
+        count?: React.CSSProperties;
+        button?: import('antd/es/button/Button').ButtonSemanticType["styles"];
+    } | undefined>) | import('antd/es/_util/hooks/useMergeSemantic/semanticType').DeepStylesType<{
+        root?: React.CSSProperties;
+        input?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+        clear?: React.CSSProperties;
+        count?: React.CSSProperties;
+        button?: import('antd/es/button/Button').ButtonSemanticType["styles"];
+    } | undefined>;
     rootClassName?: string | undefined;
     size?: import('antd/es/button').ButtonSize;
     disabled?: boolean | undefined;
@@ -16,14 +56,6 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     addonAfter?: import('react').ReactNode;
     bordered?: boolean | undefined;
     variant?: import('antd/es/config-provider').Variant | undefined;
-    classNames?: Partial<Record<"prefix" | "input" | "count" | "suffix", string>> | undefined;
-    styles?: Partial<Record<"prefix" | "input" | "count" | "suffix", React.CSSProperties>> | undefined;
-    _skipAddonWarning?: boolean | undefined;
-    prefix?: import('react').ReactNode;
-    height?: number | string | undefined | undefined;
-    width?: number | string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    content?: string | undefined | undefined;
     children?: import('react').ReactNode;
     form?: string | undefined | undefined;
     slot?: string | undefined | undefined;
@@ -33,12 +65,16 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     suppressHydrationWarning?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
     color?: string | undefined | undefined;
+    height?: number | string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     max?: number | string | undefined | undefined;
     min?: number | string | undefined | undefined;
     name?: string | undefined | undefined;
-    type?: import('rc-input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    nonce?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    type?: import('@rc-component/input/lib/utils/types').LiteralUnion<"button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week", string> | undefined;
+    width?: number | string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
@@ -113,18 +149,18 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     onFocusCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
     onBlur?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
     onBlurCapture?: import('react').FocusEventHandler<HTMLInputElement> | undefined;
-    onChange?: import('react').ChangeEventHandler<HTMLInputElement> | undefined;
-    onChangeCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+    onChange?: import('react').ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined;
+    onChangeCapture?: import('react').ChangeEventHandler<HTMLInputElement, Element> | undefined;
     onBeforeInput?: import('react').InputEventHandler<HTMLInputElement> | undefined;
-    onBeforeInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onInputCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onReset?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onResetCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onSubmit?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onSubmitCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onInvalid?: import('react').FormEventHandler<HTMLInputElement> | undefined;
-    onInvalidCapture?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+    onBeforeInputCapture?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+    onInput?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+    onInputCapture?: import('react').InputEventHandler<HTMLInputElement> | undefined;
+    onReset?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+    onResetCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+    onSubmit?: import('react').SubmitEventHandler<HTMLInputElement> | undefined;
+    onSubmitCapture?: import('react').SubmitEventHandler<HTMLInputElement> | undefined;
+    onInvalid?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
+    onInvalidCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
     onLoad?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
     onLoadCapture?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
     onError?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
@@ -245,6 +281,8 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLInputElement> | undefined;
     onScroll?: import('react').UIEventHandler<HTMLInputElement> | undefined;
     onScrollCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+    onScrollEnd?: import('react').UIEventHandler<HTMLInputElement> | undefined;
+    onScrollEndCapture?: import('react').UIEventHandler<HTMLInputElement> | undefined;
     onWheel?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
     onWheelCapture?: import('react').WheelEventHandler<HTMLInputElement> | undefined;
     onAnimationStart?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
@@ -253,13 +291,25 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
     onAnimationIteration?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
     onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLInputElement> | undefined;
+    onToggle?: import('react').ToggleEventHandler<HTMLInputElement> | undefined;
+    onBeforeToggle?: import('react').ToggleEventHandler<HTMLInputElement> | undefined;
+    onTransitionCancel?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionCancelCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
-    value?: import('rc-input/lib/interface').ValueType;
+    onTransitionRun?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionRunCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionStart?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+    onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLInputElement> | undefined;
+    value?: import('@rc-component/input/lib/interface').ValueType;
     prefixCls?: string | undefined;
+    list?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
-    list?: string | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    content?: string | undefined | undefined;
+    multiple?: boolean | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -270,13 +320,12 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     radioGroup?: string | undefined | undefined;
     about?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
+    prefix?: import('react').ReactNode;
     property?: string | undefined | undefined;
     rel?: string | undefined | undefined;
     resource?: string | undefined | undefined;
@@ -293,35 +342,38 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    formAction?: string | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined | undefined;
     formMethod?: string | undefined | undefined;
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
-    count?: import('rc-input/lib/interface').CountConfig | undefined;
+    count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
     checked?: boolean | undefined | undefined;
     required?: boolean | undefined | undefined;
     alt?: string | undefined | undefined;
     autoComplete?: string | undefined;
     accept?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    multiple?: boolean | undefined | undefined;
     maxLength?: number | undefined | undefined;
     minLength?: number | undefined | undefined;
     src?: string | undefined | undefined;
     placeholder?: string | undefined | undefined;
     onClear?: (() => void) | undefined;
     allowClear?: boolean | {
+        disabled?: boolean;
         clearIcon?: import('react').ReactNode;
     } | undefined;
+    suffix?: import('react').ReactNode;
     readOnly?: boolean | undefined | undefined;
     showCount?: boolean | {
-        formatter: import('rc-input/lib/interface').ShowCountFormatter;
+        formatter: import('@rc-component/input/lib/interface').ShowCountFormatter;
     } | undefined;
     htmlSize?: number | undefined;
-    suffix?: import('react').ReactNode;
 } & import('react').RefAttributes<InputRef>>;

package/dist/src/components/input/Input.cjs

@@ -1,9 +1,35 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const formikAntd = require("formik-antd");
-const Input = ({ size = "large", ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(formikAntd.Input, { size, ...props });
+const antd = require("antd");
+const FormikField = require("../form/FormikField.cjs");
+const Input = ({
+  size = "large",
+  name,
+  validate,
+  fast,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormikField.FormikField, { name, validate, fast, children: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Input,
+    {
+      size,
+      name,
+      id: name,
+      ...props,
+      value: field.value,
+      onChange: (event) => {
+        field.onChange(event);
+        onChange == null ? void 0 : onChange(event);
+      },
+      onBlur: (event) => {
+        field.onBlur(event);
+        onBlur == null ? void 0 : onBlur(event);
+      }
+    }
+  ) });
 };
 exports.Input = Input;
 //# sourceMappingURL=Input.cjs.map

package/dist/src/components/input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import { Input as FormikAntdInput, InputProps } from 'formik-antd'\ntype Props = Expand<InputProps>\n\nexport const Input = ({ size = 'large', ...props }: Props) => {\n  return <FormikAntdInput size={size} {...props} />\n}\n"],"names":["jsx","FormikAntdInput"],"mappings":";;;;AAGO,MAAM,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAG,YAAmB;AAC5D,SAAOA,2BAAAA,IAACC,WAAAA,OAAA,EAAgB,MAAa,GAAG,MAAA,CAAO;AACjD;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import { Input as AntdInput, type InputProps } from 'antd'\nimport { FormikField, type FormikFieldProps } from '../form/FormikField'\ntype Props = Expand<InputProps & FormikFieldProps>\n\nexport const Input = ({\n  size = 'large',\n  name,\n  validate,\n  fast,\n  onChange,\n  onBlur,\n  ...props\n}: Props) => {\n  return (\n    <FormikField name={name} validate={validate} fast={fast}>\n      {({ field }) => (\n        <AntdInput\n          size={size}\n          name={name}\n          id={name}\n          {...props}\n          value={field.value}\n          onChange={(event) => {\n            field.onChange(event)\n            onChange?.(event)\n          }}\n          onBlur={(event) => {\n            field.onBlur(event)\n            onBlur?.(event)\n          }}\n        />\n      )}\n    </FormikField>\n  )\n}\n"],"names":["jsx","FormikField","AntdInput"],"mappings":";;;;;AAIO,MAAM,QAAQ,CAAC;AAAA,EACpB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACEA,2BAAAA,IAACC,2BAAY,MAAY,UAAoB,MAC1C,UAAA,CAAC,EAAE,YACFD,2BAAAA;AAAAA,IAACE,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACH,GAAG;AAAA,MACJ,OAAO,MAAM;AAAA,MACb,UAAU,CAAC,UAAU;AACnB,cAAM,SAAS,KAAK;AACpB,6CAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,UAAU;AACjB,cAAM,OAAO,KAAK;AAClB,yCAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;;"}

package/dist/src/components/input/Input.d.ts

@@ -1,4 +1,5 @@
-import { InputProps } from 'formik-antd';
-type Props = Expand<InputProps>;
-export declare const Input: ({ size, ...props }: Props) => import("react").JSX.Element;
+import { InputProps } from 'antd';
+import { FormikFieldProps } from '../form/FormikField.js';
+type Props = Expand<InputProps & FormikFieldProps>;
+export declare const Input: ({ size, name, validate, fast, onChange, onBlur, ...props }: Props) => import("react").JSX.Element;
 export {};

package/dist/src/components/input/Input.js

@@ -1,7 +1,33 @@
 import { jsx } from "react/jsx-runtime";
-import { Input as Input$1 } from "formik-antd";
-const Input = ({ size = "large", ...props }) => {
-  return /* @__PURE__ */ jsx(Input$1, { size, ...props });
+import { Input as Input$1 } from "antd";
+import { FormikField } from "../form/FormikField.js";
+const Input = ({
+  size = "large",
+  name,
+  validate,
+  fast,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormikField, { name, validate, fast, children: ({ field }) => /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      size,
+      name,
+      id: name,
+      ...props,
+      value: field.value,
+      onChange: (event) => {
+        field.onChange(event);
+        onChange == null ? void 0 : onChange(event);
+      },
+      onBlur: (event) => {
+        field.onBlur(event);
+        onBlur == null ? void 0 : onBlur(event);
+      }
+    }
+  ) });
 };
 export {
   Input

package/dist/src/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import { Input as FormikAntdInput, InputProps } from 'formik-antd'\ntype Props = Expand<InputProps>\n\nexport const Input = ({ size = 'large', ...props }: Props) => {\n  return <FormikAntdInput size={size} {...props} />\n}\n"],"names":["FormikAntdInput"],"mappings":";;AAGO,MAAM,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAG,YAAmB;AAC5D,SAAO,oBAACA,SAAA,EAAgB,MAAa,GAAG,MAAA,CAAO;AACjD;"}
+{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import { Input as AntdInput, type InputProps } from 'antd'\nimport { FormikField, type FormikFieldProps } from '../form/FormikField'\ntype Props = Expand<InputProps & FormikFieldProps>\n\nexport const Input = ({\n  size = 'large',\n  name,\n  validate,\n  fast,\n  onChange,\n  onBlur,\n  ...props\n}: Props) => {\n  return (\n    <FormikField name={name} validate={validate} fast={fast}>\n      {({ field }) => (\n        <AntdInput\n          size={size}\n          name={name}\n          id={name}\n          {...props}\n          value={field.value}\n          onChange={(event) => {\n            field.onChange(event)\n            onChange?.(event)\n          }}\n          onBlur={(event) => {\n            field.onBlur(event)\n            onBlur?.(event)\n          }}\n        />\n      )}\n    </FormikField>\n  )\n}\n"],"names":["AntdInput"],"mappings":";;;AAIO,MAAM,QAAQ,CAAC;AAAA,EACpB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACE,oBAAC,eAAY,MAAY,UAAoB,MAC1C,UAAA,CAAC,EAAE,YACF;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACH,GAAG;AAAA,MACJ,OAAO,MAAM;AAAA,MACb,UAAU,CAAC,UAAU;AACnB,cAAM,SAAS,KAAK;AACpB,6CAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,UAAU;AACjB,cAAM,OAAO,KAAK;AAClB,yCAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/src/components/inputnumber/InputNumber.cjs

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const formikAntd = require("formik-antd");
+const antd = require("antd");
+const FormikField = require("../form/FormikField.cjs");
 const cx = require("classnames");
 const InputNumber_module = require("./InputNumber.module.css.cjs");
 const react = require("@phosphor-icons/react");
@@ -11,12 +12,17 @@ const InputNumber = ({
   name,
   max,
   min,
+  validate,
+  fast,
+  onChange,
+  onBlur,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    formikAntd.InputNumber,
+  return /* @__PURE__ */ jsxRuntime.jsx(FormikField.FormikField, { name, validate, fast, children: ({ field, form }) => /* @__PURE__ */ jsxRuntime.jsx(
+    antd.InputNumber,
     {
       name,
+      id: name,
       max,
       min,
       step,
@@ -24,9 +30,18 @@ const InputNumber = ({
       upHandler: /* @__PURE__ */ jsxRuntime.jsx(react.CaretUpIcon, { weight: "bold", size: 12 }),
       downHandler: /* @__PURE__ */ jsxRuntime.jsx(react.CaretDownIcon, { weight: "bold", size: 12 }),
       size,
-      ...props
+      ...props,
+      value: field.value,
+      onChange: (value) => {
+        void form.setFieldValue(name, value);
+        onChange == null ? void 0 : onChange(value);
+      },
+      onBlur: (event) => {
+        field.onBlur(event);
+        onBlur == null ? void 0 : onBlur(event);
+      }
     }
-  );
+  ) });
 };
 exports.InputNumber = InputNumber;
 //# sourceMappingURL=InputNumber.cjs.map

package/dist/src/components/inputnumber/InputNumber.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.cjs","sources":["../../../../src/components/inputnumber/InputNumber.tsx"],"sourcesContent":["import { InputNumber as FormikInputNumber, InputNumberProps } from 'formik-antd'\nimport cx from 'classnames'\nimport styles from './InputNumber.module.css'\nimport { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'\ntype Props = Expand<InputNumberProps> & {\n  name: string\n  max?: number\n  min?: number\n  step?: number\n}\n\nexport const InputNumber = ({\n  size = 'large',\n  step = 1,\n  name,\n  max,\n  min,\n  ...props\n}: Props) => {\n  return (\n    <FormikInputNumber\n      name={name}\n      max={max}\n      min={min}\n      step={step}\n      className={cx(styles.j2InputNumber, props.className)}\n      upHandler={<CaretUpIcon weight=\"bold\" size={12} />}\n      downHandler={<CaretDownIcon weight=\"bold\" size={12} />}\n      size={size}\n      {...props}\n    />\n  )\n}\n"],"names":["jsx","FormikInputNumber","styles","CaretUpIcon","CaretDownIcon"],"mappings":";;;;;;;AAWO,MAAM,cAAc,CAAC;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACEA,2BAAAA;AAAAA,IAACC,WAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAGC,mBAAAA,QAAO,eAAe,MAAM,SAAS;AAAA,MACnD,WAAWF,2BAAAA,IAACG,mBAAA,EAAY,QAAO,QAAO,MAAM,IAAI;AAAA,MAChD,aAAaH,2BAAAA,IAACI,qBAAA,EAAc,QAAO,QAAO,MAAM,IAAI;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}
+{"version":3,"file":"InputNumber.cjs","sources":["../../../../src/components/inputnumber/InputNumber.tsx"],"sourcesContent":["import { InputNumber as AntdInputNumber, type InputNumberProps } from 'antd'\nimport { FormikField, type FormikFieldProps } from '../form/FormikField'\nimport cx from 'classnames'\nimport styles from './InputNumber.module.css'\nimport { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'\ntype Props = Expand<InputNumberProps & FormikFieldProps> & {\n  name: string\n  max?: number\n  min?: number\n  step?: number\n}\n\nexport const InputNumber = ({\n  size = 'large',\n  step = 1,\n  name,\n  max,\n  min,\n  validate,\n  fast,\n  onChange,\n  onBlur,\n  ...props\n}: Props) => {\n  return (\n    <FormikField name={name} validate={validate} fast={fast}>\n      {({ field, form }) => (\n        <AntdInputNumber\n          name={name}\n          id={name}\n          max={max}\n          min={min}\n          step={step}\n          className={cx(styles.j2InputNumber, props.className)}\n          upHandler={<CaretUpIcon weight=\"bold\" size={12} />}\n          downHandler={<CaretDownIcon weight=\"bold\" size={12} />}\n          size={size}\n          {...props}\n          value={field.value}\n          onChange={(value) => {\n            void form.setFieldValue(name, value)\n            onChange?.(value)\n          }}\n          onBlur={(event) => {\n            field.onBlur(event)\n            onBlur?.(event)\n          }}\n        />\n      )}\n    </FormikField>\n  )\n}\n"],"names":["jsx","FormikField","AntdInputNumber","styles","CaretUpIcon","CaretDownIcon"],"mappings":";;;;;;;;AAYO,MAAM,cAAc,CAAC;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACEA,+BAACC,YAAAA,eAAY,MAAY,UAAoB,MAC1C,UAAA,CAAC,EAAE,OAAO,KAAA,MACTD,2BAAAA;AAAAA,IAACE,KAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAGC,mBAAAA,QAAO,eAAe,MAAM,SAAS;AAAA,MACnD,WAAWH,2BAAAA,IAACI,mBAAA,EAAY,QAAO,QAAO,MAAM,IAAI;AAAA,MAChD,aAAaJ,2BAAAA,IAACK,qBAAA,EAAc,QAAO,QAAO,MAAM,IAAI;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,MACJ,OAAO,MAAM;AAAA,MACb,UAAU,CAAC,UAAU;AACnB,aAAK,KAAK,cAAc,MAAM,KAAK;AACnC,6CAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,UAAU;AACjB,cAAM,OAAO,KAAK;AAClB,yCAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;;"}

package/dist/src/components/inputnumber/InputNumber.d.ts

@@ -1,9 +1,10 @@
-import { InputNumberProps } from 'formik-antd';
-type Props = Expand<InputNumberProps> & {
+import { InputNumberProps } from 'antd';
+import { FormikFieldProps } from '../form/FormikField.js';
+type Props = Expand<InputNumberProps & FormikFieldProps> & {
     name: string;
     max?: number;
     min?: number;
     step?: number;
 };
-export declare const InputNumber: ({ size, step, name, max, min, ...props }: Props) => import("react").JSX.Element;
+export declare const InputNumber: ({ size, step, name, max, min, validate, fast, onChange, onBlur, ...props }: Props) => import("react").JSX.Element;
 export {};

package/dist/src/components/inputnumber/InputNumber.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { InputNumber as InputNumber$1 } from "formik-antd";
+import { InputNumber as InputNumber$1 } from "antd";
+import { FormikField } from "../form/FormikField.js";
 import cx from "classnames";
 import styles from "./InputNumber.module.css.js";
 import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
@@ -9,12 +10,17 @@ const InputNumber = ({
   name,
   max,
   min,
+  validate,
+  fast,
+  onChange,
+  onBlur,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormikField, { name, validate, fast, children: ({ field, form }) => /* @__PURE__ */ jsx(
     InputNumber$1,
     {
       name,
+      id: name,
       max,
       min,
       step,
@@ -22,9 +28,18 @@ const InputNumber = ({
       upHandler: /* @__PURE__ */ jsx(CaretUpIcon, { weight: "bold", size: 12 }),
       downHandler: /* @__PURE__ */ jsx(CaretDownIcon, { weight: "bold", size: 12 }),
       size,
-      ...props
+      ...props,
+      value: field.value,
+      onChange: (value) => {
+        void form.setFieldValue(name, value);
+        onChange == null ? void 0 : onChange(value);
+      },
+      onBlur: (event) => {
+        field.onBlur(event);
+        onBlur == null ? void 0 : onBlur(event);
+      }
     }
-  );
+  ) });
 };
 export {
   InputNumber

package/dist/src/components/inputnumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","sources":["../../../../src/components/inputnumber/InputNumber.tsx"],"sourcesContent":["import { InputNumber as FormikInputNumber, InputNumberProps } from 'formik-antd'\nimport cx from 'classnames'\nimport styles from './InputNumber.module.css'\nimport { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'\ntype Props = Expand<InputNumberProps> & {\n  name: string\n  max?: number\n  min?: number\n  step?: number\n}\n\nexport const InputNumber = ({\n  size = 'large',\n  step = 1,\n  name,\n  max,\n  min,\n  ...props\n}: Props) => {\n  return (\n    <FormikInputNumber\n      name={name}\n      max={max}\n      min={min}\n      step={step}\n      className={cx(styles.j2InputNumber, props.className)}\n      upHandler={<CaretUpIcon weight=\"bold\" size={12} />}\n      downHandler={<CaretDownIcon weight=\"bold\" size={12} />}\n      size={size}\n      {...props}\n    />\n  )\n}\n"],"names":["FormikInputNumber"],"mappings":";;;;;AAWO,MAAM,cAAc,CAAC;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,eAAe,MAAM,SAAS;AAAA,MACnD,WAAW,oBAAC,aAAA,EAAY,QAAO,QAAO,MAAM,IAAI;AAAA,MAChD,aAAa,oBAAC,eAAA,EAAc,QAAO,QAAO,MAAM,IAAI;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"InputNumber.js","sources":["../../../../src/components/inputnumber/InputNumber.tsx"],"sourcesContent":["import { InputNumber as AntdInputNumber, type InputNumberProps } from 'antd'\nimport { FormikField, type FormikFieldProps } from '../form/FormikField'\nimport cx from 'classnames'\nimport styles from './InputNumber.module.css'\nimport { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'\ntype Props = Expand<InputNumberProps & FormikFieldProps> & {\n  name: string\n  max?: number\n  min?: number\n  step?: number\n}\n\nexport const InputNumber = ({\n  size = 'large',\n  step = 1,\n  name,\n  max,\n  min,\n  validate,\n  fast,\n  onChange,\n  onBlur,\n  ...props\n}: Props) => {\n  return (\n    <FormikField name={name} validate={validate} fast={fast}>\n      {({ field, form }) => (\n        <AntdInputNumber\n          name={name}\n          id={name}\n          max={max}\n          min={min}\n          step={step}\n          className={cx(styles.j2InputNumber, props.className)}\n          upHandler={<CaretUpIcon weight=\"bold\" size={12} />}\n          downHandler={<CaretDownIcon weight=\"bold\" size={12} />}\n          size={size}\n          {...props}\n          value={field.value}\n          onChange={(value) => {\n            void form.setFieldValue(name, value)\n            onChange?.(value)\n          }}\n          onBlur={(event) => {\n            field.onBlur(event)\n            onBlur?.(event)\n          }}\n        />\n      )}\n    </FormikField>\n  )\n}\n"],"names":["AntdInputNumber"],"mappings":";;;;;;AAYO,MAAM,cAAc,CAAC;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAa;AACX,SACE,oBAAC,eAAY,MAAY,UAAoB,MAC1C,UAAA,CAAC,EAAE,OAAO,KAAA,MACT;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,eAAe,MAAM,SAAS;AAAA,MACnD,WAAW,oBAAC,aAAA,EAAY,QAAO,QAAO,MAAM,IAAI;AAAA,MAChD,aAAa,oBAAC,eAAA,EAAc,QAAO,QAAO,MAAM,IAAI;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,MACJ,OAAO,MAAM;AAAA,MACb,UAAU,CAAC,UAAU;AACnB,aAAK,KAAK,cAAc,MAAM,KAAK;AACnC,6CAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,UAAU;AACjB,cAAM,OAAO,KAAK;AAClB,yCAAS;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/src/components/inputnumber/InputNumber.module.css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const j2InputNumber = "_j2InputNumber_1jmfn_1";
+const j2InputNumber = "_j2InputNumber_1t2hv_1";
 const styles = {
   j2InputNumber
 };

package/dist/src/components/inputnumber/InputNumber.module.css.js

@@ -1,4 +1,4 @@
-const j2InputNumber = "_j2InputNumber_1jmfn_1";
+const j2InputNumber = "_j2InputNumber_1t2hv_1";
 const styles = {
   j2InputNumber
 };

package/dist/src/components/manageColumns/ManageColumnsItem.cjs

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cx = require("classnames");
+const react = require("@phosphor-icons/react");
+const sortable = require("@dnd-kit/sortable");
+const utilities = require("@dnd-kit/utilities");
+const Checkbox = require("../checkbox/Checkbox.cjs");
+const ManageColumnsItem = React.memo(function ManageColumnsItem2({
+  id,
+  label,
+  visible,
+  pinned,
+  onToggle
+}) {
+  const handleToggle = React.useCallback(() => onToggle(id), [onToggle, id]);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({
+    id,
+    // Boolean shorthand only disables dragging, not dropping onto a pinned row.
+    disabled: { draggable: pinned, droppable: pinned }
+  });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cx(
+        "flex items-center justify-between gap-2 py-1.5 pl-2 -ml-2 bg-white rounded",
+        "has-[button:hover]:bg-j2-gray-2",
+        isDragging && "shadow-md z-10 relative",
+        pinned && "opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox.Checkbox,
+          {
+            checked: visible,
+            disabled: pinned,
+            onChange: pinned ? void 0 : handleToggle,
+            className: cx(
+              // No gap: antd's own .ant-checkbox-label already pads before children.
+              "flex items-center flex-1 min-w-0",
+              pinned ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-j2-lg text-j2-text", title: label, children: label })
+          }
+        ),
+        !pinned && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            ...attributes,
+            ...listeners,
+            "aria-label": `Drag to reorder ${label}`,
+            className: "p-1 text-j2-text cursor-grab active:cursor-grabbing",
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.DotsSixIcon, { size: 16, weight: "bold", className: "rotate-90" })
+          }
+        )
+      ]
+    }
+  );
+});
+exports.ManageColumnsItem = ManageColumnsItem;
+//# sourceMappingURL=ManageColumnsItem.cjs.map

package/dist/src/components/manageColumns/ManageColumnsItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageColumnsItem.cjs","sources":["../../../../src/components/manageColumns/ManageColumnsItem.tsx"],"sourcesContent":["import { memo, useCallback } from 'react'\nimport cx from 'classnames'\nimport { DotsSixIcon } from '@phosphor-icons/react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\n\nimport { Checkbox } from '../checkbox'\n\nexport const ManageColumnsItem = memo(function ManageColumnsItem({\n  id,\n  label,\n  visible,\n  pinned,\n  onToggle,\n}: {\n  id: string\n  label: string\n  visible: boolean\n  pinned: boolean\n  onToggle: (id: string) => void\n}) {\n  const handleToggle = useCallback(() => onToggle(id), [onToggle, id])\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({\n    id,\n    // Boolean shorthand only disables dragging, not dropping onto a pinned row.\n    disabled: { draggable: pinned, droppable: pinned },\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={cx(\n        'flex items-center justify-between gap-2 py-1.5 pl-2 -ml-2 bg-white rounded',\n        'has-[button:hover]:bg-j2-gray-2',\n        isDragging && 'shadow-md z-10 relative',\n        pinned && 'opacity-50'\n      )}\n    >\n      <Checkbox\n        checked={visible}\n        disabled={pinned}\n        onChange={pinned ? undefined : handleToggle}\n        className={cx(\n          // No gap: antd's own .ant-checkbox-label already pads before children.\n          'flex items-center flex-1 min-w-0',\n          pinned ? 'cursor-not-allowed' : 'cursor-pointer'\n        )}\n      >\n        <span className=\"truncate text-j2-lg text-j2-text\" title={label}>\n          {label}\n        </span>\n      </Checkbox>\n      {!pinned && (\n        <button\n          type=\"button\"\n          {...attributes}\n          {...listeners}\n          aria-label={`Drag to reorder ${label}`}\n          className=\"p-1 text-j2-text cursor-grab active:cursor-grabbing\"\n        >\n          <DotsSixIcon size={16} weight=\"bold\" className=\"rotate-90\" />\n        </button>\n      )}\n    </div>\n  )\n})\n"],"names":["memo","ManageColumnsItem","useCallback","useSortable","CSS","jsxs","jsx","Checkbox","DotsSixIcon"],"mappings":";;;;;;;;;AAQO,MAAM,oBAAoBA,MAAAA,KAAK,SAASC,mBAAkB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,eAAeC,MAAAA,YAAY,MAAM,SAAS,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC;AAEnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,qBAAY;AAAA,IACd;AAAA;AAAA,IAEA,UAAU,EAAE,WAAW,QAAQ,WAAW,OAAA;AAAA,EAAO,CAClD;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,UAAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EAAA;AAGF,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,UAAU;AAAA,MAAA;AAAA,MAGZ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAACC,SAAAA;AAAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,UAAU,SAAS,SAAY;AAAA,YAC/B,WAAW;AAAA;AAAA,cAET;AAAA,cACA,SAAS,uBAAuB;AAAA,YAAA;AAAA,YAGlC,yCAAC,QAAA,EAAK,WAAU,oCAAmC,OAAO,OACvD,UAAA,MAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,CAAC,UACAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,cAAY,mBAAmB,KAAK;AAAA,YACpC,WAAU;AAAA,YAEV,yCAACE,MAAAA,aAAA,EAAY,MAAM,IAAI,QAAO,QAAO,WAAU,YAAA,CAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;;"}

package/dist/src/components/manageColumns/ManageColumnsItem.d.ts

@@ -0,0 +1,7 @@
+export declare const ManageColumnsItem: import('react').NamedExoticComponent<{
+    id: string;
+    label: string;
+    visible: boolean;
+    pinned: boolean;
+    onToggle: (id: string) => void;
+}>;