@nsaa/core 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/input/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Input } from "./input.js";
+export { Input };

package/dist/input/input.d.ts

@@ -0,0 +1,4 @@
+
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };

package/dist/input/input.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+// src/input/input.tsx
+function Input$1({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+export { Input$1 as Input };

package/dist/input-group/index.d.ts

@@ -0,0 +1,3 @@
+
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/input-group/input-group.d.ts

@@ -0,0 +1,19 @@
+
+import { Button } from "../button/button.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
+  type?: "button" | "submit" | "reset";
+}): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/input-group/input-group.js

@@ -0,0 +1,78 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { Textarea } from "../textarea/textarea.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/input-group/input-group.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input, textarea")?.focus();
+		},
+		...props
+	});
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/input-otp/index.d.ts

@@ -0,0 +1,3 @@
+
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./input-otp.js";
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/input-otp/input-otp.d.ts

@@ -0,0 +1,12 @@
+
+import * as React from "react";
+import { OTPInput } from "input-otp";
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+  index: number;
+}): React.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/input-otp/input-otp.js

@@ -0,0 +1,73 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { recentUserAction } from "../lib/user-action.js";
+import { useCue } from "../sound/sound-map.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+// src/input-otp/input-otp.tsx
+function InputOTP({ className, containerClassName, ...props }) {
+	const cue = useCue("input-otp");
+	const invalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+	const complete = typeof props.value === "string" && props.value.length === props.maxLength;
+	const wasInvalid = React.useRef(invalid);
+	React.useEffect(() => {
+		if (invalid && !wasInvalid.current && complete && recentUserAction()) cue("invalid");
+		wasInvalid.current = invalid;
+	}, [
+		invalid,
+		complete,
+		cue
+	]);
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"data-slot": "input-otp",
+		containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName),
+		spellCheck: false,
+		className: cn("disabled:cursor-not-allowed", className),
+		...props
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
+		...props
+	});
+}
+function InputOTPSlot({ index, className, ...props }) {
+	const { char, hasFakeCaret, isActive } = React.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: cn("relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
+		...props,
+		children: [char && /* @__PURE__ */ jsx("span", {
+			"data-slot": "input-otp-char",
+			children: char
+		}, char), hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground" })
+		})]
+	});
+}
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+		})
+	});
+}
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/kbd/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Kbd, KbdGroup } from "./kbd.js";
+export { Kbd, KbdGroup };

package/dist/kbd/kbd.d.ts

@@ -0,0 +1,5 @@
+
+import * as React from "react";
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): React.JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Kbd, KbdGroup };

package/dist/kbd/kbd.js

@@ -0,0 +1,19 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/kbd/kbd.tsx
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+export { Kbd, KbdGroup };

package/dist/label/index.d.ts

@@ -0,0 +1,3 @@
+
+import { Label } from "./label.js";
+export { Label };

package/dist/label/label.d.ts

@@ -0,0 +1,4 @@
+
+import * as React from "react";
+declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
+export { Label };

package/dist/label/label.js

@@ -0,0 +1,13 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/label/label.tsx
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50", className),
+		...props
+	});
+}
+export { Label };

package/dist/legacy/icon-button/icon-swap.js

@@ -0,0 +1,58 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { blur, scale, spring } from "../../tokens/dist/motion.js";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+// src/legacy/icon-button/icon-swap.tsx
+const INSTANT = { duration: 0 };
+const blurred = (radius) => `blur(${radius}px)`;
+/**
+* Swap states, as functions of `custom`, so an exiting icon reads the latest instant / reduced
+* values from AnimatePresence rather than the props it had when it was last rendered. Instant
+* and reduced swaps never scale or blur, not even for a frame.
+*/
+const iconSwapVariants = {
+	hidden: ({ instant, reduced }) => ({
+		opacity: 0,
+		transform: `scale(${instant || reduced ? 1 : scale["icon-from"]})`,
+		filter: blurred(instant || reduced ? 0 : blur.icon),
+		transition: instant ? INSTANT : spring.icon
+	}),
+	shown: ({ instant }) => ({
+		opacity: 1,
+		transform: "scale(1)",
+		filter: blurred(0),
+		transition: instant ? INSTANT : spring.icon,
+		transitionEnd: { filter: "none" }
+	})
+};
+/**
+* Cross-fades between icons stacked in one grid cell, so the container never resizes. Nothing
+* animates on mount (`initial={false}`); springs retarget from the live value when interrupted,
+* and the latest content always wins.
+*/
+function IconSwap({ contentKey, instant, reduced, slot, layerClassName, className, children }) {
+	const custom = {
+		instant,
+		reduced
+	};
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn(className, "grid place-items-center"),
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			custom,
+			children: /* @__PURE__ */ jsx(motion.span, {
+				"data-slot": slot,
+				custom,
+				variants: iconSwapVariants,
+				initial: "hidden",
+				animate: "shown",
+				exit: "hidden",
+				className: cn("inline-flex size-full items-center justify-center [grid-area:1/1] [&_svg]:size-full", layerClassName),
+				children
+			}, contentKey)
+		})
+	});
+}
+export { IconSwap, iconSwapVariants };

