@cjlapao/ui-kit-vue 0.2.0

package/dist/types/common/theme/ButtonTypes.d.ts

@@ -0,0 +1,4 @@
+import type { TrueColor } from "./Theme";
+export declare const iconAccentRing: Record<TrueColor, string>;
+export declare const iconAccentHover: Record<TrueColor, string>;
+export declare const iconAccentActive: Record<TrueColor, string>;

package/dist/types/common/theme/Theme.d.ts

@@ -0,0 +1,162 @@
+export type ButtonVariant = "solid" | "soft" | "outline" | "ghost" | "link" | "clear" | "icon" | "glass";
+/**
+ * TrueColor is the only valid color type in the ui-kit theme system.
+ * It comprises 21 Tailwind palette color names (red through stone, including fuchsia and rose).
+ * All components, tokens, and utilities must use TrueColor exclusively.
+ */
+export type TrueColor = "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "rose" | "slate" | "gray" | "zinc" | "neutral" | "stone";
+/**
+ * Shared size type used across all frameworks and components.
+ * Replaces both the old ThemeSize (dead code) and ModalSize.
+ */
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "2xl" | "3xl" | "full";
+type ButtonTheme = Record<ButtonVariant, Record<TrueColor, string>>;
+type ButtonHoverTheme = Record<ButtonVariant, Record<TrueColor, string>>;
+type ButtonActiveTheme = Record<ButtonVariant, Record<TrueColor, string>>;
+type ButtonActiveHoverTheme = Record<ButtonVariant, Record<TrueColor, string>>;
+type ToggleTheme = Record<TrueColor, string>;
+type CheckboxTheme = Record<TrueColor, string>;
+type SpinnerTheme = Record<TrueColor, [string, string, string, string]>;
+type LoaderTheme = Record<TrueColor, {
+    track: string;
+    bar: string;
+}>;
+type MultiToggleTheme = Record<TrueColor, {
+    active: string;
+    activeText: string;
+    indicator: string;
+    hover: string;
+}>;
+type MultiToggleVariantTokens = {
+    softIndicator: string;
+    activeText: string;
+    hover: string;
+};
+type MultiToggleVariantTheme = Record<TrueColor, MultiToggleVariantTokens>;
+type TabsColorTokens = {
+    hoverText: string;
+    activeText: string;
+    onAccentText: string;
+    focusRing: string;
+    accentBg: string;
+    subtleBg: string;
+    subtleHoverBg: string;
+    segmentedContainer: string;
+    badgeSubtle: string;
+    badgeStrong: string;
+    badgeOnAccent: string;
+    underlineActive: string;
+};
+type TabsTheme = Record<TrueColor, TabsColorTokens>;
+type PanelToneConfig = {
+    border: string;
+    heading: string;
+    muted: string;
+    badge: string;
+    subtleBg: string;
+    tonalBg: string;
+    glassBg: string;
+    glassBorder: string;
+    liquidBg: string;
+    liquidBorder: string;
+    liquidShadow: string;
+    liquidHeading: string;
+    overlayGradient: string;
+    decorationShape: string;
+    decorationGradient: string;
+};
+type PanelTheme = Record<TrueColor, PanelToneConfig>;
+type StepperToneConfig = {
+    activeBg: string;
+    activeText: string;
+    completedBg: string;
+    completedText: string;
+    pendingBorder: string;
+    pendingText: string;
+    underlineBase: string;
+};
+type StepperTheme = Record<TrueColor, StepperToneConfig>;
+type BadgeTheme = Record<TrueColor, string>;
+type PillTheme = Record<TrueColor, Record<"solid" | "soft" | "outline", {
+    base: string;
+    border?: string;
+}>>;
+type AlertTheme = Record<TrueColor, {
+    subtle: string;
+    solid: string;
+    outline: string;
+    icon: string;
+    text: string;
+    border: string;
+    dismiss: string;
+}>;
+type StatTileTheme = Record<TrueColor, {
+    decorationBg: string;
+    iconColor: string;
+    divider: string;
+}>;
+type ButtonSelectorColorTokens = {
+    selectedBorder: string;
+    selectedBg: string;
+    selectedIcon: string;
+    selectedLabel: string;
+    selectedIndicatorBg: string;
+    selectedIndicatorBorder: string;
+    selectedIndicatorDot: string;
+};
+type ButtonSelectorTheme = Record<TrueColor, ButtonSelectorColorTokens>;
+interface ThemeDefinition {
+    button: ButtonTheme;
+    buttonHover: ButtonHoverTheme;
+    buttonActive: ButtonActiveTheme;
+    buttonActiveHover: ButtonActiveHoverTheme;
+    toggle: ToggleTheme;
+    checkbox: CheckboxTheme;
+    spinner: SpinnerTheme;
+    loader: LoaderTheme;
+    multiToggle: MultiToggleTheme;
+    multiToggleVariant: MultiToggleVariantTheme;
+    tabs: TabsTheme;
+    panel: PanelTheme;
+    stepper: StepperTheme;
+    badge: BadgeTheme;
+    pill: PillTheme;
+    alert: AlertTheme;
+    statTile: StatTileTheme;
+    buttonSelector: ButtonSelectorTheme;
+}
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends Record<string, unknown> ? DeepPartial<T[K]> : T[K];
+};
+export declare const configureTheme: (overrides: DeepPartial<ThemeDefinition>) => void;
+export declare const resetTheme: () => void;
+export declare const getButtonColorClasses: (variant: ButtonVariant, color: TrueColor) => string;
+export declare const getButtonHoverClasses: (variant: ButtonVariant, color: TrueColor) => string;
+export declare const getButtonActiveClasses: (variant: ButtonVariant, color: TrueColor) => string;
+export declare const getButtonActiveHoverClasses: (variant: ButtonVariant, color: TrueColor) => string;
+export declare const getButtonBaseClasses: (variant: ButtonVariant, color: TrueColor) => string;
+export declare const getToggleColorClasses: (color: TrueColor) => string;
+export declare const getCheckboxColorClasses: (color: TrueColor) => string;
+export declare const getSpinnerColorTokens: (color: TrueColor) => [string, string, string, string];
+export declare const getLoaderProgressColors: (color: TrueColor) => {
+    track: string;
+    bar: string;
+};
+export declare const getMultiToggleColorTokens: (color: TrueColor) => {
+    active: string;
+    activeText: string;
+    indicator: string;
+    hover: string;
+};
+export declare const getMultiToggleVariantTokens: (color: TrueColor) => MultiToggleVariantTokens;
+export declare const getTabsColorTokens: (color: TrueColor) => TabsColorTokens;
+export declare const getPanelToneStyles: (tone: TrueColor) => PanelToneConfig;
+export declare const getStepperTonePalette: (tone: TrueColor) => StepperToneConfig;
+export declare const getBadgeColorClasses: (color: TrueColor) => string;
+export declare const getPillColorClasses: (color: TrueColor, variant: "solid" | "soft" | "outline") => {
+    base: string;
+    border?: string;
+};
+export declare const getAlertColorClasses: (color: TrueColor) => AlertTheme[TrueColor];
+export declare const getStatTileColorClasses: (color: TrueColor) => StatTileTheme[TrueColor];
+export {};

