@kinetixui/ui 0.23.3 → 0.24.0

package/dist/kx-src-hash.json

@@ -0,0 +1,3 @@
+{
+  "sourceHash": "78c26aad143f97d1102e3ced1e36fd316846381f865c9f89ee77924f1ffd7e0b"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.23.3",
+  "version": "0.24.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.23.3",
+    "@kinetixui/tokens": "0.24.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
@@ -79,10 +79,10 @@
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
-    "lucide-react": "^1.47.0",
+    "lucide-react": "^1.48.0",
     "react-day-picker": "^10.0.1",
     "react-hook-form": "^7.88.0",
-    "react-resizable-panels": "^4.12.4",
+    "react-resizable-panels": "^4.13.3",
     "recharts": "^3.10.1",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
@@ -111,11 +111,11 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.70.0",
-    "vitest": "^5.0.1"
+    "typescript-eslint": "^8.70.1",
+    "vitest": "^5.0.2"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom",
+    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom && node ../../scripts/ui-dist-stamp.mjs --write",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",

package/src/components/accordion.tsx

@@ -23,7 +23,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium font-sans transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium font-sans transition-colors duration-fast hover:underline [&[data-state=open]>svg]:rotate-180",
         className,
       )}
       {...props}

package/src/components/alert-dialog.tsx

@@ -3,11 +3,12 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cn } from "../lib/utils";
+import { withDirectionalPortal } from "./direction-provider";
 import { buttonVariants } from "./button";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogPortal = withDirectionalPortal(AlertDialogPrimitive.Portal);
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -16,7 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-overlay bg-scrim backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:duration-fast data-[state=open]:ease-enter data-[state=closed]:duration-instant data-[state=closed]:ease-exit",
       className,
     )}
     {...props}
@@ -33,8 +34,9 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
+        // rtl-ok: centering trick, direction-agnostic by construction — same decision as dialog.tsx
         "fixed left-1/2 top-1/2 z-overlay grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:duration-fast data-[state=open]:ease-enter data-[state=closed]:duration-instant data-[state=closed]:ease-exit",
         className,
       )}
       {...props}
@@ -44,13 +46,13 @@ const AlertDialogContent = React.forwardRef<
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-start", className)} {...props} />
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
     {...props}
   />
 );

package/src/components/avatar.tsx

@@ -53,8 +53,11 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
     const visible = max ? items.slice(0, max) : items;
     const overflow = max ? items.length - max : 0;
 
