@fuf-stack/uniform 1.20.9 → 1.20.11
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.d.cts +1 -1
- package/dist/Input/index.d.ts +1 -1
- package/dist/Radios/index.d.cts +1 -1
- package/dist/Radios/index.d.ts +1 -1
- package/dist/Select/index.cjs +1 -1
- package/dist/Select/index.d.cts +1 -1
- package/dist/Select/index.d.ts +1 -1
- package/dist/Select/index.js +1 -1
- package/dist/{Select-BEed8xan.cjs → Select-BH1Tbqwk.cjs} +28 -16
- package/dist/Select-BH1Tbqwk.cjs.map +1 -0
- package/dist/{Select-BILyyM7Z.js → Select-CZnEBGdn.js} +28 -16
- package/dist/Select-CZnEBGdn.js.map +1 -0
- package/dist/Slider/index.d.cts +1 -1
- package/dist/Slider/index.d.ts +1 -1
- package/dist/Switch/index.d.cts +1 -1
- package/dist/Switch/index.d.ts +1 -1
- package/dist/TextArea/index.d.cts +1 -1
- package/dist/TextArea/index.d.ts +1 -1
- package/dist/hooks/useFormContext/index.d.cts +1 -1
- package/dist/hooks/useFormContext/index.d.ts +1 -1
- package/dist/hooks/useUniformField/index.d.cts +1 -1
- package/dist/hooks/useUniformField/index.d.ts +1 -1
- package/dist/hooks/useUniformFieldArray/index.d.cts +1 -1
- package/dist/hooks/useUniformFieldArray/index.d.ts +1 -1
- package/dist/{index--LtIs0zN.d.ts → index-65doPHAW.d.ts} +7 -7
- package/dist/{index--LtIs0zN.d.ts.map → index-65doPHAW.d.ts.map} +1 -1
- package/dist/{index-Cnu0aojI.d.cts → index-BWF7Vy2e.d.cts} +4 -4
- package/dist/{index-Cnu0aojI.d.cts.map → index-BWF7Vy2e.d.cts.map} +1 -1
- package/dist/{index-CUoK2wmL.d.cts → index-Bki-5EDW.d.cts} +10 -10
- package/dist/{index-CUoK2wmL.d.cts.map → index-Bki-5EDW.d.cts.map} +1 -1
- package/dist/{index-C3g-k5q8.d.cts → index-CWM5cR7y.d.cts} +4 -4
- package/dist/{index-C3g-k5q8.d.cts.map → index-CWM5cR7y.d.cts.map} +1 -1
- package/dist/{index-BRoMb7lP.d.ts → index-Cxq59iE3.d.ts} +30 -19
- package/dist/index-Cxq59iE3.d.ts.map +1 -0
- package/dist/{index-C0oMAW9N.d.ts → index-CyeWKriu.d.ts} +10 -10
- package/dist/{index-C0oMAW9N.d.ts.map → index-CyeWKriu.d.ts.map} +1 -1
- package/dist/{index-9nJkzuEx.d.cts → index-D4mUuIR2.d.cts} +7 -7
- package/dist/{index-9nJkzuEx.d.cts.map → index-D4mUuIR2.d.cts.map} +1 -1
- package/dist/{index-DoWEojrc.d.ts → index-DBL3l7lp.d.ts} +4 -4
- package/dist/{index-DoWEojrc.d.ts.map → index-DBL3l7lp.d.ts.map} +1 -1
- package/dist/{index-CpINqeNE.d.ts → index-DCbAbxkn.d.ts} +4 -4
- package/dist/{index-CpINqeNE.d.ts.map → index-DCbAbxkn.d.ts.map} +1 -1
- package/dist/{index-BidotcVW.d.cts → index-Dft0538G.d.cts} +30 -19
- package/dist/index-Dft0538G.d.cts.map +1 -0
- package/dist/{index-BB2FxcOc.d.ts → index-Dox89nFY.d.ts} +19 -19
- package/dist/{index-BB2FxcOc.d.ts.map → index-Dox89nFY.d.ts.map} +1 -1
- package/dist/{index-BrlEhQ-f.d.cts → index-DriOe0TW.d.cts} +19 -19
- package/dist/{index-BrlEhQ-f.d.cts.map → index-DriOe0TW.d.cts.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +9 -9
- package/dist/index.d.ts +9 -9
- package/dist/index.js +1 -1
- package/dist/{useFormContext-BlXG2fw3.d.cts → useFormContext-C29MZE_C.d.cts} +3 -3
- package/dist/{useFormContext-BlXG2fw3.d.cts.map → useFormContext-C29MZE_C.d.cts.map} +1 -1
- package/dist/{useFormContext-CDD_1j0V.d.ts → useFormContext-DTE4pvL2.d.ts} +3 -3
- package/dist/{useFormContext-CDD_1j0V.d.ts.map → useFormContext-DTE4pvL2.d.ts.map} +1 -1
- package/dist/{useUniformField-NC3V1eZm.d.ts → useUniformField-DGBTwJLI.d.ts} +2 -2
- package/dist/{useUniformField-NC3V1eZm.d.ts.map → useUniformField-DGBTwJLI.d.ts.map} +1 -1
- package/dist/{useUniformField-Gq6Qz5IO.d.cts → useUniformField-DQsQnuA_.d.cts} +2 -2
- package/dist/{useUniformField-Gq6Qz5IO.d.cts.map → useUniformField-DQsQnuA_.d.cts.map} +1 -1
- package/dist/{useUniformFieldArray-u0am2sJc.d.cts → useUniformFieldArray-BFkeHpUv.d.cts} +3 -3
- package/dist/{useUniformFieldArray-u0am2sJc.d.cts.map → useUniformFieldArray-BFkeHpUv.d.cts.map} +1 -1
- package/dist/{useUniformFieldArray-D16ZOUFD.d.ts → useUniformFieldArray-DJV2LOpX.d.ts} +3 -3
- package/dist/{useUniformFieldArray-D16ZOUFD.d.ts.map → useUniformFieldArray-DJV2LOpX.d.ts.map} +1 -1
- package/package.json +6 -6
- package/dist/Select-BEed8xan.cjs.map +0 -1
- package/dist/Select-BILyyM7Z.js.map +0 -1
- package/dist/index-BRoMb7lP.d.ts.map +0 -1
- package/dist/index-BidotcVW.d.cts.map +0 -1
package/dist/Input/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as InputProps, t as Input } from "../index-
|
|
1
|
+
import { n as InputProps, t as Input } from "../index-BWF7Vy2e.cjs";
|
|
2
2
|
export { Input, Input as default, type InputProps };
|
package/dist/Input/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as InputProps, t as Input } from "../index-
|
|
1
|
+
import { n as InputProps, t as Input } from "../index-DCbAbxkn.js";
|
|
2
2
|
export { Input, Input as default, type InputProps };
|
package/dist/Radios/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as RadiosProps, t as Radios } from "../index-
|
|
1
|
+
import { n as RadiosProps, t as Radios } from "../index-D4mUuIR2.cjs";
|
|
2
2
|
export { Radios, Radios as default, type RadiosProps };
|
package/dist/Radios/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as RadiosProps, t as Radios } from "../index
|
|
1
|
+
import { n as RadiosProps, t as Radios } from "../index-65doPHAW.js";
|
|
2
2
|
export { Radios, Radios as default, type RadiosProps };
|
package/dist/Select/index.cjs
CHANGED
|
@@ -2,6 +2,6 @@ Object.defineProperties(exports, {
|
|
|
2
2
|
__esModule: { value: true },
|
|
3
3
|
[Symbol.toStringTag]: { value: "Module" }
|
|
4
4
|
});
|
|
5
|
-
const require_Select = require("../Select-
|
|
5
|
+
const require_Select = require("../Select-BH1Tbqwk.cjs");
|
|
6
6
|
exports.Select = require_Select.Select;
|
|
7
7
|
exports.default = require_Select.Select_default;
|
package/dist/Select/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SelectProps, t as Select } from "../index-
|
|
1
|
+
import { n as SelectProps, t as Select } from "../index-Dft0538G.cjs";
|
|
2
2
|
export { Select, Select as default, type SelectProps };
|
package/dist/Select/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SelectProps, t as Select } from "../index-
|
|
1
|
+
import { n as SelectProps, t as Select } from "../index-Cxq59iE3.js";
|
|
2
2
|
export { Select, Select as default, type SelectProps };
|
package/dist/Select/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as Select, t as Select_default } from "../Select-
|
|
1
|
+
import { n as Select, t as Select_default } from "../Select-CZnEBGdn.js";
|
|
2
2
|
export { Select, Select_default as default };
|
|
@@ -33,9 +33,10 @@ const selectVariants = (0, _fuf_stack_pixel_utils.tv)({ slots: {
|
|
|
33
33
|
multiValueLabel: "py-0.5 leading-6",
|
|
34
34
|
multiValueRemove: "rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800",
|
|
35
35
|
noOptionsMessage: "rounded-sm p-2 text-foreground-500",
|
|
36
|
+
option: "rounded px-3 py-2 hover:cursor-pointer",
|
|
37
|
+
option_disabled: "cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled",
|
|
36
38
|
option_focused: "bg-default-100 active:bg-default-200",
|
|
37
39
|
option_selected: "bg-default-300",
|
|
38
|
-
option: "rounded px-3 py-2 hover:cursor-pointer",
|
|
39
40
|
placeholder: "ml-1 py-0.5 pl-1 text-sm text-foreground-500",
|
|
40
41
|
selectContainer: "",
|
|
41
42
|
singleValue: "ml-1! leading-7!",
|
|
@@ -55,8 +56,11 @@ const ControlComponent = (props) => {
|
|
|
55
56
|
});
|
|
56
57
|
};
|
|
57
58
|
const OptionComponent = (props) => {
|
|
59
|
+
const { isDisabled } = props;
|
|
60
|
+
const testId = `${props.selectProps["data-testid"]}_select_option_${(0, _fuf_stack_pixel_utils.slugify)(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;
|
|
58
61
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
59
|
-
"
|
|
62
|
+
"aria-disabled": isDisabled ? true : void 0,
|
|
63
|
+
"data-testid": testId,
|
|
60
64
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.Option, { ...props })
|
|
61
65
|
});
|
|
62
66
|
};
|
|
@@ -68,7 +72,7 @@ const DropdownIndicatorComponent = (props) => {
|
|
|
68
72
|
});
|
|
69
73
|
};
|
|
70
74
|
/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */
|
|
71
|
-
const Select = ({ className = void 0, clearable = true, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, selectedOptionFallback = void 0, ...uniformFieldProps }) => {
|
|
75
|
+
const Select = ({ className = void 0, clearable = true, debugMenuOpen = false, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, selectedOptionFallback = void 0, ...uniformFieldProps }) => {
|
|
72
76
|
const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, getErrorMessageProps, getHelperWrapperProps, getLabelProps, invalid, label, required, testId } = require_hooks_useUniformField_index.useUniformField({
|
|
73
77
|
name,
|
|
74
78
|
...uniformFieldProps
|
|
@@ -126,8 +130,9 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
126
130
|
noOptionsMessage: () => {
|
|
127
131
|
return classNames.noOptionsMessage;
|
|
128
132
|
},
|
|
129
|
-
option: ({ isFocused: optionIsFocused, isSelected: optionIsSelected }) => {
|
|
133
|
+
option: ({ isDisabled: optionIsDisabled, isFocused: optionIsFocused, isSelected: optionIsSelected }) => {
|
|
130
134
|
return (0, _fuf_stack_pixel_utils.cn)(classNames.option, {
|
|
135
|
+
[classNames.option_disabled]: optionIsDisabled,
|
|
131
136
|
[classNames.option_focused]: optionIsFocused,
|
|
132
137
|
[classNames.option_selected]: optionIsSelected
|
|
133
138
|
});
|
|
@@ -153,6 +158,12 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
153
158
|
label,
|
|
154
159
|
labelPlacement: "outside"
|
|
155
160
|
});
|
|
161
|
+
const reactSelectOptions = options.map((option) => {
|
|
162
|
+
return {
|
|
163
|
+
...option,
|
|
164
|
+
isDisabled: option.disabled
|
|
165
|
+
};
|
|
166
|
+
});
|
|
156
167
|
const reactSelectValue = (() => {
|
|
157
168
|
const findOption = (v) => {
|
|
158
169
|
const inOptions = options.find((option) => {
|
|
@@ -215,12 +226,17 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
215
226
|
}) : null,
|
|
216
227
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.default, {
|
|
217
228
|
ref,
|
|
218
|
-
menuShouldBlockScroll: true,
|
|
219
|
-
unstyled: true,
|
|
220
229
|
"aria-errormessage": "",
|
|
221
230
|
"aria-invalid": invalid,
|
|
222
231
|
"aria-label": ariaLabel,
|
|
232
|
+
"aria-labelledby": label ? getTriggerProps()["aria-labelledby"]?.split(" ")[1] : void 0,
|
|
223
233
|
classNames: reactSelectClassNames,
|
|
234
|
+
components: {
|
|
235
|
+
Control: ControlComponent,
|
|
236
|
+
DropdownIndicator: DropdownIndicatorComponent,
|
|
237
|
+
Input: InputComponent,
|
|
238
|
+
Option: OptionComponent
|
|
239
|
+
},
|
|
224
240
|
"data-testid": testId,
|
|
225
241
|
filterOption,
|
|
226
242
|
formatOptionLabel: renderOptionLabel,
|
|
@@ -230,22 +246,18 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
230
246
|
isDisabled: disabled,
|
|
231
247
|
isLoading: loading,
|
|
232
248
|
isMulti: multiSelect,
|
|
249
|
+
menuIsOpen: debugMenuOpen ? true : void 0,
|
|
233
250
|
menuPosition: "fixed",
|
|
251
|
+
menuShouldBlockScroll: true,
|
|
234
252
|
name,
|
|
235
253
|
onBlur: handleBlur,
|
|
236
254
|
onChange: handleChange,
|
|
237
255
|
onFocus: handleFocus,
|
|
238
256
|
onInputChange,
|
|
239
|
-
options,
|
|
257
|
+
options: reactSelectOptions,
|
|
240
258
|
placeholder,
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
components: {
|
|
244
|
-
Control: ControlComponent,
|
|
245
|
-
DropdownIndicator: DropdownIndicatorComponent,
|
|
246
|
-
Input: InputComponent,
|
|
247
|
-
Option: OptionComponent
|
|
248
|
-
}
|
|
259
|
+
unstyled: true,
|
|
260
|
+
value: reactSelectValue
|
|
249
261
|
}),
|
|
250
262
|
invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
251
263
|
...getHelperWrapperProps(),
|
|
@@ -274,4 +286,4 @@ Object.defineProperty(exports, "Select_default", {
|
|
|
274
286
|
}
|
|
275
287
|
});
|
|
276
288
|
|
|
277
|
-
//# sourceMappingURL=Select-
|
|
289
|
+
//# sourceMappingURL=Select-BH1Tbqwk.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-BH1Tbqwk.cjs","names":["components","useUniformField","useFormContext","createOptionValueConverter","isValueEmpty","ReactSelect"],"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } 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 { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\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: 'rounded px-3 py-2 hover:cursor-pointer',\n option_disabled:\n 'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n option_focused: 'bg-default-100 active:bg-default-200',\n option_selected: 'bg-default-300',\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 /** set option to disabled state */\n disabled?: boolean;\n /**\n * True when option was auto-generated because the value wasn't found in options.\n * Use in renderOptionLabel to render a component that fetches the real label.\n */\n isFallback?: boolean;\n /** option label */\n label?: ReactNode;\n /** option value */\n value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 /** Force menu open for debugging or visual testing. */\n debugMenuOpen?: 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?: 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 /**\n * Fallback option(s) for async selects when value isn't in current options.\n * Use when the selected value may not be in the options list (e.g., after\n * search results change). Used only if value not found in options.\n * For single select: pass the option object or undefined\n * For multi-select: pass an array of option objects\n */\n selectedOptionFallback?: SelectOption | SelectOption[];\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 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 <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n const { isDisabled } = 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(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n return (\n <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\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 const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\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 debugMenuOpen = false,\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 selectedOptionFallback = undefined,\n ...uniformFieldProps\n}: SelectProps) => {\n const {\n ariaLabel,\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 // Get getFieldState to check isTouched in onChange callback\n const { getFieldState } = useFormContext();\n\n // Track if the select is focused\n const [isFocused, setIsFocused] = useState(false);\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // React-select classNames configuration\n const reactSelectClassNames = {\n clearIndicator: () => {\n return classNames.clearIndicator;\n },\n control: () => {\n return cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n });\n },\n dropdownIndicator: () => {\n return classNames.dropdownIndicator;\n },\n groupHeading: () => {\n return classNames.groupHeading;\n },\n indicatorSeparator: () => {\n return classNames.indicatorSeparator;\n },\n indicatorsContainer: () => {\n return classNames.indicatorsContainer;\n },\n input: () => {\n return classNames.input;\n },\n loadingIndicator: () => {\n return classNames.loadingIndicator;\n },\n loadingMessage: () => {\n return classNames.loadingMessage;\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(classNames.multiValueLabel, `${getValueProps().className}`);\n },\n multiValueRemove: () => {\n return classNames.multiValueRemove;\n },\n noOptionsMessage: () => {\n return classNames.noOptionsMessage;\n },\n option: ({\n isDisabled: optionIsDisabled,\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }: {\n isDisabled: boolean;\n isFocused: boolean;\n isSelected: boolean;\n }) => {\n return cn(classNames.option, {\n [classNames.option_disabled]: optionIsDisabled,\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\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 // react-select expects `isDisabled`, while our option contract uses `disabled`.\n const reactSelectOptions = options.map((option) => {\n return {\n ...option,\n isDisabled: option.disabled,\n };\n });\n\n // Compute selected option(s) for react-select\n //\n // Priority for finding options:\n // 1. Look in current options list\n // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n // 3. Create fallback with value as label\n //\n // Handles edge cases:\n // - Compares as strings to support both string and number values\n // - Returns null for empty single-select (required by react-select to clear)\n // - Creates fallback options when value exists but isn't in options list\n // (common with async selects where options change after selection)\n const reactSelectValue = (() => {\n // Helper to find option by value\n const findOption = (v: string | number): SelectOption => {\n // First, look in options list\n const inOptions = options.find((option) => {\n return String(option.value) === String(v);\n });\n if (inOptions) {\n return inOptions;\n }\n\n // Second, look in selectedOptionFallback prop (for async selects)\n if (selectedOptionFallback) {\n if (Array.isArray(selectedOptionFallback)) {\n const inSelected = selectedOptionFallback.find((option) => {\n return String(option.value) === String(v);\n });\n if (inSelected) {\n return inSelected;\n }\n } else if (String(selectedOptionFallback.value) === String(v)) {\n return selectedOptionFallback;\n }\n }\n\n // Fallback: create option with value as label, marked as fallback\n return { isFallback: true, label: String(v), value: v };\n };\n\n if (multiSelect) {\n if (!Array.isArray(value) || isValueEmpty(value)) {\n return [];\n }\n return value.map((v) => {\n return findOption(v);\n });\n }\n\n // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n if (isValueEmpty(value)) {\n return null;\n }\n return findOption(value);\n })();\n\n // Handle selection change\n const handleChange = (\n option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n ) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => {\n return convertToOriginalType(_option.value);\n }),\n );\n } else {\n const newValue = (option as SelectOption)?.value;\n // Pass null explicitly when clearing (not undefined)\n onChange(newValue != null ? convertToOriginalType(newValue) : null);\n }\n // Mark field as touched immediately when a selection is made if not already touched\n // This ensures validation errors show right away (isTouched becomes true)\n // For Select components, selecting an option is a complete user action\n // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n const { isTouched: currentIsTouched } = getFieldState(name, testId);\n if (!currentIsTouched) {\n onBlur();\n }\n };\n\n // Handle blur event\n const handleBlur = () => {\n setIsFocused(false);\n onBlur();\n };\n\n // Handle focus event\n const handleFocus = () => {\n setIsFocused(true);\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 aria-errormessage=\"\"\n aria-invalid={invalid}\n aria-label={ariaLabel}\n // set aria-labelledby to the label id so that the select is accessible\n aria-labelledby={\n label\n ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n : undefined\n }\n classNames={reactSelectClassNames}\n components={{\n Control: ControlComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Input: InputComponent,\n Option: OptionComponent,\n }}\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 menuIsOpen={debugMenuOpen ? true : undefined}\n menuPosition=\"fixed\"\n menuShouldBlockScroll\n name={name}\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 onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onInputChange={onInputChange}\n options={reactSelectOptions}\n placeholder={placeholder}\n unstyled\n value={reactSelectValue}\n />\n {invalid ? (\n <div {...getHelperWrapperProps()}>\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"],"mappings":"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"}
|
|
@@ -31,9 +31,10 @@ const selectVariants = tv({ slots: {
|
|
|
31
31
|
multiValueLabel: "py-0.5 leading-6",
|
|
32
32
|
multiValueRemove: "rounded text-default-500 hover:cursor-pointer hover:border-default-300 hover:text-default-800",
|
|
33
33
|
noOptionsMessage: "rounded-sm p-2 text-foreground-500",
|
|
34
|
+
option: "rounded px-3 py-2 hover:cursor-pointer",
|
|
35
|
+
option_disabled: "cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled",
|
|
34
36
|
option_focused: "bg-default-100 active:bg-default-200",
|
|
35
37
|
option_selected: "bg-default-300",
|
|
36
|
-
option: "rounded px-3 py-2 hover:cursor-pointer",
|
|
37
38
|
placeholder: "ml-1 py-0.5 pl-1 text-sm text-foreground-500",
|
|
38
39
|
selectContainer: "",
|
|
39
40
|
singleValue: "ml-1! leading-7!",
|
|
@@ -53,8 +54,11 @@ const ControlComponent = (props) => {
|
|
|
53
54
|
});
|
|
54
55
|
};
|
|
55
56
|
const OptionComponent = (props) => {
|
|
57
|
+
const { isDisabled } = props;
|
|
58
|
+
const testId = `${props.selectProps["data-testid"]}_select_option_${slugify(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;
|
|
56
59
|
return /* @__PURE__ */ jsx("div", {
|
|
57
|
-
"
|
|
60
|
+
"aria-disabled": isDisabled ? true : void 0,
|
|
61
|
+
"data-testid": testId,
|
|
58
62
|
children: /* @__PURE__ */ jsx(components.Option, { ...props })
|
|
59
63
|
});
|
|
60
64
|
};
|
|
@@ -66,7 +70,7 @@ const DropdownIndicatorComponent = (props) => {
|
|
|
66
70
|
});
|
|
67
71
|
};
|
|
68
72
|
/** Select component based on [HeroUI Select](https://www.heroui.com//docs/components/select) and [React-Select](https://react-select.com/home) */
|
|
69
|
-
const Select = ({ className = void 0, clearable = true, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, selectedOptionFallback = void 0, ...uniformFieldProps }) => {
|
|
73
|
+
const Select = ({ className = void 0, clearable = true, debugMenuOpen = false, filterOption = void 0, renderOptionLabel = void 0, inputValue = void 0, loading = false, multiSelect = false, name, onInputChange = void 0, options, placeholder = void 0, selectedOptionFallback = void 0, ...uniformFieldProps }) => {
|
|
70
74
|
const { ariaLabel, disabled, errorMessage, field: { onBlur, onChange, ref, value }, getErrorMessageProps, getHelperWrapperProps, getLabelProps, invalid, label, required, testId } = useUniformField({
|
|
71
75
|
name,
|
|
72
76
|
...uniformFieldProps
|
|
@@ -124,8 +128,9 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
124
128
|
noOptionsMessage: () => {
|
|
125
129
|
return classNames.noOptionsMessage;
|
|
126
130
|
},
|
|
127
|
-
option: ({ isFocused: optionIsFocused, isSelected: optionIsSelected }) => {
|
|
131
|
+
option: ({ isDisabled: optionIsDisabled, isFocused: optionIsFocused, isSelected: optionIsSelected }) => {
|
|
128
132
|
return cn(classNames.option, {
|
|
133
|
+
[classNames.option_disabled]: optionIsDisabled,
|
|
129
134
|
[classNames.option_focused]: optionIsFocused,
|
|
130
135
|
[classNames.option_selected]: optionIsSelected
|
|
131
136
|
});
|
|
@@ -151,6 +156,12 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
151
156
|
label,
|
|
152
157
|
labelPlacement: "outside"
|
|
153
158
|
});
|
|
159
|
+
const reactSelectOptions = options.map((option) => {
|
|
160
|
+
return {
|
|
161
|
+
...option,
|
|
162
|
+
isDisabled: option.disabled
|
|
163
|
+
};
|
|
164
|
+
});
|
|
154
165
|
const reactSelectValue = (() => {
|
|
155
166
|
const findOption = (v) => {
|
|
156
167
|
const inOptions = options.find((option) => {
|
|
@@ -213,12 +224,17 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
213
224
|
}) : null,
|
|
214
225
|
/* @__PURE__ */ jsx(ReactSelect, {
|
|
215
226
|
ref,
|
|
216
|
-
menuShouldBlockScroll: true,
|
|
217
|
-
unstyled: true,
|
|
218
227
|
"aria-errormessage": "",
|
|
219
228
|
"aria-invalid": invalid,
|
|
220
229
|
"aria-label": ariaLabel,
|
|
230
|
+
"aria-labelledby": label ? getTriggerProps()["aria-labelledby"]?.split(" ")[1] : void 0,
|
|
221
231
|
classNames: reactSelectClassNames,
|
|
232
|
+
components: {
|
|
233
|
+
Control: ControlComponent,
|
|
234
|
+
DropdownIndicator: DropdownIndicatorComponent,
|
|
235
|
+
Input: InputComponent,
|
|
236
|
+
Option: OptionComponent
|
|
237
|
+
},
|
|
222
238
|
"data-testid": testId,
|
|
223
239
|
filterOption,
|
|
224
240
|
formatOptionLabel: renderOptionLabel,
|
|
@@ -228,22 +244,18 @@ const Select = ({ className = void 0, clearable = true, filterOption = void 0, r
|
|
|
228
244
|
isDisabled: disabled,
|
|
229
245
|
isLoading: loading,
|
|
230
246
|
isMulti: multiSelect,
|
|
247
|
+
menuIsOpen: debugMenuOpen ? true : void 0,
|
|
231
248
|
menuPosition: "fixed",
|
|
249
|
+
menuShouldBlockScroll: true,
|
|
232
250
|
name,
|
|
233
251
|
onBlur: handleBlur,
|
|
234
252
|
onChange: handleChange,
|
|
235
253
|
onFocus: handleFocus,
|
|
236
254
|
onInputChange,
|
|
237
|
-
options,
|
|
255
|
+
options: reactSelectOptions,
|
|
238
256
|
placeholder,
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
components: {
|
|
242
|
-
Control: ControlComponent,
|
|
243
|
-
DropdownIndicator: DropdownIndicatorComponent,
|
|
244
|
-
Input: InputComponent,
|
|
245
|
-
Option: OptionComponent
|
|
246
|
-
}
|
|
257
|
+
unstyled: true,
|
|
258
|
+
value: reactSelectValue
|
|
247
259
|
}),
|
|
248
260
|
invalid ? /* @__PURE__ */ jsx("div", {
|
|
249
261
|
...getHelperWrapperProps(),
|
|
@@ -261,4 +273,4 @@ var Select_default = Select;
|
|
|
261
273
|
//#endregion
|
|
262
274
|
export { Select as n, Select_default as t };
|
|
263
275
|
|
|
264
|
-
//# sourceMappingURL=Select-
|
|
276
|
+
//# sourceMappingURL=Select-CZnEBGdn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-CZnEBGdn.js","names":[],"sources":["../src/Select/Select.tsx","../src/Select/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\nimport type { MultiValue, Props, SingleValue } 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 { createOptionValueConverter, isValueEmpty } from '../helpers';\nimport { useFormContext } from '../hooks/useFormContext';\nimport { useUniformField } from '../hooks/useUniformField';\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: 'rounded px-3 py-2 hover:cursor-pointer',\n option_disabled:\n 'cursor-not-allowed! hover:cursor-not-allowed! opacity-disabled',\n option_focused: 'bg-default-100 active:bg-default-200',\n option_selected: 'bg-default-300',\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 /** set option to disabled state */\n disabled?: boolean;\n /**\n * True when option was auto-generated because the value wasn't found in options.\n * Use in renderOptionLabel to render a component that fetches the real label.\n */\n isFallback?: boolean;\n /** option label */\n label?: ReactNode;\n /** option value */\n value: string | number;\n}\n\ntype VariantProps = TVProps<typeof selectVariants>;\ntype ClassName = TVClassName<typeof selectVariants>;\n\nexport interface SelectProps extends VariantProps {\n /** Custom aria-label for accessibility. If not provided, falls back to field name when no visible label exists */\n ariaLabel?: string;\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 /** Force menu open for debugging or visual testing. */\n debugMenuOpen?: 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?: 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 /**\n * Fallback option(s) for async selects when value isn't in current options.\n * Use when the selected value may not be in the options list (e.g., after\n * search results change). Used only if value not found in options.\n * For single select: pass the option object or undefined\n * For multi-select: pass an array of option objects\n */\n selectedOptionFallback?: SelectOption | SelectOption[];\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 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 <components.Control {...props} />\n </div>\n );\n};\n\nconst OptionComponent: typeof components.Option = (props) => {\n const { isDisabled } = 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(String(props?.data?.testId ?? props?.data?.value), { replaceDots: true })}`;\n return (\n <div aria-disabled={isDisabled ? true : undefined} data-testid={testId}>\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 const testId = props?.selectProps['data-testid'] as string;\n return (\n <div data-testid={`${testId}_select_dropdown`}>\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 debugMenuOpen = false,\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 selectedOptionFallback = undefined,\n ...uniformFieldProps\n}: SelectProps) => {\n const {\n ariaLabel,\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 // Get getFieldState to check isTouched in onChange callback\n const { getFieldState } = useFormContext();\n\n // Track if the select is focused\n const [isFocused, setIsFocused] = useState(false);\n\n // Create converter to preserve number types for option values\n const { convertToOriginalType } = createOptionValueConverter(options);\n\n // classNames from slots\n const variants = selectVariants();\n const classNames = variantsToClassNames(variants, className, 'base');\n\n // React-select classNames configuration\n const reactSelectClassNames = {\n clearIndicator: () => {\n return classNames.clearIndicator;\n },\n control: () => {\n return cn(classNames.control, {\n [classNames.control_focused]: isFocused && !invalid,\n });\n },\n dropdownIndicator: () => {\n return classNames.dropdownIndicator;\n },\n groupHeading: () => {\n return classNames.groupHeading;\n },\n indicatorSeparator: () => {\n return classNames.indicatorSeparator;\n },\n indicatorsContainer: () => {\n return classNames.indicatorsContainer;\n },\n input: () => {\n return classNames.input;\n },\n loadingIndicator: () => {\n return classNames.loadingIndicator;\n },\n loadingMessage: () => {\n return classNames.loadingMessage;\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(classNames.multiValueLabel, `${getValueProps().className}`);\n },\n multiValueRemove: () => {\n return classNames.multiValueRemove;\n },\n noOptionsMessage: () => {\n return classNames.noOptionsMessage;\n },\n option: ({\n isDisabled: optionIsDisabled,\n isFocused: optionIsFocused,\n isSelected: optionIsSelected,\n }: {\n isDisabled: boolean;\n isFocused: boolean;\n isSelected: boolean;\n }) => {\n return cn(classNames.option, {\n [classNames.option_disabled]: optionIsDisabled,\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\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 // react-select expects `isDisabled`, while our option contract uses `disabled`.\n const reactSelectOptions = options.map((option) => {\n return {\n ...option,\n isDisabled: option.disabled,\n };\n });\n\n // Compute selected option(s) for react-select\n //\n // Priority for finding options:\n // 1. Look in current options list\n // 2. Use selectedOptionFallback prop (for async selects with pre-fetched data)\n // 3. Create fallback with value as label\n //\n // Handles edge cases:\n // - Compares as strings to support both string and number values\n // - Returns null for empty single-select (required by react-select to clear)\n // - Creates fallback options when value exists but isn't in options list\n // (common with async selects where options change after selection)\n const reactSelectValue = (() => {\n // Helper to find option by value\n const findOption = (v: string | number): SelectOption => {\n // First, look in options list\n const inOptions = options.find((option) => {\n return String(option.value) === String(v);\n });\n if (inOptions) {\n return inOptions;\n }\n\n // Second, look in selectedOptionFallback prop (for async selects)\n if (selectedOptionFallback) {\n if (Array.isArray(selectedOptionFallback)) {\n const inSelected = selectedOptionFallback.find((option) => {\n return String(option.value) === String(v);\n });\n if (inSelected) {\n return inSelected;\n }\n } else if (String(selectedOptionFallback.value) === String(v)) {\n return selectedOptionFallback;\n }\n }\n\n // Fallback: create option with value as label, marked as fallback\n return { isFallback: true, label: String(v), value: v };\n };\n\n if (multiSelect) {\n if (!Array.isArray(value) || isValueEmpty(value)) {\n return [];\n }\n return value.map((v) => {\n return findOption(v);\n });\n }\n\n // Single select - use isValueEmpty to handle marker strings (__NULL__, etc.)\n if (isValueEmpty(value)) {\n return null;\n }\n return findOption(value);\n })();\n\n // Handle selection change\n const handleChange = (\n option: MultiValue<SelectOption> | SingleValue<SelectOption>,\n ) => {\n if (multiSelect) {\n onChange(\n (option as SelectOption[])?.map((_option) => {\n return convertToOriginalType(_option.value);\n }),\n );\n } else {\n const newValue = (option as SelectOption)?.value;\n // Pass null explicitly when clearing (not undefined)\n onChange(newValue != null ? convertToOriginalType(newValue) : null);\n }\n // Mark field as touched immediately when a selection is made if not already touched\n // This ensures validation errors show right away (isTouched becomes true)\n // For Select components, selecting an option is a complete user action\n // (unlike text inputs where typing is ongoing), so we mark as touched immediately\n const { isTouched: currentIsTouched } = getFieldState(name, testId);\n if (!currentIsTouched) {\n onBlur();\n }\n };\n\n // Handle blur event\n const handleBlur = () => {\n setIsFocused(false);\n onBlur();\n };\n\n // Handle focus event\n const handleFocus = () => {\n setIsFocused(true);\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 aria-errormessage=\"\"\n aria-invalid={invalid}\n aria-label={ariaLabel}\n // set aria-labelledby to the label id so that the select is accessible\n aria-labelledby={\n label\n ? getTriggerProps()['aria-labelledby']?.split(' ')[1]\n : undefined\n }\n classNames={reactSelectClassNames}\n components={{\n Control: ControlComponent,\n DropdownIndicator: DropdownIndicatorComponent,\n Input: InputComponent,\n Option: OptionComponent,\n }}\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 menuIsOpen={debugMenuOpen ? true : undefined}\n menuPosition=\"fixed\"\n menuShouldBlockScroll\n name={name}\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 onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onInputChange={onInputChange}\n options={reactSelectOptions}\n placeholder={placeholder}\n unstyled\n value={reactSelectValue}\n />\n {invalid ? (\n <div {...getHelperWrapperProps()}>\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"],"mappings":"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"}
|
package/dist/Slider/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SliderProps, t as Slider } from "../index-
|
|
1
|
+
import { n as SliderProps, t as Slider } from "../index-DriOe0TW.cjs";
|
|
2
2
|
export { Slider, Slider as default, type SliderProps };
|
package/dist/Slider/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SliderProps, t as Slider } from "../index-
|
|
1
|
+
import { n as SliderProps, t as Slider } from "../index-Dox89nFY.js";
|
|
2
2
|
export { Slider, Slider as default, type SliderProps };
|
package/dist/Switch/index.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SwitchProps, t as Switch } from "../index-
|
|
1
|
+
import { n as SwitchProps, t as Switch } from "../index-Bki-5EDW.cjs";
|
|
2
2
|
export { Switch, Switch as default, type SwitchProps };
|
package/dist/Switch/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SwitchProps, t as Switch } from "../index-
|
|
1
|
+
import { n as SwitchProps, t as Switch } from "../index-CyeWKriu.js";
|
|
2
2
|
export { Switch, Switch as default, type SwitchProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as TextAreaProps, t as TextArea } from "../index-
|
|
1
|
+
import { n as TextAreaProps, t as TextArea } from "../index-CWM5cR7y.cjs";
|
|
2
2
|
export { TextArea, TextArea as default, type TextAreaProps };
|
package/dist/TextArea/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as TextAreaProps, t as TextArea } from "../index-
|
|
1
|
+
import { n as TextAreaProps, t as TextArea } from "../index-DBL3l7lp.js";
|
|
2
2
|
export { TextArea, TextArea as default, type TextAreaProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as useFormContext, t as checkFieldIsRequired } from "../../useFormContext-
|
|
1
|
+
import { n as useFormContext, t as checkFieldIsRequired } from "../../useFormContext-C29MZE_C.cjs";
|
|
2
2
|
export { checkFieldIsRequired, useFormContext };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as useFormContext, t as checkFieldIsRequired } from "../../useFormContext-
|
|
1
|
+
import { n as useFormContext, t as checkFieldIsRequired } from "../../useFormContext-DTE4pvL2.js";
|
|
2
2
|
export { checkFieldIsRequired, useFormContext };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as UseUniformFieldReturn, r as useUniformField, t as UseUniformFieldParams } from "../../useUniformField-
|
|
1
|
+
import { n as UseUniformFieldReturn, r as useUniformField, t as UseUniformFieldParams } from "../../useUniformField-DQsQnuA_.cjs";
|
|
2
2
|
export { UseUniformFieldParams, UseUniformFieldReturn, useUniformField };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as UseUniformFieldReturn, r as useUniformField, t as UseUniformFieldParams } from "../../useUniformField-
|
|
1
|
+
import { n as UseUniformFieldReturn, r as useUniformField, t as UseUniformFieldParams } from "../../useUniformField-DGBTwJLI.js";
|
|
2
2
|
export { UseUniformFieldParams, UseUniformFieldReturn, useUniformField };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as useUniformFieldArray, t as UseUniformFieldArrayProps } from "../../useUniformFieldArray-
|
|
1
|
+
import { n as useUniformFieldArray, t as UseUniformFieldArrayProps } from "../../useUniformFieldArray-BFkeHpUv.cjs";
|
|
2
2
|
export { UseUniformFieldArrayProps, useUniformFieldArray };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as useUniformFieldArray, t as UseUniformFieldArrayProps } from "../../useUniformFieldArray-
|
|
1
|
+
import { n as useUniformFieldArray, t as UseUniformFieldArrayProps } from "../../useUniformFieldArray-DJV2LOpX.js";
|
|
2
2
|
export { UseUniformFieldArrayProps, useUniformFieldArray };
|
|
@@ -6,28 +6,28 @@ declare const radiosVariants: import("tailwind-variants").TVReturnType<{
|
|
|
6
6
|
[key: string]: {
|
|
7
7
|
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
8
8
|
base?: import("tailwind-merge").ClassNameValue;
|
|
9
|
-
label?: import("tailwind-merge").ClassNameValue;
|
|
10
|
-
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
11
9
|
itemBase?: import("tailwind-merge").ClassNameValue;
|
|
12
10
|
itemControl?: import("tailwind-merge").ClassNameValue;
|
|
13
11
|
itemDescription?: import("tailwind-merge").ClassNameValue;
|
|
14
12
|
itemLabel?: import("tailwind-merge").ClassNameValue;
|
|
15
13
|
itemLabelWrapper?: import("tailwind-merge").ClassNameValue;
|
|
16
14
|
itemWrapper?: import("tailwind-merge").ClassNameValue;
|
|
15
|
+
label?: import("tailwind-merge").ClassNameValue;
|
|
16
|
+
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
19
|
} | {
|
|
20
20
|
[x: string]: {
|
|
21
21
|
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
22
22
|
base?: import("tailwind-merge").ClassNameValue;
|
|
23
|
-
label?: import("tailwind-merge").ClassNameValue;
|
|
24
|
-
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
25
23
|
itemBase?: import("tailwind-merge").ClassNameValue;
|
|
26
24
|
itemControl?: import("tailwind-merge").ClassNameValue;
|
|
27
25
|
itemDescription?: import("tailwind-merge").ClassNameValue;
|
|
28
26
|
itemLabel?: import("tailwind-merge").ClassNameValue;
|
|
29
27
|
itemLabelWrapper?: import("tailwind-merge").ClassNameValue;
|
|
30
28
|
itemWrapper?: import("tailwind-merge").ClassNameValue;
|
|
29
|
+
label?: import("tailwind-merge").ClassNameValue;
|
|
30
|
+
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
} | {}, {
|
|
@@ -44,14 +44,14 @@ declare const radiosVariants: import("tailwind-variants").TVReturnType<{
|
|
|
44
44
|
[key: string]: {
|
|
45
45
|
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
46
46
|
base?: import("tailwind-merge").ClassNameValue;
|
|
47
|
-
label?: import("tailwind-merge").ClassNameValue;
|
|
48
|
-
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
49
47
|
itemBase?: import("tailwind-merge").ClassNameValue;
|
|
50
48
|
itemControl?: import("tailwind-merge").ClassNameValue;
|
|
51
49
|
itemDescription?: import("tailwind-merge").ClassNameValue;
|
|
52
50
|
itemLabel?: import("tailwind-merge").ClassNameValue;
|
|
53
51
|
itemLabelWrapper?: import("tailwind-merge").ClassNameValue;
|
|
54
52
|
itemWrapper?: import("tailwind-merge").ClassNameValue;
|
|
53
|
+
label?: import("tailwind-merge").ClassNameValue;
|
|
54
|
+
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
55
55
|
};
|
|
56
56
|
};
|
|
57
57
|
} | {}, {
|
|
@@ -119,4 +119,4 @@ declare const Radios: ({
|
|
|
119
119
|
}: RadiosProps) => ReactElement;
|
|
120
120
|
//#endregion
|
|
121
121
|
export { RadiosProps as n, Radios as t };
|
|
122
|
-
//# sourceMappingURL=index
|
|
122
|
+
//# sourceMappingURL=index-65doPHAW.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index
|
|
1
|
+
{"version":3,"file":"index-65doPHAW.d.ts","names":[],"sources":["../src/Radios/Radios.tsx"],"mappings":";;;;cAaa,cAAA,8BAAc,YAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkBtB,YAAA,GAAe,OAAO,QAAQ,cAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,cAAA;AAAA,UAEnB,WAAA;;EAEf,QAAA;;EAEA,KAAA,GAAQ,SAAA;;EAER,IAAA,GAAO,SAAS;;EAEhB,MAAA;;EAEA,KAAA;AAAA;AAAA,UAGe,WAAA,SAAoB,YAAA;;EAEnC,SAAA;;EAEA,SAAA,GAAY,SAAA;;EAEZ,QAAA;;EAEA,MAAA;;EAEA,KAAA,GAAQ,SAAA;;EAER,IAAA;EA5BG;EA8BH,OAAA,EAAS,WAAA;;EAET,MAAA;AAAA;AAhC+C;;;AAAA,cAsC3C,MAAA;EAAU,SAAA;EAAA,MAAA;EAAA,IAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAMb,WAAA,KAAc,YAAA"}
|
|
@@ -6,8 +6,8 @@ import { ReactNode } from "react";
|
|
|
6
6
|
declare const inputVariants: import("tailwind-variants").TVReturnType<{
|
|
7
7
|
[key: string]: {
|
|
8
8
|
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
9
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
10
9
|
input?: import("tailwind-merge").ClassNameValue;
|
|
10
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
11
11
|
clearButton?: import("tailwind-merge").ClassNameValue;
|
|
12
12
|
inputWrapper?: import("tailwind-merge").ClassNameValue;
|
|
13
13
|
};
|
|
@@ -15,8 +15,8 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
|
|
|
15
15
|
} | {
|
|
16
16
|
[x: string]: {
|
|
17
17
|
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
18
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
19
18
|
input?: import("tailwind-merge").ClassNameValue;
|
|
19
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
20
20
|
clearButton?: import("tailwind-merge").ClassNameValue;
|
|
21
21
|
inputWrapper?: import("tailwind-merge").ClassNameValue;
|
|
22
22
|
};
|
|
@@ -29,8 +29,8 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
|
|
|
29
29
|
}, undefined, {
|
|
30
30
|
[key: string]: {
|
|
31
31
|
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
32
|
-
base?: import("tailwind-merge").ClassNameValue;
|
|
33
32
|
input?: import("tailwind-merge").ClassNameValue;
|
|
33
|
+
base?: import("tailwind-merge").ClassNameValue;
|
|
34
34
|
clearButton?: import("tailwind-merge").ClassNameValue;
|
|
35
35
|
inputWrapper?: import("tailwind-merge").ClassNameValue;
|
|
36
36
|
};
|
|
@@ -98,4 +98,4 @@ declare const Input: ({
|
|
|
98
98
|
}: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
99
99
|
//#endregion
|
|
100
100
|
export { InputProps as n, Input as t };
|
|
101
|
-
//# sourceMappingURL=index-
|
|
101
|
+
//# sourceMappingURL=index-BWF7Vy2e.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-BWF7Vy2e.d.cts","names":[],"sources":["../src/Input/Input.tsx"],"mappings":";;;;;cAca,aAAA,8BAAa,YAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAarB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,UAAA,SAAmB,YAAA;EAHhB;EAKlB,SAAA;EAJG;EAMH,SAAA,GAAY,SAAA;;EAEZ,SAAA;EAR+C;EAU/C,aAAA;EAR0B;EAU1B,QAAA;EANY;EAQZ,UAAA,GAAa,SAAA;EAEL;EAAR,KAAA,GAAQ,SAAA;EAcI;EAZZ,IAAA;EAhB8C;EAkB9C,OAAA;EAlBkC;EAoBlC,WAAA;EAhBA;EAkBA,IAAA;EAhBA;EAkBA,YAAA,GAAe,SAAA;EAdf;EAgBA,MAAA;EAda;EAgBb,SAAA,GAAY,mBAAA;EAdJ;EAgBR,IAAA;AAAA;;;;cAMI,KAAA;EAAS,SAAA,EAAA,UAAA;EAAA,SAAA;EAAA,aAAA;EAAA,UAAA;EAAA,IAAA;EAAA,OAAA;EAAA,WAAA;EAAA,IAAA;EAAA,YAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAYZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}
|
|
@@ -7,13 +7,13 @@ declare const switchVariants: import("tailwind-variants").TVReturnType<{
|
|
|
7
7
|
[key: string]: {
|
|
8
8
|
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
9
9
|
base?: import("tailwind-merge").ClassNameValue;
|
|
10
|
+
label?: import("tailwind-merge").ClassNameValue;
|
|
11
|
+
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
10
12
|
endContent?: import("tailwind-merge").ClassNameValue;
|
|
11
13
|
errorMessage?: import("tailwind-merge").ClassNameValue;
|
|
12
|
-
|
|
14
|
+
outerWrapper?: import("tailwind-merge").ClassNameValue;
|
|
13
15
|
startContent?: import("tailwind-merge").ClassNameValue;
|
|
14
16
|
thumb?: import("tailwind-merge").ClassNameValue;
|
|
15
|
-
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
16
|
-
outerWrapper?: import("tailwind-merge").ClassNameValue;
|
|
17
17
|
thumbIcon?: import("tailwind-merge").ClassNameValue;
|
|
18
18
|
};
|
|
19
19
|
};
|
|
@@ -21,13 +21,13 @@ declare const switchVariants: import("tailwind-variants").TVReturnType<{
|
|
|
21
21
|
[x: string]: {
|
|
22
22
|
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
23
23
|
base?: import("tailwind-merge").ClassNameValue;
|
|
24
|
+
label?: import("tailwind-merge").ClassNameValue;
|
|
25
|
+
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
24
26
|
endContent?: import("tailwind-merge").ClassNameValue;
|
|
25
27
|
errorMessage?: import("tailwind-merge").ClassNameValue;
|
|
26
|
-
|
|
28
|
+
outerWrapper?: import("tailwind-merge").ClassNameValue;
|
|
27
29
|
startContent?: import("tailwind-merge").ClassNameValue;
|
|
28
30
|
thumb?: import("tailwind-merge").ClassNameValue;
|
|
29
|
-
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
30
|
-
outerWrapper?: import("tailwind-merge").ClassNameValue;
|
|
31
31
|
thumbIcon?: import("tailwind-merge").ClassNameValue;
|
|
32
32
|
};
|
|
33
33
|
};
|
|
@@ -45,13 +45,13 @@ declare const switchVariants: import("tailwind-variants").TVReturnType<{
|
|
|
45
45
|
[key: string]: {
|
|
46
46
|
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
47
47
|
base?: import("tailwind-merge").ClassNameValue;
|
|
48
|
+
label?: import("tailwind-merge").ClassNameValue;
|
|
49
|
+
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
48
50
|
endContent?: import("tailwind-merge").ClassNameValue;
|
|
49
51
|
errorMessage?: import("tailwind-merge").ClassNameValue;
|
|
50
|
-
|
|
52
|
+
outerWrapper?: import("tailwind-merge").ClassNameValue;
|
|
51
53
|
startContent?: import("tailwind-merge").ClassNameValue;
|
|
52
54
|
thumb?: import("tailwind-merge").ClassNameValue;
|
|
53
|
-
wrapper?: import("tailwind-merge").ClassNameValue;
|
|
54
|
-
outerWrapper?: import("tailwind-merge").ClassNameValue;
|
|
55
55
|
thumbIcon?: import("tailwind-merge").ClassNameValue;
|
|
56
56
|
};
|
|
57
57
|
};
|
|
@@ -113,4 +113,4 @@ declare const Switch: ({
|
|
|
113
113
|
}: SwitchProps$1) => import("react/jsx-runtime").JSX.Element;
|
|
114
114
|
//#endregion
|
|
115
115
|
export { SwitchProps$1 as n, Switch as t };
|
|
116
|
-
//# sourceMappingURL=index-
|
|
116
|
+
//# sourceMappingURL=index-Bki-5EDW.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-Bki-5EDW.d.cts","names":[],"sources":["../src/Switch/Switch.tsx"],"mappings":";;;;;cAaa,cAAA,8BAAc,YAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiBtB,YAAA,GAAe,OAAO,QAAQ,cAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,cAAA;AAAA,UAEnB,aAAA,SAAoB,YAAA;;EAEnC,SAAA;;EAEA,SAAA,GAAY,SAAA;;EAEZ,QAAA;;EAEA,UAAA,GAAa,SAAA;;EAEb,KAAA,GAAQ,SAAA;;EAER,IAAA;EAEA,IAAA;;EAEA,YAAA,GAAe,SAAA;;EAEf,MAAA;;EAEA,SAAA,GAAY,WAAA;AAAA;;;;cAMR,MAAA;EAAU,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,IAAA;EAAA,YAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAQb,aAAA,iCAAW,GAAA,CAAA,OAAA"}
|