@vinyasa/form 1.0.22 → 1.0.23

package/dist/cjs/tags-input.cjs

@@ -1,5 +1,7 @@
 "use strict";
 var __webpack_modules__ = {
+    51 () {},
+    395 () {},
     400 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
         function toPrimitive(t, r) {
             if ("object" != typeof t || !t) return t;
@@ -91,18 +93,12 @@ var __webpack_modules__ = {
             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);
+    318 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__(51);
+        var _vanilla_extract_recipes_createRuntimeFn__rspack_import_1 = __webpack_require__(400);
         var descriptionText = 'sbqkrxd';
         var errorText = 'sbqkrxe';
-        var fieldControl = (0, createRuntimeFn_62c9670f_esm.c)({
+        var fieldControl = (0, _vanilla_extract_recipes_createRuntimeFn__rspack_import_1.c)({
             defaultClassName: 'sbqkrx0',
             variantClassNames: {
                 size: {
@@ -121,63 +117,225 @@ var __webpack_modules__ = {
         });
         var label = 'sbqkrxb';
         var requiredMark = 'sbqkrxc';
-    },
-    629 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
-            jw: ()=>chip,
-            lv: ()=>chipRemove,
-            BQ: ()=>chipRow,
-            I3: ()=>triggerBox
+            Ij: ()=>fieldControl,
+            Pf: ()=>label,
+            Zy: ()=>requiredMark,
+            ij: ()=>descriptionText,
+            kc: ()=>errorText
         });
+    },
+    811 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        __webpack_require__(395);
         var chip = '_1u69cbse';
         var chipRemove = '_1u69cbsg';
         var chipRow = '_1u69cbsd';
         var triggerBox = '_1u69cbsc';
+        __webpack_require__.d(__webpack_exports__, {
+            BQ: ()=>chipRow,
+            I3: ()=>triggerBox,
+            jw: ()=>chip,
+            lv: ()=>chipRemove
+        });
     },
-    140 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+    598 (__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;
+        var _radix_ui_react_slot__rspack_import_1 = __webpack_require__(922);
+        var react__rspack_import_2 = __webpack_require__(15);
+        var _field_css__rspack_import_3 = __webpack_require__(318);
+        function _define_property(obj, key, value) {
+            if (key in obj) Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+            else obj[key] = value;
+            return obj;
+        }
+        function _object_spread(target) {
+            for(var i = 1; i < arguments.length; i++){
+                var source = null != arguments[i] ? arguments[i] : {};
+                var ownKeys = Object.keys(source);
+                if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                    return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+                }));
+                ownKeys.forEach(function(key) {
+                    _define_property(target, key, source[key]);
+                });
+            }
+            return target;
+        }
+        function ownKeys(object, enumerableOnly) {
+            var keys = Object.keys(object);
+            if (Object.getOwnPropertySymbols) {
+                var symbols = Object.getOwnPropertySymbols(object);
+                if (enumerableOnly) symbols = symbols.filter(function(sym) {
+                    return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+                });
+                keys.push.apply(keys, symbols);
+            }
+            return keys;
+        }
+        function _object_spread_props(target, source) {
+            source = null != source ? source : {};
+            if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+            else ownKeys(Object(source)).forEach(function(key) {
+                Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+            });
+            return target;
+        }
+        function _object_without_properties(source, excluded) {
+            if (null == source) return {};
+            var target = {}, sourceKeys, key, i;
+            if ("u" > typeof Reflect && Reflect.ownKeys) {
+                sourceKeys = Reflect.ownKeys(Object(source));
+                for(i = 0; i < sourceKeys.length; i++){
+                    key = sourceKeys[i];
+                    if (!(excluded.indexOf(key) >= 0)) {
+                        if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                    }
+                }
+                return target;
+            }
+            target = _object_without_properties_loose(source, excluded);
+            if (Object.getOwnPropertySymbols) {
+                sourceKeys = Object.getOwnPropertySymbols(source);
+                for(i = 0; i < sourceKeys.length; i++){
+                    key = sourceKeys[i];
+                    if (!(excluded.indexOf(key) >= 0)) {
+                        if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                    }
+                }
+            }
+            return target;
+        }
+        function _object_without_properties_loose(source, excluded) {
+            if (null == source) return {};
+            var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+            for(i = 0; i < sourceKeys.length; i++){
+                key = sourceKeys[i];
+                if (!(excluded.indexOf(key) >= 0)) {
+                    if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+                }
+            }
+            return target;
+        }
+        const FieldContext = /*#__PURE__*/ (0, react__rspack_import_2.createContext)(null);
+        const useFieldContext = ()=>(0, react__rspack_import_2.useContext)(FieldContext);
+        const useResolvedFieldProps = (props)=>{
+            var _ref, _props_id, _ref1, _props_invalid, _props_describedBy;
+            const context = useFieldContext();
+            const generatedId = (0, react__rspack_import_2.useId)();
+            return {
+                id: null != (_ref = null != (_props_id = props.id) ? _props_id : null == context ? void 0 : context.id) ? _ref : generatedId,
+                invalid: null != (_ref1 = null != (_props_invalid = props.invalid) ? _props_invalid : null == context ? void 0 : context.invalid) ? _ref1 : false,
+                describedBy: null != (_props_describedBy = props.describedBy) ? _props_describedBy : null == context ? void 0 : context.describedBy
+            };
+        };
+        const Field = (_0)=>{
+            let { invalid = false, children } = _0, rest = _object_without_properties(_0, [
+                "invalid",
+                "children"
+            ]);
+            const generatedId = (0, react__rspack_import_2.useId)();
+            const descriptionId = `${generatedId}-description`;
+            const errorId = `${generatedId}-error`;
+            const labelId = `${generatedId}-label`;
+            const directChildren = react__rspack_import_2.Children.toArray(children).filter(react__rspack_import_2.isValidElement);
+            const describedByIds = directChildren.reduce((ids, child)=>{
+                if (child.type === FieldDescription) ids.push(descriptionId);
+                if (child.type === FieldError) ids.push(errorId);
+                return ids;
+            }, []);
+            const labelChild = directChildren.find((child)=>child.type === FieldLabel);
+            const labelChildText = labelChild && 'string' == typeof labelChild.props.children ? labelChild.props.children : void 0;
+            const value = {
+                id: generatedId,
+                descriptionId,
+                errorId,
+                describedBy: describedByIds.length > 0 ? describedByIds.join(' ') : void 0,
+                invalid,
+                labelId: labelChild ? labelId : void 0,
+                labelText: labelChildText
+            };
+            return /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(FieldContext.Provider, {
+                value: value,
+                children: /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("div", _object_spread_props(_object_spread({}, rest), {
+                    children: children
+                }))
+            });
         };
