@vinyasa/form 1.0.22 → 1.0.23

package/dist/esm/file-upload.js

@@ -1,123 +1,2 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { PaperclipIcon, UploadIcon, XIcon } from "@vinyasa/icons";
-import { useId, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { field, describedByIds } from "./4557.js";
-import { fileName, rejectionText, fileRemove, fileSize, fileNameIcon, fileList, fileRow, trigger, fileNameText, fileMeta, fileListWrapper } from "./2942.js";
-const formatFileSize = (bytes)=>{
-    if (bytes < 1024) return `${String(bytes)} B`;
-    if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / 1048576).toFixed(1)} MB`;
-};
-const FileUpload = ({ value, onValueChange, accept, maxFiles, maxSize, label, description, error, required, disabled, id: idProp })=>{
-    const [internalFiles, setInternalFiles] = useState([]);
-    const isControlled = void 0 !== value;
-    const currentFiles = isControlled ? value : internalFiles;
-    const [rejectionMessage, setRejectionMessage] = useState();
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
-    const setFiles = (next)=>{
-        if (!isControlled) setInternalFiles(next);
-        onValueChange?.(next);
-    };
-    const removeFile = (file)=>{
-        setFiles(currentFiles.filter((entry)=>entry !== file));
-    };
-    const { getRootProps, getInputProps } = useDropzone({
-        accept,
-        maxFiles,
-        maxSize,
-        disabled,
-        onDrop: (acceptedFiles, fileRejections)=>{
-            fileRejections.length > 0 ? setRejectionMessage(fileRejections[0]?.errors[0]?.message) : setRejectionMessage(void 0);
-            if (acceptedFiles.length > 0) setFiles([
-                ...currentFiles,
-                ...acceptedFiles
-            ]);
-        }
-    });
-    return /*#__PURE__*/ jsxs(field, {
-        id: id,
-        label: label,
-        description: description,
-        error: error,
-        required: required,
-        children: [
-            /*#__PURE__*/ jsxs("button", {
-                type: "button",
-                ...getRootProps({
-                    id,
-                    role: 'button',
-                    'data-disabled': disabled,
-                    disabled
-                }),
-                className: trigger,
-                "aria-describedby": describedByIds(id, {
-                    description,
-                    error
-                }),
-                children: [
-                    /*#__PURE__*/ jsx("input", {
-                        ...getInputProps()
-                    }),
-                    /*#__PURE__*/ jsx(UploadIcon, {
-                        "aria-hidden": "true"
-                    }),
-                    "Choose files"
-                ]
-            }),
-            rejectionMessage ? /*#__PURE__*/ jsx("p", {
-                className: rejectionText,
-                children: rejectionMessage
-            }) : null,
-            currentFiles.length > 0 ? /*#__PURE__*/ jsx("div", {
-                className: fileListWrapper,
-                children: /*#__PURE__*/ jsx("ul", {
-                    className: fileList,
-                    children: currentFiles.map((file)=>/*#__PURE__*/ jsxs("li", {
-                            className: fileRow,
-                            children: [
-                                /*#__PURE__*/ jsxs("span", {
-                                    className: fileName,
-                                    children: [
-                                        /*#__PURE__*/ jsx(PaperclipIcon, {
-                                            "aria-hidden": "true",
-                                            className: fileNameIcon
-                                        }),
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: fileNameText,
-                                            title: file.name,
-                                            children: file.name
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("span", {
-                                    className: fileMeta,
-                                    children: [
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: fileSize,
-                                            children: formatFileSize(file.size)
-                                        }),
-                                        /*#__PURE__*/ jsx("button", {
-                                            type: "button",
-                                            className: fileRemove,
-                                            "aria-label": `Remove ${file.name}`,
-                                            onClick: ()=>{
-                                                removeFile(file);
-                                            },
-                                            children: /*#__PURE__*/ jsx(XIcon, {})
-                                        })
-                                    ]
-                                })
-                            ]
-                        }, `${file.name}-${String(file.lastModified)}`))
-                })
-            }) : null
-        ]
-    });
-};
-FileUpload.displayName = 'FileUpload';
-const file_upload_FileUpload = FileUpload;
-const file_upload = file_upload_FileUpload;
-export default file_upload;
-export { file_upload as FileUpload };
+export { FileUpload, FileUploadTrigger } from "./6982.js";
+export { DropzoneFileItem as FileUploadFileItem, DropzoneFileList as FileUploadFileList, DropzoneRejection as FileUploadRejection } from "./9559.js";

package/dist/esm/index.d.ts

@@ -1,24 +1,25 @@
-export { default as Autocomplete, type AutocompleteProps } from './components/autocomplete';
-export { default as Checkbox, type CheckboxProps } from './components/checkbox';
-export { default as ColorPicker, type ColorPickerProps } from './components/color-picker';
-export { default as Combobox, type ComboboxOption, type ComboboxProps, } from './components/combobox';
-export { default as DatePicker, type DatePickerProps } from './components/date-picker';
-export { default as Dropzone, type DropzoneProps } from './components/dropzone';
-export { default as FileUpload, type FileUploadProps } from './components/file-upload';
+export { Autocomplete, AutocompleteContent, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList, type AutocompleteContentProps, type AutocompleteInputProps, type AutocompleteItemProps, type AutocompleteProps, } from './components/autocomplete';
+export { Checkbox, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxProps, } from './components/checkbox';
+export { ColorPicker, ColorPickerContent, ColorPickerSwatch, ColorPickerTrigger, ColorPickerValue, type ColorPickerContentProps, type ColorPickerSwatchProps, type ColorPickerTriggerProps, type ColorPickerValueProps, } from './components/color-picker';
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxIcon, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger, ComboboxValue, type ComboboxContentProps, type ComboboxEmptyProps, type ComboboxIconProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxItemIndicatorProps, type ComboboxListProps, type ComboboxProps, type ComboboxTriggerProps, type ComboboxValueProps, } from './components/combobox';
+export { DatePicker, DatePickerContent, DatePickerIcon, DatePickerTrigger, DatePickerValue, type DatePickerContentProps, type DatePickerIconProps, type DatePickerProps, type DatePickerTriggerProps, type DatePickerValueProps, } from './components/date-picker';
+export { Dropzone, DropzoneFileItem, DropzoneFileList, DropzoneRejection, DropzoneTrigger, useDropzoneContext, type DropzoneFileItemProps, type DropzoneProps, type DropzoneTriggerProps, } from './components/dropzone';
+export { Field, FieldControl, FieldDescription, FieldError, FieldLabel, useFieldContext, type FieldContextValue, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldProps, } from './components/field';
+export { FileUpload, FileUploadFileItem, FileUploadFileList, FileUploadRejection, FileUploadTrigger, type FileUploadProps, type FileUploadTriggerProps, } from './components/file-upload';
 export { default as IconButton, type IconButtonProps } from './components/icon-button';
 export { default as Input, type InputProps, type InputSize } from './components/input';
-export { default as MultiSelect, type MultiSelectOption, type MultiSelectProps, } from './components/multi-select';
+export { MultiSelect, MultiSelectChip, MultiSelectChipOverflow, MultiSelectChipRemove, MultiSelectChipRow, MultiSelectContent, MultiSelectEmpty, MultiSelectInput, MultiSelectItem, MultiSelectItemIndicator, MultiSelectList, MultiSelectPlaceholder, MultiSelectTrigger, type MultiSelectChipOverflowProps, type MultiSelectChipProps, type MultiSelectChipRemoveProps, type MultiSelectChipRowProps, type MultiSelectPlaceholderProps, type MultiSelectTriggerProps, } from './components/multi-select';
 export { default as NumberInput, type NumberInputProps, type NumberInputSize, } from './components/number-input';
 export { default as OtpInput, type OtpInputProps } from './components/otp-input';
 export { default as PasswordInput, type PasswordInputProps, type PasswordInputSize, } from './components/password-input';
-export { default as RadioGroup, type RadioGroupProps, type RadioOption, } from './components/radio-group';
+export { RadioGroup, RadioGroupIndicator, RadioGroupItem, type RadioGroupIndicatorProps, type RadioGroupItemProps, type RadioGroupProps, } from './components/radio-group';
 export { default as RangeSlider, type RangeSliderProps } from './components/range-slider';
-export { default as RichTextEditor, type RichTextEditorProps } from './components/rich-text-editor';
+export { RichTextEditor, RichTextEditorContent, RichTextEditorDivider, RichTextEditorToolbar, RichTextEditorToolbarButton, useRichTextEditorActive, useRichTextEditorContext, useRichTextEditorDisabled, type RichTextEditorProps, type RichTextEditorToolbarButtonProps, type RichTextEditorToolbarProps, } from './components/rich-text-editor';
 export { default as SearchInput, type SearchInputProps, type SearchInputSize, } from './components/search-input';
-export { default as Select, type SelectOption, type SelectProps } from './components/select';
-export { default as Slider, type SliderProps } from './components/slider';
-export { default as Switch, type SwitchProps } from './components/switch';
+export { Select, SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue, SelectViewport, type SelectItemProps, type SelectTriggerProps, type SelectValueProps, } from './components/select';
+export { Slider, SliderRange, SliderThumb, SliderTrack, type SliderProps, type SliderRangeProps, type SliderThumbProps, type SliderTrackProps, } from './components/slider';
+export { Switch, SwitchThumb, type SwitchProps, type SwitchThumbProps } from './components/switch';
 export { default as TagsInput, type TagsInputProps } from './components/tags-input';
 export { default as Textarea, type TextareaProps, type TextareaSize } from './components/textarea';
-export { default as TimePicker, type TimePickerProps } from './components/time-picker';
+export { TimePicker, TimePickerContent, TimePickerIcon, TimePickerTrigger, TimePickerValue, type TimePickerContentProps, type TimePickerIconProps, type TimePickerProps, type TimePickerTriggerProps, type TimePickerValueProps, } from './components/time-picker';
 export { default as ToggleButton, type ToggleButtonProps } from './components/toggle-button';

package/dist/esm/index.js

@@ -1,24 +1,25 @@
-export { Autocomplete } from "./autocomplete.js";
-export { Checkbox } from "./checkbox.js";
-export { ColorPicker } from "./color-picker.js";
-export { Combobox } from "./combobox.js";
-export { DatePicker } from "./date-picker.js";
-export { Dropzone } from "./dropzone.js";
-export { FileUpload } from "./file-upload.js";
+export { Autocomplete, AutocompleteContent, AutocompleteInput, AutocompleteItem } from "./345.js";
+export { AutocompleteEmpty, AutocompleteEmpty as ComboboxEmpty, AutocompleteEmpty as MultiSelectEmpty, AutocompleteList, AutocompleteList as ComboboxList, AutocompleteList as MultiSelectList, Combobox, ComboboxContent, ComboboxContent as MultiSelectContent, ComboboxIcon, ComboboxInput, ComboboxInput as MultiSelectInput, ComboboxItem, ComboboxItem as MultiSelectItem, ComboboxItemIndicator, ComboboxItemIndicator as MultiSelectItemIndicator, ComboboxTrigger, ComboboxValue } from "./8479.js";
+export { Checkbox, CheckboxIndicator } from "./9167.js";
+export { ColorPicker, ColorPickerContent, ColorPickerSwatch, ColorPickerTrigger, ColorPickerValue } from "./7678.js";
+export { DatePicker, DatePickerContent, DatePickerIcon, DatePickerTrigger, DatePickerValue } from "./2692.js";
+export { Dropzone, DropzoneFileItem, DropzoneFileItem as FileUploadFileItem, DropzoneFileList, DropzoneFileList as FileUploadFileList, DropzoneRejection, DropzoneRejection as FileUploadRejection, DropzoneTrigger, useDropzoneContext } from "./9559.js";
+export { Field, FieldControl, FieldDescription, FieldError, FieldLabel, useFieldContext } from "./2315.js";
+export { FileUpload, FileUploadTrigger } from "./6982.js";
 export { IconButton } from "./icon-button.js";
 export { Input } from "./input.js";
-export { MultiSelect } from "./multi-select.js";
+export { MultiSelect, MultiSelectChip, MultiSelectChipOverflow, MultiSelectChipRemove, MultiSelectChipRow, MultiSelectPlaceholder, MultiSelectTrigger } from "./5074.js";
 export { NumberInput } from "./number-input.js";
 export { OtpInput } from "./otp-input.js";
 export { PasswordInput } from "./password-input.js";
-export { RadioGroup } from "./radio-group.js";
+export { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "./7580.js";
 export { RangeSlider } from "./range-slider.js";
-export { RichTextEditor } from "./rich-text-editor.js";
+export { RichTextEditor, RichTextEditorContent, RichTextEditorDivider, RichTextEditorToolbar, RichTextEditorToolbarButton, useRichTextEditorActive, useRichTextEditorContext, useRichTextEditorDisabled } from "./9545.js";
 export { SearchInput } from "./search-input.js";
-export { Select } from "./select.js";
-export { Slider } from "./slider.js";
-export { Switch } from "./switch.js";
+export { Select, SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue, SelectViewport } from "./5333.js";
+export { Slider, SliderRange, SliderThumb, SliderTrack } from "./27.js";
+export { Switch, SwitchThumb } from "./1485.js";
 export { TagsInput } from "./tags-input.js";
 export { Textarea } from "./textarea.js";
-export { TimePicker } from "./time-picker.js";
+export { TimePicker, TimePickerContent, TimePickerIcon, TimePickerTrigger, TimePickerValue } from "./7800.js";
 export { ToggleButton } from "./toggle-button.js";

package/dist/esm/input.js

@@ -1,35 +1,26 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { fieldControl } from "./2995.js";
-import { field, describedByIds } from "./4557.js";
-const Input = /*#__PURE__*/ forwardRef(({ label, description, error, required, size, id: idProp, className, ...rest }, ref)=>{
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
+import { forwardRef } from "react";
+import { fieldControl, useResolvedFieldProps } from "./2315.js";
+const Input = /*#__PURE__*/ forwardRef(({ size, invalid, id: idProp, className, 'aria-describedby': ariaDescribedBy, ...rest }, ref)=>{
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid,
+        describedBy: ariaDescribedBy
+    });
     const classes = className ? `${fieldControl({
         size,
-        invalid: Boolean(error)
+        invalid: isInvalid
     })} ${className}` : fieldControl({
         size,
-        invalid: Boolean(error)
+        invalid: isInvalid
     });
-    return /*#__PURE__*/ jsx(field, {
+    return /*#__PURE__*/ jsx("input", {
+        ref: ref,
         id: id,
-        label: label,
-        description: description,
-        error: error,
-        required: required,
-        children: /*#__PURE__*/ jsx("input", {
-            ref: ref,
-            id: id,
-            className: classes,
-            required: required,
-            "aria-invalid": error ? true : void 0,
-            "aria-describedby": describedByIds(id, {
-                description,
-                error
-            }),
-            ...rest
-        })
+        className: classes,
+        "aria-invalid": isInvalid,
+        "aria-describedby": describedBy,
+        ...rest
     });
 });
 Input.displayName = 'Input';

package/dist/esm/multi-select.js

@@ -1,164 +1,2 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, SearchIcon, XIcon } from "@vinyasa/icons";
-import { Command } from "cmdk";
-import { useId, useState } from "react";
-import { field, describedByIds } from "./4557.js";
-import { fieldControl } from "./2995.js";
-import { chip, empty, chipRow, searchIcon, content, placeholder as selectPopover_css_placeholder, chipRemove, itemIndicator, searchInput, item, searchWrapper, list, chipOverflow, triggerBox } from "./6720.js";
-import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
-const optionText = (option)=>'string' == typeof option.label ? option.label : option.value;
-const MultiSelect = ({ options, value, defaultValue = [], onValueChange, placeholder, label, description, error, required, size, emptyMessage = 'No results found.', maxVisibleChips = 2, trigger, id: idProp })=>{
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const isControlled = void 0 !== value;
-    const currentValue = isControlled ? value : internalValue;
-    const [open, setOpen] = useState(false);
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
-    const setValue = (next)=>{
-        if (!isControlled) setInternalValue(next);
-        onValueChange?.(next);
-    };
-    const toggleValue = (optionValue)=>{
-        setValue(currentValue.includes(optionValue) ? currentValue.filter((entry)=>entry !== optionValue) : [
-            ...currentValue,
-            optionValue
-        ]);
-    };
-    const removeValue = (optionValue)=>{
-        setValue(currentValue.filter((entry)=>entry !== optionValue));
-    };
-    const selectedOptions = options.filter((option)=>currentValue.includes(option.value));
-    const visibleOptions = selectedOptions.slice(0, maxVisibleChips);
-    const overflowCount = selectedOptions.length - visibleOptions.length;
-    return /*#__PURE__*/ jsx(field, {
-        id: id,
-        label: label,
-        description: description,
-        error: error,
-        required: required,
-        children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_popover_e2827c9f.Root, {
-            open: open,
-            onOpenChange: setOpen,
-            children: [
-                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Trigger, {
-                    asChild: true,
-                    children: trigger ?? /*#__PURE__*/ jsx("div", {
-                        id: id,
-                        role: "combobox",
-                        "aria-expanded": open,
-                        "aria-labelledby": label ? `${id}-label` : void 0,
-                        "aria-describedby": describedByIds(id, {
-                            description,
-                            error
-                        }),
-                        tabIndex: 0,
-                        className: `${fieldControl({
-                            size,
-                            invalid: Boolean(error)
-                        })} ${triggerBox}`,
-                        onKeyDown: (event)=>{
-                            if ('Enter' === event.key || ' ' === event.key) {
-                                event.preventDefault();
-                                setOpen((previous)=>!previous);
-                            }
-                        },
-                        children: /*#__PURE__*/ jsxs("span", {
-                            className: chipRow,
-                            children: [
-                                0 === selectedOptions.length ? /*#__PURE__*/ jsx("span", {
-                                    className: selectPopover_css_placeholder,
-                                    children: placeholder
-                                }) : null,
-                                visibleOptions.map((option)=>/*#__PURE__*/ jsxs("span", {
-                                        className: chip,
-                                        children: [
-                                            option.label,
-                                            /*#__PURE__*/ jsx("button", {
-                                                type: "button",
-                                                className: chipRemove,
-                                                "aria-label": `Remove ${optionText(option)}`,
-                                                onClick: (event)=>{
-                                                    event.stopPropagation();
-                                                    removeValue(option.value);
-                                                },
-                                                children: /*#__PURE__*/ jsx(XIcon, {})
-                                            })
-                                        ]
-                                    }, option.value)),
-                                overflowCount > 0 ? /*#__PURE__*/ jsxs("span", {
-                                    className: chipOverflow,
-                                    children: [
-                                        "+",
-                                        overflowCount
-                                    ]
-                                }) : null
-                            ]
-                        })
-                    })
-                }),
-                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
-                    className: content,
-                    align: "start",
-                    sideOffset: 4,
-                    onOpenAutoFocus: (event)=>{
-                        event.preventDefault();
-                    },
-                    children: /*#__PURE__*/ jsxs(Command, {
-                        loop: true,
-                        label: "Search options",
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: searchWrapper,
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: searchIcon,
-                                        "aria-hidden": "true",
-                                        children: /*#__PURE__*/ jsx(SearchIcon, {})
-                                    }),
-                                    /*#__PURE__*/ jsx(Command.Input, {
-                                        placeholder: "Search…",
-                                        className: searchInput
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs(Command.List, {
-                                className: list,
-                                children: [
-                                    /*#__PURE__*/ jsx(Command.Empty, {
-                                        className: empty,
-                                        children: emptyMessage
-                                    }),
-                                    options.map((option)=>{
-                                        const isSelected = currentValue.includes(option.value);
-                                        return /*#__PURE__*/ jsxs(Command.Item, {
-                                            value: optionText(option),
-                                            disabled: option.disabled,
-                                            onSelect: ()=>{
-                                                toggleValue(option.value);
-                                            },
-                                            className: item,
-                                            "data-selected": isSelected,
-                                            "data-disabled": option.disabled,
-                                            children: [
-                                                option.label,
-                                                isSelected ? /*#__PURE__*/ jsx("span", {
-                                                    className: itemIndicator,
-                                                    children: /*#__PURE__*/ jsx(CheckIcon, {})
-                                                }) : null
-                                            ]
-                                        }, option.value);
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-    });
-};
-MultiSelect.displayName = 'MultiSelect';
-const multi_select_MultiSelect = MultiSelect;
-const multi_select = multi_select_MultiSelect;
-export default multi_select;
-export { multi_select as MultiSelect };
+export { MultiSelect, MultiSelectChip, MultiSelectChipOverflow, MultiSelectChipRemove, MultiSelectChipRow, MultiSelectPlaceholder, MultiSelectTrigger } from "./5074.js";
+export { AutocompleteEmpty as MultiSelectEmpty, AutocompleteList as MultiSelectList, ComboboxContent as MultiSelectContent, ComboboxInput as MultiSelectInput, ComboboxItem as MultiSelectItem, ComboboxItemIndicator as MultiSelectItemIndicator } from "./8479.js";

package/dist/esm/number-input.js

@@ -1,9 +1,8 @@
 import "./number-input.css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { MinusIcon, PlusIcon } from "@vinyasa/icons";
-import { forwardRef, useId, useRef } from "react";
-import { fieldControl, createRuntimeFn } from "./2995.js";
-import { field, describedByIds } from "./4557.js";
+import { forwardRef, useRef } from "react";
+import { fieldControl, useResolvedFieldProps, createRuntimeFn } from "./2315.js";
 var group = createRuntimeFn({
     defaultClassName: '_1wyztbj0',
     variantClassNames: {
@@ -66,84 +65,72 @@ const mergeRefs = (...refs)=>(node)=>{
         for (const ref of refs)if ('function' == typeof ref) ref(node);
         else if (ref) ref.current = node;
     };
-const NumberInput = /*#__PURE__*/ forwardRef(({ label, description, error, required, size, showSteppers = true, disabled, id: idProp, className, ...rest }, ref)=>{
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
+const NumberInput = /*#__PURE__*/ forwardRef(({ size, invalid, showSteppers = true, disabled, id: idProp, className, 'aria-describedby': ariaDescribedBy, ...rest }, ref)=>{
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid,
+        describedBy: ariaDescribedBy
+    });
     const innerRef = useRef(null);
-    const invalid = Boolean(error);
-    return /*#__PURE__*/ jsx(field, {
-        id: id,
-        label: label,
-        description: description,
-        error: error,
-        required: required,
-        children: showSteppers ? /*#__PURE__*/ jsxs("div", {
-            className: group({
-                size,
-                invalid,
-                disabled
+    if (showSteppers) return /*#__PURE__*/ jsxs("div", {
+        className: group({
+            size,
+            invalid: isInvalid,
+            disabled
+        }),
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: `${groupButton({
+                    size
+                })} ${groupButtonLeading}`,
+                disabled: disabled,
+                tabIndex: -1,
+                "aria-label": "Decrement",
+                onClick: ()=>{
+                    step(innerRef.current, 'down');
+                },
+                children: /*#__PURE__*/ jsx(MinusIcon, {})
             }),
-            children: [
-                /*#__PURE__*/ jsx("button", {
-                    type: "button",
-                    className: `${groupButton({
-                        size
-                    })} ${groupButtonLeading}`,
-                    disabled: disabled,
-                    tabIndex: -1,
-                    "aria-label": "Decrement",
-                    onClick: ()=>{
-                        step(innerRef.current, 'down');
-                    },
-                    children: /*#__PURE__*/ jsx(MinusIcon, {})
-                }),
-                /*#__PURE__*/ jsx("input", {
-                    ref: mergeRefs(ref, innerRef),
-                    id: id,
-                    type: "number",
-                    disabled: disabled,
-                    className: `${groupInput({
-                        size
-                    })} ${className ?? ''}`,
-                    required: required,
-                    "aria-invalid": invalid ? true : void 0,
-                    "aria-describedby": describedByIds(id, {
-                        description,
-                        error
-                    }),
-                    ...rest
-                }),
-                /*#__PURE__*/ jsx("button", {
-                    type: "button",
-                    className: `${groupButton({
-                        size
-                    })} ${groupButtonTrailing}`,
-                    disabled: disabled,
-                    tabIndex: -1,
-                    "aria-label": "Increment",
-                    onClick: ()=>{
-                        step(innerRef.current, 'up');
-                    },
-                    children: /*#__PURE__*/ jsx(PlusIcon, {})
-                })
-            ]
-        }) : /*#__PURE__*/ jsx("input", {
-            ref: mergeRefs(ref, innerRef),
-            id: id,
-            type: "number",
-            disabled: disabled,
-            className: `${fieldControl({
-                size,
-                invalid
-            })} ${className ?? ''}`,
-            required: required,
-            "aria-invalid": invalid ? true : void 0,
-            "aria-describedby": describedByIds(id, {
-                description,
-                error
+            /*#__PURE__*/ jsx("input", {
+                ref: mergeRefs(ref, innerRef),
+                id: id,
+                type: "number",
+                disabled: disabled,
+                className: `${groupInput({
+                    size
+                })} ${className ?? ''}`,
+                "aria-invalid": isInvalid,
+                "aria-describedby": describedBy,
+                ...rest
             }),
-            ...rest
-        })
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: `${groupButton({
+                    size
+                })} ${groupButtonTrailing}`,
+                disabled: disabled,
+                tabIndex: -1,
+                "aria-label": "Increment",
+                onClick: ()=>{
+                    step(innerRef.current, 'up');
+                },
+                children: /*#__PURE__*/ jsx(PlusIcon, {})
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("input", {
+        ref: mergeRefs(ref, innerRef),
+        id: id,
+        type: "number",
+        disabled: disabled,
+        className: `${fieldControl({
+            size,
+            invalid: isInvalid
+        })} ${className ?? ''}`,
+        "aria-invalid": isInvalid,
+        "aria-describedby": describedBy,
+        ...rest
     });
 });
 NumberInput.displayName = 'NumberInput';