package/dist/lib/cn.d.ts

@@ -0,0 +1,3 @@
+
+import { ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/{cn-DxFBFdwT.js → lib/cn.js}

@@ -60,4 +60,4 @@ const twMerge = extendTailwindMerge(twMergeConfig);
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
-export { twMergeConfig as n, cn as t };
+export { cn, twMergeConfig };

package/dist/lib/control-defaults.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext, useContext } from "react";
+// src/lib/control-defaults.tsx
+const ControlDefaultsContext = createContext({});
+function useControlDefaults() {
+	return useContext(ControlDefaultsContext);
+}
+export { ControlDefaultsContext, useControlDefaults };

package/dist/lib/icon-swap.d.ts

@@ -0,0 +1,15 @@
+
+import { ReactNode } from "react";
+export interface IconSwapProps {
+  /** Changes when the shown icon changes; the old one cross-fades out on `spring.icon`. */
+  contentKey: string;
+  /** Classes for the stack, which sets the size (e.g. `size-4`). */
+  className?: string | undefined;
+  children: ReactNode;
+}
+/**
+ * Cross-fades icons in one cell: scale 0.25 → 1, opacity, blur 4 → 0 on `spring.icon`. Instant
+ * after a key press (input modality, #71 (3)); an opacity fade only under reduced motion (the OS,
+ * a MotionConfig or `<html data-motion>`). Nothing animates on mount.
+ */
+export declare function IconSwap({ contentKey, className, children }: IconSwapProps): import("react").JSX.Element;

package/dist/lib/icon-swap.js

@@ -0,0 +1,26 @@
+"use client";
+import { getInputModality } from "./input-modality.js";
+import { IconSwap as IconSwap$1 } from "../legacy/icon-button/icon-swap.js";
+import { jsx } from "react/jsx-runtime";
+import { useReducedMotion, useReducedMotionConfig } from "motion/react";
+// src/lib/icon-swap.tsx
+/**
+* Cross-fades icons in one cell: scale 0.25 → 1, opacity, blur 4 → 0 on `spring.icon`. Instant
+* after a key press (input modality, #71 (3)); an opacity fade only under reduced motion (the OS,
+* a MotionConfig or `<html data-motion>`). Nothing animates on mount.
+*/
+function IconSwap({ contentKey, className, children }) {
+	const prefersReduced = useReducedMotion() ?? false;
+	const configReduced = useReducedMotionConfig() ?? false;
+	const html = typeof document === "undefined" ? void 0 : document.documentElement.dataset.motion;
+	const reduced = html === "reduce" || html !== "full" && (prefersReduced || configReduced);
+	return /* @__PURE__ */ jsx(IconSwap$1, {
+		contentKey,
+		instant: getInputModality() === "keyboard",
+		reduced,
+		slot: "icon-swap",
+		className,
+		children
+	});
+}
+export { IconSwap };

package/dist/lib/input-modality.js

@@ -0,0 +1,39 @@
+"use client";
+// src/lib/input-modality.ts
+let modality = "pointer";
+let installed = false;
+let interactedAt = null;
+/** The attribute on <html> that feel.css reads: keyboard-opened surfaces open without motion (#71, #108). */
+const MODALITY_ATTRIBUTE = "data-nsaa-input";
+/**
+* Tracks the latest input modality in the capture phase, so a state change driven by a page
+* hotkey (Space, M, mod+B, mod+K) is known to be keyboard-initiated even though no button was
+* clicked. A pointer that moves takes over again, so hovering after typing animates. Idempotent;
+* `@nsaa/core` installs it when it loads.
+*/
+function trackInputModality() {
+	if (installed || typeof document === "undefined") return;
+	installed = true;
+	document.addEventListener("keydown", () => interact("keyboard"), true);
+	document.addEventListener("pointerdown", () => interact("pointer"), true);
+	document.addEventListener("pointermove", () => setInputModality("pointer"), true);
+}
+function interact(next) {
+	interactedAt = Date.now();
+	setInputModality(next);
+}
+/** When the person last pressed a key or a pointer (not a pointer move), or null before that. */
+function lastInteractionAt() {
+	return interactedAt;
+}
+function setInputModality(next) {
+	if (next === modality && installed) {
+		if (document.documentElement.getAttribute("data-nsaa-input") === next) return;
+	}
+	modality = next;
+	if (typeof document !== "undefined") document.documentElement.setAttribute(MODALITY_ATTRIBUTE, next);
+}
+function getInputModality() {
+	return modality;
+}
+export { MODALITY_ATTRIBUTE, getInputModality, lastInteractionAt, setInputModality, trackInputModality };

