@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,43 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/textarea/textarea.d.ts
+declare const textareaVariants: (props?: ({
+  textareaSize?: "sm" | "md" | "lg" | null | undefined;
+  resize?: "none" | "vertical" | "both" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TextareaProps extends Omit<ComponentPropsWithRef<"textarea">, "cols">, VariantProps<typeof textareaVariants> {
+  /**
+   * Grows with its content instead of scrolling, up to `maxRows`.
+   *
+   * Off by default. A field that changes height as you type moves everything
+   * below it, which is the right trade for a comment box and the wrong one for
+   * a form of twelve fields.
+   */
+  autoResize?: boolean;
+  /** Ceiling for `autoResize`, after which it scrolls. */
+  maxRows?: number;
+  /**
+   * Shows a live character count.
+   *
+   * Needs `maxLength` to have anything to count against.
+   */
+  showCount?: boolean;
+}
+/**
+ * Multi-line text field.
+ *
+ * The visual size prop is `textareaSize`, not `size`, for the same reason
+ * Input's is `inputSize`: `size` is a native attribute on form controls, and a
+ * prop of that name shadows it.
+ *
+ * The character count is where this differs from most. A counter wired as a
+ * live region announces on every keystroke, which is unusable — a screen
+ * reader reads "one hundred and forty-one characters remaining" between every
+ * letter. So the count is silent while there is room and only announces once
+ * it is nearly gone, which is the point at which it is information rather than
+ * chatter.
+ */
+declare function Textarea({ className, textareaSize, resize, autoResize, maxRows, showCount, rows, maxLength, value, defaultValue, onChange, id, "aria-describedby": describedBy, ref, ...props }: TextareaProps): import("react").JSX.Element;
+//#endregion
+export { Textarea, TextareaProps, textareaVariants };
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"mappings":";;;cAeM,mBAAgB;;;6CAmCrB;UAEgB,sBAEb,KAAK,4CACL,oBAAoB;;;;;;;;EAQtB;;EAEA;;;;;;EAMA;;;;;;;;;;;;;;;;iBAiBc,WACd,WACA,cACA,QACA,YACA,SACA,WACA,MACA,WACA,OACA,cACA,UACA,wBACoB,aACpB,QACG,SACF,gCAAa,IAAA"}

package/dist/components/textarea/textarea.js

@@ -0,0 +1,119 @@
+"use client";
+import { focusRingInset, invalidStyles } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/textarea/textarea.tsx
+const textareaVariants = cva(cn("block w-full min-w-0 rounded-md border border-input bg-background text-foreground shadow-xs", "transition-[border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "placeholder:text-muted-foreground", "focus-visible:border-ring", "disabled:cursor-not-allowed disabled:opacity-55", focusRingInset, invalidStyles), {
+	variants: {
+		textareaSize: {
+			sm: "px-2.5 py-1.5 text-sm",
+			md: "px-3 py-2 text-sm",
+			lg: "px-3.5 py-2.5 text-base"
+		},
+		/**
+		* Vertical only by default.
+		*
+		* The browser default is `both`, and a textarea dragged wider than its
+		* container is a layout broken by a control that was only meant to be
+		* made taller.
+		*/
+		resize: {
+			none: "resize-none",
+			vertical: "resize-y",
+			both: "resize"
+		}
+	},
+	defaultVariants: {
+		textareaSize: "md",
+		resize: "vertical"
+	}
+});
+/**
+* Multi-line text field.
+*
+* The visual size prop is `textareaSize`, not `size`, for the same reason
+* Input's is `inputSize`: `size` is a native attribute on form controls, and a
+* prop of that name shadows it.
+*
+* The character count is where this differs from most. A counter wired as a
+* live region announces on every keystroke, which is unusable — a screen
+* reader reads "one hundred and forty-one characters remaining" between every
+* letter. So the count is silent while there is room and only announces once
+* it is nearly gone, which is the point at which it is information rather than
+* chatter.
+*/
+function Textarea({ className, textareaSize, resize, autoResize = false, maxRows = 12, showCount = false, rows = 3, maxLength, value, defaultValue, onChange, id, "aria-describedby": describedBy, ref, ...props }) {
+	const internalRef = useRef(null);
+	const generatedId = useId();
+	const countId = `${id ?? generatedId}-count`;
+	const counted = showCount && maxLength !== void 0;
+	/**
+	* Both refs, without a library.
+	*
+	* React 19 passes `ref` as an ordinary prop, so it arrives here and has to be
+	* forwarded on deliberately. Auto-resize needs the element too, and silently
+	* dropping the caller's ref would break every form library that reaches for
+	* the node.
+	*/
+	const setRef = (node) => {
+		internalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	useLayoutEffect(() => {
+		const textarea = internalRef.current;
+		if (!textarea || !autoResize) return;
+		textarea.style.height = "auto";
+		const maxHeight = (Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20) * maxRows;
+		textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;
+		textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+	});
+	/**
+	* The length, for the count.
+	*
+	* Held in state for the uncontrolled case rather than read off the element
+	* during render. Reading the ref looks simpler and does not work: nothing
+	* re-renders when an uncontrolled field is typed into, so the count would
+	* show whatever it happened to say on first paint and never move again.
+	*/
+	const [uncontrolledLength, setUncontrolledLength] = useState(typeof defaultValue === "string" ? defaultValue.length : 0);
+	const length = typeof value === "string" ? value.length : uncontrolledLength;
+	const remaining = maxLength === void 0 ? void 0 : maxLength - length;
+	const announceAt = maxLength === void 0 ? 0 : Math.max(20, Math.floor(maxLength / 10));
+	const nearLimit = remaining !== void 0 && remaining <= announceAt;
+	function handleChange(event) {
+		if (value === void 0) setUncontrolledLength(event.target.value.length);
+		onChange?.(event);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid gap-1.5", counted && "w-full"),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: setRef,
+			id: id ?? (counted ? generatedId : void 0),
+			"data-slot": "textarea",
+			rows,
+			maxLength,
+			value,
+			defaultValue,
+			onChange: handleChange,
+			"aria-describedby": cn(describedBy, counted && countId) || void 0,
+			className: cn(textareaVariants({
+				textareaSize,
+				resize: autoResize ? "none" : resize
+			}), className),
+			...props
+		}), counted ? /* @__PURE__ */ jsx("p", {
+			id: countId,
+			"data-slot": "textarea-count",
+			"aria-live": nearLimit ? "polite" : "off",
+			className: cn("text-xs tabular-nums", remaining !== void 0 && remaining < 0 ? "text-destructive" : nearLimit ? "text-warning" : "text-muted-foreground"),
+			children: remaining !== void 0 && remaining < 0 ? `${String(Math.abs(remaining))} characters over the limit` : `${String(remaining ?? 0)} characters left`
+		}) : null]
+	});
+}
+//#endregion
+export { Textarea, textareaVariants };
+
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n} from \"react\";\n\nimport { focusRingInset, invalidStyles } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nconst textareaVariants = cva(\n  cn(\n    \"block w-full min-w-0 rounded-md border border-input bg-background text-foreground shadow-xs\",\n    \"transition-[border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n    \"placeholder:text-muted-foreground\",\n    \"focus-visible:border-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    focusRingInset,\n    invalidStyles,\n  ),\n  {\n    variants: {\n      textareaSize: {\n        sm: \"px-2.5 py-1.5 text-sm\",\n        md: \"px-3 py-2 text-sm\",\n        lg: \"px-3.5 py-2.5 text-base\",\n      },\n      /**\n       * Vertical only by default.\n       *\n       * The browser default is `both`, and a textarea dragged wider than its\n       * container is a layout broken by a control that was only meant to be\n       * made taller.\n       */\n      resize: {\n        none: \"resize-none\",\n        vertical: \"resize-y\",\n        both: \"resize\",\n      },\n    },\n    defaultVariants: {\n      textareaSize: \"md\",\n      resize: \"vertical\",\n    },\n  },\n);\n\nexport interface TextareaProps\n  extends\n    Omit<ComponentPropsWithRef<\"textarea\">, \"cols\">,\n    VariantProps<typeof textareaVariants> {\n  /**\n   * Grows with its content instead of scrolling, up to `maxRows`.\n   *\n   * Off by default. A field that changes height as you type moves everything\n   * below it, which is the right trade for a comment box and the wrong one for\n   * a form of twelve fields.\n   */\n  autoResize?: boolean;\n  /** Ceiling for `autoResize`, after which it scrolls. */\n  maxRows?: number;\n  /**\n   * Shows a live character count.\n   *\n   * Needs `maxLength` to have anything to count against.\n   */\n  showCount?: boolean;\n}\n\n/**\n * Multi-line text field.\n *\n * The visual size prop is `textareaSize`, not `size`, for the same reason\n * Input's is `inputSize`: `size` is a native attribute on form controls, and a\n * prop of that name shadows it.\n *\n * The character count is where this differs from most. A counter wired as a\n * live region announces on every keystroke, which is unusable — a screen\n * reader reads \"one hundred and forty-one characters remaining\" between every\n * letter. So the count is silent while there is room and only announces once\n * it is nearly gone, which is the point at which it is information rather than\n * chatter.\n */\nexport function Textarea({\n  className,\n  textareaSize,\n  resize,\n  autoResize = false,\n  maxRows = 12,\n  showCount = false,\n  rows = 3,\n  maxLength,\n  value,\n  defaultValue,\n  onChange,\n  id,\n  \"aria-describedby\": describedBy,\n  ref,\n  ...props\n}: TextareaProps) {\n  const internalRef = useRef<HTMLTextAreaElement | null>(null);\n  const generatedId = useId();\n  const countId = `${id ?? generatedId}-count`;\n\n  const counted = showCount && maxLength !== undefined;\n\n  /**\n   * Both refs, without a library.\n   *\n   * React 19 passes `ref` as an ordinary prop, so it arrives here and has to be\n   * forwarded on deliberately. Auto-resize needs the element too, and silently\n   * dropping the caller's ref would break every form library that reaches for\n   * the node.\n   */\n  const setRef = (node: HTMLTextAreaElement | null) => {\n    internalRef.current = node;\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) (ref as { current: HTMLTextAreaElement | null }).current = node;\n  };\n\n  // Measured after layout, so the height is right on the first paint rather\n  // than one frame late and visibly settling.\n  useLayoutEffect(() => {\n    const textarea = internalRef.current;\n    if (!textarea || !autoResize) return;\n\n    textarea.style.height = \"auto\";\n    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n    const maxHeight = lineHeight * maxRows;\n    textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;\n    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? \"auto\" : \"hidden\";\n  });\n\n  /**\n   * The length, for the count.\n   *\n   * Held in state for the uncontrolled case rather than read off the element\n   * during render. Reading the ref looks simpler and does not work: nothing\n   * re-renders when an uncontrolled field is typed into, so the count would\n   * show whatever it happened to say on first paint and never move again.\n   */\n  const [uncontrolledLength, setUncontrolledLength] = useState(\n    typeof defaultValue === \"string\" ? defaultValue.length : 0,\n  );\n\n  const length = typeof value === \"string\" ? value.length : uncontrolledLength;\n\n  const remaining = maxLength === undefined ? undefined : maxLength - length;\n  // Announce only when it starts to matter: a tenth of the budget, or twenty\n  // characters, whichever is larger.\n  const announceAt = maxLength === undefined ? 0 : Math.max(20, Math.floor(maxLength / 10));\n  const nearLimit = remaining !== undefined && remaining <= announceAt;\n\n  function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {\n    if (value === undefined) setUncontrolledLength(event.target.value.length);\n    onChange?.(event);\n  }\n\n  return (\n    <div className={cn(\"grid gap-1.5\", counted && \"w-full\")}>\n      <textarea\n        ref={setRef}\n        id={id ?? (counted ? generatedId : undefined)}\n        data-slot=\"textarea\"\n        rows={rows}\n        maxLength={maxLength}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        aria-describedby={cn(describedBy, counted && countId) || undefined}\n        className={cn(\n          textareaVariants({ textareaSize, resize: autoResize ? \"none\" : resize }),\n          className,\n        )}\n        {...props}\n      />\n\n      {counted ? (\n        <p\n          id={countId}\n          data-slot=\"textarea-count\"\n          // Polite only once it matters. Left permanently live it reads the\n          // count between every keystroke, which is noise, not help.\n          aria-live={nearLimit ? \"polite\" : \"off\"}\n          className={cn(\n            \"text-xs tabular-nums\",\n            remaining !== undefined && remaining < 0\n              ? \"text-destructive\"\n              : nearLimit\n                ? \"text-warning\"\n                : \"text-muted-foreground\",\n          )}\n        >\n          {/* Words, not \"141/200\": a bare ratio is read aloud as two numbers\n              with no indication of which is which. */}\n          {remaining !== undefined && remaining < 0\n            ? `${String(Math.abs(remaining))} characters over the limit`\n            : `${String(remaining ?? 0)} characters left`}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport { textareaVariants };\n"],"mappings":";;;;;;;AAeA,MAAM,mBAAmB,IACvB,GACE,+FACA,qGACA,qCACA,6BACA,mDACA,gBACA,aACF,GACA;CACE,UAAU;EACR,cAAc;GACZ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;;;;;;;;EAQA,QAAQ;GACN,MAAM;GACN,UAAU;GACV,MAAM;EACR;CACF;CACA,iBAAiB;EACf,cAAc;EACd,QAAQ;CACV;AACF,CACF;;;;;;;;;;;;;;;AAsCA,SAAgB,SAAS,EACvB,WACA,cACA,QACA,aAAa,OACb,UAAU,IACV,YAAY,OACZ,OAAO,GACP,WACA,OACA,cACA,UACA,IACA,oBAAoB,aACpB,KACA,GAAG,SACa;CAChB,MAAM,cAAc,OAAmC,IAAI;CAC3D,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,GAAG,MAAM,YAAY;CAErC,MAAM,UAAU,aAAa,cAAc,KAAA;;;;;;;;;CAU3C,MAAM,UAAU,SAAqC;EACnD,YAAY,UAAU;EACtB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAiD,UAAU;CAC3E;CAIA,sBAAsB;EACpB,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,YAAY,CAAC,YAAY;EAE9B,SAAS,MAAM,SAAS;EAExB,MAAM,aADa,OAAO,WAAW,iBAAiB,QAAQ,CAAC,CAAC,UAAU,KAAK,MAChD;EAC/B,SAAS,MAAM,SAAS,GAAG,OAAO,KAAK,IAAI,SAAS,cAAc,SAAS,CAAC,EAAE;EAC9E,SAAS,MAAM,YAAY,SAAS,eAAe,YAAY,SAAS;CAC1E,CAAC;;;;;;;;;CAUD,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,OAAO,iBAAiB,WAAW,aAAa,SAAS,CAC3D;CAEA,MAAM,SAAS,OAAO,UAAU,WAAW,MAAM,SAAS;CAE1D,MAAM,YAAY,cAAc,KAAA,IAAY,KAAA,IAAY,YAAY;CAGpE,MAAM,aAAa,cAAc,KAAA,IAAY,IAAI,KAAK,IAAI,IAAI,KAAK,MAAM,YAAY,EAAE,CAAC;CACxF,MAAM,YAAY,cAAc,KAAA,KAAa,aAAa;CAE1D,SAAS,aAAa,OAAyC;EAC7D,IAAI,UAAU,KAAA,GAAW,sBAAsB,MAAM,OAAO,MAAM,MAAM;EACxE,WAAW,KAAK;CAClB;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,gBAAgB,WAAW,QAAQ;EAAtD,UAAA,CACE,oBAAC,YAAD;GACE,KAAK;GACL,IAAI,OAAO,UAAU,cAAc,KAAA;GACnC,aAAU;GACJ;GACK;GACJ;GACO;GACd,UAAU;GACV,oBAAkB,GAAG,aAAa,WAAW,OAAO,KAAK,KAAA;GACzD,WAAW,GACT,iBAAiB;IAAE;IAAc,QAAQ,aAAa,SAAS;GAAO,CAAC,GACvE,SACF;GACA,GAAI;EACL,CAAA,GAEA,UACC,oBAAC,KAAD;GACE,IAAI;GACJ,aAAU;GAGV,aAAW,YAAY,WAAW;GAClC,WAAW,GACT,wBACA,cAAc,KAAA,KAAa,YAAY,IACnC,qBACA,YACE,iBACA,uBACR;GAIC,UAAA,cAAc,KAAA,KAAa,YAAY,IACpC,GAAG,OAAO,KAAK,IAAI,SAAS,CAAC,EAAE,8BAC/B,GAAG,OAAO,aAAa,CAAC,EAAE;EAC7B,CAAA,IACD,IACD;;AAET"}

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

