@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/inline-confirm/inline-confirm.tsx

@@ -0,0 +1,363 @@
+"use client";
+
+// Ported from bencho Inline confirm (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import { Button } from "@/components/button";
+import { cn } from "@/lib/utils";
+
+/*
+ * A destructive button that asks before it acts, in place.
+ *
+ * idle → asking → done → idle. The pill's width follows its content: each
+ * phase is measured (the content is `w-max`, so it is never squeezed by the
+ * shell) and the shell's inline size transitions to it with an overshoot,
+ * clipping the content while it resizes. Content swaps instantly; the springy
+ * width is the whole animation, exactly as in the source.
+ *
+ * Added over the source, which it lists as missing: focus follows the phase
+ * (Keep, the safe answer, when asking; Undo once done; the trigger again when
+ * it resets), Escape cancels asking, and "Deleted" is announced politely. The
+ * undo window pauses while keyboard focus is inside it, so nobody loses it
+ * mid-reach (WCAG 2.2.1).
+ */
+
+const PREFIX = "dowel-inline-confirm";
+
+/*
+ * The fuse is a clock, not decoration: its duration is the undo window itself,
+ * so it deliberately does not run through --motion-scale (a sped-up fuse would
+ * lie about the time left). Under reduced motion it stays drawn and still.
+ */
+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",
+);
+
+export type InlineConfirmPhase = "idle" | "asking" | "done";
+
+export 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;
+}
+
+function Glyph({ d }: { d: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={d} />
+    </svg>
+  );
+}
+
+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. */
+export function InlineConfirm({
+  className,
+  shape,
+  stroke,
+  label = "Delete file",
+  icon,
+  cancelLabel = "Keep",
+  confirmLabel = "Delete",
+  doneLabel = "Deleted",
+  undoLabel = "Undo",
+  announcement,
+  undoWindow = 4000,
+  onConfirm,
+  onUndo,
+  onPhaseChange,
+  disabled,
+  onPointerDown,
+  onFocus,
+  onBlur,
+  style,
+  ref,
+  ...props
+}: InlineConfirmProps) {
+  const labelId = useId();
+  const [phase, setPhaseState] = useState<InlineConfirmPhase>("idle");
+  const [announced, setAnnounced] = useState("");
+  const [paused, setPaused] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const faceRef = useRef<HTMLButtonElement | null>(null);
+  const keepRef = useRef<HTMLButtonElement | null>(null);
+  const undoRef = useRef<HTMLButtonElement | null>(null);
+  const focusNext = useRef<"face" | "keep" | "undo" | null>(null);
+  // Whether the pointer put focus here. Keyboard focus inside the control
+  // pauses the undo window; the programmatic focus that follows a click does
+  // not, or a mouse user would never see it burn down.
+  const pointer = useRef(false);
+  const remaining = useRef(undoWindow);
+
+  const setPhase = useCallback(
+    (next: InlineConfirmPhase, focus: "face" | "keep" | "undo" | null) => {
+      focusNext.current = focus;
+      setPhaseState(next);
+      onPhaseChange?.(next);
+    },
+    [onPhaseChange],
+  );
+
+  // Width follows content. Written to the DOM rather than state: it is a
+  // measurement of what just rendered, and a re-render would be one frame late.
+  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]);
+
+  // Focus follows the phase — but only when the user moved it there.
+  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]);
+
+  // The undo window: counts down, and pauses while keyboard focus is inside.
+  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");
+  }
+
+  // On each segment rather than the group: the group itself is not interactive.
+  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    pointer.current = false;
+    if (event.defaultPrevented || event.key !== "Escape" || phase !== "asking") return;
+    event.preventDefault();
+    setPhase("idle", "face");
+  }
+
+  return (
+    <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 || undefined}
+      className={cn(inlineConfirmVariants({ shape, stroke }), className)}
+      style={
+        { ...style, "--inline-confirm-window": `${String(undoWindow)}ms` } as CSSProperties
+      }
+      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}
+    >
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <span id={labelId} hidden>
+        {label}
+      </span>
+      <div
+        ref={contentRef}
+        data-slot="inline-confirm-content"
+        className="flex h-full w-max min-w-full items-stretch"
+      >
+        {phase === "idle" ? (
+          <Button
+            ref={faceRef}
+            variant="ghost"
+            data-slot="inline-confirm-trigger"
+            onKeyDown={handleKeyDown}
+            disabled={disabled}
+            className={cn(segment, "w-full gap-2 hover:bg-foreground/6")}
+            onClick={() => {
+              setPhase("asking", "keep");
+            }}
+          >
+            {icon === undefined ? <Glyph d={BIN} /> : icon}
+            {label}
+          </Button>
+        ) : null}
+        {phase === "asking" ? (
+          <>
+            <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");
+              }}
+            >
+              {cancelLabel}
+            </Button>
+            <span
+              aria-hidden="true"
+              data-slot="inline-confirm-seam"
+              className="my-auto h-5 w-px shrink-0 bg-foreground/12"
+            />
+            <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}
+            >
+              {confirmLabel}
+            </Button>
+          </>
+        ) : null}
+        {phase === "done" ? (
+          <>
+            <span
+              data-slot="inline-confirm-done"
+              className="flex items-center gap-1.5 ps-3.5 pe-3 text-muted-foreground [&_svg]:size-4"
+            >
+              <Glyph d={CHECK} />
+              {doneLabel}
+            </span>
+            <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}
+            >
+              <Glyph d={UNDO} />
+              {undoLabel}
+              <i
+                aria-hidden="true"
+                data-slot="inline-confirm-fuse"
+                className="absolute inset-x-0 bottom-0 h-[1.5px] bg-foreground/35"
+              />
+            </Button>
+          </>
+        ) : null}
+      </div>
+      <span role="status" aria-live="polite" className="sr-only">
+        {announced}
+      </span>
+    </div>
+  );
+}
+
+export { inlineConfirmVariants };