package/dist/lib/merge-refs.js

@@ -0,0 +1,21 @@
+"use client";
+// src/lib/merge-refs.ts
+/** Combines refs into one callback ref (React 19 cleanup-aware). */
+function mergeRefs(...refs) {
+	return (node) => {
+		const cleanups = [];
+		for (const ref of refs) if (typeof ref === "function") {
+			const cleanup = ref(node);
+			cleanups.push(typeof cleanup === "function" ? cleanup : () => ref(null));
+		} else if (ref) {
+			ref.current = node;
+			cleanups.push(() => {
+				ref.current = null;
+			});
+		}
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	};
+}
+export { mergeRefs };

package/dist/lib/shortcut.js

@@ -0,0 +1,50 @@
+"use client";
+// src/lib/shortcut.ts
+const APPLE = /Mac|iPhone|iPad|iPod/i;
+function isApple() {
+	if (typeof navigator === "undefined") return false;
+	const nav = navigator;
+	return APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? nav.userAgent);
+}
+const APPLE_KEYS = {
+	mod: "⌘",
+	ctrl: "⌃",
+	alt: "⌥",
+	shift: "⇧"
+};
+const OTHER_KEYS = {
+	mod: "Ctrl",
+	ctrl: "Ctrl",
+	alt: "Alt",
+	shift: "Shift"
+};
+const ARIA_KEYS = {
+	mod: ["Meta", "Control"],
+	ctrl: ["Control", "Control"],
+	alt: ["Alt", "Alt"],
+	shift: ["Shift", "Shift"]
+};
+/**
+* The same shortcut for `aria-keyshortcuts` (`"mod+B"` → `"Meta+B"` on Apple, `"Control+B"`
+* elsewhere), so assistive tech gets what the tooltip shows only visually.
+*/
+function ariaShortcut(shortcut, apple = isApple()) {
+	return shortcut.split("+").map((part) => {
+		const key = part.trim();
+		const named = ARIA_KEYS[key.toLowerCase()];
+		if (named) return apple ? named[0] : named[1];
+		return key.length === 1 ? key.toUpperCase() : key;
+	}).join("+");
+}
+/**
+* Formats a display-only shortcut such as `"mod+B"`: `⌘B` on Apple platforms, `Ctrl+B` elsewhere.
+* The app binds the keys; this only shows them.
+*/
+function formatShortcut(shortcut, apple = isApple()) {
+	const keys = apple ? APPLE_KEYS : OTHER_KEYS;
+	return shortcut.split("+").map((part) => {
+		const key = part.trim();
+		return keys[key.toLowerCase()] ?? (key.length === 1 ? key.toUpperCase() : key);
+	}).join(apple ? "" : "+");
+}
+export { ariaShortcut, formatShortcut };

package/dist/lib/track-input-modality.d.ts

@@ -0,0 +1,2 @@
+
+export {}

package/dist/lib/track-input-modality.js

@@ -0,0 +1,4 @@
+"use client";
+import { trackInputModality } from "./input-modality.js";
+// src/lib/track-input-modality.ts
+trackInputModality();

package/dist/lib/tv.js

@@ -0,0 +1,7 @@
+"use client";
+import { twMergeConfig } from "./cn.js";
+import { createTV } from "tailwind-variants";
+// src/lib/tv.ts
+/** tailwind-variants configured with the same merge rules as cn(). */
+const tv = createTV({ twMergeConfig });
+export { tv };

package/dist/lib/use-press.js

