@vinyasa/form 1.0.22 → 1.0.23

package/dist/cjs/index.css

@@ -126,7 +126,7 @@
 }
 
 .sbqkrxf {
-  align-items: center;
+  align-items: flex-start;
   gap: var(--vinyasa-space2);
   display: inline-flex;
 }
@@ -336,6 +336,10 @@
   cursor: not-allowed;
 }
 
+._7ele600[aria-invalid="true"] {
+  border-color: var(--vinyasa-error);
+}
+
 ._7ele601 {
   color: var(--vinyasa-on-primary);
   font-size: .75rem;
@@ -1192,6 +1196,10 @@
   cursor: not-allowed;
 }
 
+._1u7tp1u0[aria-invalid="true"] {
+  box-shadow: inset 0 0 0 var(--vinyasa-border-width-thin) var(--vinyasa-error);
+}
+
 ._1u7tp1u1 {
   border-radius: var(--vinyasa-radius-full);
   background-color: var(--vinyasa-on-primary);

package/dist/cjs/input.cjs

@@ -1,5 +1,6 @@
 "use strict";
 var __webpack_modules__ = {
+    51 () {},
     400 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
         function toPrimitive(t, r) {
             if ("object" != typeof t || !t) return t;
@@ -91,18 +92,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,51 +116,212 @@ var __webpack_modules__ = {
         });
         var label = 'sbqkrxb';
         var requiredMark = 'sbqkrxc';
+        __webpack_require__.d(__webpack_exports__, {
+            Ij: ()=>fieldControl,
+            Pf: ()=>label,
+            Zy: ()=>requiredMark,
+            ij: ()=>descriptionText,
+            kc: ()=>errorText
+        });
     },
-    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");
+    },
     15 (module) {
         module.exports = require("react");
     },
@@ -225,8 +381,8 @@ var __webpack_exports__ = {};
     });
     var jsx_runtime_ = __webpack_require__(732);
     var external_react_ = __webpack_require__(15);
-    var field = __webpack_require__(140);
-    var field_css = __webpack_require__(891);
+    var field_css = __webpack_require__(318);
+    var Field = __webpack_require__(598);
     function _define_property(obj, key, value) {
         if (key in obj) Object.defineProperty(obj, key, {
             value: value,
@@ -290,42 +446,32 @@ var __webpack_exports__ = {};
         let _ref = [
             _0,
             _1
-        ], [_ref1, ..._rest] = _ref, { label, description, error, required, size, id: idProp, className } = _ref1, rest = _object_without_properties(_ref1, [
-            "label",
-            "description",
-            "error",
-            "required",
+        ], [_ref1, ..._rest] = _ref, { size, invalid, id: idProp, className, 'aria-describedby': ariaDescribedBy } = _ref1, rest = _object_without_properties(_ref1, [
             "size",
+            "invalid",
             "id",
-            "className"
+            "className",
+            'aria-describedby'
         ]), [ref] = _rest;
-        const generatedId = (0, external_react_.useId)();
-        const id = null != idProp ? idProp : generatedId;
+        const { id, invalid: isInvalid, describedBy } = (0, Field.I)({
+            id: idProp,
+            invalid,
+            describedBy: ariaDescribedBy
+        });
         const classes = className ? `${(0, field_css.Ij)({
             size,
-            invalid: Boolean(error)
+            invalid: isInvalid
         })} ${className}` : (0, field_css.Ij)({
             size,
-            invalid: Boolean(error)
+            invalid: isInvalid
         });
-        return /*#__PURE__*/ (0, jsx_runtime_.jsx)(field.A, {
+        return /*#__PURE__*/ (0, jsx_runtime_.jsx)("input", _object_spread({
+            ref: ref,
             id: id,
-            label: label,
-            description: description,
-            error: error,
-            required: required,
-            children: /*#__PURE__*/ (0, jsx_runtime_.jsx)("input", _object_spread({
-                ref: ref,
-                id: id,
-                className: classes,
-                required: required,
-                "aria-invalid": error ? true : void 0,
-                "aria-describedby": (0, field.z)(id, {
-                    description,
-                    error
-                })
-            }, rest))
-        });
+            className: classes,
+            "aria-invalid": isInvalid,
+            "aria-describedby": describedBy
+        }, rest));
     });
     Input.displayName = 'Input';
     const input_Input = Input;

package/dist/cjs/input.css

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