@fuf-stack/uniform 1.8.4 → 1.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Checkboxes/index.cjs +9 -9
- package/dist/Checkboxes/index.js +8 -8
- package/dist/FieldArray/index.cjs +9 -9
- package/dist/FieldArray/index.js +8 -8
- package/dist/Form/index.cjs +9 -9
- package/dist/Form/index.js +8 -8
- package/dist/Input/index.cjs +9 -9
- package/dist/Input/index.js +8 -8
- package/dist/RadioBoxes/index.cjs +9 -9
- package/dist/RadioBoxes/index.js +8 -8
- package/dist/RadioTabs/index.cjs +9 -9
- package/dist/RadioTabs/index.js +8 -8
- package/dist/Radios/index.cjs +9 -9
- package/dist/Radios/index.js +8 -8
- package/dist/Select/index.cjs +9 -9
- package/dist/Select/index.js +8 -8
- package/dist/SubmitButton/index.cjs +9 -9
- package/dist/SubmitButton/index.js +8 -8
- package/dist/Switch/index.cjs +9 -9
- package/dist/Switch/index.js +8 -8
- package/dist/TextArea/index.cjs +9 -9
- package/dist/TextArea/index.js +8 -8
- package/dist/{chunk-G3A7AEDA.js → chunk-24XJ7TKM.js} +7 -5
- package/dist/chunk-24XJ7TKM.js.map +1 -0
- package/dist/{chunk-6NJJHUKF.js → chunk-26VE4IGU.js} +2 -2
- package/dist/{chunk-FP5KRDUN.cjs → chunk-2UQCRQEJ.cjs} +3 -3
- package/dist/{chunk-FP5KRDUN.cjs.map → chunk-2UQCRQEJ.cjs.map} +1 -1
- package/dist/{chunk-4UBIV2LI.cjs → chunk-3RL6SVXZ.cjs} +3 -3
- package/dist/{chunk-4UBIV2LI.cjs.map → chunk-3RL6SVXZ.cjs.map} +1 -1
- package/dist/{chunk-64YW5GV2.js → chunk-466UFJGQ.js} +3 -3
- package/dist/{chunk-MKANLM7V.cjs → chunk-47NCHVEA.cjs} +3 -3
- package/dist/{chunk-MKANLM7V.cjs.map → chunk-47NCHVEA.cjs.map} +1 -1
- package/dist/{chunk-LB6GH6FJ.cjs → chunk-4FXGW7IH.cjs} +3 -3
- package/dist/{chunk-LB6GH6FJ.cjs.map → chunk-4FXGW7IH.cjs.map} +1 -1
- package/dist/{chunk-QOBWD4QR.js → chunk-4UR2T76K.js} +3 -3
- package/dist/{chunk-ZLFYOJ4M.js → chunk-5MTIQ6WD.js} +2 -2
- package/dist/{chunk-MZIVLP3U.cjs → chunk-6AWHOBNL.cjs} +3 -3
- package/dist/{chunk-MZIVLP3U.cjs.map → chunk-6AWHOBNL.cjs.map} +1 -1
- package/dist/{chunk-FBH7RW4U.cjs → chunk-ALI7JORZ.cjs} +3 -3
- package/dist/{chunk-FBH7RW4U.cjs.map → chunk-ALI7JORZ.cjs.map} +1 -1
- package/dist/{chunk-KQEM5HFD.cjs → chunk-AQJLKHAE.cjs} +39 -1
- package/dist/chunk-AQJLKHAE.cjs.map +1 -0
- package/dist/{chunk-ROFP3IVU.cjs → chunk-BZGPHQT3.cjs} +6 -6
- package/dist/{chunk-ROFP3IVU.cjs.map → chunk-BZGPHQT3.cjs.map} +1 -1
- package/dist/{chunk-XOXGE2E3.cjs → chunk-D4AAQIY3.cjs} +5 -5
- package/dist/{chunk-XOXGE2E3.cjs.map → chunk-D4AAQIY3.cjs.map} +1 -1
- package/dist/{chunk-5ASOVFNF.js → chunk-D7DE345B.js} +3 -3
- package/dist/{chunk-5RNATZD6.js → chunk-DJKC3SR6.js} +3 -3
- package/dist/{chunk-C2JPKUCY.cjs → chunk-FYN7ZWLW.cjs} +3 -3
- package/dist/{chunk-C2JPKUCY.cjs.map → chunk-FYN7ZWLW.cjs.map} +1 -1
- package/dist/{chunk-M5CEG4RM.cjs → chunk-GNZZMAQT.cjs} +3 -3
- package/dist/{chunk-M5CEG4RM.cjs.map → chunk-GNZZMAQT.cjs.map} +1 -1
- package/dist/{chunk-SDHZAPPA.cjs → chunk-HEPNEBRF.cjs} +3 -3
- package/dist/{chunk-SDHZAPPA.cjs.map → chunk-HEPNEBRF.cjs.map} +1 -1
- package/dist/{chunk-2YHO6FBK.js → chunk-IV45K4WU.js} +39 -1
- package/dist/chunk-IV45K4WU.js.map +1 -0
- package/dist/{chunk-HH7YK5QR.js → chunk-JAIMTYVM.js} +3 -3
- package/dist/{chunk-TGYJUEO2.js → chunk-L3TIPYMG.js} +2 -2
- package/dist/{chunk-O56EUQR7.js → chunk-LO7UKHOS.js} +2 -2
- package/dist/{chunk-IXJISVRO.cjs → chunk-LVYHMBHD.cjs} +9 -7
- package/dist/chunk-LVYHMBHD.cjs.map +1 -0
- package/dist/{chunk-TJK2MERL.cjs → chunk-NI3WUU7T.cjs} +5 -5
- package/dist/{chunk-TJK2MERL.cjs.map → chunk-NI3WUU7T.cjs.map} +1 -1
- package/dist/{chunk-TZSGJQNR.cjs → chunk-OFP7L5QS.cjs} +3 -3
- package/dist/{chunk-TZSGJQNR.cjs.map → chunk-OFP7L5QS.cjs.map} +1 -1
- package/dist/{chunk-DFVZ4AV5.js → chunk-PQ3LMXOL.js} +2 -2
- package/dist/{chunk-BGNZCW7J.js → chunk-QIAA23FW.js} +2 -2
- package/dist/{chunk-GNK45IFM.js → chunk-RCLQ6NFK.js} +2 -2
- package/dist/{chunk-CUVHORQH.cjs → chunk-REEV3HCP.cjs} +5 -5
- package/dist/{chunk-CUVHORQH.cjs.map → chunk-REEV3HCP.cjs.map} +1 -1
- package/dist/{chunk-2BWUTUVE.js → chunk-SJWL6EMI.js} +2 -2
- package/dist/{chunk-TPZTWRPL.js → chunk-TJXQAPBR.js} +2 -2
- package/dist/{chunk-MUKDMHP6.js → chunk-U34APM3G.js} +2 -2
- package/dist/{chunk-CHBLPOFP.cjs → chunk-U6R7KZQZ.cjs} +3 -3
- package/dist/{chunk-CHBLPOFP.cjs.map → chunk-U6R7KZQZ.cjs.map} +1 -1
- package/dist/{chunk-NAHYXRGT.cjs → chunk-VPQQJZ45.cjs} +5 -5
- package/dist/{chunk-NAHYXRGT.cjs.map → chunk-VPQQJZ45.cjs.map} +1 -1
- package/dist/{chunk-K6TW2OY3.js → chunk-WG4HTBZY.js} +2 -2
- package/dist/hooks/index.cjs +8 -8
- package/dist/hooks/index.js +7 -7
- package/dist/hooks/useClientValidation/index.cjs +4 -4
- package/dist/hooks/useClientValidation/index.js +3 -3
- package/dist/hooks/useController/index.cjs +3 -3
- package/dist/hooks/useController/index.js +2 -2
- package/dist/hooks/useFormContext/index.cjs +3 -3
- package/dist/hooks/useFormContext/index.d.cts +1 -1
- package/dist/hooks/useFormContext/index.d.ts +1 -1
- package/dist/hooks/useFormContext/index.js +2 -2
- package/dist/hooks/useUniformField/index.cjs +5 -5
- package/dist/hooks/useUniformField/index.js +4 -4
- package/dist/hooks/useUniformFieldArray/index.cjs +6 -6
- package/dist/hooks/useUniformFieldArray/index.js +5 -5
- package/dist/hooks/useWatchUserChange/index.cjs +4 -4
- package/dist/hooks/useWatchUserChange/index.js +3 -3
- package/dist/index.cjs +19 -19
- package/dist/index.js +18 -18
- package/package.json +5 -4
- package/dist/chunk-2YHO6FBK.js.map +0 -1
- package/dist/chunk-G3A7AEDA.js.map +0 -1
- package/dist/chunk-IXJISVRO.cjs.map +0 -1
- package/dist/chunk-KQEM5HFD.cjs.map +0 -1
- /package/dist/{chunk-6NJJHUKF.js.map → chunk-26VE4IGU.js.map} +0 -0
- /package/dist/{chunk-64YW5GV2.js.map → chunk-466UFJGQ.js.map} +0 -0
- /package/dist/{chunk-QOBWD4QR.js.map → chunk-4UR2T76K.js.map} +0 -0
- /package/dist/{chunk-ZLFYOJ4M.js.map → chunk-5MTIQ6WD.js.map} +0 -0
- /package/dist/{chunk-5ASOVFNF.js.map → chunk-D7DE345B.js.map} +0 -0
- /package/dist/{chunk-5RNATZD6.js.map → chunk-DJKC3SR6.js.map} +0 -0
- /package/dist/{chunk-HH7YK5QR.js.map → chunk-JAIMTYVM.js.map} +0 -0
- /package/dist/{chunk-TGYJUEO2.js.map → chunk-L3TIPYMG.js.map} +0 -0
- /package/dist/{chunk-O56EUQR7.js.map → chunk-LO7UKHOS.js.map} +0 -0
- /package/dist/{chunk-DFVZ4AV5.js.map → chunk-PQ3LMXOL.js.map} +0 -0
- /package/dist/{chunk-BGNZCW7J.js.map → chunk-QIAA23FW.js.map} +0 -0
- /package/dist/{chunk-GNK45IFM.js.map → chunk-RCLQ6NFK.js.map} +0 -0
- /package/dist/{chunk-2BWUTUVE.js.map → chunk-SJWL6EMI.js.map} +0 -0
- /package/dist/{chunk-TPZTWRPL.js.map → chunk-TJXQAPBR.js.map} +0 -0
- /package/dist/{chunk-MUKDMHP6.js.map → chunk-U34APM3G.js.map} +0 -0
- /package/dist/{chunk-K6TW2OY3.js.map → chunk-WG4HTBZY.js.map} +0 -0
package/dist/Switch/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Switch_default,
|
|
3
3
|
Switch_default2
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-DJKC3SR6.js";
|
|
5
5
|
import "../chunk-V3GDAELU.js";
|
|
6
6
|
import "../chunk-ZJDU5EPE.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-JAIMTYVM.js";
|
|
8
|
+
import "../chunk-24XJ7TKM.js";
|
|
9
9
|
import "../chunk-NTDKZW4E.js";
|
|
10
10
|
import "../chunk-ELYGQTXB.js";
|
|
11
|
-
import "../chunk-
|
|
11
|
+
import "../chunk-5MTIQ6WD.js";
|
|
12
12
|
import "../chunk-AHJJIANM.js";
|
|
13
13
|
import "../chunk-CNTOODUQ.js";
|
|
14
|
-
import "../chunk-
|
|
15
|
-
import "../chunk-
|
|
16
|
-
import "../chunk-
|
|
17
|
-
import "../chunk-
|
|
14
|
+
import "../chunk-LO7UKHOS.js";
|
|
15
|
+
import "../chunk-26VE4IGU.js";
|
|
16
|
+
import "../chunk-SJWL6EMI.js";
|
|
17
|
+
import "../chunk-IV45K4WU.js";
|
|
18
18
|
import "../chunk-O2XJNQQK.js";
|
|
19
19
|
import "../chunk-K2V4ULA2.js";
|
|
20
20
|
export {
|
package/dist/TextArea/index.cjs
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkOFP7L5QScjs = require('../chunk-OFP7L5QS.cjs');
|
|
5
5
|
require('../chunk-KWJMKX5J.cjs');
|
|
6
6
|
require('../chunk-NTOYCWCJ.cjs');
|
|
7
|
-
require('../chunk-
|
|
8
|
-
require('../chunk-
|
|
7
|
+
require('../chunk-REEV3HCP.cjs');
|
|
8
|
+
require('../chunk-LVYHMBHD.cjs');
|
|
9
9
|
require('../chunk-OE5BOGGX.cjs');
|
|
10
10
|
require('../chunk-NHEZXA4H.cjs');
|
|
11
|
-
require('../chunk-
|
|
11
|
+
require('../chunk-6AWHOBNL.cjs');
|
|
12
12
|
require('../chunk-PCTYJUY7.cjs');
|
|
13
13
|
require('../chunk-56TQOKG7.cjs');
|
|
14
|
-
require('../chunk-
|
|
15
|
-
require('../chunk-
|
|
16
|
-
require('../chunk-
|
|
17
|
-
require('../chunk-
|
|
14
|
+
require('../chunk-HEPNEBRF.cjs');
|
|
15
|
+
require('../chunk-2UQCRQEJ.cjs');
|
|
16
|
+
require('../chunk-FYN7ZWLW.cjs');
|
|
17
|
+
require('../chunk-AQJLKHAE.cjs');
|
|
18
18
|
require('../chunk-OKJWLH7T.cjs');
|
|
19
19
|
require('../chunk-555JRYCS.cjs');
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
exports.TextArea =
|
|
23
|
+
exports.TextArea = _chunkOFP7L5QScjs.TextArea_default; exports.default = _chunkOFP7L5QScjs.TextArea_default2;
|
|
24
24
|
//# sourceMappingURL=index.cjs.map
|
package/dist/TextArea/index.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import {
|
|
2
2
|
TextArea_default,
|
|
3
3
|
TextArea_default2
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-QIAA23FW.js";
|
|
5
5
|
import "../chunk-V3GDAELU.js";
|
|
6
6
|
import "../chunk-ZJDU5EPE.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-JAIMTYVM.js";
|
|
8
|
+
import "../chunk-24XJ7TKM.js";
|
|
9
9
|
import "../chunk-NTDKZW4E.js";
|
|
10
10
|
import "../chunk-ELYGQTXB.js";
|
|
11
|
-
import "../chunk-
|
|
11
|
+
import "../chunk-5MTIQ6WD.js";
|
|
12
12
|
import "../chunk-AHJJIANM.js";
|
|
13
13
|
import "../chunk-CNTOODUQ.js";
|
|
14
|
-
import "../chunk-
|
|
15
|
-
import "../chunk-
|
|
16
|
-
import "../chunk-
|
|
17
|
-
import "../chunk-
|
|
14
|
+
import "../chunk-LO7UKHOS.js";
|
|
15
|
+
import "../chunk-26VE4IGU.js";
|
|
16
|
+
import "../chunk-SJWL6EMI.js";
|
|
17
|
+
import "../chunk-IV45K4WU.js";
|
|
18
18
|
import "../chunk-O2XJNQQK.js";
|
|
19
19
|
import "../chunk-K2V4ULA2.js";
|
|
20
20
|
export {
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-ELYGQTXB.js";
|
|
7
7
|
import {
|
|
8
8
|
useController
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-5MTIQ6WD.js";
|
|
10
10
|
import {
|
|
11
11
|
useInput
|
|
12
12
|
} from "./chunk-AHJJIANM.js";
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
} from "./chunk-CNTOODUQ.js";
|
|
16
16
|
import {
|
|
17
17
|
useFormContext
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-SJWL6EMI.js";
|
|
19
19
|
import {
|
|
20
20
|
__spreadProps,
|
|
21
21
|
__spreadValues
|
|
@@ -27,8 +27,10 @@ import { useDebounce } from "@fuf-stack/pixels";
|
|
|
27
27
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
28
28
|
var useDebouncedInvalid = (invalid, delayMs) => {
|
|
29
29
|
const prefersReducedMotion = useReducedMotion();
|
|
30
|
-
const
|
|
31
|
-
|
|
30
|
+
const isTest = typeof process !== "undefined" && (process.env.NODE_ENV === "test" || process.env.VITEST === "true");
|
|
31
|
+
const disabled = !!prefersReducedMotion || isTest;
|
|
32
|
+
const debouncedInvalid = useDebounce(invalid, delayMs, disabled);
|
|
33
|
+
return debouncedInvalid;
|
|
32
34
|
};
|
|
33
35
|
function useUniformField(params) {
|
|
34
36
|
var _a;
|
|
@@ -129,4 +131,4 @@ function useUniformField(params) {
|
|
|
129
131
|
export {
|
|
130
132
|
useUniformField
|
|
131
133
|
};
|
|
132
|
-
//# sourceMappingURL=chunk-
|
|
134
|
+
//# sourceMappingURL=chunk-24XJ7TKM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useUniformField/useUniformField.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FieldError, FieldValues, Path } from 'react-hook-form';\nimport type { InputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\nimport React from 'react';\n\nimport { useReducedMotion } from '@fuf-stack/pixel-motion';\nimport { useDebounce } from '@fuf-stack/pixels';\n\nimport { FieldCopyTestIdButton } from '../../partials/FieldCopyTestIdButton';\nimport { FieldValidationError } from '../../partials/FieldValidationError';\nimport { useController } from '../useController/useController';\nimport { useFormContext } from '../useFormContext/useFormContext';\nimport { useInput } from '../useInput/useInput';\nimport { useInputValueTransform } from '../useInputValueTransform/useInputValueTransform';\n\n/**\n * Debounce invalid state changes for smooth UI transitions while respecting accessibility.\n *\n * Behavior:\n * - Specifically intended for validation invalid flags: debounces both\n * true → false and false → true transitions by `delayMs` to prevent\n * flicker and allow enter/exit animations to complete.\n * - If the user prefers reduced motion (via `useReducedMotion` from\n * `@fuf-stack/pixel-motion`), updates apply immediately with no delay.\n * - In test environments, updates apply immediately to avoid timing issues.\n */\nconst useDebouncedInvalid = (invalid: boolean, delayMs: number) => {\n const prefersReducedMotion = useReducedMotion();\n // Disable debouncing in tests or when user prefers reduced motion\n const isTest =\n typeof process !== 'undefined' &&\n (process.env.NODE_ENV === 'test' || process.env.VITEST === 'true');\n const disabled = !!prefersReducedMotion || isTest;\n const debouncedInvalid = useDebounce(invalid, delayMs, disabled);\n\n return debouncedInvalid;\n};\n\nexport interface UseUniformFieldParams<\n TFieldValues extends FieldValues = FieldValues,\n TDisplay = unknown,\n> {\n /** Form field name */\n name: Path<TFieldValues> & string;\n /** Disable the field */\n disabled?: boolean;\n /** Optional explicit test id used to build stable test ids */\n testId?: string;\n /** Optional label content; pass false to suppress label entirely */\n label?: ReactNode | false;\n /** Input type for special number handling */\n type?: 'text' | 'number' | 'password';\n /** Optional value transformation between form and display values */\n transform?: InputValueTransform<TDisplay>;\n}\n\nexport interface UseUniformFieldReturn<\n TFieldValues extends FieldValues = FieldValues,\n> {\n /** react-hook-form control instance for advanced integrations */\n control: ReturnType<typeof useFormContext<TFieldValues>>['control'];\n /** Debug mode from Uniform provider */\n debugMode: ReturnType<typeof useFormContext<TFieldValues>>['debugMode'];\n /** Current value used to initialize uncontrolled components */\n defaultValue: unknown;\n /** Whether the field is currently disabled (from RHF) */\n disabled: boolean | undefined;\n /** Validation error(s) for the field */\n error: FieldError[] | undefined;\n /** Pre-built errorMessage node to plug into components */\n errorMessage: ReactNode | null;\n /** RHF controller field with transformed value/onChange (use this for simple components) */\n field: ReturnType<typeof useController<TFieldValues>>['field'];\n /** Helper to spread standardized error message props to underlying components */\n getErrorMessageProps: ReturnType<typeof useInput>['getErrorMessageProps'];\n /** Helper to spread standardized helper wrapper props (for spacing/animation) */\n getHelperWrapperProps: ReturnType<typeof useInput>['getHelperWrapperProps'];\n /** Helper to spread standardized label props to underlying components */\n getLabelProps: ReturnType<typeof useInput>['getLabelProps'];\n /** Access current form values (converted to validation-friendly format) */\n getValues: ReturnType<typeof useFormContext<TFieldValues>>['getValues'];\n /** Whether the field should show invalid state (debounced for smooth animations). True when field is invalid AND (dirty OR touched OR submitted) */\n invalid: boolean;\n /** Computed label node including optional test id copy button */\n label: ReactNode | null;\n /** onBlur handler from controller */\n onBlur: ReturnType<typeof useController<TFieldValues>>['field']['onBlur'];\n /** onChange handler from controller (with transform applied) */\n onChange: ReturnType<typeof useController<TFieldValues>>['field']['onChange'];\n /** Ref to forward to underlying control */\n ref: ReturnType<typeof useController<TFieldValues>>['field']['ref'];\n /** Whether the field is required according to validation schema */\n required: boolean;\n /** Reset a specific field in the form */\n resetField: ReturnType<typeof useFormContext<TFieldValues>>['resetField'];\n /** Generated HTML data-testid for the field */\n testId: string;\n}\n\n/**\n * Combines frequently used form field logic into a single hook.\n *\n * Provides:\n * - Enhanced form context (validation-aware state, `testId`, value transforms)\n * - Controller field with nullish conversion handling\n * - Value transformation via `transform` prop:\n * • Allows disentangled display and form values (e.g., string ↔ object, boolean ↔ array)\n * • Automatically applies `toDisplayValue` to field value for components\n * • Automatically applies `toFormValue` to display value when onChange is called\n * • Works with `type` prop for automatic number/string conversion\n * • Examples: storing objects while displaying strings, storing booleans as arrays, enriching values with metadata\n * - Debounced `invalid` state with smart timing:\n * • `true` (field becomes invalid): applies immediately so errors show right away\n * • `false` (field becomes valid): delayed 200ms to allow smooth exit animations\n * • Respects `prefers-reduced-motion` by skipping delays when user prefers reduced motion\n * - Smart `invalid` visibility (via `showInvalid`):\n * • Shows errors when field is dirty OR touched OR form has been submitted\n * • Prevents showing errors on pristine/untouched fields for better UX\n * • Works well for all field types (text inputs, checkboxes, radios, arrays)\n * - Prebuilt `errorMessage` React node using `FieldValidationError`\n * - Computed `label` node which appends a `FieldCopyTestIdButton` in\n * `debug-testids` mode\n * - `defaultValue` for uncontrolled defaults and all usual field handlers\n * - Access to form utilities: `control`, `getValues`, `resetField`\n * - Presentation helpers: `getLabelProps`, `getErrorMessageProps`,\n * `getHelperWrapperProps` for consistent wiring to underlying UI components\n */\nexport function useUniformField<\n TFieldValues extends FieldValues = FieldValues,\n TDisplay = unknown,\n>(\n params: UseUniformFieldParams<TFieldValues, TDisplay>,\n): UseUniformFieldReturn<TFieldValues> {\n const {\n name,\n disabled = false,\n testId: explicitTestId,\n label,\n type,\n transform,\n } = params;\n\n const {\n control,\n debugMode,\n formState: { submitCount },\n getFieldState,\n getValues,\n resetField,\n } = useFormContext<TFieldValues>();\n\n const {\n error,\n invalid: rawInvalid,\n isDirty,\n isTouched,\n required,\n testId,\n } = getFieldState(name, explicitTestId);\n\n const { field } = useController<TFieldValues>({\n control,\n disabled,\n name,\n });\n const {\n onChange: fieldOnChange,\n value: fieldValue,\n disabled: isDisabled,\n onBlur,\n ref,\n } = field;\n\n // Get transform utilities (but don't apply them automatically)\n // Components can choose how to use them (directly or via useInputValueDebounce)\n const { toDisplayValue, toFormValue } = useInputValueTransform<TDisplay>({\n type,\n transform,\n });\n\n // For components without special needs: apply transform to value and onChange\n const transformedValue = toDisplayValue(fieldValue);\n const transformedOnChange = (eventOrValue: TDisplay | React.ChangeEvent) => {\n // Extract value from event or use value directly\n const displayValue =\n (eventOrValue as React.ChangeEvent<HTMLInputElement>)?.target?.value ??\n eventOrValue;\n const formValue = toFormValue(displayValue as TDisplay);\n fieldOnChange(formValue as typeof fieldValue);\n };\n\n const defaultValue = (getValues() as Record<string, unknown>)?.[\n name as string\n ];\n\n /**\n * Determine when to show the invalid state to the user.\n *\n * Show errors when the field is invalid AND any of these conditions are met:\n * - Field is dirty (value changed from initial) - good for checkboxes/radios/arrays\n * - Field is touched (focused and blurred) - good for text inputs\n * - Form has been submitted - shows all errors after submit attempt\n *\n * This prevents showing errors on pristine/untouched fields for better UX.\n * Examples:\n * - Text input: User loads form with empty required field → no error shown yet\n * - Text input: User focuses and blurs → error shows (via isTouched)\n * - Checkbox group: User clicks first checkbox → error shows immediately (via isDirty)\n * - Any field: User submits form → all errors show (via submitCount)\n *\n * The entire condition is debounced to prevent flickering and allow smooth animations\n * when any of the states (invalid, isDirty, isTouched, submitCount) change.\n */\n const showInvalid = rawInvalid && (isDirty || isTouched || submitCount > 0);\n const invalid = useDebouncedInvalid(showInvalid, 200);\n\n // Build a label node that:\n // - shows the provided label (unless explicitly set to false)\n // - appends a copy-to-clipboard button for the test id in `debug-testids` mode\n // Consumers can pass this directly to component `label` props\n const showTestIdCopyButton = debugMode === 'debug-testids';\n const labelNode: ReactNode | null =\n !!label || showTestIdCopyButton ? (\n <>\n {label !== false ? label : null}\n {showTestIdCopyButton ? (\n <FieldCopyTestIdButton testId={testId} />\n ) : null}\n </>\n ) : null;\n\n // Ready-to-render error message; consumers can drop this into their\n // component `errorMessage` prop without repeating mapping/markup\n const errorMessage = <FieldValidationError error={error} testId={testId} />;\n\n // Generate standardized props for label, helper wrapper and error message\n // so consumers can spread them directly into UI components (e.g. HeroUI),\n // keeping animations/spacing consistent across fields\n const { getErrorMessageProps, getLabelProps, getHelperWrapperProps } =\n useInput({\n ref,\n classNames: {\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n },\n errorMessage: JSON.stringify(error),\n isInvalid: invalid,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n return {\n control,\n debugMode,\n defaultValue,\n disabled: isDisabled,\n error,\n errorMessage,\n field: {\n ...field,\n value: transformedValue as typeof field.value,\n onChange: transformedOnChange as typeof field.onChange,\n },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getValues,\n invalid,\n label: labelNode,\n onBlur,\n onChange: transformedOnChange as typeof field.onChange,\n ref,\n required,\n resetField,\n testId,\n };\n}\n\nexport default useUniformField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAyNtB,mBAGI,KAHJ;AArMN,IAAM,sBAAsB,CAAC,SAAkB,YAAoB;AACjE,QAAM,uBAAuB,iBAAiB;AAE9C,QAAM,SACJ,OAAO,YAAY,gBAClB,QAAQ,IAAI,aAAa,UAAU,QAAQ,IAAI,WAAW;AAC7D,QAAM,WAAW,CAAC,CAAC,wBAAwB;AAC3C,QAAM,mBAAmB,YAAY,SAAS,SAAS,QAAQ;AAE/D,SAAO;AACT;AA2FO,SAAS,gBAId,QACqC;AArIvC;AAsIE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW,EAAE,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAA6B;AAEjC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,MAAM,cAAc;AAEtC,QAAM,EAAE,MAAM,IAAI,cAA4B;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF,IAAI;AAIJ,QAAM,EAAE,gBAAgB,YAAY,IAAI,uBAAiC;AAAA,IACvE;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,mBAAmB,eAAe,UAAU;AAClD,QAAM,sBAAsB,CAAC,iBAA+C;AAvL9E,QAAAA,KAAA;AAyLI,UAAM,gBACH,MAAAA,MAAA,6CAAsD,WAAtD,gBAAAA,IAA8D,UAA9D,YACD;AACF,UAAM,YAAY,YAAY,YAAwB;AACtD,kBAAc,SAA8B;AAAA,EAC9C;AAEA,QAAM,gBAAgB,eAAU,MAAV,mBACpB;AAqBF,QAAM,cAAc,eAAe,WAAW,aAAa,cAAc;AACzE,QAAM,UAAU,oBAAoB,aAAa,GAAG;AAMpD,QAAM,uBAAuB,cAAc;AAC3C,QAAM,YACJ,CAAC,CAAC,SAAS,uBACT,iCACG;AAAA,cAAU,QAAQ,QAAQ;AAAA,IAC1B,uBACC,oBAAC,iCAAsB,QAAgB,IACrC;AAAA,KACN,IACE;AAIN,QAAM,eAAe,oBAAC,gCAAqB,OAAc,QAAgB;AAKzE,QAAM,EAAE,sBAAsB,eAAe,sBAAsB,IACjE,SAAS;AAAA,IACP;AAAA,IACA,YAAY;AAAA;AAAA,MAEV,eAAe;AAAA,IACjB;AAAA,IACA,cAAc,KAAK,UAAU,KAAK;AAAA,IAClC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,EAClB,CAAC;AAEH,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO,iCACF,QADE;AAAA,MAEL,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["_a"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFormContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-SJWL6EMI.js";
|
|
4
4
|
import {
|
|
5
5
|
flatArrayKey
|
|
6
6
|
} from "./chunk-O2XJNQQK.js";
|
|
@@ -65,4 +65,4 @@ export {
|
|
|
65
65
|
useClientValidation,
|
|
66
66
|
clientValidationSchemaByName
|
|
67
67
|
};
|
|
68
|
-
//# sourceMappingURL=chunk-
|
|
68
|
+
//# sourceMappingURL=chunk-26VE4IGU.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkFYN7ZWLWcjs = require('./chunk-FYN7ZWLW.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkOKJWLH7Tcjs = require('./chunk-OKJWLH7T.cjs');
|
|
@@ -17,7 +17,7 @@ var useClientValidation = (data, schemaFactory, options) => {
|
|
|
17
17
|
formState: { touchedFields },
|
|
18
18
|
validation: { setClientValidationSchema },
|
|
19
19
|
trigger
|
|
20
|
-
} =
|
|
20
|
+
} = _chunkFYN7ZWLWcjs.useFormContext.call(void 0, );
|
|
21
21
|
const autoGeneratedKey = _react.useId.call(void 0, );
|
|
22
22
|
const key = (_a = options == null ? void 0 : options.key) != null ? _a : autoGeneratedKey;
|
|
23
23
|
const dataHash = JSON.stringify(data);
|
|
@@ -65,4 +65,4 @@ var clientValidationSchemaByName = (name, fieldSchema) => {
|
|
|
65
65
|
|
|
66
66
|
|
|
67
67
|
exports.useClientValidation = useClientValidation; exports.clientValidationSchemaByName = clientValidationSchemaByName;
|
|
68
|
-
//# sourceMappingURL=chunk-
|
|
68
|
+
//# sourceMappingURL=chunk-2UQCRQEJ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-FP5KRDUN.cjs","../src/hooks/useClientValidation/useClientValidation.ts"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-FP5KRDUN.cjs","sourcesContent":[null,"import type { VetoTypeAny } from '@fuf-stack/veto';\n\nimport { useEffect, useId } from 'react';\n\nimport { array, objectLoose } from '@fuf-stack/veto';\n\nimport { flatArrayKey } from '../../helpers';\nimport { useFormContext } from '../useFormContext/useFormContext';\n\n/**\n * Hook for adding dynamic client-side validation to forms.\n *\n * Client validation is used for context-dependent validation rules that require external data\n * (e.g., checking if a username already exists). It complements base validation (passed to Form),\n * which handles static rules like \"required\", min/max length, format, etc.\n *\n * **Typical pattern:**\n * - Base validation: Static, always-on rules (required, format, length constraints)\n * - Client validation: Dynamic rules based on external data (uniqueness, business logic)\n * - Client schemas should use `.nullish()` to allow empty values (base validation handles \"required\")\n *\n * Automatically manages validation schema lifecycle: sets schema when data is provided,\n * clears schema when data is null/undefined, and cleans up on unmount. When the client\n * validation schema changes, automatically re-validates all touched fields.\n *\n * @param data - Data to create validation schema from (or null/undefined to clear validation)\n * @param schemaFactory - Function that creates a validation schema from the data. Schemas should typically use `.nullish()`.\n * @param options - Optional configuration object\n * @param options.key - Optional custom key for registration. Useful when multiple instances should share validation (e.g., in field arrays)\n *\n * @example\n * ```tsx\n * // Base validation handles \"required\" and format\n * const baseSchema = veto({ username: vt.string({ min: 3 }) });\n *\n * // Client validation adds dynamic uniqueness check\n * const { data: teamData } = useTeamQuery(teamId);\n * useClientValidation(teamData, (data) =>\n * vt.objectLoose({\n * username: vt.string()\n * .refine(\n * (value) => !data.existingUsers.includes(value),\n * { message: 'Username already exists' }\n * )\n * .nullish() // Allow empty - base validation handles \"required\"\n * })\n * );\n * ```\n *\n * @example\n * ```tsx\n * // Using custom key in a field array to avoid multiple registrations\n * fields.map((field, index) => (\n * useClientValidation(\n * userData,\n * (data) => clientValidationSchemaByName(\n * `items.${index}.name`,\n * vt.string()\n * .refine((val) => !data.forbidden.includes(val), { message: 'Name not allowed' })\n * .nullish()\n * ),\n * { key: 'items-validation' } // All instances share the same key\n * )\n * ));\n * ```\n */\nexport const useClientValidation = <TData = unknown>(\n data: TData | null | undefined,\n schemaFactory: (data: TData) => VetoTypeAny,\n options?: { key?: string },\n): void => {\n const {\n formState: { touchedFields },\n validation: { setClientValidationSchema },\n trigger,\n } = useFormContext();\n\n // Use provided key or auto-generate unique key\n const autoGeneratedKey = useId();\n const key = options?.key ?? autoGeneratedKey;\n\n // Use data hash instead of object reference to avoid unnecessary re-runs\n // when data object reference changes but data remains the same\n const dataHash = JSON.stringify(data);\n\n // Single effect to manage validation schema lifecycle\n useEffect(() => {\n // Set validation schema when data is available\n if (data != null) {\n const validationSchema = schemaFactory(data);\n setClientValidationSchema(key, validationSchema);\n } else {\n // Clear validation schema when no data\n setClientValidationSchema(key, null);\n }\n\n // Re-validate all touched fields when client validation schema changes\n const touchedFieldNames = Object.keys(touchedFields);\n if (touchedFieldNames.length > 0) {\n // Use setTimeout to ensure the client validation schema update has propagated\n // before triggering re-validation (fixes race condition)\n setTimeout(async () => {\n return trigger(touchedFieldNames);\n }, 1);\n }\n\n // Cleanup on unmount or when dependencies change\n return () => {\n setClientValidationSchema(key, null);\n };\n // Only re-run when data (dataHash) or key changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dataHash, key]);\n};\n\n/**\n * Helper function to create a veto looseObject schema for a single field with nested path support.\n *\n * Parses field paths (dot-notation) and creates properly nested loose object schemas with array support.\n * All intermediate objects and arrays are marked as optional to allow partial data structures.\n * Numeric segments in the path are treated as array indices, and the parent field is wrapped in an array schema.\n * Supports flat arrays (arrays of primitives) via the special `__FLAT__` key.\n *\n * **Important:** The fieldSchema should typically use `.nullish()` to allow empty values. This is because:\n * - Base validation (passed to Form) handles \"required\" constraints\n * - Client validation adds dynamic, context-dependent rules (e.g., \"username already exists\")\n * - Form data processing converts empty strings in flat arrays to `null` (not `undefined`)\n * - `.nullish()` accepts both `null` and `undefined`, while `.optional()` only accepts `undefined`\n *\n * This pattern ensures client validation only validates non-empty values, while base validation\n * enforces required fields and basic constraints (min length, format, etc.).\n *\n * @param name - The dot-separated path to the field (e.g., 'username', 'user.profile.email', 'items.0.name', 'tags.0.__FLAT__')\n * @param fieldSchema - The veto validation schema for the field. Should typically use `.nullish()` to allow empty values.\n * @returns A nested loose object schema matching the field path structure with proper type inference\n *\n * @example\n * ```tsx\n * // Typical usage: base validation handles \"required\", client validation adds dynamic rules\n * // Base validation (in Form component)\n * const baseSchema = veto({ username: vt.string({ min: 3 }) }); // Required + min length\n *\n * // Client validation (dynamic check for existing usernames)\n * const { data: userData } = useUserQuery(userId);\n * useClientValidation(userData, (data) =>\n * clientValidationSchemaByName(\n * 'username',\n * vt.string()\n * .refine(\n * (value) => !data.existingUsernames.includes(value),\n * { message: 'Username already taken' }\n * )\n * .nullish() // Allow empty - base validation handles \"required\"\n * )\n * );\n * ```\n *\n * @example\n * ```tsx\n * // Nested field path with dynamic validation\n * clientValidationSchemaByName(\n * 'user.profile.email',\n * vt.string()\n * .refine(\n * (value) => !reservedEmails.includes(value),\n * { message: 'This email is reserved' }\n * )\n * .nullish()\n * )\n * // => objectLoose({ user: objectLoose({ profile: objectLoose({ email: ... }).optional() }).optional() })\n * ```\n *\n * @example\n * ```tsx\n * // Array of objects with dynamic validation\n * clientValidationSchemaByName(\n * 'items.0.tag',\n * vt.string()\n * .refine((value) => !forbiddenTags.includes(value), { message: 'Tag not allowed' })\n * .nullish()\n * )\n * // => objectLoose({ items: array(objectLoose({ tag: ... })).optional() })\n * ```\n *\n * @example\n * ```tsx\n * // Flat array (array of primitives) with dynamic validation\n * clientValidationSchemaByName(\n * 'tags.0.__FLAT__',\n * vt.string()\n * .refine((value) => !forbiddenWords.includes(value), { message: 'Word not allowed' })\n * .nullish()\n * )\n * // => objectLoose({ tags: array(vt.string().refine(...).nullish()).optional() })\n * ```\n */\nexport const clientValidationSchemaByName = <T extends VetoTypeAny>(\n name: string,\n fieldSchema: T,\n) => {\n const segments = name.split('.');\n\n // Build schema from innermost to outermost\n let schema: VetoTypeAny = fieldSchema;\n\n // Process segments in reverse order to build nested structure\n for (let i = segments.length - 1; i >= 0; i -= 1) {\n const segment = segments[i];\n\n const isNumeric = /^\\d+$/.test(segment);\n const isFlatArrayKey = segment === flatArrayKey;\n\n if (isFlatArrayKey) {\n // Skip the __FLAT__ key - it's just a marker for flat arrays\n // The schema is already correct (primitive type), just continue\n // eslint-disable-next-line no-continue\n continue;\n }\n\n if (isNumeric) {\n // Current segment is an array index - wrap current schema in optional array\n schema = array(schema).optional();\n } else {\n // Current segment is a field name - wrap in objectLoose\n // Make it optional if it's an intermediate object (not the root)\n const obj = objectLoose({\n [segment]: schema,\n });\n schema = i > 0 ? obj.optional() : obj;\n }\n }\n\n return schema;\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-2UQCRQEJ.cjs","../src/hooks/useClientValidation/useClientValidation.ts"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-2UQCRQEJ.cjs","sourcesContent":[null,"import type { VetoTypeAny } from '@fuf-stack/veto';\n\nimport { useEffect, useId } from 'react';\n\nimport { array, objectLoose } from '@fuf-stack/veto';\n\nimport { flatArrayKey } from '../../helpers';\nimport { useFormContext } from '../useFormContext/useFormContext';\n\n/**\n * Hook for adding dynamic client-side validation to forms.\n *\n * Client validation is used for context-dependent validation rules that require external data\n * (e.g., checking if a username already exists). It complements base validation (passed to Form),\n * which handles static rules like \"required\", min/max length, format, etc.\n *\n * **Typical pattern:**\n * - Base validation: Static, always-on rules (required, format, length constraints)\n * - Client validation: Dynamic rules based on external data (uniqueness, business logic)\n * - Client schemas should use `.nullish()` to allow empty values (base validation handles \"required\")\n *\n * Automatically manages validation schema lifecycle: sets schema when data is provided,\n * clears schema when data is null/undefined, and cleans up on unmount. When the client\n * validation schema changes, automatically re-validates all touched fields.\n *\n * @param data - Data to create validation schema from (or null/undefined to clear validation)\n * @param schemaFactory - Function that creates a validation schema from the data. Schemas should typically use `.nullish()`.\n * @param options - Optional configuration object\n * @param options.key - Optional custom key for registration. Useful when multiple instances should share validation (e.g., in field arrays)\n *\n * @example\n * ```tsx\n * // Base validation handles \"required\" and format\n * const baseSchema = veto({ username: vt.string({ min: 3 }) });\n *\n * // Client validation adds dynamic uniqueness check\n * const { data: teamData } = useTeamQuery(teamId);\n * useClientValidation(teamData, (data) =>\n * vt.objectLoose({\n * username: vt.string()\n * .refine(\n * (value) => !data.existingUsers.includes(value),\n * { message: 'Username already exists' }\n * )\n * .nullish() // Allow empty - base validation handles \"required\"\n * })\n * );\n * ```\n *\n * @example\n * ```tsx\n * // Using custom key in a field array to avoid multiple registrations\n * fields.map((field, index) => (\n * useClientValidation(\n * userData,\n * (data) => clientValidationSchemaByName(\n * `items.${index}.name`,\n * vt.string()\n * .refine((val) => !data.forbidden.includes(val), { message: 'Name not allowed' })\n * .nullish()\n * ),\n * { key: 'items-validation' } // All instances share the same key\n * )\n * ));\n * ```\n */\nexport const useClientValidation = <TData = unknown>(\n data: TData | null | undefined,\n schemaFactory: (data: TData) => VetoTypeAny,\n options?: { key?: string },\n): void => {\n const {\n formState: { touchedFields },\n validation: { setClientValidationSchema },\n trigger,\n } = useFormContext();\n\n // Use provided key or auto-generate unique key\n const autoGeneratedKey = useId();\n const key = options?.key ?? autoGeneratedKey;\n\n // Use data hash instead of object reference to avoid unnecessary re-runs\n // when data object reference changes but data remains the same\n const dataHash = JSON.stringify(data);\n\n // Single effect to manage validation schema lifecycle\n useEffect(() => {\n // Set validation schema when data is available\n if (data != null) {\n const validationSchema = schemaFactory(data);\n setClientValidationSchema(key, validationSchema);\n } else {\n // Clear validation schema when no data\n setClientValidationSchema(key, null);\n }\n\n // Re-validate all touched fields when client validation schema changes\n const touchedFieldNames = Object.keys(touchedFields);\n if (touchedFieldNames.length > 0) {\n // Use setTimeout to ensure the client validation schema update has propagated\n // before triggering re-validation (fixes race condition)\n setTimeout(async () => {\n return trigger(touchedFieldNames);\n }, 1);\n }\n\n // Cleanup on unmount or when dependencies change\n return () => {\n setClientValidationSchema(key, null);\n };\n // Only re-run when data (dataHash) or key changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dataHash, key]);\n};\n\n/**\n * Helper function to create a veto looseObject schema for a single field with nested path support.\n *\n * Parses field paths (dot-notation) and creates properly nested loose object schemas with array support.\n * All intermediate objects and arrays are marked as optional to allow partial data structures.\n * Numeric segments in the path are treated as array indices, and the parent field is wrapped in an array schema.\n * Supports flat arrays (arrays of primitives) via the special `__FLAT__` key.\n *\n * **Important:** The fieldSchema should typically use `.nullish()` to allow empty values. This is because:\n * - Base validation (passed to Form) handles \"required\" constraints\n * - Client validation adds dynamic, context-dependent rules (e.g., \"username already exists\")\n * - Form data processing converts empty strings in flat arrays to `null` (not `undefined`)\n * - `.nullish()` accepts both `null` and `undefined`, while `.optional()` only accepts `undefined`\n *\n * This pattern ensures client validation only validates non-empty values, while base validation\n * enforces required fields and basic constraints (min length, format, etc.).\n *\n * @param name - The dot-separated path to the field (e.g., 'username', 'user.profile.email', 'items.0.name', 'tags.0.__FLAT__')\n * @param fieldSchema - The veto validation schema for the field. Should typically use `.nullish()` to allow empty values.\n * @returns A nested loose object schema matching the field path structure with proper type inference\n *\n * @example\n * ```tsx\n * // Typical usage: base validation handles \"required\", client validation adds dynamic rules\n * // Base validation (in Form component)\n * const baseSchema = veto({ username: vt.string({ min: 3 }) }); // Required + min length\n *\n * // Client validation (dynamic check for existing usernames)\n * const { data: userData } = useUserQuery(userId);\n * useClientValidation(userData, (data) =>\n * clientValidationSchemaByName(\n * 'username',\n * vt.string()\n * .refine(\n * (value) => !data.existingUsernames.includes(value),\n * { message: 'Username already taken' }\n * )\n * .nullish() // Allow empty - base validation handles \"required\"\n * )\n * );\n * ```\n *\n * @example\n * ```tsx\n * // Nested field path with dynamic validation\n * clientValidationSchemaByName(\n * 'user.profile.email',\n * vt.string()\n * .refine(\n * (value) => !reservedEmails.includes(value),\n * { message: 'This email is reserved' }\n * )\n * .nullish()\n * )\n * // => objectLoose({ user: objectLoose({ profile: objectLoose({ email: ... }).optional() }).optional() })\n * ```\n *\n * @example\n * ```tsx\n * // Array of objects with dynamic validation\n * clientValidationSchemaByName(\n * 'items.0.tag',\n * vt.string()\n * .refine((value) => !forbiddenTags.includes(value), { message: 'Tag not allowed' })\n * .nullish()\n * )\n * // => objectLoose({ items: array(objectLoose({ tag: ... })).optional() })\n * ```\n *\n * @example\n * ```tsx\n * // Flat array (array of primitives) with dynamic validation\n * clientValidationSchemaByName(\n * 'tags.0.__FLAT__',\n * vt.string()\n * .refine((value) => !forbiddenWords.includes(value), { message: 'Word not allowed' })\n * .nullish()\n * )\n * // => objectLoose({ tags: array(vt.string().refine(...).nullish()).optional() })\n * ```\n */\nexport const clientValidationSchemaByName = <T extends VetoTypeAny>(\n name: string,\n fieldSchema: T,\n) => {\n const segments = name.split('.');\n\n // Build schema from innermost to outermost\n let schema: VetoTypeAny = fieldSchema;\n\n // Process segments in reverse order to build nested structure\n for (let i = segments.length - 1; i >= 0; i -= 1) {\n const segment = segments[i];\n\n const isNumeric = /^\\d+$/.test(segment);\n const isFlatArrayKey = segment === flatArrayKey;\n\n if (isFlatArrayKey) {\n // Skip the __FLAT__ key - it's just a marker for flat arrays\n // The schema is already correct (primitive type), just continue\n // eslint-disable-next-line no-continue\n continue;\n }\n\n if (isNumeric) {\n // Current segment is an array index - wrap current schema in optional array\n schema = array(schema).optional();\n } else {\n // Current segment is a field name - wrap in objectLoose\n // Make it optional if it's an intermediate object (not the root)\n const obj = objectLoose({\n [segment]: schema,\n });\n schema = i > 0 ? obj.optional() : obj;\n }\n }\n\n return schema;\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkLVYHMBHDcjs = require('./chunk-LVYHMBHD.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -101,7 +101,7 @@ var RadioBoxes = (_a) => {
|
|
|
101
101
|
ref,
|
|
102
102
|
required,
|
|
103
103
|
testId
|
|
104
|
-
} =
|
|
104
|
+
} = _chunkLVYHMBHDcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
105
105
|
name
|
|
106
106
|
}, uniformFieldProps));
|
|
107
107
|
const variants = radioBoxesVariants();
|
|
@@ -167,4 +167,4 @@ var RadioBoxes_default2 = RadioBoxes_default;
|
|
|
167
167
|
|
|
168
168
|
|
|
169
169
|
exports.RadioBoxes_default = RadioBoxes_default; exports.RadioBoxes_default2 = RadioBoxes_default2;
|
|
170
|
-
//# sourceMappingURL=chunk-
|
|
170
|
+
//# sourceMappingURL=chunk-3RL6SVXZ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4UBIV2LI.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","_a","_b","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4UBIV2LI.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n//\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n defaultValue,\n errorMessage,\n invalid,\n disabled,\n label,\n onBlur,\n onChange,\n ref,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n ref={ref}\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={defaultValue as string}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId ?? option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {option.label ?? option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n {...getBaseProps()}\n className={cn(\n 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n {\n // disabled styles\n 'pointer-events-none opacity-disabled': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n <input {...getInputProps()} />\n </VisuallyHidden>\n <span {...getWrapperProps()}>\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {children ? <span {...getLabelProps()}>{children}</span> : null}\n {description ? (\n <span className=\"text-foreground opacity-70 text-small\">\n {description}\n </span>\n ) : null}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-3RL6SVXZ.cjs","../src/RadioBoxes/RadioBoxes.tsx","../src/RadioBoxes/RadioBox.tsx","../src/RadioBoxes/index.ts"],"names":["jsx","_a","_b","RadioBoxes_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-3RL6SVXZ.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n//\nimport { RadioBox } from './RadioBox';\n\nexport const radioBoxesVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n itemBase: '',\n itemControl: 'bg-focus group-data-[invalid=true]:bg-danger',\n itemDescription: '',\n itemLabel: 'text-sm',\n itemLabelWrapper: '',\n itemWrapper:\n 'group-data-[invalid=true]:!border-danger [&:not(group-data-[invalid=\"true\"]):not(group-data-[selected=\"false\"])]:border-focus', // TODO: get rid of !.\n // see HeroUI styles for group-data condition,\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/select.ts\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n wrapper: '',\n },\n});\n\ntype VariantProps = TVProps<typeof radioBoxesVariants>;\ntype ClassName = TVClassName<typeof radioBoxesVariants>;\n\nexport interface RadioBoxesOption {\n /** Description of the value. Works with variant radioBox. */\n description?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioBoxesProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioBoxesOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n}\n\n/**\n * RadioBoxes component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n */\nconst RadioBoxes = ({\n className = undefined,\n inline = false,\n name,\n options,\n ...uniformFieldProps\n}: RadioBoxesProps) => {\n const {\n defaultValue,\n errorMessage,\n invalid,\n disabled,\n label,\n onBlur,\n onChange,\n ref,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n // classNames from slots\n const variants = radioBoxesVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n const itemClassNames = {\n base: classNames.itemBase,\n control: classNames.itemControl,\n description: classNames.itemDescription,\n label: classNames.itemLabel,\n labelWrapper: classNames.itemLabelWrapper,\n wrapper: classNames.itemWrapper,\n };\n\n return (\n <HeroRadioGroup\n ref={ref}\n classNames={classNames}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n defaultValue={defaultValue as string}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n >\n {options.map((option) => {\n if ('value' in option) {\n const optionTestId = slugify(\n `${testId}_option_${option.testId ?? option.value}`,\n { replaceDots: true },\n );\n return (\n <RadioBox\n key={option.value}\n classNames={itemClassNames}\n data-testid={optionTestId}\n description={option.description}\n icon={option.icon}\n isDisabled={!!disabled || option.disabled}\n onChange={onChange}\n value={option.value}\n >\n {option.label ?? option.value}\n </RadioBox>\n );\n }\n return null;\n })}\n </HeroRadioGroup>\n );\n};\n\nexport default RadioBoxes;\n","import type { RadioProps as HeroRadioProps } from '@heroui/radio';\nimport type { ReactNode } from 'react';\n\nimport { useRadio } from '@heroui/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\ninterface RadioProps extends HeroRadioProps {\n /** icon for the option */\n icon?: ReactNode;\n}\n\nexport const RadioBox = ({ icon = undefined, ...props }: RadioProps) => {\n const {\n children,\n Component,\n description,\n getBaseProps,\n getControlProps,\n getInputProps,\n getLabelProps,\n getLabelWrapperProps,\n getWrapperProps,\n isDisabled,\n } = useRadio(props);\n\n return (\n <Component\n {...getBaseProps()}\n className={cn(\n 'group inline-flex flex-auto cursor-pointer items-center justify-between gap-4 rounded-lg border-2 border-default p-4 hover:bg-content2 data-[selected=true]:border-focus',\n {\n // disabled styles\n 'pointer-events-none opacity-disabled': isDisabled,\n },\n )}\n >\n <VisuallyHidden>\n <input {...getInputProps()} />\n </VisuallyHidden>\n <span {...getWrapperProps()}>\n <span {...getControlProps()} />\n </span>\n {icon}\n <div\n {...getLabelWrapperProps()}\n className={cn(getLabelWrapperProps().className, 'grow')}\n >\n {children ? <span {...getLabelProps()}>{children}</span> : null}\n {description ? (\n <span className=\"text-foreground opacity-70 text-small\">\n {description}\n </span>\n ) : null}\n </div>\n </Component>\n );\n};\n\nexport default RadioBox;\n","import RadioBoxes from './RadioBoxes';\n\nexport type { RadioBoxesProps } from './RadioBoxes';\n\nexport { RadioBoxes };\n\nexport default RadioBoxes;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-24XJ7TKM.js";
|
|
4
4
|
import {
|
|
5
5
|
useFormContext
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-SJWL6EMI.js";
|
|
7
7
|
import {
|
|
8
8
|
__objRest,
|
|
9
9
|
__spreadProps,
|
|
@@ -287,4 +287,4 @@ export {
|
|
|
287
287
|
Select_default,
|
|
288
288
|
Select_default2
|
|
289
289
|
};
|
|
290
|
-
//# sourceMappingURL=chunk-
|
|
290
|
+
//# sourceMappingURL=chunk-466UFJGQ.js.map
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var _chunkNTOYCWCJcjs = require('./chunk-NTOYCWCJ.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkLVYHMBHDcjs = require('./chunk-LVYHMBHD.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
@@ -65,7 +65,7 @@ var Input = (_a) => {
|
|
|
65
65
|
required,
|
|
66
66
|
testId,
|
|
67
67
|
resetField
|
|
68
|
-
} =
|
|
68
|
+
} = _chunkLVYHMBHDcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, { name, type }, uniformFieldProps));
|
|
69
69
|
const { onChange, onBlur, value } = _chunkNTOYCWCJcjs.useInputValueDebounce.call(void 0, {
|
|
70
70
|
debounceDelay,
|
|
71
71
|
onBlur: fieldOnBlur,
|
|
@@ -142,4 +142,4 @@ var Input_default2 = Input_default;
|
|
|
142
142
|
|
|
143
143
|
|
|
144
144
|
exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
|
|
145
|
-
//# sourceMappingURL=chunk-
|
|
145
|
+
//# sourceMappingURL=chunk-47NCHVEA.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-47NCHVEA.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-47NCHVEA.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { InputProps as HeroInputProps } from '@heroui/input';\nimport type { ReactNode } from 'react';\nimport type { InputValueTransform } from '../hooks';\n\nimport { Input as HeroInput } from '@heroui/input';\n// eslint-disable-next-line import-x/no-unresolved\nimport { NumberInput as HeroNumberInput } from '@heroui/number-input';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useInputValueDebounce, useUniformField } from '../hooks';\n\n// input variants\nexport const inputVariants = tv({\n slots: {\n /** wrapper around the whole input */\n base: '',\n /** clear button */\n clearButton: '',\n /** actual input element */\n input: '',\n /** inner wrapper (HeroUI inputWrapper slot) */\n inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface InputProps extends VariantProps {\n /** CSS class name */\n className?: ClassName;\n /** shows clear button when input has value */\n clearable?: boolean;\n /** debounce delay in milliseconds for form state updates (default: 300ms) */\n debounceDelay?: number;\n /** input field is disabled */\n disabled?: boolean;\n /** added content to the end of the input Field. */\n endContent?: ReactNode;\n /** form field label (set to false to disable label) */\n label?: string | false;\n /** form field name */\n name: string;\n /** callback that is fired when the value is cleared */\n onClear?: () => void;\n /** form field placeholder */\n placeholder?: string;\n /** size of the input */\n size?: 'sm' | 'md' | 'lg';\n /** content added to the start of the input field */\n startContent?: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** allows disentangled display and form values for a field */\n transform?: InputValueTransform<string>;\n /** input type */\n type?: 'number' | 'password';\n}\n\n/**\n * Input component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst Input = ({\n className: _className = undefined,\n clearable = false,\n debounceDelay = 300,\n endContent = undefined,\n name,\n onClear = undefined,\n placeholder = ' ',\n size = undefined,\n startContent = undefined,\n type = undefined,\n ...uniformFieldProps\n}: InputProps) => {\n const {\n disabled,\n field: {\n onChange: fieldOnChange,\n onBlur: fieldOnBlur,\n value: fieldValue,\n ref,\n },\n errorMessage,\n invalid,\n label,\n required,\n testId,\n resetField,\n } = useUniformField({ name, type, ...uniformFieldProps });\n\n // Use hook that provides debounced onChange and enhanced blur handling\n const { onChange, onBlur, value } = useInputValueDebounce({\n debounceDelay,\n onBlur: fieldOnBlur,\n onChange: fieldOnChange,\n value: fieldValue,\n });\n\n // If input is clearable add props for clearing input value\n const clearableProps: Pick<HeroInputProps, 'isClearable' | 'onClear'> =\n clearable\n ? {\n isClearable: true,\n onClear: () => {\n // if field had initial value we do not reset it\n // to that value, but clear it instead\n resetField(name, { defaultValue: null });\n // if onClear cb provided we call it\n if (onClear) {\n onClear();\n }\n },\n }\n : {};\n\n // classNames from slots\n const variants = inputVariants();\n const classNames = variantsToClassNames(variants, _className, 'base');\n\n // Common props for both Input and NumberInput\n const commonProps = {\n ref,\n classNames: {\n base: classNames.base,\n clearButton: classNames.clearButton,\n // set padding to 0 for error message exit animation\n helperWrapper: 'p-0',\n input: classNames.input,\n inputWrapper: classNames.inputWrapper,\n },\n 'data-testid': testId,\n endContent,\n errorMessage,\n id: testId,\n isDisabled: disabled,\n isInvalid: invalid,\n isRequired: required,\n label,\n labelPlacement: 'outside' as const,\n name,\n onBlur,\n placeholder,\n radius: 'sm' as const,\n size,\n startContent,\n variant: 'bordered' as const,\n ...clearableProps,\n };\n\n // Render NumberInput for number type\n if (type === 'number') {\n // Parse the string value to number - use undefined for empty/cleared state\n const numberValue =\n value !== '' && value != null && !Number.isNaN(Number(value))\n ? Number(value)\n : undefined;\n\n return (\n <HeroNumberInput\n {...commonProps}\n value={numberValue}\n // Disable thousands separator to avoid parsing issues\n formatOptions={{\n useGrouping: false,\n }}\n // NumberInput onChange receives either an event or a number\n onChange={(e: React.ChangeEvent<HTMLInputElement> | number) => {\n if (typeof e === 'number') {\n // Convert number to synthetic event and pass through debounced onChange\n onChange({\n target: { value: String(e) },\n } as React.ChangeEvent<HTMLInputElement>);\n } else {\n // Pass event through debounced onChange\n onChange(e);\n }\n }}\n />\n );\n }\n\n // Render regular Input for text/password\n return (\n <HeroInput {...commonProps} onChange={onChange} type={type} value={value} />\n );\n};\n\nexport default Input;\n","import Input from './Input';\n\nexport type { InputProps } from './Input';\n\nexport { Input };\n\nexport default Input;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkLVYHMBHDcjs = require('./chunk-LVYHMBHD.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -69,7 +69,7 @@ var RadioTabs = (_a) => {
|
|
|
69
69
|
label,
|
|
70
70
|
required,
|
|
71
71
|
testId
|
|
72
|
-
} =
|
|
72
|
+
} = _chunkLVYHMBHDcjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
73
73
|
name
|
|
74
74
|
}, uniformFieldProps));
|
|
75
75
|
const tabOptions = options.map((option) => {
|
|
@@ -144,4 +144,4 @@ var RadioTabs_default2 = RadioTabs_default;
|
|
|
144
144
|
|
|
145
145
|
|
|
146
146
|
exports.RadioTabs_default = RadioTabs_default; exports.RadioTabs_default2 = RadioTabs_default2;
|
|
147
|
-
//# sourceMappingURL=chunk-
|
|
147
|
+
//# sourceMappingURL=chunk-4FXGW7IH.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4FXGW7IH.cjs","../src/RadioTabs/RadioTabs.tsx","../src/RadioTabs/index.ts"],"names":["_a","_b"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-4FXGW7IH.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { TabsProps } from '@fuf-stack/pixels';\nimport type { TabProps } from '@fuf-stack/pixels/Tabs';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { RadioGroup as HeroRadioGroup } from '@heroui/radio';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\nimport Tabs from '@fuf-stack/pixels/Tabs';\n\nimport { useUniformField } from '../hooks';\n\nexport const radioTabsVariants = tv({\n slots: {\n base: 'group gap-0', // Needs group for group-data condition\n cursor: '',\n label:\n 'mb-2 inline-flex text-sm text-foreground subpixel-antialiased group-data-[invalid=true]:text-danger',\n tab: '',\n tabBase: '',\n tabContent: '',\n tabList: '',\n tabPanel: 'p-3',\n tabWrapper: '',\n wrapper: '',\n },\n variants: {\n hasContent: {\n true: {\n base: '',\n tabBase: 'p-1 pb-0',\n tabWrapper: [\n // border style\n 'rounded-medium border border-divider',\n // full width\n 'w-full',\n ],\n },\n },\n fullWidth: {\n true: {\n tabWrapper: 'w-full',\n },\n },\n },\n});\n\ntype VariantProps = TVProps<typeof radioTabsVariants>;\ntype ClassName = TVClassName<typeof radioTabsVariants>;\n\nexport interface RadioTabsOption {\n /** Optional content inside of the tab */\n content?: ReactNode;\n /** disables the option */\n disabled?: boolean;\n /** option label */\n label?: React.ReactNode;\n /** option icon */\n icon?: ReactNode;\n /** HTML data-testid attribute of the option */\n testId?: string;\n /** option value */\n value: string;\n}\n\nexport interface RadioTabsProps extends Omit<VariantProps, 'hasContent'> {\n /** CSS class name */\n className?: ClassName;\n /** Determines if the Buttons are disabled or not. */\n disabled?: boolean;\n /** Whether tabs should take up full container width */\n fullWidth?: boolean;\n /** determines orientation of the Buttons. */\n inline?: boolean;\n /** Label displayed next to the RadioButton. */\n label?: ReactNode;\n /** Name the RadioButtons are registered at in HTML forms (react-hook-form). */\n name: string;\n /** Radio button configuration. */\n options: RadioTabsOption[];\n /** Id to grab element in internal tests. */\n testId?: string;\n /** How the RadioTabs should look like. */\n variant?: TabsProps['variant'];\n}\n\n/**\n * RadioTabs component based on [HeroUI RadioGroup](https://www.heroui.com//docs/components/radio-group)\n * and [HeroUI Tabs](https://www.heroui.com//docs/components/tabs)\n */\nconst RadioTabs = ({\n className = undefined,\n fullWidth = false,\n inline = false,\n name,\n options,\n variant = undefined,\n ...uniformFieldProps\n}: RadioTabsProps): ReactElement => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n const tabOptions = options.map<TabProps>((option) => {\n return {\n content: option?.content,\n disabled: option?.disabled,\n key: option.value,\n label: option?.label ?? option?.value,\n testId: slugify(`option_${option?.testId ?? option?.value}`, {\n replaceDots: true,\n }),\n };\n });\n\n const disabledAllKeys: string[] | undefined = tabOptions?.map((option) => {\n return option.key as string;\n });\n\n // check if any option has content\n // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async\n const hasContent = options.some((option) => {\n return option.content;\n });\n\n // classNames from slots\n const variants = radioTabsVariants({ hasContent, fullWidth });\n const classNames = variantsToClassNames(variants, className, 'base');\n\n return (\n <HeroRadioGroup\n ref={ref}\n // see HeroUI styles for group-data condition (data-invalid),\n // e.g.: https://github.com/heroui-inc/heroui/blob/main/packages/components/select/src/use-select.ts\n data-invalid={invalid}\n data-required={required}\n data-testid={testId}\n errorMessage={errorMessage}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label ? <legend>{label}</legend> : null}\n name={name}\n onBlur={onBlur}\n orientation={inline ? 'horizontal' : 'vertical'}\n classNames={{\n base: classNames.base,\n label: classNames.label,\n wrapper: classNames.wrapper,\n }}\n >\n <Tabs\n disabledKeys={disabled ? disabledAllKeys : undefined}\n onSelectionChange={onChange}\n // make sure component is controlled\n selectedKey={value ?? ''}\n tabs={tabOptions}\n testId={testId}\n variant={variant}\n className={{\n base: classNames.tabBase,\n cursor: classNames.cursor,\n panel: classNames.tabPanel,\n tab: classNames.tab,\n tabContent: classNames.tabContent,\n tabList: classNames.tabList,\n tabWrapper: classNames.tabWrapper,\n }}\n />\n </HeroRadioGroup>\n );\n};\n\nexport default RadioTabs;\n","import RadioTabs from './RadioTabs';\n\nexport type { RadioTabsProps } from './RadioTabs';\n\nexport { RadioTabs };\n\nexport default RadioTabs;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFormContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-SJWL6EMI.js";
|
|
4
4
|
import {
|
|
5
5
|
FormContext_default
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-IV45K4WU.js";
|
|
7
7
|
|
|
8
8
|
// src/Form/Form.tsx
|
|
9
9
|
import { cn as cn2, slugify } from "@fuf-stack/pixel-utils";
|
|
@@ -169,4 +169,4 @@ export {
|
|
|
169
169
|
Form_default,
|
|
170
170
|
Form_default2
|
|
171
171
|
};
|
|
172
|
-
//# sourceMappingURL=chunk-
|
|
172
|
+
//# sourceMappingURL=chunk-4UR2T76K.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
UniformContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-IV45K4WU.js";
|
|
4
4
|
import {
|
|
5
5
|
fromNullishString,
|
|
6
6
|
toNullishString
|
|
@@ -38,4 +38,4 @@ var useController = (props) => {
|
|
|
38
38
|
export {
|
|
39
39
|
useController
|
|
40
40
|
};
|
|
41
|
-
//# sourceMappingURL=chunk-
|
|
41
|
+
//# sourceMappingURL=chunk-5MTIQ6WD.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkAQJLKHAEcjs = require('./chunk-AQJLKHAE.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -15,7 +15,7 @@ var _react = require('react');
|
|
|
15
15
|
var _reacthookform = require('react-hook-form');
|
|
16
16
|
var useController = (props) => {
|
|
17
17
|
const { field, formState, fieldState } = _reacthookform.useController.call(void 0, props);
|
|
18
|
-
const { userChange } = _react.useContext.call(void 0,
|
|
18
|
+
const { userChange } = _react.useContext.call(void 0, _chunkAQJLKHAEcjs.UniformContext);
|
|
19
19
|
return {
|
|
20
20
|
field: _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, field), {
|
|
21
21
|
// Handles both direct values (onChange("value")) and events (onChange(event))
|
|
@@ -38,4 +38,4 @@ var useController = (props) => {
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
exports.useController = useController;
|
|
41
|
-
//# sourceMappingURL=chunk-
|
|
41
|
+
//# sourceMappingURL=chunk-6AWHOBNL.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6AWHOBNL.cjs","../src/hooks/useController/useController.ts"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACLA,8BAA2B;AAC3B,gDAAkD;AAkC3C,IAAM,cAAA,EAAgB,CAC3B,KAAA,EAAA,GACsC;AACtC,EAAA,MAAM,EAAE,KAAA,EAAO,SAAA,EAAW,WAAW,EAAA,EAAI,0CAAA,KAAsB,CAAA;AAC/D,EAAA,MAAM,EAAE,WAAW,EAAA,EAAI,+BAAA,gCAAyB,CAAA;AAEhD,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,6CAAA,8CAAA,CAAA,CAAA,EACF,KAAA,CAAA,EADE;AAAA;AAAA;AAAA,MAIL,QAAA,EAAU,CAAA,GAAI,KAAA,EAAA,GAAiB;AArDrC,QAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAsDQ,QAAA,MAAM,MAAA,EAAA,CAAQ,GAAA,EAAA,CAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,CAAM,CAAC,CAAA,EAAA,GAAP,KAAA,EAAA,KAAA,EAAA,EAAA,EAAA,CAAU,MAAA,EAAA,GAAV,KAAA,EAAA,KAAA,EAAA,EAAA,EAAA,CAAkB,KAAA,EAAA,GAAlB,KAAA,EAAA,GAAA,EAA2B,KAAA,CAAM,CAAC,CAAA;AAChD,QAAA,MAAM,eAAA,EAAiB,MAAA,IAAU,GAAA,EAAK,GAAA,EAAK,+CAAA,KAAqB,CAAA;AAGhE,QAAA,KAAA,CAAM,QAAA,CAAS,cAAc,CAAA;AAK7B,QAAA,WAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,UAAA,CAAY,MAAA,CAAO,KAAA,CAAM,IAAA,EAAM,cAAA,CAAA;AAAA,MACjC,CAAA;AAAA;AAAA,MAEA,KAAA,EAAO,iDAAA,KAAkB,CAAM,KAAK;AAAA,IACtC,CAAA,CAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,EACF,CAAA;AACF,CAAA;ADnCA;AACA;AACE;AACF,sCAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-6AWHOBNL.cjs","sourcesContent":[null,"import type {\n ControllerFieldState,\n ControllerRenderProps,\n UseControllerProps as RHFUseControllerProps,\n UseFormStateReturn,\n} from 'react-hook-form';\n\nimport { useContext } from 'react';\nimport { useController as useRHFController } from 'react-hook-form';\n\nimport { UniformContext } from '../../Form/subcomponents/FormContext';\nimport { fromNullishString, toNullishString } from '../../helpers';\n\nexport type UseControllerProps<TFieldValues extends object = object> =\n RHFUseControllerProps<TFieldValues>;\n\nexport interface UseControllerReturn<TFieldValues extends object = object> {\n field: Omit<ControllerRenderProps<TFieldValues>, 'onChange' | 'value'> & {\n // Using any[] to support both direct value changes and React synthetic events\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange: (...event: any[]) => void;\n value: string;\n };\n formState: UseFormStateReturn<TFieldValues>;\n fieldState: ControllerFieldState;\n}\n\n/**\n * A wrapper around react-hook-form's useController that transparently handles nullish string conversions.\n *\n * Key features:\n * 1. Empty strings ('') in the UI are stored as null in form state\n * 2. Null/undefined values in form state are displayed as empty strings in the UI\n * 3. Handles both direct value changes and React synthetic events\n * 4. Maintains the same API as react-hook-form's useController\n * 5. Notifies UniformContext's userChange listeners on field changes (enables useWatchUserChange hook)\n *\n * This enables consistent handling of empty/null values while keeping a clean API\n * for form inputs that expect string values.\n *\n * @see https://react-hook-form.com/docs/usecontroller\n */\nexport const useController = <TFieldValues extends object = object>(\n props: UseControllerProps<TFieldValues>,\n): UseControllerReturn<TFieldValues> => {\n const { field, formState, fieldState } = useRHFController(props);\n const { userChange } = useContext(UniformContext);\n\n return {\n field: {\n ...field,\n // Handles both direct values (onChange(\"value\")) and events (onChange(event))\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onChange: (...event: any[]) => {\n const value = event[0]?.target?.value ?? event[0];\n const formattedValue = value === '' ? '' : toNullishString(value);\n\n // Update form state first\n field.onChange(formattedValue);\n\n // Then notify userChange listeners (for useWatchUserChange hook)\n // This ensures getValues() in listeners returns the updated value\n // Guard against undefined userChange (when used outside FormProvider)\n userChange?.notify(field.name, formattedValue);\n },\n // Convert null/undefined to empty string for UI display\n value: fromNullishString(field.value) as string,\n },\n formState,\n fieldState,\n };\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkFYN7ZWLWcjs = require('./chunk-FYN7ZWLW.cjs');
|
|
4
4
|
|
|
5
5
|
// src/SubmitButton/SubmitButton.tsx
|
|
6
6
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
@@ -19,7 +19,7 @@ var SubmitButton = ({
|
|
|
19
19
|
const {
|
|
20
20
|
formState: { isSubmitting },
|
|
21
21
|
triggerSubmit
|
|
22
|
-
} =
|
|
22
|
+
} = _chunkFYN7ZWLWcjs.useFormContext.call(void 0, );
|
|
23
23
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
24
24
|
_pixels.Button,
|
|
25
25
|
{
|
|
@@ -46,4 +46,4 @@ var SubmitButton_default2 = SubmitButton_default;
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
exports.SubmitButton_default = SubmitButton_default; exports.SubmitButton_default2 = SubmitButton_default2;
|
|
49
|
-
//# sourceMappingURL=chunk-
|
|
49
|
+
//# sourceMappingURL=chunk-ALI7JORZ.cjs.map
|