flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/core/Table/components/core/TableCell.js

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import { cn } from '../../../../../utils/cn.js';
+
+/**
+ * Internal TableCell component used by the data-driven API
+ * Handles both header and data cells with proper theming and accessibility
+ *
+ * Features:
+ * - Dynamic cell type (th/td) based on isHeader prop
+ * - Frozen column support with visual indicators
+ * - Custom cell rendering via column.cell function
+ * - Tooltip support for truncated content
+ * - Alignment and width customization
+ * - Full accessibility with proper ARIA attributes
+ *
+ * @internal This component is used internally by the Table component
+ */
+function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = false, isLastFrozen = false, theme, children, }) {
+    const Cell = isHeader ? 'th' : 'td';
+    // For header cells, render the column header content
+    if (isHeader) {
+        const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), column.align && `text-${column.align}`);
+        return (React__default.createElement(Cell, { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, role: "columnheader", "aria-label": typeof column.header === 'string' ? column.header : column.id }, children || column.header));
+    }
+    // For data cells, extract value using accessor (string key or function)
+    const value = typeof column.accessor === 'function'
+        ? column.accessor(row)
+        : row[column.accessor];
+    // Use custom cell renderer if provided, otherwise display raw value
+    const content = column.cell ? column.cell(row) : value;
+    // Generate tooltip content if tooltip is enabled
+    const tooltipContent = typeof column.tooltip === 'function'
+        ? column.tooltip(row)
+        : column.tooltip
+            ? String(value)
+            : undefined;
+    const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), column.align && `text-${column.align}`, column.ellipsis && 'truncate');
+    return (React__default.createElement(Cell, { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, title: tooltipContent, role: "cell" }, children || content));
+}
+// Set display name for dev tools
+TableCellComponent.displayName = 'TableCell';
+// Memoize component to prevent unnecessary re-renders when props haven't changed
+const TableCell = React__default.memo(TableCellComponent);
+
+export { TableCell };

package/dist/components/core/Table/components/core/TableHeader.js

@@ -0,0 +1,75 @@
+import React__default from 'react';
+import { TableCell } from './TableCell.js';
+import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';
+import { getRowId } from '../../Table.utils.js';
+
+function TableHeaderComponent({ columns, sortConfig = [], onSortChange, filterConfig = [], onFilterChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, totalRowCount = 0, theme, data = [], rowKey, }) {
+    const handleSort = (columnId) => {
+        if (!onSortChange)
+            return;
+        const currentSort = sortConfig.find(sort => sort.columnId === columnId);
+        const newSortConfig = [...sortConfig.filter(sort => sort.columnId !== columnId)];
+        if (!currentSort) {
+            // Add new sort
+            newSortConfig.push({
+                columnId,
+                direction: 'asc',
+                priority: sortConfig.length + 1,
+            });
+        }
+        else if (currentSort.direction === 'asc') {
+            // Change to desc
+            newSortConfig.push({
+                columnId,
+                direction: 'desc',
+                priority: currentSort.priority,
+            });
+        }
+        // If desc, remove sort
+        onSortChange(newSortConfig);
+    };
+    const handleSelectAll = (checked) => {
+        if (!onSelectionChange || selectionType !== 'checkbox')
+            return;
+        if (checked) {
+            // Select all rows - generate row IDs using the same logic as TableBody
+            const allRowIds = data.map((row, index) => getRowId(row, index, rowKey));
+            onSelectionChange(allRowIds);
+        }
+        else {
+            // Deselect all
+            onSelectionChange([]);
+        }
+    };
+    // Calculate select all checkbox state
+    const dataLength = data.length;
+    const isAllSelected = selectedRows.length === dataLength && dataLength > 0;
+    const isIndeterminate = selectedRows.length > 0 && selectedRows.length < dataLength;
+    return (React__default.createElement("thead", { className: freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : '' },
+        React__default.createElement("tr", null,
+            selectable && (React__default.createElement(TableCell, { column: {
+                    id: 'selection',
+                    header: '',
+                    accessor: () => '',
+                    width: '48px',
+                    align: 'center'
+                }, row: {}, rowId: "", isHeader: true, theme: theme }, selectionType === 'checkbox' && (React__default.createElement(Checkbox, { id: "table-select-all", name: "table-select-all", value: "select-all", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, "aria-label": "Select all rows" })))),
+            expandable && expandedRowRender && (React__default.createElement(TableCell, { column: {
+                    id: 'expand',
+                    header: '',
+                    accessor: () => '',
+                    width: '48px',
+                    align: 'center'
+                }, row: {}, rowId: "", isHeader: true, theme: theme })),
+            columns.map((column, index) => {
+                const currentSort = sortConfig.find(sort => sort.columnId === column.id);
+                const isSortable = column.sortable && onSortChange;
+                return (React__default.createElement(TableCell, { key: column.id, column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme }, isSortable ? (React__default.createElement("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-primary-600 transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}` },
+                    column.header,
+                    currentSort && (React__default.createElement("span", { className: "text-xs" }, currentSort.direction === 'asc' ? '↑' : '↓')))) : (column.header)));
+            }))));
+}
+// Export with proper type annotation
+const TableHeader = TableHeaderComponent;
+
+export { TableHeader };

