@kinetixui/ui 0.11.0 → 0.13.0

package/src/components/data-grid.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const DEFAULT_WIDTH = 160;
+const DEFAULT_MIN_WIDTH = 60;
+const DEFAULT_ROW_HEIGHT = 40;
+
+export interface DataGridColumn<TData> {
+  id: string;
+  header: React.ReactNode;
+  /** rendered cell content */
+  cell: (row: TData, rowIndex: number) => React.ReactNode;
+  /** raw comparable value — required for `sortable` and used to seed inline edits */
+  value?: (row: TData) => string | number;
+  width?: number;
+  minWidth?: number;
+  /** fixed to this side, not draggable, and excluded from the reorder sequence */
+  pinned?: "left" | "right";
+  sortable?: boolean;
+  /** double-click swaps the cell for a text input; commit fires on Enter/blur, Escape cancels */
+  editable?: boolean;
+  onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
+}
+
+export interface DataGridProps<TData> {
+  columns: DataGridColumn<TData>[];
+  data: TData[];
+  /** viewport height — a number (px) or any CSS height value; enables row virtualization */
+  height: number | string;
+  rowHeight?: number;
+  overscan?: number;
+  getRowId?: (row: TData, index: number) => React.Key;
+  className?: string;
+}
+
+type SortState = { columnId: string; direction: "asc" | "desc" } | null;
+
+/**
+ * DataGrid — the "product on its own" the `COMPONENT-ADDITIONS.md` Tier 3
+ * entry calls for: row-virtualized (same fixed-row-height windowing as
+ * `VirtualList`), with column resize, drag-to-reorder, left/right pin, single-
+ * column sort, and double-click-to-edit cells. `DataTable` stays the
+ * TanStack-Table-light option for a plain sortable/paginated table; reach for
+ * `DataGrid` once the row count or column-manipulation needs outgrow it.
+ *
+ * Deliberately out of scope: column *virtualization* (only rows are
+ * windowed — a grid with enough columns to need it is rare enough that this
+ * isn't worth the added complexity) and multi-column sort. Rendered as ARIA
+ * `grid`/`row`/`columnheader`/`gridcell` divs rather than a real `<table>` —
+ * sticky-positioned pinned columns and a sticky header row need that
+ * flexibility, at the cost of the native table-navigation semantics
+ * `DataTable` still gets for free.
+ */
+function DataGrid<TData>({
+  columns,
+  data,
+  height,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  overscan = 6,
+  getRowId,
+  className,
+}: DataGridProps<TData>) {
+  const columnById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
+  const [order, setOrder] = React.useState(() => columns.map((c) => c.id));
+  const [widths, setWidths] = React.useState<Record<string, number>>(() =>
+    Object.fromEntries(columns.map((c) => [c.id, c.width ?? DEFAULT_WIDTH])),
+  );
+  const [sort, setSort] = React.useState<SortState>(null);
+  const [editing, setEditing] = React.useState<{ rowIndex: number; columnId: string } | null>(null);
+  const dragIdRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    const knownIds = columns.map((c) => c.id);
+    const known = new Set(knownIds);
+    setOrder((prev) => {
+      const kept = prev.filter((id) => known.has(id));
+      const added = knownIds.filter((id) => !kept.includes(id));
+      return [...kept, ...added];
+    });
+    setWidths((prev) => {
+      const next = { ...prev };
+      for (const c of columns) if (!(c.id in next)) next[c.id] = c.width ?? DEFAULT_WIDTH;
+      return next;
+    });
+  }, [columns]);
+
+  const leftPinned = columns.filter((c) => c.pinned === "left");
+  const rightPinned = columns.filter((c) => c.pinned === "right");
+  const unpinnedOrdered = order
+    .filter((id) => columnById.get(id) && !columnById.get(id)!.pinned)
+    .map((id) => columnById.get(id)!);
+  const renderedColumns = [...leftPinned, ...unpinnedOrdered, ...rightPinned];
+
+  const leftOffsets = React.useMemo(() => {
+    const offsets: Record<string, number> = {};
+    let acc = 0;
+    for (const c of leftPinned) {
+      offsets[c.id] = acc;
+      acc += widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    }
+    return offsets;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, widths]);
+
+  const rightOffsets = React.useMemo(() => {
+    const offsets: Record<string, number> = {};
+    let acc = 0;
+    for (const c of [...rightPinned].reverse()) {
+      offsets[c.id] = acc;
+      acc += widths[c.id] ?? c.width ?? DEFAULT_WIDTH;
+    }
+    return offsets;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, widths]);
+
+  const totalWidth = renderedColumns.reduce((sum, c) => sum + (widths[c.id] ?? c.width ?? DEFAULT_WIDTH), 0);
+
+  const sortedData = React.useMemo(() => {
+    if (!sort) return data;
+    const col = columnById.get(sort.columnId);
+    if (!col?.value) return data;
+    const indexed = data.map((row, index) => ({ row, index }));
+    indexed.sort((a, b) => {
+      const av = col.value!(a.row);
+      const bv = col.value!(b.row);
+      if (av === bv) return a.index - b.index;
+      const cmp = av < bv ? -1 : 1;
+      return sort.direction === "asc" ? cmp : -cmp;
+    });
+    return indexed.map((entry) => entry.row);
+  }, [data, sort, columnById]);
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [viewportHeight, setViewportHeight] = React.useState(typeof height === "number" ? height : 0);
+
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const totalHeight = sortedData.length * rowHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const visibleCount = Math.ceil(viewportHeight / rowHeight) + overscan * 2;
+  const endIndex = Math.min(sortedData.length, startIndex + Math.max(visibleCount, 0));
+  const visibleRows = sortedData.slice(startIndex, endIndex);
+
+  function toggleSort(columnId: string) {
+    setSort((prev) => {
+      if (!prev || prev.columnId !== columnId) return { columnId, direction: "asc" };
+      if (prev.direction === "asc") return { columnId, direction: "desc" };
+      return null;
+    });
+  }
+
+  function beginResize(columnId: string, minWidth: number, startX: number, startWidth: number) {
+    const handleMove = (ev: PointerEvent) => {
+      setWidths((prev) => ({ ...prev, [columnId]: Math.max(minWidth, startWidth + (ev.clientX - startX)) }));
+    };
+    const handleUp = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+  }
+
+  function commitEdit(column: DataGridColumn<TData>, row: TData, rowIndex: number, value: string) {
+    column.onCellEdit?.(row, rowIndex, value);
+    setEditing(null);
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      role="grid"
+      className={cn("relative overflow-auto rounded-md border font-sans text-sm", className)}
+      style={{ height }}
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+    >
+      <div style={{ width: totalWidth, minWidth: "100%" }}>
+        <div role="row" className="sticky top-0 z-[2] flex border-b bg-background">
+          {renderedColumns.map((column) => {
+            const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+            const pinnedStyle: React.CSSProperties =
+              column.pinned === "left"
+                ? { position: "sticky", left: leftOffsets[column.id], zIndex: 3 }
+                : column.pinned === "right"
+                  ? { position: "sticky", right: rightOffsets[column.id], zIndex: 3 }
+                  : {};
+            const isSorted = sort?.columnId === column.id;
+            return (
+              <div
+                key={column.id}
+                role="columnheader"
+                {...(column.sortable
+                  ? { "aria-sort": isSorted ? (sort!.direction === "asc" ? "ascending" : "descending") : "none" }
+                  : {})}
+                draggable={!column.pinned}
+                onDragStart={() => {
+                  dragIdRef.current = column.id;
+                }}
+                onDragOver={(e) => {
+                  if (!column.pinned) e.preventDefault();
+                }}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  const draggedId = dragIdRef.current;
+                  dragIdRef.current = null;
+                  if (!draggedId || draggedId === column.id) return;
+                  setOrder((prev) => {
+                    const next = prev.filter((id) => id !== draggedId);
+                    const targetIndex = next.indexOf(column.id);
+                    next.splice(targetIndex, 0, draggedId);
+                    return next;
+                  });
+                }}
+                onClick={() => column.sortable && toggleSort(column.id)}
+                className={cn(
+                  "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
+                  column.sortable && "cursor-pointer hover:text-foreground",
+                  column.pinned && "bg-background",
+                )}
+                style={{ width, ...pinnedStyle }}
+              >
+                <span className="truncate">{column.header}</span>
+                {column.sortable && isSorted && (
+                  <span aria-hidden="true" className="text-xs">
+                    {sort!.direction === "asc" ? "▲" : "▼"}
+                  </span>
+                )}
+                <div
+                  onPointerDown={(e) => {
+                    e.stopPropagation();
+                    beginResize(column.id, column.minWidth ?? DEFAULT_MIN_WIDTH, e.clientX, width);
+                  }}
+                  className="absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-primary/50"
+                />
+              </div>
+            );
+          })}
+        </div>
+        <div style={{ height: totalHeight, position: "relative" }}>
+          {visibleRows.map((row, i) => {
+            const rowIndex = startIndex + i;
+            return (
+              <div
+                key={getRowId ? getRowId(row, rowIndex) : rowIndex}
+                role="row"
+                className="absolute flex w-full border-b hover:bg-muted/50"
+                style={{ top: rowIndex * rowHeight, height: rowHeight }}
+              >
+                {renderedColumns.map((column) => {
+                  const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+                  const pinnedStyle: React.CSSProperties =
+                    column.pinned === "left"
+                      ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 }
+                      : column.pinned === "right"
+                        ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 }
+                        : {};
+                  const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  return (
+                    <div
+                      key={column.id}
+                      role="gridcell"
+                      onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
+                      className={cn("flex shrink-0 items-center px-2", column.pinned && "bg-background")}
+                      style={{ width, ...pinnedStyle }}
+                    >
+                      {isEditing ? (
+                        <input
+                          autoFocus
+                          defaultValue={column.value ? String(column.value(row)) : ""}
+                          className="h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring"
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value);
+                            else if (e.key === "Escape") setEditing(null);
+                          }}
+                          onBlur={(e) => commitEdit(column, row, rowIndex, e.currentTarget.value)}
+                        />
+                      ) : (
+                        <span className="truncate">{column.cell(row, rowIndex)}</span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { DataGrid };

package/src/components/dialog.tsx

@@ -34,6 +34,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       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",
         className,
@@ -41,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
         <X className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -51,7 +52,7 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-start", className)} {...props} />
 );
 DialogHeader.displayName = "DialogHeader";
 

package/src/components/diff-viewer.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface DiffViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  oldText: string;
+  newText: string;
+  /** "unified" (one interleaved column, like `git diff`) or "split" (two columns, side by side). Default "unified". */
+  mode?: "unified" | "split";
+  /** column headers, `mode="split"` only */
+  oldLabel?: string;
+  newLabel?: string;
+}
+
+type DiffOp =
+  | { type: "equal"; oldLine: number; newLine: number; text: string }
+  | { type: "remove"; oldLine: number; text: string }
+  | { type: "add"; newLine: number; text: string };
+
+/**
+ * Line-based LCS diff (the same longest-common-subsequence backtrack
+ * `git diff`'s line mode is built on), hand-rolled rather than pulled from
+ * a package: it needs to behave identically across all four platforms, and
+ * a ~30-line DP table is easier to keep in lockstep across React/Compose/
+ * SwiftUI/Flutter than four bindings to (or ports of) someone else's diff
+ * library. O(n·m) time and space — fine for a config file or a token
+ * snapshot, the sizes this dev-tool surface actually sees; not meant for
+ * multi-thousand-line files.
+ */
+function computeLineDiff(oldText: string, newText: string): DiffOp[] {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const n = oldLines.length;
+  const m = newLines.length;
+
+  const dp: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      dp[i]![j] = oldLines[i] === newLines[j] ? dp[i + 1]![j + 1]! + 1 : Math.max(dp[i + 1]![j]!, dp[i]![j + 1]!);
+    }
+  }
+
+  const ops: DiffOp[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (oldLines[i] === newLines[j]) {
+      ops.push({ type: "equal", oldLine: i + 1, newLine: j + 1, text: oldLines[i]! });
+      i++;
+      j++;
+    } else if (dp[i + 1]![j]! >= dp[i]![j + 1]!) {
+      ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i]! });
+      i++;
+    } else {
+      ops.push({ type: "add", newLine: j + 1, text: newLines[j]! });
+      j++;
+    }
+  }
+  while (i < n) {
+    ops.push({ type: "remove", oldLine: i + 1, text: oldLines[i]! });
+    i++;
+  }
+  while (j < m) {
+    ops.push({ type: "add", newLine: j + 1, text: newLines[j]! });
+    j++;
+  }
+  return ops;
+}
+
+/**
+ * DiffViewer — a side-by-side / inline text diff with line markers and
+ * gutter line numbers (token diffs, config changes — the site itself could
+ * use this for a "what changed between versions" view). `split` mode
+ * doesn't pair adjacent remove/add runs onto the same row the way GitHub's
+ * split view does — each op renders in its own column, blank on the other
+ * side — a deliberate simplification over that extra alignment heuristic.
+ * Gap-fill addition (not in the original Figma source).
+ */
+const DiffViewer = React.forwardRef<HTMLDivElement, DiffViewerProps>(
+  ({ oldText, newText, mode = "unified", oldLabel = "Before", newLabel = "After", className, ...props }, ref) => {
+    const ops = React.useMemo(() => computeLineDiff(oldText, newText), [oldText, newText]);
+
+    return (
+      <div ref={ref} className={cn("overflow-auto rounded-md border font-mono text-xs", className)} {...props}>
+        {mode === "split" ? (
+          <SplitDiff ops={ops} oldLabel={oldLabel} newLabel={newLabel} />
+        ) : (
+          <UnifiedDiff ops={ops} />
+        )}
+      </div>
+    );
+  },
+);
+DiffViewer.displayName = "DiffViewer";
+
+function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
+  return (
+    <div role="table">
+      {ops.map((op, i) => (
+        <div
+          key={i}
+          role="row"
+          className={cn("flex", op.type === "add" && "bg-success/10", op.type === "remove" && "bg-destructive/10")}
+        >
+          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+            {op.type !== "add" ? op.oldLine : ""}
+          </span>
+          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+            {op.type !== "remove" ? op.newLine : ""}
+          </span>
+          <span
+            className={cn(
+              "w-4 shrink-0 select-none text-center",
+              op.type === "add" && "text-success",
+              op.type === "remove" && "text-destructive",
+            )}
+          >
+            {op.type === "add" ? "+" : op.type === "remove" ? "−" : ""}
+          </span>
+          <span className="min-w-0 flex-1 whitespace-pre px-1">{op.text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SplitDiff({ ops, oldLabel, newLabel }: { ops: DiffOp[]; oldLabel: string; newLabel: string }) {
+  return (
+    <div role="table">
+      <div className="flex border-b bg-muted/40 text-muted-foreground">
+        <div className="flex-1 px-2 py-1">{oldLabel}</div>
+        <div className="flex-1 border-l px-2 py-1">{newLabel}</div>
+      </div>
+      {ops.map((op, i) => (
+        <div key={i} role="row" className="flex">
+          <div className={cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10")}>
+            <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
+              {op.type !== "add" ? op.oldLine : ""}
+            </span>
+            <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "add" ? op.text : ""}</span>
+          </div>
+          <div className={cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10")}>
+            <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
+              {op.type !== "remove" ? op.newLine : ""}
+            </span>
+            <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "remove" ? op.text : ""}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { DiffViewer };

package/src/components/direction-provider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { DirectionProvider as RadixDirectionProvider } from "@radix-ui/react-direction";
+
+export interface KinetixDirectionProviderProps {
+  children?: React.ReactNode;
+  dir: "ltr" | "rtl";
+}
+
+/**
+ * Every Radix primitive this library builds on (Select, DropdownMenu, Popover,
+ * Tooltip, ContextMenu, Menubar, NavigationMenu, HoverCard, …) reads direction
+ * from a `DirectionContext`, not from the ambient `dir` attribute — with no
+ * provider in the tree it defaults hard to `"ltr"` and stamps that onto its own
+ * portaled content, regardless of what `<html dir="rtl">` says. Logical-property
+ * CSS (see RTL.md) mirrors layout; this is what makes Radix's own positioning
+ * and portaled content agree with it. Wrap your app root in this alongside
+ * setting `dir` on `<html>`:
+ *
+ *   <html dir={dir}>
+ *     <KinetixDirectionProvider dir={dir}>{children}</KinetixDirectionProvider>
+ *   </html>
+ */
+export function KinetixDirectionProvider({ dir, children }: KinetixDirectionProviderProps) {
+  return <RadixDirectionProvider dir={dir}>{children}</RadixDirectionProvider>;
+}

package/src/components/drawer.tsx

@@ -43,7 +43,7 @@ const DrawerContent = React.forwardRef<
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)} {...props} />
 );
 DrawerHeader.displayName = "DrawerHeader";
 

package/src/components/dropdown-menu.tsx

@@ -31,7 +31,7 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item ref={ref} className={cn(itemCls, inset && "pl-8", className)} {...props} />
+  <DropdownMenuPrimitive.Item ref={ref} className={cn(itemCls, inset && "ps-8", className)} {...props} />
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
@@ -39,8 +39,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.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">
+  <DropdownMenuPrimitive.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">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -54,8 +54,8 @@ const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem ref={ref} className={cn(itemCls, "pl-8", className)} {...props}>
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+  <DropdownMenuPrimitive.RadioItem ref={ref} className={cn(itemCls, "ps-8", className)} {...props}>
+    <span className="absolute start-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="size-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -71,7 +71,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
     {...props}
   />
 ));
@@ -88,7 +88,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 // opacity-60 (not --opacity-muted's 0.7) is a pre-existing inconsistency —
 // left as a literal rather than silently changing the rendered value.
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  <span className={cn("ms-auto text-xs tracking-widest opacity-60", className)} {...props} />
 );
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
@@ -98,11 +98,11 @@ const DropdownMenuSubTrigger = React.forwardRef<
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.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="ms-auto size-4 rtl:-scale-x-100" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;

package/src/components/input-group.tsx

@@ -52,7 +52,7 @@ const InputGroupInput = React.forwardRef<
 InputGroupInput.displayName = "InputGroupInput";
 
 const addonVariants = cva("flex shrink-0 items-center gap-2 text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0", {
-  variants: { align: { start: "pl-3", end: "pr-3" } },
+  variants: { align: { start: "ps-3", end: "pe-3" } },
   defaultVariants: { align: "start" },
 });
 
@@ -83,7 +83,7 @@ const InputGroupButton = React.forwardRef<
     ref={ref}
     type={type}
     className={cn(
-      "flex h-full shrink-0 items-center gap-1.5 self-stretch border-l border-input bg-muted px-3 text-label-md text-foreground",
+      "flex h-full shrink-0 items-center gap-1.5 self-stretch border-s border-input bg-muted px-3 text-label-md text-foreground",
       // base is bg-muted and muted==accent on dark, so the fill is a no-op there — the ring carries it
       "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled",
       "[&_svg]:size-4 [&_svg]:shrink-0",