@mihcm/ui 0.14.1

package/src/Toast.tsx

@@ -0,0 +1,408 @@
+'use client';
+
+/**
+ * Toast (web variant — React DOM).
+ *
+ * Two-part API:
+ *  1. `<ToastProvider>` wraps your app, manages the queue, renders toasts
+ *     in a fixed container at bottom-right.
+ *  2. `toast()` imperative function — call from anywhere to show a toast.
+ *
+ * Sub-components (`Toast`, `ToastTitle`, `ToastDescription`, `ToastAction`,
+ * `ToastClose`) are used internally by the provider but exported for
+ * advanced composition.
+ *
+ * Variants: default, success, error, warning.
+ * Auto-dismiss after configurable duration (default 5 000 ms).
+ * Pause timer on hover; resume on mouse leave.
+ *
+ * Wiki: docs/components/Toast.md
+ */
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* -------------------------------------------------------------------------- */
+/*  CVA variants                                                              */
+/* -------------------------------------------------------------------------- */
+
+export const toastVariants = cva(
+  'pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 shadow-lg ' +
+    'transition-all duration-300 ease-out',
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-card text-foreground',
+        success: 'border-success/30 bg-success/10 text-foreground',
+        error: 'border-destructive/30 bg-destructive/10 text-foreground',
+        warning: 'border-warning/30 bg-warning/10 text-foreground',
+        accent: 'border-accent/30 bg-accent/10 text-foreground',
+      },
+      appearance: {
+        soft: '',
+        solid: '',
+        outline: 'bg-card',
+        minimal: 'border-transparent bg-background shadow-none',
+      },
+    },
+    compoundVariants: [
+      { appearance: 'solid', variant: 'default', className: 'border-foreground bg-foreground text-background' },
+      { appearance: 'solid', variant: 'success', className: 'border-success bg-success text-success-foreground' },
+      { appearance: 'solid', variant: 'error', className: 'border-destructive bg-destructive text-destructive-foreground' },
+      { appearance: 'solid', variant: 'warning', className: 'border-warning bg-warning text-warning-foreground' },
+      { appearance: 'solid', variant: 'accent', className: 'border-accent bg-accent text-accent-foreground' },
+      { appearance: 'outline', variant: 'default', className: 'border-border' },
+      { appearance: 'outline', variant: 'success', className: 'border-success' },
+      { appearance: 'outline', variant: 'error', className: 'border-destructive' },
+      { appearance: 'outline', variant: 'warning', className: 'border-warning' },
+      { appearance: 'outline', variant: 'accent', className: 'border-accent' },
+    ],
+    defaultVariants: { variant: 'default', appearance: 'soft' },
+  },
+);
+
+/* -------------------------------------------------------------------------- */
+/*  Types                                                                     */
+/* -------------------------------------------------------------------------- */
+
+export type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
+export type ToastAppearance = NonNullable<VariantProps<typeof toastVariants>['appearance']>;
+
+export interface ToastData {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  appearance?: ToastAppearance;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+  icon?: ReactNode;
+}
+
+export interface ToastProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
+  className?: string;
+}
+
+export interface ToastTitleProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export interface ToastDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export interface ToastActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export interface ToastCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  /** Maximum number of visible toasts. @default 5 */
+  max?: number;
+  /** Screen corner for the toast stack. */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  /** Default visual treatment for toasts without an explicit appearance. */
+  appearance?: ToastAppearance;
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Global singleton store                                                     */
+/*                                                                             */
+/*  Bundlers that transpile this package (e.g. Next.js `transpilePackages`)     */
+/*  may create multiple module instances. Using `globalThis` ensures toast()    */
+/*  and ToastProvider always share the same queue, even across chunks.          */
+/* -------------------------------------------------------------------------- */
+
+type Listener = () => void;
+
+interface ToastStore {
+  toasts: ToastData[];
+  listeners: Set<Listener>;
+  viewports: Set<number>;
+  counter: number;
+  viewportCounter: number;
+}
+
+const STORE_KEY = '__mihcm_toast_store__';
+
+function getStore(): ToastStore {
+  const g = globalThis as unknown as Record<string, ToastStore>;
+  if (!g[STORE_KEY]) {
+    g[STORE_KEY] = { toasts: [], listeners: new Set(), viewports: new Set(), counter: 0, viewportCounter: 0 };
+  }
+  return g[STORE_KEY];
+}
+
+function notify() {
+  for (const l of getStore().listeners) l();
+}
+
+function getSnapshot(): ToastData[] {
+  return getStore().toasts;
+}
+
+function getViewportSnapshot(): number | undefined {
+  return Array.from(getStore().viewports).at(-1);
+}
+
+function subscribe(listener: Listener): () => void {
+  const store = getStore();
+  store.listeners.add(listener);
+  return () => store.listeners.delete(listener);
+}
+
+/** Imperative API — call from anywhere to show a toast. */
+export function toast(data: Omit<ToastData, 'id'>): string {
+  const store = getStore();
+  const id = `toast-${++store.counter}-${Date.now()}`;
+  const entry: ToastData = { id, ...data };
+  store.toasts = [...store.toasts, entry];
+  notify();
+  return id;
+}
+
+function dismiss(id: string) {
+  const store = getStore();
+  store.toasts = store.toasts.filter((t) => t.id !== id);
+  notify();
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Sub-components                                                            */
+/* -------------------------------------------------------------------------- */
+
+const ACCENT: Record<ToastVariant, string> = {
+  default: 'border-l-border',
+  success: 'border-l-success',
+  error: 'border-l-destructive',
+  warning: 'border-l-warning',
+  accent: 'border-l-accent',
+};
+
+export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
+  { className, variant = 'default', appearance = 'soft', children, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(toastVariants({ variant, appearance }), 'border-l-4', ACCENT[variant ?? 'default'], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+export const ToastTitle = forwardRef<HTMLDivElement, ToastTitleProps>(function ToastTitle(
+  { className, ...props },
+  ref,
+) {
+  return <div ref={ref} className={cn('text-sm font-semibold', className)} {...props} />;
+});
+
+export const ToastDescription = forwardRef<HTMLDivElement, ToastDescriptionProps>(
+  function ToastDescription({ className, ...props }, ref) {
+    return <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />;
+  },
+);
+
+export const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        'inline-flex shrink-0 items-center rounded-md border border-border bg-transparent px-3 py-1 ' +
+          'text-sm font-medium transition-colors duration-150 hover:bg-muted focus-visible:outline-none ' +
+          'focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-label="Close"
+      className={cn(
+        'absolute right-2 top-2 rounded-md p-1 text-foreground/50 transition-opacity hover:text-foreground ' +
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        className,
+      )}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+  );
+});
+
+/* -------------------------------------------------------------------------- */
+/*  Individual toast item (manages timer + animation)                         */
+/* -------------------------------------------------------------------------- */
+
+const DEFAULT_DURATION = 5000;
+
+function ToastItem({
+  data,
+  onDismiss,
+  appearance,
+}: {
+  data: ToastData;
+  onDismiss: (id: string) => void;
+  appearance: ToastAppearance;
+}) {
+  const [visible, setVisible] = useState(false);
+  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const remainingRef = useRef(data.duration ?? DEFAULT_DURATION);
+  // eslint-disable-next-line react-hooks/purity -- initial value only, never re-read during render
+  const startRef = useRef(Date.now());
+
+  const startTimer = useCallback(() => {
+    startRef.current = Date.now();
+    timerRef.current = setTimeout(() => {
+      setExiting(true);
+      setTimeout(() => onDismiss(data.id), 300);
+    }, remainingRef.current);
+  }, [data.id, onDismiss]);
+
+  const pauseTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      remainingRef.current -= Date.now() - startRef.current;
+      if (remainingRef.current < 0) remainingRef.current = 0;
+    }
+  }, []);
+
+  useEffect(() => {
+    // Trigger entry animation on next frame
+    const raf = requestAnimationFrame(() => setVisible(true));
+    startTimer();
+    return () => {
+      cancelAnimationFrame(raf);
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [startTimer]);
+
+  const handleClose = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setExiting(true);
+    setTimeout(() => onDismiss(data.id), 300);
+  };
+
+  const isError = data.variant === 'error';
+
+  return (
+    <div
+      role="status"
+      aria-live={isError ? 'assertive' : 'polite'}
+      className={cn(
+        'transform transition-all duration-300',
+        visible && !exiting ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0',
+      )}
+      onMouseEnter={pauseTimer}
+      onMouseLeave={startTimer}
+    >
+      <Toast variant={data.variant} appearance={data.appearance ?? appearance}>
+        {data.icon ? <div className="mt-0.5 shrink-0 text-muted-foreground">{data.icon}</div> : null}
+        <div className="flex-1 space-y-1 pr-6">
+          <ToastTitle>{data.title}</ToastTitle>
+          {data.description !== undefined && (
+            <ToastDescription>{data.description}</ToastDescription>
+          )}
+          {data.action !== undefined && (
+            <div className="mt-2">
+              <ToastAction onClick={data.action.onClick}>{data.action.label}</ToastAction>
+            </div>
+          )}
+        </div>
+        <ToastClose onClick={handleClose} />
+      </Toast>
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  ToastProvider                                                             */
+/* -------------------------------------------------------------------------- */
+
+const POSITION_CLASS: Record<NonNullable<ToastProviderProps['position']>, string> = {
+  'bottom-right': 'bottom-4 right-4',
+  'bottom-left': 'bottom-4 left-4',
+  'top-right': 'right-4 top-4',
+  'top-left': 'left-4 top-4',
+};
+
+export function ToastProvider({ children, max = 5, position = 'bottom-right', appearance = 'soft' }: ToastProviderProps) {
+  const [viewportId] = useState(() => ++getStore().viewportCounter);
+
+  useEffect(() => {
+    const store = getStore();
+    store.viewports.add(viewportId);
+    notify();
+    return () => {
+      store.viewports.delete(viewportId);
+      notify();
+    };
+  }, [viewportId]);
+
+  const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const activeViewportId = useSyncExternalStore(subscribe, getViewportSnapshot, () => undefined);
+  const visible = items.slice(-max);
+  const isActiveViewport = viewportId === activeViewportId;
+
+  return (
+    <>
+      {children}
+      {isActiveViewport ? (
+        <div
+          aria-label="Notifications"
+          className={cn('pointer-events-none fixed z-[100] flex max-w-[420px] flex-col gap-2', POSITION_CLASS[position])}
+        >
+          {visible.map((t) => (
+            <ToastItem key={t.id} data={t} onDismiss={dismiss} appearance={appearance} />
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}

package/src/Toggle.native.tsx

@@ -0,0 +1,162 @@
+/**
+ * Toggle & ToggleGroup (React Native variant).
+ *
+ * Same API as the web variant. Uses `Pressable` for touch targets.
+ *
+ * Wiki: docs/components/Toggle.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ReactNode,
+} from 'react';
+import { Pressable, 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 };
+
+/* Toggle */
+
+export const toggleVariants = cva(
+  'flex-row items-center justify-center gap-1.5 rounded-md',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-border bg-transparent',
+      },
+      size: {
+        sm: 'h-8 px-2',
+        md: 'h-9 px-3',
+        lg: 'h-10 px-4',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  },
+);
+
+export interface ToggleProps
+  extends ClassedViewProps,
+    VariantProps<typeof toggleVariants> {
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export const Toggle = forwardRef<View, ToggleProps>(function Toggle(
+  { className, variant, size, pressed, onPressedChange, disabled, children, ...props },
+  ref,
+) {
+  return (
+    <Pressable
+      ref={ref as never}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: pressed, disabled }}
+      disabled={disabled}
+      onPress={() => onPressedChange(!pressed)}
+      className={cn(
+        toggleVariants({ variant, size }),
+        pressed && 'bg-accent/15',
+        disabled && 'opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+/* ── ToggleGroup ────────────────────────────────────────────────────── */
+
+interface ToggleGroupContextValue {
+  type: 'single' | 'multiple';
+  value: string | string[];
+  onItemToggle: (itemValue: string) => void;
+  variant?: VariantProps<typeof toggleVariants>['variant'];
+  size?: VariantProps<typeof toggleVariants>['size'];
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);
+
+export type ToggleGroupProps = ClassedViewProps &
+  VariantProps<typeof toggleVariants> &
+  (
+    | {
+        type: 'single';
+        value: string;
+        onValueChange: (value: string) => void;
+      }
+    | {
+        type: 'multiple';
+        value: string[];
+        onValueChange: (value: string[]) => void;
+      }
+  );
+
+export const ToggleGroup = forwardRef<View, ToggleGroupProps>(
+  function ToggleGroup({ className, type, value, onValueChange, variant, size, ...props }, ref) {
+    const onItemToggle = (itemValue: string) => {
+      if (type === 'single') {
+        (onValueChange as (v: string) => void)(itemValue);
+      } else {
+        const arr = value as string[];
+        const next = arr.includes(itemValue)
+          ? arr.filter((v) => v !== itemValue)
+          : [...arr, itemValue];
+        (onValueChange as (v: string[]) => void)(next);
+      }
+    };
+
+    return (
+      <ToggleGroupContext.Provider value={{ type, value, onItemToggle, variant, size }}>
+        <View
+          ref={ref}
+          className={cn('flex-row items-center gap-1', className)}
+          {...props}
+        />
+      </ToggleGroupContext.Provider>
+    );
+  },
+);
+
+/* ── ToggleGroupItem ────────────────────────────────────────────────── */
+
+export interface ToggleGroupItemProps extends ClassedViewProps {
+  value: string;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export const ToggleGroupItem = forwardRef<View, ToggleGroupItemProps>(
+  function ToggleGroupItem({ className, value, disabled, children, ...props }, ref) {
+    const ctx = useContext(ToggleGroupContext);
+    if (!ctx) throw new Error('ToggleGroupItem must be used within <ToggleGroup>');
+
+    const pressed = ctx.type === 'single'
+      ? ctx.value === value
+      : (ctx.value as string[]).includes(value);
+
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: pressed, disabled }}
+        disabled={disabled}
+        onPress={() => ctx.onItemToggle(value)}
+        className={cn(
+          toggleVariants({ variant: ctx.variant, size: ctx.size }),
+          pressed && 'bg-accent/15',
+          disabled && 'opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </Pressable>
+    );
+  },
+);