@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/morph-surface/morph-surface.tsx

@@ -0,0 +1,367 @@
+"use client";
+
+// Ported from SmoothUI Morph Surface (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type FocusEvent,
+  type FormEvent,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A dock that grows into a panel in place — the control you pressed *becomes*
+ * the form, rather than opening one somewhere else. The source animated
+ * width, height and radius with a stiff, near-critically-damped spring; with
+ * no gesture velocity to carry, that is a CSS transition on measured sizes.
+ *
+ * Behaviourally it is a non-modal popover: opening moves focus into the
+ * panel, Escape collapses it and returns focus to the trigger, and clicking
+ * or tabbing away collapses it without stealing focus back.
+ */
+
+type Size = number | string;
+
+interface MorphSurfaceContextValue {
+  open: boolean;
+  close: (options?: { success?: boolean }) => void;
+  panelLabel: string;
+  icon: ReactNode;
+}
+
+const MorphSurfaceContext = createContext<MorphSurfaceContextValue | null>(null);
+
+/** The surrounding surface, for custom panel content (a close button, say). */
+export function useMorphSurface(): MorphSurfaceContextValue {
+  const context = useContext(MorphSurfaceContext);
+  if (!context) throw new Error("useMorphSurface must be used inside <MorphSurface>.");
+  return context;
+}
+
+const FOCUSABLE =
+  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export interface MorphSurfaceProps extends ComponentPropsWithRef<"div"> {
+  /** The trigger's text in the dock, e.g. "Ask AI" or "Feedback". */
+  label: ReactNode;
+  /** The panel's accessible name, also shown by `MorphSurfaceForm`. Defaults to `label`. */
+  panelLabel?: string;
+  /** Decoration beside the label (an orb, a logo). Hidden from assistive technology. */
+  icon?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The expanded panel's width. Numbers are pixels. */
+  panelWidth?: Size;
+  /** The expanded panel's height. Numbers are pixels. */
+  panelHeight?: Size;
+  /** Shown in the dock, and announced, after the panel closes successfully. */
+  successLabel?: string;
+  /** How long the success label stays, in milliseconds. */
+  successDuration?: number;
+}
+
+/** A dock that morphs into a panel — a feedback form, a quick prompt. */
+export function MorphSurface({
+  ref,
+  className,
+  style,
+  children,
+  label,
+  panelLabel,
+  icon,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  panelWidth = "22.5rem",
+  panelHeight = "12.5rem",
+  successLabel = "Sent",
+  successDuration = 1500,
+  ...props
+}: MorphSurfaceProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const [success, setSuccess] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const dockRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const restoreFocus = useRef(false);
+  const successTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const [dock, setDock] = useState<{ width: number; height: number } | null>(null);
+  const panelId = useId();
+  const name = panelLabel ?? (typeof label === "string" ? label : "Panel");
+
+  const setRootRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (openProp === undefined) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange],
+  );
+
+  const close = useCallback(
+    (options: { success?: boolean; restore?: boolean } = {}) => {
+      restoreFocus.current = options.restore ?? true;
+      setOpen(false);
+      if (options.success) {
+        clearTimeout(successTimer.current);
+        setSuccess(true);
+        successTimer.current = setTimeout(() => setSuccess(false), successDuration);
+      }
+    },
+    [setOpen, successDuration],
+  );
+
+  useEffect(() => () => clearTimeout(successTimer.current), []);
+
+  // Measure the dock so the collapse has a concrete size to transition to.
+  useLayoutEffect(() => {
+    const element = dockRef.current;
+    if (!element) return;
+    const measure = () => {
+      const width = element.offsetWidth;
+      const height = element.offsetHeight;
+      if (width && height)
+        setDock((d) => (d?.width === width && d.height === height ? d : { width, height }));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  // Focus follows the surface: into the panel on open, back to the trigger on close.
+  useEffect(() => {
+    if (open) {
+      const panel = panelRef.current;
+      const target =
+        panel?.querySelector<HTMLElement>("[data-autofocus]") ??
+        panel?.querySelector<HTMLElement>(FOCUSABLE) ??
+        panel;
+      target?.focus();
+    } else if (restoreFocus.current) {
+      restoreFocus.current = false;
+      triggerRef.current?.focus();
+    }
+  }, [open]);
+
+  // A press anywhere outside collapses it, leaving focus where the user put it.
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) close({ restore: false });
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, close]);
+
+  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    close();
+  }
+
+  function handleBlur(event: FocusEvent<HTMLDivElement>) {
+    const next = event.relatedTarget;
+    if (next && !rootRef.current?.contains(next)) close({ restore: false });
+  }
+
+  const state = open ? "open" : "closed";
+
+  return (
+    <div
+      ref={setRootRef}
+      data-slot="morph-surface"
+      data-state={state}
+      className={cn(
+        "relative flex flex-col items-start justify-end overflow-hidden bg-popover text-popover-foreground shadow-lg ring-1 ring-border",
+        "max-w-full transition-[width,height,border-radius] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]",
+        "rounded-[1.25rem] data-[state=closed]:delay-[var(--duration-instant)] data-[state=open]:rounded-[0.875rem]",
+        className,
+      )}
+      style={{
+        width: open ? panelWidth : dock?.width,
+        height: open ? panelHeight : dock?.height,
+        ...style,
+      }}
+      {...props}
+    >
+      <div
+        ref={dockRef}
+        data-slot="morph-surface-dock"
+        data-state={state}
+        inert={open}
+        className={cn(
+          "flex h-11 w-max shrink-0 items-center gap-2 px-3 whitespace-nowrap select-none",
+          "transition-[opacity,visibility] duration-[var(--duration-fast)]",
+          "data-[state=open]:invisible data-[state=open]:opacity-0",
+        )}
+      >
+        {icon ? (
+          <span aria-hidden="true" className="flex size-6 items-center justify-center">
+            {icon}
+          </span>
+        ) : null}
+        <button
+          ref={triggerRef}
+          type="button"
+          data-slot="morph-surface-trigger"
+          aria-expanded={open}
+          aria-controls={panelId}
+          onClick={() => setOpen(true)}
+          className={cn(
+            "rounded-full px-2 py-0.5 text-sm font-medium transition-colors duration-[var(--duration-fast)] hover:bg-accent",
+            focusRing,
+          )}
+        >
+          {success ? successLabel : label}
+        </button>
+      </div>
+      {/* Escape and focus-out bubble up from the controls inside; the dialog itself is not a control. */}
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+      <div
+        ref={panelRef}
+        id={panelId}
+        role="dialog"
+        aria-label={name}
+        tabIndex={-1}
+        data-slot="morph-surface-panel"
+        data-state={state}
+        inert={!open}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        className={cn(
+          "absolute start-0 bottom-0 flex flex-col p-1 outline-none",
+          "transition-[opacity,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+          "data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:duration-[var(--duration-instant)]",
+        )}
+        style={{ width: panelWidth, height: panelHeight, maxWidth: "100%" }}
+      >
+        <MorphSurfaceContext.Provider value={{ open, close, panelLabel: name, icon }}>
+          {children}
+        </MorphSurfaceContext.Provider>
+      </div>
+      <span role="status" className="sr-only">
+        {success ? successLabel : ""}
+      </span>
+    </div>
+  );
+}
+
+function Kbd({ children }: { children: string }) {
+  return (
+    <kbd className="flex h-6 min-w-6 items-center justify-center rounded-sm border border-border bg-muted px-1.5 font-sans text-xs text-foreground">
+      {children}
+    </kbd>
+  );
+}
+
+export interface MorphSurfaceFormProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit"> {
+  /**
+   * Called with the trimmed message. Return `false` to keep the panel open
+   * (a failed request, say); otherwise it closes and shows the success label.
+   */
+  onSubmit?: (value: string, event: FormEvent<HTMLFormElement>) => boolean | void;
+  placeholder?: string;
+  /** The submit button's accessible name. The visible text is the shortcut. */
+  submitLabel?: string;
+  /** The textarea's form field name. */
+  fieldName?: string;
+}
+
+/** The source's panel: a labelled message box, submitted with ⌘/Ctrl + Enter. */
+export function MorphSurfaceForm({
+  className,
+  onSubmit,
+  placeholder = "Ask me anything…",
+  submitLabel = "Send",
+  fieldName = "message",
+  ...props
+}: MorphSurfaceFormProps) {
+  const { close, panelLabel, icon } = useMorphSurface();
+  const fieldId = useId();
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const field = form.elements.namedItem(fieldName) as HTMLTextAreaElement;
+    const value = field.value.trim();
+    if (!value) return;
+    if (onSubmit?.(value, event) === false) return;
+    field.value = "";
+    close({ success: true });
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      event.currentTarget.form?.requestSubmit();
+    }
+  }
+
+  return (
+    <form
+      data-slot="morph-surface-form"
+      className={cn("flex h-full flex-col", className)}
+      onSubmit={handleSubmit}
+      {...props}
+    >
+      <div className="flex items-center justify-between gap-2 py-1 ps-2 pe-1">
+        <label htmlFor={fieldId} className="flex items-center gap-1.5 text-sm font-medium">
+          {icon ? (
+            <span aria-hidden="true" className="flex size-6 items-center justify-center">
+              {icon}
+            </span>
+          ) : null}
+          {panelLabel}
+        </label>
+        <button
+          type="submit"
+          data-slot="morph-surface-submit"
+          className={cn("flex items-center gap-1 rounded-md p-0.5", focusRing)}
+        >
+          <span className="sr-only">{submitLabel}</span>
+          <span aria-hidden="true" className="flex gap-1">
+            <Kbd>⌘</Kbd>
+            <Kbd>Enter</Kbd>
+          </span>
+        </button>
+      </div>
+      <textarea
+        id={fieldId}
+        name={fieldName}
+        required
+        data-autofocus
+        spellCheck={false}
+        placeholder={placeholder}
+        aria-keyshortcuts="Meta+Enter Control+Enter"
+        onKeyDown={handleKeyDown}
+        className={cn(
+          "w-full flex-1 resize-none rounded-md bg-muted p-3 text-sm text-foreground placeholder:text-muted-foreground",
+          focusRing,
+        )}
+      />
+    </form>
+  );
+}