package/dist/components/core/Table/components/core/TableRow.js

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { TableCell } from './TableCell.js';
+import { Button } from '../../../Button/Button.js';
+import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';
+import { Radio } from '../../../../forms/Radio/Radio.js';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+
+function TableRowComponent({ row, rowId, columns, expandedRowRender, isExpanded = false, onExpandChange, selectable, selectionType, isSelected = false, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
+    const rowClasses = [
+        (theme === null || theme === void 0 ? void 0 : theme.rowStyle) || "",
+        isSelected ? (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle) || "" : ""
+    ].filter(Boolean).join(" ");
+    const handleExpandClick = (e) => {
+        e.stopPropagation();
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!isExpanded);
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("tr", { className: rowClasses, "data-selected": isSelected, role: "row", "aria-selected": selectable ? isSelected : undefined, "aria-expanded": Boolean(expandedRowRender) ? isExpanded : undefined },
+            selectable && (React__default.createElement(TableCell, { column: {
+                    id: 'selection',
+                    header: '',
+                    accessor: () => '',
+                    width: '48px',
+                    align: 'center'
+                }, row: row, rowId: rowId, theme: theme }, selectionType === "checkbox" ? (React__default.createElement(Checkbox, { id: `table-checkbox-${rowId}`, name: `table-selection-${rowId}`, value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), onClick: (e) => e.stopPropagation(), "aria-label": "Select row" })) : (React__default.createElement("div", { onClick: (e) => e.stopPropagation() },
+                React__default.createElement(Radio, { id: `table-radio-${rowId}`, name: "table-selection", value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), "aria-label": "Select row" }))))),
+            expandedRowRender && (React__default.createElement(TableCell, { column: {
+                    id: 'expand',
+                    header: '',
+                    accessor: () => '',
+                    width: '48px',
+                    align: 'center'
+                }, row: row, rowId: rowId, theme: theme },
+                React__default.createElement(Button, { color: "primary", variant: "ghost", size: "sm", onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row" }, isExpanded ? React__default.createElement(MinusIcon, { className: "w-4 h-4", strokeWidth: 2 }) : React__default.createElement(PlusIcon, { className: "w-4 h-4", strokeWidth: 2 })))),
+            columns.map((column, index) => (React__default.createElement(TableCell, { key: column.id, column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme })))),
+        isExpanded && expandedRowRender && (React__default.createElement("tr", null,
+            React__default.createElement("td", { colSpan: columns.length +
+                    (selectable ? 1 : 0) +
+                    1 }, expandedRowRender(row))))));
+}
+// Export with proper type annotation
+const TableRow = TableRowComponent;
+
+export { TableRow };

package/dist/components/core/Table/index.d.ts

@@ -0,0 +1,20 @@
+import { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction } from './Table.types';
+import { TableActions } from './components/TableActions/TableActions';
+import { TableActionsMenu } from './components/TableActions/TableActionsMenu';
+import { TablePagination } from './components/TablePagination';
+import { ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps } from './components/TableActions/TableActions.types';
+import { TablePaginationProps } from './components/TablePagination/TablePagination.types';
+interface TableCompound {
+    <T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
+    Header: React.FC<TableHeaderProps>;
+    Body: React.FC<TableBodyProps>;
+    Row: React.FC<TableRowProps>;
+    Cell: React.FC<TableCellProps>;
+    HeaderCell: React.FC<TableHeaderCellProps>;
+    Actions: typeof TableActions;
+    Pagination: React.FC<TablePaginationProps>;
+}
+declare const Table: TableCompound;
+export { Table };
+export type { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, };
+export { TableActions, TableActionsMenu, TablePagination };

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

@@ -0,0 +1,21 @@
+import { Table as Table$1 } from './Table.js';
+import { HeaderCell, Cell, Row, Body, Header } from './components/DeclarativeComponents.js';
+import { TableActions } from './components/TableActions/TableActions.js';
+import 'react';
+import 'clsx';
+import 'tailwind-merge';
+import { TablePagination } from './components/TablePagination/TablePagination.js';
+
+// First import the Table component itself
+// Create a compound component by attaching the subcomponents
+const Table = Object.assign(Table$1, {
+    Header,
+    Body,
+    Row,
+    Cell: Cell,
+    HeaderCell: HeaderCell,
+    Actions: TableActions,
+    Pagination: TablePagination
+});
+
+export { Table, TableActions, TablePagination };

package/dist/components/core/Tabs/Tabs.animations.d.ts

@@ -0,0 +1,23 @@
+import { Variants, Transition } from "motion/react";
+/**
+ * Get Tabs trigger animation variants based on reduced motion preference
+ * Provides subtle micro-interactions for enhanced UX while respecting accessibility
+ */
+export declare const getTabsTriggerVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Underline position interface for type safety
+ */
+export interface UnderlinePosition {
+    left: number;
+    width: number;
+}
+/**
+ * Get underline transition configuration based on reduced motion preference
+ * Uses spring animation for natural, fluid movement between tabs
+ */
+export declare const getUnderlineTransition: (shouldReduceMotion: boolean | null) => Transition;
+/**
+ * Get TabsContent animation variants for directional fade animations
+ * Provides smooth fade-in from bottom and fade-out to top transitions
+ */
+export declare const getTabsContentVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

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

@@ -0,0 +1,84 @@
+/**
+ * Get Tabs trigger animation variants based on reduced motion preference
+ * Provides subtle micro-interactions for enhanced UX while respecting accessibility
+ */
+const getTabsTriggerVariants = (shouldReduceMotion) => (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false)
+    ? undefined
+    : {
+        tap: {
+            scale: 0.98,
+            transition: {
+                duration: 0.1,
+                type: "spring",
+                stiffness: 400,
+                damping: 12,
+            },
+        },
+        hover: {
+            scale: 1.02,
+            transition: {
+                duration: 0.2,
+                type: "spring",
+                stiffness: 300,
+                damping: 15,
+            },
+        },
+    };
+/**
+ * Get underline transition configuration based on reduced motion preference
+ * Uses spring animation for natural, fluid movement between tabs
+ */
+const getUnderlineTransition = (shouldReduceMotion) => {
+    if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
+        // Reduced motion: instant transition
+        return {
+            duration: 0,
+        };
+    }
+    // Full motion: smooth spring transition
+    return {
+        type: "spring",
+        stiffness: 300,
+        damping: 30,
+        mass: 0.8,
+        restDelta: 0.1,
+    };
+};
+/**
+ * Get TabsContent animation variants for directional fade animations
+ * Provides smooth fade-in from bottom and fade-out to top transitions
+ */
+const getTabsContentVariants = (shouldReduceMotion) => {
+    if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
+        // Reduced motion: no animation variants
+        return undefined;
+    }
+    // Full motion: directional fade animations
+    return {
+        initial: {
+            opacity: 0,
+            y: 10, // Start below natural position
+        },
+        animate: {
+            opacity: 1,
+            y: 0, // Move to natural position
+            transition: {
+                duration: 0.3,
+                type: "spring",
+                stiffness: 200,
+                damping: 25,
+                mass: 0.8,
+            },
+        },
+        exit: {
+            opacity: 0,
+            y: -10, // Exit slightly upward
+            transition: {
+                duration: 0.2,
+                ease: "easeIn",
+            },
+        },
+    };
+};
+
+export { getTabsContentVariants, getTabsTriggerVariants, getUnderlineTransition };

