@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/inline-confirm/inline-confirm.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/inline-confirm/inline-confirm.d.ts
+declare const inlineConfirmVariants: (props?: ({
+  shape?: "pill" | "rounded" | "square" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InlineConfirmPhase = "idle" | "asking" | "done";
+interface InlineConfirmProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof inlineConfirmVariants> {
+  /** The trigger's text, e.g. "Delete file". Also names the group. */
+  label?: ReactNode;
+  /** Leading icon on the trigger. Defaults to a bin; `null` removes it. */
+  icon?: ReactNode;
+  /** The safe answer, focused when asking. */
+  cancelLabel?: ReactNode;
+  /** The destructive answer. */
+  confirmLabel?: ReactNode;
+  /** Shown once confirmed. */
+  doneLabel?: ReactNode;
+  undoLabel?: ReactNode;
+  /** Announced when confirmed. Defaults to `doneLabel` when it is text. */
+  announcement?: string;
+  /** Milliseconds the undo stays available. It pauses while keyboard focus is inside. */
+  undoWindow?: number;
+  /** Called when the destructive answer is chosen. */
+  onConfirm?: () => void;
+  /** Called when Undo is pressed within the window. */
+  onUndo?: () => void;
+  /** Called on every phase change. */
+  onPhaseChange?: (phase: InlineConfirmPhase) => void;
+  /** Disables the trigger. */
+  disabled?: boolean;
+}
+/** A button that turns into Keep / Delete, then into Deleted / Undo. */
+declare function InlineConfirm({ className, shape, stroke, label, icon, cancelLabel, confirmLabel, doneLabel, undoLabel, announcement, undoWindow, onConfirm, onUndo, onPhaseChange, disabled, onPointerDown, onFocus, onBlur, style, ref, ...props }: InlineConfirmProps): import("react").JSX.Element;
+//#endregion
+export { InlineConfirm, InlineConfirmPhase, InlineConfirmProps, inlineConfirmVariants };
+//# sourceMappingURL=inline-confirm.d.ts.map

package/dist/components/inline-confirm/inline-confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-confirm.d.ts","names":[],"sources":["../../../src/components/inline-confirm/inline-confirm.tsx"],"mappings":";;;cAmDM,wBAAqB;;;6CAoB1B;KAQW;UAEK,2BAEb,KAAK,2CACL,oBAAoB;;EAEtB,QAAQ;;EAER,OAAO;;EAEP,cAAc;;EAEd,eAAe;;EAEf,YAAY;EACZ,YAAY;;EAEZ;;EAEA;;EAEA;;EAEA;;EAEA,iBAAiB,OAAO;;EAExB;;;iBAwBc,gBACd,WACA,OACA,QACA,OACA,MACA,aACA,cACA,WACA,WACA,cACA,YACA,WACA,QACA,eACA,UACA,eACA,SACA,QACA,OACA,QACG,SACF,qCAAkB,IAAA"}

package/dist/components/inline-confirm/inline-confirm.js

@@ -0,0 +1,246 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/inline-confirm/inline-confirm.tsx
+const PREFIX = "dowel-inline-confirm";
+const STYLES = `
+@keyframes ${PREFIX}-fuse{from{transform:scaleX(1)}to{transform:scaleX(0)}}
+[data-slot=inline-confirm-fuse]{transform-origin:left;animation:${PREFIX}-fuse var(--inline-confirm-window,4s) linear both}
+[data-slot=inline-confirm-fuse]:dir(rtl){transform-origin:right}
+[data-slot=inline-confirm][data-paused] [data-slot=inline-confirm-fuse]{animation-play-state:paused}
+@media (prefers-reduced-motion: reduce){[data-slot=inline-confirm-fuse]{animation:none}}
+`;
+const inlineConfirmVariants = cva(cn("relative inline-flex h-11 max-w-full shrink-0 overflow-hidden bg-card text-sm text-card-foreground", "transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]"), {
+	variants: {
+		shape: {
+			pill: "rounded-full",
+			rounded: "rounded-xl",
+			square: "rounded-md"
+		},
+		/** A hairline ring on the pill — the source's Stroke switch. */
+		stroke: {
+			true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		shape: "pill",
+		stroke: true
+	}
+});
+/** Every segment is a Button, flattened to fill the pill edge to edge. */
+const segment = cn("h-full rounded-none px-4 font-normal", "focus-visible:ring-offset-0 focus-visible:ring-inset");
+function Glyph({ d }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+}
+const BIN = "M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 5v6m4-6v6";
+const CHECK = "m5 13 4 4L19 7";
+const UNDO = "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11";
+/** A button that turns into Keep / Delete, then into Deleted / Undo. */
+function InlineConfirm({ className, shape, stroke, label = "Delete file", icon, cancelLabel = "Keep", confirmLabel = "Delete", doneLabel = "Deleted", undoLabel = "Undo", announcement, undoWindow = 4e3, onConfirm, onUndo, onPhaseChange, disabled, onPointerDown, onFocus, onBlur, style, ref, ...props }) {
+	const labelId = useId();
+	const [phase, setPhaseState] = useState("idle");
+	const [announced, setAnnounced] = useState("");
+	const [paused, setPaused] = useState(false);
+	const rootRef = useRef(null);
+	const contentRef = useRef(null);
+	const faceRef = useRef(null);
+	const keepRef = useRef(null);
+	const undoRef = useRef(null);
+	const focusNext = useRef(null);
+	const pointer = useRef(false);
+	const remaining = useRef(undoWindow);
+	const setPhase = useCallback((next, focus) => {
+		focusNext.current = focus;
+		setPhaseState(next);
+		onPhaseChange?.(next);
+	}, [onPhaseChange]);
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		const width = contentRef.current?.scrollWidth ?? 0;
+		if (root && width > 0) root.style.width = `${String(width)}px`;
+	}, [
+		phase,
+		label,
+		cancelLabel,
+		confirmLabel,
+		doneLabel,
+		undoLabel
+	]);
+	useEffect(() => {
+		const target = focusNext.current;
+		focusNext.current = null;
+		if (target === "face") faceRef.current?.focus();
+		else if (target === "keep") keepRef.current?.focus();
+		else if (target === "undo") undoRef.current?.focus();
+	}, [phase]);
+	useEffect(() => {
+		if (phase !== "done" || paused) return;
+		const started = Date.now();
+		const timer = setTimeout(() => {
+			const hadFocus = rootRef.current?.contains(document.activeElement) ?? false;
+			setAnnounced("");
+			setPhase("idle", hadFocus ? "face" : null);
+		}, remaining.current);
+		return () => {
+			clearTimeout(timer);
+			remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+		};
+	}, [
+		phase,
+		paused,
+		setPhase
+	]);
+	function confirm() {
+		remaining.current = undoWindow;
+		onConfirm?.();
+		setAnnounced(announcement ?? (typeof doneLabel === "string" ? doneLabel : "Done"));
+		setPhase("done", "undo");
+	}
+	function undo() {
+		onUndo?.();
+		setAnnounced("");
+		setPhase("idle", "face");
+	}
+	function handleKeyDown(event) {
+		pointer.current = false;
+		if (event.defaultPrevented || event.key !== "Escape" || phase !== "asking") return;
+		event.preventDefault();
+		setPhase("idle", "face");
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			rootRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		role: "group",
+		"aria-labelledby": labelId,
+		"data-slot": "inline-confirm",
+		"data-phase": phase,
+		"data-paused": paused || void 0,
+		className: cn(inlineConfirmVariants({
+			shape,
+			stroke
+		}), className),
+		style: {
+			...style,
+			"--inline-confirm-window": `${String(undoWindow)}ms`
+		},
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			pointer.current = true;
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			setPaused(!pointer.current);
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (event.currentTarget.contains(event.relatedTarget)) return;
+			pointer.current = false;
+			setPaused(false);
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				hidden: true,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
+				"data-slot": "inline-confirm-content",
+				className: "flex h-full w-max min-w-full items-stretch",
+				children: [
+					phase === "idle" ? /* @__PURE__ */ jsxs(Button, {
+						ref: faceRef,
+						variant: "ghost",
+						"data-slot": "inline-confirm-trigger",
+						onKeyDown: handleKeyDown,
+						disabled,
+						className: cn(segment, "w-full gap-2 hover:bg-foreground/6"),
+						onClick: () => {
+							setPhase("asking", "keep");
+						},
+						children: [icon === void 0 ? /* @__PURE__ */ jsx(Glyph, { d: BIN }) : icon, label]
+					}) : null,
+					phase === "asking" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Button, {
+							ref: keepRef,
+							variant: "ghost",
+							"data-slot": "inline-confirm-cancel",
+							onKeyDown: handleKeyDown,
+							className: cn(segment, "flex-1 hover:bg-foreground/6"),
+							onClick: () => {
+								setPhase("idle", "face");
+							},
+							children: cancelLabel
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-slot": "inline-confirm-seam",
+							className: "my-auto h-5 w-px shrink-0 bg-foreground/12"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							"data-slot": "inline-confirm-confirm",
+							onKeyDown: handleKeyDown,
+							className: cn(segment, "flex-1 text-destructive hover:bg-destructive/10 hover:text-destructive"),
+							onClick: confirm,
+							children: confirmLabel
+						})
+					] }) : null,
+					phase === "done" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+						"data-slot": "inline-confirm-done",
+						className: "flex items-center gap-1.5 ps-3.5 pe-3 text-muted-foreground [&_svg]:size-4",
+						children: [/* @__PURE__ */ jsx(Glyph, { d: CHECK }), doneLabel]
+					}), /* @__PURE__ */ jsxs(Button, {
+						ref: undoRef,
+						variant: "ghost",
+						"data-slot": "inline-confirm-undo",
+						onKeyDown: handleKeyDown,
+						className: cn(segment, "relative ms-auto gap-1.5 bg-foreground/5 text-[0.8125rem] hover:bg-foreground/10"),
+						onClick: undo,
+						children: [
+							/* @__PURE__ */ jsx(Glyph, { d: UNDO }),
+							undoLabel,
+							/* @__PURE__ */ jsx("i", {
+								"aria-hidden": "true",
+								"data-slot": "inline-confirm-fuse",
+								className: "absolute inset-x-0 bottom-0 h-[1.5px] bg-foreground/35"
+							})
+						]
+					})] }) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announced
+			})
+		]
+	});
+}
+//#endregion
+export { InlineConfirm, inlineConfirmVariants };
+
+//# sourceMappingURL=inline-confirm.js.map