package/dist/types/common/theme/glass.d.ts

@@ -0,0 +1,59 @@
+/**
+ * common/theme/glass.ts — Framework-agnostic glass utility module.
+ *
+ * Extracts all glass logic from Panel into reusable functions and types
+ * so that any control (Button, IconButton, DropdownButton, etc.) can
+ * compose glass styling without duplicating the Panel implementation.
+ *
+ * This file is pure TypeScript — no React, Vue, or DOM imports.
+ */
+import type { TrueColor } from "./Theme";
+/**
+ * Backdrop vibrancy level for glass surfaces.
+ * - `"low"`     → 1.0× saturation
+ * - `"medium"`  → 1.2× saturation (default)
+ * - `"high"`    → 1.4× saturation
+ * - `number`    → arbitrary multiplier (0 – 2 recommended)
+ */
+export type GlassVibrancy = "low" | "medium" | "high" | number;
+/**
+ * Glass fill transparency level.
+ * - `"frosted"` → 45 % light / 15 % dark  (default)
+ * - `"light"`   → 70 % light / 25 % dark
+ * - `"clear"`   → 20 % light /  5 % dark
+ * - `number`    → 0–1 fraction; light = round(frac × 100), dark = min(round(frac × 30), 30)
+ */
+export type GlassOpacity = "frosted" | "light" | "clear" | number;
+/**
+ * Specular highlight mode for glass surfaces.
+ * - `"none"`    → no specular overlay
+ * - `"classic"` → single hairline gradient at top edge
+ * - `"halo"`    → corner caps + diffuse band + bottom darken
+ */
+export type SpecularMode = "none" | "classic" | "halo";
+/**
+ * Compute the Tailwind fill classes for a glass surface.
+ *
+ * Returns a string like `"bg-blue-100/55 hover:bg-blue-100/65 dark:bg-blue-600/25 dark:hover:bg-blue-600/35"`.
+ *
+ * @param color   - TrueColor token (e.g. `"blue"`, `"red"`, `"fuchsia"`)
+ * @param opacity - Glass opacity preset or numeric fraction (0–1)
+ */
+export declare const getGlassFillClass: (color: TrueColor, opacity: GlassOpacity) => string;
+/**
+ * Map a vibrancy setting to a Tailwind backdrop-saturate class.
+ *
+ * @param vibrancy - Low / medium / high preset or arbitrary multiplier
+ * @returns e.g. `"backdrop-saturate-[1.2]"`
+ */
+export declare const getGlassVibrancyClass: (vibrancy: GlassVibrancy) => string;
+/**
+ * Build Tailwind classes for a specular highlight overlay.
+ *
+ * - `"none"`       → `null` (no overlay)
+ * - `"classic"`    → soft top-edge hairline reflection
+ * - `"halo"`       → corner caps + diffuse top glow
+ *
+ * @returns class string or `null`
+ */
+export declare const getSpecularClasses: (mode: SpecularMode) => string | null;

