flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/core/Stepper/components/IconCircle.js

@@ -1,44 +0,0 @@
-import React__default, { useState, useEffect } from 'react';
-import { cn } from '../../../../utils/cn.js';
-import '../../../../node_modules/tslib/tslib.es6.js';
-import '../../../../icons/core/PlusIcon.js';
-import '../../../../icons/core/MinusIcon.js';
-import '../../../../icons/core/SearchIcon.js';
-import '../../../../icons/core/LockIcon.js';
-import '../../../../icons/core/DollarIcon.js';
-import { TickIcon } from '../../../../icons/core/TickIcon.js';
-
-/**
- * IconCircle component for displaying step status with consistent styling
- */
-var IconCircle = function (_a) {
-    var status = _a.status, stepNumber = _a.stepNumber, _b = _a.animate, animate = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
-    // Track the visual status with a delay
-    var _d = useState(status), visualStatus = _d[0], setVisualStatus = _d[1];
-    // Update the visual status with a delay when the actual status changes
-    useEffect(function () {
-        if (animate && (status === "current" || status === "active-complete")) {
-            // Delay updating to "current" or "active-complete" status by 0.5 seconds
-            var timer_1 = setTimeout(function () {
-                setVisualStatus(status);
-            }, 500);
-            return function () { return clearTimeout(timer_1); };
-        }
-        else {
-            // For non-animated or non-current statuses, update immediately
-            setVisualStatus(status);
-        }
-    }, [status, animate]);
-    // Common base styles for all states
-    var baseStyles = "relative z-10 flex size-8 items-center justify-center rounded-full transition-all duration-300";
-    // Styles specific to each status
-    var statusStyles = {
-        complete: "bg-success-base ring-2 ring-white",
-        current: "border border-primary-base bg-white shadow-xl shadow-primary/20 ring-4 ring-primary-base/20",
-        upcoming: "border border-neutral-300 bg-white text-text-secondary/70",
-        "active-complete": "bg-success-base ring-2 ring-white shadow-xl shadow-success/20 ring-4 ring-success-base/20"
-    };
-    return (React__default.createElement("div", { className: cn(baseStyles, statusStyles[visualStatus], className) }, visualStatus === "complete" || visualStatus === "active-complete" ? (React__default.createElement(TickIcon, { size: "sm", className: "text-white", "aria-hidden": "true", strokeWidth: 3 })) : (React__default.createElement("div", { className: "font-bold text-sm ".concat(visualStatus === "current" ? "text-primary-base" : "") }, stepNumber))));
-};
-
-export { IconCircle as default };

package/dist/components/core/Stepper/components/ProgressIndicator.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-interface ProgressIndicatorProps {
-    activeStep: number;
-    totalSteps: number;
-}
-declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
-export default ProgressIndicator;

package/dist/components/core/Stepper/components/ProgressIndicator.js

@@ -1,12 +0,0 @@
-import React__default from 'react';
-
-var ProgressIndicator = function (_a) {
-    var activeStep = _a.activeStep, totalSteps = _a.totalSteps;
-    return (React__default.createElement("div", { className: "text-xs text-text-placeholder font-medium mt-4" },
-        "Step ",
-        activeStep + 1,
-        " of ",
-        totalSteps));
-};
-
-export { ProgressIndicator as default };

package/dist/components/core/Stepper/components/StepContent.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-import { StepData } from "../Stepper.types";
-/**
- * Props for the StepContent component
- */
-export interface StepContentProps {
-    /** Step data including label and description */
-    step: StepData;
-    /** Status of the step: 'complete', 'current', 'upcoming', or 'active-complete' */
-    status: "complete" | "current" | "upcoming" | "active-complete";
-    /** Whether to animate this content */
-    animate?: boolean;
-    /** Additional className to apply */
-    className?: string;
-}
-/**
- * StepContent component for displaying step label and description
- */
-declare const StepContent: React.FC<StepContentProps>;
-export default StepContent;

package/dist/components/core/Stepper/components/StepContent.js

