@a4ui/core 0.38.0 → 0.39.0

package/src/ui/TimeField.tsx

@@ -6,9 +6,9 @@
 import { Clock } from 'lucide-solid'
 import type { JSX } from 'solid-js'
 import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
-import { Portal } from 'solid-js/web'
+import { Portal } from './Portal'
 
-import { createAnchorReflow } from '../lib/anchored'
+import { anchoredLeft, createAnchorReflow } from '../lib/anchored'
 import { cn } from '../lib/cn'
 
 type AmPm = 'AM' | 'PM'
@@ -108,7 +108,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
     if (!btnRef) return
     const r = btnRef.getBoundingClientRect()
     const w = popWidth()
-    const left = Math.max(8, Math.min(r.left, window.innerWidth - w - 8))
+    const left = anchoredLeft(btnRef, w)
     setPos({ top: r.bottom + 4, left })
   }
 
@@ -200,7 +200,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
 
   const optionClass = (selected: boolean) =>
     cn(
-      'rounded-md px-2 py-1 text-left text-sm transition-colors',
+      'rounded-md px-2 py-1 text-start text-sm transition-colors',
       selected ? 'bg-primary text-primary-foreground' : 'text-foreground hover:bg-muted',
     )
 
@@ -211,7 +211,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
         type="button"
         disabled={props.disabled}
         onClick={() => (open() ? close() : openPopover())}
-        class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
+        class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-start text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
       >
         <span class={displayLabel(props.value, props.hour12 ?? false) ? '' : 'text-muted-foreground'}>
           {displayLabel(props.value, props.hour12 ?? false) ?? props.label ?? 'Select time'}
@@ -226,12 +226,12 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
             data-a4-floating
             style={{ position: 'fixed', top: `${pos().top}px`, left: `${pos().left}px` }}
             class={cn(
-              'pointer-events-auto z-50 flex gap-1 divide-x divide-border rounded-lg border border-border bg-card p-2 text-card-foreground shadow-lg',
+              'pointer-events-auto z-50 flex gap-1 divide-x rtl:divide-x-reverse divide-border rounded-lg border border-border bg-card p-2 text-card-foreground shadow-lg',
               props.hour12 ? 'w-56' : 'w-44',
             )}
           >
             <div
-              class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pr-1"
+              class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pe-1"
               role="listbox"
               aria-label="Hour"
             >
