@mihcm/ui 0.14.1

package/src/Alert.native.tsx

@@ -0,0 +1,100 @@
+/**
+ * Alert (React Native variant).
+ *
+ * `<View accessibilityRole="alert">` + composable Title/Description.
+ * Same prop API as the web variant.
+ *
+ * Wiki: docs/components/Alert.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const alertVariants = cva('w-full rounded-md border px-4 py-3 flex-row items-start', {
+  variants: {
+    variant: {
+      default: 'bg-background border-border',
+      destructive: 'bg-destructive/10 border-destructive/40',
+      success: 'bg-success/10 border-success/40',
+      warning: 'bg-warning/10 border-warning/40',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
+const TONE: Record<NonNullable<VariantProps<typeof alertVariants>['variant']>, string> = {
+  default: 'text-foreground',
+  destructive: 'text-destructive',
+  success: 'text-success',
+  warning: 'text-warning',
+};
+
+export interface AlertProps
+  extends Omit<ViewProps, 'style'>,
+    VariantProps<typeof alertVariants> {
+  className?: string;
+  icon?: ReactNode;
+  onClose?: () => void;
+}
+
+const AlertVariantContext = (variant?: AlertProps['variant']) => TONE[variant ?? 'default'];
+
+export const Alert = forwardRef<View, AlertProps>(function Alert(
+  { className, variant = 'default', icon, onClose, children, ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      accessibilityRole="alert"
+      className={cn(alertVariants({ variant }), className)}
+      data-alert-tone={AlertVariantContext(variant)}
+      {...props}
+    >
+      {icon && <View className="mr-3 flex-shrink-0">{icon}</View>}
+      <View className="flex-1">{children}</View>
+      {onClose && (
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          className="ml-auto flex-shrink-0 p-0.5 opacity-60"
+        >
+          <Text className={TONE[variant ?? 'default']}>✕</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+});
+
+export interface AlertTextProps extends Omit<TextProps, 'style'> {
+  className?: string;
+}
+
+export const AlertTitle = forwardRef<Text, AlertTextProps>(function AlertTitle(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <Text
+      ref={ref}
+      accessibilityRole="header"
+      className={cn('mb-1 font-medium leading-tight text-foreground', className)}
+      {...props}
+    />
+  );
+});
+
+export const AlertDescription = forwardRef<Text, AlertTextProps>(function AlertDescription(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <Text
+      ref={ref}
+      className={cn('text-sm leading-relaxed text-foreground/80', className)}
+      {...props}
+    />
+  );
+});

package/src/Alert.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+/**
+ * Alert (web variant — React DOM).
+ *
+ * Inline message banner. Three pieces compose:
+ *
+ *   <Alert variant="destructive">
+ *     <AlertTitle>Couldn't save</AlertTitle>
+ *     <AlertDescription>Check your connection and try again.</AlertDescription>
+ *   </Alert>
+ *
+ * Sets `role="alert"` so assistive tech announces the message when
+ * the element mounts. Pair with an icon — never communicate severity
+ * with colour alone.
+ *
+ * Wiki: docs/components/Alert.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 flex items-start',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-foreground border-secondary',
+        accent:
+          'bg-accent-50 text-accent-700 border-accent-200 [&>svg]:text-accent-600 dark:bg-accent-950 dark:text-accent-300 dark:border-accent-800',
+        destructive:
+          'bg-red-100 text-destructive border-destructive/20 [&>svg]:text-destructive',
+        success:
+          'bg-green-100 text-success border-success/20 [&>svg]:text-success',
+        warning:
+          'bg-yellow-100 text-warning border-warning/20 [&>svg]:text-warning',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type AlertVariantProps = VariantProps<typeof alertVariants>;
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement>, AlertVariantProps {
+  /** Optional icon rendered at the start of the alert. */
+  icon?: ReactNode;
+  /** When provided, renders a close button that calls this handler. */
+  onClose?: () => void;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  { className, variant, icon, onClose, children, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(alertVariants({ variant }), icon && '[&>svg+*]:pl-0 [&>svg~*]:pl-0', className)}
+      {...props}
+    >
+      {icon && <span className="mr-3 flex-shrink-0 [&>svg]:h-4 [&>svg]:w-4">{icon}</span>}
+      <div className="flex-1">{children}</div>
+      {onClose && (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Dismiss"
+          className="ml-auto flex-shrink-0 rounded p-0.5 opacity-60 hover:opacity-100 transition-opacity duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <svg aria-hidden viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="h-4 w-4">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+});
+
+export const AlertTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function AlertTitle({ className, ...props }, ref) {
+    return (
+      <h5
+        ref={ref}
+        className={cn('mb-1 font-medium leading-tight tracking-tight', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const AlertDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function AlertDescription({ className, ...props }, ref) {
+    return (
+      <div ref={ref} className={cn('text-sm leading-relaxed', className)} {...props} />
+    );
+  },
+);

package/src/AlertDialog.native.tsx

@@ -0,0 +1,189 @@
+/**
+ * AlertDialog (React Native variant).
+ *
+ * Uses RN `<Modal>` as the overlay. Unlike Dialog, AlertDialog does NOT
+ * dismiss on backdrop press or hardware back button — the user must
+ * choose an explicit action.
+ *
+ *   <AlertDialog open={open} onOpenChange={setOpen}>
+ *     <AlertDialogContent>
+ *       <AlertDialogHeader>
+ *         <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+ *         <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+ *       </AlertDialogHeader>
+ *       <AlertDialogFooter>
+ *         <AlertDialogCancel onPress={() => setOpen(false)}>Cancel</AlertDialogCancel>
+ *         <AlertDialogAction onPress={handleConfirm}>Continue</AlertDialogAction>
+ *       </AlertDialogFooter>
+ *     </AlertDialogContent>
+ *   </AlertDialog>
+ *
+ * Wiki: docs/components/AlertDialog.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  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 };
+type ClassedPressableProps = Omit<PressableProps, 'style'> & { className?: string; children?: ReactNode };
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface AlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Root provider. No backdrop dismiss, no hardware-back dismiss.
+ */
+export function AlertDialog({ open, children, className }: AlertDialogProps) {
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="fade"
+      onRequestClose={() => {
+        /* Intentionally empty — hardware back must NOT dismiss an alert dialog */
+      }}
+      statusBarTranslucent
+    >
+      <View
+        className={cn('flex-1 items-center justify-center bg-black/50', className)}
+        accessibilityRole="alert"
+      >
+        {children}
+      </View>
+    </Modal>
+  );
+}
+
+/* ── Content panel ──────────────────────────────────────────────────── */
+
+export const alertDialogContentVariants = cva(
+  'rounded-xl border border-border bg-card',
+  {
+    variants: {
+      size: {
+        sm: 'w-80',
+        md: 'w-96',
+        lg: 'w-[480px]',
+        xl: 'w-[600px]',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+export interface AlertDialogContentProps
+  extends ClassedViewProps,
+    VariantProps<typeof alertDialogContentVariants> {}
+
+export const AlertDialogContent = forwardRef<View, AlertDialogContentProps>(
+  function AlertDialogContent({ className, size, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn(alertDialogContentVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Layout helpers ─────────────────────────────────────────────────── */
+
+export const AlertDialogHeader = forwardRef<View, ClassedViewProps>(
+  function AlertDialogHeader({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('gap-1.5 p-6 pb-0', className)} {...props} />
+    );
+  },
+);
+
+export const AlertDialogFooter = forwardRef<View, ClassedViewProps>(
+  function AlertDialogFooter({ 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 AlertDialogTitle = forwardRef<Text, ClassedTextProps>(
+  function AlertDialogTitle({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        accessibilityRole="header"
+        className={cn('text-lg font-semibold leading-tight text-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const AlertDialogDescription = forwardRef<Text, ClassedTextProps>(
+  function AlertDialogDescription({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Action buttons ─────────────────────────────────────────────────── */
+
+export const AlertDialogAction = forwardRef<View, ClassedPressableProps>(
+  function AlertDialogAction({ className, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        className={cn(
+          'items-center justify-center rounded-md bg-primary px-3.5 py-2',
+          className,
+        )}
+        {...props}
+      >
+        <Text className="text-sm font-semibold text-primary-foreground">{children}</Text>
+      </Pressable>
+    );
+  },
+);
+
+export const AlertDialogCancel = forwardRef<View, ClassedPressableProps>(
+  function AlertDialogCancel({ className, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        className={cn(
+          'items-center justify-center rounded-md border border-border bg-background px-3.5 py-2',
+          className,
+        )}
+        {...props}
+      >
+        <Text className="text-sm font-medium text-secondary-foreground">{children}</Text>
+      </Pressable>
+    );
+  },
+);

package/src/AlertDialog.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+/**
+ * AlertDialog (web variant — React DOM).
+ *
+ * A modal dialog that interrupts the user with important content and
+ * expects a response. Unlike Dialog, AlertDialog does NOT dismiss on
+ * backdrop click or Escape key — the user must explicitly choose an
+ * action or cancel.
+ *
+ *   <AlertDialog open={open} onOpenChange={setOpen}>
+ *     <AlertDialogContent>
+ *       <AlertDialogHeader>
+ *         <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+ *         <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+ *       </AlertDialogHeader>
+ *       <AlertDialogFooter>
+ *         <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *         <AlertDialogAction onClick={handleConfirm}>Continue</AlertDialogAction>
+ *       </AlertDialogFooter>
+ *     </AlertDialogContent>
+ *   </AlertDialog>
+ *
+ * Controlled-only: pass `open` and `onOpenChange`.
+ *
+ * Wiki: docs/components/AlertDialog.md
+ */
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+import { Button, type ButtonProps } from './Button.js';
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface AlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Root provider. Renders a native `<dialog>` with `role="alertdialog"`.
+ * Does NOT close on backdrop click or Escape — the user must choose
+ * an explicit action.
+ */
+export function AlertDialog({ open, children, className }: AlertDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+    if (open && !el.open) {
+      el.showModal();
+    } else if (!open && el.open) {
+      el.close();
+    }
+  }, [open]);
+
+  /* Prevent Escape from dismissing */
+  const handleCancel = useCallback(
+    (e: React.SyntheticEvent<HTMLDialogElement>) => {
+      e.preventDefault();
+    },
+    [],
+  );
+
+  return (
+    <dialog
+      ref={dialogRef}
+      role="alertdialog"
+      aria-modal="true"
+      onCancel={handleCancel}
+      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',
+        'open:flex open:items-center open:justify-center',
+        className,
+      )}
+    >
+      {children}
+    </dialog>
+  );
+}
+
+/* ── Content panel ──────────────────────────────────────────────────── */
+
+export const alertDialogContentVariants = cva(
+  'relative mx-auto flex flex-col rounded-xl border border-border bg-card text-card-foreground shadow-lg ' +
+    'animate-dialog-in',
+  {
+    variants: {
+      size: {
+        sm: 'w-full max-w-sm',
+        md: 'w-full max-w-lg',
+        lg: 'w-full max-w-2xl',
+        xl: 'w-full max-w-4xl',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+export interface AlertDialogContentProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertDialogContentVariants> {}
+
+export const AlertDialogContent = forwardRef<HTMLDivElement, AlertDialogContentProps>(
+  function AlertDialogContent({ className, size, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn(alertDialogContentVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Layout helpers ─────────────────────────────────────────────────── */
+
+export const AlertDialogHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function AlertDialogHeader({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const AlertDialogFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function AlertDialogFooter({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center justify-end gap-2 p-6 pt-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const AlertDialogTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function AlertDialogTitle({ className, ...props }, ref) {
+    return (
+      <h2
+        ref={ref}
+        className={cn('text-lg font-semibold leading-tight', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const AlertDialogDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function AlertDialogDescription({ className, ...props }, ref) {
+    return (
+      <p
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Action buttons ─────────────────────────────────────────────────── */
+
+export interface AlertDialogActionProps extends ButtonProps {}
+
+export const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(
+  function AlertDialogAction({ className, ...props }, ref) {
+    return <Button ref={ref} className={className} {...props} />;
+  },
+);
+
+export interface AlertDialogCancelProps extends ButtonProps {}
+
+export const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(
+  function AlertDialogCancel({ variant = 'outline', className, ...props }, ref) {
+    return <Button ref={ref} variant={variant} className={className} {...props} />;
+  },
+);

package/src/AspectRatio.native.tsx

@@ -0,0 +1,28 @@
+/**
+ * AspectRatio (React Native variant).
+ *
+ * Uses the `aspectRatio` style property supported natively.
+ */
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+export interface AspectRatioProps extends ViewProps {
+  ratio?: number;
+  className?: string;
+}
+
+export const AspectRatio = forwardRef<View, AspectRatioProps>(
+  function AspectRatio({ ratio = 1, className, style, children, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('w-full', className)}
+        style={[{ aspectRatio: ratio }, style]}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  },
+);

package/src/AspectRatio.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+/**
+ * AspectRatio (web variant — React DOM).
+ *
+ * Locks a container to a given ratio. Child fills the container.
+ *
+ *   <AspectRatio ratio={16 / 9}>
+ *     <img src="..." className="object-cover w-full h-full" />
+ *   </AspectRatio>
+ *
+ * Wiki: docs/components/AspectRatio.md
+ */
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from './internal/cn.js';
+
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+  /** Width-to-height ratio (default 1). E.g. `16/9`, `4/3`, `1`. */
+  ratio?: number;
+}
+
+export const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(
+  function AspectRatio({ ratio = 1, className, style, children, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('relative w-full', className)}
+        style={{ aspectRatio: String(ratio), ...style }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);