@dowel-ui/react 0.5.0 → 0.8.0

package/src/components/otp-input/otp-input.tsx

@@ -0,0 +1,407 @@
+"use client";
+
+// Ported from SmoothUI Animated OTP Input (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type FocusEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  type Ref,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+ * One real <input> drives N painted slots.
+ *
+ * The input is transparent and laid over the slots, so it receives every
+ * click, tap, paste and SMS autofill a native field would — `autocomplete=
+ * "one-time-code"` only works on a real text input, and a row of six inputs
+ * breaks paste, autofill and screen-reader reading all at once. The slots
+ * are aria-hidden paint: what a screen reader meets is one labelled text
+ * field holding the code.
+ *
+ * The caret lives on a slot rather than in the input. A collapsed caret in
+ * front of a filled character is widened to select that character, so typing
+ * overwrites it and moves on — the behaviour people expect from a code field.
+ *
+ * Motion is CSS: slots rise in with a stagger, a digit flips in when it lands,
+ * the active slot rings. All of it is decoration and stops under reduced
+ * motion; the caret settles visible instead of blinking.
+ */
+
+const PREFIX = "dowel-otp-input";
+
+const STYLES = `
+@keyframes ${PREFIX}-enter{from{opacity:0;transform:translateY(10px) scale(.8)}}
+@keyframes ${PREFIX}-char{from{opacity:0;transform:rotateY(-90deg) scale(.5)}}
+@keyframes ${PREFIX}-caret{0%,100%{opacity:0}50%{opacity:1}}
+[data-slot=otp-input-slot]{animation:${PREFIX}-enter calc(200ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:calc(var(--${PREFIX}-index) * 50ms * var(--motion-scale))}
+[data-slot=otp-input-char]{animation:${PREFIX}-char calc(200ms * var(--motion-scale)) var(--ease-out-quint) both}
+[data-slot=otp-input-caret]{animation:${PREFIX}-caret calc(1s * var(--motion-scale)) var(--ease-in-out-quint) infinite}
+`;
+
+/** A painted slot. */
+const otpInputVariants = cva(
+  cn(
+    "relative flex items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs",
+    "transition-[border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] [perspective:20em]",
+    "data-[filled]:scale-105",
+    "data-[active]:z-10 data-[active]:border-ring data-[active]:ring-2 data-[active]:ring-ring/55",
+    "data-[invalid]:border-destructive data-[invalid]:data-[active]:ring-destructive/40",
+  ),
+  {
+    variants: {
+      slotSize: {
+        sm: "size-8 text-sm",
+        md: "size-10 text-base",
+        lg: "size-12 text-lg",
+      },
+    },
+    defaultVariants: {
+      slotSize: "md",
+    },
+  },
+);
+
+/** Which characters a slot accepts. A RegExp is tested against one character. */
+export type OtpInputAllow = "numeric" | "alphanumeric" | "alpha" | RegExp;
+
+const ALLOW: Record<Exclude<OtpInputAllow, RegExp>, RegExp> = {
+  numeric: /^\d$/,
+  alphanumeric: /^[\p{L}\p{N}]$/u,
+  alpha: /^\p{L}$/u,
+};
+
+export interface OtpInputProps
+  extends
+    Omit<
+      ComponentPropsWithRef<"input">,
+      "value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size" | "children"
+    >,
+    VariantProps<typeof otpInputVariants> {
+  /** Number of characters in the code. */
+  length?: number;
+  /** Controlled value. */
+  value?: string;
+  /** Initial value when uncontrolled. */
+  defaultValue?: string;
+  /** Called with the sanitised code whenever it changes. */
+  onValueChange?: (value: string) => void;
+  /** Called once each time the last slot is filled. */
+  onComplete?: (value: string) => void;
+  /** Characters accepted; anything else typed or pasted is dropped. */
+  allow?: OtpInputAllow;
+  /** Paints each filled slot with a dot, or the given character, instead of its value. */
+  mask?: boolean | string;
+  /** Slot counts per group, e.g. `[3, 3]`. A separator is drawn between groups. */
+  groups?: number[];
+  /** Drawn between groups. Decorative. */
+  separator?: ReactNode;
+  /** Classes for each painted slot. */
+  slotClassName?: string;
+}
+
+function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+
+function sanitize(text: string, allow: OtpInputAllow, length: number): string {
+  const test = typeof allow === "string" ? ALLOW[allow] : allow;
+  let out = "";
+  for (const char of text) {
+    if (out.length >= length) break;
+    if (test.test(char)) out += char;
+  }
+  return out;
+}
+
+/** The slot indexes of each group, in order. */
+function layout(groups: number[] | undefined, length: number): number[][] {
+  const sizes = groups && groups.length > 0 ? groups : [length];
+  const result: number[][] = [];
+  let next = 0;
+  for (const size of sizes) {
+    const group: number[] = [];
+    for (let i = 0; i < size && next < length; i += 1) group.push(next++);
+    if (group.length > 0) result.push(group);
+  }
+  // Whatever the groups leave over goes in a last group, so no slot is lost.
+  if (next < length) result.push(Array.from({ length: length - next }, (_, i) => next + i));
+  return result;
+}
+
+/** Laid over the slots: catches every pointer and keystroke, paints nothing. */
+const INPUT_STYLE: CSSProperties = {
+  color: "transparent",
+  caretColor: "transparent",
+  background: "transparent",
+  fontSize: "1rem",
+  letterSpacing: "-0.5em",
+  fontFamily: "monospace",
+};
+
+/** A one-time-code field: one real input, drawn as a row of animated slots. */
+export function OtpInput({
+  className,
+  slotClassName,
+  length = 6,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onComplete,
+  allow = "numeric",
+  mask = false,
+  groups,
+  separator,
+  slotSize,
+  disabled,
+  style,
+  ref,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onKeyUp,
+  onClick,
+  onPaste,
+  onSelect,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: OtpInputProps) {
+  const [uncontrolled, setUncontrolled] = useState(() => sanitize(defaultValue, allow, length));
+  const controlled = valueProp !== undefined;
+  const value = controlled ? sanitize(valueProp, allow, length) : uncontrolled;
+  const [focused, setFocused] = useState(false);
+  const [selection, setSelection] = useState<[number, number]>([value.length, value.length]);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const slotRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const pendingCaret = useRef<number | null>(null);
+
+  const setRefs = useCallback(
+    (node: HTMLInputElement | null) => {
+      inputRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
+  /** Reads the caret, widening a collapsed one in front of a character to select it. */
+  const sync = useCallback(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    let start = el.selectionStart ?? el.value.length;
+    let end = el.selectionEnd ?? start;
+    if (start === end && el.value.length > 0) {
+      if (start < el.value.length) end = start + 1;
+      else if (el.value.length >= length) [start, end] = [length - 1, length];
+      if (end !== start) el.setSelectionRange(start, end);
+    }
+    setSelection([start, end]);
+  }, [length]);
+
+  const moveTo = useCallback(
+    (index: number) => {
+      const el = inputRef.current;
+      if (!el) return;
+      const at = Math.max(0, Math.min(index, el.value.length));
+      el.setSelectionRange(at, at);
+      sync();
+    },
+    [sync],
+  );
+
+  // After a change or paste, place the caret, then re-read it.
+  useLayoutEffect(() => {
+    const el = inputRef.current;
+    if (!el || el.ownerDocument.activeElement !== el) return;
+    if (pendingCaret.current !== null) {
+      el.setSelectionRange(pendingCaret.current, pendingCaret.current);
+      pendingCaret.current = null;
+    }
+    sync();
+  }, [value, sync]);
+
+  function commit(next: string) {
+    if (next === value) return;
+    if (!controlled) setUncontrolled(next);
+    onValueChange?.(next);
+    if (next.length === length && value.length !== length) onComplete?.(next);
+  }
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    commit(sanitize(event.target.value, allow, length));
+  }
+
+  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {
+    onPaste?.(event);
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    const pasted = sanitize(event.clipboardData.getData("text/plain"), allow, length);
+    if (!pasted) return;
+    const el = event.currentTarget;
+    const start = el.selectionStart ?? value.length;
+    const end = el.selectionEnd ?? start;
+    // A whole code replaces what is there; a fragment is inserted at the caret.
+    const next =
+      pasted.length >= length
+        ? pasted
+        : sanitize(value.slice(0, start) + pasted + value.slice(end), allow, length);
+    pendingCaret.current = Math.min(
+      pasted.length >= length ? length : start + pasted.length,
+      length,
+    );
+    commit(next);
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+    const [start] = selection;
+    const targets: Record<string, number> = {
+      ArrowLeft: start - 1,
+      ArrowRight: start + 1,
+      Home: 0,
+      End: value.length,
+    };
+    const target = targets[event.key];
+    if (target === undefined || event.shiftKey) return;
+    event.preventDefault();
+    moveTo(target);
+  }
+
+  function handleClick(event: MouseEvent<HTMLInputElement>) {
+    onClick?.(event);
+    // The input's own caret positions do not line up with the painted slots,
+    // so a click is resolved against the slots' boxes instead.
+    const hit = slotRefs.current.findIndex((slot) => {
+      const box = slot?.getBoundingClientRect();
+      return !!box && box.width > 0 && event.clientX >= box.left && event.clientX <= box.right;
+    });
+    if (hit >= 0) moveTo(hit);
+    else sync();
+  }
+
+  function handleFocus(event: FocusEvent<HTMLInputElement>) {
+    onFocus?.(event);
+    setFocused(true);
+    // Focus lands after the last character, never selecting the whole code:
+    // typing into a tabbed-to field continues it rather than wiping it.
+    moveTo(event.currentTarget.value.length);
+  }
+
+  function handleBlur(event: FocusEvent<HTMLInputElement>) {
+    onBlur?.(event);
+    setFocused(false);
+  }
+
+  const [start, end] = selection;
+  const invalid = ariaInvalid === true || ariaInvalid === "true";
+  const maskChar = typeof mask === "string" ? mask : "•";
+  const named =
+    props["aria-label"] !== undefined ||
+    props["aria-labelledby"] !== undefined ||
+    props.id !== undefined;
+
+  return (
+    <div
+      data-slot="otp-input"
+      data-disabled={disabled ? "" : undefined}
+      dir="ltr"
+      className={cn(
+        "relative inline-flex items-center gap-2 data-[disabled]:opacity-55",
+        className,
+      )}
+    >
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      {layout(groups, length).map((group, groupIndex) => (
+        <div key={group[0]} className="flex items-center gap-2" aria-hidden="true">
+          {groupIndex > 0 ? (
+            <span data-slot="otp-input-separator" className="flex text-muted-foreground">
+              {separator ?? <span className="h-0.5 w-3 rounded-full bg-current" />}
+            </span>
+          ) : null}
+          {group.map((index) => {
+            const char = value[index];
+            const active =
+              focused &&
+              index >= Math.min(start, length - 1) &&
+              index < Math.max(end, start + 1);
+            const caret = focused && start === end && start === index && index === value.length;
+            return (
+              <div
+                key={index}
+                ref={(node) => {
+                  slotRefs.current[index] = node;
+                }}
+                data-slot="otp-input-slot"
+                data-active={active ? "" : undefined}
+                data-filled={char ? "" : undefined}
+                data-invalid={invalid ? "" : undefined}
+                style={{ [`--${PREFIX}-index`]: index } as CSSProperties}
+                className={cn(otpInputVariants({ slotSize }), slotClassName)}
+              >
+                {char ? (
+                  <span key={`${index}-${char}`} data-slot="otp-input-char">
+                    {mask ? maskChar : char}
+                  </span>
+                ) : null}
+                {caret ? (
+                  <span
+                    data-slot="otp-input-caret"
+                    className="pointer-events-none absolute h-1/2 w-px bg-foreground"
+                  />
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+      <input
+        ref={setRefs}
+        data-slot="otp-input-control"
+        type="text"
+        inputMode={allow === "numeric" ? "numeric" : "text"}
+        autoComplete="one-time-code"
+        autoCapitalize="off"
+        autoCorrect="off"
+        spellCheck={false}
+        aria-label={named ? undefined : "One-time code"}
+        aria-invalid={ariaInvalid}
+        disabled={disabled}
+        maxLength={length}
+        value={value}
+        style={{ ...INPUT_STYLE, ...style }}
+        className="absolute inset-0 size-full border-0 p-0 outline-none selection:bg-transparent disabled:cursor-not-allowed"
+        onChange={handleChange}
+        onPaste={handlePaste}
+        onKeyDown={handleKeyDown}
+        onKeyUp={(event) => {
+          onKeyUp?.(event);
+          sync();
+        }}
+        onSelect={(event) => {
+          onSelect?.(event);
+          sync();
+        }}
+        onClick={handleClick}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export { otpInputVariants };

package/src/components/pagination/index.ts

@@ -6,5 +6,6 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  type PaginationContentProps,
   type PaginationLinkProps,
 } from "./pagination";

package/src/components/pagination/meta.ts

@@ -8,10 +8,12 @@ export const meta = defineMeta({
   status: "stable",
   dependencies: ["radix-ui"],
   registryDependencies: ["button"],
-  files: ["pagination.tsx"],
+  files: ["pagination.tsx", "pagination-indicator.tsx"],
   a11y:
     'A named nav landmark. The current page carries aria-current="page" — styling it ' +
     "differently conveys nothing on its own. Links by default, since a page of results is a " +
     "place worth sharing; use asChild for your router's link, or render buttons when paging " +
-    "only changes client state.",
+    'only changes client state. The optional sliding pill (indicator="slide") is an ' +
+    "aria-hidden list item, so the list's item count stays the number of pages, and it " +
+    "stops sliding under reduced motion.",
 });

package/src/components/pagination/pagination-indicator.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+// Motion from SmoothUI Pagination (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { useCallback, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+ * The client half of `<PaginationContent indicator="slide">`, in its own file
+ * so the rest of Pagination stays renderable on the server.
+ *
+ * It measures its own parent list rather than being handed a ref, so
+ * PaginationContent needs no state of its own. The move is a CSS transition
+ * on transform and width with the overshoot curve standing in for SmoothUI's
+ * spring; the global reduced-motion rule turns it into a jump.
+ */
+
+type Box = Pick<CSSProperties, "width" | "height" | "transform">;
+
+const ACTIVE = '[data-slot="pagination-link"][aria-current="page"]';
+
+function measure(list: HTMLElement): Box | null {
+  const active = list.querySelector<HTMLElement>(ACTIVE);
+  if (!active) return null;
+  let { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = active;
+  if (active.offsetParent !== list) {
+    const from = list.getBoundingClientRect();
+    const to = active.getBoundingClientRect();
+    x = to.left - from.left - list.clientLeft;
+    y = to.top - from.top - list.clientTop;
+    width = to.width;
+    height = to.height;
+  }
+  return { width, height, transform: `translate(${String(x)}px, ${String(y)}px)` };
+}
+
+function same(a: Box | null, b: Box | null) {
+  return a?.transform === b?.transform && a?.width === b?.width && a?.height === b?.height;
+}
+
+/**
+ * The sliding active-page pill. A list item because it lives in a `<ul>`,
+ * and hidden from assistive technology so the list's item count is still the
+ * number of pages: `aria-current` is what announces the current one.
+ */
+export function PaginationIndicator({ className }: { className?: string }) {
+  const [box, setBox] = useState<Box | null>(null);
+  const node = useRef<HTMLLIElement | null>(null);
+
+  const update = useCallback(() => {
+    const list = node.current?.parentElement;
+    if (!list) return;
+    const next = measure(list);
+    setBox((previous) => (same(previous, next) ? previous : next));
+  }, []);
+
+  useLayoutEffect(() => {
+    const list = node.current?.parentElement;
+    if (!list) return;
+    update();
+    // Client-state pagination re-renders the links with a new aria-current;
+    // a page list that grows or shrinks around the ellipsis changes sizes.
+    const mutations = new MutationObserver(update);
+    mutations.observe(list, {
+      attributes: true,
+      attributeFilter: ["aria-current"],
+      childList: true,
+      subtree: true,
+    });
+    const resizes = new ResizeObserver(update);
+    resizes.observe(list);
+    return () => {
+      mutations.disconnect();
+      resizes.disconnect();
+    };
+  }, [update]);
+
+  return (
+    <li
+      ref={node}
+      aria-hidden="true"
+      data-slot="pagination-indicator"
+      data-ready={box ? "" : undefined}
+      className={cn(
+        "pointer-events-none absolute rounded-md border border-border-strong bg-background",
+        "transition-[transform,width,height] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]",
+        "motion-reduce:transition-none",
+        !box && "hidden",
+        className,
+      )}
+      // Physical anchor, because the offsets it moves by are physical.
+      style={box ? { top: 0, left: 0, ...box } : undefined}
+    />
+  );
+}

package/src/components/pagination/pagination.tsx

@@ -1,9 +1,13 @@
+// Motion from SmoothUI Pagination (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
 import { Slot } from "radix-ui";
 import type { ComponentPropsWithRef } from "react";
 
 import { buttonVariants } from "@/components/button";
+import { mirrorForDirection } from "@/lib/styles";
 import { cn } from "@/lib/utils";
 
+import { PaginationIndicator } from "./pagination-indicator";
+
 /**
  * Navigation between pages of a list.
  *
@@ -25,13 +29,44 @@ export function Pagination({ className, ...props }: ComponentPropsWithRef<"nav">
   );
 }
 
-export function PaginationContent({ className, ...props }: ComponentPropsWithRef<"ul">) {
+export interface PaginationContentProps extends ComponentPropsWithRef<"ul"> {
+  /**
+   * `slide` moves one active-page pill between pages instead of restyling
+   * each link. Worth it when paging changes client state; a link that loads
+   * a new document never sees the slide. Default `none`.
+   */
+  indicator?: "none" | "slide";
+}
+
+export function PaginationContent({
+  className,
+  indicator = "none",
+  children,
+  ...props
+}: PaginationContentProps) {
+  const slide = indicator === "slide";
   return (
     <ul
       data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
+      data-indicator={slide ? "slide" : undefined}
+      className={cn(
+        "flex flex-row items-center gap-1",
+        slide && [
+          "relative",
+          // Once the pill has measured, the active link hands its border and
+          // background to it. Before that it keeps its own, so first paint and
+          // a server render look exactly as they always have.
+          "has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link]]:relative",
+          "has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link][aria-current=page]]:border-transparent",
+          "has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link][aria-current=page]]:bg-transparent",
+        ],
+        className,
+      )}
       {...props}
-    />
+    >
+      {slide ? <PaginationIndicator /> : null}
+      {children}
+    </ul>
   );
 }
 
@@ -80,7 +115,12 @@ export function PaginationPrevious({ className, ...props }: PaginationLinkProps)
       className={cn("gap-1 px-2.5", className)}
       {...props}
     >
-      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+        className={cn("size-4", mirrorForDirection)}
+      >
         <path
           d="m15 18-6-6 6-6"
           stroke="currentColor"
@@ -103,7 +143,12 @@ export function PaginationNext({ className, ...props }: PaginationLinkProps) {
       {...props}
     >
       <span className="hidden sm:inline">Next</span>
-      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+        className={cn("size-4", mirrorForDirection)}
+      >
         <path
           d="m9 18 6-6-6-6"
           stroke="currentColor"

package/src/components/palette-generator/index.ts

@@ -0,0 +1,8 @@
+export {
+  PaletteGenerator,
+  generateTokenPalette,
+  paletteGeneratorVariants,
+  type PaletteColor,
+  type PaletteGenerate,
+  type PaletteGeneratorProps,
+} from "./palette-generator";

package/src/components/palette-generator/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "palette-generator",
+  title: "Palette Generator",
+  description:
+    "A row of swatches that melt together through a goo filter and pop back out in a new palette.",
+  category: "effects",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: ["button"],
+  files: ["palette-generator.tsx"],
+  a11y:
+    'The refresh control is a named button ("Generate a new palette") with a focus ring. The swatches are a ' +
+    "labelled list of images named by colour, and each new palette is announced through a polite live region " +
+    "(missing in the source). The melt is decoration: under reduced motion the colours swap at once.",
+});