@webflare/ui 0.0.0-stage → 0.1.0

package/dist/components/Button/styles.d.ts

@@ -0,0 +1,140 @@
+export declare const buttonStyles: import("../../../styled-system/types").CvaRuntimeFn<{
+    color: {
+        primary: {
+            backgroundColor: "primary";
+            color: "grey.800";
+            borderColor: "primary";
+            _hover: {
+                backgroundColor: "brand.500";
+                borderColor: "brand.500";
+            };
+            _active: {
+                backgroundColor: "brand.600";
+                borderColor: "brand.600";
+            };
+        };
+        secondary: {
+            bg: {
+                base: "primary-pale";
+                _dark: "grey.800";
+                _osDark: "grey.800";
+            };
+            borderColor: {
+                base: "primary-pale";
+                _dark: "grey.600";
+                _osDark: "grey.600";
+            };
+            color: {
+                base: "grey.800";
+                _dark: "neutral";
+                _osDark: "neutral";
+            };
+            '& .btn-icon': {
+                color: {
+                    base: "grey.800";
+                    _dark: "primary";
+                    _osDark: "primary";
+                };
+            };
+            _hover: {
+                backgroundColor: {
+                    base: "brand.100";
+                    _dark: "grey.700";
+                    _osDark: "grey.700";
+                };
+            };
+            _active: {
+                backgroundColor: {
+                    base: "brand.200";
+                    _dark: "grey.950";
+                    _osDark: "grey.950";
+                };
+                borderColor: {
+                    base: "brand.200";
+                    _dark: "grey.600";
+                    _osDark: "grey.600";
+                };
+            };
+        };
+        transparent: {
+            backgroundColor: "transparent";
+            borderColor: "transparent";
+            color: "neutral";
+            '& .btn-icon': {
+                color: "primary";
+            };
+            '& .btn-label': {
+                textDecoration: string;
+                textDecorationColor: {
+                    base: "black/50";
+                    _dark: "white/50";
+                    _osDark: "white/50";
+                };
+                textDecorationThickness: "1px";
+                textUnderlineOffset: "25%";
+            };
+            _hover: {
+                backgroundColor: {
+                    base: "primary-pale";
+                    _dark: "grey.800";
+                    _osDark: "grey.800";
+                };
+            };
+            _active: {
+                backgroundColor: {
+                    base: "brand.100";
+                    _dark: "black";
+                    _osDark: "black";
+                };
+            };
+        };
+    };
+    size: {
+        sm: {
+            fontSize: "sm";
+            gap: "sm";
+            paddingBlock: "xs";
+            paddingInline: "lg";
+        };
+        md: {
+            fontSize: "md";
+            gap: "sm";
+            paddingBlock: "sm";
+            paddingInline: "lg";
+            '& .btn-icon': {
+                fontSize: "lg";
+            };
+        };
+        lg: {
+            fontSize: "lg";
+            gap: "md";
+            paddingBlock: "md";
+            paddingInline: "xl";
+        };
+    };
+    fullWidth: {
+        true: {
+            width: "100%";
+            boxSizing: string;
+        };
+        false: {};
+    };
+    order: {
+        regular: {
+            '& .btn-icon': {
+                order: "1";
+            };
+            '& .btn-label': {
+                order: "2";
+            };
+        };
+        inverse: {
+            '& .btn-icon': {
+                order: "2";
+            };
+            '& .btn-label': {
+                order: "1";
+            };
+        };
+    };
+}>;

package/dist/components/Card/CardBody.vue.d.ts

@@ -0,0 +1,17 @@
+import { type CardBodyCss } from './types';
+type __VLS_Props = {
+    css?: CardBodyCss;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/components/Card/CardHeader.vue.d.ts

@@ -0,0 +1,25 @@
+import { type CardHeaderCss } from './types';
+export interface CardHeaderProps {
+    title?: string | null;
+    subtitle?: string | null;
+    css?: CardHeaderCss;
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    title?: (props: typeof __VLS_5) => any;
+} & {
+    subtitle?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CardHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardHeaderProps> & Readonly<{}>, {}, {}, {}, {}, 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/components/Card/CardRoot.vue.d.ts

@@ -0,0 +1,39 @@
+import { type CardHeaderProps } from './CardHeader.vue';
+import { type CardRootCss } from './types';
+export interface Props {
+    as?: 'div' | 'li';
+    colorStrategy?: 'default' | 'image';
+    color?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info' | 'none' | 'lucid-deep';
+    /** Border width in px, `0`–`8`. Other values snap to `1`. */
+    borderSize?: number;
+    borderRadius?: 'sm' | 'md' | 'lg' | 'xl';
+    header?: CardHeaderProps;
+    css?: CardRootCss;
+}
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_7) => any;
+} & {
+    header?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_16) => any;
+} & {
+    footer?: (props: typeof __VLS_18) => any;
+} & {
+    after?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: "none" | "danger" | "info" | "primary" | "success" | "warning" | "default" | "lucid-deep";
+    borderRadius: "lg" | "md" | "sm" | "xl";
+    as: "div" | "li";
+    borderSize: number;
+    colorStrategy: "default" | "image";
+}, {}, {}, {}, 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/components/Card/index.d.ts

