@vinyasa/form 1.0.22

package/dist/cjs/color-picker.css

@@ -0,0 +1,248 @@
+.sbqkrx0 {
+  width: 100%;
+  font-family: var(--vinyasa-font-family-sans);
+  color: var(--vinyasa-on-secondary);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  border-radius: var(--vinyasa-radius-sm);
+  transition: border-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: rgba(0, 0, 0, 0);
+  display: block;
+}
+
+.sbqkrx0::-webkit-input-placeholder {
+  color: var(--vinyasa-text-muted);
+}
+
+.sbqkrx0::placeholder {
+  color: var(--vinyasa-text-muted);
+}
+
+.sbqkrx0: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;
+}
+
+.sbqkrx0:disabled {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sbqkrx1 {
+  padding: var(--vinyasa-space1) var(--vinyasa-space2);
+  font-size: var(--vinyasa-font-size-sm);
+}
+
+.sbqkrx2 {
+  padding: var(--vinyasa-space2) var(--vinyasa-space3);
+  font-size: var(--vinyasa-font-size-sm);
+}
+
+.sbqkrx3 {
+  padding: var(--vinyasa-space3) var(--vinyasa-space4);
+  font-size: var(--vinyasa-font-size-md);
+}
+
+.sbqkrx4 {
+  border-color: var(--vinyasa-error);
+}
+
+.sbqkrx5 {
+  align-items: stretch;
+  display: flex;
+  position: relative;
+}
+
+.sbqkrx6 {
+  left: var(--vinyasa-space3);
+  color: var(--vinyasa-text-muted);
+  pointer-events: none;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sbqkrx7 {
+  right: var(--vinyasa-space2);
+  align-items: center;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sbqkrx8 {
+  padding-left: 2.25rem;
+}
+
+.sbqkrx9 {
+  padding-right: 2.25rem;
+}
+
+.sbqkrxa {
+  color: var(--vinyasa-text-muted);
+  cursor: pointer;
+  background: none;
+  border: none;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+}
+
+.sbqkrxa:hover {
+  color: var(--vinyasa-on-secondary);
+}
+
+.sbqkrxa:disabled {
+  cursor: not-allowed;
+  opacity: var(--vinyasa-opacity-disabled);
+}
+
+.sbqkrxb {
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  color: var(--vinyasa-on-secondary);
+  margin-bottom: var(--vinyasa-space1);
+  display: block;
+}
+
+.sbqkrxc {
+  color: var(--vinyasa-error);
+  margin-left: .125rem;
+}
+
+.sbqkrxd {
+  font-size: var(--vinyasa-font-size-xs);
+  color: var(--vinyasa-text-muted);
+  margin-top: var(--vinyasa-space1);
+}
+
+.sbqkrxe {
+  font-size: var(--vinyasa-font-size-xs);
+  color: var(--vinyasa-error);
+  margin-top: var(--vinyasa-space1);
+}
+
+.sbqkrxf {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  display: inline-flex;
+}
+
+.sbqkrxg {
+  font-size: var(--vinyasa-font-size-sm);
+  color: var(--vinyasa-on-secondary);
+  cursor: pointer;
+}
+
+._1o9um0f0 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  text-align: left;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0);
+  width: 100%;
+  min-width: 10rem;
+  max-width: 20rem;
+  display: inline-flex;
+}
+
+._1o9um0f1 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+._1o9um0f2 {
+  border-radius: var(--vinyasa-radius-sm);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+._1o9um0f3 {
+  z-index: var(--vinyasa-z-index-dropdown);
+  gap: var(--vinyasa-space3);
+  padding: var(--vinyasa-space3);
+  background-color: var(--vinyasa-surface);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  border-radius: var(--vinyasa-radius-md);
+  box-shadow: var(--vinyasa-elevation-overlay);
+  flex-direction: column;
+  display: flex;
+}
+
+._1o9um0f4 {
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  border-radius: var(--vinyasa-radius-sm);
+  overflow: hidden;
+}
+
+._1o9um0f5 {
+  width: 13.75rem;
+}
+
+._1o9um0f5 .react-colorful {
+  width: 100%;
+  height: 11rem;
+}
+
+._1o9um0f6 {
+  padding: var(--vinyasa-space1) var(--vinyasa-space2);
+  border-top: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  background-color: var(--vinyasa-surface);
+  align-items: center;
+  display: flex;
+}
+
+._1o9um0f7 {
+  min-width: 0;
+  font-family: var(--vinyasa-font-family-mono);
+  font-size: var(--vinyasa-font-size-sm);
+  color: var(--vinyasa-on-secondary);
+  text-transform: uppercase;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+  padding: 0;
+}
+
+._1o9um0f8 {
+  font-size: var(--vinyasa-font-size-xs);
+  color: var(--vinyasa-text-muted);
+  margin-bottom: var(--vinyasa-space1);
+}
+
+._1o9um0f9 {
+  gap: var(--vinyasa-space1);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+._1o9um0fa {
+  border-radius: var(--vinyasa-radius-sm);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  cursor: pointer;
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  flex-shrink: 0;
+  padding: 0;
+}
+
+._1o9um0fa:hover {
+  transform: scale(1.1);
+}
+
+._1o9um0fa: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;
+}
+

package/dist/cjs/combobox.cjs

@@ -0,0 +1,394 @@
+"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,
+            be: ()=>itemIndicator,
+            p_: ()=>list,
+            qf: ()=>placeholder,
+            qc: ()=>searchIcon,
+            Rt: ()=>searchInput,
+            sf: ()=>searchWrapper,
+            hZ: ()=>trigger,
+            ab: ()=>triggerIcon,
+            GA: ()=>triggerText
+        });
+        var content = '_1u69cbs0';
+        var empty = '_1u69cbs4';
+        var item = '_1u69cbs2';
+        var itemIndicator = '_1u69cbs3';
+        var list = '_1u69cbs1';
+        var placeholder = '_1u69cbs5';
+        var searchIcon = '_1u69cbsa';
+        var searchInput = '_1u69cbsb';
+        var searchWrapper = '_1u69cbs9';
+        var trigger = '_1u69cbs6';
+        var triggerIcon = '_1u69cbs7';
+        var triggerText = '_1u69cbs8';
+    },
+    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");
+    },
+    586 (module) {
+        module.exports = require("@vinyasa/icons");
+    },
+    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: ()=>combobox
+    });
+    var jsx_runtime_ = __webpack_require__(732);
+    var react_popover_ = __webpack_require__(283);
+    var icons_ = __webpack_require__(586);
+    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 optionText = (option)=>'string' == typeof option.label ? option.label : option.value;
+    const Combobox = ({ options, value, defaultValue, onValueChange, placeholder = 'Select an option', label, description, error, required, size, disabled, emptyMessage = 'No results found.', trigger, id: idProp })=>{
+        const [internalValue, setInternalValue] = (0, external_react_.useState)(defaultValue);
+        const isControlled = void 0 !== value;
+        const currentValue = isControlled ? value : internalValue;
+        const selectedOption = options.find((option)=>option.value === currentValue);
+        const [open, setOpen] = (0, external_react_.useState)(false);
+        const [search, setSearch] = (0, external_react_.useState)('');
+        const generatedId = (0, external_react_.useId)();
+        const id = null != idProp ? idProp : generatedId;
+        const handleSelect = (optionValue)=>{
+            if (!isControlled) setInternalValue(optionValue);
+            null == onValueChange || onValueChange(optionValue);
+            setOpen(false);
+        };
+        return /*#__PURE__*/ (0, jsx_runtime_.jsx)(field.A, {
+            id: id,
+            label: label,
+            description: description,
+            error: error,
+            required: required,
+            children: /*#__PURE__*/ (0, jsx_runtime_.jsxs)(react_popover_.Root, {
+                open: open,
+                onOpenChange: (next)=>{
+                    setOpen(next);
+                    if (!next) setSearch('');
+                },
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_.jsx)(react_popover_.Trigger, {
+                        asChild: true,
+                        children: null != trigger ? trigger : /*#__PURE__*/ (0, jsx_runtime_.jsxs)("button", {
+                            type: "button",
+                            id: id,
+                            disabled: disabled,
+                            className: `${(0, field_css.Ij)({
+                                size,
+                                invalid: Boolean(error)
+                            })} ${selectPopover_css.hZ}`,
+                            "aria-describedby": (0, field.z)(id, {
+                                description,
+                                error
+                            }),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_.jsx)("span", {
+                                    className: selectedOption ? selectPopover_css.GA : `${selectPopover_css.GA} ${selectPopover_css.qf}`,
+                                    children: selectedOption ? selectedOption.label : placeholder
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_.jsx)("span", {
+                                    className: selectPopover_css.ab,
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.ChevronDownIcon, {})
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_.jsx)(react_popover_.Content, {
+                        className: selectPopover_css.Qs,
+                        align: "start",
+                        sideOffset: 4,
+                        children: /*#__PURE__*/ (0, jsx_runtime_.jsxs)(external_cmdk_.Command, {
+                            loop: true,
+                            label: 'string' == typeof label ? label : 'Search options',
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_.jsxs)("div", {
+                                    className: selectPopover_css.sf,
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_.jsx)("span", {
+                                            className: selectPopover_css.qc,
+                                            "aria-hidden": "true",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.SearchIcon, {})
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_.jsx)(external_cmdk_.Command.Input, {
+                                            autoFocus: true,
+                                            value: search,
+                                            onValueChange: setSearch,
+                                            placeholder: "Search…",
+                                            className: selectPopover_css.Rt
+                                        })
+                                    ]
+                                }),
+                                /*#__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
+                                        }),
+                                        options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_.jsxs)(external_cmdk_.Command.Item, {
+                                                value: optionText(option),
+                                                disabled: option.disabled,
+                                                onSelect: ()=>{
+                                                    handleSelect(option.value);
+                                                },
+                                                className: selectPopover_css.AS,
+                                                "data-selected": option.value === currentValue,
+                                                "data-disabled": option.disabled,
+                                                children: [
+                                                    option.label,
+                                                    option.value === currentValue ? /*#__PURE__*/ (0, jsx_runtime_.jsx)("span", {
+                                                        className: selectPopover_css.be,
+                                                        children: /*#__PURE__*/ (0, jsx_runtime_.jsx)(icons_.CheckIcon, {})
+                                                    }) : null
+                                                ]
+                                            }, option.value))
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        });
+    };
+    Combobox.displayName = 'Combobox';
+    const combobox_Combobox = Combobox;
+    const combobox = combobox_Combobox;
+})();
+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
+});