-        const FieldChrome = ({ id, label, description, error, required, children, disableLabelFor = false })=>/*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsxs)("div", {
+        Field.displayName = 'Field';
+        const FieldLabel = (_0)=>{
+            let { required, htmlFor, id, children } = _0, rest = _object_without_properties(_0, [
+                "required",
+                "htmlFor",
+                "id",
+                "children"
+            ]);
+            const context = useFieldContext();
+            const resolvedHtmlFor = false === htmlFor ? void 0 : null != htmlFor ? htmlFor : null == context ? void 0 : context.id;
+            return /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsxs)("label", _object_spread_props(_object_spread({
+                htmlFor: resolvedHtmlFor,
+                id: null != id ? id : null == context ? void 0 : context.labelId,
+                className: _field_css__rspack_import_3.Pf
+            }, rest), {
                 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
+                    required ? /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("span", {
+                        className: _field_css__rspack_import_3.Zy,
+                        "aria-hidden": "true",
+                        children: "*"
                     }) : null
                 ]
-            });
-        const __rspack_default_export = FieldChrome;
+            }));
+        };
+        FieldLabel.displayName = 'FieldLabel';
+        const FieldControl = (_0)=>{
+            let { children } = _0, rest = _object_without_properties(_0, [
+                "children"
+            ]);
+            const context = useFieldContext();
+            return /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)(_radix_ui_react_slot__rspack_import_1.Slot, _object_spread_props(_object_spread({
+                id: null == context ? void 0 : context.id,
+                "aria-describedby": null == context ? void 0 : context.describedBy,
+                "aria-invalid": null == context ? void 0 : context.invalid
+            }, rest), {
+                children: children
+            }));
+        };
+        FieldControl.displayName = 'FieldControl';
+        const FieldDescription = (_0)=>{
+            let { id } = _0, rest = _object_without_properties(_0, [
+                "id"
+            ]);
+            const context = useFieldContext();
+            return /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("p", _object_spread({
+                id: null != id ? id : null == context ? void 0 : context.descriptionId,
+                className: _field_css__rspack_import_3.ij
+            }, rest));
+        };
+        FieldDescription.displayName = "FieldDescription";
+        const FieldError = (_0)=>{
+            let { id } = _0, rest = _object_without_properties(_0, [
+                "id"
+            ]);
+            const context = useFieldContext();
+            return /*#__PURE__*/ (0, react_jsx_runtime__rspack_import_0.jsx)("p", _object_spread({
+                id: null != id ? id : null == context ? void 0 : context.errorId,
+                className: _field_css__rspack_import_3.kc,
+                role: "alert"
+            }, rest));
+        };
+        FieldError.displayName = 'FieldError';
         __webpack_require__.d(__webpack_exports__, {}, {
-            A: __rspack_default_export,
-            z: describedByIds
+            I: useResolvedFieldProps
         });
     },
+    922 (module) {
+        module.exports = require("@radix-ui/react-slot");
+    },
     586 (module) {
         module.exports = require("@vinyasa/icons");
     },
@@ -241,17 +399,19 @@ var __webpack_exports__ = {};
     var jsx_runtime_ = __webpack_require__(732);
     var icons_ = __webpack_require__(586);
     var external_react_ = __webpack_require__(15);