+    // rtl-ok: negative spacing IS the stack overlap; `gap` cannot be negative, and it mirrors naturally
+    const stack = "flex -space-x-2";
+
     return (
-      <div ref={ref} className={cn("flex -space-x-2", className)} {...props}>
+      <div ref={ref} className={cn(stack, className)} {...props}>
         {visible.map((child, i) => (
           <div key={i} className="rounded-full ring-2 ring-background">
             {child}

package/src/components/banner.tsx

@@ -48,12 +48,18 @@ export interface BannerProps
     VariantProps<typeof bannerVariants> {
   hideIcon?: boolean;
   onDismiss?: () => void;
+  /**
+   * Replaces the default dismiss mark (lucide's `X`) with your own icon — any icon library or SVG.
+   * The button keeps its accessible name ("Dismiss") and sizes any SVG inside it to 14px, so the icon
+   * needs no size, colour or aria attributes of its own. See /docs/icons.
+   */
+  dismissIcon?: React.ReactNode;
   /** optional CTA rendered inline after the message */
   action?: { label: React.ReactNode; onClick?: () => void };
 }
 
 const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
-  ({ className, variant = "information", sticky, hideIcon, onDismiss, action, children, ...props }, ref) => {
+  ({ className, variant = "information", sticky, hideIcon, onDismiss, dismissIcon, action, children, ...props }, ref) => {
     const Icon = ICON[variant ?? "information"];
     return (
       <div ref={ref} className={cn(bannerVariants({ variant, sticky }), className)} {...props}>
@@ -75,9 +81,9 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
             type="button"
             onClick={onDismiss}
             aria-label="Dismiss"
-            className="-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:opacity-visible focus-visible:ring-1 focus-visible:ring-current"
+            className="-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:opacity-visible focus-visible:ring-1 focus-visible:ring-current [&_svg]:size-3.5 [&_svg]:shrink-0"
           >
-            <X className="size-3.5" />
+            {dismissIcon ?? <X className="size-3.5" />}
           </button>
         )}
       </div>

package/src/components/breadcrumb.tsx

@@ -53,7 +53,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
   <li role="presentation" aria-hidden className={cn("[&>svg]:size-3.5", className)} {...props}>
-    {children ?? <ChevronRight />}
+    {children ?? <ChevronRight className="rtl:-scale-x-100" />}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

package/src/components/button.tsx

@@ -26,7 +26,7 @@ const buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-1 shrink-0",
     "font-sans font-medium whitespace-nowrap select-none",
-    "rounded-md transition-colors outline-none",
+    "rounded-md transition-colors duration-instant ease-standard outline-none",
     "focus-visible:shadow-focus",
     "disabled:pointer-events-none disabled:opacity-disabled",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-[18px]",

package/src/components/card.tsx

@@ -1,17 +1,88 @@
 "use client";
 
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
+/**
+ * Card — a raised surface (TOKENS.md, "Surface model").
+ *
+ * At rest it is separated from the page by elevation and a soft edge, not by a heavy stroke: the edge is
+ * `--border` at half strength, so the card no longer draws the same line as the inputs and buttons inside
+ * it, and the `md` step of the elevation ladder gives it a contact shadow that the old `sm` (5% black)
+ * did not visibly have. Both stay on tokens, so Create's surface treatments still reach it — `flat` and
+ * `bordered` remove the shadow, `elevated` raises it a rung. On a grouped section (`bg-surface-grouped`)
+ * the surface step does most of the work, in dark mode too.
+ *
+ * A Card is static. It has no hover, no pressed state and no pointer cursor, because a surface that
+ * reacts to the pointer reads as clickable, and a static card that does is a false affordance.
+ *
+ * Interaction is opt-in through semantics, not through a flag: `asChild` renders the card as its single
+ * child, and the interactive states below are keyed on that element BEING interactive — an `<a href>` or
+ * a `<button>`. So the visual states cannot drift from what the element actually does: a `<div>` never
+ * gets them, a link always does, and a consumer cannot style a static card as clickable by accident.
+ * One action per card: the element is the action, so it must not contain other controls.
+ *
+ *   hover     a pointer that can hover (`@media (hover: hover)`) — edge to full `--border`, lifted to `lg`
+ *   pressed   `:active` — back down to `sm` with a `muted` wash, so it differs from hover in depth AND fill
+ *   focus     the shared `shadow-focus` ring, which replaces the elevation while focused and so stays the
+ *             strongest edge on the card
+ *   selected  `aria-pressed="true"` (a toggle button) or `aria-current` (a link to where you are) — a
+ *             2px `--primary` edge: a change of WEIGHT as well as colour, so it is not carried by hue alone
+ *
+ * Motion: box-shadow, border-color and background-color over `duration-fast` with `ease-standard`, the
+ * catalogue's tier for a state change on a control. Nothing moves or resizes, so there is no layout shift,
+ * and under `prefers-reduced-motion` the transition is removed and every state lands immediately.
+ */
+// Every class is written out in full: Tailwind finds classes by scanning source text, so a selector
+// assembled from constants would never be generated.
+const INTERACTIVE = [
+  // A link is inline by default and a button centres its text, so the element is made a block that reads
+  // from the start edge. These come after plain utilities in the stylesheet, so lay an interactive card out
+  // with flex or grid on an inner element (as CardHeader does) rather than on the card itself.
+  "[&:where(a[href],button)]:block [&:where(button)]:text-start [&:is(a[href],button)]:cursor-pointer",
+  "[&:is(a[href],button)]:outline-none",
+  "[&:is(a[href],button)]:transition-[box-shadow,border-color,background-color] [&:is(a[href],button)]:duration-fast [&:is(a[href],button)]:ease-standard motion-reduce:transition-none",
+  "[@media(hover:hover)]:[&:is(a[href],button)]:hover:border-border [@media(hover:hover)]:[&:is(a[href],button)]:hover:shadow-lg",
+  "[&:is(a[href],button)]:active:shadow-sm [&:is(a[href],button)]:active:bg-muted/40",
+  // Selected: an inset 1px of --primary inside the 1px --primary border makes a 2px edge, with the
+  // elevation of whichever state it is in alongside, since the ring and the elevation share box-shadow.
+  // Restated for hover and pressed, which would otherwise take the border and shadow back. Written as the
+  // property, not `shadow-[…]`: Tailwind reads an arbitrary shadow that contains `hsl(` as a shadow COLOUR
+  // and the ring silently never rendered — `check:card-visual` caught it.
+  "[&:is([aria-pressed=true],[aria-current]:not([aria-current=false]))]:border-primary",
+  "[&:is([aria-pressed=true],[aria-current]:not([aria-current=false]))]:[box-shadow:inset_0_0_0_1px_hsl(var(--primary)),var(--shadow-md)]",
+  "[@media(hover:hover)]:[&:is([aria-pressed=true],[aria-current]:not([aria-current=false]))]:hover:border-primary",
+  "[@media(hover:hover)]:[&:is([aria-pressed=true],[aria-current]:not([aria-current=false]))]:hover:[box-shadow:inset_0_0_0_1px_hsl(var(--primary)),var(--shadow-lg)]",
+  "[&:is([aria-pressed=true],[aria-current]:not([aria-current=false]))]:active:[box-shadow:inset_0_0_0_1px_hsl(var(--primary)),var(--shadow-sm)]",
+  // Focus replaces the elevation with the shared ring and is the strongest edge the card can show. It is
+  // `!important` because hover and selected also set box-shadow with selectors at least as specific, and
+  // whichever of those Tailwind happens to emit last must not be able to hide the focus ring.
+  "[&:is(a[href],button)]:focus-visible:!shadow-focus",
+  "disabled:pointer-events-none disabled:opacity-disabled",
+].join(" ");
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Render as the single child element (Radix Slot) instead of a `<div>` — e.g.
+   *  `<Card asChild><a href="/reports/q3">…</a></Card>`. When that element is an `<a href>` or a `<button>`,
+   *  the card takes the interactive states; anything else stays static. */
+  asChild?: boolean;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
       ref={ref}
-      className={cn("rounded-xl border bg-card text-card-foreground shadow-sm font-sans", className)}
+      className={cn(
+        "rounded-xl border border-border/50 bg-card text-card-foreground shadow-md font-sans",
+        INTERACTIVE,
+        className,
+      )}
       {...props}
     />
-  ),
-);
+  );
+});
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(

package/src/components/checkbox.tsx

@@ -6,10 +6,26 @@ import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/utils";
 
 /**
- * Checkbox — reconciled 1:1 with the KinetixUI design source, node 54863:483.
- * 18px box, 4px radius, 2px border. Unchecked border = `--input`; checked /
- * indeterminate fill = `--primary`. Focus = 2px `--ring` offset. `aria-invalid`
- * paints the box (and the composed label/helper) with `--destructive`.
+ * Checkbox — from the KinetixUI design source, node 54863:483: 18px box, 4px radius, 2px border, checked /
+ * indeterminate fill = `--action`, focus = 2px `--ring` offset.
+ *
+ * It follows the selection-control state contract (TOKENS.md, "Selection controls"):
+ *
+ *   rest      unchecked boundary `--muted-foreground`, not `--input`. The box is the only thing that says a
+ *             checkbox is there, so its edge must clear SC 1.4.11's 3:1 (`--input` is 2.2:1 light / 2.7:1
+ *             dark — a tracked exception for field outlines, where the field's fill and label carry it).
+ *   hover     a pointer that can hover: a `--foreground` state layer at 8% around the box, and the unchecked
+ *             edge darkens to `--foreground`; checked fills step to `--action`/90
+ *   pressed   the state layer deepens to 14%; checked fills to `--action`/85
+ *   checked   `--action` fill AND a glyph — shape, not only colour
+ *   invalid   `aria-invalid="true"` → `--destructive` edge (and fill when checked); the field's error text
+ *             is the non-colour cue
+ *   focus     the 2px offset ring, `!important` so no hover or pressed layer can cover it
+ *   disabled  `--opacity-disabled`, and the hover/pressed layers are keyed on `:enabled`, so it never answers
+ *
+ * Motion: colour and box-shadow over `duration-instant` (100ms, the press/toggle step) with `ease-standard`.
+ * The checked state itself does not animate. Reduced motion collapses the transition (the library floor in
+ * tailwind.config.ts) and lands on the same end state.
  */
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -18,12 +34,30 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-[18px] shrink-0 rounded-sm border-2 border-input outline-none transition-colors",
-      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "disabled:cursor-not-allowed disabled:opacity-disabled",
+      // 1.125rem, not the 18px it replaces: identical at the default root size, but a reader who raises
+      // their browser's default font size scales rem and not px. At 200% the box stayed 18x18 beside a
+      // label that doubled — the control shrank by half relative to its own text, and its hit target with it.
+      "peer size-[1.125rem] shrink-0 rounded-sm border-2 border-muted-foreground outline-none",
+      "transition-[color,background-color,border-color,box-shadow] duration-instant ease-standard",
       "data-[state=checked]:border-action data-[state=checked]:bg-action data-[state=checked]:text-action-foreground",
       "data-[state=indeterminate]:border-action data-[state=indeterminate]:bg-action data-[state=indeterminate]:text-action-foreground",
-      "aria-invalid:border-destructive aria-invalid:data-[state=checked]:border-destructive aria-invalid:data-[state=checked]:bg-destructive",
+      // `aria-[invalid=true]:`, not `aria-invalid:` — Tailwind 3 has no `invalid` in its aria variants, so
+      // the short form compiled to nothing and an invalid checkbox looked exactly like a valid one.
+      "aria-[invalid=true]:border-destructive aria-[invalid=true]:data-[state=checked]:bg-destructive aria-[invalid=true]:data-[state=indeterminate]:bg-destructive",
+      // The state layer: the same for every value, so hover and press read the same way checked or not.
+      "[@media(hover:hover)]:enabled:hover:[box-shadow:0_0_0_5px_hsl(var(--foreground)/0.08)]",
+      // Pressed is written twice: bare for touch, and again inside the hover media query, because Tailwind
+      // emits media-wrapped utilities after plain ones and the hover layer would otherwise outrank the press.
+      "enabled:active:[box-shadow:0_0_0_5px_hsl(var(--foreground)/0.14)]",
+      "[@media(hover:hover)]:enabled:active:[box-shadow:0_0_0_5px_hsl(var(--foreground)/0.14)]",
+      // ...and the box itself answers in the colour it already has. Valid only: an invalid box keeps its
+      // `--destructive` edge under the pointer, or hovering would erase the one cue the box carries.
+      "[@media(hover:hover)]:enabled:hover:[&[data-state=unchecked]:not([aria-invalid=true])]:border-foreground",
+      "[@media(hover:hover)]:enabled:hover:[&:is([data-state=checked],[data-state=indeterminate]):not([aria-invalid=true])]:bg-action/90",
+      "enabled:active:[&:is([data-state=checked],[data-state=indeterminate]):not([aria-invalid=true])]:bg-action/85",
+      "[@media(hover:hover)]:enabled:active:[&:is([data-state=checked],[data-state=indeterminate]):not([aria-invalid=true])]:bg-action/85",
+      "focus-visible:!ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-disabled",
       className,
     )}
     {...props}

