@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/scramble-text/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/scramble-text/meta.ts
+const meta = defineMeta({
+	name: "scramble-text",
+	title: "Scramble Text",
+	description: "Text whose characters churn through random glyphs and resolve from the inline start, on hover, focus, mount or view.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["scramble-text.tsx"],
+	a11y: "The scrambling glyphs are aria-hidden; an sr-only copy of the real text is what assistive technology reads, so nothing is announced per frame. The server renders the real text. It is not itself interactive: hover and keyboard focus on the nearest link or button that wraps it trigger the effect. No scramble under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/scramble-text/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/scramble-text/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"scramble-text\",\n  title: \"Scramble Text\",\n  description:\n    \"Text whose characters churn through random glyphs and resolve from the inline start, on hover, focus, mount or view.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"scramble-text.tsx\"],\n  a11y:\n    \"The scrambling glyphs are aria-hidden; an sr-only copy of the real text is what assistive technology reads, \" +\n    \"so nothing is announced per frame. The server renders the real text. It is not itself interactive: hover and \" +\n    \"keyboard focus on the nearest link or button that wraps it trigger the effect. No scramble under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAGJ,CAAC"}

package/dist/components/scramble-text/scramble-text.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/components/scramble-text/scramble-text.d.ts
+/** Elements text effects render as. They are all phrasing or heading content. */
+type ScrambleTextElement = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type ScrambleTextTrigger = "hover" | "mount" | "in-view";
+declare const scrambleTextVariants: (props?: ({
+  font?: "inherit" | "mono" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ScrambleTextProps extends Omit<ComponentPropsWithRef<"span">, "ref" | "children">, VariantProps<typeof scrambleTextVariants> {
+  ref?: Ref<HTMLElement>;
+  /** The real text. */
+  children: string;
+  /** The element to render. */
+  as?: ScrambleTextElement;
+  /** Total scramble time, in milliseconds. */
+  duration?: number;
+  /** Time between scramble frames, in milliseconds. */
+  speed?: number;
+  /** The glyphs to scramble through. */
+  characters?: string;
+  /**
+   * What starts the scramble. `hover` (default) runs on pointer hover and
+   * keyboard focus; `mount` and `in-view` also play once on their own, and
+   * hover replays it.
+   */
+  trigger?: ScrambleTextTrigger;
+}
+/** A frame of the scramble: the first `settled` characters are real. */
+declare function scrambleFrame(text: string, settled: number, characters?: string): string;
+/** Text that scrambles through random glyphs and resolves, on hover, focus, mount or view. */
+declare function ScrambleText({ as: Component, children, duration, speed, characters, trigger, font, className, ref, ...props }: ScrambleTextProps): import("react").JSX.Element;
+//#endregion
+export { ScrambleText, ScrambleTextElement, ScrambleTextProps, ScrambleTextTrigger, scrambleFrame, scrambleTextVariants };
+//# sourceMappingURL=scramble-text.d.ts.map

package/dist/components/scramble-text/scramble-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scramble-text.d.ts","names":[],"sources":["../../../src/components/scramble-text/scramble-text.tsx"],"mappings":";;;;KAqCY;KAGA;cAEN,uBAAoB;;6CAWxB;UAEe,0BAEb,KAAK,oDACL,oBAAoB;EACtB,MAAM,IAAI;;EAEV;;EAEA,KAAK;;EAEL;;EAEA;;EAEA;;;;;;EAMA,UAAU;;;iBAWI,cAAc,cAAc,iBAAiB;;iBAe7C,eACd,IAAI,WACJ,UACA,UACA,OACA,YACA,SACA,MACA,WACA,QACG,SACF,oCAAiB,IAAA"}

package/dist/components/scramble-text/scramble-text.js

@@ -0,0 +1,151 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/scramble-text/scramble-text.tsx
+const CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=<>?";
+const scrambleTextVariants = cva("", {
+	variants: { 
+	/** `mono` holds every glyph to one width, so the line does not jitter while it churns. */
+font: {
+		inherit: "",
+		mono: "font-mono"
+	} },
+	defaultVariants: { font: "inherit" }
+});
+function reducedMotion() {
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** A frame of the scramble: the first `settled` characters are real. */
+function scrambleFrame(text, settled, characters = CHARACTERS) {
+	let frame = "";
+	for (let index = 0; index < text.length; index++) {
+		const char = text.charAt(index);
+		frame += index < settled || /\s/.test(char) ? char : characters.charAt(Math.floor(Math.random() * characters.length));
+	}
+	return frame;
+}
+const INTERACTIVE = "a[href],button,summary,label,[tabindex]";
+/** Text that scrambles through random glyphs and resolves, on hover, focus, mount or view. */
+function ScrambleText({ as: Component = "span", children, duration = 600, speed = 30, characters = CHARACTERS, trigger = "hover", font, className, ref, ...props }) {
+	const [display, setDisplay] = useState(children);
+	const [running, setRunning] = useState(false);
+	const node = useRef(null);
+	const interval = useRef(null);
+	const timeout = useRef(null);
+	const clear = useCallback(() => {
+		if (interval.current) clearInterval(interval.current);
+		if (timeout.current) clearTimeout(timeout.current);
+		interval.current = null;
+		timeout.current = null;
+	}, []);
+	const settle = useCallback(() => {
+		clear();
+		setDisplay(children);
+		setRunning(false);
+	}, [children, clear]);
+	const play = useCallback(() => {
+		clear();
+		if (reducedMotion() || duration <= 0) {
+			setDisplay(children);
+			return;
+		}
+		const started = Date.now();
+		setRunning(true);
+		setDisplay(scrambleFrame(children, 0, characters));
+		interval.current = setInterval(() => {
+			const progress = Math.min((Date.now() - started) / duration, 1);
+			setDisplay(scrambleFrame(children, Math.floor(progress * children.length), characters));
+		}, Math.max(speed, 1));
+		timeout.current = setTimeout(settle, duration);
+	}, [
+		characters,
+		children,
+		clear,
+		duration,
+		settle,
+		speed
+	]);
+	const [scrambling, setScrambling] = useState(children);
+	if (scrambling !== children) {
+		setScrambling(children);
+		setRunning(false);
+	}
+	useEffect(() => clear, [children, clear]);
+	useEffect(() => {
+		const element = node.current;
+		if (!element) return;
+		const target = element.closest(INTERACTIVE) ?? element;
+		const hoverCapable = typeof window.matchMedia !== "function" || window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+		const onEnter = (event) => {
+			if (event.pointerType !== "touch" && hoverCapable) play();
+		};
+		let pressed = false;
+		const onPress = () => {
+			pressed = true;
+		};
+		const onFocus = () => {
+			if (!pressed) play();
+			pressed = false;
+		};
+		target.addEventListener("pointerdown", onPress);
+		target.addEventListener("pointerenter", onEnter);
+		target.addEventListener("pointerleave", settle);
+		target.addEventListener("focusin", onFocus);
+		target.addEventListener("focusout", settle);
+		return () => {
+			target.removeEventListener("pointerdown", onPress);
+			target.removeEventListener("pointerenter", onEnter);
+			target.removeEventListener("pointerleave", settle);
+			target.removeEventListener("focusin", onFocus);
+			target.removeEventListener("focusout", settle);
+		};
+	}, [play, settle]);
+	const latestPlay = useRef(play);
+	useEffect(() => {
+		latestPlay.current = play;
+	}, [play]);
+	useEffect(() => {
+		const element = node.current;
+		if (trigger === "hover" || !element) return;
+		if (trigger === "mount" || typeof IntersectionObserver !== "function") {
+			latestPlay.current();
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				observer.disconnect();
+				latestPlay.current();
+			}
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [trigger]);
+	const setRef = useCallback((element) => {
+		node.current = element;
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
+	return /* @__PURE__ */ jsxs(Component, {
+		ref: setRef,
+		"data-slot": "scramble-text",
+		"data-state": running ? "scrambling" : "idle",
+		className: cn(scrambleTextVariants({ font }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "scramble-text-glyphs",
+			"aria-hidden": "true",
+			children: running ? display : children
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children
+		})]
+	});
+}
+//#endregion
+export { ScrambleText, scrambleFrame, scrambleTextVariants };
+
+//# sourceMappingURL=scramble-text.js.map

package/dist/components/scramble-text/scramble-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scramble-text.js","names":[],"sources":["../../../src/components/scramble-text/scramble-text.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Scramble Hover (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Characters churn through random glyphs, then settle on the real text.\n *\n * - The server, and the first client render, always show the real text:\n *   randomness only ever runs inside event handlers and effects, after\n *   hydration, so the markup is stable.\n * - The visible glyphs are aria-hidden and the real string sits beside them in\n *   an sr-only copy that never changes, so a screen reader reads the text once\n *   and nothing is announced per tick.\n * - The source re-randomised every character on every tick and snapped to the\n *   text at the end. Here characters resolve from the inline start as the\n *   scramble runs, so the text is readable sooner and the end is not a jump.\n * - Hover is the source's trigger. It also fires on keyboard focus of the\n *   nearest interactive ancestor (a link or button wrapping the text), and not\n *   on touch, where there is no hover to leave.\n * - Under reduced motion there is no scramble at all.\n */\n\nconst CHARACTERS =\n  \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=<>?\";\n\n/** Elements text effects render as. They are all phrasing or heading content. */\nexport type ScrambleTextElement =\n  \"span\" | \"p\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nexport type ScrambleTextTrigger = \"hover\" | \"mount\" | \"in-view\";\n\nconst scrambleTextVariants = cva(\"\", {\n  variants: {\n    /** `mono` holds every glyph to one width, so the line does not jitter while it churns. */\n    font: {\n      inherit: \"\",\n      mono: \"font-mono\",\n    },\n  },\n  defaultVariants: {\n    font: \"inherit\",\n  },\n});\n\nexport interface ScrambleTextProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"ref\" | \"children\">,\n    VariantProps<typeof scrambleTextVariants> {\n  ref?: Ref<HTMLElement>;\n  /** The real text. */\n  children: string;\n  /** The element to render. */\n  as?: ScrambleTextElement;\n  /** Total scramble time, in milliseconds. */\n  duration?: number;\n  /** Time between scramble frames, in milliseconds. */\n  speed?: number;\n  /** The glyphs to scramble through. */\n  characters?: string;\n  /**\n   * What starts the scramble. `hover` (default) runs on pointer hover and\n   * keyboard focus; `mount` and `in-view` also play once on their own, and\n   * hover replays it.\n   */\n  trigger?: ScrambleTextTrigger;\n}\n\nfunction reducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n/** A frame of the scramble: the first `settled` characters are real. */\nexport function scrambleFrame(text: string, settled: number, characters = CHARACTERS): string {\n  let frame = \"\";\n  for (let index = 0; index < text.length; index++) {\n    const char = text.charAt(index);\n    frame +=\n      index < settled || /\\s/.test(char)\n        ? char\n        : characters.charAt(Math.floor(Math.random() * characters.length));\n  }\n  return frame;\n}\n\nconst INTERACTIVE = \"a[href],button,summary,label,[tabindex]\";\n\n/** Text that scrambles through random glyphs and resolves, on hover, focus, mount or view. */\nexport function ScrambleText({\n  as: Component = \"span\",\n  children,\n  duration = 600,\n  speed = 30,\n  characters = CHARACTERS,\n  trigger = \"hover\",\n  font,\n  className,\n  ref,\n  ...props\n}: ScrambleTextProps) {\n  const [display, setDisplay] = useState(children);\n  const [running, setRunning] = useState(false);\n  const node = useRef<HTMLElement | null>(null);\n  const interval = useRef<ReturnType<typeof setInterval> | null>(null);\n  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clear = useCallback(() => {\n    if (interval.current) clearInterval(interval.current);\n    if (timeout.current) clearTimeout(timeout.current);\n    interval.current = null;\n    timeout.current = null;\n  }, []);\n\n  const settle = useCallback(() => {\n    clear();\n    setDisplay(children);\n    setRunning(false);\n  }, [children, clear]);\n\n  const play = useCallback(() => {\n    clear();\n    if (reducedMotion() || duration <= 0) {\n      setDisplay(children);\n      return;\n    }\n    const started = Date.now();\n    setRunning(true);\n    setDisplay(scrambleFrame(children, 0, characters));\n    interval.current = setInterval(\n      () => {\n        const progress = Math.min((Date.now() - started) / duration, 1);\n        setDisplay(scrambleFrame(children, Math.floor(progress * children.length), characters));\n      },\n      Math.max(speed, 1),\n    );\n    timeout.current = setTimeout(settle, duration);\n  }, [characters, children, clear, duration, settle, speed]);\n\n  // A new string replaces whatever frame was showing: stop during render, and\n  // clear the old string's timers when it goes (and on unmount).\n  const [scrambling, setScrambling] = useState(children);\n  if (scrambling !== children) {\n    setScrambling(children);\n    setRunning(false);\n  }\n  useEffect(() => clear, [children, clear]);\n\n  // Hover and keyboard focus, on the text or on the control that wraps it.\n  useEffect(() => {\n    const element = node.current;\n    if (!element) return;\n    const target = element.closest<HTMLElement>(INTERACTIVE) ?? element;\n    const hoverCapable =\n      typeof window.matchMedia !== \"function\" ||\n      window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches;\n\n    const onEnter = (event: PointerEvent) => {\n      if (event.pointerType !== \"touch\" && hoverCapable) play();\n    };\n    // Keyboard focus only: a tap or click focuses too, and a scramble on tap is\n    // a glitch. Focus that follows a press came from the pointer.\n    let pressed = false;\n    const onPress = () => {\n      pressed = true;\n    };\n    const onFocus = () => {\n      if (!pressed) play();\n      pressed = false;\n    };\n\n    target.addEventListener(\"pointerdown\", onPress);\n    target.addEventListener(\"pointerenter\", onEnter);\n    target.addEventListener(\"pointerleave\", settle);\n    target.addEventListener(\"focusin\", onFocus);\n    target.addEventListener(\"focusout\", settle);\n    return () => {\n      target.removeEventListener(\"pointerdown\", onPress);\n      target.removeEventListener(\"pointerenter\", onEnter);\n      target.removeEventListener(\"pointerleave\", settle);\n      target.removeEventListener(\"focusin\", onFocus);\n      target.removeEventListener(\"focusout\", settle);\n    };\n  }, [play, settle]);\n\n  // The latest `play`, for the one-shot triggers below, which should not\n  // replay just because the string or timing props changed.\n  const latestPlay = useRef(play);\n  useEffect(() => {\n    latestPlay.current = play;\n  }, [play]);\n\n  // Mount and in-view play once by themselves.\n  useEffect(() => {\n    const element = node.current;\n    if (trigger === \"hover\" || !element) return;\n    if (trigger === \"mount\" || typeof IntersectionObserver !== \"function\") {\n      latestPlay.current();\n      return;\n    }\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        observer.disconnect();\n        latestPlay.current();\n      }\n    });\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n    };\n  }, [trigger]);\n\n  const setRef = useCallback(\n    (element: HTMLElement | null) => {\n      node.current = element;\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    },\n    [ref],\n  );\n\n  return (\n    <Component\n      ref={setRef}\n      data-slot=\"scramble-text\"\n      data-state={running ? \"scrambling\" : \"idle\"}\n      className={cn(scrambleTextVariants({ font }), className)}\n      {...props}\n    >\n      <span data-slot=\"scramble-text-glyphs\" aria-hidden=\"true\">\n        {running ? display : children}\n      </span>\n      <span className=\"sr-only\">{children}</span>\n    </Component>\n  );\n}\n\nexport { scrambleTextVariants };\n"],"mappings":"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"}

package/dist/components/scroll-reveal-text/index.d.ts

@@ -0,0 +1,2 @@
+import { ScrollRevealText, ScrollRevealTextElement, ScrollRevealTextProps, scrollRevealTextVariants } from "./scroll-reveal-text.js";
+export { ScrollRevealText, type ScrollRevealTextElement, type ScrollRevealTextProps, scrollRevealTextVariants };

package/dist/components/scroll-reveal-text/index.js

@@ -0,0 +1,2 @@
+import { ScrollRevealText, scrollRevealTextVariants } from "./scroll-reveal-text.js";
+export { ScrollRevealText, scrollRevealTextVariants };

package/dist/components/scroll-reveal-text/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/scroll-reveal-text/meta.ts
+const meta = defineMeta({
+	name: "scroll-reveal-text",
+	title: "Scroll Reveal Text",
+	description: "A paragraph whose words brighten from dim to full as it scrolls through the viewport.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["scroll-reveal-text.tsx"],
+	a11y: "The words are aria-hidden and the paragraph is read once from an sr-only copy. Driven by CSS scroll-driven animation where supported, with a frame-throttled scroll fallback; without either, and under reduced motion, every word is fully legible. Dimmed words are below contrast by design until revealed, so keep essential content out of it."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/scroll-reveal-text/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/scroll-reveal-text/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"scroll-reveal-text\",\n  title: \"Scroll Reveal Text\",\n  description:\n    \"A paragraph whose words brighten from dim to full as it scrolls through the viewport.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"scroll-reveal-text.tsx\"],\n  a11y:\n    \"The words are aria-hidden and the paragraph is read once from an sr-only copy. Driven by CSS scroll-driven \" +\n    \"animation where supported, with a frame-throttled scroll fallback; without either, and under reduced motion, \" +\n    \"every word is fully legible. Dimmed words are below contrast by design until revealed, so keep essential \" +\n    \"content out of it.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,wBAAwB;CAChC,MACE;AAIJ,CAAC"}

package/dist/components/scroll-reveal-text/scroll-reveal-text.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/components/scroll-reveal-text/scroll-reveal-text.d.ts
+/** Elements text effects render as. They are all phrasing or heading content. */
+type ScrollRevealTextElement = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+declare const scrollRevealTextVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ScrollRevealTextProps extends Omit<ComponentPropsWithRef<"p">, "ref" | "children">, VariantProps<typeof scrollRevealTextVariants> {
+  ref?: Ref<HTMLElement>;
+  /** The paragraph. Split into words on whitespace. */
+  children: string;
+  /** The element to render. */
+  as?: ScrollRevealTextElement;
+  /** Opacity of a word before it is revealed, from 0 to 1. */
+  dimOpacity?: number;
+}
+/** A paragraph whose words brighten from dim to full as it scrolls through the viewport. */
+declare function ScrollRevealText({ as: Component, children, dimOpacity, size, className, style, ref, ...props }: ScrollRevealTextProps): import("react").JSX.Element;
+//#endregion
+export { ScrollRevealText, ScrollRevealTextElement, ScrollRevealTextProps, scrollRevealTextVariants };
+//# sourceMappingURL=scroll-reveal-text.d.ts.map

package/dist/components/scroll-reveal-text/scroll-reveal-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-reveal-text.d.ts","names":[],"sources":["../../../src/components/scroll-reveal-text/scroll-reveal-text.tsx"],"mappings":";;;;KA8DY;cAGN,2BAAwB;;6CAY5B;UAEe,8BAEb,KAAK,iDACL,oBAAoB;EACtB,MAAM,IAAI;;EAEV;;EAEA,KAAK;;EAEL;;;iBA+Cc,mBACd,IAAI,WACJ,UACA,YACA,MACA,WACA,OACA,QACG,SACF,wCAAqB,IAAA"}

package/dist/components/scroll-reveal-text/scroll-reveal-text.js

@@ -0,0 +1,113 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Fragment as Fragment$1, useCallback, useEffect, useRef } from "react";
+//#region src/components/scroll-reveal-text/scroll-reveal-text.tsx
+const PREFIX = "dowel-scroll-reveal-text";
+const I = `--${PREFIX}-i`;
+const N = `--${PREFIX}-n`;
+const DIM = `--${PREFIX}-dim`;
+const PROGRESS = `--${PREFIX}-progress`;
+const START_VH = 10;
+const SPAN_VH = 65;
+const STYLES = `
+@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
+[data-slot=scroll-reveal-text]{view-timeline-name:--${PREFIX}}
+[data-slot=scroll-reveal-text-word]{animation:${PREFIX}-word linear both;animation-timeline:--${PREFIX};animation-range-start:cover calc(${String(START_VH)}vh + ${String(SPAN_VH)}vh * var(${I}) / var(${N}));animation-range-end:cover calc(${String(START_VH)}vh + ${String(SPAN_VH)}vh * (var(${I}) + 1) / var(${N}))}
+}}
+[data-slot=scroll-reveal-text][data-fallback] [data-slot=scroll-reveal-text-word]{opacity:clamp(var(${DIM}),calc(var(${DIM}) + (1 - var(${DIM})) * (var(${PROGRESS},1) * var(${N}) - var(${I}))),1)}
+@keyframes ${PREFIX}-word{from{opacity:var(${DIM})}to{opacity:1}}
+`;
+const scrollRevealTextVariants = cva("", {
+	variants: { size: {
+		sm: "text-base leading-relaxed",
+		md: "text-lg leading-relaxed",
+		lg: "text-2xl leading-snug",
+		xl: "text-4xl leading-tight font-semibold tracking-tight"
+	} },
+	defaultVariants: { size: "md" }
+});
+function scrollTimelineSupported() {
+	return typeof CSS !== "undefined" && typeof CSS.supports === "function" ? CSS.supports("animation-timeline: view()") : false;
+}
+function reducedMotion() {
+	return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* The fallback: progress through the source's range, written to a CSS
+* variable at most once per frame. Returns a cleanup.
+*/
+function trackScroll(element) {
+	let frame = 0;
+	const update = () => {
+		frame = 0;
+		const height = window.innerHeight || 1;
+		const top = element.getBoundingClientRect().top;
+		const progress = ((1 - START_VH / 100) * height - top) / (SPAN_VH / 100 * height);
+		element.style.setProperty(PROGRESS, String(Math.min(Math.max(progress, 0), 1)));
+	};
+	const schedule = () => {
+		if (frame === 0) frame = requestAnimationFrame(update);
+	};
+	element.setAttribute("data-fallback", "");
+	update();
+	window.addEventListener("scroll", schedule, {
+		passive: true,
+		capture: true
+	});
+	window.addEventListener("resize", schedule, { passive: true });
+	return () => {
+		if (frame !== 0) cancelAnimationFrame(frame);
+		window.removeEventListener("scroll", schedule, { capture: true });
+		window.removeEventListener("resize", schedule);
+		element.removeAttribute("data-fallback");
+		element.style.removeProperty(PROGRESS);
+	};
+}
+/** A paragraph whose words brighten from dim to full as it scrolls through the viewport. */
+function ScrollRevealText({ as: Component = "p", children, dimOpacity = .1, size, className, style, ref, ...props }) {
+	const node = useRef(null);
+	const words = children.split(/\s+/).filter(Boolean);
+	useEffect(() => {
+		const element = node.current;
+		if (!element || scrollTimelineSupported() || reducedMotion()) return;
+		return trackScroll(element);
+	}, []);
+	const setRef = useCallback((element) => {
+		node.current = element;
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [ref]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs(Component, {
+		ref: setRef,
+		"data-slot": "scroll-reveal-text",
+		className: cn(scrollRevealTextVariants({ size }), className),
+		style: {
+			[N]: words.length,
+			[DIM]: dimOpacity,
+			...style
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "scroll-reveal-text-words",
+			"aria-hidden": "true",
+			children: words.map((word, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 ? " " : null, /* @__PURE__ */ jsx("span", {
+				"data-slot": "scroll-reveal-text-word",
+				style: { [I]: index },
+				children: word
+			})] }, index))
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children
+		})]
+	})] });
+}
+//#endregion
+export { ScrollRevealText, scrollRevealTextVariants };
+
+//# sourceMappingURL=scroll-reveal-text.js.map

package/dist/components/scroll-reveal-text/scroll-reveal-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-reveal-text.js","names":["Fragment"],"sources":["../../../src/components/scroll-reveal-text/scroll-reveal-text.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Scroll Reveal Paragraph (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  Fragment,\n  useCallback,\n  useEffect,\n  useRef,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Words brighten from dim to full, one after another, as the paragraph scrolls\n * up the viewport.\n *\n * The source tracked scroll with a Motion `useScroll` value between\n * `start 0.9` and `start 0.25` — the paragraph's top edge crossing 90%, then\n * 25%, of the viewport height — and gave each of n words an equal slice of\n * that progress. Here the same range drives a CSS scroll-driven animation:\n *\n * - The paragraph names a view timeline. Its `cover` range starts when the top\n *   edge meets the bottom of the viewport, so `cover 10vh` is the top at 90%\n *   and `cover 75vh` the top at 25%. Word i animates over its 1/n slice of\n *   those 65vh. No JavaScript runs per frame; no React state changes on scroll.\n * - Where scroll-driven animation is unsupported, a scroll listener throttled\n *   to one read per animation frame writes the same progress to a CSS variable\n *   on the paragraph, and each word derives its opacity from it in CSS.\n * - The source's two stacked layers (a 10% ghost under a fading full-colour\n *   copy) composite to exactly `0.1 + 0.9 × progress` opacity, so each word is\n *   one span fading from `dimOpacity` to 1. It keeps the consumer's colour.\n *\n * Every word is legible unless something is actively animating it: without\n * JavaScript and without scroll-timeline support, and under reduced motion,\n * the text is simply the text. The words are aria-hidden and the paragraph is\n * read once from an sr-only copy.\n */\n\nconst PREFIX = \"dowel-scroll-reveal-text\";\nconst I = `--${PREFIX}-i`;\nconst N = `--${PREFIX}-n`;\nconst DIM = `--${PREFIX}-dim`;\nconst PROGRESS = `--${PREFIX}-progress`;\n\n// The source's offsets: the top edge from 90% to 25% of the viewport.\nconst START_VH = 10;\nconst SPAN_VH = 65;\n\nconst STYLES = `\n@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){\n[data-slot=scroll-reveal-text]{view-timeline-name:--${PREFIX}}\n[data-slot=scroll-reveal-text-word]{animation:${PREFIX}-word linear both;animation-timeline:--${PREFIX};animation-range-start:cover calc(${String(START_VH)}vh + ${String(SPAN_VH)}vh * var(${I}) / var(${N}));animation-range-end:cover calc(${String(START_VH)}vh + ${String(SPAN_VH)}vh * (var(${I}) + 1) / var(${N}))}\n}}\n[data-slot=scroll-reveal-text][data-fallback] [data-slot=scroll-reveal-text-word]{opacity:clamp(var(${DIM}),calc(var(${DIM}) + (1 - var(${DIM})) * (var(${PROGRESS},1) * var(${N}) - var(${I}))),1)}\n@keyframes ${PREFIX}-word{from{opacity:var(${DIM})}to{opacity:1}}\n`;\n\n/** Elements text effects render as. They are all phrasing or heading content. */\nexport type ScrollRevealTextElement =\n  \"span\" | \"p\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst scrollRevealTextVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-base leading-relaxed\",\n      md: \"text-lg leading-relaxed\",\n      lg: \"text-2xl leading-snug\",\n      xl: \"text-4xl leading-tight font-semibold tracking-tight\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface ScrollRevealTextProps\n  extends\n    Omit<ComponentPropsWithRef<\"p\">, \"ref\" | \"children\">,\n    VariantProps<typeof scrollRevealTextVariants> {\n  ref?: Ref<HTMLElement>;\n  /** The paragraph. Split into words on whitespace. */\n  children: string;\n  /** The element to render. */\n  as?: ScrollRevealTextElement;\n  /** Opacity of a word before it is revealed, from 0 to 1. */\n  dimOpacity?: number;\n}\n\nfunction scrollTimelineSupported(): boolean {\n  return typeof CSS !== \"undefined\" && typeof CSS.supports === \"function\"\n    ? CSS.supports(\"animation-timeline: view()\")\n    : false;\n}\n\nfunction reducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  );\n}\n\n/**\n * The fallback: progress through the source's range, written to a CSS\n * variable at most once per frame. Returns a cleanup.\n */\nfunction trackScroll(element: HTMLElement): () => void {\n  let frame = 0;\n  const update = () => {\n    frame = 0;\n    const height = window.innerHeight || 1;\n    const top = element.getBoundingClientRect().top;\n    const progress = ((1 - START_VH / 100) * height - top) / ((SPAN_VH / 100) * height);\n    element.style.setProperty(PROGRESS, String(Math.min(Math.max(progress, 0), 1)));\n  };\n  const schedule = () => {\n    if (frame === 0) frame = requestAnimationFrame(update);\n  };\n\n  element.setAttribute(\"data-fallback\", \"\");\n  update();\n  window.addEventListener(\"scroll\", schedule, { passive: true, capture: true });\n  window.addEventListener(\"resize\", schedule, { passive: true });\n  return () => {\n    if (frame !== 0) cancelAnimationFrame(frame);\n    window.removeEventListener(\"scroll\", schedule, { capture: true });\n    window.removeEventListener(\"resize\", schedule);\n    element.removeAttribute(\"data-fallback\");\n    element.style.removeProperty(PROGRESS);\n  };\n}\n\n/** A paragraph whose words brighten from dim to full as it scrolls through the viewport. */\nexport function ScrollRevealText({\n  as: Component = \"p\",\n  children,\n  dimOpacity = 0.1,\n  size,\n  className,\n  style,\n  ref,\n  ...props\n}: ScrollRevealTextProps) {\n  const node = useRef<HTMLElement | null>(null);\n  const words = children.split(/\\s+/).filter(Boolean);\n\n  useEffect(() => {\n    const element = node.current;\n    if (!element || scrollTimelineSupported() || reducedMotion()) return;\n    return trackScroll(element);\n  }, []);\n\n  const setRef = useCallback(\n    (element: HTMLElement | null) => {\n      node.current = element;\n      if (typeof ref === \"function\") ref(element);\n      else if (ref) ref.current = element;\n    },\n    [ref],\n  );\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <Component\n        ref={setRef}\n        data-slot=\"scroll-reveal-text\"\n        className={cn(scrollRevealTextVariants({ size }), className)}\n        style={{ [N]: words.length, [DIM]: dimOpacity, ...style } as CSSProperties}\n        {...props}\n      >\n        <span data-slot=\"scroll-reveal-text-words\" aria-hidden=\"true\">\n          {words.map((word, index) => (\n            <Fragment key={index}>\n              {index > 0 ? \" \" : null}\n              <span data-slot=\"scroll-reveal-text-word\" style={{ [I]: index } as CSSProperties}>\n                {word}\n              </span>\n            </Fragment>\n          ))}\n        </span>\n        <span className=\"sr-only\">{children}</span>\n      </Component>\n    </>\n  );\n}\n\nexport { scrollRevealTextVariants };\n"],"mappings":"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"}

package/dist/components/scrubber/index.d.ts

@@ -0,0 +1,2 @@
+import { Scrubber, ScrubberProps, scrubberVariants } from "./scrubber.js";
+export { Scrubber, type ScrubberProps, scrubberVariants };

package/dist/components/scrubber/index.js

@@ -0,0 +1,2 @@
+import { Scrubber, scrubberVariants } from "./scrubber.js";
+export { Scrubber, scrubberVariants };

package/dist/components/scrubber/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/scrubber/meta.ts
+const meta = defineMeta({
+	name: "scrubber",
+	title: "Scrubber",
+	description: "A design-tool number field: drag across a labelled bar to scrub a value, step it from the keyboard, or type it.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["scrubber.tsx"],
+	a11y: "The bar is a focusable role=\"slider\" named by its visible label, with aria-valuenow, -valuemin, -valuemax and an aria-valuetext matching the number on screen. Arrow keys step (Left/Right follow the reading direction), Shift + arrow and Page Up/Down take large steps, Home/End jump to the ends. Enter or a double-click opens a text field for an exact value (advertised with aria-keyshortcuts); Enter or blur commits, Escape cancels, and focus returns to the slider. Ticks, fill and thumb are aria-hidden. The thumb's transitions stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/scrubber/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/scrubber/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"scrubber\",\n  title: \"Scrubber\",\n  description:\n    \"A design-tool number field: drag across a labelled bar to scrub a value, step it from the keyboard, or type it.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"scrubber.tsx\"],\n  a11y:\n    'The bar is a focusable role=\"slider\" named by its visible label, with aria-valuenow, -valuemin, -valuemax ' +\n    \"and an aria-valuetext matching the number on screen. Arrow keys step (Left/Right follow the reading \" +\n    \"direction), Shift + arrow and Page Up/Down take large steps, Home/End jump to the ends. Enter or a \" +\n    \"double-click opens a text field for an exact value (advertised with aria-keyshortcuts); Enter or blur commits, \" +\n    \"Escape cancels, and focus returns to the slider. Ticks, fill and thumb are aria-hidden. The thumb's \" +\n    \"transitions stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAMJ,CAAC"}

package/dist/components/scrubber/scrubber.d.ts

@@ -0,0 +1,37 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/scrubber/scrubber.d.ts
+declare const scrubberVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ScrubberProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof scrubberVariants> {
+  /** Visible label at the start of the bar. It also names the slider. */
+  label?: ReactNode;
+  value?: number;
+  defaultValue?: number;
+  /** Called on every change: while dragging, per key press, and on a typed entry. */
+  onValueChange?: (value: number) => void;
+  /** Called when an interaction ends: pointer released, key press or typed entry. */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Steps moved by Shift + arrow and Page Up / Page Down. */
+  largeStep?: number;
+  /** Decimal places shown. Defaults to the precision of `step`. */
+  decimals?: number;
+  /** Number of evenly spaced tick marks; 0 hides them. */
+  ticks?: number;
+  /** Formats the displayed value and `aria-valuetext`. Defaults to `decimals` places. */
+  formatValue?: (value: number) => string;
+  /** Allow typing an exact value (Enter or double-click). */
+  editable?: boolean;
+  disabled?: boolean;
+  /** Submits the value with a form under this name. */
+  name?: string;
+}
+/** A drag-to-scrub numeric control with keyboard stepping and typed entry. */
+declare function Scrubber({ className, size, label, value: valueProp, defaultValue, onValueChange, onValueCommit, min, max, step, largeStep, decimals: decimalsProp, ticks, formatValue, editable, disabled, name, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-valuetext": ariaValueText, ...props }: ScrubberProps): import("react").JSX.Element;
+//#endregion
+export { Scrubber, ScrubberProps, scrubberVariants };
+//# sourceMappingURL=scrubber.d.ts.map

package/dist/components/scrubber/scrubber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrubber.d.ts","names":[],"sources":["../../../src/components/scrubber/scrubber.tsx"],"mappings":";;;cAgCM,mBAAgB;;6CAWpB;UAEe,sBAEb,KAAK,yEACL,oBAAoB;;EAEtB,QAAQ;EACR;EACA;;EAEA,iBAAiB;;EAEjB,iBAAiB;EACjB;EACA;EACA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf;EACA;;EAEA;;;iBAac,WACd,WACA,MACA,OACA,OAAO,WACP,cACA,eACA,eACA,KACA,KACA,MACA,WACA,UAAU,cACV,OACA,aACA,UACA,UACA,MACA,KAAK,uBACS,8BACK,oCACC,mCACF,kBACf,SACF,gCAAa,IAAA"}