@mks2508/mks-ui 0.3.1 → 0.4.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

package/src/react-ui/ui/index.ts

@@ -31,6 +31,7 @@ export * from './InputGroup';
 export * from './Label';
 export * from './Select';
 export * from './Separator';
+export * from './Textarea';
 export * from './DataCard';
 
 // WAAPI-based components

package/dist/index.css

@@ -1,129 +0,0 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist-mono";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.577 0.245 27.325);
-    --primary-foreground: oklch(0.971 0.013 17.38);
-    --secondary: oklch(0.967 0.001 286.375);
-    --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.58 0.22 27);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.808 0.114 19.571);
-    --chart-2: oklch(0.637 0.237 25.331);
-    --chart-3: oklch(0.577 0.245 27.325);
-    --chart-4: oklch(0.505 0.213 27.518);
-    --chart-5: oklch(0.444 0.177 26.899);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.577 0.245 27.325);
-    --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.637 0.237 25.331);
-    --primary-foreground: oklch(0.971 0.013 17.38);
-    --secondary: oklch(0.274 0.006 286.033);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.808 0.114 19.571);
-    --chart-2: oklch(0.637 0.237 25.331);
-    --chart-3: oklch(0.577 0.245 27.325);
-    --chart-4: oklch(0.505 0.213 27.518);
-    --chart-5: oklch(0.444 0.177 26.899);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.637 0.237 25.331);
-    --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-    --font-mono: 'Geist Mono Variable', monospace;
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-    }
-  body {
-    @apply font-sans bg-background text-foreground;
-    }
-  html {
-    @apply font-sans;
-    }
-}