@@ -0,0 +1,48 @@
+"use client";
+import { scale, spring } from "../tokens/dist/motion.js";
+import { useCallback, useRef } from "react";
+import { animate, useReducedMotion, useReducedMotionConfig } from "motion/react";
+// src/lib/use-press.ts
+/**
+* Parts of a larger shape, or high-frequency toggles: their buttons don't scale on their own
+* (legacy `pressScale={false}`). A Toggle Group outside a Toolbar counts too (#128, alpha-4), and
+* Pagination and the Calendar's day grid (#136).
+*/
+const SEGMENT = "[data-slot=\"input-group\"], [data-slot=\"button-group\"], [data-slot=\"toolbar\"], [data-slot=\"toggle-group\"], [data-slot=\"pagination-link\"], [data-slot=\"calendar\"]";
+/**
+* Pointer-only press: scale to `scale.press` on pointer-down and back on release, on `spring.snap`,
+* interruptible from the live value. Never on hover, on keyboard activation, when disabled, under
+* reduced motion (the OS or `<html data-motion>`), or inside a segmented shape.
+*/
+function usePress() {
+	const prefersReduced = useReducedMotion() ?? false;
+	const configReduced = useReducedMotionConfig() ?? false;
+	const pressed = useRef(null);
+	const reduced = useCallback(() => {
+		const html = document.documentElement.dataset.motion;
+		if (html === "reduce") return true;
+		if (html === "full") return false;
+		return prefersReduced || configReduced;
+	}, [prefersReduced, configReduced]);
+	const release = useCallback(() => {
+		const el = pressed.current;
+		if (!el) return;
+		pressed.current = null;
+		animate(el, { scale: 1 }, spring.snap);
+	}, []);
+	return {
+		onPointerDown: useCallback((event) => {
+			const el = event.currentTarget;
+			if (event.defaultPrevented || event.button !== 0 || reduced()) return;
+			if (el.matches(":disabled, [aria-disabled='true'], [data-disabled]")) return;
+			if (el.closest(SEGMENT)) return;
+			if (el.hasAttribute("aria-haspopup")) return;
+			pressed.current = el;
+			animate(el, { scale: scale.press }, spring.snap);
+		}, [reduced]),
+		onPointerUp: release,
+		onPointerLeave: release,
+		onPointerCancel: release
+	};
+}
+export { usePress };

package/dist/lib/user-action.js

@@ -0,0 +1,13 @@
+"use client";
+import { lastInteractionAt } from "./input-modality.js";
+// src/lib/user-action.ts
+/** How long after a key press or pointer down something counts as its result (the browsers' own
+* transient-activation window). */
+const USER_ACTION_WINDOW_MS = 5e3;
+/** True when the person pressed a key or a pointer within the window: a state that appears now is
+* most likely their action's result (a failed payment Alert), not something on load. */
+function recentUserAction(now = Date.now()) {
+	const at = lastInteractionAt();
+	return at !== null && now - at < 5e3;
+}
+export { USER_ACTION_WINDOW_MS, recentUserAction };

package/dist/loaders/arc.d.ts

@@ -0,0 +1,6 @@
+
+import { SpinnerProps } from "./types.js";
+import { CapProps } from "./cap.js";
+import { EasingProps } from "./easing.js";
+export interface ArcProps extends SpinnerProps, EasingProps, CapProps {}
+export declare function Arc({ cap, easing, ...rest }: ArcProps): import("react").JSX.Element;

package/dist/loaders/arc.js

@@ -0,0 +1,31 @@
+"use client";
+import { linecap } from "./cap.js";
+import { rotationCss, spinClass } from "./easing.js";
+import { SpinnerStyle, spinnerRoot } from "./frame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/loaders/arc.tsx
+const css = `
+${rotationCss("arc")}
+`;
+function Arc({ cap, easing, ...rest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerStyle, {
+		name: "arc",
+		children: css
+	}), /* @__PURE__ */ jsx("svg", {
+		...spinnerRoot("arc", rest),
+		fill: "none",
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		children: /* @__PURE__ */ jsx("circle", {
+			className: spinClass("arc", easing),
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeDasharray: "18 44.8",
+			strokeLinecap: linecap(cap),
+			strokeWidth: "2.5"
+		})
+	})] });
+}
+export { Arc };

package/dist/loaders/atom.d.ts

@@ -0,0 +1,5 @@
+
+import { SpinnerProps } from "./types.js";
+import { EasingProps } from "./easing.js";
+export interface AtomProps extends SpinnerProps, EasingProps {}
+export declare function Atom({ easing, ...rest }: AtomProps): import("react").JSX.Element;