@cjlapao/ui-kit-vue 0.2.0

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

@@ -0,0 +1,56 @@
+import type { VNode } from "vue";
+import type { IconSize } from "../types";
+import type { TrueColor } from "../theme/Theme";
+export interface SidePanelProps {
+    /** Whether the panel is open */
+    isOpen: boolean;
+    /** Panel title */
+    title?: string;
+    /** Secondary line rendered below the title */
+    subtitle?: string;
+    /** Width of the panel in px (default: 420) */
+    width?: number;
+    /** Optional icon rendered to the left of the title */
+    icon?: string | VNode;
+    /** Sticky footer rendered at the bottom of the panel */
+    footer?: string;
+    closeIconSize?: IconSize;
+    /** Allow the user to drag the left edge to resize the panel. @default false */
+    resizable?: boolean;
+    /** Minimum width in px when resizable. @default 280 */
+    minWidth?: number;
+    /** Maximum width in px when resizable. @default 900 */
+    maxWidth?: number;
+    /** color for the resizer */
+    color?: TrueColor;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SidePanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<SidePanelProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    color: TrueColor;
+    width: number;
+    maxWidth: number;
+    minWidth: number;
+    resizable: boolean;
+    closeIconSize: IconSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    icon?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    headerActions?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,69 @@
+import type { VNodeChild } from "vue";
+import type { TrueColor } from "../theme/Theme";
+export interface SmartGridItemDefinition {
+    id: string;
+    title: string;
+    description?: string;
+    screenshot?: string;
+    defaultSpan?: number;
+    defaultRowHeightSpan?: number;
+    active: boolean;
+    single: boolean;
+    render: () => VNodeChild;
+    isSpacer?: boolean;
+}
+export interface SmartGridItem {
+    definitionId: string;
+    id: string;
+    span: number;
+    order: number;
+    sectionId: string;
+    rowId: string;
+    isSpacer?: boolean;
+}
+export interface SmartGridRow {
+    id: string;
+    items: SmartGridItem[];
+    order: number;
+    height?: number;
+    heightSpan?: number;
+}
+export interface SmartGridSection {
+    id: string;
+    title: string;
+    rows: SmartGridRow[];
+    order: number;
+}
+export interface SmartGridSectionDefinition {
+    id?: string;
+    title: string;
+    rows: SmartGridRowDefinition[];
+}
+export interface SmartGridRowDefinition {
+    id?: number;
+    itemIds: string[];
+    defaultHeightSpan?: number;
+}
+export interface SmartGridLayoutState {
+    version: 3;
+    sections: SmartGridSection[];
+}
+interface SmartGridLayoutProps {
+    items: SmartGridItemDefinition[];
+    defaultLayout: SmartGridSectionDefinition[];
+    persistedLayout?: SmartGridLayoutState | null;
+    maxColumns?: number;
+    editTrueColor?: TrueColor;
+    isEditMode?: boolean;
+}
+declare const _default: import("vue").DefineComponent<SmartGridLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    layoutChange: (layout: SmartGridLayoutState) => any;
+    editModeChange: (isEditMode: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SmartGridLayoutProps> & Readonly<{
+    onLayoutChange?: ((layout: SmartGridLayoutState) => any) | undefined;
+    onEditModeChange?: ((isEditMode: boolean) => any) | undefined;
+}>, {
+    maxColumns: number;
+    editTrueColor: TrueColor;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,26 @@
+import type { CapsuleBlueprintParameter } from "../types/CapsuleBlueprint";
+export interface SmartInputProps {
+    modelValue: string;
+    placeholder?: string;
+    globalParameters?: CapsuleBlueprintParameter[];
+    serviceNames?: string[];
+    context?: {
+        slug?: string;
+        enable_https?: boolean;
+    };
+    multiline?: boolean;
+}
+declare const _default: import("vue").DefineComponent<SmartInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<SmartInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    globalParameters: CapsuleBlueprintParameter[];
+    serviceNames: string[];
+    context: {
+        slug?: string;
+        enable_https?: boolean;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,20 @@
+import type { CapsuleBlueprintParameter } from "../types/CapsuleBlueprint";
+export interface SmartValueProps {
+    value: string;
+    globalParameters?: CapsuleBlueprintParameter[];
+    serviceNames?: string[];
+    context?: {
+        slug?: string;
+        enable_https?: boolean;
+    };
+}
+declare const _default: import("vue").DefineComponent<SmartValueProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SmartValueProps> & Readonly<{}>, {
+    value: string;
+    globalParameters: CapsuleBlueprintParameter[];
+    serviceNames: string[];
+    context: {
+        slug?: string;
+        enable_https?: boolean;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import type { TrueColor } from "../theme/Theme";
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpinnerColor = TrueColor;
+export type SpinnerVariant = "solid" | "segments";
+export type SpinnerThickness = "thin" | "normal" | "thick";
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+    variant?: SpinnerVariant;
+    thickness?: SpinnerThickness;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<SpinnerProps, {
+    el: import("vue").Ref<HTMLSpanElement | null, HTMLSpanElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpinnerProps> & Readonly<{}>, {
+    color: SpinnerColor;
+    variant: SpinnerVariant;
+    size: SpinnerSize;
+    thickness: SpinnerThickness;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,224 @@
+import type { VNodeChild } from "vue";
+import type { TrueColor } from "../theme/Theme";
+import type { IconName } from "../icons/registry";
+import type { HelpButtonProps } from "./HelpButton.vue";
+import type { PanelDecoration, PanelVariant } from "./Panel.vue";
+export type SplitViewSize = "sm" | "md" | "lg";
+export interface SplitViewItemBadge {
+    label: VNodeChild;
+    tone?: TrueColor;
+    variant?: "solid" | "soft" | "outline";
+}
+export interface SplitViewItem {
+    id: string;
+    /** Primary label */
+    label: VNodeChild;
+    /** Secondary line shown below the label */
+    subtitle?: VNodeChild;
+    /** Badges/pills rendered after the subtitle */
+    badges?: SplitViewItemBadge[];
+    /** Content to render in the detail pane when this item is selected */
+    panel: VNodeChild;
+    /** Disable selection */
+    disabled?: boolean;
+    /** Hide the item entirely */
+    hidden?: boolean;
+    /** Optional icon rendered before the label */
+    icon?: IconName;
+    /** Action buttons shown on the right side of the item row (visible on hover) */
+    actions?: VNodeChild;
+    /** Extra content rendered below the item row when it is the active selection */
+    subContent?: VNodeChild;
+    tags?: string[];
+    /** When true, renders the item with an intense accent background and a pulsing dot to signal new content */
+    highlight?: boolean;
+}
+export type SplitViewHeaderSlot<T> = T | ((activeItem: SplitViewItem) => T);
+export interface SplitViewHeaderDetails {
+    title?: VNodeChild;
+    subtitle?: VNodeChild;
+    description?: VNodeChild;
+    /** Right-aligned tag/badge area. Accepts any node(s). */
+    tags?: VNodeChild;
+    /**
+     * Custom body content rendered as the Panel children.
+     * When provided, it overrides title/subtitle/description/tags content.
+     */
+    headerBody?: VNodeChild;
+    tone?: TrueColor;
+    variant?: PanelVariant;
+    /** Alias for `variant` */
+    variants?: PanelVariant;
+    decoration?: PanelDecoration;
+    /** Alias for `decoration` */
+    decorations?: PanelDecoration;
+    /** Optional divider between header row and details block (default: true). */
+    bordered?: boolean;
+    className?: string;
+}
+export interface SplitViewPanelHeaderProps {
+    /** Full icon node (left side) */
+    icon?: SplitViewHeaderSlot<VNodeChild>;
+    /** Defaults to the active item's label when omitted */
+    title?: SplitViewHeaderSlot<VNodeChild>;
+    subtitle?: SplitViewHeaderSlot<VNodeChild>;
+    /** Right side actions in the main row */
+    actions?: SplitViewHeaderSlot<VNodeChild>;
+    /** Extra customizable content rendered between identity and search */
+    body?: SplitViewHeaderSlot<VNodeChild>;
+    search?: SplitViewHeaderSlot<VNodeChild>;
+    searchWidth?: string;
+    /** Second row, right-aligned actions */
+    bottomActions?: SplitViewHeaderSlot<VNodeChild>;
+    /** Optional details block rendered below the header row and styled like a Panel. */
+    headerDetails?: SplitViewHeaderSlot<SplitViewHeaderDetails | null | undefined>;
+    /** Optional help button inserted after title */
+    helper?: SplitViewHeaderSlot<HelpButtonProps | undefined>;
+    border?: boolean;
+    className?: string;
+}
+export interface SplitViewProps {
+    items: SplitViewItem[];
+    /** Controlled selected id (v-model) */
+    modelValue?: string;
+    /** Uncontrolled default */
+    defaultValue?: string;
+    /** Title shown above the item list (e.g. "LIBRARIES (3)") */
+    listTitle?: VNodeChild;
+    /** Placeholder for the search input */
+    searchPlaceholder?: string;
+    /** Width of the list panel – Tailwind class (when not resizable) or initial px value for resizable */
+    listWidth?: string;
+    /** Accent color used for active item highlight */
+    color?: TrueColor;
+    size?: SplitViewSize;
+    /** Deprecated: one visible item is now always shown as detail-only (list hidden). */
+    autoHideList?: boolean;
+    /** Allow collapsing the list panel */
+    collapsible?: boolean;
+    /** Controlled collapsed state (v-model:collapsed) */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapsed state */
+    defaultCollapsed?: boolean;
+    /** Allow drag-to-resize the list panel */
+    resizable?: boolean;
+    /** Minimum list width in px when resizable (default: 180) */
+    minListWidth?: number;
+    /** Maximum list width in px when resizable (default: 50% of container) */
+    maxListWidth?: number;
+    /** Extra class for the list panel */
+    listClassName?: string;
+    /** Extra class for the detail panel */
+    panelClassName?: string;
+    /** Content rendered above the detail panel (header area) */
+    panelHeader?: VNodeChild | ((activeItem: SplitViewItem) => VNodeChild);
+    /**
+     * Built-in SplitView header renderer (PageHeader-like) with support for dynamic slots.
+     * When provided, this takes precedence over `panelHeader`.
+     */
+    panelHeaderProps?: SplitViewPanelHeaderProps | ((activeItem: SplitViewItem) => SplitViewPanelHeaderProps | null | undefined);
+    /** Rendered when no items match the search filter in the list */
+    emptyState?: VNodeChild;
+    /** Action buttons rendered in the list header row (e.g. an "Add" button) */
+    listActions?: VNodeChild;
+    /** Content shown in the detail panel when no item is selected. Defaults to a generic EmptyState. Pass `null` to render nothing. */
+    panelEmptyState?: VNodeChild | null;
+    /** When true, shows a loading state instead of the normal content */
+    loading?: boolean;
+    /** Custom loading content. Defaults to a centered Spinner with "Loading..." label. */
+    loadingState?: VNodeChild;
+    /** When truthy, shows an error state instead of the normal content. Pass a string to use as the error subtitle. */
+    error?: VNodeChild;
+    /** Custom error content. Defaults to a danger-toned EmptyState. */
+    errorState?: VNodeChild;
+    /** When true, renders a left border on the SplitView container to visually separate it from adjacent content (e.g. a side menu) */
+    borderLeft?: boolean;
+    /**
+     * When true (default), the detail panel body scrolls automatically — panels can render
+     * content of any height and the wrapper handles overflow.
+     * When false, the panel body uses `overflow-hidden` so that panels which manage their
+     * own internal scroll (e.g. a sticky-header + scrollable table layout) fill the space
+     * correctly without a double-scroll or broken `h-full` percentage height.
+     */
+    panelScrollable?: boolean;
+    /**
+     * When true (default), clicking a list item immediately opens its detail panel —
+     * the current behaviour.
+     * When false, clicking a row only highlights it; the detail panel only opens when
+     * the user explicitly clicks the expand (→) button on that row.
+     */
+    autoExpand?: boolean;
+    /** Controlled expanded id (only meaningful when autoExpand=false) */
+    expandedValue?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SplitViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (id: string, item: SplitViewItem) => any;
+    "update:modelValue": (id: string) => any;
+    "update:collapsed": (collapsed: boolean) => any;
+    collapsedChange: (collapsed: boolean) => any;
+    "update:expandedValue": (id: string | undefined) => any;
+    expand: (id: string, item: SplitViewItem) => any;
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<SplitViewProps> & Readonly<{
+    onChange?: ((id: string, item: SplitViewItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((id: string) => any) | undefined;
+    "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
+    onCollapsedChange?: ((collapsed: boolean) => any) | undefined;
+    "onUpdate:expandedValue"?: ((id: string | undefined) => any) | undefined;
+    onExpand?: ((id: string, item: SplitViewItem) => any) | undefined;
+    onRetry?: (() => any) | undefined;
+}>, {
+    color: TrueColor;
+    size: SplitViewSize;
+    loading: boolean;
+    error: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null;
+    borderLeft: boolean;
+    searchPlaceholder: string;
+    collapsed: boolean;
+    listTitle: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null;
+    autoHideList: boolean;
+    collapsible: boolean;
+    defaultCollapsed: boolean;
+    resizable: boolean;
+    minListWidth: number;
+    panelHeader: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | ((activeItem: SplitViewItem) => VNodeChild) | null;
+    emptyState: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null;
+    listActions: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null;
+    panelEmptyState: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null;
+    loadingState: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null;
+    errorState: string | number | boolean | void | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null;
+    panelScrollable: boolean;
+    autoExpand: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    listTitle?: () => unknown;
+    listActions?: () => unknown;
+    emptyState?: () => unknown;
+    panelHeader?: (props: {
+        item: SplitViewItem;
+    }) => unknown;
+    panelEmptyState?: () => unknown;
+    loadingState?: () => unknown;
+    errorState?: () => unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+import "../../../react/src/components/StartupStageStepper.css";
+import type { StartupStage } from "../types/App";
+export type StartupStageStepperProps = {
+    stages: StartupStage[];
+    currentStageId?: string;
+    detailClassName?: string;
+    showHistoryToggle?: boolean;
+    defaultShowHistory?: boolean;
+    title?: string;
+    variant?: "minimal" | "panel";
+    size?: StartupStageStepperSize;
+};
+type StartupStageStepperSize = "sm" | "md" | "lg";
+declare const _default: import("vue").DefineComponent<StartupStageStepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    stageSelect: (stage: StartupStage) => any;
+}, string, import("vue").PublicProps, Readonly<StartupStageStepperProps> & Readonly<{
+    onStageSelect?: ((stage: StartupStage) => any) | undefined;
+}>, {
+    variant: "minimal" | "panel";
+    title: string;
+    size: StartupStageStepperSize;
+    showHistoryToggle: boolean;
+    defaultShowHistory: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,28 @@
+import type { TrueColor } from "../theme";
+import type { StatTileProps } from "./StatTile.vue";
+export interface StatChartItem {
+    label: string;
+    value: number;
+    /** Omit to auto-assign from the theme palette. */
+    color?: TrueColor;
+    intensity?: string;
+    onClick?: () => void;
+}
+export interface StatChartDataset {
+    id: string | number;
+    label: string;
+    centerLabel: string;
+    items: StatChartItem[];
+}
+export interface StatChartTileProps extends Omit<StatTileProps, "body" | "title" | "value" | "subtitle"> {
+    data: StatChartDataset[];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<StatChartTileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatChartTileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    actions?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,44 @@
+import type { TrueColor } from "../theme";
+import type { IconName } from "../icons/registry";
+export interface StatCountTileBreakdown {
+    label: string;
+    value: string | number;
+    color?: TrueColor;
+}
+export interface StatCountTileProps {
+    title?: string;
+    count?: string | number;
+    breakdown?: StatCountTileBreakdown[];
+    icon?: IconName;
+    color?: TrueColor;
+    onClick?: () => void;
+    withDecoration?: boolean;
+    withHoverEffect?: boolean;
+    textColor?: TrueColor;
+    loading?: boolean;
+    spinnerVariant?: "solid" | "segments";
+    spinnerThickness?: "thin" | "normal" | "thick";
+    spinnerColor?: TrueColor;
+    error?: {
+        icon?: IconName;
+        message?: string;
+        onRetry?: () => void;
+        variant?: "text" | "badge";
+    } | null;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<StatCountTileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatCountTileProps> & Readonly<{}>, {
+    color: TrueColor;
+    loading: boolean;
+    withDecoration: boolean;
+    withHoverEffect: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    count?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+import type { TrueColor } from "../theme";
+import type { IconName } from "../icons/registry";
+import type { StatTileProps } from "./StatTile.vue";
+export interface StatGoalItem {
+    value: number;
+    label: string;
+    icon: IconName;
+    /** Omit to auto-assign from the theme palette. */
+    color?: TrueColor;
+    tooltip?: string;
+}
+export interface StatGoalTileProps extends Omit<StatTileProps, "body" | "value" | "subtitle"> {
+    goals: StatGoalItem[];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<StatGoalTileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatGoalTileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,52 @@
+import type { TrueColor } from "../theme";
+import type { StatTileProps } from "./StatTile.vue";
+export interface StatGraphSeries {
+    key: string;
+    label: string;
+    /** Omit to auto-assign from the theme palette. */
+    color?: TrueColor;
+}
+export interface StatGraphTileProps extends Omit<StatTileProps, "body" | "progress" | "trend" | "meta" | "footer"> {
+    data: any[];
+    variant: "bar" | "sparkline";
+    series: StatGraphSeries[];
+    height?: number;
+    showLegend?: boolean;
+    showAxes?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    /** Y-axis domain for sparkline. Defaults to [0, 'auto']. Use ['auto', 'auto'] for auto-scaling. */
+    yDomain?: [number | string, number | string];
+    /** Enable chart enter/update animation. Keep disabled for high-frequency realtime updates. */
+    chartAnimation?: boolean;
+    /** Animation duration when chartAnimation is enabled. */
+    chartAnimationDuration?: number;
+    /** Optional cap for rendered data points to reduce chart redraw work. */
+    maxDataPoints?: number;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<StatGraphTileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatGraphTileProps> & Readonly<{}>, {
+    variant: "bar" | "sparkline";
+    height: number;
+    showLegend: boolean;
+    showAxes: boolean;
+    showGrid: boolean;
+    showTooltip: boolean;
+    yDomain: [number | string, number | string];
+    chartAnimation: boolean;
+    chartAnimationDuration: number;
+    maxDataPoints: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+} & {
+    value?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,69 @@
+import type { VNode } from "vue";
+import type { TrueColor } from "../theme";
+import type { IconName } from "../icons/registry";
+export interface StatTileTrend {
+    value: string | number;
+    direction: "up" | "down" | "neutral";
+    label?: string;
+}
+export interface StatTileMeta {
+    text: string | number | VNode;
+    icon?: IconName;
+    variant?: "text" | "badge";
+    color?: TrueColor;
+}
+export interface StatTileError {
+    icon?: IconName;
+    message?: string;
+    onRetry?: () => void;
+}
+export interface StatTileProgress {
+    value: number;
+    label?: string;
+    color?: TrueColor;
+}
+export interface StatTileProps {
+    title?: string;
+    value?: string | number;
+    subtitle?: string;
+    icon?: IconName;
+    color?: TrueColor;
+    trend?: StatTileTrend;
+    progress?: StatTileProgress;
+    meta?: StatTileMeta[];
+    footer?: string;
+    actions?: string;
+    onClick?: () => void;
+    withDecoration?: boolean;
+    withHoverEffect?: boolean;
+    textColor?: TrueColor;
+    loading?: boolean;
+    spinnerVariant?: "solid" | "segments";
+    spinnerThickness?: "thin" | "normal" | "thick";
+    spinnerColor?: TrueColor;
+    error?: StatTileError | null;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<StatTileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatTileProps> & Readonly<{}>, {
+    color: TrueColor;
+    loading: boolean;
+    withDecoration: boolean;
+    withHoverEffect: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+} & {
+    body?: (props: {}) => any;
+} & {
+    value?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};