@poupe/vue/dist/index.d.ts

Vue component library for Poupe UI framework with theme customization and accessibility support

import { ClassValue } from 'tailwind-variants';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { ComponentPublicInstance } from 'vue';
import { DefineComponent } from 'vue';
import { IconifyIconProps } from '@iconify/vue';
import { InputHTMLAttributes } from 'vue';
import { InputTypeHTMLAttribute } from 'vue';
import { PublicProps } from 'vue';
import { TVReturnType } from 'tailwind-variants';
import { VariantProps } from 'tailwind-variants';

declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
"update:modelValue": (value: any) => any;
}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
}>, {
value: never;
surface: "primary" | "secondary" | "tertiary" | "error" | "base" | "lowest" | "low" | "high" | "highest" | "primary-fixed" | "secondary-fixed" | "tertiary-fixed" | "primary-container" | "secondary-container" | "tertiary-container" | "error-container" | "inverse" | "inverse-primary";
border: "none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline";
padding: number;
class: string;
rounded: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl";
outline: "none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline";
type: InputType;
expand: boolean;
id: string;
iconStart: string;
iconEnd: string;
unit: string;
modelValue: InputValue;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare type __VLS_Props = InputProps;

declare type __VLS_PublicProps = {
    modelValue?: InputValue;
} & __VLS_Props;

declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        start?(_: {
            padding: number | undefined;
            class: string;
        }): any;
        field?(_: {
            padding: number | undefined;
            class: string;
            ref: (ref: Element | ComponentPublicInstance | null) => void;
        }): any;
        unit?(_: {
            padding: number | undefined;
            class: string;
        }): any;
        end?(_: {
            padding: number | undefined;
            class: string;
        }): any;
    };
    refs: {};
    rootEl: any;
};

declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;

declare type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type __VLS_WithTemplateSlots_2<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type __VLS_WithTemplateSlots_3<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type __VLS_WithTemplateSlots_4<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type __VLS_WithTemplateSlots_5<T, S> = T & {
    new (): {
        $slots: S;
    };
};

export declare const Button: __VLS_WithTemplateSlots<DefineComponent<ButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: (event: MouseEvent) => any;
}, string, PublicProps, Readonly<ButtonProps> & Readonly<{
onClick?: ((event: MouseEvent) => any) | undefined;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
buttonElement: HTMLDivElement;
}, any>, {
    default?(_: {}): any;
}>;

/** Button component props */
export declare interface ButtonProps extends Omit<SurfaceProps, 'padding' | 'role' | 'tone' | 'level' | 'variant'> {
    /** Button label text */
    label?: string;
    /** Material Design 3 button type */
    type?: ButtonType;
    /** Button size */
    size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
    /** Semantic color variant for the button */
    variant?: ButtonVariant;
    /** Loading state */
    loading?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Full width button */
    expand?: boolean;
    /** Add ellipsis to label */
    ellipsis?: boolean;
    /** Floating Action Button mode */
    fab?: boolean;
    /** Extended FAB (only with fab=true) */
    extended?: boolean;
    /** Icon button mode */
    iconButton?: boolean;
    /** Toggle button mode */
    toggle?: boolean;
    /** Toggle pressed state */
    pressed?: boolean;
    /** Leading icon */
    icon?: string;
    /** Trailing icon */
    trailingIcon?: string;
    /** Icon start slot content */
    iconStart?: string;
    /** Icon end slot content */
    iconEnd?: string;
}

/** Material Design 3 button types */
declare type ButtonType = 'text' | 'outlined' | 'filled' | 'elevated' | 'tonal';

/** Button color variants */
declare type ButtonVariant = 'base' | 'primary' | 'secondary' | 'tertiary' | 'error';

export declare const Card: __VLS_WithTemplateSlots_2<DefineComponent<CardProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
    header?(_: {}): any;
    default?(_: {}): any;
    footer?(_: {}): any;
}>;

/** Card component props */
export declare interface CardProps extends Omit<SurfaceProps, 'padding'> {
    /** Card title displayed in header */
    title?: string;
    /** Convenience prop for surface colors */
    surface?: 'base' | 'dim' | 'bright' | 'lowest' | 'low' | 'container' | 'high' | 'highest';
    /** Convenience prop for container colors */
    container?: 'primary' | 'secondary' | 'tertiary' | 'error';
}

export declare const Icon: DefineComponent<IconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

