@carlonicora/nextjs-jsonapi 3.3.9 → 3.4.0

package/src/features/tokenusage/components/TokenUsageRankedBar.tsx

@@ -90,21 +90,26 @@ export function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperati
           <div key={row.id} className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 gap-y-0.5 py-0.5">
             <div className="grid min-w-0 gap-0.5">
               <span className="text-muted-foreground truncate text-xs">{renderLabel(row)}</span>
-              <div className="bg-muted h-2 w-full overflow-hidden rounded-r-[4px]">
+              {/* The bar itself is a magnitude drawn on an axis, not prose: it always grows
+                  rightward and only its trailing corner is rounded, so the track and its fill
+                  stay an LTR island. The label, value and share around it mirror normally.
+                  rtl-ok: deliberate LTR island (chart) */}
+              <div className="bg-muted h-2 w-full overflow-hidden rounded-r-[4px]" dir="ltr">
                 <div
                   data-testid={`ranked-fill-${row.id}`}
                   data-ramp-step={String(step)}
+                  /* rtl-ok: inside the LTR island above */
                   className="h-full rounded-r-[4px]"
                   style={{ width: `${width}%`, backgroundColor: SEQUENTIAL_RAMP[step] }}
                 />
               </div>
             </div>
-            <span data-testid={`ranked-value-${row.id}`} className="text-right text-xs tabular-nums">
+            <span data-testid={`ranked-value-${row.id}`} className="text-end text-xs tabular-nums">
               {formatValue(value, metric)}
             </span>
             <span
               data-testid={`ranked-share-${row.id}`}
-              className="text-muted-foreground w-16 text-right text-xs tabular-nums"
+              className="text-muted-foreground w-16 text-end text-xs tabular-nums"
             >
               {percent(share)}
             </span>

package/src/features/tokenusage/components/TokenUsageTimelineChart.tsx

