@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/tick-progress/tick-progress.d.ts

@@ -0,0 +1,28 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/tick-progress/tick-progress.d.ts
+declare const tickProgressVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TickProgressProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">, VariantProps<typeof tickProgressVariants> {
+  /** Controlled value, 0–100. */
+  value?: number;
+  /** Initial value when uncontrolled. */
+  defaultValue?: number;
+  /** Called when a value is committed (click or key). */
+  onValueChange?: (value: number) => void;
+  /** Number of ticks. The value snaps to them. */
+  ticks?: number;
+  /** Tick heights in percent, one per tick. Defaults to a gentle waveform. */
+  heights?: number[];
+  /** A slider you can hover, click and key through, rather than a progress bar. */
+  interactive?: boolean;
+  /** Hide the big figure. */
+  hideValue?: boolean;
+  disabled?: boolean;
+}
+/** A percentage as a row of waveform ticks, with hover-preview and commit when interactive. */
+declare function TickProgress({ className, stroke, value: valueProp, defaultValue, onValueChange, ticks, heights, interactive, hideValue, disabled, onKeyDown, onPointerMove, onPointerLeave, onClick, ...props }: TickProgressProps): import("react").JSX.Element;
+//#endregion
+export { TickProgress, TickProgressProps, tickProgressVariants };
+//# sourceMappingURL=tick-progress.d.ts.map

package/dist/components/tick-progress/tick-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick-progress.d.ts","names":[],"sources":["../../../src/components/tick-progress/tick-progress.tsx"],"mappings":";;;cA+BM,uBAAoB;;6CAYzB;UAegB,0BAEb,KAAK,4DACL,oBAAoB;;EAEtB;;EAEA;;EAEA,iBAAiB;;EAEjB;;EAEA;;EAEA;;EAEA;EACA;;;iBAIc,eACd,WACA,QACA,OAAO,WACP,cACA,eACA,OACA,SACA,aACA,WACA,UACA,WACA,eACA,gBACA,YACG,SACF,oCAAiB,IAAA"}

package/dist/components/tick-progress/tick-progress.js