@@ -1,36 +0,0 @@
-import React__default, { useState, useEffect } from 'react';
-import { cn } from '../../../../utils/cn.js';
-
-/**
- * StepContent component for displaying step label and description
- */
-var StepContent = function (_a) {
-    var step = _a.step, status = _a.status, _b = _a.animate, animate = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
-    // Track the visual status with a delay
-    var _d = useState(status), visualStatus = _d[0], setVisualStatus = _d[1];
-    // Update the visual status with a delay when the actual status changes
-    useEffect(function () {
-        if (animate && (status === "current" || status === "active-complete")) {
-            // Delay updating to "current" or "active-complete" status by 1 second to match IconCircle
-            var timer_1 = setTimeout(function () {
-                setVisualStatus(status);
-            }, 1000);
-            return function () { return clearTimeout(timer_1); };
-        }
-        else {
-            // For non-animated or non-current statuses, update immediately
-            setVisualStatus(status);
-        }
-    }, [status, animate]);
-    return (React__default.createElement("div", { className: cn("ml-4 flex min-w-0 flex-col", className) },
-        React__default.createElement("div", { className: cn("text-sm font-semibold", visualStatus === "current" || visualStatus === "active-complete"
-                ? "text-primary-base"
-                : visualStatus === "upcoming"
-                    ? "text-text-secondary"
-                    : visualStatus === "complete"
-                        ? "text-text-primary"
-                        : "") }, step.label),
-        step.description && (React__default.createElement("div", { className: "text-sm text-text-secondary" }, step.description))));
-};
-
-export { StepContent as default };

package/dist/components/core/Stepper/components/StepperItem.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-import { StepData } from "../Stepper.types";
-/**
- * Props for the StepperItem component
- */
-export interface StepperItemProps {
-    /** Step data */
-    step: StepData;
-    /** Status of the step: 'complete', 'current', 'upcoming', or 'active-complete' */
-    status: "complete" | "current" | "upcoming" | "active-complete";
-    /** Status of the next step (if any) */
-    nextStepStatus?: "complete" | "current" | "upcoming" | "active-complete";
-    /** Whether this is the last step in the sequence */
-    isLast: boolean;
-    /** Step number (1-based index) */
-    stepNumber: number;
-    /** Additional className to apply */
-    className?: string;
-}
-/**
- * StepperItem component for rendering an individual step
- */
-declare const StepperItem: React.FC<StepperItemProps>;
-export default StepperItem;

package/dist/components/core/Stepper/components/StepperItem.js

@@ -1,22 +0,0 @@
-import React__default from 'react';
-import { cn } from '../../../../utils/cn.js';
-import IconCircle from './IconCircle.js';
-import ConnectorLine from './ConnectorLine.js';
-import StepContent from './StepContent.js';
-
-/**
- * StepperItem component for rendering an individual step
- */
-var StepperItem = function (_a) {
-    var step = _a.step, status = _a.status, nextStepStatus = _a.nextStepStatus, isLast = _a.isLast, stepNumber = _a.stepNumber, _b = _a.className, className = _b === void 0 ? "" : _b;
-    // Content that goes inside either the <a> or <div> wrapper
-    var innerContent = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "flex h-9 items-center", "aria-hidden": "true" },
-            React__default.createElement(IconCircle, { status: status, stepNumber: stepNumber, animate: status === "current" || status === "active-complete" })),
-        React__default.createElement(StepContent, { step: step, status: status, animate: status === "current" || status === "active-complete" })));
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(ConnectorLine, { status: status, isLast: isLast, nextStepStatus: nextStepStatus, animate: status === "complete" && nextStepStatus === "current" }),
-        step.href ? (React__default.createElement("a", { href: step.href, className: cn("group relative flex items-start", className), "aria-current": status === "current" ? "step" : undefined }, innerContent)) : (React__default.createElement("div", { className: cn("group relative flex items-start", className), "aria-current": status === "current" ? "step" : undefined }, innerContent))));
-};
-
-export { StepperItem as default };

package/dist/components/core/Tabs/index.js

@@ -1,9 +0,0 @@
-import { Tabs } from './Tabs.js';
-export { TabsContext, useTabsContext } from './TabsContext.js';
-export { TabsList } from './TabsList.js';
-export { TabsTrigger } from './TabsTrigger.js';
-export { TabsContent } from './TabsContent.js';
-
-
-
-export { Tabs, Tabs as default };