package/src/components/collapsible.tsx

@@ -1,9 +1,49 @@
 "use client";
 
+import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cn } from "../lib/utils";
 
 const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+/**
+ * The disclosure transition, which this component shipped without.
+ *
+ * Collapsible was a bare re-export: three primitives passed through untouched. Its content appeared
+ * and vanished in a single frame while `Accordion` — the same disclosure gesture on a sibling Radix
+ * primitive — animated its height. Measured before this change, the content went 0px to 84px with no
+ * animation at all, against the accordion's 0px → 24.64px → 36px over 200ms.
+ *
+ * Disclosure is the case where motion carries meaning rather than decorating it: the content growing
+ * out of the trigger is what says it belongs to the thing you just pressed, and where it will go when
+ * you press it again. Appearing instantly makes the page look like it was replaced instead.
+ *
+ * `overflow-hidden` is load-bearing, not cosmetic — the height animation clips its content as it
+ * runs, and without it the text is laid out at full height from the first frame and simply spills
+ * out of the collapsing box.
+ *
+ * Reduced motion needs nothing here. The package's base layer collapses `animation-duration` for
+ * everything it ships, and the content still lands at its full height because the keyframe's end
+ * state is unchanged — proven in both directions by `scripts/motion.mjs`.
+ *
+ * Wrapping the primitive rather than re-exporting it adds a `className` that merges with the
+ * caller's, which is the convention every other component here follows. The props, the ref and the
+ * data attributes are the primitive's own, so nothing a consumer passes today behaves differently.
+ */
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn(
+      "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+      className,
+    )}
+    {...props}
+  />
+));
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/command.tsx