export declare interface IconProps extends Omit<IconifyIconProps, 'icon'> {
    icon?: IconifyIconProps['icon'];
}

export declare const Input: __VLS_WithTemplateSlots_5<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

export declare interface InputProps {
    class?: string;
    id?: string;
    type?: InputType;
    modelValue?: InputValue;
    value?: never;
    iconStart?: string;
    iconEnd?: string;
    unit?: string;
    surface?: InputWrapperVariantProps['surface'];
    border?: InputWrapperVariantProps['border'];
    outline?: InputWrapperVariantProps['outline'];
    rounded?: InputWrapperVariantProps['rounded'];
    padding?: InputWrapperVariantProps['padding'];
    expand?: InputWrapperVariantProps['expand'];
}

export declare type InputType = InputTypeHTMLAttribute;

export declare type InputValue = InputHTMLAttributes['value'];

declare type InputWrapperVariantProps = VariantProps<typeof inputWrapperVariants>;

declare const inputWrapperVariants: TVReturnType<    {
surface: Record<"primary" | "secondary" | "tertiary" | "error" | "base" | "lowest" | "low" | "high" | "highest" | "primary-fixed" | "secondary-fixed" | "tertiary-fixed" | "primary-container" | "secondary-container" | "tertiary-container" | "error-container" | "inverse" | "inverse-primary", Record<string, ClassValue>>;
border: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
outline: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
rounded: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl", Record<string, ClassValue>>;
padding: {
[x: number]: {
start: string;
field: string;
unit: string;
end: string;
};
};
expand: {
true: {
wrapper: string;
};
};
}, {
wrapper: string[];
field: string;
start: string;
input: string;
unit: string;
end: string;
}, undefined, {
surface: Record<"primary" | "secondary" | "tertiary" | "error" | "base" | "lowest" | "low" | "high" | "highest" | "primary-fixed" | "secondary-fixed" | "tertiary-fixed" | "primary-container" | "secondary-container" | "tertiary-container" | "error-container" | "inverse" | "inverse-primary", Record<string, ClassValue>>;
border: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
outline: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
rounded: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl", Record<string, ClassValue>>;
padding: {
[x: number]: {
start: string;
field: string;
unit: string;
end: string;
};
};
expand: {
true: {
wrapper: string;
};
};
}, {
wrapper: string[];
field: string;
start: string;
input: string;
unit: string;
end: string;
}, TVReturnType<    {
surface: Record<"primary" | "secondary" | "tertiary" | "error" | "base" | "lowest" | "low" | "high" | "highest" | "primary-fixed" | "secondary-fixed" | "tertiary-fixed" | "primary-container" | "secondary-container" | "tertiary-container" | "error-container" | "inverse" | "inverse-primary", Record<string, ClassValue>>;
border: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
outline: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
rounded: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl", Record<string, ClassValue>>;
padding: {
[x: number]: {
start: string;
field: string;
unit: string;
end: string;
};
};
expand: {
true: {
wrapper: string;
};
};
}, {
wrapper: string[];
field: string;
start: string;
input: string;
unit: string;
end: string;
}, undefined, unknown, unknown, undefined>>;

export declare const Placeholder: __VLS_WithTemplateSlots_3<DefineComponent<PlaceholderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PlaceholderProps> & Readonly<{}>, {
shadow: "none" | "current" | "z1" | "z2" | "z3" | "z4" | "z5" | "inset";
border: "none" | "solid" | "dashed";
rounded: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl";
color: "current" | "primary" | "secondary" | "tertiary" | "error" | "outline" | "outline-variant";
rw: number;
rh: number;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
    default?(_: {}): any;
}>;

