@vinyasa/form 1.0.22

package/README.md

@@ -0,0 +1,188 @@
+# @vinyasa/form
+
+All 25 form controls in the "Form Components" category, delivered in three staged phases:
+
+- **Phase 1**: Icon Button, Toggle Button, Input, Search Input, Password Input, Number Input, Textarea, Checkbox, Radio Group, Switch.
+- **Phase 2**: Slider, Range Slider, OTP Input, Select, Combobox, Autocomplete, Multi Select, Tags Input.
+- **Phase 3** (this round): Date Picker, Time Picker, Color Picker, File Upload, Dropzone, Rich Text Editor.
+
+## Installation
+
+```bash
+pnpm add @vinyasa/form @vinyasa/layout @vinyasa/icons @vinyasa/button @vinyasa/tokens react react-dom
+```
+
+`@vinyasa/button`'s `Button` is composed directly by Icon Button and Toggle Button rather than reimplemented. Every interactive control wraps an established library rather than hand-rolling keyboard/ARIA/drag behavior — all regular dependencies of this package, not something consumers install themselves:
+
+| Component(s)                                 | Library                                                             |
+| -------------------------------------------- | ------------------------------------------------------------------- |
+| Checkbox, Radio Group, Switch, Toggle Button | `@radix-ui/react-checkbox` / `-radio-group` / `-switch` / `-toggle` |
+| Slider, Range Slider                         | `@radix-ui/react-slider`                                            |
+| Select                                       | `@radix-ui/react-select`                                            |
+| Combobox, Autocomplete, Multi Select         | `@radix-ui/react-popover` + `cmdk`                                  |
+| OTP Input                                    | `input-otp`                                                         |
+| Date Picker                                  | `react-day-picker` + `@radix-ui/react-popover` + `date-fns`         |
+| Color Picker                                 | `react-colorful` + `@radix-ui/react-popover`                        |
+| File Upload, Dropzone                        | `react-dropzone`                                                    |
+| Rich Text Editor                             | `@tiptap/react` + `@tiptap/starter-kit`                             |
+
+Tags Input has no dropdown, so it needs neither Popover nor cmdk — it's a plain chip-token text field. Time Picker wraps a native `<input type="time">` rather than a library — the browser already provides an accessible, localized time-entry UI for free.
+
+## New tokens this package introduces
+
+None across all three phases. Every control's chrome (border, focus ring, invalid/disabled state, floating-content elevation) reuses existing tokens.
+
+## New icons this package needed
+
+Added to `@vinyasa/icons` across the three phases: `CalendarIcon`, `ClockIcon`, `PaletteIcon`, `PaperclipIcon`, `UploadIcon` (Phase 1, used by Phase 3's pickers/uploaders) and `BoldIcon`, `ItalicIcon`, `ListIcon`, `ListOrderedIcon`, `QuoteIcon`, `RedoIcon`, `StrikethroughIcon`, `UndoIcon` (Phase 3, for Rich Text Editor's toolbar).
+
+## Shared internal chrome
+
+- `src/field.tsx` / `src/field.css.ts` — label/description/error/required/focus-ring/invalid/disabled layout shared by every text-like control. Not a public component — the same "shared internal system" pattern `@vinyasa/feedback`'s `status.ts` used.
+- `src/selectPopover.css.ts` — floating-listbox chrome (content/list/item/chip styles) shared by Combobox, Autocomplete, and Multi Select, the three "type to filter a list" patterns built on Popover + cmdk. Select, Date Picker, and Color Picker each have their own `<Component>.css.ts` popover-content styling instead, since their underlying libraries (`@radix-ui/react-select`, `react-day-picker`, `react-colorful`) have different part structures — Date Picker's content, in particular, deliberately isn't width-constrained to its trigger the way selectPopover's is, since a calendar has its own natural size.
+
+**A load-bearing fix, not just a style choice**: every popover-based component (Select, Combobox, Autocomplete, Multi Select, Date Picker, Color Picker) deliberately renders its floating content **without** `Portal`. `VinyasaProvider` injects theme CSS custom properties as an inline style on its own wrapper element, not `:root` — anything rendered via `createPortal` to `document.body` (which is what those Portal components do by default) falls outside that subtree, and every `var(--vinyasa-*)` token resolves to nothing (the exact bug `@vinyasa/feedback`'s `Toaster` hit and fixed the same way). Radix's own floating-position calculation still works correctly without the portal; only the DOM location changes. Verified in a real browser for each of these six components — the popover content genuinely renders with real, non-transparent styling, not just "doesn't crash."
+
+**A cmdk gotcha worth knowing if you touch Combobox/Autocomplete**: `Command.Input` always overwrites any `id` prop you pass with its own internally-generated one, and gets its accessible name from `<Command label="...">` (wired via `aria-labelledby` to a hidden label cmdk renders itself) — not from `FieldChrome`'s own visible `<label htmlFor>`. `FieldChrome` has a `disableLabelFor` escape hatch for exactly this (omits the now-dangling `htmlFor`, which would otherwise silently fail to focus anything when a real user clicks the visible label). The same underlying issue — a trigger's accessible name coming from its `<label>`, not its own visible text content — is why Date Picker's, Color Picker's, and File Upload's own trigger buttons show their current value/state as plain rendered content rather than as part of the button's accessible name; tests and consumers alike should query these by their `label` text, not by the formatted date/hex/filename shown inside.
+
+**react-day-picker is styled entirely through its own `classNames` prop** (keyed by its `UI`/`DayFlag`/`SelectionState` enums) rather than its default stylesheet — the same "headless, theme it yourself" contract already used for Select/Combobox's underlying libraries. `DatePicker` also passes `defaultMonth={currentValue}` so reopening the popover on an already-selected date shows that date's month, not always today's — react-day-picker's own default otherwise anchors to today's month regardless of the current selection.
+
+## Usage
+
+### Icon Button
+
+```tsx
+<IconButton aria-label="Delete" icon={<TrashIcon />} variant="ghost" />
+```
+
+`aria-label` is a required prop — an icon-only button has no other accessible name.
+
+### Toggle Button
+
+```tsx
+<ToggleButton pressed={bold} onPressedChange={setBold}>
+	<BoldIcon />
+</ToggleButton>
+```
+
+Wraps Radix's `Toggle` with `asChild`, passing `Button` as the child — Radix owns press/keyboard/`aria-pressed`, Button owns the visual chrome. `pressedVariant`/`unpressedVariant` (default `'primary'`/`'outline'`) pick which Button `variant` renders for each state.
+
+### Input, Search Input, Password Input, Number Input, Textarea
+
+```tsx
+<Input label="Email" error="Enter a valid email address." />
+<SearchInput label="Search" value={query} onChange={handleChange} onClear={() => setQuery('')} />
+<PasswordInput label="Password" />
+<NumberInput label="Quantity" min={0} max={10} />
+<Textarea label="Bio" autoResize />
+```
+
+### Checkbox, Switch, Radio Group
+
+```tsx
+<Checkbox label="Accept terms" checked={accepted} onCheckedChange={setAccepted} />
+<Switch label="Enable notifications" defaultChecked />
+<RadioGroup
+	options={[
+		{ value: 'sm', label: 'Small' },
+		{ value: 'md', label: 'Medium' },
+	]}
+	value={size}
+	onValueChange={setSize}
+/>
+```
+
+### Slider, Range Slider
+
+```tsx
+<Slider label="Volume" value={[volume]} onValueChange={([v]) => setVolume(v)} />
+<RangeSlider value={range} onValueChange={setRange} minLabel="Low" maxLabel="High" />
+```
+
+`RangeSlider` is a convenience wrapper around `Slider`, not a separate implementation — Radix's Slider already supports any number of thumbs via a `value` array; `RangeSlider` just fixes it at two with distinct min/max accessible labels.
+
+### OTP Input
+
+```tsx
+<OtpInput label="Verification code" length={6} onComplete={handleSubmit} />
+```
+
+### Select
+
+```tsx
+<Select
+	label="Size"
+	options={[{ value: 'md', label: 'Medium' }]}
+	placeholder="Choose a size"
+	value={size}
+	onValueChange={setSize}
+/>
+```
+
+### Combobox, Autocomplete
+
+```tsx
+<Combobox label="Framework" options={frameworkOptions} value={framework} onValueChange={setFramework} />
+<Autocomplete label="State" suggestions={states} value={state} onValueChange={setState} />
+```
+
+The entire difference between the two: Combobox only ever commits one of its own `options`; Autocomplete commits whatever text is in the field, with `suggestions` as a shortcut for filling it in rather than a constraint on it.
+
+### Multi Select
+
+```tsx
+<MultiSelect
+	label="Favorite colors"
+	options={colorOptions}
+	value={colors}
+	onValueChange={setColors}
+/>
+```
+
+Selected values render as removable chips in the trigger; picking an item in the popover toggles membership without closing (unlike Combobox, which closes on selection).
+
+### Tags Input
+
+```tsx
+<TagsInput label="Skills" value={skills} onValueChange={setSkills} max={10} />
+```
+
+Free-text tokens — press Enter or comma to commit the current draft as a tag, Backspace on an empty draft removes the last one.
+
+### Date Picker, Time Picker
+
+```tsx
+<DatePicker label="Date of birth" value={date} onValueChange={setDate} />
+<TimePicker label="Meeting time" value={time} onChange={handleChange} />
+```
+
+`dateFormat` (a `date-fns` format string, default `'PPP'`) controls how the selected date renders on the trigger.
+
+### Color Picker
+
+```tsx
+<ColorPicker label="Brand color" value={color} onValueChange={setColor} />
+```
+
+A hex-only picker (`react-colorful`'s `HexColorPicker` + `HexColorInput`) — the trigger shows a swatch plus the current hex value, and the popover's text input keeps typed hex codes in sync with the visual picker.
+
+### File Upload, Dropzone
+
+```tsx
+<FileUpload label="Attachments" value={files} onValueChange={setFiles} accept={{ 'application/pdf': ['.pdf'] }} />
+<Dropzone label="Attachments" value={files} onValueChange={setFiles} maxSize={5 * 1024 * 1024} />
+```
+
+Both wrap the same `useDropzone` hook and share their file-list styling (`file-upload/FileUpload.css.ts`) — File Upload is a compact button trigger, Dropzone a full drag-and-drop area; pick whichever chrome fits the layout.
+
+### Rich Text Editor
+
+```tsx
+<RichTextEditor label="Description" value={html} onValueChange={setHtml} />
+```
+
+Wraps Tiptap (`StarterKit`) with a toolbar built from this package's own Toggle Button (bold/italic/strikethrough/lists/blockquote/undo/redo). `value`/`onValueChange` are HTML strings; an externally-set `value` is pushed into the editor via `setContent` only when it actually differs from the editor's current content, so it doesn't fight the user's own typing.
+
+## Subpath imports
+
+Every component has its own subpath export (e.g. `@vinyasa/form/date-picker`) alongside the root `@vinyasa/form` entry, for consumers who want to import a single component without pulling in the rest.

package/dist/cjs/autocomplete.cjs

@@ -0,0 +1,344 @@
+"use strict";
+var __webpack_modules__ = {
+    400 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        function toPrimitive(t, r) {
+            if ("object" != typeof t || !t) return t;
+            var e = t[Symbol.toPrimitive];
+            if (void 0 !== e) {
+                var i = e.call(t, r || "default");
+                if ("object" != typeof i) return i;
+                throw new TypeError("@@toPrimitive must return a primitive value.");
+            }
+            return ("string" === r ? String : Number)(t);
+        }
+        function toPropertyKey(t) {
+            var i = toPrimitive(t, "string");
+            return "symbol" == typeof i ? i : String(i);
+        }
+        function _defineProperty(obj, key, value) {
+            key = toPropertyKey(key);
+            if (key in obj) Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+            else obj[key] = value;
+            return obj;
+        }
+        function ownKeys(e, r) {
+            var t = Object.keys(e);
+            if (Object.getOwnPropertySymbols) {
+                var o = Object.getOwnPropertySymbols(e);
+                r && (o = o.filter(function(r) {
+                    return Object.getOwnPropertyDescriptor(e, r).enumerable;
+                })), t.push.apply(t, o);
+            }
+            return t;
+        }
+        function _objectSpread2(e) {
+            for(var r = 1; r < arguments.length; r++){
+                var t = null != arguments[r] ? arguments[r] : {};
+                r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+                    _defineProperty(e, r, t[r]);
+                }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+                });
+            }
+            return e;
+        }
+        function mapValues(input, fn) {
+            var result = {};
+            for(var _key in input)result[_key] = fn(input[_key], _key);
+            return result;
+        }
+        var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
+            for (var key of Object.keys(compoundCheck)){
+                var _selections$key;
+                if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
+            }
+            return true;
+        };
+        var createRuntimeFn = (config)=>{
+            var runtimeFn = (options)=>{
+                var className = config.defaultClassName;
+                var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+                for(var variantName in selections){
+                    var _selections$variantNa;
+                    var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
+                    if (null != variantSelection) {
+                        var selection = variantSelection;
+                        if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
+                        var selectionClassName = config.variantClassNames[variantName][selection];
+                        if (selectionClassName) className += ' ' + selectionClassName;
+                    }
+                }
+                for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
+                return className;
+            };
+            runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
+            runtimeFn.classNames = {
+                get base () {
+                    return config.defaultClassName.split(' ')[0];
+                },
+                get variants () {
+                    return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
+                }
+            };
+            return runtimeFn;
+        };
+        __webpack_require__.d(__webpack_exports__, {
+            c: ()=>createRuntimeFn
+        });
+    },
+    891 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            ij: ()=>descriptionText,
+            kc: ()=>errorText,
+            Ij: ()=>fieldControl,
+            Pf: ()=>label,
+            Zy: ()=>requiredMark
+        });
+        var createRuntimeFn_62c9670f_esm = __webpack_require__(400);
+        var descriptionText = 'sbqkrxd';
+        var errorText = 'sbqkrxe';
+        var fieldControl = (0, createRuntimeFn_62c9670f_esm.c)({
+            defaultClassName: 'sbqkrx0',
+            variantClassNames: {
+                size: {
+                    sm: 'sbqkrx1',
+                    md: 'sbqkrx2',
+                    lg: 'sbqkrx3'
+                },
+                invalid: {
+                    true: 'sbqkrx4'
+                }
+            },
+            defaultVariants: {
+                size: 'md'
+            },
+            compoundVariants: []
+        });
+        var label = 'sbqkrxb';
+        var requiredMark = 'sbqkrxc';
+    },
+    629 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__.d(__webpack_exports__, {
+            Qs: ()=>content,
+            Ie: ()=>empty,
+            AS: ()=>item,
+            p_: ()=>list
+        });
+        var content = '_1u69cbs0';
+        var empty = '_1u69cbs4';
+        var item = '_1u69cbs2';
+        var list = '_1u69cbs1';
+    },
+    140 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        var react_jsx_runtime__rspack_import_0 = __webpack_require__(732);
+        var _field_css__rspack_import_1 = __webpack_require__(891);
+        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__*/ (0, react_jsx_runtime__rspack_import_0.jsxs)("div", {
+                children: [
+                    label ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsxs)("label", {
+                        htmlFor: disableLabelFor ? void 0 : id,
+                        id: `${id}-label`,
+                        className: _field_css__rspack_import_1.Pf,
+                        children: [
+                            label,
+                            required ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("span", {
+                                className: _field_css__rspack_import_1.Zy,
+                                "aria-hidden": "true",
+                                children: "*"
+                            }) : null
+                        ]
+                    }) : null,
+                    children,
+                    description ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("p", {
+                        id: `${id}-description`,
+                        className: _field_css__rspack_import_1.ij,
+                        children: description
+                    }) : null,
+                    error ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("p", {
+                        id: `${id}-error`,
+                        className: _field_css__rspack_import_1.kc,
+                        role: "alert",
+                        children: error
+                    }) : null
+                ]
+            });
+        const __rspack_default_export = FieldChrome;
+        __webpack_require__.d(__webpack_exports__, {}, {
+            A: __rspack_default_export,
+            z: describedByIds
+        });
+    },
+    283 (module) {
+        module.exports = require("@radix-ui/react-popover");
+    },
+    817 (module) {
+        module.exports = require("cmdk");
+    },
+    15 (module) {
+        module.exports = require("react");
+    },
+    732 (module) {
+        module.exports = require("react/jsx-runtime");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        default: ()=>autocomplete
+    });
+    var jsx_runtime_ = __webpack_require__(732);
+    var react_popover_ = __webpack_require__(283);
+    var external_cmdk_ = __webpack_require__(817);
+    var external_react_ = __webpack_require__(15);
+    var field = __webpack_require__(140);
+    var field_css = __webpack_require__(891);
+    var selectPopover_css = __webpack_require__(629);
+    const Autocomplete = ({ suggestions, value, defaultValue = '', onValueChange, placeholder, label, description, error, required, size, emptyMessage = 'No suggestions.', id: idProp })=>{
+        const [internalValue, setInternalValue] = (0, external_react_.useState)(defaultValue);
+        const isControlled = void 0 !== value;
+        const currentValue = isControlled ? value : internalValue;
+        const [open, setOpen] = (0, external_react_.useState)(false);
+        const generatedId = (0, external_react_.useId)();
+        const id = null != idProp ? idProp : generatedId;
+        const setValue = (next)=>{
+            if (!isControlled) setInternalValue(next);
+            null == onValueChange || onValueChange(next);
+        };
+        return /*#__PURE__*/ (0, jsx_runtime_.jsx)(field.A, {
+            id: id,
+            label: label,
+            description: description,
+            error: error,
+            required: required,
+            disableLabelFor: true,
+            children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(external_cmdk_.Command, {
+                loop: true,
+                shouldFilter: true,
+                label: 'string' == typeof label ? label : void 0,
+                children: /*#__PURE__*/ (0, jsx_runtime_.jsxs)(react_popover_.Root, {
+                    open: open,
+                    onOpenChange: setOpen,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_.jsx)(react_popover_.Trigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(external_cmdk_.Command.Input, {
+                                id: id,
+                                value: currentValue,
+                                onClick: (event)=>{
+                                    event.preventDefault();
+                                },
+                                onValueChange: (next)=>{
+                                    setValue(next);
+                                    setOpen(true);
+                                },
+                                onFocus: ()=>{
+                                    setOpen(true);
+                                },
+                                placeholder: placeholder,
+                                className: (0, field_css.Ij)({
+                                    size,
+                                    invalid: Boolean(error)
+                                }),
+                                "aria-describedby": (0, field.z)(id, {
+                                    description,
+                                    error
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_.jsx)(react_popover_.Content, {
+                            className: selectPopover_css.Qs,
+                            align: "start",
+                            sideOffset: 4,
+                            onOpenAutoFocus: (event)=>{
+                                event.preventDefault();
+                            },
+                            children: /*#__PURE__*/ (0, jsx_runtime_.jsxs)(external_cmdk_.Command.List, {
+                                className: selectPopover_css.p_,
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_.jsx)(external_cmdk_.Command.Empty, {
+                                        className: selectPopover_css.Ie,
+                                        children: emptyMessage
+                                    }),
+                                    suggestions.map((suggestion)=>/*#__PURE__*/ (0, jsx_runtime_.jsx)(external_cmdk_.Command.Item, {
+                                            value: suggestion,
+                                            onSelect: ()=>{
+                                                setValue(suggestion);
+                                                setOpen(false);
+                                            },
+                                            className: selectPopover_css.AS,
+                                            children: suggestion
+                                        }, suggestion))
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        });
+    };
+    Autocomplete.displayName = 'Autocomplete';
+    const autocomplete_Autocomplete = Autocomplete;
+    const autocomplete = autocomplete_Autocomplete;
+})();
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});