Morphing Tabs

import * as React from 'react';
import { MorphingTabs } from '@/components/ui/MorphingTabs';

export default function MorphingTabsDemo() {
  return (
    <div className="w-full max-w-2xl mx-auto p-6">
      <MorphingTabs.Root
        defaultValue="overview"
        springStiffness={26}
        variant="pill"
        size="md"
      >
        <MorphingTabs.List>
          <MorphingTabs.Indicator />
          <MorphingTabs.Trigger value="overview">Overview</MorphingTabs.Trigger>
          <MorphingTabs.Trigger value="analytics">Analytics</MorphingTabs.Trigger>
          <MorphingTabs.Trigger value="reports">Reports</MorphingTabs.Trigger>
          <MorphingTabs.Trigger value="settings">Settings</MorphingTabs.Trigger>
        </MorphingTabs.List>

        <MorphingTabs.Content value="overview" className="rounded-2xl border border-neutral-200/80 bg-white/50 p-6 backdrop-blur-sm dark:border-neutral-800/80 dark:bg-neutral-900/50">
          <h3 className="text-base font-semibold text-neutral-900 dark:text-white">Executive Overview</h3>
          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">High-level KPIs, operational status, and real-time throughput metrics.</p>
        </MorphingTabs.Content>

        <MorphingTabs.Content value="analytics" className="rounded-2xl border border-neutral-200/80 bg-white/50 p-6 backdrop-blur-sm dark:border-neutral-800/80 dark:bg-neutral-900/50">
          <h3 className="text-base font-semibold text-neutral-900 dark:text-white">System Analytics</h3>
          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">P99 latency distribution, cache hit ratios, and edge worker health.</p>
        </MorphingTabs.Content>

        <MorphingTabs.Content value="reports" className="rounded-2xl border border-neutral-200/80 bg-white/50 p-6 backdrop-blur-sm dark:border-neutral-800/80 dark:bg-neutral-900/50">
          <h3 className="text-base font-semibold text-neutral-900 dark:text-white">Compliance Reports</h3>
          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Automated ISO 27001 audit trails and SOC 2 export logs.</p>
        </MorphingTabs.Content>

        <MorphingTabs.Content value="settings" className="rounded-2xl border border-neutral-200/80 bg-white/50 p-6 backdrop-blur-sm dark:border-neutral-800/80 dark:bg-neutral-900/50">
          <h3 className="text-base font-semibold text-neutral-900 dark:text-white">Workspace Settings</h3>
          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">API credentials, notification hooks, and team RBAC permissions.</p>
        </MorphingTabs.Content>
      </MorphingTabs.Root>
    </div>
  );
}

import * as React from 'react';
import {
  TabsRoot as CoreTabsRoot,
  TabsList as CoreTabsList,
  TabsIndicator as CoreTabsIndicator,
  TabsTrigger as CoreTabsTrigger,
  TabsContent as CoreTabsContent,
  type TabsRootProps as CoreTabsRootProps,
  type TabsListProps as CoreTabsListProps,
  type TabsIndicatorProps as CoreTabsIndicatorProps,
  type TabsTriggerProps as CoreTabsTriggerProps,
  type TabsContentProps as CoreTabsContentProps,
} from '@exhuma/core';
import { clsx } from 'clsx';

export interface TabsRootProps extends CoreTabsRootProps {
  className?: string;
}

export const TabsRoot = React.forwardRef<HTMLDivElement, TabsRootProps>(
  ({ className, springStiffness = 26, variant = 'pill', size = 'md', ...props }, _ref) => (
    <CoreTabsRoot
      className={clsx('flex flex-col', className)}
      springStiffness={springStiffness}
      variant={variant as 'pill' | 'underline' | 'glow'}
      size={size as 'sm' | 'md' | 'lg'}
      {...props}
    />
  )
);
TabsRoot.displayName = 'TabsRoot';

export interface TabsListProps extends CoreTabsListProps {
  className?: string;
}

export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
  ({ className, ...props }, _ref) => (
    <CoreTabsList
      className={clsx(className)}
      {...props}
    />
  )
);
TabsList.displayName = 'TabsList';

export interface TabsIndicatorProps extends CoreTabsIndicatorProps {
  className?: string;
}

export const TabsIndicator = React.forwardRef<HTMLDivElement, TabsIndicatorProps>(
  ({ className, ...props }, _ref) => (
    <CoreTabsIndicator
      className={clsx(className)}
      {...props}
    />
  )
);
TabsIndicator.displayName = 'TabsIndicator';

export interface TabsTriggerProps extends CoreTabsTriggerProps {
  className?: string;
}

export const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
  ({ className, ...props }, _ref) => (
    <CoreTabsTrigger
      className={clsx(className)}
      {...props}
    />
  )
);
TabsTrigger.displayName = 'TabsTrigger';

export interface TabsContentProps extends CoreTabsContentProps {
  className?: string;
}

export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
  ({ className, ...props }, _ref) => (
    <CoreTabsContent
      className={clsx('mt-4 focus-visible:outline-none', className)}
      {...props}
    />
  )
);
TabsContent.displayName = 'TabsContent';

export const MorphingTabs = {
  Root: TabsRoot,
  List: TabsList,
  Indicator: TabsIndicator,
  Trigger: TabsTrigger,
  Content: TabsContent,
};

export default MorphingTabs;