@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "copy-button",
+  title: "Copy Button",
+  description:
+    "Copies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["button"],
+  files: ["copy-button.tsx"],
+  a11y:
+    'The confirmation is announced through a polite role="status" region rendered beside the ' +
+    "button, so it never becomes part of the button's name. Only the visible label is exposed; " +
+    'the hidden one is aria-hidden. Icon-only buttons are named "Copy" unless given an aria-label. ' +
+    "A refused clipboard write is announced as a failure and never shows the check. The button " +
+    "is never disabled while confirming, so keyboard focus stays put.",
+});

package/src/components/create-menu/create-menu.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+// Ported from bencho Create menu (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type FocusEvent,
+  type ReactNode,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A DropdownMenu with a morph flourish: the "+ Create" pill grows in place
+ * into the menu panel, and shrinks back into the pill when it closes.
+ *
+ * The menu is the Radix DropdownMenu primitive, so the whole menu-button
+ * pattern comes from it: aria-haspopup/aria-expanded on the trigger,
+ * role="menu"/"menuitem", focus into the menu, Up/Down roving, Home/End,
+ * typeahead, Escape and outside-click dismissal with focus returned to the
+ * trigger. Dowel's own DropdownMenuContent always portals, and the morph needs
+ * the panel to sit exactly over the trigger, so this composes the primitive
+ * directly: the content is not portalled and is placed over the trigger
+ * (side="bottom", sideOffset = -triggerHeight).
+ *
+ * Motion is CSS only. The surface is a separate aria-hidden layer whose
+ * width/height/radius run from the trigger's size (Radix publishes it as
+ * --radix-dropdown-menu-trigger-*) to the panel's; the content itself holds a
+ * no-op animation as long as the shrink so Presence waits for it. Items
+ * stagger in; one shared highlight pill follows the highlighted item, whether
+ * the pointer or the keyboard moved it. Reduced motion collapses every
+ * duration through --motion-scale, leaving the settled panel.
+ */
+
+const PREFIX = "dowel-create-menu";
+const OVERSHOOT = "cubic-bezier(.32,1.26,.4,1)";
+
+function ms(value: number): string {
+  return `calc(${String(value)}ms * var(--motion-scale))`;
+}
+
+const PILL = `width:var(--radix-dropdown-menu-trigger-width);height:var(--radix-dropdown-menu-trigger-height);border-radius:calc(var(--radix-dropdown-menu-trigger-height) / 2)`;
+const PANEL = `width:100%;height:100%;border-radius:var(--create-menu-corner)`;
+
+const STAGGER = Array.from(
+  { length: 12 },
+  (_, i) =>
+    `[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-list]>[data-slot=create-menu-item]:nth-child(${String(i + 2)}){animation-delay:${ms(30 + 22 * i)}}`,
+).join("\n");
+
+const STYLES = `
+@keyframes ${PREFIX}-grow{from{${PILL}}to{${PANEL}}}
+@keyframes ${PREFIX}-shrink{from{${PANEL}}to{${PILL}}}
+@keyframes ${PREFIX}-hold{from{opacity:1}to{opacity:1}}
+@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(6px)}}
+[data-slot=create-menu-content][data-state=closed]{animation:${PREFIX}-hold ${ms(300)} linear both}
+[data-slot=create-menu-content][data-state=open]>[data-slot=create-menu-surface]{animation:${PREFIX}-grow ${ms(370)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=closed]>[data-slot=create-menu-surface]{animation:${PREFIX}-shrink ${ms(300)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=open] [data-slot=create-menu-item]{animation:${PREFIX}-item-in ${ms(240)} var(--ease-out-quint) both}
+[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-item],[data-slot=create-menu-content][data-state=closed] [data-slot=create-menu-highlight]{opacity:0}
+${STAGGER}
+`;
+
+/** The pill and the panel share one surface; `tone` inverts it. */
+const createMenuVariants = cva("", {
+  variants: {
+    tone: {
+      default: "bg-card text-foreground",
+      inverted: "bg-foreground text-background",
+    },
+    stroke: {
+      true: "inset-ring inset-ring-border",
+      false: "",
+    },
+  },
+  defaultVariants: { tone: "default", stroke: false },
+});
+
+function PlusIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+export interface CreateMenuProps
+  extends Omit<ComponentPropsWithRef<"div">, "dir">, VariantProps<typeof createMenuVariants> {
+  /** The trigger's visible label, and the menu's name. */
+  label?: ReactNode;
+  /** The trigger's icon. Decorative; defaults to a plus. Pass `null` for none. */
+  icon?: ReactNode;
+  /** Radius of the open panel in px. The row radius derives from it. */
+  corner?: number;
+  /** Width of the open panel in px. Its height follows the items. */
+  panelWidth?: number;
+  /** Where the panel grows from, relative to the pill. */
+  align?: "start" | "center" | "end";
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Radix `modal`. Off by default: the menu sits inline, over its own pill. */
+  modal?: boolean;
+  dir?: "ltr" | "rtl";
+  triggerClassName?: string;
+  contentClassName?: string;
+  /** `CreateMenuItem`s. */
+  children?: ReactNode;
+}
+
+/** A "+ Create" pill that grows in place into a menu of actions. */
+export function CreateMenu({
+  label = "Create",
+  icon,
+  corner = 28,
+  panelWidth = 212,
+  align = "center",
+  tone,
+  stroke,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = false,
+  dir,
+  className,
+  triggerClassName,
+  contentClassName,
+  style,
+  children,
+  ...props
+}: CreateMenuProps) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [triggerHeight, setTriggerHeight] = useState(38);
+  const [highlight, setHighlight] = useState({ top: 0, height: 0, visible: false });
+  const [moving, setMoving] = useState(false);
+  const movingTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // Measure the pill so the panel's top edge lands on the pill's.
+  useLayoutEffect(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const measure = () => {
+      if (trigger.offsetHeight > 0) setTriggerHeight(trigger.offsetHeight);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(trigger);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => () => clearTimeout(movingTimer.current), []);
+
+  // Radix focuses the highlighted item for pointer and keyboard alike, and
+  // focuses the content itself when the pointer leaves: one listener tracks both.
+  const onContentFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      const target = event.target;
+      if (target.getAttribute("role") !== "menuitem") {
+        setHighlight((previous) => ({ ...previous, visible: false }));
+        return;
+      }
+      if (highlight.visible && highlight.top !== target.offsetTop) {
+        setMoving(true);
+        clearTimeout(movingTimer.current);
+        movingTimer.current = setTimeout(() => {
+          setMoving(false);
+        }, 110);
+      }
+      setHighlight({ top: target.offsetTop, height: target.offsetHeight, visible: true });
+    },
+    [highlight],
+  );
+
+  const surface = createMenuVariants({ tone, stroke });
+
+  return (
+    <div
+      data-slot="create-menu"
+      className={cn("relative inline-grid place-items-center", className)}
+      style={{ ["--create-menu-corner" as string]: `${String(corner)}px`, ...style }}
+      {...props}
+    >
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <DropdownMenuPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={(next) => {
+          if (!next) setHighlight((previous) => ({ ...previous, visible: false }));
+          onOpenChange?.(next);
+        }}
+        modal={modal}
+        dir={dir}
+      >
+        <DropdownMenuPrimitive.Trigger
+          ref={triggerRef}
+          data-slot="create-menu-trigger"
+          className={cn(
+            surface,
+            focusRing,
+            "inline-flex h-9.5 items-center gap-2 rounded-full px-5 text-[0.84375rem] font-medium select-none",
+            "transition-[scale,opacity] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+            "active:scale-94 data-[state=open]:pointer-events-none data-[state=open]:opacity-0",
+            "[&_svg]:size-4 [&_svg]:shrink-0",
+            triggerClassName,
+          )}
+        >
+          {icon === undefined ? <PlusIcon /> : icon}
+          {label}
+        </DropdownMenuPrimitive.Trigger>
+        <DropdownMenuPrimitive.Content
+          data-slot="create-menu-content"
+          side="bottom"
+          align={align}
+          sideOffset={-triggerHeight}
+          avoidCollisions={false}
+          onFocus={onContentFocus}
+          className={cn(
+            "relative z-[var(--z-popover)] px-2.5 py-2.75 outline-none",
+            tone === "inverted" ? "text-background" : "text-foreground",
+            contentClassName,
+          )}
+          style={
+            {
+              width: `${String(panelWidth)}px`,
+              ["--create-menu-row-r"]: `max(0px, calc(var(--create-menu-corner) - 11px))`,
+            } as CSSProperties
+          }
+        >
+          <div
+            aria-hidden="true"
+            data-slot="create-menu-surface"
+            className={cn(surface, "absolute inset-x-0 top-0 mx-auto size-full shadow-lg")}
+            style={{ borderRadius: "var(--create-menu-corner)" }}
+          />
+          <div data-slot="create-menu-list" className="relative grid gap-0.5">
+            <div
+              aria-hidden="true"
+              data-slot="create-menu-highlight"
+              data-moving={moving ? "" : undefined}
+              className="pointer-events-none absolute inset-x-0 top-0 bg-current/10 data-[moving]:[scale:0.96_1.16]"
+              style={{
+                height: `${String(highlight.height)}px`,
+                opacity: highlight.visible ? 1 : 0,
+                transform: `translateY(${String(highlight.top)}px)`,
+                borderRadius: "var(--create-menu-row-r)",
+                transition: `transform ${ms(380)} ${OVERSHOOT}, scale ${ms(110)} var(--ease-out-quint), opacity ${ms(180)} ease`,
+              }}
+            />
+            {children}
+          </div>
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Root>
+    </div>
+  );
+}
+
+export interface CreateMenuItemProps extends ComponentPropsWithRef<
+  typeof DropdownMenuPrimitive.Item
+> {
+  /** Leading icon. Decorative. */
+  icon?: ReactNode;
+}
+
+/** One action in a CreateMenu. `onSelect` runs it; the menu then closes. */
+export function CreateMenuItem({
+  icon,
+  className,
+  style,
+  children,
+  ...props
+}: CreateMenuItemProps) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="create-menu-item"
+      className={cn(
+        "relative flex h-8.5 cursor-default items-center gap-2.5 px-3.5 text-[0.8125rem] outline-none select-none",
+        "text-[color-mix(in_oklab,currentColor_78%,transparent)] data-[highlighted]:text-current",
+        "transition-colors duration-[var(--duration-fast)]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
+        className,
+      )}
+      style={{ borderRadius: "var(--create-menu-row-r)", ...style }}
+      {...props}
+    >
+      {icon ? (
+        <span
+          aria-hidden="true"
+          data-slot="create-menu-item-icon"
+          className="flex shrink-0 [&_svg]:size-3.75"
+        >
+          {icon}
+        </span>
+      ) : null}
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+
+export { createMenuVariants };

