@orderly.network/ui 3.0.4 → 3.1.0-alpha.0

package/dist/index.js

@@ -815,7 +815,7 @@ var BaseButton = React73__namespace.default.forwardRef(
     }, [size, icon]);
     const content = React73.useMemo(() => {
       if (!leading && !trailing && !iconElement) return children;
-      return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-space-x-1", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", itemAlign: "center", className: "oui-gap-x-1", children: [
         leading,
         iconElement,
         /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
@@ -1528,7 +1528,7 @@ var TokenIcon = (props) => {
 var CombineIcon = (props) => {
   const { secondary } = props;
   const subElement = React73.useMemo(() => {
-    const className = "oui-bg-base-6 oui-absolute oui-bottom-0 oui-right-0 oui-outline oui-outline-2 oui-outline-base-1 oui-z-10";
+    const className = "oui-bg-base-6 oui-absolute oui-bottom-0 oui-end-0 oui-outline oui-outline-2 oui-outline-base-1 oui-z-10";
     if (secondary.component) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindVariants.cnBase(className, secondary?.className), children: secondary.component });
     }
@@ -4618,6 +4618,7 @@ var Numeral = (props) => {
     {
       ...rest,
       color: colorName,
+      dir: "ltr",
       className: tailwindVariants.cnBase("oui-tabular-nums", className),
       children: childWithUnit
     }
@@ -4960,6 +4961,31 @@ var useThemeAttribute = () => {
   }, []);
   return themeAttribute;
 };
+function subscribeDocumentDir(listener) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const observer = new MutationObserver(listener);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["dir"]
+  });
+  return () => observer.disconnect();
+}
+function getDocumentDirection() {
+  if (typeof document === "undefined") {
+    return "ltr";
+  }
+  return document.documentElement.dir === "rtl" ? "rtl" : "ltr";
+}
+function useDocumentDirection() {
+  return React73.useSyncExternalStore(
+    subscribeDocumentDir,
+    getDocumentDirection,
+    () => "ltr"
+  );
+}
 var popoverVariants = tv({
   base: [
     "oui-popover-content",
@@ -5153,7 +5179,7 @@ var SymbolBadge = (props) => {
   const { badge, fullName } = props;
   const { isMobile } = useScreen();
   if (!badge) return null;
-  const badgeEl = /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "neutral", size: "xs", className: "oui-ml-1", children: badge });
+  const badgeEl = /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "neutral", size: "xs", className: "oui-ms-1", children: badge });
   if (!fullName) return badgeEl;
   const isTruncated = badge.endsWith("...");
   if (isMobile) {
@@ -5508,6 +5534,9 @@ var inputVariants = tv(
           box: ["oui-bg-base-5"]
         }
       },
+      // RTL-EXCLUDE: Keep `pl` / `pr` variants mapped to physical padding.
+      // These variant names are part of the Input API and callers use them to
+      // reserve explicit left/right space for prefix/suffix layouts.
       pl: {
         true: {
           box: "oui-pl-3"
@@ -5534,10 +5563,10 @@ var inputVariants = tv(
           input: "oui-text-center"
         },
         left: {
-          input: "oui-text-left"
+          input: "oui-text-start"
         },
         right: {
-          input: "oui-text-right"
+          input: "oui-text-end"
         }
       }
     },