package/dist/types/common/theme/randomThemeColor.d.ts

@@ -0,0 +1,38 @@
+import type { TrueColor } from "./Theme";
+type RandomIntensity = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export interface RandomThemeColorValue {
+    color: string;
+    intensity: RandomIntensity;
+    token: string;
+}
+/**
+ * Returns a random Tailwind color token based on the ui-kit theme palette,
+ * like `blue-500` or `emerald-300`.
+ */
+export declare const getRandomThemeColorValue: () => RandomThemeColorValue;
+/**
+ * Returns a random Tailwind utility class for a theme color token.
+ * Example: `getRandomThemeColorClass('bg')` -> `bg-blue-500`.
+ */
+export declare const getRandomThemeColorClass: (prefix?: "bg" | "text" | "border") => string;
+/**
+ * Returns an array of `count` Tailwind color utility classes.
+ * Uses TrueColor values in order (at intensity 500) for the first N items,
+ * then falls back to `getRandomThemeColorClass` for any overflow.
+ *
+ * @example
+ * getColorPalette(5)           // ['bg-red-500', 'bg-orange-500', ...]
+ * getColorPalette(5, 'text')   // ['text-red-500', 'text-orange-500', ...]
+ */
+export declare const getColorPalette: (count: number, prefix?: "bg" | "text" | "border") => string[];
+/**
+ * Returns an array of `count` TrueColor names (e.g. `'red'`, `'orange'`, `'blue'`).
+ * Uses TrueColor values in order for the first N items,
+ * then falls back to random colors from RANDOM_THEME_COLORS for overflow.
+ * Useful when components construct their own Tailwind class strings via template literals.
+ *
+ * @example
+ * getColorPaletteNames(3) // ['red', 'orange', 'amber']
+ */
+export declare const getColorPaletteNames: (count: number) => TrueColor[];
+export {};