package/dist/components/core/Tabs/Tabs.d.ts

@@ -5,4 +5,3 @@ export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.Ref
     Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
 };
-export default Tabs;

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

@@ -1,5 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useState } from 'react';
+import React__default, { useState, useRef, useCallback, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
 import { TabsContext } from './TabsContext.js';
@@ -10,37 +9,82 @@ import { TabsContent } from './TabsContent.js';
 /**
  * Tabs component for organizing content into separate views
  * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ * Supports optional Framer Motion animations and comprehensive accessibility
  */
-var TabsComponent = React__default.forwardRef(function (_a, ref) {
-    var value = _a.value, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, children = _a.children, className = _a.className, props = __rest(_a, ["value", "defaultValue", "onValueChange", "orientation", "size", "disabled", "children", "className"]);
-    var _e = useState(value || defaultValue || ""), currentValue = _e[0], setCurrentValue = _e[1];
+const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, ...props }, ref) => {
+    const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
+    // Track trigger elements for underline positioning
+    const triggerRefs = useRef(new Map());
     // Handle controlled vs uncontrolled
-    var isControlled = value !== undefined;
-    var activeValue = isControlled ? value : currentValue;
-    var handleValueChange = function (newValue) {
-        if (!isControlled) {
-            setCurrentValue(newValue);
+    const isControlled = value !== undefined;
+    const activeValue = isControlled ? value : currentValue;
+    // Dev-time warnings for common issues
+    if (process.env.NODE_ENV !== 'production') {
+        // Warn if no defaultValue or value provided and no active tab will be selected
+        if (!value && !defaultValue && currentValue === "") {
+            // eslint-disable-next-line no-console
+            console.warn("Tabs: No 'value' or 'defaultValue' provided. Consider providing at least 'defaultValue' for initial tab selection.");
         }
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
-    };
-    var contextValue = {
+        // Warn if both controlled and uncontrolled props are provided
+        if (value !== undefined && defaultValue !== undefined) {
+            // eslint-disable-next-line no-console
+            console.warn("Tabs: Both 'value' and 'defaultValue' provided. Component will be controlled (value takes precedence).");
+        }
+        // Warn if controlled but no onValueChange handler
+        if (isControlled && !onValueChange) {
+            // eslint-disable-next-line no-console
+            console.warn("Tabs: 'value' prop provided but no 'onValueChange' handler. Tabs will not be interactive.");
+        }
+    }
+    // Safe value change handler with error handling
+    const handleValueChange = useCallback((newValue) => {
+        try {
+            if (!isControlled) {
+                setCurrentValue(newValue);
+            }
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                console.error("Error in tabs value change handler:", error);
+            }
+        }
+    }, [isControlled, onValueChange]);
+    // Register and unregister trigger elements for underline positioning
+    const registerTrigger = useCallback((triggerValue, element) => {
+        triggerRefs.current.set(triggerValue, element);
+    }, []);
+    const unregisterTrigger = useCallback((triggerValue) => {
+        triggerRefs.current.delete(triggerValue);
+    }, []);
+    // Memoize context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({
         value: activeValue,
         onValueChange: handleValueChange,
         orientation: orientation,
-        size: size,
-        disabled: disabled,
-    };
+        size,
+        disabled,
+        registerTrigger,
+        unregisterTrigger,
+    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger]);
+    // Memoize theme classes for performance
+    const themeClasses = useMemo(() => ({
+        baseStyle: tabsTheme.baseStyle,
+        disabledStyle: disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
+    }), [disabled]);
     return (React__default.createElement(TabsContext.Provider, { value: contextValue },
-        React__default.createElement("div", __assign({ ref: ref, className: cn(tabsTheme.baseStyle, disabled && "opacity-50 cursor-not-allowed pointer-events-none", className // User overrides take precedence
-            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled }, props), children)));
+        React__default.createElement("div", { ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, className // User overrides take precedence
+            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, role: "tablist" // Add semantic role for screen readers
+            , "aria-orientation": orientation, ...props }, children)));
 });
 // Set display name for dev tools and Storybook
 TabsComponent.displayName = "Tabs";
 // Create compound component with proper typing