package/dist/components/core/Tooltip/useTooltipPositioning.js

@@ -1,59 +0,0 @@
-import { useRef, useCallback, useEffect } from 'react';
-import { debounce } from '../../../utils/debounce.js';
-import '../../../node_modules/tslib/tslib.es6.js';
-
-var useTooltipPositioning = function (_a) {
-    var tooltipRef = _a.tooltipRef, triggerRef = _a.triggerRef, placement = _a.placement, isVisible = _a.isVisible;
-    // Stable refs to break dependency cycles
-    var placementRef = useRef(placement);
-    var isVisibleRef = useRef(isVisible);
-    // Update refs without causing re-renders
-    placementRef.current = placement;
-    isVisibleRef.current = isVisible;
-    // Optimized positioning function - reduces getBoundingClientRect calls
-    var positionTooltip = useCallback(function () {
-        if (!tooltipRef.current || !triggerRef.current || !isVisibleRef.current)
-            return;
-        var tooltipElement = tooltipRef.current;
-        var triggerElement = triggerRef.current;
-        var currentPlacement = placementRef.current;
-        // Single getBoundingClientRect call for trigger
-        var triggerRect = triggerElement.getBoundingClientRect();
-        // Only get tooltip rect when needed for centering calculations
-        if (currentPlacement === 'top' || currentPlacement === 'bottom') {
-            var tooltipRect = tooltipElement.getBoundingClientRect();
-            var leftOffset = (triggerRect.width - tooltipRect.width) / 2;
-            tooltipElement.style.left = "".concat(leftOffset, "px");
-        }
-        else if (currentPlacement === 'left' || currentPlacement === 'right') {
-            var tooltipRect = tooltipElement.getBoundingClientRect();
-            var topOffset = (triggerRect.height - tooltipRect.height) / 2;
-            tooltipElement.style.top = "".concat(topOffset, "px");
-        }
-    }, []); // No dependencies = stable function!
-    // Stable debounced positioning - no dependency on positionTooltip
-    var debouncedPositioning = useCallback(debounce(function () {
-        if (isVisibleRef.current) {
-            positionTooltip();
-        }
-    }, 100), [] // No dependencies = stable function!
-    );
-    // Single positioning effect - only triggers when visibility changes
-    useEffect(function () {
-        if (isVisible && tooltipRef.current && triggerRef.current) {
-            // Reduced delay for better responsiveness
-            var timeoutId_1 = setTimeout(function () {
-                if (isVisibleRef.current) {
-                    positionTooltip();
-                }
-            }, 10); // Reduced from 16ms to 10ms
-            return function () { return clearTimeout(timeoutId_1); };
-        }
-    }, [isVisible]); // Removed positionTooltip dependency to prevent circular re-renders
-    return {
-        positionTooltip: positionTooltip,
-        debouncedPositioning: debouncedPositioning,
-    };
-};
-
-export { useTooltipPositioning };

package/dist/components/data-display/Masonry/Masonry.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { MasonryProps } from './Masonry.types';
-declare const Masonry: React.FC<MasonryProps>;
-export default Masonry;

package/dist/components/data-display/Masonry/Masonry.js

