devnonla-ui 0.1.0

package/src/popconfirm/Popconfirm.tsx

@@ -0,0 +1,134 @@
+import { type CSSProperties, type ReactNode, useState } from "react";
+import { Button } from "../button/Button";
+import { cn } from "../lib/cn";
+import { type PopperPlacement } from "../lib/placement";
+import { Popover } from "../popover/Popover";
+
+export type PopconfirmProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void;
+  okText?: ReactNode;
+  cancelText?: ReactNode;
+  okType?: "primary" | "default" | "dashed" | "link" | "text" | "danger";
+  okButtonProps?: { danger?: boolean; type?: string; color?: string; variant?: string };
+  cancelButtonProps?: Record<string, unknown>;
+  /** Customize / hide the leading icon. Pass `null` to hide. */
+  icon?: ReactNode | null;
+  showCancel?: boolean;
+  disabled?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: PopperPlacement;
+  className?: string;
+  overlayClassName?: string;
+  getPopupContainer?: () => HTMLElement;
+  styles?: { root?: CSSProperties };
+};
+
+function WarningIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden className="mt-0.5 shrink-0">
+      <circle cx="8" cy="8" r="8" fill="var(--warn)" />
+      <path d="M8 4.4V8.6M8 10.7V11.4" stroke="var(--nonla-bg)" strokeWidth="1.7" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function Popconfirm({
+  title,
+  description,
+  children,
+  onConfirm,
+  onCancel,
+  okText = "OK",
+  cancelText = "Cancel",
+  okType = "primary",
+  okButtonProps,
+  cancelButtonProps,
+  icon,
+  showCancel = true,
+  disabled,
+  open: openProp,
+  onOpenChange,
+  placement = "top",
+  className,
+  overlayClassName,
+  getPopupContainer,
+  styles,
+}: PopconfirmProps) {
+  const [innerOpen, setInnerOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const open = openProp ?? innerOpen;
+  const setOpen = (v: boolean) => {
+    setInnerOpen(v);
+    onOpenChange?.(v);
+  };
+
+  if (disabled) return <>{children}</>;
+
+  const showIcon = icon !== null;
+  const resolvedIcon = icon === undefined ? <WarningIcon /> : icon;
+  const okDanger = okType === "danger" || okButtonProps?.danger;
+  const okBtnType = okButtonProps?.type ?? (okType === "danger" ? "primary" : okType);
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      placement={placement}
+      arrow
+      overlayClassName={overlayClassName}
+      contentClassName={cn("p-3!", className)}
+      getPopupContainer={getPopupContainer}
+      style={styles?.root}
+      content={
+        <div className="min-w-48 max-w-72">
+          <div className="flex gap-2">
+            {showIcon ? <span className="nonla-popconfirm-icon">{resolvedIcon}</span> : null}
+            <div className="min-w-0 flex-1">
+              {title != null && title !== false ? <div className="text-sm font-medium leading-snug text-foreground">{title}</div> : null}
+              {description != null && description !== false ? <div className={cn("text-[13px] leading-snug text-muted-foreground", title != null && title !== false && "mt-1")}>{description}</div> : null}
+            </div>
+          </div>
+          <div className="mt-3 flex justify-end gap-2">
+            {showCancel ? (
+              <Button
+                size="small"
+                type="default"
+                {...(cancelButtonProps as object)}
+                onClick={() => {
+                  setOpen(false);
+                  onCancel?.();
+                }}
+              >
+                {cancelText}
+              </Button>
+            ) : null}
+            <Button
+              size="small"
+              type={okBtnType as "primary" | "default" | "dashed" | "link" | "text"}
+              danger={okDanger}
+              loading={loading}
+              onClick={async () => {
+                try {
+                  setLoading(true);
+                  await onConfirm?.();
+                  setOpen(false);
+                } finally {
+                  setLoading(false);
+                }
+              }}
+            >
+              {okText}
+            </Button>
+          </div>
+        </div>
+      }
+    >
+      {children}
+    </Popover>
+  );
+}

package/src/popover/Popover.tsx