@@ -38,7 +38,7 @@ const CommandInput = React.forwardRef<
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     {/* Resting-dim icon, no hover/disabled state — numerically the disabled
         value (0.5) but not that role; left as a literal, see calendar.tsx */}
-    <Search className="mr-2 size-4 shrink-0 opacity-50" />
+    <Search className="me-2 size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
@@ -108,7 +108,7 @@ const CommandItem = React.forwardRef<
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+  <span className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
 );
 CommandShortcut.displayName = "CommandShortcut";
 

package/src/components/context-menu.tsx

@@ -4,18 +4,26 @@ import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import { cn } from "../lib/utils";
+import { withDirectionalPortal } from "./direction-provider";
 
 const ContextMenu = ContextMenuPrimitive.Root;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuPortal = withDirectionalPortal(ContextMenuPrimitive.Portal);
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const itemCls =
   "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled";
 const contentCls =
-  "z-overlay min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+    // Capped to the room Radix reports it has, so large text cannot push the surface past the window —
+    // see the note in popover.tsx for the measurement that prompted it.
+    // `min-w` yields to the available room, which is not a detail: `min-width` beats `max-width` in CSS,
+    // so the cap above was unenforceable on its own. Measured on a 390px phone with the root font size
+    // doubled — 8rem becomes 256px, the cap resolved to 193px, and the menu came out 256px wide with its
+    // right edge 63px past the window and those items unreachable. `min(...)` keeps the comfortable
+    // minimum whenever there is room for it and gives it up when there is not.
+  "z-overlay max-w-[var(--radix-popper-available-width)] min-w-[min(8rem,var(--radix-popper-available-width))] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:duration-fast data-[state=open]:ease-enter data-[state=closed]:duration-instant data-[state=closed]:ease-exit";
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
@@ -23,11 +31,11 @@ const ContextMenuSubTrigger = React.forwardRef<
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
-    className={cn(itemCls, "data-[state=open]:bg-accent", inset && "pl-8", className)}
+    className={cn(itemCls, "data-[state=open]:bg-accent", inset && "ps-8", className)}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto size-4" />
+    <ChevronRight className="me-0 ms-auto size-4 rtl:-scale-x-100" />
   </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