@@ -1,184 +0,0 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
-import { cn } from '../../../utils/cn.js';
-import { getMasonryTheme } from './Masonry.theme.js';
-
-var Masonry = function (_a) {
-    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.gap, gap = _c === void 0 ? 16 : _c, gapBreakpoints = _a.gapBreakpoints, className = _a.className, style = _a.style, _d = _a.minColumns, minColumns = _d === void 0 ? 1 : _d, _e = _a.maxColumns, maxColumns = _e === void 0 ? 10 : _e, _f = _a.sequential, sequential = _f === void 0 ? false : _f, themeOverrides = _a.themeOverrides, _g = _a.loading, loading = _g === void 0 ? false : _g, props = __rest(_a, ["children", "columns", "gap", "gapBreakpoints", "className", "style", "minColumns", "maxColumns", "sequential", "themeOverrides", "loading"]);
-    var containerRef = useRef(null);
-    var _h = useState(typeof columns === 'number' ? columns : 3), currentColumns = _h[0], setCurrentColumns = _h[1];
-    var _j = useState(gap), currentGap = _j[0], setCurrentGap = _j[1];
-    var _k = useState(0), containerWidth = _k[0], setContainerWidth = _k[1];
-    // Get the theme with any overrides applied
-    var theme = getMasonryTheme(themeOverrides);
-    // Calculate responsive columns and gap
-    var calculateLayout = useCallback(function () {
-        if (!containerRef.current)
-            return;
-        // Use getBoundingClientRect for more accurate width measurement
-        var containerRect = containerRef.current.getBoundingClientRect();
-        var width = Math.floor(containerRect.width);
-        // Only update if width actually changed to prevent unnecessary re-renders
-        if (width !== containerWidth && width > 0) {
-            setContainerWidth(width);
-        }
-        // Handle responsive columns
-        if (typeof columns === 'object') {
-            var breakpoints = Object.keys(columns)
-                .map(Number)
-                .sort(function (a, b) { return a - b; });
-            var newColumns = 3; // Default fallback
-            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
-                var breakpoint = breakpoints_1[_i];
-                if (width >= breakpoint) {
-                    newColumns = columns[breakpoint];
-                }
-            }
-            // Ensure columns are within min/max bounds
-            newColumns = Math.min(Math.max(newColumns, minColumns), maxColumns);
-            setCurrentColumns(newColumns);
-        }
-        else {
-            var clampedColumns = Math.min(Math.max(columns, minColumns), maxColumns);
-            setCurrentColumns(clampedColumns);
-        }
-        // Handle responsive gap
-        if (gapBreakpoints) {
-            var gapBreakpointKeys = Object.keys(gapBreakpoints)
-                .map(Number)
-                .sort(function (a, b) { return a - b; });
-            var newGap = gap;
-            for (var _a = 0, gapBreakpointKeys_1 = gapBreakpointKeys; _a < gapBreakpointKeys_1.length; _a++) {
-                var breakpoint = gapBreakpointKeys_1[_a];
-                if (width >= breakpoint) {
-                    newGap = gapBreakpoints[breakpoint];
-                }
-            }
-            setCurrentGap(newGap);
-        }
-        else {
-            setCurrentGap(gap);
-        }
-    }, [columns, gap, gapBreakpoints, minColumns, maxColumns, containerWidth]);
-    // Arrange items in masonry layout
-    var arrangeItems = useCallback(function () {
-        if (!containerRef.current)
-            return;
-        var container = containerRef.current;
-        var items = Array.from(container.children);
-        if (items.length === 0)
-            return;
-        // Get fresh container width to avoid stale closure issues
-        var currentContainerWidth = container.offsetWidth;
-        // Calculate column width
-        var availableWidth = currentContainerWidth - (currentGap * (currentColumns - 1));
-        var columnWidth = Math.floor(availableWidth / currentColumns);
-        if (columnWidth <= 0)
-            return; // Prevent invalid layouts
-        // Initialize column heights
-        var columnHeights = new Array(currentColumns).fill(0);
-        // Process items synchronously first for positioning
-        items.forEach(function (item, index) {
-            var _a;
-            // Reset item positioning
-            item.style.position = 'absolute';
-            item.style.width = "".concat(columnWidth, "px");
-            // Apply transition classes
-            if (!item.classList.contains('transition-all')) {
-                (_a = item.classList).add.apply(_a, theme.animations.transition.split(' '));
-            }
-            var targetColumn;
-            if (sequential) {
-                // Sequential placement: round-robin distribution
-                targetColumn = index % currentColumns;
-            }
-            else {
-                // Optimal placement: shortest column
-                targetColumn = columnHeights.indexOf(Math.min.apply(Math, columnHeights));
-            }
-            // Calculate position
-            var left = targetColumn * (columnWidth + currentGap);
-            var top = columnHeights[targetColumn];
-            // Position the item
-            item.style.left = "".concat(left, "px");
-            item.style.top = "".concat(top, "px");
-            // Force layout to get accurate height measurement
-            var itemHeight = item.offsetHeight;
-            if (itemHeight > 0) {
-                columnHeights[targetColumn] = top + itemHeight + currentGap;
-            }
-        });
-        // Set final container height after all items are positioned
-        requestAnimationFrame(function () {
-            var maxHeight = Math.max.apply(Math, columnHeights) - currentGap;
-            container.style.height = "".concat(Math.max(0, maxHeight), "px");
-        });
-    }, [currentColumns, currentGap, sequential, theme.animations.transition]);
-    // Handle container resize with ResizeObserver for better performance
-    useEffect(function () {
-        if (!containerRef.current)
-            return;
-        var resizeTimeoutId;
-        var resizeObserver = new ResizeObserver(function (_entries) {
-            // Debounce resize events to prevent excessive recalculations
-            clearTimeout(resizeTimeoutId);
-            resizeTimeoutId = setTimeout(function () {
-                calculateLayout();
-            }, 100);
-        });
-        // Fallback window resize handler for older browsers
-        var handleWindowResize = function () {
-            clearTimeout(resizeTimeoutId);
-            resizeTimeoutId = setTimeout(function () {
-                calculateLayout();
-            }, 100);
-        };
-        resizeObserver.observe(containerRef.current);
-        window.addEventListener('resize', handleWindowResize);
-        return function () {
-            resizeObserver.disconnect();
-            window.removeEventListener('resize', handleWindowResize);
-            clearTimeout(resizeTimeoutId);
-        };
-    }, [calculateLayout]);
-    // Initial layout calculation and arrangement
-    useEffect(function () {
-        // Wait for next tick to ensure container is mounted and measured
-        var timer = setTimeout(function () {
-            calculateLayout();
-            // Only arrange items if we have a valid container width
-            if (containerWidth > 0) {
-                arrangeItems();
-            }
-        }, 0);
-        return function () { return clearTimeout(timer); };
-    }, [calculateLayout, arrangeItems, children, containerWidth]);
-    // Re-arrange when children change (with debouncing)
-    useEffect(function () {
-        var timeoutId;
-        var observer = new MutationObserver(function () {
-            // Debounce multiple rapid changes
-            clearTimeout(timeoutId);
-            timeoutId = setTimeout(function () {
-                arrangeItems();
-            }, 10);
-        });
-        if (containerRef.current) {
-            observer.observe(containerRef.current, {
-                childList: true,
-                subtree: false, // Only watch direct children, not nested changes
-            });
-        }
-        return function () {
-            observer.disconnect();
-            clearTimeout(timeoutId);
-        };
-    }, [arrangeItems]);
-    // Generate container classes
-    var containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
-    return (React__default.createElement("div", __assign({ ref: containerRef, className: containerClasses, style: __assign(__assign({}, style), { 
-            // Ensure container has minimum dimensions for proper layout calculation
-            minHeight: loading ? '200px' : undefined }) }, props), children));
-};
-
-export { Masonry as default };

