@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,3 +1,5 @@
+import { semanticSpinnerColors } from '../../../utils/colorUtils.js';
+
 /**
  * Default theme for the Spinner component
  */
@@ -12,12 +14,8 @@ const spinnerTheme = {
     },
     // Color variants
     colors: {
-        neutral: "border-[var(--color-border)] border-t-transparent",
-        dark: "border-[var(--color-background-quinary)] border-t-transparent",
-        primary: "border-[var(--color-primary)] border-t-transparent",
-        success: "border-[var(--color-success)] border-t-transparent",
-        warning: "border-[var(--color-warning)] border-t-transparent",
-        danger: "border-[var(--color-danger)] border-t-transparent",
+        ...semanticSpinnerColors,
+        dark: "border-[var(--color-surface-sunken)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

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

@@ -21,8 +21,9 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     theme?: SpinnerThemeOverrides;
 }
+import { SemanticColor } from "../../../utils/colorUtils";
 export type SpinnerSize = "sm" | "md" | "lg";
-export type SpinnerColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export type SpinnerColor = SemanticColor | "dark";
 export interface SpinnerThemeOverrides {
     baseStyle?: string;
     sizes?: Partial<Record<SpinnerSize, string>>;

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

@@ -17,7 +17,7 @@ export interface UnderlinePosition {
  */
 export declare const getUnderlineTransition: (shouldReduceMotion: boolean | null) => Transition;
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody 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;
+export declare const getTabsBodyVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

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

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Get Tabs trigger animation variants based on reduced motion preference
  * Provides subtle micro-interactions for enhanced UX while respecting accessibility
@@ -45,10 +46,10 @@ const getUnderlineTransition = (shouldReduceMotion) => {
     };
 };
 /**
- * Get TabsContent animation variants for directional fade animations
+ * Get TabsBody animation variants for directional fade animations
  * Provides smooth fade-in from bottom and fade-out to top transitions
  */
-const getTabsContentVariants = (shouldReduceMotion) => {
+const getTabsBodyVariants = (shouldReduceMotion) => {
     if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
         // Reduced motion: no animation variants
         return undefined;
@@ -81,4 +82,4 @@ const getTabsContentVariants = (shouldReduceMotion) => {
     };
 };
 
-export { getTabsContentVariants, getTabsTriggerVariants, getUnderlineTransition };
+export { getTabsBodyVariants, getTabsTriggerVariants, getUnderlineTransition };

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

@@ -3,5 +3,5 @@ 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>>;
+    Body: React.ForwardRefExoticComponent<import("./Tabs.types").TabsBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -1,19 +1,25 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useCallback, useMemo } from 'react';
+import React__default, { useState, useId, 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';
+import { TabsBody } from './TabsBody.js';
 
 /**
  * Tabs component for organizing content into separate views
- * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Body
  * 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 whether the user has switched tabs yet, so content only animates
+    // on an actual tab change and not on mount / page load.
+    const [hasSwitched, setHasSwitched] = useState(false);
+    // Unique instance prefix to scope all DOM IDs to this Tabs instance
+    const instanceId = useId();
     // Track trigger elements for underline positioning
     const triggerRefs = useRef(new Map());
     // Handle controlled vs uncontrolled
@@ -40,6 +46,7 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
     // Safe value change handler with error handling
     const handleValueChange = useCallback((newValue) => {
         try {
+            setHasSwitched(true);
             if (!isControlled) {
                 setCurrentValue(newValue);
             }
@@ -68,15 +75,16 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         disabled,
         registerTrigger,
         unregisterTrigger,
-    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger]);
+        instanceId,
+        hasSwitched,
+    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId, hasSwitched]);
     // 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 }) }));
+            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, ...props, children: children }) }));
 });
 // Set display name for dev tools and Storybook
 TabsComponent.displayName = "Tabs";
@@ -84,7 +92,7 @@ TabsComponent.displayName = "Tabs";
 const Tabs = Object.assign(TabsComponent, {
     List: TabsList,
     Trigger: TabsTrigger,
-    Content: TabsContent,
+    Body: TabsBody,
 });
 
 export { Tabs };

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

@@ -1,4 +1,4 @@
-import { TabsSize } from './Tabs.types';
+import { TabsSize } from "./Tabs.types";
 /**
  * Clean theme structure for Tabs components
  */
@@ -7,7 +7,7 @@ export interface TabsTheme {
     listStyle: string;
     triggerStyle: string;
     triggerSizes: Record<TabsSize, string>;
-    contentStyle: string;
+    bodyStyle: string;
     underlineStyle: string;
 }
 /**

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

@@ -5,16 +5,16 @@ 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",
+    listStyle: "relative inline-flex items-center flex-row border-b border-[var(--color-border)] gap-6",
     // 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)]",
+    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-semibold 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",
+        sm: "px-0 py-1.5 text-sm",
+        md: "px-0 py-2 text-sm",
     },
-    // 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",
+    // TabsBody styles with proper CSS variables
+    bodyStyle: "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",
 };

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

@@ -23,8 +23,8 @@ export type TabsOrientation = "horizontal";
  *     <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.Body value="tab1">Content 1</Tabs.Body>
+ *   <Tabs.Body value="tab2">Content 2</Tabs.Body>
  * </Tabs>
  *
  * // Uncontrolled mode
@@ -46,7 +46,7 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     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 components - typically Tabs.List and Tabs.Body components */
     children?: React.ReactNode;
     /**
      * Force dark mode styling for the component. Use when placing the component
@@ -98,20 +98,20 @@ export interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement
     'aria-label'?: string;
 }
 /**
- * TabsContent component props - content panel for each tab
+ * TabsBody component props - content panel for each tab
  * @example
  * ```tsx
- * <Tabs.Content value="profile">
+ * <Tabs.Body value="profile">
  *   <UserProfile data={profileData} />
- * </Tabs.Content>
+ * </Tabs.Body>
  *
  * // Force mount content for performance or state preservation
- * <Tabs.Content value="settings" forceMount>
+ * <Tabs.Body value="settings" forceMount>
  *   <SettingsForm /> // Form state preserved when tab is inactive
- * </Tabs.Content>
+ * </Tabs.Body>
  * ```
  */
-export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TabsBodyProps 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) */
@@ -139,4 +139,8 @@ export interface TabsContextValue {
     registerTrigger: (value: string, element: HTMLButtonElement) => void;
     /** Unregister a tab trigger when it unmounts */
     unregisterTrigger: (value: string) => void;
+    /** Unique prefix scoping DOM IDs to this Tabs instance */
+    instanceId: string;
+    /** Whether the user has switched tabs yet (false until the first change). Used to suppress content animation on mount. */
+    hasSwitched: boolean;
 }

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

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

package/dist/components/core/Tabs/{TabsContent.js → TabsBody.js}

@@ -1,27 +1,28 @@
+"use client";
 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';
+import { getTabsBodyVariants } from './Tabs.animations.js';
 
 /**
- * TabsContent component displays content panels for tabs with directional fade animations
+ * TabsBody 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 TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
+    const { value: selectedValue, orientation, instanceId, hasSwitched } = 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 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]);
+    const contentVariants = useMemo(() => getTabsBodyVariants(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
+        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${instanceId}-${value}-tab`, id: `${instanceId}-${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !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
@@ -32,19 +33,21 @@ const TabsContent = React__default.forwardRef(({ value, forceMount = false, chil
     if (!shouldRender) {
         return null;
     }
-    // Determine animation props (user props will override due to spread order)
+    // Determine animation props (user props will override due to spread order).
+    // Until the user switches tabs, the panel snaps in (initial=false) so it does
+    // not animate on mount / page load — only actual tab changes animate.
     const animationProps = shouldDisableAnimations ? {} : {
-        initial: "initial",
+        initial: hasSwitched ? "initial" : false,
         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
+    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${instanceId}-${value}-tab`, id: `${instanceId}-${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, 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";
+TabsBody.displayName = "Tabs.Body";
 
-export { TabsContent };
+export { TabsBody };

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 /**

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useMemo, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
@@ -18,26 +19,24 @@ const TabsList = React__default.forwardRef(({ children, className, ...props }, r
     // Ref to access the list element for calculations
     const listRef = useRef(null);
     // Calculate underline position based on active tab
-    const updateUnderlinePosition = useMemo(() => {
-        return () => {
-            if (!activeValue || !listRef.current) {
-                setShowUnderline(false);
-                return;
-            }
-            // Find the active trigger element
-            const activeTrigger = listRef.current.querySelector(`[data-value="${activeValue}"]`);
-            if (!activeTrigger) {
-                setShowUnderline(false);
-                return;
-            }
-            // Get the position relative to the list container
-            const listRect = listRef.current.getBoundingClientRect();
-            const triggerRect = activeTrigger.getBoundingClientRect();
-            const left = triggerRect.left - listRect.left;
-            const width = triggerRect.width;
-            setUnderlinePosition({ left, width });
-            setShowUnderline(true);
-        };
+    const updateUnderlinePosition = useCallback(() => {
+        if (!activeValue || !listRef.current) {
+            setShowUnderline(false);
+            return;
+        }
+        // Find the active trigger element
+        const activeTrigger = listRef.current.querySelector(`[data-value="${activeValue}"]`);
+        if (!activeTrigger) {
+            setShowUnderline(false);
+            return;
+        }
+        // Get the position relative to the list container
+        const listRect = listRef.current.getBoundingClientRect();
+        const triggerRect = activeTrigger.getBoundingClientRect();
+        const left = triggerRect.left - listRect.left;
+        const width = triggerRect.width;
+        setUnderlinePosition({ left, width });
+        setShowUnderline(true);
     }, [activeValue]);
     // Update underline position when active value changes or on mount
     useEffect(() => {

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useCallback, useEffect } from 'react';
+import React__default, { useRef, useEffect, useMemo, useCallback } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { tabsTheme } from './Tabs.theme.js';
@@ -10,11 +11,14 @@ import { getTabsTriggerVariants } from './Tabs.animations.js';
  * TabsTrigger component displays individual tab headers with optional animations
  */
 const TabsTrigger = React__default.forwardRef(({ value, disabled = false, children, className, onClick, onKeyDown, ...props }, ref) => {
-    const { value: selectedValue, onValueChange, orientation, size, disabled: contextDisabled, registerTrigger, unregisterTrigger } = useTabsContext();
+    const { value: selectedValue, onValueChange, orientation, size, disabled: contextDisabled, registerTrigger, unregisterTrigger, instanceId } = 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;
+    // Check if we're in Storybook — evaluated after mount to avoid SSR hydration mismatch
+    const isInStorybookRef = useRef(false);
+    useEffect(() => {
+        isInStorybookRef.current = typeof window !== 'undefined' && !!window.__STORYBOOK_DISABLE_ANIMATIONS__;
+    }, []);
+    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybookRef.current;
     // Memoize derived state flags for performance
     const derivedState = useMemo(() => ({
         isSelected: value === selectedValue,
@@ -51,7 +55,6 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
     }, [isDisabled, onValueChange, value, onClick]);
     // Enhanced keyboard navigation handler with error handling
     const handleKeyDown = useCallback((event) => {
-        var _a, _b;
         // Handle keyboard navigation for tabs
         if (!isDisabled) {
             try {
@@ -59,39 +62,74 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
                     case "ArrowLeft":
                     case "ArrowUp":
                         event.preventDefault();
-                        // Move to previous tab - focus previous trigger
-                        const prevTrigger = event.currentTarget.previousElementSibling;
-                        if (prevTrigger && prevTrigger.tagName === 'BUTTON' && !prevTrigger.disabled) {
-                            prevTrigger.focus();
-                            prevTrigger.click();
+                        // Move to previous *enabled* tab, skipping over any number of
+                        // consecutive disabled triggers and wrapping around the start
+                        // (same enabled-only trigger list Home/End use below).
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const currentIndex = allTabs.indexOf(event.currentTarget);
+                            if (allTabs.length > 0 && currentIndex !== -1) {
+                                const prevIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;
+                                const prevTrigger = allTabs[prevIndex];
+                                if (prevTrigger) {
+                                    prevTrigger.focus();
+                                    prevTrigger.click();
+                                }
+                            }
                         }
                         break;
                     case "ArrowRight":
                     case "ArrowDown":
                         event.preventDefault();
-                        // Move to next tab - focus next trigger
-                        const nextTrigger = event.currentTarget.nextElementSibling;
-                        if (nextTrigger && nextTrigger.tagName === 'BUTTON' && !nextTrigger.disabled) {
-                            nextTrigger.focus();
-                            nextTrigger.click();
+                        // Move to next *enabled* tab, skipping over any number of
+                        // consecutive disabled triggers and wrapping around the end.
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const currentIndex = allTabs.indexOf(event.currentTarget);
+                            if (allTabs.length > 0 && currentIndex !== -1) {
+                                const nextIndex = (currentIndex + 1) % allTabs.length;
+                                const nextTrigger = allTabs[nextIndex];
+                                if (nextTrigger) {
+                                    nextTrigger.focus();
+                                    nextTrigger.click();
+                                }
+                            }
                         }
                         break;
                     case "Home":
                         event.preventDefault();
-                        // Move to first tab
-                        const firstTrigger = (_a = event.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-                        if (firstTrigger && firstTrigger.tagName === 'BUTTON' && !firstTrigger.disabled) {
-                            firstTrigger.focus();
-                            firstTrigger.click();
+                        // Move to first tab — use role="tab" to skip the sliding underline element
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const firstTrigger = allTabs[0];
+                            if (firstTrigger) {
+                                firstTrigger.focus();
+                                firstTrigger.click();
+                            }
                         }
                         break;
                     case "End":
                         event.preventDefault();
-                        // Move to last tab
-                        const lastTrigger = (_b = event.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.lastElementChild;
-                        if (lastTrigger && lastTrigger.tagName === 'BUTTON' && !lastTrigger.disabled) {
-                            lastTrigger.focus();
-                            lastTrigger.click();
+                        // Move to last tab — use role="tab" to skip the sliding underline element
+                        {
+                            const tabList = event.currentTarget.parentElement;
+                            const allTabs = tabList
+                                ? Array.from(tabList.querySelectorAll('[role="tab"]:not([disabled])'))
+                                : [];
+                            const lastTrigger = allTabs[allTabs.length - 1];
+                            if (lastTrigger) {
+                                lastTrigger.focus();
+                                lastTrigger.click();
+                            }
                         }
                         break;
                 }
@@ -114,18 +152,23 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
     }, [size]);
     // Generate default aria-label for icon-only triggers if not provided (fallback only)
     const ariaLabel = props["aria-label"] || undefined;
-    // Register/unregister this trigger for underline positioning
-    useEffect(() => {
-        // Register with a slight delay to ensure DOM is ready
-        const timeoutId = setTimeout(() => {
-            if (ref && typeof ref === 'object' && ref.current) {
-                registerTrigger(value, ref.current);
-            }
-        }, 0);
-        return () => {
-            clearTimeout(timeoutId);
+    // Callback ref that registers/unregisters the trigger for underline positioning.
+    // Using a callback ref ensures registration fires whenever the DOM node mounts,
+    // not just when the ref object identity changes.
+    const triggerRef = useCallback((node) => {
+        if (node) {
+            registerTrigger(value, node);
+        }
+        else {
             unregisterTrigger(value);
-        };
+        }
+        // Forward to the outer ref passed by the consumer, if any
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
     }, [value, registerTrigger, unregisterTrigger, ref]);
     // Determine animation props (user props will override due to spread order)
     const animationProps = shouldDisableAnimations ? {} : {
@@ -133,7 +176,7 @@ const TabsTrigger = React__default.forwardRef(({ value, disabled = false, childr
         whileTap: !isDisabled ? "tap" : undefined,
         variants: triggerVariants,
     };
-    return (jsx(motion.button, { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": `${value}-content`, id: `${value}-tab`, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, className: cn(themeClasses.triggerStyle, themeClasses.sizeStyle, className // User overrides take precedence
+    return (jsx(motion.button, { ref: triggerRef, type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": `${instanceId}-${value}-content`, id: `${instanceId}-${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: children }));
 });
 TabsTrigger.displayName = "TabsTrigger";

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

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

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

@@ -1,17 +1,4 @@
 const tagVariants = {
-    initial: {
-        scale: 0,
-        opacity: 0,
-    },
-    animate: {
-        scale: 1,
-        opacity: 1,
-        transition: {
-            type: "spring",
-            stiffness: 500,
-            damping: 25,
-        },
-    },
     exit: {
         scale: 0,
         opacity: 0,

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

@@ -7,8 +7,8 @@ import { TagProps } from "./Tag.types";
  * @example
  * ```tsx
  * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
- * <Tag size="sm" removable={false}>Read Only</Tag>
- * <Tag disabled>Disabled Tag</Tag>
+ * <Tag avatar={{ src: "/avatar.jpg", name: "Alice" }} onRemove={() => {}}>Alice</Tag>
+ * <Tag startContent={<CodeIcon className="size-4" />} onRemove={() => {}}>React</Tag>
  * ```
  */
 export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;