@@ -0,0 +1,116 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from "react";
+import { useAppConfig } from "../app/App";
+import { cn } from "../lib/cn";
+import { type PopperPlacement, placementToRadix } from "../lib/placement";
+import { glassOverlayClass } from "../lib/surface";
+
+export type PopoverProps = {
+  content?: ReactNode;
+  title?: ReactNode;
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: "click" | "hover";
+  placement?: PopperPlacement;
+  mouseEnterDelay?: number;
+  mouseLeaveDelay?: number;
+  getPopupContainer?: () => HTMLElement;
+  /** Show arrow pointing at the trigger (antd default for Popconfirm). */
+  arrow?: boolean | { pointAtCenter?: boolean };
+  className?: string;
+  overlayClassName?: string;
+  /** Extra class on the content panel (padding / width). */
+  contentClassName?: string;
+  style?: CSSProperties;
+  /** antd `styles` — `root`/`body` map to content panel; `container` accepted as alias. */
+  styles?: {
+    root?: CSSProperties;
+    body?: CSSProperties;
+    content?: CSSProperties;
+    container?: CSSProperties;
+  };
+};
+
+export function Popover({
+  content,
+  title,
+  children,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  trigger = "click",
+  placement = "bottom",
+  mouseEnterDelay = 0.1,
+  mouseLeaveDelay = 0.1,
+  getPopupContainer,
+  arrow = false,
+  className,
+  overlayClassName,
+  contentClassName,
+  style,
+  styles,
+}: PopoverProps) {
+  const showArrow = Boolean(arrow);
+  const panelStyle = { ...style, ...styles?.root, ...styles?.content, ...styles?.container, ...styles?.body };
+  const app = useAppConfig();
+  const { side, align } = placementToRadix(placement);
+  const hover = trigger === "hover";
+  const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);
+  const open = openProp ?? innerOpen;
+  const enterTimer = useRef<number>(0);
+  const leaveTimer = useRef<number>(0);
+
+  const setOpen = (v: boolean) => {
+    if (openProp === undefined) setInnerOpen(v);
+    onOpenChange?.(v);
+  };
+
+  useEffect(() => () => {
+    window.clearTimeout(enterTimer.current);
+    window.clearTimeout(leaveTimer.current);
+  }, []);
+
+  const onEnter = () => {
+    if (!hover) return;
+    window.clearTimeout(leaveTimer.current);
+    enterTimer.current = window.setTimeout(() => setOpen(true), mouseEnterDelay * 1000);
+  };
+  const onLeave = () => {
+    if (!hover) return;
+    window.clearTimeout(enterTimer.current);
+    leaveTimer.current = window.setTimeout(() => setOpen(false), mouseLeaveDelay * 1000);
+  };
+
+  const container = getPopupContainer ?? app.getPopupContainer;
+
+  return (
+    <PopoverPrimitive.Root
+      open={open}
+      onOpenChange={(v) => {
+        if (hover && v) return;
+        setOpen(v);
+      }}
+    >
+      <PopoverPrimitive.Trigger asChild onMouseEnter={onEnter} onMouseLeave={onLeave}>
+        {children}
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal container={container?.()}>
+        <PopoverPrimitive.Content
+          side={side}
+          align={align}
+          sideOffset={showArrow ? 8 : 6}
+          onMouseEnter={onEnter}
+          onMouseLeave={onLeave}
+          className={cn("w-max max-w-sm p-3", glassOverlayClass, contentClassName, className, overlayClassName)}
+          style={panelStyle}
+        >
+          {title ? <div className="mb-2 text-sm font-medium">{title}</div> : null}
+          {content}
+          {showArrow ? <PopoverPrimitive.Arrow width={12} height={6} className="fill-glass drop-shadow-[0_1px_0_var(--glass-border)]" /> : null}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}

package/src/scroll/OverlayScroll.tsx

