@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/book/book.tsx

@@ -0,0 +1,300 @@
+// Ported from SmoothUI Book (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * A 3D book drawn entirely in CSS: a front cover, a block of page edges turned
+ * 90° along the fore-edge, and a back cover pushed back by the book's depth.
+ * Hover or keyboard focus tilts it (`effect="tilt"`, the source's behaviour) or
+ * swings the cover open on its spine to show `inside` (`effect="open"`).
+ *
+ * No JavaScript: the source read useReducedMotion only to drop the hover
+ * transition, which the motion scale and a `motion-safe:` variant do here.
+ * The tilt is decoration, so under reduced motion it does not happen at all;
+ * opening reveals content, so it still happens — instantly.
+ *
+ * The book is a physical object with its spine on the left, like the source,
+ * so its transforms are physical rather than logical.
+ */
+
+/** Spine binding: two soft light bands over a darker crease. Tokens only. */
+const SPINE_SHADING =
+  "linear-gradient(90deg, transparent 0%, transparent 12%, color-mix(in oklab, var(--color-card) 25%, transparent) 29.25%, transparent 50.5%, transparent 75.25%, color-mix(in oklab, var(--color-card) 25%, transparent) 91%, transparent 100%), " +
+  "linear-gradient(90deg, color-mix(in oklab, var(--color-overlay) 6%, transparent) 0%, color-mix(in oklab, var(--color-overlay) 18%, transparent) 12%, transparent 30%, color-mix(in oklab, var(--color-overlay) 4%, transparent) 50%, color-mix(in oklab, var(--color-overlay) 36%, transparent) 73.5%, color-mix(in oklab, var(--color-overlay) 70%, transparent) 75.25%, color-mix(in oklab, var(--color-overlay) 26%, transparent) 85.25%, transparent 100%)";
+
+const PAGE_EDGES =
+  "linear-gradient(90deg, color-mix(in oklab, var(--color-foreground) 12%, var(--color-card)) 0%, transparent 70%), " +
+  "linear-gradient(var(--color-card), color-mix(in oklab, var(--color-foreground) 3%, var(--color-card)))";
+
+const DEPTH = "29cqw";
+const RADIUS = "6px 4px 4px 6px";
+
+/*
+ * What hover and focus do to the book body. Written out in full, per state,
+ * because Tailwind only generates classes it can read literally.
+ */
+const bookVariants = cva(
+  cn(
+    "[container-type:inline-size] relative block w-fit [transform-style:preserve-3d]",
+    "transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+  ),
+  {
+    variants: {
+      effect: {
+        /** Decoration only, so it waits for motion to be welcome. */
+        tilt: cn(
+          "motion-safe:group-hover/book:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]",
+          "motion-safe:group-focus-within/book:[transform:rotateY(-20deg)_scale(1.066)_translateX(-8px)]",
+        ),
+        /** Turns the book a little so the opening cover has room. */
+        open: cn(
+          "group-hover/book:[transform:rotateY(-12deg)_translateX(10%)]",
+          "group-focus-within/book:[transform:rotateY(-12deg)_translateX(10%)]",
+        ),
+        none: "",
+      },
+    },
+    defaultVariants: {
+      effect: "tilt",
+    },
+  },
+);
+
+const OPEN_COVER = cn(
+  "group-hover/book:[transform:rotateY(-115deg)]",
+  "group-focus-within/book:[transform:rotateY(-115deg)]",
+);
+
+const bookCoverVariants = cva(
+  "absolute inset-y-0 start-0 flex flex-col overflow-hidden shadow-md [backface-visibility:hidden]",
+  {
+    variants: {
+      variant: {
+        /** A colour band with an optional illustration over a plain body. */
+        stripe: "bg-card",
+        /** The whole cover in the book's colour. */
+        simple: "bg-(--book-color)",
+      },
+    },
+    defaultVariants: {
+      variant: "stripe",
+    },
+  },
+);
+
+export interface BookProps
+  extends
+    Omit<ComponentPropsWithRef<"div">, "title">,
+    VariantProps<typeof bookVariants>,
+    VariantProps<typeof bookCoverVariants> {
+  /** The title on the cover. */
+  title: ReactNode;
+  /** Cover colour. Any CSS colour; defaults to the primary token. */
+  color?: string;
+  /** Title colour. Defaults to the foreground token (stripe) or primary-foreground (simple). */
+  textColor?: string;
+  /** Width in pixels; the height follows at 60:49. */
+  width?: number;
+  /** Artwork for the colour band of the `stripe` variant. */
+  illustration?: ReactNode;
+  /** A mark at the foot of the cover. */
+  logo?: ReactNode;
+  /** What the open cover reveals, for `effect="open"`. */
+  inside?: ReactNode;
+  /**
+   * Renders the child element as the book — typically a link. The book then
+   * takes keyboard focus itself, and focus opens or tilts it like hover does.
+   */
+  asChild?: boolean;
+}
+
+/** A 3D book cover that tilts, or opens, on hover and keyboard focus. */
+export function Book({
+  className,
+  title,
+  variant = "stripe",
+  effect = "tilt",
+  color,
+  textColor,
+  width = 196,
+  illustration,
+  logo,
+  inside,
+  asChild = false,
+  style,
+  children,
+  ...props
+}: BookProps) {
+  const Comp = asChild ? Slot.Root : "div";
+  const vars = {
+    "--book-color": color ?? "var(--color-primary)",
+    "--book-text":
+      textColor ??
+      (variant === "simple" ? "var(--color-primary-foreground)" : "var(--color-foreground)"),
+    "--book-width": `${String(width)}px`,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <Comp
+      data-slot="book"
+      data-effect={effect}
+      className={cn(
+        "group/book inline-block w-fit rounded-md [perspective:900px]",
+        asChild && focusRing,
+        className,
+      )}
+      style={vars}
+      {...props}
+    >
+      <Slot.Slottable>{children}</Slot.Slottable>
+      <span
+        data-slot="book-body"
+        className={bookVariants({ effect })}
+        style={{ aspectRatio: "49 / 60", minWidth: "var(--book-width)" }}
+      >
+        {effect === "open" ? (
+          <span
+            data-slot="book-inside"
+            className="absolute inset-y-0 start-0 flex w-(--book-width) flex-col overflow-hidden bg-card p-[8%] text-card-foreground shadow-sm"
+            style={{ borderRadius: RADIUS, transform: "translateZ(-1px)" }}
+          >
+            {inside}
+          </span>
+        ) : null}
+
+        <span
+          data-slot="book-cover"
+          className={cn(
+            "absolute inset-y-0 start-0 block w-(--book-width) [transform-style:preserve-3d]",
+            "transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]",
+            effect === "open" && OPEN_COVER,
+          )}
+          style={{ transformOrigin: "0 50%", borderRadius: RADIUS }}
+        >
+          <span
+            className={cn(bookCoverVariants({ variant }), "w-full")}
+            style={{ borderRadius: RADIUS }}
+          >
+            {variant === "stripe" ? (
+              <StripeCover title={title} illustration={illustration} logo={logo} />
+            ) : (
+              <SimpleCover title={title} logo={logo} />
+            )}
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 border border-border"
+              style={{ borderRadius: "inherit" }}
+            />
+          </span>
+          {effect === "open" ? (
+            <span
+              aria-hidden="true"
+              className="absolute inset-0 bg-(--book-color) [backface-visibility:hidden]"
+              style={{ borderRadius: RADIUS, transform: "rotateY(180deg)" }}
+            >
+              <span
+                className="absolute inset-0 opacity-30"
+                style={{ background: SPINE_SHADING }}
+              />
+            </span>
+          ) : null}
+        </span>
+
+        <span
+          aria-hidden="true"
+          data-slot="book-pages"
+          className="pointer-events-none absolute top-[3px] block h-[calc(100%-6px)]"
+          style={{
+            background: PAGE_EDGES,
+            width: `calc(${DEPTH} - 2px)`,
+            transform: `translateX(calc(var(--book-width) - ${DEPTH} / 2 - 3px)) rotateY(90deg) translateX(calc(${DEPTH} / 2))`,
+          }}
+        />
+        <span
+          aria-hidden="true"
+          data-slot="book-back"
+          className={cn(
+            "pointer-events-none absolute inset-y-0 start-0 block w-(--book-width)",
+            variant === "simple" ? "bg-(--book-color)" : "bg-card",
+          )}
+          style={{ borderRadius: RADIUS, transform: `translateZ(calc(-1 * ${DEPTH}))` }}
+        />
+      </span>
+    </Comp>
+  );
+}
+
+function CoverTitle({ title, size }: { title: ReactNode; size: string }) {
+  return (
+    <span
+      data-slot="book-title"
+      className="leading-[1.25em] font-semibold tracking-[-0.02em] text-balance text-(--book-text)"
+      style={{ fontSize: size }}
+    >
+      {title}
+    </span>
+  );
+}
+
+function StripeCover({
+  title,
+  illustration,
+  logo,
+}: {
+  title: ReactNode;
+  illustration?: ReactNode;
+  logo?: ReactNode;
+}) {
+  return (
+    <>
+      <span className="relative flex w-full flex-1 overflow-hidden bg-(--book-color)">
+        <span className="flex-1 *:size-full *:object-cover">{illustration}</span>
+        <span
+          aria-hidden="true"
+          className="absolute inset-0 mix-blend-overlay"
+          style={{ background: SPINE_SHADING }}
+        />
+      </span>
+      <span className="flex">
+        <span
+          aria-hidden="true"
+          className="min-w-[8.2%] opacity-20"
+          style={{ background: SPINE_SHADING }}
+        />
+        <span
+          className="[container-type:inline-size] flex w-full flex-col justify-between gap-[12cqw]"
+          style={{ padding: "6.1%" }}
+        >
+          <CoverTitle title={title} size="10.5cqw" />
+          {logo ? <span data-slot="book-logo">{logo}</span> : null}
+        </span>
+      </span>
+    </>
+  );
+}
+
+function SimpleCover({ title, logo }: { title: ReactNode; logo?: ReactNode }) {
+  return (
+    <span className="flex size-full">
+      <span
+        aria-hidden="true"
+        className="min-w-[8.2%] mix-blend-overlay"
+        style={{ background: SPINE_SHADING }}
+      />
+      <span
+        className="[container-type:inline-size] flex w-full flex-col justify-between gap-[8cqw]"
+        style={{ padding: "6.1%" }}
+      >
+        <CoverTitle title={title} size="12cqw" />
+        {logo ? <span data-slot="book-logo">{logo}</span> : null}
+      </span>
+    </span>
+  );
+}
+
+export { bookCoverVariants, bookVariants };

package/src/components/book/index.ts

@@ -0,0 +1 @@
+export { Book, bookCoverVariants, bookVariants, type BookProps } from "./book";

package/src/components/book/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "book",
+  title: "Book",
+  description:
+    "A 3D book cover drawn in CSS that tilts, or swings open to reveal its first page, on hover and keyboard focus.",
+  category: "display",
+  status: "beta",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["book.tsx"],
+  a11y:
+    "The title is real text; the spine shading, page edges, back cover and inside of the cover are aria-hidden. " +
+    "Keyboard focus anywhere in the book (or on the book itself, when it is rendered as a link with asChild) " +
+    "does what hover does, and the link gets the shared focus ring. The tilt is decoration and does not happen " +
+    "under prefers-reduced-motion; the open effect still reveals its content there, instantly.",
+});

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,3 +1,4 @@
+// Motion from SmoothUI Breadcrumb (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
 import { Slot } from "radix-ui";
 import type { ComponentPropsWithRef } from "react";
 
