@auronui/vue 1.1.1 → 1.2.0

package/dist/index.d.ts

@@ -43,7 +43,7 @@ import { CreateComponentPublicInstanceWithMixins } from 'vue';
 import { cx } from 'tailwind-variants';
 import { DateFieldRootProps } from 'reka-ui';
 import { DateInputVariants } from '@auronui/styles';
-import { DateRange as DateRange_3 } from 'reka-ui';
+import { DateRange as DateRange_4 } from 'reka-ui';
 import { DateRangeFieldRootProps } from 'reka-ui';
 import { DateRangeFieldVariants } from '@auronui/styles';
 import { DateStep } from '../../../node_modules/reka-ui/dist/index3.d.ts';
@@ -77,6 +77,7 @@ import { PaginationVariants } from '@auronui/styles';
 import { PublicProps } from 'vue';
 import { RadioGroupVariants } from '@auronui/styles';
 import { Ref } from 'vue';
+import { ref } from 'vue';
 import { ReferenceElement } from 'reka-ui';
 import { RendererElement } from 'vue';
 import { RendererNode } from 'vue';
@@ -137,6 +138,7 @@ declare const __VLS_component_101: DefineComponent<__VLS_Props_113, {}, {}, {},
 "onPointer-down-outside"?: ((event: Event) => any) | undefined;
 "onClose-auto-focus"?: ((event: Event) => any) | undefined;
 }>, {
+sticky: "partial" | "always";
 class: string;
 as: string;
 asChild: boolean;
@@ -152,7 +154,6 @@ collisionBoundary: Element | null | Array<Element | null>;
 collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 arrowPadding: number;
 hideShiftedArrow: boolean;
-sticky: "partial" | "always";
 hideWhenDetached: boolean;
 positionStrategy: "fixed" | "absolute";
 updatePositionStrategy: "always" | "optimized";
@@ -265,6 +266,7 @@ declare const __VLS_component_105: DefineComponent<__VLS_Props_117, {}, {}, {},
 "onInteract-outside"?: ((event: Event) => any) | undefined;
 "onClose-auto-focus"?: ((event: Event) => any) | undefined;
 }>, {
+sticky: "partial" | "always";
 class: string;
 as: string;
 asChild: boolean;
@@ -282,7 +284,6 @@ collisionBoundary: Element | null | Array<Element | null>;
 collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 arrowPadding: number;
 hideShiftedArrow: boolean;
-sticky: "partial" | "always";
 hideWhenDetached: boolean;
 positionStrategy: "fixed" | "absolute";
 updatePositionStrategy: "always" | "optimized";
@@ -299,10 +300,10 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_118> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
+description: string;
 variant: "default" | "danger";
 isDisabled: boolean;
 class: string;
-description: string;
 as: string;
 disabled: boolean;
 asChild: boolean;
@@ -457,6 +458,7 @@ declare const __VLS_component_113: DefineComponent<__VLS_Props_125, {}, {}, {},
 "onClose-auto-focus"?: ((event: Event) => any) | undefined;
 "onEntry-focus"?: ((event: Event) => any) | undefined;
 }>, {
+sticky: "partial" | "always";
 class: string;
 as: string;
 asChild: boolean;
@@ -471,7 +473,6 @@ collisionBoundary: Element | null | Array<Element | null>;
 collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 arrowPadding: number;
 hideShiftedArrow: boolean;
-sticky: "partial" | "always";
 hideWhenDetached: boolean;
 positionStrategy: "fixed" | "absolute";
 updatePositionStrategy: "always" | "optimized";
@@ -498,9 +499,11 @@ ref: Element;
 value: string;
 } | undefined) => any) | undefined;
 }>, {
+description: string;
+name: string;
+multiple: boolean;
 isDisabled: boolean;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
-description: string;
 label: string;
 errorMessage: string;
 fullWidth: boolean;
@@ -511,12 +514,10 @@ as: string;
 classNames: Partial<{
 base: ClassValue;
 }>;
-multiple: boolean;
 asChild: boolean;
 placeholder: string;
 modelValue: string;
 defaultValue: string;
-name: string;
 dir: "ltr" | "rtl";
 defaultOpen: boolean;
 open: boolean;
@@ -566,6 +567,7 @@ declare const __VLS_component_116: DefineComponent<__VLS_Props_128, {}, {}, {},
 "onFocus-outside"?: ((event: Event) => any) | undefined;
 "onInteract-outside"?: ((event: Event) => any) | undefined;
 }>, {
+sticky: "partial" | "always";
 class: string;
 as: string;
 asChild: boolean;
@@ -581,7 +583,6 @@ collisionBoundary: Element | null | Array<Element | null>;
 collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 arrowPadding: number;
 hideShiftedArrow: boolean;
-sticky: "partial" | "always";
 hideWhenDetached: boolean;
 positionStrategy: "fixed" | "absolute";
 updatePositionStrategy: "always" | "optimized";
@@ -640,6 +641,7 @@ value: string;
 } | undefined) => any) | undefined;
 }>, {
 size: "md" | "sm" | "lg";
+multiple: boolean;
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
 color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
@@ -649,7 +651,6 @@ isReadonly: boolean;
 labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
 items: AutocompleteItemData[];
-multiple: boolean;
 modelValue: string | string[];
 defaultValue: string | string[];
 defaultOpen: boolean;
@@ -744,6 +745,7 @@ declare const __VLS_component_121: DefineComponent<__VLS_Props_132, {}, {}, {},
 "onFocus-outside"?: ((event: Event) => any) | undefined;
 "onInteract-outside"?: ((event: Event) => any) | undefined;
 }>, {
+sticky: "partial" | "always";
 class: string;
 as: string;
 disabled: boolean;
@@ -760,7 +762,6 @@ collisionBoundary: Element | null | Array<Element | null>;
 collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 arrowPadding: number;
 hideShiftedArrow: boolean;
-sticky: "partial" | "always";
 hideWhenDetached: boolean;
 positionStrategy: "fixed" | "absolute";
 updatePositionStrategy: "always" | "optimized";
@@ -798,9 +799,9 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_134> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
+value: string;
 class: string;
 label: string | ((term: string) => string);
-value: string;
 as: string;
 disabled: boolean;
 asChild: boolean;
@@ -1047,11 +1048,11 @@ declare const __VLS_component_151: DefineComponent<__VLS_Props_160, {}, {}, {},
 "onUpdate:modelValue"?: ((value: number | number[]) => any) | undefined;
 "onValue-commit"?: ((value: number | number[]) => any) | undefined;
 }>, {
+name: string;
 orientation: "horizontal" | "vertical";
 as: string;
 disabled: boolean;
 asChild: boolean;
-name: string;
 required: boolean;
 min: number;
 max: number;
@@ -1216,9 +1217,9 @@ isInvalid: boolean;
 }, any>;
 
 declare const __VLS_component_157: DefineComponent<__VLS_PublicProps_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (value: DateRange_2 | null | undefined) => any;
