@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/ui/Tabs/Tabs.types.ts

@@ -1,255 +0,0 @@
-/**
- * Type definitions for the Tabs component.
- *
- * All interfaces use the IPrefix convention. Type aliases do not.
- * Supports two panel modes: auto-height (animated resize) and layout (motion layout).
- *
- * @module @mks2508/mks-ui/react/ui/Tabs/Tabs.types
- */
-
-import type * as React from 'react';
-import type { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
-import type { HTMLMotionProps, Transition } from 'motion/react';
-
-import type { VariantProps } from 'class-variance-authority';
-import type { IBaseConfig, SlotOverrides } from '@/core/types';
-import type { IHighlightProps, IHighlightItemProps } from '@/react-ui/primitives/Highlight';
-import type { IAutoHeightProps } from '@/react-ui/primitives/AutoHeight';
-import type { TabsSlot, tabsListVariants, tabsTabVariants } from './Tabs.styles';
-
-// ---------------------------------------------------------------------------
-// Config
-// ---------------------------------------------------------------------------
-
-/**
- * Configuration interface for Tabs behavior and animation.
- *
- * @example
- * ```tsx
- * const config: ITabsConfig = {
- *   animation: { duration: 0.3 },
- * };
- * ```
- */
-export interface ITabsConfig extends IBaseConfig {
-  /** Default motion transition for panel enter/exit. */
-  panelTransition?: Transition;
-  /** Default motion transition for the highlight indicator. */
-  highlightTransition?: Transition;
-}
-
-// ---------------------------------------------------------------------------
-// Context type (type alias -- no IPrefix)
-// ---------------------------------------------------------------------------
-
-/**
- * Internal context carrying the active tab value and its setter.
- *
- * @example
- * ```typescript
- * const ctx: TabsContextType = {
- *   value: 'settings',
- *   setValue: (v) => {},
- * };
- * ```
- */
-export type TabsContextType = {
-  /** Currently active tab value, or undefined if none. */
-  value: string | undefined;
-  /** Setter matching base-ui's onValueChange signature. */
-  setValue: ITabsProps['onValueChange'];
-};
-
-// ---------------------------------------------------------------------------
-// Root
-// ---------------------------------------------------------------------------
-
-/**
- * Props for the root Tabs component.
- * Extends base-ui Tabs.Root with slot overrides and config.
- *
- * @example
- * ```tsx
- * <Tabs
- *   defaultValue="general"
- *   slots={{ list: 'gap-2', tab: 'text-sm' }}
- * >
- *   ...
- * </Tabs>
- * ```
- */
-export interface ITabsProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-  /** Tabs behavior / animation configuration. */
-  config?: ITabsConfig;
-}
-
-// ---------------------------------------------------------------------------
-// Highlight
-// ---------------------------------------------------------------------------
-
-/**
- * Props for TabsHighlight -- animated background that follows the active tab.
- * Wraps the Highlight primitive; `controlledItems` and `value` are managed internally.
- *
- * @example
- * ```tsx
- * <TabsHighlight className="rounded-md bg-white/10" />
- * ```
- */
-export interface ITabsHighlightProps
-  extends Omit<IHighlightProps, 'controlledItems' | 'value'> {
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-}
-
-/**
- * Props for TabsHighlightItem -- wraps a tab for highlight position tracking.
- * Requires a `value` prop matching the corresponding tab value.
- *
- * @example
- * ```tsx
- * <TabsHighlightItem value="general">
- *   <TabsTab value="general">General</TabsTab>
- * </TabsHighlightItem>
- * ```
- */
-export interface ITabsHighlightItemProps extends IHighlightItemProps {
-  /** Tab value this highlight item corresponds to. */
-  value: string;
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-}
-
-// ---------------------------------------------------------------------------
-// List
-// ---------------------------------------------------------------------------
-
-/**
- * Props for TabsList -- the container holding tab triggers.
- *
- * @example
- * ```tsx
- * <TabsList className="flex gap-1 border-b border-white/10">
- *   <TabsTab value="general">General</TabsTab>
- *   <TabsTab value="advanced">Advanced</TabsTab>
- * </TabsList>
- * ```
- */
-export interface ITabsListProps
-  extends React.ComponentProps<typeof TabsPrimitive.List>,
-    VariantProps<typeof tabsListVariants> {
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-  /** Show the CSS Anchor-based sliding indicator. Defaults to true for default/outline/pill variants. */
-  indicator?: boolean;
-}
-
-// ---------------------------------------------------------------------------
-// Tab
-// ---------------------------------------------------------------------------
-
-/**
- * Props for TabsTab -- a single tab trigger button.
- *
- * @example
- * ```tsx
- * <TabsTab value="general" className="px-3 py-1.5">
- *   General
- * </TabsTab>
- * ```
- */
-export interface ITabsTabProps
-  extends React.ComponentProps<typeof TabsPrimitive.Tab>,
-    VariantProps<typeof tabsTabVariants> {
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-}
-
-// ---------------------------------------------------------------------------
-// Panel
-// ---------------------------------------------------------------------------
-
-/**
- * Props for TabsPanel -- animated content panel with blur transitions.
- * Combines base-ui Panel with motion HTML props for enter/exit animations.
- *
- * @example
- * ```tsx
- * <TabsPanel value="general" className="p-4">
- *   <p>General settings content...</p>
- * </TabsPanel>
- * ```
- */
-export interface ITabsPanelProps
-  extends Omit<React.ComponentProps<typeof TabsPrimitive.Panel>, keyof HTMLMotionProps<'div'>>,
-    HTMLMotionProps<'div'> {
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-}
-
-// ---------------------------------------------------------------------------
-// Panels (auto-height | layout mode)
-// ---------------------------------------------------------------------------
-
-/**
- * Props for TabsPanels in auto-height mode.
- * Uses the AutoHeight primitive to animate container height changes.
- *
- * @example
- * ```tsx
- * <TabsPanels mode="auto-height">
- *   <TabsPanel value="general">Short content</TabsPanel>
- *   <TabsPanel value="advanced">Much longer content...</TabsPanel>
- * </TabsPanels>
- * ```
- */
-export interface ITabsPanelsAutoProps extends Omit<IAutoHeightProps, 'children'> {
-  /** Panel animation mode (default). */
-  mode?: 'auto-height';
-  /** Tab panel children. */
-  children: React.ReactNode;
-  /** Motion transition for height animation. */
-  transition?: Transition;
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-}
-
-/**
- * Props for TabsPanels in layout mode.
- * Uses Motion layout animation to transition between panels.
- *
- * @example
- * ```tsx
- * <TabsPanels mode="layout" className="overflow-hidden">
- *   <TabsPanel value="general">Content A</TabsPanel>
- *   <TabsPanel value="advanced">Content B</TabsPanel>
- * </TabsPanels>
- * ```
- */
-export interface ITabsPanelsLayoutProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
-  /** Panel animation mode. */
-  mode: 'layout';
-  /** Tab panel children. */
-  children: React.ReactNode;
-  /** Motion transition for layout animation. */
-  transition?: Transition;
-  /** Partial class overrides per slot. */
-  slots?: SlotOverrides<TabsSlot>;
-}
-
-/**
- * Discriminated union of TabsPanels props.
- * Defaults to auto-height mode when `mode` is omitted.
- *
- * @example
- * ```tsx
- * // Auto-height (default)
- * <TabsPanels>...</TabsPanels>
- *
- * // Layout mode
- * <TabsPanels mode="layout">...</TabsPanels>
- * ```
- */
-export type ITabsPanelsProps = ITabsPanelsAutoProps | ITabsPanelsLayoutProps;