flikkui 0.1.0-beta.11

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
+ */
+var 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,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 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;
+}
+/**
+ * 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,53 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsTheme } from './Tabs.theme.js';
+import { useTabsContext } from './TabsContext.js';
+import { getTabsContentVariants } from './Tabs.animations.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+
+/**
+ * TabsContent component displays content panels for tabs with directional fade animations
+ */
+var TabsContent = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.forceMount, forceMount = _b === void 0 ? false : _b, children = _a.children, className = _a.className, props = __rest(_a, ["value", "forceMount", "children", "className"]);
+    var _c = useTabsContext(), selectedValue = _c.value, orientation = _c.orientation;
+    var shouldReduceMotion = useReducedMotion();
+    // Check if we're in Storybook and should disable animations
+    var isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    var shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    var isSelected = value === selectedValue;
+    var shouldRender = forceMount || isSelected;
+    // Compute animation variants without a global cache (HMR-safe)
+    var contentVariants = useMemo(function () { return getTabsContentVariants(shouldDisableAnimations); }, [shouldDisableAnimations]);
+    // For forceMount, we handle visibility differently to preserve DOM
+    if (forceMount) {
+        return (React__default.createElement(motion.div, __assign({ ref: ref, role: "tabpanel", "aria-labelledby": "".concat(value, "-tab"), id: "".concat(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));
+    }
+    // Standard behavior with AnimatePresence for enter/exit animations
+    if (!shouldRender) {
+        return null;
+    }
+    // Determine animation props (user props will override due to spread order)
+    var animationProps = shouldDisableAnimations ? {} : {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: contentVariants,
+    };
+    return (React__default.createElement(AnimatePresence, { mode: "wait" }, isSelected && (React__default.createElement(motion.div, __assign({ key: "content-".concat(value), ref: ref, role: "tabpanel", "aria-labelledby": "".concat(value, "-tab"), id: "".concat(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))));
+});
+TabsContent.displayName = "TabsContent";
+
+export { TabsContent };

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { TabsContextValue } from "./Tabs.types";
+/**
+ * Context for sharing state between Tabs container and child components
+ */
+export declare const TabsContext: React.Context<TabsContextValue | null>;
+/**
+ * Hook to consume TabsContext
+ */
+export declare const useTabsContext: () => TabsContextValue;

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

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context for sharing state between Tabs container and child components
+ */
+var TabsContext = createContext(null);
+/**
+ * Hook to consume TabsContext
+ */
+var useTabsContext = function () {
+    var context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("Tabs components must be used within a Tabs component");
+    }
+    return context;
+};
+
+export { TabsContext, useTabsContext };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsListProps } from "./Tabs.types";
+/**
+ * TabsList component displays the tab headers container with sliding underline
+ */
+export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,91 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsTheme } from './Tabs.theme.js';
+import { useTabsContext } from './TabsContext.js';
+import { getUnderlineTransition } from './Tabs.animations.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * TabsList component displays the tab headers container with sliding underline
+ */
+var TabsList = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var _b = useTabsContext(), activeValue = _b.value, orientation = _b.orientation, size = _b.size;
+    var shouldReduceMotion = useReducedMotion();
+    // State for underline position and visibility
+    var _c = useState(null), underlinePosition = _c[0], setUnderlinePosition = _c[1];
+    var _d = useState(false), showUnderline = _d[0], setShowUnderline = _d[1];
+    // Ref to access the list element for calculations
+    var listRef = useRef(null);
+    // Calculate underline position based on active tab
+    var updateUnderlinePosition = useMemo(function () {
+        return function () {
+            if (!activeValue || !listRef.current) {
+                setShowUnderline(false);
+                return;
+            }
+            // Find the active trigger element
+            var activeTrigger = listRef.current.querySelector("[data-value=\"".concat(activeValue, "\"]"));
+            if (!activeTrigger) {
+                setShowUnderline(false);
+                return;
+            }
+            // Get the position relative to the list container
+            var listRect = listRef.current.getBoundingClientRect();
+            var triggerRect = activeTrigger.getBoundingClientRect();
+            var left = triggerRect.left - listRect.left;
+            var width = triggerRect.width;
+            setUnderlinePosition({ left: left, width: width });
+            setShowUnderline(true);
+        };
+    }, [activeValue]);
+    // Update underline position when active value changes or on mount
+    useEffect(function () {
+        // Small delay to ensure DOM is updated
+        var timeoutId = setTimeout(updateUnderlinePosition, 0);
+        return function () { return clearTimeout(timeoutId); };
+    }, [updateUnderlinePosition]);
+    // Handle window resize to recalculate positions
+    useEffect(function () {
+        var handleResize = function () {
+            updateUnderlinePosition();
+        };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, [updateUnderlinePosition]);
+    // Animation configuration for underline
+    var underlineAnimation = useMemo(function () {
+        return {
+            initial: false,
+            animate: underlinePosition ? {
+                x: underlinePosition.left,
+                width: underlinePosition.width,
+            } : {
+                x: 0,
+                width: 0,
+            },
+            transition: getUnderlineTransition(shouldReduceMotion),
+        };
+    }, [underlinePosition, shouldReduceMotion]);
+    return (React__default.createElement("div", __assign({ ref: function (node) {
+            listRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, role: "tablist", "aria-orientation": orientation, className: cn(tabsTheme.listStyle, className), "data-orientation": orientation, "data-size": size }, props),
+        children,
+        showUnderline && underlinePosition && (React__default.createElement(motion.div, __assign({ className: cn(tabsTheme.underlineStyle, "pointer-events-none" // Prevent interference with tab interactions
+            ), style: {
+                position: 'absolute',
+                bottom: 0,
+            } }, underlineAnimation, { "aria-hidden": "true" // Decorative element
+         })))));
+});
+TabsList.displayName = "TabsList";
+
+export { TabsList };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsTriggerProps } from "./Tabs.types";
+/**
+ * TabsTrigger component displays individual tab headers with optional animations
+ */
+export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,143 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo, useCallback, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsTheme } from './Tabs.theme.js';
+import { useTabsContext } from './TabsContext.js';
+import { getTabsTriggerVariants } from './Tabs.animations.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * TabsTrigger component displays individual tab headers with optional animations
+ */
+var TabsTrigger = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, children = _a.children, className = _a.className, onClick = _a.onClick, onKeyDown = _a.onKeyDown, props = __rest(_a, ["value", "disabled", "children", "className", "onClick", "onKeyDown"]);
+    var _c = useTabsContext(), selectedValue = _c.value, onValueChange = _c.onValueChange, orientation = _c.orientation, size = _c.size, contextDisabled = _c.disabled, registerTrigger = _c.registerTrigger, unregisterTrigger = _c.unregisterTrigger;
+    var shouldReduceMotion = useReducedMotion();
+    // Check if we're in Storybook and should disable animations
+    var isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    var shouldDisableAnimations = !!shouldReduceMotion || isInStorybook;
+    // Memoize derived state flags for performance
+    var derivedState = useMemo(function () { return ({
+        isSelected: value === selectedValue,
+        isDisabled: disabled || contextDisabled,
+    }); }, [value, selectedValue, disabled, contextDisabled]);
+    var isSelected = derivedState.isSelected, isDisabled = derivedState.isDisabled;
+    // Compute animation variants without a global cache (HMR-safe)
+    var triggerVariants = useMemo(function () { return getTabsTriggerVariants(shouldDisableAnimations); }, [shouldDisableAnimations]);
+    // Dev-time a11y warning for icon-only triggers without aria-label
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof children === 'object' && React__default.isValidElement(children) && !props["aria-label"]) {
+            // If children is just an icon element, warn about missing aria-label
+            var childType = children.type;
+            if (typeof childType === 'function' && childType.name && childType.name.includes('Icon')) {
+                // eslint-disable-next-line no-console
+                console.warn("TabsTrigger with icon-only content should have 'aria-label' for accessibility.");
+            }
+        }
+    }
+    // Safe onClick handler with error handling
+    var handleClick = useCallback(function (event) {
+        if (isDisabled)
+            return;
+        try {
+            onValueChange(value);
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                console.error("Error in tab trigger click handler:", error);
+            }
+        }
+    }, [isDisabled, onValueChange, value, onClick]);
+    // Enhanced keyboard navigation handler with error handling
+    var handleKeyDown = useCallback(function (event) {
+        var _a, _b;
+        // Handle keyboard navigation for tabs
+        if (!isDisabled) {
+            try {
+                switch (event.key) {
+                    case "ArrowLeft":
+                    case "ArrowUp":
+                        event.preventDefault();
+                        // Move to previous tab - focus previous trigger
+                        var prevTrigger = event.currentTarget.previousElementSibling;
+                        if (prevTrigger && prevTrigger.tagName === 'BUTTON' && !prevTrigger.disabled) {
+                            prevTrigger.focus();
+                            prevTrigger.click();
+                        }
+                        break;
+                    case "ArrowRight":
+                    case "ArrowDown":
+                        event.preventDefault();
+                        // Move to next tab - focus next trigger
+                        var nextTrigger = event.currentTarget.nextElementSibling;
+                        if (nextTrigger && nextTrigger.tagName === 'BUTTON' && !nextTrigger.disabled) {
+                            nextTrigger.focus();
+                            nextTrigger.click();
+                        }
+                        break;
+                    case "Home":
+                        event.preventDefault();
+                        // Move to first tab
+                        var firstTrigger = (_a = event.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+                        if (firstTrigger && firstTrigger.tagName === 'BUTTON' && !firstTrigger.disabled) {
+                            firstTrigger.focus();
+                            firstTrigger.click();
+                        }
+                        break;
+                    case "End":
+                        event.preventDefault();
+                        // Move to last tab
+                        var lastTrigger = (_b = event.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.lastElementChild;
+                        if (lastTrigger && lastTrigger.tagName === 'BUTTON' && !lastTrigger.disabled) {
+                            lastTrigger.focus();
+                            lastTrigger.click();
+                        }
+                        break;
+                }
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    // eslint-disable-next-line no-console
+                    console.error("Error in tab trigger keyboard handler:", error);
+                }
+            }
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [isDisabled, onKeyDown]);
+    // Memoize theme classes to prevent recalculation on every render
+    var themeClasses = useMemo(function () {
+        return {
+            triggerStyle: tabsTheme.triggerStyle,
+            sizeStyle: tabsTheme.triggerSizes[size],
+        };
+    }, [size]);
+    // Generate default aria-label for icon-only triggers if not provided (fallback only)
+    var ariaLabel = props["aria-label"] || undefined;
+    // Register/unregister this trigger for underline positioning
+    useEffect(function () {
+        // Register with a slight delay to ensure DOM is ready
+        var timeoutId = setTimeout(function () {
+            if (ref && typeof ref === 'object' && ref.current) {
+                registerTrigger(value, ref.current);
+            }
+        }, 0);
+        return function () {
+            clearTimeout(timeoutId);
+            unregisterTrigger(value);
+        };
+    }, [value, registerTrigger, unregisterTrigger, ref]);
+    // Determine animation props (user props will override due to spread order)
+    var animationProps = shouldDisableAnimations ? {} : {
+        whileHover: !isDisabled ? "hover" : undefined,
+        whileTap: !isDisabled ? "tap" : undefined,
+        variants: triggerVariants,
+    };
+    return (React__default.createElement(motion.button, __assign({ ref: ref, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": "".concat(value, "-content"), id: "".concat(value, "-tab"), tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(themeClasses.triggerStyle, themeClasses.sizeStyle, className // User overrides take precedence
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-value": value, "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled, "data-orientation": orientation, "aria-disabled": isDisabled || undefined, "aria-label": ariaLabel }, animationProps, props), children));
+});
+TabsTrigger.displayName = "TabsTrigger";
+
+export { TabsTrigger };

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

@@ -0,0 +1,6 @@
+export { Tabs } from './Tabs';
+export { TabsList } from './TabsList';
+export { TabsTrigger } from './TabsTrigger';
+export { TabsContent } from './TabsContent';
+export { TabsContext, useTabsContext } from './TabsContext';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, TabsSize, TabsOrientation, TabsContextValue } from './Tabs.types';

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

