@vinyasa/form 1.0.22

package/dist/esm/components/multi-select/MultiSelect.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+export interface MultiSelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    emptyMessage?: ReactNode;
+    /** Caps how many selected-item chips render before collapsing the rest into a "+n" badge. Defaults to 2. */
+    maxVisibleChips?: number;
+    /**
+     * Replaces the built-in chip-row trigger entirely — passed straight
+     * through to Popover.Trigger's `asChild`, so it keeps the same open/close
+     * click and keyboard wiring. The element is responsible for its own
+     * styling, accessibility attributes, and displaying the current
+     * selection (the built-in per-chip remove buttons don't come with it).
+     */
+    trigger?: ReactNode;
+    id?: string;
+}
+declare const MultiSelect: {
+    ({ options, value, defaultValue, onValueChange, placeholder, label, description, error, required, size, emptyMessage, maxVisibleChips, trigger, id: idProp, }: MultiSelectProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default MultiSelect;

package/dist/esm/components/multi-select/index.d.ts

@@ -0,0 +1,3 @@
+import MultiSelect from './MultiSelect';
+export default MultiSelect;
+export type { MultiSelectOption, MultiSelectProps } from './MultiSelect';

package/dist/esm/components/number-input/NumberInput.css.d.ts

@@ -0,0 +1,51 @@
+export declare const group: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            fontSize: `var(--${string})`;
+        };
+        md: {
+            fontSize: `var(--${string})`;
+        };
+        lg: {
+            fontSize: `var(--${string})`;
+        };
+    };
+    invalid: {
+        true: {
+            borderColor: `var(--${string})`;
+        };
+    };
+    disabled: {
+        true: {
+            opacity: `var(--${string})`;
+        };
+    };
+}>;
+export declare const groupButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            width: "1.75rem";
+        };
+        md: {
+            width: "2rem";
+        };
+        lg: {
+            width: "2.25rem";
+        };
+    };
+}>;
+export declare const groupButtonLeading: string;
+export declare const groupButtonTrailing: string;
+export declare const groupInput: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            padding: `var(--${string}) 0`;
+        };
+        md: {
+            padding: `var(--${string}) 0`;
+        };
+        lg: {
+            padding: `var(--${string}) 0`;
+        };
+    };
+}>;

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

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: NumberInputSize;
+    /** Shows +/- stepper buttons that call the native stepUp/stepDown. Defaults to true. */
+    showSteppers?: boolean;
+}
+declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default NumberInput;

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

@@ -0,0 +1,3 @@
+import NumberInput from './NumberInput';
+export default NumberInput;
+export type { NumberInputProps, NumberInputSize } from './NumberInput';

package/dist/esm/components/otp-input/OtpInput.css.d.ts

@@ -0,0 +1,6 @@
+export declare const group: string;
+export declare const groupDisabled: string;
+export declare const slot: string;
+export declare const slotActive: string;
+export declare const slotInvalid: string;
+export declare const fakeCaret: string;

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface OtpInputProps {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    /** Number of digit slots. Defaults to 6. */
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    id?: string;
+}
+declare const OtpInput: import("react").ForwardRefExoticComponent<OtpInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default OtpInput;

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

@@ -0,0 +1,3 @@
+import OtpInput from './OtpInput';
+export default OtpInput;
+export type { OtpInputProps } from './OtpInput';

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

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type PasswordInputSize = 'sm' | 'md' | 'lg';
+export interface PasswordInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: PasswordInputSize;
+}
+declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default PasswordInput;

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

@@ -0,0 +1,3 @@
+import PasswordInput from './PasswordInput';
+export default PasswordInput;
+export type { PasswordInputProps, PasswordInputSize } from './PasswordInput';

package/dist/esm/components/radio-group/RadioGroup.css.d.ts

@@ -0,0 +1,3 @@
+export declare const root: string;
+export declare const item: string;
+export declare const indicator: string;

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

@@ -0,0 +1,12 @@
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { type ReactNode } from 'react';
+export interface RadioOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'children'> {
+    options: RadioOption[];
+}
+declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

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

@@ -0,0 +1,3 @@
+import RadioGroup from './RadioGroup';
+export default RadioGroup;
+export type { RadioGroupProps, RadioOption } from './RadioGroup';

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

@@ -0,0 +1,11 @@
+import { type SliderProps } from '../slider/Slider';
+export interface RangeSliderProps extends Omit<SliderProps, 'value' | 'defaultValue' | 'label' | 'minStepsBetweenThumbs'> {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    minLabel?: string;
+    maxLabel?: string;
+    /** Minimum gap, in steps, enforced between the two thumbs. Defaults to 1. */
+    minStepsBetweenThumbs?: number;
+}
+declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default RangeSlider;

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

