@mks2508/mks-ui 0.3.2 → 0.5.0

package/src/react-ui/ui/Tabs/index.tsx

@@ -1,32 +1,50 @@
 'use client';
 
 /**
- * Tabs component -- animated tab navigation built on base-ui Tabs
- * with motion transitions, highlight tracking, auto-height panels,
- * and the v0.2.0 slot system.
+ * Tabs component -- styled tab navigation built on base-ui Tabs
+ * with CVA variants, CSS Anchor Positioning indicator, motion panel
+ * transitions, and the slot override system.
  *
- * Provides sub-components for the tab list, individual tabs, panels,
- * animated highlight indicators, and a panels container with two modes:
- * auto-height (ResizeObserver) and layout (Motion layout animation).
+ * Out-of-the-box styled with 5 variants (default, outline, ghost,
+ * underline, pill) and 3 sizes (sm, default, lg). The sliding indicator
+ * uses CSS Anchor Positioning API for zero-JS position tracking.
  *
  * @module @mks2508/mks-ui/react/ui/Tabs
  *
  * @example
  * ```tsx
- * <Tabs defaultValue="general" slots={{ list: 'flex gap-1 border-b' }}>
+ * // Simplest usage -- styled out of the box
+ * <Tabs defaultValue="general">
  *   <TabsList>
+ *     <TabsTab value="general">General</TabsTab>
+ *     <TabsTab value="advanced">Advanced</TabsTab>
+ *   </TabsList>
+ *   <TabsPanels>
+ *     <TabsPanel value="general">General content</TabsPanel>
+ *     <TabsPanel value="advanced">Advanced content</TabsPanel>
+ *   </TabsPanels>
+ * </Tabs>
+ *
+ * // With variant + size
+ * <Tabs defaultValue="a">
+ *   <TabsList variant="underline" size="lg">
+ *     <TabsTab value="a">Alpha</TabsTab>
+ *     <TabsTab value="b">Beta</TabsTab>
+ *   </TabsList>
+ *   <TabsPanel value="a">...</TabsPanel>
+ * </Tabs>
+ *
+ * // With Highlight primitive (advanced)
+ * <Tabs defaultValue="general">
+ *   <TabsList indicator={false}>
  *     <TabsHighlight className="rounded-md bg-white/10">
  *       <TabsHighlightItem value="general">
  *         <TabsTab value="general">General</TabsTab>
  *       </TabsHighlightItem>
- *       <TabsHighlightItem value="advanced">
- *         <TabsTab value="advanced">Advanced</TabsTab>
- *       </TabsHighlightItem>
  *     </TabsHighlight>
  *   </TabsList>
  *   <TabsPanels>
- *     <TabsPanel value="general">General content</TabsPanel>
- *     <TabsPanel value="advanced">Advanced content</TabsPanel>
+ *     <TabsPanel value="general">Content</TabsPanel>
  *   </TabsPanels>
  * </Tabs>
  * ```
@@ -48,7 +66,12 @@ import { AutoHeight } from '@/react-ui/primitives/AutoHeight';
 import { getStrictContext } from '@/react-ui/lib/get-strict-context';
 import { useControlledState } from '@/react-ui/hooks/State/UseControlledState';
 import { cn } from '@/react-ui/lib/utils';
-import { tabsStyles } from './Tabs.styles';
+import {
+  tabsStyles,
+  tabsListVariants,
+  tabsTabVariants,
+  tabsIndicatorVariants,
+} from './Tabs.styles';
 
 import type {
   TabsContextType,
@@ -62,13 +85,48 @@ import type {
   ITabsPanelsAutoProps,
 } from './Tabs.types';
 
+// ---------------------------------------------------------------------------
+// CSS Anchor Positioning (injected once via <style>)
+// ---------------------------------------------------------------------------
+
+const TABS_CSS_ID = 'mks-tabs-anchor-css';
+const TABS_ANCHOR_CSS = `
+[data-slot="tabs-list"]{anchor-scope:--tabs-active}
+[data-slot="tabs-tab"][data-active]{anchor-name:--tabs-active}
+[data-slot="tabs-indicator"]{position-anchor:--tabs-active;left:anchor(left);right:anchor(right);transition:top 200ms cubic-bezier(.25,.46,.45,.94),left 200ms cubic-bezier(.25,.46,.45,.94),right 200ms cubic-bezier(.25,.46,.45,.94),bottom 200ms cubic-bezier(.25,.46,.45,.94),width 200ms cubic-bezier(.25,.46,.45,.94),height 200ms cubic-bezier(.25,.46,.45,.94)}
+@media(prefers-reduced-motion:reduce){[data-slot="tabs-indicator"]{transition-duration:0ms}}
+`;
+
+/**
+ * Injects the CSS Anchor Positioning rules into the document head once.
+ * Safe for SSR -- no-ops on the server.
+ */
+function useTabsAnchorCSS() {
+  React.useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(TABS_CSS_ID)) return;
+    const style = document.createElement('style');
+    style.id = TABS_CSS_ID;
+    style.textContent = TABS_ANCHOR_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
 
