@vinyasa/form 1.0.22 → 1.0.23

package/dist/esm/switch.js

@@ -1,36 +1 @@
-import "./switch.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { controlRow, controlLabel } from "./2995.js";
-import * as __rspack_external__radix_ui_react_switch_5e92b7ed from "@radix-ui/react-switch";
-var root = '_1u7tp1u0';
-var thumb = '_1u7tp1u1';
-const Switch = /*#__PURE__*/ forwardRef(({ label, id: idProp, className, ...rest }, ref)=>{
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
-    const classes = className ? `${root} ${className}` : root;
-    return /*#__PURE__*/ jsxs("div", {
-        className: controlRow,
-        children: [
-            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_switch_5e92b7ed.Root, {
-                ref: ref,
-                id: id,
-                className: classes,
-                ...rest,
-                children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_switch_5e92b7ed.Thumb, {
-                    className: thumb
-                })
-            }),
-            label ? /*#__PURE__*/ jsx("label", {
-                htmlFor: id,
-                className: controlLabel,
-                children: label
-            }) : null
-        ]
-    });
-});
-Switch.displayName = 'Switch';
-const switch_Switch = Switch;
-const components_switch = switch_Switch;
-export default components_switch;
-export { components_switch as Switch };
+export { Switch, SwitchThumb } from "./1485.js";

package/dist/esm/tags-input.js

@@ -1,18 +1,19 @@
 import "./tags-input.css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "@vinyasa/icons";
-import { forwardRef, useId, useState } from "react";
-import { field, describedByIds } from "./4557.js";
-import { fieldControl } from "./2995.js";
+import { forwardRef, useState } from "react";
+import { fieldControl, useResolvedFieldProps } from "./2315.js";
 import { chipRow, triggerBox, chip, chipRemove } from "./6720.js";
 var tagInput = '_1w3na0r0';
