@livestorm/ui-vue 1.1.2 → 2.0.0

package/dist/types/src/components/UiButton/UiButton.vue.d.ts

@@ -0,0 +1,249 @@
+import { type Size } from '../../constants';
+import { type ButtonVariant, type ButtonColor } from '../../composables/useButtonStyles';
+import type { RouteLocationRaw } from 'vue-router';
+export type Variant = ButtonVariant;
+export type Color = ButtonColor;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: () => Variant;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: Size) => boolean;
+    };
+    color: {
+        type: () => Color;
+        default: string;
+        validator: (value: Color) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showIconLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    iconRight: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    imageSource: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    to: {
+        type: () => RouteLocationRaw;
+        default: undefined;
+    };
+}>, {
+    component: import("vue").ComputedRef<{
+        is: string;
+        props: {
+            to: any;
+            href?: undefined;
+            type?: undefined;
+            disabled?: undefined;
+        };
+    } | {
+        is: string;
+        props: {
+            href: any;
+            to?: undefined;
+            type?: undefined;
+            disabled?: undefined;
+        };
+    } | {
+        is: string;
+        props: {
+            type: any;
+            disabled: any;
+            to?: undefined;
+            href?: undefined;
+        };
+    }>;
+    defaultSlot: import("vue").ComputedRef<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | undefined>;
+    iconSlot: import("vue").ComputedRef<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | undefined>;
+    hasLabel: import("vue").ComputedRef<boolean>;
+    isLink: import("vue").ComputedRef<boolean>;
+    iconSizeClasses: import("vue").ComputedRef<{
+        'size-3': boolean;
+        'size-4': boolean;
+        'size-5': boolean;
+    }>;
+    buttonClasses: import("vue").ComputedRef<(string | {
+        'size-8': boolean;
+        'size-10': boolean;
+        'size-12': boolean;
+        'grid place-items-center'?: undefined;
+        'h-8 text-action-button-sm'?: undefined;
+        'h-10 text-action-button-md'?: undefined;
+        'h-12 text-action-button-lg'?: undefined;
+        'inline-flex'?: undefined;
+    } | {
+        'grid place-items-center': boolean;
+        'size-8'?: undefined;
+        'size-10'?: undefined;
+        'size-12'?: undefined;
+        'h-8 text-action-button-sm'?: undefined;
+        'h-10 text-action-button-md'?: undefined;
+        'h-12 text-action-button-lg'?: undefined;
+        'inline-flex'?: undefined;
+    } | {
+        'h-8 text-action-button-sm': boolean;
+        'h-10 text-action-button-md': boolean;
+        'h-12 text-action-button-lg': boolean;
+        'size-8'?: undefined;
+        'size-10'?: undefined;
+        'size-12'?: undefined;
+        'grid place-items-center'?: undefined;
+        'inline-flex'?: undefined;
+    } | {
+        'inline-flex': boolean;
+        'size-8'?: undefined;
+        'size-10'?: undefined;
+        'size-12'?: undefined;
+        'grid place-items-center'?: undefined;
+        'h-8 text-action-button-sm'?: undefined;
+        'h-10 text-action-button-md'?: undefined;
+        'h-12 text-action-button-lg'?: undefined;
+    })[]>;
+    bgClasses: import("vue").ComputedRef<string>;
+    focusRingClasses: string;
+    textClasses: import("vue").ComputedRef<string[]>;
+    borderClasses: import("vue").ComputedRef<string[]>;
+    overlayClasses: import("vue").ComputedRef<string[]>;
+    isSquare: import("vue").ComputedRef<boolean>;
+    finalDisabled: import("vue").ComputedRef<any>;
+    labelFinal: import("vue").ComputedRef<any>;
+    onClick: (event: Event) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseenter" | "mouseleave")[], "click" | "mouseenter" | "mouseleave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: () => Variant;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: Size) => boolean;
+    };
+    color: {
+        type: () => Color;
+        default: string;
+        validator: (value: Color) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showIconLeft: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    iconRight: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    imageSource: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    tooltip: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    to: {
+        type: () => RouteLocationRaw;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onMouseenter?: ((...args: any[]) => any) | undefined;
+    onMouseleave?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: string;
+    label: string;
+    type: string;
+    icon: string | boolean;
+    disabled: boolean;
+    to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+    href: string;
+    variant: "cta" | "cta-alpha" | "secondary" | "tertiary";
+    color: "error" | "primary" | "neutral" | "warning" | "success" | "neutral-invert";
+    showIconLeft: boolean;
+    iconRight: string | boolean;
+    loading: boolean;
+    imageSource: string;
+    tooltip: string | Record<string, any>;
+}, {}, {
+    RenderSlot: ({ vnodes }: {
+        vnodes: any;
+    }) => any;
+    UiLoader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        size: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        size: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+    }>> & Readonly<{}>, {
+        size: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/src/components/UiButtonGroup/UiButtonGroup.vue.d.ts

@@ -0,0 +1,42 @@
+import type { ButtonGroupColor, ButtonGroupSize } from './types';
+interface UiButtonGroupProps {
+    modelValue?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    size?: ButtonGroupSize;
+    color?: ButtonGroupColor;
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * When false (default), clicking the selected item is a no-op — matches
+     * radio-group semantics where exactly one option is always selected.
+     * Set to true to allow clearing the selection by clicking the active item.
+     */
+    allowDeselect?: boolean;
+}
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<UiButtonGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+    size: ButtonGroupSize;
+    disabled: boolean;
+    color: ButtonGroupColor;
+    name: string;
+    defaultValue: string;
+    modelValue: string;
+    allowDeselect: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/components/UiButtonGroup/UiButtonGroupItem.vue.d.ts

@@ -0,0 +1,21 @@
+interface UiButtonGroupItemProps {
+    value: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiButtonGroupItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonGroupItemProps> & Readonly<{}>, {
+    ariaLabel: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/components/UiButtonGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default as UiButtonGroup } from './UiButtonGroup.vue';
+export { default as UiButtonGroupItem } from './UiButtonGroupItem.vue';
+export type { ButtonGroupColor, ButtonGroupSize } from './types';

package/dist/types/src/components/UiButtonGroup/types.d.ts

@@ -0,0 +1,10 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+export type ButtonGroupSize = 'sm' | 'md' | 'lg';
+export type ButtonGroupColor = 'neutral' | 'neutral-invert' | 'primary' | 'success' | 'warning' | 'error';
+export interface ButtonGroupRegister {
+    register(value: string, el: HTMLElement): void;
+    unregister(value: string): void;
+}
+export declare const BUTTON_GROUP_SIZE_KEY: InjectionKey<ComputedRef<ButtonGroupSize>>;
+export declare const BUTTON_GROUP_COLOR_KEY: InjectionKey<ComputedRef<ButtonGroupColor>>;
+export declare const BUTTON_GROUP_REGISTER_KEY: InjectionKey<ButtonGroupRegister>;

package/dist/types/src/components/UiCard/UiCard.vue.d.ts

@@ -0,0 +1,31 @@
+export interface UiCardProps {
+    /** Visual variant of the card */
+    variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'primary' | 'transparent' | 'primary-fill' | 'white';
+    /** Padding size inside the card */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Whether the card is interactive/clickable */
+    interactive?: boolean;
+    /** Whether the card is selected */
+    selected?: boolean;
+    /** Whether the card is disabled */
+    disabled?: boolean;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiCardProps> & Readonly<{}>, {
+    disabled: boolean;
+    variant: "neutral" | "success" | "warning" | "danger" | "primary" | "transparent" | "primary-fill" | "white";
+    padding: "none" | "sm" | "md" | "lg";
+    interactive: boolean;
+    selected: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/components/UiCarousel/UiCarousel.vue.d.ts

@@ -0,0 +1,63 @@
+import type { EmblaOptionsType } from 'embla-carousel';
+export interface UiCarouselProps {
+    /** Carousel options from Embla */
+    options?: EmblaOptionsType;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+    /** Show dot indicators */
+    showDots?: boolean;
+    /** Enable loop mode */
+    loop?: boolean;
+    /** Slides to scroll at once */
+    slidesToScroll?: number;
+    /** Alignment of slides */
+    align?: 'start' | 'center' | 'end';
+    /** Enable drag interactions */
+    draggable?: boolean;
+    /** Enable autoplay */
+    autoplay?: boolean;
+    /** Autoplay delay in milliseconds */
+    autoplayDelay?: number;
+    /** Stop autoplay on interaction */
+    stopOnInteraction?: boolean;
+    /** Stop autoplay when mouse enters carousel */
+    stopOnMouseEnter?: boolean;
+}
+declare function scrollPrev(): void;
+declare function scrollNext(): void;
+declare function scrollTo(index: number): void;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiCarouselProps, {
+    scrollPrev: typeof scrollPrev;
+    scrollNext: typeof scrollNext;
+    scrollTo: typeof scrollTo;
+    emblaApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (index: number) => any;
+    init: () => any;
+}, string, import("vue").PublicProps, Readonly<UiCarouselProps> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+    onInit?: (() => any) | undefined;
+}>, {
+    align: "start" | "center" | "end";
+    loop: boolean;
+    autoplay: boolean;
+    showArrows: boolean;
+    showDots: boolean;
+    slidesToScroll: number;
+    draggable: boolean;
+    autoplayDelay: number;
+    stopOnInteraction: boolean;
+    stopOnMouseEnter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/components/UiCarousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UiCarousel } from './UiCarousel.vue';
+export type { UiCarouselProps } from './UiCarousel.vue';

package/dist/types/src/components/UiColorField/UiColorField.vue.d.ts

@@ -0,0 +1,19 @@
+import type { UiColorFieldProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<UiColorFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<UiColorFieldProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    size: import("../UiTextField").TextFieldSize;
+    ariaLabel: string;
+    label: string;
+    disabled: boolean;
+    modelValue: string;
+    placeholder: string;
+    id: string;
+    defaultColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/src/components/UiColorField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UiColorField } from './UiColorField.vue';
+export type { UiColorFieldProps } from './types';

package/dist/types/src/components/UiColorField/types.d.ts

@@ -0,0 +1,29 @@
+import type { TextFieldSize } from '../UiTextField';
+export interface UiColorFieldProps {
+    /** Hex color, v-model — the source of truth. Emitted as lowercase #rrggbb. */
+    modelValue?: string;
+    /** Fallback color for the swatch/picker when modelValue is empty or invalid. */
+    defaultColor?: string;
+    /** Disable interaction (blocks opening the picker and greys the field). */
+    disabled?: boolean;
+    /** Size passed through to the underlying UiTextField. */
+    size?: TextFieldSize;
+    /** Placeholder shown when there is no value. */
+    placeholder?: string;
+    /**
+     * Visible field label, forwarded to the underlying UiTextField and rendered
+     * as an associated <label>. Leave unset when the field already sits under an
+     * external label (e.g. BaseFormInput) to avoid a duplicate.
+     */
+    label?: string;
+    /**
+     * Id applied to the underlying input. Set this to match an external
+     * <label for="..."> (e.g. BaseFormInput's label) so the two associate.
+     */
+    id?: string;
+    /**
+     * Accessible name applied as aria-label on the input, for when the field has
+     * no visible/associated label of its own.
+     */
+    ariaLabel?: string;
+}

package/dist/types/src/components/UiColorPicker/UiColorPicker.vue.d.ts

@@ -0,0 +1,35 @@
+import type { Color } from 'reka-ui';
+import type { ColorFormat, UiColorPickerProps } from './types';
+declare var __VLS_144: {};
+type __VLS_Slots = {} & {
+    footer?: (props: typeof __VLS_144) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "update:color": (color: Color) => any;
+    "update:selectedPresetValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<UiColorPickerProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:color"?: ((color: Color) => any) | undefined;
+    "onUpdate:selectedPresetValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    variant: import("./types").UiColorPickerVariant;
+    color: Color;
+    modelValue: string;
+    modes: ColorFormat[];
+    outputFormat: ColorFormat | "auto";
+    presetConfig: import("./types").UiColorPickerPresetConfig;
+    selectedPresetValue: string | null;
+    showAlpha: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/components/UiColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UiColorPicker } from './UiColorPicker.vue';
+export type { UiColorPickerProps, Color, ColorFormat } from './types';

package/dist/types/src/components/UiColorPicker/types.d.ts

@@ -0,0 +1,97 @@
+import type { Color, ColorFormat } from 'reka-ui';
+export type { Color, ColorFormat };
+/**
+ * Rendering variant:
+ * - 'default' — full picker (area, sliders, value fields, presets).
+ * - 'swatch-only' — only the card with the presets grid (plus heading and footer
+ *   slot); the custom-color controls are not rendered. `modes`, `outputFormat`,
+ *   and `showAlpha` are irrelevant in this variant.
+ */
+export type UiColorPickerVariant = 'default' | 'swatch-only';
+/** Size of the preset selector swatches: 'sm' (24px), 'lg' (48px). */
+export type UiColorPickerSwatchSize = 'sm' | 'lg';
+export interface UiColorPickerPreset {
+    /** Color applied to the picker when this preset is selected. */
+    color: string;
+    /**
+     * Stable identity for the preset (e.g. a semantic token or enum name).
+     * Colors are lossy identifiers — two presets may share a hex. Set `value`
+     * together with the `selectedPresetValue` prop / `update:selectedPresetValue`
+     * emit to select and indicate presets by identity instead of by color.
+     */
+    value?: string;
+    /**
+     * Accessible name for the swatch (e.g. 'Accent 100'). When omitted, reka-ui
+     * announces a generated descriptive color name (e.g. 'vibrant red') — coarse
+     * and English-only, so prefer a label for semantic palettes.
+     */
+    label?: string;
+    /**
+     * Left half of the swatch (e.g. the tone as it appears in light mode).
+     * A two-tone swatch is rendered only when both leftColor and rightColor are set;
+     * otherwise the swatch uses `color`.
+     */
+    leftColor?: string;
+    /** Right half of the swatch (e.g. the tone as it appears in dark mode). See leftColor. */
+    rightColor?: string;
+}
+export interface UiColorPickerPresetConfig {
+    /** Label rendered above the presets grid. Defaults to 'Presets'; pass null to hide the heading (the swatch listbox keeps an aria-label). */
+    label?: string | null;
+    /**
+     * Preset swatches. Each preset's `color` is applied to the picker on select;
+     * an optional `leftColor`/`rightColor` pair renders a two-tone swatch (otherwise
+     * the swatch uses `color`).
+     */
+    presets: UiColorPickerPreset[];
+    /**
+     * Size of the preset selector swatches: 'sm' (24px), 'lg' (48px).
+     * @default 'lg'
+     */
+    swatchSize?: UiColorPickerSwatchSize;
+}
+export interface UiColorPickerProps {
+    /**
+     * Primary v-model: a color string (e.g. '#0B42C3', 'rgb(11, 66, 195)',
+     * 'hsl(222, 89%, 40%)', 'hsb(222, 94%, 76%)').
+     * With the default `outputFormat: 'auto'`, the format follows the active
+     * display mode and changes when the mode is switched. With a fixed
+     * `outputFormat`, the emitted format is that fixed format regardless of
+     * the display mode. See `outputFormat`.
+     */
+    modelValue?: string;
+    /** Optional v-model:color — the full reka Color object (lossless). */
+    color?: Color;
+    /** Rendering variant. See UiColorPickerVariant. */
+    variant?: UiColorPickerVariant;
+    /**
+     * Color modes the user may switch between, in display order. Defaults to all
+     * four. With a single entry the switcher is hidden and the output format is
+     * fixed to that mode.
+     */
+    modes?: ColorFormat[];
+    /**
+     * Format the `modelValue` / `change` value is emitted in.
+     * - `'auto'` (default) follows the mode the user has selected in the switcher.
+     * - A specific format (`'hex'`, `'rgb'`, `'hsl'`, `'hsb'`) pins the emitted
+     *   format regardless of the display mode, independent of `modes`.
+     */
+    outputFormat?: ColorFormat | 'auto';
+    /**
+     * Preset swatches plus their label and swatch size. Omit (or pass an empty
+     * `presets` array) to hide the presets section.
+     */
+    presetConfig?: UiColorPickerPresetConfig;
+    /**
+     * Controlled preset selection by identity (`v-model:selected-preset-value`).
+     * When provided (including null), the selection indicator marks the preset
+     * whose `value` matches — never by color, so duplicate-hex presets stay
+     * distinguishable; null marks none. When omitted, the indicator falls back
+     * to matching the current color against each preset's hex.
+     */
+    selectedPresetValue?: string | null;
+    /** Show the alpha/transparency slider. */
+    showAlpha?: boolean;
+    /** Disable all interaction. */
+    disabled?: boolean;
+}

package/dist/types/src/components/UiDialog/MarketplaceHeaderExample.vue.d.ts

@@ -0,0 +1,28 @@
+import { type Slot } from 'vue';
+interface UiDialogMarketplaceHeaderProps {
+    icon?: string;
+    logo?: string;
+    title: string;
+    description?: string;
+    gradientColor?: string;
+    images?: string[];
+}
+type __VLS_Slots = {
+    switch(): Slot;
+    carousel(): Slot;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiDialogMarketplaceHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiDialogMarketplaceHeaderProps> & Readonly<{}>, {
+    icon: string;
+    description: string;
+    logo: string;
+    gradientColor: string;
+    images: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/src/components/UiDialog/UiDialog.vue.d.ts

@@ -0,0 +1,18 @@
+import type { DialogRootProps } from 'reka-ui';
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DialogRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DialogRootProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};