@mihcm/ui 0.14.1

package/src/Dialog.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+/**
+ * Dialog (web variant — React DOM).
+ *
+ * Accessible modal dialog built from a `<dialog>` element. Composable
+ * pieces mirror Card:
+ *
+ *   <Dialog open={open} onOpenChange={setOpen}>
+ *     <DialogContent>
+ *       <DialogHeader>
+ *         <DialogTitle>Edit profile</DialogTitle>
+ *         <DialogDescription>Make changes…</DialogDescription>
+ *       </DialogHeader>
+ *       <DialogBody>…</DialogBody>
+ *       <DialogFooter>
+ *         <Button onClick={() => setOpen(false)}>Save</Button>
+ *       </DialogFooter>
+ *     </DialogContent>
+ *   </Dialog>
+ *
+ * Controlled-only: pass `open` and `onOpenChange`.
+ *
+ * Wiki: docs/components/Dialog.md
+ */
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Root provider. Renders a native `<dialog>` and manages its
+ * `showModal()` / `close()` lifecycle.
+ */
+export function Dialog({ open, onOpenChange, children, className }: DialogProps) {
+  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]);
+
+  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}
+      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 dialogContentVariants = 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',
+        full: 'w-[calc(100%-2rem)] max-w-none h-[calc(100%-2rem)]',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+);
+
+export interface DialogContentProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof dialogContentVariants> {}
+
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  function DialogContent({ className, size, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        role="document"
+        className={cn(dialogContentVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* ── Close button ───────────────────────────────────────────────────── */
+
+export interface DialogCloseProps extends HTMLAttributes<HTMLButtonElement> {
+  onClose?: () => void;
+}
+
+export const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(
+  function DialogClose({ 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 DialogHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function DialogHeader({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DialogBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function DialogBody({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex-1 overflow-y-auto p-6', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DialogFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function DialogFooter({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center justify-end gap-2 p-6 pt-0', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DialogTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function DialogTitle({ className, ...props }, ref) {
+    return (
+      <h2
+        ref={ref}
+        className={cn('text-lg font-semibold leading-tight', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DialogDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function DialogDescription({ className, ...props }, ref) {
+    return (
+      <p
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/Drawer.native.tsx

@@ -0,0 +1,134 @@
+/**
+ * Drawer (React Native variant).
+ *
+ * A bottom-sheet style drawer using Modal + animated slide-up.
+ * Same composable API as the web variant.
+ *
+ * Wiki: docs/components/Drawer.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type ViewProps,
+  type TextProps,
+} from 'react-native';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+type ClassedTextProps = Omit<TextProps, 'style'> & { className?: string };
+
+/* ── Root ──────────────────────────────────────────────────────────── */
+
+export interface DrawerProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+}
+
+export function Drawer({ open, onOpenChange, children }: DrawerProps) {
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="slide"
+      onRequestClose={() => onOpenChange?.(false)}
+      statusBarTranslucent
+    >
+      <Pressable
+        onPress={() => onOpenChange?.(false)}
+        className="flex-1 justify-end bg-black/50"
+        accessibilityRole="none"
+      >
+        <Pressable onPress={(e) => e.stopPropagation()}>
+          {children}
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+/* ── Trigger (passthrough on native) ──────────────────────────────── */
+
+export const DrawerTrigger = forwardRef<View, ClassedViewProps & { asChild?: boolean; children: ReactNode }>(
+  function DrawerTrigger({ className, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn(className)} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+export const DrawerClose = DrawerTrigger;
+export const DrawerPortal = ({ children }: { children: ReactNode }) => <>{children}</>;
+
+/* ── Content ──────────────────────────────────────────────────────── */
+
+export const DrawerContent = forwardRef<View, ClassedViewProps>(
+  function DrawerContent({ className, children, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          'rounded-t-2xl border border-border bg-card pb-8',
+          className,
+        )}
+        {...props}
+      >
+        {/* Drag handle */}
+        <View className="mx-auto mt-3 h-1.5 w-16 rounded-full bg-muted" />
+        {children}
+      </View>
+    );
+  },
+);
+
+/* ── Overlay ──────────────────────────────────────────────────────── */
+
+export const DrawerOverlay = forwardRef<View, ClassedViewProps>(
+  function DrawerOverlay(props, ref) {
+    return <View ref={ref} {...props} />;
+  },
+);
+
+/* ── Layout helpers ───────────────────────────────────────────────── */
+
+export const DrawerHeader = forwardRef<View, ClassedViewProps>(
+  function DrawerHeader({ className, ...props }, ref) {
+    return <View ref={ref} className={cn('gap-1.5 p-4', className)} {...props} />;
+  },
+);
+
+export const DrawerFooter = forwardRef<View, ClassedViewProps>(
+  function DrawerFooter({ className, ...props }, ref) {
+    return <View ref={ref} className={cn('gap-2 p-4', className)} {...props} />;
+  },
+);
+
+export const DrawerTitle = forwardRef<Text, ClassedTextProps>(
+  function DrawerTitle({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        accessibilityRole="header"
+        className={cn('text-lg font-semibold text-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const DrawerDescription = forwardRef<Text, ClassedTextProps>(
+  function DrawerDescription({ className, ...props }, ref) {
+    return (
+      <Text
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/Drawer.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+/**
+ * Drawer (web variant — React DOM).
+ *
+ * A mobile-friendly bottom sheet / drawer powered by `vaul`.
+ *
+ *   <Drawer open={open} onOpenChange={setOpen}>
+ *     <DrawerTrigger asChild>
+ *       <Button>Open</Button>
+ *     </DrawerTrigger>
+ *     <DrawerContent>
+ *       <DrawerHeader>
+ *         <DrawerTitle>Settings</DrawerTitle>
+ *         <DrawerDescription>Adjust preferences.</DrawerDescription>
+ *       </DrawerHeader>
+ *       <div className="p-4">…body…</div>
+ *       <DrawerFooter>
+ *         <Button onClick={() => setOpen(false)}>Done</Button>
+ *       </DrawerFooter>
+ *     </DrawerContent>
+ *   </Drawer>
+ *
+ * Wiki: docs/components/Drawer.md
+ */
+import { type ComponentPropsWithoutRef } from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from './internal/cn.js';
+
+/* ── Root + composable re-exports ─────────────────────────────────── */
+
+export function Drawer({
+  shouldScaleBackground = true,
+  ...props
+}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;
+}
+
+export const DrawerTrigger: typeof DrawerPrimitive.Trigger = DrawerPrimitive.Trigger;
+export const DrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;
+export const DrawerClose: typeof DrawerPrimitive.Close = DrawerPrimitive.Close;
+
+/* ── Overlay ──────────────────────────────────────────────────────── */
+
+export function DrawerOverlay({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn('fixed inset-0 z-50 bg-black/80 animate-in fade-in-0', className)}
+      {...props}
+    />
+  );
+}
+
+/* ── Content ──────────────────────────────────────────────────────── */
+
+export function DrawerContent({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col',
+          'rounded-t-xl border border-border bg-card',
+          className,
+        )}
+        {...props}
+      >
+        {/* Drag handle — visual affordance only, interaction handled by vaul */}
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" aria-hidden="true" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+/* ── Layout helpers ───────────────────────────────────────────────── */
+
+export function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+  );
+}
+
+export function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+  );
+}
+
+export function DrawerTitle({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn('text-lg font-semibold leading-none tracking-tight text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export function DrawerDescription({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}