@vinyasa/form 1.0.22

package/dist/esm/multi-select.js

@@ -0,0 +1,164 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, SearchIcon, XIcon } from "@vinyasa/icons";
+import { Command } from "cmdk";
+import { useId, useState } from "react";
+import { field, describedByIds } from "./4557.js";
+import { fieldControl } from "./2995.js";
+import { chip, empty, chipRow, searchIcon, content, placeholder as selectPopover_css_placeholder, chipRemove, itemIndicator, searchInput, item, searchWrapper, list, chipOverflow, triggerBox } from "./6720.js";
+import * as __rspack_external__radix_ui_react_popover_e2827c9f from "@radix-ui/react-popover";
+const optionText = (option)=>'string' == typeof option.label ? option.label : option.value;
+const MultiSelect = ({ options, value, defaultValue = [], onValueChange, placeholder, label, description, error, required, size, emptyMessage = 'No results found.', maxVisibleChips = 2, trigger, id: idProp })=>{
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = void 0 !== value;
+    const currentValue = isControlled ? value : internalValue;
+    const [open, setOpen] = useState(false);
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const setValue = (next)=>{
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+    };
+    const toggleValue = (optionValue)=>{
+        setValue(currentValue.includes(optionValue) ? currentValue.filter((entry)=>entry !== optionValue) : [
+            ...currentValue,
+            optionValue
+        ]);
+    };
+    const removeValue = (optionValue)=>{
+        setValue(currentValue.filter((entry)=>entry !== optionValue));
+    };
+    const selectedOptions = options.filter((option)=>currentValue.includes(option.value));
+    const visibleOptions = selectedOptions.slice(0, maxVisibleChips);
+    const overflowCount = selectedOptions.length - visibleOptions.length;
+    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: setOpen,
+            children: [
+                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Trigger, {
+                    asChild: true,
+                    children: trigger ?? /*#__PURE__*/ jsx("div", {
+                        id: id,
+                        role: "combobox",
+                        "aria-expanded": open,
+                        "aria-labelledby": label ? `${id}-label` : void 0,
+                        "aria-describedby": describedByIds(id, {
+                            description,
+                            error
+                        }),
+                        tabIndex: 0,
+                        className: `${fieldControl({
+                            size,
+                            invalid: Boolean(error)
+                        })} ${triggerBox}`,
+                        onKeyDown: (event)=>{
+                            if ('Enter' === event.key || ' ' === event.key) {
+                                event.preventDefault();
+                                setOpen((previous)=>!previous);
+                            }
+                        },
+                        children: /*#__PURE__*/ jsxs("span", {
+                            className: chipRow,
+                            children: [
+                                0 === selectedOptions.length ? /*#__PURE__*/ jsx("span", {
+                                    className: selectPopover_css_placeholder,
+                                    children: placeholder
+                                }) : null,
+                                visibleOptions.map((option)=>/*#__PURE__*/ jsxs("span", {
+                                        className: chip,
+                                        children: [
+                                            option.label,
+                                            /*#__PURE__*/ jsx("button", {
+                                                type: "button",
+                                                className: chipRemove,
+                                                "aria-label": `Remove ${optionText(option)}`,
+                                                onClick: (event)=>{
+                                                    event.stopPropagation();
+                                                    removeValue(option.value);
+                                                },
+                                                children: /*#__PURE__*/ jsx(XIcon, {})
+                                            })
+                                        ]
+                                    }, option.value)),
+                                overflowCount > 0 ? /*#__PURE__*/ jsxs("span", {
+                                    className: chipOverflow,
+                                    children: [
+                                        "+",
+                                        overflowCount
+                                    ]
+                                }) : null
+                            ]
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_popover_e2827c9f.Content, {
+                    className: content,
+                    align: "start",
+                    sideOffset: 4,
+                    onOpenAutoFocus: (event)=>{
+                        event.preventDefault();
+                    },
+                    children: /*#__PURE__*/ jsxs(Command, {
+                        loop: true,
+                        label: "Search options",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: searchWrapper,
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: searchIcon,
+                                        "aria-hidden": "true",
+                                        children: /*#__PURE__*/ jsx(SearchIcon, {})
+                                    }),
+                                    /*#__PURE__*/ jsx(Command.Input, {
+                                        placeholder: "Search…",
+                                        className: searchInput
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Command.List, {
+                                className: list,
+                                children: [
+                                    /*#__PURE__*/ jsx(Command.Empty, {
+                                        className: empty,
+                                        children: emptyMessage
+                                    }),
+                                    options.map((option)=>{
+                                        const isSelected = currentValue.includes(option.value);
+                                        return /*#__PURE__*/ jsxs(Command.Item, {
+                                            value: optionText(option),
+                                            disabled: option.disabled,
+                                            onSelect: ()=>{
+                                                toggleValue(option.value);
+                                            },
+                                            className: item,
+                                            "data-selected": isSelected,
+                                            "data-disabled": option.disabled,
+                                            children: [
+                                                option.label,
+                                                isSelected ? /*#__PURE__*/ jsx("span", {
+                                                    className: itemIndicator,
+                                                    children: /*#__PURE__*/ jsx(CheckIcon, {})
+                                                }) : null
+                                            ]
+                                        }, option.value);
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+MultiSelect.displayName = 'MultiSelect';
+const multi_select_MultiSelect = MultiSelect;
+const multi_select = multi_select_MultiSelect;
+export default multi_select;
+export { multi_select as MultiSelect };

package/dist/esm/number-input.css

@@ -0,0 +1,107 @@
+._1wyztbj0 {
+  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), box-shadow var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  align-items: stretch;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+._1wyztbj0:focus-within {
+  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;
+}
+
+._1wyztbj1, ._1wyztbj2 {
+  font-size: var(--vinyasa-font-size-sm);
+}
+
+._1wyztbj3 {
+  font-size: var(--vinyasa-font-size-md);
+}
+
+._1wyztbj4 {
+  border-color: var(--vinyasa-error);
+}
+
+._1wyztbj5 {
+  opacity: var(--vinyasa-opacity-disabled);
+}
+
+._1wyztbj6 {
+  color: var(--vinyasa-text-muted);
+  cursor: pointer;
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+._1wyztbj6:hover:not(:disabled) {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-on-secondary);
+}
+
+._1wyztbj6:disabled {
+  cursor: not-allowed;
+  opacity: var(--vinyasa-opacity-disabled);
+}
+
+._1wyztbj7 {
+  width: 1.75rem;
+}
+
+._1wyztbj8 {
+  width: 2rem;
+}
+
+._1wyztbj9 {
+  width: 2.25rem;
+}
+
+._1wyztbja {
+  border-right: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+}
+
+._1wyztbjb {
+  border-left: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+}
+
+._1wyztbjc {
+  text-align: center;
+  min-width: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+}
+
+._1wyztbjc::placeholder {
+  color: var(--vinyasa-text-muted);
+}
+
+._1wyztbjc:disabled {
+  cursor: not-allowed;
+}
+
+._1wyztbjd {
+  padding: var(--vinyasa-space1) 0;
+}
+
+._1wyztbje {
+  padding: var(--vinyasa-space2) 0;
+}
+
+._1wyztbjf {
+  padding: var(--vinyasa-space3) 0;
+}
+

package/dist/esm/number-input.d.ts

@@ -0,0 +1,2 @@
+export * from './components/number-input/index';
+export { default } from './components/number-input/index';

package/dist/esm/number-input.js

@@ -0,0 +1,153 @@
+import "./number-input.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MinusIcon, PlusIcon } from "@vinyasa/icons";
+import { forwardRef, useId, useRef } from "react";
+import { fieldControl, createRuntimeFn } from "./2995.js";
+import { field, describedByIds } from "./4557.js";
+var group = createRuntimeFn({
+    defaultClassName: '_1wyztbj0',
+    variantClassNames: {
+        size: {
+            sm: '_1wyztbj1',
+            md: '_1wyztbj2',
+            lg: '_1wyztbj3'
+        },
+        invalid: {
+            true: '_1wyztbj4'
+        },
+        disabled: {
+            true: '_1wyztbj5'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    },
+    compoundVariants: []
+});
+var groupButton = createRuntimeFn({
+    defaultClassName: '_1wyztbj6',
+    variantClassNames: {
+        size: {
+            sm: '_1wyztbj7',
+            md: '_1wyztbj8',
+            lg: '_1wyztbj9'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    },
+    compoundVariants: []
+});
+var groupButtonLeading = '_1wyztbja';
+var groupButtonTrailing = '_1wyztbjb';
+var groupInput = createRuntimeFn({
+    defaultClassName: '_1wyztbjc',
+    variantClassNames: {
+        size: {
+            sm: '_1wyztbjd',
+            md: '_1wyztbje',
+            lg: '_1wyztbjf'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    },
+    compoundVariants: []
+});
+const step = (input, direction)=>{
+    if (!input) return;
+    if ('up' === direction) input.stepUp();
+    else input.stepDown();
+    input.dispatchEvent(new Event('input', {
+        bubbles: true
+    }));
+};
+const mergeRefs = (...refs)=>(node)=>{
+        for (const ref of refs)if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    };
+const NumberInput = /*#__PURE__*/ forwardRef(({ label, description, error, required, size, showSteppers = true, disabled, id: idProp, className, ...rest }, ref)=>{
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const innerRef = useRef(null);
+    const invalid = Boolean(error);
+    return /*#__PURE__*/ jsx(field, {
+        id: id,
+        label: label,
+        description: description,
+        error: error,
+        required: required,
+        children: showSteppers ? /*#__PURE__*/ jsxs("div", {
+            className: group({
+                size,
+                invalid,
+                disabled
+            }),
+            children: [
+                /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: `${groupButton({
+                        size
+                    })} ${groupButtonLeading}`,
+                    disabled: disabled,
+                    tabIndex: -1,
+                    "aria-label": "Decrement",
+                    onClick: ()=>{
+                        step(innerRef.current, 'down');
+                    },
+                    children: /*#__PURE__*/ jsx(MinusIcon, {})
+                }),
+                /*#__PURE__*/ jsx("input", {
+                    ref: mergeRefs(ref, innerRef),
+                    id: id,
+                    type: "number",
+                    disabled: disabled,
+                    className: `${groupInput({
+                        size
+                    })} ${className ?? ''}`,
+                    required: required,
+                    "aria-invalid": invalid ? true : void 0,
+                    "aria-describedby": describedByIds(id, {
+                        description,
+                        error
+                    }),
+                    ...rest
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: `${groupButton({
+                        size
+                    })} ${groupButtonTrailing}`,
+                    disabled: disabled,
+                    tabIndex: -1,
+                    "aria-label": "Increment",
+                    onClick: ()=>{
+                        step(innerRef.current, 'up');
+                    },
+                    children: /*#__PURE__*/ jsx(PlusIcon, {})
+                })
+            ]
+        }) : /*#__PURE__*/ jsx("input", {
+            ref: mergeRefs(ref, innerRef),
+            id: id,
+            type: "number",
+            disabled: disabled,
+            className: `${fieldControl({
+                size,
+                invalid
+            })} ${className ?? ''}`,
+            required: required,
+            "aria-invalid": invalid ? true : void 0,
+            "aria-describedby": describedByIds(id, {
+                description,
+                error
+            }),
+            ...rest
+        })
+    });
+});
+NumberInput.displayName = 'NumberInput';
+const number_input_NumberInput = NumberInput;
+const number_input = number_input_NumberInput;
+export default number_input;
+export { number_input as NumberInput };

package/dist/esm/otp-input.css

@@ -0,0 +1,55 @@
+@keyframes _14kw5nt5 {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+
+._14kw5nt0 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  display: inline-flex;
+}
+
+._14kw5nt1 {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._14kw5nt2 {
+  width: 2.5rem;
+  height: 2.75rem;
+  font-size: var(--vinyasa-font-size-lg);
+  font-family: var(--vinyasa-font-family-mono);
+  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);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+._14kw5nt3 {
+  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;
+}
+
+._14kw5nt4 {
+  border-color: var(--vinyasa-error);
+}
+
+._14kw5nt6 {
+  pointer-events: none;
+  background-color: var(--vinyasa-on-secondary);
+  width: 1px;
+  height: 1.25rem;
+  animation: 1s step-end infinite _14kw5nt5;
+  position: absolute;
+}
+

package/dist/esm/otp-input.d.ts

@@ -0,0 +1,2 @@
+export * from './components/otp-input/index';
+export { default } from './components/otp-input/index';

package/dist/esm/otp-input.js

@@ -0,0 +1,56 @@
+import "./otp-input.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, REGEXP_ONLY_DIGITS } from "input-otp";
+import { forwardRef, useId } from "react";
+import { field, describedByIds } from "./4557.js";
+var fakeCaret = '_14kw5nt6';
+var group = '_14kw5nt0';
+var groupDisabled = '_14kw5nt1';
+var slot = '_14kw5nt2';
+var slotActive = '_14kw5nt3';
+var slotInvalid = '_14kw5nt4';
+const OtpInput = /*#__PURE__*/ forwardRef(({ label, description, error, length = 6, disabled, id: idProp, onChange, ...rest }, ref)=>{
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    return /*#__PURE__*/ jsx(field, {
+        id: id,
+        label: label,
+        description: description,
+        error: error,
+        children: /*#__PURE__*/ jsx(OTPInput, {
+            ref: ref,
+            id: id,
+            maxLength: length,
+            pattern: REGEXP_ONLY_DIGITS,
+            disabled: disabled,
+            onChange: onChange,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": describedByIds(id, {
+                description,
+                error
+            }),
+            containerClassName: `${group} ${disabled ? groupDisabled : ''}`.trim(),
+            render: ({ slots })=>/*#__PURE__*/ jsx(Fragment, {
+                    children: slots.map((slotProps, index)=>/*#__PURE__*/ jsxs("div", {
+                            className: [
+                                slot,
+                                slotProps.isActive ? slotActive : '',
+                                error ? slotInvalid : ''
+                            ].filter(Boolean).join(' '),
+                            children: [
+                                slotProps.char,
+                                slotProps.hasFakeCaret ? /*#__PURE__*/ jsx("span", {
+                                    className: fakeCaret
+                                }) : null
+                            ]
+                        }, index))
+                }),
+            ...rest
+        })
+    });
+});
+OtpInput.displayName = 'OtpInput';
+const otp_input_OtpInput = OtpInput;
+const otp_input = otp_input_OtpInput;
+export default otp_input;
+export { otp_input as OtpInput };

package/dist/esm/password-input.d.ts

@@ -0,0 +1,2 @@
+export * from './components/password-input/index';
+export { default } from './components/password-input/index';

package/dist/esm/password-input.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeOffIcon } from "@vinyasa/icons";
+import { forwardRef, useId, useState } from "react";
+import { fieldControl, fieldIconButton, fieldGroup, fieldControlWithTrailingIcon, fieldIconTrailing } from "./2995.js";
+import { field, describedByIds } from "./4557.js";
+const PasswordInput = /*#__PURE__*/ forwardRef(({ label, description, error, required, size, id: idProp, className, ...rest }, ref)=>{
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const [revealed, setRevealed] = useState(false);
+    const classes = className ? `${fieldControl({
+        size,
+        invalid: Boolean(error)
+    })} ${fieldControlWithTrailingIcon} ${className}` : `${fieldControl({
+        size,
+        invalid: Boolean(error)
+    })} ${fieldControlWithTrailingIcon}`;
+    return /*#__PURE__*/ jsx(field, {
+        id: id,
+        label: label,
+        description: description,
+        error: error,
+        required: required,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: fieldGroup,
+            children: [
+                /*#__PURE__*/ jsx("input", {
+                    ref: ref,
+                    id: id,
+                    type: revealed ? 'text' : 'password',
+                    className: classes,
+                    required: required,
+                    "aria-invalid": error ? true : void 0,
+                    "aria-describedby": describedByIds(id, {
+                        description,
+                        error
+                    }),
+                    ...rest
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: `${fieldIconTrailing} ${fieldIconButton}`,
+                    onClick: ()=>{
+                        setRevealed((value)=>!value);
+                    },
+                    "aria-label": revealed ? 'Hide password' : 'Show password',
+                    children: revealed ? /*#__PURE__*/ jsx(EyeOffIcon, {}) : /*#__PURE__*/ jsx(EyeIcon, {})
+                })
+            ]
+        })
+    });
+});
+PasswordInput.displayName = 'PasswordInput';
+const password_input_PasswordInput = PasswordInput;
+const password_input = password_input_PasswordInput;
+export default password_input;
+export { password_input as PasswordInput };

package/dist/esm/radio-group.css

@@ -0,0 +1,42 @@
+.n31tav0 {
+  gap: var(--vinyasa-space2);
+  flex-direction: column;
+  display: flex;
+}
+
+.n31tav1 {
+  all: unset;
+  border-radius: var(--vinyasa-radius-full);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  cursor: pointer;
+  background-color: #0000;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  display: inline-flex;
+}
+
+.n31tav1[data-state="checked"] {
+  border-color: var(--vinyasa-primary);
+}
+
+.n31tav1: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;
+}
+
+.n31tav1[data-disabled] {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.n31tav2 {
+  border-radius: var(--vinyasa-radius-full);
+  background-color: var(--vinyasa-primary);
+  width: .625rem;
+  height: .625rem;
+}
+

package/dist/esm/radio-group.d.ts

@@ -0,0 +1,2 @@
+export * from './components/radio-group/index';
+export { default } from './components/radio-group/index';