package/dist/types/common/types/App.d.ts

@@ -0,0 +1,18 @@
+export interface StartupStage {
+    id: string;
+    label: string;
+    title: string;
+    status: StartupStageStatus;
+    errorMessage?: string;
+    errorType?: string;
+    description?: string;
+    statusMessage?: string;
+    retryCount?: number;
+    maxRetryCount?: number;
+    progress?: {
+        percentage: number;
+        currentMessage?: string;
+        details?: string;
+    };
+}
+export type StartupStageStatus = "pending" | "in-progress" | "has-error" | "is-ok";

package/dist/types/common/types/CapsuleBlueprint.d.ts

@@ -0,0 +1,25 @@
+export declare enum CapsuleBlueprintValueType {
+    String = "string",
+    Int = "int",
+    Boolean = "boolean",
+    Select = "select",
+    List = "list",
+    Map = "map"
+}
+export interface CapsuleBlueprintParameter {
+    name: string;
+    key: string;
+    description?: string;
+    type?: string;
+    value_type?: CapsuleBlueprintValueType;
+    default?: any;
+    required?: boolean;
+    is_required?: boolean;
+    is_secret?: boolean;
+    options?: any;
+    hint?: string;
+    help?: string;
+    service_name?: string;
+    depends_on?: string[];
+    [key: string]: any;
+}

package/dist/types/common/types/Variables.d.ts

@@ -0,0 +1,11 @@
+export type SmartVariableType = "var" | "env";
+export type SmartVariableSource = "global" | "system" | "service";
+export interface SmartVariable {
+    fullToken: string;
+    type: SmartVariableType;
+    source: SmartVariableSource;
+    name: string;
+    description?: string;
+    defaultValue?: string;
+}
+export declare const SYSTEM_VARIABLES: SmartVariable[];

package/dist/types/common/utils/bytesUtils.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Byte / data-size formatting utilities.
+ *
+ * All functions that accept a unit parameter use `DataSizeUnit` which maps
+ * directly to the `action_value_unit` field returned by the API.
+ */
+export type DataSizeUnit = "B" | "KB" | "MB" | "GB" | "TB";
+/**
+ * Normalize a raw unit string from the API (e.g. `"bytes"`, `"MB"`, `"Gigabytes"`)
+ * to a canonical `DataSizeUnit`. Falls back to `'B'` for unknown values.
+ */
+export declare function normalizeDataSizeUnit(raw: string | undefined): DataSizeUnit;
+/**
+ * Pick the largest unit in which `referenceBytes` is >= 1.
+ * Falls back to 'B' when the value is 0 or less.
+ */
+export declare function pickBestUnit(referenceBytes: number): DataSizeUnit;
+/**
+ * Format a raw byte value using the given display unit, up to `decimals`
+ * significant decimal places (trailing zeros are stripped).
+ */
+export declare function formatBytesAs(bytes: number, unit: DataSizeUnit, decimals?: number): string;
+/**
+ * Format `value` and `total` — both expressed in `inputUnit` — using the
+ * same human-friendly display unit derived from `total`.
+ *
+ * @example
+ * // total = 1.5 GB → picks GB
+ * formatProgressBytes(0.45, 1.5, 'GB')
+ * // → { valueLabel: '0.45', totalLabel: '1.5', unit: 'GB', line: '0.45 / 1.5 GB' }
+ *
+ * // total = 1_500_000_000 bytes → picks GB
+ * formatProgressBytes(450_000_000, 1_500_000_000, 'B')
+ * // → { valueLabel: '0.42', totalLabel: '1.4', unit: 'GB', line: '0.42 / 1.4 GB' }
+ */
+export declare function formatProgressBytes(value: number, total: number, inputUnit?: DataSizeUnit, decimals?: number): {
+    valueLabel: string;
+    totalLabel: string;
+    unit: DataSizeUnit;
+    line: string;
+};
+/**
+ * Format a single byte value to the most appropriate unit, with up to
+ * `decimals` decimal places.
+ *
+ * @example
+ * formatBytes(1_500_000)   // "1.43 MB"
+ * formatBytes(2_684_354_560) // "2.5 GB"
+ */
+export declare function formatBytes(bytes: number, decimals?: number): string;