-var Tabs = Object.assign(TabsComponent, {
+const Tabs = Object.assign(TabsComponent, {
     List: TabsList,
     Trigger: TabsTrigger,
     Content: TabsContent,
 });
 
-export { Tabs, Tabs as default };
+export { Tabs };

package/dist/components/core/Tabs/Tabs.theme.d.ts

@@ -8,8 +8,9 @@ export interface TabsTheme {
     triggerStyle: string;
     triggerSizes: Record<TabsSize, string>;
     contentStyle: string;
+    underlineStyle: string;
 }
 /**
- * Default theme for Tabs components - simplified and organized
+ * Default theme for Tabs components - simplified and organized with proper design tokens
  */
 export declare const tabsTheme: TabsTheme;

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

@@ -1,20 +1,22 @@
 /**
- * Default theme for Tabs components - simplified and organized
+ * Default theme for Tabs components - simplified and organized with proper design tokens
  */
-var tabsTheme = {
+const tabsTheme = {
     // Container styles
     baseStyle: "flex flex-col",
-    // TabsList styles
-    listStyle: "relative inline-flex items-center  flex-row border-b border-border gap-2",
-    // TabsTrigger base styles with data-attribute state handling
-    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 border-b-2 border-transparent hover:border-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 text-text-muted hover:text-text-primary data-[state=active]:border-primary data-[state=active]:text-primary",
-    // TabsTrigger size variants
+    // TabsList styles with proper design tokens
+    listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-2",
+    // TabsTrigger base styles - no individual borders, underline will be handled separately
+    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] data-[state=active]:text-[var(--color-primary)]",
+    // TabsTrigger size variants using CSS variables where applicable
     triggerSizes: {
         sm: "px-2 py-1.5 text-sm gap-1",
-        md: "px-2 py-2 text-sm gap-2",
+        md: "px-2 py-2 text-sm gap-1",
     },
-    // TabsContent styles  
-    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+    // TabsContent styles with proper CSS variables
+    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    // Sliding underline styles
+    underlineStyle: "absolute bottom-0 h-0.5 bg-[var(--color-primary)] transition-none",
 };
 
 export { tabsTheme };

package/dist/components/core/Tabs/Tabs.types.d.ts

@@ -1,68 +1,134 @@
 import React from "react";
 /**
  * Size options for the Tabs component
+ * @example
+ * <Tabs size="sm"> - Smaller tabs with reduced padding
+ * <Tabs size="md"> - Default medium-sized tabs
  */
 export type TabsSize = "sm" | "md";
 /**
  * Orientation options for the Tabs component
- * Note: Only horizontal orientation is supported
+ * @note Currently only horizontal orientation is supported
+ * @example
+ * <Tabs orientation="horizontal"> - Horizontal tab layout (default)
  */
 export type TabsOrientation = "horizontal";
 /**
- * Tabs component props
+ * Main Tabs component props following the compound component pattern
+ * @example
+ * ```tsx
+ * // Controlled mode
+ * <Tabs value={activeTab} onValueChange={setActiveTab} size="md">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+ *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
+ *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
+ * </Tabs>
+ *
+ * // Uncontrolled mode
+ * <Tabs defaultValue="tab1">
+ *   // ... same structure
+ * </Tabs>
+ * ```
  */
 export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /** The currently selected value (controlled mode) */
+    /** The currently selected value (controlled mode) - when provided, component is controlled */
     value?: string;
-    /** The default selected value (uncontrolled mode) */
+    /** The default selected value (uncontrolled mode) - used when value is not provided */
     defaultValue?: string;
-    /** Function called when selection changes */
+    /** Function called when selection changes - receives the new active tab value */
     onValueChange?: (value: string) => void;
-    /** Orientation of the tabs (always horizontal) */
+    /** Orientation of the tabs (currently only horizontal is supported) */
     orientation?: TabsOrientation;
-    /** Size of the tabs */
+    /** Size variant for all tab triggers within this tabs instance */
     size?: TabsSize;
-    /** Whether the tabs are disabled */
+    /** Whether all tabs are disabled - individual triggers can also be disabled */
     disabled?: boolean;
-    /** Children components (TabsList, TabsContent) */
+    /** Children components - typically Tabs.List and Tabs.Content components */
     children?: React.ReactNode;
 }
 /**
- * TabsList component props
+ * TabsList component props - container for tab trigger buttons
+ * @example
+ * ```tsx
+ * <Tabs.List className="custom-list-styles">
+ *   <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
+ *   <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
+ * </Tabs.List>
+ * ```
  */
 export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Children TabsTrigger components */
+    /** Children TabsTrigger components - should only contain Tabs.Trigger elements */
     children?: React.ReactNode;
 }
 /**
- * TabsTrigger component props
+ * TabsTrigger component props - individual tab button/header
+ * Supports optional Framer Motion animations and comprehensive accessibility
+ * @example
+ * ```tsx
+ * <Tabs.Trigger value="profile" disabled={false}>
+ *   <UserIcon className="w-4 h-4" />
+ *   Profile
+ * </Tabs.Trigger>
+ *
+ * // Icon-only trigger (should include aria-label)
+ * <Tabs.Trigger value="settings" aria-label="Settings tab">
+ *   <CogIcon className="w-4 h-4" />
+ * </Tabs.Trigger>
+ * ```
  */
 export interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