+"update:modelValue": (value: DateRange_3 | null | undefined) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps_11> & Readonly<{
-"onUpdate:modelValue"?: ((value: DateRange_2 | null | undefined) => any) | undefined;
+"onUpdate:modelValue"?: ((value: DateRange_3 | null | undefined) => any) | undefined;
 }>, {
 size: "md" | "sm" | "lg";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
@@ -1235,10 +1236,10 @@ fieldRef: ({
 $: ComponentInternalInstance;
 $data: {};
 $props: {
-readonly defaultValue?: DateRange_3 | undefined;
+readonly defaultValue?: DateRange_4 | undefined;
 readonly defaultPlaceholder?: DateValue | undefined;
 readonly placeholder?: DateValue | undefined;
-readonly modelValue?: (DateRange_3 | null) | undefined;
+readonly modelValue?: (DateRange_4 | null) | undefined;
 readonly hourCycle?: HourCycle;
 readonly step?: DateStep | undefined;
 readonly granularity?: Granularity | undefined;
@@ -1255,7 +1256,7 @@ readonly asChild?: boolean | undefined;
 readonly as?: (AsTag | Component) | undefined;
 readonly name?: string | undefined;
 readonly required?: boolean | undefined;
-readonly "onUpdate:modelValue"?: ((args_0: DateRange_3) => any) | undefined | undefined;
+readonly "onUpdate:modelValue"?: ((args_0: DateRange_4) => any) | undefined | undefined;
 readonly "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined | undefined;
 } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
 $attrs: Attrs;
@@ -1268,15 +1269,15 @@ $slots: Readonly<{
 $root: ComponentPublicInstance | null;
 $parent: ComponentPublicInstance | null;
 $host: Element | null;
-$emit: ((event: "update:modelValue", args_0: DateRange_3) => void) & ((event: "update:placeholder", date: DateValue) => void);
+$emit: ((event: "update:modelValue", args_0: DateRange_4) => void) & ((event: "update:placeholder", date: DateValue) => void);
 $el: any;
 $options: ComponentOptionsBase<Readonly<DateRangeFieldRootProps> & Readonly<{
-"onUpdate:modelValue"?: ((args_0: DateRange_3) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: DateRange_4) => any) | undefined;
 "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, {
 setFocusedElement: (el: HTMLElement) => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (args_0: DateRange_3) => any;
+"update:modelValue": (args_0: DateRange_4) => any;
 "update:placeholder": (date: DateValue) => any;
 }, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
 beforeCreate?: (() => void) | (() => void)[];
@@ -1299,14 +1300,14 @@ $forceUpdate: () => void;
 $nextTick: nextTick;
 $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
 } & Readonly<{}> & Omit<Readonly<DateRangeFieldRootProps> & Readonly<{
-"onUpdate:modelValue"?: ((args_0: DateRange_3) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: DateRange_4) => any) | undefined;
 "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
 }>, "setFocusedElement"> & {
 setFocusedElement: (el: HTMLElement) => void;
 } & {} & ComponentCustomProperties & {} & {
 $slots: {
 default?: (props: {
-modelValue: DateRange_3 | null;
+modelValue: DateRange_4 | null;
 segments: {
 start: {
 part: SegmentPart;
@@ -1561,13 +1562,13 @@ format: ColorFormat;
 
 declare const __VLS_component_17: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{}>, {
 size: "md" | "sm" | "lg" | "xs" | "xl";
+value: string | number;
 variant: "default" | "danger" | "success" | "warning" | "bordered" | "primary" | "secondary" | "soft" | "solid" | "ghost" | "tertiary" | "danger-soft" | "success-soft" | "warning-soft" | "outline";
 color: "default" | "danger" | "success" | "warning" | "primary";
 fullWidth: boolean;
 isIconOnly: boolean;
 isLoading: boolean;
 radius: "md" | "sm" | "lg" | "none" | "full";
-value: string | number;
 as: string | object;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -1593,15 +1594,15 @@ declare const __VLS_component_19: DefineComponent<__VLS_Props_21, {}, {}, {}, {}
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "md" | "sm" | "lg";
+value: string;
+name: string;
 variant: "default" | "ghost";
 isIconOnly: boolean;
-value: string;
 as: string;
 disabled: boolean;
 asChild: boolean;
 modelValue: boolean;
 defaultValue: boolean;
-name: string;
 required: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -1730,16 +1731,16 @@ declare const __VLS_component_27: DefineComponent<__VLS_Props_30, {}, {}, {}, {}
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 id: string;
+value: string;
+name: string;
 variant: "primary" | "secondary";
 isInvalid: boolean;
 isIndeterminate: boolean;
-value: string;
 as: string;
 disabled: boolean;
 asChild: boolean;
 modelValue: boolean;
 defaultValue: boolean;
-name: string;
 required: boolean;
 trueValue: boolean | string | number;
 falseValue: boolean | string | number;
@@ -1753,8 +1754,9 @@ declare const __VLS_component_28: DefineComponent<__VLS_Props_31, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_31> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
-variant: "primary" | "secondary";
 description: string;
+name: string;
+variant: "primary" | "secondary";
 label: string;
 errorMessage: string;
 isInvalid: boolean;
@@ -1762,7 +1764,6 @@ orientation: "horizontal" | "vertical";
 disabled: boolean;
 modelValue: string[];
 defaultValue: string[];
-name: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_29: DefineComponent<__VLS_Props_32, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -1771,6 +1772,7 @@ select: (event: Event) => any;
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
 id: string;
+name: string;
 variant: "primary" | "secondary";
 class: string | false | Record<string, unknown> | ClassValue[] | null;
 isInvalid: boolean;
@@ -1783,7 +1785,6 @@ content: ClassValue;
 }>;
 disabled: boolean;
 asChild: boolean;
-name: string;
 required: boolean;
 indicatorForceMount: boolean;
 indicatorAsChild: boolean;
@@ -1801,8 +1802,9 @@ declare const __VLS_component_30: DefineComponent<__VLS_Props_33, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-variant: "primary" | "secondary";
 description: string;
+name: string;
+variant: "primary" | "secondary";
 label: string;
 errorMessage: string;
 isInvalid: boolean;
@@ -1812,7 +1814,6 @@ disabled: boolean;
 asChild: boolean;
 modelValue: string;
 defaultValue: string;
-name: string;
 required: boolean;
 dir: "ltr" | "rtl";
 loop: boolean;
@@ -1825,14 +1826,14 @@ declare const __VLS_component_31: DefineComponent<__VLS_Props_34, {}, {}, {}, {}
 }>, {
 id: string;
 size: "md" | "sm" | "lg";
-isInvalid: boolean;
 value: string;
+name: string;
+isInvalid: boolean;
 as: string;
 disabled: boolean;
 asChild: boolean;
 modelValue: boolean;
 defaultValue: boolean;
-name: string;
 required: boolean;
 trueValue: boolean | string | number;
 falseValue: boolean | string | number;
@@ -1847,6 +1848,7 @@ declare const __VLS_component_32: DefineComponent<__VLS_Props_35, {}, {}, {}, {}
 }>, {
 size: "md" | "sm" | "lg";
 description: string;
+name: string;
 label: string;
 errorMessage: string;
 isInvalid: boolean;
@@ -1854,7 +1856,6 @@ orientation: "horizontal" | "vertical";
 disabled: boolean;
 modelValue: string[];
 defaultValue: string[];
-name: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_33: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -2305,18 +2306,18 @@ onHighlight?: ((context: unknown) => any) | undefined;
 onLeave?: ((event: Event) => any) | undefined;
 "onLoad-more"?: (() => any) | undefined;
 }>, {
+name: string;
+multiple: boolean;
 variant: "default" | "danger";
 isDisabled: boolean;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
 isLoading: boolean;
 orientation: "horizontal" | "vertical";
 as: string;
-multiple: boolean;
 asChild: boolean;
 selectionMode: "single" | "multiple";
 modelValue: string | string[];
 defaultValue: string | string[];
-name: string;
 required: boolean;
 dir: "ltr" | "rtl";
 maxHeight: string | number;
@@ -2420,6 +2421,7 @@ declare const __VLS_component_99: DefineComponent<Props_3, {}, {}, {}, {}, Compo
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "md" | "sm" | "lg";
+multiple: boolean;
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
 color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
@@ -2429,7 +2431,6 @@ isReadonly: boolean;
 labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
 items: SelectItemData[];
-multiple: boolean;
 modelValue: SelectItemValue | SelectItemValue[];
 defaultValue: SelectItemValue | SelectItemValue[];
 dir: "ltr" | "rtl";
@@ -3895,7 +3896,7 @@ declare type __VLS_Props_166 = {
 };
 
 declare type __VLS_Props_167 = {
-    defaultValue?: DateRange | null;
+    defaultValue?: DateRange_2 | null;
     defaultPlaceholder?: DateValue;
     minValue?: DateValue;
     maxValue?: DateValue;
@@ -5573,7 +5574,7 @@ declare type __VLS_PublicProps_10 = {
 } & __VLS_Props_169;
 
 declare type __VLS_PublicProps_11 = {
-    modelValue?: DateRange_2 | null | undefined;
+    modelValue?: DateRange_3 | null | undefined;
 } & __VLS_Props_170;
 
 declare type __VLS_PublicProps_12 = {
@@ -5620,7 +5621,7 @@ declare type __VLS_PublicProps_7 = {
 } & __VLS_Props_166;
 
 declare type __VLS_PublicProps_8 = {
-    modelValue?: DateRange | null;
+    modelValue?: DateRange_2 | null;
 } & __VLS_Props_167;
 
 declare type __VLS_PublicProps_9 = {
@@ -6313,7 +6314,7 @@ declare function __VLS_template_145(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {
-            status: StepStatus;
+            status: StepStatus_2;
             step: number;
             isCurrent: boolean;
             isCompleted: boolean;
@@ -6534,10 +6535,10 @@ declare function __VLS_template_157(): {
             $: ComponentInternalInstance;
             $data: {};
             $props: {
-                readonly defaultValue?: DateRange_3 | undefined;
+                readonly defaultValue?: DateRange_4 | undefined;
                 readonly defaultPlaceholder?: DateValue | undefined;
                 readonly placeholder?: DateValue | undefined;
-                readonly modelValue?: (DateRange_3 | null) | undefined;
+                readonly modelValue?: (DateRange_4 | null) | undefined;
                 readonly hourCycle?: HourCycle;
                 readonly step?: DateStep | undefined;
                 readonly granularity?: Granularity | undefined;
@@ -6554,7 +6555,7 @@ declare function __VLS_template_157(): {
                 readonly as?: (AsTag | Component) | undefined;
                 readonly name?: string | undefined;
                 readonly required?: boolean | undefined;
-                readonly "onUpdate:modelValue"?: ((args_0: DateRange_3) => any) | undefined | undefined;
+                readonly "onUpdate:modelValue"?: ((args_0: DateRange_4) => any) | undefined | undefined;
                 readonly "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined | undefined;
             } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
             $attrs: Attrs;
@@ -6567,15 +6568,15 @@ declare function __VLS_template_157(): {
             $root: ComponentPublicInstance | null;
             $parent: ComponentPublicInstance | null;
             $host: Element | null;
-            $emit: ((event: "update:modelValue", args_0: DateRange_3) => void) & ((event: "update:placeholder", date: DateValue) => void);
+            $emit: ((event: "update:modelValue", args_0: DateRange_4) => void) & ((event: "update:placeholder", date: DateValue) => void);
             $el: any;
             $options: ComponentOptionsBase<Readonly<DateRangeFieldRootProps> & Readonly<{
-            "onUpdate:modelValue"?: ((args_0: DateRange_3) => any) | undefined;
+            "onUpdate:modelValue"?: ((args_0: DateRange_4) => any) | undefined;
             "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
             }>, {
             setFocusedElement: (el: HTMLElement) => void;
             }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-            "update:modelValue": (args_0: DateRange_3) => any;
+            "update:modelValue": (args_0: DateRange_4) => any;
             "update:placeholder": (date: DateValue) => any;
             }, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
@@ -6598,14 +6599,14 @@ declare function __VLS_template_157(): {
             $nextTick: nextTick;
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
         } & Readonly<{}> & Omit<Readonly<DateRangeFieldRootProps> & Readonly<{
-            "onUpdate:modelValue"?: ((args_0: DateRange_3) => any) | undefined;
+            "onUpdate:modelValue"?: ((args_0: DateRange_4) => any) | undefined;
             "onUpdate:placeholder"?: ((date: DateValue) => any) | undefined;
         }>, "setFocusedElement"> & {
             setFocusedElement: (el: HTMLElement) => void;
         } & {} & ComponentCustomProperties & {} & {
             $slots: {
                 default?: (props: {
-                    modelValue: DateRange_3 | null;
+                    modelValue: DateRange_4 | null;
                     segments: {
                         start: {
                             part: SegmentPart;
@@ -9083,6 +9084,10 @@ declare type AccordionShorthandItem = {
 
 export declare const AccordionTrigger: __VLS_WithTemplateSlots_73<typeof __VLS_component_73, __VLS_TemplateResult_73["slots"]>;
 
+export declare type AccordionType = 'single' | 'multiple';
+
+export declare type AccordionValue = string | string[] | undefined;
+
 export declare const Alert: __VLS_WithTemplateSlots_86<typeof __VLS_component_86, __VLS_TemplateResult_86["slots"]>;
 
 export declare const AlertDescription: __VLS_WithTemplateSlots_89<typeof __VLS_component_89, __VLS_TemplateResult_89["slots"]>;
@@ -9512,9 +9517,9 @@ onHighlight?: ((value: unknown) => any) | undefined;
 onLeave?: ((event: Event) => any) | undefined;
 }>, {
 size: "md" | "sm" | "lg" | "xs" | "xl";
-variant: "circle" | "square";
-layout: "grid" | "stack";
 multiple: boolean;
+variant: "circle" | "square";
+layout: "stack" | "grid";
 disabled: boolean;
 asChild: boolean;
 required: boolean;
@@ -9650,6 +9655,11 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      end: DateValue;
  }
 
+ declare interface DateRange_3 {
+     start: DateValue;
+     end: DateValue;
+ }
+
  export declare const DateRangeField: __VLS_WithTemplateSlots_157<typeof __VLS_component_157, __VLS_TemplateResult_157["slots"]>;
 
  export declare const DateRangePicker: __VLS_WithTemplateSlots_160<typeof __VLS_component_160, __VLS_TemplateResult_160["slots"]>;
@@ -9896,6 +9906,7 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  }>, {
  length: number;
  id: string;
+ name: string;
  variant: "primary" | "secondary";
  class: string | false | Record<string, unknown> | ClassValue[] | null;
  type: "text";
@@ -9911,7 +9922,6 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  placeholder: string;
  modelValue: string;
  defaultValue: string;
- name: string;
  required: boolean;
  inputAsChild: boolean;
  inputAs: string;
@@ -9957,6 +9967,8 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      textValue?: string;
  };
 
+ export declare type ListBoxValue = string | string[] | undefined;
+
  export { ListBoxVariants }
 
  export declare interface ListData<T> {
@@ -10376,7 +10388,7 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
          errorMessage: ClassValue;
          description: ClassValue;
      }>;
-     defaultValue?: DateRange_2;
+     defaultValue?: DateRange_3;
      defaultPlaceholder?: DateValue;
      placeholderValue?: DateValue;
      minValue?: DateValue;
@@ -10829,12 +10841,12 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  };
 
  export declare const RangeCalendar: DefineComponent<__VLS_PublicProps_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
- "update:modelValue": (value: DateRange | null) => any;
- "update:valid-model-value": (value: DateRange | undefined) => any;
+ "update:modelValue": (value: DateRange_2 | null) => any;
+ "update:valid-model-value": (value: DateRange_2 | undefined) => any;
  "update:start-value": (value: DateValue | undefined) => any;
  }, string, PublicProps, Readonly<__VLS_PublicProps_8> & Readonly<{
- "onUpdate:modelValue"?: ((value: DateRange | null) => any) | undefined;
- "onUpdate:valid-model-value"?: ((value: DateRange | undefined) => any) | undefined;
+ "onUpdate:modelValue"?: ((value: DateRange_2 | null) => any) | undefined;
+ "onUpdate:valid-model-value"?: ((value: DateRange_2 | undefined) => any) | undefined;
  "onUpdate:start-value"?: ((value: DateValue | undefined) => any) | undefined;
  }>, {
  disabled: boolean;
@@ -10943,10 +10955,12 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
 
  export declare const Slider: __VLS_WithTemplateSlots_151<typeof __VLS_component_151, __VLS_TemplateResult_151["slots"]>;
 
+ export declare type SliderValue = number | number[];
+
  export declare const Spinner: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
  size: "md" | "sm" | "lg" | "xl";
  label: string;
- color: "accent" | "danger" | "success" | "warning" | "current";
+ color: "current" | "accent" | "danger" | "success" | "warning";
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
  export { SpinnerVariants }
@@ -10975,7 +10989,7 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      size: ComputedRef<StepperVariants['size']>;
      color: ComputedRef<StepperVariants['color']>;
      totalSteps: ComputedRef<number>;
-     getStepStatus: (step: number) => StepStatus;
+     getStepStatus: (step: number) => StepStatus_2;
  }
 
  export declare const stepperContextKey: InjectionKey<StepperContext>;
@@ -11002,7 +11016,9 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
 
  export { StepperVariants }
 
- export declare type StepStatus = 'pending' | 'current' | 'completed' | 'error';
+ export declare type StepStatus = 'completed' | 'current' | 'pending';
+
+ declare type StepStatus_2 = 'pending' | 'current' | 'completed' | 'error';
 
  export declare const Surface: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
 
@@ -11428,18 +11444,225 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
 
  export declare const TreeItemToggle: __VLS_WithTemplateSlots_150<typeof __VLS_component_150, __VLS_TemplateResult_150["slots"]>;
 
+ export declare type TreeValue = string | string[] | undefined;
+
  export { TreeVariants }
 
  declare function trigger(name?: string): Promise<boolean>;
 
+ /**
+  * Manages expanded item state for the Accordion component.
+  *
+  * @example
+  * ```ts
+  * const accordion = useAccordion({ type: 'single', collapsible: true })
+  * ```
+  * ```html
+  * <Accordion :type="'single'" :model-value="accordion.expanded" @update:model-value="accordion.onValueChange">
+  *   ...
+  * </Accordion>
+  * ```
+  */
+ export declare function useAccordion(options?: UseAccordionOptions): UseAccordionReturn;
+
+ export declare interface UseAccordionOptions {
+     /** Whether to allow only one item open at a time ('single') or multiple ('multiple'). Defaults to 'single'. */
+     type?: AccordionType;
+     /** Initial expanded item(s). String for single mode, string[] for multiple mode. */
+     defaultExpanded?: AccordionValue;
+     /** In single mode, whether all items can be collapsed. Defaults to false. */
+     collapsible?: boolean;
+ }
+
+ export declare interface UseAccordionReturn {
+     /** Reactive expanded item(s). String in single mode, string[] in multiple mode. */
+     expanded: Ref<AccordionValue>;
+     /** Whether a given item is currently expanded. */
+     isExpanded: (key: string) => boolean;
+     /** Expand a specific item. */
+     expand: (key: string) => void;
+     /** Collapse a specific item. No-op in single non-collapsible mode. */
+     collapse: (key: string) => void;
+     /** Toggle a specific item open or closed. */
+     toggle: (key: string) => void;
+     /** Collapse all items. Only fully effective in multiple or collapsible-single mode. */
+     collapseAll: () => void;
+     /**
+      * Pass as `@update:model-value` handler on the Accordion component.
+      * Keeps `expanded` in sync when the component changes state internally.
+      */
+     onValueChange: (value: AccordionValue) => void;
+ }
+
  export declare const useAutocompleteInject: (fallback?: AutocompleteContext | undefined) => AutocompleteContext;
 
  export declare const useAutocompleteProvide: (value: AutocompleteContext) => AutocompleteContext;
 
+ /**
+  * Manages selected date state for the Calendar component.
+  *
+  * @example
+  * ```ts
+  * const calendar = useCalendar()
+  * ```
+  * ```html
+  * <Calendar v-model="calendar.value" />
+  * ```
+  */
+ export declare function useCalendar(options?: UseCalendarOptions): UseCalendarReturn;
+
+ export declare interface UseCalendarOptions {
+     /** Initial selected date for uncontrolled usage. */
+     defaultValue?: DateValue;
+     /** Minimum selectable date. */
+     minValue?: DateValue;
+     /** Maximum selectable date. */
+     maxValue?: DateValue;
+     /** Returns true for dates that should be disabled (not selectable). */
+     isDateDisabled?: (date: DateValue) => boolean;
+     /** Returns true for dates that are unavailable (selectable but marked unavailable). */
+     isDateUnavailable?: (date: DateValue) => boolean;
+ }
+
+ export declare interface UseCalendarReturn {
+     /** Reactive selected date value. */
+     value: Ref<DateValue | undefined>;
+     /** Whether a date is currently selected. */
+     hasValue: ComputedRef<boolean>;
+     /** Set the selected date. */
+     setValue: (date: DateValue) => void;
+     /** Clear the selected date. */
+     clear: () => void;
+     /** Returns true if the given date is disabled per the `isDateDisabled` option. */
+     isDisabled: (date: DateValue) => boolean;
+     /** Returns true if the given date is unavailable per the `isDateUnavailable` option. */
+     isUnavailable: (date: DateValue) => boolean;
+     /**
+      * Pass as `v-model` on the Calendar component.
+      * Keeps `value` in sync when the component changes selection internally.
+      */
+     onValueChange: (date: DateValue | undefined) => void;
+ }
+
+ /**
+  * Manages checked state for a CheckboxGroup.
+  *
+  * @example
+  * ```ts
+  * const group = useCheckboxGroup({
+  *   options: ['apple', 'banana', 'cherry'],
+  *   defaultValues: ['apple'],
+  * })
+  * ```
+  * ```html
+  * <CheckboxGroup :model-value="group.values" @update:model-value="group.onValueChange">
+  *   <Checkbox value="apple">Apple</Checkbox>
+  *   <Checkbox value="banana">Banana</Checkbox>
+  *   <Checkbox value="cherry">Cherry</Checkbox>
+  * </CheckboxGroup>
+  * ```
+  */
+ export declare function useCheckboxGroup(options?: UseCheckboxGroupOptions): UseCheckboxGroupReturn;
+
  export declare const useCheckboxGroupInject: (fallback?: CheckboxGroupContext | undefined) => CheckboxGroupContext;
 
+ export declare interface UseCheckboxGroupOptions {
+     /** Initial checked values. */
+     defaultValues?: string[];
+     /**
+      * Full set of option keys in the group.
+      * Required for `isIndeterminate` and `isAllChecked` to be accurate.
+      */
+     options?: string[];
+ }
+
  export declare const useCheckboxGroupProvide: (value: CheckboxGroupContext) => CheckboxGroupContext;
 
+ export declare interface UseCheckboxGroupReturn {
+     /** Reactive array of currently checked values. */
+     values: Ref<string[]>;
+     /** Whether a given value is currently checked. */
+     isChecked: (value: string) => boolean;
+     /** Toggle a value — checks it if unchecked, unchecks if checked. */
+     toggle: (value: string) => void;
+     /** Check all provided values (merges with existing). */
+     checkAll: (keys: string[]) => void;
+     /** Uncheck all values. */
+     uncheckAll: () => void;
+     /** Set the checked values directly. */
+     setValues: (values: string[]) => void;
+     /**
+      * True when some — but not all — options are checked.
+      * Requires `options` to be provided in the options object.
+      */
+     isIndeterminate: ComputedRef<boolean>;
+     /**
+      * True when every option is checked.
+      * Requires `options` to be provided in the options object.
+      */
+     isAllChecked: ComputedRef<boolean>;
+     /**
+      * Pass as `@update:model-value` handler on the CheckboxGroup component.
+      * Keeps `values` in sync when the component changes state internally.
+      */
+     onValueChange: (values: string[]) => void;
+ }
+
+ /**
+  * High-level composable for controlling the ColorPicker component.
+  *
+  * Wraps `useColorState` with computed channel accessors and format conversion helpers.
+  *
+  * @example
+  * ```ts
+  * const picker = useColorPicker({ defaultValue: '#3b82f6' })
+  * console.log(picker.hue.value)        // 217
+  * console.log(picker.saturation.value) // 91
+  * console.log(picker.brightness.value) // 96
+  * ```
+  * ```html
+  * <ColorPicker v-model="picker.color" />
+  * ```
+  */
+ export declare function useColorPicker(options?: UseColorPickerOptions): UseColorPickerReturn;
+
+ export declare interface UseColorPickerOptions {
+     /** Initial color value. Accepts hex strings (#ff0000), rgb/hsl/hsb strings, or a Color object. Defaults to black. */
+     defaultValue?: string | Color;
+     /** Output format for string serialization methods. Defaults to 'hex'. */
+     format?: ColorFormat;
+     /** Fires with the serialized color string whenever the color changes. */
+     onChange?: (value: string, color: Color) => void;
+ }
+
+ export declare interface UseColorPickerReturn {
+     /** The raw reactive Color object. */
+     color: Ref<Color>;
+     /** Set the color from a string (hex, rgb, hsl, hsb) or a Color object. */
+     setColor: (value: string | Color) => void;
+     /** Computed hue channel value (0–360). */
+     hue: ComputedRef<number>;
+     /** Computed saturation channel value (0–100). */
+     saturation: ComputedRef<number>;
+     /** Computed brightness channel value (0–100). */
+     brightness: ComputedRef<number>;
+     /** Computed alpha channel value (0–100). */
+     alpha: ComputedRef<number>;
+     /** Serialize the current color to a hex string (e.g. '#ff0000'). */
+     toHex: () => string;
+     /** Serialize the current color to an rgb/rgba string. */
+     toRgb: () => string;
+     /** Serialize the current color to an hsl/hsla string. */
+     toHsl: () => string;
+     /** Serialize the current color to an hsb/hsba string. */
+     toHsb: () => string;
+     /**
+      * Pass as `@update:model-value` handler on the ColorPicker component.
+      * Keeps `color` in sync when the component changes internally.
+      */
+     onColorChange: (value: string | Color) => void;
+ }
+
  export declare function useColorState(props?: UseColorStateProps): UseColorStateReturn;
 
  export declare interface UseColorStateProps {
@@ -11486,6 +11709,39 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
   */
  export declare function useCSSVariable(el: Ref<HTMLElement | null | undefined>, variable: string): Ref<string>;
 
+ /**
+  * Manages programmatic open/close state for overlay components.
+  *
+  * Wire the returned refs and handlers directly into the component:
+  *
+  * @example
+  * ```ts
+  * const modal = useDisclosure()
+  * await saveData()
+  * modal.open()
+  * ```
+  * ```html
+  * <Modal :open="modal.isOpen" @update:open="modal.onOpenChange">...</Modal>
+  * ```
+  */
+ export declare function useDisclosure(defaultOpen?: boolean): UseDisclosureReturn;
+
+ export declare interface UseDisclosureReturn {
+     /** Whether the element is currently open. */
+     isOpen: Readonly<ReturnType<typeof ref<boolean>>>;
+     /** Open the element. */
+     open: () => void;
+     /** Close the element. */
+     close: () => void;
+     /** Toggle the element open/closed. */
+     toggle: () => void;
+     /**
+      * Pass as `@update:open` handler on the component.
+      * Keeps `isOpen` in sync when the component closes itself (e.g. Escape key, backdrop click).
+      */
+     onOpenChange: (value: boolean) => void;
+ }
+
  export declare const useDropdownInject: (fallback?: DropdownContext | undefined) => DropdownContext;
 
  export declare const useDropdownProvide: (value: DropdownContext) => DropdownContext;
@@ -11526,6 +11782,51 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
   */
  export declare function useIsMounted(): Ref<boolean>;
 
+ /**
+  * Manages selection state for the ListBox component.
+  *
+  * @example
+  * ```ts
+  * const listBox = useListBox({ multiple: true, defaultSelected: ['apple'] })
+  * ```
+  * ```html
+  * <ListBox :model-value="listBox.selected" @update:model-value="listBox.onSelectionChange">
+  *   <ListBoxItem value="apple">Apple</ListBoxItem>
+  *   <ListBoxItem value="banana">Banana</ListBoxItem>
+  * </ListBox>
+  * ```
+  */
+ export declare function useListBox(options?: UseListBoxOptions): UseListBoxReturn;
+
+ export declare interface UseListBoxOptions {
+     /** Enable multi-selection. Defaults to false. */
+     multiple?: boolean;
+     /** Initial selected value(s). */
+     defaultSelected?: ListBoxValue;
+ }
+
+ export declare interface UseListBoxReturn {
+     /** Reactive selected value(s). String in single mode, string[] in multiple mode. */
+     selected: Ref<ListBoxValue>;
+     /** Whether a given key is currently selected. */
+     isSelected: (key: string) => boolean;
+     /** Select an item. In single mode, replaces the current selection. */
+     select: (key: string) => void;
+     /** Deselect an item. */
+     deselect: (key: string) => void;
+     /** Toggle an item's selection state. */
+     toggle: (key: string) => void;
+     /** Select all provided keys. Only effective in multiple mode. */
+     selectAll: (keys: string[]) => void;
+     /** Clear all selections. */
+     deselectAll: () => void;
+     /**
+      * Pass as `@update:model-value` handler on the ListBox component.
+      * Keeps `selected` in sync when the component changes selection internally.
+      */
+     onSelectionChange: (value: ListBoxValue) => void;
+ }
+
  /**
   * Manages list state: filter text, selected keys, and item CRUD operations.
   * Ported from @react-stately/data (Apache 2.0).
@@ -11563,6 +11864,32 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
   */
  export declare function useMediaQuery(query: string): Ref<boolean>;
 
+ export declare function useOTP(options?: UseOTPOptions): UseOTPReturn;
+
+ export declare interface UseOTPOptions {
+     /** Number of OTP slots. Defaults to 6. */
+     length?: number;
+     /** Initial OTP value string. */
+     defaultValue?: string;
+     /** Fires on every keystroke with the current value. */
+     onChange?: (value: string) => void;
+     /** Fires when all slots are filled. */
+     onComplete?: (value: string) => void;
+ }
+
+ export declare interface UseOTPReturn {
+     /** The current OTP value string. */
+     value: Readonly<Ref<string>>;
+     /** True when the value length equals the configured length. */
+     isComplete: ComputedRef<boolean>;
+     /** Clear the OTP value. */
+     reset: () => void;
+     /** Pass as `@update:model-value` on the InputOTP component. */
+     onValueChange: (value: string) => void;
+     /** Pass as `@complete` on the InputOTP component. */
+     onOTPComplete: (value: string) => void;
+ }
+
  /**
   * Composable for controlled/uncontrolled overlay open state.
   *
@@ -11647,16 +11974,312 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      toggle: () => void;
  }
 
+ /**
+  * Manages pagination state for the Pagination component.
+  *
+  * @example
+  * ```ts
+  * const pagination = usePagination({ totalItems: 200, pageSize: 20 })
+  * ```
+  * ```html
+  * <Pagination
+  *   :page="pagination.page"
+  *   :total-items="pagination.totalItems"
+  *   :items-per-page="pagination.pageSize"
+  *   @update:page="pagination.onPageChange"
+  * />
+  * ```
+  */
+ export declare function usePagination(options?: UsePaginationOptions): UsePaginationReturn;
+
  export declare const usePaginationInject: (fallback?: PaginationContext | undefined) => PaginationContext;
 
+ export declare interface UsePaginationOptions {
+     /** Total number of items across all pages. */
+     totalItems?: number;
+     /** Number of items per page. Defaults to 10. */
+     pageSize?: number;
+     /** Initial page for uncontrolled usage. Defaults to 1. */
+     defaultPage?: number;
+ }
+
  export declare const usePaginationProvide: (value: PaginationContext) => PaginationContext;
 
+ export declare interface UsePaginationReturn {
+     /** Reactive current page number (1-based). */
+     page: Ref<number>;
+     /** Reactive number of items per page. */
+     pageSize: Ref<number>;
+     /** Reactive total item count. */
+     totalItems: Ref<number>;
+     /** Computed total number of pages. Minimum 1. */
+     totalPages: ComputedRef<number>;
+     /** Whether the current page is the first page. */
+     isFirst: ComputedRef<boolean>;
+     /** Whether the current page is the last page. */
+     isLast: ComputedRef<boolean>;
+     /** Navigate to a specific page number. Clamps to valid range. */
+     goToPage: (page: number) => void;
+     /** Navigate to the next page. No-op on last page. */
+     nextPage: () => void;
+     /** Navigate to the previous page. No-op on first page. */
+     prevPage: () => void;
+     /**
+      * Pass as `@update:page` handler on the Pagination component.
+      * Keeps `page` in sync when the component navigates internally.
+      */
+     onPageChange: (page: number) => void;
+ }
+
+ /**
+  * Manages selection state for the RadioGroup component.
+  *
+  * @example
+  * ```ts
+  * const radio = useRadioGroup({ defaultValue: 'option-a' })
+  * ```
+  * ```html
+  * <RadioGroup :model-value="radio.value" @update:model-value="radio.onValueChange">
+  *   <Radio value="option-a">Option A</Radio>
+  *   <Radio value="option-b">Option B</Radio>
+  * </RadioGroup>
+  * ```
+  */
+ export declare function useRadioGroup(options?: UseRadioGroupOptions): UseRadioGroupReturn;
+
  export declare const useRadioGroupInject: (fallback?: RadioGroupContext | undefined) => RadioGroupContext;
 
+ export declare interface UseRadioGroupOptions {
+     /** Initial selected value. */
+     defaultValue?: string;
+ }
+
  export declare const useRadioGroupProvide: (value: RadioGroupContext) => RadioGroupContext;
 
+ export declare interface UseRadioGroupReturn {
+     /** Reactive selected radio value. */
+     value: Ref<string | undefined>;
+     /** Set the selected value. */
+     setValue: (value: string) => void;
+     /** Clear the selection. */
+     clear: () => void;
+     /**
+      * Pass as `@update:model-value` handler on the RadioGroup component.
+      * Keeps `value` in sync when the component changes selection internally.
+      */
+     onValueChange: (value: string) => void;
+ }
+
+ /**
+  * Manages selected date range state for the RangeCalendar component.
+  *
+  * @example
+  * ```ts
+  * const range = useRangeCalendar()
+  * ```
+  * ```html
+  * <RangeCalendar v-model="range.value" />
+  * ```
+  */
+ export declare function useRangeCalendar(options?: UseRangeCalendarOptions): UseRangeCalendarReturn;
+
+ export declare interface UseRangeCalendarOptions {
+     /** Initial selected date range for uncontrolled usage. */
+     defaultValue?: DateRange | null;
+     /** Minimum selectable date. */
+     minValue?: DateValue;
+     /** Maximum selectable date. */
+     maxValue?: DateValue;
+     /** Returns true for dates that should be disabled. */
+     isDateDisabled?: (date: DateValue) => boolean;
+     /** Returns true for dates that are unavailable. */
+     isDateUnavailable?: (date: DateValue) => boolean;
+ }
+
+ export declare interface UseRangeCalendarReturn {
+     /** Reactive selected date range (null when no selection). */
+     value: Ref<DateRange | null>;
+     /** Reactive start date of the selected range. */
+     start: ComputedRef<DateValue | null>;
+     /** Reactive end date of the selected range. */
+     end: ComputedRef<DateValue | null>;
+     /** Whether a complete range (start and end) is selected. */
+     isComplete: ComputedRef<boolean>;
+     /** Set the selected date range. */
+     setRange: (range: DateRange) => void;
+     /** Clear the selected range. */
+     clearRange: () => void;
+     /** Returns true if the given date is disabled per the `isDateDisabled` option. */
+     isDisabled: (date: DateValue) => boolean;
+     /** Returns true if the given date is unavailable per the `isDateUnavailable` option. */
+     isUnavailable: (date: DateValue) => boolean;
+     /**
+      * Pass as `v-model` on the RangeCalendar component.
+      * Keeps `value` in sync when the component changes selection internally.
+      */
+     onValueChange: (range: DateRange | null) => void;
+ }
+
+ /**
+  * Manages value state for the Slider component.
+  *
+  * @example
+  * ```ts
+  * // Single thumb
+  * const slider = useSlider({ defaultValue: 40, min: 0, max: 100 })
+  *
+  * // Range (two thumbs)
+  * const range = useSlider({ defaultValue: [20, 80], min: 0, max: 100 })
+  * ```
+  * ```html
+  * <Slider :model-value="slider.value" :min="slider.min" :max="slider.max" @update:model-value="slider.onValueChange" />
+  * ```
+  */
+ export declare function useSlider(options?: UseSliderOptions): UseSliderReturn;
+
+ export declare interface UseSliderOptions {
+     /** Initial value. Use a number for a single thumb, number[] for range mode. Defaults to `min`. */
+     defaultValue?: SliderValue;
+     /** Minimum allowed value. Defaults to 0. */
+     min?: number;
+     /** Maximum allowed value. Defaults to 100. */
+     max?: number;
+     /** Step increment. Defaults to 1. */
+     step?: number;
+ }
+
+ export declare interface UseSliderReturn {
+     /** Reactive slider value. Number in single mode, number[] in range mode. */
+     value: Ref<SliderValue>;
+     /** Minimum value. */
+     min: number;
+     /** Maximum value. */
+     max: number;
+     /** Step increment. */
+     step: number;
+     /** Set the slider value directly. */
+     setValue: (value: SliderValue) => void;
+     /** Clamp a value (or array of values) to [min, max]. */
+     clamp: (value: SliderValue) => SliderValue;
+     /**
+      * Pass as `@update:model-value` handler on the Slider component.
+      * Keeps `value` in sync when the component changes internally.
+      */
+     onValueChange: (value: SliderValue) => void;
+ }
+
+ /**
+  * Tracks panel layout state for the SplitterGroup component.
+  *
+  * @example
+  * ```ts
+  * const splitter = useSplitter({ defaultSizes: [30, 70] })
+  * ```
+  * ```html
+  * <SplitterGroup @layout="splitter.onLayout">
+  *   <SplitterPanel :default-size="splitter.sizes[0] ?? 30" />
+  *   <SplitterResizeHandle />
+  *   <SplitterPanel :default-size="splitter.sizes[1] ?? 70" />
+  * </SplitterGroup>
+  * ```
+  */
+ export declare function useSplitter(options?: UseSplitterOptions): UseSplitterReturn;
+
+ export declare interface UseSplitterOptions {
+     /** Initial panel sizes as percentages (0–100). Should sum to 100. */
+     defaultSizes?: number[];
+ }
+
+ export declare interface UseSplitterReturn {
+     /** Reactive array of panel sizes as percentages. */
+     sizes: Ref<number[]>;
+     /** Set panel sizes directly. */
+     setSizes: (sizes: number[]) => void;
+     /** Reset panel sizes to the values provided in `defaultSizes`. */
+     resetSizes: () => void;
+     /**
+      * Pass as `@layout` handler on the SplitterGroup component.
+      * Keeps `sizes` in sync when the user drags the resize handle.
+      */
+     onLayout: (sizes: number[]) => void;
+ }
+
+ /**
+  * Manages step navigation state for the Stepper component.
+  *
+  * @example
+  * ```ts
+  * const stepper = useStepper({ totalSteps: 4 })
+  * ```
+  * ```html
+  * <Stepper :model-value="stepper.step" :total-steps="stepper.totalSteps" @update:model-value="stepper.onStepChange">
+  *   ...
+  * </Stepper>
+  * ```
+  */
+ export declare function useStepper(options?: UseStepperOptions): UseStepperReturn;
+
+ export declare interface UseStepperOptions {
+     /** Total number of steps. Ignored when `steps` array is provided. */
+     totalSteps?: number;
+     /** Step items — `totalSteps` is derived from `steps.length` when provided. */
+     steps?: unknown[];
+     /** Initial step for uncontrolled usage. Defaults to 1. */
+     defaultStep?: number;
+ }
+
+ export declare interface UseStepperReturn {
+     /** Reactive current step (1-based). */
+     step: Ref<number>;
+     /** Total number of steps. */
+     totalSteps: ComputedRef<number>;
+     /** Whether the stepper is on the first step. */
+     isFirst: ComputedRef<boolean>;
+     /** Whether the stepper is on the last step. */
+     isLast: ComputedRef<boolean>;
+     /** Navigate to a specific step number. Clamps to valid range. */
+     goToStep: (step: number) => void;
+     /** Advance to the next step. No-op on the last step. */
+     nextStep: () => void;
+     /** Go back to the previous step. No-op on the first step. */
+     prevStep: () => void;
+     /** Return to the first step. */
+     reset: () => void;
+     /** Returns the display status for a given step number. */
+     getStepStatus: (step: number) => StepStatus;
+     /**
+      * Pass as `@update:model-value` handler on the Stepper component.
+      * Keeps `step` in sync when the component changes step internally.
+      */
+     onStepChange: (step: number) => void;
+ }
+
  export declare const useSurfaceInject: (fallback?: SurfaceContext | undefined) => SurfaceContext;
 
+ export declare function useSwatchPicker(options?: UseSwatchPickerOptions): UseSwatchPickerReturn;
+
+ export declare interface UseSwatchPickerOptions {
+     /** Initial selected color as a hex string (e.g. '#ff0000'). */
+     defaultValue?: string;
+     /** Fires when a swatch is selected with the new hex color. */
+     onChange?: (hex: string) => void;
+ }
+
+ export declare interface UseSwatchPickerReturn {
+     /** The currently selected color as a hex string. */
+     selectedColor: Readonly<Ref<string>>;
+     /** True when a color is selected (non-empty). */
+     hasSelection: ComputedRef<boolean>;
+     /** Select a color by hex string. */
+     setColor: (hex: string) => void;
+     /** Clear the selection. */
+     clearSelection: () => void;
+     /** Returns true if the given hex string is the currently selected color. */
+     isSelected: (hex: string) => boolean;
+     /** Pass as `@update:model-value` on the ColorSwatchPicker component. */
+     onColorChange: (hex: string) => void;
+ }
+
  export declare const useSwitchGroupInject: (fallback?: SwitchGroupContext | undefined) => SwitchGroupContext;
 
  export declare const useSwitchGroupProvide: (value: SwitchGroupContext) => SwitchGroupContext;
@@ -11678,6 +12301,39 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
 
  export declare const useTableProvide: (value: TableContext) => TableContext;
 
+ /**
+  * Manages active tab state for the Tabs component.
+  *
+  * @example
+  * ```ts
+  * const tabs = useTabs({ defaultTab: 'overview' })
+  * ```
+  * ```html
+  * <Tabs :model-value="tabs.activeTab" @update:model-value="tabs.onTabChange">
+  *   <Tab value="overview">Overview</Tab>
+  *   <Tab value="settings">Settings</Tab>
+  * </Tabs>
+  * ```
+  */
+ export declare function useTabs(options?: UseTabsOptions): UseTabsReturn;
+
+ export declare interface UseTabsOptions {
+     /** Initial active tab value. */
+     defaultTab?: string;
+ }
+
+ export declare interface UseTabsReturn {
+     /** Reactive active tab value. */
+     activeTab: Ref<string | undefined>;
+     /** Set the active tab. */
+     setTab: (value: string) => void;
+     /**
+      * Pass as `@update:model-value` handler on the Tabs component.
+      * Keeps `activeTab` in sync when the component changes tabs internally.
+      */
+     onTabChange: (value: string) => void;
+ }
+
  /**
   * Returns the imperative toast control API.
   *
@@ -11692,8 +12348,8 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      readonly label: string;
      readonly onClick: () => void;
      } | undefined;
-     readonly variant: ToastVariant;
      readonly description: string;
+     readonly variant: ToastVariant;
      readonly title: string;
      readonly position: ToastPosition;
      readonly duration: number;
@@ -11704,8 +12360,8 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      readonly label: string;
      readonly onClick: () => void;
      } | undefined;
-     readonly variant: ToastVariant;
      readonly description: string;
+     readonly variant: ToastVariant;
      readonly title: string;
      readonly position: ToastPosition;
      readonly duration: number;
@@ -11718,6 +12374,72 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      remove: (id: string) => void;
  };
 
+ /**
+  * Manages selection and expansion state for the Tree component.
+  *
+  * @example
+  * ```ts
+  * const tree = useTree({ multiple: false, defaultExpanded: ['root'] })
+  * ```
+  * ```html
+  * <Tree
+  *   :model-value="tree.selected"
+  *   :expanded="tree.expanded"
+  *   @update:model-value="tree.onSelectionChange"
+  *   @update:expanded="tree.onExpandedChange"
+  * >
+  *   ...
+  * </Tree>
+  * ```
+  */
+ export declare function useTree(options?: UseTreeOptions): UseTreeReturn;
+
+ export declare interface UseTreeOptions {
+     /** Enable multi-selection. Defaults to false. */
+     multiple?: boolean;
+     /** Initial selected node key(s). */
+     defaultSelected?: TreeValue;
+     /** Initial expanded node keys. */
+     defaultExpanded?: string[];
+ }
+
+ export declare interface UseTreeReturn {
+     /** Reactive selected node key(s). String in single mode, string[] in multiple mode. */
+     selected: Ref<TreeValue>;
+     /** Reactive array of expanded node keys. */
+     expanded: Ref<string[]>;
+     /** Whether a given node is currently selected. */
+     isSelected: (key: string) => boolean;
+     /** Select a node. In single mode, replaces the current selection. */
+     select: (key: string) => void;
+     /** Deselect a node. */
+     deselect: (key: string) => void;
+     /** Toggle a node's selection state. */
+     toggle: (key: string) => void;
+     /** Whether a given node is currently expanded. */
+     isExpanded: (key: string) => boolean;
+     /** Expand a node. */
+     expand: (key: string) => void;
+     /** Collapse a node. */
+     collapse: (key: string) => void;
+     /** Toggle a node's expanded state. */
+     toggleExpand: (key: string) => void;
+     /** Expand all provided node keys. */
+     expandAll: (keys: string[]) => void;
+     /** Collapse all expanded nodes. */
+     collapseAll: () => void;
+     /**
+      * Pass as `@update:model-value` on the Tree component.
+      * Keeps `selected` in sync when the component changes selection internally.
+      */
+     onSelectionChange: (value: TreeValue) => void;
+     /**
+      * Pass as `@update:expanded` on the Tree component.
+      * Keeps `expanded` in sync when the component changes expanded state internally.
+      */
+     onExpandedChange: (keys: string[]) => void;
+ }
+
  export declare interface ValidationContext {
      /** All current form field values — available for cross-field rules and custom validators. */
      values: Record<string, unknown>;