@@ -44,9 +52,9 @@ const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
+  <ContextMenuPortal>
     <ContextMenuPrimitive.Content ref={ref} className={cn(contentCls, className)} {...props} />
-  </ContextMenuPrimitive.Portal>
+  </ContextMenuPortal>
 ));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
@@ -54,7 +62,7 @@ const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & { inset?: boolean }
 >(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item ref={ref} className={cn(itemCls, inset && "pl-8", className)} {...props} />
+  <ContextMenuPrimitive.Item ref={ref} className={cn(itemCls, inset && "ps-8", className)} {...props} />
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
@@ -62,8 +70,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem ref={ref} className={cn(itemCls, "pl-8", className)} checked={checked} {...props}>
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+  <ContextMenuPrimitive.CheckboxItem ref={ref} className={cn(itemCls, "ps-8", className)} checked={checked} {...props}>
+    <span className="absolute start-2 flex size-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Check className="size-4" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -77,8 +85,8 @@ const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem ref={ref} className={cn(itemCls, "pl-8", className)} {...props}>
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+  <ContextMenuPrimitive.RadioItem ref={ref} className={cn(itemCls, "ps-8", className)} {...props}>
+    <span className="absolute start-2 flex size-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
         <Circle className="size-2 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -94,7 +102,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "ps-8", className)}
     {...props}
   />
 ));
@@ -109,7 +117,7 @@ const ContextMenuSeparator = React.forwardRef<
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
+  <span className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />
 );
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 

package/src/components/dialog.tsx

@@ -4,10 +4,11 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "../lib/utils";
+import { withDirectionalPortal } from "./direction-provider";
 
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = withDirectionalPortal(DialogPrimitive.Portal);
 const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
@@ -17,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-overlay bg-scrim backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:duration-fast data-[state=open]:ease-enter data-[state=closed]:duration-instant data-[state=closed]:ease-exit",
       className,
     )}
     {...props}
@@ -36,7 +37,7 @@ const DialogContent = React.forwardRef<
       className={cn(
         // rtl-ok: centering trick (left-1/2 + -translate-x-1/2), direction-agnostic by construction
         "fixed left-1/2 top-1/2 z-overlay grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:duration-fast data-[state=open]:ease-enter data-[state=closed]:duration-instant data-[state=closed]:ease-exit",
         className,
       )}
       {...props}
@@ -58,7 +59,7 @@ DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
     {...props}
   />
 );