ngx-com 0.0.3 → 0.0.4

package/types/ngx-com-components-segmented-control.d.ts

@@ -0,0 +1,274 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, InputSignal, ModelSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Template context provided to custom segment templates.
+ *
+ * @example
+ * ```html
+ * <ng-template comSegmentDef let-option let-active="active">
+ *   <com-icon [name]="option.value" />
+ *   <span>{{ option.label }}</span>
+ * </ng-template>
+ * ```
+ */
+interface SegmentTemplateContext<T = unknown> {
+    /** The option object (default for `let-option`). */
+    $implicit: SegmentOption<T>;
+    /** Whether this segment is currently selected. */
+    active: boolean;
+    /** Whether this segment is disabled. */
+    disabled: boolean;
+    /** Position in the options list (0-indexed). */
+    index: number;
+}
+/**
+ * Directive to mark a custom template for segment content.
+ *
+ * The template receives a `SegmentTemplateContext` with the option data,
+ * active state, disabled state, and index. Use this to customize the
+ * inner content of each segment while the component manages the button,
+ * styling, and ARIA attributes.
+ *
+ * @example Icon + text
+ * ```html
+ * <com-segmented-control [options]="viewOptions" [(value)]="currentView">
+ *   <ng-template comSegmentDef let-option let-active="active">
+ *     <com-icon [name]="option.value" size="sm" />
+ *     <span>{{ option.label }}</span>
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Icon only (label used for accessibility)
+ * ```html
+ * <com-segmented-control [options]="alignmentOptions" [(value)]="alignment">
+ *   <ng-template comSegmentDef let-option>
+ *     <com-icon [name]="'align-' + option.value" size="sm" />
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ */
+declare class ComSegmentDef<T = unknown> {
+    readonly templateRef: TemplateRef<SegmentTemplateContext<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSegmentDef<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComSegmentDef<any>, "ng-template[comSegmentDef]", never, {}, {}, never, never, true, never>;
+}
+
+type SegmentedControlSize = 'sm' | 'md' | 'lg';
+type SegmentedControlColor = 'primary' | 'accent' | 'muted';
+type SegmentedControlVariant = 'filled' | 'outline';
+/**
+ * CVA variants for the segmented control container (track).
+ * Controls overall sizing, padding, and track background.
+ */
+declare const segmentedControlContainerVariants: (props?: {
+    size?: SegmentedControlSize;
+    fullWidth?: boolean;
+}) => string;
+/**
+ * CVA variants for individual segment buttons.
+ * Controls per-segment sizing, typography, and active/inactive color states.
+ */
+declare const segmentedControlSegmentVariants: (props?: {
+    size?: SegmentedControlSize;
+    color?: SegmentedControlColor;
+    variant?: SegmentedControlVariant;
+    active?: boolean;
+    fullWidth?: boolean;
+}) => string;
+/**
+ * Classes to apply when a segment is disabled.
+ * Separate from CVA to avoid complex variant combinations.
+ */
+declare const SEGMENT_DISABLED_CLASSES = "bg-disabled text-disabled-foreground cursor-not-allowed hover:bg-disabled";
+type SegmentedControlContainerVariants = VariantProps<typeof segmentedControlContainerVariants>;
+type SegmentedControlSegmentVariants = VariantProps<typeof segmentedControlSegmentVariants>;
+
+/**
+ * Represents a single option in the segmented control.
+ */
+interface SegmentOption<T = unknown> {
+    /** The value associated with this option. */
+    value: T;
+    /** Display label (also used as aria-label fallback for custom templates). */
+    label: string;
+    /** Whether this option is disabled. */
+    disabled?: boolean | undefined;
+}
+/**
+ * Segmented control component — a horizontal group of mutually exclusive options
+ * where one is always selected. Think of it as a styled radio group in pill form.
+ *
+ * Supports two rendering modes:
+ * - **Simple mode**: Plain text labels from the `label` property
+ * - **Custom template mode**: Full control via `ng-template[comSegmentDef]`
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-background`, `--color-foreground`,
+ *         `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-border`, `--color-ring`
+ *
+ * @example Basic two-option toggle
+ * ```html
+ * <com-segmented-control
+ *   [options]="[
+ *     { value: 'admin', label: 'Admin' },
+ *     { value: 'user', label: 'User' }
+ *   ]"
+ *   [(value)]="selectedRole"
+ * />
+ * ```
+ *
+ * @example Multiple options with variants
+ * ```html
+ * <com-segmented-control
+ *   [options]="viewOptions"
+ *   [(value)]="currentView"
+ *   color="primary"
+ *   size="sm"
+ * />
+ * ```
+ *
+ * @example Custom template with icons
+ * ```html
+ * <com-segmented-control [options]="viewOptions" [(value)]="currentView" color="primary">
+ *   <ng-template comSegmentDef let-option let-active="active">
+ *     <com-icon [name]="option.value === 'grid' ? 'grid' : 'list'" size="sm" />
+ *     <span>{{ option.label }}</span>
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Custom template with badges
+ * ```html
+ * <com-segmented-control [options]="statusOptions" [(value)]="statusFilter" color="accent">
+ *   <ng-template comSegmentDef let-option let-active="active">
+ *     <span>{{ option.label }}</span>
+ *     <span
+ *       class="ml-1.5 rounded-pill px-1.5 text-xs"
+ *       [class]="active ? 'bg-accent-foreground/20 text-accent-foreground' : 'bg-muted text-muted-foreground'"
+ *     >
+ *       {{ option.value === 'open' ? openCount : closedCount }}
+ *     </span>
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Icon only (label used for accessibility)
+ * ```html
+ * <com-segmented-control
+ *   [options]="[
+ *     { value: 'left', label: 'Align left' },
+ *     { value: 'center', label: 'Align center' },
+ *     { value: 'right', label: 'Align right' }
+ *   ]"
+ *   [(value)]="alignment"
+ *   size="sm"
+ * >
+ *   <ng-template comSegmentDef let-option>
+ *     <com-icon [name]="'align-' + option.value" size="sm" />
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Full width + outline variant
+ * ```html
+ * <com-segmented-control
+ *   [options]="plans"
+ *   [(value)]="selectedPlan"
+ *   variant="outline"
+ *   color="primary"
+ *   [fullWidth]="true"
+ * />
+ * ```
+ *
+ * @example Disabled options
+ * ```html
+ * <com-segmented-control
+ *   [options]="[
+ *     { value: 'free', label: 'Free' },
+ *     { value: 'pro', label: 'Pro' },
+ *     { value: 'enterprise', label: 'Enterprise', disabled: true }
+ *   ]"
+ *   [(value)]="plan"
+ *   color="primary"
+ *   size="lg"
+ * />
+ * ```
+ */
+declare class ComSegmentedControl<T = unknown> {
+    /** References to all segment buttons for focus management. */
+    private readonly segmentButtons;
+    /** The list of options to display. */
+    readonly options: InputSignal<SegmentOption<T>[]>;
+    /** Currently selected value. Two-way bindable with `[(value)]`. */
+    readonly value: ModelSignal<T | undefined>;
+    /** Controls segment height, padding, and font size. */
+    readonly size: InputSignal<SegmentedControlSize>;
+    /** Color scheme for the active segment. */
+    readonly color: InputSignal<SegmentedControlColor>;
+    /** Visual variant: filled (solid background) or outline (ring border). */
+    readonly variant: InputSignal<SegmentedControlVariant>;
+    /** When true, segments stretch equally to fill available width. */
+    readonly fullWidth: InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for the radiogroup container. */
+    readonly ariaLabel: InputSignal<string | null>;
+    /** Custom CSS classes to merge with container classes. */
+    readonly userClass: InputSignal<string>;
+    /** Optional custom template for segment content. */
+    readonly customTemplate: Signal<ComSegmentDef<T> | undefined>;
+    /** Classes for the container/track element. */
+    protected readonly containerClasses: Signal<string>;
+    /**
+     * Checks if the given option is currently selected.
+     */
+    isActive(option: SegmentOption<T>): boolean;
+    /**
+     * Selects the given option (if not disabled).
+     */
+    select(option: SegmentOption<T>): void;
+    /**
+     * Returns the tabindex for a segment at the given index.
+     * Implements roving tabindex: only the selected (or first focusable) segment has tabindex="0".
+     */
+    tabIndexFor(index: number): number;
+    /**
+     * Returns computed classes for a segment button.
+     */
+    segmentClasses(option: SegmentOption<T>): string;
+    /**
+     * Builds the template context for custom templates.
+     */
+    getTemplateContext(option: SegmentOption<T>, index: number): SegmentTemplateContext<T>;
+    /**
+     * Handles keyboard navigation for the segmented control.
+     * Implements ARIA radiogroup keyboard patterns.
+     */
+    onKeydown(event: KeyboardEvent, currentIndex: number): void;
+    /**
+     * Finds the next focusable (non-disabled) option index in the given direction.
+     * Wraps around to the beginning/end of the list.
+     */
+    private findNextFocusableIndex;
+    /**
+     * Finds the first focusable (non-disabled) option index.
+     */
+    private findFirstFocusableIndex;
+    /**
+     * Finds the last focusable (non-disabled) option index.
+     */
+    private findLastFocusableIndex;
+    /**
+     * Focuses the segment button at the given index.
+     */
+    private focusSegmentAt;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSegmentedControl<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComSegmentedControl<any>, "com-segmented-control", ["comSegmentedControl"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["customTemplate"], never, true, never>;
+}
+
+export { ComSegmentDef, ComSegmentedControl, SEGMENT_DISABLED_CLASSES, segmentedControlContainerVariants, segmentedControlSegmentVariants };
+export type { SegmentOption, SegmentTemplateContext, SegmentedControlColor, SegmentedControlContainerVariants, SegmentedControlSegmentVariants, SegmentedControlSize, SegmentedControlVariant };

package/types/ngx-com-components-spinner.d.ts

@@ -0,0 +1,120 @@
+import * as i0 from '@angular/core';
+import { InputSignal, Signal } from '@angular/core';
+
+/** Spinner size variants. */
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Spinner color variants. */
+type SpinnerColor = 'current' | 'primary' | 'accent' | 'warn' | 'success' | 'muted';
+/** Label position relative to spinner. */
+type SpinnerLabelPosition = 'right' | 'bottom';
+/**
+ * CVA variants for the spinning circle element.
+ *
+ * Creates a circular track with a faded ring and a colored arc that rotates.
+ * Uses `border` for the track and `border-t-*` for the spinning arc.
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted-foreground`
+ */
+declare const spinnerVariants: (props?: {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+}) => string;
+/**
+ * CVA variants for the spinner container layout.
+ *
+ * Controls flex direction and gap based on label position.
+ * Only applies when a visible label is present.
+ *
+ * @tokens none (layout only)
+ */
+declare const spinnerContainerVariants: (props?: {
+    labelPosition?: SpinnerLabelPosition;
+}) => string;
+/** Label font size classes mapped to spinner size. */
+declare const SPINNER_LABEL_SIZES: Record<SpinnerSize, string>;
+
+/**
+ * A minimal, CSS-only loading indicator.
+ *
+ * Drop-in anywhere: inside buttons, next to inline text, centered in cards,
+ * or as a page-level overlay. The animation is fast (0.6s) for a snappy feel.
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted-foreground`
+ *
+ * @example Simplest usage (inherits parent text color)
+ * ```html
+ * <com-spinner />
+ * ```
+ *
+ * @example Inside a button (inline, inherits button text color)
+ * ```html
+ * <button class="btn-primary" [disabled]="saving">
+ *   @if (saving) {
+ *     <com-spinner size="xs" />
+ *   }
+ *   Save
+ * </button>
+ * ```
+ *
+ * @example With visible label
+ * ```html
+ * <com-spinner label="Loading results..." />
+ * ```
+ *
+ * @example Centered in a card
+ * ```html
+ * <div class="flex items-center justify-center p-8">
+ *   <com-spinner size="lg" color="primary" label="Loading..." labelPosition="bottom" />
+ * </div>
+ * ```
+ *
+ * @example Inline with text
+ * ```html
+ * <p class="text-muted-foreground">
+ *   <com-spinner size="xs" /> Checking availability...
+ * </p>
+ * ```
+ *
+ * @example Color variants
+ * ```html
+ * <com-spinner color="primary" />
+ * <com-spinner color="accent" />
+ * <com-spinner color="warn" />
+ * ```
+ *
+ * @example Large page-level
+ * ```html
+ * <com-spinner size="xl" color="primary" label="Preparing your dashboard..." labelPosition="bottom" />
+ * ```
+ */
+declare class ComSpinner {
+    /**
+     * Optional loading text (e.g., "Loading...", "Saving...").
+     * When omitted, "Loading" is rendered for screen readers only (sr-only).
+     * When provided, the label is visible next to or below the spinner.
+     */
+    readonly label: InputSignal<string | undefined>;
+    /**
+     * Position of the label relative to the spinner.
+     * Only relevant when a visible `label` is provided.
+     */
+    readonly labelPosition: InputSignal<SpinnerLabelPosition>;
+    /** Size of the spinner. */
+    readonly size: InputSignal<SpinnerSize>;
+    /**
+     * Color of the spinner.
+     * `current` inherits from `currentColor` to match surrounding text.
+     */
+    readonly color: InputSignal<SpinnerColor>;
+    /** @internal Computed classes for the spinning circle. */
+    protected readonly spinnerClasses: Signal<string>;
+    /** @internal Computed classes for the container/host. */
+    protected readonly containerClasses: Signal<string>;
+    /** @internal Computed label font size class. */
+    protected readonly labelSizeClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSpinner, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComSpinner, "com-spinner", ["comSpinner"], { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComSpinner, SPINNER_LABEL_SIZES, spinnerContainerVariants, spinnerVariants };
+export type { SpinnerColor, SpinnerLabelPosition, SpinnerSize };

package/types/ngx-com-components-tooltip.d.ts

@@ -0,0 +1,200 @@
+import * as i0 from '@angular/core';
+import { InputSignal, TemplateRef, InputSignalWithTransform, OutputEmitterRef } from '@angular/core';
+
+/**
+ * Position direction for tooltip placement relative to the trigger.
+ */
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Color variant for tooltip styling.
+ */
+type TooltipColor = 'default' | 'primary' | 'accent' | 'warn' | 'invert';
+/**
+ * Size variant for tooltip dimensions.
+ */
+type TooltipSize = 'sm' | 'md' | 'lg';
+/**
+ * Touch gesture handling mode.
+ * - 'auto': Long-press to show, tap elsewhere to hide
+ * - 'on': Same as auto
+ * - 'off': Touch does not trigger tooltip
+ */
+type TooltipTouchGestures = 'auto' | 'on' | 'off';
+/**
+ * Context provided to custom tooltip templates.
+ */
+interface TooltipTemplateContext {
+    /** The text content passed to comTooltip input. */
+    $implicit: string;
+    /** Function to programmatically close the tooltip from inside the template. */
+    hide: () => void;
+}
+/**
+ * Which side of the trigger the tooltip is positioned on.
+ * Used internally for arrow orientation.
+ */
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Tooltip directive — displays supplementary information on hover/focus.
+ *
+ * Applied as an attribute directive to any trigger element. The tooltip panel
+ * is rendered via CDK Overlay when triggered by mouse hover, keyboard focus,
+ * or programmatically.
+ *
+ * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border`
+ *
+ * @example Simple text tooltip
+ * ```html
+ * <button comTooltip="Save your changes">
+ *   <com-icon name="save" />
+ * </button>
+ * ```
+ *
+ * @example Positioned
+ * ```html
+ * <button comTooltip="Settings" comTooltipPosition="right">
+ *   <com-icon name="settings" />
+ * </button>
+ * ```
+ *
+ * @example Color variants
+ * ```html
+ * <com-icon name="alert-triangle" comTooltip="3 warnings found" comTooltipColor="warn" />
+ * ```
+ *
+ * @example Custom template
+ * ```html
+ * <button
+ *   comTooltip="Keyboard shortcuts"
+ *   [comTooltipTpl]="shortcutsTpl"
+ *   comTooltipSize="lg"
+ * >
+ *   <com-icon name="keyboard" />
+ * </button>
+ *
+ * <ng-template #shortcutsTpl let-hide="hide">
+ *   <div class="flex flex-col gap-1">
+ *     <span>Press Ctrl+S to save</span>
+ *     <button (click)="hide()">Got it</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ *
+ * @example Programmatic control
+ * ```html
+ * <input
+ *   #tooltipRef="comTooltip"
+ *   comTooltip="Invalid email"
+ *   comTooltipColor="warn"
+ *   [comTooltipDisabled]="true"
+ * />
+ * ```
+ *
+ * ```ts
+ * // Show tooltip on validation error
+ * if (emailInvalid) {
+ *   this.tooltipRef.show();
+ * }
+ * ```
+ */
+declare class ComTooltip {
+    private readonly overlay;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly renderer;
+    private readonly platformId;
+    private readonly document;
+    private overlayRef;
+    private panelInstance;
+    private showTimeoutId;
+    private hideTimeoutId;
+    private touchTimeoutId;
+    private readonly tooltipId;
+    /** Current active side (updated from position changes). */
+    private readonly activeSide;
+    /** Whether the tooltip is currently visible. */
+    private readonly isVisible;
+    /** Simple text content for the tooltip. Also serves as the directive selector. */
+    readonly comTooltip: InputSignal<string>;
+    /** Custom template for rich tooltip content. Takes precedence over text when provided. */
+    readonly comTooltipTpl: InputSignal<TemplateRef<TooltipTemplateContext> | null>;
+    /** Preferred position direction. Default: 'top'. */
+    readonly comTooltipPosition: InputSignal<TooltipPosition>;
+    /** Delay in ms before showing the tooltip. Default: 200. */
+    readonly comTooltipShowDelay: InputSignalWithTransform<number, unknown>;
+    /** Delay in ms before hiding the tooltip. Default: 100. */
+    readonly comTooltipHideDelay: InputSignalWithTransform<number, unknown>;
+    /** Disable the tooltip entirely. Default: false. */
+    readonly comTooltipDisabled: InputSignalWithTransform<boolean, unknown>;
+    /** Touch device handling. Default: 'auto'. */
+    readonly comTooltipTouchGestures: InputSignal<TooltipTouchGestures>;
+    /** Color variant. Default: 'default'. */
+    readonly comTooltipColor: InputSignal<TooltipColor>;
+    /** Size variant. Default: 'md'. */
+    readonly comTooltipSize: InputSignal<TooltipSize>;
+    /** Whether to show the arrow/caret. Default: true. */
+    readonly comTooltipHasArrow: InputSignalWithTransform<boolean, unknown>;
+    /** Emitted when the tooltip becomes visible (after delay + animation). */
+    readonly comTooltipShown: OutputEmitterRef<void>;
+    /** Emitted when the tooltip is fully hidden. */
+    readonly comTooltipHidden: OutputEmitterRef<void>;
+    constructor();
+    /** Programmatically show the tooltip (ignores disabled state for error validation use cases). */
+    show(): void;
+    /** Programmatically hide the tooltip. */
+    hide(): void;
+    protected onMouseEnter(): void;
+    protected onMouseLeave(): void;
+    protected onFocusIn(): void;
+    protected onFocusOut(): void;
+    protected onEscapeKey(): void;
+    protected onTouchStart(event: TouchEvent): void;
+    /** Called when mouse enters the tooltip panel. */
+    private onPanelMouseEnter;
+    /** Called when mouse leaves the tooltip panel. */
+    private onPanelMouseLeave;
+    private scheduleShow;
+    private scheduleHide;
+    private clearTimers;
+    private clearShowTimeout;
+    private clearHideTimeout;
+    private clearTouchTimeout;
+    private createOverlay;
+    private attachPanel;
+    private detachPanel;
+    private handleDetachment;
+    private disposeOverlay;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTooltip, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComTooltip, "[comTooltip]", ["comTooltip"], { "comTooltip": { "alias": "comTooltip"; "required": true; "isSignal": true; }; "comTooltipTpl": { "alias": "comTooltipTpl"; "required": false; "isSignal": true; }; "comTooltipPosition": { "alias": "comTooltipPosition"; "required": false; "isSignal": true; }; "comTooltipShowDelay": { "alias": "comTooltipShowDelay"; "required": false; "isSignal": true; }; "comTooltipHideDelay": { "alias": "comTooltipHideDelay"; "required": false; "isSignal": true; }; "comTooltipDisabled": { "alias": "comTooltipDisabled"; "required": false; "isSignal": true; }; "comTooltipTouchGestures": { "alias": "comTooltipTouchGestures"; "required": false; "isSignal": true; }; "comTooltipColor": { "alias": "comTooltipColor"; "required": false; "isSignal": true; }; "comTooltipSize": { "alias": "comTooltipSize"; "required": false; "isSignal": true; }; "comTooltipHasArrow": { "alias": "comTooltipHasArrow"; "required": false; "isSignal": true; }; }, { "comTooltipShown": "comTooltipShown"; "comTooltipHidden": "comTooltipHidden"; }, never, never, true, never>;
+}
+
+/**
+ * CVA variants for the tooltip panel wrapper.
+ *
+ * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border`
+ */
+declare const tooltipPanelVariants: (props?: {
+    color?: TooltipColor;
+    size?: TooltipSize;
+}) => string;
+/**
+ * CVA variants for the tooltip arrow element.
+ * The arrow points toward the trigger element.
+ *
+ * @tokens `--color-tooltip`, `--color-primary`, `--color-accent`, `--color-warn`,
+ *         `--color-popover`, `--color-border`
+ */
+declare const tooltipArrowVariants: (props?: {
+    color?: TooltipColor;
+    side?: TooltipSide;
+}) => string;
+
+export { ComTooltip, tooltipArrowVariants, tooltipPanelVariants };
+export type { TooltipColor, TooltipPosition, TooltipSize, TooltipTemplateContext, TooltipTouchGestures };