package/src/components/notification-badge/index.ts

@@ -0,0 +1,6 @@
+export {
+  NotificationBadge,
+  notificationBadgeVariants,
+  type NotificationBadgeProps,
+  type NotificationBadgeStatus,
+} from "./notification-badge";

package/src/components/notification-badge/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "notification-badge",
+  title: "Notification Badge",
+  description:
+    "A dot, rolling count or presence badge pinned to the corner of an icon, button or avatar.",
+  category: "feedback",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["badge", "number-flow"],
+  files: ["notification-badge.tsx"],
+  a11y:
+    'Colour never carries the meaning alone: every badge has screen-reader text ("3 notifications", "More than ' +
+    '99 notifications", "New", "Online"…), overridable with `label`, while the visible digits are aria-hidden. ' +
+    "A hidden count badge (zero, without showZero) is aria-hidden and empty. Changes are only announced when " +
+    "`live` is set. The text follows the wrapped element in reading order, so a wrapped icon button should still " +
+    "have its own name. The ping ring is not rendered under reduced motion, and the pop-in snaps.",
+});

package/src/components/notification-badge/notification-badge.tsx

@@ -0,0 +1,183 @@
+// Ported from SmoothUI Notification Badge (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import { Badge, type BadgeProps } from "@/components/badge";
+import { NumberFlow } from "@/components/number-flow";
+import { cn } from "@/lib/utils";
+
+/*
+ * A Badge pinned to the corner of whatever it wraps. The styling is Badge's —
+ * this only adds placement, the dot/count/status shapes, and motion:
+ *
+ * - The count rolls digit by digit through NumberFlow, in the direction the
+ *   number moved, where the source slid the whole value with a spring.
+ * - Appearing and disappearing are CSS transitions: the badge stays mounted
+ *   with data-state="hidden" (so it can shrink away) and pops in from
+ *   `starting:` styles, instead of AnimatePresence.
+ * - The ping ring is a hoisted keyframe on the motion scale, and is not
+ *   rendered at all under reduced motion.
+ *
+ * All of it is decoration; none of it is an indicator.
+ */
+
+const PREFIX = "dowel-notification-badge";
+
+const STYLES = `@keyframes ${PREFIX}-ping{75%,100%{transform:scale(2);opacity:0}}
+[data-slot=notification-badge-ping]{animation:${PREFIX}-ping calc(1s * var(--motion-scale, 1)) cubic-bezier(0,0,.2,1) infinite}`;
+
+const notificationBadgeVariants = cva(
+  cn(
+    "isolate transition-[scale,opacity] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]",
+    "data-[state=hidden]:scale-0 data-[state=hidden]:opacity-0 starting:scale-0 starting:opacity-0",
+  ),
+  {
+    variants: {
+      /** The shape: a bare dot, a number, or a presence indicator. */
+      variant: {
+        dot: "size-2.5 border-0 p-0",
+        count: "h-5 min-w-5 px-1 text-2xs tabular-nums",
+        status: "size-3 border-0 p-0 ring-2 ring-background",
+      },
+      /** Which corner of the wrapped element it sits on. Logical, so it mirrors in RTL. */
+      position: {
+        "top-end": "absolute -end-1 -top-1",
+        "top-start": "absolute -start-1 -top-1",
+        "bottom-end": "absolute -end-1 -bottom-1",
+        "bottom-start": "absolute -start-1 -bottom-1",
+        inline: "relative",
+      },
+    },
+    defaultVariants: {
+      variant: "dot",
+      position: "top-end",
+    },
+  },
+);
+
+export type NotificationBadgeStatus = "online" | "offline" | "busy" | "away";
+
+/** Presence colours, from Badge's semantic variants. */
+const STATUS: Record<
+  NotificationBadgeStatus,
+  { tone: NonNullable<BadgeProps["variant"]>; className?: string; label: string }
+> = {
+  online: { tone: "success", label: "Online" },
+  away: { tone: "warning", label: "Away" },
+  busy: { tone: "destructive", label: "Busy" },
+  offline: { tone: "secondary", className: "bg-muted-foreground", label: "Offline" },
+};
+
+export interface NotificationBadgeProps
+  extends
+    Omit<ComponentPropsWithRef<"span">, "children">,
+    VariantProps<typeof notificationBadgeVariants> {
+  /** The element the badge is pinned to. Without it the badge renders inline. */
+  children?: ReactNode;
+  /** The number shown by the `count` variant. */
+  count?: number;
+  /** Counts above this show as "max+". */
+  max?: number;
+  /** Show the `count` variant at zero instead of hiding it. */
+  showZero?: boolean;
+  /** Presence for the `status` variant. */
+  status?: NotificationBadgeStatus;
+  /** Badge colour for `dot` and `count`. `status` takes its colour from the status. */
+  tone?: BadgeProps["variant"];
+  /** A ring that pulses outward from the badge. Not rendered under reduced motion. */
+  ping?: boolean;
+  /**
+   * Screen-reader text for the badge. Defaults to "3 notifications", "More than
+   * 99 notifications", "New" for a dot and the status name for a status.
+   */
+  label?: string;
+  /** Announce changes politely. Off by default: most badges should not interrupt. */
+  live?: boolean;
+  /** Classes for the badge itself; `className` goes to the wrapper. */
+  badgeClassName?: string;
+}
+
+function defaultLabel(
+  variant: NonNullable<NotificationBadgeProps["variant"]>,
+  count: number,
+  max: number,
+  status: NotificationBadgeStatus,
+): string {
+  if (variant === "status") return STATUS[status].label;
+  if (variant === "dot") return "New";
+  if (count > max) return `More than ${String(max)} notifications`;
+  return `${String(count)} ${count === 1 ? "notification" : "notifications"}`;
+}
+
+/** A dot, count or presence badge pinned to the corner of its child. */
+export function NotificationBadge({
+  className,
+  children,
+  variant = "dot",
+  count = 0,
+  max = 99,
+  showZero = false,
+  status = "online",
+  tone = "default",
+  ping = false,
+  position,
+  label,
+  live = false,
+  badgeClassName,
+  ...props
+}: NotificationBadgeProps) {
+  const visible = variant !== "count" || count > 0 || showZero;
+  const presence = variant === "status" ? STATUS[status] : undefined;
+  const text = label ?? defaultLabel(variant ?? "dot", count, max, status);
+
+  return (
+    <span
+      data-slot="notification-badge"
+      className={cn("relative inline-flex shrink-0", className)}
+      {...props}
+    >
+      {children}
+      <Badge
+        data-slot="notification-badge-indicator"
+        data-variant={variant}
+        data-state={visible ? "visible" : "hidden"}
+        data-status={presence ? status : undefined}
+        aria-hidden={visible ? undefined : true}
+        aria-live={live ? "polite" : undefined}
+        aria-atomic={live ? true : undefined}
+        variant={presence?.tone ?? tone}
+        size="sm"
+        className={cn(
+          notificationBadgeVariants({
+            variant,
+            position: position ?? (children == null ? "inline" : "top-end"),
+          }),
+          presence?.className,
+          badgeClassName,
+        )}
+      >
+        {ping && visible ? (
+          <>
+            <style href={PREFIX} precedence="dowel">
+              {STYLES}
+            </style>
+            <span
+              data-slot="notification-badge-ping"
+              aria-hidden="true"
+              className="absolute inset-0 -z-10 rounded-full bg-inherit opacity-75 motion-reduce:hidden"
+            />
+          </>
+        ) : null}
+        {variant === "count" ? (
+          <span aria-hidden="true" className="inline-flex items-baseline leading-none">
+            <NumberFlow value={Math.min(count, max)} />
+            {count > max ? "+" : null}
+          </span>
+        ) : null}
+        <span className="sr-only">{visible ? text : null}</span>
+      </Badge>
+    </span>
+  );
+}
+
+export { notificationBadgeVariants };

package/src/components/notify-button/index.ts

@@ -0,0 +1 @@
+export { NotifyButton, notifyButtonVariants, type NotifyButtonProps } from "./notify-button";

package/src/components/notify-button/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "notify-button",
+  title: "Notify Button",
+  description:
+    "A “notify me” toggle: the bell rings and the label grows elastically into the confirmation.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["button"],
+  files: ["notify-button.tsx"],
+  a11y:
+    "A toggle button exposed with aria-pressed. Its accessible name stays the resting label — the " +
+    "confirmation label is aria-hidden — and the confirmation is announced once through a polite live " +
+    "region when it turns on. The bell is decorative; its ring and the width spring stop under reduced motion.",
+});