@dowel-ui/react 0.5.0 → 0.7.0

package/src/components/permission-matrix/permission-matrix.tsx

@@ -146,7 +146,7 @@ export function PermissionMatrix({
             <th
               role="columnheader"
               scope="col"
-              className="px-3 py-2 text-left text-xs font-medium"
+              className="px-3 py-2 text-start text-xs font-medium"
             >
               Permission
             </th>
@@ -186,7 +186,7 @@ export function PermissionMatrix({
                 <th
                   role="rowheader"
                   scope="row"
-                  className="px-3 py-1.5 text-left text-xs font-medium"
+                  className="px-3 py-1.5 text-start text-xs font-medium"
                 >
                   {row.label}
                   <span className="sr-only">, all</span>
@@ -216,8 +216,8 @@ export function PermissionMatrix({
                   role="rowheader"
                   scope="row"
                   className={cn(
-                    "px-3 py-2 text-left font-normal",
-                    row.permission.group !== undefined && "pl-6",
+                    "px-3 py-2 text-start font-normal",
+                    row.permission.group !== undefined && "ps-6",
                   )}
                 >
                   {row.permission.label}

package/src/components/record-diff/record-diff.tsx

@@ -241,19 +241,19 @@ export function RecordDiffTable({
             <tr className="border-b border-border">
               <th
                 scope="col"
-                className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+                className="px-3 py-2 text-start text-xs font-medium text-muted-foreground"
               >
                 Field
               </th>
               <th
                 scope="col"
-                className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+                className="px-3 py-2 text-start text-xs font-medium text-muted-foreground"
               >
                 Before
               </th>
               <th
                 scope="col"
-                className="px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+                className="px-3 py-2 text-start text-xs font-medium text-muted-foreground"
               >
                 After
               </th>
@@ -271,7 +271,7 @@ export function RecordDiffTable({
                     rather than as a loose cell in a wall of table. */}
                 <th
                   scope="row"
-                  className="px-3 py-2 text-left align-top font-medium whitespace-nowrap"
+                  className="px-3 py-2 text-start align-top font-medium whitespace-nowrap"
                 >
                   {field.label}
                   {/* The change kind must not be carried by row colour alone. */}

package/src/components/select/select.tsx

@@ -158,7 +158,7 @@ export function SelectItem({ className, label, children, ...props }: SelectItemP
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+        "relative flex w-full 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-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
@@ -176,7 +176,7 @@ export function SelectItem({ className, label, children, ...props }: SelectItemP
         </>
       )}
       {/* Decorative: selection is already announced through aria-selected. */}
-      <span className="absolute right-2 grid size-4 place-items-center">
+      <span className="absolute end-2 grid size-4 place-items-center">
         <SelectPrimitive.ItemIndicator>
           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
             <path

package/src/components/sheet/sheet.tsx

@@ -49,8 +49,12 @@ const sheetVariants = cva(
       side: {
         top: "inset-x-0 top-0 border-b [--slide-y:-100%]",
         bottom: "inset-x-0 bottom-0 border-t [--slide-y:100%]",
-        left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r [--slide-x:-100%]",
-        right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l [--slide-x:100%]",
+        // rtl-ok: the variant is named `left`, and a sheet asked for on the
+        // left that opens on the right in Arabic is an API telling a lie. The
+        // logical version of this is a `start`/`end` side, which is a rename
+        // rather than a restyle.
+        left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r [--slide-x:-100%]", // rtl-ok: named side
+        right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l [--slide-x:100%]", // rtl-ok: named side
       },
     },
     defaultVariants: {
@@ -87,7 +91,7 @@ export function SheetContent({
             data-slot="sheet-close"
             aria-label="Close"
             className={cn(
-              "absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground",
+              "absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground",
               "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
               "[&_svg]:size-4",
               focusRing,
@@ -112,7 +116,7 @@ export function SheetHeader({ className, ...props }: ComponentPropsWithRef<"div"
   return (
     <div
       data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 pr-8 text-left", className)}
+      className={cn("flex flex-col gap-1.5 pe-8 text-start", className)}
       {...props}
     />
   );

package/src/components/sidebar/index.ts

@@ -0,0 +1,19 @@
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuLabel,
+  SidebarProvider,
+  SidebarTrigger,
+  type SidebarMenuButtonProps,
+  type SidebarProps,
+  type SidebarProviderProps,
+  type SidebarTriggerProps,
+} from "./sidebar";

package/src/components/sidebar/meta.ts

@@ -0,0 +1,25 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "sidebar",
+  title: "Sidebar",
+  description:
+    "The application's own navigation: a collapsible rail on a wide screen, an overlay on a narrow one.",
+  category: "navigation",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: ["sheet"],
+  files: ["sidebar.tsx"],
+  a11y:
+    "The navigation landmark must be named — a page has several, and three regions all called " +
+    '"navigation" is a list nobody can choose from. The active entry carries aria-current=' +
+    '"page" rather than only a background colour. On a narrow screen it is a Sheet, not a ' +
+    "styled div: an overlay needs a focus trap and an Escape key, and without them the page " +
+    "behind stays reachable by Tab while the menu covers it. When the rail collapses, labels " +
+    "are visually hidden rather than removed — removing them leaves controls whose only content " +
+    "is an icon, which is how a collapsed sidebar becomes a column of links all announced as " +
+    '"link". The trigger says what pressing it will do, not what the state currently is. The ' +
+    "overlay is mounted only on a narrow screen and has its own open state: a modal dialog that " +
+    "CSS hides is still modal, and mounting it always made every wide screen aria-hidden and " +
+    "unclickable whenever the rail was open.",
+});

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,374 @@
+"use client";
+
+import { Slot } from "radix-ui";
+import {
+  createContext,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type ReactNode,
+} from "react";
+
+import { Sheet, SheetContent, SheetTitle } from "@/components/sheet";
+import { disabledStyles, focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * The application's own navigation.
+ *
+ * Two states, not one. On a wide screen it collapses to a rail of icons and
+ * stays in the page; on a narrow one it is an overlay, which needs a focus trap
+ * and an Escape key and is therefore a Sheet rather than a div with a
+ * transform. Building one behaviour and hiding it at a breakpoint gets the
+ * mobile case wrong every time — the page behind stays reachable by Tab while
+ * the menu covers it.
+ *
+ * The collapsed rail is where these usually fail. Hiding the label leaves a
+ * button whose only content is an icon, and an icon has no accessible name. The
+ * label here is not removed but visually hidden, so the control keeps its name
+ * whether or not the text is on screen.
+ *
+ * The overlay is mounted only on a narrow screen, and it has its own open
+ * state. Mounting it always and hiding it with CSS was the first version, and
+ * it was wrong in a way no visual check catches: a modal dialog that is
+ * `display: none` is still modal. It marks the rest of the page `aria-hidden`,
+ * traps focus in an element nothing can focus, and turns pointer events off on
+ * the body — so on a desktop the whole application was invisible to a screen
+ * reader and unclickable the moment the sidebar was open, which is its default.
+ */
+
+/** Below Tailwind's `md` breakpoint, which is where the rail gives way to the overlay. */
+const NARROW_QUERY = "(max-width: 767px)";
+
+function subscribeToNarrow(callback: () => void): () => void {
+  const query = window.matchMedia(NARROW_QUERY);
+  query.addEventListener("change", callback);
+  return () => {
+    query.removeEventListener("change", callback);
+  };
+}
+
+/**
+ * Whether the viewport is narrow enough for the overlay.
+ *
+ * The server snapshot says "wide": the rail renders in the HTML and CSS hides
+ * it below the breakpoint, so a narrow screen shows nothing wrong before
+ * hydration and the sheet mounts, closed, straight after.
+ */
+function useIsNarrow(): boolean {
+  return useSyncExternalStore(
+    subscribeToNarrow,
+    () => window.matchMedia(NARROW_QUERY).matches,
+    () => false,
+  );
+}
+
+interface SidebarContextValue {
+  /** The rail is expanded rather than collapsed. */
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  /** The viewport is narrow, so the navigation is an overlay. */
+  narrow: boolean;
+  /** The overlay is showing. Only meaningful when `narrow`. */
+  overlayOpen: boolean;
+  setOverlayOpen: (open: boolean) => void;
+  /** Whichever of the two states applies on this viewport. */
+  toggle: () => void;
+  /** Id of the sidebar element, for the trigger's aria-controls. */
+  sidebarId: string;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+function useSidebar(component: string): SidebarContextValue {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error(`${component} must be rendered inside <SidebarProvider>.`);
+  }
+  return context;
+}
+
+export interface SidebarProviderProps {
+  /** Controlled open state. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+
+export function SidebarProvider({
+  open: openProp,
+  defaultOpen = true,
+  onOpenChange,
+  children,
+}: SidebarProviderProps) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  // Separate from `open`, and never true to begin with: "expanded by default"
+  // is a fact about the rail. An overlay that covers the page on first load is
+  // a menu nobody asked for.
+  const [overlayOpen, setOverlayOpen] = useState(false);
+  const narrow = useIsNarrow();
+  const sidebarId = useId();
+
+  const value = useMemo<SidebarContextValue>(() => {
+    const setOpen = (next: boolean) => {
+      if (openProp === undefined) setUncontrolled(next);
+      onOpenChange?.(next);
+    };
+
+    return {
+      open,
+      setOpen,
+      narrow,
+      overlayOpen,
+      setOverlayOpen,
+      toggle: () => {
+        if (narrow) setOverlayOpen(!overlayOpen);
+        else setOpen(!open);
+      },
+      sidebarId,
+    };
+  }, [open, openProp, onOpenChange, narrow, overlayOpen, sidebarId]);
+
+  return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
+}
+
+export interface SidebarProps extends ComponentPropsWithRef<"aside"> {
+  /**
+   * Names the navigation landmark.
+   *
+   * Required, not optional. A page has more than one navigation region — this,
+   * a breadcrumb, a footer — and three landmarks all called "navigation" is a
+   * list a screen reader user cannot choose from.
+   */
+  label: string;
+  /** Title for the overlay on a narrow screen, where it is a dialog. */
+  mobileTitle?: string;
+}
+
+export function Sidebar({ className, label, mobileTitle, children, ...props }: SidebarProps) {
+  const { open, narrow, overlayOpen, setOverlayOpen, sidebarId } = useSidebar("Sidebar");
+
+  return (
+    <>
+      {/*
+        The overlay, on a narrow screen. A Sheet rather than a styled div: it
+        traps focus, closes on Escape and marks the rest of the page inert,
+        none of which a transform does — and without them the page behind stays
+        reachable by Tab while the menu covers it.
+
+        Mounted only when the screen is narrow. Those three behaviours are
+        exactly why it must not exist on a wide one: see the note at the top.
+      */}
+      {narrow ? (
+        <Sheet open={overlayOpen} onOpenChange={setOverlayOpen}>
+          <SheetContent side="left" className="w-72 p-0">
+            <SheetTitle className="sr-only">{mobileTitle ?? label}</SheetTitle>
+            <nav aria-label={label} className="flex h-full flex-col gap-2 p-3">
+              {children}
+            </nav>
+          </SheetContent>
+        </Sheet>
+      ) : null}
+
+      <aside
+        id={sidebarId}
+        data-slot="sidebar"
+        data-state={open ? "expanded" : "collapsed"}
+        className={cn(
+          "hidden shrink-0 border-e border-border bg-background md:block",
+          "transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+          open ? "w-60" : "w-14",
+          className,
+        )}
+        {...props}
+      >
+        <nav aria-label={label} className="flex h-full flex-col gap-2 p-3">
+          {children}
+        </nav>
+      </aside>
+    </>
+  );
+}
+
+export function SidebarHeader({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      className={cn("flex min-h-9 items-center gap-2 px-1", className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarContent({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      className={cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto", className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarFooter({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return <div data-slot="sidebar-footer" className={cn("mt-auto", className)} {...props} />;
+}
+
+export function SidebarGroup({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return <div data-slot="sidebar-group" className={cn("grid gap-1", className)} {...props} />;
+}
+
+/**
+ * A heading for a group of links.
+ *
+ * Hidden rather than removed when the rail is collapsed, so the grouping
+ * survives for anyone not reading the layout visually.
+ */
+export function SidebarGroupLabel({ className, ...props }: ComponentPropsWithRef<"div">) {
+  const { open, narrow } = useSidebar("SidebarGroupLabel");
+
+  return (
+    <div
+      data-slot="sidebar-group-label"
+      className={cn(
+        "px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase",
+        // The rail's collapsed state is not the overlay's: a sheet is always
+        // wide enough for its labels.
+        !open && !narrow && "sr-only",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SidebarMenu({ className, ...props }: ComponentPropsWithRef<"ul">) {
+  return <ul data-slot="sidebar-menu" className={cn("grid gap-0.5", className)} {...props} />;
+}
+
+export function SidebarMenuItem({ className, ...props }: ComponentPropsWithRef<"li">) {
+  return <li data-slot="sidebar-menu-item" className={cn("min-w-0", className)} {...props} />;
+}
+
+export interface SidebarMenuButtonProps extends ComponentPropsWithRef<"a"> {
+  /** Render the child as the control, for a router's own link or a button. */
+  asChild?: boolean;
+  /** The page currently being shown. */
+  isActive?: boolean;
+}
+
+/**
+ * One entry in the navigation.
+ *
+ * `aria-current="page"` when active, not merely a background colour: which page
+ * you are on is information, and a highlight conveys it to exactly one kind of
+ * reader.
+ */
+export function SidebarMenuButton({
+  className,
+  asChild = false,
+  isActive = false,
+  children,
+  ...props
+}: SidebarMenuButtonProps) {
+  const Component = asChild ? Slot.Root : "a";
+
+  return (
+    <Component
+      data-slot="sidebar-menu-button"
+      data-active={isActive || undefined}
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        "flex h-9 w-full items-center gap-2.5 rounded-md px-2 text-sm",
+        "transition-colors duration-[var(--duration-fast)]",
+        "[&>svg]:size-4 [&>svg]:shrink-0",
+        isActive
+          ? "bg-accent font-medium text-accent-foreground"
+          : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+        focusRing,
+        disabledStyles,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}
+
+/**
+ * The text of a menu entry.
+ *
+ * Visually hidden rather than removed when the rail is collapsed. Removing it
+ * leaves a control whose only content is an icon, and an icon has no accessible
+ * name — which is how a collapsed sidebar becomes a column of buttons all
+ * announced as "link".
+ */
+export function SidebarMenuLabel({ className, ...props }: ComponentPropsWithRef<"span">) {
+  const { open, narrow } = useSidebar("SidebarMenuLabel");
+
+  return (
+    <span
+      data-slot="sidebar-menu-label"
+      className={cn("min-w-0 truncate", !open && !narrow && "sr-only", className)}
+      {...props}
+    />
+  );
+}
+
+export interface SidebarTriggerProps extends ComponentPropsWithRef<"button"> {
+  /** Overrides the label, which otherwise says what pressing it will do. */
+  label?: string;
+}
+
+export function SidebarTrigger({ className, label, ...props }: SidebarTriggerProps) {
+  const { open, narrow, overlayOpen, toggle, sidebarId } = useSidebar("SidebarTrigger");
+
+  const expanded = narrow ? overlayOpen : open;
+  const fallback = narrow
+    ? overlayOpen
+      ? "Close navigation"
+      : "Open navigation"
+    : open
+      ? "Collapse navigation"
+      : "Expand navigation";
+
+  return (
+    <button
+      type="button"
+      data-slot="sidebar-trigger"
+      aria-expanded={expanded}
+      // The rail is what this controls. The overlay is a dialog that names
+      // itself, and pointing at an element CSS has hidden helps nobody.
+      aria-controls={narrow ? undefined : sidebarId}
+      // Says what pressing it does, not what the state currently is. "Collapse
+      // navigation" while it is expanded is the useful half.
+      aria-label={label ?? fallback}
+      onClick={toggle}
+      className={cn(
+        "grid size-9 shrink-0 place-items-center rounded-md text-muted-foreground",
+        "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
+        focusRing,
+        className,
+      )}
+      {...props}
+    >
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden className="size-4">
+        <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
+        <path d="M9 4v16" stroke="currentColor" strokeWidth="2" />
+      </svg>
+    </button>
+  );
+}
+
+/** The region the sidebar sits beside. */
+export function SidebarInset({ className, ...props }: ComponentPropsWithRef<"main">) {
+  return (
+    <main data-slot="sidebar-inset" className={cn("min-w-0 flex-1", className)} {...props} />
+  );
+}

package/src/components/table/table.tsx

@@ -98,8 +98,8 @@ export function TableHead({ className, ...props }: ComponentPropsWithRef<"th">)
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap text-muted-foreground",
-        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0",
+        "h-10 px-3 text-start align-middle text-xs font-medium whitespace-nowrap text-muted-foreground",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pe-0",
         className,
       )}
       {...props}
@@ -113,7 +113,7 @@ export function TableCell({ className, ...props }: ComponentPropsWithRef<"td">)
       data-slot="table-cell"
       className={cn(
         "px-3 py-2.5 align-middle",
-        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-0",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pe-0",
         className,
       )}
       {...props}

package/src/components/tags-input/tags-input.tsx

@@ -232,7 +232,7 @@ export function TagsInput({
                       removeAt(index);
                     }}
                     className={cn(
-                      "-mr-0.5 grid size-4 place-items-center rounded-full",
+                      "-me-0.5 grid size-4 place-items-center rounded-full",
                       "transition-colors hover:bg-foreground/10",
                       focusRing,
                       disabledStyles,

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea, textareaVariants, type TextareaProps } from "./textarea";

package/src/components/textarea/meta.ts

@@ -0,0 +1,21 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "textarea",
+  title: "Textarea",
+  description:
+    "A multi-line text field, with optional auto-resize and a character count that knows when to stay quiet.",
+  category: "form",
+  status: "stable",
+  dependencies: ["class-variance-authority"],
+  registryDependencies: [],
+  files: ["textarea.tsx"],
+  a11y:
+    "Pair with a Label via htmlFor/id. The error state is driven by aria-invalid, so assistive " +
+    "technology and styling stay in sync. The character count is described by the field rather " +
+    "than announced on every keystroke — a permanently live counter reads the remaining number " +
+    "between every letter typed, which is unusable — so it goes live only once the limit is " +
+    "close, and states the remainder in words rather than as a bare ratio that is read aloud as " +
+    "two unlabelled numbers. Horizontal resizing is off by default, because a field dragged " +
+    "wider than its container is a broken layout.",
+});