@@ -0,0 +1,98 @@
+import CardRoot from './CardRoot.vue';
+import CardBody from './CardBody.vue';
+import CardHeader from './CardHeader.vue';
+export { CardRoot, CardBody, CardHeader };
+export type { CardHeaderProps } from './CardHeader.vue';
+export type { CardRootCss, CardHeaderCss, CardBodyCss } from './types';
+declare const _default: {
+    Root: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./CardRoot.vue").Props> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+            color: "none" | "danger" | "info" | "primary" | "success" | "warning" | "default" | "lucid-deep";
+            borderRadius: "lg" | "md" | "sm" | "xl";
+            as: "div" | "li";
+            borderSize: number;
+            colorStrategy: "default" | "image";
+        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("./CardRoot.vue").Props> & Readonly<{}>, {}, {}, {}, {}, {
+            color: "none" | "danger" | "info" | "primary" | "success" | "warning" | "default" | "lucid-deep";
+            borderRadius: "lg" | "md" | "sm" | "xl";
+            as: "div" | "li";
+            borderSize: number;
+            colorStrategy: "default" | "image";
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("./CardRoot.vue").Props> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        color: "none" | "danger" | "info" | "primary" | "success" | "warning" | "default" | "lucid-deep";
+        borderRadius: "lg" | "md" | "sm" | "xl";
+        as: "div" | "li";
+        borderSize: number;
+        colorStrategy: "default" | "image";
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            before?: (props: {}) => any;
+        } & {
+            header?: (props: {}) => any;
+        } & {
+            default?: (props: {}) => any;
+        } & {
+            footer?: (props: {}) => any;
+        } & {
+            after?: (props: {}) => any;
+        };
+    });
+    Body: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+            css?: import("./types").CardBodyCss;
+        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            css?: import("./types").CardBodyCss;
+        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<{
+        css?: import("./types").CardBodyCss;
+    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+    Header: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./CardHeader.vue").CardHeaderProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("./CardHeader.vue").CardHeaderProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("./CardHeader.vue").CardHeaderProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            icon?: (props: {}) => any;
+        } & {
+            default?: (props: {}) => any;
+        } & {
+            title?: (props: {}) => any;
+        } & {
+            subtitle?: (props: {}) => any;
+        };
+    });
+};
+export default _default;

package/dist/components/Card/styles.d.ts

