@carlonicora/nextjs-jsonapi 3.3.9 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "3.3.9",
+  "version": "3.4.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -73,7 +73,7 @@
     "build": "rm -rf dist && NODE_OPTIONS='--max-old-space-size=8192' tsup && tsc -p scripts/generate-web-module/tsconfig.json",
     "dev": "NODE_OPTIONS='--max-old-space-size=8192' tsup --watch",
     "clean": "rm -rf dist",
-    "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" --fix",
+    "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" --fix && node scripts/check-rtl-classes.mjs",
     "format": "prettier --write \"src/**/*.ts\"",
     "prepublishOnly": "pnpm build",
     "prepare": "tsc -p scripts/generate-web-module/tsconfig.json",

package/scripts/check-rtl-classes.mjs

@@ -0,0 +1,60 @@
+// Lint-time guard: physical directional Tailwind classes / CSS props are
+// forbidden in src/ — use logical equivalents, or escape with `rtl-ok`.
+import { readFileSync, readdirSync, realpathSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PATTERNS = [
+  /(?<![-\w:[])(?:ml|mr|pl|pr)-(?:\[|\d|auto|px)/g,
+  /(?<![-\w:[])-?(?:left|right)-(?:\[|\d|px|full)/g,
+  /(?<![-\w])text-(?:left|right)(?![-\w])/g,
+  /(?<![-\w])rounded-(?:[lr]|tl|tr|bl|br)(?![a-z])/g,
+  /(?<![-\w])border-[lr](?![a-z])/g,
+  /(?<![-\w])float-(?:left|right)(?![-\w])/g,
+  /(?<![-\w])scroll-(?:ml|mr|pl|pr)-/g,
+  /\b(?:marginLeft|marginRight|paddingLeft|paddingRight)\s*[:=]/g,
+];
+
+export function findViolations(source, file) {
+  if (/__tests__|\.(test|spec)\.[tj]sx?$/.test(file)) return [];
+  const out = [];
+  const lines = source.split("\n");
+  lines.forEach((line, i) => {
+    if (line.includes("rtl-ok") || (i > 0 && lines[i - 1].includes("rtl-ok"))) return;
+    if (line.includes("data-[side=")) return; // rtl-ok by design (resolved physical side)
+    for (const p of PATTERNS) {
+      for (const m of line.matchAll(p)) out.push({ file, line: i + 1, match: m[0] });
+    }
+  });
+  return out;
+}
+
+function* walk(dir) {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) yield* walk(p);
+    else if (/\.(ts|tsx)$/.test(name)) yield p;
+  }
+}
+
+// `process.argv[1]` is not symlink-resolved by node while `import.meta.url` is,
+// so compare real paths — otherwise the CLI silently does nothing.
+function isDirectInvocation() {
+  try {
+    return realpathSync(process.argv[1]) === realpathSync(fileURLToPath(import.meta.url));
+  } catch {
+    return false;
+  }
+}
+
+if (isDirectInvocation()) {
+  const root = join(fileURLToPath(new URL(".", import.meta.url)), "..", "src");
+  const all = [];
+  for (const f of walk(root)) all.push(...findViolations(readFileSync(f, "utf8"), f));
+  if (all.length) {
+    for (const v of all) console.error(`${v.file}:${v.line}  ${v.match}`);
+    console.error(`\n${all.length} physical directional class(es). Use logical utilities or add an rtl-ok comment.`);
+    process.exit(1);
+  }
+  console.log("check-rtl-classes: clean");
+}

package/scripts/check-rtl-classes.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { findViolations } from "./check-rtl-classes.mjs";
+
+const hits = (src: string) => findViolations(src, "x.tsx").map((v) => v.match);
+
+describe("check-rtl-classes", () => {
+  it("flags physical directional utilities", () => {
+    expect(hits(`<div className="ml-2 pr-4 text-left rounded-l-md border-r left-0 -right-4" />`)).toHaveLength(7);
+    expect(hits(`<li style={{ paddingLeft: "1rem" }} />`)).toHaveLength(1);
+  });
+  it("ignores logical, symmetric, compound and rtl-variant classes", () => {
+    expect(
+      hits(
+        `<div className="ms-2 pe-4 text-start rounded-s-md border-e start-0 inset-x-2 space-x-2 divide-x translate-x-1/2 slide-in-from-left-10 rounded-lg border-x blur-md rtl:rotate-180 rtl:-translate-x-2 data-[side=left]:left-0" />`,
+      ),
+    ).toHaveLength(0);
+  });
+  it("honours rtl-ok escapes on the same or previous line", () => {
+    expect(hits(`{/* rtl-ok */}\n<div className="ml-2" />`)).toHaveLength(0);
+    expect(hits(`<div className="ml-2" /> {/* rtl-ok */}`)).toHaveLength(0);
+  });
+  it("skips test files", () => {
+    expect(findViolations(`"ml-2"`, "src/x/__tests__/y.test.tsx")).toHaveLength(0);
+  });
+});

package/src/components/TableCellAvatar.tsx

@@ -10,7 +10,7 @@ type TableCellAvatarProps = {
 
 export function TableCellAvatar({ image, name, className }: TableCellAvatarProps) {
   return (
-    <Avatar className={cn("mr-2 h-10 w-10 shrink-0", className)}>
+    <Avatar className={cn("me-2 h-10 w-10 shrink-0", className)}>
       {image ? <AvatarImage src={image} alt={name} /> : null}
       <AvatarFallback className="text-xs">{getInitials(name)}</AvatarFallback>
     </Avatar>

package/src/components/containers/PageContainer.tsx

@@ -19,7 +19,7 @@ export function PageContainer({ children, testId, className }: PageContainerProp
       <Header leftContent={headerLeftContent} logo={headerLogo} mobileChildren={headerMobileChildren}>
         {headerChildren}
       </Header>
-      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 pl-4 pr-0`, className)}>{children}</main>
+      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 ps-4 pe-0`, className)}>{children}</main>
     </div>
   );
 }

package/src/components/containers/ReactMarkdownContainer.tsx

@@ -57,7 +57,7 @@ export function ReactMarkdownContainer({
               li: ({ children }) => <li className={size === "small" ? "text-xs" : ""}>{children}</li>,
               table: ({ children }) => <table className="w-full table-auto border-collapse border">{children}</table>,
               th: ({ children }) => (
-                <th className={`border px-4 py-2 text-left ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>
+                <th className={`border px-4 py-2 text-start ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>
                   {children}
                 </th>
               ),
@@ -65,9 +65,25 @@ export function ReactMarkdownContainer({
                 <td className={`border px-4 py-2 ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>{children}</td>
               ),
               tr: ({ children }) => <tr className="even:bg-gray-50">{children}</tr>,
-              ul: ({ children }) => <ul className={`list-disc ${size === "small" ? "pl-3" : "pl-4"}`}>{children}</ul>,
+              ul: ({ children }) => <ul className={`list-disc ${size === "small" ? "ps-3" : "ps-4"}`}>{children}</ul>,
               ol: ({ children }) => (
-                <ol className={`list-decimal ${size === "small" ? "pl-3" : "pl-4"}`}>{children}</ol>
+                <ol className={`list-decimal ${size === "small" ? "ps-3" : "ps-4"}`}>{children}</ol>
+              ),
+              // Code is not prose: identifiers, paths and command lines read
+              // left-to-right in every locale, so both the fenced block and the
+              // inline span are deliberate LTR islands. `node` is react-markdown's
+              // hast node — it must not reach the DOM element.
+              // rtl-ok: deliberate LTR island (code)
+              pre: ({ children, node: _node, ...props }) => (
+                <pre dir="ltr" {...props}>
+                  {children}
+                </pre>
+              ),
+              // rtl-ok: deliberate LTR island (code)
+              code: ({ children, node: _node, ...props }) => (
+                <code dir="ltr" {...props}>
+                  {children}
+                </code>
               ),
               h1: ({ children }) => (
                 <h1 className={size === "small" ? "my-1 mt-2 text-sm font-bold" : "my-2 mt-4 text-3xl font-semibold"}>
@@ -98,7 +114,7 @@ export function ReactMarkdownContainer({
         </div>
 
         {collapsible && !isExpanded && showExpandButton && (
-          <div className="pointer-events-none absolute right-0 bottom-0 left-0 h-12 bg-gradient-to-t from-white to-transparent" />
+          <div className="pointer-events-none absolute end-0 bottom-0 start-0 h-12 bg-gradient-to-t from-white to-transparent" />
         )}
       </div>
 

package/src/components/containers/RoundPageContainer.tsx

@@ -96,10 +96,10 @@ type RoundPageContainerProps = {
 };
 
 // Rail trigger class: override the horizontal TabsTrigger defaults for a
-// vertical, left-aligned, dark-filled active state. tailwind-merge inside cn()
+// vertical, start-aligned, dark-filled active state. tailwind-merge inside cn()
 // resolves the conflicts with the base classes.
 const railTriggerClass = cn(
-  "flex w-full items-center justify-start rounded-md px-3 py-1.5 text-left text-sm leading-tight whitespace-normal",
+  "flex w-full items-center justify-start rounded-md px-3 py-1.5 text-start text-sm leading-tight whitespace-normal",
   "text-muted-foreground",
   "hover:bg-muted hover:text-foreground",
   "data-[state=active]:bg-foreground data-[state=active]:text-background",
@@ -237,7 +237,7 @@ export function RoundPageContainer({
             // render 78px tall; below the bar it became a visible gap. The
             // swipe-up gesture region is unaffected either way — it is a gesture
             // area, not painted chrome.
-            isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 pl-0",
+            isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 ps-0",
           )}
         >
           {/* `min-h-0 flex-1`, NOT `h-full`: the bar below is an in-flow sibling in
@@ -280,7 +280,7 @@ export function RoundPageContainer({
           // render 78px tall; below the bar it became a visible gap. The
           // swipe-up gesture region is unaffected either way — it is a gesture
           // area, not painted chrome.
-          isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 pl-0",
+          isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 ps-0",
         )}
       >
         {/* `min-h-0 flex-1`, NOT `h-full`: MobileNavigationBar below is an in-flow
@@ -323,7 +323,7 @@ export function RoundPageContainer({
                   {/* Flush-left section rail — md and up */}
                   <aside
                     data-testid="round-page-rail"
-                    className="hidden shrink-0 border-r p-4 md:flex md:w-56 md:flex-col md:overflow-y-auto"
+                    className="hidden shrink-0 border-e p-4 md:flex md:w-56 md:flex-col md:overflow-y-auto"
                   >
                     {/* `w-full` is load-bearing: TabsList's base variant carries
                         `w-fit`, which shrinks the rail list to its widest label.
@@ -506,7 +506,7 @@ export function RoundPageContainer({
           {details &&
             (isMobile ? (
               <Sheet open={showDetails} onOpenChange={setShowDetails}>
-                <SheetContent side="right">
+                <SheetContent side="end">
                   <SheetHeader>
                     <SheetTitle>{detailsTitle ?? "Details"}</SheetTitle>
                   </SheetHeader>
@@ -533,7 +533,7 @@ export function RoundPageContainer({
                   // vertically too. Making this the containing block lets
                   // `overflow-hidden` clip them again.
                   "relative flex h-full shrink-0 flex-col overflow-hidden transition-all duration-300 ease-in-out",
-                  showDetails ? "w-96 border-l opacity-100" : "ml-0 w-0 border-l-0 opacity-0",
+                  showDetails ? "w-96 border-s opacity-100" : "ms-0 w-0 border-s-0 opacity-0",
                 )}
               >
                 {detailsTitle && (

package/src/components/contents/AttributeElement.tsx

@@ -14,7 +14,7 @@ export function AttributeElement({ inline, title, value, className }: AttributeE
   return (
     <div className={cn(`flex ${inline === true ? "flex-row" : "flex-col"} my-1 justify-start`, className)}>
       {title && (
-        <div className={`${inline === true ? "min-w-48 pr-4" : "w-full"} text-xs text-muted-foreground`}>{title}</div>
+        <div className={`${inline === true ? "min-w-48 pe-4" : "w-full"} text-xs text-muted-foreground`}>{title}</div>
       )}
       {value && <div className="flex w-full flex-col text-sm">{value}</div>}
     </div>

package/src/components/editors/BlockNoteDiffInlineContent.tsx

@@ -51,7 +51,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
       if (diffType === "buttons") {
         const diffIdList = diffId.split(",");
         return (
-          <span className="ml-2 inline-flex items-center gap-1">
+          <span className="ms-2 inline-flex items-center gap-1">
             <Button
               size="sm"
               variant="ghost"
@@ -108,7 +108,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
           </span>
 
           {!accepted && !rejected && (diffType === "added" || diffType === "removed") && (
-            <span className="absolute -top-8 left-0 z-10 hidden items-center gap-1 rounded border bg-white p-1 shadow-lg group-hover:flex">
+            <span className="absolute -top-8 start-0 z-10 hidden items-center gap-1 rounded border bg-white p-1 shadow-lg group-hover:flex">
               <Button
                 size="sm"
                 variant="ghost"

package/src/components/editors/BlockNoteEditorMentionHoverCard.tsx

@@ -87,6 +87,7 @@ export function BlockNoteEditorMentionHoverCard({
       style={{
         position: "fixed",
         top: rect.bottom + 4,
+        // rtl-ok: viewport-anchored floating position
         left: rect.left,
         zIndex: 50,
       }}

package/src/components/forms/CommonDeleter.tsx

@@ -107,7 +107,7 @@ export function CommonDeleter({
         )}
         <div className="flex justify-end">
           <Button
-            className="mr-2"
+            className="me-2"
             variant={"outline"}
             type={`button`}
             onClick={() => setOpen(false)}

package/src/components/forms/CommonEditorButtons.tsx

@@ -45,7 +45,7 @@ export function CommonEditorButtons({
   return (
     <div className="flex justify-end">
       <Button
-        className="mr-2"
+        className="me-2"
         variant={"outline"}
         type={`button`}
         onClick={() => setOpen(false)}

package/src/components/forms/DatePickerPopover.tsx

@@ -163,10 +163,10 @@ export const DatePickerPopover = ({
               value={inputValue}
               onChange={(e) => handleInputChange(e.target.value)}
               placeholder={datePlaceholder}
-              className="pr-16"
+              className="pe-16"
               onClick={(e) => e.stopPropagation()}
             />
-            <div className="absolute right-1 top-1/2 flex -translate-y-1/2 items-center space-x-1">
+            <div className="absolute end-1 top-1/2 flex -translate-y-1/2 items-center space-x-1">
               <button
                 type="button"
                 className="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted"

package/src/components/forms/DateRangeSelector.tsx

@@ -94,7 +94,7 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
         <Button
           id="date"
           variant={"outline"}
-          className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
+          className={cn("w-[300px] justify-start text-start font-normal", !date && "text-muted-foreground")}
         >
           <CalendarIcon />
           {date?.from ? (
@@ -122,7 +122,7 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
             <Button
               id="date"
               variant={"outline"}
-              className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
+              className={cn("w-[300px] justify-start text-start font-normal", !date && "text-muted-foreground")}
             />
           }
         >

package/src/components/forms/EditorSheet.tsx

@@ -57,12 +57,20 @@ function resolveTriggerIsNativeButton(trigger: ReactNode): boolean {
   return true;
 }
 
+/**
+ * The sheet opens on the inline end (`side="end"`), which SheetContent resolves
+ * to the physical `right` in LTR and `left` in RTL — and its own width classes
+ * are keyed to that resolved physical side. Each size therefore has to be
+ * declared for BOTH sides, or an RTL sheet would fall back to SheetContent's
+ * base `data-[side=left]:sm:max-w-sm`.
+ */
+// rtl-ok: keyed to the resolved physical side, not to a writing direction
 const sizeClasses: Record<EditorSheetSize, string> = {
-  sm: "data-[side=right]:sm:max-w-2xl",
-  md: "data-[side=right]:sm:max-w-3xl",
-  lg: "data-[side=right]:sm:max-w-5xl",
-  xl: "data-[side=right]:sm:max-w-7xl",
-  "2xl": "data-[side=right]:sm:!max-w-[min(96rem,90vw)]",
+  sm: "data-[side=right]:sm:max-w-2xl data-[side=left]:sm:max-w-2xl",
+  md: "data-[side=right]:sm:max-w-3xl data-[side=left]:sm:max-w-3xl",
+  lg: "data-[side=right]:sm:max-w-5xl data-[side=left]:sm:max-w-5xl",
+  xl: "data-[side=right]:sm:max-w-7xl data-[side=left]:sm:max-w-7xl",
+  "2xl": "data-[side=right]:sm:!max-w-[min(96rem,90vw)] data-[side=left]:sm:!max-w-[min(96rem,90vw)]",
 };
 
 export type EditorSheetProps<T extends FieldValues> = {
@@ -106,7 +114,7 @@ export type EditorSheetProps<T extends FieldValues> = {
     closeWithoutConfirm: (open: boolean) => void;
   }) => ReactNode;
 
-  /** Rendered on the right-hand side of the header, next to the title/description
+  /** Rendered on the inline-end side of the header, next to the title/description
    *  block. This sits OUTSIDE the <form> element — interactive elements here must
    *  use onClick handlers, never type="submit". */
   actions?: ReactNode;
@@ -271,11 +279,12 @@ export function EditorSheet<T extends FieldValues>({
               )}
             </SheetTrigger>
           ))}
-        <SheetContent side="right" className={sizeClasses[size]}>
+        <SheetContent side="end" className={sizeClasses[size]}>
           <SheetHeader className="border-b px-6 py-4">
             {actions ? (
-              // pr-10 clears the SheetContent close button (absolute top-4 right-4).
-              <div className="flex items-start justify-between gap-x-4 pr-10">
+              // pe-10 clears the SheetContent close button, which sits at the
+              // inline end of the sheet (absolute top-4 end-4).
+              <div className="flex items-start justify-between gap-x-4 pe-10">
                 <div className="flex min-w-0 flex-col gap-y-1.5">
                   <SheetTitle>{headerTitle}</SheetTitle>
                   <SheetDescription>{headerDescription}</SheetDescription>

package/src/components/forms/EntityMultiSelector.tsx

@@ -229,32 +229,32 @@ export function EntityMultiSelector<T extends { id: string }>({
                 >
                   {selectedValues.length > 0 ? (
                     <>
-                      <span className="text-foreground min-w-0 flex-1 truncate text-left">{triggerSummary}</span>
+                      <span className="text-foreground min-w-0 flex-1 truncate text-start">{triggerSummary}</span>
                       <span className="bg-primary/10 text-primary shrink-0 rounded-full px-1.5 py-0.5 text-xs font-medium">
                         {selectedValues.length}
                       </span>
                     </>
                   ) : (
-                    <span className="text-muted-foreground flex-1 text-left">{placeholder}</span>
+                    <span className="text-muted-foreground flex-1 text-start">{placeholder}</span>
                   )}
                   <ChevronDownIcon className="text-muted-foreground size-3.5 shrink-0" />
                 </div>
               </PopoverTrigger>
               <PopoverContent className="w-(--anchor-width) flex flex-col gap-0 p-0" align="start">
                 <div className="relative p-1.5">
-                  <SearchIcon className="text-muted-foreground pointer-events-none absolute top-1/2 left-3.5 size-3.5 -translate-y-1/2" />
+                  <SearchIcon className="text-muted-foreground pointer-events-none absolute top-1/2 start-3.5 size-3.5 -translate-y-1/2" />
                   <Input
                     ref={searchInputRef}
                     placeholder={placeholder}
                     type="text"
-                    className="h-8 w-full pr-7 pl-7 text-xs"
+                    className="h-8 w-full pe-7 ps-7 text-xs"
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
                   />
                   {searchTerm && (
                     <button
                       type="button"
-                      className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3.5 -translate-y-1/2"
+                      className="text-muted-foreground hover:text-foreground absolute top-1/2 end-3.5 -translate-y-1/2"
                       onClick={() => setSearchTerm("")}
                     >
                       <XIcon className="size-3.5" />
@@ -271,7 +271,7 @@ export function EntityMultiSelector<T extends { id: string }>({
                         <button
                           key={option.id}
                           type="button"
-                          className="hover:bg-muted flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-xs/relaxed"
+                          className="hover:bg-muted flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-start text-xs/relaxed"
                           onClick={() => toggleEntity(option)}
                         >
                           {renderOption && option.entityData ? (
@@ -313,7 +313,7 @@ export function EntityMultiSelector<T extends { id: string }>({
                   <Badge
                     key={value.id}
                     variant="outline"
-                    className="h-auto gap-1.5 rounded-md px-2.5 py-1 pr-1.5 text-xs"
+                    className="h-auto gap-1.5 rounded-md px-2.5 py-1 pe-1.5 text-xs"
                   >
                     {stableGetFormValueLabel(value)}
                     <button

package/src/components/forms/EntitySelector.tsx

@@ -169,7 +169,7 @@ export default function EntitySelector<T extends BaseEntity>({
                     hasValue(effectiveValue) ? "" : "text-muted-foreground"
                   } ${disabled ? "cursor-not-allowed opacity-50" : ""}`}
                 >
-                  <span className="min-w-0 flex-1 truncate text-left">
+                  <span className="min-w-0 flex-1 truncate text-start">
                     {hasValue(effectiveValue)
                       ? getSelectedItemDisplay
                         ? getSelectedItemDisplay(effectiveValue)
@@ -178,7 +178,7 @@ export default function EntitySelector<T extends BaseEntity>({
                   </span>
                   {hasValue(effectiveValue) && !disabled && (
                     <CircleX
-                      className="text-muted hover:text-destructive ml-auto h-4 w-4 shrink-0 cursor-pointer"
+                      className="text-muted hover:text-destructive ms-auto h-4 w-4 shrink-0 cursor-pointer"
                       onClick={(e) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -191,19 +191,19 @@ export default function EntitySelector<T extends BaseEntity>({
               <PopoverContent align="start" className="w-(--anchor-width) pointer-events-auto">
                 <Command shouldFilter={false}>
                   <div className="relative mb-2 w-full">
-                    <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                    <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
                     <Input
                       placeholder={placeholder}
                       type="text"
-                      className="w-full pr-8 pl-8"
+                      className="w-full pe-8 ps-8"
                       onChange={(e) => setSearchTerm(e.target.value)}
                       value={searchTerm}
                     />
                     {isSearching ? (
-                      <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                      <RefreshCwIcon className="text-muted-foreground absolute top-2.5 end-2.5 h-4 w-4 animate-spin" />
                     ) : searchTermRef.current ? (
                       <XIcon
-                        className="absolute top-2.5 right-2.5 h-4 w-4 cursor-pointer"
+                        className="absolute top-2.5 end-2.5 h-4 w-4 cursor-pointer"
                         onClick={() => {
                           setSearchTerm("");
                           search("");
@@ -221,9 +221,9 @@ export default function EntitySelector<T extends BaseEntity>({
                         onSelect={handleCreateNew}
                       >
                         {isCreating ? (
-                          <RefreshCwIcon className="mr-2 h-4 w-4 animate-spin" />
+                          <RefreshCwIcon className="me-2 h-4 w-4 animate-spin" />
                         ) : (
-                          <Plus className="mr-2 h-4 w-4" />
+                          <Plus className="me-2 h-4 w-4" />
                         )}
                         <span>{createNewLabel ? createNewLabel(searchTerm) : searchTerm.trim() || ""}</span>
                       </CommandItem>

package/src/components/forms/FileUploader.tsx

@@ -317,6 +317,7 @@ export const FileUploaderItem = forwardRef<HTMLDivElement, { index: number } & R
         </div>
         <button
           type="button"
+          // rtl-ok: already direction-aware — resolves the physical corner from the component's own `dir` prop
           className={cn("absolute", direction === "rtl" ? "top-1 left-1" : "top-1 right-1")}
           onClick={() => removeFileFromSet(index)}
         >

package/src/components/forms/FormCheckbox.tsx

@@ -15,7 +15,7 @@ type FormCheckboxProps = {
 export function FormCheckbox({ form, id, name, labelBefore, description, isRequired }: FormCheckboxProps) {
   const simpleLabel = () => {
     return (
-      <FieldLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ml-3"}`}>
+      <FieldLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ms-3"}`}>
         {name}
       </FieldLabel>
     );
@@ -38,10 +38,10 @@ export function FormCheckbox({ form, id, name, labelBefore, description, isRequi
         {(field) => (
           <div className="flex gap-x-4">
             {labelBefore && label()}
-            {labelBefore && isRequired && <span className="ml-1 text-destructive">*</span>}
+            {labelBefore && isRequired && <span className="ms-1 text-destructive">*</span>}
             <Checkbox id={id} checked={field.value ?? false} onCheckedChange={field.onChange} />
             {!labelBefore && label()}
-            {!labelBefore && isRequired && <span className="ml-1 text-destructive">*</span>}
+            {!labelBefore && isRequired && <span className="ms-1 text-destructive">*</span>}
           </div>
         )}
       </FormFieldWrapper>

package/src/components/forms/FormDateTime.tsx

@@ -117,7 +117,7 @@ export function FormDateTime({
                   render={
                     <Button
                       variant={"outline"}
-                      className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                      className={cn("w-full ps-3 text-start font-normal", !field.value && "text-muted-foreground")}
                     />
                   }
                 >
@@ -126,11 +126,11 @@ export function FormDateTime({
                   ) : (
                     <span>{placeholder ? placeholder : t(`common.pick_date_time`)}</span>
                   )}
-                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  <CalendarIcon className="ms-auto h-4 w-4 opacity-50" />
                 </PopoverTrigger>
                 {field.value && allowEmpty !== false && (
                   <CircleXIcon
-                    className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
+                    className="text-muted hover:text-destructive ms-2 h-6 w-6 cursor-pointer"
                     onClick={() => {
                       if (onChange) onChange(undefined);
                       form.setValue(id, "");

package/src/components/forms/FormFieldWrapper.tsx

@@ -43,7 +43,7 @@ export function FormFieldWrapper<T extends FieldValues>({
           {label && (
             <FieldLabel>
               {label}
-              {isRequired && <span className="ml-1 text-destructive">*</span>}
+              {isRequired && <span className="ms-1 text-destructive">*</span>}
             </FieldLabel>
           )}
           {children(field, fieldState)}

package/src/components/forms/FormPlaceAutocomplete.tsx

@@ -315,14 +315,14 @@ export function FormPlaceAutocomplete({
 
             {/* Loading indicator */}
             {isLoading && (
-              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+              <div className="absolute end-3 top-1/2 -translate-y-1/2">
                 <div className="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent"></div>
               </div>
             )}
 
             {/* Suggestions dropdown */}
             {showSuggestions && suggestions.length > 0 && (
-              <div className="bg-background absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border shadow-lg">
+              <div className="bg-background absolute start-0 end-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border shadow-lg">
                 {suggestions.map((suggestion, index) => (
                   <div
                     key={suggestion.place_id || index}

package/src/components/forms/GdprConsentCheckbox.tsx

@@ -28,7 +28,7 @@ export function GdprConsentCheckbox<T extends FieldValues>({
           <div className="space-y-1 leading-none">
             <span className="text-sm font-normal">
               {label}
-              {required && <span className="ml-1 text-destructive">*</span>}
+              {required && <span className="ms-1 text-destructive">*</span>}
             </span>
             {description && <FieldDescription className="text-xs">{description}</FieldDescription>}
           </div>

package/src/components/forms/MultiFileUploader.tsx

@@ -87,7 +87,7 @@ const FilePreviewItem = ({ file, onRemoveClick }: { file: File; onRemoveClick: (
     <div className="text-muted-foreground group relative aspect-square h-full overflow-hidden rounded-lg border">
       <button
         onClick={onRemoveClick}
-        className="absolute top-1.5 right-1.5 z-20 rounded-full bg-black/60 p-1 text-white opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 hover:bg-red-600 focus:outline-none"
+        className="absolute top-1.5 end-1.5 z-20 rounded-full bg-black/60 p-1 text-white opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 hover:bg-red-600 focus:outline-none"
         aria-label="Remove file"
       >
         <XIcon className="h-3.5 w-3.5" />

package/src/components/forms/PasswordInput.tsx

@@ -20,7 +20,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
           type="button"
           variant="ghost"
           size="sm"
-          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+          className="absolute end-0 top-0 h-full px-3 py-2 hover:bg-transparent"
           onClick={() => setShowPassword((prev) => !prev)}
           disabled={disabled}
         >

package/src/components/forms/__tests__/FormCheckbox.test.tsx

@@ -107,7 +107,7 @@ describe.skip("FormCheckbox", () => {
       expect(labelIndex).toBeLessThan(checkboxIndex);
     });
 
-    it("should apply ml-3 class to label when label is after checkbox", () => {
+    it("should apply ms-3 class to label when label is after checkbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
@@ -115,10 +115,10 @@ describe.skip("FormCheckbox", () => {
       );
 
       const label = screen.getByText("Active");
-      expect(label).toHaveClass("ml-3");
+      expect(label).toHaveClass("ms-3");
     });
 
-    it("should not apply ml-3 class when labelBefore is true", () => {
+    it("should not apply ms-3 class when labelBefore is true", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" labelBefore={true} />}
@@ -126,7 +126,7 @@ describe.skip("FormCheckbox", () => {
       );
 
       const label = screen.getByText("Active");
-      expect(label).not.toHaveClass("ml-3");
+      expect(label).not.toHaveClass("ms-3");
     });
   });