@@ -0,0 +1,151 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useRef, useState } from "react";
+//#region src/components/tick-progress/tick-progress.tsx
+const tickProgressVariants = cva("flex w-[21.25rem] max-w-full flex-col rounded-[1.25rem] bg-card p-3 text-card-foreground", {
+	variants: { 
+	/** A hairline ring — the source's Stroke switch. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: false }
+});
+/** The default waveform: a smooth, deterministic swell between ~35% and ~92%. */
+function waveform(count) {
+	return Array.from({ length: count }, (_, index) => {
+		const t = index / Math.max(1, count - 1);
+		const height = 64 + 26 * Math.sin(t * 5.2 + .55) + 6 * Math.sin(t * 13);
+		return Math.round(Math.min(92, Math.max(34, height)));
+	});
+}
+function clamp(value) {
+	return Math.min(100, Math.max(0, value));
+}
+/** A percentage as a row of waveform ticks, with hover-preview and commit when interactive. */
+function TickProgress({ className, stroke, value: valueProp, defaultValue = 0, onValueChange, ticks = 34, heights, interactive = false, hideValue = false, disabled = false, onKeyDown, onPointerMove, onPointerLeave, onClick, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const committed = clamp(valueProp ?? uncontrolled);
+	const [preview, setPreview] = useState(null);
+	const rowRef = useRef(null);
+	const active = interactive && !disabled;
+	const count = Math.max(1, Math.round(ticks));
+	const pattern = heights ?? waveform(count);
+	const toValue = (on) => Math.round(on / count * 100);
+	const toTicks = (value) => Math.round(value / 100 * count);
+	const shown = preview ?? committed;
+	const onCount = toTicks(shown);
+	const delta = preview === null ? 0 : preview - committed;
+	function commit(next) {
+		const value = clamp(next);
+		if (valueProp === void 0) setUncontrolled(value);
+		if (value !== committed) onValueChange?.(value);
+	}
+	/** The tick under the pointer, counted from the inline start. */
+	function tickAt(clientX) {
+		const row = rowRef.current;
+		if (!row) return null;
+		const rect = row.getBoundingClientRect();
+		if (rect.width <= 0) return null;
+		const fraction = (getComputedStyle(row).direction === "rtl" ? rect.right - clientX : clientX - rect.left) / rect.width;
+		return Math.min(count - 1, Math.max(0, Math.floor(fraction * count)));
+	}
+	function handlePointerMove(event) {
+		onPointerMove?.(event);
+		if (!active) return;
+		const index = tickAt(event.clientX);
+		if (index !== null) setPreview(toValue(index + 1));
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (!active || event.defaultPrevented) return;
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const on = toTicks(committed);
+		const steps = {
+			ArrowUp: 1,
+			ArrowDown: -1,
+			ArrowRight: rtl ? -1 : 1,
+			ArrowLeft: rtl ? 1 : -1,
+			PageUp: 5,
+			PageDown: -5
+		};
+		let next = null;
+		if (event.key in steps) next = toValue(Math.min(count, Math.max(0, on + (steps[event.key] ?? 0))));
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = 100;
+		if (next === null) return;
+		event.preventDefault();
+		setPreview(null);
+		commit(next);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tick-progress",
+		"data-interactive": interactive || void 0,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": committed,
+		"aria-valuetext": `${String(committed)}%`,
+		role: interactive ? "slider" : "progressbar",
+		tabIndex: interactive ? disabled ? -1 : 0 : void 0,
+		"aria-orientation": interactive ? "horizontal" : void 0,
+		"aria-disabled": interactive && disabled || void 0,
+		className: cn(tickProgressVariants({ stroke }), interactive && "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background", disabled && "opacity-55", className),
+		onKeyDown: handleKeyDown,
+		onPointerMove: handlePointerMove,
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setPreview(null);
+		},
+		onClick: (event) => {
+			onClick?.(event);
+			if (!active) return;
+			const index = tickAt(event.clientX);
+			if (index === null) return;
+			setPreview(null);
+			commit(toValue(index + 1));
+		},
+		...props,
+		children: [hideValue ? null : /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			"data-slot": "tick-progress-head",
+			className: "mb-5 flex items-baseline gap-2.5",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"data-slot": "tick-progress-value",
+				className: "text-[2.5rem] leading-none font-normal tracking-[-0.035em] tabular-nums",
+				children: [shown, /* @__PURE__ */ jsx("i", {
+					className: "ms-0.5 text-[1.1875rem] not-italic opacity-35",
+					children: "%"
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				"data-slot": "tick-progress-delta",
+				"data-show": delta !== 0 || void 0,
+				"data-up": delta > 0 || void 0,
+				className: cn("text-xs text-muted-foreground tabular-nums opacity-0 data-[show]:opacity-100 data-[up]:text-success", "transition-opacity duration-[var(--duration-fast)]"),
+				children: delta > 0 ? `+${String(delta)}` : delta < 0 ? `−${String(-delta)}` : ""
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: rowRef,
+			"aria-hidden": "true",
+			"data-slot": "tick-progress-ticks",
+			className: cn("flex h-[5.75rem] touch-pan-y items-end gap-[3px] overflow-hidden rounded-md", active && "cursor-pointer"),
+			children: Array.from({ length: count }, (_, index) => {
+				const on = index < onCount;
+				const cursor = preview !== null && index === onCount - 1;
+				return /* @__PURE__ */ jsx("span", {
+					"data-slot": "tick-progress-tick",
+					"data-on": on || void 0,
+					"data-cursor": cursor || void 0,
+					className: cn("min-w-0 flex-1 rounded-[2px] bg-foreground/16", "transition-[background-color,height] duration-[var(--duration-fast),var(--duration-slow)] ease-[var(--ease-out-quint)]", "data-[cursor]:bg-success data-[on]:bg-foreground"),
+					style: { height: `${String(pattern[index] ?? 60)}%` }
+				}, index);
+			})
+		})]
+	});
+}
+//#endregion
+export { TickProgress, tickProgressVariants };
+
+//# sourceMappingURL=tick-progress.js.map

package/dist/components/tick-progress/tick-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick-progress.js","names":[],"sources":["../../../src/components/tick-progress/tick-progress.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Progress ticks (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A percentage drawn as a row of waveform ticks, with a big figure above.\n *\n * Two modes, because the source's semantics were missing and \"is this an\n * input?\" has two honest answers:\n *\n * - Display (default): a `progressbar`. Nothing is focusable or interactive.\n * - `interactive`: a `slider`. Hovering previews a value — the ticks fill to the\n *   pointer, the tick under it turns green, and the signed difference appears\n *   beside the figure — and a click commits it. The source never committed;\n *   the spec recommends it, and a preview that can never be kept is a tease.\n *   Arrow keys step one tick, PageUp/PageDown five, Home/End jump to the ends.\n *   Keys commit at once, as the APG slider pattern requires: a slider whose\n *   aria-valuenow moved without committing would report a value it does not have.\n */\n\nconst tickProgressVariants = cva(\n  \"flex w-[21.25rem] max-w-full flex-col rounded-[1.25rem] bg-card p-3 text-card-foreground\",\n  {\n    variants: {\n      /** A hairline ring — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: false },\n  },\n);\n\n/** The default waveform: a smooth, deterministic swell between ~35% and ~92%. */\nfunction waveform(count: number): number[] {\n  return Array.from({ length: count }, (_, index) => {\n    const t = index / Math.max(1, count - 1);\n    const height = 64 + 26 * Math.sin(t * 5.2 + 0.55) + 6 * Math.sin(t * 13);\n    return Math.round(Math.min(92, Math.max(34, height)));\n  });\n}\n\nfunction clamp(value: number) {\n  return Math.min(100, Math.max(0, value));\n}\n\nexport interface TickProgressProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof tickProgressVariants> {\n  /** Controlled value, 0–100. */\n  value?: number;\n  /** Initial value when uncontrolled. */\n  defaultValue?: number;\n  /** Called when a value is committed (click or key). */\n  onValueChange?: (value: number) => void;\n  /** Number of ticks. The value snaps to them. */\n  ticks?: number;\n  /** Tick heights in percent, one per tick. Defaults to a gentle waveform. */\n  heights?: number[];\n  /** A slider you can hover, click and key through, rather than a progress bar. */\n  interactive?: boolean;\n  /** Hide the big figure. */\n  hideValue?: boolean;\n  disabled?: boolean;\n}\n\n/** A percentage as a row of waveform ticks, with hover-preview and commit when interactive. */\nexport function TickProgress({\n  className,\n  stroke,\n  value: valueProp,\n  defaultValue = 0,\n  onValueChange,\n  ticks = 34,\n  heights,\n  interactive = false,\n  hideValue = false,\n  disabled = false,\n  onKeyDown,\n  onPointerMove,\n  onPointerLeave,\n  onClick,\n  ...props\n}: TickProgressProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const committed = clamp(valueProp ?? uncontrolled);\n  const [preview, setPreview] = useState<number | null>(null);\n  const rowRef = useRef<HTMLDivElement | null>(null);\n  const active = interactive && !disabled;\n\n  const count = Math.max(1, Math.round(ticks));\n  const pattern = heights ?? waveform(count);\n  const toValue = (on: number) => Math.round((on / count) * 100);\n  const toTicks = (value: number) => Math.round((value / 100) * count);\n\n  const shown = preview ?? committed;\n  const onCount = toTicks(shown);\n  const delta = preview === null ? 0 : preview - committed;\n\n  function commit(next: number) {\n    const value = clamp(next);\n    if (valueProp === undefined) setUncontrolled(value);\n    if (value !== committed) onValueChange?.(value);\n  }\n\n  /** The tick under the pointer, counted from the inline start. */\n  function tickAt(clientX: number): number | null {\n    const row = rowRef.current;\n    if (!row) return null;\n    const rect = row.getBoundingClientRect();\n    if (rect.width <= 0) return null;\n    const rtl = getComputedStyle(row).direction === \"rtl\";\n    const fraction = (rtl ? rect.right - clientX : clientX - rect.left) / rect.width;\n    return Math.min(count - 1, Math.max(0, Math.floor(fraction * count)));\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    onPointerMove?.(event);\n    if (!active) return;\n    const index = tickAt(event.clientX);\n    if (index !== null) setPreview(toValue(index + 1));\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    onKeyDown?.(event);\n    if (!active || event.defaultPrevented) return;\n    const rtl = getComputedStyle(event.currentTarget).direction === \"rtl\";\n    const on = toTicks(committed);\n    const steps: Record<string, number> = {\n      ArrowUp: 1,\n      ArrowDown: -1,\n      ArrowRight: rtl ? -1 : 1,\n      ArrowLeft: rtl ? 1 : -1,\n      PageUp: 5,\n      PageDown: -5,\n    };\n    let next: number | null = null;\n    if (event.key in steps)\n      next = toValue(Math.min(count, Math.max(0, on + (steps[event.key] ?? 0))));\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = 100;\n    if (next === null) return;\n    event.preventDefault();\n    setPreview(null);\n    commit(next);\n  }\n\n  return (\n    <div\n      data-slot=\"tick-progress\"\n      data-interactive={interactive || undefined}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={committed}\n      aria-valuetext={`${String(committed)}%`}\n      role={interactive ? \"slider\" : \"progressbar\"}\n      tabIndex={interactive ? (disabled ? -1 : 0) : undefined}\n      aria-orientation={interactive ? \"horizontal\" : undefined}\n      aria-disabled={(interactive && disabled) || undefined}\n      className={cn(\n        tickProgressVariants({ stroke }),\n        interactive && focusRing,\n        disabled && \"opacity-55\",\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event);\n        setPreview(null);\n      }}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!active) return;\n        const index = tickAt(event.clientX);\n        if (index === null) return;\n        setPreview(null);\n        commit(toValue(index + 1));\n      }}\n      {...props}\n    >\n      {hideValue ? null : (\n        <div\n          aria-hidden=\"true\"\n          data-slot=\"tick-progress-head\"\n          className=\"mb-5 flex items-baseline gap-2.5\"\n        >\n          <span\n            data-slot=\"tick-progress-value\"\n            className=\"text-[2.5rem] leading-none font-normal tracking-[-0.035em] tabular-nums\"\n          >\n            {shown}\n            <i className=\"ms-0.5 text-[1.1875rem] not-italic opacity-35\">%</i>\n          </span>\n          <span\n            data-slot=\"tick-progress-delta\"\n            data-show={delta !== 0 || undefined}\n            data-up={delta > 0 || undefined}\n            className={cn(\n              \"text-xs text-muted-foreground tabular-nums opacity-0 data-[show]:opacity-100 data-[up]:text-success\",\n              \"transition-opacity duration-[var(--duration-fast)]\",\n            )}\n          >\n            {delta > 0 ? `+${String(delta)}` : delta < 0 ? `−${String(-delta)}` : \"\"}\n          </span>\n        </div>\n      )}\n      <div\n        ref={rowRef}\n        aria-hidden=\"true\"\n        data-slot=\"tick-progress-ticks\"\n        className={cn(\n          \"flex h-[5.75rem] touch-pan-y items-end gap-[3px] overflow-hidden rounded-md\",\n          active && \"cursor-pointer\",\n        )}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const on = index < onCount;\n          const cursor = preview !== null && index === onCount - 1;\n          return (\n            <span\n              key={index}\n              data-slot=\"tick-progress-tick\"\n              data-on={on || undefined}\n              data-cursor={cursor || undefined}\n              className={cn(\n                \"min-w-0 flex-1 rounded-[2px] bg-foreground/16\",\n                \"transition-[background-color,height] duration-[var(--duration-fast),var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n                \"data-[cursor]:bg-success data-[on]:bg-foreground\",\n              )}\n              style={{ height: `${String(pattern[index] ?? 60)}%` }}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport { tickProgressVariants };\n"],"mappings":"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"}

package/dist/components/tilt-card/index.d.ts

@@ -0,0 +1,2 @@
+import { TiltCard, TiltCardLayer, TiltCardLayerProps, TiltCardProps } from "./tilt-card.js";
+export { TiltCard, TiltCardLayer, type TiltCardLayerProps, type TiltCardProps };

package/dist/components/tilt-card/index.js

@@ -0,0 +1,2 @@
+import { TiltCard, TiltCardLayer } from "./tilt-card.js";
+export { TiltCard, TiltCardLayer };

package/dist/components/tilt-card/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/tilt-card/meta.ts
+const meta = defineMeta({
+	name: "tilt-card",
+	title: "Tilt Card",
+	description: "A card that tilts in 3D toward the pointer, with a glare that follows it and layers that float at their own depth, springing back flat on leave.",
+	category: "display",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: ["card"],
+	files: ["tilt-card.tsx"],
+	a11y: "The tilt is decoration on an ordinary Card: it adds no role, name or tab stop, so a card that acts as a link should contain a real link (the stories stretch one over the card). The glare layer is aria-hidden and ignores the pointer. The card stays flat for touch and coarse pointers and under prefers-reduced-motion. Keyboard focus on the card or anything inside it shows a small static lift instead of a tilt, and a focusable card gets the standard focus ring."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/tilt-card/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tilt-card/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tilt-card\",\n  title: \"Tilt Card\",\n  description:\n    \"A card that tilts in 3D toward the pointer, with a glare that follows it and layers that float at their own depth, springing back flat on leave.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"card\"],\n  files: [\"tilt-card.tsx\"],\n  a11y:\n    \"The tilt is decoration on an ordinary Card: it adds no role, name or tab stop, so a card that acts as a link \" +\n    \"should contain a real link (the stories stretch one over the card). The glare layer is aria-hidden and ignores the pointer. \" +\n    \"The card stays flat for touch and coarse pointers and under prefers-reduced-motion. Keyboard focus on the card or \" +\n    \"anything inside it shows a small static lift instead of a tilt, and a focusable card gets the standard focus ring.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,MAAM;CAC7B,OAAO,CAAC,eAAe;CACvB,MACE;AAIJ,CAAC"}

package/dist/components/tilt-card/tilt-card.d.ts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/tilt-card/tilt-card.d.ts
+interface TiltCardProps extends ComponentPropsWithRef<"div"> {
+  /** The largest tilt, in degrees, reached with the pointer at an edge. 0 keeps the card flat. */
+  maxTilt?: number;
+  /** Distance, in pixels, of the viewer from the card. Smaller is more dramatic. */
+  perspective?: number;
+  /** How much the card grows while tilting. 1 keeps its size. */
+  scale?: number;
+  /** A soft highlight that follows the pointer across the surface. */
+  glare?: boolean;
+  /** Keeps the card flat, as if the pointer were elsewhere. */
+  disabled?: boolean;
+}
+/**
+ * A card that tilts in 3D toward the pointer and springs back flat when it
+ * leaves.
+ *
+ * Decoration on an ordinary Card: it never moves for touch, coarse pointers or
+ * users who prefer reduced motion. Mark children with `TiltCardLayer` to have
+ * them drift further than the surface, for depth.
+ */
+declare function TiltCard({ className, maxTilt, perspective, scale, glare, disabled, children, ref, onPointerMove, onPointerLeave, ...props }: TiltCardProps): import("react").JSX.Element;
+interface TiltCardLayerProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * How far, in pixels, the layer drifts toward the pointer at full tilt —
+   * on top of the card's own lean. Larger reads as nearer the viewer; a
+   * negative depth sinks the layer behind the surface.
+   */
+  depth?: number;
+}
+/** Content inside a TiltCard that floats at its own depth. */
+declare function TiltCardLayer({ className, depth, style, ...props }: TiltCardLayerProps): import("react").JSX.Element;
+//#endregion
+export { TiltCard, TiltCardLayer, TiltCardLayerProps, TiltCardProps };
+//# sourceMappingURL=tilt-card.d.ts.map

package/dist/components/tilt-card/tilt-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tilt-card.d.ts","names":[],"sources":["../../../src/components/tilt-card/tilt-card.tsx"],"mappings":";;UAuFiB,sBAAsB;;EAErC;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;;;;iBAWc,WACd,WACA,SACA,aACA,OACA,OACA,UACA,UACA,KACA,eACA,mBACG,SACF,gCAAa,IAAA;UAgHC,2BAA2B;;;;;;EAM1C;;;iBAIc,gBAAgB,WAAW,OAAY,UAAU,SAAS,qCAAkB,IAAA"}

package/dist/components/tilt-card/tilt-card.js

@@ -0,0 +1,135 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Card } from "../card/card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/components/tilt-card/tilt-card.tsx
+const surface = cn("group/tilt relative isolate", "transition-[transform,translate,box-shadow]", "duration-[var(--duration-slow),var(--duration-normal),var(--duration-normal)]", "ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint)]", "data-[tilt=follow]:duration-[var(--duration-fast),var(--duration-normal),var(--duration-normal)]", "data-[tilt=follow]:ease-[var(--ease-out-quint)]", "data-[tilt=follow]:shadow-lg", focusRing, "focus-visible:-translate-y-1 focus-visible:shadow-md", "has-focus-visible:-translate-y-1 has-focus-visible:shadow-md");
+const glareLayer = cn("pointer-events-none absolute inset-0 z-10 rounded-[inherit] opacity-0", "transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "group-data-[tilt=follow]/tilt:opacity-100");
+const glareStyle = { backgroundImage: "radial-gradient(circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%), color-mix(in oklab, var(--color-background) 55%, transparent), transparent 65%)" };
+const layerDrift = cn("relative transition-[translate] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]", "group-data-[tilt=follow]/tilt:duration-[var(--duration-fast)] group-data-[tilt=follow]/tilt:ease-[var(--ease-out-quint)]");
+/** Whether the tilt may run: never for touch, coarse pointers or reduced motion. */
+function motionAllowed(pointerType) {
+	if (pointerType === "touch") return false;
+	if (typeof window.matchMedia !== "function") return true;
+	return !(window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(pointer: coarse)").matches);
+}
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+/** Rounds away float noise so the written transform stays short and stable. */
+function round(value) {
+	return Math.round(value * 100) / 100 || 0;
+}
+/**
+* A card that tilts in 3D toward the pointer and springs back flat when it
+* leaves.
+*
+* Decoration on an ordinary Card: it never moves for touch, coarse pointers or
+* users who prefer reduced motion. Mark children with `TiltCardLayer` to have
+* them drift further than the surface, for depth.
+*/
+function TiltCard({ className, maxTilt = 10, perspective = 800, scale = 1.02, glare = true, disabled = false, children, ref, onPointerMove, onPointerLeave, ...props }) {
+	const cardRef = useRef(null);
+	const box = useRef(null);
+	const tilted = useRef(false);
+	const inert = disabled || maxTilt === 0;
+	const setRef = useCallback((node) => {
+		cardRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	const flatten = useCallback(() => {
+		box.current = null;
+		const element = cardRef.current;
+		if (!element || !tilted.current) return;
+		tilted.current = false;
+		element.dataset.tilt = "rest";
+		element.style.transform = "";
+		element.style.setProperty("--tilt-px", "0");
+		element.style.setProperty("--tilt-py", "0");
+	}, []);
+	const lean = useCallback((clientX, clientY, pointerType) => {
+		const element = cardRef.current;
+		if (!element || inert || !motionAllowed(pointerType)) {
+			flatten();
+			return;
+		}
+		box.current ??= element.getBoundingClientRect();
+		const { left, top, width, height } = box.current;
+		if (width === 0 || height === 0) return;
+		const x = Math.min(1, Math.max(-1, (clientX - left) / width * 2 - 1));
+		const y = Math.min(1, Math.max(-1, (clientY - top) / height * 2 - 1));
+		tilted.current = true;
+		element.dataset.tilt = "follow";
+		element.style.transform = `perspective(${String(perspective)}px) rotateX(${String(round(-y * maxTilt))}deg) rotateY(${String(round(x * maxTilt))}deg) scale3d(${String(scale)}, ${String(scale)}, 1)`;
+		element.style.setProperty("--tilt-px", String(round(x)));
+		element.style.setProperty("--tilt-py", String(round(y)));
+		element.style.setProperty("--tilt-glare-x", `${String(round((x + 1) / 2 * 100))}%`);
+		element.style.setProperty("--tilt-glare-y", `${String(round((y + 1) / 2 * 100))}%`);
+	}, [
+		flatten,
+		inert,
+		maxTilt,
+		perspective,
+		scale
+	]);
+	useEffect(() => {
+		const forget = () => {
+			box.current = null;
+		};
+		window.addEventListener("scroll", forget, {
+			passive: true,
+			capture: true
+		});
+		window.addEventListener("resize", forget, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", forget, { capture: true });
+			window.removeEventListener("resize", forget);
+		};
+	}, []);
+	useEffect(() => {
+		if (inert) flatten();
+	}, [inert, flatten]);
+	function handlePointerMove(event) {
+		onPointerMove?.(event);
+		lean(event.clientX, event.clientY, event.pointerType);
+	}
+	function handlePointerLeave(event) {
+		onPointerLeave?.(event);
+		flatten();
+	}
+	return /* @__PURE__ */ jsxs(Card, {
+		ref: setRef,
+		"data-slot": "tilt-card",
+		"data-tilt": "rest",
+		className: cn(surface, className),
+		onPointerMove: handlePointerMove,
+		onPointerLeave: handlePointerLeave,
+		...props,
+		children: [children, glare ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "tilt-card-glare",
+			className: glareLayer,
+			style: glareStyle
+		}) : null]
+	});
+}
+/** Content inside a TiltCard that floats at its own depth. */
+function TiltCardLayer({ className, depth = 12, style, ...props }) {
+	const d = String(depth);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "tilt-card-layer",
+		className: cn(layerDrift, className),
+		style: {
+			translate: `calc(var(--tilt-px, 0) * ${d}px) calc(var(--tilt-py, 0) * ${d}px)`,
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { TiltCard, TiltCardLayer };
+
+//# sourceMappingURL=tilt-card.js.map

package/dist/components/tilt-card/tilt-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tilt-card.js","names":[],"sources":["../../../src/components/tilt-card/tilt-card.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Tilt card; no code referenced).\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type PointerEvent,\n  type Ref,\n} from \"react\";\n\nimport { Card } from \"@/components/card\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * How it moves\n *\n * Pointer position is written straight to the element — its transform, and a\n * handful of custom properties the glare and the layers read — so a pointer\n * move costs no React render. CSS transitions do all the easing: a short\n * ease-out while following smooths the steps between pointer events, and an\n * overshooting ease on leave is the spring back to flat.\n *\n * Parallax layers are shifted with the `translate` property rather than\n * translateZ. A true 3D layer needs `preserve-3d`, which `overflow: hidden`\n * anywhere in the card silently flattens, and it changes size the moment the\n * perspective appears. A 2D shift proportional to the tilt reads the same and\n * cannot be broken by a consumer's class.\n *\n * Keyboard focus never tilts — a focused card has no pointer to lean toward —\n * it lifts, statically, using `translate` so it composes with any tilt a mouse\n * is applying at the same moment.\n */\n\nconst surface = cn(\n  \"group/tilt relative isolate\",\n  \"transition-[transform,translate,box-shadow]\",\n  \"duration-[var(--duration-slow),var(--duration-normal),var(--duration-normal)]\",\n  \"ease-[var(--ease-overshoot),var(--ease-out-quint),var(--ease-out-quint)]\",\n  \"data-[tilt=follow]:duration-[var(--duration-fast),var(--duration-normal),var(--duration-normal)]\",\n  \"data-[tilt=follow]:ease-[var(--ease-out-quint)]\",\n  \"data-[tilt=follow]:shadow-lg\",\n  focusRing,\n  \"focus-visible:-translate-y-1 focus-visible:shadow-md\",\n  \"has-focus-visible:-translate-y-1 has-focus-visible:shadow-md\",\n);\n\nconst glareLayer = cn(\n  \"pointer-events-none absolute inset-0 z-10 rounded-[inherit] opacity-0\",\n  \"transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n  \"group-data-[tilt=follow]/tilt:opacity-100\",\n);\n\nconst glareStyle: CSSProperties = {\n  backgroundImage:\n    \"radial-gradient(circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%), \" +\n    \"color-mix(in oklab, var(--color-background) 55%, transparent), transparent 65%)\",\n};\n\nconst layerDrift = cn(\n  \"relative transition-[translate] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n  \"group-data-[tilt=follow]/tilt:duration-[var(--duration-fast)] group-data-[tilt=follow]/tilt:ease-[var(--ease-out-quint)]\",\n);\n\n/** Whether the tilt may run: never for touch, coarse pointers or reduced motion. */\nfunction motionAllowed(pointerType: string): boolean {\n  if (pointerType === \"touch\") return false;\n  if (typeof window.matchMedia !== \"function\") return true;\n  return !(\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n    window.matchMedia(\"(pointer: coarse)\").matches\n  );\n}\n\nfunction assignRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") ref(node);\n  else if (ref) ref.current = node;\n}\n\n/** Rounds away float noise so the written transform stays short and stable. */\nfunction round(value: number): number {\n  return Math.round(value * 100) / 100 || 0;\n}\n\nexport interface TiltCardProps extends ComponentPropsWithRef<\"div\"> {\n  /** The largest tilt, in degrees, reached with the pointer at an edge. 0 keeps the card flat. */\n  maxTilt?: number;\n  /** Distance, in pixels, of the viewer from the card. Smaller is more dramatic. */\n  perspective?: number;\n  /** How much the card grows while tilting. 1 keeps its size. */\n  scale?: number;\n  /** A soft highlight that follows the pointer across the surface. */\n  glare?: boolean;\n  /** Keeps the card flat, as if the pointer were elsewhere. */\n  disabled?: boolean;\n}\n\n/**\n * A card that tilts in 3D toward the pointer and springs back flat when it\n * leaves.\n *\n * Decoration on an ordinary Card: it never moves for touch, coarse pointers or\n * users who prefer reduced motion. Mark children with `TiltCardLayer` to have\n * them drift further than the surface, for depth.\n */\nexport function TiltCard({\n  className,\n  maxTilt = 10,\n  perspective = 800,\n  scale = 1.02,\n  glare = true,\n  disabled = false,\n  children,\n  ref,\n  onPointerMove,\n  onPointerLeave,\n  ...props\n}: TiltCardProps) {\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  // The card's box, measured on the first move of a hover, while it is still\n  // flat. A tilted card's bounding box is its projection, so measuring on\n  // every move would have the card chase its own lean.\n  const box = useRef<DOMRect | null>(null);\n  const tilted = useRef(false);\n  const inert = disabled || maxTilt === 0;\n\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      cardRef.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n\n  const flatten = useCallback(() => {\n    box.current = null;\n    const element = cardRef.current;\n    if (!element || !tilted.current) return;\n    tilted.current = false;\n    element.dataset.tilt = \"rest\";\n    element.style.transform = \"\";\n    element.style.setProperty(\"--tilt-px\", \"0\");\n    element.style.setProperty(\"--tilt-py\", \"0\");\n  }, []);\n\n  const lean = useCallback(\n    (clientX: number, clientY: number, pointerType: string) => {\n      const element = cardRef.current;\n      if (!element || inert || !motionAllowed(pointerType)) {\n        flatten();\n        return;\n      }\n      box.current ??= element.getBoundingClientRect();\n      const { left, top, width, height } = box.current;\n      if (width === 0 || height === 0) return;\n\n      // -1 at the start edge, 1 at the end edge, clamped for pointers that\n      // slip past a rounded corner before `pointerleave` arrives.\n      const x = Math.min(1, Math.max(-1, ((clientX - left) / width) * 2 - 1));\n      const y = Math.min(1, Math.max(-1, ((clientY - top) / height) * 2 - 1));\n\n      // The side under the pointer presses away from the viewer: rotateY\n      // positive sends the right edge back, rotateX negative the bottom edge.\n      tilted.current = true;\n      element.dataset.tilt = \"follow\";\n      element.style.transform =\n        `perspective(${String(perspective)}px) ` +\n        `rotateX(${String(round(-y * maxTilt))}deg) ` +\n        `rotateY(${String(round(x * maxTilt))}deg) ` +\n        `scale3d(${String(scale)}, ${String(scale)}, 1)`;\n      element.style.setProperty(\"--tilt-px\", String(round(x)));\n      element.style.setProperty(\"--tilt-py\", String(round(y)));\n      element.style.setProperty(\"--tilt-glare-x\", `${String(round(((x + 1) / 2) * 100))}%`);\n      element.style.setProperty(\"--tilt-glare-y\", `${String(round(((y + 1) / 2) * 100))}%`);\n    },\n    [flatten, inert, maxTilt, perspective, scale],\n  );\n\n  // Scrolling moves the card under a still pointer; the cached box is stale.\n  useEffect(() => {\n    const forget = () => {\n      box.current = null;\n    };\n    window.addEventListener(\"scroll\", forget, { passive: true, capture: true });\n    window.addEventListener(\"resize\", forget, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", forget, { capture: true });\n      window.removeEventListener(\"resize\", forget);\n    };\n  }, []);\n\n  // Becoming disabled mid-tilt should not leave the card stranded at an angle.\n  useEffect(() => {\n    if (inert) flatten();\n  }, [inert, flatten]);\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    onPointerMove?.(event);\n    lean(event.clientX, event.clientY, event.pointerType);\n  }\n\n  function handlePointerLeave(event: PointerEvent<HTMLDivElement>) {\n    onPointerLeave?.(event);\n    flatten();\n  }\n\n  return (\n    <Card\n      ref={setRef}\n      data-slot=\"tilt-card\"\n      data-tilt=\"rest\"\n      className={cn(surface, className)}\n      onPointerMove={handlePointerMove}\n      onPointerLeave={handlePointerLeave}\n      {...props}\n    >\n      {children}\n      {glare ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"tilt-card-glare\"\n          className={glareLayer}\n          style={glareStyle}\n        />\n      ) : null}\n    </Card>\n  );\n}\n\nexport interface TiltCardLayerProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * How far, in pixels, the layer drifts toward the pointer at full tilt —\n   * on top of the card's own lean. Larger reads as nearer the viewer; a\n   * negative depth sinks the layer behind the surface.\n   */\n  depth?: number;\n}\n\n/** Content inside a TiltCard that floats at its own depth. */\nexport function TiltCardLayer({ className, depth = 12, style, ...props }: TiltCardLayerProps) {\n  const d = String(depth);\n  return (\n    <div\n      data-slot=\"tilt-card-layer\"\n      className={cn(layerDrift, className)}\n      style={{\n        translate: `calc(var(--tilt-px, 0) * ${d}px) calc(var(--tilt-py, 0) * ${d}px)`,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/time-stack/index.d.ts

@@ -0,0 +1,2 @@
+import { TimeStack, TimeStackItem, TimeStackProps, timeStackVariants } from "./time-stack.js";
+export { TimeStack, type TimeStackItem, type TimeStackProps, timeStackVariants };

package/dist/components/time-stack/index.js

@@ -0,0 +1,2 @@
+import { TimeStack, timeStackVariants } from "./time-stack.js";
+export { TimeStack, timeStackVariants };

package/dist/components/time-stack/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/time-stack/meta.ts
+const meta = defineMeta({
+	name: "time-stack",
+	title: "Time Stack",
+	description: "Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["time-stack.tsx"],
+	a11y: "The scrubber is a vertical role=\"slider\" whose aria-valuetext names the moment (\"1w ago: Forest Trail\"). Newest is at the bottom, so ArrowUp/ArrowRight go back in time as a vertical slider requires; ArrowDown/Left, Page Up/Down, Home and End work too. Only the current card is exposed (a labelled group); the cards behind and before it are inert. Wheel steps are announced through a polite status, and the wheel only captures scrolling while there is a card to step to. Motion stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/time-stack/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/time-stack/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"time-stack\",\n  title: \"Time Stack\",\n  description:\n    \"Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"time-stack.tsx\"],\n  a11y:\n    'The scrubber is a vertical role=\"slider\" whose aria-valuetext names the moment (\"1w ago: Forest Trail\"). ' +\n    \"Newest is at the bottom, so ArrowUp/ArrowRight go back in time as a vertical slider requires; ArrowDown/Left, \" +\n    \"Page Up/Down, Home and End work too. Only the current card is exposed (a labelled group); the cards behind \" +\n    \"and before it are inert. Wheel steps are announced through a polite status, and the wheel only captures \" +\n    \"scrolling while there is a card to step to. Motion stops 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,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

package/dist/components/time-stack/time-stack.d.ts

@@ -0,0 +1,37 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/time-stack/time-stack.d.ts
+declare const timeStackVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+  tone?: "media" | "mono" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TimeStackItem {
+  /** Names the card. */
+  title: string;
+  /** The moment on the timeline: "Today", "1w ago", a date. */
+  label: string;
+  /** Image URL for the card when `tone="media"` and no `content` is given. */
+  image?: string;
+  /** Alternative text for `image`. Defaults to empty: the title names the card. */
+  alt?: string;
+  /** Custom card content. Replaces the image or the numbered tile. */
+  content?: ReactNode;
+}
+interface TimeStackProps extends Omit<ComponentPropsWithRef<"section">, "children">, VariantProps<typeof timeStackVariants> {
+  /** Newest first: index 0 is the front of the stack and the bottom of the timeline. */
+  items: TimeStackItem[];
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Step through with the mouse wheel over the stack. */
+  wheel?: boolean;
+  /** Select as the pointer moves over the timeline, as in the source, rather than on press. */
+  hoverScrub?: boolean;
+  /** Accessible name of the scrubber. */
+  scrubberLabel?: string;
+}
+/** A depth stack of moments with a timeline scrubber — amicro's Time Machine. */
+declare function TimeStack({ className, items, index: indexProp, defaultIndex, onIndexChange, wheel, hoverScrub, scrubberLabel, size, tone, ref, "aria-label": ariaLabel, ...props }: TimeStackProps): import("react").JSX.Element;
+//#endregion
+export { TimeStack, TimeStackItem, TimeStackProps, timeStackVariants };
+//# sourceMappingURL=time-stack.d.ts.map

package/dist/components/time-stack/time-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-stack.d.ts","names":[],"sources":["../../../src/components/time-stack/time-stack.tsx"],"mappings":";;;cAkCM,oBAAiB;;;6CAoBtB;UAEgB;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA,UAAU;;UAGK,uBAEb,KAAK,+CACL,oBAAoB;;EAEtB,OAAO;EACP;EACA;EACA,iBAAiB;;EAEjB;;EAEA;;EAEA;;;iBAsBc,YACd,WACA,OACA,OAAO,WACP,cACA,eACA,OACA,YACA,eACA,MACA,MACA,mBACc,cACX,SACF,iCAAc,IAAA"}