package/dist/components/data-display/Masonry/Masonry.theme.js

@@ -1,40 +0,0 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
-
-/**
- * Default theme for the Masonry component
- */
-var masonryTheme = {
-    // Container styles
-    container: {
-        base: "relative w-full overflow-hidden",
-        loading: "opacity-70 pointer-events-none",
-    },
-    // Item styles (utility classes for masonry items)
-    item: {
-        base: "relative overflow-hidden rounded-[var(--form-rounded)] bg-white  border border-border transition-all duration-[var(--default-transition-duration)] ease-[var(--default-transition-timing-function)]",
-        hover: "hover:-translate-y-0.5 ",
-        content: "p-4",
-        title: "text-lg font-semibold mb-2 text-neutral-900",
-        description: "text-sm text-neutral-600 leading-relaxed",
-    },
-    // Animation classes
-    animations: {
-        transition: "transition-all duration-[var(--default-transition-duration)] ease-[var(--default-transition-timing-function)]",
-        enter: "opacity-0 scale-95",
-        exit: "opacity-100 scale-100",
-    },
-};
-/**
- * Apply theme overrides to the default theme
- */
-var getMasonryTheme = function (overrides) {
-    if (!overrides)
-        return masonryTheme;
-    return {
-        container: __assign(__assign({}, masonryTheme.container), overrides.container),
-        item: __assign(__assign({}, masonryTheme.item), overrides.item),
-        animations: __assign(__assign({}, masonryTheme.animations), overrides.animations),
-    };
-};
-
-export { getMasonryTheme, masonryTheme };