package/dist/components/inline-confirm/inline-confirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-confirm.js","names":[],"sources":["../../../src/components/inline-confirm/inline-confirm.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Inline confirm (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A destructive button that asks before it acts, in place.\n *\n * idle → asking → done → idle. The pill's width follows its content: each\n * phase is measured (the content is `w-max`, so it is never squeezed by the\n * shell) and the shell's inline size transitions to it with an overshoot,\n * clipping the content while it resizes. Content swaps instantly; the springy\n * width is the whole animation, exactly as in the source.\n *\n * Added over the source, which it lists as missing: focus follows the phase\n * (Keep, the safe answer, when asking; Undo once done; the trigger again when\n * it resets), Escape cancels asking, and \"Deleted\" is announced politely. The\n * undo window pauses while keyboard focus is inside it, so nobody loses it\n * mid-reach (WCAG 2.2.1).\n */\n\nconst PREFIX = \"dowel-inline-confirm\";\n\n/*\n * The fuse is a clock, not decoration: its duration is the undo window itself,\n * so it deliberately does not run through --motion-scale (a sped-up fuse would\n * lie about the time left). Under reduced motion it stays drawn and still.\n */\nconst STYLES = `\n@keyframes ${PREFIX}-fuse{from{transform:scaleX(1)}to{transform:scaleX(0)}}\n[data-slot=inline-confirm-fuse]{transform-origin:left;animation:${PREFIX}-fuse var(--inline-confirm-window,4s) linear both}\n[data-slot=inline-confirm-fuse]:dir(rtl){transform-origin:right}\n[data-slot=inline-confirm][data-paused] [data-slot=inline-confirm-fuse]{animation-play-state:paused}\n@media (prefers-reduced-motion: reduce){[data-slot=inline-confirm-fuse]{animation:none}}\n`;\n\nconst inlineConfirmVariants = cva(\n  cn(\n    \"relative inline-flex h-11 max-w-full shrink-0 overflow-hidden bg-card text-sm text-card-foreground\",\n    \"transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n  ),\n  {\n    variants: {\n      shape: {\n        pill: \"rounded-full\",\n        rounded: \"rounded-xl\",\n        square: \"rounded-md\",\n      },\n      /** A hairline ring on the pill — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { shape: \"pill\", stroke: true },\n  },\n);\n\n/** Every segment is a Button, flattened to fill the pill edge to edge. */\nconst segment = cn(\n  \"h-full rounded-none px-4 font-normal\",\n  \"focus-visible:ring-offset-0 focus-visible:ring-inset\",\n);\n\nexport type InlineConfirmPhase = \"idle\" | \"asking\" | \"done\";\n\nexport interface InlineConfirmProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof inlineConfirmVariants> {\n  /** The trigger's text, e.g. \"Delete file\". Also names the group. */\n  label?: ReactNode;\n  /** Leading icon on the trigger. Defaults to a bin; `null` removes it. */\n  icon?: ReactNode;\n  /** The safe answer, focused when asking. */\n  cancelLabel?: ReactNode;\n  /** The destructive answer. */\n  confirmLabel?: ReactNode;\n  /** Shown once confirmed. */\n  doneLabel?: ReactNode;\n  undoLabel?: ReactNode;\n  /** Announced when confirmed. Defaults to `doneLabel` when it is text. */\n  announcement?: string;\n  /** Milliseconds the undo stays available. It pauses while keyboard focus is inside. */\n  undoWindow?: number;\n  /** Called when the destructive answer is chosen. */\n  onConfirm?: () => void;\n  /** Called when Undo is pressed within the window. */\n  onUndo?: () => void;\n  /** Called on every phase change. */\n  onPhaseChange?: (phase: InlineConfirmPhase) => void;\n  /** Disables the trigger. */\n  disabled?: boolean;\n}\n\nfunction Glyph({ d }: { d: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d={d} />\n    </svg>\n  );\n}\n\nconst BIN = \"M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 5v6m4-6v6\";\nconst CHECK = \"m5 13 4 4L19 7\";\nconst UNDO = \"M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11\";\n\n/** A button that turns into Keep / Delete, then into Deleted / Undo. */\nexport function InlineConfirm({\n  className,\n  shape,\n  stroke,\n  label = \"Delete file\",\n  icon,\n  cancelLabel = \"Keep\",\n  confirmLabel = \"Delete\",\n  doneLabel = \"Deleted\",\n  undoLabel = \"Undo\",\n  announcement,\n  undoWindow = 4000,\n  onConfirm,\n  onUndo,\n  onPhaseChange,\n  disabled,\n  onPointerDown,\n  onFocus,\n  onBlur,\n  style,\n  ref,\n  ...props\n}: InlineConfirmProps) {\n  const labelId = useId();\n  const [phase, setPhaseState] = useState<InlineConfirmPhase>(\"idle\");\n  const [announced, setAnnounced] = useState(\"\");\n  const [paused, setPaused] = useState(false);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const faceRef = useRef<HTMLButtonElement | null>(null);\n  const keepRef = useRef<HTMLButtonElement | null>(null);\n  const undoRef = useRef<HTMLButtonElement | null>(null);\n  const focusNext = useRef<\"face\" | \"keep\" | \"undo\" | null>(null);\n  // Whether the pointer put focus here. Keyboard focus inside the control\n  // pauses the undo window; the programmatic focus that follows a click does\n  // not, or a mouse user would never see it burn down.\n  const pointer = useRef(false);\n  const remaining = useRef(undoWindow);\n\n  const setPhase = useCallback(\n    (next: InlineConfirmPhase, focus: \"face\" | \"keep\" | \"undo\" | null) => {\n      focusNext.current = focus;\n      setPhaseState(next);\n      onPhaseChange?.(next);\n    },\n    [onPhaseChange],\n  );\n\n  // Width follows content. Written to the DOM rather than state: it is a\n  // measurement of what just rendered, and a re-render would be one frame late.\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const width = contentRef.current?.scrollWidth ?? 0;\n    if (root && width > 0) root.style.width = `${String(width)}px`;\n  }, [phase, label, cancelLabel, confirmLabel, doneLabel, undoLabel]);\n\n  // Focus follows the phase — but only when the user moved it there.\n  useEffect(() => {\n    const target = focusNext.current;\n    focusNext.current = null;\n    if (target === \"face\") faceRef.current?.focus();\n    else if (target === \"keep\") keepRef.current?.focus();\n    else if (target === \"undo\") undoRef.current?.focus();\n  }, [phase]);\n\n  // The undo window: counts down, and pauses while keyboard focus is inside.\n  useEffect(() => {\n    if (phase !== \"done\" || paused) return;\n    const started = Date.now();\n    const timer = setTimeout(() => {\n      const hadFocus = rootRef.current?.contains(document.activeElement) ?? false;\n      setAnnounced(\"\");\n      setPhase(\"idle\", hadFocus ? \"face\" : null);\n    }, remaining.current);\n    return () => {\n      clearTimeout(timer);\n      remaining.current = Math.max(0, remaining.current - (Date.now() - started));\n    };\n  }, [phase, paused, setPhase]);\n\n  function confirm() {\n    remaining.current = undoWindow;\n    onConfirm?.();\n    setAnnounced(announcement ?? (typeof doneLabel === \"string\" ? doneLabel : \"Done\"));\n    setPhase(\"done\", \"undo\");\n  }\n\n  function undo() {\n    onUndo?.();\n    setAnnounced(\"\");\n    setPhase(\"idle\", \"face\");\n  }\n\n  // On each segment rather than the group: the group itself is not interactive.\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    pointer.current = false;\n    if (event.defaultPrevented || event.key !== \"Escape\" || phase !== \"asking\") return;\n    event.preventDefault();\n    setPhase(\"idle\", \"face\");\n  }\n\n  return (\n    <div\n      ref={(node) => {\n        rootRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      role=\"group\"\n      aria-labelledby={labelId}\n      data-slot=\"inline-confirm\"\n      data-phase={phase}\n      data-paused={paused || undefined}\n      className={cn(inlineConfirmVariants({ shape, stroke }), className)}\n      style={\n        { ...style, \"--inline-confirm-window\": `${String(undoWindow)}ms` } as CSSProperties\n      }\n      onPointerDown={(event) => {\n        onPointerDown?.(event);\n        pointer.current = true;\n      }}\n      onFocus={(event) => {\n        onFocus?.(event);\n        setPaused(!pointer.current);\n      }}\n      onBlur={(event) => {\n        onBlur?.(event);\n        if (event.currentTarget.contains(event.relatedTarget)) return;\n        pointer.current = false;\n        setPaused(false);\n      }}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <span id={labelId} hidden>\n        {label}\n      </span>\n      <div\n        ref={contentRef}\n        data-slot=\"inline-confirm-content\"\n        className=\"flex h-full w-max min-w-full items-stretch\"\n      >\n        {phase === \"idle\" ? (\n          <Button\n            ref={faceRef}\n            variant=\"ghost\"\n            data-slot=\"inline-confirm-trigger\"\n            onKeyDown={handleKeyDown}\n            disabled={disabled}\n            className={cn(segment, \"w-full gap-2 hover:bg-foreground/6\")}\n            onClick={() => {\n              setPhase(\"asking\", \"keep\");\n            }}\n          >\n            {icon === undefined ? <Glyph d={BIN} /> : icon}\n            {label}\n          </Button>\n        ) : null}\n        {phase === \"asking\" ? (\n          <>\n            <Button\n              ref={keepRef}\n              variant=\"ghost\"\n              data-slot=\"inline-confirm-cancel\"\n              onKeyDown={handleKeyDown}\n              className={cn(segment, \"flex-1 hover:bg-foreground/6\")}\n              onClick={() => {\n                setPhase(\"idle\", \"face\");\n              }}\n            >\n              {cancelLabel}\n            </Button>\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"inline-confirm-seam\"\n              className=\"my-auto h-5 w-px shrink-0 bg-foreground/12\"\n            />\n            <Button\n              variant=\"ghost\"\n              data-slot=\"inline-confirm-confirm\"\n              onKeyDown={handleKeyDown}\n              className={cn(\n                segment,\n                \"flex-1 text-destructive hover:bg-destructive/10 hover:text-destructive\",\n              )}\n              onClick={confirm}\n            >\n              {confirmLabel}\n            </Button>\n          </>\n        ) : null}\n        {phase === \"done\" ? (\n          <>\n            <span\n              data-slot=\"inline-confirm-done\"\n              className=\"flex items-center gap-1.5 ps-3.5 pe-3 text-muted-foreground [&_svg]:size-4\"\n            >\n              <Glyph d={CHECK} />\n              {doneLabel}\n            </span>\n            <Button\n              ref={undoRef}\n              variant=\"ghost\"\n              data-slot=\"inline-confirm-undo\"\n              onKeyDown={handleKeyDown}\n              className={cn(\n                segment,\n                \"relative ms-auto gap-1.5 bg-foreground/5 text-[0.8125rem] hover:bg-foreground/10\",\n              )}\n              onClick={undo}\n            >\n              <Glyph d={UNDO} />\n              {undoLabel}\n              <i\n                aria-hidden=\"true\"\n                data-slot=\"inline-confirm-fuse\"\n                className=\"absolute inset-x-0 bottom-0 h-[1.5px] bg-foreground/35\"\n              />\n            </Button>\n          </>\n        ) : null}\n      </div>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announced}\n      </span>\n    </div>\n  );\n}\n\nexport { inlineConfirmVariants };\n"],"mappings":"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"}

