@mihcm/ui 0.14.1

package/src/Separator.native.tsx

@@ -0,0 +1,38 @@
+/**
+ * Separator (React Native variant).
+ *
+ * A styled `<View>` with `accessibilityRole="none"` when decorative
+ * (the default) so screen readers skip it.
+ *
+ * Wiki: docs/components/Separator.md
+ */
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface SeparatorProps extends ViewProps {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+  className?: string;
+}
+
+export const Separator = forwardRef<View, SeparatorProps>(function Separator(
+  { className, orientation = 'horizontal', decorative = true, ...props },
+  ref,
+) {
+  const isHorizontal = orientation === 'horizontal';
+  return (
+    <View
+      ref={ref}
+      accessibilityRole={decorative ? 'none' : 'none'}
+      accessibilityElementsHidden={decorative}
+      importantForAccessibility={decorative ? 'no-hide-descendants' : 'auto'}
+      className={cn(
+        'shrink-0 bg-border',
+        isHorizontal ? 'h-px w-full' : 'h-full w-px',
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/Separator.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+/**
+ * Separator (web variant — React DOM).
+ *
+ * A semantic divider. `decorative={true}` (the default) hides it from
+ * the accessibility tree because the surrounding visual layout already
+ * implies the boundary. Pass `decorative={false}` only when the rule
+ * separates two genuinely independent sections (e.g., between an
+ * article and a related-items panel) — then it gets `role="separator"`.
+ *
+ * Wiki: docs/components/Separator.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from './internal/cn.js';
+
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  /** Defaults to `horizontal`. */
+  orientation?: 'horizontal' | 'vertical';
+  /** Hidden from a11y tree when true (default). */
+  decorative?: boolean;
+}
+
+export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function Separator(
+  { className, orientation = 'horizontal', decorative = true, ...props },
+  ref,
+) {
+  const isHorizontal = orientation === 'horizontal';
+  return (
+    <div
+      ref={ref}
+      role={decorative ? undefined : 'separator'}
+      aria-orientation={decorative ? undefined : orientation}
+      aria-hidden={decorative || undefined}
+      className={cn(
+        'shrink-0 bg-border',
+        isHorizontal ? 'h-px w-full' : 'h-full w-px',
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/Sheet.native.tsx

@@ -0,0 +1,233 @@
+/* eslint-disable react-hooks/refs, react-hooks/purity -- RN Animated API reads refs during render */
+/**
+ * Sheet (React Native variant).
+ *
+ * Uses RN `<Modal>` with `Animated` for slide transitions. Same
+ * composable API as web:
+ *
+ *   <Sheet open={open} onOpenChange={setOpen}>
+ *     <SheetContent side="right">
+ *       <SheetHeader>
+ *         <SheetTitle>Settings</SheetTitle>
+ *         <SheetDescription>Adjust your preferences.</SheetDescription>
+ *       </SheetHeader>
+ *       <SheetFooter>…</SheetFooter>
+ *     </SheetContent>
+ *   </Sheet>
+ *
+ * Wiki: docs/components/Sheet.md
+ */
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  type ReactNode,
+} from 'react';
+import {
+  Animated,
+  Dimensions,
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type TextProps,
+  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 };
+type ClassedTextProps = Omit<TextProps, 'style'> & { className?: string };
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface SheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}
+
+export function Sheet({ open, onOpenChange, children }: SheetProps) {
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => onOpenChange(false)}
+      statusBarTranslucent
+    >
+      <Pressable
+        onPress={() => onOpenChange(false)}
+        className="flex-1 bg-black/50"
+        accessibilityRole="none"
+      >
+        <Pressable onPress={(e) => e.stopPropagation()} className="flex-1">
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+/* ── Content panel ──────────────────────────────────────────────────── */
+
+export const sheetContentVariants = cva(
+  'absolute border border-border bg-card',
+  {
+    variants: {
+      side: {
+        right: 'right-0 top-0 bottom-0 border-l',
+        left: 'left-0 top-0 bottom-0 border-r',
+        top: 'top-0 left-0 right-0 border-b',
+        bottom: 'bottom-0 left-0 right-0 border-t',
+      },
+      size: {
+        sm: '',
+        md: '',
+        lg: '',
+        xl: '',
+        full: '',
+      },
+    },
+    compoundVariants: [
+      { side: 'right', size: 'sm', className: 'w-72' },
+      { side: 'right', size: 'md', className: 'w-96' },
+      { side: 'right', size: 'lg', className: 'w-[480px]' },
+      { side: 'right', size: 'xl', className: 'w-[600px]' },
+      { side: 'right', size: 'full', className: 'w-full' },
+      { side: 'left', size: 'sm', className: 'w-72' },
+      { side: 'left', size: 'md', className: 'w-96' },
+      { side: 'left', size: 'lg', className: 'w-[480px]' },
+      { side: 'left', size: 'xl', className: 'w-[600px]' },
+      { side: 'left', size: 'full', className: 'w-full' },
+      { side: 'top', size: 'sm', className: 'h-48' },
+      { side: 'top', size: 'md', className: 'h-72' },
+      { side: 'top', size: 'lg', className: 'h-96' },
+      { side: 'top', size: 'xl', className: 'h-[480px]' },
+      { side: 'top', size: 'full', className: 'h-full' },
+      { side: 'bottom', size: 'sm', className: 'h-48' },
+      { side: 'bottom', size: 'md', className: 'h-72' },
+      { side: 'bottom', size: 'lg', className: 'h-96' },
+      { side: 'bottom', size: 'xl', className: 'h-[480px]' },
+      { side: 'bottom', size: 'full', className: 'h-full' },
+    ],
+    defaultVariants: { side: 'right', size: 'md' },
+  },
+);
+
+export interface SheetContentProps
+  extends ClassedViewProps,
+    VariantProps<typeof sheetContentVariants> {}
+
+export const SheetContent = forwardRef<View, SheetContentProps>(
+  function SheetContent({ className, side, size, ...props }, ref) {
+    const { width, height } = Dimensions.get('window');
+    const slideAnim = useRef(new Animated.Value(1)).current;
+
+    useEffect(() => {
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }).start();
+    }, [slideAnim]);
+
+    const getTransform = () => {
+      const s = side ?? 'right';
+      switch (s) {
+        case 'right':
+          return { translateX: slideAnim.interpolate({ inputRange: [0, 1], outputRange: [0, width] }) };
+        case 'left':
+          return { translateX: slideAnim.interpolate({ inputRange: [0, 1], outputRange: [0, -width] }) };
+        case 'top':
+          return { translateY: slideAnim.interpolate({ inputRange: [0, 1], outputRange: [0, -height] }) };
+        case 'bottom':
+          return { translateY: slideAnim.interpolate({ inputRange: [0, 1], outputRange: [0, height] }) };
+        default:
+          return { translateX: slideAnim.interpolate({ inputRange: [0, 1], outputRange: [0, width] }) };
+      }
+    };
+
+    return (
+      <Animated.View
+        style={{ transform: [getTransform()] }}
+      >
+        <View
+          ref={ref}
+          className={cn(sheetContentVariants({ side, size }), className)}
+          {...props}
+        />
+      </Animated.View>
+    );
+  },
+);
+
+/* ── Close button ──────────────────────────────────────────────────── */
+
+export interface SheetCloseProps extends ClassedViewProps {
+  onClose?: () => void;
+}
+
+export const SheetClose = forwardRef<View, SheetCloseProps>(
+  function SheetClose({ className, onClose, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        onPress={onClose}
+        accessibilityRole="button"
+        accessibilityLabel="Close"
+        className={cn('absolute right-4 top-4 p-1 opacity-60', className)}
+        {...props}
+      >
+        <Text className="text-foreground text-base">✕</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Layout helpers ─────────────────────────────────────────────────── */
+
+export const SheetHeader = forwardRef<View, ClassedViewProps>(
+  function SheetHeader({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('gap-1.5 p-6 pb-0', className)} {...props} />
+    );
+  },
+);
+
+export const SheetFooter = forwardRef<View, ClassedViewProps>(
+  function SheetFooter({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('flex-row items-center justify-end gap-2 p-6 pt-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SheetTitle = forwardRef<Text, ClassedTextProps>(
+  function SheetTitle({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        accessibilityRole="header"
+        className={cn('text-lg font-semibold leading-tight text-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SheetDescription = forwardRef<Text, ClassedTextProps>(
+  function SheetDescription({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/Sheet.tsx

@@ -0,0 +1,329 @@
+'use client';
+
+/**
+ * Sheet (web variant — React DOM).
+ *
+ * A slide-out panel from a screen edge, extending the Dialog pattern.
+ * Composable sub-components:
+ *
+ *   <Sheet open={open} onOpenChange={setOpen}>
+ *     <SheetContent side="right">
+ *       <SheetHeader>
+ *         <SheetTitle>Settings</SheetTitle>
+ *         <SheetDescription>Adjust your preferences.</SheetDescription>
+ *       </SheetHeader>
+ *       ... body content ...
+ *       <SheetFooter>
+ *         <Button onClick={() => setOpen(false)}>Done</Button>
+ *       </SheetFooter>
+ *     </SheetContent>
+ *   </Sheet>
+ *
+ * Controlled-only: pass `open` and `onOpenChange`.
+ * Dismisses on backdrop click and Escape (unlike AlertDialog).
+ *
+ * Wiki: docs/components/Sheet.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+type SheetState = 'open' | 'closed';
+
+const SHEET_MOTION_MS = 500;
+
+const SheetStateContext = createContext<SheetState>('closed');
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+function requestSheetFrame(callback: FrameRequestCallback) {
+  if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+    return window.requestAnimationFrame(callback);
+  }
+  return setTimeout(() => callback(typeof performance === 'undefined' ? Date.now() : performance.now()), 16) as unknown as number;
+}
+
+function cancelSheetFrame(id: number) {
+  if (typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') {
+    window.cancelAnimationFrame(id);
+    return;
+  }
+  clearTimeout(id);
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface SheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Root provider. Renders a native `<dialog>` and manages its
+ * `showModal()` / `close()` lifecycle. Dismisses on backdrop click
+ * and Escape key.
+ */
+export function Sheet({ open, onOpenChange, children, className }: SheetProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const animationFrameRef = useRef<number | null>(null);
+  const [state, setState] = useState<SheetState>(open ? 'open' : 'closed');
+
+  useIsomorphicLayoutEffect(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (animationFrameRef.current !== null) {
+      cancelSheetFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+
+    if (open && !el.open) {
+      setState('closed');
+      el.showModal();
+      animationFrameRef.current = requestSheetFrame(() => {
+        animationFrameRef.current = null;
+        setState('open');
+      });
+    } else if (open) {
+      setState('open');
+    } else if (!open && el.open) {
+      setState('closed');
+      closeTimerRef.current = setTimeout(() => {
+        if (el.open) el.close();
+      }, SHEET_MOTION_MS);
+    } else {
+      setState('closed');
+    }
+
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelSheetFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [open]);
+
+  const handleCancel = useCallback(
+    (e: React.SyntheticEvent<HTMLDialogElement>) => {
+      e.preventDefault();
+      onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  const handleBackdropClick = useCallback(
+    (e: MouseEvent<HTMLDialogElement>) => {
+      if (e.target === dialogRef.current) {
+        onOpenChange(false);
+      }
+    },
+    [onOpenChange],
+  );
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onCancel={handleCancel}
+      onClick={handleBackdropClick}
+      data-state={state}
+      className={cn(
+        'fixed inset-0 z-50 m-0 h-dvh w-dvw max-h-dvh max-w-none',
+        'bg-transparent p-0',
+        'backdrop:bg-black/50 backdrop:backdrop-blur-sm',
+        'opacity-0 transition-opacity duration-[500ms] ease-[cubic-bezier(0.32,0.72,0,1)]',
+        'data-[state=open]:opacity-100 data-[state=closed]:opacity-0',
+        className,
+      )}
+    >
+      <SheetStateContext.Provider value={state}>
+        {children}
+      </SheetStateContext.Provider>
+    </dialog>
+  );
+}
+
+/* ── Content panel ──────────────────────────────────────────────────── */
+
+export const sheetContentVariants = cva(
+  [
+    'fixed flex flex-col border border-border bg-card text-card-foreground shadow-lg',
+    'will-change-transform transform-gpu transition-transform duration-[500ms] ease-[cubic-bezier(0.32,0.72,0,1)]',
+    'motion-reduce:transition-none',
+  ].join(' '),
+  {
+    variants: {
+      side: {
+        right: [
+          'inset-y-0 right-0 h-full border-l',
+          'data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full',
+        ].join(' '),
+        left: [
+          'inset-y-0 left-0 h-full border-r',
+          'data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full',
+        ].join(' '),
+        top: [
+          'inset-x-0 top-0 w-full border-b',
+          'data-[state=open]:translate-y-0 data-[state=closed]:-translate-y-full',
+        ].join(' '),
+        bottom: [
+          'inset-x-0 bottom-0 w-full border-t',
+          'data-[state=open]:translate-y-0 data-[state=closed]:translate-y-full',
+        ].join(' '),
+      },
+      size: {
+        sm: '',
+        md: '',
+        lg: '',
+        xl: '',
+        full: '',
+      },
+    },
+    compoundVariants: [
+      /* Horizontal sheets (left/right) — size controls width */
+      { side: 'right', size: 'sm', className: 'w-72' },
+      { side: 'right', size: 'md', className: 'w-96' },
+      { side: 'right', size: 'lg', className: 'w-[32rem]' },
+      { side: 'right', size: 'xl', className: 'w-[48rem]' },
+      { side: 'right', size: 'full', className: 'w-dvw' },
+      { side: 'left', size: 'sm', className: 'w-72' },
+      { side: 'left', size: 'md', className: 'w-96' },
+      { side: 'left', size: 'lg', className: 'w-[32rem]' },
+      { side: 'left', size: 'xl', className: 'w-[48rem]' },
+      { side: 'left', size: 'full', className: 'w-dvw' },
+      /* Vertical sheets (top/bottom) — size controls height */
+      { side: 'top', size: 'sm', className: 'h-48' },
+      { side: 'top', size: 'md', className: 'h-72' },
+      { side: 'top', size: 'lg', className: 'h-96' },
+      { side: 'top', size: 'xl', className: 'h-[32rem]' },
+      { side: 'top', size: 'full', className: 'h-dvh' },
+      { side: 'bottom', size: 'sm', className: 'h-48' },
+      { side: 'bottom', size: 'md', className: 'h-72' },
+      { side: 'bottom', size: 'lg', className: 'h-96' },
+      { side: 'bottom', size: 'xl', className: 'h-[32rem]' },
+      { side: 'bottom', size: 'full', className: 'h-dvh' },
+    ],
+    defaultVariants: { side: 'right', size: 'md' },
+  },
+);
+
+export interface SheetContentProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof sheetContentVariants> {}
+
+export const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(
+  function SheetContent({ className, side, size, ...props }, ref) {
+    const state = useContext(SheetStateContext);
+    const resolvedSide = side ?? 'right';
+    return (
+      <div
+        ref={ref}
+        role="document"
+        data-state={state}
+        data-side={resolvedSide}
+        className={cn(sheetContentVariants({ side: resolvedSide, size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Close button ──────────────────────────────────────────────────── */
+
+export interface SheetCloseProps extends HTMLAttributes<HTMLButtonElement> {
+  onClose?: () => void;
+}
+
+export const SheetClose = forwardRef<HTMLButtonElement, SheetCloseProps>(
+  function SheetClose({ className, onClose, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Close"
+        onClick={onClose}
+        className={cn(
+          'absolute right-4 top-4 rounded-sm p-1 opacity-60 transition-opacity duration-150',
+          'hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          className,
+        )}
+        {...props}
+      >
+        <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2} className="h-4 w-4">
+          <path strokeLinecap="round" d="M4 12L12 4M4 4l8 8" />
+        </svg>
+      </button>
+    );
+  },
+);
+
+/* ── Layout helpers ─────────────────────────────────────────────────── */
+
+export const SheetHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SheetHeader({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SheetFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function SheetFooter({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center justify-end gap-2 p-6 pt-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SheetTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function SheetTitle({ className, ...props }, ref) {
+    return (
+      <h2
+        ref={ref}
+        className={cn('text-lg font-semibold leading-tight', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SheetDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function SheetDescription({ className, ...props }, ref) {
+    return (
+      <p
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);