@vinyasa/form 1.0.22

package/dist/esm/radio-group.js

@@ -0,0 +1,44 @@
+import "./radio-group.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { controlRow, controlLabel } from "./2995.js";
+import * as __rspack_external__radix_ui_react_radio_group_e8f239af from "@radix-ui/react-radio-group";
+var indicator = 'n31tav2';
+var item = 'n31tav1';
+var root = 'n31tav0';
+const RadioGroup = /*#__PURE__*/ forwardRef(({ options, className, ...rest }, ref)=>{
+    const generatedName = useId();
+    const classes = className ? `${root} ${className}` : root;
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_radio_group_e8f239af.Root, {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: options.map((option)=>{
+            const optionId = `${generatedName}-${option.value}`;
+            return /*#__PURE__*/ jsxs("div", {
+                className: controlRow,
+                children: [
+                    /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_radio_group_e8f239af.Item, {
+                        value: option.value,
+                        id: optionId,
+                        disabled: option.disabled,
+                        className: item,
+                        children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_radio_group_e8f239af.Indicator, {
+                            className: indicator
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("label", {
+                        htmlFor: optionId,
+                        className: controlLabel,
+                        children: option.label
+                    })
+                ]
+            }, option.value);
+        })
+    });
+});
+RadioGroup.displayName = 'RadioGroup';
+const radio_group_RadioGroup = RadioGroup;
+const radio_group = radio_group_RadioGroup;
+export default radio_group;
+export { radio_group as RadioGroup };

package/dist/esm/range-slider.d.ts

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

package/dist/esm/range-slider.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { slider_Slider } from "./27.js";
+const RangeSlider = /*#__PURE__*/ forwardRef(({ value, defaultValue = [
+    0,
+    100
+], minLabel = 'Minimum', maxLabel = 'Maximum', minStepsBetweenThumbs = 1, ...rest }, ref)=>/*#__PURE__*/ jsx(slider_Slider, {
+        ref: ref,
+        value: value,
+        defaultValue: defaultValue,
+        label: [
+            minLabel,
+            maxLabel
+        ],
+        minStepsBetweenThumbs: minStepsBetweenThumbs,
+        ...rest
+    }));
+RangeSlider.displayName = 'RangeSlider';
+const range_slider_RangeSlider = RangeSlider;
+const range_slider = range_slider_RangeSlider;
+export default range_slider;
+export { range_slider as RangeSlider };

package/dist/esm/rich-text-editor.css

@@ -0,0 +1,74 @@
+._1lw5bep0 {
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  border-radius: var(--vinyasa-radius-sm);
+  overflow: hidden;
+}
+
+._1lw5bep0: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;
+}
+
+._1lw5bep1 {
+  border-color: var(--vinyasa-error);
+}
+
+._1lw5bep2 {
+  gap: var(--vinyasa-space1);
+  padding: var(--vinyasa-space2);
+  border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  background-color: var(--vinyasa-secondary);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+._1lw5bep3 {
+  width: var(--vinyasa-border-width-thin);
+  background-color: var(--vinyasa-border-color-default);
+  margin: 0 var(--vinyasa-space1);
+  align-self: stretch;
+}
+
+._1lw5bep4 {
+  min-height: 8rem;
+  padding: var(--vinyasa-space3);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  color: var(--vinyasa-on-secondary);
+}
+
+._1lw5bep4:focus {
+  outline: none;
+}
+
+._1lw5bep4 p {
+  margin: 0 0 var(--vinyasa-space2);
+}
+
+._1lw5bep4 h1, ._1lw5bep4 h2, ._1lw5bep4 h3 {
+  margin: var(--vinyasa-space3) 0 var(--vinyasa-space2);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  line-height: var(--vinyasa-line-height-tight);
+}
+
+._1lw5bep4 ul, ._1lw5bep4 ol {
+  margin: 0 0 var(--vinyasa-space2);
+  padding-left: var(--vinyasa-space5);
+}
+
+._1lw5bep4 blockquote {
+  margin: 0 0 var(--vinyasa-space2);
+  padding-left: var(--vinyasa-space3);
+  border-left: 2px solid var(--vinyasa-border-color-default);
+  color: var(--vinyasa-text-muted);
+}
+
+._1lw5bep4 code {
+  font-family: var(--vinyasa-font-family-mono);
+  font-size: var(--vinyasa-font-size-xs);
+  background-color: var(--vinyasa-secondary);
+  border-radius: var(--vinyasa-radius-sm);
+  padding: .125rem .25rem;
+}
+

package/dist/esm/rich-text-editor.d.ts

@@ -0,0 +1,2 @@
+export * from './components/rich-text-editor/index';
+export { default } from './components/rich-text-editor/index';

package/dist/esm/rich-text-editor.js

@@ -0,0 +1,212 @@
+import "./rich-text-editor.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import starter_kit from "@tiptap/starter-kit";
+import { BoldIcon, ItalicIcon, ListIcon, ListOrderedIcon, QuoteIcon, RedoIcon, StrikethroughIcon, UndoIcon } from "@vinyasa/icons";
+import { useEffect, useId } from "react";
+import { field, describedByIds } from "./4557.js";
+import { toggle_button_ToggleButton } from "./3876.js";
+var content = '_1lw5bep4';
+var divider = '_1lw5bep3';
+var toolbar = '_1lw5bep2';
+var wrapper = '_1lw5bep0';
+var wrapperInvalid = '_1lw5bep1';
+const selectToolbarState = (editor)=>{
+    if (!editor) return {
+        bold: false,
+        italic: false,
+        strike: false,
+        bulletList: false,
+        orderedList: false,
+        blockquote: false,
+        canUndo: false,
+        canRedo: false
+    };
+    return {
+        bold: editor.isActive('bold'),
+        italic: editor.isActive('italic'),
+        strike: editor.isActive('strike'),
+        bulletList: editor.isActive('bulletList'),
+        orderedList: editor.isActive('orderedList'),
+        blockquote: editor.isActive('blockquote'),
+        canUndo: editor.can().undo(),
+        canRedo: editor.can().redo()
+    };
+};
+const RichTextEditor = ({ value, defaultValue = '', onValueChange, label, description, error, required, disabled, id: idProp })=>{
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const describedBy = describedByIds(id, {
+        description,
+        error
+    });
+    const editor = useEditor({
+        extensions: [
+            starter_kit
+        ],
+        content: value ?? defaultValue,
+        editable: !disabled,
+        immediatelyRender: false,
+        onUpdate: ({ editor: currentEditor })=>{
+            onValueChange?.(currentEditor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                id,
+                class: content,
+                ...describedBy ? {
+                    'aria-describedby': describedBy
+                } : {}
+            }
+        }
+    });
+    useEffect(()=>{
+        if (void 0 === value || !editor || value === editor.getHTML()) return;
+        editor.commands.setContent(value, {
+            emitUpdate: false
+        });
+    }, [
+        value,
+        editor
+    ]);
+    useEffect(()=>{
+        editor?.setEditable(!disabled);
+    }, [
+        disabled,
+        editor
+    ]);
+    const toolbarState = useEditorState({
+        editor,
+        selector: ({ editor: snapshotEditor })=>selectToolbarState(snapshotEditor)
+    });
+    if (!editor || !toolbarState) return null;
+    return /*#__PURE__*/ jsx(field, {
+        id: id,
+        label: label,
+        description: description,
+        error: error,
+        required: required,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: error ? `${wrapper} ${wrapperInvalid}` : wrapper,
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: toolbar,
+                    children: [
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: toolbarState.bold,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().toggleBold().run();
+                            },
+                            disabled: disabled,
+                            "aria-label": "Bold",
+                            children: /*#__PURE__*/ jsx(BoldIcon, {})
+                        }),
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: toolbarState.italic,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().toggleItalic().run();
+                            },
+                            disabled: disabled,
+                            "aria-label": "Italic",
+                            children: /*#__PURE__*/ jsx(ItalicIcon, {})
+                        }),
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: toolbarState.strike,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().toggleStrike().run();
+                            },
+                            disabled: disabled,
+                            "aria-label": "Strikethrough",
+                            children: /*#__PURE__*/ jsx(StrikethroughIcon, {})
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: divider,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: toolbarState.bulletList,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().toggleBulletList().run();
+                            },
+                            disabled: disabled,
+                            "aria-label": "Bullet list",
+                            children: /*#__PURE__*/ jsx(ListIcon, {})
+                        }),
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: toolbarState.orderedList,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().toggleOrderedList().run();
+                            },
+                            disabled: disabled,
+                            "aria-label": "Ordered list",
+                            children: /*#__PURE__*/ jsx(ListOrderedIcon, {})
+                        }),
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: toolbarState.blockquote,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().toggleBlockquote().run();
+                            },
+                            disabled: disabled,
+                            "aria-label": "Blockquote",
+                            children: /*#__PURE__*/ jsx(QuoteIcon, {})
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            className: divider,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: false,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().undo().run();
+                            },
+                            disabled: disabled ?? !toolbarState.canUndo,
+                            "aria-label": "Undo",
+                            children: /*#__PURE__*/ jsx(UndoIcon, {})
+                        }),
+                        /*#__PURE__*/ jsx(toggle_button_ToggleButton, {
+                            size: "sm",
+                            unpressedVariant: "ghost",
+                            pressedVariant: "secondary",
+                            pressed: false,
+                            onPressedChange: ()=>{
+                                editor.chain().focus().redo().run();
+                            },
+                            disabled: disabled ?? !toolbarState.canRedo,
+                            "aria-label": "Redo",
+                            children: /*#__PURE__*/ jsx(RedoIcon, {})
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(EditorContent, {
+                    editor: editor
+                })
+            ]
+        })
+    });
+};
+RichTextEditor.displayName = 'RichTextEditor';
+const rich_text_editor_RichTextEditor = RichTextEditor;
+const rich_text_editor = rich_text_editor_RichTextEditor;
+export default rich_text_editor;
+export { rich_text_editor as RichTextEditor };

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

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

