Refactor directional classes for RTL support

components/inputs/input-09.tsx

@@ -7,10 +7,10 @@ import { AtSign } from "lucide-react";
 export default function Input09() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-09">Input with left icon</Label>
+      <Label htmlFor="input-09">Input with start icon</Label>
       <div className="relative">
-        <Input id="input-09" className="peer pl-9" placeholder="Email" type="email" />
-        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 text-muted-foreground/80 peer-disabled:opacity-50">
+        <Input id="input-09" className="peer ps-9" placeholder="Email" type="email" />
+        <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50">
           <AtSign size={16} strokeWidth={2} aria-hidden="true" />
         </div>
       </div>

components/inputs/input-10.tsx

@@ -7,10 +7,10 @@ import { Mail } from "lucide-react";
 export default function Input10() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-10">Input with right icon</Label>
+      <Label htmlFor="input-10">Input with end icon</Label>
       <div className="relative">
-        <Input id="input-10" className="peer pr-9" placeholder="Email" type="email" />
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-muted-foreground/80 peer-disabled:opacity-50">
+        <Input id="input-10" className="peer pe-9" placeholder="Email" type="email" />
+        <div className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50">
           <Mail size={16} strokeWidth={2} aria-hidden="true" />
         </div>
       </div>

components/inputs/input-11.tsx

@@ -4,10 +4,10 @@ import { Label } from "@/components/ui/label";
 export default function Input11() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-11">Input with left inline add-on</Label>
+      <Label htmlFor="input-11">Input with start inline add-on</Label>
       <div className="relative">
-        <Input id="input-11" className="peer pl-16" placeholder="google.com" type="text" />
-        <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 text-sm text-muted-foreground peer-disabled:opacity-50">
+        <Input id="input-11" className="peer ps-16" placeholder="google.com" type="text" />
+        <span className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50">
           https://
         </span>
       </div>

components/inputs/input-12.tsx

@@ -4,10 +4,10 @@ import { Label } from "@/components/ui/label";
 export default function Input12() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-12">Input with right inline add-on</Label>
+      <Label htmlFor="input-12">Input with end inline add-on</Label>
       <div className="relative">
-        <Input id="input-12" className="peer pr-12" placeholder="google" type="text" />
-        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-sm text-muted-foreground peer-disabled:opacity-50">
+        <Input id="input-12" className="peer pe-12" placeholder="google" type="text" />
+        <span className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50">
           .com
         </span>
       </div>

components/inputs/input-13.tsx

