@mihcm/ui 0.14.1

package/src/Table.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+/**
+ * Table (web variant — React DOM).
+ *
+ * Semantic data table with styled wrappers around native HTML table
+ * elements. Sub-components: Table, TableHeader, TableBody, TableFooter,
+ * TableRow, TableHead, TableCell, TableCaption.
+ *
+ * Five visual variants controlled via `variant` on the root `<Table>`:
+ *
+ *   - `default`  — subtle row separators, no outer border. Clean & modern.
+ *   - `bordered` — full grid with outer border and cell dividers.
+ *   - `striped`  — alternating row backgrounds, no row borders.
+ *   - `minimal`  — header underline only, no row borders.
+ *   - `card`     — outer border + rounded corners, subtle row separators.
+ *
+ * The variant context flows to child components via React context so
+ * each sub-component adapts its borders/backgrounds automatically.
+ *
+ * Wiki: docs/components/Table.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type HTMLAttributes,
+  type TdHTMLAttributes,
+  type ThHTMLAttributes,
+} from 'react';
+import { cn } from './internal/cn.js';
+
+/* ── Variant context ─────────────────────────────────────────────── */
+
+export type TableVariant = 'default' | 'bordered' | 'striped' | 'minimal' | 'card';
+export type TableHeaderTone = 'default' | 'muted' | 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+
+interface TableContextValue {
+  variant: TableVariant;
+  headerTone: TableHeaderTone;
+}
+
+const TableVariantContext = createContext<TableContextValue>({
+  variant: 'default',
+  headerTone: 'default',
+});
+
+function useTableVariant() {
+  return useContext(TableVariantContext);
+}
+
+const HEADER_TONE_CLASSES: Record<TableHeaderTone, string> = {
+  default: '',
+  muted: 'bg-muted/50 text-foreground',
+  primary: 'bg-primary text-primary-foreground',
+  accent: 'bg-accent text-accent-foreground',
+  success: 'bg-success text-success-foreground',
+  warning: 'bg-warning text-warning-foreground',
+  danger: 'bg-destructive text-destructive-foreground',
+};
+
+/* ── Table (root) ──────────────────────────────────────────────────── */
+
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  /** Visual variant. @default 'default' */
+  variant?: TableVariant;
+  /** Semantic header color. Consumers may still override with TableHead className. */
+  headerTone?: TableHeaderTone;
+  /** ClassName for the responsive scroll wrapper. */
+  wrapperClassName?: string;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { className, wrapperClassName, variant = 'default', headerTone = 'default', ...props },
+  ref,
+) {
+  const wrapperClass = cn(
+    'relative w-full overflow-auto',
+    variant === 'bordered' && 'rounded-lg border border-border',
+    variant === 'card' && 'rounded-lg border border-border',
+    wrapperClassName,
+  );
+
+  return (
+    <TableVariantContext.Provider value={{ variant, headerTone }}>
+      <div className={wrapperClass}>
+        <table
+          ref={ref}
+          className={cn(
+            'w-full caption-bottom text-sm',
+            variant === 'bordered' && 'border-collapse',
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    </TableVariantContext.Provider>
+  );
+});
+
+/* ── TableHeader ───────────────────────────────────────────────────── */
+
+export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {}
+
+export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
+  function TableHeader({ className, ...props }, ref) {
+    const { variant } = useTableVariant();
+    return (
+      <thead
+        ref={ref}
+        className={cn(
+          /* default & card: thin separator under header */
+          (variant === 'default' || variant === 'card') && '[&_tr]:border-b [&_tr]:border-border/60',
+          /* bordered: stronger bottom border */
+          variant === 'bordered' && '[&_tr]:border-b [&_tr]:border-border',
+          /* striped: subtle separator */
+          variant === 'striped' && '[&_tr]:border-b [&_tr]:border-border/40',
+          /* minimal: clean underline */
+          variant === 'minimal' && '[&_tr]:border-b [&_tr]:border-border/50',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── TableBody ─────────────────────────────────────────────────────── */
+
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {}
+
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  function TableBody({ className, ...props }, ref) {
+    return (
+      <tbody
+        ref={ref}
+        className={cn('[&_tr:last-child]:border-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── TableFooter ───────────────────────────────────────────────────── */
+
+export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {}
+
+export const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
+  function TableFooter({ className, ...props }, ref) {
+    const { variant } = useTableVariant();
+    return (
+      <tfoot
+        ref={ref}
+        className={cn(
+          'border-t font-medium [&>tr]:last:border-b-0',
+          variant === 'minimal' ? 'border-border/50' : 'border-border/60',
+          variant !== 'minimal' && 'bg-muted/30',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── TableRow ──────────────────────────────────────────────────────── */
+
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {}
+
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  function TableRow({ className, ...props }, ref) {
+    const { variant } = useTableVariant();
+    return (
+      <tr
+        ref={ref}
+        className={cn(
+          'transition-colors duration-150 data-[state=selected]:bg-muted',
+          /* default & card: thin separators, hover */
+          (variant === 'default' || variant === 'card') &&
+            'border-b border-border/40 hover:bg-muted/50',
+          /* bordered: full grid borders */
+          variant === 'bordered' && 'border-b border-border hover:bg-muted/50',
+          /* striped: odd-row tint, no borders */
+          variant === 'striped' && 'odd:bg-muted/30 hover:bg-muted/50',
+          /* minimal: no borders, just hover */
+          variant === 'minimal' && 'hover:bg-muted/40',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── TableHead ─────────────────────────────────────────────────────── */
+
+export interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {}
+
+export const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
+  function TableHead({ className, ...props }, ref) {
+    const { variant, headerTone } = useTableVariant();
+    return (
+      <th
+        ref={ref}
+        className={cn(
+          'h-10 px-3 text-left align-middle text-xs font-medium uppercase tracking-wider text-muted-foreground',
+          '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+          /* bordered: vertical cell dividers */
+          variant === 'bordered' &&
+            'border-r border-border/50 last:border-r-0',
+          /* subtle header bg for bordered & card */
+          headerTone === 'default' && (variant === 'bordered' || variant === 'card') && 'bg-muted/30',
+          HEADER_TONE_CLASSES[headerTone],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── TableCell ─────────────────────────────────────────────────────── */
+
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {}
+
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  function TableCell({ className, ...props }, ref) {
+    const { variant } = useTableVariant();
+    return (
+      <td
+        ref={ref}
+        className={cn(
+          'px-3 py-2.5 align-middle',
+          '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+          /* bordered: vertical cell dividers */
+          variant === 'bordered' &&
+            'border-r border-border/50 last:border-r-0',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── TableCaption ──────────────────────────────────────────────────── */
+
+export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {}
+
+export const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
+  function TableCaption({ className, ...props }, ref) {
+    return (
+      <caption
+        ref={ref}
+        className={cn('mt-4 text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/Tabs.native.tsx

@@ -0,0 +1,139 @@
+/**
+ * Tabs (React Native variant).
+ *
+ * Controlled tabbed interface. Same API as the web variant:
+ *
+ *   <Tabs value={tab} onValueChange={setTab}>
+ *     <TabsList>
+ *       <TabsTrigger value="account">Account</TabsTrigger>
+ *       <TabsTrigger value="password">Password</TabsTrigger>
+ *     </TabsList>
+ *     <TabsContent value="account">…</TabsContent>
+ *     <TabsContent value="password">…</TabsContent>
+ *   </Tabs>
+ *
+ * Wiki: docs/components/Tabs.md
+ */
+import { createContext, forwardRef, useContext, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Context ────────────────────────────────────────────────────────── */
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error('Tabs compound components must be used within <Tabs>');
+  return ctx;
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface TabsProps extends ClassedViewProps {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export const Tabs = forwardRef<View, TabsProps>(function Tabs(
+  { className, value, onValueChange, ...props },
+  ref,
+) {
+  return (
+    <TabsContext.Provider value={{ value, onValueChange }}>
+      <View ref={ref} className={cn('flex-col', className)} {...props} />
+    </TabsContext.Provider>
+  );
+});
+
+/* ── TabsList ───────────────────────────────────────────────────────── */
+
+export const tabsListVariants = cva('flex-row items-center gap-1', {
+  variants: {
+    variant: {
+      default: 'rounded-lg bg-muted p-1',
+      underline: 'border-b border-border',
+      pills: 'gap-2',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
+export interface TabsListProps extends ClassedViewProps, VariantProps<typeof tabsListVariants> {}
+
+export const TabsList = forwardRef<View, TabsListProps>(function TabsList(
+  { className, variant, ...props },
+  ref,
+) {
+  return <View ref={ref} className={cn(tabsListVariants({ variant }), className)} {...props} />;
+});
+
+/* ── TabsTrigger ────────────────────────────────────────────────────── */
+
+export interface TabsTriggerProps extends Omit<ViewProps, 'style'> {
+  className?: string;
+  value: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+export const TabsTrigger = forwardRef<View, TabsTriggerProps>(function TabsTrigger(
+  { className, value, disabled, icon, children, ...props },
+  ref,
+) {
+  const ctx = useTabsContext();
+  const selected = ctx.value === value;
+
+  return (
+    <Pressable
+      ref={ref as never}
+      accessibilityRole="tab"
+      accessibilityState={{ selected, disabled }}
+      data-state={selected ? 'active' : 'inactive'}
+      disabled={disabled}
+      onPress={() => ctx.onValueChange(value)}
+      className={cn(
+        'min-h-9 min-w-32 flex-row items-center justify-center gap-1.5 rounded-md px-3 py-1.5',
+        selected ? 'bg-card' : 'bg-transparent',
+        disabled && 'opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {icon && <View className="flex-shrink-0">{icon}</View>}
+      <Text
+        className={cn(
+          'text-sm font-medium',
+          selected ? 'text-foreground' : 'text-muted-foreground',
+        )}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+});
+
+/* ── TabsContent ────────────────────────────────────────────────────── */
+
+export interface TabsContentProps extends ClassedViewProps {
+  value: string;
+}
+
+export const TabsContent = forwardRef<View, TabsContentProps>(function TabsContent(
+  { className, value, ...props },
+  ref,
+) {
+  const ctx = useTabsContext();
+  if (ctx.value !== value) return null;
+
+  return <View ref={ref} className={cn('mt-2', className)} {...props} />;
+});

package/src/Tabs.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+/**
+ * Tabs (web variant — React DOM).
+ *
+ * Accessible tabbed interface. Controlled-only:
+ *
+ *   <Tabs value={tab} onValueChange={setTab}>
+ *     <TabsList>
+ *       <TabsTrigger value="account">Account</TabsTrigger>
+ *       <TabsTrigger value="password">Password</TabsTrigger>
+ *     </TabsList>
+ *     <TabsContent value="account">…</TabsContent>
+ *     <TabsContent value="password">…</TabsContent>
+ *   </Tabs>
+ *
+ * Wiki: docs/components/Tabs.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useCallback,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ── Context ────────────────────────────────────────────────────────── */
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error('Tabs compound components must be used within <Tabs>');
+  return ctx;
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
+  { className, value, onValueChange, ...props },
+  ref,
+) {
+  return (
+    <TabsContext.Provider value={{ value, onValueChange }}>
+      <div ref={ref} className={cn('flex flex-col', className)} {...props} />
+    </TabsContext.Provider>
+  );
+});
+
+/* ── TabsList ───────────────────────────────────────────────────────── */
+
+export const tabsListVariants = cva('items-center gap-1', {
+  variants: {
+    variant: {
+      default:
+        'rounded-lg bg-muted p-1',
+      underline: 'inline-flex border-b border-border',
+      pills: 'inline-flex gap-2',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export interface TabsListProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof tabsListVariants> {
+  /**
+   * `equal` keeps trigger widths stable while the active tab changes.
+   * Use `intrinsic` only when each tab should size to its content.
+   */
+  layout?: 'equal' | 'intrinsic';
+}
+
+export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(function TabsList(
+  { className, variant, layout = 'equal', ...props },
+  ref,
+) {
+  const resolvedVariant = variant ?? 'default';
+  const equalLayout =
+    'inline-grid grid-flow-col auto-cols-[minmax(8rem,1fr)] [&>[role=tab]]:w-full';
+
+  return (
+    <div
+      ref={ref}
+      role="tablist"
+      data-variant={resolvedVariant}
+      data-layout={layout}
+      className={cn(
+        tabsListVariants({ variant: resolvedVariant }),
+        layout === 'equal' && equalLayout,
+        '[&>[role=tab]]:data-[state=active]:text-foreground',
+        resolvedVariant === 'default'
+          && '[&>[role=tab]]:data-[state=active]:bg-card [&>[role=tab]]:data-[state=active]:shadow-sm',
+        resolvedVariant === 'underline' && [
+          '[&>[role=tab]]:rounded-none [&>[role=tab]]:border-b-2 [&>[role=tab]]:border-transparent',
+          '[&>[role=tab]]:bg-transparent [&>[role=tab]]:shadow-none',
+          '[&>[role=tab]]:data-[state=active]:border-primary',
+        ],
+        resolvedVariant === 'pills' && [
+          '[&>[role=tab]]:rounded-full [&>[role=tab]]:border [&>[role=tab]]:border-border',
+          '[&>[role=tab]]:bg-card [&>[role=tab]]:shadow-none',
+          '[&>[role=tab]]:hover:border-primary',
+          '[&>[role=tab]]:data-[state=active]:border-primary',
+          '[&>[role=tab]]:data-[state=active]:bg-primary',
+          '[&>[role=tab]]:data-[state=active]:text-primary-foreground',
+        ],
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── TabsTrigger ────────────────────────────────────────────────────── */
+
+export interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+}
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(function TabsTrigger(
+  { className, value, disabled, icon, children, ...props },
+  ref,
+) {
+  const ctx = useTabsContext();
+  const selected = ctx.value === value;
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {
+    const el = e.currentTarget;
+    const list = el.parentElement;
+    if (!list) return;
+    const triggers = Array.from(
+      list.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])'),
+    );
+    const idx = triggers.indexOf(el);
+    let next: HTMLButtonElement | undefined;
+
+    if (e.key === 'ArrowRight') next = triggers[(idx + 1) % triggers.length];
+    else if (e.key === 'ArrowLeft') next = triggers[(idx - 1 + triggers.length) % triggers.length];
+    else if (e.key === 'Home') next = triggers[0];
+    else if (e.key === 'End') next = triggers[triggers.length - 1];
+
+    if (next) {
+      e.preventDefault();
+      next.focus();
+      next.click();
+    }
+  }, []);
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="tab"
+      aria-selected={selected}
+      data-state={selected ? 'active' : 'inactive'}
+      tabIndex={selected ? 0 : -1}
+      disabled={disabled}
+      onClick={() => ctx.onValueChange(value)}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'inline-flex min-h-9 items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5',
+        'text-sm font-medium transition-colors duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'text-muted-foreground hover:text-foreground',
+        className,
+      )}
+      {...props}
+    >
+      {icon && <span className="[&>svg]:h-4 [&>svg]:w-4 flex-shrink-0">{icon}</span>}
+      {children}
+    </button>
+  );
+});
+
+/* ── TabsContent ────────────────────────────────────────────────────── */
+
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(function TabsContent(
+  { className, value, ...props },
+  ref,
+) {
+  const ctx = useTabsContext();
+  if (ctx.value !== value) return null;
+
+  return (
+    <div
+      ref={ref}
+      role="tabpanel"
+      tabIndex={0}
+      className={cn(
+        'mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/Tag.native.tsx

@@ -0,0 +1,87 @@
+/**
+ * Tag (React Native variant).
+ *
+ * Label chip with optional remove action. Rendered as `<View>` + `<Text>`.
+ * Same prop API as the web variant.
+ *
+ * Wiki: docs/components/Tag.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const tagVariants = cva(
+  'flex-row items-center rounded-full border border-transparent',
+  {
+    variants: {
+      variant: {
+        default: 'bg-secondary',
+        primary: 'bg-primary/10',
+        accent: 'bg-accent/10',
+        destructive: 'bg-destructive/10',
+        success: 'bg-success/10',
+        warning: 'bg-warning/10',
+      },
+      size: {
+        sm: 'px-1.5 py-0.5',
+        md: 'px-2 py-0.5',
+        lg: 'px-2.5 py-1',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
+const TEXT_TONE: Record<NonNullable<VariantProps<typeof tagVariants>['variant']>, string> = {
+  default: 'text-secondary-foreground',
+  primary: 'text-primary',
+  accent: 'text-accent-600',
+  destructive: 'text-destructive',
+  success: 'text-success',
+  warning: 'text-warning',
+};
+
+const TEXT_SIZE: Record<NonNullable<VariantProps<typeof tagVariants>['size']>, string> = {
+  sm: 'text-xs',
+  md: 'text-xs',
+  lg: 'text-sm',
+};
+
+export interface TagProps
+  extends Omit<ViewProps, 'style'>,
+    VariantProps<typeof tagVariants> {
+  className?: string;
+  children?: ReactNode;
+  onRemove?: () => void;
+  removable?: boolean;
+}
+
+export const Tag = forwardRef<View, TagProps>(function Tag(
+  { className, variant = 'default', size = 'md', onRemove, removable, children, ...props },
+  ref,
+) {
+  const showRemove = onRemove !== undefined || removable === true;
+  const handleRemove = onRemove ?? (() => {});
+  const tone = TEXT_TONE[variant ?? 'default'];
+  const textSize = TEXT_SIZE[size ?? 'md'];
+
+  return (
+    <View ref={ref} className={cn(tagVariants({ variant, size }), className)} {...props}>
+      <Text className={cn(textSize, 'font-medium leading-none', tone)}>{children}</Text>
+      {showRemove && (
+        <Pressable
+          onPress={handleRemove}
+          accessibilityRole="button"
+          accessibilityLabel="Remove"
+          className="ml-1 opacity-60"
+        >
+          <Text className={cn('text-xs', tone)}>✕</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+});