devnonla-ui 0.1.0

package/src/menu/Menu.tsx

@@ -0,0 +1,98 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { FluentIcon } from "../icon/FluentIcon";
+import { cn } from "../lib/cn";
+import type { PopperPlacement } from "../lib/placement";
+import { Popover } from "../popover/Popover";
+
+export type MenuRootProps = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger: ReactNode;
+  children: ReactNode;
+  contentClassName?: string;
+  placement?: PopperPlacement;
+};
+
+export function Menu({ open, onOpenChange, trigger, children, contentClassName, placement = "bottomLeft" }: MenuRootProps) {
+  return (
+    <Popover
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger="click"
+      placement={placement}
+      contentClassName={cn("w-[220px] p-1", contentClassName)}
+      content={<div className="flex flex-col gap-px">{children}</div>}
+    >
+      {trigger}
+    </Popover>
+  );
+}
+
+export type MenuTriggerProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  active?: boolean;
+  open?: boolean;
+};
+
+export function MenuTrigger({ active, open, className, children, ...rest }: MenuTriggerProps) {
+  return (
+    <button
+      type="button"
+      aria-haspopup="menu"
+      aria-expanded={open}
+      aria-current={active ? "true" : undefined}
+      className={cn(
+        "inline-flex h-7 max-w-44 items-center gap-0.5 rounded-md border-0 bg-transparent px-2.5 text-sm font-medium leading-5 cursor-pointer",
+        active || open ? "bg-ink-active text-foreground" : "text-foreground/85 hover:bg-ink-hover hover:text-foreground",
+        className,
+      )}
+      {...rest}
+    >
+      <span className="min-w-0 truncate leading-5">{children}</span>
+      <FluentIcon name="arrow-square-down-24" size={12} className={cn("shrink-0 transition-transform duration-150", open && "rotate-180")} />
+    </button>
+  );
+}
+
+export type MenuItemProps = {
+  icon?: ReactNode;
+  label: ReactNode;
+  extra?: ReactNode;
+  selected?: boolean;
+  action?: ReactNode;
+  onClick?: () => void;
+  className?: string;
+};
+
+export function MenuItem({ icon, label, extra, selected, action, onClick, className }: MenuItemProps) {
+  return (
+    <div className={cn("group relative flex min-h-8 items-center rounded-md", selected ? "bg-ink-active" : "hover:bg-foreground/5", className)}>
+      <button
+        type="button"
+        aria-current={selected ? "true" : undefined}
+        onClick={onClick}
+        className={cn(
+          "flex min-h-8 w-full items-center gap-2 rounded-md border-0 bg-transparent px-2.5 text-left text-sm cursor-pointer",
+          selected ? "font-medium text-foreground" : "font-normal text-foreground",
+        )}
+      >
+        {icon ? <span className="inline-flex size-4 shrink-0 items-center justify-center [&_img]:size-4">{icon}</span> : null}
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+        {extra != null ? <span className={cn("shrink-0 text-xs tabular-nums text-muted-foreground", action && "group-hover:invisible")}>{extra}</span> : null}
+      </button>
+      {action ? <div className="absolute right-1 opacity-0 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100">{action}</div> : null}
+    </div>
+  );
+}
+
+export function MenuAction({ className, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type="button" className={cn("flex size-6 items-center justify-center rounded-md border-0 bg-transparent p-0 cursor-pointer hover:bg-ink-active", className)} {...rest} />;
+}
+
+export function MenuDivider({ className }: { className?: string }) {
+  return <div className={cn("mx-2.5 my-1 h-px bg-ink-line", className)} />;
+}
+
+Menu.Trigger = MenuTrigger;
+Menu.Item = MenuItem;
+Menu.Action = MenuAction;
+Menu.Divider = MenuDivider;

package/src/message/message.tsx

@@ -0,0 +1,214 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+export type MessageType = "success" | "error" | "info" | "warning" | "loading";
+
+export type MessageConfig = {
+  content: ReactNode;
+  duration?: number;
+  type?: MessageType;
+  key?: string | number;
+  icon?: ReactNode;
+  onClose?: () => void;
+  onClick?: () => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+type Active = {
+  id: string;
+  type: MessageType;
+  content: ReactNode;
+  icon?: ReactNode;
+  onClose?: () => void;
+  onClick?: () => void;
+  className?: string;
+  style?: CSSProperties;
+  leaving?: boolean;
+};
+
+type TypeOpen = {
+  (content: ReactNode, duration?: number, onClose?: () => void): () => void;
+  (config: MessageConfig): () => void;
+};
+
+let hostEl: HTMLDivElement | null = null;
+let root: Root | null = null;
+let items: Active[] = [];
+const timers = new Map<string, number>();
+
+function IconSuccess() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="8" fill="var(--success)" />
+      <path d="M4.6 8.15L6.85 10.3L11.4 5.7" stroke="var(--nonla-bg)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IconError() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="8" fill="var(--destructive)" />
+      <path d="M5.4 5.4L10.6 10.6M10.6 5.4L5.4 10.6" stroke="var(--destructive-foreground)" strokeWidth="1.6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconInfo() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="8" fill="var(--link)" />
+      <path d="M8 7.1V11.2M8 4.8V5.5" stroke="var(--nonla-solid-fg)" strokeWidth="1.7" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconWarning() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="8" fill="var(--warn)" />
+      <path d="M8 4.6V8.8M8 10.8V11.4" stroke="var(--nonla-bg)" strokeWidth="1.7" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconLoading() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden className="nonla-message-spin">
+      <circle cx="8" cy="8" r="6.25" stroke="color-mix(in oklab, var(--link) 30%, transparent)" strokeWidth="2" />
+      <path d="M14.25 8A6.25 6.25 0 0 0 8 1.75" stroke="var(--link)" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function defaultIcon(type: MessageType) {
+  switch (type) {
+    case "success":
+      return <IconSuccess />;
+    case "error":
+      return <IconError />;
+    case "warning":
+      return <IconWarning />;
+    case "loading":
+      return <IconLoading />;
+    default:
+      return <IconInfo />;
+  }
+}
+
+function MessageList({ list }: { list: Active[] }) {
+  return (
+    <>
+      {list.map((item) => (
+        <div
+          key={item.id}
+          className={["nonla-message-item", "nonla-glass", item.leaving ? "is-leaving" : "", item.className].filter(Boolean).join(" ")}
+          data-type={item.type}
+          role="status"
+          style={item.style}
+          onClick={item.onClick}
+        >
+          <span className="nonla-message-icon">{item.icon ?? defaultIcon(item.type)}</span>
+          <span className="nonla-message-content">{item.content}</span>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function ensureHost() {
+  if (hostEl && root) return;
+  hostEl = document.createElement("div");
+  hostEl.className = "nonla-message-host";
+  document.body.appendChild(hostEl);
+  root = createRoot(hostEl);
+}
+
+function render() {
+  ensureHost();
+  root?.render(<MessageList list={items} />);
+}
+
+function beginLeave(id: string) {
+  const found = items.find((i) => i.id === id);
+  if (!found || found.leaving) return;
+  items = items.map((i) => (i.id === id ? { ...i, leaving: true } : i));
+  const t = timers.get(id);
+  if (t) {
+    window.clearTimeout(t);
+    timers.delete(id);
+  }
+  render();
+  window.setTimeout(() => {
+    items = items.filter((i) => i.id !== id);
+    found.onClose?.();
+    render();
+  }, 160);
+}
+
+function remove(id: string) {
+  beginLeave(id);
+}
+
+function isConfig(value: unknown): value is MessageConfig {
+  return typeof value === "object" && value !== null && "content" in value;
+}
+
+function openTyped(type: MessageType, contentOrConfig: ReactNode | MessageConfig, duration?: number, onClose?: () => void) {
+  const cfg: MessageConfig = isConfig(contentOrConfig)
+    ? contentOrConfig
+    : { content: contentOrConfig, duration, onClose };
+
+  const id = String(cfg.key ?? `msg-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`);
+  const resolvedType = cfg.type ?? type;
+  const resolvedDuration = cfg.duration ?? (resolvedType === "loading" ? 0 : 3);
+
+  const existingTimer = timers.get(id);
+  if (existingTimer) {
+    window.clearTimeout(existingTimer);
+    timers.delete(id);
+  }
+
+  items = [
+    ...items.filter((i) => i.id !== id),
+    {
+      id,
+      type: resolvedType,
+      content: cfg.content,
+      icon: cfg.icon,
+      onClose: cfg.onClose,
+      onClick: cfg.onClick,
+      className: cfg.className,
+      style: cfg.style,
+    },
+  ];
+  render();
+
+  if (resolvedDuration > 0) {
+    const timerId = window.setTimeout(() => beginLeave(id), resolvedDuration * 1000);
+    timers.set(id, timerId);
+  }
+
+  return () => remove(id);
+}
+
+function makeTypeOpen(type: MessageType): TypeOpen {
+  return ((contentOrConfig: ReactNode | MessageConfig, duration?: number, onClose?: () => void) =>
+    openTyped(type, contentOrConfig, duration, onClose)) as TypeOpen;
+}
+
+export const message = {
+  open: (config: MessageConfig) => openTyped(config.type ?? "info", config),
+  success: makeTypeOpen("success"),
+  error: makeTypeOpen("error"),
+  info: makeTypeOpen("info"),
+  warning: makeTypeOpen("warning"),
+  loading: makeTypeOpen("loading"),
+  destroy: (key?: string | number) => {
+    if (key != null) remove(String(key));
+    else {
+      for (const id of items.map((i) => i.id)) remove(id);
+    }
+  },
+};

package/src/modal/Modal.tsx

@@ -0,0 +1,277 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import {
+  type AnimationEvent,
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { Button } from "../button/Button";
+import { cn } from "../lib/cn";
+import { glassSurfaceClass } from "../lib/surface";
+
+/** Matches `--nonla-dur-fast` exit animation; fallback if animationend is skipped. */
+const EXIT_MS = 200;
+
+export type ModalProps = {
+  open?: boolean;
+  visible?: boolean;
+  title?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode | null;
+  onOk?: () => void | Promise<void>;
+  onCancel?: () => void;
+  onClose?: () => void;
+  afterClose?: () => void;
+  okText?: ReactNode;
+  cancelText?: ReactNode;
+  okButtonProps?: Record<string, unknown>;
+  cancelButtonProps?: Record<string, unknown>;
+  confirmLoading?: boolean;
+  width?: number | string;
+  centered?: boolean;
+  destroyOnClose?: boolean;
+  destroyOnHidden?: boolean;
+  closable?: boolean;
+  maskClosable?: boolean;
+  className?: string;
+  /** Root positioning (antd `style={{ top }}`). */
+  style?: CSSProperties;
+  styles?: { body?: CSSProperties; content?: CSSProperties; header?: CSSProperties; footer?: CSSProperties; container?: CSSProperties };
+  onOpenChange?: (open: boolean) => void;
+};
+
+export type ModalConfirmProps = {
+  title?: ReactNode;
+  content?: ReactNode;
+  okText?: ReactNode;
+  cancelText?: ReactNode;
+  okType?: "primary" | "danger" | "default";
+  okButtonProps?: { danger?: boolean; color?: string; type?: string };
+  onOk?: () => void | Promise<void>;
+  onCancel?: () => void;
+  centered?: boolean;
+  width?: number | string;
+};
+
+type ConfirmHandle = { destroy: () => void; update: (p: Partial<ModalConfirmProps>) => void };
+
+function ModalView({
+  open,
+  visible,
+  title,
+  children,
+  footer,
+  onOk,
+  onCancel,
+  onClose,
+  afterClose,
+  okText = "OK",
+  cancelText = "Cancel",
+  okButtonProps,
+  cancelButtonProps,
+  confirmLoading,
+  width = 480,
+  centered = false,
+  destroyOnClose,
+  destroyOnHidden,
+  closable = true,
+  maskClosable = true,
+  className,
+  style,
+  styles,
+  onOpenChange,
+}: ModalProps) {
+  const isOpen = open ?? visible ?? false;
+  const [loading, setLoading] = useState(false);
+  const shouldDestroy = Boolean(destroyOnHidden ?? destroyOnClose);
+  // Keep body mounted through the exit animation; clear only after it finishes.
+  const [present, setPresent] = useState(isOpen);
+  const closedRef = useRef(true);
+  const wasOpenRef = useRef(isOpen);
+  const afterCloseRef = useRef(afterClose);
+  afterCloseRef.current = afterClose;
+
+  const finishExit = () => {
+    if (closedRef.current) return;
+    closedRef.current = true;
+    if (shouldDestroy) setPresent(false);
+    afterCloseRef.current?.();
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      closedRef.current = false;
+      wasOpenRef.current = true;
+      setPresent(true);
+      return;
+    }
+    // Only schedule exit cleanup after an open→close transition (not initial mount).
+    if (!wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    const t = window.setTimeout(finishExit, EXIT_MS);
+    return () => window.clearTimeout(t);
+  }, [isOpen, shouldDestroy]);
+
+  const body = !shouldDestroy || present ? children : null;
+
+  const close = () => {
+    onOpenChange?.(false);
+    onCancel?.();
+    onClose?.();
+  };
+
+  const handleOk = async () => {
+    try {
+      setLoading(true);
+      await onOk?.();
+      onOpenChange?.(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const busy = confirmLoading ?? loading;
+
+  const defaultFooter =
+    footer === null ? null : footer !== undefined ? (
+      footer
+    ) : (
+      <>
+        <Button type="default" onClick={close} {...(cancelButtonProps as object)}>
+          {cancelText}
+        </Button>
+        <Button type="primary" loading={busy} onClick={handleOk} {...(okButtonProps as object)}>
+          {okText}
+        </Button>
+      </>
+    );
+
+  const onContentAnimationEnd = (e: AnimationEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) return;
+    if (!isOpen) finishExit();
+  };
+
+  return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(next) => {
+        onOpenChange?.(next);
+        if (!next) {
+          onCancel?.();
+          onClose?.();
+        }
+      }}
+    >
+      {isOpen || present ? (
+        <Dialog.Portal>
+          <Dialog.Overlay className="nonla-modal-overlay" />
+          <Dialog.Content
+            className={cn("nonla-modal-content", glassSurfaceClass, className)}
+            data-centered={centered ? "true" : undefined}
+            style={{ width, ...style, ...styles?.container, ...styles?.content }}
+            onAnimationEnd={onContentAnimationEnd}
+            onPointerDownOutside={(e) => {
+              if (!maskClosable) e.preventDefault();
+            }}
+            onInteractOutside={(e) => {
+              if (!maskClosable) e.preventDefault();
+            }}
+          >
+            {(title || closable) && (
+              <div className="nonla-modal-header" style={styles?.header}>
+                <Dialog.Title className="nonla-modal-title">{title}</Dialog.Title>
+                {closable ? (
+                  <Dialog.Close className="nonla-modal-close" aria-label="Close">
+                    ×
+                  </Dialog.Close>
+                ) : null}
+              </div>
+            )}
+            <div className="nonla-modal-body" style={styles?.body}>
+              {body}
+            </div>
+            {defaultFooter != null ? (
+              <div className="nonla-modal-footer" style={styles?.footer}>
+                {typeof defaultFooter === "function" ? null : defaultFooter}
+              </div>
+            ) : null}
+          </Dialog.Content>
+        </Dialog.Portal>
+      ) : null}
+    </Dialog.Root>
+  );
+}
+
+function ConfirmHost({ initial, onDone }: { initial: ModalConfirmProps; onDone: () => void }) {
+  const [open, setOpen] = useState(true);
+  const [props, setProps] = useState(initial);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    (ConfirmHost as unknown as { _update?: (p: Partial<ModalConfirmProps>) => void })._update = (p) => setProps((prev) => ({ ...prev, ...p }));
+  }, []);
+
+  const close = () => {
+    setOpen(false);
+    props.onCancel?.();
+  };
+
+  const ok = async () => {
+    try {
+      setLoading(true);
+      await props.onOk?.();
+      setOpen(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const danger = props.okType === "danger" || props.okButtonProps?.danger;
+
+  return (
+    <ModalView
+      open={open}
+      title={props.title}
+      width={props.width}
+      centered={props.centered}
+      confirmLoading={loading}
+      okText={props.okText ?? "OK"}
+      cancelText={props.cancelText ?? "Cancel"}
+      okButtonProps={{ danger }}
+      onOk={ok}
+      onCancel={close}
+      afterClose={onDone}
+      onOpenChange={(v) => {
+        if (!v) close();
+      }}
+    >
+      {props.content}
+    </ModalView>
+  );
+}
+
+function mountConfirm(props: ModalConfirmProps): ConfirmHandle {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const root: Root = createRoot(el);
+  const destroy = () => {
+    root.unmount();
+    el.remove();
+  };
+  root.render(<ConfirmHost initial={props} onDone={destroy} />);
+  return {
+    destroy,
+    update: (p) => (ConfirmHost as unknown as { _update?: (x: Partial<ModalConfirmProps>) => void })._update?.(p),
+  };
+}
+
+export const Modal = Object.assign(ModalView, {
+  confirm: (props: ModalConfirmProps) => mountConfirm(props),
+  info: (props: ModalConfirmProps) => mountConfirm(props),
+  warning: (props: ModalConfirmProps) => mountConfirm(props),
+  error: (props: ModalConfirmProps) => mountConfirm({ ...props, okType: "danger" }),
+  success: (props: ModalConfirmProps) => mountConfirm(props),
+});

package/src/pagination/Pagination.tsx

@@ -0,0 +1,103 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { type ControlSize, controlHeightVar, normalizeSize } from "../lib/sizes";
+
+export type PaginationItemType = "page" | "prev" | "next" | "jump-prev" | "jump-next";
+
+export type PaginationProps = {
+  current?: number;
+  pageSize?: number;
+  total?: number;
+  onChange?: (page: number, pageSize: number) => void;
+  showSizeChanger?: boolean;
+  className?: string;
+  simple?: boolean;
+  disabled?: boolean;
+  size?: ControlSize;
+  itemRender?: (page: number, type: PaginationItemType, originalElement: ReactNode) => ReactNode;
+};
+
+function pageList(current: number, pages: number): (number | "ellipsis")[] {
+  if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1);
+  const set = new Set<number>([1, pages, current, current - 1, current + 1]);
+  if (current <= 3) [2, 3, 4].forEach((n) => set.add(n));
+  if (current >= pages - 2) [pages - 1, pages - 2, pages - 3].forEach((n) => set.add(n));
+  const nums = [...set].filter((n) => n >= 1 && n <= pages).sort((a, b) => a - b);
+  const out: (number | "ellipsis")[] = [];
+  for (let i = 0; i < nums.length; i++) {
+    const n = nums[i]!;
+    if (i > 0 && n - nums[i - 1]! > 1) out.push("ellipsis");
+    out.push(n);
+  }
+  return out;
+}
+
+function ItemBtn({
+  children,
+  active,
+  disabled,
+  onClick,
+  className,
+}: {
+  children: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={cn("inline-flex min-w-7 cursor-pointer items-center justify-center rounded-md px-1.5 text-sm transition-colors", "disabled:cursor-not-allowed disabled:opacity-40", active ? "bg-secondary text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground", className)}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function Pagination({ current = 1, pageSize = 10, total = 0, onChange, className, disabled, size, itemRender }: PaginationProps) {
+  const pages = Math.max(1, Math.ceil(total / pageSize));
+  const compact = normalizeSize(size) === "small";
+  const h = compact ? controlHeightVar(size) : 28;
+
+  const wrap = (page: number, type: PaginationItemType, node: ReactNode) => (itemRender ? itemRender(page, type, node) : node);
+
+  const prev = wrap(
+    current - 1,
+    "prev",
+    <ItemBtn disabled={disabled || current <= 1} onClick={() => onChange?.(current - 1, pageSize)}>
+      ‹
+    </ItemBtn>,
+  );
+  const next = wrap(
+    current + 1,
+    "next",
+    <ItemBtn disabled={disabled || current >= pages} onClick={() => onChange?.(current + 1, pageSize)}>
+      ›
+    </ItemBtn>,
+  );
+
+  return (
+    <div className={cn("inline-flex items-center gap-0.5", className)} style={{ height: h }}>
+      {prev}
+      {pageList(current, pages).map((item, i, list) => {
+        if (item === "ellipsis") {
+          return (
+            <span key={`ellipsis-${list[i - 1]}-${list[i + 1]}`} className="px-1 text-sm text-muted-foreground">
+              …
+            </span>
+          );
+        }
+        const node = (
+          <ItemBtn active={item === current} disabled={disabled} onClick={() => onChange?.(item, pageSize)}>
+            {item}
+          </ItemBtn>
+        );
+        return <span key={item}>{wrap(item, "page", node)}</span>;
+      })}
+      {next}
+    </div>
+  );
+}