declare const placeholder: TVReturnType<    {
border: Record<"none" | "solid" | "dashed", Record<string, ClassValue>>;
color: {
current: {
wrapper: string;
pattern: string;
};
"outline-variant": {
wrapper: string;
pattern: string;
};
outline: {
wrapper: string;
pattern: string;
};
primary: {
wrapper: string;
pattern: string;
};
secondary: {
wrapper: string;
pattern: string;
};
tertiary: {
wrapper: string;
pattern: string;
};
error: {
wrapper: string;
pattern: string;
};
};
rounded: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl", Record<string, ClassValue>>;
shadow: Record<"none" | "current" | "z1" | "z2" | "z3" | "z4" | "z5" | "inset", Record<string, ClassValue>>;
}, {
wrapper: string;
pattern: string;
}, undefined, {
border: Record<"none" | "solid" | "dashed", Record<string, ClassValue>>;
color: {
current: {
wrapper: string;
pattern: string;
};
"outline-variant": {
wrapper: string;
pattern: string;
};
outline: {
wrapper: string;
pattern: string;
};
primary: {
wrapper: string;
pattern: string;
};
secondary: {
wrapper: string;
pattern: string;
};
tertiary: {
wrapper: string;
pattern: string;
};
error: {
wrapper: string;
pattern: string;
};
};
rounded: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl", Record<string, ClassValue>>;
shadow: Record<"none" | "current" | "z1" | "z2" | "z3" | "z4" | "z5" | "inset", Record<string, ClassValue>>;
}, {
wrapper: string;
pattern: string;
}, TVReturnType<    {
border: Record<"none" | "solid" | "dashed", Record<string, ClassValue>>;
color: {
current: {
wrapper: string;
pattern: string;
};
"outline-variant": {
wrapper: string;
pattern: string;
};
outline: {
wrapper: string;
pattern: string;
};
primary: {
wrapper: string;
pattern: string;
};
secondary: {
wrapper: string;
pattern: string;
};
tertiary: {
wrapper: string;
pattern: string;
};
error: {
wrapper: string;
pattern: string;
};
};
rounded: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl", Record<string, ClassValue>>;
shadow: Record<"none" | "current" | "z1" | "z2" | "z3" | "z4" | "z5" | "inset", Record<string, ClassValue>>;
}, {
wrapper: string;
pattern: string;
}, undefined, unknown, unknown, undefined>>;

/** Placeholder component props */
export declare type PlaceholderProps = {
    /** rhombus width. @defaultValue 10 */
    rw?: number;
    /** rhombus height. @defaultValue 20 */
    rh?: number;
    /** placeholder border. @defaultValue `'dashed'` */
    border?: PlaceholderVariantProps['border'];
    /** pattern and border color. @defaultValue '`outline-variant`' */
    color?: PlaceholderVariantProps['color'];
    /** rounded corners. @defaultValue `'xl'` */
    rounded?: PlaceholderVariantProps['rounded'];
    /** shadow. @defaultValue `'none'` */
    shadow?: PlaceholderVariantProps['shadow'];
};

declare type PlaceholderVariantProps = VariantProps<typeof placeholder>;

export declare const Surface: __VLS_WithTemplateSlots_4<DefineComponent<SurfaceProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SurfaceProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
    default?(_: {}): any;
}>;