@@ -0,0 +1,3 @@
+import RangeSlider from './RangeSlider';
+export default RangeSlider;
+export type { RangeSliderProps } from './RangeSlider';

package/dist/esm/components/rich-text-editor/RichTextEditor.css.d.ts

@@ -0,0 +1,5 @@
+export declare const wrapper: string;
+export declare const wrapperInvalid: string;
+export declare const toolbar: string;
+export declare const divider: string;
+export declare const content: string;

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+export interface RichTextEditorProps {
+    /** HTML content. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (html: string) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+}
+declare const RichTextEditor: {
+    ({ value, defaultValue, onValueChange, label, description, error, required, disabled, id: idProp, }: RichTextEditorProps): import("react").JSX.Element | null;
+    displayName: string;
+};
+export default RichTextEditor;

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

@@ -0,0 +1,3 @@
+import RichTextEditor from './RichTextEditor';
+export default RichTextEditor;
+export type { RichTextEditorProps } from './RichTextEditor';

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

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type SearchInputSize = 'sm' | 'md' | 'lg';
+export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: SearchInputSize;
+    /** Shows a clear button once there's a value; omit to hide it entirely. */
+    onClear?: () => void;
+}
+declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default SearchInput;

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

@@ -0,0 +1,3 @@
+import SearchInput from './SearchInput';
+export default SearchInput;
+export type { SearchInputProps, SearchInputSize } from './SearchInput';

package/dist/esm/components/select/Select.css.d.ts

@@ -0,0 +1,8 @@
+export declare const trigger: string;
+export declare const placeholder: string;
+export declare const triggerText: string;
+export declare const icon: string;
+export declare const content: string;
+export declare const viewport: string;
+export declare const item: string;
+export declare const itemIndicator: string;

package/dist/esm/components/select/Select.d.ts

@@ -0,0 +1,29 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import { type ReactNode } from 'react';
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<RadixSelect.SelectProps, 'children'> {
+    options: SelectOption[];
+    placeholder?: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Replaces the built-in trigger button entirely — passed straight through
+     * to Select.Trigger's `asChild`, so it keeps the same open/close click
+     * and keyboard wiring. A custom trigger loses `RadixSelect.Value`'s
+     * automatic selected-item display; import `@radix-ui/react-select`
+     * directly to compose `Select.Value`/`Select.Icon` inside it if needed.
+     */
+    trigger?: ReactNode;
+}
+declare const Select: {
+    ({ options, placeholder: placeholderText, label, description, error, required, size, trigger, ...rest }: SelectProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default Select;

package/dist/esm/components/select/index.d.ts

@@ -0,0 +1,3 @@
+import Select from './Select';
+export default Select;
+export type { SelectOption, SelectProps } from './Select';

package/dist/esm/components/slider/Slider.css.d.ts

@@ -0,0 +1,4 @@
+export declare const root: string;
+export declare const track: string;
+export declare const range: string;
+export declare const thumb: string;

package/dist/esm/components/slider/Slider.d.ts

@@ -0,0 +1,12 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+export interface SliderProps extends Omit<RadixSlider.SliderProps, 'defaultValue'> {
+    /**
+     * Accessible name for each thumb. A single string is reused for every
+     * thumb; an array assigns one label per thumb by index (used by
+     * RangeSlider for distinct "Minimum"/"Maximum" labels).
+     */
+    label?: string | string[];
+    defaultValue?: number[];
+}
+declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Slider;

package/dist/esm/components/slider/index.d.ts

@@ -0,0 +1,3 @@
+import Slider from './Slider';
+export default Slider;
+export type { SliderProps } from './Slider';

package/dist/esm/components/switch/Switch.css.d.ts

@@ -0,0 +1,2 @@
+export declare const root: string;
+export declare const thumb: string;

package/dist/esm/components/switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+import { type ReactNode } from 'react';
+export interface SwitchProps extends RadixSwitch.SwitchProps {
+    label?: ReactNode;
+}
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/dist/esm/components/switch/index.d.ts

@@ -0,0 +1,3 @@
+import Switch from './Switch';
+export default Switch;
+export type { SwitchProps } from './Switch';

package/dist/esm/components/tags-input/TagsInput.css.d.ts

@@ -0,0 +1 @@
+export declare const tagInput: string;

package/dist/esm/components/tags-input/TagsInput.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+export interface TagsInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Rejects further tags once this many are present. */
+    max?: number;
+    disabled?: boolean;
+    id?: string;
+}
+declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TagsInput;

package/dist/esm/components/tags-input/index.d.ts

@@ -0,0 +1,3 @@
+import TagsInput from './TagsInput';
+export default TagsInput;
+export type { TagsInputProps } from './TagsInput';

package/dist/esm/components/textarea/Textarea.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export interface TextareaProps extends Omit<ComponentPropsWithoutRef<'textarea'>, 'size'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: TextareaSize;
+    /** Grows the textarea's height to fit its content instead of scrolling. */
+    autoResize?: boolean;
+}
+declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/dist/esm/components/textarea/index.d.ts