-const TagsInput = /*#__PURE__*/ forwardRef(({ value, defaultValue = [], onValueChange, placeholder, label, description, error, required, size, max, disabled, id: idProp }, ref)=>{
+const TagsInput = /*#__PURE__*/ forwardRef(({ value, defaultValue = [], onValueChange, placeholder, invalid, size, max, disabled, required, id: idProp }, ref)=>{
     const [internalValue, setInternalValue] = useState(defaultValue);
     const isControlled = void 0 !== value;
     const currentValue = isControlled ? value : internalValue;
     const [draft, setDraft] = useState('');
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid
+    });
     const setValue = (next)=>{
         if (!isControlled) setInternalValue(next);
         onValueChange?.(next);
@@ -37,59 +38,50 @@ const TagsInput = /*#__PURE__*/ forwardRef(({ value, defaultValue = [], onValueC
         }
         if ('Backspace' === event.key && '' === draft && currentValue.length > 0) removeTag(currentValue[currentValue.length - 1]);
     };
-    return /*#__PURE__*/ jsx(field, {
-        id: id,
-        label: label,
-        description: description,
-        error: error,
-        required: required,
-        children: /*#__PURE__*/ jsx("div", {
-            className: `${fieldControl({
-                size,
-                invalid: Boolean(error)
-            })} ${triggerBox}`,
-            onClick: (event)=>{
-                if (event.currentTarget === event.target) event.currentTarget.querySelector('input')?.focus();
-            },
-            children: /*#__PURE__*/ jsxs("span", {
-                className: chipRow,
-                children: [
-                    currentValue.map((tag)=>/*#__PURE__*/ jsxs("span", {
-                            className: chip,
-                            children: [
-                                tag,
-                                /*#__PURE__*/ jsx("button", {
-                                    type: "button",
-                                    className: chipRemove,
-                                    "aria-label": `Remove ${tag}`,
-                                    disabled: disabled,
-                                    onClick: ()=>{
-                                        removeTag(tag);
-                                    },
-                                    children: /*#__PURE__*/ jsx(XIcon, {})
-                                })
-                            ]
-                        }, tag)),
-                    /*#__PURE__*/ jsx("input", {
-                        ref: ref,
-                        id: id,
-                        className: tagInput,
-                        value: draft,
-                        placeholder: 0 === currentValue.length ? placeholder : void 0,
-                        disabled: disabled,
-                        required: required && 0 === currentValue.length,
-                        "aria-describedby": describedByIds(id, {
-                            description,
-                            error
-                        }),
-                        onChange: (event)=>{
-                            setDraft(event.target.value);
-                        },
-                        onKeyDown: handleKeyDown,
-                        onBlur: commitDraft
-                    })
-                ]
-            })
+    return /*#__PURE__*/ jsx("div", {
+        className: `${fieldControl({
+            size,
+            invalid: isInvalid
+        })} ${triggerBox}`,
+        onClick: (event)=>{
+            if (event.currentTarget === event.target) event.currentTarget.querySelector('input')?.focus();
+        },
+        children: /*#__PURE__*/ jsxs("span", {
+            className: chipRow,
+            children: [
+                currentValue.map((tag)=>/*#__PURE__*/ jsxs("span", {
+                        className: chip,
+                        children: [
+                            tag,
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: chipRemove,
+                                "aria-label": `Remove ${tag}`,
+                                disabled: disabled,
+                                onClick: ()=>{
+                                    removeTag(tag);
+                                },
+                                children: /*#__PURE__*/ jsx(XIcon, {})
+                            })
+                        ]
+                    }, tag)),
+                /*#__PURE__*/ jsx("input", {
+                    ref: ref,
+                    id: id,
+                    className: tagInput,
+                    value: draft,
+                    placeholder: 0 === currentValue.length ? placeholder : void 0,
+                    disabled: disabled,
+                    required: required && 0 === currentValue.length,
+                    "aria-invalid": isInvalid,
+                    "aria-describedby": describedBy,
+                    onChange: (event)=>{
+                        setDraft(event.target.value);
+                    },
+                    onKeyDown: handleKeyDown,
+                    onBlur: commitDraft
+                })
+            ]
         })
     });
 });

package/dist/esm/textarea.js

@@ -1,21 +1,23 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useId, useRef } from "react";
-import { fieldControl } from "./2995.js";
-import { field, describedByIds } from "./4557.js";
+import { forwardRef, useRef } from "react";
+import { fieldControl, useResolvedFieldProps } from "./2315.js";
 const mergeRefs = (...refs)=>(node)=>{
         for (const ref of refs)if ('function' == typeof ref) ref(node);
         else if (ref) ref.current = node;
     };
-const Textarea = /*#__PURE__*/ forwardRef(({ label, description, error, required, size, autoResize = false, onChange, id: idProp, className, style, ...rest }, ref)=>{
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
+const Textarea = /*#__PURE__*/ forwardRef(({ size, invalid, autoResize = false, onChange, id: idProp, className, style, 'aria-describedby': ariaDescribedBy, ...rest }, ref)=>{
+    const { id, invalid: isInvalid, describedBy } = useResolvedFieldProps({
+        id: idProp,
+        invalid,
+        describedBy: ariaDescribedBy
+    });
     const innerRef = useRef(null);
     const classes = className ? `${fieldControl({
         size,
-        invalid: Boolean(error)
+        invalid: isInvalid
     })} ${className}` : fieldControl({
         size,
-        invalid: Boolean(error)
+        invalid: isInvalid
     });
     const resize = (element)=>{
         element.style.height = 'auto';
@@ -25,30 +27,19 @@ const Textarea = /*#__PURE__*/ forwardRef(({ label, description, error, required
         if (autoResize) resize(event.currentTarget);
         onChange?.(event);
     };
-    return /*#__PURE__*/ jsx(field, {
+    return /*#__PURE__*/ jsx("textarea", {
+        ref: mergeRefs(ref, innerRef),
         id: id,
-        label: label,
-        description: description,
-        error: error,
-        required: required,
-        children: /*#__PURE__*/ jsx("textarea", {
-            ref: mergeRefs(ref, innerRef),
-            id: id,
-            className: classes,
-            required: required,
-            "aria-invalid": error ? true : void 0,
-            "aria-describedby": describedByIds(id, {
-                description,
-                error
-            }),
-            onChange: handleChange,
-            style: autoResize ? {
-                resize: 'none',
-                overflow: 'hidden',
-                ...style
-            } : style,
-            ...rest
-        })
+        className: classes,
+        "aria-invalid": isInvalid,
+        "aria-describedby": describedBy,
+        onChange: handleChange,
+        style: autoResize ? {
+            resize: 'none',
+            overflow: 'hidden',
+            ...style
+        } : style,
+        ...rest
     });
 });
 Textarea.displayName = 'Textarea';

package/dist/esm/time-picker.js

@@ -1,137 +1 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, ClockIcon, SearchIcon } from "@vinyasa/icons";
-import { Command } from "cmdk";
-import { format, parse } from "date-fns";
-import { useId, useMemo, useState } from "react";
-import { field, describedByIds } from "./4557.js";
-import { fieldControl } from "./2995.js";
-import { triggerText, empty, triggerIcon, searchIcon, placeholder as selectPopover_css_placeholder, content, searchInput, item, itemIndicator, searchWrapper, trigger as selectPopover_css_trigger, list } from "./6720.js";
-import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
-const REFERENCE_DATE = new Date(2000, 0, 1);
-const parseTime = (time)=>parse(time, 'HH:mm', REFERENCE_DATE);
-const generateTimeOptions = (stepMinutes)=>{
-    const options = [];
-    for(let minutes = 0; minutes < 1440; minutes += stepMinutes){
-        const hours = Math.floor(minutes / 60);
-        const mins = minutes % 60;
-        options.push(`${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`);
-    }
-    return options;
-};
-const TimePicker = ({ value, defaultValue, onValueChange, placeholder = 'Select a time', timeFormat = 'h:mm a', stepMinutes = 30, 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 [search, setSearch] = useState('');
-    const generatedId = useId();
-    const id = idProp ?? generatedId;
-    const options = useMemo(()=>generateTimeOptions(stepMinutes), [
-        stepMinutes
-    ]);
-    const handleSelect = (time)=>{
-        if (!isControlled) setInternalValue(time);
-        onValueChange?.(time);
-        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: (next)=>{
-                setOpen(next);
-                if (!next) setSearch('');
-            },
-            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)
-                        })} ${selectPopover_css_trigger}`,
-                        "aria-describedby": describedByIds(id, {
-                            description,
-                            error
-                        }),
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: currentValue ? triggerText : `${triggerText} ${selectPopover_css_placeholder}`,
-                                children: currentValue ? format(parseTime(currentValue), timeFormat) : placeholder
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: triggerIcon,
-                                "aria-hidden": "true",
-                                children: /*#__PURE__*/ jsx(ClockIcon, {})
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
-                    className: content,
-                    align: "start",
-                    sideOffset: 4,
-                    children: /*#__PURE__*/ jsxs(Command, {
-                        loop: true,
-                        label: 'string' == typeof label ? label : 'Search times',
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: searchWrapper,
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: searchIcon,
-                                        "aria-hidden": "true",
-                                        children: /*#__PURE__*/ jsx(SearchIcon, {})
-                                    }),
-                                    /*#__PURE__*/ jsx(Command.Input, {
-                                        autoFocus: true,
-                                        value: search,
-                                        onValueChange: setSearch,
-                                        placeholder: "Search…",
-                                        className: searchInput
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs(Command.List, {
-                                className: list,
-                                children: [
-                                    /*#__PURE__*/ jsx(Command.Empty, {
-                                        className: empty,
-                                        children: "No matching times."
-                                    }),
-                                    options.map((time)=>/*#__PURE__*/ jsxs(Command.Item, {
-                                            value: format(parseTime(time), timeFormat),
-                                            onSelect: ()=>{
-                                                handleSelect(time);
-                                            },
-                                            className: item,
-                                            "data-selected": time === currentValue,
-                                            children: [
-                                                format(parseTime(time), timeFormat),
-                                                time === currentValue ? /*#__PURE__*/ jsx("span", {
-                                                    className: itemIndicator,
-                                                    children: /*#__PURE__*/ jsx(CheckIcon, {})
-                                                }) : null
-                                            ]
-                                        }, time))
-                                ]
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-    });
-};
-TimePicker.displayName = 'TimePicker';
-const time_picker_TimePicker = TimePicker;
-const time_picker = time_picker_TimePicker;
-export default time_picker;
-export { time_picker as TimePicker };
+export { TimePicker, TimePickerContent, TimePickerIcon, TimePickerTrigger, TimePickerValue } from "./7800.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/form",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -187,6 +187,13 @@
       "default": "./dist/esm/dropzone.js"
     },
     "./dropzone/style.css": "./dist/esm/dropzone.css",
+    "./field": {
+      "types": "./dist/esm/field.d.ts",
+      "import": "./dist/esm/field.js",
+      "require": "./dist/cjs/field.cjs",
+      "default": "./dist/esm/field.js"
+    },
+    "./field/style.css": "./dist/esm/field.css",
     "./rich-text-editor": {
       "types": "./dist/esm/rich-text-editor.d.ts",
       "import": "./dist/esm/rich-text-editor.js",
@@ -200,10 +207,10 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@vinyasa/button": "^1.0.22",
-    "@vinyasa/layout": "^1.0.22",
-    "@vinyasa/icons": "^1.0.22",
-    "@vinyasa/tokens": "^1.0.22"
+    "@vinyasa/button": "^1.0.23",
+    "@vinyasa/icons": "^1.0.23",
+    "@vinyasa/layout": "^1.0.23",
+    "@vinyasa/tokens": "^1.0.23"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.11",
@@ -211,6 +218,7 @@
     "@radix-ui/react-radio-group": "^1.4.7",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-switch": "^1.3.7",
     "@radix-ui/react-toggle": "^1.1.18",
     "@tiptap/core": "^3.31.3",
@@ -235,10 +243,11 @@
     "@vanilla-extract/vite-plugin": "^5.2.3",
     "@vanilla-extract/webpack-plugin": "^2.3.27",
     "typescript": "^5.7.3",
-    "@vinyasa/icons": "1.0.22",
-    "@vinyasa/layout": "1.0.22",
-    "@vinyasa/tokens": "1.0.22",
-    "@vinyasa/button": "1.0.22"
+    "@vinyasa/layout": "1.0.23",
+    "@vinyasa/button": "1.0.23",
+    "@vinyasa/icons": "1.0.23",
+    "@vinyasa/tokens": "1.0.23",
+    "@vinyasa/typography": "1.0.23"
   },
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",

package/dist/esm/2942.js

@@ -1,13 +0,0 @@
-import "./2942.css";
-var fileList = '_3ltn2y2';
-var fileListWrapper = '_3ltn2y1';
-var fileMeta = '_3ltn2y7';
-var fileName = '_3ltn2y4';
-var fileNameIcon = '_3ltn2y5';
-var fileNameText = '_3ltn2y6';
-var fileRemove = '_3ltn2y9';
-var fileRow = '_3ltn2y3';
-var fileSize = '_3ltn2y8';
-var rejectionText = '_3ltn2ya';
-var trigger = '_3ltn2y0';
-export { fileList, fileListWrapper, fileMeta, fileName, fileNameIcon, fileNameText, fileRemove, fileRow, fileSize, rejectionText, trigger };

package/dist/esm/4557.js

@@ -1,39 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { label as field_css_label, errorText, descriptionText, requiredMark } from "./2995.js";
-const describedByIds = (id, { description, error })=>{
-    const ids = [];
-    if (description) ids.push(`${id}-description`);
-    if (error) ids.push(`${id}-error`);
-    return ids.length > 0 ? ids.join(' ') : void 0;
-};
-const FieldChrome = ({ id, label, description, error, required, children, disableLabelFor = false })=>/*#__PURE__*/ jsxs("div", {
-        children: [
-            label ? /*#__PURE__*/ jsxs("label", {
-                htmlFor: disableLabelFor ? void 0 : id,
-                id: `${id}-label`,
-                className: field_css_label,
-                children: [
-                    label,
-                    required ? /*#__PURE__*/ jsx("span", {
-                        className: requiredMark,
-                        "aria-hidden": "true",
-                        children: "*"
-                    }) : null
-                ]
-            }) : null,
-            children,
-            description ? /*#__PURE__*/ jsx("p", {
-                id: `${id}-description`,
-                className: descriptionText,
-                children: description
-            }) : null,
-            error ? /*#__PURE__*/ jsx("p", {
-                id: `${id}-error`,
-                className: errorText,
-                role: "alert",
-                children: error
-            }) : null
-        ]
-    });
-const field = FieldChrome;
-export { describedByIds, field };

package/dist/esm/dropzone.css

@@ -1,43 +0,0 @@
-.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);
-}
-