@auronui/vue 1.1.1 → 1.2.1

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';
@@ -114,8 +115,8 @@ import { WatchOptions } from 'vue';
 import { WatchStopHandle } from 'vue';
 
 declare const __VLS_component: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
-variant: "default" | "secondary" | "tertiary";
 orientation: "horizontal" | "vertical";
+variant: "default" | "secondary" | "tertiary";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_10: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -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";
@@ -173,9 +174,9 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_114> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
-isDisabled: boolean;
 class: string;
 as: string;
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 textValue: string;
@@ -234,9 +235,9 @@ declare const __VLS_component_103: DefineComponent<__VLS_Props_115, {}, {}, {},
 "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "sm" | "md" | "lg";
-variant: "flat" | "solid" | "bordered" | "light" | "faded" | "shadow";
 class: string;
 color: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+variant: "flat" | "solid" | "bordered" | "light" | "faded" | "shadow";
 dir: "ltr" | "rtl";
 defaultOpen: boolean;
 open: boolean;
@@ -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,11 +300,11 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_118> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
-variant: "default" | "danger";
-isDisabled: boolean;
-class: string;
 description: string;
+class: string;
 as: string;
+variant: "danger" | "default";
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 textValue: string;
@@ -319,10 +320,10 @@ onSelect?: ((event: Event) => any) | undefined;
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 "onUpdate:isSelected"?: ((value: boolean) => any) | undefined;
 }>, {
-variant: "default" | "danger";
-isDisabled: boolean;
 class: string;
 as: string;
+variant: "default" | "danger";
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 modelValue: boolean;
@@ -343,10 +344,10 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_121> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
-variant: "default" | "danger";
-isDisabled: boolean;
 class: string;
 as: string;
+variant: "default" | "danger";
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 textValue: string;
@@ -357,13 +358,13 @@ press: (event: MouseEvent | KeyboardEvent) => any;
 }, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{
 onPress?: ((event: MouseEvent | KeyboardEvent) => any) | undefined;
 }>, {
-variant: "default" | "transparent" | "bordered" | "secondary" | "tertiary" | "blurred";
+variant: "default" | "secondary" | "tertiary" | "bordered" | "transparent" | "blurred";
 isDisabled: boolean;
-fullWidth: boolean;
-radius: "md" | "sm" | "lg" | "none" | "xl";
-shadow: "md" | "sm" | "lg" | "none";
+shadow: "lg" | "md" | "sm" | "none";
+radius: "lg" | "md" | "sm" | "xl" | "none";
 isHoverable: boolean;
 isPressable: boolean;
+fullWidth: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_110: DefineComponent<__VLS_Props_122, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_122> & Readonly<{}>, {
@@ -385,9 +386,9 @@ openOnHover: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_112: DefineComponent<__VLS_Props_124, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_124> & Readonly<{}>, {
-isDisabled: boolean;
 class: string;
 as: string;
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 textValue: string;
@@ -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,25 +499,25 @@ ref: Element;
 value: string;
 } | undefined) => any) | undefined;
 }>, {
-isDisabled: boolean;
-class: string | false | Record<string, unknown> | ClassValue[] | null;
 description: string;
+name: string;
+multiple: boolean;
+class: string | false | Record<string, unknown> | ClassValue[] | null;
 label: string;
-errorMessage: string;
-fullWidth: boolean;
-isInvalid: boolean;
-isRequired: boolean;
-items: ComboBoxItemData[];
 as: string;
 classNames: Partial<{
 base: ClassValue;
 }>;
-multiple: boolean;
+isDisabled: boolean;
+isInvalid: boolean;
+isRequired: boolean;
+fullWidth: boolean;
 asChild: boolean;
 placeholder: string;
 modelValue: string;
 defaultValue: string;
-name: string;
+errorMessage: string;
+items: ComboBoxItemData[];
 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";
@@ -607,9 +608,9 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_129> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
-isDisabled: boolean;
 class: string;
 as: string;
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 indicatorAsChild: boolean;
@@ -639,19 +640,19 @@ ref: Element;
 value: string;
 } | undefined) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+multiple: boolean;
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-isReadonly: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
-items: AutocompleteItemData[];
-multiple: boolean;
+fullWidth: boolean;
 modelValue: string | string[];
 defaultValue: string | string[];
