vuiii 1.0.0-beta.82 → 1.0.0-beta.83

package/dist/arrow-top-right-on-square-ncaAU5g2.js

@@ -0,0 +1,7 @@
+const o = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+</svg>
+`;
+export {
+  o as default
+};

package/dist/components/Autocomplete.vue.d.ts

@@ -1,6 +1,76 @@
 import { InputWrapperProps, InputWrapperSlots } from './InputWrapper.vue';
 import { Extractor, Option } from '../types';
 export type AutocompleteFilterFn<T = any> = (option: Option<T>, query: string) => boolean;
+/**
+ * Autocomplete input with dropdown suggestions and keyboard navigation.
+ * Supports custom option rendering, filtering, and various data formats.
+ *
+ * @see {@link module:normalizeOptions} for supported option formats and extractor props
+ *
+ * @component Autocomplete
+ * @generic T - The type of option data
+ *
+ * @example
+ * // Basic usage with string array
+ * import { Autocomplete } from 'vuiii'
+ *
+ * <Autocomplete v-model="search" :options="['Apple', 'Banana', 'Cherry']" />
+ *
+ * @example
+ * // With object options and extractors
+ * const users = [
+ *   { id: 1, name: 'John Doe', email: 'john@example.com' },
+ *   { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
+ * ]
+ *
+ * <Autocomplete
+ *   v-model="search"
+ *   :options="users"
+ *   option-label="name"
+ *   option-value="id"
+ *   option-description="email"
+ *   @select="(option) => selectedUser = option.data"
+ * />
+ *
+ * @example
+ * // With custom filter function
+ * const customFilter = (option, query) => {
+ *   return option.label.startsWith(query)
+ * }
+ *
+ * <Autocomplete
+ *   v-model="search"
+ *   :options="options"
+ *   :filter="customFilter"
+ * />
+ *
+ * @example
+ * // With custom option rendering
+ * <Autocomplete v-model="search" :options="users" option-label="name">
+ *   <template #option="{ option, isHighlighted }">
+ *     <div :class="{ highlighted: isHighlighted }">
+ *       <strong>{{ option.label }}</strong>
+ *       <small>{{ option.description }}</small>
+ *     </div>
+ *   </template>
+ * </Autocomplete>
+ *
+ * @example
+ * // Programmatic control via ref
+ * const autocompleteRef = ref<AutocompleteRef>()
+ *
+ * autocompleteRef.value?.open()
+ * autocompleteRef.value?.close()
+ * autocompleteRef.value?.focus()
+ *
+ * @slot prefix - Content before the input
+ * @slot suffix - Content after the input
+ * @slot option - Custom option rendering. Props: { option, index, isHighlighted }
+ *
+ * @emits select - When an option is selected. Payload: Option<T>
+ * @emits prefix-icon-click - When prefix icon is clicked
+ * @emits suffix-icon-click - When suffix icon is clicked
+ */
 export type AutocompleteRef = {
     inputElement: HTMLInputElement;
     focus: () => void;

package/dist/components/Checkbox.vue.d.ts

@@ -1,10 +1,75 @@
 import { InputSize, ValueParser } from '../types';
+/**
+ * Checkbox input with toggle/switch variant and indeterminate state support.
+ * Can be used standalone or within CheckboxGroup.
+ *
+ * @component Checkbox
+ *
+ * @example
+ * // Basic usage
+ * import { Checkbox } from 'vuiii'
+ *
+ * <Checkbox v-model="accepted" label="I accept the terms" />
+ *
+ * @example
+ * // Switch variant (toggle)
+ * <Checkbox v-model="enabled" switch label="Enable notifications" />
+ *
+ * @example
+ * // With description
+ * <Checkbox
+ *   v-model="newsletter"
+ *   label="Subscribe to newsletter"
+ *   description="Get weekly updates about new features"
+ * />
+ *
+ * @example
+ * // Required checkbox
+ * <Checkbox v-model="terms" required label="I agree to the terms" />
+ *
+ * @example
+ * // Indeterminate state (for "select all" patterns)
+ * <Checkbox
+ *   :model-value="allSelected"
+ *   :indeterminate="someSelected && !allSelected"
+ *   label="Select all"
+ *   @update:model-value="toggleAll"
+ * />
+ *
+ * @example
+ * // Different sizes
+ * <Checkbox v-model="small" size="small" label="Small" />
+ * <Checkbox v-model="normal" size="normal" label="Normal" />
+ * <Checkbox v-model="large" size="large" label="Large" />
+ *
+ * @example
+ * // Custom value parser (for non-boolean values)
+ * const yesNoParser = {
+ *   parse: (checked) => checked ? 'yes' : 'no',
+ *   stringify: (value) => value === 'yes'
+ * }
+ *
+ * <Checkbox v-model="answer" :value-parser="yesNoParser" label="Accept" />
+ *
+ * @example
+ * // Custom symbol slot
+ * <Checkbox v-model="checked">
+ *   <template #symbol="{ checked, disabled, indeterminate }">
+ *     <Icon :name="checked ? 'check-square' : 'square'" />
+ *   </template>
+ *   Custom checkbox label
+ * </Checkbox>
+ *
+ * @slot default - Label content (alternative to label prop)
+ * @slot symbol - Custom checkbox/switch symbol. Props: { checked, disabled, indeterminate, size }
+ */
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     modelValue?: any;
 } & {
     required?: boolean;
     disabled?: boolean;
     switch?: boolean;
+    indeterminate?: boolean;
     label?: string;
     description?: string;
     size?: InputSize;
@@ -17,6 +82,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     required?: boolean;
     disabled?: boolean;
     switch?: boolean;
+    indeterminate?: boolean;
     label?: string;
     description?: string;
     size?: InputSize;
@@ -30,6 +96,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     symbol?: (props: {
         checked: boolean;
         disabled: boolean;
+        indeterminate: boolean;
         size: InputSize;
     }) => any;
 }> & {
@@ -37,6 +104,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     symbol?: (props: {
         checked: boolean;
         disabled: boolean;
+        indeterminate: boolean;
         size: InputSize;
     }) => any;
 }>;

package/dist/components/Divider.vue.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Visual separator line for content sections.
+ * Can be horizontal (default) or vertical.
+ *
+ * @component Divider
+ *
+ * @example
+ * // Horizontal divider (default)
+ * import { Divider } from 'vuiii'
+ *
+ * <div>Section 1</div>
+ * <Divider />
+ * <div>Section 2</div>
+ *
+ * @example
+ * // Vertical divider (for inline content)
+ * <div style="display: flex; align-items: center;">
+ *   <span>Item 1</span>
+ *   <Divider orientation="vertical" />
+ *   <span>Item 2</span>
+ * </div>
+ *
+ * @example
+ * // In FormFields (using FORM_DIVIDER constant)
+ * import { FORM_DIVIDER } from 'vuiii'
+ *
+ * const fields = [
+ *   { name: 'name', component: Input, label: 'Name' },
+ *   FORM_DIVIDER,
+ *   { name: 'email', component: Input, label: 'Email' }
+ * ]
+ */
+type __VLS_Props = {
+    orientation?: "horizontal" | "vertical";
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLHRElement>;
+export default _default;

package/dist/components/FormFields.vue.d.ts

@@ -1,27 +1,26 @@
-import { FormField, ObjectKeyOrAnyString, ValidationFieldResults } from '../types';
+import { FormFieldOrRow, ObjectKeyOrAnyString, ValidationFieldResults } from '../types';
 declare const _default: <Data extends {}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:model-value"?: ((value: any) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:model-value"> & {
-        fields: FormField<Data>[];
+        fields: FormFieldOrRow<Data>[];
         modelValue: any;
         validationResults?: Partial<Record<ObjectKeyOrAnyString<Data>, ValidationFieldResults>>;
+        orientation?: "vertical" | "horizontal";
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: Partial<Record<`field:${string}`, (_: {
         index: number;
-        value: unknown;
-        required: boolean;
-        disabled: boolean;
-        invalid: boolean | undefined;
-        errorMessage: string | undefined;
         name: ObjectKeyOrAnyString<Data>;
         label?: string;
         description?: string;
         hint?: string;
+        required?: boolean | ((value: any) => boolean);
+        disabled?: boolean | ((value: any) => boolean);
         component: string | import('vue').Component | import('vue').AsyncComponentLoader;
         props?: Record<string, unknown>;
+        value?: import('../types').FormFieldValue<Data> | undefined;
     }) => any>>;
     emit: (evt: "update:model-value", value: any) => void;
 }>) => import('vue').VNode & {

package/dist/components/FormGroup.vue.d.ts

@@ -1,3 +1,58 @@
+/**
+ * Form field wrapper with label, description, hint, and error message support.
+ * Used by FormFields internally, but can be used standalone for custom form layouts.
+ *
+ * @component FormGroup
+ *
+ * @example
+ * // Basic usage with label
+ * import { FormGroup, Input } from 'vuiii'
+ *
+ * <FormGroup label="Email">
+ *   <Input v-model="email" type="email" />
+ * </FormGroup>
+ *
+ * @example
+ * // With description and hint
+ * <FormGroup
+ *   label="Password"
+ *   description="Choose a strong password for your account"
+ *   hint="Must be at least 8 characters"
+ * >
+ *   <Input v-model="password" type="password" />
+ * </FormGroup>
+ *
+ * @example
+ * // With required indicator and validation error
+ * <FormGroup
+ *   label="Username"
+ *   required
+ *   :error="errors.username"
+ * >
+ *   <Input v-model="username" :invalid="!!errors.username" />
+ * </FormGroup>
+ *
+ * @example
+ * // With custom label slot
+ * <FormGroup>
+ *   <template #label>
+ *     <span>Email</span>
+ *     <Icon name="info" v-tooltip="'We will never share your email'" />
+ *   </template>
+ *   <Input v-model="email" />
+ * </FormGroup>
+ *
+ * @example
+ * // Boolean error (shows invalid state without message)
+ * <FormGroup label="Field" :error="hasError">
+ *   <Input v-model="value" :invalid="hasError" />
+ * </FormGroup>
+ *
+ * @slot default - The form input element
+ * @slot label - Custom label content (replaces label prop)
+ * @slot description - Custom description content (replaces description prop)
+ * @slot hint - Custom hint content (replaces hint prop)
+ */
 type __VLS_Props = {
     label?: string;
     for?: string;

package/dist/components/Input.vue.d.ts

@@ -1,4 +1,64 @@
 import { InputWrapperProps, InputWrapperSlots } from './InputWrapper.vue';
+/**
+ * Text input component with icon support, size variants, and validation states.
+ * Wraps native input with InputWrapper for consistent styling.
+ *
+ * @component Input
+ *
+ * @example
+ * // Basic usage
+ * import { Input } from 'vuiii'
+ *
+ * <Input v-model="name" placeholder="Enter your name" />
+ *
+ * @example
+ * // Different input types (passed via attrs)
+ * <Input v-model="email" type="email" placeholder="Email" />
+ * <Input v-model="password" type="password" placeholder="Password" />
+ * <Input v-model="count" type="number" placeholder="Count" />
+ *
+ * @example
+ * // With icons
+ * <Input v-model="search" prefixIcon="magnifying-glass" placeholder="Search..." />
+ * <Input v-model="email" suffixIcon="envelope" placeholder="Email" />
+ *
+ * @example
+ * // With clickable icons (emits events)
+ * <Input
+ *   v-model="password"
+ *   :suffix-icon="showPassword ? 'eye-slash' : 'eye'"
+ *   :type="showPassword ? 'text' : 'password'"
+ *   @suffix-icon-click="showPassword = !showPassword"
+ * />
+ *
+ * @example
+ * // Different sizes
+ * <Input v-model="text" size="small" placeholder="Small" />
+ * <Input v-model="text" size="normal" placeholder="Normal" />
+ * <Input v-model="text" size="large" placeholder="Large" />
+ *
+ * @example
+ * // Validation state
+ * <Input v-model="email" :invalid="!isValidEmail" placeholder="Email" />
+ *
+ * @example
+ * // Value as number or date (for type="number" or type="date")
+ * <Input v-model="count" type="number" value-as-number />
+ * <Input v-model="date" type="date" value-as-date />
+ *
+ * @example
+ * // Programmatic control via ref
+ * const inputRef = ref<InputRef>()
+ *
+ * inputRef.value?.focus()
+ * inputRef.value?.select()
+ *
+ * @slot prefix - Content before the input (replaces prefixIcon)
+ * @slot suffix - Content after the input (replaces suffixIcon)
+ *
+ * @emits prefix-icon-click - When prefix icon is clicked
+ * @emits suffix-icon-click - When suffix icon is clicked
+ */
 export type InputRef = {
     input: HTMLInputElement;
     focus: () => void;
@@ -8,6 +68,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     modelValue?: string | number | Date | null | undefined;
 } & InputWrapperProps & {
     inputClass?: any;
+    valueAsNumber?: boolean;
+    valueAsDate?: boolean;
 }, {
     input: import('vue').Ref<any, any>;
     focus: () => any;
@@ -20,6 +82,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     modelValue?: string | number | Date | null | undefined;
 } & InputWrapperProps & {
     inputClass?: any;
+    valueAsNumber?: boolean;
+    valueAsDate?: boolean;
 }> & Readonly<{
     "onPrefix-icon-click"?: (() => any) | undefined;
     "onSuffix-icon-click"?: (() => any) | undefined;

package/dist/components/RadioGroup.vue.d.ts

@@ -1,4 +1,71 @@
 import { Extractor, Option, ValueParser } from '../types';
+/**
+ * Radio button group for single selection from a list of options.
+ * Normalizes various option formats and supports custom value parsing.
+ *
+ * @see {@link module:normalizeOptions} for supported option formats and extractor props
+ *
+ * @component RadioGroup
+ *
+ * @example
+ * // Basic usage with string array
+ * import { RadioGroup } from 'vuiii'
+ *
+ * <RadioGroup v-model="color" :options="['Red', 'Green', 'Blue']" />
+ *
+ * @example
+ * // With object options and extractors
+ * const plans = [
+ *   { id: 'free', name: 'Free', info: '0$/month' },
+ *   { id: 'pro', name: 'Pro', info: '10$/month' },
+ *   { id: 'enterprise', name: 'Enterprise', info: 'Contact us' }
+ * ]
+ *
+ * <RadioGroup
+ *   v-model="selectedPlan"
+ *   :options="plans"
+ *   option-value="id"
+ *   option-label="name"
+ *   option-description="info"
+ * />
+ *
+ * @example
+ * // Inline layout (horizontal)
+ * <RadioGroup
+ *   v-model="size"
+ *   :options="['Small', 'Medium', 'Large']"
+ *   inline
+ * />
+ *
+ * @example
+ * // With type parsing
+ * <RadioGroup
+ *   v-model="quantity"
+ *   :options="[1, 2, 3, 4, 5]"
+ *   type="number"
+ * />
+ *
+ * @example
+ * // With custom option rendering
+ * <RadioGroup v-model="theme" :options="themes" option-value="id">
+ *   <template #default="{ option }">
+ *     <div class="theme-preview" :style="{ background: option.data.color }">
+ *       {{ option.label }}
+ *     </div>
+ *   </template>
+ * </RadioGroup>
+ *
+ * @example
+ * // With custom symbol slot
+ * <RadioGroup v-model="selected" :options="options">
+ *   <template #symbol="{ checked, disabled }">
+ *     <Icon :name="checked ? 'circle-dot' : 'circle'" />
+ *   </template>
+ * </RadioGroup>
+ *
+ * @slot default - Custom option content. Props: { option }
+ * @slot symbol - Custom radio symbol. Props: { checked, disabled }
+ */
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     modelValue?: any;
 } & {

package/dist/components/Select.vue.d.ts

@@ -1,4 +1,68 @@
 import { Extractor, InputSize, ValueParser } from '../types';
+/**
+ * Native select dropdown with support for various option formats and type parsing.
+ * Normalizes arrays, objects, and grouped options into a consistent format.
+ *
+ * @see {@link module:normalizeOptions} for supported option formats and extractor props
+ *
+ * @component Select
+ *
+ * @example
+ * // Basic usage with string array
+ * import { Select } from 'vuiii'
+ *
+ * <Select v-model="color" :options="['Red', 'Green', 'Blue']" />
+ *
+ * @example
+ * // With object array and extractors
+ * const countries = [
+ *   { code: 'us', name: 'United States' },
+ *   { code: 'uk', name: 'United Kingdom' }
+ * ]
+ *
+ * <Select
+ *   v-model="country"
+ *   :options="countries"
+ *   option-value="code"
+ *   option-label="name"
+ *   placeholder="Select a country"
+ * />
+ *
+ * @example
+ * // With key-value object options
+ * const statuses = { draft: 'Draft', published: 'Published', archived: 'Archived' }
+ *
+ * <Select v-model="status" :options="statuses" />
+ *
+ * @example
+ * // With grouped options (optgroup)
+ * const vehicles = [
+ *   { category: 'Cars', items: [{ id: 1, name: 'Sedan' }, { id: 2, name: 'SUV' }] },
+ *   { category: 'Bikes', items: [{ id: 3, name: 'Mountain' }, { id: 4, name: 'Road' }] }
+ * ]
+ *
+ * <Select
+ *   v-model="vehicle"
+ *   :options="vehicles"
+ *   group-label="category"
+ *   group-options="items"
+ *   option-value="id"
+ *   option-label="name"
+ * />
+ *
+ * @example
+ * // With type parsing (automatically converts string value to number)
+ * <Select v-model="count" :options="[1, 2, 3, 4, 5]" type="number" />
+ *
+ * @example
+ * // With custom value parser
+ * const dateParser = {
+ *   parse: (str) => new Date(str),
+ *   stringify: (date) => date.toISOString()
+ * }
+ *
+ * <Select v-model="date" :options="dates" :value-parser="dateParser" />
+ */
 declare const _default: import('vue').DefineComponent<{
     modelValue?: any;
 } & {

package/dist/components/Table.vue.d.ts

@@ -39,6 +39,8 @@ declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<type
         item: T;
         value: any;
         index: number;
+    }) => any; } & { [K_1 in `header:${string & {}}` | `header:${keyof T & string}`]: (props: {
+        column: TableColumn<T>;
     }) => any; } & {
         rowOptions?: (props: {
             item: T;
@@ -51,6 +53,8 @@ declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<type
         item: T;
         value: any;
         index: number;
+    }) => any; } & { [K_1 in `header:${string & {}}` | `header:${keyof T & string}`]: (props: {
+        column: TableColumn<T>;
     }) => any; } & {
         rowOptions?: (props: {
             item: T;

package/dist/components/Textarea.vue.d.ts

@@ -1,4 +1,48 @@
 import { InputWrapperProps, InputWrapperSlots } from './InputWrapper.vue';
+/**
+ * Multi-line text input with InputWrapper styling.
+ * Supports prefix icon and programmatic control.
+ *
+ * @component Textarea
+ *
+ * @example
+ * // Basic usage
+ * import { Textarea } from 'vuiii'
+ *
+ * <Textarea v-model="description" placeholder="Enter description..." />
+ *
+ * @example
+ * // With rows and placeholder
+ * <Textarea
+ *   v-model="content"
+ *   placeholder="Write your message..."
+ *   rows="5"
+ * />
+ *
+ * @example
+ * // With prefix icon
+ * <Textarea v-model="notes" prefix-icon="document-text" placeholder="Notes..." />
+ *
+ * @example
+ * // Validation state
+ * <Textarea v-model="bio" :invalid="errors.bio" placeholder="Bio" />
+ *
+ * @example
+ * // Disabled and readonly states
+ * <Textarea v-model="text" disabled />
+ * <Textarea v-model="text" readonly />
+ *
+ * @example
+ * // Programmatic control via ref
+ * const textareaRef = ref<TextareaRef>()
+ *
+ * textareaRef.value?.focus()
+ * textareaRef.value?.select()
+ *
+ * @slot prefix - Content before the textarea (replaces prefixIcon)
+ *
+ * @emits prefix-icon-click - When prefix icon is clicked
+ */
 export type TextareaRef = {
     focus: () => void;
     select: () => void;

package/dist/composables/useCursor.d.ts

@@ -1,4 +1,46 @@
 import { Ref } from 'vue';
+/**
+ * Manages cursor position for navigating through arrays.
+ * Used internally by [Autocomplete](/components/autocomplete) for keyboard navigation.
+ *
+ * @template T - The type of items in the array
+ * @param items - Array or ref to array of items
+ * @param options - Configuration options
+ * @param options.cycle - Wrap around when reaching start/end
+ * @param options.onCursorMove - Callback when cursor position changes
+ * @returns Object with cursor state and navigation methods
+ *
+ * @example
+ * // Basic usage
+ * import { useCursor } from 'vuiii'
+ *
+ * const items = ref(['Apple', 'Banana', 'Cherry'])
+ *
+ * const {
+ *   cursorIndex,
+ *   cursorItem,
+ *   moveCursorForward,
+ *   moveCursorBack,
+ *   resetCursor
+ * } = useCursor(items)
+ *
+ * console.log(cursorItem.value) // 'Apple'
+ * moveCursorForward()
+ * console.log(cursorItem.value) // 'Banana'
+ *
+ * @example
+ * // With cycling
+ * const { moveCursorForward } = useCursor(items, { cycle: true })
+ * // At last item, moveCursorForward() goes back to first
+ *
+ * @example
+ * // Handle keyboard navigation
+ * function handleKeydown(e: KeyboardEvent) {
+ *   if (e.key === 'ArrowDown') moveCursorForward()
+ *   if (e.key === 'ArrowUp') moveCursorBack()
+ *   if (e.key === 'Enter') selectItem(cursorItem.value)
+ * }
+ */
 export declare function useCursor<T = unknown>(items: Ref<T[]> | T[], options?: {
     cycle?: boolean;
     onCursorMove?: () => void;