package/dist/esm/search-input.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon, XIcon } from "@vinyasa/icons";
+import { forwardRef, useId } from "react";
+import { fieldControl, fieldControlWithLeadingIcon, fieldIconLeading, fieldControlWithTrailingIcon, fieldGroup, fieldIconTrailing, fieldIconButton } from "./2995.js";
+import { field, describedByIds } from "./4557.js";
+const SearchInput = /*#__PURE__*/ forwardRef(({ label, description, error, required, size, onClear, value, id: idProp, className, ...rest }, ref)=>{
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const showClear = Boolean(onClear) && Boolean(value);
+    const classes = [
+        fieldControl({
+            size,
+            invalid: Boolean(error)
+        }),
+        fieldControlWithLeadingIcon,
+        showClear ? fieldControlWithTrailingIcon : '',
+        className ?? ''
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsx(field, {
+        id: id,
+        label: label,
+        description: description,
+        error: error,
+        required: required,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: fieldGroup,
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: fieldIconLeading,
+                    "aria-hidden": "true",
+                    children: /*#__PURE__*/ jsx(SearchIcon, {})
+                }),
+                /*#__PURE__*/ jsx("input", {
+                    ref: ref,
+                    id: id,
+                    type: "search",
+                    value: value,
+                    className: classes,
+                    required: required,
+                    "aria-invalid": error ? true : void 0,
+                    "aria-describedby": describedByIds(id, {
+                        description,
+                        error
+                    }),
+                    ...rest
+                }),
+                showClear ? /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: `${fieldIconTrailing} ${fieldIconButton}`,
+                    onClick: onClear,
+                    "aria-label": "Clear search",
+                    children: /*#__PURE__*/ jsx(XIcon, {})
+                }) : null
+            ]
+        })
+    });
+});
+SearchInput.displayName = 'SearchInput';
+const search_input_SearchInput = SearchInput;
+const search_input = search_input_SearchInput;
+export default search_input;
+export { search_input as SearchInput };