package/dist/types/common/utils/dependencyUtils.d.ts

@@ -0,0 +1,35 @@
+export interface DependencyCondition {
+    field_name: string;
+    field_value: string;
+    operator: string;
+    condition?: "and" | "or";
+}
+export interface FileUploadData {
+    files: File | File[];
+    names: string;
+    count: number;
+}
+export interface FormData {
+    [key: string]: string | boolean | Array<{
+        key: string;
+        value: string;
+    }> | string[] | FileUploadData;
+}
+/**
+ * Evaluates if a field should be visible based on its dependencies
+ * @param fieldName - The name of the field being evaluated
+ * @param dependencies - Array of dependency conditions
+ * @param formData - Current form data
+ * @returns boolean indicating if the field should be visible
+ */
+export declare function evaluateFieldVisibility(_fieldName: string, dependencies: DependencyCondition[], formData: FormData): boolean;
+/**
+ * Evaluates visibility for all fields in a form
+ * @param parameters - Array of parameters with dependencies
+ * @param formData - Current form data
+ * @returns Object mapping field names to visibility states
+ */
+export declare function evaluateAllFieldVisibility(parameters: Array<{
+    key: string;
+    dependencies?: DependencyCondition[];
+}>, formData: FormData): Record<string, boolean>;

package/dist/types/common/utils/durationUtils.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Duration formatting utilities.
+ * All functions operate on whole minutes as the base unit.
+ */
+export interface FormatDurationOptions {
+    /**
+     * Maximum number of unit parts to include in the output.
+     * e.g. maxParts=2 → "1 day and 5 hours" (minutes dropped)
+     * Defaults to 3.
+     */
+    maxParts?: number;
+    /**
+     * String to return when the input is zero or negative.
+     * Defaults to "0 minutes".
+     */
+    zeroLabel?: string;
+}
+/**
+ * Converts a number of minutes into a human-readable duration string.
+ *
+ * @example
+ * formatDuration(1)            // "1 minute"
+ * formatDuration(45)           // "45 minutes"
+ * formatDuration(60)           // "1 hour"
+ * formatDuration(85)           // "1 hour and 25 minutes"
+ * formatDuration(1440)         // "1 day"
+ * formatDuration(1525)         // "1 day and 25 minutes"
+ * formatDuration(1860)         // "1 day and 7 hours"      (maxParts=2 default trims minutes)
+ * formatDuration(7785)         // "5 days, 9 hours and 45 minutes"
+ * formatDuration(46080)        // "1 month and 2 days"
+ * formatDuration(530985)       // "1 year, 1 month and 2 days"
+ * formatDuration(0)            // "0 minutes"
+ * formatDuration(-5)           // "0 minutes"
+ */
+export declare function formatDuration(totalMinutes: number, options?: FormatDurationOptions): string;
+/**
+ * Like `formatDuration` but accepts seconds instead of minutes.
+ * Values under 60 seconds are shown as "less than a minute" by default.
+ */
+export declare function formatDurationFromSeconds(totalSeconds: number, options?: FormatDurationOptions & {
+    subMinuteLabel?: string;
+}): string;
+/**
+ * Like `formatDuration` but accepts milliseconds instead of minutes.
+ * Values under 60 000 ms are shown as "less than a minute" by default.
+ */
+export declare function formatDurationFromMs(totalMs: number, options?: FormatDurationOptions & {
+    subMinuteLabel?: string;
+}): string;

