@kinetixui/ui 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,6 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
+    "@kinetixui/tokens": "0.13.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",
@@ -52,6 +53,7 @@
     "@radix-ui/react-collapsible": "^1.1.20",
     "@radix-ui/react-context-menu": "^2.3.7",
     "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-direction": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-hover-card": "^1.1.23",
     "@radix-ui/react-label": "^2.1.15",
@@ -93,7 +95,6 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.12.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",

package/src/components/alert.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm font-sans [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "relative w-full rounded-lg border px-4 py-3 text-sm font-sans [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:ps-7",
   {
     variants: {
       variant: {

package/src/components/app-bar.tsx

@@ -63,7 +63,7 @@ const AppBar = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
                 aria-expanded={open}
                 onClick={() => setOpen((o) => !o)}
                 className={cn(
-                  "ml-auto inline-flex size-9 items-center justify-center rounded-md text-foreground outline-none transition-colors md:hidden",
+                  "ms-auto inline-flex size-9 items-center justify-center rounded-md text-foreground outline-none transition-colors md:hidden",
                   "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
                 )}
               >
@@ -131,7 +131,7 @@ AppBarLink.displayName = "AppBarLink";
 
 const AppBarActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("ml-auto flex shrink-0 items-center gap-2", className)} {...props} />
+    <div ref={ref} className={cn("ms-auto flex shrink-0 items-center gap-2", className)} {...props} />
   ),
 );
 AppBarActions.displayName = "AppBarActions";

package/src/components/dialog.tsx

@@ -34,6 +34,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
+        // rtl-ok: centering trick (left-1/2 + -translate-x-1/2), direction-agnostic by construction
         "fixed left-1/2 top-1/2 z-overlay grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className,
@@ -41,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
         <X className="size-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -51,7 +52,7 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-start", className)} {...props} />
 );
 DialogHeader.displayName = "DialogHeader";
 

package/src/components/direction-provider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { DirectionProvider as RadixDirectionProvider } from "@radix-ui/react-direction";
+
+export interface KinetixDirectionProviderProps {
+  children?: React.ReactNode;
+  dir: "ltr" | "rtl";
+}
+
+/**
+ * Every Radix primitive this library builds on (Select, DropdownMenu, Popover,
+ * Tooltip, ContextMenu, Menubar, NavigationMenu, HoverCard, …) reads direction
+ * from a `DirectionContext`, not from the ambient `dir` attribute — with no
+ * provider in the tree it defaults hard to `"ltr"` and stamps that onto its own
+ * portaled content, regardless of what `<html dir="rtl">` says. Logical-property
+ * CSS (see RTL.md) mirrors layout; this is what makes Radix's own positioning
+ * and portaled content agree with it. Wrap your app root in this alongside
+ * setting `dir` on `<html>`:
+ *
+ *   <html dir={dir}>
+ *     <KinetixDirectionProvider dir={dir}>{children}</KinetixDirectionProvider>
+ *   </html>
+ */
+export function KinetixDirectionProvider({ dir, children }: KinetixDirectionProviderProps) {
+  return <RadixDirectionProvider dir={dir}>{children}</RadixDirectionProvider>;
+}

package/src/components/drawer.tsx

@@ -43,7 +43,7 @@ const DrawerContent = React.forwardRef<
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)} {...props} />
 );
 DrawerHeader.displayName = "DrawerHeader";
 

package/src/components/dropdown-menu.tsx

@@ -31,7 +31,7 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item ref={ref} className={cn(itemCls, inset && "pl-8", className)} {...props} />
+  <DropdownMenuPrimitive.Item ref={ref} className={cn(itemCls, inset && "ps-8", className)} {...props} />
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
@@ -39,8 +39,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn(itemCls, "pl-8", className)} checked={checked} {...props}>
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+  <DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn(itemCls, "ps-8", className)} checked={checked} {...props}>
+    <span className="absolute start-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -54,8 +54,8 @@ const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem ref={ref} className={cn(itemCls, "pl-8", className)} {...props}>
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+  <DropdownMenuPrimitive.RadioItem ref={ref} className={cn(itemCls, "ps-8", className)} {...props}>
+    <span className="absolute start-2 flex size-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="size-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -71,7 +71,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
     {...props}
   />
 ));
