@fuf-stack/uniform 1.7.0 → 1.8.0
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/Input/index.cjs +2 -2
- package/dist/Input/index.js +1 -1
- package/dist/{chunk-WHV55VFM.js → chunk-GEJUMUTH.js} +52 -34
- package/dist/chunk-GEJUMUTH.js.map +1 -0
- package/dist/{chunk-2E4Q6OHC.cjs → chunk-ZLTMRO6X.cjs} +52 -34
- package/dist/chunk-ZLTMRO6X.cjs.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.js +1 -1
- package/package.json +5 -4
- package/dist/chunk-2E4Q6OHC.cjs.map +0 -1
- package/dist/chunk-WHV55VFM.js.map +0 -1
package/dist/Input/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkZLTMRO6Xcjs = require('../chunk-ZLTMRO6X.cjs');
|
|
5
5
|
require('../chunk-KWJMKX5J.cjs');
|
|
6
6
|
require('../chunk-NTOYCWCJ.cjs');
|
|
7
7
|
require('../chunk-IFBKJ5UZ.cjs');
|
|
@@ -20,5 +20,5 @@ require('../chunk-555JRYCS.cjs');
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
exports.Input =
|
|
23
|
+
exports.Input = _chunkZLTMRO6Xcjs.Input_default; exports.default = _chunkZLTMRO6Xcjs.Input_default2;
|
|
24
24
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Input/index.js
CHANGED
|
@@ -6,11 +6,13 @@ import {
|
|
|
6
6
|
} from "./chunk-EGFB5WEK.js";
|
|
7
7
|
import {
|
|
8
8
|
__objRest,
|
|
9
|
+
__spreadProps,
|
|
9
10
|
__spreadValues
|
|
10
11
|
} from "./chunk-K2V4ULA2.js";
|
|
11
12
|
|
|
12
13
|
// src/Input/Input.tsx
|
|
13
14
|
import { Input as HeroInput } from "@heroui/input";
|
|
15
|
+
import { NumberInput as HeroNumberInput } from "@heroui/number-input";
|
|
14
16
|
import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
|
|
15
17
|
import { jsx } from "react/jsx-runtime";
|
|
16
18
|
var inputVariants = tv({
|
|
@@ -81,39 +83,55 @@ var Input = (_a) => {
|
|
|
81
83
|
} : {};
|
|
82
84
|
const variants = inputVariants();
|
|
83
85
|
const classNames = variantsToClassNames(variants, _className, "base");
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
86
|
+
const commonProps = __spreadValues({
|
|
87
|
+
ref,
|
|
88
|
+
classNames: {
|
|
89
|
+
base: classNames.base,
|
|
90
|
+
clearButton: classNames.clearButton,
|
|
91
|
+
// set padding to 0 for error message exit animation
|
|
92
|
+
helperWrapper: "p-0",
|
|
93
|
+
input: classNames.input,
|
|
94
|
+
inputWrapper: classNames.inputWrapper
|
|
95
|
+
},
|
|
96
|
+
"data-testid": testId,
|
|
97
|
+
endContent,
|
|
98
|
+
errorMessage,
|
|
99
|
+
id: testId,
|
|
100
|
+
isDisabled: disabled,
|
|
101
|
+
isInvalid: invalid,
|
|
102
|
+
isRequired: required,
|
|
103
|
+
label,
|
|
104
|
+
labelPlacement: "outside",
|
|
105
|
+
name,
|
|
106
|
+
onBlur,
|
|
107
|
+
placeholder,
|
|
108
|
+
radius: "sm",
|
|
109
|
+
size,
|
|
110
|
+
startContent,
|
|
111
|
+
variant: "bordered"
|
|
112
|
+
}, clearableProps);
|
|
113
|
+
if (type === "number") {
|
|
114
|
+
const numberValue = value !== "" && value != null && !Number.isNaN(Number(value)) ? Number(value) : void 0;
|
|
115
|
+
return /* @__PURE__ */ jsx(
|
|
116
|
+
HeroNumberInput,
|
|
117
|
+
__spreadProps(__spreadValues({}, commonProps), {
|
|
118
|
+
value: numberValue,
|
|
119
|
+
formatOptions: {
|
|
120
|
+
useGrouping: false
|
|
121
|
+
},
|
|
122
|
+
onChange: (e) => {
|
|
123
|
+
if (typeof e === "number") {
|
|
124
|
+
onChange({
|
|
125
|
+
target: { value: String(e) }
|
|
126
|
+
});
|
|
127
|
+
} else {
|
|
128
|
+
onChange(e);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
})
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
return /* @__PURE__ */ jsx(HeroInput, __spreadProps(__spreadValues({}, commonProps), { onChange, type, value }));
|
|
117
135
|
};
|
|
118
136
|
var Input_default = Input;
|
|
119
137
|
|
|
@@ -124,4 +142,4 @@ export {
|
|
|
124
142
|
Input_default,
|
|
125
143
|
Input_default2
|
|
126
144
|
};
|
|
127
|
-
//# sourceMappingURL=chunk-
|
|
145
|
+
//# sourceMappingURL=chunk-GEJUMUTH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;AAKA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,eAAe,uBAAuB;AAE/C,SAAS,IAAI,4BAA4B;AAwJnC;AAnJC,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,aAAa;AAAA;AAAA,IAEb,OAAO;AAAA;AAAA,IAEP,cAAc;AAAA,EAChB;AACF,CAAC;AAuCD,IAAM,QAAQ,CAAC,OAYG;AAZH,eACb;AAAA,eAAW,aAAa;AAAA,IACxB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb;AAAA,IACA,UAAU;AAAA,IACV,cAAc;AAAA,IACd,OAAO;AAAA,IACP,eAAe;AAAA,IACf,OAAO;AAAA,EA1ET,IAgEe,IAWV,8BAXU,IAWV;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB,iBAAE,MAAM,QAAS,kBAAmB;AAGxD,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,EACT,CAAC;AAGD,QAAM,iBACJ,YACI;AAAA,IACE,aAAa;AAAA,IACb,SAAS,MAAM;AAGb,iBAAW,MAAM,EAAE,cAAc,KAAK,CAAC;AAEvC,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF,IACA,CAAC;AAGP,QAAM,WAAW,cAAc;AAC/B,QAAM,aAAa,qBAAqB,UAAU,YAAY,MAAM;AAGpE,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,YAAY;AAAA,MACV,MAAM,WAAW;AAAA,MACjB,aAAa,WAAW;AAAA;AAAA,MAExB,eAAe;AAAA,MACf,OAAO,WAAW;AAAA,MAClB,cAAc,WAAW;AAAA,IAC3B;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,KACN;AAIL,MAAI,SAAS,UAAU;AAErB,UAAM,cACJ,UAAU,MAAM,SAAS,QAAQ,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,IACxD,OAAO,KAAK,IACZ;AAEN,WACE;AAAA,MAAC;AAAA,uCACK,cADL;AAAA,QAEC,OAAO;AAAA,QAEP,eAAe;AAAA,UACb,aAAa;AAAA,QACf;AAAA,QAEA,UAAU,CAAC,MAAoD;AAC7D,cAAI,OAAO,MAAM,UAAU;AAEzB,qBAAS;AAAA,cACP,QAAQ,EAAE,OAAO,OAAO,CAAC,EAAE;AAAA,YAC7B,CAAwC;AAAA,UAC1C,OAAO;AAEL,qBAAS,CAAC;AAAA,UACZ;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,SACE,oBAAC,4CAAc,cAAd,EAA2B,UAAoB,MAAY,QAAc;AAE9E;AAEA,IAAO,gBAAQ;;;ACxLf,IAAOA,iBAAQ;","names":["Input_default"]}
|
|
@@ -7,10 +7,12 @@ var _chunkOQUTHTOKcjs = require('./chunk-OQUTHTOK.cjs');
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
|
|
10
11
|
var _chunk555JRYCScjs = require('./chunk-555JRYCS.cjs');
|
|
11
12
|
|
|
12
13
|
// src/Input/Input.tsx
|
|
13
14
|
var _input = require('@heroui/input');
|
|
15
|
+
var _numberinput = require('@heroui/number-input');
|
|
14
16
|
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
15
17
|
var _jsxruntime = require('react/jsx-runtime');
|
|
16
18
|
var inputVariants = _pixelutils.tv.call(void 0, {
|
|
@@ -81,39 +83,55 @@ var Input = (_a) => {
|
|
|
81
83
|
} : {};
|
|
82
84
|
const variants = inputVariants();
|
|
83
85
|
const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "base");
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
86
|
+
const commonProps = _chunk555JRYCScjs.__spreadValues.call(void 0, {
|
|
87
|
+
ref,
|
|
88
|
+
classNames: {
|
|
89
|
+
base: classNames.base,
|
|
90
|
+
clearButton: classNames.clearButton,
|
|
91
|
+
// set padding to 0 for error message exit animation
|
|
92
|
+
helperWrapper: "p-0",
|
|
93
|
+
input: classNames.input,
|
|
94
|
+
inputWrapper: classNames.inputWrapper
|
|
95
|
+
},
|
|
96
|
+
"data-testid": testId,
|
|
97
|
+
endContent,
|
|
98
|
+
errorMessage,
|
|
99
|
+
id: testId,
|
|
100
|
+
isDisabled: disabled,
|
|
101
|
+
isInvalid: invalid,
|
|
102
|
+
isRequired: required,
|
|
103
|
+
label,
|
|
104
|
+
labelPlacement: "outside",
|
|
105
|
+
name,
|
|
106
|
+
onBlur,
|
|
107
|
+
placeholder,
|
|
108
|
+
radius: "sm",
|
|
109
|
+
size,
|
|
110
|
+
startContent,
|
|
111
|
+
variant: "bordered"
|
|
112
|
+
}, clearableProps);
|
|
113
|
+
if (type === "number") {
|
|
114
|
+
const numberValue = value !== "" && value != null && !Number.isNaN(Number(value)) ? Number(value) : void 0;
|
|
115
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
116
|
+
_numberinput.NumberInput,
|
|
117
|
+
_chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, commonProps), {
|
|
118
|
+
value: numberValue,
|
|
119
|
+
formatOptions: {
|
|
120
|
+
useGrouping: false
|
|
121
|
+
},
|
|
122
|
+
onChange: (e) => {
|
|
123
|
+
if (typeof e === "number") {
|
|
124
|
+
onChange({
|
|
125
|
+
target: { value: String(e) }
|
|
126
|
+
});
|
|
127
|
+
} else {
|
|
128
|
+
onChange(e);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
})
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _input.Input, _chunk555JRYCScjs.__spreadProps.call(void 0, _chunk555JRYCScjs.__spreadValues.call(void 0, {}, commonProps), { onChange, type, value }));
|
|
117
135
|
};
|
|
118
136
|
var Input_default = Input;
|
|
119
137
|
|
|
@@ -124,4 +142,4 @@ var Input_default2 = Input_default;
|
|
|
124
142
|
|
|
125
143
|
|
|
126
144
|
exports.Input_default = Input_default; exports.Input_default2 = Input_default2;
|
|
127
|
-
//# sourceMappingURL=chunk-
|
|
145
|
+
//# sourceMappingURL=chunk-ZLTMRO6X.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-ZLTMRO6X.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-ZLTMRO6X.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"]}
|
package/dist/index.cjs
CHANGED
|
@@ -27,7 +27,7 @@ var _chunkEB3RNELTcjs = require('./chunk-EB3RNELT.cjs');
|
|
|
27
27
|
var _chunkTTD3KL6Ecjs = require('./chunk-TTD3KL6E.cjs');
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var _chunkZLTMRO6Xcjs = require('./chunk-ZLTMRO6X.cjs');
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
var _chunkS3H432Z2cjs = require('./chunk-S3H432Z2.cjs');
|
|
@@ -110,5 +110,5 @@ require('./chunk-555JRYCS.cjs');
|
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
|
|
113
|
-
exports.Checkboxes = _chunkZFZK6EM2cjs.Checkboxes_default; exports.FieldArray = _chunkUT6VUGFPcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkNHEZXA4Hcjs.FieldValidationError_default; exports.Form = _chunkEB3RNELTcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input =
|
|
113
|
+
exports.Checkboxes = _chunkZFZK6EM2cjs.Checkboxes_default; exports.FieldArray = _chunkUT6VUGFPcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkOE5BOGGXcjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkNHEZXA4Hcjs.FieldValidationError_default; exports.Form = _chunkEB3RNELTcjs.Form_default; exports.Grid = _chunkTTD3KL6Ecjs.Grid_default; exports.Input = _chunkZLTMRO6Xcjs.Input_default; exports.RadioBoxes = _chunkS3H432Z2cjs.RadioBoxes_default; exports.RadioTabs = _chunk6F5EZ6QNcjs.RadioTabs_default; exports.Radios = _chunkOJGPW4Z6cjs.Radios_default; exports.Select = _chunkFFGFPXNEcjs.Select_default; exports.SubmitButton = _chunkZEJ45LLMcjs.SubmitButton_default; exports.Switch = _chunkTJY5FK4Bcjs.Switch_default; exports.TextArea = _chunk4CWB5XBWcjs.TextArea_default; exports.checkFieldIsRequired = _chunk6LQ2O6SCcjs.checkFieldIsRequired; exports.clientValidationSchemaByName = _chunkEUTTXFWAcjs.clientValidationSchemaByName; exports.flatArrayKey = _chunkZ353BLWIcjs.flatArrayKey; exports.fromNullishString = _chunkZ353BLWIcjs.fromNullishString; exports.toFormFormat = _chunkZ353BLWIcjs.toFormFormat; exports.toNullishString = _chunkZ353BLWIcjs.toNullishString; exports.toValidationFormat = _chunkZ353BLWIcjs.toValidationFormat; exports.useClientValidation = _chunkEUTTXFWAcjs.useClientValidation; exports.useController = _chunk7KEUEGRCcjs.useController; exports.useFormContext = _chunk6LQ2O6SCcjs.useFormContext; exports.useInput = _chunkPCTYJUY7cjs.useInput; exports.useInputValueDebounce = _chunkNTOYCWCJcjs.useInputValueDebounce; exports.useInputValueTransform = _chunk56TQOKG7cjs.useInputValueTransform; exports.useUniformField = _chunkOQUTHTOKcjs.useUniformField; exports.useUniformFieldArray = _chunkIFBKJ5UZcjs.useUniformFieldArray; exports.useWatchUserChange = _chunk4F45XA7Ycjs.useWatchUserChange;
|
|
114
114
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuf-stack/uniform",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "fuf react form library",
|
|
5
5
|
"author": "Fröhlich ∧ Frei",
|
|
6
6
|
"homepage": "https://github.com/fuf-stack/pixels#readme",
|
|
@@ -168,6 +168,7 @@
|
|
|
168
168
|
"@heroui/button": "2.2.24",
|
|
169
169
|
"@heroui/checkbox": "2.3.24",
|
|
170
170
|
"@heroui/input": "2.4.25",
|
|
171
|
+
"@heroui/number-input": "2.0.18",
|
|
171
172
|
"@heroui/radio": "2.3.24",
|
|
172
173
|
"@heroui/select": "2.4.25",
|
|
173
174
|
"@heroui/switch": "2.2.22",
|
|
@@ -178,10 +179,10 @@
|
|
|
178
179
|
"react-icons": "5.5.0",
|
|
179
180
|
"react-hook-form": "7.55.0",
|
|
180
181
|
"react-select": "5.10.2",
|
|
181
|
-
"@fuf-stack/pixel-utils": "1.0.5",
|
|
182
|
-
"@fuf-stack/veto": "0.12.6",
|
|
183
182
|
"@fuf-stack/pixel-motion": "1.0.26",
|
|
184
|
-
"@fuf-stack/
|
|
183
|
+
"@fuf-stack/pixel-utils": "1.0.5",
|
|
184
|
+
"@fuf-stack/pixels": "1.3.8",
|
|
185
|
+
"@fuf-stack/veto": "0.12.6"
|
|
185
186
|
},
|
|
186
187
|
"devDependencies": {
|
|
187
188
|
"@types/debug": "4.1.12",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-2E4Q6OHC.cjs","../src/Input/Input.tsx","../src/Input/index.ts"],"names":["Input_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACNA,sCAAmC;AAEnC,oDAAyC;AAkHrC,+CAAA;AA7GG,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc;AAAA,EAChB;AACF,CAAC,CAAA;AAuCD,IAAM,MAAA,EAAQ,CAAC,EAAA,EAAA,GAYG;AAZH,EAAA,IAAA,GAAA,EAAA,EAAA,EACb;AAAA,IAAA,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,IACxB,UAAA,EAAY,KAAA;AAAA,IACZ,cAAA,EAAgB,GAAA;AAAA,IAChB,WAAA,EAAa,KAAA,CAAA;AAAA,IACb,IAAA;AAAA,IACA,QAAA,EAAU,KAAA,CAAA;AAAA,IACV,YAAA,EAAc,GAAA;AAAA,IACd,KAAA,EAAO,KAAA,CAAA;AAAA,IACP,aAAA,EAAe,KAAA,CAAA;AAAA,IACf,KAAA,EAAO,KAAA;AAAA,EAxET,EAAA,EA8De,EAAA,EAWV,kBAAA,EAAA,yCAAA,EAXU,EAWV;AAAA,IAVH,WAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,EAAA,CAAA,CAAA;AAGA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,aAAA;AAAA,MACV,MAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAO,UAAA;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,EACF,EAAA,EAAI,+CAAA,8CAAgB,EAAE,IAAA,EAAM,KAAA,CAAA,EAAS,iBAAA,CAAmB,CAAA;AAGxD,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,EAAA,EAAI,qDAAA;AAAsB,IACxD,aAAA;AAAA,IACA,MAAA,EAAQ,WAAA;AAAA,IACR,QAAA,EAAU,aAAA;AAAA,IACV,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AAGD,EAAA,MAAM,eAAA,EACJ,UAAA,EACI;AAAA,IACE,WAAA,EAAa,IAAA;AAAA,IACb,OAAA,EAAS,CAAA,EAAA,GAAM;AAGb,MAAA,UAAA,CAAW,IAAA,EAAM,EAAE,YAAA,EAAc,KAAK,CAAC,CAAA;AAEvC,MAAA,GAAA,CAAI,OAAA,EAAS;AACX,QAAA,OAAA,CAAQ,CAAA;AAAA,MACV;AAAA,IACF;AAAA,EACF,EAAA,EACA,CAAC,CAAA;AAGP,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,CAAA;AAC/B,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,YAAA;AAAA,IAAA,8CAAA;AAAA,MACC,GAAA;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,UAAA;AAAA,MACA,YAAA;AAAA,MACA,EAAA,EAAI,MAAA;AAAA,MACJ,UAAA,EAAY,QAAA;AAAA,MACZ,SAAA,EAAW,OAAA;AAAA,MACX,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,cAAA,EAAe,SAAA;AAAA,MACf,IAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA,EAAO,IAAA;AAAA,MACP,IAAA;AAAA,MACA,YAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,WAAA,EAAa,UAAA,CAAW,WAAA;AAAA;AAAA,QAExB,aAAA,EAAe,KAAA;AAAA,QACf,KAAA,EAAO,UAAA,CAAW,KAAA;AAAA,QAClB,YAAA,EAAc,UAAA,CAAW;AAAA,MAC3B;AAAA,IAAA,CAAA,EACI,cAAA;AAAA,EACN,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,EAAQ,KAAA;ADrCf;AACA;AEjHA,IAAOA,eAAAA,EAAQ,aAAA;AFmHf;AACA;AACE;AACA;AACF,+EAAC","file":"/home/runner/work/pixels/pixels/packages/uniform/dist/chunk-2E4Q6OHC.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\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 return (\n <HeroInput\n ref={ref}\n data-testid={testId}\n endContent={endContent}\n errorMessage={errorMessage}\n id={testId}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n size={size}\n startContent={startContent}\n type={type}\n value={value}\n variant=\"bordered\"\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 {...clearableProps}\n />\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 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Input/Input.tsx","../src/Input/index.ts"],"sourcesContent":["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\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 return (\n <HeroInput\n ref={ref}\n data-testid={testId}\n endContent={endContent}\n errorMessage={errorMessage}\n id={testId}\n isDisabled={disabled}\n isInvalid={invalid}\n isRequired={required}\n label={label}\n labelPlacement=\"outside\"\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n placeholder={placeholder}\n radius=\"sm\"\n size={size}\n startContent={startContent}\n type={type}\n value={value}\n variant=\"bordered\"\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 {...clearableProps}\n />\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"],"mappings":";;;;;;;;;;;;AAKA,SAAS,SAAS,iBAAiB;AAEnC,SAAS,IAAI,4BAA4B;AAkHrC;AA7GG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,aAAa;AAAA;AAAA,IAEb,OAAO;AAAA;AAAA,IAEP,cAAc;AAAA,EAChB;AACF,CAAC;AAuCD,IAAM,QAAQ,CAAC,OAYG;AAZH,eACb;AAAA,eAAW,aAAa;AAAA,IACxB,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb;AAAA,IACA,UAAU;AAAA,IACV,cAAc;AAAA,IACd,OAAO;AAAA,IACP,eAAe;AAAA,IACf,OAAO;AAAA,EAxET,IA8De,IAWV,8BAXU,IAWV;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,gBAAgB,iBAAE,MAAM,QAAS,kBAAmB;AAGxD,QAAM,EAAE,UAAU,QAAQ,MAAM,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,EACT,CAAC;AAGD,QAAM,iBACJ,YACI;AAAA,IACE,aAAa;AAAA,IACb,SAAS,MAAM;AAGb,iBAAW,MAAM,EAAE,cAAc,KAAK,CAAC;AAEvC,UAAI,SAAS;AACX,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF,IACA,CAAC;AAGP,QAAM,WAAW,cAAc;AAC/B,QAAM,aAAa,qBAAqB,UAAU,YAAY,MAAM;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACJ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ;AAAA,MACA,gBAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,MAAM,WAAW;AAAA,QACjB,aAAa,WAAW;AAAA;AAAA,QAExB,eAAe;AAAA,QACf,OAAO,WAAW;AAAA,QAClB,cAAc,WAAW;AAAA,MAC3B;AAAA,OACI;AAAA,EACN;AAEJ;AAEA,IAAO,gBAAQ;;;ACrJf,IAAOA,iBAAQ;","names":["Input_default"]}
|