@exxatdesignux/ui 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exxatdesignux/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Exxat shared design system (components, hooks, tokens). Monorepo setup: clone repo then pnpm bootstrap at workspace root — see github.com/ExxatDesign/Exxat-DS-Workspace README.",
   "license": "UNLICENSED",
   "author": "Exxat Design",

package/src/components/data-views/data-row-list.tsx

@@ -170,7 +170,7 @@ function DataRowListVirtualized<TRow>({
               key={vr.key}
               data-index={vr.index}
               ref={virtualizer.measureElement}
-              className={cn("absolute left-0 top-0 w-full pb-2", rowClassName)}
+              className={cn("absolute start-0 top-0 w-full pb-2", rowClassName)}
               style={{ transform: `translateY(${vr.start}px)` }}
             >
               {renderRow(row, vr.index)}

package/src/components/ui/banner.tsx

@@ -56,8 +56,6 @@ const VARIANT_CONFIG = {
   },
 }
 
-type BannerVariant = keyof typeof VARIANT_CONFIG
-
 // ─────────────────────────────────────────────────────────────────────────────
 // SystemBanner — inline at the top of the main content area
 // ─────────────────────────────────────────────────────────────────────────────

package/src/components/ui/coach-mark.tsx

@@ -25,7 +25,6 @@ import * as React from "react"
 import { createPortal } from "react-dom"
 import { Popover as PopoverPrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"
-import { Button } from "./button"
 import { cn } from "../../lib/utils"
 import type { CoachMarkState } from "../../hooks/use-coach-mark"
 
@@ -258,7 +257,7 @@ export function CoachMark({
               "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
               "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
               "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-              "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+              "data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2",
               className
             )}
           >

package/src/components/ui/context-menu.tsx

@@ -126,7 +126,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
           className,
         )}

package/src/components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         align={align}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
           className,
         )}
@@ -403,7 +403,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
         className,
       )}

package/src/components/ui/hover-card.tsx

@@ -54,7 +54,7 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className,
         )}
         {...props}

package/src/components/ui/key-metrics.tsx

@@ -261,7 +261,7 @@ function flatMetricsHairlineClass(
   const childBorder = "[&>*]:border-[color:var(--key-metrics-flat-divider)]"
 
   if (itemCount === 2) {
-    return cn("gap-0", childBorder, "[&>*:first-child]:border-r")
+    return cn("gap-0", childBorder, "[&>*:first-child]:border-e")
   }
 
   if (itemCount === 4) {
@@ -272,15 +272,15 @@ function flatMetricsHairlineClass(
       "gap-0",
       childBorder,
       /* Wide strip (matches `@[30rem]:grid-cols-4`) — verticals between all tiles, no horizontal */
-      "[&>*:not(:last-child)]:border-r",
+      "[&>*:not(:last-child)]:border-e",
       /* Narrow strip (`@[18rem]`–`@[30rem]` 2×2) */
       `${narrow2x2}:[&>*:not(:last-child)]:border-e-0`,
-      `${narrow2x2}:[&>*:nth-child(odd)]:border-r`,
+      `${narrow2x2}:[&>*:nth-child(odd)]:border-e`,
       `${narrow2x2}:[&>*:not(:nth-last-child(-n+2))]:border-b`,
     )
   }
 
-  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-r")
+  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-e")
 }
 
 function metricsRowColumnsClass(rowLength: number, metricsHalfWidthLayout: boolean): string {

package/src/components/ui/popover.tsx

@@ -34,7 +34,7 @@ function PopoverContent({
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          "data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2",
           className
         )}
         {...props}

package/src/components/ui/select.tsx

@@ -68,7 +68,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className )}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className )}
         position={position}
         align={align}
         {...props}

package/src/components/ui/sheet.tsx

@@ -63,7 +63,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-left-6 data-[side=right]:data-open:slide-in-from-right-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-left-6 data-[side=right]:data-closed:slide-out-to-right-6 data-[side=top]:data-closed:slide-out-to-top-6",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:start-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:end-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-start-6 data-[side=right]:data-open:slide-in-from-end-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-start-6 data-[side=right]:data-closed:slide-out-to-end-6 data-[side=top]:data-closed:slide-out-to-top-6",
           className
         )}
         {...props}

package/src/components/ui/sidebar.tsx

@@ -121,7 +121,7 @@ function SidebarProvider({
   // `SidebarAutoCollapse` route) must NOT trigger a re-reconcile that reads the
   // saved cookie back as "expanded" and snaps the rail open again.
   // The functional setter avoids closing over a stale `open` value.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // Deps are `[openProp]` only — not `open` — so incidental collapses do not re-read the cookie.
   React.useLayoutEffect(() => {
     if (typeof window === "undefined") return
     if (typeof document !== "undefined" && document.cookie.includes(`${SIDEBAR_COOKIE_LEGACY_NAME}=`)) {
@@ -132,7 +132,7 @@ function SidebarProvider({
     const fromCookie = readSidebarStateCookie()
     if (fromCookie === undefined) return
     _setOpen((prev) => (prev === fromCookie ? prev : fromCookie))
-  }, [])
+  }, [openProp])
 
   const setOpen = React.useCallback(
     (
@@ -246,7 +246,7 @@ function Sidebar({
   collapsible = "offcanvas",
   className,
   children,
-  dir,
+  dir: _dir,
   ...props
 }: React.ComponentProps<"div"> & {
   side?: "left" | "right"

package/src/components/ui/tooltip.tsx

@@ -50,7 +50,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

package/template/package.json

@@ -79,5 +79,15 @@
     "typescript": "^5.9.3",
     "vite": "^6.4.1",
     "vitest": "^3.2.4"
+  },
+  "overrides": {
+    "postcss": "^8.5.14",
+    "ws": "^8.20.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "postcss@<8.5.10": "^8.5.14",
+      "ws@<8.20.1": "^8.20.1"
+    }
   }
 }

package/tokens/hooks-index.json

@@ -1,7 +1,7 @@
 {
-  "version": "0.4.0",
+  "version": "0.5.2",
   "source": "packages/ui/src/globals.css",
-  "generatedAt": "2026-05-21T18:31:11.351Z",
+  "generatedAt": "2026-05-22T05:01:54.358Z",
   "tokenCount": 197,
   "themeKeys": [
     "tailwind-bridge",