+/** Variant context so children (TabsTab) inherit the parent variant/size. */
+type TabsVariantContext = {
+  variant?: ITabsListProps['variant'];
+  size?: ITabsListProps['size'];
+};
+
 const [TabsProvider, useTabs] =
   getStrictContext<TabsContextType>('TabsContext');
 
+const TabsVariantCtx = React.createContext<TabsVariantContext>({});
+
 // ---------------------------------------------------------------------------
 // Tabs (Root)
 // ---------------------------------------------------------------------------
@@ -159,26 +217,61 @@ function TabsHighlight({
 
 /**
  * TabsList -- the container holding tab trigger buttons.
- * Renders a base-ui Tabs.List with the `list` slot classes.
+ * Renders a base-ui Tabs.List with CVA variant/size styling and
+ * an optional CSS Anchor-based sliding indicator.
  *
+ * @param variant - Visual variant: 'default' | 'outline' | 'ghost' | 'underline' | 'pill'
+ * @param size - Size: 'sm' | 'default' | 'lg'
+ * @param indicator - Show sliding indicator (default: true for default/outline/pill)
  * @param slots - Partial class overrides per slot
  * @param className - Additional class names
  *
  * @example
  * ```tsx
- * <TabsList className="flex gap-1 border-b border-white/10 pb-1">
- *   <TabsTab value="general">General</TabsTab>
- *   <TabsTab value="advanced">Advanced</TabsTab>
+ * <TabsList variant="pill" size="sm">
+ *   <TabsTab value="a">Alpha</TabsTab>
+ *   <TabsTab value="b">Beta</TabsTab>
  * </TabsList>
  * ```
  */
-function TabsList({ slots, className, ...props }: ITabsListProps) {
+function TabsList({
+  variant,
+  size,
+  indicator,
+  slots,
+  className,
+  children,
+  ...props
+}: ITabsListProps) {
+  useTabsAnchorCSS();
+  const resolvedVariant = variant ?? 'default';
+  const showIndicator = indicator ?? !['ghost', 'underline'].includes(resolvedVariant);
+
   return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(tabsStyles.list, slots?.list, className)}
-      {...props}
-    />
+    <TabsVariantCtx.Provider value={{ variant: resolvedVariant, size }}>
+      <TabsPrimitive.List
+        data-slot="tabs-list"
+        data-variant={resolvedVariant}
+        className={cn(
+          tabsListVariants({ variant: resolvedVariant, size }),
+          slots?.list,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showIndicator && (
+          <span
+            data-slot="tabs-indicator"
+            aria-hidden="true"
+            className={cn(
+              tabsIndicatorVariants({ variant: resolvedVariant }),
+              slots?.indicator,
+            )}
+          />
+        )}
+      </TabsPrimitive.List>
+    </TabsVariantCtx.Provider>
   );
 }
 
@@ -211,24 +304,36 @@ function TabsHighlightItem({ slots, ...props }: ITabsHighlightItemProps) {
 
 /**
  * TabsTab -- a single tab trigger button that activates its panel.
- * Renders a base-ui Tabs.Tab with the `tab` slot classes.
+ * Inherits variant/size from the parent TabsList context, or can be
+ * overridden per-tab.
  *
  * @param value - The value this tab represents
+ * @param variant - Override parent variant
+ * @param size - Override parent size
  * @param slots - Partial class overrides per slot
  * @param className - Additional class names
  *
  * @example
  * ```tsx
- * <TabsTab value="general" className="px-3 py-1.5 text-sm font-medium">
+ * <TabsTab value="general">
+ *   <Search className="size-4" />
  *   General
  * </TabsTab>
  * ```
  */
-function TabsTab({ slots, className, ...props }: ITabsTabProps) {
+function TabsTab({ variant, size, slots, className, ...props }: ITabsTabProps) {
+  const ctx = React.useContext(TabsVariantCtx);
+  const resolvedVariant = variant ?? ctx.variant;
+  const resolvedSize = size ?? ctx.size;
+
   return (
     <TabsPrimitive.Tab
       data-slot="tabs-tab"
-      className={cn(tabsStyles.tab, slots?.tab, className)}
+      className={cn(
+        tabsTabVariants({ variant: resolvedVariant, size: resolvedSize }),
+        slots?.tab,
+        className,
+      )}
       {...props}
     />
   );
@@ -401,6 +506,9 @@ export {
   TabsTab,
   TabsPanel,
   TabsPanels,
+  tabsListVariants,
+  tabsTabVariants,
+  tabsIndicatorVariants,
 };
 
 // Re-export all types