package/dist/components/data-display/Masonry/Masonry.types.d.ts

@@ -1,53 +0,0 @@
-import React from "react";
-/**
- * Theme configuration for the Masonry component
- */
-export interface MasonryTheme {
-    container: {
-        base: string;
-        loading: string;
-    };
-    item: {
-        base: string;
-        hover: string;
-        content: string;
-        title: string;
-        description: string;
-    };
-    animations: {
-        transition: string;
-        enter: string;
-        exit: string;
-    };
-}
-/**
- * Masonry theme overrides interface for customization
- */
-export interface MasonryThemeOverrides {
-    container?: Partial<MasonryTheme['container']>;
-    item?: Partial<MasonryTheme['item']>;
-    animations?: Partial<MasonryTheme['animations']>;
-}
-/**
- * Masonry component props
- */
-export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Children elements to be arranged in masonry layout */
-    children: React.ReactNode;
-    /** Number of columns (static) or breakpoint configuration (responsive) */
-    columns?: number | Record<number, number>;
-    /** Gap between items in pixels */
-    gap?: number;
-    /** Gap configuration for different breakpoints */
-    gapBreakpoints?: Record<number, number>;
-    /** Minimum columns count */
-    minColumns?: number;
-    /** Maximum columns count */
-    maxColumns?: number;
-    /** Enable sequential placement (items placed in order vs optimal placement) */
-    sequential?: boolean;
-    /** Theme overrides for customizing appearance */
-    themeOverrides?: MasonryThemeOverrides;
-    /** Loading state */
-    loading?: boolean;
-}

package/dist/components/data-display/Masonry/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './Masonry';
-export { masonryTheme, getMasonryTheme } from './Masonry.theme';
-export type { MasonryProps, MasonryThemeOverrides, MasonryTheme } from './Masonry.types';

package/dist/components/data-display/Table/Table.d.ts

@@ -1,54 +0,0 @@
-import React from "react";
-import { TableProps, TableContextType } from "./Table.types";
-/**
- * Context for sharing table state across all table components
- * Provides theme, configuration, and callback functions to child components
- */
-declare const TableContext: React.Context<TableContextType>;
-/**
- * Enhanced Table component with dual API support (declarative and data-driven)
- *
- * Features:
- * - Dual API: Use with data/columns props OR declarative Table.Header/Body/Row/Cell components
- * - Stable row identification using rowKey prop for consistent React reconciliation
- * - Column management with visibility controls
- * - Sorting, filtering, row selection, and expansion
- * - Frozen columns and headers
- * - Pagination support
- * - Full accessibility compliance (WCAG 2.1 AA)
- * - Theme customization with className overrides
- *
- * @example
- * // Data-driven API with stable row keys
- * <Table data={data} columns={columns} rowKey="id" sortable selectable />
- *
- * // Using a function for complex row keys
- * <Table
- *   data={data}
- *   columns={columns}
- *   rowKey={(row, index) => `${row.category}-${row.id}`}
- *   sortable
- *   selectable
- * />
- *
- * // Declarative API
- * <Table>
- *   <Table.Header>
- *     <Table.Row>
- *       <Table.HeaderCell>Name</Table.HeaderCell>
- *     </Table.Row>
- *   </Table.Header>
- *   <Table.Body>
- *     <Table.Row>
- *       <Table.Cell>John Doe</Table.Cell>
- *     </Table.Row>
- *   </Table.Body>
- * </Table>
- */
-declare function TableComponent<T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
-declare namespace TableComponent {
-    var displayName: string;
-}
-declare const Table: typeof TableComponent;
-export default Table;
-export { TableContext };