package/src/components/create-menu/index.ts

@@ -0,0 +1,7 @@
+export {
+  CreateMenu,
+  CreateMenuItem,
+  createMenuVariants,
+  type CreateMenuItemProps,
+  type CreateMenuProps,
+} from "./create-menu";

package/src/components/create-menu/meta.ts

@@ -0,0 +1,21 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "create-menu",
+  title: "Create Menu",
+  description:
+    'A DropdownMenu with a morph flourish: a "+ Create" pill that grows in place into its menu panel.',
+  category: "navigation",
+  status: "beta",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["create-menu.tsx"],
+  a11y:
+    "Built directly on the Radix DropdownMenu primitive (not portalled, so the panel can grow over the " +
+    'pill): the trigger exposes aria-haspopup="menu" and aria-expanded, the panel is a role="menu" named ' +
+    'by the trigger, and items are role="menuitem". Opening from the keyboard moves focus to the first ' +
+    "item; Up/Down move, Home/End jump, typeahead searches, Enter/Space select, Escape and an outside " +
+    "press close and return focus to the trigger. The morphing surface and the highlight pill are " +
+    "aria-hidden; the pill follows data-highlighted, so pointer and keyboard never disagree. The grow, " +
+    "stagger and pill slide are decoration and settle instantly under reduced motion.",
+});

