@dowel-ui/react 0.4.0 → 0.7.0

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,157 @@
+import { Slot } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing, mirrorForDirection } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * Where this page sits in the hierarchy.
+ *
+ * Three things separate a breadcrumb that works from one that only looks like
+ * one, and all three are about the last item.
+ *
+ * It is not a link. A link to the page you are already on is a control that
+ * does nothing, and in a screen reader's list of links it is indistinguishable
+ * from the ones that go somewhere.
+ *
+ * It carries `aria-current="page"`. Bolding it says "you are here" to people
+ * who can see it and to nobody else.
+ *
+ * The separators are hidden. A slash between every item is read aloud as
+ * "slash" — "Home slash Projects slash Settings" — which is the punctuation of
+ * the design leaking into the content.
+ */
+
+export function Breadcrumb({ className, ...props }: ComponentPropsWithRef<"nav">) {
+  return (
+    <nav
+      // Named, because a page can have more than one navigation landmark and
+      // "navigation" on its own does not say which this is.
+      aria-label="Breadcrumb"
+      data-slot="breadcrumb"
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  );
+}
+
+export function BreadcrumbList({ className, ...props }: ComponentPropsWithRef<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function BreadcrumbItem({ className, ...props }: ComponentPropsWithRef<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+export interface BreadcrumbLinkProps extends ComponentPropsWithRef<"a"> {
+  /** Render the child as the link, for a router's own component. */
+  asChild?: boolean;
+}
+
+export function BreadcrumbLink({ className, asChild = false, ...props }: BreadcrumbLinkProps) {
+  const Component = asChild ? Slot.Root : "a";
+
+  return (
+    <Component
+      data-slot="breadcrumb-link"
+      className={cn(
+        "rounded-sm transition-colors duration-[var(--duration-fast)]",
+        "hover:text-foreground",
+        focusRing,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * The page you are on.
+ *
+ * A span, not a link: there is nowhere to go. `aria-current="page"` is what
+ * says "you are here" to anything that is not looking at the font weight.
+ */
+export function BreadcrumbPage({ className, ...props }: ComponentPropsWithRef<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-current="page"
+      className={cn("font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * The mark between items.
+ *
+ * Hidden from assistive technology and given no accessible name: the list
+ * structure already conveys the sequence, and reading "slash" between every
+ * item is the design's punctuation leaking into the content.
+ */
+export function BreadcrumbSeparator({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <svg viewBox="0 0 24 24" fill="none" className={mirrorForDirection}>
+          <path
+            d="m9 18 6-6-6-6"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </li>
+  );
+}
+
+/**
+ * Stands in for the middle of a long trail.
+ *
+ * Named rather than hidden, because unlike a separator it is *content*: it
+ * says levels have been left out. A bare "…" announces as nothing at all.
+ */
+export function BreadcrumbEllipsis({ className, ...props }: ComponentPropsWithRef<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      className={cn("flex size-5 items-center justify-center", className)}
+      {...props}
+    >
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden className="size-4">
+        <circle cx="5" cy="12" r="1.5" fill="currentColor" />
+        <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+        <circle cx="19" cy="12" r="1.5" fill="currentColor" />
+      </svg>
+      <span className="sr-only">Intermediate levels</span>
+    </span>
+  );
+}

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,10 @@
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  type BreadcrumbLinkProps,
+} from "./breadcrumb";

package/src/components/breadcrumb/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "breadcrumb",
+  title: "Breadcrumb",
+  description: "Where the current page sits in the hierarchy, and how to get back up it.",
+  category: "navigation",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["breadcrumb.tsx"],
+  a11y:
+    'The current page is a span carrying aria-current="page", not a link: a link to the page ' +
+    "you are already on does nothing, and in a list of links it is indistinguishable from the " +
+    "ones that go somewhere. Separators are hidden from assistive technology, because the list " +
+    'already conveys the sequence and reading "slash" between every item is the design\'s ' +
+    "punctuation leaking into the content. The ellipsis is the exception and is named, because " +
+    "it is content: it says levels have been left out.",
+});

package/src/components/calendar/calendar.tsx

@@ -70,12 +70,12 @@ export function Calendar({
         ),
         // Range middles keep the muted surface so the two ends stay legible as
         // the actual selection.
-        range_start: cn(defaults.range_start, "rounded-l-md bg-accent"),
+        range_start: cn(defaults.range_start, "rounded-s-md bg-accent"),
         range_middle: cn(
           defaults.range_middle,
           "bg-accent [&>button]:bg-transparent [&>button]:text-accent-foreground",
         ),
-        range_end: cn(defaults.range_end, "rounded-r-md bg-accent"),
+        range_end: cn(defaults.range_end, "rounded-e-md bg-accent"),
         today: cn(defaults.today, "[&>button]:font-semibold [&>button]:text-primary"),
         outside: cn(defaults.outside, "text-muted-foreground opacity-50"),
         disabled: cn(defaults.disabled, "opacity-40"),

package/src/components/code-block/code-block.tsx

@@ -143,7 +143,7 @@ export function CopyButton({
       onClick={copy}
       aria-label={label}
       className={cn(
-        "ml-auto grid size-6 shrink-0 place-items-center rounded text-muted-foreground",
+        "ms-auto grid size-6 shrink-0 place-items-center rounded text-muted-foreground",
         "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
         focusRing,
         className,

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * A section that opens and closes.
+ *
+ * Unlike Accordion, there is no set: one region, one trigger, no notion of
+ * "only one open at a time". Reaching for an Accordion with a single item
+ * gives that item a `heading` role and a position in a list of one, both of
+ * which are noise.
+ *
+ * The height animation is driven by the primitive's own measured height rather
+ * than a guess, so content of any size opens smoothly, and it derives from
+ * `--duration-*` so the motion scale applies.
+ */
+
+export type CollapsibleProps = ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>;
+
+/**
+ * Wrapped rather than re-exported.
+ *
+ * A bare `export const Collapsible = CollapsiblePrimitive.Root` leaves the
+ * inferred type pointing into the primitive's own package, which TypeScript
+ * cannot name in declaration output (TS2883). It also gives every other
+ * component's `data-slot` a hole where this one should be.
+ */
+export function Collapsible({ className, ...props }: CollapsibleProps) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" className={className} {...props} />;
+}
+
+export function CollapsibleTrigger({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Trigger>) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      className={cn("outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export function CollapsibleContent({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      className={cn(
+        "overflow-hidden",
+        "data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/collapsible/index.ts

@@ -0,0 +1,6 @@
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  type CollapsibleProps,
+} from "./collapsible";

package/src/components/collapsible/meta.ts

@@ -0,0 +1,16 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "collapsible",
+  title: "Collapsible",
+  description: "A single section that opens and closes, without an accordion's set semantics.",
+  category: "layout",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["collapsible.tsx"],
+  a11y:
+    "The trigger carries aria-expanded and points at the region it controls, both from the " +
+    "primitive. Reach for this rather than an Accordion of one item: a single-item Accordion " +
+    "gives its trigger a heading role and a position in a list of one, neither of which is true.",
+});

package/src/components/combobox/combobox.tsx

@@ -499,7 +499,7 @@ export function ComboboxItem({
         }
       }}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none",
         "transition-colors duration-[var(--duration-instant)]",
         "data-[active]:bg-accent data-[active]:text-accent-foreground",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
@@ -510,7 +510,7 @@ export function ComboboxItem({
     >
       {children ?? value}
       {selected ? (
-        <span className="absolute right-2 grid size-4 place-items-center">
+        <span className="absolute end-2 grid size-4 place-items-center">
           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
             <path
               d="m5 13 4 4L19 7"

package/src/components/command/command.tsx

@@ -438,7 +438,7 @@ export function CommandShortcut({ className, ...props }: ComponentPropsWithRef<"
     <span
       data-slot="command-shortcut"
       aria-hidden="true"
-      className={cn("ml-auto text-2xs tracking-wide text-muted-foreground", className)}
+      className={cn("ms-auto text-2xs tracking-wide text-muted-foreground", className)}
       {...props}
     />
   );

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

@@ -0,0 +1,191 @@
+"use client";
+
+import {
+  useId,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { cn } from "@/lib/utils";
+
+/**
+ * Type the name to confirm.
+ *
+ * The GitHub pattern for deleting a repository, and the one every product
+ * copies for the action that cannot be undone: the name of the thing has to
+ * pass through the reader's fingers before the button works. Trivial to
+ * build, absent from every component library, and usually built wrong in
+ * the one place it matters — what happens when the text does not match.
+ * The common version disables the button and says nothing, so a keyboard
+ * or screen reader user presses it, or presses Enter, and nothing happens
+ * at all.
+ *
+ * Here a mismatch is a thing that is said. The button stays reachable and
+ * pressing it, or Enter, before the text matches announces what was
+ * expected and marks the field invalid. The moment the text matches, that
+ * is announced too, once, so a reader knows the action has become
+ * available without watching the button change colour.
+ *
+ * Pasting is allowed. Blocking it is a popular piece of friction, and it
+ * punishes exactly the people who cannot type a long name easily — switch
+ * users, voice users, anyone with a tremor — while stopping nobody who can
+ * select-all and copy. The name is on screen either way; the point is that
+ * it passed through the reader's attention, not their keyboard.
+ */
+
+export interface ConfirmTypedProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The text that must be typed, exactly. */
+  expected: string;
+  /** What confirming does, as the button reads: "Delete project". */
+  action: string;
+  onConfirm: () => void;
+  /** While the action runs. The button stays focusable and says so. */
+  pending?: boolean;
+  /** Match regardless of case. Off by default: a name is a name. */
+  caseSensitive?: boolean;
+  variant?: "destructive" | "primary";
+  /** The typed text. Controlled, if you want it. */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** The consequence, in a sentence or two, before the field. */
+  children?: ReactNode;
+}
+
+export function ConfirmTyped({
+  className,
+  expected,
+  action,
+  onConfirm,
+  pending = false,
+  caseSensitive = true,
+  variant = "destructive",
+  value: valueProp,
+  onValueChange,
+  children,
+  ...props
+}: ConfirmTypedProps) {
+  const id = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [uncontrolled, setUncontrolled] = useState("");
+  const value = valueProp ?? uncontrolled;
+
+  const [attempted, setAttempted] = useState(false);
+  const [announcement, setAnnouncement] = useState("");
+
+  // Surrounding whitespace never decides it: a trailing space is not a
+  // different name, and a reader cannot see it to know why it failed.
+  const normalise = (text: string) => (caseSensitive ? text.trim() : text.trim().toLowerCase());
+  const matched = value.length > 0 && normalise(value) === normalise(expected);
+
+  // Announce the match once, on the transition. Adjusted during render so the
+  // announcement lands in the same commit as the state it describes.
+  const [wasMatched, setWasMatched] = useState(matched);
+  if (wasMatched !== matched) {
+    setWasMatched(matched);
+    if (matched) {
+      setAnnouncement(`Matches. ${action} is available.`);
+      setAttempted(false);
+    }
+  }
+
+  const setValue = (next: string) => {
+    setUncontrolled(next);
+    onValueChange?.(next);
+  };
+
+  const attempt = () => {
+    if (pending) return;
+    if (matched) {
+      onConfirm();
+      return;
+    }
+    // Said, not swallowed. A press that does nothing tells a keyboard user
+    // nothing; this one tells them what was expected.
+    setAttempted(true);
+    setAnnouncement(`Does not match. Type ${expected} exactly.`);
+    inputRef.current?.focus();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+    event.preventDefault();
+    attempt();
+  };
+
+  const mismatch = attempted && !matched;
+  const hint = matched
+    ? "Matches."
+    : mismatch
+      ? `Does not match. Type ${expected} exactly.`
+      : caseSensitive
+        ? "Type it exactly as shown."
+        : "Type it as shown. Case does not matter.";
+
+  return (
+    <div
+      data-slot="confirm-typed"
+      data-state={matched ? "matched" : mismatch ? "mismatched" : "idle"}
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    >
+      {children}
+
+      <label htmlFor={`${id}-input`} className="text-sm">
+        To confirm, type{" "}
+        <strong className="rounded bg-muted px-1 py-0.5 font-mono text-xs font-medium select-all">
+          {expected}
+        </strong>
+      </label>
+
+      <Input
+        ref={inputRef}
+        id={`${id}-input`}
+        value={value}
+        autoComplete="off"
+        autoCapitalize="off"
+        spellCheck={false}
+        aria-describedby={`${id}-hint`}
+        aria-invalid={mismatch || undefined}
+        onChange={(event) => {
+          setValue(event.target.value);
+        }}
+        onKeyDown={onKeyDown}
+      />
+
+      <p
+        id={`${id}-hint`}
+        data-slot="confirm-typed-hint"
+        className={cn(
+          "text-xs",
+          mismatch ? "text-destructive" : matched ? "text-success" : "text-muted-foreground",
+        )}
+      >
+        {hint}
+      </p>
+
+      {/* Present from the first render, so the first announcement is heard. */}
+      <span role="status" aria-live="polite" className="sr-only">
+        {announcement}
+      </span>
+
+      <Button
+        variant={variant}
+        loading={pending}
+        data-ready={matched || undefined}
+        aria-describedby={matched ? undefined : `${id}-hint`}
+        // Dimmed rather than disabled while the text does not match: it stays
+        // reachable, and pressing it says why nothing happened.
+        className={cn("self-start", !matched && !pending && "opacity-55")}
+        onClick={attempt}
+      >
+        {pending ? `${action}…` : action}
+      </Button>
+    </div>
+  );
+}

package/src/components/confirm-typed/index.ts

@@ -0,0 +1 @@
+export { ConfirmTyped, type ConfirmTypedProps } from "./confirm-typed";

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

@@ -0,0 +1,22 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "confirm-typed",
+  title: "Confirm Typed",
+  description: "Type the name to confirm — and be told, not ignored, when it does not match.",
+  category: "form",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: ["button", "input"],
+  files: ["confirm-typed.tsx"],
+  a11y:
+    "The button stays reachable while the text does not match, dimmed rather than disabled, and " +
+    "pressing it or Enter announces what was expected, marks the field invalid and returns focus " +
+    "to it — the common version disables the button and says nothing, so a keyboard user cannot " +
+    "tell whether anything happened. The match is announced once, on the transition, naming the " +
+    "action that became available, so nobody has to watch the button change colour. Typing " +
+    "itself stays silent, because a verdict on every keystroke is noise. The hint is the field's " +
+    "description and the button's, and the status region exists from the first render so the " +
+    "first announcement is heard. Pasting is allowed: blocking it punishes people who cannot " +
+    "type a long name easily and stops nobody who can select-all and copy.",
+});