@@ -0,0 +1,169 @@
+/** Discrete border widths in px. `CardRoot` snaps other values to `1`. */
+export declare const cardBorderSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
+export type CardBorderSize = typeof cardBorderSizes[number];
+export declare const cardStyles: import("../../../styled-system/types").SvaRuntimeFn<"root" | "body" | "footer" | "header" | "headerBody" | "headerTitle" | "headerSubtitle", {
+    colorStrategy: {
+        default: {
+            root: {
+                background: "[var(--card-bg-overlay) padding-box, var(--card-bg) padding-box]";
+                borderColor: "var(--card-border-color)";
+            };
+        };
+        image: {
+            root: {
+                background: "[var(--card-bg-overlay) padding-box, var(--card-bg) padding-box, var(--card-border-color) border-box]";
+            };
+        };
+    };
+    color: {
+        none: {
+            root: {
+                '--card-bg': "transparent";
+                '--card-border-color': "transparent";
+            };
+        };
+        default: {
+            root: {
+                '--card-bg': "linear-gradient(token(colors.surface.raised))";
+                '--card-border-color': "token(colors.border.card)";
+            };
+        };
+        primary: {
+            root: {
+                '--card-bg': "linear-gradient(token(colors.primary/10))";
+            };
+        };
+        danger: {
+            root: {
+                '--card-bg': "linear-gradient(token(colors.danger.subtle/10))";
+            };
+        };
+        success: {
+            root: {
+                '--card-bg': "linear-gradient(token(colors.success.subtle/10))";
+            };
+        };
+        warning: {
+            root: {
+                '--card-bg': "linear-gradient(token(colors.warning.subtle/10))";
+            };
+        };
+        info: {
+            root: {
+                '--card-bg': "linear-gradient(token(colors.info.subtle/10))";
+            };
+        };
+        'lucid-deep': {
+            root: {
+                '--card-bg': "linear-gradient(token(colors.black/10))";
+            };
+        };
+    };
+    padding: {
+        md: {
+            header: {
+                padding: "xl";
+                gap: "md";
+            };
+            body: {
+                padding: "xl";
+            };
+        };
+    };
+    borderSize: {
+        0: {
+            root: {
+                borderWidth: "0px";
+            };
+            header: {
+                borderBottomWidth: "0px";
+            };
+        };
+        1: {
+            root: {
+                borderWidth: "1px";
+            };
+            header: {
+                borderBottomWidth: "1px";
+            };
+        };
+        2: {
+            root: {
+                borderWidth: "2px";
+            };
+            header: {
+                borderBottomWidth: "2px";
+            };
+        };
+        3: {
+            root: {
+                borderWidth: "3px";
+            };
+            header: {
+                borderBottomWidth: "3px";
+            };
+        };
+        4: {
+            root: {
+                borderWidth: "4px";
+            };
+            header: {
+                borderBottomWidth: "4px";
+            };
+        };
+        5: {
+            root: {
+                borderWidth: "5px";
+            };
+            header: {
+                borderBottomWidth: "5px";
+            };
+        };
+        6: {
+            root: {
+                borderWidth: "6px";
+            };
+            header: {
+                borderBottomWidth: "6px";
+            };
+        };
+        7: {
+            root: {
+                borderWidth: "7px";
+            };
+            header: {
+                borderBottomWidth: "7px";
+            };
+        };
+        8: {
+            root: {
+                borderWidth: "8px";
+            };
+            header: {
+                borderBottomWidth: "8px";
+            };
+        };
+    };
+    borderRadius: {
+        sm: {
+            root: {
+                borderRadius: "lg";
+            };
+        };
+        md: {
+            root: {
+                borderRadius: "xl";
+            };
+        };
+        lg: {
+            root: {
+                borderRadius: "2xl";
+            };
+        };
+        xl: {
+            root: {
+                borderRadius: "4xl";
+            };
+        };
+    };
+}>;

package/dist/components/Card/types.d.ts

@@ -0,0 +1,8 @@
+import type { ComputedRef } from 'vue';
+import type { CssMap } from '../../internal/css';
+import type { cardStyles } from './styles';
+export type CardStyles = ReturnType<typeof cardStyles.raw>;
+export declare const CardStylesKey: import("vue").InjectionKey<ComputedRef<Record<"root" | "body" | "footer" | "header" | "headerBody" | "headerTitle" | "headerSubtitle", import("../../../styled-system/types").SystemStyleObject>>>;
+export type CardRootCss = CssMap<'root'>;
+export type CardHeaderCss = CssMap<'root' | 'body' | 'title' | 'subtitle'>;
+export type CardBodyCss = CssMap<'root'>;

package/dist/components/Carousel/CarouselItem.vue.d.ts

@@ -0,0 +1,17 @@
+import type { CarouselItemCss } from './types';
+type __VLS_Props = {
+    css?: CarouselItemCss;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/components/Carousel/CarouselNavigation.vue.d.ts

@@ -0,0 +1,30 @@
+import { type CarouselNavigationCss } from './types';
+type __VLS_Props = {
+    prevLabel?: string;
+    nextLabel?: string;
+    css?: CarouselNavigationCss;
+};
+declare var __VLS_1: {
+    handlePrev: () => void | undefined;
+    disabled: boolean;
+}, __VLS_3: {
+    handleNext: () => void | undefined;
+    disabled: boolean;
+};
+type __VLS_Slots = {} & {
+    'action-prev'?: (props: typeof __VLS_1) => any;
+} & {
+    'action-next'?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    prevLabel: string;
+    nextLabel: 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/components/Carousel/CarouselRoot.vue.d.ts

@@ -0,0 +1,30 @@
+import { type CarouselScrollMode } from '../../composables/carousel';
+import { type CarouselRootCss } from './types';
+type __VLS_Props = {
+    scrollMode?: CarouselScrollMode;
+    /**
+     * Move between items with the mouse wheel. Off by default: when on, the
+     * carousel captures wheel events, so the page does not scroll over it.
+     */
+    wheelNavigation?: boolean;
+    css?: CarouselRootCss;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    'carousel-before'?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    'carousel-after'?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    scrollMode: CarouselScrollMode;
+}, {}, {}, {}, 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;
+    };
+};