@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/shape-loader/shape-loader.tsx

@@ -0,0 +1,149 @@
+// Ported from amicro "Geometric Shapes" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+import {
+  PREFIX,
+  VARIANT_NAMES,
+  VARIANTS,
+  type Variant,
+  type VariantName,
+} from "./shape-loader-variants";
+
+/*
+ * Follows the loader family shape (ADR 0014), as DotsLoader does: geometry in
+ * `em`, colour from `currentColor`, keyframes hoisted with the component, and
+ * every duration and delay scaled by --motion-scale-indicator.
+ *
+ * Parts pick a base look with data-part: `shape` is a filled block, `outline`
+ * a bordered one, `group` a transparent layer that moves its children, `frame`
+ * a transparent layer that never moves, and `svg`/`stroke`/`fill` draw with
+ * the current colour. Squares set their own radius inline.
+ */
+/** The keyframes every variant draws on. Stops are spread evenly, as Framer spreads them. */
+const KEYFRAMES = `
+@keyframes ${PREFIX}-flip{0%{transform:rotateX(0) rotateY(0)}33.333%{transform:rotateX(180deg) rotateY(0)}66.667%{transform:rotateX(180deg) rotateY(180deg)}100%{transform:rotateX(0) rotateY(180deg)}}
+@keyframes ${PREFIX}-morph{0%{border-radius:10%;transform:scale(1) rotate(0)}50%{border-radius:50%;transform:scale(.8) rotate(90deg)}100%{border-radius:10%;transform:scale(1) rotate(180deg)}}
+@keyframes ${PREFIX}-cradle-a{0%,100%{transform:rotate(25deg)}20%,40%,60%,80%{transform:rotate(0)}}
+@keyframes ${PREFIX}-cradle-b{0%,20%,40%,80%,100%{transform:rotate(0)}60%{transform:rotate(-25deg)}}
+@keyframes ${PREFIX}-trace{0%,100%{transform:translate(0,0)}25%{transform:translate(var(--d),0)}50%{transform:translate(var(--d),var(--d))}75%{transform:translate(0,var(--d))}}
+@keyframes ${PREFIX}-wander{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(3em,0) rotate(-90deg)}50%{transform:translate(3em,3em) rotate(-180deg)}75%{transform:translate(0,3em) rotate(-270deg)}100%{transform:translate(0,0) rotate(-360deg)}}
+@keyframes ${PREFIX}-stretch-x{0%,100%{transform:scaleX(.2)}50%{transform:scaleX(1)}}
+@keyframes ${PREFIX}-stretch-y{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
+@keyframes ${PREFIX}-shrink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.3}}
+@keyframes ${PREFIX}-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.25em)}}
+@keyframes ${PREFIX}-pulse{0%,100%{transform:scale(1);opacity:1;border-radius:20%}50%{transform:scale(1.2);opacity:.3;border-radius:50%}}
+@keyframes ${PREFIX}-swing{0%,100%{transform:rotate(-45deg)}50%{transform:rotate(45deg)}}
+@keyframes ${PREFIX}-dash-120{from{stroke-dashoffset:120}to{stroke-dashoffset:-120}}
+@keyframes ${PREFIX}-dash-100{from{stroke-dashoffset:100}to{stroke-dashoffset:-100}}
+@keyframes ${PREFIX}-dash-tri{0%{stroke-dashoffset:120}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-120}}
+@keyframes ${PREFIX}-hourglass{0%{transform:rotate(0)}25%,50%{transform:rotate(180deg)}75%,100%{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-hop{0%,100%{transform:translateY(0) scale(1.2,.8)}50%{transform:translateY(-3em) scale(.9,1.1)}}
+@keyframes ${PREFIX}-elastic{0%,100%{transform:translateY(0) scale(1.3,.7)}50%{transform:translateY(-2.5em) scale(.8,1.2)}}
+@keyframes ${PREFIX}-breathe{0%{transform:scale(1) rotate(0);border-radius:0%}50%{transform:scale(1.2) rotate(90deg);border-radius:50%}100%{transform:scale(1) rotate(180deg);border-radius:0%}}
+@keyframes ${PREFIX}-flicker{0%,100%{opacity:.1}50%{opacity:1}}
+@keyframes ${PREFIX}-fade{0%,100%{opacity:.2}50%{opacity:1}}
+@keyframes ${PREFIX}-loop-a{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(3em) scale(.5)}}
+@keyframes ${PREFIX}-loop-b{0%,100%{transform:translateX(3em) scale(.5)}50%{transform:translateX(0) scale(1)}}
+@keyframes ${PREFIX}-pump{0%,50%,100%{transform:scale(1)}25%,75%{transform:scale(1.25)}}
+@keyframes ${PREFIX}-spiral{0%{rotate:0deg;scale:1}50%{scale:.8}100%{rotate:360deg;scale:1}}
+@keyframes ${PREFIX}-nest-outer{0%{rotate:0deg;scale:1}33.333%{scale:1}50%{rotate:90deg}66.667%{scale:.8}100%{rotate:90deg;scale:1}}
+@keyframes ${PREFIX}-nest-inner{0%{rotate:0deg;scale:1}33.333%{scale:1}50%{rotate:-90deg}66.667%{scale:1.2}100%{rotate:-90deg;scale:1}}
+@keyframes ${PREFIX}-half-turn{from{transform:rotate(0)}to{transform:rotate(180deg)}}
+@keyframes ${PREFIX}-icon{0%{border-radius:20%;transform:rotate(0)}33.333%{border-radius:50%;transform:rotate(90deg)}66.667%{border-radius:50%;transform:rotate(180deg)}100%{border-radius:20%;transform:rotate(270deg)}}
+@keyframes ${PREFIX}-round{0%,100%{border-radius:10%}50%{border-radius:50%}}
+@keyframes ${PREFIX}-cube{0%{transform:rotateX(0) rotateY(0)}50%{transform:rotateX(180deg) rotateY(0)}100%{transform:rotateX(180deg) rotateY(180deg)}}
+@keyframes ${PREFIX}-fold{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
+@keyframes ${PREFIX}-diamond{0%{transform:rotate(45deg)}33.333%{transform:rotate(135deg)}66.667%{transform:rotate(225deg)}100%{transform:rotate(315deg)}}
+@keyframes ${PREFIX}-shift{0%,100%{border-radius:10%;transform:scale(1)}50%{border-radius:50%;transform:scale(.8)}}
+@keyframes ${PREFIX}-hex{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(60deg)}100%{transform:scale(1) rotate(60deg)}}
+@keyframes ${PREFIX}-fluid{0%,100%{transform:scale(1,1) rotate(45deg)}50%{transform:scale(1.5,.5) rotate(45deg)}}
+`;
+
+const STYLES = `
+.${PREFIX}{direction:ltr;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}
+.${PREFIX} [data-part]{display:block;box-sizing:border-box;flex-shrink:0;border-radius:9999px;background:currentColor;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--dur);animation-delay:var(--delay,0s)}
+.${PREFIX} [data-part=outline]{background:transparent;border-style:solid;border-color:currentColor}
+.${PREFIX} [data-part=group]{background:transparent;border-radius:0}
+.${PREFIX} [data-part=frame]{background:transparent;border-radius:0;animation:none}
+.${PREFIX} [data-part=svg]{background:transparent;border-radius:0;overflow:visible;transform-origin:center}
+.${PREFIX} [data-part=stroke]{background:none;border-radius:0;fill:none;stroke:currentColor;transform-box:fill-box;transform-origin:center}
+.${PREFIX} [data-part=fill]{background:none;border-radius:0;fill:currentColor;animation:none}
+${KEYFRAMES}`;
+
+export type ShapeLoaderVariant = VariantName;
+
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+export const shapeLoaderVariantNames = [...VARIANT_NAMES];
+
+const shapeLoaderVariants = cva("", {
+  variants: {
+    size: {
+      sm: "text-[0.25rem]",
+      md: "text-[0.375rem]",
+      lg: "text-[0.5rem]",
+      xl: "text-[0.625rem]",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export interface ShapeLoaderProps
+  extends
+    Omit<ComponentPropsWithRef<"span">, "children">,
+    VariantProps<typeof shapeLoaderVariants> {
+  /** Which animation to play. */
+  variant?: ShapeLoaderVariant;
+  /**
+   * Announced to assistive technology while the loader is visible.
+   *
+   * Omit it when the loader sits inside something that already reports its
+   * busy state — announcing twice is worse than not announcing at all.
+   */
+  label?: string;
+}
+
+/** An indeterminate loading indicator made of geometric shapes, in 35 motions. */
+export function ShapeLoader({
+  className,
+  size,
+  variant = "flip-square",
+  label,
+  style,
+  ...props
+}: ShapeLoaderProps) {
+  const spec: Variant = VARIANTS[variant];
+
+  return (
+    <>
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <span
+        aria-hidden="true"
+        data-slot="shape-loader"
+        data-variant={variant}
+        // Exempt from the reduced-motion blanket: a loader that stops says the
+        // application has hung. It is slowed instead — see ADR 0014.
+        data-motion="indicator"
+        className={cn(PREFIX, shapeLoaderVariants({ size }), className)}
+        style={{ ...spec.root, ...style }}
+        {...props}
+      >
+        {spec.render()}
+      </span>
+      {label ? (
+        <span role="status" className="sr-only">
+          {label}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+export { shapeLoaderVariants };

package/src/components/sheet/meta.ts

@@ -12,5 +12,5 @@ export const meta = defineMeta({
   a11y:
     "Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. " +
     "For a side navigation sheet, put a nav landmark inside rather than relying on placement " +
-    "to convey the role.",
+    "to convey the role. The optional section stagger stops under reduced motion.",
 });

package/src/components/sheet/sheet.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+// Motion from SmoothUI Drawer (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
 import { cva, type VariantProps } from "class-variance-authority";
 import { Dialog as SheetPrimitive } from "radix-ui";
 import type { ComponentPropsWithRef } from "react";
@@ -63,11 +64,41 @@ const sheetVariants = cva(
   },
 );
 
+const PREFIX = "dowel-sheet";
+
+/** Sections start once the panel is mostly in, then follow 50ms apart. */
+const STAGGER_BASE_MS = 120;
+const STAGGER_STEP_MS = 50;
+const STAGGERED = 6;
+
+const SPRING_CHILD = `[data-slot=sheet-content][data-animation=spring][data-state=open]>:not([data-slot=sheet-close])`;
+
+const delay = (index: number) =>
+  `calc(${String(STAGGER_BASE_MS + index * STAGGER_STEP_MS)}ms * var(--motion-scale))`;
+
+const STYLES = `
+@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(6px)}}
+${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:${delay(0)}}
+${Array.from(
+  { length: STAGGERED - 1 },
+  (_, i) => `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:${delay(i + 1)}}`,
+).join("\n")}
+${SPRING_CHILD}:nth-child(n+${String(STAGGERED + 1)}){animation-delay:${delay(STAGGERED)}}
+`;
+
 export interface SheetContentProps
   extends
     ComponentPropsWithRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {
   showCloseButton?: boolean;
+  /**
+   * How the content arrives. `default` slides in as one piece. `spring` slides
+   * the panel the same way, then brings its sections — header, body, footer —
+   * in one after another. The panel itself never overshoots: a sheet that
+   * bounced past its edge would lift off the side it is attached to. Stops
+   * under reduced motion.
+   */
+  animation?: "default" | "spring";
 }
 
 export function SheetContent({
@@ -75,40 +106,51 @@ export function SheetContent({
   children,
   side,
   showCloseButton = true,
+  animation = "default",
   ...props
 }: SheetContentProps) {
+  const spring = animation === "spring";
+
   return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(sheetVariants({ side }), className)}
-        {...props}
-      >
-        {children}
-        {showCloseButton ? (
-          <SheetPrimitive.Close
-            data-slot="sheet-close"
-            aria-label="Close"
-            className={cn(
-              "absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground",
-              "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
-              "[&_svg]:size-4",
-              focusRing,
-            )}
-          >
-            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-              <path
-                d="m6 6 12 12M18 6 6 18"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            </svg>
-          </SheetPrimitive.Close>
-        ) : null}
-      </SheetPrimitive.Content>
-    </SheetPortal>
+    <>
+      {spring ? (
+        <style href={PREFIX} precedence="dowel">
+          {STYLES}
+        </style>
+      ) : null}
+      <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+          data-slot="sheet-content"
+          data-animation={spring ? "spring" : undefined}
+          className={cn(sheetVariants({ side }), className)}
+          {...props}
+        >
+          {children}
+          {showCloseButton ? (
+            <SheetPrimitive.Close
+              data-slot="sheet-close"
+              aria-label="Close"
+              className={cn(
+                "absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground",
+                "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
+                "[&_svg]:size-4",
+                focusRing,
+              )}
+            >
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <path
+                  d="m6 6 12 12M18 6 6 18"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </SheetPrimitive.Close>
+          ) : null}
+        </SheetPrimitive.Content>
+      </SheetPortal>
+    </>
   );
 }
 

package/src/components/shimmer-text/index.ts

@@ -0,0 +1,7 @@
+export {
+  ShimmerText,
+  shimmerTextVariants,
+  type ShimmerTextElement,
+  type ShimmerTextProps,
+  type ShimmerTextVariant,
+} from "./shimmer-text";

package/src/components/shimmer-text/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "shimmer-text",
+  title: "Shimmer Text",
+  description:
+    "Text with a light band sweeping across it on a loop, or a blur-and-glide entrance as it arrives.",
+  category: "effects",
+  status: "beta",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: [],
+  files: ["shimmer-text.tsx"],
+  a11y:
+    "The text is never split, so it reads as one run and copies cleanly. The effect is decoration: under " +
+    "reduced motion the shine becomes plain text in the base colour and the entrance settles at once to its " +
+    "visible end state. In forced-colours mode the clipped gradient is dropped so the text takes the system colour. " +
+    "Pick base and shine colours that both meet contrast against the background.",
+});

package/src/components/shimmer-text/shimmer-text.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+// Ported from SmoothUI Shimmer Sweep and Shine Text (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type Ref,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+ * Two SmoothUI text effects share one component (ADR 0014, families not copies):
+ *
+ * - `shine` (Shine Text): a highlight band sweeps across the letters on a loop.
+ *   The text is painted by a gradient clipped to the glyphs; the band is the
+ *   middle stop, and the loop moves `background-position-x` from 150% to -150%.
+ *   The source's pause between sweeps (`repeatDelay`) is baked into the
+ *   keyframe as a hold at the end, so one CSS animation loops exactly as the
+ *   JavaScript one did.
+ * - `sweep` (Shimmer Sweep): a one-shot entrance — the whole string fades in
+ *   from 8px of blur while gliding 22px from the inline start, over 850ms on
+ *   Apple's ease-out, which is our --ease-out-quint.
+ *
+ * Neither splits the text, so it stays one run for assistive technology and
+ * for copy and paste. Both are decoration: under reduced motion the global
+ * blanket collapses the animation to its final keyframe (sweep: fully visible)
+ * and the stylesheet below drops the shine gradient for plain text in the base
+ * colour, as the source did.
+ */
+
+const PREFIX = "dowel-shimmer-text";
+
+const STYLES = `
+[data-slot=shimmer-text][data-variant=shine]{background-image:linear-gradient(110deg,var(--${PREFIX}-base) 40%,var(--${PREFIX}-shine) 50%,var(--${PREFIX}-base) 60%);background-size:250% 100%;background-position-x:150%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
+[data-slot=shimmer-text][data-variant=sweep]{display:inline-block;--${PREFIX}-x:-22px}
+[data-slot=shimmer-text][data-variant=sweep]:dir(rtl){--${PREFIX}-x:22px}
+[data-slot=shimmer-text][data-variant=sweep][data-state=waiting]{opacity:0}
+@keyframes ${PREFIX}-sweep{from{opacity:0;filter:blur(8px);transform:translateX(var(--${PREFIX}-x))}to{opacity:1;filter:blur(0);transform:none}}
+@media (prefers-reduced-motion:reduce){[data-slot=shimmer-text][data-variant=shine]{background-image:none;color:var(--${PREFIX}-base);-webkit-text-fill-color:currentColor}}
+@media (forced-colors:active){[data-slot=shimmer-text][data-variant=shine]{background-image:none;-webkit-text-fill-color:currentColor}}
+`;
+
+/** The hold at the end of each shine loop, as a keyframe of its own. */
+function shineKeyframes(hold: number): { name: string; css: string } {
+  const name = `${PREFIX}-shine-${String(hold)}`;
+  const end = hold === 100 ? "100%" : `${String(hold)}%,100%`;
+  return {
+    name,
+    css: `@keyframes ${name}{0%{background-position-x:150%}${end}{background-position-x:-150%}}`,
+  };
+}
+
+/** Milliseconds, scaled so reduced motion and --motion-scale reach it. */
+function scaled(ms: number): string {
+  return `calc(${String(ms)}ms * var(--motion-scale, 1))`;
+}
+
+/** Elements text effects render as. They are all phrasing or heading content. */
+export type ShimmerTextElement = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+const shimmerTextVariants = cva("", {
+  variants: {
+    /** `shine` loops a light band across the text; `sweep` is a blur-and-glide entrance. */
+    variant: {
+      shine: "",
+      sweep: "",
+    },
+  },
+  defaultVariants: {
+    variant: "shine",
+  },
+});
+
+export type ShimmerTextVariant = NonNullable<
+  VariantProps<typeof shimmerTextVariants>["variant"]
+>;
+
+export interface ShimmerTextProps
+  extends Omit<ComponentPropsWithRef<"span">, "ref">, VariantProps<typeof shimmerTextVariants> {
+  ref?: Ref<HTMLElement>;
+  /** The element to render. */
+  as?: ShimmerTextElement;
+  /** `loop` (shine's default) repeats forever; `once` plays a single pass. Sweep always plays once. */
+  repeat?: "loop" | "once";
+  /** One pass, in milliseconds. Defaults to 2500 for shine, 850 for sweep. */
+  duration?: number;
+  /** Shine only: the pause between sweeps, in milliseconds. */
+  repeatDelay?: number;
+  /** Delay before the first pass, in milliseconds. */
+  delay?: number;
+  /** Shine only: the text colour outside the band. Any CSS colour; use a token. */
+  baseColor?: string;
+  /** Shine only: the colour of the band. Any CSS colour; use a token. */
+  shineColor?: string;
+  /** Wait until the text scrolls into view before playing. */
+  triggerOnView?: boolean;
+}
+
+/**
+ * Plays once the element is in view, when asked to. Without IntersectionObserver
+ * (old browsers, tests, before hydration) it plays immediately, so the text is
+ * never stranded invisible.
+ */
+function useInViewTrigger(enabled: boolean) {
+  const [waiting, setWaiting] = useState(false);
+  const observer = useRef<IntersectionObserver | null>(null);
+  // Once it has played it never waits again, even if the ref is re-attached.
+  const seen = useRef(false);
+
+  const attach = useCallback(
+    (node: HTMLElement | null) => {
+      observer.current?.disconnect();
+      observer.current = null;
+      if (!node || !enabled || seen.current || typeof IntersectionObserver !== "function")
+        return;
+      setWaiting(true);
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          seen.current = true;
+          setWaiting(false);
+          observer.current?.disconnect();
+          observer.current = null;
+        }
+      });
+      observer.current.observe(node);
+    },
+    [enabled],
+  );
+
+  useEffect(() => () => observer.current?.disconnect(), []);
+
+  return { waiting: enabled && waiting, attach };
+}
+
+/** Text with a looping light band (`shine`) or a blur-and-glide entrance (`sweep`). */
+export function ShimmerText({
+  as: Component = "span",
+  variant = "shine",
+  repeat = "loop",
+  duration,
+  repeatDelay = 600,
+  delay = 0,
+  baseColor = "var(--color-muted-foreground)",
+  shineColor = "var(--color-foreground)",
+  triggerOnView = false,
+  className,
+  style,
+  ref,
+  children,
+  ...props
+}: ShimmerTextProps) {
+  const { waiting, attach } = useInViewTrigger(triggerOnView);
+  const setRef = useCallback(
+    (node: HTMLElement | null) => {
+      attach(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [attach, ref],
+  );
+
+  const shine = variant === "shine";
+  const pass = duration ?? (shine ? 2500 : 850);
+  // The loop pauses between passes only when it repeats.
+  const pause = shine && repeat === "loop" ? repeatDelay : 0;
+  const hold = pass + pause > 0 ? Math.round((pass / (pass + pause)) * 100) : 100;
+  const keyframes = shine ? shineKeyframes(hold) : null;
+
+  const animation: CSSProperties = waiting
+    ? { animationName: "none" }
+    : {
+        animationName: keyframes ? keyframes.name : `${PREFIX}-sweep`,
+        animationDuration: scaled(pass + pause),
+        animationDelay: scaled(delay),
+        animationTimingFunction: shine ? "linear" : "var(--ease-out-quint)",
+        animationIterationCount: shine && repeat === "loop" ? "infinite" : "1",
+        animationFillMode: "both",
+      };
+
+  return (
+    <>
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      {keyframes ? (
+        <style href={keyframes.name} precedence="dowel">
+          {keyframes.css}
+        </style>
+      ) : null}
+      <Component
+        ref={setRef}
+        data-slot="shimmer-text"
+        data-variant={variant}
+        data-state={waiting ? "waiting" : "playing"}
+        className={cn(shimmerTextVariants({ variant }), className)}
+        style={
+          {
+            [`--${PREFIX}-base`]: baseColor,
+            [`--${PREFIX}-shine`]: shineColor,
+            ...animation,
+            ...style,
+          } as CSSProperties
+        }
+        {...props}
+      >
+        {children}
+      </Component>
+    </>
+  );
+}
+
+export { shimmerTextVariants };

package/src/components/skeleton/index.ts

@@ -1 +1 @@
-export { Skeleton } from "./skeleton";
+export { Skeleton, type SkeletonProps } from "./skeleton";

package/src/components/skeleton/meta.ts

@@ -11,5 +11,6 @@ export const meta = defineMeta({
   files: ["skeleton.tsx"],
   a11y:
     "Hidden from assistive technology. Put aria-busy on the container that owns the loading " +
-    "data so the state is announced once instead of once per placeholder.",
+    "data so the state is announced once instead of once per placeholder. Pulse and shimmer " +
+    "are decoration and stop under reduced motion.",
 });

package/src/components/skeleton/skeleton.tsx

@@ -1,7 +1,35 @@
+// Motion from SmoothUI SkeletonLoader (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
 import type { ComponentPropsWithRef } from "react";
 
 import { cn } from "@/lib/utils";
 
+const PREFIX = "dowel-skeleton";
+
+/* The highlight travels from the inline start to the inline end. The gradient
+ * is twice the element's width, so moving its position from 150% to -50%
+ * carries the bright band from just outside one edge to just outside the other. */
+const STYLES = `
+@keyframes ${PREFIX}-shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
+[data-slot=skeleton][data-variant=shimmer]:dir(rtl){animation-direction:reverse}
+`;
+
+/* A plain map rather than cva: one axis of two values does not justify adding a
+ * dependency to a component that had none. */
+const variants = {
+  pulse: "animate-pulse-soft",
+  // Spelled out because Tailwind reads class names from the source.
+  shimmer: cn(
+    "bg-[linear-gradient(90deg,transparent_30%,color-mix(in_oklab,var(--color-background)_55%,transparent)_50%,transparent_70%)]",
+    "bg-[length:200%_100%] bg-no-repeat",
+    "animate-[dowel-skeleton-shimmer_calc(1.6s*var(--motion-scale))_linear_infinite]",
+  ),
+} as const;
+
+export interface SkeletonProps extends ComponentPropsWithRef<"span"> {
+  /** `pulse` fades in and out; `shimmer` sweeps a band of light across. */
+  variant?: keyof typeof variants;
+}
+
 /**
  * Placeholder shown while content loads.
  *
@@ -15,14 +43,28 @@ import { cn } from "@/lib/utils";
  * invalid HTML that the parser corrects, which breaks hydration rather than
  * merely looking wrong. Phrasing content is valid in both places, and `block`
  * keeps the box behaviour identical.
+ *
+ * `variant="shimmer"` swaps the pulse for a band of light sweeping across. Both
+ * are decoration: under reduced motion they stop and the placeholder is a plain
+ * block.
  */
-export function Skeleton({ className, ...props }: ComponentPropsWithRef<"span">) {
+export function Skeleton({ className, variant = "pulse", ...props }: SkeletonProps) {
+  const shimmer = variant === "shimmer";
+
   return (
-    <span
-      data-slot="skeleton"
-      aria-hidden="true"
-      className={cn("block animate-pulse-soft rounded-md bg-muted", className)}
-      {...props}
-    />
+    <>
+      {shimmer ? (
+        <style href={PREFIX} precedence="dowel">
+          {STYLES}
+        </style>
+      ) : null}
+      <span
+        data-slot="skeleton"
+        data-variant={shimmer ? "shimmer" : undefined}
+        aria-hidden="true"
+        className={cn("block rounded-md bg-muted", variants[variant], className)}
+        {...props}
+      />
+    </>
   );
 }

package/src/components/slide-to-confirm/index.ts

@@ -0,0 +1,6 @@
+export {
+  SlideToConfirm,
+  slideSpring,
+  slideToConfirmVariants,
+  type SlideToConfirmProps,
+} from "./slide-to-confirm";

package/src/components/slide-to-confirm/meta.ts

@@ -0,0 +1,20 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "slide-to-confirm",
+  title: "Slide to Confirm",
+  description:
+    "A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.",
+  category: "form",
+  status: "beta",
+  dependencies: ["class-variance-authority", "motion", "radix-ui"],
+  registryDependencies: [],
+  files: ["slide-to-confirm.tsx"],
+  a11y:
+    "The grip is a real button named by the label and described by a hint. Pressing and holding Enter or " +
+    "Space (or holding the pointer still on it) carries the grip across over holdDuration and confirms; " +
+    'letting go early sends it back, so dragging is never the only way through. The result ("Confirmed" / ' +
+    '"Shutting down…") is announced through a polite status region. The grip travels toward the inline end ' +
+    "and its arrow mirrors in right-to-left layouts. Under reduced motion the springs are instant, the " +
+    "shimmer stops and the hold still works.",
+});