@@ -0,0 +1,2 @@
+import { TickProgress, TickProgressProps, tickProgressVariants } from "./tick-progress.js";
+export { TickProgress, type TickProgressProps, tickProgressVariants };

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

@@ -0,0 +1,2 @@
+import { TickProgress, tickProgressVariants } from "./tick-progress.js";
+export { TickProgress, tickProgressVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/tick-progress/meta.ts
+const meta = defineMeta({
+	name: "tick-progress",
+	title: "Tick Progress",
+	description: "A percentage drawn as a row of waveform ticks under a big figure — a progress bar, or a slider with hover preview.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["tick-progress.tsx"],
+	a11y: "Display mode is a role=\"progressbar\" with aria-valuenow and a \"%\" value text. `interactive` makes it a role=\"slider\": focusable, with a focus ring; arrows step one tick (mirrored in right-to-left layouts), PageUp/PageDown five, Home/End the ends, and keys commit immediately as the APG slider pattern requires. Hover preview and click-to-commit are pointer conveniences over that. The ticks and the figure are aria-hidden because the role already carries the value; name it with aria-label or aria-labelledby."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tick-progress/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tick-progress\",\n  title: \"Tick Progress\",\n  description:\n    \"A percentage drawn as a row of waveform ticks under a big figure — a progress bar, or a slider with hover preview.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"tick-progress.tsx\"],\n  a11y:\n    'Display mode is a role=\"progressbar\" with aria-valuenow and a \"%\" value text. `interactive` makes it a ' +\n    'role=\"slider\": focusable, with a focus ring; arrows step one tick (mirrored in right-to-left layouts), ' +\n    \"PageUp/PageDown five, Home/End the ends, and keys commit immediately as the APG slider pattern requires. \" +\n    \"Hover preview and click-to-commit are pointer conveniences over that. The ticks and the figure are \" +\n    \"aria-hidden because the role already carries the value; name it with aria-label or aria-labelledby.\",\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;AAKJ,CAAC"}

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