-    /** The value for this tab */
+    /** The unique value identifier for this tab - used to associate with corresponding content */
     value: string;
-    /** Whether this tab is disabled */
+    /** Whether this specific tab trigger is disabled (overrides parent tabs disabled state) */
     disabled?: boolean;
-    /** Children content */
+    /** Content to display in the tab trigger - text, icons, or combination */
     children?: React.ReactNode;
+    /** Accessibility label - strongly recommended for icon-only tabs */
+    'aria-label'?: string;
 }
 /**
- * TabsContent component props
+ * TabsContent component props - content panel for each tab
+ * @example
+ * ```tsx
+ * <Tabs.Content value="profile">
+ *   <UserProfile data={profileData} />
+ * </Tabs.Content>
+ *
+ * // Force mount content for performance or state preservation
+ * <Tabs.Content value="settings" forceMount>
+ *   <SettingsForm /> // Form state preserved when tab is inactive
+ * </Tabs.Content>
+ * ```
  */
 export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** The value that this content corresponds to */
+    /** The value that corresponds to a TabsTrigger value - determines when content is shown */
     value: string;
-    /** Whether to force mount the content (keeps content in DOM when inactive) */
+    /** Whether to keep content mounted in DOM when inactive (useful for preserving form state) */
     forceMount?: boolean;
-    /** Children content */
+    /** Content to display when this tab is active */
     children?: React.ReactNode;
 }
 /**
- * Context value for Tabs compound components
+ * Internal context value for Tabs compound components
+ * Provides shared state and configuration to child components
+ * @internal - This interface is used internally and not intended for external use
  */
 export interface TabsContextValue {
+    /** Currently active tab value */
     value: string;
+    /** Handler to change the active tab */
     onValueChange: (value: string) => void;
+    /** Layout orientation for all tabs */
     orientation: TabsOrientation;
+    /** Size variant applied to all triggers */
     size: TabsSize;
+    /** Whether all tabs are disabled */
     disabled: boolean;
+    /** Register a tab trigger's position for underline animation */
+    registerTrigger: (value: string, element: HTMLButtonElement) => void;
+    /** Unregister a tab trigger when it unmounts */
+    unregisterTrigger: (value: string) => void;
 }

package/dist/components/core/Tabs/TabsContent.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TabsContentProps } from "./Tabs.types";
 /**
- * TabsContent component displays content panels for tabs
+ * TabsContent component displays content panels for tabs with directional fade animations
  */
 export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;