declare const surface: TVReturnType<    {
role: {
surface: {};
container: {};
};
tone: {
dim: {
wrapper: string;
};
base: {
wrapper: string;
};
bright: {
wrapper: string;
};
};
level: {
lowest: {
wrapper: string;
};
low: {
wrapper: string;
};
base: {
wrapper: string;
};
high: {
wrapper: string;
};
highest: {
wrapper: string;
};
};
variant: {
primary: {
wrapper: string;
};
secondary: {
wrapper: string;
};
tertiary: {
wrapper: string;
};
error: {
wrapper: string;
};
'primary-fixed': {
wrapper: string;
};
'secondary-fixed': {
wrapper: string;
};
'tertiary-fixed': {
wrapper: string;
};
'primary-container': {
wrapper: string;
};
'secondary-container': {
wrapper: string;
};
'tertiary-container': {
wrapper: string;
};
'error-container': {
wrapper: string;
};
inverse: {
wrapper: string;
};
'inverse-primary': {
wrapper: string;
};
};
shape: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded" | "full" | "squircle-xs" | "squircle-sm" | "squircle-md" | "squircle-lg" | "squircle-xl" | "squircle-full", Record<string, ClassValue>>;
shadow: Record<"none" | "current" | "z1" | "z2" | "z3" | "z4" | "z5" | "inset", Record<string, ClassValue>>;
border: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
interactive: {
true: {
wrapper: string;
};
false: {};
};
padding: {
none: {};
sm: {
wrapper: string;
};
md: {
wrapper: string;
};
lg: {
wrapper: string;
};
xl: {
wrapper: string;
};
};
}, {
wrapper: string;
}, undefined, {
role: {
surface: {};
container: {};
};
tone: {
dim: {
wrapper: string;
};
base: {
wrapper: string;
};
bright: {
wrapper: string;
};
};
level: {
lowest: {
wrapper: string;
};
low: {
wrapper: string;
};
base: {
wrapper: string;
};
high: {
wrapper: string;
};
highest: {
wrapper: string;
};
};
variant: {
primary: {
wrapper: string;
};
secondary: {
wrapper: string;
};
tertiary: {
wrapper: string;
};
error: {
wrapper: string;
};
'primary-fixed': {
wrapper: string;
};
'secondary-fixed': {
wrapper: string;
};
'tertiary-fixed': {
wrapper: string;
};
'primary-container': {
wrapper: string;
};
'secondary-container': {
wrapper: string;
};
'tertiary-container': {
wrapper: string;
};
'error-container': {
wrapper: string;
};
inverse: {
wrapper: string;
};
'inverse-primary': {
wrapper: string;
};
};
shape: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded" | "full" | "squircle-xs" | "squircle-sm" | "squircle-md" | "squircle-lg" | "squircle-xl" | "squircle-full", Record<string, ClassValue>>;
shadow: Record<"none" | "current" | "z1" | "z2" | "z3" | "z4" | "z5" | "inset", Record<string, ClassValue>>;
border: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
interactive: {
true: {
wrapper: string;
};
false: {};
};
padding: {
none: {};
sm: {
wrapper: string;
};
md: {
wrapper: string;
};
lg: {
wrapper: string;
};
xl: {
wrapper: string;
};
};
}, {
wrapper: string;
}, TVReturnType<    {
role: {
surface: {};
container: {};
};
tone: {
dim: {
wrapper: string;
};
base: {
wrapper: string;
};
bright: {
wrapper: string;
};
};
level: {
lowest: {
wrapper: string;
};
low: {
wrapper: string;
};
base: {
wrapper: string;
};
high: {
wrapper: string;
};
highest: {
wrapper: string;
};
};
variant: {
primary: {
wrapper: string;
};
secondary: {
wrapper: string;
};
tertiary: {
wrapper: string;
};
error: {
wrapper: string;
};
'primary-fixed': {
wrapper: string;
};
'secondary-fixed': {
wrapper: string;
};
'tertiary-fixed': {
wrapper: string;
};
'primary-container': {
wrapper: string;
};
'secondary-container': {
wrapper: string;
};
'tertiary-container': {
wrapper: string;
};
'error-container': {
wrapper: string;
};
inverse: {
wrapper: string;
};
'inverse-primary': {
wrapper: string;
};
};
shape: Record<"none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded" | "full" | "squircle-xs" | "squircle-sm" | "squircle-md" | "squircle-lg" | "squircle-xl" | "squircle-full", Record<string, ClassValue>>;
shadow: Record<"none" | "current" | "z1" | "z2" | "z3" | "z4" | "z5" | "inset", Record<string, ClassValue>>;
border: Record<"none" | "current" | "primary" | "secondary" | "tertiary" | "error" | "outline", Record<string, ClassValue>>;
interactive: {
true: {
wrapper: string;
};
false: {};
};
padding: {
none: {};
sm: {
wrapper: string;
};
md: {
wrapper: string;
};
lg: {
wrapper: string;
};
xl: {
wrapper: string;
};
};
}, {
wrapper: string;
}, undefined, unknown, unknown, undefined>>;

/** Surface component props */
export declare interface SurfaceProps {
    /** HTML tag to render */
    tag?: string;
    /** Surface role (surface or container) */
    role?: NonNullable<SurfaceVariantProps['role']>;
    /** Surface tone (for role='surface': dim, base, bright) */
    tone?: NonNullable<SurfaceVariantProps['tone']>;
    /** Container level (for role='container': lowest, low, base, high, highest) */
    level?: NonNullable<SurfaceVariantProps['level']>;
    /** Semantic color variant (primary, secondary, tertiary, error, etc.) */
    variant?: NonNullable<SurfaceVariantProps['variant']>;
    /** Shape variant */
    shape?: NonNullable<SurfaceVariantProps['shape']>;
    /** Shadow elevation */
    shadow?: NonNullable<SurfaceVariantProps['shadow']>;
    /** Border style */
    border?: NonNullable<SurfaceVariantProps['border']>;
    /** Enable interactive states */
    interactive?: NonNullable<SurfaceVariantProps['interactive']>;
    /** Padding size */
    padding?: NonNullable<SurfaceVariantProps['padding']>;
    /** Additional CSS classes */
    class?: string;
}

declare type SurfaceVariantProps = VariantProps<typeof surface>;

export { }