package/src/components/inline-confirm/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export 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.",
+});

package/src/components/input/floating-label-input.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+// Motion from SmoothUI AnimatedInput (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva } from "class-variance-authority";
+import { useId, type ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { Input, type InputProps } from "./input";
+
+/*
+ * An Input whose label rests inside the field and floats up onto the border
+ * when the field is focused or holds a value.
+ *
+ * The source drives the label from React state and a JS tween. Here it is CSS
+ * alone: the input carries a placeholder (a single space when none is given),
+ * so `:placeholder-shown` is true exactly when the field is empty, and the
+ * label is a `peer-` of the input. That covers typing, controlled values set
+ * from outside, form resets and browser autofill without an effect in sight,
+ * and the global reduced-motion rule turns the float into a jump.
+ *
+ * The label is a real <label for>, never a placeholder standing in for one:
+ * it is the accessible name at rest and while floated alike.
+ */
+
+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",
+    // Grows from its inline-start edge, so it stays put against the border in RTL.
+    "origin-[0_50%] rtl:origin-[100%_50%]",
+    "transition-[top,scale,color] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+    // Floated: focused, holding a value, or autofilled.
+    "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",
+    },
+  },
+);
+
+export 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.
+ */
+export function FloatingLabelInput({
+  label,
+  containerClassName,
+  labelClassName,
+  inputSize,
+  id,
+  placeholder,
+  className,
+  ...props
+}: FloatingLabelInputProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+
+  return (
+    <div data-slot="floating-label-input" className={cn("relative", containerClassName)}>
+      <Input
+        id={inputId}
+        inputSize={inputSize}
+        // A space keeps :placeholder-shown meaningful when there is no hint;
+        // a real hint only shows once the label has moved out of its way.
+        placeholder={placeholder ?? " "}
+        className={cn(
+          "peer placeholder:text-transparent focus:placeholder:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      />
+      <label
+        htmlFor={inputId}
+        data-slot="floating-label-input-label"
+        className={cn(floatingLabelVariants({ inputSize }), labelClassName)}
+      >
+        {label}
+      </label>
+    </div>
+  );
+}
+
+export { floatingLabelVariants };

package/src/components/input/index.ts

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

package/src/components/input/meta.ts

@@ -8,8 +8,9 @@ export const meta = defineMeta({
   status: "stable",
   dependencies: ["class-variance-authority"],
   registryDependencies: [],
-  files: ["input.tsx"],
+  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.",
+    "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.",
 });