@@ -161,7 +161,11 @@ export function TokenUsageTimelineChart({ rows, metric, stackBy, className }: To
     series === OTHER_SERIES ? OTHER_COLOR : seriesColor(index, mode);
 
   return (
-    <div className={className}>
+    // The chart is a coordinate system, not prose: recharts lays the axes and the
+    // stacked bars out left-to-right, so the whole chart stays an LTR island even
+    // under dir="rtl". Only the labels inside it are translated.
+    // rtl-ok: deliberate LTR island (chart)
+    <div className={className} dir="ltr">
       {/* The pivot, exposed for assertions and for screen readers that would
           otherwise get nothing from the SVG. */}
       <span className="sr-only" data-testid="timeline-data">

package/src/features/user/components/details/UserStandaloneDetails.tsx

@@ -29,7 +29,7 @@ export function UserStanadaloneDetails({ user }: UserDetailsProps) {
         <div className="flex flex-wrap gap-2">
           {user.roles.map((role: RoleInterface, _index: number) => (
             <Link key={role.id} href={generateUrl({ page: Modules.Role, id: role.id })}>
-              <Badge className="mr-2" variant={`default`}>
+              <Badge className="me-2" variant={`default`}>
                 {t(`role.roles`, { role: role.id.replaceAll(`-`, ``) })}
               </Badge>
             </Link>

package/src/features/user/components/forms/UserReactivator.tsx

@@ -43,7 +43,7 @@ function UserReactivatorInterface({ user, propagateChanges }: UserReactivatorPro
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger>
         <Button size="sm">
-          <UserCheckIcon className="mr-3 h-3.5 w-3.5" />
+          <UserCheckIcon className="me-3 h-3.5 w-3.5" />
           {t(`user.buttons.reactivate`)}
         </Button>
       </DialogTrigger>
@@ -54,7 +54,7 @@ function UserReactivatorInterface({ user, propagateChanges }: UserReactivatorPro
         </DialogHeader>
         {t(`user.reactivate.description`, { name: user.name })}
         <div className="flex justify-end">
-          <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+          <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
             {t(`ui.buttons.cancel`)}
           </Button>
           <Button

package/src/features/user/components/forms/UserResentInvitationEmail.tsx

@@ -63,7 +63,7 @@ function UserResentInvitationEmailInternal({ user }: UserResentInvitationEmailPr
         </DialogHeader>
         {t(`user.resend_activation.description`, { email: user.email })}
         <div className="flex justify-end">
-          <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+          <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
             {t(`ui.buttons.cancel`)}
           </Button>
           <Button

package/src/features/user/components/forms/UserSelector.tsx

@@ -97,7 +97,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
                   {field.value ? (
                     <div className="bg-input/20 dark:bg-input/30 border-input flex h-7 w-full flex-row items-center justify-start rounded-md border px-2 py-0.5 text-sm md:text-xs/relaxed">
                       <div className="*:ring-border *:ring-1">
-                        <Avatar className={`mr-2 h-4 w-4`}>
+                        <Avatar className={`me-2 h-4 w-4`}>
                           <AvatarImage src={field.value?.avatar} />
                           <AvatarFallback>
                             {field.value?.name
@@ -117,7 +117,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
               </PopoverTrigger>
               {field.value && (
                 <CircleX
-                  className="text-muted hover:text-destructive ml-2 h-4 w-4 shrink-0 cursor-pointer"
+                  className="text-muted hover:text-destructive ms-2 h-4 w-4 shrink-0 cursor-pointer"
                   onClick={() => setUser()}
                 />
               )}
@@ -125,19 +125,19 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
             <PopoverContent align="start" className="w-(--anchor-width)">
               <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={t(`ui.search.placeholder`, { type: t(`entities.users`, { count: 1 }) })}
                     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 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
+                      className={`absolute top-2.5 end-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
                       onClick={() => {
                         setSearchTerm("");
                         search("");
@@ -156,7 +156,7 @@ export function UserSelector({ id, form, label, placeholder, onChange, isRequire
                         key={user.id}
                         onSelect={() => setUser(user)}
                       >
-                        <UserAvatar user={user} className={`mr-2 h-4 w-4`} />
+                        <UserAvatar user={user} className={`me-2 h-4 w-4`} />
                         <span className="">{user.name}</span>
                       </CommandItem>
                     ))}

package/src/features/user/components/lists/ContributorsList.tsx

@@ -21,7 +21,7 @@ export function ContributorsList({ content }: ContributorsListProps) {
         href={generateUrl({ page: Modules.User, id: content.author.id })}
         onClick={(e: React.MouseEvent<HTMLAnchorElement>) => e.stopPropagation()}
       >
-        <UserAvatar user={content.author} className="mr-1 h-6 w-6" />
+        <UserAvatar user={content.author} className="me-1 h-6 w-6" />
       </Link>
       <div className="flex flex-row-reverse justify-end -space-x-1 space-x-reverse">
         {content.editors

package/src/features/user/components/lists/UserListInAdd.tsx

@@ -39,7 +39,7 @@ export function UserListInAdd({ data, existingUsers, setSelectedUser, setLevelOp
                 >
                   <div className="flex w-full flex-row items-center justify-between px-4 py-1">
                     <UserAvatar user={user} />
-                    <div className="ml-5 flex w-full flex-col">
+                    <div className="ms-5 flex w-full flex-col">
                       <div className="text-sm font-medium">{user.name}</div>
                       <div className="text-xs font-normal">{user.email}</div>
                     </div>

package/src/features/user/components/widgets/UserSearchPopover.tsx

@@ -45,20 +45,20 @@ export const UserSearchPopover = ({ children, onSelect, align = "start", classNa
       <PopoverContent align={align} onClick={(e) => e.stopPropagation()} className={className ?? "w-80"}>
         <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={t(`ui.search.placeholder`, { type: t(`entities.users`, { count: 1 }) })}
               type="text"
-              className="w-full pr-8 pl-8"
+              className="w-full pe-8 ps-8"
               onChange={(e) => setSearchQuery(e.target.value)}
               value={searchQuery}
               onClick={(e) => e.stopPropagation()}
             />
             {isLoading ? (
-              <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" />
             ) : searchQuery ? (
               <XIcon
-                className="text-muted-foreground hover:text-foreground absolute top-2.5 right-2.5 h-4 w-4 cursor-pointer"
+                className="text-muted-foreground hover:text-foreground absolute top-2.5 end-2.5 h-4 w-4 cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation();
                   clearSearch();
@@ -74,7 +74,7 @@ export const UserSearchPopover = ({ children, onSelect, align = "start", classNa
                   className="cursor-pointer hover:bg-muted data-selected:hover:bg-muted bg-transparent data-selected:bg-transparent"
                   onSelect={() => handleSelectUser(user.id)}
                 >
-                  <UserAvatar user={user} className="mr-2 h-4 w-4" showLink={false} />
+                  <UserAvatar user={user} className="me-2 h-4 w-4" showLink={false} />
                   <span>{user.name}</span>
                 </CommandItem>
               ))

package/src/features/user/hooks/useUserTableStructure.tsx

@@ -99,7 +99,7 @@ export const useUserTableStructure: UseTableStructureHook<UserInterface, UserFie
         return (
           <div className="relative flex h-5 w-20 items-center justify-center overflow-clip rounded border text-center">
             <div
-              className={`bg-accent absolute top-0 left-0 h-full opacity-${Math.round(user.relevance)}`}
+              className={`bg-accent absolute top-0 start-0 h-full opacity-${Math.round(user.relevance)}`}
               style={{ width: `${user.relevance}%` }}
             ></div>
             <span

package/src/features/waitlist/components/forms/WaitlistQuestionnaireRenderer.tsx

@@ -84,7 +84,7 @@ export function WaitlistQuestionnaireRenderer<T extends FieldValues>({
               <div key={field.id} className="space-y-2">
                 <span className="text-sm font-medium">
                   {field.label}
-                  {field.required && <span className="ml-1 text-destructive">*</span>}
+                  {field.required && <span className="ms-1 text-destructive">*</span>}
                 </span>
                 {field.description && <p className="text-muted-foreground text-xs">{field.description}</p>}
                 <div className="space-y-2">

package/src/features/waitlist/hooks/useWaitlistTableStructure.tsx

@@ -94,7 +94,7 @@ export function useWaitlistTableStructure({
         if (entry.status === "confirmed") {
           return (
             <Button size="sm" variant="outline" onClick={() => onInvite(entry)}>
-              <Send className="mr-2 h-4 w-4" />
+              <Send className="me-2 h-4 w-4" />
               {t("waitlist.admin.actions.invite")}
             </Button>
           );

package/src/hooks/useCustomD3Graph.tsx

@@ -30,6 +30,11 @@ function estimateLabelWidth(node: D3Node): number {
 
 /**
  * Custom hook for D3 graph visualization with larger circles and more interactive features
+ *
+ * Direction: the hook stamps `dir="ltr"` (and `direction: ltr`) on the SVG it
+ * owns — the layout is coordinate-based, so it is a deliberate LTR island and
+ * never mirrors under `dir="rtl"`. Consumers do not need to set anything; a
+ * wrapping container may still mirror around the graph.
  */
 export function useCustomD3Graph(
   nodes: D3Node[],
@@ -199,6 +204,17 @@ export function useCustomD3Graph(
   );
 
   useEffect(() => {
+    // The graph lives in SVG user space: node positions, link endpoints and label
+    // offsets are all computed coordinates, so an RTL ancestor must not mirror it.
+    // Stamped on the element the hook owns rather than left to each caller, so no
+    // consumer can forget it. Both the attribute and the inline property are set
+    // because `dir` is an HTML attribute and does not reliably reach SVG.
+    // rtl-ok: deliberate LTR island (chart)
+    if (svgRef.current) {
+      svgRef.current.setAttribute("dir", "ltr");
+      svgRef.current.style.direction = "ltr";
+    }
+
     if (!nodes.length || !svgRef.current) return;
 
     const visibleNodes = visibleNodeIds

package/src/lib/__tests__/direction.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { resolvePhysicalSide } from "../direction";
+
+describe("resolvePhysicalSide", () => {
+  it("maps start/end by direction", () => {
+    expect(resolvePhysicalSide("start", "ltr")).toBe("left");
+    expect(resolvePhysicalSide("start", "rtl")).toBe("right");
+    expect(resolvePhysicalSide("end", "ltr")).toBe("right");
+    expect(resolvePhysicalSide("end", "rtl")).toBe("left");
+  });
+  it("passes physical sides through unchanged in both directions", () => {
+    for (const dir of ["ltr", "rtl"] as const) {
+      for (const side of ["top", "bottom", "left", "right"] as const) {
+        expect(resolvePhysicalSide(side, dir)).toBe(side);
+      }
+    }
+  });
+});

package/src/lib/direction.ts

@@ -0,0 +1,8 @@
+export type PhysicalSide = "top" | "bottom" | "left" | "right";
+export type LogicalSide = PhysicalSide | "start" | "end";
+
+export function resolvePhysicalSide(side: LogicalSide, dir: "ltr" | "rtl"): PhysicalSide {
+  if (side === "start") return dir === "rtl" ? "right" : "left";
+  if (side === "end") return dir === "rtl" ? "left" : "right";
+  return side;
+}

package/src/shadcnui/custom/multi-select.tsx

@@ -291,11 +291,11 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                       className={cn(isAnimating ? "animate-bounce" : "", multiSelectVariants({ variant }))}
                       style={{ animationDuration: `${animation}s` }}
                     >
-                      {IconComponent && <IconComponent className="mr-2 h-4 w-4" />}
+                      {IconComponent && <IconComponent className="me-2 h-4 w-4" />}
                       {option?.selectedLabel ?? option?.label}
                       <XCircle
                         data-remove-button
-                        className="ml-2 h-4 w-4 cursor-pointer"
+                        className="ms-2 h-4 w-4 cursor-pointer"
                         onPointerDown={(event) => {
                           event.stopPropagation();
                           event.preventDefault();
@@ -321,7 +321,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                     {`+ ${selectedValues.length - maxCount} more`}
                     <XCircle
                       data-remove-button
-                      className="ml-2 h-4 w-4 cursor-pointer"
+                      className="ms-2 h-4 w-4 cursor-pointer"
                       onPointerDown={(event) => {
                         event.stopPropagation();
                         event.preventDefault();
@@ -388,7 +388,7 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                   >
                     <div
                       className={cn(
-                        "border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        "border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
                         selectedValues.length === options.length
                           ? "bg-primary text-primary-foreground"
                           : "opacity-50 [&_svg]:invisible",
@@ -411,14 +411,14 @@ export const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>
                     >
                       <div
                         className={cn(
-                          "border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                          "border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
                           isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible",
                         )}
                       >
                         <CheckIcon className="h-4 w-4" />
                       </div>
                       {option.icon && (
-                        <option.icon className={option.iconClassName ?? "text-muted-foreground mr-2 h-4 w-4"} />
+                        <option.icon className={option.iconClassName ?? "text-muted-foreground me-2 h-4 w-4"} />
                       )}
                       <span>{option.label}</span>
                     </CommandItem>

package/src/shadcnui/custom/multiple-selector.tsx

@@ -213,6 +213,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
     const [onScrollbar, setOnScrollbar] = React.useState(false);
     const [isLoading, setIsLoading] = React.useState(false);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
+    // rtl-ok: viewport-anchored floating position (physical viewport coordinates, not a layout inset)
     const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0, left: 0, width: 0 });
 
     const [selected, setSelected] = React.useState<Option[]>(value || []);
@@ -331,6 +332,8 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
           const rect = containerRef.current.getBoundingClientRect();
           setDropdownPosition({
             top: rect.bottom + window.scrollY + 4,
+            // rtl-ok: viewport-anchored floating position — the portal is placed at the
+            // container's measured rect and spans its full width, so it matches in RTL too
             left: rect.left + window.scrollX,
             width: rect.width,
           });
@@ -502,7 +505,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                   <button
                     type="button"
                     className={cn(
-                      "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "ms-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
                       (disabled || option.fixed) && "hidden",
                     )}
                     onKeyDown={(e) => {
@@ -550,7 +553,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                 "flex-1 self-baseline bg-transparent outline-none placeholder:text-muted-foreground text-foreground caret-foreground",
                 {
                   "w-full": hidePlaceholderWhenSelected,
-                  "ml-1": selected.length !== 0,
+                  "ms-1": selected.length !== 0,
                 },
                 inputProps?.className,
               )}
@@ -653,6 +656,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
               className="fixed z-50 max-h-80 rounded-md border bg-background text-foreground shadow-md outline-none animate-in"
               style={{
                 top: dropdownPosition.top,
+                // rtl-ok: viewport-anchored floating position (measured px, not a logical inset)
                 left: dropdownPosition.left,
                 width: dropdownPosition.width,
               }}

package/src/shadcnui/ui/accordion.tsx

@@ -31,7 +31,7 @@ function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+          "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-start text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
           className,
         )}
         {...props}

package/src/shadcnui/ui/alert-dialog.tsx

@@ -45,6 +45,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
+          // rtl-ok: symmetric centering (`left-1/2` + `-translate-x-1/2`) — identical in LTR and RTL
           "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-3 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
           className,
         )}
@@ -59,7 +60,7 @@ function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="alert-dialog-header"
       className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        "grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
         className,
       )}
       {...props}

package/src/shadcnui/ui/alert.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert",
+  "grid gap-0.5 rounded-lg border px-2 py-1.5 text-start text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert",
   {
     variants: {
       variant: {
@@ -47,7 +47,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
 }
 
 function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="alert-action" className={cn("absolute top-1.5 right-2", className)} {...props} />;
+  return <div data-slot="alert-action" className={cn("absolute top-1.5 end-2", className)} {...props} />;
 }
 
 export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/shadcnui/ui/avatar.tsx

@@ -53,7 +53,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "bg-primary text-primary-foreground ring-background absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",

package/src/shadcnui/ui/badge.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
   {
     variants: {
       variant: {

package/src/shadcnui/ui/breadcrumb.tsx

@@ -61,7 +61,7 @@ function BreadcrumbSeparator({ children, className, ...props }: React.ComponentP
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? <ChevronRightIcon />}
+      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
     </li>
   );
 }

package/src/shadcnui/ui/button.tsx

@@ -21,10 +21,10 @@ const buttonVariants = cva(
       },
       size: {
         default:
-          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        xs: "h-5 gap-1 rounded-sm px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
-        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
+          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-5 gap-1 rounded-sm px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-2.5",
+        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-4",
         icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
         "icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
         "icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",

package/src/shadcnui/ui/calendar.tsx

@@ -6,6 +6,7 @@ import { DayPicker, getDefaultClassNames, type DayButton } from "react-day-picke
 import { cn } from "@/lib/utils";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
+import { useDir } from "../../contexts/DirectionContext";
 
 function Calendar({
   className,
@@ -20,14 +21,14 @@ function Calendar({
   buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
   const defaultClassNames = getDefaultClassNames();
+  const dir = useDir();
 
   return (
     <DayPicker
+      dir={dir}
       showOutsideDays={showOutsideDays}
       className={cn(
         "p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className,
       )}
       captionLayout={captionLayout}
@@ -80,19 +81,19 @@ function Calendar({
         week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
         week_number: cn("text-xs select-none text-muted-foreground", defaultClassNames.week_number),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) group/day aspect-square select-none",
           props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)"
+            : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)",
           defaultClassNames.day,
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate",
+          "rounded-s-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 -z-0 isolate",
           defaultClassNames.range_start,
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate",
+          "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 -z-0 isolate",
           defaultClassNames.range_end,
         ),
         today: cn(
@@ -154,7 +155,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }: React.Compon
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className,
       )}