@@ -0,0 +1,3 @@
+import Textarea from './Textarea';
+export default Textarea;
+export type { TextareaProps, TextareaSize } from './Textarea';

package/dist/esm/components/time-picker/TimePicker.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+export interface TimePickerProps {
+    /** 24-hour "HH:mm", matching a native `<input type="time">`'s own value format. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (time: string) => void;
+    placeholder?: string;
+    /** date-fns format string for the trigger's display text. Defaults to 'h:mm a' (e.g. "2:30 PM"). */
+    timeFormat?: string;
+    /** Interval, in minutes, between generated time options spanning the day. Defaults to 30. */
+    stepMinutes?: number;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /**
+     * Replaces the built-in trigger button entirely — passed straight through
+     * to Popover.Trigger's `asChild`, so it keeps the same open/close click
+     * and keyboard wiring. The element is responsible for its own styling and
+     * accessibility attributes (id, aria-describedby, disabled) since those
+     * aren't applied automatically the way they are to the default button.
+     */
+    trigger?: ReactNode;
+    id?: string;
+}
+declare const TimePicker: {
+    ({ value, defaultValue, onValueChange, placeholder, timeFormat, stepMinutes, label, description, error, required, size, disabled, trigger, id: idProp, }: TimePickerProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default TimePicker;

package/dist/esm/components/time-picker/index.d.ts

@@ -0,0 +1,3 @@
+import TimePicker from './TimePicker';
+export default TimePicker;
+export type { TimePickerProps } from './TimePicker';

package/dist/esm/components/toggle-button/ToggleButton.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps, type ButtonVariant } from '@vinyasa/button';
+export interface ToggleButtonProps extends Omit<ButtonProps, 'variant'> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Button variant while pressed. Defaults to 'primary'. */
+    pressedVariant?: ButtonVariant;
+    /** Button variant while not pressed. Defaults to 'outline'. */
+    unpressedVariant?: ButtonVariant;
+}
+declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default ToggleButton;

package/dist/esm/components/toggle-button/index.d.ts

@@ -0,0 +1,3 @@
+import ToggleButton from './ToggleButton';
+export default ToggleButton;
+export type { ToggleButtonProps } from './ToggleButton';

package/dist/esm/date-picker.css

@@ -0,0 +1,153 @@
+._4znv390 {
+  z-index: var(--vinyasa-z-index-dropdown);
+  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);
+}
+
+._4znv391 {
+  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;
+}
+
+._4znv392 {
+  color: var(--vinyasa-text-muted);
+}
+
+._4znv393 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+._4znv394 {
+  color: var(--vinyasa-text-muted);
+  flex-shrink: 0;
+  display: flex;
+}
+
+._4znv395 {
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  color: var(--vinyasa-on-secondary);
+}
+
+._4znv396 {
+  gap: var(--vinyasa-space4);
+  display: flex;
+}
+
+._4znv397 {
+  position: relative;
+}
+
+._4znv398 {
+  height: 2rem;
+  font-weight: var(--vinyasa-font-weight-semibold);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+._4znv399 {
+  pointer-events: none;
+  justify-content: space-between;
+  align-items: center;
+  height: 2rem;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+._4znv39a {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--vinyasa-on-secondary);
+  cursor: pointer;
+  pointer-events: auto;
+  background-color: #0000;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+._4znv39a:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+._4znv39a: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;
+}
+
+._4znv39b {
+  width: 2rem;
+  font-size: var(--vinyasa-font-size-xs);
+  font-weight: var(--vinyasa-font-weight-medium);
+  color: var(--vinyasa-text-muted);
+  text-align: center;
+}
+
+._4znv39c {
+  text-align: center;
+  padding: 0;
+}
+
+._4znv39d {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 2rem;
+  height: 2rem;
+  color: var(--vinyasa-on-secondary);
+  cursor: pointer;
+  background-color: #0000;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+._4znv39d:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+._4znv39d: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;
+}
+
+._4znv39e {
+  box-shadow: inset 0 0 0 1.5px var(--vinyasa-primary);
+  font-weight: var(--vinyasa-font-weight-semibold);
+}
+
+._4znv39f {
+  color: var(--vinyasa-text-muted);
+}
+
+._4znv39g {
+  color: var(--vinyasa-text-muted);
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._4znv39h, ._4znv39h:hover {
+  background-color: var(--vinyasa-primary);
+  color: var(--vinyasa-on-primary);
+}
+

package/dist/esm/date-picker.d.ts

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