package/dist/types/common/utils/focusUtils.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Utility functions for handling focus events with intelligent reconnection logic
+ */
+export interface FocusHandlerOptions {
+    debounceMs?: number;
+    checkConnection?: () => boolean;
+    onReconnect?: () => void;
+    onSkip?: () => void;
+}
+/**
+ * Creates a debounced focus handler that only triggers reconnection when necessary
+ * @param options Configuration options for the focus handler
+ * @returns A function that can be used as an event listener
+ */
+export declare function createIntelligentFocusHandler(options?: FocusHandlerOptions): () => void;
+/**
+ * Cleanup function for focus handlers
+ * @param handler The focus handler function
+ * @param timeoutRef Reference to the timeout
+ */
+export declare function cleanupFocusHandler(handler: () => void, timeoutRef: ReturnType<typeof setTimeout> | null): void;
+/**
+ * Hook for managing focus events with intelligent reconnection
+ * @param options Configuration options
+ * @returns Cleanup function
+ */
+export declare function useIntelligentFocusHandler(options?: FocusHandlerOptions): () => void;

package/dist/types/common/utils/gravatar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns a Gravatar URL for the given email.
+ *
+ * @param email - The user's email address.
+ * @param size  - Image size in pixels (default 200).
+ * @param defaultImage - Gravatar fallback when no image exists.
+ *   Common values: `'404'` (return HTTP 404), `'mp'` (mystery-person silhouette),
+ *   `'identicon'` (geometric pattern), `'retro'` (8-bit style).
+ *   Defaults to `'mp'` so a valid image is always returned.
+ */
+export declare const getGravatarUrl: (email: string, size?: number, defaultImage?: string) => string;

package/dist/types/common/utils/iconUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const widthTokenRegex: RegExp;
+export declare const heightTokenRegex: RegExp;
+export declare const mergeClassTokens: (...groups: Array<string | undefined>) => string;
+export declare const hasExplicitSize: (value?: string) => boolean;

package/dist/types/common/utils/smartVariables.d.ts

@@ -0,0 +1,23 @@
+import { type SmartVariable, type SmartVariableType, type SmartVariableSource } from "../types/Variables";
+export declare const SMART_VAR_REGEX: RegExp;
+export declare const parseSmartVariable: (token: string) => SmartVariable | null;
+export declare const createSmartToken: (type: SmartVariableType, source: SmartVariableSource, name: string) => string;
+/**
+ * Extracts all unique variables from a given text string.
+ */
+export declare const extractVariables: (text: string) => SmartVariable[];
+import { type CapsuleBlueprintParameter } from "../types/CapsuleBlueprint";
+interface VariableContext {
+    globalParameters?: CapsuleBlueprintParameter[];
+    serviceNames?: string[];
+    context?: {
+        slug?: string;
+        enable_https?: boolean;
+    };
+}
+export declare const resolveVariable: (value: string, ctx: VariableContext) => {
+    value: string;
+    isResolved: boolean;
+    isRuntime: boolean;
+};
+export {};

package/dist/types/common/utils/stringUtils.d.ts

@@ -0,0 +1,7 @@
+export declare function toBoolean(value: string | undefined): boolean;
+export declare function normalizeString(subject: string): string;
+export declare function normalizeStringToUpper(name: string): string;
+export declare function isDevelopment(environment: string): boolean;
+export declare function formatDate(iso?: string | null): string;
+export declare function formatLogTime(iso: string): string;
+export declare function formatMB(mb?: number): string;

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

@@ -0,0 +1,14 @@
+import type { TrueColor } from "../../theme/Theme";
+export interface TreeColorTokens {
+    bg: string;
+    pulseBg: string;
+    border: string;
+    headerText: string;
+    labelText: string;
+    trunk: readonly [string, string];
+    connFill: readonly [string, string];
+    connBorder: readonly [string, string];
+    connDot: readonly [string, string];
+}
+export declare const NEUTRAL_TOKENS: TreeColorTokens;
+export declare function getTreeColorTokens(tone: TrueColor | undefined): TreeColorTokens;

