refactor: update deprecated start/end utilities to inset-s/e

Author: huijiewei

.changeset/calm-frogs-report.md

@@ -0,0 +1,5 @@
+---
+"@resolid/react-ui": patch
+---
+
+refactor: update deprecated start/end utilities to inset-s/e

packages/react-ui/package.json

@@ -58,14 +58,16 @@
     "@types/react-dom": "^19.2.3",
     "babel-plugin-react-compiler": "^1.0.0",
     "jsdom": "^27.4.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsdown": "^0.20.3",
     "vitest": "^4.0.18",
     "vitest-axe": "pre"
   },
   "peerDependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.2.0"
   },
   "publishConfig": {
     "access": "public",

packages/react-ui/src/components/avatar/avatar-indicator.tsx

@@ -21,7 +21,7 @@ export const AvatarIndicator = (
   return (
     <div
       className={tx(
-        "absolute end-0 flex items-center justify-center",
+        "absolute inset-e-0 flex items-center justify-center",
         direction == "rtl" ? "-translate-x-1/10" : "translate-x-1/10",
         position == "top" ? "top-0 -translate-y-1/10" : "bottom-0 translate-y-1/10",
         className,

packages/react-ui/src/components/combobox/combobox-trigger.tsx

@@ -40,7 +40,10 @@ export const ComboboxTrigger = (
       as={"button"}
       render={render}
       ref={refs}
-      className={tx("absolute end-0 top-0 bottom-0 outline-none", selectSizeStyles[size].chevron)}
+      className={tx(
+        "absolute inset-e-0 top-0 bottom-0 outline-none",
+        selectSizeStyles[size].chevron,
+      )}
       onClick={handleClick}
       onFocus={handleFocus}
       aria-haspopup="listbox"

packages/react-ui/src/components/drawer/drawer-content.tsx

@@ -12,22 +12,22 @@ import { useDrawer } from "./drawer-context";
 
 const placementStyles = {
   start: {
-    base: "start-0 top-0 bottom-0",
+    base: "inset-s-0 top-0 bottom-0",
     open: "translate-x-none",
     close: "-translate-x-full",
   },
   end: {
-    base: "end-0 top-0 bottom-0",
+    base: "inset-e-0 top-0 bottom-0",
     open: "translate-x-none",
     close: "translate-x-full",
   },
   top: {
-    base: "top-0 start-0 end-0",
+    base: "top-0 inset-s-0 inset-e-0",
     open: "translate-y-none",
     close: "-translate-y-full",
   },
   bottom: {
-    base: "bottom-0 start-0 end-0",
+    base: "bottom-0 inset-s-0 inset-e-0",
     open: "translate-y-none",
     close: "translate-y-full",
   },

packages/react-ui/src/components/input/input-base.tsx

@@ -109,7 +109,7 @@ export const InputBase = (
         } as CSSProperties
       }
     >
-      {prefix && <InputAffix className={"start-0 w-(--pw)"}>{prefix}</InputAffix>}
+      {prefix && <InputAffix className={"inset-s-0 w-(--pw)"}>{prefix}</InputAffix>}
       <input
         ref={refs}
         className={tx(
@@ -133,7 +133,7 @@ export const InputBase = (
         onChange={handleChange}
         {...rest}
       />
-      {suffix && <InputAffix className={"end-0 w-(--sw)"}>{suffix}</InputAffix>}
+      {suffix && <InputAffix className={"inset-e-0 w-(--sw)"}>{suffix}</InputAffix>}
     </div>
   );
 };

packages/react-ui/src/components/select/select-chevron.tsx

@@ -6,7 +6,7 @@ export const SelectChevron = ({ className }: { className: string }): JSX.Element
   return (
     <span
       className={tx(
-        "pointer-events-none absolute end-0 top-0 bottom-0 flex items-center justify-center",
+        "pointer-events-none absolute inset-e-0 top-0 bottom-0 flex items-center justify-center",
         className,
       )}
     >

packages/react-ui/src/components/slider/slider-mark.tsx

@@ -52,12 +52,15 @@ export const SliderMark = ({
                   : "-translate-x-1/2",
               vertical
                 ? "bottom-[calc(var(--s-mark-s)+var(--s-mark-o))]"
-                : "start-[calc(var(--s-mark-s)+var(--s-mark-o))]",
+                : "inset-s-[calc(var(--s-mark-s)+var(--s-mark-o))]",
             )}
           >
             {mark.label && (
               <span
-                className={tx("absolute text-sm leading-none", vertical ? "start-3.5" : "top-3.5")}
+                className={tx(
+                  "absolute text-sm leading-none",
+                  vertical ? "inset-s-3.5" : "top-3.5",
+                )}
               >
                 {mark.label}
               </span>

packages/react-ui/src/components/slider/slider-thumb.tsx

@@ -145,7 +145,7 @@ export const SliderThumb = (
           className={tx(
             vertical
               ? "bottom-[calc(var(--s-thumb-s0)+var(--s-thumb-o0))]"
-              : "start-[calc(var(--s-thumb-s0)+var(--s-thumb-o0))]",
+              : "inset-s-[calc(var(--s-thumb-s0)+var(--s-thumb-o0))]",
             className,
           )}
           onKeyDown={(e) => {
@@ -159,7 +159,7 @@ export const SliderThumb = (
           className={tx(
             vertical
               ? "bottom-[calc(var(--s-thumb-s1)+var(--s-thumb-o1))]"
-              : "start-[calc(var(--s-thumb-s1)+var(--s-thumb-o1))]",
+              : "inset-s-[calc(var(--s-thumb-s1)+var(--s-thumb-o1))]",
             className,
           )}
           onKeyDown={(e) => {
@@ -177,7 +177,7 @@ export const SliderThumb = (
       className={tx(
         vertical
           ? "bottom-[calc(var(--s-thumb-s0)+var(--s-thumb-o0))]"
-          : "start-[calc(var(--s-thumb-s0)+var(--s-thumb-o0))]",
+          : "inset-s-[calc(var(--s-thumb-s0)+var(--s-thumb-o0))]",
         className,
       )}
       onKeyDown={(e) => {

packages/react-ui/src/components/slider/slider-track.tsx

@@ -28,7 +28,7 @@ export const SliderTrack = (props: PrimitiveProps<"div">): JSX.Element => {
           inverted ? "bg-bg-subtle" : colorStyle,
           vertical
             ? "top-(--s-track-e) bottom-(--s-track-s) w-full"
-            : "start-(--s-track-s) end-(--s-track-e) h-full",
+            : "inset-s-(--s-track-s) inset-e-(--s-track-e) h-full",
         )}
       />
     </div>