@@ -88,7 +88,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 // opacity-60 (not --opacity-muted's 0.7) is a pre-existing inconsistency —
 // left as a literal rather than silently changing the rendered value.
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
-  <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  <span className={cn("ms-auto text-xs tracking-widest opacity-60", className)} {...props} />
 );
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
@@ -98,11 +98,11 @@ const DropdownMenuSubTrigger = React.forwardRef<
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
-    className={cn(itemCls, "data-[state=open]:bg-accent", inset && "pl-8", className)}
+    className={cn(itemCls, "data-[state=open]:bg-accent", inset && "ps-8", className)}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto size-4" />
+    <ChevronRight className="ms-auto size-4 rtl:-scale-x-100" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;

package/src/components/input-group.tsx

@@ -52,7 +52,7 @@ const InputGroupInput = React.forwardRef<
 InputGroupInput.displayName = "InputGroupInput";
 
 const addonVariants = cva("flex shrink-0 items-center gap-2 text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0", {
-  variants: { align: { start: "pl-3", end: "pr-3" } },
+  variants: { align: { start: "ps-3", end: "pe-3" } },
   defaultVariants: { align: "start" },
 });
 
@@ -83,7 +83,7 @@ const InputGroupButton = React.forwardRef<
     ref={ref}
     type={type}
     className={cn(
-      "flex h-full shrink-0 items-center gap-1.5 self-stretch border-l border-input bg-muted px-3 text-label-md text-foreground",
+      "flex h-full shrink-0 items-center gap-1.5 self-stretch border-s border-input bg-muted px-3 text-label-md text-foreground",
       // base is bg-muted and muted==accent on dark, so the fill is a no-op there — the ring carries it
       "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled",
       "[&_svg]:size-4 [&_svg]:shrink-0",

package/src/components/kanban-board.tsx

@@ -26,6 +26,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { tokens } from "@kinetixui/tokens";
 import { cn } from "../lib/utils";
 
 export interface KanbanCard {
@@ -78,7 +79,7 @@ export interface KanbanBoardProps extends Omit<React.HTMLAttributes<HTMLDivEleme
 const KanbanBoard = React.forwardRef<HTMLDivElement, KanbanBoardProps>(
   ({ columns, onColumnsChange, className, ...props }, ref) => {
     const sensors = useSensors(
-      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+      useSensor(PointerSensor, { activationConstraint: { distance: tokens.interaction.drag.threshold } }),
       useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
     );
     const [activeCard, setActiveCard] = React.useState<KanbanCard | null>(null);

package/src/components/native-select.tsx

@@ -15,7 +15,7 @@ import { cn } from "../lib/utils";
  */
 const nativeSelectVariants = cva(
   [
-    "flex w-full appearance-none border border-input bg-background px-3 py-3 pr-9",
+    "flex w-full appearance-none border border-input bg-background px-3 py-3 pe-9",
     "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
@@ -59,7 +59,7 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
       >
         {children}
       </select>
-      <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+      <ChevronDown className="pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
     </div>
   ),
 );

package/src/components/select.tsx

@@ -90,13 +90,13 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute start-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="size-4" />
       </SelectPrimitive.ItemIndicator>

package/src/components/sheet.tsx

@@ -30,6 +30,8 @@ const sheetVariants = cva(
   "fixed z-overlay gap-4 bg-background p-6 shadow-lg transition ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-base data-[state=open]:duration-slow font-sans",
   {
     variants: {
+      // rtl-ok-start: `side` picks a physical screen edge on purpose (a caller-chosen
+      // slide-in direction, not text-direction-relative) — left/right stay physical.
       side: {
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom:
@@ -38,6 +40,7 @@ const sheetVariants = cva(
         right:
           "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
+      // rtl-ok-end
     },
     defaultVariants: { side: "right" },
   },
@@ -55,7 +58,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring">
+      <SheetPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring">
         <X className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -65,7 +68,7 @@ const SheetContent = React.forwardRef<
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-start", className)} {...props} />
 );
 SheetHeader.displayName = "SheetHeader";
 

package/src/index.ts

@@ -24,6 +24,10 @@ export {
   AlertDialogCancel,
 } from "./components/alert-dialog";
 export { AspectRatio } from "./components/aspect-ratio";
+export {
+  KinetixDirectionProvider,
+  type KinetixDirectionProviderProps,
+} from "./components/direction-provider";
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, type AvatarGroupProps } from "./components/avatar";
 export { Badge, badgeVariants, type BadgeProps } from "./components/badge";
 export {