@dowel-ui/react 0.5.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/data-table/data-table.tsx

@@ -33,6 +33,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/table";
+import { mirrorForDirection } from "@/lib/styles";
 import { cn } from "@/lib/utils";
 
 /**
@@ -253,7 +254,7 @@ export function DataTableColumnHeader({
           <Button
             variant="ghost"
             size="sm"
-            className="-ml-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent"
+            className="-ms-2 h-7 gap-1 px-2 font-medium text-muted-foreground data-[state=open]:bg-accent"
           >
             {title}
             <SortIcon direction={sorted === false ? undefined : sorted} />
@@ -449,7 +450,12 @@ export function DataTablePagination({
               table.previousPage();
             }}
           >
-            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+              className={mirrorForDirection}
+            >
               <path
                 d="m15 18-6-6 6-6"
                 stroke="currentColor"
@@ -468,7 +474,12 @@ export function DataTablePagination({
               table.nextPage();
             }}
           >
-            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+              className={mirrorForDirection}
+            >
               <path
                 d="m9 18 6-6-6-6"
                 stroke="currentColor"

package/src/components/dialog/dialog.tsx

@@ -66,7 +66,7 @@ export function DialogContent({
             data-slot="dialog-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,
@@ -91,7 +91,7 @@ export function DialogHeader({ className, ...props }: ComponentPropsWithRef<"div
   return (
     <div
       data-slot="dialog-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/diff-viewer/diff-viewer.tsx

@@ -197,10 +197,10 @@ function UnifiedRow({ row }: { row: DiffRow }) {
     <tr data-slot="diff-row" data-kind={row.kind} className={ROW_STYLES[row.kind]}>
       <LineNumber value={row.before} />
       <LineNumber value={row.after} />
-      <td className="w-4 pr-1 text-center text-muted-foreground select-none" aria-hidden="true">
+      <td className="w-4 pe-1 text-center text-muted-foreground select-none" aria-hidden="true">
         {row.kind === "added" ? "+" : row.kind === "removed" ? "−" : ""}
       </td>
-      <td className="w-full py-0.5 pr-3 break-all whitespace-pre-wrap">
+      <td className="w-full py-0.5 pe-3 break-all whitespace-pre-wrap">
         {/* The kind, for anyone who cannot see the sign or the tint. Reading a
             diff aloud without it is reading the same file twice. */}
         <span className="sr-only">{KIND_LABEL[row.kind]}: </span>
@@ -226,7 +226,7 @@ function SplitCell({ row, side }: { row: DiffRow | null; side: "before" | "after
     <>
       <LineNumber value={side === "before" ? row.before : row.after} />
       <td
-        className={cn("w-1/2 py-0.5 pr-3 break-all whitespace-pre-wrap", ROW_STYLES[row.kind])}
+        className={cn("w-1/2 py-0.5 pe-3 break-all whitespace-pre-wrap", ROW_STYLES[row.kind])}
       >
         <span className="sr-only">{KIND_LABEL[row.kind]}: </span>
         <RowContent row={row} />
@@ -267,7 +267,7 @@ function LineNumber({ value }: { value?: number }) {
       // Decorative: the line number is orientation for a sighted reader, and
       // announcing two numbers before every line makes the diff unlistenable.
       aria-hidden="true"
-      className="w-10 border-r border-border bg-muted/40 px-2 py-0.5 text-right text-muted-foreground tabular-nums select-none"
+      className="w-10 border-e border-border bg-muted/40 px-2 py-0.5 text-end text-muted-foreground tabular-nums select-none"
     >
       {value ?? ""}
     </td>

package/src/components/direction/direction.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Direction as DirectionPrimitive } from "radix-ui";
+import type { ReactNode } from "react";
+
+/**
+ * Tells the component set which way the writing runs.
+ *
+ * Every direction-dependent style in this library is written logically —
+ * `ps-`, `me-`, `text-end` — so the CSS follows `dir` on its own. The
+ * primitives underneath do not: several of them read direction from React
+ * context rather than from the document, and with no provider they assume
+ * left-to-right and set `dir="ltr"` on their own elements. The result is a page
+ * that mirrors correctly except for its menus, selects and sliders, which is
+ * worse than one that does not mirror at all, because it looks deliberate.
+ *
+ * So an RTL application needs both: `dir` on the document for the CSS, and this
+ * for the primitives.
+ *
+ * ```tsx
+ * <html dir="rtl" lang="ar">
+ *   <body>
+ *     <DirectionProvider dir="rtl">{children}</DirectionProvider>
+ *   </body>
+ * </html>
+ * ```
+ *
+ * A left-to-right application needs neither. Nothing here is required to render
+ * English correctly, which is why it is easy to ship without it and never know.
+ */
+export interface DirectionProviderProps {
+  dir: "ltr" | "rtl";
+  children?: ReactNode;
+}
+
+export function DirectionProvider({ dir, children }: DirectionProviderProps) {
+  return <DirectionPrimitive.Provider dir={dir}>{children}</DirectionPrimitive.Provider>;
+}

package/src/components/direction/index.ts

@@ -0,0 +1 @@
+export { DirectionProvider, type DirectionProviderProps } from "./direction";

package/src/components/direction/meta.ts

@@ -0,0 +1,19 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "direction",
+  title: "Direction Provider",
+  description:
+    "Tells the component primitives which way the writing runs, so menus and sliders mirror with the rest of the page.",
+  category: "foundation",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["direction.tsx"],
+  a11y:
+    "Needed only for right-to-left languages, and needed in addition to `dir` on the document " +
+    "rather than instead of it. The styling here is written with logical properties and follows " +
+    "`dir` by itself; the primitives underneath read direction from React context and assume " +
+    "left-to-right without a provider, which mirrors a page correctly except for its menus, " +
+    "selects and sliders — worse than not mirroring at all, because it looks deliberate.",
+});