package/dist/esm/select.css

@@ -0,0 +1,73 @@
+._1lum7te0 {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  text-align: left;
+  cursor: pointer;
+  background-color: #0000;
+  width: 100%;
+  min-width: 10rem;
+  max-width: 20rem;
+  display: inline-flex;
+}
+
+._1lum7te1 {
+  color: var(--vinyasa-text-muted);
+}
+
+._1lum7te2 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+._1lum7te3 {
+  color: var(--vinyasa-text-muted);
+  flex-shrink: 0;
+  display: flex;
+}
+
+._1lum7te4 {
+  z-index: var(--vinyasa-z-index-dropdown);
+  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);
+  overflow: hidden;
+}
+
+._1lum7te5 {
+  padding: var(--vinyasa-space1);
+}
+
+._1lum7te6 {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  padding: var(--vinyasa-space2) var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  font-size: var(--vinyasa-font-size-sm);
+  color: var(--vinyasa-on-secondary);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  display: flex;
+}
+
+._1lum7te6[data-highlighted] {
+  background-color: var(--vinyasa-secondary);
+  outline: none;
+}
+
+._1lum7te6[data-disabled] {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._1lum7te7 {
+  color: var(--vinyasa-primary);
+  display: flex;
+}
+

package/dist/esm/select.d.ts

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

package/dist/esm/select.js

@@ -0,0 +1,87 @@
+import "./select.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "@vinyasa/icons";
+import { useId } from "react";
+import { field, describedByIds } from "./4557.js";
+import { fieldControl } from "./2995.js";
+import * as __rspack_external__radix_ui_react_select_36a82244 from "@radix-ui/react-select";
+var content = '_1lum7te4';
+var icon = '_1lum7te3';
+var item = '_1lum7te6';
+var itemIndicator = '_1lum7te7';
+var placeholder = '_1lum7te1';
+var Select_css_trigger = '_1lum7te0';
+var triggerText = '_1lum7te2';
+var viewport = '_1lum7te5';
+const Select = ({ options, placeholder: placeholderText, label, description, error, required, size, trigger, ...rest })=>{
+    const generatedId = useId();
+    const id = generatedId;
+    return /*#__PURE__*/ jsx(field, {
+        id: id,
+        label: label,
+        description: description,
+        error: error,
+        required: required,
+        children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Root, {
+            ...rest,
+            children: [
+                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Trigger, {
+                    asChild: void 0 !== trigger,
+                    ...void 0 === trigger ? {
+                        id,
+                        className: `${fieldControl({
+                            size,
+                            invalid: Boolean(error)
+                        })} ${Select_css_trigger}`,
+                        'aria-describedby': describedByIds(id, {
+                            description,
+                            error
+                        })
+                    } : {},
+                    children: trigger ?? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Value, {
+                                className: triggerText,
+                                placeholder: /*#__PURE__*/ jsx("span", {
+                                    className: placeholder,
+                                    children: placeholderText
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Icon, {
+                                className: icon,
+                                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Content, {
+                    className: content,
+                    position: "popper",
+                    sideOffset: 4,
+                    children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Viewport, {
+                        className: viewport,
+                        children: options.map((option)=>/*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Item, {
+                                value: option.value,
+                                disabled: option.disabled,
+                                className: item,
+                                children: [
+                                    /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemText, {
+                                        children: option.label
+                                    }),
+                                    /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemIndicator, {
+                                        className: itemIndicator,
+                                        children: /*#__PURE__*/ jsx(CheckIcon, {})
+                                    })
+                                ]
+                            }, option.value))
+                    })
+                })
+            ]
+        })
+    });
+};
+Select.displayName = 'Select';
+const select_Select = Select;
+const components_select = select_Select;
+export default components_select;
+export { components_select as Select };