package/src/components/cursor-follow/cursor-follow.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+// Ported from SmoothUI Cursor Follow (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { MotionConfig, motion, useMotionValue, useSpring } from "motion/react";
+import {
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type PointerEvent,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+ * A dot that trails the pointer inside a container, and swells into a label
+ * over anything carrying `data-cursor-text`.
+ *
+ * Following the pointer with physics is one of the three things ADR 0014
+ * allows `motion` for: the position is a spring chasing the pointer every
+ * frame, which a CSS transition restarted on each move cannot do smoothly.
+ * The dot's shape change is plain CSS.
+ *
+ * It is decoration and nothing else: aria-hidden, pointer-events none, never
+ * the only place a label appears (put the same words in alt text or a visible
+ * caption). It does not exist for touch — there is no pointer to follow — and
+ * it does not render at all under reduced motion. The source hid the system
+ * cursor; here that is opt-in, because a custom cursor that lags is harder to
+ * aim with, and some people rely on a large system cursor.
+ */
+
+const cursorFollowVariants = cva(
+  cn(
+    "flex h-4 max-w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-full text-xs font-medium whitespace-nowrap shadow-lg",
+    "transition-[height,max-width,padding,opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-in-out-quint)]",
+    "data-[labelled]:h-10 data-[labelled]:max-w-80 data-[labelled]:scale-110 data-[labelled]:px-4",
+    "data-[state=hidden]:scale-75 data-[state=hidden]:opacity-0",
+  ),
+  {
+    variants: {
+      /** `solid` is the source's filled dot; `invert` and `blur` treat what is behind it. */
+      appearance: {
+        solid: "bg-primary text-primary-foreground",
+        invert: "border border-border text-foreground backdrop-invert",
+        blur: "border border-border bg-background/40 text-foreground backdrop-blur-sm",
+      },
+    },
+    defaultVariants: {
+      appearance: "solid",
+    },
+  },
+);
+
+const SPRING = { damping: 40, stiffness: 350 };
+
+const REDUCE = "(prefers-reduced-motion: reduce)";
+
+/** Live reduced-motion preference; false on the server, where nothing moves anyway. */
+function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(
+    (notify) => {
+      const query = window.matchMedia(REDUCE);
+      query.addEventListener("change", notify);
+      return () => {
+        query.removeEventListener("change", notify);
+      };
+    },
+    () => window.matchMedia(REDUCE).matches,
+    () => false,
+  );
+}
+
+export interface CursorFollowProps
+  extends ComponentPropsWithRef<"div">, VariantProps<typeof cursorFollowVariants> {
+  /** Hides the system cursor inside the container. Off by default. */
+  hideCursor?: boolean;
+  /** Classes for the follower. */
+  followerClassName?: string;
+}
+
+/** A container whose pointer is trailed by a springy dot that can show a label. */
+export function CursorFollow({
+  className,
+  followerClassName,
+  appearance,
+  hideCursor = false,
+  children,
+  onPointerEnter,
+  onPointerMove,
+  onPointerLeave,
+  onPointerOver,
+  ...props
+}: CursorFollowProps) {
+  const reduced = usePrefersReducedMotion();
+  const [visible, setVisible] = useState(false);
+  const [label, setLabel] = useState<string | null>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const springX = useSpring(x, SPRING);
+  const springY = useSpring(y, SPRING);
+
+  const tracks = (event: PointerEvent<HTMLDivElement>) =>
+    !reduced && event.pointerType !== "touch";
+
+  function place(event: PointerEvent<HTMLDivElement>, jump: boolean) {
+    const box = event.currentTarget.getBoundingClientRect();
+    const nextX = event.clientX - box.left;
+    const nextY = event.clientY - box.top;
+    x.set(nextX);
+    y.set(nextY);
+    // Arriving, the dot appears under the pointer instead of flying in from
+    // wherever it last was.
+    if (jump) {
+      springX.jump(nextX);
+      springY.jump(nextY);
+    }
+  }
+
+  return (
+    <MotionConfig reducedMotion="user">
+      <div
+        data-slot="cursor-follow"
+        className={cn(
+          "relative isolate",
+          hideCursor && !reduced && "cursor-none [&_*]:cursor-none",
+          className,
+        )}
+        onPointerEnter={(event) => {
+          onPointerEnter?.(event);
+          if (!tracks(event)) return;
+          place(event, true);
+          setVisible(true);
+        }}
+        onPointerMove={(event) => {
+          onPointerMove?.(event);
+          if (!tracks(event)) return;
+          place(event, !visible);
+          if (!visible) setVisible(true);
+        }}
+        onPointerLeave={(event) => {
+          onPointerLeave?.(event);
+          setVisible(false);
+          setLabel(null);
+        }}
+        onPointerOver={(event) => {
+          onPointerOver?.(event);
+          const target = (event.target as Element).closest("[data-cursor-text]");
+          setLabel(target?.getAttribute("data-cursor-text") || null);
+        }}
+        {...props}
+      >
+        {children}
+        {reduced ? null : (
+          <div
+            aria-hidden="true"
+            data-slot="cursor-follow-layer"
+            className="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+          >
+            <motion.div
+              className="absolute"
+              style={{ left: 0, top: 0, x: springX, y: springY }}
+            >
+              <div
+                data-slot="cursor-follow-follower"
+                data-state={visible ? "visible" : "hidden"}
+                data-labelled={label ? "" : undefined}
+                className={cn(cursorFollowVariants({ appearance }), followerClassName)}
+              >
+                {label ? (
+                  <span className="animate-[dowel-cursor-follow-in_var(--duration-normal)_var(--ease-out-quint)]">
+                    {label}
+                  </span>
+                ) : null}
+              </div>
+            </motion.div>
+            <style href="dowel-cursor-follow" precedence="dowel">
+              {"@keyframes dowel-cursor-follow-in{from{opacity:0;filter:blur(8px)}}"}
+            </style>
+          </div>
+        )}
+      </div>
+    </MotionConfig>
+  );
+}
+
+export { cursorFollowVariants };

package/src/components/cursor-follow/index.ts

@@ -0,0 +1 @@
+export { CursorFollow, cursorFollowVariants, type CursorFollowProps } from "./cursor-follow";

package/src/components/cursor-follow/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "cursor-follow",
+  title: "Cursor Follow",
+  description:
+    "A dot that trails the pointer on a spring inside a container and swells into a label over marked elements.",
+  category: "effects",
+  status: "beta",
+  dependencies: ["class-variance-authority", "motion"],
+  registryDependencies: [],
+  files: ["cursor-follow.tsx"],
+  a11y:
+    "Purely decorative: the follower is aria-hidden and ignores the pointer, and the container adds no role " +
+    'or tab stop (the source\'s role="application" and tabIndex are dropped). A `data-cursor-text` label is ' +
+    "shown only by the follower, so the same words must also be in the element's alt text or visible text. " +
+    "Nothing renders for touch input or under reduced motion. Hiding the system cursor is opt-in " +
+    '(`hideCursor`). The spring is `motion`, wrapped in MotionConfig reducedMotion="user".',
+});