@@ -35,16 +36,56 @@ export function Breadcrumb({ className, ...props }: ComponentPropsWithRef<"nav">
   );
 }
 
-export function BreadcrumbList({ className, ...props }: ComponentPropsWithRef<"ol">) {
+const PREFIX = "dowel-breadcrumb";
+
+/** Each entry — item or separator — arrives 40ms after the one before it. */
+const STAGGER_STEP_MS = 40;
+const STAGGERED = 12;
+
+const ANIMATED_ENTRY = "[data-slot=breadcrumb-list][data-animated]>li";
+
+/* Entries slide in from the inline start, so the trail reads in along the
+ * direction it is read in. `[dir=rtl]` covers browsers without :dir(). */
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateX(calc(-4px * var(--${PREFIX}-inline,1)))}}
+[dir=rtl] [data-slot=breadcrumb-list],[data-slot=breadcrumb-list][dir=rtl]{--${PREFIX}-inline:-1}
+[data-slot=breadcrumb-list]:dir(rtl){--${PREFIX}-inline:-1}
+${ANIMATED_ENTRY}{animation:${PREFIX}-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}
+${Array.from(
+  { length: STAGGERED - 1 },
+  (_, i) =>
+    `${ANIMATED_ENTRY}:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * STAGGER_STEP_MS)}ms * var(--motion-scale))}`,
+).join("\n")}
+${ANIMATED_ENTRY}:nth-child(n+${String(STAGGERED + 1)}){animation-delay:calc(${String(STAGGERED * STAGGER_STEP_MS)}ms * var(--motion-scale))}
+`;
+
+export interface BreadcrumbListProps extends ComponentPropsWithRef<"ol"> {
+  /**
+   * Brings the trail in one entry after another when it mounts, sliding from
+   * the inline start. Off by default: a breadcrumb is read on every page, and
+   * motion there gets old fast. Stops under reduced motion.
+   */
+  animated?: boolean;
+}
+
+export function BreadcrumbList({ className, animated = false, ...props }: BreadcrumbListProps) {
   return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
+    <>
+      {animated ? (
+        <style href={PREFIX} precedence="dowel">
+          {STYLES}
+        </style>
+      ) : null}
+      <ol
+        data-slot="breadcrumb-list"
+        data-animated={animated || undefined}
+        className={cn(
+          "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground",
+          className,
+        )}
+        {...props}
+      />
+    </>
   );
 }
 

package/src/components/breadcrumb/index.ts

@@ -7,4 +7,5 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   type BreadcrumbLinkProps,
+  type BreadcrumbListProps,
 } from "./breadcrumb";

package/src/components/breadcrumb/meta.ts

@@ -15,5 +15,6 @@ export const meta = defineMeta({
     "ones that go somewhere. Separators are hidden from assistive technology, because the list " +
     'already conveys the sequence and reading "slash" between every item is the design\'s ' +
     "punctuation leaking into the content. The ellipsis is the exception and is named, because " +
-    "it is content: it says levels have been left out.",
+    "it is content: it says levels have been left out. The optional entrance stagger stops " +
+    "under reduced motion.",
 });

package/src/components/browser-tabs/browser-tabs-spring.ts

@@ -0,0 +1,34 @@
+// Ported from bencho (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+/*
+ * A damped spring expressed as a CSS `linear()` easing, so a state-driven
+ * spring (overshoot, settle) runs as a plain CSS transition: no animation
+ * library, and the global reduced-motion rule and --motion-scale still apply.
+ *
+ * `bounce` 0..1 (0 = critically damped, no overshoot; 1 = very lively).
+ * Returns the easing string. Pair it with a duration from the caller.
+ * Browsers without linear() drop the declaration, so set it through a CSS
+ * variable consumed inside `@supports (transition-timing-function: linear(0, 1))`
+ * in the hoisted stylesheet, with a cubic-bezier fallback in the class list.
+ */
+export function springEasing(bounce: number, samples = 48): string {
+  const b = Math.min(Math.max(bounce, 0), 1);
+  const zeta = 1 - b * 0.7; // damping ratio 1 → 0.3
+  // Choose ω so the envelope has decayed to ~0.1% at t = 1.
+  const omega = Math.log(1000) / zeta;
+  const points: string[] = [];
+  for (let i = 0; i <= samples; i += 1) {
+    const t = i / samples;
+    let x: number;
+    if (zeta >= 0.999) {
+      x = 1 - Math.exp(-omega * t) * (1 + omega * t);
+    } else {
+      const wd = omega * Math.sqrt(1 - zeta * zeta);
+      x =
+        1 -
+        Math.exp(-zeta * omega * t) *
+          (Math.cos(wd * t) + ((zeta * omega) / wd) * Math.sin(wd * t));
+    }
+    points.push(i === samples ? "1" : String(Math.round(x * 1000) / 1000));
+  }
+  return `linear(${points.join(", ")})`;
+}