@cjlapao/ui-kit-vue 0.2.0

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

@@ -0,0 +1,83 @@
+import type { VNode, VNodeChild } from "vue";
+import type { ButtonVariant, ButtonSize } from "../Button.vue";
+import type { TrueColor } from "../../theme/Theme";
+import type { PanelVariant, PanelPadding, PanelCorner } from "../Panel.vue";
+import type { LoaderProps } from "../Loader.vue";
+export type { PanelVariant as TimelinePanelVariant, PanelPadding as TimelinePanelPadding, PanelCorner as TimelinePanelCorner, };
+export interface TimelinePanelAction {
+    label: VNodeChild;
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    color?: TrueColor;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+}
+export interface TimelinePanelOverflowItem {
+    label: string | VNode;
+    value: string;
+    icon?: string | VNode;
+    danger?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface TimelinePanelItem {
+    id: string;
+    /** Icon shown in a rounded box next to the content */
+    icon?: VNodeChild;
+    /** draws a background for the icon */
+    iconBackground?: boolean;
+    /** Primary label */
+    title: VNodeChild;
+    /** Secondary line (date, size, etc.) */
+    subtitle?: VNodeChild;
+    /**
+     * When true the item is rendered as a "current state" badge row instead of
+     * a normal content row. The title becomes the badge text.
+     */
+    isCurrent?: boolean;
+    /**
+     * When true the dot on the timeline line is larger/filled — use for root or
+     * first items to visually anchor the timeline.
+     */
+    isRoot?: boolean;
+    /** Inline action buttons rendered on the right side. Pass a `VNodeChild` for fully custom content, or a `TimelinePanelAction[]` for the built-in button layout. */
+    actions?: TimelinePanelAction[] | VNodeChild;
+    /** Items for the overflow (⋮) dropdown menu */
+    overflowActions?: TimelinePanelOverflowItem[];
+    /**
+     * Optional depth (0-based) for subtle left-indentation of content inside
+     * each row. The dot and icon always stay on the left rail.
+     */
+    depth?: number;
+}
+export interface TimelinePanelHeaderAction {
+    label: VNodeChild;
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    color?: TrueColor;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    leadingIcon?: string | VNode;
+}
+export interface TimelinePanelProps {
+    /** Panel title rendered in the header */
+    title?: VNodeChild;
+    /** Optional content rendered at the right of the header. Pass a `VNodeChild` for fully custom content, or a `TimelinePanelHeaderAction` for the built-in button layout. */
+    headerAction?: TimelinePanelHeaderAction | VNodeChild;
+    /** Timeline items */
+    items: TimelinePanelItem[];
+    variant?: PanelVariant;
+    tone?: TrueColor;
+    padding?: PanelPadding;
+    corner?: PanelCorner;
+    /** Color of the connecting vertical line */
+    lineColor?: string;
+    /** Render a small dot on the trunk line at every item's midpoint (solid segment only). @default false */
+    showTrunkDots?: boolean;
+    loading?: boolean;
+    /** Node to show when items is empty */
+    emptyState?: VNodeChild;
+    loaderProps?: LoaderProps;
+}

package/dist/types/vue/src/components/Toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,68 @@
+import type { VNode } from "vue";
+import type { TrueColor } from "../theme/Theme";
+import type { TooltipPosition } from "./Tooltip.vue";
+import type { GlassVibrancy, GlassOpacity, SpecularMode } from "../../../common/theme/glass";
+export type ToggleSize = "sm" | "md" | "lg";
+export type ToggleAlign = "left" | "right";
+export type ToggleDescriptionPlacement = "inline" | "stacked";
+export type TogglePadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export interface ToggleProps {
+    /** Controlled checked state (v-model). */
+    modelValue?: boolean;
+    id?: string;
+    label?: string;
+    description?: string;
+    descriptionPlacement?: ToggleDescriptionPlacement;
+    size?: ToggleSize;
+    padding?: TogglePadding;
+    color?: TrueColor;
+    alignLabel?: ToggleAlign;
+    iconOn?: string | VNode;
+    iconOff?: string | VNode;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** When set, a styled tooltip is shown on hover. */
+    tooltip?: string;
+    /** Position of the tooltip relative to the toggle. Defaults to 'top'. */
+    tooltipPosition?: TooltipPosition;
+    /** When true, applies glass styling (fill + vibrancy + optional specular overlay). */
+    glass?: boolean;
+    /** Backdrop vibrancy level for glass surfaces. */
+    vibrancy?: GlassVibrancy;
+    /** Glass fill transparency level for glass surfaces. */
+    glassOpacity?: GlassOpacity;
+    /** Specular highlight mode for glass surfaces. */
+    specularMode?: SpecularMode;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToggleProps, {
+    el: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (event: Event) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    glass: boolean;
+    color: TrueColor;
+    size: ToggleSize;
+    disabled: boolean;
+    fullWidth: boolean;
+    vibrancy: GlassVibrancy;
+    glassOpacity: GlassOpacity;
+    specularMode: SpecularMode;
+    padding: TogglePadding;
+    descriptionPlacement: ToggleDescriptionPlacement;
+    alignLabel: ToggleAlign;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: () => unknown;
+    description?: () => unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,25 @@
+export type TooltipPosition = "top" | "bottom";
+export interface TooltipProps {
+    /** Text shown in the tooltip. When omitted the component renders children as-is. */
+    text?: string;
+    /** How long to wait (ms) before showing the tooltip. Defaults to 500. */
+    delay?: number;
+    /** Where to place the tooltip relative to the trigger. Defaults to 'top'. */
+    position?: TooltipPosition;
+    /** Extra classes applied to the outer wrapper element. */
+    wrapperClassName?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+    delay: number;
+    position: TooltipPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,14 @@
+import type { TooltipPosition } from "./Tooltip.vue";
+export interface TooltipWrapperProps {
+    /** Tooltip text. When omitted no tooltip is shown but the child is rendered unchanged. */
+    text?: string;
+    /** Delay in ms before the tooltip appears. Defaults to 500. */
+    delay?: number;
+    /** Where to place the tooltip relative to the child. Defaults to 'top'. */
+    position?: TooltipPosition;
+}
+declare const _default: import("vue").DefineComponent<TooltipWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipWrapperProps> & Readonly<{}>, {
+    delay: number;
+    position: TooltipPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/TreeView/TreeFlowSvg.vue.d.ts

@@ -0,0 +1,23 @@
+import type { TreeFlowSvgProps } from "./types";
+export declare const INDENT_PX: Record<"xs" | "sm" | "md" | "lg", number>;
+declare const _default: import("vue").DefineComponent<TreeFlowSvgProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeFlowSvgProps> & Readonly<{}>, {
+    mode: "tree" | "bracket";
+    animated: boolean;
+    showLine: boolean;
+    dotSpacing: number;
+    parentAnchorY: number;
+    parentOffset: number;
+    rootActive: boolean;
+    stubHeight: number;
+    depth: number;
+    rootChildIndentExtra: number;
+    indent: "xs" | "sm" | "md" | "lg";
+    showConnectors: boolean;
+    connectorStyle: "rings" | "dots";
+    branchColorMode: "item" | "parent";
+    junctionStyle: "rounded" | "dot";
+    showCenterDot: boolean;
+    connectorHalf: boolean;
+    connectorBorderSize: "fit" | "xs" | "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/TreeView/TreeItemCard.vue.d.ts

@@ -0,0 +1,44 @@
+import type { TreeItemCardProps } from "./types";
+declare var __VLS_1: {}, __VLS_10: {}, __VLS_16: {}, __VLS_22: {}, __VLS_28: {}, __VLS_34: {}, __VLS_40: {}, __VLS_46: {}, __VLS_52: {}, __VLS_65: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_10) => any;
+} & {
+    title?: (props: typeof __VLS_16) => any;
+} & {
+    subtitle?: (props: typeof __VLS_22) => any;
+} & {
+    description?: (props: typeof __VLS_28) => any;
+} & {
+    badge?: (props: typeof __VLS_34) => any;
+} & {
+    hoverActions?: (props: typeof __VLS_40) => any;
+} & {
+    actions?: (props: typeof __VLS_46) => any;
+} & {
+    dragHandle?: (props: typeof __VLS_52) => any;
+} & {
+    body?: (props: typeof __VLS_65) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<TreeItemCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggleExpanded: () => any;
+}, string, import("vue").PublicProps, Readonly<TreeItemCardProps> & Readonly<{
+    onToggleExpanded?: (() => any) | undefined;
+}>, {
+    hoverable: boolean;
+    index: number;
+    defaultExpanded: boolean;
+    isDragging: boolean;
+    titleWrap: boolean;
+    titleScroll: boolean;
+    forceToggle: boolean;
+    activePulse: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/TreeView/TreeItemRow.vue.d.ts

@@ -0,0 +1,27 @@
+import type { DropPosition, TreeItemData, TreeSvgConfig, TreeTone } from "./types";
+export interface TreeItemRowProps {
+    item: TreeItemData;
+    globalTone?: TreeTone;
+    depth: number;
+    index: number;
+    svgProps: TreeSvgConfig;
+    reorderable: boolean;
+    isDragging: boolean;
+    dropIndicator?: DropPosition | null;
+}
+declare const _default: import("vue").DefineComponent<TreeItemRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    rowElement: (el: HTMLDivElement | null) => any;
+    heightChange: (height: number) => any;
+    anchorChange: (anchor: number) => any;
+    toneChange: (tone: import("../../index.js").TrueColor) => any;
+    activeChange: (active: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<TreeItemRowProps> & Readonly<{
+    onRowElement?: ((el: HTMLDivElement | null) => any) | undefined;
+    onHeightChange?: ((height: number) => any) | undefined;
+    onAnchorChange?: ((anchor: number) => any) | undefined;
+    onToneChange?: ((tone: import("../../index.js").TrueColor) => any) | undefined;
+    onActiveChange?: ((active: boolean) => any) | undefined;
+}>, {
+    dropIndicator: DropPosition | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/vue/src/components/TreeView/TreeLevel.vue.d.ts

@@ -0,0 +1,16 @@
+import type { TreeItemData, TreeSvgConfig, TreeTone } from "./types";
+export interface TreeLevelProps {
+    items: TreeItemData[];
+    globalTone?: TreeTone;
+    svgProps: TreeSvgConfig;
+    parentTone?: TreeTone;
+    parentActive?: boolean;
+    stubHeight?: number;
+    parentOffset?: number;
+    depth?: number;
+}
+declare const _default: import("vue").DefineComponent<TreeLevelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TreeLevelProps> & Readonly<{}>, {
+    depth: number;
+    parentActive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,39 @@
+import type { TreeReorderEvent, TreeViewProps } from "./types";
+export { default as TreeLevel } from "./TreeLevel.vue";
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TreeViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    retry: () => any;
+    reorder: (event: TreeReorderEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TreeViewProps> & Readonly<{
+    onRetry?: (() => any) | undefined;
+    onReorder?: ((event: TreeReorderEvent) => any) | undefined;
+}>, {
+    loading: boolean;
+    animated: boolean;
+    rowGap: number;
+    showLine: boolean;
+    dotSpacing: number;
+    rootActive: boolean;
+    stubHeight: number;
+    rootChildIndentExtra: number;
+    indent: "xs" | "sm" | "md" | "lg";
+    showConnectors: boolean;
+    connectorStyle: "rings" | "dots";
+    branchColorMode: "item" | "parent";
+    junctionStyle: "rounded" | "dot";
+    showCenterDot: boolean;
+    connectorHalf: boolean;
+    connectorBorderSize: "fit" | "xs" | "sm" | "md" | "lg";
+    reorderable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    loadingState?: (props: {}) => any;
+} & {
+    errorState?: (props: {}) => any;
+} & {
+    emptyState?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/vue/src/components/TreeView/index.d.ts

@@ -0,0 +1,5 @@
+export { default as TreeView } from "./TreeView.vue";
+export { default as TreeItemCard } from "./TreeItemCard.vue";
+export { default as TreeFlowSvg, INDENT_PX as TREE_INDENT_PX, } from "./TreeFlowSvg.vue";
+export { getTreeColorTokens, NEUTRAL_TOKENS as TREE_NEUTRAL_TOKENS, } from "./toneColors";
+export type { TreeReorderEvent, TreeTone, TreeItemData, TreeViewProps, TreeItemCardProps, TreeFlowSvgProps, } from "./types";

package/dist/types/vue/src/components/TreeView/toneColors.d.ts

@@ -0,0 +1 @@
+export * from "../../../../react/src/components/TreeView/toneColors";

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

@@ -0,0 +1,135 @@
+import type { VNodeChild } from "vue";
+import type { TrueColor } from "../../theme/Theme";
+export type TreeTone = TrueColor;
+export interface TreeReorderEvent {
+    id: string;
+    oldOrder: number;
+    newOrder: number;
+}
+export interface TreeItemData {
+    id: string;
+    icon?: VNodeChild;
+    iconClassName?: string;
+    title?: VNodeChild;
+    titleClassName?: string;
+    subtitle?: VNodeChild;
+    subtitleClassName?: string;
+    description?: VNodeChild;
+    descriptionClassName?: string;
+    /** Optional badge/status slot rendered below description, without tone-derived text styling. */
+    badge?: VNodeChild;
+    tone?: TreeTone;
+    active?: boolean;
+    body?: VNodeChild;
+    defaultExpanded?: boolean;
+    actions?: VNodeChild;
+    hoverActions?: VNodeChild;
+    children?: TreeItemData[];
+}
+export interface TreeViewProps {
+    root?: TreeItemData;
+    items: TreeItemData[];
+    tone?: TreeTone;
+    rootTone?: TreeTone;
+    rootActive?: boolean;
+    animated?: boolean;
+    showLine?: boolean;
+    showConnectors?: boolean;
+    connectorStyle?: "rings" | "dots";
+    branchColorMode?: "item" | "parent";
+    junctionStyle?: "rounded" | "dot";
+    showCenterDot?: boolean;
+    connectorHalf?: boolean;
+    connectorBorderSize?: "fit" | "xs" | "sm" | "md" | "lg";
+    dotSpacing?: number;
+    indent?: "xs" | "sm" | "md" | "lg";
+    rootChildIndentExtra?: number;
+    rowGap?: number;
+    stubHeight?: number;
+    loading?: boolean;
+    loadingState?: VNodeChild;
+    emptyState?: VNodeChild;
+    error?: VNodeChild;
+    errorState?: VNodeChild;
+    reorderable?: boolean;
+}
+export interface TreeItemCardProps {
+    icon?: VNodeChild;
+    iconClassName?: string;
+    title?: VNodeChild;
+    titleClassName?: string;
+    /** When true, the title wraps on word boundaries up to 10 lines instead of truncating. Default: false */
+    titleWrap?: boolean;
+    /** When true, the title stays on one line and scrolls horizontally — no wrapping, no truncation. Default: false */
+    titleScroll?: boolean;
+    subtitle?: VNodeChild;
+    subtitleClassName?: string;
+    description?: VNodeChild;
+    descriptionClassName?: string;
+    /** Optional badge/status slot rendered below description, without tone-derived text styling. */
+    badge?: VNodeChild;
+    tone?: TreeTone;
+    body?: VNodeChild;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    forceToggle?: boolean;
+    actions?: VNodeChild;
+    hoverActions?: VNodeChild;
+    dragHandle?: VNodeChild;
+    isDragging?: boolean;
+    index?: number;
+    /** When true, show a subtle hover lift effect (shadow + translate-y). Default: false */
+    hoverable?: boolean;
+    /** When true, overlay a pulsing background animation using the item's tone color. Default: false */
+    activePulse?: boolean;
+}
+export interface TreeFlowSvgProps {
+    cardHeights: number[];
+    cardAnchors?: number[];
+    mode?: "tree" | "bracket";
+    parentAnchorY?: number;
+    parentOffset?: number;
+    toneList: TreeTone[];
+    activeList: boolean[];
+    rootTone?: TreeTone;
+    rootActive?: boolean;
+    rowGap: number;
+    stubHeight?: number;
+    depth?: number;
+    rootChildIndentExtra?: number;
+    indent?: "xs" | "sm" | "md" | "lg";
+    showLine?: boolean;
+    showConnectors?: boolean;
+    connectorStyle?: "rings" | "dots";
+    branchColorMode?: "item" | "parent";
+    junctionStyle?: "rounded" | "dot";
+    showCenterDot?: boolean;
+    connectorHalf?: boolean;
+    connectorBorderSize?: "fit" | "xs" | "sm" | "md" | "lg";
+    dotSpacing?: number;
+    animated?: boolean;
+}
+export type DropPosition = "before" | "after";
+export interface DropTarget {
+    index: number;
+    position: DropPosition;
+}
+/** SVG/reorder config forwarded from TreeView down through nested TreeLevels. */
+export interface TreeSvgConfig {
+    animated?: boolean;
+    showLine?: boolean;
+    showConnectors?: boolean;
+    connectorStyle?: "rings" | "dots";
+    branchColorMode?: "item" | "parent";
+    junctionStyle?: "rounded" | "dot";
+    showCenterDot?: boolean;
+    connectorHalf?: boolean;
+    connectorBorderSize?: "fit" | "xs" | "sm" | "md" | "lg";
+    dotSpacing?: number;
+    indent?: "xs" | "sm" | "md" | "lg";
+    rootChildIndentExtra?: number;
+    rowGap?: number;
+    stubHeight?: number;
+    reorderable?: boolean;
+    onReorder?: (event: TreeReorderEvent) => void;
+}

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

@@ -0,0 +1,24 @@
+import type { TooltipPosition } from "./Tooltip.vue";
+export interface TruncatedTextProps {
+    /** The text to display, truncated with an ellipsis when it overflows. */
+    text: string;
+    /** Delay in ms before the tooltip becomes visible. Defaults to 2000. */
+    delay?: number;
+    /** Render as a different element. Defaults to "div". */
+    as?: "div" | "span" | "p";
+    /** Where to place the tooltip. Defaults to 'top'. */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * When true, the outer `<div class="min-w-0">` wrapper is omitted and the
+     * TooltipWrapper is returned directly. Use this when TruncatedText is a flex
+     * child and you control sizing via `class` (e.g. `"min-w-0 flex-1"`).
+     */
+    noWrapper?: boolean;
+}
+declare const _default: import("vue").DefineComponent<TruncatedTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TruncatedTextProps> & Readonly<{}>, {
+    delay: number;
+    tooltipPosition: TooltipPosition;
+    as: "div" | "span" | "p";
+    noWrapper: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,16 @@
+export interface UserAvatarUser {
+    name?: string;
+    username?: string;
+    email?: string;
+    avatarUrl?: string;
+}
+export interface UserAvatarProps {
+    user?: UserAvatarUser | null;
+    size?: number;
+    variant?: "circle" | "rounded" | "square";
+}
+declare const _default: import("vue").DefineComponent<UserAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UserAvatarProps> & Readonly<{}>, {
+    variant: "circle" | "rounded" | "square";
+    size: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import { type SmartVariable } from "../types/Variables";
+import type { CapsuleBlueprintParameter } from "../types/CapsuleBlueprint";
+export interface VariablePickerProps {
+    globalParameters: CapsuleBlueprintParameter[];
+    serviceNames: string[];
+}
+declare const _default: import("vue").DefineComponent<VariablePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (variable: SmartVariable) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<VariablePickerProps> & Readonly<{
+    onSelect?: ((variable: SmartVariable) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,79 @@
+export { default as Alert, type AlertProps, type AlertVariant } from "./Alert.vue";
+export { default as AppDivider, type AppDividerProps } from "./AppDivider.vue";
+export { default as Badge, type BadgeProps } from "./Badge.vue";
+export { default as BadgeIcon, type BadgeIconProps } from "./BadgeIcon.vue";
+export { default as Pill, type PillProps, type PillTone, type PillVariant, type PillSize, } from "./Pill.vue";
+export { default as Progress, type ProgressProps, type ProgressMotion, type ProgressMotionSpeed, type ProgressMotionDirection, } from "./Progress.vue";
+export { default as MultiProgressBar, type MultiProgressBarProps, type MultiProgressBarSeries, } from "./MultiProgressBar.vue";
+export { default as Spinner, type SpinnerProps, type SpinnerSize, type SpinnerColor, type SpinnerVariant, } from "./Spinner.vue";
+export { default as StatusSpinner, type StatusSpinnerProps, type StatusSpinnerIntent, } from "./StatusSpinner.vue";
+export { default as Loader, type LoaderProps } from "./Loader.vue";
+export { default as EmptyState, type EmptyStateProps, type EmptyStateTone, } from "./EmptyState.vue";
+export { default as Hero, type HeroProps, type HeroTitleSize, type HeroSubtitleSize, type HeroPadding, } from "./Hero.vue";
+export { default as DynamicImg, type DynamicImgProps } from "./DynamicImg.vue";
+export { default as Button, type ButtonProps, type ButtonVariant, type ButtonColor, type ButtonSize, } from "./Button.vue";
+export type { GlassVibrancy, GlassOpacity, SpecularMode } from "../theme/glass";
+export { default as IconButton, type IconButtonProps } from "./IconButton.vue";
+export { default as DropdownButton, type DropdownButtonProps, type DropdownButtonOption, } from "./DropdownButton.vue";
+export { default as Tooltip, type TooltipProps, type TooltipPosition, } from "./Tooltip.vue";
+export { default as TooltipWrapper, type TooltipWrapperProps, } from "./TooltipWrapper.vue";
+export { default as Input, type InputProps, type InputVariant } from "./Input.vue";
+export { default as PasswordInput, type PasswordInputProps, } from "./PasswordInput.vue";
+export { default as Textarea, type TextareaProps } from "./Textarea.vue";
+export { default as Select, type SelectProps } from "./Select.vue";
+export { default as Combobox, type ComboboxProps } from "./Combobox.vue";
+export { default as Picker, type PickerProps, type PickerItem, type PickerTag, type PickerFilter, } from "./Picker.vue";
+export { default as TagPicker, type TagPickerProps, type TagPickerItem, } from "./TagPicker.vue";
+export { default as TagPanel, type TagPanelProps, type TagPanelTag, } from "./TagPanel.vue";
+export { default as Checkbox, type CheckboxProps } from "./Checkbox.vue";
+export { default as Toggle, type ToggleProps, type ToggleSize, type ToggleAlign, type ToggleDescriptionPlacement, type TogglePadding } from "./Toggle.vue";
+export { default as MultiToggle, type MultiToggleProps, type MultiToggleOption, type MultiToggleVariant, } from "./MultiToggle.vue";
+export { default as ButtonSelector, type ButtonSelectorProps, type ButtonSelectorOption, type ButtonSelectorMode, } from "./ButtonSelector.vue";
+export { default as FormField, type FormFieldProps } from "./FormField.vue";
+export { default as FormLayout, type FormLayoutProps } from "./FormLayout.vue";
+export { default as FormSection, type FormSectionProps } from "./FormSection.vue";
+export { default as InputGroup, type InputGroupProps } from "./InputGroup.vue";
+export { default as MultiSelectPills, type MultiSelectPillsProps, } from "./MultiSelectPills.vue";
+export { default as SearchBar, type SearchBarProps } from "./SearchBar.vue";
+export { default as GlassBackground, type GlassBackgroundProps, type GlassBackgroundPosition, type GradientDirection, } from "./GlassBackground.vue";
+export { default as TruncatedText, type TruncatedTextProps, } from "./TruncatedText.vue";
+export { default as InfoRow, type InfoRowProps, type InfoRowSize, type InfoRowPadding, } from "./InfoRow.vue";
+export { default as SectionCard, type SectionCardProps, type SectionCardVariant, type SectionCardSize, } from "./SectionCard.vue";
+export { default as Section, type SectionProps, type SectionSize, type SectionVariant, } from "./Section.vue";
+export { default as PagedPanel, type PagedPanelProps } from "./PagedPanel.vue";
+export { default as Panel, type PanelProps, type PanelTone, type PanelDecoration, type PanelSpecularMode, } from "./Panel.vue";
+export { default as CollapsiblePanel, type CollapsiblePanelProps, } from "./CollapsiblePanel.vue";
+export { default as HeaderGroup, type HeaderGroupProps } from "./HeaderGroup.vue";
+export { default as DetailItemCard, type DetailItemCardProps, } from "./DetailItemCard.vue";
+export { default as InfiniteScrollPanel, type InfiniteScrollPanelProps, } from "./InfiniteScrollPanel.vue";
+export { default as CollapsibleHelpText, type CollapsibleHelpTextProps, } from "./CollapsibleHelpText.vue";
+export { default as DropdownMenu, type DropdownMenuProps, type DropdownMenuOption, } from "./DropdownMenu.vue";
+export { default as UserAvatar, type UserAvatarProps, type UserAvatarUser, } from "./UserAvatar.vue";
+export { default as Accordion, type AccordionProps, type AccordionItem, } from "./Accordion.vue";
+export { default as Tabs, type TabsProps, type TabItem, type TabItemAction, } from "./Tabs.vue";
+export { default as Modal, type ModalProps, ModalActions, ConfirmModal, DeleteConfirmModal, type DeleteConfirmModalProps, ApplyConfirmModal, type ApplyConfirmModalProps, } from "./Modal.vue";
+export { default as InlinePanel, ConfirmInlinePanel, DeleteConfirmInlinePanel, type InlinePanelProps, type InlinePanelAnchor, type ConfirmInlinePanelProps, type DeleteConfirmInlinePanelProps, } from "./InlinePanel.vue";
+export { default as SideMenu, type SideMenuProps, type SideMenuSettings, type SideMenuItem, type SideMenuItemGuard, type SideMenuGuardClaim, type SideMenuGuardAnyClaim, type SideMenuGuardAllClaims, type SideMenuGuardRole, type SideMenuGuardAnyRole, type SideMenuGuardModule, type SideMenuGuardAnyModule, type SideMenuGuardCustom, } from "./SideMenu.vue";
+export { default as SideMenuLayout, type SideMenuLayoutProps, } from "./SideMenuLayout.vue";
+export { default as SplitView, type SplitViewProps, type SplitViewItem, type SplitViewItemBadge, type SplitViewSize, type SplitViewHeaderSlot, type SplitViewHeaderDetails, type SplitViewPanelHeaderProps, } from "./SplitView.vue";
+export { default as SmartInput, type SmartInputProps } from "./SmartInput.vue";
+export { default as SmartValue, type SmartValueProps } from "./SmartValue.vue";
+export { default as StartupStageStepper, type StartupStageStepperProps, } from "./StartupStageStepper.vue";
+export { default as StatChartTile, type StatChartTileProps, type StatChartDataset, type StatChartItem, } from "./StatChartTile.vue";
+export { default as StatCountTile, type StatCountTileProps, type StatCountTileBreakdown, } from "./StatCountTile.vue";
+export { default as StatGoalTile, type StatGoalTileProps, type StatGoalItem, } from "./StatGoalTile.vue";
+export { default as StatGraphTile, type StatGraphTileProps, type StatGraphSeries, } from "./StatGraphTile.vue";
+export { default as StatTile, type StatTileProps } from "./StatTile.vue";
+export { default as Stepper, type StepperProps, type Step } from "./Stepper.vue";
+export { default as Table, type TableProps, type TableColumn, type TableSortState, type TablePaginationState, type TableSettings, type Column, type TableVariant, } from "./Table.vue";
+export { default as AccessMatrix, type AccessMatrixProps, type AccessMatrixPermission, } from "./AccessMatrix.vue";
+export { default as VariablePicker } from "./VariablePicker.vue";
+export { default as KeyValueArrayField, type KeyValueArrayFieldProps, } from "./KeyValueArrayField.vue";
+export { default as ApiErrorState, type ApiErrorStateProps, } from "./ApiErrorState.vue";
+export { default as CustomIcon, type CustomIconProps } from "./CustomIcon.vue";
+export { default as DynamicFormField, type DynamicFormFieldProps, } from "./DynamicFormField.vue";
+export { default as NotificationModal, type NotificationModalProps, type NotificationType, } from "./NotificationModal.vue";
+export { default as SidePanel, type SidePanelProps } from "./SidePanel.vue";
+export { TimelinePanel, type TimelinePanelProps, type TimelinePanelItem, type TimelinePanelAction, type TimelinePanelOverflowItem, type TimelinePanelHeaderAction, type TimelinePanelVariant, type TimelinePanelPadding, type TimelinePanelCorner, } from "./TimelinePanel";
+export * from "./ConnectionFlow";
+export { TreeView, TreeItemCard, TreeFlowSvg, TREE_INDENT_PX, TREE_NEUTRAL_TOKENS, getTreeColorTokens, type TreeReorderEvent, type TreeTone, type TreeItemData, type TreeViewProps, type TreeItemCardProps, type TreeFlowSvgProps, } from "./TreeView";