@vinyasa/form 1.0.22

package/dist/esm/date-picker.js

@@ -0,0 +1,118 @@
+import "./date-picker.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "@vinyasa/icons";
+import { format } from "date-fns";
+import { useId, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import { field, describedByIds } from "./4557.js";
+import { fieldControl } from "./2995.js";
+import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
+var content = '_4znv390';
+var day = '_4znv39c';
+var dayButton = '_4znv39d';
+var DatePicker_css_disabled = '_4znv39g';
+var month = '_4znv397';
+var monthCaption = '_4znv398';
+var months = '_4znv396';
+var nav = '_4znv399';
+var navButton = '_4znv39a';
+var outside = '_4znv39f';
+var root = '_4znv395';
+var selected = '_4znv39h';
+var today = '_4znv39e';
+var DatePicker_css_trigger = '_4znv391';
+var triggerIcon = '_4znv394';
+var triggerPlaceholder = '_4znv392';
+var triggerText = '_4znv393';
+var weekday = '_4znv39b';
+const DatePicker = ({ value, defaultValue, onValueChange, placeholder = 'Pick a date', dateFormat = 'PPP', label, description, error, required, size, disabled, 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 handleSelect = (date)=>{
+        if (!isControlled) setInternalValue(date);
+        onValueChange?.(date);
+        setOpen(false);
+    };
+    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__*/ jsxs("button", {
+                        type: "button",
+                        id: id,
+                        disabled: disabled,
+                        className: `${fieldControl({
+                            size,
+                            invalid: Boolean(error)
+                        })} ${DatePicker_css_trigger}`,
+                        "aria-describedby": describedByIds(id, {
+                            description,
+                            error
+                        }),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: currentValue ? triggerText : `${triggerText} ${triggerPlaceholder}`,
+                                children: currentValue ? format(currentValue, dateFormat) : placeholder
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: triggerIcon,
+                                "aria-hidden": "true",
+                                children: /*#__PURE__*/ jsx(CalendarIcon, {})
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+                    className: content,
+                    align: "start",
+                    sideOffset: 4,
+                    onOpenAutoFocus: (event)=>{
+                        event.preventDefault();
+                    },
+                    children: /*#__PURE__*/ jsx(DayPicker, {
+                        mode: "single",
+                        selected: currentValue,
+                        onSelect: handleSelect,
+                        defaultMonth: currentValue,
+                        classNames: {
+                            root: root,
+                            months: months,
+                            month: month,
+                            month_caption: monthCaption,
+                            nav: nav,
+                            button_previous: navButton,
+                            button_next: navButton,
+                            weekday: weekday,
+                            day: day,
+                            day_button: dayButton,
+                            today: today,
+                            outside: outside,
+                            disabled: DatePicker_css_disabled,
+                            selected: selected
+                        },
+                        components: {
+                            Chevron: ({ orientation })=>'left' === orientation ? /*#__PURE__*/ jsx(ChevronLeftIcon, {}) : /*#__PURE__*/ jsx(ChevronRightIcon, {})
+                        }
+                    })
+                })
+            ]
+        })
+    });
+};
+DatePicker.displayName = 'DatePicker';
+const date_picker_DatePicker = DatePicker;
+const date_picker = date_picker_DatePicker;
+export default date_picker;
+export { date_picker as DatePicker };

package/dist/esm/dropzone.css

@@ -0,0 +1,43 @@
+.rnivxt0 {
+  justify-content: center;
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  width: 100%;
+  padding: var(--vinyasa-space6);
+  border: 2px dashed var(--vinyasa-border-color-default);
+  border-radius: var(--vinyasa-radius-md);
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: #0000;
+  flex-direction: column;
+  display: flex;
+}
+
+.rnivxt0:focus-visible {
+  border-color: var(--vinyasa-focus);
+  box-shadow: 0 0 0 1px var(--vinyasa-focus), 0 0 0 4px color-mix(in srgb, var(--vinyasa-focus) 16%, transparent);
+  outline: none;
+}
+
+.rnivxt0[data-disabled="true"] {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.rnivxt1 {
+  border-color: var(--vinyasa-focus);
+  background-color: var(--vinyasa-secondary);
+}
+
+.rnivxt2 {
+  font-size: 1.5rem;
+}
+
+.rnivxt3 {
+  font-size: var(--vinyasa-font-size-xs);
+}
+

package/dist/esm/dropzone.d.ts

@@ -0,0 +1,2 @@
+export * from './components/dropzone/index';
+export { default } from './components/dropzone/index';

package/dist/esm/dropzone.js

@@ -0,0 +1,137 @@
+import "./dropzone.css";
+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, fileNameText, fileMeta, fileListWrapper } from "./2942.js";
+var Dropzone_css_area = 'rnivxt0';
+var areaActive = 'rnivxt1';
+var hint = 'rnivxt3';
+var icon = 'rnivxt2';
+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 Dropzone = ({ 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, isDragActive } = 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("div", {
+                ...getRootProps({
+                    id,
+                    'data-disabled': disabled
+                }),
+                className: isDragActive ? `${Dropzone_css_area} ${areaActive}` : Dropzone_css_area,
+                "aria-describedby": describedByIds(id, {
+                    description,
+                    error
+                }),
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        ...getInputProps()
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: icon,
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx(UploadIcon, {})
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: isDragActive ? 'Drop the files here…' : 'Drag files here, or click to browse'
+                    }),
+                    maxSize ? /*#__PURE__*/ jsxs("span", {
+                        className: hint,
+                        children: [
+                            "Up to ",
+                            formatFileSize(maxSize),
+                            " per file"
+                        ]
+                    }) : null
+                ]
+            }),
+            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
+        ]
+    });
+};
+Dropzone.displayName = 'Dropzone';
+const dropzone_Dropzone = Dropzone;
+const dropzone = dropzone_Dropzone;
+export default dropzone;
+export { dropzone as Dropzone };