@@ -6,11 +6,11 @@ export default function Input13() {
     <div className="space-y-2">
       <Label htmlFor="input-13">Input with inline add-ons</Label>
       <div className="relative">
-        <Input id="input-13" className="peer pl-6 pr-12" placeholder="0.00" type="text" />
-        <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 text-sm text-muted-foreground peer-disabled:opacity-50">
+        <Input id="input-13" className="peer pe-12 ps-6" placeholder="0.00" type="text" />
+        <span className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground peer-disabled:opacity-50">
           €
         </span>
-        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 text-sm text-muted-foreground peer-disabled:opacity-50">
+        <span className="pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm text-muted-foreground peer-disabled:opacity-50">
           EUR
         </span>
       </div>

components/inputs/input-14.tsx

@@ -4,14 +4,14 @@ import { Label } from "@/components/ui/label";
 export default function Input14() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-14">Input with left add-on</Label>
+      <Label htmlFor="input-14">Input with start add-on</Label>
       <div className="flex rounded-lg shadow-sm shadow-black/[.04]">
-        <span className="-z-10 inline-flex items-center rounded-l-lg border border-input bg-background px-3 text-sm text-muted-foreground">
+        <span className="-z-10 inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground">
           https://
         </span>
         <Input
           id="input-14"
-          className="-ml-px rounded-l-none shadow-none"
+          className="-ms-px rounded-s-none shadow-none"
           placeholder="google.com"
           type="text"
         />

components/inputs/input-15.tsx

@@ -4,15 +4,15 @@ import { Label } from "@/components/ui/label";
 export default function Input15() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-15">Input with right add-on</Label>
+      <Label htmlFor="input-15">Input with end add-on</Label>
       <div className="flex rounded-lg shadow-sm shadow-black/[.04]">
         <Input
           id="input-15"
-          className="-mr-px rounded-r-none shadow-none"
+          className="-me-px rounded-e-none shadow-none"
           placeholder="google"
           type="text"
         />
-        <span className="-z-10 inline-flex items-center rounded-r-lg border border-input bg-background px-3 text-sm text-muted-foreground">
+        <span className="-z-10 inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground">
           .com
         </span>
       </div>

components/inputs/input-16.tsx

@@ -4,18 +4,18 @@ import { Label } from "@/components/ui/label";
 export default function Input16() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-16">Input with inline left and right add-on</Label>
+      <Label htmlFor="input-16">Input with inline start and end add-on</Label>
       <div className="relative flex rounded-lg shadow-sm shadow-black/[.04]">
-        <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 text-sm text-muted-foreground">
+        <span className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm text-muted-foreground">
           €
         </span>
         <Input
           id="input-16"
-          className="-mr-px rounded-r-none pl-6 shadow-none"
+          className="-me-px rounded-e-none ps-6 shadow-none"
           placeholder="0.00"
           type="text"
         />
-        <span className="-z-10 inline-flex items-center rounded-r-lg border border-input bg-background px-3 text-sm text-muted-foreground">
+        <span className="-z-10 inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground">
           EUR
         </span>
       </div>

components/inputs/input-17.tsx

@@ -7,11 +7,11 @@ import { ChevronDown } from "lucide-react";
 export default function Input17() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-17">Input with left select</Label>
+      <Label htmlFor="input-17">Input with start select</Label>
       <div className="flex rounded-lg shadow-sm shadow-black/[.04]">
         <div className="relative">
           <select
-            className="peer inline-flex h-full appearance-none items-center rounded-l-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="peer inline-flex h-full appearance-none items-center rounded-s-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
             aria-label="Protocol"
           >
             <option value="https://">https://</option>
@@ -21,13 +21,13 @@ export default function Input17() {
             <option value="ws://">ws://</option>
             <option value="wss://">wss://</option>
           </select>
-          <span className="pointer-events-none absolute inset-y-0 right-px flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50">
+          <span className="pointer-events-none absolute inset-y-0 end-px flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50">
             <ChevronDown size={16} strokeWidth={2} aria-hidden="true" role="img" />
           </span>
         </div>
         <Input
           id="input-17"
-          className="-ml-px rounded-l-none shadow-none focus-visible:z-10"
+          className="-ms-px rounded-s-none shadow-none focus-visible:z-10"
           placeholder="192.168.1.1"
           type="text"
         />

components/inputs/input-18.tsx

@@ -7,24 +7,24 @@ import { ChevronDown } from "lucide-react";
 export default function Input18() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-18">Input with right select</Label>
+      <Label htmlFor="input-18">Input with end select</Label>
       <div className="flex rounded-lg shadow-sm shadow-black/[.04]">
         <Input
           id="input-18"
-          className="-mr-px rounded-r-none shadow-none focus-visible:z-10"
+          className="-me-px rounded-e-none shadow-none focus-visible:z-10"
           placeholder="google"
           type="text"
         />
         <div className="relative">
           <select
-            className="peer inline-flex h-full appearance-none items-center rounded-r-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="peer inline-flex h-full appearance-none items-center rounded-e-lg border border-input bg-background pe-8 ps-3 text-sm text-muted-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
             aria-label="Domain suffix"
           >
             <option>.com</option>
             <option>.org</option>
             <option>.net</option>
           </select>
-          <span className="pointer-events-none absolute inset-y-0 right-px flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50">
+          <span className="pointer-events-none absolute inset-y-0 end-px flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50">
             <ChevronDown size={16} strokeWidth={2} aria-hidden="true" role="img" />
           </span>
         </div>

components/inputs/input-19.tsx

@@ -7,11 +7,11 @@ import { Send } from "lucide-react";
 export default function Input19() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-19">Input with right inline button</Label>
+      <Label htmlFor="input-19">Input with end inline button</Label>
       <div className="relative">
-        <Input id="input-19" className="pr-9" placeholder="Email" type="email" />
+        <Input id="input-19" className="pe-9" placeholder="Email" type="email" />
         <button
-          className="absolute inset-y-px right-px flex h-full w-9 items-center justify-center rounded-r-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          className="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
           aria-label="Subscribe"
         >
           <Send size={16} strokeWidth={2} aria-hidden="true" />

components/inputs/input-20.tsx

@@ -7,16 +7,16 @@ import { Download } from "lucide-react";
 export default function Input20() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-20">Input with right icon button</Label>
+      <Label htmlFor="input-20">Input with end icon button</Label>
       <div className="flex rounded-lg shadow-sm shadow-black/[.04]">
         <Input
           id="input-20"
-          className="-mr-px flex-1 rounded-r-none shadow-none focus-visible:z-10"
+          className="-me-px flex-1 rounded-e-none shadow-none focus-visible:z-10"
           placeholder="Email"
           type="email"
         />
         <button
-          className="inline-flex w-9 items-center justify-center rounded-r-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex w-9 items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
           aria-label="Subscribe"
         >
           <Download size={16} strokeWidth={2} aria-hidden="true" />

components/inputs/input-21.tsx

@@ -4,15 +4,15 @@ import { Label } from "@/components/ui/label";
 export default function Input21() {
   return (
     <div className="space-y-2">
-      <Label htmlFor="input-21">Input with right button</Label>
+      <Label htmlFor="input-21">Input with end button</Label>
       <div className="flex rounded-lg shadow-sm shadow-black/[.04]">
         <Input
           id="input-21"
-          className="-mr-px flex-1 rounded-r-none shadow-none focus-visible:z-10"
+          className="-me-px flex-1 rounded-e-none shadow-none focus-visible:z-10"
           placeholder="Email"
           type="email"
         />
-        <button className="inline-flex items-center rounded-r-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50">
+        <button className="inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm font-medium text-foreground ring-offset-background transition-shadow hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50">
           Send
         </button>
       </div>

components/inputs/input-23.tsx

@@ -18,12 +18,12 @@ export default function Input23() {
       <div className="relative">
         <Input
           id="input-23"
-          className="pr-9"
+          className="pe-9"
           placeholder="Password"
           type={isVisible ? "text" : "password"}
         />
         <button
-          className="absolute inset-y-px right-px flex h-full w-9 items-center justify-center rounded-r-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+          className="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 ring-offset-background transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
           type="button"
           onClick={toggleVisibility}
           aria-label={isVisible ? "Hide password" : "Show password"}

components/inputs/input-24.tsx

@@ -25,15 +25,15 @@ export default function Input24() {
         <Input
           id="input-24"
           ref={inputRef}
-          className="pr-9"
+          className="pe-9"
           placeholder="Type something..."
           type="text"
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
         />
         {inputValue && (
           <button
-            className="absolute inset-y-px right-px flex h-full w-9 items-center justify-center rounded-r-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow animate-in fade-in zoom-in-75 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="absolute inset-y-px end-px flex h-full w-9 items-center justify-center rounded-e-lg border border-transparent text-muted-foreground/80 ring-offset-background transition-shadow animate-in fade-in zoom-in-75 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
             aria-label="Clear input"
             onClick={handleClearInput}
           >