package/dist/components/inline-confirm/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/inline-confirm/meta.ts
+const meta = defineMeta({
+	name: "inline-confirm",
+	title: "Inline Confirm",
+	description: "A destructive button that asks in place — it widens into Keep / Delete, then offers a timed Undo.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["inline-confirm.tsx"],
+	a11y: "A labelled group of real buttons. Asking moves focus to \"Keep\", the safe answer; Escape cancels and returns focus to the trigger. Confirming moves focus to \"Undo\" and announces the done label through a polite live region. The undo window pauses while keyboard focus is inside it, and its fuse stays still under reduced motion. When the window closes, focus returns to the trigger if it was inside."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/inline-confirm/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/inline-confirm/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"inline-confirm\",\n  title: \"Inline Confirm\",\n  description:\n    \"A destructive button that asks in place — it widens into Keep / Delete, then offers a timed Undo.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"inline-confirm.tsx\"],\n  a11y:\n    'A labelled group of real buttons. Asking moves focus to \"Keep\", the safe answer; Escape cancels and ' +\n    'returns focus to the trigger. Confirming moves focus to \"Undo\" and announces the done label through a ' +\n    \"polite live region. The undo window pauses while keyboard focus is inside it, and its fuse stays still \" +\n    \"under reduced motion. When the window closes, focus returns to the trigger if it was inside.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAIJ,CAAC"}

package/dist/components/input/floating-label-input.d.ts

@@ -0,0 +1,26 @@
+import { InputProps } from "./input.js";
+import { ReactNode } from "react";
+//#region src/components/input/floating-label-input.d.ts
+declare const floatingLabelVariants: (props?: ({
+  inputSize?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface FloatingLabelInputProps extends InputProps {
+  /** The field's label. Rendered as a real `<label>` pointing at the input. */
+  label: ReactNode;
+  /** Classes for the positioned wrapper. `className` goes to the input, as on Input. */
+  containerClassName?: string;
+  /** Classes for the label. */
+  labelClassName?: string;
+}
+/**
+ * Input with a floating label.
+ *
+ * Every prop but the three above is forwarded to the `<input>`, including `id`,
+ * `ref` and ARIA attributes — so it drops into `FormControl`, which injects the
+ * field's id, `aria-describedby` and `aria-invalid` into its child, and the
+ * label follows the id it is given.
+ */
+declare function FloatingLabelInput({ label, containerClassName, labelClassName, inputSize, id, placeholder, className, ...props }: FloatingLabelInputProps): import("react").JSX.Element;
+//#endregion
+export { FloatingLabelInput, FloatingLabelInputProps, floatingLabelVariants };
+//# sourceMappingURL=floating-label-input.d.ts.map

package/dist/components/input/floating-label-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-label-input.d.ts","names":[],"sources":["../../../src/components/input/floating-label-input.tsx"],"mappings":";;;cAyBM,wBAAqB;;6CA2B1B;UAEgB,gCAAgC;;EAE/C,OAAO;;EAEP;;EAEA;;;;;;;;;;iBAWc,qBACd,OACA,oBACA,gBACA,WACA,IACA,aACA,cACG,SACF,0CAAuB,IAAA"}

package/dist/components/input/floating-label-input.js

@@ -0,0 +1,47 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Input } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+//#region src/components/input/floating-label-input.tsx
+const floatingLabelVariants = cva(cn("pointer-events-none absolute top-1/2 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate", "rounded-sm bg-background px-1 leading-none text-muted-foreground select-none", "origin-[0_50%] rtl:origin-[100%_50%]", "transition-[top,scale,color] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "peer-focus:top-0 peer-focus:scale-85", "peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:scale-85", "peer-autofill:top-0 peer-autofill:scale-85", "peer-[:focus:not([aria-invalid=true])]:text-primary", "peer-aria-invalid:text-destructive", "peer-disabled:opacity-55"), {
+	variants: { inputSize: {
+		sm: "start-1.5 text-sm",
+		md: "start-2 text-sm",
+		lg: "start-2.5 text-base"
+	} },
+	defaultVariants: { inputSize: "md" }
+});
+/**
+* Input with a floating label.
+*
+* Every prop but the three above is forwarded to the `<input>`, including `id`,
+* `ref` and ARIA attributes — so it drops into `FormControl`, which injects the
+* field's id, `aria-describedby` and `aria-invalid` into its child, and the
+* label follows the id it is given.
+*/
+function FloatingLabelInput({ label, containerClassName, labelClassName, inputSize, id, placeholder, className, ...props }) {
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "floating-label-input",
+		className: cn("relative", containerClassName),
+		children: [/* @__PURE__ */ jsx(Input, {
+			id: inputId,
+			inputSize,
+			placeholder: placeholder ?? " ",
+			className: cn("peer placeholder:text-transparent focus:placeholder:text-muted-foreground", className),
+			...props
+		}), /* @__PURE__ */ jsx("label", {
+			htmlFor: inputId,
+			"data-slot": "floating-label-input-label",
+			className: cn(floatingLabelVariants({ inputSize }), labelClassName),
+			children: label
+		})]
+	});
+}
+//#endregion
+export { FloatingLabelInput, floatingLabelVariants };
+
+//# sourceMappingURL=floating-label-input.js.map

package/dist/components/input/floating-label-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-label-input.js","names":[],"sources":["../../../src/components/input/floating-label-input.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedInput (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport { useId, type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input, type InputProps } from \"./input\";\n\n/*\n * An Input whose label rests inside the field and floats up onto the border\n * when the field is focused or holds a value.\n *\n * The source drives the label from React state and a JS tween. Here it is CSS\n * alone: the input carries a placeholder (a single space when none is given),\n * so `:placeholder-shown` is true exactly when the field is empty, and the\n * label is a `peer-` of the input. That covers typing, controlled values set\n * from outside, form resets and browser autofill without an effect in sight,\n * and the global reduced-motion rule turns the float into a jump.\n *\n * The label is a real <label for>, never a placeholder standing in for one:\n * it is the accessible name at rest and while floated alike.\n */\n\nconst floatingLabelVariants = cva(\n  cn(\n    \"pointer-events-none absolute top-1/2 max-w-[calc(100%-1rem)] -translate-y-1/2 truncate\",\n    \"rounded-sm bg-background px-1 leading-none text-muted-foreground select-none\",\n    // Grows from its inline-start edge, so it stays put against the border in RTL.\n    \"origin-[0_50%] rtl:origin-[100%_50%]\",\n    \"transition-[top,scale,color] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n    // Floated: focused, holding a value, or autofilled.\n    \"peer-focus:top-0 peer-focus:scale-85\",\n    \"peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:scale-85\",\n    \"peer-autofill:top-0 peer-autofill:scale-85\",\n    \"peer-[:focus:not([aria-invalid=true])]:text-primary\",\n    \"peer-aria-invalid:text-destructive\",\n    \"peer-disabled:opacity-55\",\n  ),\n  {\n    variants: {\n      inputSize: {\n        sm: \"start-1.5 text-sm\",\n        md: \"start-2 text-sm\",\n        lg: \"start-2.5 text-base\",\n      },\n    },\n    defaultVariants: {\n      inputSize: \"md\",\n    },\n  },\n);\n\nexport interface FloatingLabelInputProps extends InputProps {\n  /** The field's label. Rendered as a real `<label>` pointing at the input. */\n  label: ReactNode;\n  /** Classes for the positioned wrapper. `className` goes to the input, as on Input. */\n  containerClassName?: string;\n  /** Classes for the label. */\n  labelClassName?: string;\n}\n\n/**\n * Input with a floating label.\n *\n * Every prop but the three above is forwarded to the `<input>`, including `id`,\n * `ref` and ARIA attributes — so it drops into `FormControl`, which injects the\n * field's id, `aria-describedby` and `aria-invalid` into its child, and the\n * label follows the id it is given.\n */\nexport function FloatingLabelInput({\n  label,\n  containerClassName,\n  labelClassName,\n  inputSize,\n  id,\n  placeholder,\n  className,\n  ...props\n}: FloatingLabelInputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  return (\n    <div data-slot=\"floating-label-input\" className={cn(\"relative\", containerClassName)}>\n      <Input\n        id={inputId}\n        inputSize={inputSize}\n        // A space keeps :placeholder-shown meaningful when there is no hint;\n        // a real hint only shows once the label has moved out of its way.\n        placeholder={placeholder ?? \" \"}\n        className={cn(\n          \"peer placeholder:text-transparent focus:placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n      <label\n        htmlFor={inputId}\n        data-slot=\"floating-label-input-label\"\n        className={cn(floatingLabelVariants({ inputSize }), labelClassName)}\n      >\n        {label}\n      </label>\n    </div>\n  );\n}\n\nexport { floatingLabelVariants };\n"],"mappings":";;;;;;;AAyBA,MAAM,wBAAwB,IAC5B,GACE,0FACA,gFAEA,wCACA,+FAEA,wCACA,kFACA,8CACA,uDACA,sCACA,0BACF,GACA;CACE,UAAU,EACR,WAAW;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,WAAW,KACb;AACF,CACF;;;;;;;;;AAmBA,SAAgB,mBAAmB,EACjC,OACA,oBACA,gBACA,WACA,IACA,aACA,WACA,GAAG,SACuB;CAC1B,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EAAK,aAAU;EAAuB,WAAW,GAAG,YAAY,kBAAkB;EAAlF,UAAA,CACE,oBAAC,OAAD;GACE,IAAI;GACO;GAGX,aAAa,eAAe;GAC5B,WAAW,GACT,6EACA,SACF;GACA,GAAI;EACL,CAAA,GACD,oBAAC,SAAD;GACE,SAAS;GACT,aAAU;GACV,WAAW,GAAG,sBAAsB,EAAE,UAAU,CAAC,GAAG,cAAc;GAEjE,UAAA;EACI,CAAA,CACJ;;AAET"}

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