@@ -278,7 +278,7 @@ export function TimeField(props: TimeFieldProps): JSX.Element {
 
             <Show when={props.hour12}>
               <div
-                class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pl-1"
+                class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto ps-1"
                 role="listbox"
                 aria-label="AM or PM"
               >

package/src/ui/Timeline.tsx

@@ -55,12 +55,12 @@ export function Timeline(props: TimelineProps): JSX.Element {
     <ol class={cn('relative flex flex-col gap-6', props.class)}>
       <For each={props.items}>
         {(item, index) => (
-          <li class="relative flex gap-4 pl-2">
+          <li class="relative flex gap-4 ps-2">
             {/* Line segment: hidden on the last item so it doesn't extend past the dot. */}
             <Show when={index() < props.items.length - 1}>
               <span
                 aria-hidden="true"
-                class="absolute left-[calc(0.5rem+0.375rem)] top-3 -bottom-6 w-px -translate-x-1/2 bg-border"
+                class="absolute start-[calc(0.5rem+0.375rem)] top-3 -bottom-6 w-px -translate-x-1/2 bg-border"
               />
             </Show>
             <span

package/src/ui/Toast.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'solid-js'
 import { Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { useDirection } from './DirectionProvider'
 
 /** Visual/semantic tone of a toast — controls its border/background accent color. */
 export type ToastTone = 'success' | 'error' | 'info'
@@ -58,11 +59,16 @@ export const toast = {
   info: (title: string, description?: string) => show('info', title, description),
 }
 
-/** Mount once near the app root — hosts the toast viewport. */
+/**
+ * Mount once near the app root — hosts the toast viewport. Mount it inside a
+ * `DirectionProvider` for RTL: the viewport sits in the end corner (the left
+ * one under RTL) and swipe-to-dismiss follows the direction.
+ */
 export function Toaster(): JSX.Element {
+  const dir = useDirection()
   return (
-    <KToast.Region duration={5000} swipeDirection="right">
-      <KToast.List class="fixed bottom-4 right-4 z-50 flex w-80 flex-col gap-2 outline-none" />
+    <KToast.Region duration={5000} swipeDirection={dir() === 'rtl' ? 'left' : 'right'}>
+      <KToast.List class="fixed bottom-4 end-4 z-50 flex w-80 flex-col gap-2 outline-none" />
     </KToast.Region>
   )
 }

package/src/ui/ToolCallTimeline.tsx

@@ -46,11 +46,11 @@ export function ToolCallTimeline(props: ToolCallTimelineProps): JSX.Element {
     <ol class={cn('relative flex flex-col gap-4', props.class)}>
       <For each={props.calls}>
         {(call, index) => (
-          <li class="relative flex gap-3 pl-1">
+          <li class="relative flex gap-3 ps-1">
             <Show when={index() < props.calls.length - 1}>
               <span
                 aria-hidden="true"
-                class="absolute left-[calc(0.5rem+2px)] top-6 -bottom-4 w-px -translate-x-1/2 bg-border"
+                class="absolute start-[calc(0.5rem+2px)] top-6 -bottom-4 w-px -translate-x-1/2 bg-border"
               />
             </Show>
             <StatusNode status={call.status} />

package/src/ui/Tooltip.tsx

@@ -3,6 +3,7 @@ import { Tooltip as KTooltip } from '@kobalte/core/tooltip'
 import type { JSX, ParentProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { portalDir } from '../lib/direction'
 
 interface TooltipProps extends ParentProps {
   /** Content shown inside the tooltip popover. */
@@ -26,7 +27,7 @@ export function Tooltip(props: TooltipProps): JSX.Element {
   return (
     <KTooltip>
       <KTooltip.Trigger class="inline-flex">{props.children}</KTooltip.Trigger>
-      <KTooltip.Portal>
+      <KTooltip.Portal ref={portalDir}>
         <KTooltip.Content
           class={cn(
             'z-50 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-card-foreground shadow-md',

package/src/ui/Tour.tsx

@@ -8,7 +8,7 @@
 // highlight.
 import type { JSX } from 'solid-js'
 import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { Portal } from 'solid-js/web'
+import { Portal } from './Portal'
 
 import { cn } from '../lib/cn'
 import { Button } from './Button'

package/src/ui/TransactionFeed.tsx

@@ -86,7 +86,7 @@ export function TransactionFeed(props: TransactionFeedProps): JSX.Element {
           <p class="truncate text-xs text-muted-foreground">{tx.subtitle}</p>
         </Show>
       </div>
-      <div class="shrink-0 text-right">
+      <div class="shrink-0 text-end">
         <p
           class={cn(
             'text-sm font-medium tabular-nums',

package/src/ui/Transfer.tsx

@@ -100,10 +100,10 @@ export function Transfer(props: TransferProps): JSX.Element {
       {pane(titles()[0], available)}
       <div class="flex flex-col items-center justify-center gap-2">
         <Button variant="outline" class="px-2" onClick={moveRight} aria-label="Move to selected">
-          <ChevronRight class="h-4 w-4" />
+          <ChevronRight class="h-4 w-4 rtl:-scale-x-100" />
         </Button>
         <Button variant="outline" class="px-2" onClick={moveLeft} aria-label="Move to available">
-          <ChevronLeft class="h-4 w-4" />
+          <ChevronLeft class="h-4 w-4 rtl:-scale-x-100" />
         </Button>
       </div>
       {pane(titles()[1], chosen)}

package/src/ui/Tree.tsx

@@ -64,14 +64,14 @@ export function Tree(props: TreeProps): JSX.Element {
       <li role="treeitem" aria-expanded={hasChildren() ? isExpanded() : undefined}>
         <div
           class="flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-foreground hover:bg-muted cursor-pointer"
-          style={{ 'padding-left': `${nodeProps.depth * 1 + 0.5}rem` }}
+          style={{ 'padding-inline-start': `${nodeProps.depth * 1 + 0.5}rem` }}
           onClick={() => hasChildren() && toggle(nodeProps.node.id)}
         >
           <Show when={hasChildren()} fallback={<span class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}>
             <ChevronRight
               class={cn(
                 'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
-                isExpanded() && 'rotate-90',
+                isExpanded() ? 'rotate-90' : 'rtl:-scale-x-100',
               )}
               aria-hidden="true"
             />

package/src/ui/TreeSelect.tsx

@@ -97,14 +97,14 @@ export function TreeSelect(props: TreeSelectProps): JSX.Element {
             'flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-foreground hover:bg-muted cursor-pointer',
             isSelected() && 'bg-accent text-accent-foreground',
           )}
-          style={{ 'padding-left': `${nodeProps.depth * 1 + 0.5}rem` }}
+          style={{ 'padding-inline-start': `${nodeProps.depth * 1 + 0.5}rem` }}
           onClick={() => (hasChildren() ? toggle(nodeProps.node.id) : select(nodeProps.node))}
         >
           <Show when={hasChildren()} fallback={<span class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}>
             <ChevronRight
               class={cn(
                 'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
-                isExpanded() && 'rotate-90',
+                isExpanded() ? 'rotate-90' : 'rtl:-scale-x-100',
               )}
               aria-hidden="true"
             />

package/src/ui/TreeTable.tsx

@@ -100,7 +100,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
             <TableRow>
               <For each={props.columns}>
                 {(col, colIndex) => (
-                  <TableCell class={cn(col.align === 'right' && 'text-right tabular-nums')}>
+                  <TableCell class={cn(col.align === 'right' && 'text-end tabular-nums')}>
                     <Show
                       when={colIndex() === 0}
                       fallback={
@@ -111,7 +111,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
                     >
                       <div
                         class="flex items-center gap-1.5"
-                        style={{ 'padding-left': `${rowsProps.depth * 1}rem` }}
+                        style={{ 'padding-inline-start': `${rowsProps.depth * 1}rem` }}
                       >
                         <Show
                           when={hasChildren()}
@@ -127,7 +127,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
                             <ChevronRight
                               class={cn(
                                 'h-3.5 w-3.5 transition-transform duration-200',
-                                isExpanded() && 'rotate-90',
+                                isExpanded() ? 'rotate-90' : 'rtl:-scale-x-100',
                               )}
                               aria-hidden="true"
                             />
@@ -159,7 +159,7 @@ export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
         <TableRow>
           <For each={props.columns}>
             {(col) => (
-              <TableHeadCell class={cn(col.align === 'right' && 'text-right')}>{col.header}</TableHeadCell>
+              <TableHeadCell class={cn(col.align === 'right' && 'text-end')}>{col.header}</TableHeadCell>
             )}
           </For>
         </TableRow>

package/src/ui/UsageMeter.tsx

@@ -51,7 +51,7 @@ export function UsageMeter(props: UsageMeterProps): JSX.Element {
         <Show when={props.label}>
           <KMeter.Label>{props.label}</KMeter.Label>
         </Show>
-        <KMeter.ValueLabel class="ml-auto tabular-nums text-muted-foreground" />
+        <KMeter.ValueLabel class="ms-auto tabular-nums text-muted-foreground" />
       </div>
       <KMeter.Track class="h-2 overflow-hidden rounded-full bg-muted">
         <KMeter.Fill

package/src/ui/VideoPlayerShell.tsx

@@ -242,7 +242,7 @@ export function VideoPlayerShell(props: VideoPlayerShellProps): JSX.Element {
             {formatTime(currentTime())} / {formatTime(duration())}
           </span>
 
-          <div class="ml-1 flex items-center gap-1">
+          <div class="ms-1 flex items-center gap-1">
             <button type="button" aria-label={muted() ? 'Unmute' : 'Mute'} onClick={toggleMute} class="p-1">
               <Show when={!muted() && volume() > 0} fallback={<VolumeX class="h-4 w-4" />}>
                 <Volume2 class="h-4 w-4" />
@@ -260,7 +260,7 @@ export function VideoPlayerShell(props: VideoPlayerShellProps): JSX.Element {
             />
           </div>
 
-          <div class="ml-auto flex items-center gap-2">
+          <div class="ms-auto flex items-center gap-2">
             <Show when={pipSupported()}>
               <button type="button" aria-label="Picture in picture" onClick={togglePip} class="p-1">
                 <PictureInPicture2 class="h-4 w-4" />

package/src/ui/internal/CalendarCore.tsx

@@ -127,7 +127,7 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
               aria-label="Previous"
               onClick={() => (mode() === 'months' ? stepYear(-1) : setYearBase(yearBase() - YEARS_PER_PAGE))}
             >
-              <ChevronLeft class="h-4 w-4" />
+              <ChevronLeft class="h-4 w-4 rtl:-scale-x-100" />
             </button>
             <button type="button" class={headerLabel} onClick={() => setMode('days')}>
               <Show when={mode() === 'months'} fallback={`${years()[0]} – ${years()[YEARS_PER_PAGE - 1]}`}>
@@ -140,7 +140,7 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
               aria-label="Next"
               onClick={() => (mode() === 'months' ? stepYear(1) : setYearBase(yearBase() + YEARS_PER_PAGE))}
             >
-              <ChevronRight class="h-4 w-4" />
+              <ChevronRight class="h-4 w-4 rtl:-scale-x-100" />
             </button>
           </div>
         }
@@ -148,10 +148,10 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
         <div class="mb-2 flex items-center justify-between gap-1">
           <div class="flex items-center">
             <button type="button" class={navBtn} aria-label="Previous year" onClick={() => stepYear(-1)}>
-              <ChevronsLeft class="h-4 w-4" />
+              <ChevronsLeft class="h-4 w-4 rtl:-scale-x-100" />
             </button>
             <button type="button" class={navBtn} aria-label="Previous month" onClick={() => stepMonth(-1)}>
-              <ChevronLeft class="h-4 w-4" />
+              <ChevronLeft class="h-4 w-4 rtl:-scale-x-100" />
             </button>
           </div>
           <div class="flex items-center gap-0.5">
@@ -164,10 +164,10 @@ export function CalendarCore(props: CalendarCoreProps): JSX.Element {
           </div>
           <div class="flex items-center">
             <button type="button" class={navBtn} aria-label="Next month" onClick={() => stepMonth(1)}>
-              <ChevronRight class="h-4 w-4" />
+              <ChevronRight class="h-4 w-4 rtl:-scale-x-100" />
             </button>
             <button type="button" class={navBtn} aria-label="Next year" onClick={() => stepYear(1)}>
-              <ChevronsRight class="h-4 w-4" />
+              <ChevronsRight class="h-4 w-4 rtl:-scale-x-100" />
             </button>
           </div>
         </div>