@inspirare/design-system 0.0.22 → 0.0.24

package/src/components/ui/toggle.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { Toggle } from "./toggle";
+
+describe('Toggle Accessibility', () => {
+  it('should have no accessibility violations in basic render', async () => {
+    const Wrapper = () => (
+      <Toggle aria-label="Toggle italic">I</Toggle>
+    );
+    const { container } = render(<Wrapper />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/components/ui/toggle.tsx

@@ -1,24 +1,23 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium cursor-pointer hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "group/toggle inline-flex items-center justify-center cursor-pointer gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none cursor-pointer hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input bg-transparent hover:bg-muted",
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
       },
     },
     defaultVariants: {
@@ -26,22 +25,21 @@ const toggleVariants = cva(
       size: "default",
     },
   }
-);
+)
 
 function Toggle({
   className,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
   return (
-    <TogglePrimitive.Root
+    <TogglePrimitive
       data-slot="toggle"
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+
+const meta = {
+  title: 'Design System/Tooltip',
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-4 w-full h-full flex items-center justify-center">
+      <TooltipProvider><Tooltip><TooltipTrigger className="px-4 py-2 border rounded">Hover</TooltipTrigger><TooltipContent><p>Add to library</p></TooltipContent></Tooltip></TooltipProvider>
+    </div>
+  )
+};

package/src/components/ui/tooltip.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+
+describe('Tooltip Accessibility', () => {
+  it('should have no accessibility violations in basic render', async () => {
+    const Wrapper = () => (
+      <TooltipProvider><Tooltip><TooltipTrigger className="px-4 py-2 border rounded">Hover</TooltipTrigger><TooltipContent><p>Add to library</p></TooltipContent></Tooltip></TooltipProvider>
+    );
+    const { container } = render(<Wrapper />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/components/ui/tooltip.tsx

@@ -1,68 +1,77 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
 
 function TooltipProvider({
-  delayDuration = 0,
+  delay = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: TooltipPrimitive.Provider.Props) {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
-      delayDuration={delayDuration}
+      delay={delay}
       {...props}
     />
-  );
+  )
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
 }
 
-function TooltipTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return (
-    <TooltipPrimitive.Trigger
-      data-slot="tooltip-trigger"
-      className={cn("cursor-pointer", className)}
-      {...props}
-    />
-  );
-}
+const TooltipTrigger = React.forwardRef<
+  React.ElementRef<"button">,
+  TooltipPrimitive.Trigger.Props
+>(({ ...props }, ref) => {
+  return <TooltipPrimitive.Trigger ref={ref} data-slot="tooltip-trigger" {...props} />
+})
+TooltipTrigger.displayName = "TooltipTrigger"
 
-function TooltipContent({
+const TooltipContent = React.forwardRef<
+  React.ElementRef<"div">,
+  TooltipPrimitive.Popup.Props &
+    Pick<
+      TooltipPrimitive.Positioner.Props,
+      "align" | "alignOffset" | "side" | "sideOffset"
+    >
+>(({
   className,
-  sideOffset = 0,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}, ref) => {
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className
-        )}
-        {...props}
+        className="isolate z-50"
       >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
+        <TooltipPrimitive.Popup
+          ref={ref}
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
-  );
-}
+  )
+})
+TooltipContent.displayName = "TooltipContent"
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/demo/AIDemo.tsx

@@ -0,0 +1,50 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../components/ui/card";
+import { Message } from "../components/ui/message";
+import { Bubble } from "../components/ui/bubble";
+import { Button } from "../components/ui/button";
+
+export function AIDemo() {
+  return (
+    <div className="flex flex-col gap-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Componentes de Chat (IA)</CardTitle>
+          <CardDescription>
+            Componentes construídos com React Aria para interfaces de conversação, chatbots e assistentes.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-6 rounded-lg border bg-muted/20 p-6">
+            <Message role="user">
+              <Bubble>
+                <div className="text-sm">
+                  Olá! Como você pode me ajudar a melhorar a escrita da minha história de fantasia?
+                </div>
+              </Bubble>
+            </Message>
+
+            <Message role="assistant">
+              <Bubble>
+                <div className="text-sm">
+                  Olá, jovem autor! Sou a Escrivania. Eu posso ajudar revisando a jornada do seu herói, melhorando as descrições dos seus personagens ou sugerindo ideias de construção de mundo (worldbuilding) para o seu universo de fantasia. O que você gostaria de explorar primeiro?
+                </div>
+              </Bubble>
+            </Message>
+
+            <Message role="user">
+              <Bubble>
+                <div className="text-sm">
+                  Preciso de ideias para o sistema de magia.
+                </div>
+              </Bubble>
+            </Message>
+            
+            <div className="flex justify-end mt-4">
+              <Button variant="outline" size="sm">Regerar Resposta</Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/demo/ButtonsDemo.tsx

@@ -1,13 +1,14 @@
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
-import { Toggle } from "../components/ui/toggle";
-import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
+import { Toggle } from "@/components/ui/toggle";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
 import { Bold, Italic, Underline } from "lucide-react";
 
 export function ButtonsDemo() {
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader>
           <CardTitle>Variantes de Botões</CardTitle>
@@ -54,25 +55,47 @@ export function ButtonsDemo() {
           <CardTitle>Toggles</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-wrap gap-8 items-center">
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <p className="text-sm text-muted-foreground">Toggle Simples</p>
-            <Toggle aria-label="Ativar negrito">
-              <Bold className="h-4 w-4" />
-            </Toggle>
+            <Tooltip>
+              <TooltipTrigger render={
+                <Toggle aria-label="Ativar negrito">
+                  <Bold className="h-4 w-4" />
+                </Toggle>
+              } />
+              <TooltipContent>Negrito</TooltipContent>
+            </Tooltip>
           </div>
 
-          <div className="space-y-2">
+          <div className="flex flex-col gap-2">
             <p className="text-sm text-muted-foreground">Toggle Group (Múltiplo)</p>
-            <ToggleGroup type="multiple">
-              <ToggleGroupItem value="bold" aria-label="Toggle bold">
-                <Bold className="h-4 w-4" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="italic" aria-label="Toggle italic">
-                <Italic className="h-4 w-4" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="underline" aria-label="Toggle underline">
-                <Underline className="h-4 w-4" />
-              </ToggleGroupItem>
+            <ToggleGroup>
+              <Tooltip>
+                <TooltipTrigger render={
+                  <ToggleGroupItem value="bold" aria-label="Toggle bold">
+                    <Bold className="h-4 w-4" />
+                  </ToggleGroupItem>
+                } />
+                <TooltipContent>Negrito</TooltipContent>
+              </Tooltip>
+              
+              <Tooltip>
+                <TooltipTrigger render={
+                  <ToggleGroupItem value="italic" aria-label="Toggle italic">
+                    <Italic className="h-4 w-4" />
+                  </ToggleGroupItem>
+                } />
+                <TooltipContent>Itálico</TooltipContent>
+              </Tooltip>
+              
+              <Tooltip>
+                <TooltipTrigger render={
+                  <ToggleGroupItem value="underline" aria-label="Toggle underline">
+                    <Underline className="h-4 w-4" />
+                  </ToggleGroupItem>
+                } />
+                <TooltipContent>Sublinhado</TooltipContent>
+              </Tooltip>
             </ToggleGroup>
           </div>
         </CardContent>

package/src/demo/CalendarDemo.tsx

@@ -6,7 +6,7 @@ export function CalendarDemo() {
   const [date, setDate] = useState<Date | undefined>(new Date());
 
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader>
           <CardTitle>Calendário</CardTitle>

package/src/demo/FeedbackDemo.tsx

@@ -22,7 +22,7 @@ export function FeedbackDemo() {
   }, []);
 
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader>
           <CardTitle>Progresso (Progress)</CardTitle>
@@ -37,9 +37,9 @@ export function FeedbackDemo() {
           <CardTitle>Esqueleto (Skeleton)</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center gap-4">
             <Skeleton className="h-12 w-12 rounded-full" />
-            <div className="space-y-2">
+            <div className="flex flex-col gap-2">
               <Skeleton className="h-4 w-[250px]" />
               <Skeleton className="h-4 w-[200px]" />
             </div>
@@ -69,9 +69,7 @@ export function FeedbackDemo() {
         <CardContent>
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="outline">Passe o mouse</Button>
-              </TooltipTrigger>
+              <TooltipTrigger render={<Button variant="outline" />}>Passe o mouse</TooltipTrigger>
               <TooltipContent>
                 <p>Adicione à biblioteca</p>
               </TooltipContent>

package/src/demo/FormsDemo.tsx

@@ -1,4 +1,5 @@
-import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../components/ui/card";
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "../components/ui/input-otp";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import { Textarea } from "../components/ui/textarea";
@@ -11,12 +12,12 @@ import { ColorPicker } from "../components/ui/color-picker";
 
 export function FormsDemo() {
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader>
           <CardTitle>Campos de Texto e Selects</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-6">
+        <CardContent className="flex flex-col gap-6">
           <div className="grid w-full max-w-sm items-center gap-1.5">
             <Label htmlFor="email">E-mail</Label>
             <Input type="email" id="email" placeholder="nome@exemplo.com" />
@@ -48,31 +49,31 @@ export function FormsDemo() {
         <CardHeader>
           <CardTitle>Checkboxes, Radios e Switches</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-8">
-          <div className="flex items-center space-x-2">
+        <CardContent className="flex flex-col gap-8">
+          <div className="flex items-center gap-2">
             <Checkbox id="terms" />
             <Label htmlFor="terms">Aceitar termos e condições</Label>
           </div>
 
-          <div className="space-y-3">
+          <div className="flex flex-col gap-3">
             <Label>Notificações</Label>
             <RadioGroup defaultValue="all">
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-2">
                 <RadioGroupItem value="all" id="r1" />
                 <Label htmlFor="r1">Todas as notificações</Label>
               </div>
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-2">
                 <RadioGroupItem value="mentions" id="r2" />
                 <Label htmlFor="r2">Apenas menções</Label>
               </div>
-              <div className="flex items-center space-x-2">
+              <div className="flex items-center gap-2">
                 <RadioGroupItem value="none" id="r3" />
                 <Label htmlFor="r3">Nenhuma</Label>
               </div>
             </RadioGroup>
           </div>
 
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center gap-2">
             <Switch id="airplane-mode" />
             <Label htmlFor="airplane-mode">Modo Avião</Label>
           </div>
@@ -83,7 +84,7 @@ export function FormsDemo() {
         <CardHeader>
           <CardTitle>Seletores Especiais</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-8">
+        <CardContent className="flex flex-col gap-8">
           <div className="grid w-full max-w-sm items-center gap-3">
             <Label>Slider (Deslizante)</Label>
             <Slider defaultValue={[50]} max={100} step={1} />
@@ -95,6 +96,28 @@ export function FormsDemo() {
           </div>
         </CardContent>
       </Card>
+    
+      <Card>
+        <CardHeader>
+          <CardTitle>One-Time Password (OTP)</CardTitle>
+          <CardDescription>Para códigos de verificação.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <InputOTP maxLength={6}>
+            <InputOTPGroup>
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+            </InputOTPGroup>
+          </InputOTP>
+        </CardContent>
+      </Card>
     </div>
   );
 }

package/src/demo/NavigationDemo.tsx

@@ -1,5 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "../components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../components/ui/carousel";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/ui/collapsible";
 import { ScrollArea } from "../components/ui/scroll-area";
@@ -12,14 +13,14 @@ export function NavigationDemo() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className="space-y-8">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader>
           <CardTitle>Abas (Tabs)</CardTitle>
         </CardHeader>
         <CardContent>
           <Tabs defaultValue="account" className="w-[400px]">
-            <TabsList className="grid w-full grid-cols-2">
+            <TabsList className="flex w-full">
               <TabsTrigger value="account">Conta</TabsTrigger>
               <TabsTrigger value="password">Senha</TabsTrigger>
             </TabsList>
@@ -38,7 +39,7 @@ export function NavigationDemo() {
           <CardTitle>Acordeão (Accordion)</CardTitle>
         </CardHeader>
         <CardContent>
-          <Accordion type="single" collapsible className="w-full">
+          <Accordion className="w-full">
             <AccordionItem value="item-1">
               <AccordionTrigger>É acessível?</AccordionTrigger>
               <AccordionContent>
@@ -63,28 +64,26 @@ export function NavigationDemo() {
           <Collapsible
             open={isOpen}
             onOpenChange={setIsOpen}
-            className="w-[350px] space-y-2"
+            className="w-[350px] flex flex-col gap-2"
           >
-            <div className="flex items-center justify-between space-x-4 px-4">
+            <div className="flex items-center justify-between gap-4 px-4">
               <h4 className="text-sm font-semibold">
                 @peduarte favoritou 3 repositórios
               </h4>
-              <CollapsibleTrigger asChild>
-                <Button variant="ghost" size="sm" className="w-9 p-0">
+              <CollapsibleTrigger render={<Button variant="ghost" size="sm" className="w-9 p-0" />}>
                   <ChevronsUpDown className="h-4 w-4" />
                   <span className="sr-only">Alternar</span>
-                </Button>
-              </CollapsibleTrigger>
+                </CollapsibleTrigger>
             </div>
             <div className="rounded-md border px-4 py-3 font-mono text-sm">
-              @radix-ui/primitives
+              @base-ui/react
             </div>
-            <CollapsibleContent className="space-y-2">
+            <CollapsibleContent className="flex flex-col gap-2">
               <div className="rounded-md border px-4 py-3 font-mono text-sm">
-                @radix-ui/colors
+                tailwindcss/v4
               </div>
               <div className="rounded-md border px-4 py-3 font-mono text-sm">
-                @stitches/react
+                framer-motion
               </div>
             </CollapsibleContent>
           </Collapsible>
@@ -136,6 +135,32 @@ export function NavigationDemo() {
           </CardContent>
         </Card>
       </div>
+    
+      <Card>
+        <CardHeader>
+          <CardTitle>Carousel</CardTitle>
+          <CardDescription>Carrossel de conteúdo.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex justify-center">
+          <Carousel className="w-full max-w-xs">
+            <CarouselContent>
+              {Array.from({ length: 5 }).map((_, index) => (
+                <CarouselItem key={index}>
+                  <div className="p-1">
+                    <Card>
+                      <CardContent className="flex aspect-square items-center justify-center p-6">
+                        <span className="text-4xl font-semibold">{index + 1}</span>
+                      </CardContent>
+                    </Card>
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
+        </CardContent>
+      </Card>
     </div>
   );
 }