package/dist/esm/field.css.d.ts

@@ -0,0 +1,33 @@
+export declare const fieldControl: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            padding: `var(--${string}) var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        md: {
+            padding: `var(--${string}) var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        lg: {
+            padding: `var(--${string}) var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+    };
+    invalid: {
+        true: {
+            borderColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const fieldGroup: string;
+export declare const fieldIconLeading: string;
+export declare const fieldIconTrailing: string;
+export declare const fieldControlWithLeadingIcon: string;
+export declare const fieldControlWithTrailingIcon: string;
+export declare const fieldIconButton: string;
+export declare const label: string;
+export declare const requiredMark: string;
+export declare const descriptionText: string;
+export declare const errorText: string;
+export declare const controlRow: string;
+export declare const controlLabel: string;

package/dist/esm/field.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface FieldChromeProps {
+    id: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    children: ReactNode;
+    /**
+     * Omits `htmlFor` on the label — for a control whose real interactive
+     * element doesn't actually carry `id` (e.g. Combobox/Autocomplete, where
+     * cmdk's Command.Input always overwrites `id` with its own internally
+     * generated one). A `htmlFor` pointing at a nonexistent id wouldn't just
+     * be inert — clicking that label would silently fail to focus anything,
+     * for real users too, not only in tests.
+     */
+    disableLabelFor?: boolean;
+}
+export declare const describedByIds: (id: string, { description, error }: {
+    description?: ReactNode;
+    error?: ReactNode;
+}) => string | undefined;
+declare const FieldChrome: ({ id, label, description, error, required, children, disableLabelFor, }: FieldChromeProps) => import("react").JSX.Element;
+export default FieldChrome;

package/dist/esm/file-upload.d.ts

@@ -0,0 +1,2 @@
+export * from './components/file-upload/index';
+export { default } from './components/file-upload/index';

package/dist/esm/file-upload.js

@@ -0,0 +1,123 @@
+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 };

package/dist/esm/icon-button.d.ts

@@ -0,0 +1,2 @@
+export * from './components/icon-button/index';
+export { default } from './components/icon-button/index';

package/dist/esm/icon-button.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import _vinyasa_button from "@vinyasa/button";
+import { forwardRef } from "react";
+const dimensionBySize = {
+    sm: '2rem',
+    md: '2.5rem',
+    lg: '3rem'
+};
+const IconButton = /*#__PURE__*/ forwardRef(({ icon, size = 'md', style, ...rest }, ref)=>{
+    const dimension = dimensionBySize[size];
+    const squareStyle = {
+        padding: 0,
+        width: dimension,
+        height: dimension,
+        ...style
+    };
+    return /*#__PURE__*/ jsx(_vinyasa_button, {
+        ref: ref,
+        size: size,
+        style: squareStyle,
+        ...rest,
+        children: icon
+    });
+});
+IconButton.displayName = 'IconButton';
+const icon_button_IconButton = IconButton;
+const icon_button = icon_button_IconButton;
+export default icon_button;
+export { icon_button as IconButton };

package/dist/esm/index.d.ts

@@ -0,0 +1,24 @@
+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 { 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 { 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 { default as RangeSlider, type RangeSliderProps } from './components/range-slider';
+export { default as RichTextEditor, type RichTextEditorProps } 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 { 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 { default as ToggleButton, type ToggleButtonProps } from './components/toggle-button';

package/dist/esm/index.js

@@ -0,0 +1,24 @@
+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 { IconButton } from "./icon-button.js";
+export { Input } from "./input.js";
+export { MultiSelect } from "./multi-select.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 { RangeSlider } from "./range-slider.js";
+export { RichTextEditor } from "./rich-text-editor.js";
+export { SearchInput } from "./search-input.js";
+export { Select } from "./select.js";
+export { Slider } from "./slider.js";
+export { Switch } from "./switch.js";
+export { TagsInput } from "./tags-input.js";
+export { Textarea } from "./textarea.js";
+export { TimePicker } from "./time-picker.js";
+export { ToggleButton } from "./toggle-button.js";

package/dist/esm/input.d.ts

@@ -0,0 +1,2 @@
+export * from './components/input/index';
+export { default } from './components/input/index';

package/dist/esm/input.js

@@ -0,0 +1,39 @@
+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;
+    const classes = className ? `${fieldControl({
+        size,
+        invalid: Boolean(error)
+    })} ${className}` : fieldControl({
+        size,
+        invalid: Boolean(error)
+    });
+    return /*#__PURE__*/ jsx(field, {
+        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
+        })
+    });
+});
+Input.displayName = 'Input';
+const input_Input = Input;
+const input = input_Input;
+export default input;
+export { input as Input };

package/dist/esm/multi-select.d.ts

@@ -0,0 +1,2 @@
+export * from './components/multi-select/index';
+export { default } from './components/multi-select/index';