+labelPlacement: "inside" | "outside" | "outside-left";
+isReadonly: boolean;
+items: AutocompleteItemData[];
 defaultOpen: boolean;
 open: boolean;
 multipleOverflow: "wrap" | "collapse";
@@ -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";
@@ -783,9 +784,9 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_133> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
-isDisabled: boolean;
 class: string;
 as: string;
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 indicatorAsChild: boolean;
@@ -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;
@@ -814,7 +815,7 @@ declare const __VLS_component_124: DefineComponent<__VLS_Props_135, {}, {}, {},
 "onUpdate:page"?: ((page: number) => any) | undefined;
 "onUpdate:cursor"?: ((before: string | null, after: string | null) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
 type: "numeric" | "cursor";
 disabled: boolean;
 page: number;
@@ -852,7 +853,7 @@ handleRowClick: typeof handleRowClick;
 }, string, PublicProps, Readonly<__VLS_Props_143> & Readonly<{
 "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
 }>, {
-variant: "primary" | "secondary";
+variant: "secondary" | "primary";
 ariaLabel: string;
 estimatedRowHeight: number;
 selection: SelectionMode_2;
@@ -937,10 +938,10 @@ onLayout?: ((sizes: number[]) => any) | undefined;
 }>, {
 id: string;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
-direction: "horizontal" | "vertical";
 classNames: Partial<{
 group: ClassValue;
 }>;
+direction: "horizontal" | "vertical";
 autoSaveId: string;
 keyboardResizeBy: number;
 storage: object;
@@ -957,11 +958,11 @@ onExpand?: (() => any) | undefined;
 }>, {
 id: string;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
-collapsible: boolean;
 classNames: Partial<{
 panel: ClassValue;
 }>;
 order: number;
+collapsible: boolean;
 defaultSize: number;
 minSize: number;
 maxSize: number;
@@ -991,9 +992,9 @@ declare const __VLS_component_144: DefineComponent<__VLS_Props_152, {}, {}, {},
 }, string, PublicProps, Readonly<__VLS_Props_152> & Readonly<{
 "onUpdate:modelValue"?: ((step: number) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
 class: string | false | Record<string, unknown> | ClassValue[] | null;
-color: "default" | "accent" | "danger" | "success" | "warning";
+color: "accent" | "danger" | "success" | "warning" | "default";
 orientation: "horizontal" | "vertical";
 modelValue: number;
 defaultValue: number;
@@ -1035,8 +1036,8 @@ class: string | false | Record<string, unknown> | ClassValue[] | null;
 declare const __VLS_component_15: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_150: DefineComponent<__VLS_Props_159, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_159> & Readonly<{}>, {
-isExpanded: boolean;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
+isExpanded: boolean;
 hasChildren: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
@@ -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;
 }>, {
-orientation: "horizontal" | "vertical";
+name: string;
 as: string;
+orientation: "horizontal" | "vertical";
 disabled: boolean;
 asChild: boolean;
-name: string;
 required: boolean;
 min: number;
 max: number;
@@ -1072,10 +1073,10 @@ rangeAs: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_152: DefineComponent<__VLS_Props_162, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_162> & Readonly<{}>, {
-isDisabled: boolean;
-isIndeterminate: boolean;
 as: string;
+isDisabled: boolean;
 asChild: boolean;
+isIndeterminate: boolean;
 strokeWidth: number;
 minValue: number;
 maxValue: number;
@@ -1086,17 +1087,17 @@ getValueText: (value: number | null | undefined, max: number) => string | undefi
 
 declare const __VLS_component_153: DefineComponent<__VLS_Props_164, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_164> & Readonly<{}>, {
 size: number;
-orientation: "vertical" | "horizontal" | "both";
-hideScrollBar: boolean;
 offset: number;
+orientation: "vertical" | "horizontal" | "both";
 visibility: "auto" | "top" | "bottom" | "left" | "right" | "both" | "none";
+hideScrollBar: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 container: HTMLDivElement;
 }, HTMLDivElement>;
 
 declare const __VLS_component_154: DefineComponent<__VLS_Props_165, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_165> & Readonly<{}>, {
-orientation: "vertical" | "horizontal" | "both";
 type: "auto" | "always" | "scroll" | "hover";
+orientation: "vertical" | "horizontal" | "both";
 scrollHideDelay: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -1118,14 +1119,14 @@ declare const __VLS_component_156: DefineComponent<__VLS_PublicProps_10, {}, {},
 }, string, PublicProps, Readonly<__VLS_PublicProps_10> & Readonly<{
 "onUpdate:modelValue"?: ((value: DateValue | null | undefined) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
 isReadOnly: boolean;
 hideTimeZone: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
@@ -1216,18 +1217,18 @@ 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";
+size: "lg" | "md" | "sm";
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
 isReadOnly: boolean;
 hideTimeZone: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
@@ -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;
@@ -1328,14 +1329,14 @@ declare const __VLS_component_158: DefineComponent<__VLS_PublicProps_12, {}, {},
 }, string, PublicProps, Readonly<__VLS_PublicProps_12> & Readonly<{
 "onUpdate:modelValue"?: ((value: TimeValue | null | undefined) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
 isReadOnly: boolean;
 granularity: "hour" | "minute" | "second";
 hideTimeZone: boolean;
@@ -1447,14 +1448,14 @@ declare const __VLS_component_159: DefineComponent<__VLS_PublicProps_13, {}, {},
 "onClose-auto-focus"?: ((event: Event) => any) | undefined;
 "onUpdate:placeholder"?: ((value: DateValue | undefined) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
 defaultOpen: boolean;
 modal: boolean;
 avoidCollisions: boolean;
@@ -1491,14 +1492,14 @@ declare const __VLS_component_160: DefineComponent<__VLS_PublicProps_14, {}, {},
 "onUpdate:placeholder"?: ((value: DateValue | undefined) => any) | undefined;
 "onUpdate:start-value"?: ((value: DateValue | undefined) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
 defaultOpen: boolean;
 modal: boolean;
 avoidCollisions: boolean;
@@ -1532,12 +1533,12 @@ declare const __VLS_component_161: DefineComponent<__VLS_PublicProps_15, {}, {},
 "onUpdate:placeholder"?: ((value: DateValue | undefined) => any) | undefined;
 }>, {
 size: "sm" | "md" | "lg";
-isDisabled: boolean;
 color: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
-fullWidth: boolean;
+isDisabled: boolean;
 isInvalid: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
 defaultOpen: boolean;
 avoidCollisions: boolean;
 collisionPadding: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
@@ -1560,15 +1561,15 @@ format: ColorFormat;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_17: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{}>, {
-size: "md" | "sm" | "lg" | "xs" | "xl";
-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";
+size: "lg" | "md" | "sm" | "xl" | "xs";
+value: string | number;
+color: "danger" | "success" | "warning" | "default" | "primary";
+as: string | object;
+variant: "danger" | "success" | "warning" | "default" | "secondary" | "tertiary" | "primary" | "soft" | "solid" | "bordered" | "ghost" | "danger-soft" | "success-soft" | "warning-soft" | "outline";
+radius: "lg" | "md" | "sm" | "none" | "full";
 fullWidth: boolean;
 isIconOnly: boolean;
 isLoading: boolean;
-radius: "md" | "sm" | "lg" | "none" | "full";
-value: string | number;
-as: string | object;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -1577,11 +1578,11 @@ declare const __VLS_component_18: DefineComponent<__VLS_Props_19, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_19> & Readonly<{
 "onUpdate:modelValue"?: ((value: ButtonGroupValue) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg" | "xs" | "xl";
-variant: "default" | "danger" | "success" | "warning" | "bordered" | "primary" | "secondary" | "soft" | "solid" | "ghost" | "tertiary" | "danger-soft" | "success-soft" | "warning-soft";
-color: "default" | "danger" | "success" | "warning" | "primary";
-fullWidth: boolean;
+size: "lg" | "md" | "sm" | "xl" | "xs";
+color: "danger" | "success" | "warning" | "default" | "primary";
 orientation: "horizontal" | "vertical";
+variant: "danger" | "success" | "warning" | "default" | "secondary" | "tertiary" | "primary" | "soft" | "solid" | "bordered" | "ghost" | "danger-soft" | "success-soft" | "warning-soft";
+fullWidth: boolean;
 disabled: boolean;
 selectionMode: ButtonGroupSelectionMode;
 modelValue: ButtonGroupValue;
@@ -1592,21 +1593,21 @@ declare const __VLS_component_19: DefineComponent<__VLS_Props_21, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_21> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
-variant: "default" | "ghost";
-isIconOnly: boolean;
+size: "lg" | "md" | "sm";
 value: string;
+name: string;
 as: string;
+variant: "default" | "ghost";
+isIconOnly: boolean;
 disabled: boolean;
 asChild: boolean;
 modelValue: boolean;
 defaultValue: boolean;
-name: string;
 required: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_2: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
-animationType: "none" | "shimmer" | "pulse";
+animationType: "none" | "pulse" | "shimmer";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_20: DefineComponent<__VLS_Props_22, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -1614,15 +1615,15 @@ declare const __VLS_component_20: DefineComponent<__VLS_Props_22, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_22> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+orientation: "horizontal" | "vertical";
 variant: "default" | "ghost";
 fullWidth: boolean;
-orientation: "horizontal" | "vertical";
-isDetached: boolean;
 disabled: boolean;
 selectionMode: "single" | "multiple";
 modelValue: string | string[];
 defaultValue: string | string[];
+isDetached: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_21: DefineComponent<__VLS_Props_23, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_23> & Readonly<{}>, {
@@ -1661,8 +1662,8 @@ setErrors: (e: Record<string, string>) => void;
 onReset?: (() => any) | undefined;
 onInvalid?: ((errors: Record<string, string>) => any) | undefined;
 }>, {
-isDisabled: boolean;
 class: string;
+isDisabled: boolean;
 validationMode: ValidationMode;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLFormElement>;
 
@@ -1679,16 +1680,16 @@ clear: () => any;
 onClear?: (() => any) | undefined;
 "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
+type: string;
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-isReadonly: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
-type: string;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
+isReadonly: boolean;
 isClearable: boolean;
 showPasswordToggle: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
@@ -1702,15 +1703,15 @@ clear: () => any;
 onClear?: (() => any) | undefined;
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-isReadonly: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
+fullWidth: boolean;
+labelPlacement: "inside" | "outside" | "outside-left";
+isReadonly: boolean;
 isClearable: boolean;
 rows: number;
 autoResize: boolean;
@@ -1730,17 +1731,17 @@ declare const __VLS_component_27: DefineComponent<__VLS_Props_30, {}, {}, {}, {}
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 id: string;
-variant: "primary" | "secondary";
-isInvalid: boolean;
-isIndeterminate: boolean;
 value: string;
+name: string;
 as: string;
+variant: "secondary" | "primary";
+isInvalid: boolean;
 disabled: boolean;
 asChild: boolean;
 modelValue: boolean;
 defaultValue: boolean;
-name: string;
 required: boolean;
+isIndeterminate: boolean;
 trueValue: boolean | string | number;
 falseValue: boolean | string | number;
 indicatorForceMount: boolean;
@@ -1753,16 +1754,16 @@ 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;
 label: string;
-errorMessage: string;
-isInvalid: boolean;
 orientation: "horizontal" | "vertical";
+variant: "secondary" | "primary";
+isInvalid: boolean;
 disabled: boolean;
 modelValue: string[];
 defaultValue: string[];
-name: string;
+errorMessage: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_29: DefineComponent<__VLS_Props_32, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -1771,19 +1772,19 @@ select: (event: Event) => any;
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
 id: string;
-variant: "primary" | "secondary";
+name: string;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
-isInvalid: boolean;
 as: string;
+variant: "secondary" | "primary";
 classNames: Partial<{
 base: ClassValue;
 control: ClassValue;
 indicator: ClassValue;
 content: ClassValue;
 }>;
+isInvalid: boolean;
 disabled: boolean;
 asChild: boolean;
-name: string;
 required: boolean;
 indicatorForceMount: boolean;
 indicatorAsChild: boolean;
@@ -1791,9 +1792,9 @@ indicatorAs: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_3: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
-size: "base" | "sm" | "lg" | "xs" | "xl";
-variant: "default" | "danger" | "success" | "warning" | "muted";
+size: "lg" | "sm" | "xl" | "base" | "xs";
 as: string;
+variant: "danger" | "success" | "warning" | "default" | "muted";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_30: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -1801,19 +1802,19 @@ 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;
 label: string;
-errorMessage: string;
-isInvalid: boolean;
-orientation: "horizontal" | "vertical";
 as: string;
+orientation: "horizontal" | "vertical";
+variant: "secondary" | "primary";
+isInvalid: boolean;
 disabled: boolean;
 asChild: boolean;
 modelValue: string;
 defaultValue: string;
-name: string;
 required: boolean;
+errorMessage: string;
 dir: "ltr" | "rtl";
 loop: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -1824,15 +1825,15 @@ declare const __VLS_component_31: DefineComponent<__VLS_Props_34, {}, {}, {}, {}
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 id: string;
-size: "md" | "sm" | "lg";
-isInvalid: boolean;
+size: "lg" | "md" | "sm";
 value: string;
+name: string;
 as: string;
+isInvalid: boolean;
 disabled: boolean;
 asChild: boolean;
 modelValue: boolean;
 defaultValue: boolean;
-name: string;
 required: boolean;
 trueValue: boolean | string | number;
 falseValue: boolean | string | number;
@@ -1845,16 +1846,16 @@ declare const __VLS_component_32: DefineComponent<__VLS_Props_35, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
 description: string;
+name: string;
 label: string;
-errorMessage: string;
-isInvalid: boolean;
 orientation: "horizontal" | "vertical";
+isInvalid: boolean;
 disabled: boolean;
 modelValue: string[];
 defaultValue: string[];
-name: string;
+errorMessage: 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>;
@@ -2070,8 +2071,8 @@ declare const __VLS_component_66: DefineComponent<__VLS_Props_75, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_75> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-variant: "primary" | "secondary";
 orientation: "horizontal" | "vertical";
+variant: "secondary" | "primary";
 activationMode: "automatic" | "manual";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -2094,10 +2095,10 @@ declare const __VLS_component_70: DefineComponent<__VLS_Props_80, {}, {}, {}, {}
 }, string, PublicProps, Readonly<__VLS_Props_80> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | MultipleValue) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
 variant: "default" | "surface";
-collapsible: boolean;
 disabled: boolean;
+collapsible: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_71: DefineComponent<__VLS_Props_81, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_81> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
@@ -2189,10 +2190,10 @@ singleOpen: boolean;
 declare const __VLS_component_79: DefineComponent<__VLS_Props_89, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_89> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
 declare const __VLS_component_8: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
-size: "md" | "sm" | "lg" | "xs";
-variant: "primary" | "secondary" | "soft";
-color: "default" | "accent" | "danger" | "success" | "warning";
-placement: "top-right" | "bottom-left" | "bottom-right" | "top-left";
+size: "lg" | "md" | "sm" | "xs";
+color: "accent" | "danger" | "success" | "warning" | "default";
+variant: "secondary" | "primary" | "soft";
+placement: "bottom-left" | "bottom-right" | "top-left" | "top-right";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_80: DefineComponent<__VLS_Props_90, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_90> & Readonly<{}>, {
@@ -2201,8 +2202,8 @@ isLast: boolean;
 
 declare const __VLS_component_81: DefineComponent<__VLS_Props_91, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_91> & Readonly<{}>, {
 orientation: "horizontal" | "vertical";
-isAttached: boolean;
 loop: boolean;
+isAttached: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_82: DefineComponent<__VLS_Props_92, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_92> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -2237,8 +2238,8 @@ close: () => any;
 }, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{
 onClose?: (() => any) | undefined;
 }>, {
-variant: "bordered" | "soft" | "solid" | "text" | "outlined";
-color: "default" | "accent" | "danger" | "success" | "warning";
+color: "accent" | "danger" | "success" | "warning" | "default";
+variant: "text" | "soft" | "solid" | "bordered" | "outlined";
 dot: boolean;
 isClosable: boolean;
 closeAriaLabel: string;
@@ -2271,7 +2272,7 @@ onResume?: (() => any) | undefined;
 "onSwipe-cancel"?: ((event: Event) => any) | undefined;
 "onSwipe-end"?: ((event: Event) => any) | undefined;
 }>, {
-variant: "default" | "accent" | "danger" | "success" | "warning";
+variant: "accent" | "danger" | "success" | "warning" | "default";
 open: boolean;
 position: ToastPosition_2;
 duration: number;
@@ -2305,18 +2306,18 @@ onHighlight?: ((context: unknown) => any) | undefined;
 onLeave?: ((event: Event) => any) | undefined;
 "onLoad-more"?: (() => any) | undefined;
 }>, {
-variant: "default" | "danger";
-isDisabled: boolean;
+name: string;
+multiple: boolean;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
-isLoading: boolean;
-orientation: "horizontal" | "vertical";
 as: string;
-multiple: boolean;
+orientation: "horizontal" | "vertical";
+variant: "danger" | "default";
+isDisabled: boolean;
+isLoading: boolean;
 asChild: boolean;
 selectionMode: "single" | "multiple";
 modelValue: string | string[];
 defaultValue: string | string[];
-name: string;
 required: boolean;
 dir: "ltr" | "rtl";
 maxHeight: string | number;
@@ -2385,14 +2386,14 @@ select: (event: Event) => any;
 }, string, PublicProps, Readonly<__VLS_Props_109> & Readonly<{
 onSelect?: ((event: Event) => any) | undefined;
 }>, {
-variant: "default" | "danger";
-isDisabled: boolean;
 class: string | false | Record<string, unknown> | ClassValue[] | null;
 as: string;
+variant: "danger" | "default";
 classNames: Partial<{
 item: ClassValue;
 indicator: ClassValue;
 }>;
+isDisabled: boolean;
 disabled: boolean;
 asChild: boolean;
 indicatorAsChild: boolean;
@@ -2419,19 +2420,19 @@ declare const __VLS_component_99: DefineComponent<Props_3, {}, {}, {}, {}, Compo
 "onUpdate:modelValue"?: ((value: SelectItemValue | SelectItemValue[]) => any) | undefined;
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg";
+size: "lg" | "md" | "sm";
+multiple: boolean;
+color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
 variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
 isDisabled: boolean;
-color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
-fullWidth: boolean;
 isInvalid: boolean;
-isReadonly: boolean;
-labelPlacement: "inside" | "outside" | "outside-left";
 isRequired: boolean;
-items: SelectItemData[];
-multiple: boolean;
+fullWidth: boolean;
 modelValue: SelectItemValue | SelectItemValue[];
 defaultValue: SelectItemValue | SelectItemValue[];
+labelPlacement: "inside" | "outside" | "outside-left";
+isReadonly: boolean;
+items: SelectItemData[];
 dir: "ltr" | "rtl";
 defaultOpen: boolean;
 open: boolean;
@@ -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"]>;
@@ -9142,10 +9147,10 @@ default: string;
 }>> & Readonly<{
 "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg" | "cover" | "xs";
-variant: "opaque" | "blur" | "transparent";
-status: "default" | "accent" | "danger" | "success" | "warning";
-placement: "bottom" | "top" | "center" | "auto";
+size: "lg" | "md" | "sm" | "xs" | "cover";
+status: "accent" | "danger" | "success" | "warning" | "default";
+variant: "transparent" | "blur" | "opaque";
+placement: "top" | "bottom" | "center" | "auto";
 defaultOpen: boolean;
 open: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -9403,7 +9408,7 @@ declare type ClassValue = string | false | null | undefined | Record<string, unk
 declare function clearErrors(name?: string): void;
 
 export declare const CloseButton: DefineComponent<__VLS_Props_20, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_20> & Readonly<{}>, {
-size: "md" | "sm" | "lg" | "xs" | "xl";
+size: "lg" | "md" | "sm" | "xl" | "xs";
 isLoading: boolean;
 disabled: boolean;
 ariaLabel: string;
@@ -9435,10 +9440,10 @@ onChange?: ((value: Color) => any) | undefined;
 "onUpdate:color"?: ((value: Color) => any) | undefined;
 "onChange-end"?: ((value: Color) => any) | undefined;
 }>, {
-showDots: boolean;
 disabled: boolean;
 asChild: boolean;
 required: boolean;
+showDots: boolean;
 xChannel: ColorChannel;
 yChannel: ColorChannel;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -9467,7 +9472,7 @@ export declare const ColorInputGroup: DefineComponent<__VLS_Props_180, {}, {}, {
 "onUpdate:modelValue"?: ((value: Color) => any) | undefined;
 "onUpdate:color"?: ((value: Color) => any) | undefined;
 }>, {
-variant: "primary" | "secondary";
+variant: "secondary" | "primary";
 fullWidth: boolean;
 disabled: boolean;
 asChild: boolean;
@@ -9511,10 +9516,10 @@ onHighlight?: ((value: unknown) => any) | undefined;
 "onEntry-focus"?: ((event: Event) => any) | undefined;
 onLeave?: ((event: Event) => any) | undefined;
 }>, {
-size: "md" | "sm" | "lg" | "xs" | "xl";
-variant: "circle" | "square";
-layout: "grid" | "stack";
+size: "lg" | "md" | "sm" | "xl" | "xs";
 multiple: boolean;
+layout: "stack" | "grid";
+variant: "circle" | "square";
 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"]>;
@@ -9752,12 +9762,12 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  }>, {
  size: DrawerSize;
  placement: DrawerPlacement;
- inline: boolean;
- dock: boolean;
  defaultOpen: boolean;
  open: boolean;
  modal: boolean;
+ inline: boolean;
  hideBackdrop: boolean;
+ dock: boolean;
  }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
  export declare const DrawerBody: __VLS_WithTemplateSlots_62<typeof __VLS_component_62, __VLS_TemplateResult_62["slots"]>;
@@ -9896,11 +9906,12 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  }>, {
  length: number;
  id: string;
- variant: "primary" | "secondary";
+ name: string;
  class: string | false | Record<string, unknown> | ClassValue[] | null;
  type: "text";
  mask: boolean;
  as: string;
+ variant: "secondary" | "primary";
  classNames: Partial<{
  base: ClassValue;
  group: ClassValue;
@@ -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> {
@@ -10087,13 +10099,13 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  }>> & Readonly<{
  "onUpdate:open"?: ((...args: any[]) => any) | undefined;
  }>, {
- size: "md" | "sm" | "lg" | "xs" | "full";
- variant: "opaque" | "blur" | "transparent";
- placement: "bottom" | "top" | "center" | "auto";
- scroll: "inside" | "outside";
+ size: "lg" | "md" | "sm" | "xs" | "full";
+ variant: "transparent" | "blur" | "opaque";
+ placement: "top" | "bottom" | "center" | "auto";
  defaultOpen: boolean;
  open: boolean;
  modal: boolean;
+ scroll: "inside" | "outside";
  }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
  export declare const ModalBody: __VLS_WithTemplateSlots_43<typeof __VLS_component_43, __VLS_TemplateResult_43["slots"]>;
@@ -10126,17 +10138,17 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  }, string, PublicProps, Readonly<__VLS_PublicProps_4> & Readonly<{
  "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
  }>, {
- size: "md" | "sm" | "lg";
+ size: "lg" | "md" | "sm";
+ color: "danger" | "success" | "warning" | "default" | "secondary" | "primary";
+ label: string;
  variant: "flat" | "bordered" | "faded" | "underlined" | "raised";
  isDisabled: boolean;
- label: string;
- color: "default" | "danger" | "success" | "warning" | "primary" | "secondary";
- fullWidth: boolean;
  isInvalid: boolean;
- isReadonly: boolean;
+ fullWidth: boolean;
  ariaLabel: string;
  min: number;
  max: number;
+ isReadonly: boolean;
  step: number;
  formatOptions: Intl.NumberFormatOptions;
  locale: string;
@@ -10246,16 +10258,16 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
  export declare const PopoverTrigger: __VLS_WithTemplateSlots_33<typeof __VLS_component_33, __VLS_TemplateResult_33["slots"]>;
 
  export declare const ProgressBar: DefineComponent<__VLS_Props_161, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_161> & Readonly<{}>, {
- isDisabled: boolean;
- isStriped: boolean;
- isIndeterminate: boolean;
  as: string;
+ isDisabled: boolean;
  asChild: boolean;
+ isIndeterminate: boolean;
  indicatorAsChild: boolean;
  indicatorAs: string;
  minValue: number;
  maxValue: number;
  showValueLabel: boolean;
+ isStriped: boolean;
  getValueLabel: (value: number | null | undefined, max: number) => string | undefined;
  getValueText: (value: number | null | undefined, max: number) => string | undefined;
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -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";
+ size: "lg" | "md" | "sm" | "xl";
+ color: "current" | "accent" | "danger" | "success" | "warning";
  label: string;
- color: "accent" | "danger" | "success" | "warning" | "current";
  }, {}, {}, {}, 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,9 +12348,9 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      readonly label: string;
      readonly onClick: () => void;
      } | undefined;
-     readonly variant: ToastVariant;
      readonly description: string;
      readonly title: string;
+     readonly variant: ToastVariant;
      readonly position: ToastPosition;
      readonly duration: number;
      }[], readonly {
@@ -11704,9 +12360,9 @@ export declare function composeSlotClassName<V extends Record<string, unknown>>(
      readonly label: string;
      readonly onClick: () => void;
      } | undefined;
-     readonly variant: ToastVariant;
      readonly description: string;
      readonly title: string;
+     readonly variant: ToastVariant;
      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>;