@@ -0,0 +1,141 @@
+import { type PointerEvent as ReactPointerEvent, type ReactNode, type Ref, type UIEventHandler, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+
+export type OverlayScrollVisibility = "hover" | "always";
+
+export type OverlayScrollProps = {
+  /** `hover` shows the thumb on hover / while scrolling. `always` keeps it visible. */
+  visibility?: OverlayScrollVisibility;
+  className?: string;
+  innerClassName?: string;
+  children?: ReactNode;
+  onScroll?: UIEventHandler<HTMLDivElement>;
+  scrollRef?: Ref<HTMLDivElement>;
+};
+
+type Thumb = { top: number; height: number; shown: boolean };
+
+function assignRef(ref: Ref<HTMLDivElement> | undefined, node: HTMLDivElement | null) {
+  if (!ref) return;
+  if (typeof ref === "function") ref(node);
+  else ref.current = node;
+}
+
+export function OverlayScroll({ visibility = "hover", className, innerClassName, children, onScroll, scrollRef }: OverlayScrollProps) {
+  const elRef = useRef<HTMLDivElement | null>(null);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const thumbRef = useRef<Thumb>({ top: 0, height: 0, shown: false });
+  const [scrolling, setScrolling] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [thumb, setThumb] = useState<Thumb>({ top: 0, height: 0, shown: false });
+  thumbRef.current = thumb;
+
+  const updateThumb = useCallback(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    const overflow = scrollHeight - clientHeight;
+    if (overflow <= 1) {
+      setThumb((prev) => (prev.shown ? { top: 0, height: 0, shown: false } : prev));
+      return;
+    }
+    const height = Math.max(32, (clientHeight / scrollHeight) * clientHeight);
+    const top = (scrollTop / overflow) * (clientHeight - height);
+    setThumb({ top, height, shown: true });
+  }, []);
+
+  const setNode = useCallback(
+    (node: HTMLDivElement | null) => {
+      elRef.current = node;
+      assignRef(scrollRef, node);
+      if (node) requestAnimationFrame(updateThumb);
+    },
+    [scrollRef, updateThumb],
+  );
+
+  useLayoutEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    updateThumb();
+    const ro = new ResizeObserver(updateThumb);
+    ro.observe(el);
+    const child = el.firstElementChild;
+    if (child) ro.observe(child);
+    return () => ro.disconnect();
+  }, [updateThumb]);
+
+  useLayoutEffect(() => {
+    return () => {
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+    };
+  }, []);
+
+  const handleScroll: UIEventHandler<HTMLDivElement> = (e) => {
+    updateThumb();
+    if (visibility === "hover" && !dragging) {
+      setScrolling(true);
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+      hideTimer.current = setTimeout(() => setScrolling(false), 700);
+    }
+    onScroll?.(e);
+  };
+
+  const onThumbPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const el = elRef.current;
+    const current = thumbRef.current;
+    if (!el || !current.shown || e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    const overflow = el.scrollHeight - el.clientHeight;
+    const track = el.clientHeight - current.height;
+    if (overflow <= 0 || track <= 0) return;
+
+    const startY = e.clientY;
+    const startTop = current.top;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDragging(true);
+    setScrolling(true);
+
+    const onMove = (ev: PointerEvent) => {
+      if (ev.pointerId !== e.pointerId) return;
+      const nextTop = Math.min(track, Math.max(0, startTop + (ev.clientY - startY)));
+      el.scrollTop = (nextTop / track) * overflow;
+    };
+    const onUp = (ev: PointerEvent) => {
+      if (ev.pointerId !== e.pointerId) return;
+      window.removeEventListener("pointermove", onMove, true);
+      window.removeEventListener("pointerup", onUp, true);
+      window.removeEventListener("pointercancel", onUp, true);
+      setDragging(false);
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+      hideTimer.current = setTimeout(() => setScrolling(false), 700);
+    };
+    window.addEventListener("pointermove", onMove, true);
+    window.addEventListener("pointerup", onUp, true);
+    window.addEventListener("pointercancel", onUp, true);
+  };
+
+  const thumbVisible = visibility === "always" || dragging || scrolling;
+
+  return (
+    <div className={cn("group/scroll relative min-h-0 min-w-0 w-full overflow-hidden", className)} data-scrolling={thumbVisible ? "true" : undefined}>
+      <div ref={setNode} onScroll={handleScroll} className={cn("nonla-scroll-hidden absolute inset-0 overflow-y-auto overflow-x-hidden [overflow-anchor:none]", innerClassName)}>
+        {children}
+      </div>
+      {thumb.shown ? (
+        <div
+          aria-hidden
+          onPointerDown={onThumbPointerDown}
+          className={cn(
+            "nonla-overlay-thumb absolute z-20 rounded-full transition-opacity duration-150",
+            visibility === "always" || dragging
+              ? "pointer-events-auto opacity-100"
+              : "pointer-events-none opacity-0 group-hover/scroll:pointer-events-auto group-hover/scroll:opacity-100 group-data-[scrolling]/scroll:pointer-events-auto group-data-[scrolling]/scroll:opacity-100",
+          )}
+          style={{ right: 2, width: "var(--nonla-scrollbar-size)", height: thumb.height, transform: `translateY(${thumb.top}px)` }}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/segmented/Segmented.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { type ControlSize, controlHeightVar, controlRadiusVar, getSizeTokens, normalizeSize } from "../lib/sizes";
+
+export type SegmentedOption<V extends string | number = string | number> = V | { label: ReactNode; value: V; disabled?: boolean; icon?: ReactNode };
+
+export type SegmentedProps<V extends string | number = string | number> = {
+  options: SegmentedOption<V>[];
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  size?: ControlSize;
+  block?: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+function norm<V extends string | number>(opt: SegmentedOption<V>): { label: ReactNode; value: V; disabled?: boolean; icon?: ReactNode } {
+  if (typeof opt === "string" || typeof opt === "number") return { label: String(opt), value: opt };
+  return opt;
+}
+
+export function Segmented<V extends string | number = string | number>({ options, value, defaultValue, onChange, size, block, disabled, className }: SegmentedProps<V>) {
+  const items = options.map((o) => norm(o));
+  const current = value ?? defaultValue ?? items[0]?.value;
+  const tok = getSizeTokens(size);
+  const itemPadX = Math.max(tok.paddingInline - 4, 6);
+  const radius = controlRadiusVar(size);
+
+  return (
+    <div
+      className={cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-lg bg-brand-50 p-0.5", block && "flex w-full", className)}
+      role="tablist"
+      style={{ borderRadius: radius }}
+      data-size={normalizeSize(size)}
+    >
+      {items.map((item) => {
+        const active = item.value === current;
+        return (
+          <button
+            key={String(item.value)}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            disabled={disabled || item.disabled}
+            className={cn(
+              "inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap border-0 transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-45",
+              block ? "min-w-0 flex-1" : "shrink-0",
+              active ? "bg-brand-200 text-foreground" : "bg-transparent text-foreground hover:bg-brand-100",
+            )}
+            style={{
+              height: `max(22px, calc(${controlHeightVar(size)} - 4px))`,
+              paddingLeft: itemPadX,
+              paddingRight: itemPadX,
+              fontSize: tok.fontSize,
+              borderRadius: `max(4px, calc(${radius} - 2px))`,
+            }}
+            onClick={() => onChange?.(item.value)}
+          >
+            {item.icon}
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}