@mihcm/ui 0.14.1

package/src/TabNavigation.tsx

@@ -0,0 +1,329 @@
+'use client';
+
+/**
+ * TabNavigation (web variant).
+ *
+ * Route and action navigation for section-level surfaces. Use Tabs for
+ * in-page tabpanel state; use TabNavigation for links or async actions.
+ *
+ * Wiki: docs/components/TabNavigation.md
+ */
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLAttributeAnchorTarget,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import { cn } from './internal/cn.js';
+
+type MaybePromise<T> = T | Promise<T>;
+
+export interface TabNavigationItem {
+  value?: string;
+  href?: string;
+  label: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  badge?: ReactNode;
+  external?: boolean;
+  target?: HTMLAttributeAnchorTarget;
+  rel?: string;
+}
+
+export interface TabNavigationProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  items?: TabNavigationItem[];
+  loadItems?: () => Promise<TabNavigationItem[]>;
+  activeValue?: string;
+  defaultActiveValue?: string;
+  onActiveValueChange?: (value: string, item: TabNavigationItem) => MaybePromise<void>;
+  onItemSelect?: (
+    item: TabNavigationItem,
+    event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+  ) => MaybePromise<void>;
+  ariaLabel?: string;
+  variant?: 'underline' | 'pills' | 'contained';
+  size?: 'sm' | 'md' | 'lg';
+  wrap?: boolean;
+  fullWidth?: boolean;
+  loading?: boolean;
+  loadingLabel?: string;
+  errorMessage?: ReactNode;
+  renderLoading?: () => ReactNode;
+  renderError?: (error: unknown) => ReactNode;
+  listClassName?: string;
+  itemClassName?: string;
+  activeIndicator?: boolean;
+  disabled?: boolean;
+}
+
+const SIZE_CLASS = {
+  sm: 'min-h-9 px-3 py-2 text-sm',
+  md: 'min-h-10 px-4 py-2 text-sm',
+  lg: 'min-h-11 px-5 py-2.5 text-base',
+} as const;
+
+const getItemValue = (item: TabNavigationItem, index: number) =>
+  item.value ?? item.href ?? `tab-navigation-item-${index}`;
+
+const LOADING_PLACEHOLDERS = ['first', 'second', 'third'] as const;
+
+function isPromiseLike(value: MaybePromise<void>): value is Promise<void> {
+  return typeof (value as Promise<void> | undefined)?.then === 'function';
+}
+
+export const TabNavigation = forwardRef<HTMLElement, TabNavigationProps>(function TabNavigation(
+  {
+    items = [],
+    loadItems,
+    activeValue,
+    defaultActiveValue,
+    onActiveValueChange,
+    onItemSelect,
+    ariaLabel = 'Section navigation',
+    variant = 'underline',
+    size = 'md',
+    wrap = false,
+    fullWidth = false,
+    loading = false,
+    loadingLabel = 'Loading navigation',
+    errorMessage,
+    renderLoading,
+    renderError,
+    listClassName,
+    itemClassName,
+    activeIndicator = true,
+    disabled = false,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const [asyncItems, setAsyncItems] = useState<TabNavigationItem[] | null>(null);
+  const [asyncLoading, setAsyncLoading] = useState(false);
+  const [asyncError, setAsyncError] = useState<unknown>(null);
+  const [internalActiveValue, setInternalActiveValue] = useState<string | undefined>(
+    defaultActiveValue,
+  );
+  const [pendingValue, setPendingValue] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!loadItems) {
+      return;
+    }
+
+    let mounted = true;
+    setAsyncLoading(true);
+    setAsyncError(null);
+
+    loadItems()
+      .then((loadedItems) => {
+        if (mounted) {
+          setAsyncItems(loadedItems);
+        }
+      })
+      .catch((error: unknown) => {
+        if (mounted) {
+          setAsyncError(error);
+        }
+      })
+      .finally(() => {
+        if (mounted) {
+          setAsyncLoading(false);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [loadItems]);
+
+  const resolvedItems = asyncItems ?? items;
+  const explicitActiveValue = useMemo(() => {
+    const activeItemIndex = resolvedItems.findIndex((item) => item.active);
+    const activeItem = resolvedItems[activeItemIndex];
+    return activeItem ? getItemValue(activeItem, activeItemIndex) : undefined;
+  }, [resolvedItems]);
+  const resolvedActiveValue = activeValue ?? internalActiveValue ?? explicitActiveValue;
+  const isBusy = loading || asyncLoading || pendingValue !== null;
+
+  const loadingContent = renderLoading?.() ?? (
+    <div className="flex min-w-64 items-center gap-2 p-1" aria-label={loadingLabel}>
+      {LOADING_PLACEHOLDERS.map((placeholder) => (
+        <span
+          key={placeholder}
+          className={cn(
+            'inline-flex h-10 w-28 animate-pulse rounded-lg bg-muted',
+            variant === 'underline' && 'rounded-none border-b-2 border-transparent',
+          )}
+        />
+      ))}
+    </div>
+  );
+
+  const errorContent =
+    asyncError || errorMessage
+      ? (renderError?.(asyncError ?? errorMessage) ?? (
+          <p className="rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">
+            {errorMessage ?? 'Navigation items could not be loaded.'}
+          </p>
+        ))
+      : null;
+
+  const handleSelect = (
+    item: TabNavigationItem,
+    value: string,
+    event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
+  ) => {
+    if (disabled || item.disabled || item.loading) {
+      event.preventDefault();
+      return;
+    }
+
+    const shouldHandleAction = Boolean(onItemSelect || onActiveValueChange || !item.href);
+
+    if (shouldHandleAction) {
+      event.preventDefault();
+    }
+
+    const runHandlers = async () => {
+      setPendingValue(value);
+      try {
+        const itemSelectResult = onItemSelect?.(item, event);
+        if (itemSelectResult && isPromiseLike(itemSelectResult)) {
+          await itemSelectResult;
+        }
+
+        const activeChangeResult = onActiveValueChange?.(value, item);
+        if (activeChangeResult && isPromiseLike(activeChangeResult)) {
+          await activeChangeResult;
+        }
+
+        if (activeValue === undefined) {
+          setInternalActiveValue(value);
+        }
+      } catch (error: unknown) {
+        setAsyncError(error);
+      } finally {
+        setPendingValue(null);
+      }
+    };
+
+    void runHandlers();
+  };
+
+  return (
+    <nav
+      ref={ref}
+      aria-label={ariaLabel}
+      aria-busy={isBusy || undefined}
+      className={cn('overflow-x-auto', className)}
+      {...props}
+    >
+      <div
+        role="list"
+        className={cn(
+          'flex items-stretch gap-1',
+          wrap ? 'min-w-0 flex-wrap' : 'min-w-max',
+          variant === 'contained' && 'rounded-xl border border-border bg-muted p-1',
+          variant === 'underline' && 'border-b border-border',
+          listClassName,
+        )}
+      >
+        {(asyncLoading || loading) && resolvedItems.length === 0 ? (
+          <span role="listitem">{loadingContent}</span>
+        ) : null}
+        {errorContent ? (
+          <span role="listitem" className="p-1">
+            {errorContent}
+          </span>
+        ) : null}
+        {resolvedItems.map((item, index) => {
+          const value = getItemValue(item, index);
+          const active = resolvedActiveValue === value || item.active;
+          const itemPending = pendingValue === value || item.loading;
+          const itemDisabled = disabled || item.disabled || itemPending;
+          const activeClass =
+            variant === 'underline'
+              ? 'border-primary text-primary'
+              : variant === 'pills'
+                ? 'bg-primary text-primary-foreground shadow-mi-card'
+                : 'bg-card text-foreground shadow-mi-card';
+          const inactiveClass =
+            variant === 'underline'
+              ? 'border-transparent text-muted-foreground hover:text-foreground'
+              : 'text-muted-foreground hover:bg-card hover:text-foreground';
+          const itemContent = (
+            <>
+              {item.icon ? <span aria-hidden>{item.icon}</span> : null}
+              <span
+                className={cn('min-w-0', item.description && 'flex flex-col items-start gap-0.5')}
+              >
+                <span>{item.label}</span>
+                {item.description ? (
+                  <span
+                    className={cn(
+                      'text-xs font-normal',
+                      active ? 'opacity-80' : 'text-muted-foreground',
+                    )}
+                  >
+                    {item.description}
+                  </span>
+                ) : null}
+              </span>
+              {item.badge ? <span className="text-xs">{item.badge}</span> : null}
+              {itemPending ? <span className="sr-only">{loadingLabel}</span> : null}
+            </>
+          );
+          const sharedClassName = cn(
+            'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            SIZE_CLASS[size],
+            fullWidth && 'w-full flex-1',
+            variant === 'underline' ? 'border-b-2' : 'rounded-lg',
+            active && activeIndicator ? activeClass : inactiveClass,
+            itemDisabled && 'pointer-events-none opacity-50',
+            itemPending && 'cursor-wait opacity-70',
+            itemClassName,
+          );
+
+          return (
+            <span key={value} role="listitem" className={cn(fullWidth && 'flex flex-1')}>
+              {item.href ? (
+                <a
+                  {...(!itemDisabled ? { href: item.href } : {})}
+                  {...(item.target ? { target: item.target } : {})}
+                  {...(item.rel || item.target === '_blank' || item.external
+                    ? { rel: item.rel ?? 'noreferrer' }
+                    : {})}
+                  aria-current={active ? 'page' : undefined}
+                  aria-disabled={itemDisabled || undefined}
+                  className={sharedClassName}
+                  onClick={(event) => handleSelect(item, value, event)}
+                >
+                  {itemContent}
+                </a>
+              ) : (
+                <button
+                  type="button"
+                  aria-pressed={active}
+                  aria-disabled={itemDisabled || undefined}
+                  disabled={itemDisabled}
+                  className={sharedClassName}
+                  onClick={(event) => handleSelect(item, value, event)}
+                >
+                  {itemContent}
+                </button>
+              )}
+            </span>
+          );
+        })}
+      </div>
+    </nav>
+  );
+});

package/src/Table.native.tsx

@@ -0,0 +1,183 @@
+/**
+ * Table (React Native variant).
+ *
+ * Flex-based grid that mimics a table structure using View and Text.
+ * ScrollView wraps the root for horizontal overflow on narrow screens.
+ *
+ * Wiki: docs/components/Table.md
+ */
+import { forwardRef } from 'react';
+import { ScrollView, View, Text, type ViewProps, type TextProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+/* ── Variant type (matches web) ───────────────────────────────────── */
+
+export type TableVariant = 'default' | 'bordered' | 'striped' | 'minimal' | 'card';
+
+/* ── Table (root) ──────────────────────────────────────────────────── */
+
+export interface TableProps extends ViewProps {
+  /** Visual variant (accepted for API parity; native rendering is simplified). */
+  variant?: TableVariant;
+  className?: string;
+}
+
+export const Table = forwardRef<View, TableProps>(function Table(
+  { className, variant: _variant, children, ...props },
+  ref,
+) {
+  return (
+    <ScrollView horizontal>
+      <View
+        ref={ref}
+        accessibilityRole="summary"
+        className={cn('w-full', className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </ScrollView>
+  );
+});
+
+/* ── TableHeader ───────────────────────────────────────────────────── */
+
+export interface TableHeaderProps extends ViewProps {
+  className?: string;
+}
+
+export const TableHeader = forwardRef<View, TableHeaderProps>(
+  function TableHeader({ className, children, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="none"
+        className={cn('border-b border-border', className)}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+/* ── TableBody ─────────────────────────────────────────────────────── */
+
+export interface TableBodyProps extends ViewProps {
+  className?: string;
+}
+
+export const TableBody = forwardRef<View, TableBodyProps>(
+  function TableBody({ className, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('', className)} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+/* ── TableFooter ───────────────────────────────────────────────────── */
+
+export interface TableFooterProps extends ViewProps {
+  className?: string;
+}
+
+export const TableFooter = forwardRef<View, TableFooterProps>(
+  function TableFooter({ className, children, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('border-t border-border bg-muted/50', className)}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+/* ── TableRow ──────────────────────────────────────────────────────── */
+
+export interface TableRowProps extends ViewProps {
+  className?: string;
+}
+
+export const TableRow = forwardRef<View, TableRowProps>(
+  function TableRow({ className, children, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="none"
+        className={cn('flex-row border-b border-border', className)}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+/* ── TableHead ─────────────────────────────────────────────────────── */
+
+export interface TableHeadProps extends TextProps {
+  className?: string;
+}
+
+export const TableHead = forwardRef<Text, TableHeadProps>(
+  function TableHead({ className, children, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        accessibilityRole="header"
+        className={cn(
+          'flex-1 px-3 py-2 text-left font-medium text-sm text-muted-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+
+/* ── TableCell ─────────────────────────────────────────────────────── */
+
+export interface TableCellProps extends TextProps {
+  className?: string;
+}
+
+export const TableCell = forwardRef<Text, TableCellProps>(
+  function TableCell({ className, children, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn('flex-1 p-3 text-sm', className)}
+        {...props}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+
+/* ── TableCaption ──────────────────────────────────────────────────── */
+
+export interface TableCaptionProps extends TextProps {
+  className?: string;
+}
+
+export const TableCaption = forwardRef<Text, TableCaptionProps>(
+  function TableCaption({ className, children, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn('mt-4 text-sm text-muted-foreground text-center', className)}
+        {...props}
+      >
+        {children}
+      </Text>
+    );
+  },
+);