@bsginstitute/bsg-integra 0.0.4 → 0.0.6

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ElementRef, AfterContentInit, ChangeDetectorRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { OnInit, ElementRef, AfterContentInit, ChangeDetectorRef, AfterViewInit, OnDestroy, TemplateRef, EventEmitter } from '@angular/core';
 import { VariantProps } from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@@ -1098,7 +1098,7 @@ declare class RadioComponent {
     readonly innerClasses: _angular_core.Signal<string>;
     readonly outerSize: _angular_core.Signal<20 | 16>;
     readonly innerSize: _angular_core.Signal<14 | 10>;
-    readonly focusRingSize: _angular_core.Signal<22 | 26>;
+    readonly focusRingSize: _angular_core.Signal<26 | 22>;
     readonly outerCircleClasses: _angular_core.Signal<"stroke-muted-foreground fill-muted-foreground" | "stroke-primary/70 fill-none" | "stroke-primary fill-none" | "stroke-muted-foreground fill-none">;
     handleClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
@@ -2219,6 +2219,757 @@ declare class SwitchComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "bsg-switch", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
 }
 
+/**
+ * Tabs Root Component
+ *
+ * The root container for a set of tabs. Manages the active tab state.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tabs [defaultValue]="0" (valueChange)="onTabChange($event)">
+ *   <bsg-tabs-list>
+ *     <bsg-tabs-trigger [value]="0">Tab 1</bsg-tabs-trigger>
+ *     <bsg-tabs-trigger [value]="1">Tab 2</bsg-tabs-trigger>
+ *   </bsg-tabs-list>
+ *   <bsg-tabs-content [value]="0">Content 1</bsg-tabs-content>
+ *   <bsg-tabs-content [value]="1">Content 2</bsg-tabs-content>
+ * </bsg-tabs>
+ * ```
+ */
+declare class TabsComponent {
+    /** Default active tab value */
+    readonly defaultValue: _angular_core.InputSignal<string | number>;
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    /** Controlled value (if you want to control the tab from outside) */
+    readonly value: _angular_core.InputSignal<string | number | null>;
+    /** Event emitted when tab changes */
+    readonly valueChange: _angular_core.OutputEmitterRef<string | number>;
+    private readonly _internalValue;
+    readonly activeValue: _angular_core.Signal<string | number>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    /**
+     * Set the active tab value
+     */
+    setValue(value: number | string): void;
+    /**
+     * Get the current active tab value
+     */
+    getValue(): number | string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "bsg-tabs", never, { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
+}
+
+type TabSize = 'sm' | 'md' | 'lg';
+type TabVariant = 'text' | 'icon-text';
+type TabLayout = 'default' | 'carousel';
+type TabColor = 'default' | 'info' | 'success' | 'warning' | 'destructive';
+/**
+ * Tab Navigation container variants
+ *
+ * Controls the overall tab navigation container layout
+ */
+declare const tabNavigationVariants: (props?: ({
+    layout?: "default" | "carousel" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Tab Item variants
+ *
+ * Controls the individual tab button styles with size, variant, and color combinations
+ */
+declare const tabItemVariants: (props?: ({
+    variant?: "text" | "icon-text" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Tab Icon Circle variants
+ *
+ * Controls the circular icon container in icon-text variant
+ */
+declare const tabIconCircleVariants: (props?: ({
+    color?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Tab Icon Content variants
+ *
+ * Controls the icon + label container layout
+ */
+declare const tabIconContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Tab Label variants
+ *
+ * Controls the label text in icon-text variant
+ */
+declare const tabLabelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Tab Text Content variants
+ *
+ * Controls the text content in text variant
+ */
+declare const tabTextContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+/**
+ * Tabs List Component
+ *
+ * Container for tab triggers. This is where you place your bsg-tabs-trigger components.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tabs-list>
+ *   <bsg-tabs-trigger [value]="0">Tab 1</bsg-tabs-trigger>
+ *   <bsg-tabs-trigger [value]="1">Tab 2</bsg-tabs-trigger>
+ * </bsg-tabs-list>
+ * ```
+ *
+ * Carousel layout with navigation buttons:
+ * ```html
+ * <bsg-tabs-list layout="carousel">
+ *   <bsg-tabs-trigger [value]="0">Tab 1</bsg-tabs-trigger>
+ *   <bsg-tabs-trigger [value]="1">Tab 2</bsg-tabs-trigger>
+ *   <!-- Many more tabs... -->
+ * </bsg-tabs-list>
+ * ```
+ */
+declare class TabsListComponent implements AfterViewInit, OnDestroy {
+    /** Layout mode: default (wraps) or carousel (scrolls horizontally) */
+    readonly layout: _angular_core.InputSignal<TabLayout>;
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly scrollContainer: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
+    readonly canScrollRight: _angular_core.WritableSignal<boolean>;
+    private resizeObserver;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private setupResizeObserver;
+    readonly isCarousel: _angular_core.Signal<boolean>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    scrollLeft(): void;
+    scrollRight(): void;
+    onScroll(): void;
+    private updateScrollButtons;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsListComponent, "bsg-tabs-list", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type TabsTriggerVariantsProps = VariantProps<typeof tabItemVariants>;
+/**
+ * Tabs Trigger Component
+ *
+ * A clickable tab that activates its associated content panel.
+ *
+ * Usage for text variant:
+ * ```html
+ * <bsg-tabs-trigger [value]="0">
+ *   Tab Label
+ * </bsg-tabs-trigger>
+ * ```
+ *
+ * Usage for icon-text variant:
+ * ```html
+ * <bsg-tabs-trigger [value]="0" variant="icon-text">
+ *   <svg slot="icon">...</svg>
+ *   <span slot="label">Tab Label</span>
+ * </bsg-tabs-trigger>
+ * ```
+ */
+declare class TabsTriggerComponent {
+    private readonly tabs;
+    /** The value that identifies this tab */
+    readonly value: _angular_core.InputSignal<string | number>;
+    /** Tab visual variant */
+    readonly variant: _angular_core.InputSignal<TabVariant>;
+    /** Tab size variant */
+    readonly size: _angular_core.InputSignal<TabSize>;
+    /** Tab color scheme */
+    readonly color: _angular_core.InputSignal<TabColor>;
+    /** Whether the tab is disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly isActive: _angular_core.Signal<boolean>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    readonly iconContentClasses: _angular_core.Signal<string>;
+    readonly iconCircleClasses: _angular_core.Signal<string>;
+    readonly labelClasses: _angular_core.Signal<string>;
+    readonly textContentClasses: _angular_core.Signal<string>;
+    handleClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsTriggerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsTriggerComponent, "bsg-tabs-trigger", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["[slot='icon']", "[slot='label']", "*"], true, never>;
+}
+
+/**
+ * Tabs Content Component
+ *
+ * A container for tab panel content. Only displays when its value matches the active tab.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tabs-content [value]="0">
+ *   <p>Content for tab 0</p>
+ * </bsg-tabs-content>
+ * ```
+ */
+declare class TabsContentComponent {
+    private readonly tabs;
+    /** The value that identifies which tab this content belongs to */
+    readonly value: _angular_core.InputSignal<string | number>;
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly isActive: _angular_core.Signal<boolean>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsContentComponent, "bsg-tabs-content", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Directive to mark content that should be projected into a specific tab panel
+ *
+ * Usage:
+ * ```html
+ * <bsg-tab-navigation [tabs]="tabs">
+ *   <ng-template bsgTabContent>Content for tab 0</ng-template>
+ *   <ng-template bsgTabContent>Content for tab 1</ng-template>
+ * </bsg-tab-navigation>
+ * ```
+ */
+declare class TabContentDirective {
+    template: TemplateRef<unknown>;
+    constructor(template: TemplateRef<unknown>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabContentDirective, "[bsgTabContent]", never, {}, {}, never, never, true, never>;
+}
+interface TabItem {
+    label: string;
+    count?: number;
+    icon?: boolean;
+}
+/**
+ * Tab Navigation Component
+ *
+ * A tabbed navigation component with support for text and icon-text variants.
+ * Follows the shadcn/ui tabs pattern with separated TabsList and TabsContent.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tab-navigation
+ *   [tabs]="tabs"
+ *   [variant]="'text'"
+ *   [size]="'md'"
+ *   [color]="'default'"
+ *   [activeIndex]="0"
+ *   (tabChange)="onTabChange($event)"
+ * >
+ *   <ng-template bsgTabContent>Content for first tab</ng-template>
+ *   <ng-template bsgTabContent>Content for second tab</ng-template>
+ * </bsg-tab-navigation>
+ * ```
+ */
+declare class TabNavigationComponent {
+    /** Tab size variant */
+    readonly size: _angular_core.InputSignal<TabSize>;
+    /** Tab visual variant */
+    readonly variant: _angular_core.InputSignal<TabVariant>;
+    /** Tab color scheme */
+    readonly color: _angular_core.InputSignal<TabColor>;
+    /** Whether all tabs are disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** List of tab items */
+    readonly tabs: _angular_core.InputSignal<TabItem[]>;
+    /** Active tab index */
+    readonly activeIndex: _angular_core.InputSignal<number>;
+    /** Additional CSS classes for container */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    /** Tab change event */
+    readonly tabChange: _angular_core.OutputEmitterRef<number>;
+    /** Content children (tab content templates) */
+    readonly tabContents: _angular_core.Signal<readonly TabContentDirective[]>;
+    private readonly _activeIndex;
+    readonly internalActiveIndex: _angular_core.Signal<number>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly tabsListClasses: _angular_core.Signal<string>;
+    readonly tabContentClasses: _angular_core.Signal<string>;
+    readonly iconContentClasses: _angular_core.Signal<string>;
+    readonly labelClasses: _angular_core.Signal<string>;
+    readonly textContentClasses: _angular_core.Signal<string>;
+    getTabClasses(index: number): string;
+    getIconCircleClasses(): string;
+    getIconStroke(_index: number): string;
+    handleTabClick(index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabNavigationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabNavigationComponent, "bsg-tab-navigation", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, { "tabChange": "tabChange"; }, ["tabContents"], never, true, never>;
+}
+
+/**
+ * Table Component
+ *
+ * A responsive table wrapper with semantic HTML table element.
+ * Follows shadcn/ui table structure.
+ *
+ * Usage:
+ * ```html
+ * <bsg-table>
+ *   <bsg-table-caption>A list of your recent invoices.</bsg-table-caption>
+ *   <bsg-table-header>
+ *     <bsg-table-row>
+ *       <bsg-table-head>Invoice</bsg-table-head>
+ *       <bsg-table-head>Status</bsg-table-head>
+ *     </bsg-table-row>
+ *   </bsg-table-header>
+ *   <bsg-table-body>
+ *     <bsg-table-row>
+ *       <bsg-table-cell>INV001</bsg-table-cell>
+ *       <bsg-table-cell>Paid</bsg-table-cell>
+ *     </bsg-table-row>
+ *   </bsg-table-body>
+ * </bsg-table>
+ * ```
+ */
+declare class TableComponent {
+    /** Additional CSS classes for wrapper */
+    readonly wrapperClassName: _angular_core.InputSignal<string | undefined>;
+    /** Additional CSS classes for table */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly wrapperClasses: _angular_core.Signal<string>;
+    readonly tableClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "bsg-table", never, { "wrapperClassName": { "alias": "wrapperClassName"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Table Header Component
+ *
+ * Wraps table header rows (thead element).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-header>
+ *   <bsg-table-row>
+ *     <bsg-table-head>Column 1</bsg-table-head>
+ *     <bsg-table-head>Column 2</bsg-table-head>
+ *   </bsg-table-row>
+ * </bsg-table-header>
+ * ```
+ */
+declare class TableHeaderComponent {
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableHeaderComponent, "bsg-table-header", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Table Body Component
+ *
+ * Wraps table body rows (tbody element).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-body>
+ *   <bsg-table-row>
+ *     <bsg-table-cell>Cell 1</bsg-table-cell>
+ *     <bsg-table-cell>Cell 2</bsg-table-cell>
+ *   </bsg-table-row>
+ * </bsg-table-body>
+ * ```
+ */
+declare class TableBodyComponent {
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableBodyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableBodyComponent, "bsg-table-body", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Table Footer Component
+ *
+ * Wraps table footer rows (tfoot element).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-footer>
+ *   <bsg-table-row>
+ *     <bsg-table-cell colSpan="3">Total</bsg-table-cell>
+ *     <bsg-table-cell>$2,500.00</bsg-table-cell>
+ *   </bsg-table-row>
+ * </bsg-table-footer>
+ * ```
+ */
+declare class TableFooterComponent {
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableFooterComponent, "bsg-table-footer", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Table Row Component
+ *
+ * A table row element (tr).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-row>
+ *   <bsg-table-cell>Cell 1</bsg-table-cell>
+ *   <bsg-table-cell>Cell 2</bsg-table-cell>
+ * </bsg-table-row>
+ * ```
+ */
+declare class TableRowComponent {
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    /** Whether the row is selected */
+    readonly selected: _angular_core.InputSignal<boolean>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableRowComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableRowComponent, "bsg-table-row", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Table Head Component
+ *
+ * A table header cell element (th).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-head>Column Name</bsg-table-head>
+ * <bsg-table-head className="w-[100px]">ID</bsg-table-head>
+ * <bsg-table-head className="text-right">Amount</bsg-table-head>
+ * ```
+ */
+declare class TableHeadComponent {
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    /** Column span */
+    readonly colSpan: _angular_core.InputSignal<number | undefined>;
+    /** Scope attribute for accessibility */
+    readonly scope: _angular_core.InputSignal<"col" | "colgroup" | "row" | "rowgroup">;
+    readonly computedClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableHeadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableHeadComponent, "bsg-table-head", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "scope": { "alias": "scope"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Table Cell Component
+ *
+ * A table data cell element (td).
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-cell>Cell content</bsg-table-cell>
+ * <bsg-table-cell className="font-medium">Bold content</bsg-table-cell>
+ * <bsg-table-cell className="text-right">$250.00</bsg-table-cell>
+ * <bsg-table-cell [colSpan]="3">Spanning cell</bsg-table-cell>
+ * ```
+ */
+declare class TableCellComponent {
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    /** Column span */
+    readonly colSpan: _angular_core.InputSignal<number | undefined>;
+    readonly computedClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableCellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableCellComponent, "bsg-table-cell", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Table Card Component
+ *
+ * A wrapper that provides a polished card container for tables,
+ * using content projection for header and footer sections.
+ *
+ * UX Considerations:
+ * - Clear visual hierarchy with prominent header
+ * - Consistent spacing and alignment
+ * - Subtle shadows for depth without distraction
+ * - Flexible composition with header/footer slots
+ *
+ * Usage:
+ * ```html
+ * <bsg-table-card>
+ *   <bsg-tableCard-header title="My Table Title">
+ *     <button slot="action">New Item</button>
+ *   </bsg-tableCard-header>
+ *
+ *   <bsg-table>
+ *     ...
+ *   </bsg-table>
+ *
+ *   <bsg-tableCard-footer>
+ *     <span>Showing 1-10 of 100</span>
+ *   </bsg-tableCard-footer>
+ * </bsg-table-card>
+ * ```
+ */
+declare class TableCardComponent {
+    /** Additional CSS classes for the card container */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly cardClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableCardComponent, "bsg-table-card", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["bsg-tableCard-header", "*", "bsg-tableCard-footer"], true, never>;
+}
+
+type TableCardHeaderColor = 'default' | 'info' | 'success' | 'warning' | 'destructive';
+/**
+ * Table Card Header Component
+ *
+ * Header section for table cards with content projection for icon and title.
+ *
+ * Usage:
+ * ```html
+ * <!-- Simple title -->
+ * <bsg-tableCard-header>
+ *   <span>Titulo de la Tabla</span>
+ * </bsg-tableCard-header>
+ *
+ * <!-- With icon and title -->
+ * <bsg-tableCard-header color="info">
+ *   <svg class="size-5">...</svg>
+ *   <span>Titulo de la Tabla</span>
+ * </bsg-tableCard-header>
+ *
+ * <!-- With icon, title and action -->
+ * <bsg-tableCard-header color="success">
+ *   <svg class="size-5">...</svg>
+ *   <span>Titulo de la Tabla</span>
+ *   <button slot="action">Nueva Accion</button>
+ * </bsg-tableCard-header>
+ * ```
+ */
+declare class TableCardHeaderComponent {
+    /** Semantic color variant */
+    readonly color: _angular_core.InputSignal<TableCardHeaderColor>;
+    /** Additional CSS classes for header */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly headerClasses: _angular_core.Signal<string>;
+    readonly contentClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableCardHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableCardHeaderComponent, "bsg-tableCard-header", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[slot='action']"], true, never>;
+}
+
+/**
+ * Table Card Footer Component
+ *
+ * Footer section for table cards, typically used for pagination,
+ * summary info, or action buttons.
+ *
+ * Usage:
+ * ```html
+ * <bsg-tableCard-footer>
+ *   <span>Showing 1-10 of 100</span>
+ *   <div>
+ *     <button>Previous</button>
+ *     <button>Next</button>
+ *   </div>
+ * </bsg-tableCard-footer>
+ * ```
+ */
+declare class TableCardFooterComponent {
+    /** Additional CSS classes */
+    readonly className: _angular_core.InputSignal<string | undefined>;
+    readonly footerClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableCardFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableCardFooterComponent, "bsg-tableCard-footer", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type TableVariant = 'table-actions' | 'table-basic' | 'table-tabs' | 'list-content';
+interface TableColumn {
+    key: string;
+    label: string;
+    width?: string;
+}
+interface TableRow {
+    [key: string]: any;
+}
+interface ListItem {
+    text: string;
+}
+interface TabConfig extends TabItem {
+    tableData?: {
+        columns: TableColumn[];
+        rows: TableRow[];
+    };
+}
+interface TableAction {
+    label: string;
+    variant?: 'approve' | 'reject' | 'view';
+    onClick?: () => void;
+}
+/**
+ * @deprecated Use the new composable table components (TableComponent, TableHeader, TableBody, etc.) instead.
+ * This component is kept for backwards compatibility.
+ */
+declare class TableContainerComponent {
+    /** Container title */
+    title: string;
+    /** Display variant */
+    variant: TableVariant;
+    /** Header action button (e.g., "Nuevo mensaje") */
+    headerAction?: {
+        label: string;
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+    };
+    isCollapsible: boolean;
+    isExpanded: boolean;
+    disableExpansion: boolean;
+    tableColumns: TableColumn[];
+    tableRows: TableRow[];
+    tablePagination?: {
+        currentPage: number;
+        totalPages: number;
+        pageSize: number;
+        pageSizeOptions: number[];
+        totalItems: number;
+        rangeLabel: string;
+    };
+    showActionsColumn: boolean;
+    actionsColumnLabel: string;
+    actionsColumnWidth: string;
+    listItems: ListItem[];
+    tabs: TabConfig[];
+    activeTabIndex: number;
+    tabsPagination: any[];
+    headerActionClick: EventEmitter<void>;
+    collapseToggle: EventEmitter<boolean>;
+    tabChange: EventEmitter<number>;
+    tablePageChange: EventEmitter<number>;
+    tablePageSizeChange: EventEmitter<number>;
+    tableRefresh: EventEmitter<void>;
+    tabPageChange: EventEmitter<{
+        tabIndex: number;
+        page: number;
+    }>;
+    tabPageSizeChange: EventEmitter<{
+        tabIndex: number;
+        pageSize: number;
+    }>;
+    tabRefresh: EventEmitter<number>;
+    rowAction: EventEmitter<{
+        rowIndex: number;
+        action: TableAction;
+    }>;
+    get containerClasses(): string[];
+    toggleCollapse(): void;
+    onHeaderAction(): void;
+    onTabChange(index: number): void;
+    onTablePageChange(page: number): void;
+    onTablePageSizeChange(pageSize: number): void;
+    onTableRefresh(): void;
+    onTabPageChange(tabIndex: number, page: number): void;
+    onTabPageSizeChange(tabIndex: number, pageSize: number): void;
+    onTabRefresh(tabIndex: number): void;
+    onRowAction(rowIndex: number, action: TableAction): void;
+    getActionVariant(actionVariant?: string): ButtonVariant;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableContainerComponent, "bsg-table-container", never, { "title": { "alias": "title"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "headerAction": { "alias": "headerAction"; "required": false; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "disableExpansion": { "alias": "disableExpansion"; "required": false; }; "tableColumns": { "alias": "tableColumns"; "required": false; }; "tableRows": { "alias": "tableRows"; "required": false; }; "tablePagination": { "alias": "tablePagination"; "required": false; }; "showActionsColumn": { "alias": "showActionsColumn"; "required": false; }; "actionsColumnLabel": { "alias": "actionsColumnLabel"; "required": false; }; "actionsColumnWidth": { "alias": "actionsColumnWidth"; "required": false; }; "listItems": { "alias": "listItems"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; "activeTabIndex": { "alias": "activeTabIndex"; "required": false; }; "tabsPagination": { "alias": "tabsPagination"; "required": false; }; }, { "headerActionClick": "headerActionClick"; "collapseToggle": "collapseToggle"; "tabChange": "tabChange"; "tablePageChange": "tablePageChange"; "tablePageSizeChange": "tablePageSizeChange"; "tableRefresh": "tableRefresh"; "tabPageChange": "tabPageChange"; "tabPageSizeChange": "tabPageSizeChange"; "tabRefresh": "tabRefresh"; "rowAction": "rowAction"; }, never, never, true, never>;
+}
+
+/**
+ * Table wrapper variants
+ *
+ * Container with subtle shadow for depth and rounded corners
+ * for a modern, polished look
+ */
+declare const tableWrapperVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table variants
+ *
+ * Clean table with proper spacing and typography
+ */
+declare const tableVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Header variants
+ *
+ * Distinct header with subtle background gradient
+ * and clear visual separation from body
+ */
+declare const tableHeaderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Body variants
+ *
+ * Clean body with alternating row colors option
+ */
+declare const tableBodyVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Footer variants
+ *
+ * Distinct footer for totals and summaries
+ */
+declare const tableFooterVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Row variants
+ *
+ * Interactive rows with clear hover and selected states
+ * Following UX best practices for discoverability
+ */
+declare const tableRowVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Head variants
+ *
+ * Clear, readable headers with proper hierarchy
+ * Using semibold weight and blue accent for brand consistency
+ */
+declare const tableHeadVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Cell variants
+ *
+ * Readable cells with proper spacing and alignment
+ */
+declare const tableCellVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Card Header variants
+ *
+ * Prominent header with semantic colors and clear hierarchy
+ * Following UX principles for visual weight distribution
+ */
+declare const tableCardHeaderVariants: (props?: ({
+    color?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Table Card Footer variants
+ *
+ * Clean footer area for pagination and actions
+ */
+declare const tableCardFooterVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Pagination wrapper variants
+ *
+ * Clean pagination area with proper spacing
+ */
+declare const tablePaginationVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Empty State variants
+ *
+ * For when table has no data
+ */
+declare const tableEmptyStateVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Table Loading State variants
+ *
+ * For skeleton loading states
+ */
+declare const tableLoadingVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Striped table modifier
+ *
+ * Apply to tbody for alternating row colors
+ */
+declare const tableStripedVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Compact table modifier
+ *
+ * Reduced padding for dense data
+ */
+declare const tableCompactVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
 declare const textareaVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
     resize?: "horizontal" | "vertical" | "none" | "both" | null | undefined;
@@ -2596,5 +3347,5 @@ declare class TooltipComponent implements AfterContentInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "bsg-tooltip", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "triggerClassName": { "alias": "triggerClassName"; "required": false; "isSignal": true; }; "contentClassName": { "alias": "contentClassName"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { AccordionComponent, AccordionContentComponent, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerDirective, ComboboxComponent, DialogComponent, InputComponent, LabelComponent, RadioComponent, RadioGroupComponent, SelectComponent, SidebarComponent, SidebarContentComponent, SidebarFooterComponent, SidebarGroupActionComponent, SidebarGroupComponent, SidebarGroupContentComponent, SidebarGroupLabelComponent, SidebarHeaderComponent, SidebarInsetComponent, SidebarMenuActionComponent, SidebarMenuBadgeComponent, SidebarMenuButtonComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuSubButtonComponent, SidebarMenuSubComponent, SidebarMenuSubItemComponent, SidebarProviderComponent, SidebarRailComponent, SidebarSeparatorComponent, SidebarService, SidebarTriggerComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TextareaComponent, TimePickerComponent, ToastComponent, TooltipComponent, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants, alertCloseVariants, alertContentVariants, alertIconVariants, alertVariants, avatarIconVariants, avatarImgVariants, avatarInitialsVariants, avatarVariants, badgeIconVariants, badgeVariants, buttonIconOnlyVariants, buttonIconVariants, buttonLabelVariants, buttonSpinnerVariants, buttonVariants, cardActionIconVariants, cardCurrencyContentVariants, cardCurrencyIconVariants, cardCurrencyLabelVariants, cardCurrencyTextVariants, cardHeaderRowVariants, cardHeaderVariants, cardHelperDescriptionVariants, cardHelperRowVariants, cardHelperVariants, cardInfoIconVariants, cardInfoLabelVariants, cardInfoTextVariants, cardMetricTitleVariants, cardMetricValueVariants, cardSlotBodyVariants, cardSlotFooterVariants, cardSlotHeaderVariants, cardValueVariants, cardVariants, carouselArrowVariants, carouselChevronVariants, carouselContainerVariants, carouselIndicatorVariants, carouselIndicatorsVariants, carouselRootVariants, carouselTrackVariants, carouselViewportVariants, checkboxVariants, comboboxDropdownVariants, comboboxEmptyStateVariants, comboboxErrorMessageVariants, comboboxIconVariants, comboboxOptionVariants, comboboxOptionsContainerVariants, comboboxSearchInputVariants, comboboxSearchWrapperVariants, comboboxTriggerVariants, comboboxValueVariants, comboboxWrapperVariants, dialogBodyVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, inputVariants, labelVariants, radioFocusRingVariants, radioGroupVariants, radioInnerVariants, radioLabelVariants, radioOptionVariants, radioOuterVariants, radioWrapperVariants, selectDropdownVariants, selectErrorVariants, selectIconVariants, selectOptionVariants, selectTriggerVariants, selectValueVariants, selectWrapperVariants, sidebarChevronVariants, sidebarContentVariants, sidebarFooterVariants, sidebarGroupActionVariants, sidebarGroupContentVariants, sidebarGroupLabelVariants, sidebarGroupVariants, sidebarHeaderVariants, sidebarInsetVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuItemVariants, sidebarMenuSkeletonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubItemVariants, sidebarMenuSubVariants, sidebarMenuVariants, sidebarProviderVariants, sidebarRailVariants, sidebarSeparatorVariants, sidebarTriggerVariants, sidebarVariants, sidebarWrapperVariants, skeletonVariants, spinnerVariants, switchRootVariants, switchThumbVariants, textareaVariants, timepickerActionButtonVariants, timepickerActionsVariants, timepickerColumnHeaderVariants, timepickerColumnVariants, timepickerDropdownVariants, timepickerErrorMessageVariants, timepickerFieldVariants, timepickerIconButtonVariants, timepickerInputVariants, timepickerLabelVariants, timepickerListVariants, timepickerOptionVariants, timepickerSelectionAreaVariants, timepickerSeparatorVariants, timepickerWrapperVariants, toastAccentVariants, toastCloseVariants, toastContentVariants, toastIconVariants, toastVariants, tooltipArrowVariants, tooltipContentVariants, tooltipTriggerVariants };
-export type { AccordionType, AccordionVariant, AccordionVariantsProps, AlertVariant, AlertVariantsProps, AvatarSize, AvatarType, AvatarVariantsProps, BadgeIconVariantsProps, BadgeLayout, BadgeSize, BadgeVariant, BadgeVariantsProps, ButtonShape, ButtonSize, ButtonVariant, ButtonVariantsProps, CardContentVariant, CardVariant, CardVariantsProps, CarouselArrowVariantsProps, CarouselIndicatorVariantsProps, CheckboxSize, ComboboxOption, ComboboxSize, ComboboxState, ComboboxTriggerVariantsProps, ComboboxWrapperVariantsProps, DialogBodyVariantsProps, DialogContentVariantsProps, DialogFooterVariantsProps, DialogHeaderTone, DialogHeaderVariantsProps, DialogSize, InputSize, RadioFocusRingVariantsProps, RadioGroupOption, RadioGroupOrientation, RadioGroupVariantsProps, RadioInnerVariantsProps, RadioLabelVariantsProps, RadioOptionVariantsProps, RadioOuterVariantsProps, RadioSize, RadioState, RadioWrapperVariantsProps, SelectOption, SelectSize, SelectState, SelectTriggerVariantsProps, SidebarCollapsible, SidebarMenuActionVariantsProps, SidebarMenuButtonVariantsProps, SidebarMenuSubButtonVariantsProps, SidebarSide, SidebarState, SidebarVariant, SkeletonType, SkeletonVariantsProps, SpinnerSize, SpinnerVariant, SpinnerVariantsProps, SwitchSize, SwitchVariantsProps, TextareaResize, TextareaSize, TimePickerSize, TimePickerState, TimePickerWrapperVariantsProps, ToastVariant, ToastVariantsProps, TooltipContentVariantsProps, TooltipPlacement };
+export { AccordionComponent, AccordionContentComponent, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CarouselComponent, CarouselItemComponent, CheckboxComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerDirective, ComboboxComponent, DialogComponent, InputComponent, LabelComponent, RadioComponent, RadioGroupComponent, SelectComponent, SidebarComponent, SidebarContentComponent, SidebarFooterComponent, SidebarGroupActionComponent, SidebarGroupComponent, SidebarGroupContentComponent, SidebarGroupLabelComponent, SidebarHeaderComponent, SidebarInsetComponent, SidebarMenuActionComponent, SidebarMenuBadgeComponent, SidebarMenuButtonComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuSubButtonComponent, SidebarMenuSubComponent, SidebarMenuSubItemComponent, SidebarProviderComponent, SidebarRailComponent, SidebarSeparatorComponent, SidebarService, SidebarTriggerComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabNavigationComponent, TableBodyComponent, TableCardComponent, TableCardFooterComponent, TableCardHeaderComponent, TableCellComponent, TableComponent, TableContainerComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TextareaComponent, TimePickerComponent, ToastComponent, TooltipComponent, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants, alertCloseVariants, alertContentVariants, alertIconVariants, alertVariants, avatarIconVariants, avatarImgVariants, avatarInitialsVariants, avatarVariants, badgeIconVariants, badgeVariants, buttonIconOnlyVariants, buttonIconVariants, buttonLabelVariants, buttonSpinnerVariants, buttonVariants, cardActionIconVariants, cardCurrencyContentVariants, cardCurrencyIconVariants, cardCurrencyLabelVariants, cardCurrencyTextVariants, cardHeaderRowVariants, cardHeaderVariants, cardHelperDescriptionVariants, cardHelperRowVariants, cardHelperVariants, cardInfoIconVariants, cardInfoLabelVariants, cardInfoTextVariants, cardMetricTitleVariants, cardMetricValueVariants, cardSlotBodyVariants, cardSlotFooterVariants, cardSlotHeaderVariants, cardValueVariants, cardVariants, carouselArrowVariants, carouselChevronVariants, carouselContainerVariants, carouselIndicatorVariants, carouselIndicatorsVariants, carouselRootVariants, carouselTrackVariants, carouselViewportVariants, checkboxVariants, comboboxDropdownVariants, comboboxEmptyStateVariants, comboboxErrorMessageVariants, comboboxIconVariants, comboboxOptionVariants, comboboxOptionsContainerVariants, comboboxSearchInputVariants, comboboxSearchWrapperVariants, comboboxTriggerVariants, comboboxValueVariants, comboboxWrapperVariants, dialogBodyVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, inputVariants, labelVariants, radioFocusRingVariants, radioGroupVariants, radioInnerVariants, radioLabelVariants, radioOptionVariants, radioOuterVariants, radioWrapperVariants, selectDropdownVariants, selectErrorVariants, selectIconVariants, selectOptionVariants, selectTriggerVariants, selectValueVariants, selectWrapperVariants, sidebarChevronVariants, sidebarContentVariants, sidebarFooterVariants, sidebarGroupActionVariants, sidebarGroupContentVariants, sidebarGroupLabelVariants, sidebarGroupVariants, sidebarHeaderVariants, sidebarInsetVariants, sidebarMenuActionVariants, sidebarMenuBadgeVariants, sidebarMenuButtonVariants, sidebarMenuItemVariants, sidebarMenuSkeletonVariants, sidebarMenuSubButtonVariants, sidebarMenuSubItemVariants, sidebarMenuSubVariants, sidebarMenuVariants, sidebarProviderVariants, sidebarRailVariants, sidebarSeparatorVariants, sidebarTriggerVariants, sidebarVariants, sidebarWrapperVariants, skeletonVariants, spinnerVariants, switchRootVariants, switchThumbVariants, tabIconCircleVariants, tabIconContentVariants, tabItemVariants, tabLabelVariants, tabNavigationVariants, tabTextContentVariants, tableBodyVariants, tableCardFooterVariants, tableCardHeaderVariants, tableCellVariants, tableCompactVariants, tableEmptyStateVariants, tableFooterVariants, tableHeadVariants, tableHeaderVariants, tableLoadingVariants, tablePaginationVariants, tableRowVariants, tableStripedVariants, tableVariants, tableWrapperVariants, textareaVariants, timepickerActionButtonVariants, timepickerActionsVariants, timepickerColumnHeaderVariants, timepickerColumnVariants, timepickerDropdownVariants, timepickerErrorMessageVariants, timepickerFieldVariants, timepickerIconButtonVariants, timepickerInputVariants, timepickerLabelVariants, timepickerListVariants, timepickerOptionVariants, timepickerSelectionAreaVariants, timepickerSeparatorVariants, timepickerWrapperVariants, toastAccentVariants, toastCloseVariants, toastContentVariants, toastIconVariants, toastVariants, tooltipArrowVariants, tooltipContentVariants, tooltipTriggerVariants };
+export type { AccordionType, AccordionVariant, AccordionVariantsProps, AlertVariant, AlertVariantsProps, AvatarSize, AvatarType, AvatarVariantsProps, BadgeIconVariantsProps, BadgeLayout, BadgeSize, BadgeVariant, BadgeVariantsProps, ButtonShape, ButtonSize, ButtonVariant, ButtonVariantsProps, CardContentVariant, CardVariant, CardVariantsProps, CarouselArrowVariantsProps, CarouselIndicatorVariantsProps, CheckboxSize, ComboboxOption, ComboboxSize, ComboboxState, ComboboxTriggerVariantsProps, ComboboxWrapperVariantsProps, DialogBodyVariantsProps, DialogContentVariantsProps, DialogFooterVariantsProps, DialogHeaderTone, DialogHeaderVariantsProps, DialogSize, InputSize, ListItem, RadioFocusRingVariantsProps, RadioGroupOption, RadioGroupOrientation, RadioGroupVariantsProps, RadioInnerVariantsProps, RadioLabelVariantsProps, RadioOptionVariantsProps, RadioOuterVariantsProps, RadioSize, RadioState, RadioWrapperVariantsProps, SelectOption, SelectSize, SelectState, SelectTriggerVariantsProps, SidebarCollapsible, SidebarMenuActionVariantsProps, SidebarMenuButtonVariantsProps, SidebarMenuSubButtonVariantsProps, SidebarSide, SidebarState, SidebarVariant, SkeletonType, SkeletonVariantsProps, SpinnerSize, SpinnerVariant, SpinnerVariantsProps, SwitchSize, SwitchVariantsProps, TabColor, TabConfig, TabItem, TabLayout, TabSize, TabVariant, TableAction, TableCardHeaderColor, TableColumn, TableRow, TableVariant, TabsTriggerVariantsProps, TextareaResize, TextareaSize, TimePickerSize, TimePickerState, TimePickerWrapperVariantsProps, ToastVariant, ToastVariantsProps, TooltipContentVariantsProps, TooltipPlacement };