@fuf-stack/uniform 1.6.2 → 1.6.4
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 +6 -6
- package/dist/Checkboxes/index.js +5 -5
- package/dist/FieldArray/index.cjs +6 -6
- package/dist/FieldArray/index.js +5 -5
- package/dist/Form/index.cjs +6 -6
- package/dist/Form/index.js +5 -5
- package/dist/Input/index.cjs +6 -6
- package/dist/Input/index.js +5 -5
- package/dist/RadioBoxes/index.cjs +6 -6
- package/dist/RadioBoxes/index.js +5 -5
- package/dist/RadioTabs/index.cjs +6 -6
- package/dist/RadioTabs/index.js +5 -5
- package/dist/Radios/index.cjs +6 -6
- package/dist/Radios/index.js +5 -5
- package/dist/Select/index.cjs +6 -6
- package/dist/Select/index.js +5 -5
- package/dist/SubmitButton/index.cjs +6 -6
- package/dist/SubmitButton/index.js +5 -5
- package/dist/Switch/index.cjs +6 -6
- package/dist/Switch/index.js +5 -5
- package/dist/TextArea/index.cjs +6 -6
- package/dist/TextArea/index.js +5 -5
- package/dist/{chunk-NZBO4N3S.cjs → chunk-42NCLEX4.cjs} +5 -4
- package/dist/chunk-42NCLEX4.cjs.map +1 -0
- package/dist/{chunk-SJZ7UUEE.js → chunk-46FKQWMF.js} +3 -3
- package/dist/{chunk-E4DCVJS5.cjs → chunk-4ATOAQOF.cjs} +3 -3
- package/dist/{chunk-E4DCVJS5.cjs.map → chunk-4ATOAQOF.cjs.map} +1 -1
- package/dist/{chunk-BXGILW5C.js → chunk-4RIJJ5AV.js} +2 -2
- package/dist/{chunk-345LYO4H.cjs → chunk-4Z7LIJHZ.cjs} +3 -3
- package/dist/{chunk-345LYO4H.cjs.map → chunk-4Z7LIJHZ.cjs.map} +1 -1
- package/dist/{chunk-MXUKW3PZ.js → chunk-65UJEB4P.js} +2 -2
- package/dist/{chunk-F6JQYB53.cjs → chunk-7NZVPVK3.cjs} +3 -3
- package/dist/{chunk-F6JQYB53.cjs.map → chunk-7NZVPVK3.cjs.map} +1 -1
- package/dist/{chunk-IYULWK4H.cjs → chunk-A2LFA4A7.cjs} +6 -6
- package/dist/{chunk-IYULWK4H.cjs.map → chunk-A2LFA4A7.cjs.map} +1 -1
- package/dist/{chunk-QRCV7JVB.js → chunk-AAGOHXSZ.js} +2 -2
- package/dist/{chunk-D5UUY4BD.cjs → chunk-D3EZXJQH.cjs} +3 -3
- package/dist/{chunk-D5UUY4BD.cjs.map → chunk-D3EZXJQH.cjs.map} +1 -1
- package/dist/{chunk-D3NAUOYG.js → chunk-D3JYMGTB.js} +2 -2
- package/dist/{chunk-Z7FVILDT.js → chunk-FZQDAI7E.js} +3 -3
- package/dist/{chunk-NZIAIYPS.cjs → chunk-HANR2BDX.cjs} +3 -3
- package/dist/{chunk-NZIAIYPS.cjs.map → chunk-HANR2BDX.cjs.map} +1 -1
- package/dist/{chunk-JKWNYLNS.js → chunk-HBVHOUAR.js} +2 -2
- package/dist/{chunk-RMCPVDAC.cjs → chunk-HEGORLRF.cjs} +3 -3
- package/dist/{chunk-RMCPVDAC.cjs.map → chunk-HEGORLRF.cjs.map} +1 -1
- package/dist/{chunk-XJBGXFVX.cjs → chunk-HX2JJ2ZK.cjs} +3 -3
- package/dist/{chunk-XJBGXFVX.cjs.map → chunk-HX2JJ2ZK.cjs.map} +1 -1
- package/dist/{chunk-HQGTCSHK.js → chunk-I5RBXUIV.js} +2 -2
- package/dist/{chunk-GUPJNFEX.js → chunk-IK5IWKUC.js} +2 -2
- package/dist/{chunk-AACO4OEK.cjs → chunk-MOVNWZX5.cjs} +5 -5
- package/dist/{chunk-AACO4OEK.cjs.map → chunk-MOVNWZX5.cjs.map} +1 -1
- package/dist/{chunk-TKFODQWI.js → chunk-NM66XFQH.js} +2 -2
- package/dist/{chunk-H24QXVUI.js → chunk-NUGEM725.js} +2 -2
- package/dist/{chunk-PO5UQAU6.js → chunk-NZ54JBSR.js} +5 -4
- package/dist/chunk-NZ54JBSR.js.map +1 -0
- package/dist/{chunk-OJHD2XHD.cjs → chunk-PC3VCEGM.cjs} +3 -3
- package/dist/{chunk-OJHD2XHD.cjs.map → chunk-PC3VCEGM.cjs.map} +1 -1
- package/dist/{chunk-A5Z75X7M.cjs → chunk-QAQ3UP7W.cjs} +3 -3
- package/dist/{chunk-A5Z75X7M.cjs.map → chunk-QAQ3UP7W.cjs.map} +1 -1
- package/dist/{chunk-L5TXRTPB.js → chunk-RI45RSNN.js} +2 -2
- package/dist/{chunk-TGJJZEHB.cjs → chunk-SOQ6GCN3.cjs} +3 -3
- package/dist/{chunk-TGJJZEHB.cjs.map → chunk-SOQ6GCN3.cjs.map} +1 -1
- package/dist/{chunk-Z7NI5347.js → chunk-TB5WXGWX.js} +2 -2
- package/dist/{chunk-6C6YW5TM.js → chunk-UFL53ALT.js} +20 -4
- package/dist/chunk-UFL53ALT.js.map +1 -0
- package/dist/{chunk-VPUMTPD3.cjs → chunk-V3NNJJHY.cjs} +3 -3
- package/dist/{chunk-VPUMTPD3.cjs.map → chunk-V3NNJJHY.cjs.map} +1 -1
- package/dist/{chunk-WFO4XPA3.cjs → chunk-VGJEMY55.cjs} +22 -6
- package/dist/chunk-VGJEMY55.cjs.map +1 -0
- package/dist/hooks/index.cjs +5 -5
- package/dist/hooks/index.d.cts +1 -1
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +4 -4
- package/dist/hooks/useClientValidation/index.cjs +3 -3
- package/dist/hooks/useClientValidation/index.d.cts +2 -2
- package/dist/hooks/useClientValidation/index.d.ts +2 -2
- package/dist/hooks/useClientValidation/index.js +2 -2
- package/dist/hooks/useFormContext/index.cjs +2 -2
- package/dist/hooks/useFormContext/index.d.cts +1 -0
- package/dist/hooks/useFormContext/index.d.ts +1 -0
- package/dist/hooks/useFormContext/index.js +1 -1
- package/dist/hooks/useUniformField/index.cjs +3 -3
- package/dist/hooks/useUniformField/index.js +2 -2
- package/dist/hooks/useUniformFieldArray/index.cjs +4 -4
- package/dist/hooks/useUniformFieldArray/index.js +3 -3
- package/dist/index.cjs +16 -16
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +15 -15
- package/package.json +3 -3
- package/dist/chunk-6C6YW5TM.js.map +0 -1
- package/dist/chunk-NZBO4N3S.cjs.map +0 -1
- package/dist/chunk-PO5UQAU6.js.map +0 -1
- package/dist/chunk-WFO4XPA3.cjs.map +0 -1
- /package/dist/{chunk-SJZ7UUEE.js.map → chunk-46FKQWMF.js.map} +0 -0
- /package/dist/{chunk-BXGILW5C.js.map → chunk-4RIJJ5AV.js.map} +0 -0
- /package/dist/{chunk-MXUKW3PZ.js.map → chunk-65UJEB4P.js.map} +0 -0
- /package/dist/{chunk-QRCV7JVB.js.map → chunk-AAGOHXSZ.js.map} +0 -0
- /package/dist/{chunk-D3NAUOYG.js.map → chunk-D3JYMGTB.js.map} +0 -0
- /package/dist/{chunk-Z7FVILDT.js.map → chunk-FZQDAI7E.js.map} +0 -0
- /package/dist/{chunk-JKWNYLNS.js.map → chunk-HBVHOUAR.js.map} +0 -0
- /package/dist/{chunk-HQGTCSHK.js.map → chunk-I5RBXUIV.js.map} +0 -0
- /package/dist/{chunk-GUPJNFEX.js.map → chunk-IK5IWKUC.js.map} +0 -0
- /package/dist/{chunk-TKFODQWI.js.map → chunk-NM66XFQH.js.map} +0 -0
- /package/dist/{chunk-H24QXVUI.js.map → chunk-NUGEM725.js.map} +0 -0
- /package/dist/{chunk-L5TXRTPB.js.map → chunk-RI45RSNN.js.map} +0 -0
- /package/dist/{chunk-Z7NI5347.js.map → chunk-TB5WXGWX.js.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk42NCLEX4cjs = require('./chunk-42NCLEX4.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
|
+
} = _chunk42NCLEX4cjs.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-PC3VCEGM.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-PC3VCEGM.cjs","../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,oDAA4B;AAC5B,2CAAuB;AA0CnB,+CAAA;AAhBJ,IAAM,aAAA,EAAe,CAAC;AAAA,EACpB,UAAA,EAAY,aAAA;AAAA,EACZ,SAAA,EAAW,QAAA;AAAA,EACX,UAAA,EAAY,KAAA,CAAA;AAAA,EACZ,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,KAAA,CAAA;AAAA,EACP,QAAA,EAAU,KAAA;AAAA,EACV,KAAA,EAAO,IAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA,EAAA,GAAyB;AACvB,EAAA,MAAM;AAAA,IACJ,SAAA,EAAW,EAAE,aAAa,CAAA;AAAA,IAC1B;AAAA,EACF,EAAA,EAAI,8CAAA,CAAe;AAEnB,EAAA,uBACE,6BAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,SAAA,EAAW,4BAAA,SAAY,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,IAAA;AAAA,MACA,OAAA,EAAS,QAAA,GAAW,YAAA;AAAA,MAIpB,OAAA,EAAS,aAAA;AAAA,MACT,IAAA;AAAA,MACA,MAAA,EAAQ,iCAAA,MAAQ,EAAQ,EAAE,WAAA,EAAa,KAAK,CAAC,CAAA;AAAA,MAC7C,IAAA,EAAK,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EACH,CAAA;AAEJ,CAAA;AAEA,IAAO,qBAAA,EAAQ,YAAA;AD1Bf;AACA;AEnCA,IAAOA,sBAAAA,EAAQ,oBAAA;AFqCf;AACA;AACE;AACA;AACF,2GAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-PC3VCEGM.cjs","sourcesContent":[null,"import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the submit button */\n color?: ButtonProps['color'];\n /** icon of the submit button */\n icon?: ButtonProps['icon'];\n /** If set loading animation is shown */\n loading?: boolean;\n /** size of the submit button */\n size?: ButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n ariaLabel = 'Submit form',\n children = 'Submit',\n className = undefined,\n color = 'success',\n icon = undefined,\n loading = false,\n size = 'md',\n testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n const {\n formState: { isSubmitting },\n triggerSubmit,\n } = useFormContext();\n\n return (\n <Button\n ariaLabel={ariaLabel}\n className={cn(className)}\n color={color}\n disabled={isSubmitting}\n icon={icon}\n loading={loading || isSubmitting}\n // @ts-expect-error we use form context triggerSubmit\n // here so that submit button also works in special\n // scenarios (e.g. when used in modal)\n onClick={triggerSubmit}\n size={size}\n testId={slugify(testId, { replaceDots: true })}\n type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\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 _chunkSOQ6GCN3cjs = require('./chunk-SOQ6GCN3.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -106,7 +106,7 @@ var Select = (_a) => {
|
|
|
106
106
|
label,
|
|
107
107
|
required,
|
|
108
108
|
testId
|
|
109
|
-
} =
|
|
109
|
+
} = _chunkSOQ6GCN3cjs.useUniformField.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
110
110
|
name
|
|
111
111
|
}, uniformFieldProps));
|
|
112
112
|
const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
|
|
@@ -279,4 +279,4 @@ var Select_default2 = Select_default;
|
|
|
279
279
|
|
|
280
280
|
|
|
281
281
|
exports.Select_default = Select_default; exports.Select_default2 = Select_default2;
|
|
282
|
-
//# sourceMappingURL=chunk-
|
|
282
|
+
//# sourceMappingURL=chunk-QAQ3UP7W.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-A5Z75X7M.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["_a","Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-A5Z75X7M.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n control:\n 'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n group: '',\n groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n indicatorsContainer: 'gap-1 p-1',\n indicatorSeparator: 'bg-default-300',\n input: 'py-0.5 pl-1',\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 'pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'rounded-sm p-2 text-foreground-500',\n menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n menuList: '',\n // ensure menu has same z-index as modal so it is visible when rendered in modal\n // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n menuPortal: 'z-50!',\n multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n option_focused: 'bg-default-100 active:bg-default-200',\n option_selected: 'bg-default-300',\n option: 'rounded px-3 py-2 hover:cursor-pointer',\n placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n selectContainer: '',\n singleValue: 'ml-1! leading-7!',\n valueContainer: 'gap-1 p-1',\n },\n});\n\ninterface SelectOption {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** CSS class name */\n className?: ClassName; // string;\n /** Determine if the */\n clearable?: boolean;\n /** Set the select to disabled state. */\n disabled?: boolean;\n /** Filter Select Options */\n filterOption?:\n | undefined\n | ((option?: SelectOption, inputValue?: string) => boolean);\n /** Format the label of the option */\n renderOptionLabel?: undefined | Props['formatOptionLabel'];\n /** The value of the search input */\n inputValue?: string;\n /** Label that should be associated with the select. */\n label?: React.ReactNode;\n /** Set the select to a loading state. */\n loading?: boolean;\n /** switch between single and multi select mode. */\n multiSelect?: boolean;\n /** The name for the Select component, used by react-hook-form */\n name: string;\n /** Placeholder that is displayed when nothing is selected */\n placeholder?: string;\n /** The options for the Select component */\n options: SelectOption[];\n /** Handle change events on the input */\n onInputChange?: Props['onInputChange'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n\n return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {}\n <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;\n return (\n <div data-testid={testId}>\n {}\n <components.Option {...props} />\n </div>\n );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n props,\n) => {\n // @ts-expect-error data-testid is not a default prop\n\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {}\n <components.DropdownIndicator {...props} />\n </div>\n );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n className = undefined,\n clearable = true,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n ...uniformFieldProps\n}: SelectProps) => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n const [isFocused, setIsFocused] = useState(false);\n\n // classNames from slots\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n children: [],\n classNames,\n errorMessage,\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n return (\n <div\n {...getBaseProps()}\n className={cn(classNames.base)}\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-required={required}\n data-testid={`${testId}_wrapper`}\n >\n {label ? (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n </label>\n ) : null}\n <ReactSelect\n ref={ref}\n menuShouldBlockScroll\n unstyled\n aria-errormessage=\"\"\n aria-invalid={invalid}\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n // Does not affect the testId of the select, but is needed to pass it to sub-components\n data-testid={testId}\n filterOption={filterOption}\n formatOptionLabel={renderOptionLabel}\n inputValue={inputValue}\n instanceId={name}\n isClearable={clearable}\n isDisabled={disabled}\n isLoading={loading}\n isMulti={multiSelect}\n // set menuPosition to fixed so that menu can be rendered\n // inside Card / Modal components, menuShouldBlockScroll\n // prevents container scroll when menu is open\n menuPosition=\"fixed\"\n name={name}\n onInputChange={onInputChange}\n options={options}\n placeholder={placeholder}\n classNames={{\n control: () => {\n return cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n });\n },\n clearIndicator: () => {\n return classNames.clearIndicator;\n },\n dropdownIndicator: () => {\n return classNames.dropdownIndicator;\n },\n groupHeading: () => {\n return classNames.groupHeading;\n },\n indicatorsContainer: () => {\n return classNames.indicatorsContainer;\n },\n indicatorSeparator: () => {\n return classNames.indicatorSeparator;\n },\n loadingIndicator: () => {\n return classNames.loadingIndicator;\n },\n loadingMessage: () => {\n return classNames.loadingMessage;\n },\n input: () => {\n return classNames.input;\n },\n menu: () => {\n return classNames.menu;\n },\n menuList: () => {\n return classNames.menuList;\n },\n menuPortal: () => {\n return classNames.menuPortal;\n },\n multiValue: () => {\n return classNames.multiValue;\n },\n multiValueLabel: () => {\n return cn(\n classNames.multiValueLabel,\n `${getValueProps().className}`,\n );\n },\n multiValueRemove: () => {\n return classNames.multiValueRemove;\n },\n noOptionsMessage: () => {\n return classNames.noOptionsMessage;\n },\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) => {\n return cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n });\n },\n placeholder: () => {\n return classNames.placeholder;\n },\n singleValue: () => {\n return cn(classNames.singleValue, `${getValueProps().className}`);\n },\n valueContainer: () => {\n return classNames.valueContainer;\n },\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\n onBlur={(_e) => {\n setIsFocused(false);\n onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => {\n return _option.value;\n }),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n // set complete option as value by current field value\n value={options.find((option) => {\n return option.value === value;\n })}\n />\n {invalid ? (\n <div {...getHelperWrapperProps()}>\n {}\n <div {...getErrorMessageProps()}>{errorMessage}</div>\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QAQ3UP7W.cjs","../src/Select/Select.tsx","../src/Select/index.ts"],"names":["_a","Select_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-QAQ3UP7W.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { Props } from 'react-select';\n\nimport { useState } from 'react';\nimport ReactSelect, { components } from 'react-select';\n\nimport { useSelect } from '@heroui/select';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useUniformField } from '../hooks';\n\nexport const selectVariants = tv({\n slots: {\n base: 'group leading-normal',\n clearIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-foreground-800',\n control:\n 'duration-150! rounded-lg border-2 border-default-200 bg-content1 transition-background hover:border-default-400 group-data-[invalid=true]:border-danger group-data-[invalid=true]:hover:border-danger motion-reduce:transition-none',\n control_focused: 'border-focus',\n crossIcon: '',\n downChevron: '',\n dropdownIndicator:\n 'rounded-md p-1 text-foreground-500 hover:cursor-pointer hover:bg-default-200 hover:text-black',\n group: '',\n groupHeading: 'mb-1 ml-3 mt-2 text-sm text-foreground-500',\n indicatorsContainer: 'gap-1 p-1',\n indicatorSeparator: 'bg-default-300',\n input: 'py-0.5 pl-1',\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 'pointer-events-auto relative bottom-1.5 ml-1 subpixel-antialiased text-small group-data-[invalid=true]:!text-danger group-data-[required=true]:after:ml-0.5 group-data-[required=true]:after:text-danger group-data-[required=true]:after:content-[\"*\"]',\n loadingIndicator: '',\n loadingMessage: 'rounded-sm p-2 text-foreground-500',\n menu: 'mt-2 rounded-xl border border-default-200 bg-content1 p-1 shadow-lg',\n menuList: '',\n // ensure menu has same z-index as modal so it is visible when rendered in modal\n // see: https://github.com/heroui-inc/heroui/blob/main/packages/core/theme/src/components/modal.ts (see z-50)\n menuPortal: 'z-50!',\n multiValue: 'items-center gap-1.5 rounded bg-default-100 py-0.5 pl-2 pr-1',\n multiValueContainer: '',\n multiValueLabel: 'py-0.5 leading-6',\n multiValueRemove:\n 'rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800',\n noOptionsMessage: 'rounded-sm p-2 text-foreground-500',\n option_focused: 'bg-default-100 active:bg-default-200',\n option_selected: 'bg-default-300',\n option: 'rounded px-3 py-2 hover:cursor-pointer',\n placeholder: 'ml-1 py-0.5 pl-1 text-sm text-foreground-500',\n selectContainer: '',\n singleValue: 'ml-1! leading-7!',\n valueContainer: 'gap-1 p-1',\n },\n});\n\ninterface SelectOption {\n /** option label */\n label?: React.ReactNode;\n /** option value */\n value: string;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** CSS class name */\n className?: ClassName; // string;\n /** Determine if the */\n clearable?: boolean;\n /** Set the select to disabled state. */\n disabled?: boolean;\n /** Filter Select Options */\n filterOption?:\n | undefined\n | ((option?: SelectOption, inputValue?: string) => boolean);\n /** Format the label of the option */\n renderOptionLabel?: undefined | Props['formatOptionLabel'];\n /** The value of the search input */\n inputValue?: string;\n /** Label that should be associated with the select. */\n label?: React.ReactNode;\n /** Set the select to a loading state. */\n loading?: boolean;\n /** switch between single and multi select mode. */\n multiSelect?: boolean;\n /** The name for the Select component, used by react-hook-form */\n name: string;\n /** Placeholder that is displayed when nothing is selected */\n placeholder?: string;\n /** The options for the Select component */\n options: SelectOption[];\n /** Handle change events on the input */\n onInputChange?: Props['onInputChange'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\nconst InputComponent: typeof components.Input = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}`;\n\n return <components.Input data-testid={testId} {...props} />;\n};\n\nconst ControlComponent: typeof components.Control = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select`;\n return (\n <div data-testid={testId}>\n {}\n <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n // @ts-expect-error data-testid is not a default prop\n // eslint-disable-next-line react/destructuring-assignment\n const testId = `${props.selectProps['data-testid']}_select_option_${slugify(props?.data?.testId ?? props?.data?.value, { replaceDots: true })}`;\n return (\n <div data-testid={testId}>\n {}\n <components.Option {...props} />\n </div>\n );\n};\n\nconst DropdownIndicatorComponent: typeof components.DropdownIndicator = (\n props,\n) => {\n // @ts-expect-error data-testid is not a default prop\n\n const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\n {}\n <components.DropdownIndicator {...props} />\n </div>\n );\n};\n\n/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */\nconst Select = ({\n className = undefined,\n clearable = true,\n filterOption = undefined,\n renderOptionLabel = undefined,\n inputValue = undefined,\n loading = false,\n multiSelect = false,\n name,\n onInputChange = undefined,\n options,\n placeholder = undefined,\n ...uniformFieldProps\n}: SelectProps) => {\n const {\n disabled,\n errorMessage,\n field: { onBlur, onChange, ref, value },\n getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n invalid,\n label,\n required,\n testId,\n } = useUniformField({\n name,\n ...uniformFieldProps,\n });\n\n const [isFocused, setIsFocused] = useState(false);\n\n // classNames from slots\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n const { getBaseProps, getTriggerProps, getValueProps } = useSelect({\n children: [],\n classNames,\n errorMessage,\n isDisabled: disabled,\n isInvalid: invalid,\n isLoading: loading,\n isRequired: required,\n label,\n labelPlacement: 'outside',\n });\n\n return (\n <div\n {...getBaseProps()}\n className={cn(classNames.base)}\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-required={required}\n data-testid={`${testId}_wrapper`}\n >\n {label ? (\n <label\n className={classNames.label}\n data-slot=\"label\"\n htmlFor={`react-select-${name}-input`}\n id={getLabelProps().id}\n >\n {label}\n </label>\n ) : null}\n <ReactSelect\n ref={ref}\n menuShouldBlockScroll\n unstyled\n aria-errormessage=\"\"\n aria-invalid={invalid}\n aria-labelledby={getTriggerProps()['aria-labelledby']?.split(' ')[1]}\n // Does not affect the testId of the select, but is needed to pass it to sub-components\n data-testid={testId}\n filterOption={filterOption}\n formatOptionLabel={renderOptionLabel}\n inputValue={inputValue}\n instanceId={name}\n isClearable={clearable}\n isDisabled={disabled}\n isLoading={loading}\n isMulti={multiSelect}\n // set menuPosition to fixed so that menu can be rendered\n // inside Card / Modal components, menuShouldBlockScroll\n // prevents container scroll when menu is open\n menuPosition=\"fixed\"\n name={name}\n onInputChange={onInputChange}\n options={options}\n placeholder={placeholder}\n classNames={{\n control: () => {\n return cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n });\n },\n clearIndicator: () => {\n return classNames.clearIndicator;\n },\n dropdownIndicator: () => {\n return classNames.dropdownIndicator;\n },\n groupHeading: () => {\n return classNames.groupHeading;\n },\n indicatorsContainer: () => {\n return classNames.indicatorsContainer;\n },\n indicatorSeparator: () => {\n return classNames.indicatorSeparator;\n },\n loadingIndicator: () => {\n return classNames.loadingIndicator;\n },\n loadingMessage: () => {\n return classNames.loadingMessage;\n },\n input: () => {\n return classNames.input;\n },\n menu: () => {\n return classNames.menu;\n },\n menuList: () => {\n return classNames.menuList;\n },\n menuPortal: () => {\n return classNames.menuPortal;\n },\n multiValue: () => {\n return classNames.multiValue;\n },\n multiValueLabel: () => {\n return cn(\n classNames.multiValueLabel,\n `${getValueProps().className}`,\n );\n },\n multiValueRemove: () => {\n return classNames.multiValueRemove;\n },\n noOptionsMessage: () => {\n return classNames.noOptionsMessage;\n },\n option: ({\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }) => {\n return cn(classNames.option, {\n [classNames.option_focused]: optionIsFocused,\n [classNames.option_selected]: optionIsSelected,\n });\n },\n placeholder: () => {\n return classNames.placeholder;\n },\n singleValue: () => {\n return cn(classNames.singleValue, `${getValueProps().className}`);\n },\n valueContainer: () => {\n return classNames.valueContainer;\n },\n }}\n components={{\n Input: InputComponent,\n Option: OptionComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Control: ControlComponent,\n }}\n onBlur={(_e) => {\n setIsFocused(false);\n onBlur();\n }}\n onChange={(option) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => {\n return _option.value;\n }),\n );\n } else {\n onChange((option as SelectOption)?.value);\n }\n }}\n onFocus={(_e) => {\n setIsFocused(true);\n }}\n // set complete option as value by current field value\n value={options.find((option) => {\n return option.value === value;\n })}\n />\n {invalid ? (\n <div {...getHelperWrapperProps()}>\n {}\n <div {...getErrorMessageProps()}>{errorMessage}</div>\n </div>\n ) : null}\n </div>\n );\n};\n\nexport default Select;\n","import Select from './Select';\n\nexport type { SelectProps } from './Select';\n\nexport { Select };\n\nexport default Select;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFormContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-NZ54JBSR.js";
|
|
4
4
|
import {
|
|
5
5
|
flatArrayKey
|
|
6
6
|
} from "./chunk-76KOVUDN.js";
|
|
@@ -65,4 +65,4 @@ export {
|
|
|
65
65
|
useClientValidation,
|
|
66
66
|
clientValidationSchemaByName
|
|
67
67
|
};
|
|
68
|
-
//# sourceMappingURL=chunk-
|
|
68
|
+
//# sourceMappingURL=chunk-RI45RSNN.js.map
|
|
@@ -12,7 +12,7 @@ var _chunkPCTYJUY7cjs = require('./chunk-PCTYJUY7.cjs');
|
|
|
12
12
|
var _chunkOE5BOGGXcjs = require('./chunk-OE5BOGGX.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
var
|
|
15
|
+
var _chunk42NCLEX4cjs = require('./chunk-42NCLEX4.cjs');
|
|
16
16
|
|
|
17
17
|
// src/hooks/useUniformField/useUniformField.tsx
|
|
18
18
|
var _react = require('react');
|
|
@@ -57,7 +57,7 @@ function useUniformField(params) {
|
|
|
57
57
|
getFieldState,
|
|
58
58
|
getValues,
|
|
59
59
|
resetField
|
|
60
|
-
} =
|
|
60
|
+
} = _chunk42NCLEX4cjs.useFormContext.call(void 0, );
|
|
61
61
|
const {
|
|
62
62
|
error,
|
|
63
63
|
invalid: rawInvalid,
|
|
@@ -119,4 +119,4 @@ function useUniformField(params) {
|
|
|
119
119
|
|
|
120
120
|
|
|
121
121
|
exports.useUniformField = useUniformField;
|
|
122
|
-
//# sourceMappingURL=chunk-
|
|
122
|
+
//# sourceMappingURL=chunk-SOQ6GCN3.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TGJJZEHB.cjs","../src/hooks/useUniformField/useUniformField.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-TGJJZEHB.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\nimport type { FieldError, FieldValues, Path } from 'react-hook-form';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useReducedMotion } from '@fuf-stack/pixel-motion';\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';\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 */\nconst useDebouncedInvalid = (value: boolean, delayMs: number) => {\n const [state, setState] = useState(value);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const prefersReducedMotion = useReducedMotion();\n\n useEffect(() => {\n if (prefersReducedMotion) {\n // Respect reduced motion: apply immediately\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n setState(value);\n return undefined;\n }\n\n // Debounce any change (true or false) by delayMs\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => {\n setState(value);\n timeoutRef.current = null;\n }, delayMs);\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n }, [value, delayMs, prefersReducedMotion]);\n\n return state;\n};\n\nexport interface UseUniformFieldParams<\n TFieldValues extends FieldValues = FieldValues,\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}\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 nullish conversions applied */\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 nullish handling) */\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 * - 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<TFieldValues extends FieldValues = FieldValues>(\n params: UseUniformFieldParams<TFieldValues>,\n): UseUniformFieldReturn<TFieldValues> {\n const { name, disabled = false, testId: explicitTestId, label } = 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 { onChange, disabled: isDisabled, onBlur, ref } = field;\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 getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getValues,\n invalid,\n label: labelNode,\n onBlur,\n onChange,\n ref,\n required,\n resetField,\n testId,\n };\n}\n\nexport default useUniformField;\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SOQ6GCN3.cjs","../src/hooks/useUniformField/useUniformField.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-SOQ6GCN3.cjs","sourcesContent":[null,"import type { ReactNode } from 'react';\nimport type { FieldError, FieldValues, Path } from 'react-hook-form';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useReducedMotion } from '@fuf-stack/pixel-motion';\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';\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 */\nconst useDebouncedInvalid = (value: boolean, delayMs: number) => {\n const [state, setState] = useState(value);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const prefersReducedMotion = useReducedMotion();\n\n useEffect(() => {\n if (prefersReducedMotion) {\n // Respect reduced motion: apply immediately\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n setState(value);\n return undefined;\n }\n\n // Debounce any change (true or false) by delayMs\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => {\n setState(value);\n timeoutRef.current = null;\n }, delayMs);\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n timeoutRef.current = null;\n }\n };\n }, [value, delayMs, prefersReducedMotion]);\n\n return state;\n};\n\nexport interface UseUniformFieldParams<\n TFieldValues extends FieldValues = FieldValues,\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}\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 nullish conversions applied */\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 nullish handling) */\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 * - 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<TFieldValues extends FieldValues = FieldValues>(\n params: UseUniformFieldParams<TFieldValues>,\n): UseUniformFieldReturn<TFieldValues> {\n const { name, disabled = false, testId: explicitTestId, label } = 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 { onChange, disabled: isDisabled, onBlur, ref } = field;\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 getErrorMessageProps,\n getHelperWrapperProps,\n getLabelProps,\n getValues,\n invalid,\n label: labelNode,\n onBlur,\n onChange,\n ref,\n required,\n resetField,\n testId,\n };\n}\n\nexport default useUniformField;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useUniformField
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-D3JYMGTB.js";
|
|
4
4
|
import {
|
|
5
5
|
FieldValidationError_default
|
|
6
6
|
} from "./chunk-ELYGQTXB.js";
|
|
@@ -178,4 +178,4 @@ export {
|
|
|
178
178
|
Checkboxes_default,
|
|
179
179
|
Checkboxes_default2
|
|
180
180
|
};
|
|
181
|
-
//# sourceMappingURL=chunk-
|
|
181
|
+
//# sourceMappingURL=chunk-TB5WXGWX.js.map
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
FormContext_default,
|
|
3
3
|
useFormContext
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-NZ54JBSR.js";
|
|
5
5
|
|
|
6
6
|
// src/Form/Form.tsx
|
|
7
7
|
import { cn as cn2, slugify } from "@fuf-stack/pixel-utils";
|
|
8
8
|
|
|
9
9
|
// src/Form/subcomponents/FormDebugViewer.tsx
|
|
10
|
+
import { useEffect, useState } from "react";
|
|
10
11
|
import { FaTimes } from "react-icons/fa";
|
|
11
12
|
import { FaBug, FaBullseye } from "react-icons/fa6";
|
|
12
13
|
import { cn } from "@fuf-stack/pixel-utils";
|
|
@@ -21,12 +22,27 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
21
22
|
formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },
|
|
22
23
|
setDebugMode,
|
|
23
24
|
validation: { errors },
|
|
24
|
-
|
|
25
|
+
subscribe
|
|
25
26
|
} = useFormContext();
|
|
26
27
|
const showDebugButton = debugMode === "off";
|
|
27
28
|
const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
|
|
28
29
|
const showDebugTestIds = debugMode === "debug-testids";
|
|
29
|
-
const values =
|
|
30
|
+
const [values, setValues] = useState({});
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (!showDebugCard) {
|
|
33
|
+
return void 0;
|
|
34
|
+
}
|
|
35
|
+
const subscription = subscribe({
|
|
36
|
+
formState: { values: true },
|
|
37
|
+
callback: (state) => {
|
|
38
|
+
var _a;
|
|
39
|
+
setValues((_a = state.values) != null ? _a : {});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return () => {
|
|
43
|
+
subscription();
|
|
44
|
+
};
|
|
45
|
+
}, [showDebugCard, subscribe]);
|
|
30
46
|
if (showDebugButton) {
|
|
31
47
|
return /* @__PURE__ */ jsx(
|
|
32
48
|
Button,
|
|
@@ -148,4 +164,4 @@ export {
|
|
|
148
164
|
Form_default,
|
|
149
165
|
Form_default2
|
|
150
166
|
};
|
|
151
|
-
//# sourceMappingURL=chunk-
|
|
167
|
+
//# sourceMappingURL=chunk-UFL53ALT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** settings for from debug mode */\n debug?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n debug = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n return (\n <FormProvider\n debugModeSettings={debug}\n initialValues={initialValues}\n onSubmit={onSubmit}\n validation={validation}\n validationTrigger={validationTrigger}\n >\n {({ handleSubmit, isValid }) => {\n return (\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('grow', className)}\n data-form-is-valid={isValid}\n data-testid={slugify(testId ?? name ?? '')}\n name={name}\n onSubmit={handleSubmit}\n >\n {children}\n </form>\n {/* render debug viewer when not in test environment and debug not disabled */}\n {!IS_TEST && !debug?.disable && (\n <FormDebugViewer className=\"w-96 shrink\" />\n )}\n </div>\n );\n }}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n debugMode,\n formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n setDebugMode,\n validation: { errors },\n subscribe,\n } = useFormContext();\n\n const showDebugButton = debugMode === 'off';\n const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n const showDebugTestIds = debugMode === 'debug-testids';\n\n // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n // This component manages its own state and only updates itself when form values change.\n const [values, setValues] = useState<Record<string, unknown>>({});\n\n useEffect(() => {\n // Only subscribe when debug card is visible\n if (!showDebugCard) {\n return undefined;\n }\n\n const subscription = subscribe({\n formState: { values: true },\n callback: (state) => {\n setValues(state.values ?? {});\n },\n });\n\n return () => {\n subscription();\n };\n }, [showDebugCard, subscribe]);\n\n if (showDebugButton) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n icon={<FaBug />}\n variant=\"light\"\n onClick={() => {\n setDebugMode('debug');\n }}\n />\n );\n }\n\n // do not show card\n if (!showDebugCard) {\n return null;\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n color=\"danger\"\n icon={<FaTimes />}\n size=\"sm\"\n variant=\"light\"\n onClick={() => {\n setDebugMode('off');\n }}\n />\n </div>\n }\n >\n <Button\n className=\"mb-4 ml-auto mr-auto\"\n icon={<FaBullseye />}\n variant={showDebugTestIds ? 'solid' : 'light'}\n onClick={() => {\n setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n }}\n >\n {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values,\n errors: errors ?? null,\n submit: {\n isValid,\n isSubmitting,\n isSubmitSuccessful,\n submitCount,\n },\n }}\n />\n </Card>\n );\n};\n\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":"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","names":["cn","jsx","jsxs","cn","Form_default"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkSOQ6GCN3cjs = require('./chunk-SOQ6GCN3.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
|
+
} = _chunkSOQ6GCN3cjs.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-V3NNJJHY.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VPUMTPD3.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-VPUMTPD3.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-V3NNJJHY.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-V3NNJJHY.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,12 +1,13 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunk42NCLEX4cjs = require('./chunk-42NCLEX4.cjs');
|
|
5
5
|
|
|
6
6
|
// src/Form/Form.tsx
|
|
7
7
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
8
8
|
|
|
9
9
|
// src/Form/subcomponents/FormDebugViewer.tsx
|
|
10
|
+
var _react = require('react');
|
|
10
11
|
var _fa = require('react-icons/fa');
|
|
11
12
|
var _fa6 = require('react-icons/fa6');
|
|
12
13
|
|
|
@@ -21,12 +22,27 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
21
22
|
formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },
|
|
22
23
|
setDebugMode,
|
|
23
24
|
validation: { errors },
|
|
24
|
-
|
|
25
|
-
} =
|
|
25
|
+
subscribe
|
|
26
|
+
} = _chunk42NCLEX4cjs.useFormContext.call(void 0, );
|
|
26
27
|
const showDebugButton = debugMode === "off";
|
|
27
28
|
const showDebugCard = debugMode === "debug" || debugMode === "debug-testids";
|
|
28
29
|
const showDebugTestIds = debugMode === "debug-testids";
|
|
29
|
-
const values =
|
|
30
|
+
const [values, setValues] = _react.useState.call(void 0, {});
|
|
31
|
+
_react.useEffect.call(void 0, () => {
|
|
32
|
+
if (!showDebugCard) {
|
|
33
|
+
return void 0;
|
|
34
|
+
}
|
|
35
|
+
const subscription = subscribe({
|
|
36
|
+
formState: { values: true },
|
|
37
|
+
callback: (state) => {
|
|
38
|
+
var _a;
|
|
39
|
+
setValues((_a = state.values) != null ? _a : {});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
return () => {
|
|
43
|
+
subscription();
|
|
44
|
+
};
|
|
45
|
+
}, [showDebugCard, subscribe]);
|
|
30
46
|
if (showDebugButton) {
|
|
31
47
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
32
48
|
_Button.Button,
|
|
@@ -112,7 +128,7 @@ var Form = ({
|
|
|
112
128
|
validationTrigger = "all"
|
|
113
129
|
}) => {
|
|
114
130
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
115
|
-
|
|
131
|
+
_chunk42NCLEX4cjs.FormContext_default,
|
|
116
132
|
{
|
|
117
133
|
debugModeSettings: debug,
|
|
118
134
|
initialValues,
|
|
@@ -148,4 +164,4 @@ var Form_default2 = Form_default;
|
|
|
148
164
|
|
|
149
165
|
|
|
150
166
|
exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
|
|
151
|
-
//# sourceMappingURL=chunk-
|
|
167
|
+
//# sourceMappingURL=chunk-VGJEMY55.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VGJEMY55.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-VGJEMY55.cjs","sourcesContent":[null,"import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn, slugify } from '@fuf-stack/pixel-utils';\n\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nconst IS_TEST = process.env.NODE_ENV === 'test';\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** settings for from debug mode */\n debug?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n debug = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n return (\n <FormProvider\n debugModeSettings={debug}\n initialValues={initialValues}\n onSubmit={onSubmit}\n validation={validation}\n validationTrigger={validationTrigger}\n >\n {({ handleSubmit, isValid }) => {\n return (\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('grow', className)}\n data-form-is-valid={isValid}\n data-testid={slugify(testId ?? name ?? '')}\n name={name}\n onSubmit={handleSubmit}\n >\n {children}\n </form>\n {/* render debug viewer when not in test environment and debug not disabled */}\n {!IS_TEST && !debug?.disable && (\n <FormDebugViewer className=\"w-96 shrink\" />\n )}\n </div>\n );\n }}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button } from '@fuf-stack/pixels/Button';\nimport { Card } from '@fuf-stack/pixels/Card';\nimport { Json } from '@fuf-stack/pixels/Json';\n\nimport { useFormContext } from '../../hooks';\n\n// import Json css (theme)\nimport '@fuf-stack/pixels/Json.css';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n debugMode,\n formState: { isValid, isSubmitting, submitCount, isSubmitSuccessful },\n setDebugMode,\n validation: { errors },\n subscribe,\n } = useFormContext();\n\n const showDebugButton = debugMode === 'off';\n const showDebugCard = debugMode === 'debug' || debugMode === 'debug-testids';\n const showDebugTestIds = debugMode === 'debug-testids';\n\n // Use subscribe instead of watch() to avoid triggering re-renders on parent components.\n // This component manages its own state and only updates itself when form values change.\n const [values, setValues] = useState<Record<string, unknown>>({});\n\n useEffect(() => {\n // Only subscribe when debug card is visible\n if (!showDebugCard) {\n return undefined;\n }\n\n const subscription = subscribe({\n formState: { values: true },\n callback: (state) => {\n setValues(state.values ?? {});\n },\n });\n\n return () => {\n subscription();\n };\n }, [showDebugCard, subscribe]);\n\n if (showDebugButton) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n className=\"fixed bottom-2.5 right-2.5 w-5 text-default-400\"\n icon={<FaBug />}\n variant=\"light\"\n onClick={() => {\n setDebugMode('debug');\n }}\n />\n );\n }\n\n // do not show card\n if (!showDebugCard) {\n return null;\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n color=\"danger\"\n icon={<FaTimes />}\n size=\"sm\"\n variant=\"light\"\n onClick={() => {\n setDebugMode('off');\n }}\n />\n </div>\n }\n >\n <Button\n className=\"mb-4 ml-auto mr-auto\"\n icon={<FaBullseye />}\n variant={showDebugTestIds ? 'solid' : 'light'}\n onClick={() => {\n setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug');\n }}\n >\n {showDebugTestIds ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values,\n errors: errors ?? null,\n submit: {\n isValid,\n isSubmitting,\n isSubmitSuccessful,\n submitCount,\n },\n }}\n />\n </Card>\n );\n};\n\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}
|
package/dist/hooks/index.cjs
CHANGED
|
@@ -7,10 +7,10 @@ var _chunkBZ5OMN4Ycjs = require('../chunk-BZ5OMN4Y.cjs');
|
|
|
7
7
|
var _chunk4WYC2RBEcjs = require('../chunk-4WYC2RBE.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _chunkMOVNWZX5cjs = require('../chunk-MOVNWZX5.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _chunkSOQ6GCN3cjs = require('../chunk-SOQ6GCN3.cjs');
|
|
14
14
|
require('../chunk-NHEZXA4H.cjs');
|
|
15
15
|
|
|
16
16
|
|
|
@@ -22,11 +22,11 @@ require('../chunk-OE5BOGGX.cjs');
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var _chunkD3EZXJQHcjs = require('../chunk-D3EZXJQH.cjs');
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
var
|
|
29
|
+
var _chunk42NCLEX4cjs = require('../chunk-42NCLEX4.cjs');
|
|
30
30
|
require('../chunk-Z353BLWI.cjs');
|
|
31
31
|
require('../chunk-555JRYCS.cjs');
|
|
32
32
|
|
|
@@ -40,5 +40,5 @@ require('../chunk-555JRYCS.cjs');
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
exports.checkFieldIsRequired =
|
|
43
|
+
exports.checkFieldIsRequired = _chunk42NCLEX4cjs.checkFieldIsRequired; exports.clientValidationSchemaByName = _chunkD3EZXJQHcjs.clientValidationSchemaByName; exports.useClientValidation = _chunkD3EZXJQHcjs.useClientValidation; exports.useController = _chunkJMFDNTVCcjs.useController; exports.useFormContext = _chunk42NCLEX4cjs.useFormContext; exports.useInput = _chunkPCTYJUY7cjs.useInput; exports.useInputValueDebounce = _chunkBZ5OMN4Ycjs.useInputValueDebounce; exports.useInputValueTransform = _chunk4WYC2RBEcjs.useInputValueTransform; exports.useUniformField = _chunkSOQ6GCN3cjs.useUniformField; exports.useUniformFieldArray = _chunkMOVNWZX5cjs.useUniformFieldArray;
|
|
44
44
|
//# sourceMappingURL=index.cjs.map
|
package/dist/hooks/index.d.cts
CHANGED
|
@@ -6,7 +6,7 @@ export { useInput } from '@heroui/input';
|
|
|
6
6
|
export { UseInputValueDebounceOptions, UseInputValueDebounceReturn, useInputValueDebounce } from './useInputValueDebounce/index.cjs';
|
|
7
7
|
export { InputValueTransform, UseInputValueTransformOptions, UseInputValueTransformReturn, useInputValueTransform } from './useInputValueTransform/index.cjs';
|
|
8
8
|
export { UseUniformFieldParams, UseUniformFieldReturn, useUniformField } from './useUniformField/index.cjs';
|
|
9
|
-
import '@fuf-stack/veto/dist/types.d-
|
|
9
|
+
import '@fuf-stack/veto/dist/types.d-CNPgNK-V';
|
|
10
10
|
import '@fuf-stack/veto';
|
|
11
11
|
import 'react-hook-form';
|
|
12
12
|
import 'react';
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export { useInput } from '@heroui/input';
|
|
|
6
6
|
export { UseInputValueDebounceOptions, UseInputValueDebounceReturn, useInputValueDebounce } from './useInputValueDebounce/index.js';
|
|
7
7
|
export { InputValueTransform, UseInputValueTransformOptions, UseInputValueTransformReturn, useInputValueTransform } from './useInputValueTransform/index.js';
|
|
8
8
|
export { UseUniformFieldParams, UseUniformFieldReturn, useUniformField } from './useUniformField/index.js';
|
|
9
|
-
import '@fuf-stack/veto/dist/types.d-
|
|
9
|
+
import '@fuf-stack/veto/dist/types.d-CNPgNK-V';
|
|
10
10
|
import '@fuf-stack/veto';
|
|
11
11
|
import 'react-hook-form';
|
|
12
12
|
import 'react';
|
package/dist/hooks/index.js
CHANGED
|
@@ -7,10 +7,10 @@ import {
|
|
|
7
7
|
} from "../chunk-7KLFK2IT.js";
|
|
8
8
|
import {
|
|
9
9
|
useUniformFieldArray
|
|
10
|
-
} from "../chunk-
|
|
10
|
+
} from "../chunk-FZQDAI7E.js";
|
|
11
11
|
import {
|
|
12
12
|
useUniformField
|
|
13
|
-
} from "../chunk-
|
|
13
|
+
} from "../chunk-D3JYMGTB.js";
|
|
14
14
|
import "../chunk-ELYGQTXB.js";
|
|
15
15
|
import {
|
|
16
16
|
useController
|
|
@@ -22,11 +22,11 @@ import "../chunk-NTDKZW4E.js";
|
|
|
22
22
|
import {
|
|
23
23
|
clientValidationSchemaByName,
|
|
24
24
|
useClientValidation
|
|
25
|
-
} from "../chunk-
|
|
25
|
+
} from "../chunk-RI45RSNN.js";
|
|
26
26
|
import {
|
|
27
27
|
checkFieldIsRequired,
|
|
28
28
|
useFormContext
|
|
29
|
-
} from "../chunk-
|
|
29
|
+
} from "../chunk-NZ54JBSR.js";
|
|
30
30
|
import "../chunk-76KOVUDN.js";
|
|
31
31
|
import "../chunk-K2V4ULA2.js";
|
|
32
32
|
export {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../../chunk-
|
|
4
|
+
var _chunkD3EZXJQHcjs = require('../../chunk-D3EZXJQH.cjs');
|
|
5
|
+
require('../../chunk-42NCLEX4.cjs');
|
|
6
6
|
require('../../chunk-Z353BLWI.cjs');
|
|
7
7
|
require('../../chunk-555JRYCS.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
exports.clientValidationSchemaByName =
|
|
11
|
+
exports.clientValidationSchemaByName = _chunkD3EZXJQHcjs.clientValidationSchemaByName; exports.useClientValidation = _chunkD3EZXJQHcjs.useClientValidation;
|
|
12
12
|
//# sourceMappingURL=index.cjs.map
|