@@ -0,0 +1,31 @@
+export declare const toastAnimations: {
+    initial: {
+        opacity: number;
+        y: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+    transition: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+};
+export declare const getToastStackingAnimation: (index: number, totalToasts: number, isExpanded: boolean) => {
+    y?: undefined;
+    scale?: undefined;
+    zIndex?: undefined;
+    opacity?: undefined;
+} | {
+    y: number;
+    scale: number;
+    zIndex: number;
+    opacity: number;
+};

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

@@ -0,0 +1,58 @@
+var toastAnimations = {
+    // Initial state when toast appears
+    initial: {
+        opacity: 0,
+        y: 50,
+        scale: 0.3,
+    },
+    // Exit animation when toast is dismissed
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        transition: { duration: 0.2 },
+    },
+    // Spring transition configuration
+    transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 30,
+        mass: 1,
+    },
+};
+// Stacking animation utilities
+var getToastStackingAnimation = function (index, totalToasts, isExpanded) {
+    if (totalToasts === 1)
+        return {};
+    var maxVisible = 3; // Show max 3 toasts in stack
+    var stackIndex = Math.min(index, maxVisible - 1);
+    if (isExpanded) {
+        // Expanded state - show all toasts with sufficient gap to prevent overlap
+        // Use a larger gap to accommodate variable heights
+        return {
+            y: index * 100, // 100px gap between toasts when expanded (increased from 80px)
+            scale: 1,
+            zIndex: totalToasts - index,
+            opacity: 1,
+        };
+    }
+    else {
+        // Stacked state - compress toasts
+        if (index >= maxVisible) {
+            // Show toasts beyond max visible but more compressed
+            return {
+                y: (maxVisible - 1) * 16,
+                scale: 1 - (maxVisible - 1) * 0.08,
+                zIndex: 0,
+                opacity: 0.3,
+            };
+        }
+        return {
+            y: stackIndex * 16, // 16px offset for each toast (increased from 12px)
+            scale: 1 - stackIndex * 0.08,
+            zIndex: totalToasts - index,
+            opacity: 1 - stackIndex * 0.25,
+        };
+    }
+};
+
+export { getToastStackingAnimation, toastAnimations };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToastProps } from './Toast.types';
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;