@flikk/ui 1.0.0-beta.1

package/dist/components/core/Table/hooks/useTableFilter.js

@@ -0,0 +1,72 @@
+import { useState, useCallback, useMemo } from 'react';
+import { filterData } from '../Table.filterUtils.js';
+
+function useTableFilter({ filterConfig = [], onFilterChange, filterLogic: controlledLogic, onFilterLogicChange, data, columns, enableBuiltInFilter = false, }) {
+    // Internal logic state (used when not controlled)
+    const [internalLogic, setInternalLogic] = useState('and');
+    const filterLogic = controlledLogic !== null && controlledLogic !== void 0 ? controlledLogic : internalLogic;
+    const handleSetLogic = useCallback((logic) => {
+        if (onFilterLogicChange) {
+            onFilterLogicChange(logic);
+        }
+        else {
+            setInternalLogic(logic);
+        }
+    }, [onFilterLogicChange]);
+    const handleToggleLogic = useCallback(() => {
+        handleSetLogic(filterLogic === 'and' ? 'or' : 'and');
+    }, [filterLogic, handleSetLogic]);
+    const generateFilterId = useCallback(() => {
+        return `filter-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
+    }, []);
+    const handleAddFilter = useCallback((columnId, value, operator) => {
+        if (!onFilterChange)
+            return;
+        const existing = filterConfig.find(f => f.columnId === columnId);
+        if (existing) {
+            const updated = filterConfig.map(f => f.columnId === columnId ? { ...f, value, operator } : f);
+            onFilterChange(updated);
+        }
+        else {
+            onFilterChange([...filterConfig, { id: generateFilterId(), columnId, value, operator }]);
+        }
+    }, [filterConfig, onFilterChange, generateFilterId]);
+    const handleRemoveFilter = useCallback((columnId) => {
+        if (!onFilterChange)
+            return;
+        onFilterChange(filterConfig.filter(f => f.columnId !== columnId));
+    }, [filterConfig, onFilterChange]);
+    const handleUpdateFilter = useCallback((columnId, value, operator) => {
+        if (!onFilterChange)
+            return;
+        onFilterChange(filterConfig.map(f => f.columnId === columnId ? { ...f, value, operator } : f));
+    }, [filterConfig, onFilterChange]);
+    const handleUpdateFilterById = useCallback((filterId, updates) => {
+        if (!onFilterChange)
+            return;
+        onFilterChange(filterConfig.map(f => f.id === filterId ? { ...f, ...updates } : f));
+    }, [filterConfig, onFilterChange]);
+    const handleClearFilters = useCallback(() => {
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
+    }, [onFilterChange]);
+    // Compute filtered data when built-in filtering is enabled
+    const filteredData = useMemo(() => {
+        if (!enableBuiltInFilter || !data || !columns)
+            return data || [];
+        return filterData(data, columns, filterConfig, filterLogic);
+    }, [enableBuiltInFilter, data, columns, filterConfig, filterLogic]);
+    return {
+        handleAddFilter,
+        handleRemoveFilter,
+        handleUpdateFilter,
+        handleUpdateFilterById,
+        handleClearFilters,
+        filterLogic,
+        handleToggleLogic,
+        handleSetLogic,
+        generateFilterId,
+        filteredData,
+    };
+}
+
+export { useTableFilter };

package/dist/components/core/Table/hooks/useTablePagination.d.ts

@@ -0,0 +1,12 @@
+export interface UseTablePaginationOptions<T> {
+    data?: T[];
+    pagination?: {
+        pageSize: number;
+        currentPage: number;
+        totalItems: number;
+    };
+}
+export interface UseTablePaginationReturn<T> {
+    paginatedData: T[];
+}
+export declare function useTablePagination<T>({ data, pagination, }: UseTablePaginationOptions<T>): UseTablePaginationReturn<T>;

package/dist/components/core/Table/hooks/useTablePagination.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+
+function useTablePagination({ data, pagination, }) {
+    const paginatedData = useMemo(() => {
+        if (pagination && data) {
+            return data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
+        }
+        return data || [];
+    }, [data, pagination]);
+    return { paginatedData };
+}
+
+export { useTablePagination };

package/dist/components/core/Table/hooks/useTableSelection.d.ts

@@ -0,0 +1,17 @@
+import { SelectionType } from '../Table.types';
+export interface UseTableSelectionOptions<T> {
+    data: T[];
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+}
+export interface UseTableSelectionReturn {
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    handleSelectAll: (checked: boolean) => void;
+    handleSelectionChange: (rowId: string, selected: boolean) => void;
+    handleClearSelection: () => void;
+}
+export declare function useTableSelection<T extends Record<string, any>>({ data, rowKey, selectionType, selectedRows, onSelectionChange, }: UseTableSelectionOptions<T>): UseTableSelectionReturn;

package/dist/components/core/Table/hooks/useTableSelection.js

@@ -0,0 +1,40 @@
+import { useMemo, useCallback } from 'react';
+import { getRowId } from '../Table.utils.js';
+
+function useTableSelection({ data, rowKey, selectionType = 'checkbox', selectedRows = [], onSelectionChange, }) {
+    const isAllSelected = useMemo(() => selectedRows.length === data.length && data.length > 0, [selectedRows.length, data.length]);
+    const isIndeterminate = useMemo(() => selectedRows.length > 0 && selectedRows.length < data.length, [selectedRows.length, data.length]);
+    const handleSelectAll = useCallback((checked) => {
+        if (!onSelectionChange || selectionType !== 'checkbox')
+            return;
+        if (checked) {
+            const allRowIds = data.map((row, index) => getRowId(row, index, rowKey));
+            onSelectionChange(allRowIds);
+        }
+        else {
+            onSelectionChange([]);
+        }
+    }, [data, rowKey, selectionType, onSelectionChange]);
+    const handleSelectionChange = useCallback((rowId, selected) => {
+        if (!onSelectionChange)
+            return;
+        const newSelectedRows = selectionType === 'checkbox'
+            ? selected
+                ? [...selectedRows, rowId]
+                : selectedRows.filter(id => id !== rowId)
+            : selected ? [rowId] : [];
+        onSelectionChange(newSelectedRows);
+    }, [selectionType, selectedRows, onSelectionChange]);
+    const handleClearSelection = useCallback(() => {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
+    }, [onSelectionChange]);
+    return {
+        isAllSelected,
+        isIndeterminate,
+        handleSelectAll,
+        handleSelectionChange,
+        handleClearSelection,
+    };
+}
+
+export { useTableSelection };

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

@@ -0,0 +1,22 @@
+import { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps } from './Table.types';
+import { TableActions } from './TableActions';
+import { TableActionsMenu } from './TableActionsMenu';
+import { TablePagination } from './TablePagination';
+import { TableFilter } from './TableFilter';
+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>;
+    Filter: typeof TableFilter;
+}
+declare const Table: TableCompound;
+export { Table };
+export type { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps, };
+export { TableActions, TableActionsMenu, TablePagination, TableFilter };
+export { inferFilterType, getOperatorsForFilterType, getDefaultOperator, isUnaryOperator, isBetweenOperator, filterData, operatorLabels, } from './Table.filterUtils';
+export { useTableColumns, useTableSelection, useTableExpansion, useTablePagination, useTableFilter, } from './hooks';

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

@@ -0,0 +1,24 @@
+import { Table as Table$1 } from './Table.js';
+import { HeaderCell, Cell, Row, Body, Header } from './TableDeclarative.js';
+import { TableActions } from './TableActions.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'tailwind-merge';
+import 'react';
+import { TablePagination } from './TablePagination.js';
+import { TableFilter } from './TableFilter.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,
+    Filter: TableFilter,
+});
+
+export { Table, TableActions, TableFilter, 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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TabsProps } from "./Tabs.types";
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
+    List: React.ForwardRefExoticComponent<import("./Tabs.types").TabsListProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,90 @@
+import { jsx } from 'react/jsx-runtime';
+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';
+import { TabsList } from './TabsList.js';
+import { TabsTrigger } from './TabsTrigger.js';
+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
+ */
+const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
+    const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
+    // Track trigger elements for underline positioning
+    const triggerRefs = useRef(new Map());
+    // Handle controlled vs uncontrolled
+    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.");
+        }
+        // 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,
+        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 (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, darkMode && "dark", 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: children }) }));
+});
+// Set display name for dev tools and Storybook
+TabsComponent.displayName = "Tabs";
+// Create compound component with proper typing
+const Tabs = Object.assign(TabsComponent, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent,
+});
+
+export { Tabs };

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

@@ -0,0 +1,16 @@
+import { TabsSize } from './Tabs.types';
+/**
+ * Clean theme structure for Tabs components
+ */
+export interface TabsTheme {
+    baseStyle: string;
+    listStyle: string;
+    triggerStyle: string;
+    triggerSizes: Record<TabsSize, string>;
+    contentStyle: string;
+    underlineStyle: string;
+}
+/**
+ * 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

@@ -0,0 +1,22 @@
+/**
+ * Default theme for Tabs components - simplified and organized with proper design tokens
+ */
+const tabsTheme = {
+    // Container styles
+    baseStyle: "flex flex-col",
+    // 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-1",
+    },
+    // 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

@@ -0,0 +1,142 @@
+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 Currently only horizontal orientation is supported
+ * @example
+ * <Tabs orientation="horizontal"> - Horizontal tab layout (default)
+ */
+export type TabsOrientation = "horizontal";
+/**
+ * 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) - when provided, component is controlled */
+    value?: string;
+    /** The default selected value (uncontrolled mode) - used when value is not provided */
+    defaultValue?: string;
+    /** Function called when selection changes - receives the new active tab value */
+    onValueChange?: (value: string) => void;
+    /** Orientation of the tabs (currently only horizontal is supported) */
+    orientation?: TabsOrientation;
+    /** Size variant for all tab triggers within this tabs instance */
+    size?: TabsSize;
+    /** Whether all tabs are disabled - individual triggers can also be disabled */
+    disabled?: boolean;
+    /** Children components - typically Tabs.List and Tabs.Content components */
+    children?: React.ReactNode;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+/**
+ * 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 - should only contain Tabs.Trigger elements */
+    children?: React.ReactNode;
+}
+/**
+ * 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 unique value identifier for this tab - used to associate with corresponding content */
+    value: string;
+    /** Whether this specific tab trigger is disabled (overrides parent tabs disabled state) */
+    disabled?: boolean;
+    /** 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 - 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 corresponds to a TabsTrigger value - determines when content is shown */
+    value: string;
+    /** Whether to keep content mounted in DOM when inactive (useful for preserving form state) */
+    forceMount?: boolean;
+    /** Content to display when this tab is active */
+    children?: React.ReactNode;
+}
+/**
+ * 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

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

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

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { tabsTheme } from './Tabs.theme.js';
+import { useTabsContext } from './TabsContext.js';
+import { getTabsContentVariants } from './Tabs.animations.js';
+
+/**
+ * TabsContent component displays content panels for tabs with directional fade animations
+ */
+const TabsContent = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
+    const { value: selectedValue, orientation } = useTabsContext();
+    const shouldReduceMotion = useReducedMotion();
+    // Check if we're in Storybook and should disable animations
+    const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    const shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    const isSelected = value === selectedValue;
+    const shouldRender = forceMount || isSelected;
+    // Compute animation variants without a global cache (HMR-safe)
+    const contentVariants = useMemo(() => getTabsContentVariants(shouldDisableAnimations), [shouldDisableAnimations]);
+    // For forceMount, we handle visibility differently to preserve DOM
+    if (forceMount) {
+        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, !isSelected && "hidden", // Hide when not selected but force mounted
+            className // User overrides take precedence
+            ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
+                // Ensure proper stacking context for animations
+                position: "relative",
+            }, ...props, children: children }));
+    }
+    // Standard behavior with AnimatePresence for enter/exit animations
+    if (!shouldRender) {
+        return null;
+    }
+    // Determine animation props (user props will override due to spread order)
+    const animationProps = shouldDisableAnimations ? {} : {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: contentVariants,
+    };
+    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.contentStyle, className // User overrides take precedence
+            ), "data-state": "active", "data-orientation": orientation, style: {
+                // Ensure proper stacking context for animations
+                position: "relative",
+            }, ...animationProps, ...props, children: children }, `content-${value}`)) }));
+});
+TabsContent.displayName = "TabsContent";
+
+export { TabsContent };