Left to right and right to left

// apps/docs/examples/ui/direction.tsx'use client';
import {useState} from 'react';
import {DirectionProvider} from '@workspace/active-ui/components/primitives/direction';import {Slider} from '@workspace/active-ui/components/primitives/slider';import {  Tabs,  TabsList,  TabsTrigger,} from '@workspace/active-ui/components/primitives/tabs';
/** * The same tabs and slider left to right and right to left. The `dir` * attribute turns the layout around; `DirectionProvider` tells the * components, so the arrow keys follow the reading direction. */export default function DirectionExample() {  const [direction, setDirection] = useState<'ltr' | 'rtl'>('rtl');  return (    <div className="flex w-full max-w-sm flex-col gap-4">      <Tabs        value={direction}        onValueChange={(value) => setDirection(value as 'ltr' | 'rtl')}      >        <TabsList aria-label="Reading direction">          <TabsTrigger value="ltr">Left to right</TabsTrigger>          <TabsTrigger value="rtl">Right to left</TabsTrigger>        </TabsList>      </Tabs>      <DirectionProvider direction={direction}>        <div          dir={direction}          className="flex flex-col gap-4 rounded-lg border p-4"        >          <Tabs defaultValue="one">            <TabsList aria-label="Steps">              <TabsTrigger value="one">One</TabsTrigger>              <TabsTrigger value="two">Two</TabsTrigger>              <TabsTrigger value="three">Three</TabsTrigger>            </TabsList>          </Tabs>          <Slider defaultValue={30} aria-label="Share" />        </div>      </DirectionProvider>    </div>  );}