package/src/components/drawer/drawer.tsx

@@ -221,7 +221,7 @@ export function DrawerHeader({ className, ...props }: ComponentPropsWithRef<"div
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-left", className)}
+      className={cn("flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-start", className)}
       {...props}
     />
   );

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -3,6 +3,7 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import type { ComponentPropsWithRef } from "react";
 
+import { mirrorForDirection } from "@/lib/styles";
 import { cn } from "@/lib/utils";
 
 /**
@@ -80,7 +81,7 @@ export function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         menuItem,
-        inset && "pl-8",
+        inset && "ps-8",
         variant === "destructive" &&
           "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive",
         className,
@@ -94,7 +95,7 @@ export function DropdownMenuItem({
  * aria-checked, so announcing it twice would be noise. */
 function ItemIndicator({ radio = false }: { radio?: boolean }) {
   return (
-    <span className="pointer-events-none absolute left-2 grid size-4 place-items-center">
+    <span className="pointer-events-none absolute start-2 grid size-4 place-items-center">
       <DropdownMenuPrimitive.ItemIndicator>
         {radio ? (
           <span className="size-2 rounded-full bg-current" />
@@ -122,7 +123,7 @@ export function DropdownMenuCheckboxItem({
   return (
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
-      className={cn(menuItem, "pl-8", className)}
+      className={cn(menuItem, "ps-8", className)}
       {...props}
     >
       <ItemIndicator />
@@ -139,7 +140,7 @@ export function DropdownMenuRadioItem({
   return (
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
-      className={cn(menuItem, "pl-8", className)}
+      className={cn(menuItem, "ps-8", className)}
       {...props}
     >
       <ItemIndicator radio />
@@ -160,7 +161,7 @@ export function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLa
       data-slot="dropdown-menu-label"
       className={cn(
         "px-2 py-1.5 text-xs font-medium text-muted-foreground",
-        inset && "pl-8",
+        inset && "ps-8",
         className,
       )}
       {...props}
@@ -188,7 +189,7 @@ export function DropdownMenuShortcut({ className, ...props }: ComponentPropsWith
     <span
       data-slot="dropdown-menu-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}
     />
   );
@@ -209,11 +210,16 @@ export function DropdownMenuSubTrigger({
   return (
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
-      className={cn(menuItem, "data-[state=open]:bg-accent", inset && "pl-8", className)}
+      className={cn(menuItem, "data-[state=open]:bg-accent", inset && "ps-8", className)}
       {...props}
     >
       {children}
-      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="ml-auto size-3.5">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+        className={cn("ms-auto size-3.5", mirrorForDirection)}
+      >
         <path
           d="m9 18 6-6-6-6"
           stroke="currentColor"

package/src/components/input/input.tsx

@@ -9,7 +9,7 @@ const inputVariants = cva(
     "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",
+    "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,

package/src/components/log-viewer/log-viewer.tsx

@@ -203,7 +203,7 @@ export function LogViewer({
                   data-index={item.index}
                   data-slot="log-viewer-row"
                   data-level={line.level}
-                  className="absolute top-0 left-0 w-full"
+                  className="absolute start-0 top-0 w-full"
                   style={{ transform: `translateY(${String(item.start)}px)` }}
                 >
                   <LogViewerRow
@@ -296,7 +296,7 @@ export function LogViewerRow({ line, expanded = false, onToggle }: LogViewerRowP
       {expanded && line.fields ? (
         <dl
           data-slot="log-viewer-fields"
-          className="mt-1 mb-1 ml-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-l border-border pl-3"
+          className="ms-4 mt-1 mb-1 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-s border-border ps-3"
         >
           {Object.entries(line.fields).map(([key, value]) => (
             <div key={key} className="contents">

package/src/components/meter/meter.tsx

@@ -141,7 +141,7 @@ export function Meter({
                   data-slot="meter-segment"
                   data-tone={segment.tone ?? "primary"}
                   className={cn(
-                    "h-full first:rounded-l-full last:rounded-r-full",
+                    "h-full first:rounded-s-full last:rounded-e-full",
                     "transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]",
                     TONES[segment.tone ?? "primary"],
                   )}

package/src/components/pagination/pagination.tsx

@@ -2,6 +2,7 @@ import { Slot } from "radix-ui";
 import type { ComponentPropsWithRef } from "react";
 
 import { buttonVariants } from "@/components/button";
+import { mirrorForDirection } from "@/lib/styles";
 import { cn } from "@/lib/utils";
 
 /**
@@ -80,7 +81,12 @@ export function PaginationPrevious({ className, ...props }: PaginationLinkProps)
       className={cn("gap-1 px-2.5", className)}
       {...props}
     >
-      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+        className={cn("size-4", mirrorForDirection)}
+      >
         <path
           d="m15 18-6-6 6-6"
           stroke="currentColor"
@@ -103,7 +109,12 @@ export function PaginationNext({ className, ...props }: PaginationLinkProps) {
       {...props}
     >
       <span className="hidden sm:inline">Next</span>
-      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+        className={cn("size-4", mirrorForDirection)}
+      >
         <path
           d="m9 18 6-6-6-6"
           stroke="currentColor"