package/dist/types/react/src/theme/Theme.d.ts

@@ -0,0 +1 @@
+export * from "../../../common/theme/Theme";

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

@@ -0,0 +1,38 @@
+import type { TableVariant } from "./Table.vue";
+import type { PanelTone } from "./Panel.vue";
+export interface AccessMatrixPermission {
+    group: string;
+    resource: string;
+    action: string;
+    enabled: boolean;
+}
+export interface AccessMatrixProps {
+    permissions: AccessMatrixPermission[];
+    /** Number of groups visible before the "Show more" button appears. Defaults to 5. */
+    limit?: number;
+    variant?: TableVariant;
+    tone?: PanelTone;
+    striped?: boolean;
+    /** Forwards to Table: remove inner row borders/dividers. */
+    noBorders?: boolean;
+    /** Forwards to Table: make the table fill parent height and scroll internally. */
+    fullHeight?: boolean;
+    hoverable?: boolean;
+    /**
+     * Background Tailwind class(es) applied to the sticky Resource column cells so they remain
+     * opaque over scrolled action columns. Defaults to `'bg-white dark:bg-neutral-900'`.
+     * Pass `'bg-transparent'` when the table sits inside a container whose background should
+     * show through (e.g. a tinted panel or card).
+     */
+    stickyBackground?: string;
+}
+declare const _default: import("vue").DefineComponent<AccessMatrixProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccessMatrixProps> & Readonly<{}>, {
+    tone: PanelTone;
+    variant: TableVariant;
+    fullHeight: boolean;
+    hoverable: boolean;
+    striped: boolean;
+    noBorders: boolean;
+    limit: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,63 @@
+import type { VNode } from "vue";
+import type { LoaderProps } from "./Loader.vue";
+import type { PanelTone } from "./Panel.vue";
+export type AccordionVariant = "default" | "bordered" | "minimal" | "tonal" | "ghost";
+export type AccordionSize = "sm" | "md" | "lg";
+export type AccordionIndicator = "chevron" | "plus-minus" | "caret" | "none";
+export type AccordionChevronPlacement = "left" | "right";
+export interface AccordionItem {
+    id: string;
+    title: string | VNode;
+    subtitle?: string | VNode;
+    description?: string | VNode;
+    icon?: string | VNode;
+    badge?: string | VNode;
+    actions?: string | VNode;
+    content: string | VNode;
+    disabled?: boolean;
+    loading?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    variant?: AccordionVariant;
+    tone?: PanelTone;
+    size?: AccordionSize;
+    indicator?: AccordionIndicator;
+    chevronPlacement?: AccordionChevronPlacement;
+    divider?: boolean;
+    animated?: boolean;
+    transitionMs?: number;
+    iconClassName?: string;
+    itemClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    ariaLabel?: string;
+    loading?: boolean;
+    loaderTitle?: string;
+    loaderMessage?: string;
+    loaderType?: LoaderProps["variant"];
+    loaderProgress?: number;
+    loaderColor?: LoaderProps["color"];
+    defaultOpenIds?: string[];
+    openIds?: string[];
+    multiple?: boolean;
+}
+declare const _default: import("vue").DefineComponent<AccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (openIds: string[]) => any;
+    itemToggle: (id: string, isOpen: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<AccordionProps> & Readonly<{
+    onChange?: ((openIds: string[]) => any) | undefined;
+    onItemToggle?: ((id: string, isOpen: boolean) => any) | undefined;
+}>, {
+    tone: PanelTone;
+    variant: AccordionVariant;
+    size: AccordionSize;
+    loading: boolean;
+    animated: boolean;
+    loaderType: "spinner" | "progress";
+    indicator: AccordionIndicator;
+    chevronPlacement: AccordionChevronPlacement;
+    divider: boolean;
+    transitionMs: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;