@@ -1,2 +1,3 @@
 import { Input, InputProps, inputVariants } from "./input.js";
-export { Input, type InputProps, inputVariants };
+import { FloatingLabelInput, FloatingLabelInputProps, floatingLabelVariants } from "./floating-label-input.js";
+export { FloatingLabelInput, type FloatingLabelInputProps, Input, type InputProps, floatingLabelVariants, inputVariants };

package/dist/components/input/index.js

@@ -1,2 +1,3 @@
 import { Input, inputVariants } from "./input.js";
-export { Input, inputVariants };
+import { FloatingLabelInput, floatingLabelVariants } from "./floating-label-input.js";
+export { FloatingLabelInput, Input, floatingLabelVariants, inputVariants };

package/dist/components/input/input.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/input/input.tsx
-const inputVariants = cva(cn("flex 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", "file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "focus-visible:border-ring", "disabled:cursor-not-allowed disabled:opacity-55", focusRingInset, invalidStyles), {
+const inputVariants = cva(cn("flex 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", "file:me-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "focus-visible:border-ring", "disabled:cursor-not-allowed disabled:opacity-55", focusRingInset, invalidStyles), {
 	variants: { inputSize: {
 		sm: "h-8 px-2.5 text-sm",
 		md: "h-9 px-3 text-sm",

package/dist/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRingInset, invalidStyles } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"flex 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    \"file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n    \"focus-visible:border-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    focusRingInset,\n    invalidStyles,\n  ),\n  {\n    variants: {\n      inputSize: {\n        sm: \"h-8 px-2.5 text-sm\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-10 px-3.5 text-base\",\n      },\n    },\n    defaultVariants: {\n      inputSize: \"md\",\n    },\n  },\n);\n\nexport interface InputProps\n  extends ComponentPropsWithRef<\"input\">, VariantProps<typeof inputVariants> {}\n\n/**\n * Single-line text field.\n *\n * The visual size prop is named `inputSize` rather than `size` because `size`\n * is a native `<input>` attribute with unrelated semantics (a character-count\n * width hint). Naming it apart keeps both available instead of shadowing one.\n *\n * Error styling is driven by the native `aria-invalid` attribute rather than a\n * bespoke prop, so form libraries wire it up without an adapter.\n */\nexport function Input({ className, inputSize, type = \"text\", ...props }: InputProps) {\n  return (\n    <input type={type} className={cn(inputVariants({ inputSize }), className)} {...props} />\n  );\n}\n\nexport { inputVariants };\n"],"mappings":";;;;;AAMA,MAAM,gBAAgB,IACpB,GACE,8FACA,qGACA,qCACA,kGACA,6BACA,mDACA,gBACA,aACF,GACA;CACE,UAAU,EACR,WAAW;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,WAAW,KACb;AACF,CACF;;;;;;;;;;;AAeA,SAAgB,MAAM,EAAE,WAAW,WAAW,OAAO,QAAQ,GAAG,SAAqB;CACnF,OACE,oBAAC,SAAD;EAAa;EAAM,WAAW,GAAG,cAAc,EAAE,UAAU,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE3F"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRingInset, invalidStyles } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nconst inputVariants = cva(\n  cn(\n    \"flex 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    \"file:me-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n    \"focus-visible:border-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    focusRingInset,\n    invalidStyles,\n  ),\n  {\n    variants: {\n      inputSize: {\n        sm: \"h-8 px-2.5 text-sm\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-10 px-3.5 text-base\",\n      },\n    },\n    defaultVariants: {\n      inputSize: \"md\",\n    },\n  },\n);\n\nexport interface InputProps\n  extends ComponentPropsWithRef<\"input\">, VariantProps<typeof inputVariants> {}\n\n/**\n * Single-line text field.\n *\n * The visual size prop is named `inputSize` rather than `size` because `size`\n * is a native `<input>` attribute with unrelated semantics (a character-count\n * width hint). Naming it apart keeps both available instead of shadowing one.\n *\n * Error styling is driven by the native `aria-invalid` attribute rather than a\n * bespoke prop, so form libraries wire it up without an adapter.\n */\nexport function Input({ className, inputSize, type = \"text\", ...props }: InputProps) {\n  return (\n    <input type={type} className={cn(inputVariants({ inputSize }), className)} {...props} />\n  );\n}\n\nexport { inputVariants };\n"],"mappings":";;;;;AAMA,MAAM,gBAAgB,IACpB,GACE,8FACA,qGACA,qCACA,kGACA,6BACA,mDACA,gBACA,aACF,GACA;CACE,UAAU,EACR,WAAW;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,WAAW,KACb;AACF,CACF;;;;;;;;;;;AAeA,SAAgB,MAAM,EAAE,WAAW,WAAW,OAAO,QAAQ,GAAG,SAAqB;CACnF,OACE,oBAAC,SAAD;EAAa;EAAM,WAAW,GAAG,cAAc,EAAE,UAAU,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE3F"}

package/dist/components/input/meta.js

@@ -8,8 +8,8 @@ const meta = defineMeta({
 	status: "stable",
 	dependencies: ["class-variance-authority"],
 	registryDependencies: [],
-	files: ["input.tsx"],
-	a11y: "Always pair with a Label via htmlFor/id. Error state is driven by aria-invalid so assistive technology and styling stay in sync; describe the error with aria-describedby."
+	files: ["input.tsx", "floating-label-input.tsx"],
+	a11y: "Always pair with a Label via htmlFor/id. Error state is driven by aria-invalid so assistive technology and styling stay in sync; describe the error with aria-describedby. FloatingLabelInput keeps a real <label for> as the accessible name whether resting or floated, and floats it with CSS alone."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/input/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"input\",\n  title: \"Input\",\n  description: \"A single-line text field with size variants and native validation styling.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"input.tsx\"],\n  a11y:\n    \"Always pair with a Label via htmlFor/id. Error state is driven by aria-invalid so \" +\n    \"assistive technology and styling stay in sync; describe the error with aria-describedby.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,WAAW;CACnB,MACE;AAEJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/input/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"input\",\n  title: \"Input\",\n  description: \"A single-line text field with size variants and native validation styling.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"input.tsx\", \"floating-label-input.tsx\"],\n  a11y:\n    \"Always pair with a Label via htmlFor/id. Error state is driven by aria-invalid so \" +\n    \"assistive technology and styling stay in sync; describe the error with aria-describedby. FloatingLabelInput keeps a real <label for> \" +\n    \"as the accessible name whether resting or floated, and floats it with CSS alone.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa,0BAA0B;CAC/C,MACE;AAGJ,CAAC"}