package/dist/esm/selectPopover.css.d.ts

@@ -0,0 +1,17 @@
+export declare const content: string;
+export declare const list: string;
+export declare const item: string;
+export declare const itemIndicator: string;
+export declare const empty: string;
+export declare const placeholder: string;
+export declare const trigger: string;
+export declare const triggerIcon: string;
+export declare const triggerText: string;
+export declare const searchWrapper: string;
+export declare const searchIcon: string;
+export declare const searchInput: string;
+export declare const triggerBox: string;
+export declare const chipRow: string;
+export declare const chip: string;
+export declare const chipOverflow: string;
+export declare const chipRemove: string;

package/dist/esm/slider.d.ts

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

package/dist/esm/slider.js

@@ -0,0 +1,4 @@
+import { slider_Slider } from "./27.js";
+const slider = slider_Slider;
+export default slider;
+export { slider as Slider };

package/dist/esm/switch.css

@@ -0,0 +1,44 @@
+._1u7tp1u0 {
+  all: unset;
+  border-radius: var(--vinyasa-radius-full);
+  background-color: var(--vinyasa-border-color-default);
+  cursor: pointer;
+  width: 2.25rem;
+  height: 1.25rem;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+}
+
+._1u7tp1u0[data-state="checked"] {
+  background-color: var(--vinyasa-primary);
+}
+
+._1u7tp1u0: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;
+}
+
+._1u7tp1u0[data-disabled] {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._1u7tp1u1 {
+  border-radius: var(--vinyasa-radius-full);
+  background-color: var(--vinyasa-on-primary);
+  width: 1rem;
+  height: 1rem;
+  box-shadow: var(--vinyasa-shadow-sm);
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  display: block;
+  transform: translateX(.125rem);
+}
+
+._1u7tp1u1[data-state="checked"] {
+  transform: translateX(1.125rem);
+}
+

package/dist/esm/switch.d.ts

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