@cjlapao/ui-kit-vue 0.2.0

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

@@ -0,0 +1,151 @@
+import type { CSSProperties, VNode } from "vue";
+import type { ButtonProps } from "./Button.vue";
+import type { LoaderProps } from "./Loader.vue";
+import type { TrueColor } from "../theme/Theme";
+export type PanelVariant = "elevated" | "outlined" | "subtle" | "tonal" | "default" | "glass" | "simple" | "liquid-glass";
+export type PanelTone = TrueColor;
+export type PanelDecoration = "none" | "gradient" | "shapes" | "both";
+export type PanelMediaPlacement = "top" | "start" | "end" | "overlay";
+export type PanelPadding = "none" | "xs" | "sm" | "md" | "lg";
+export type PanelCorner = "rounded" | "rounded-sm" | "rounded-md" | "rounded-lg" | "rounded-full" | "pill" | "none";
+export type PanelActionLayout = "auto" | "stacked" | "inline";
+export type PanelLoaderType = Exclude<LoaderProps["variant"], undefined>;
+export type PanelSpecularMode = "none" | "classic" | "halo";
+export interface PanelAction extends Pick<ButtonProps, "variant" | "color" | "size" | "weight" | "leadingIcon" | "trailingIcon" | "loading" | "disabled" | "accent" | "accentColor"> {
+    id?: string;
+    label: string | VNode;
+    onClick?: (event: MouseEvent) => void;
+    className?: string;
+}
+export interface PanelProps {
+    title?: string;
+    titleClassName?: string;
+    subtitle?: string;
+    subtitleClassName?: string;
+    description?: string;
+    descriptionClassName?: string;
+    badge?: string;
+    mediaPlacement?: PanelMediaPlacement;
+    actions?: PanelAction[];
+    actionLayout?: PanelActionLayout;
+    variant?: PanelVariant;
+    tone?: TrueColor;
+    padding?: PanelPadding;
+    corner?: PanelCorner;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    flexBody?: boolean;
+    maxWidth?: string | number;
+    minHeight?: string | number;
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    loading?: boolean;
+    loaderType?: PanelLoaderType;
+    loaderTitle?: string;
+    loaderMessage?: string;
+    loaderProgress?: number;
+    loaderColor?: LoaderProps["color"];
+    hoverShadow?: boolean;
+    decoration?: PanelDecoration;
+    /**
+     * Adds a subtle background tint on hover and lightens any decoration elements.
+     * Defaults to `true` when an `onClick` handler is present, otherwise `false`.
+     */
+    hoverable?: boolean;
+    color?: TrueColor;
+    /**
+     * Override the default hover color.
+     * If not provided, it defaults to the `color` prop if available, or a neutral tint.
+     */
+    hoverColor?: TrueColor;
+    /**
+     * Override the default border color.
+     * If not provided, it defaults to the `tone` or `color` prop depending on variant.
+     */
+    borderColor?: TrueColor;
+    /**
+     * Override the default background color.
+     */
+    backgroundColor?: TrueColor;
+    /**
+     * controls if the panel body should be scrollable
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Backdrop vibrancy for the liquid-glass variant.
+     * Preset takes priority over a numeric value when both are provided.
+     */
+    vibrancy?: "low" | "medium" | "high" | number;
+    /**
+     * Glass fill opacity for the liquid-glass variant.
+     * Preset takes priority over a numeric value when both are provided.
+     * @default "frosted"
+     */
+    glassOpacity?: "frosted" | "light" | "clear" | number;
+    /**
+    * Whether the liquid-glass variant shows a specular highlight at the top.
+    * @default true
+    *
+    * @deprecated Use specularMode instead. Kept for backward compatibility.
+    */
+    specularHighlight?: boolean;
+    /**
+     * Specular highlight mode for the liquid-glass variant.
+     * Controls how light reflects off the glass surface.
+     * @default "classic"
+     */
+    specularMode?: PanelSpecularMode;
+}
+export declare const paddingStyles: Record<PanelPadding, string>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PanelProps> & Readonly<{}>, {
+    tone: TrueColor;
+    variant: PanelVariant;
+    disabled: boolean;
+    loading: boolean;
+    vibrancy: "low" | "medium" | "high" | number;
+    glassOpacity: "frosted" | "light" | "clear" | number;
+    specularMode: PanelSpecularMode;
+    padding: PanelPadding;
+    mediaPlacement: PanelMediaPlacement;
+    actionLayout: PanelActionLayout;
+    corner: PanelCorner;
+    flexBody: boolean;
+    loaderType: PanelLoaderType;
+    hoverShadow: boolean;
+    decoration: PanelDecoration;
+    scrollable: boolean;
+    specularHighlight: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    media?: (props: {}) => any;
+} & {
+    media?: (props: {}) => any;
+} & {
+    badge?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    description?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    media?: (props: {}) => any;
+} & {
+    badge?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    description?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+import type { InputProps } from "./Input.vue";
+export type PasswordInputProps = Omit<InputProps, "trailingIcon" | "onTrailingIconClick">;
+declare const _default: import("vue").DefineComponent<{}, {
+    el: import("vue").ComputedRef<HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,84 @@
+import type { VNodeChild } from "vue";
+import { type TrueColor } from "../theme/Theme";
+import type { TreeTone } from "./TreeView/types";
+export interface PickerTag {
+    label: string;
+    tone?: TreeTone;
+}
+export interface PickerItem {
+    id: string;
+    /** Optional leading icon element */
+    icon?: VNodeChild;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    /** Tags rendered as Pills at the trailing edge of each row */
+    tags?: PickerTag[];
+}
+export interface PickerFilter {
+    /** Label shown on the filter toggle when active (e.g. "Stopped") */
+    label: string;
+    /** Predicate that returns true for items included in the filtered view */
+    predicate: (item: PickerItem) => boolean;
+}
+export interface PickerProps {
+    items: PickerItem[];
+    loading?: boolean;
+    /** Single-select: the currently selected item id */
+    selectedId?: string;
+    /** Placeholder shown on the trigger button when nothing is selected */
+    placeholder?: string;
+    /** Placeholder text inside the search input */
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    /**
+     * When provided, a filter toggle is shown that restricts the list to items
+     * matching the predicate. The user can toggle it off to see all items.
+     */
+    defaultFilter?: PickerFilter;
+    /**
+     * When true, the dropdown ignores any clipping ancestor (e.g. a modal's
+     * overflow container) and positions itself against the viewport instead.
+     * Useful when the picker is inside a constrained modal or panel.
+     * Default: false
+     */
+    escapeBoundary?: boolean;
+    color?: TrueColor;
+    /** Enable multi-select mode. Use selectedIds + @multiChange instead of selectedId + @select. */
+    multi?: boolean;
+    /** Multi-select: the currently selected item ids */
+    selectedIds?: string[];
+    /** Max individual pills shown in the trigger before collapsing to "N selected". Default: 3 */
+    maxPillsShown?: number;
+    /** 'sm' renders a compact trigger suitable for toolbars. Default: 'md' */
+    size?: "sm" | "md";
+    /** When true, the picker fills all available horizontal space. Default: true */
+    fullWidth?: boolean;
+    /** When true, the picker fills all available vertical space. Default: false */
+    fullHeight?: boolean;
+}
+declare const _default: import("vue").DefineComponent<PickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: PickerItem) => any;
+    "update:selectedId": (id: string) => any;
+    multiChange: (ids: string[]) => any;
+    "update:selectedIds": (ids: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<PickerProps> & Readonly<{
+    onSelect?: ((item: PickerItem) => any) | undefined;
+    "onUpdate:selectedId"?: ((id: string) => any) | undefined;
+    onMultiChange?: ((ids: string[]) => any) | undefined;
+    "onUpdate:selectedIds"?: ((ids: string[]) => any) | undefined;
+}>, {
+    color: TrueColor;
+    size: "sm" | "md";
+    placeholder: string;
+    fullWidth: boolean;
+    loading: boolean;
+    fullHeight: boolean;
+    emptyMessage: string;
+    loadingMessage: string;
+    escapeBoundary: boolean;
+    multi: boolean;
+    maxPillsShown: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,30 @@
+import type { VNode } from "vue";
+import type { TrueColor } from "../theme/Theme";
+export type PillVariant = "solid" | "soft" | "outline";
+export type PillSize = "xs" | "sm" | "md" | "lg";
+export type PillTone = TrueColor;
+export interface PillProps {
+    tone?: PillTone;
+    variant?: PillVariant;
+    size?: PillSize;
+    uppercase?: boolean;
+    icon?: string | VNode;
+    dot?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PillProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PillProps> & Readonly<{}>, {
+    tone: PillTone;
+    variant: PillVariant;
+    dot: boolean;
+    size: PillSize;
+    uppercase: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    icon?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,29 @@
+import "../../../react/src/components/progress-animations.css";
+import type { SpinnerColor } from "./Spinner.vue";
+export type ProgressSize = "xs" | "sm" | "md" | "lg";
+export type ProgressMotion = "none" | "shimmer" | "pulse" | "shimmer-pulse" | "stripes" | "stripes-shimmer";
+export type ProgressMotionSpeed = "slow" | "normal" | "fast";
+export type ProgressMotionDirection = "forward" | "reverse";
+export interface ProgressProps {
+    value?: number;
+    size?: ProgressSize;
+    color?: SpinnerColor;
+    motion?: ProgressMotion;
+    motionSpeed?: ProgressMotionSpeed;
+    motionDirection?: ProgressMotionDirection;
+    /**
+     * @deprecated Use `motion="shimmer"` or `motion="none"` instead.
+     */
+    showShimmer?: boolean;
+}
+declare const _default: import("vue").DefineComponent<ProgressProps, {
+    el: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{}>, {
+    color: SpinnerColor;
+    size: ProgressSize;
+    value: number;
+    motionSpeed: ProgressMotionSpeed;
+    motionDirection: ProgressMotionDirection;
+    showShimmer: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,51 @@
+import type { VNode } from "vue";
+import type { TrueColor } from "../theme/Theme";
+export interface SearchBarProps {
+    placeholder?: string;
+    debounceMs?: number;
+    autoSearch?: boolean;
+    disabled?: boolean;
+    initialValue?: string;
+    shouldClear?: boolean;
+    leadingIcon?: string | VNode;
+    variant?: "default" | "gradient";
+    /** Accent colour for focus ring, icon highlight, and clear-button hover. Default: 'blue' */
+    color?: TrueColor;
+    /**
+     * Start (darker) colour of the gradient glow (gradient variant only).
+     * Defaults to the -600 shade of `color` when omitted.
+     */
+    gradientFrom?: string;
+    /**
+     * End (lighter) colour of the gradient glow (gradient variant only).
+     * Defaults to the -400 shade of `color` when omitted.
+     */
+    gradientTo?: string;
+    /**
+     * Controls how prominent the gradient glow is (gradient variant only).
+     * - `subtle`  – barely visible; a hint of colour at the border
+     * - `soft`    – gentle glow, low key (default)
+     * - `medium`  – clearly visible glow
+     * - `strong`  – bold, wide glow
+     */
+    glowIntensity?: "subtle" | "soft" | "medium" | "strong";
+}
+declare const _default: import("vue").DefineComponent<SearchBarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    clear: () => any;
+    search: (query: string, signal?: AbortSignal | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<SearchBarProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onSearch?: ((query: string, signal?: AbortSignal | undefined) => any) | undefined;
+}>, {
+    color: TrueColor;
+    variant: "default" | "gradient";
+    disabled: boolean;
+    placeholder: string;
+    leadingIcon: string | VNode;
+    debounceMs: number;
+    autoSearch: boolean;
+    initialValue: string;
+    shouldClear: boolean;
+    glowIntensity: "subtle" | "soft" | "medium" | "strong";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,72 @@
+export type SectionSize = "xs" | "sm" | "md" | "lg";
+export type SectionVariant = 
+/** Bold neutral title, no extra decoration (clean default). */
+"default"
+/** Lighter muted title — lower visual weight. */
+ | "subtle"
+/** Tiny all-caps + wide letter-spacing (matches standard detail-panel style). */
+ | "uppercase"
+/** Same as `default` but with a bottom border separating header from body. */
+ | "bordered"
+/** Subtle filled background on the header strip. */
+ | "filled";
+export interface SectionProps {
+    /** Section heading. */
+    title?: string;
+    /** Optional secondary line below the title. */
+    subtitle?: string;
+    /** Controls header padding and title/subtitle font size. Defaults to `'md'`. */
+    size?: SectionSize;
+    /** Visual style of the section header. Defaults to `'uppercase'`. */
+    variant?: SectionVariant;
+    /**
+     * Override title text size independently from `size`.
+     * Accepts any Tailwind text-size class, e.g. `"text-xs"` or `"text-sm"`.
+     */
+    titleSize?: string;
+    /**
+     * Override title text colour / weight independently from `variant`.
+     * e.g. `"text-sky-600 font-bold"`
+     * Merged after variant styles so it wins on conflicts.
+     */
+    titleColor?: string;
+    /**
+     * Override subtitle text size independently from `size`.
+     * e.g. `"text-[10px]"`
+     */
+    subtitleSize?: string;
+    /**
+     * Override subtitle text colour / weight.
+     * e.g. `"text-neutral-600 dark:text-neutral-300"`
+     */
+    subtitleColor?: string;
+    /** Extra classes for the title span. */
+    titleClassName?: string;
+    /** Extra classes for the subtitle span. */
+    subtitleClassName?: string;
+    /** Extra classes for the body wrapper div. */
+    bodyClassName?: string;
+    /** Extra classes for the header wrapper div. */
+    headerClassName?: string;
+    /** Whether to remove all padding from the section. */
+    noPadding?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionProps> & Readonly<{}>, {
+    variant: SectionVariant;
+    size: SectionSize;
+    noPadding: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,35 @@
+export type SectionCardVariant = "glass" | "elevated" | "subtle" | "flat";
+export type SectionCardSize = "sm" | "md" | "lg";
+export interface SectionCardProps {
+    /** Section heading displayed above the content area. */
+    title: string;
+    titleClassName?: string;
+    /**
+     * Visual treatment of the card container.
+     * - `glass`    — frosted glass (default)
+     * - `elevated` — white/dark surface with shadow
+     * - `subtle`   — very light tinted background, no border
+     * - `flat`     — no background or border; title + content only
+     */
+    variant?: SectionCardVariant;
+    /** Body padding size. Defaults to 'md'. */
+    size?: SectionCardSize;
+    /** Blur the body content (e.g. to indicate unavailable data). */
+    blur?: boolean;
+    bodyClassName?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SectionCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionCardProps> & Readonly<{}>, {
+    variant: SectionCardVariant;
+    size: SectionCardSize;
+    blur: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    actions?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,41 @@
+import type { VNode } from "vue";
+import type { TrueColor } from "../theme/Theme";
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SelectProps, {
+    el: import("vue").Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<SelectProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    tone: TrueColor;
+    size: SelectSize;
+    validationStatus: SelectValidationStatus;
+    unstyled: boolean;
+    hideCaret: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    placeholder?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type SelectSize = "sm" | "md" | "lg";
+type SelectValidationStatus = "none" | "error" | "success";
+export interface SelectProps {
+    modelValue?: string;
+    size?: SelectSize;
+    tone?: TrueColor;
+    validationStatus?: SelectValidationStatus;
+    placeholder?: string;
+    leadingIcon?: string | VNode;
+    hideCaret?: boolean;
+    unstyled?: boolean;
+    disabled?: boolean;
+    multiple?: boolean;
+}
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,119 @@
+import type { VNodeChild } from "vue";
+import { type IconName } from "../icons/registry";
+import type { TrueColor } from "../theme";
+export type SideMenuItemType = "link" | "group" | "divider";
+export interface SideMenuGuardClaim {
+    type: "claim";
+    claim: string;
+}
+export interface SideMenuGuardAnyClaim {
+    type: "anyClaim";
+    claims: string[];
+}
+export interface SideMenuGuardAllClaims {
+    type: "allClaims";
+    claims: string[];
+}
+export interface SideMenuGuardRole {
+    type: "role";
+    role: string;
+}
+export interface SideMenuGuardAnyRole {
+    type: "anyRole";
+    roles: string[];
+}
+export interface SideMenuGuardModule {
+    type: "module";
+    module: string;
+}
+export interface SideMenuGuardAnyModule {
+    type: "anyModule";
+    modules: string[];
+}
+export interface SideMenuGuardCustom {
+    type: "custom";
+    fn: () => boolean;
+}
+export type SideMenuItemGuard = SideMenuGuardClaim | SideMenuGuardAnyClaim | SideMenuGuardAllClaims | SideMenuGuardRole | SideMenuGuardAnyRole | SideMenuGuardModule | SideMenuGuardAnyModule | SideMenuGuardCustom;
+export interface SideMenuItemBase {
+    /** When true, the item is not rendered in the menu */
+    hidden?: boolean;
+    slug: string;
+    /** Guard rules — ALL must pass (AND logic). */
+    guards?: SideMenuItemGuard[];
+}
+export interface SideMenuSettings {
+    /** When true, the menu is collapsed */
+    collapsed?: boolean;
+}
+export interface SideMenuItemLink extends SideMenuItemBase {
+    color?: TrueColor;
+    type?: "link";
+    label: string;
+    path: string;
+    icon?: IconName;
+    groupName?: string;
+    /** Optional badge rendered to the right of the label (e.g. active job count). */
+    badge?: VNodeChild;
+}
+export interface SideMenuItemGroup extends SideMenuItemBase {
+    type: "group";
+    label: string;
+    /** When true, renders a divider line immediately before the group header. */
+    hasDivider?: boolean;
+}
+export interface SideMenuItemDivider extends SideMenuItemBase {
+    type: "divider";
+    groupName?: string;
+}
+export type SideMenuItem = SideMenuItemLink | SideMenuItemGroup | SideMenuItemDivider;
+export interface SideMenuProps {
+    color?: TrueColor;
+    title?: string;
+    /** Icon element shown in the logo area (always visible, collapsed or expanded) */
+    logoIcon?: VNodeChild;
+    /** Text element shown next to the logoIcon when expanded */
+    logoText?: VNodeChild;
+    items: SideMenuItem[];
+    collapsed?: boolean;
+    onToggleCollapse?: () => void;
+    mobileOpen?: boolean;
+    onCloseMobile?: () => void;
+    /** When true, the desktop sidebar uses h-full instead of a fixed calc height. */
+    fullHeight?: boolean;
+    /** Called with item.guards; return true = show. Omit to show all. */
+    guardEvaluator?: (guards: SideMenuItemGuard[]) => boolean;
+    /**
+     * Active module view filter (e.g. 'all' | 'host' | 'orchestrator').
+     * When set to a non-'all' value, items whose module/anyModule guards reference
+     * a module listed in `moduleViewOptions` must match this value to be shown.
+     * Modules NOT in `moduleViewOptions` (e.g. 'reverse_proxy', 'api') are never
+     * subject to the view filter and behave as before.
+     * Items with no module guard are always shown.
+     */
+    activeModuleView?: string;
+    /**
+     * The set of module names that are treated as view-selectable
+     * (e.g. ['host', 'orchestrator']). Only module guards whose value appears
+     * in this list are subject to the activeModuleView filter.
+     * Defaults to [] (no view filtering on any module).
+     */
+    moduleViewOptions?: readonly string[];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SideMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SideMenuProps> & Readonly<{}>, {
+    color: TrueColor;
+    fullHeight: boolean;
+    collapsed: boolean;
+    mobileOpen: boolean;
+    moduleViewOptions: readonly string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    logoIcon?: (props: {}) => any;
+} & {
+    logoText?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,31 @@
+import type { VNodeChild } from "vue";
+import type { SideMenuProps } from "./SideMenu.vue";
+export interface SideMenuLayoutProps {
+    /** Props passed to the SideMenu component (including color). */
+    sideMenuProps: SideMenuProps;
+    /** Additional class name for the header section */
+    headerClassName?: string;
+    /** Additional class name for the scrollable body */
+    bodyClassName?: string;
+    /**
+     * Per-item actions from the list/sidebar (e.g. edit/delete buttons for the active item).
+     * Consumed by the header via `useSideMenuActions`.
+     */
+    sideItemActions?: VNodeChild;
+    /**
+     * Actions from the detail/side panel (e.g. PageHeader action buttons).
+     * Consumed by the header via `useSideMenuActions`.
+     */
+    sidePanelActions?: VNodeChild;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SideMenuLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SideMenuLayoutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};