-    var field = __webpack_require__(140);
-    var field_css = __webpack_require__(891);
-    var selectPopover_css = __webpack_require__(629);
+    var field_css = __webpack_require__(318);
+    var selectPopover_css = __webpack_require__(811);
+    var Field = __webpack_require__(598);
     var tagInput = '_1w3na0r0';
-    const TagsInput = /*#__PURE__*/ (0, external_react_.forwardRef)(({ value, defaultValue = [], onValueChange, placeholder, label, description, error, required, size, max, disabled, id: idProp }, ref)=>{
+    const TagsInput = /*#__PURE__*/ (0, external_react_.forwardRef)(({ value, defaultValue = [], onValueChange, placeholder, invalid, size, max, disabled, required, id: idProp }, ref)=>{
         const [internalValue, setInternalValue] = (0, external_react_.useState)(defaultValue);
         const isControlled = void 0 !== value;
         const currentValue = isControlled ? value : internalValue;
         const [draft, setDraft] = (0, external_react_.useState)('');
-        const generatedId = (0, external_react_.useId)();
-        const id = null != idProp ? idProp : generatedId;
+        const { id, invalid: isInvalid, describedBy } = (0, Field.I)({
+            id: idProp,
+            invalid
+        });
         const setValue = (next)=>{
             if (!isControlled) setInternalValue(next);
             null == onValueChange || onValueChange(next);
@@ -276,62 +436,53 @@ var __webpack_exports__ = {};
             }
             if ('Backspace' === event.key && '' === draft && currentValue.length > 0) removeTag(currentValue[currentValue.length - 1]);
         };
-        return /*#__PURE__*/ (0, jsx_runtime_.jsx)(field.A, {
-            id: id,
-            label: label,
-            description: description,
-            error: error,
-            required: required,
-            children: /*#__PURE__*/ (0, jsx_runtime_.jsx)("div", {
-                className: `${(0, field_css.Ij)({
-                    size,
-                    invalid: Boolean(error)
-                })} ${selectPopover_css.I3}`,
-                onClick: (event)=>{
-                    if (event.currentTarget === event.target) {
-                        var _event_currentTarget_querySelector;
-                        null == (_event_currentTarget_querySelector = event.currentTarget.querySelector('input')) || _event_currentTarget_querySelector.focus();
-                    }
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_.jsxs)("span", {
-                    className: selectPopover_css.BQ,
-                    children: [
-                        currentValue.map((tag)=>/*#__PURE__*/ (0, jsx_runtime_.jsxs)("span", {
-                                className: selectPopover_css.jw,
-                                children: [
-                                    tag,
-                                    /*#__PURE__*/ (0, jsx_runtime_.jsx)("button", {
-                                        type: "button",
-                                        className: selectPopover_css.lv,
-                                        "aria-label": `Remove ${tag}`,
-                                        disabled: disabled,
-                                        onClick: ()=>{
-                                            removeTag(tag);
-                                        },
-                                        children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.XIcon, {})
-                                    })
-                                ]
-                            }, tag)),
-                        /*#__PURE__*/ (0, jsx_runtime_.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": (0, field.z)(id, {
-                                description,
-                                error
-                            }),
-                            onChange: (event)=>{
-                                setDraft(event.target.value);
-                            },
-                            onKeyDown: handleKeyDown,
-                            onBlur: commitDraft
-                        })
-                    ]
-                })
+        return /*#__PURE__*/ (0, jsx_runtime_.jsx)("div", {
+            className: `${(0, field_css.Ij)({
+                size,
+                invalid: isInvalid
+            })} ${selectPopover_css.I3}`,
+            onClick: (event)=>{
+                if (event.currentTarget === event.target) {
+                    var _event_currentTarget_querySelector;
+                    null == (_event_currentTarget_querySelector = event.currentTarget.querySelector('input')) || _event_currentTarget_querySelector.focus();
+                }
+            },
+            children: /*#__PURE__*/ (0, jsx_runtime_.jsxs)("span", {
+                className: selectPopover_css.BQ,
+                children: [
+                    currentValue.map((tag)=>/*#__PURE__*/ (0, jsx_runtime_.jsxs)("span", {
+                            className: selectPopover_css.jw,
+                            children: [
+                                tag,
+                                /*#__PURE__*/ (0, jsx_runtime_.jsx)("button", {
+                                    type: "button",
+                                    className: selectPopover_css.lv,
+                                    "aria-label": `Remove ${tag}`,
+                                    disabled: disabled,
+                                    onClick: ()=>{
+                                        removeTag(tag);
+                                    },
+                                    children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.XIcon, {})
+                                })
+                            ]
+                        }, tag)),
+                    /*#__PURE__*/ (0, jsx_runtime_.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/cjs/tags-input.css

@@ -126,7 +126,7 @@
 }
 
 .sbqkrxf {
-  align-items: center;
+  align-items: flex-start;
   gap: var(--vinyasa-space2);
   display: inline-flex;
 }