@@ -5671,7 +5700,7 @@ var scrollAreaVariants = tv({
   variants: {
     orientation: {
       vertical: {
-        bar: "oui-h-full oui-w-2 oui-border-l oui-border-l-transparent oui-p-[1px]"
+        bar: "oui-h-full oui-w-2 oui-border-s oui-border-s-transparent oui-p-[1px]"
       },
       horizontal: {
         bar: "oui-h-2 oui-flex-col oui-border-t oui-border-t-transparent oui-p-[1px]"
@@ -5737,7 +5766,7 @@ var selectVariants = tv(
         "oui-rounded-md",
         "oui-px-2",
         // "oui-py-2",
-        "oui-space-x-1",
+        "oui-gap-x-1",
         // "oui-text-sm",
         "oui-shadow-sm",
         // "oui-ring-offset-background",
@@ -5788,8 +5817,8 @@ var selectVariants = tv(
         "oui-items-center",
         "oui-rounded-sm",
         "oui-py-1",
-        "oui-pl-2",
-        "oui-pr-8",
+        "oui-ps-2",
+        "oui-pe-8",
         "oui-text-sm",
         "oui-text-base-contrast-54",
         "oui-outline-none",
@@ -6170,7 +6199,7 @@ var defaultOptionRenderer = (option, currentValue) => {
             height: 4,
             gradient: "brand",
             r: "full",
-            className: "oui-absolute oui-right-2 oui-top-1/2 -oui-translate-y-1/2"
+            className: "oui-absolute oui-end-2 oui-top-1/2 -oui-translate-y-1/2"
           }
         )
       ]
@@ -6252,7 +6281,7 @@ var Option = (props) => {
       value,
       className: item({
         size,
-        className: "oui-space-x-1 oui-flex oui-flex-row oui-items-center"
+        className: "oui-gap-x-1 oui-flex oui-flex-row oui-items-center"
       }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -6554,7 +6583,7 @@ var textFieldVariants = tv({
         root: "oui-flex-col oui-space-y-1"
       },
       row: {
-        root: "oui-flex-row oui-space-x-3 "
+        root: "oui-flex-row oui-gap-x-3 "
       }
     }
   },
@@ -6767,7 +6796,16 @@ var Switch = React73__namespace.default.forwardRef(({ className, color, ...props
     className,
     color
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitives__namespace.Root, { className: root({ className }), ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitives__namespace.Thumb, { className: thumb() }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SwitchPrimitives__namespace.Root,
+    {
+      className: root({ className }),
+      ...props,
+      ref,
+      dir: "ltr",
+      children: /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitives__namespace.Thumb, { className: thumb() })
+    }
+  );
 });
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
 var Logo = React73__namespace.default.forwardRef(({ src, alt, href }, ref) => {
@@ -6792,38 +6830,115 @@ function useInit(params) {
   }, [loading, ignoreLoadingCheck, dataSource, initialized]);
   return initialized;
 }
+var SCROLL_EPSILON = 1;
+var cachedRTLScrollType = null;
 function useScroll(deps) {
   const scrollRef = React73.useRef(null);
   const [showLeftShadow, setShowLeftShadow] = React73.useState(false);
   const [showRightShadow, setShowRightShadow] = React73.useState(false);
+  const [isRTL, setIsRTL] = React73.useState(false);
   React73.useEffect(() => {
     if (!scrollRef.current) {
       return;
     }
-    scrollRef.current.addEventListener("scroll", function(e) {
-      setShowLeftShadow(scrollRef.current.scrollLeft > 0);
-      setShowRightShadow(!isScrolledToRight(scrollRef.current));
+    const target = scrollRef.current;
+    const updateState = () => {
+      const direction = window.getComputedStyle(target).direction;
+      const rtl = direction === "rtl";
+      setIsRTL(rtl);
+      const scrollAble = hasHorizontalScroll(target);
+      const { fromStart, fromEnd } = getHorizontalScrollOffset(target);
+      setShowLeftShadow(scrollAble && fromStart > SCROLL_EPSILON);
+      setShowRightShadow(scrollAble && fromEnd > SCROLL_EPSILON);
+    };
+    updateState();
+    target.addEventListener("scroll", updateState);
+    const nearestDirElement = target.closest("[dir]");
+    const dirObserveTarget = nearestDirElement || document.documentElement;
+    const mutationObserver = new MutationObserver(updateState);
+    mutationObserver.observe(dirObserveTarget, {
+      attributes: true,
+      attributeFilter: ["dir"]
     });
-  }, [scrollRef]);
-  React73.useEffect(() => {
-    if (!scrollRef.current) {
-      return;
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(updateState);
+      resizeObserver.observe(target);
     }
-    const scrollAble = hasHorizontalScroll(scrollRef.current);
-    const scrollEnd = isScrolledToRight(scrollRef.current);
-    setShowRightShadow(scrollAble && !scrollEnd);
+    return () => {
+      target.removeEventListener("scroll", updateState);
+      mutationObserver.disconnect();
+      resizeObserver?.disconnect();
+    };
   }, [scrollRef, ...deps]);
   return {
     scrollRef,
     showLeftShadow,
-    showRightShadow
+    showRightShadow,
+    isRTL
   };
 }
-function isScrolledToRight(element) {
-  return element.scrollLeft + element.clientWidth >= element.scrollWidth;
-}
 function hasHorizontalScroll(element) {
-  return element.scrollWidth > element.clientWidth;
+  return element.scrollWidth - element.clientWidth > SCROLL_EPSILON;
+}
+function getHorizontalScrollOffset(element) {
+  const max = element.scrollWidth - element.clientWidth;
+  if (max <= 0) {
+    return { fromStart: 0, fromEnd: 0 };
+  }
+  const direction = window.getComputedStyle(element).direction;
+  if (direction !== "rtl") {
+    return {
+      fromStart: Math.max(0, element.scrollLeft),
+      fromEnd: Math.max(0, max - element.scrollLeft)
+    };
+  }
+  const scrollType = getRTLScrollType();
+  const scrollLeft = element.scrollLeft;
+  let fromStart = 0;
+  if (scrollType === "negative") {
+    fromStart = -scrollLeft;
+  } else if (scrollType === "reverse") {
+    fromStart = scrollLeft;
+  } else {
+    fromStart = max - scrollLeft;
+  }
+  return {
+    fromStart: Math.max(0, fromStart),
+    fromEnd: Math.max(0, max - fromStart)
+  };
+}
+function getRTLScrollType() {
+  if (cachedRTLScrollType) {
+    return cachedRTLScrollType;
+  }
+  if (typeof document === "undefined" || !document.body) {
+    cachedRTLScrollType = "negative";
+    return cachedRTLScrollType;
+  }
+  const outer = document.createElement("div");
+  const inner = document.createElement("div");
+  outer.style.width = "4px";
+  outer.style.height = "1px";
+  outer.style.overflow = "scroll";
+  outer.style.visibility = "hidden";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  outer.dir = "rtl";
+  inner.style.width = "8px";
+  inner.style.height = "1px";
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+  let type;
+  if (outer.scrollLeft > 0) {
+    type = "default";
+  } else {
+    outer.scrollLeft = 1;
+    type = outer.scrollLeft === 0 ? "negative" : "reverse";
+  }
+  document.body.removeChild(outer);
+  cachedRTLScrollType = type;
+  return type;
 }
 function useShowHeader(params) {
   const { dataSource, loading } = params;
@@ -6889,9 +7004,11 @@ function useWrap(deps) {
 var alignVariants = tailwindVariants.tv({
   variants: {
     align: {
-      left: "oui-text-left",
+      left: "oui-text-start",
+      start: "oui-text-start",
       center: "oui-text-center",
-      right: "oui-text-right"
+      right: "oui-text-end",
+      end: "oui-text-end"
     }
   },
   defaultVariants: {
@@ -6921,13 +7038,16 @@ var TableCell = (props) => {
   }
   return reactTable.flexRender(cell.column.columnDef.cell, cell.getContext());
 };
-function getColumnPinningProps(column, isHeader) {
+function getColumnPinningProps(column, isRTL) {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   const style = {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    // Keep logical inset here. TanStack pinning still reports left/right
+    // groups, but sticky offsets must follow the scroll container direction;
+    // physical left/right breaks fixed columns in RTL tables.
+    insetInlineStart: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    insetInlineEnd: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     width: column.getSize()
   };
   const contentCls = tailwindVariants.cnBase(
@@ -6941,8 +7061,18 @@ function getColumnPinningProps(column, isHeader) {
     "before:oui-top-0 before:oui-z-[-1]",
     "before:oui-bg-[linear-gradient(90deg,rgba(var(--oui-color-base-10)_/_0.80)_0%,rgba(var(--oui-color-base-10)_/_0.36)_65%,rgba(var(--oui-color-base-10)_/_0.00)_100%)]"
   );
-  const leftShadow = isLastLeftPinnedColumn && tailwindVariants.cnBase(shadowCls, "before:oui-right-[-32px]");
-  const rightShadow = isFirstRightPinnedColumn && tailwindVariants.cnBase(shadowCls, "before:oui-left-[-32px] before:oui-rotate-180");
+  const leftShadow = isLastLeftPinnedColumn && tailwindVariants.cnBase(
+    shadowCls,
+    // The shadow sits on the logical outer edge of the pinned group.
+    "before:oui-end-[-32px]",
+    isRTL && "before:oui-rotate-180"
+  );
+  const rightShadow = isFirstRightPinnedColumn && tailwindVariants.cnBase(
+    shadowCls,
+    // Do not replace with physical left/right; this mirrors with RTL pinning.
+    "before:oui-start-[-32px]",
+    !isRTL && "before:oui-rotate-180"
+  );
   return {
     style,
     classNames: {
@@ -6964,7 +7094,7 @@ var TableBody = (props) => {
       "data-testid": props.testId,
       children: props.rows.map((row) => {
         const { className, onClick, ...rest } = typeof props.onRow === "function" ? props.onRow(row.original, row.index, row) || {} : {};
-        const expandView = row.getIsExpanded() && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oui-table-expand-tr oui-z-0 [&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        const expandView = row.getIsExpanded() && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oui-table-expand-tr oui-z-0 [&>td:first-child]:oui-ps-3 [&>td:last-child]:oui-pe-3", children: /* @__PURE__ */ jsxRuntime.jsx(
           "td",
           {
             className: "oui-table-expand-td",
@@ -6978,7 +7108,7 @@ var TableBody = (props) => {
             {
               className: tailwindVariants.cnBase(
                 "oui-table-tbody-tr oui-group oui-h-10",
-                "[&>td:first-child]:oui-pl-3 [&>td:last-child]:oui-pr-3",
+                "[&>td:first-child]:oui-ps-3 [&>td:last-child]:oui-pe-3",
                 typeof onClick === "function" && "oui-cursor-pointer",
                 props.bordered && "oui-border-b oui-border-b-line-4",
                 className
@@ -6987,7 +7117,7 @@ var TableBody = (props) => {
               ...rest,
               children: row.getVisibleCells().map((cell) => {
                 const column = cell.column;
-                const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column);
+                const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column, !!props.isRTL);
                 const { align, className: rowClassName } = column.columnDef.meta || {};
                 const {
                   style: cellStyle,
@@ -7045,7 +7175,7 @@ var CellHover = ({ selected, isFirst, isLast }) => {
     "div",
     {
       className: tailwindVariants.cnBase(
-        "oui-absolute oui-left-0 oui-top-0 oui-z-[-1]",
+        "oui-absolute oui-start-0 oui-top-0 oui-z-[-1]",
         "oui-size-full",
         "group-hover:oui-bg-line-4",
         selected && "oui-bg-line-6 group-hover:oui-bg-line-6",
@@ -7220,7 +7350,7 @@ var TableHeader = (props) => {
           className: tailwindVariants.cnBase(
             "oui-table-thead-tr",
             "oui-h-10",
-            "[&>th:first-child]:oui-pl-3 [&>th:last-child]:oui-pr-3",
+            "[&>th:first-child]:oui-ps-3 [&>th:last-child]:oui-pe-3",
             props.className
           ),
           children: headerGroup.headers.map((header) => {
@@ -7230,7 +7360,7 @@ var TableHeader = (props) => {
               className: rowClassName,
               title
             } = column.columnDef.meta || {};
-            const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column);
+            const { style: pinStyle, classNames: pinClassNames } = getColumnPinningProps(column, !!props.isRTL);
             const canSort = column.getCanSort();
             const isSorted = column.getIsSorted();
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7241,7 +7371,7 @@ var TableHeader = (props) => {
                   "oui-table-thead-th",
                   "oui-whitespace-nowrap",
                   "oui-px-1",
-                  props.bordered && "after:oui-absolute after:oui-left-0 after:oui-top-0 after:oui-z-[-1] after:oui-block after:oui-size-full after:oui-border-b after:oui-border-line",
+                  props.bordered && "after:oui-absolute after:oui-start-0 after:oui-top-0 after:oui-z-[-1] after:oui-block after:oui-size-full after:oui-border-b after:oui-border-line",
                   // use border-b will show bottom element content
                   // props.bordered && "oui-border-b oui-border-line"
                   alignVariants({ align }),
@@ -7390,9 +7520,9 @@ var PaginationPrevious = ({
   PaginationLink,
   {
     "aria-label": "Go to previous page",
-    className: tailwindVariants.cnBase("oui-gap-1 oui-pl-2.5", className),
+    className: tailwindVariants.cnBase("oui-gap-1 oui-ps-2.5", className),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { className: "oui-h-4 oui-w-4", color: "white" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(PaginationPreviousIcon, {})
   }
 );
 PaginationPrevious.displayName = "PaginationPrevious";
@@ -7403,12 +7533,22 @@ var PaginationNext = ({
   PaginationLink,
   {
     "aria-label": "Go to next page",
-    className: tailwindVariants.cnBase("oui-gap-1 oui-pr-2.5", className),
+    className: tailwindVariants.cnBase("oui-gap-1 oui-pe-2.5", className),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "oui-h-4 oui-w-4", color: "white" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(PaginationNextIcon, {})
   }
 );
 PaginationNext.displayName = "PaginationNext";
+var PaginationPreviousIcon = () => {
+  const dir = useDocumentDirection();
+  const Icon4 = dir === "rtl" ? ChevronRightIcon : ChevronLeftIcon;
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon4, { className: "oui-h-4 oui-w-4", color: "white" });
+};
+var PaginationNextIcon = () => {
+  const dir = useDocumentDirection();
+  const Icon4 = dir === "rtl" ? ChevronLeftIcon : ChevronRightIcon;
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon4, { className: "oui-h-4 oui-w-4", color: "white" });
+};
 var Paginations = (props) => {
   const {
     classNames,
@@ -7419,14 +7559,14 @@ var Paginations = (props) => {
   } = props;
   const [locale] = useLocale("pagination");
   return /* @__PURE__ */ jsxRuntime.jsxs(Pagination, { className: tailwindVariants.cnBase(classNames?.pagination, className), children: [
-    !hideRowsPerPage ? /* @__PURE__ */ jsxRuntime.jsxs(Flex, { mr: 4, children: [
+    !hideRowsPerPage ? /* @__PURE__ */ jsxRuntime.jsxs(Flex, { className: "oui-me-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Text,
         {
           as: "div",
           size: "2xs",
           intensity: 54,
-          className: "oui-text-nowrap oui-mr-2",
+          className: "oui-text-nowrap oui-me-2",
           children: locale.rowsPerPage
         }
       ),
@@ -7593,6 +7733,18 @@ var TablePlaceholder = (props) => {
     }
   );
 };
+function resolveFixedDirection(fixed, isRTL) {
+  if (!fixed) {
+    return null;
+  }
+  if (fixed === "left" || fixed === "right") {
+    return fixed;
+  }
+  if (fixed === "start") {
+    return isRTL ? "right" : "left";
+  }
+  return isRTL ? "left" : "right";
+}
 var compareValues = (aValue, bValue) => {
   if (aValue == null && bValue == null) return 0;
   if (aValue == null) return 1;
@@ -7712,13 +7864,14 @@ var Transform = {
     );
     return sortedData;
   },
-  columnPinning: (columns) => {
+  columnPinning: (columns, isRTL = false) => {
     const left = [];
     const right = [];
     columns?.map((column) => {
-      if (column.fixed === "left") {
+      const fixed = resolveFixedDirection(column.fixed, isRTL);
+      if (fixed === "left") {
         left.push(column.dataIndex);
-      } else if (column.fixed === "right") {
+      } else if (fixed === "right") {
         right.push(column.dataIndex);
       }
     });
@@ -7813,9 +7966,14 @@ function DataTable(props) {
     () => Transform.columns(columns, sorting, setSorting),
     [columns, sorting, setSorting]
   );
+  const wrapRef = useWrap([className, classNames?.root]);
+  const { scrollRef, showLeftShadow, showRightShadow, isRTL } = useScroll([
+    dataSource?.length,
+    columns?.length
+  ]);
   const columnPinning = React73.useMemo(
-    () => Transform.columnPinning(columns),
-    [columns]
+    () => Transform.columnPinning(columns, isRTL),
+    [columns, isRTL]
   );
   const rowSelection = React73.useMemo(
     () => props.rowSelection || {},
@@ -7865,10 +8023,6 @@ function DataTable(props) {
   React73.useEffect(() => {
     props.getTableInstance?.(table);
   }, [table]);
-  const wrapRef = useWrap([className, classNames?.root]);
-  const { scrollRef, showLeftShadow, showRightShadow } = useScroll([
-    dataSource?.length
-  ]);
   const rows = table.getRowModel().rows;
   const showPlaceholder = initialized && (rows.length === 0 || loading);
   const showHeader = useShowHeader({
@@ -7926,6 +8080,7 @@ function DataTable(props) {
                         bordered: props.bordered,
                         showLeftShadow,
                         showRightShadow,
+                        isRTL,
                         sorting
                       }
                     ),
@@ -7941,6 +8096,7 @@ function DataTable(props) {
                         onCell: props.onCell,
                         showLeftShadow,
                         showRightShadow,
+                        isRTL,
                         testId: props.testIds?.body
                       }
                     )
@@ -7991,23 +8147,23 @@ function Calendar({
       showOutsideDays,
       className: tailwindVariants.cnBase("oui-p-3 oui-bg-base-7 oui-rounded", className),
       classNames: {
-        months: "oui-flex oui-flex-col sm:oui-flex-row oui-space-y-4 sm:oui-space-x-4 sm:oui-space-y-0",
+        months: "oui-flex oui-flex-col sm:oui-flex-row oui-space-y-4 sm:oui-gap-x-4 sm:oui-space-y-0",
         month: "oui-space-y-4",
         caption: "oui-flex oui-justify-center oui-pt-1 oui-relative oui-items-center",
         caption_label: "oui-text-sm oui-font-medium ",
-        nav: "oui-space-x-1 oui-flex oui-items-center",
+        nav: "oui-gap-x-1 oui-flex oui-items-center",
         nav_button: tailwindVariants.cnBase(
           "oui-h-7 oui-w-7 oui-bg-transparent oui-p-0 oui-opacity-50 hover:oui-opacity-100"
         ),
-        nav_button_previous: "oui-absolute oui-left-1",
-        nav_button_next: "oui-absolute oui-right-1",
+        nav_button_previous: "oui-absolute oui-start-1",
+        nav_button_next: "oui-absolute oui-end-1",
         table: "oui-w-full oui-border-collapse oui-space-y-1",
         head_row: "oui-flex",
         head_cell: "oui-text-base-contrast-80 oui-rounded-md oui-w-7 oui-font-normal oui-text-[0.8rem] oui-opacity-30",
         row: "oui-flex oui-w-full oui-mt-2",
         cell: tailwindVariants.cnBase(
-          "oui-relative oui-day-cell oui-p-0 oui-text-center oui-text-2xs focus-within:oui-relative focus-within:oui-z-20 [&:has([aria-selected])]:oui-bg-base-4 [&:has([aria-selected].day-outside)]:oui-bg-base-4/50 [&:has([aria-selected].day-range-end)]:oui-rounded-r-md",
-          props.mode === "range" ? "[&:has(>.oui-day-range-end)]:oui-rounded-r-md [&:has(>.oui-day-range-start)]:oui-rounded-l-md first:[&:has([aria-selected])]:oui-rounded-l-md last:[&:has([aria-selected])]:oui-rounded-r-md" : "[&:has([aria-selected])]:oui-rounded-md"
+          "oui-relative oui-day-cell oui-p-0 oui-text-center oui-text-2xs focus-within:oui-relative focus-within:oui-z-20 [&:has([aria-selected])]:oui-bg-base-4 [&:has([aria-selected].day-outside)]:oui-bg-base-4/50 [&:has([aria-selected].day-range-end)]:oui-rounded-e-md",
+          props.mode === "range" ? "[&:has(>.oui-day-range-end)]:oui-rounded-e-md [&:has(>.oui-day-range-start)]:oui-rounded-s-md first:[&:has([aria-selected])]:oui-rounded-s-md last:[&:has([aria-selected])]:oui-rounded-e-md" : "[&:has([aria-selected])]:oui-rounded-md"
         ),
         day: tailwindVariants.cnBase(
           //   buttonVariants({ variant: "ghost" }),
@@ -8275,14 +8431,26 @@ var sheetVariants = tailwindVariants.tv({
     side: {
       top: "oui-inset-x-0 oui-top-0 oui-border-b data-[state=closed]:oui-slide-out-to-top data-[state=open]:oui-slide-in-from-top",
       bottom: "oui-inset-x-0 oui-bottom-0 oui-rounded-t-2xl data-[state=closed]:oui-slide-out-to-bottom data-[state=open]:oui-slide-in-from-bottom",
-      left: "oui-inset-y-0 oui-left-0 oui-h-full oui-w-3/4 data-[state=closed]:oui-slide-out-to-left data-[state=open]:oui-slide-in-from-left sm:oui-max-w-sm",
-      right: "oui-inset-y-0 oui-right-0 oui-h-full oui-w-3/4 oui-border-l data-[state=closed]:oui-slide-out-to-right data-[state=open]:oui-slide-in-from-right sm:oui-max-w-sm"
+      // Keep left/right sides on logical start/end. In RTL, callers expect
+      // side="left" to attach to the visual start side; physical left/right
+      // places drawers on the opposite side from their trigger.
+      left: "oui-inset-y-0 oui-start-0 oui-h-full oui-w-3/4 sm:oui-max-w-sm",
+      right: "oui-inset-y-0 oui-end-0 oui-h-full oui-w-3/4 oui-border-s sm:oui-max-w-sm"
     }
   },
   defaultVariants: {
     side: "bottom"
   }
 });
+function getLogicalSideAnimationClass(side, direction) {
+  if (side === "left") {
+    return direction === "rtl" ? "data-[state=closed]:oui-slide-out-to-right data-[state=open]:oui-slide-in-from-right" : "data-[state=closed]:oui-slide-out-to-left data-[state=open]:oui-slide-in-from-left";
+  }
+  if (side === "right") {
+    return direction === "rtl" ? "data-[state=closed]:oui-slide-out-to-left data-[state=open]:oui-slide-in-from-left" : "data-[state=closed]:oui-slide-out-to-right data-[state=open]:oui-slide-in-from-right";
+  }
+  return void 0;
+}
 var SheetContent = React73__namespace.forwardRef(
   ({
     side = "bottom",
@@ -8293,43 +8461,54 @@ var SheetContent = React73__namespace.forwardRef(
     overlayClassName,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, { className: overlayClassName }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      SheetPrimitive__namespace.Content,
-      {
-        ref,
-        className: tailwindVariants.cnBase(sheetVariants({ side }), className),
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onCloseAutoFocus: (e) => e.preventDefault(),
-        ...props,
-        children: [
-          closeable && /* @__PURE__ */ jsxRuntime.jsxs(
-            SheetPrimitive__namespace.Close,
-            {
-              className: tailwindVariants.cnBase(
-                "oui-sheet-close-btn oui-ring-offset-base-700 focus:oui-ring-ring oui-absolute oui-right-4 oui-top-4 oui-z-10 oui-rounded-sm oui-transition-opacity focus:oui-outline-none focus:oui-ring-2 focus:oui-ring-offset-2 active:oui-outline-none focus:orderly-outline-none disabled:oui-pointer-events-none data-[state=open]:oui-bg-secondary",
-                props?.closeClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  CloseIcon,
-                  {
-                    size: closeableSize,
-                    color: "white",
-                    opacity: closeOpacity,
-                    onClick: props?.onClose
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-sr-only", children: "Close" })
-              ]
-            }
+  }, ref) => {
+    const direction = useDocumentDirection();
+    const sideAnimationClassName = getLogicalSideAnimationClass(
+      side,
+      direction
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, { className: overlayClassName }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        SheetPrimitive__namespace.Content,
+        {
+          ref,
+          className: tailwindVariants.cnBase(
+            sheetVariants({ side }),
+            sideAnimationClassName,
+            className
           ),
-          children
-        ]
-      }
-    )
-  ] })
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          ...props,
+          children: [
+            closeable && /* @__PURE__ */ jsxRuntime.jsxs(
+              SheetPrimitive__namespace.Close,
+              {
+                className: tailwindVariants.cnBase(
+                  "oui-sheet-close-btn oui-ring-offset-base-700 focus:oui-ring-ring oui-absolute oui-end-4 oui-top-4 oui-z-10 oui-rounded-sm oui-transition-opacity focus:oui-outline-none focus:oui-ring-2 focus:oui-ring-offset-2 active:oui-outline-none focus:orderly-outline-none disabled:oui-pointer-events-none data-[state=open]:oui-bg-secondary",
+                  props?.closeClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    CloseIcon,
+                    {
+                      size: closeableSize,
+                      color: "white",
+                      opacity: closeOpacity,
+                      onClick: props?.onClose
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-sr-only", children: "Close" })
+                ]
+              }
+            ),
+            children
+          ]
+        }
+      )
+    ] });
+  }
 );
 SheetContent.displayName = SheetPrimitive__namespace.Content.displayName;
 var SheetHeader = ({
@@ -8372,7 +8551,7 @@ var SheetFooter = ({
   "div",
   {
     className: tailwindVariants.cnBase(
-      "oui-sheet-footer oui-flex oui-flex-col-reverse sm:oui-flex-row sm:oui-justify-end sm:oui-space-x-2",
+      "oui-sheet-footer oui-flex oui-flex-col-reverse sm:oui-flex-row sm:oui-justify-end sm:oui-gap-x-2",
       className
     ),
     ...props
@@ -8758,7 +8937,7 @@ var dividerVariants = tv({
     },
     direction: {
       horizontal: ["oui-border-b"],
-      vertical: ["oui-border-l"]
+      vertical: ["oui-border-s"]
     },
     lineStyle: {
       // solid: "oui-border-solid",
@@ -8855,6 +9034,9 @@ var dialogVariants = tailwindVariants.tv({
     content: [
       "oui-dialog-content",
       "oui-fixed",
+      // RTL-EXCLUDE: Do not replace with `start-[50%]`.
+      // Keep physical left centering here: start maps to right in RTL, which
+      // breaks centering with translate-x-[-50%].
       "oui-left-[50%]",
       "oui-top-[50%]",
       "oui-z-50",
@@ -8885,7 +9067,7 @@ var dialogVariants = tailwindVariants.tv({
     close: [
       "oui-dialog-close-btn",
       "oui-absolute",
-      "oui-right-4",
+      "oui-end-4",
       "oui-top-4",
       // "oui-opacity-70",
       "oui-ring-offset-background",
@@ -8906,7 +9088,8 @@ var dialogVariants = tailwindVariants.tv({
       "oui-flex",
       "oui-flex-row",
       "oui-justify-end",
-      "oui-space-x-2",
+      // Use gap instead of space-x so spacing works in both LTR and RTL.
+      "oui-gap-2",
       "oui-pb-5",
       "oui-pt-2 lg:oui-pt-3"
       // "has-[&>*:nth-child(1)]:oui-bg-red-400",
@@ -9672,7 +9855,7 @@ var Picker = React73.forwardRef(
           "div",
           {
             className: tailwindVariants.cnBase(
-              "oui-space-x-1",
+              "oui-gap-x-1",
               "oui-text-base-contrast-54",
               "oui-rounded-md",
               "oui-bg-base-8",
@@ -9927,7 +10110,8 @@ var tabsVariants = tv({
       "oui-text-base-contrast-36 hover:oui-text-base-contrast-54",
       "oui-ring-offset-background",
       "oui-transition-all",
-      "oui-space-x-1",
+      /** `gap-x` mirrors correctly in RTL; `space-x` uses asymmetric margins that can overlap pill corners. */
+      "oui-gap-x-1",
       "focus-visible:oui-outline-none",
       "focus-visible:oui-ring-2",
       "focus-visible:oui-ring-ring",
@@ -9940,12 +10124,7 @@ var tabsVariants = tv({
   variants: {
     variant: {
       text: {
-        list: [
-          "oui-space-x-6",
-          "oui-border-b",
-          "oui-border-line-6",
-          "oui-px-1"
-        ],
+        list: ["oui-gap-x-6", "oui-border-b", "oui-border-line-6", "oui-px-1"],
         trigger: [
           "oui-group",
           "oui-pb-2",
@@ -9958,15 +10137,16 @@ var tabsVariants = tv({
           "data-[state=active]:after:oui-absolute",
           "data-[state=active]:after:oui-rounded-full",
           "data-[state=active]:after:-oui-bottom-0",
-          "data-[state=active]:after:oui-left-0",
-          "data-[state=active]:after:oui-right-0"
+          "data-[state=active]:after:oui-start-0",
+          "data-[state=active]:after:oui-end-0"
         ]
       },
       contained: {
-        list: ["oui-space-x-[6px]"],
+        list: ["oui-gap-x-[6px]"],
         trigger: [
           "oui-group",
-          "oui-rounded",
+          /** `!rounded` defeats host/segment overrides that strip one physical corner under `[dir="rtl"]` + `:first-child`. */
+          "!oui-rounded",
           "oui-px-3",
           "oui-bg-base-7 hover:oui-bg-base-5",
           "oui-text-base-contrast-36",
@@ -10020,7 +10200,7 @@ var tabsVariants = tv({
       size: "sm",
       variant: "contained",
       className: {
-        list: ["oui-space-x-1"],
+        list: ["oui-gap-x-1"],
         trigger: ["oui-text-2xs", "oui-h-6"],
         icon: ["oui-w-[10px]", "oui-h-[10px]"]
       }
@@ -10038,7 +10218,7 @@ var tabsVariants = tv({
       size: "lg",
       variant: "contained",
       className: {
-        trigger: ["oui-text-sm", "oui-h-8", "oui-rounded-md"],
+        trigger: ["oui-text-sm", "oui-h-8", "!oui-rounded-md"],
         icon: ["oui-w-[14px]", "oui-h-[14px]"]
       }
     },
@@ -10046,7 +10226,7 @@ var tabsVariants = tv({
       size: "xl",
       variant: "contained",
       className: {
-        trigger: ["oui-text-base", "oui-h-9", "oui-rounded-md"],
+        trigger: ["oui-text-base", "oui-h-9", "!oui-rounded-md"],
         icon: ["oui-w-4", "oui-h-4"]
       }
     }
@@ -10100,22 +10280,138 @@ var OrderlyThemeContext = React73.createContext(
 var useOrderlyTheme = () => {
   return React73.useContext(OrderlyThemeContext);
 };
+var cachedRtlScrollType;
+function getRtlScrollType() {
+  if (cachedRtlScrollType) {
+    return cachedRtlScrollType;
+  }
+  if (typeof document === "undefined") {
+    cachedRtlScrollType = "negative";
+    return cachedRtlScrollType;
+  }
+  const outer = document.createElement("div");
+  const inner = document.createElement("div");
+  outer.dir = "rtl";
+  outer.style.width = "4px";
+  outer.style.height = "1px";
+  outer.style.overflow = "scroll";
+  outer.style.position = "absolute";
+  outer.style.top = "-1000px";
+  inner.style.width = "8px";
+  inner.style.height = "1px";
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+  if (outer.scrollLeft > 0) {
+    cachedRtlScrollType = "default";
+  } else {
+    outer.scrollLeft = 1;
+    cachedRtlScrollType = outer.scrollLeft === 0 ? "negative" : "reverse";
+  }
+  document.body.removeChild(outer);
+  return cachedRtlScrollType;
+}
+function getMaxScrollLeft(container) {
+  return Math.max(container.scrollWidth - container.clientWidth, 0);
+}
+function getScrollOffsetFromStart(container) {
+  const maxScrollLeft = getMaxScrollLeft(container);
+  if (getComputedStyle(container).direction !== "rtl") {
+    return container.scrollLeft;
+  }
+  switch (getRtlScrollType()) {
+    case "negative":
+      return -container.scrollLeft;
+    case "default":
+      return maxScrollLeft - container.scrollLeft;
+    case "reverse":
+      return container.scrollLeft;
+  }
+}
+function getScrollLeftForOffsetFromStart(container, offsetFromStart) {
+  const maxScrollLeft = getMaxScrollLeft(container);
+  const nextOffset = Math.min(Math.max(offsetFromStart, 0), maxScrollLeft);
+  if (getComputedStyle(container).direction !== "rtl") {
+    return nextOffset;
+  }
+  switch (getRtlScrollType()) {
+    case "negative":
+      return -nextOffset;
+    case "default":
+      return maxScrollLeft - nextOffset;
+    case "reverse":
+      return nextOffset;
+  }
+}
+function useScroll2() {
+  const [leadingVisible, setLeadingVisible] = React73.useState(false);
+  const [tailingVisible, setTailingVisible] = React73.useState(false);
+  const [isRTL, setIsRTL] = React73.useState(false);
+  const containerRef = React73.useRef(null);
+  const updateScrollVisibility = React73.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const maxScrollLeft = getMaxScrollLeft(container);
+    const offsetFromStart = getScrollOffsetFromStart(container);
+    const nextIsRTL = getComputedStyle(container).direction === "rtl";
+    setIsRTL(nextIsRTL);
+    setLeadingVisible(offsetFromStart > 1);
+    setTailingVisible(offsetFromStart < maxScrollLeft - 1);
+  }, []);
+  React73.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", updateScrollVisibility);
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          updateScrollVisibility();
+        }
+      });
+    });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateScrollVisibility) : void 0;
+    intersectionObserver.observe(container);
+    resizeObserver?.observe(container);
+    updateScrollVisibility();
+    return () => {
+      container.removeEventListener("scroll", updateScrollVisibility);
+      intersectionObserver.disconnect();
+      resizeObserver?.disconnect();
+    };
+  }, [updateScrollVisibility]);
+  const onScoll = (direction) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const currentOffset = getScrollOffsetFromStart(container);
+    const delta = direction === "leading" ? -100 : 100;
+    const left = getScrollLeftForOffsetFromStart(
+      container,
+      currentOffset + delta
+    );
+    container.scrollTo({ left, behavior: "smooth" });
+  };
+  return { containerRef, leadingVisible, tailingVisible, isRTL, onScoll };
+}
+
+// src/scrollIndicator/hooks/useDrag.ts
 function useDrag(containerRef) {
   const [isDragging, setIsDragging] = React73.useState(false);
   const [startX, setStartX] = React73.useState(0);
-  const [scrollLeft, setScrollLeft] = React73.useState(0);
+  const [scrollOffsetFromStart, setScrollOffsetFromStart] = React73.useState(0);
   const handleMouseDown = (e) => {
     if (!containerRef.current) return;
     setIsDragging(true);
     setStartX(e.pageX - containerRef.current.offsetLeft);
-    setScrollLeft(containerRef.current.scrollLeft);
+    setScrollOffsetFromStart(getScrollOffsetFromStart(containerRef.current));
   };
   const handleMouseMove = (e) => {
     if (!isDragging || !containerRef.current) return;
     e.preventDefault();
     const x = e.pageX - containerRef.current.offsetLeft;
     const walk = x - startX;
-    containerRef.current.scrollLeft = scrollLeft - walk;
+    containerRef.current.scrollLeft = getScrollLeftForOffsetFromStart(
+      containerRef.current,
+      scrollOffsetFromStart - walk
+    );
   };
   const handleMouseUp = () => {
     setIsDragging(false);
@@ -10127,58 +10423,9 @@ function useDrag(containerRef) {
     isDragging
   };
 }
-function useScroll2() {
-  const [leadingVisible, setLeadingVisible] = React73.useState(false);
-  const [tailingVisible, setTailingVisible] = React73.useState(false);
-  const containerRef = React73.useRef(null);
-  React73.useEffect(() => {
-    if (!containerRef.current) return;
-    const handleScroll = () => {
-      const container2 = containerRef.current;
-      if (!container2) return;
-      setLeadingVisible(container2.scrollLeft > 0);
-      setTailingVisible(
-        container2.scrollLeft + container2.clientWidth < container2.scrollWidth
-      );
-    };
-    const intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          handleScroll();
-        }
-      });
-    });
-    const container = containerRef.current;
-    container.addEventListener("scroll", handleScroll);
-    intersectionObserver.observe(container);
-    return () => {
-      container.removeEventListener("scroll", handleScroll);
-      intersectionObserver.disconnect();
-    };
-  }, []);
-  React73.useEffect(() => {
-    if (!containerRef.current) return;
-    const intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) ;
-      });
-    });
-    intersectionObserver.observe(containerRef.current);
-    return () => {
-      intersectionObserver.disconnect();
-    };
-  }, []);
-  const onScoll = (direction) => {
-    if (direction === "left") {
-      containerRef.current?.scrollBy({ left: -100, behavior: "smooth" });
-    } else {
-      containerRef.current?.scrollBy({ left: 100, behavior: "smooth" });
-    }
-  };
-  return { containerRef, leadingVisible, tailingVisible, onScoll };
-}
 var ScrolButton = (props) => {
-  const { visible, leading, tailing, onClick } = props;
+  const { visible, leading, tailing, isRTL, onClick } = props;
+  const isLeftEdge = isRTL ? tailing : leading;
   if (!visible) {
     return null;
   }
@@ -10186,14 +10433,18 @@ var ScrolButton = (props) => {
     "button",
     {
       onClick: () => {
-        onClick?.(leading ? "left" : "right");
+        onClick?.(leading ? "leading" : "tailing");
+      },
+      style: {
+        direction: "ltr",
+        left: isLeftEdge ? 0 : void 0,
+        right: isLeftEdge ? void 0 : 0
       },
       className: tailwindVariants.cnBase(
         leading ? "oui-scroll-indicator-leading" : "oui-scroll-indicator-tailing",
         "oui-group oui-flex",
         "oui-absolute oui-top-0 oui-bottom-0",
-        leading && "oui-left-0 oui-flex-row-reverse",
-        tailing && "oui-right-0"
+        isLeftEdge && "oui-flex-row-reverse"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -10202,7 +10453,7 @@ var ScrolButton = (props) => {
             className: tailwindVariants.cnBase(
               "oui-w-6 oui-h-full",
               "oui-bg-[linear-gradient(90deg,rgba(var(--oui-color-base-9)_/_0)_0%,rgba(var(--oui-color-base-9)_/_1)_100%)]",
-              leading && "oui-rotate-180"
+              isLeftEdge && "oui-rotate-180"
             )
           }
         ),
@@ -10218,7 +10469,7 @@ var ScrolButton = (props) => {
               {
                 className: tailwindVariants.cnBase(
                   "oui-text-base-contrast-54 group-hover:oui-text-base-contrast",
-                  leading && "oui-rotate-180"
+                  isLeftEdge && "oui-rotate-180"
                 )
               }
             )
@@ -10241,14 +10492,14 @@ var ArrowRightIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 var ScrollIndicator = (props) => {
-  const { containerRef, leadingVisible, tailingVisible, onScoll } = useScroll2();
+  const { containerRef, leadingVisible, tailingVisible, isRTL, onScoll } = useScroll2();
   const { handleMouseDown, handleMouseMove, handleMouseUp, isDragging } = useDrag(containerRef);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: tailwindVariants.cnBase(
         "oui-scroll-indicator",
-        "oui-relative oui-select-none oui-overflow-hidden",
+        "oui-relative oui-min-w-0 oui-flex-1 oui-select-none oui-overflow-hidden",
         props.className
       ),
       children: [
@@ -10267,13 +10518,33 @@ var ScrollIndicator = (props) => {
             children: props.children
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrolButton, { leading: true, onClick: onScoll, visible: leadingVisible }),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrolButton, { tailing: true, onClick: onScoll, visible: tailingVisible })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrolButton,
+          {
+            leading: true,
+            isRTL,
+            onClick: onScoll,
+            visible: leadingVisible
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrolButton,
+          {
+            tailing: true,
+            isRTL,
+            onClick: onScoll,
+            visible: tailingVisible
+          }
+        )
       ]
     }
   );
 };
 var TabsContext = React73.createContext({});
+function useResolvedTabsDir(propDir) {
+  const fromDocument = useDocumentDirection();
+  return propDir ?? fromDocument;
+}
 var Tabs = (props) => {
   const { getComponentTheme } = useOrderlyTheme();
   const {
@@ -10282,8 +10553,10 @@ var Tabs = (props) => {
     variant,
     showScrollIndicator,
     value,
+    dir: dirProp,
     ...rest
   } = props;
+  const dir = useResolvedTabsDir(dirProp);
   const tabsOverrides = getComponentTheme("tabs", {
     variant: variant ?? "contained"
   });
@@ -10337,7 +10610,7 @@ var Tabs = (props) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(TabsContext.Provider, { value: memoizedValue, children: [
     props.children,
-    /* @__PURE__ */ jsxRuntime.jsxs(TabsBase, { value, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TabsBase, { value, ...rest, dir, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         Flex,
         {
@@ -10585,7 +10858,7 @@ var sliderVariants = tv({
       "data-[disabled]:oui-hidden"
     ],
     track: "oui-relative oui-h-[8px] oui-w-full oui-grow oui-overflow-hidden oui-rounded-full",
-    trackInner: "oui-absolute oui-left-0 oui-right-0 oui-h-[2px] oui-top-[3px]  oui-pointer-events-none oui-bg-base-2",
+    trackInner: "oui-absolute oui-start-0 oui-end-0 oui-h-[2px] oui-top-[3px]  oui-pointer-events-none oui-bg-base-2",
     range: "oui-absolute oui-h-[2px] oui-top-[3px] oui-bg-primary data-[disabled]:oui-bg-base-2",
     mark: "oui-absolute oui-top-[1px] oui-w-[6px] oui-h-[6px] oui-rounded oui-border oui-border-base-2 oui-bg-base-6 oui-pointer-events-none oui-translate-x-[-50%]",
     tips: [
@@ -11151,7 +11424,7 @@ var ListViewInner = (props, ref) => {
           {
             className: tailwindVariants.cn(
               "oui-space-y-3 oui-h-full oui-w-full",
-              emptyDataSouce && "oui-absolute oui-bottom-0 oui-left-0 oui-right-0 oui-top-0",
+              emptyDataSouce && "oui-absolute oui-bottom-0 oui-start-0 oui-end-0 oui-top-0",
               props.contentClassName
             )({ twMerge: true }),
             children: listViewElement
@@ -11386,7 +11659,7 @@ var dropdownMenuVariants = tailwindVariants.tv({
     ],
     label: "oui-px-2 oui-py-1.5 oui-text-sm oui-font-semibold",
     separator: "-oui-mx-1 oui-my-1 oui-h-px oui-bg-muted",
-    shortcut: "oui-ml-auto oui-text-xs oui-tracking-widest oui-opacity-60"
+    shortcut: "oui-ms-auto oui-text-xs oui-tracking-widest oui-opacity-60"
   },
   variants: {
     size: {
@@ -11431,8 +11704,8 @@ var dropdownMenuVariants = tailwindVariants.tv({
     },
     inset: {
       true: {
-        item: ["oui-pl-8"],
-        label: ["oui-pl-8"]
+        item: ["oui-ps-8"],
+        label: ["oui-ps-8"]
       }
     }
   },
@@ -12252,6 +12525,7 @@ exports.startViewTransition = startViewTransition;
 exports.statisticVariants = statisticVariants;
 exports.textVariants = textVariants;
 exports.tv = tv;
+exports.useDocumentDirection = useDocumentDirection;
 exports.useLocale = useLocale;
 exports.useLongPress = useLongPress;
 exports.useMediaQuery = useMediaQuery;