finalizada sección de Referencias para la IA

src/components/asignaturas/wizard/PasoBasicosForm.tsx

@@ -1,7 +1,7 @@
 import type {
   NewSubjectWizardState,
   TipoAsignatura,
-} from '@/features/asignaturas/new/types'
+} from '@/features/asignaturas/nueva/types'
 
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -15,7 +15,7 @@ import {
 import {
   ESTRUCTURAS_SEP,
   TIPOS_MATERIA,
-} from '@/features/asignaturas/new/catalogs'
+} from '@/features/asignaturas/nueva/catalogs'
 
 export function PasoBasicosForm({
   wizard,

src/components/asignaturas/wizard/PasoConfiguracionPanel.tsx

@@ -1,6 +1,6 @@
 import * as Icons from 'lucide-react'
 
-import type { NewSubjectWizardState } from '@/features/asignaturas/new/types'
+import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -25,7 +25,7 @@ import {
   FACULTADES,
   MATERIAS_MOCK,
   PLANES_MOCK,
-} from '@/features/asignaturas/new/catalogs'
+} from '@/features/asignaturas/nueva/catalogs'
 
 export function PasoConfiguracionPanel({
   wizard,

src/components/asignaturas/wizard/PasoMetodoCardGroup.tsx

@@ -4,7 +4,7 @@ import type {
   ModoCreacion,
   NewSubjectWizardState,
   SubModoClonado,
-} from '@/features/asignaturas/new/types'
+} from '@/features/asignaturas/nueva/types'
 
 import {
   Card,

src/components/asignaturas/wizard/PasoResumenCard.tsx

@@ -1,6 +1,6 @@
 import * as Icons from 'lucide-react'
 
-import type { NewSubjectWizardState } from '@/features/asignaturas/new/types'
+import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
 
 import {
   Card,
@@ -9,7 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
-import { ESTRUCTURAS_SEP } from '@/features/asignaturas/new/catalogs'
+import { ESTRUCTURAS_SEP } from '@/features/asignaturas/nueva/catalogs'
 
 export function PasoResumenCard({ wizard }: { wizard: NewSubjectWizardState }) {
   return (

src/components/asignaturas/wizard/WizardControls.tsx

@@ -1,4 +1,4 @@
-import type { NewSubjectWizardState } from '@/features/asignaturas/new/types'
+import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
 
 import { Button } from '@/components/ui/button'
 

src/components/planes/wizard/PasoBasicosForm.tsx

@@ -1,5 +1,5 @@
-import type { CARRERAS } from '@/features/planes/new/catalogs'
-import type { NewPlanWizardState } from '@/features/planes/new/types'
+import type { CARRERAS } from '@/features/planes/nuevo/catalogs'
+import type { NewPlanWizardState } from '@/features/planes/nuevo/types'
 
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -14,7 +14,7 @@ import {
   FACULTADES,
   NIVELES,
   TIPOS_CICLO,
-} from '@/features/planes/new/catalogs'
+} from '@/features/planes/nuevo/catalogs'
 
 export function PasoBasicosForm({
   wizard,
@@ -146,7 +146,7 @@ export function PasoBasicosForm({
             id="tipoCiclo"
             className="w-full min-w-0 [&>span]:block! [&>span]:truncate!"
           >
-            <SelectValue />
+            <SelectValue placeholder="Selecciona tipo de ciclo…" />
           </SelectTrigger>
           <SelectContent>
             {TIPOS_CICLO.map((t) => (
@@ -174,6 +174,7 @@ export function PasoBasicosForm({
               },
             }))
           }
+          placeholder="1"
         />
       </div>
     </div>

src/components/planes/wizard/PasoDetallesPanel.tsx

@@ -1,4 +1,6 @@
-import type { NewPlanWizardState } from '@/features/planes/new/types'
+import ReferenciasParaIA from './PasoDetallesPanel/ReferenciasParaIA'
+
+import type { NewPlanWizardState } from '@/features/planes/nuevo/types'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -14,7 +16,7 @@ import {
   CARRERAS,
   FACULTADES,
   PLANES_EXISTENTES,
-} from '@/features/planes/new/catalogs'
+} from '@/features/planes/nuevo/catalogs'
 
 export function PasoDetallesPanel({
   wizard,
@@ -42,8 +44,8 @@ export function PasoDetallesPanel({
 
   if (wizard.modoCreacion === 'IA') {
     return (
-      <div className="grid gap-4">
-        <div>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1">
           <Label htmlFor="desc">Descripción del enfoque</Label>
           <textarea
             id="desc"
@@ -61,24 +63,8 @@ export function PasoDetallesPanel({
             }
           />
         </div>
-        <div>
-          <Label htmlFor="poblacion">Población objetivo</Label>
-          <Input
-            id="poblacion"
-            placeholder="Ej. Egresados de bachillerato con perfil STEM"
-            value={wizard.iaConfig?.poblacionObjetivo || ''}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              onChange((w) => ({
-                ...w,
-                iaConfig: {
-                  ...(w.iaConfig || ({} as any)),
-                  poblacionObjetivo: e.target.value,
-                },
-              }))
-            }
-          />
-        </div>
-        <div>
+
+        <div className="flex flex-col gap-1">
           <Label htmlFor="notas">Notas adicionales</Label>
           <textarea
             id="notas"
@@ -96,6 +82,7 @@ export function PasoDetallesPanel({
             }
           />
         </div>
+        <ReferenciasParaIA />
         <div className="flex items-center justify-between">
           <div className="text-muted-foreground text-sm">
             Opcional: se pueden adjuntar recursos IA más adelante.

src/components/planes/wizard/PasoDetallesPanel/FileDropZone.tsx

@@ -0,0 +1,186 @@
+import { Upload, File, X, FileText } from 'lucide-react'
+import { useState, useCallback } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface UploadedFile {
+  id: string
+  name: string
+  size: string
+  type: string
+}
+
+interface FileDropzoneProps {
+  onFilesChange?: (files: Array<UploadedFile>) => void
+  acceptedTypes?: string
+  maxFiles?: number
+  title?: string
+  description?: string
+}
+
+export function FileDropzone({
+  // onFilesChange,
+  acceptedTypes = '.doc,.docx,.pdf',
+  maxFiles = 5,
+  title = 'Arrastra archivos aquí',
+  description = 'o haz clic para seleccionar',
+}: FileDropzoneProps) {
+  const [isDragging, setIsDragging] = useState(false)
+  const [files, setFiles] = useState<Array<UploadedFile>>([])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragging(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+
+      const droppedFiles = Array.from(e.dataTransfer.files)
+      addFiles(droppedFiles)
+    },
+    [files],
+  )
+
+  const handleFileInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        const selectedFiles = Array.from(e.target.files)
+        addFiles(selectedFiles)
+      }
+    },
+    [files],
+  )
+
+  const addFiles = (newFiles: Array<File>) => {
+    const uploadedFiles: Array<UploadedFile> = newFiles
+      .slice(0, maxFiles - files.length)
+      .map((file) => ({
+        id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        name: file.name,
+        size: formatFileSize(file.size),
+        type: file.name.split('.').pop() || 'file',
+      }))
+
+    const updatedFiles = [...files, ...uploadedFiles].slice(0, maxFiles)
+    setFiles(updatedFiles)
+    // onFilesChange(updatedFiles)
+  }
+
+  const removeFile = (fileId: string) => {
+    const updatedFiles = files.filter((f) => f.id !== fileId)
+    setFiles(updatedFiles)
+    // onFilesChange(updatedFiles)
+  }
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) return bytes + ' B'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+  }
+
+  const getFileIcon = (type: string) => {
+    switch (type.toLowerCase()) {
+      case 'pdf':
+        return <FileText className="text-destructive h-4 w-4" />
+      case 'doc':
+      case 'docx':
+        return <FileText className="text-info h-4 w-4" />
+      default:
+        return <File className="text-muted-foreground h-4 w-4" />
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={cn(
+          'border-border hover:border-primary/50 cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-all duration-300',
+          isDragging && 'active',
+        )}
+        style={{ background: 'var(--gradient-subtle)' }}
+      >
+        <input
+          type="file"
+          accept={acceptedTypes}
+          multiple
+          onChange={handleFileInput}
+          className="hidden"
+          id="file-upload"
+        />
+        <label htmlFor="file-upload" className="cursor-pointer">
+          <div className="flex flex-col items-center gap-3">
+            <div
+              className={cn(
+                'flex h-12 w-12 items-center justify-center rounded-xl transition-colors',
+                isDragging
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-accent text-accent-foreground',
+              )}
+            >
+              <Upload className="h-6 w-6" />
+            </div>
+            <div className="text-center">
+              <p className="text-foreground text-sm font-medium">{title}</p>
+              <p className="text-muted-foreground mt-1 text-xs">
+                {description}
+              </p>
+              <p className="text-muted-foreground mt-1 text-xs">
+                Formatos:{' '}
+                {acceptedTypes
+                  .replace(/\./g, '')
+                  .toUpperCase()
+                  .replace(/,/g, ', ')}
+              </p>
+            </div>
+          </div>
+        </label>
+      </div>
+
+      {/* Uploaded files list */}
+      {files.length > 0 && (
+        <div className="space-y-2">
+          {files.map((file) => (
+            <div
+              key={file.id}
+              className="bg-accent/50 border-border fade-in flex items-center gap-3 rounded-lg border p-3"
+            >
+              {getFileIcon(file.type)}
+              <div className="min-w-0 flex-1">
+                <p className="text-foreground truncate text-sm font-medium">
+                  {file.name}
+                </p>
+                <p className="text-muted-foreground text-xs">{file.size}</p>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-muted-foreground hover:text-destructive h-8 w-8"
+                onClick={() => removeFile(file.id)}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {files.length >= maxFiles && (
+        <p className="text-warning text-center text-xs">
+          Máximo de {maxFiles} archivos alcanzado
+        </p>
+      )}
+    </div>
+  )
+}

src/components/planes/wizard/PasoDetallesPanel/ReferenciasParaIA.tsx

@@ -0,0 +1,138 @@
+import { FileText, FolderOpen, Upload } from 'lucide-react'
+
+import { FileDropzone } from './FileDropZone'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TabsContents,
+} from '@/components/ui/motion-tabs'
+import { ARCHIVOS, REPOSITORIOS } from '@/features/planes/nuevo/catalogs'
+
+const tabs = [
+  {
+    name: 'Archivos existentes',
+
+    value: 'archivos-existentes',
+
+    icon: FileText,
+
+    content: (
+      <div className="flex flex-col gap-0.5">
+        {ARCHIVOS.map((archivo) => (
+          <Label
+            key={archivo.id}
+            className="border-border hover:border-primary/30 hover:bg-accent/50 m-0.5 flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
+          >
+            <Checkbox className="peer border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring h-5 w-5 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50" />
+
+            <FileText className="text-muted-foreground h-4 w-4" />
+
+            <div className="min-w-0 flex-1">
+              <p className="text-foreground truncate text-sm font-medium">
+                {archivo.nombre}
+              </p>
+
+              <p className="text-muted-foreground text-xs">{archivo.tamaño}</p>
+            </div>
+          </Label>
+        ))}
+      </div>
+    ),
+  },
+
+  {
+    name: 'Repositorios',
+
+    value: 'repositorios',
+
+    icon: FolderOpen,
+
+    content: (
+      <div className="flex flex-col gap-0.5">
+        {REPOSITORIOS.map((repositorio) => (
+          <Label
+            key={repositorio.id}
+            className="border-border hover:border-primary/30 hover:bg-accent/50 m-0.5 flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
+          >
+            <Checkbox className="peer border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring h-5 w-5 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50" />
+
+            <FolderOpen className="text-muted-foreground h-4 w-4" />
+            <div className="min-w-0 flex-1">
+              <p className="text-foreground text-sm font-medium">
+                {repositorio.nombre}
+              </p>
+
+              <p className="text-muted-foreground text-xs">
+                {repositorio.descripcion} · {repositorio.cantidadArchivos}{' '}
+                archivos
+              </p>
+            </div>
+          </Label>
+        ))}
+      </div>
+    ),
+  },
+
+  {
+    name: 'Subir archivos',
+
+    value: 'subir-archivos',
+
+    icon: Upload,
+
+    content: (
+      <div>
+        <FileDropzone
+          // onFilesChange={(files) =>
+          //   handleChange("archivosAdhocIds", files.map((f) => f.id))
+          // }
+          title="Sube archivos de referencia"
+          description="Documentos que serán usados como contexto para la generación"
+        />
+      </div>
+    ),
+  },
+]
+
+const ReferenciasParaIA = () => {
+  return (
+    <div className="flex w-full flex-col gap-1">
+      <Label>Referencias para la IA</Label>
+
+      <Tabs defaultValue="archivos-existentes" className="gap-4">
+        <TabsList className="w-full">
+          {tabs.map(({ icon: Icon, name, value }) => (
+            <TabsTrigger
+              key={value}
+              value={value}
+              className="flex items-center gap-1 px-2.5 sm:px-3"
+            >
+              <Icon />
+
+              <span className="hidden sm:inline">{name}</span>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContents className="bg-background mx-1 -mt-2 mb-1 h-full rounded-sm">
+          {tabs.map((tab) => (
+            <TabsContent
+              key={tab.value}
+              value={tab.value}
+              className="animate-in fade-in duration-300 ease-out"
+            >
+              {tab.content}
+            </TabsContent>
+          ))}
+        </TabsContents>
+      </Tabs>
+    </div>
+  )
+}
+
+export default ReferenciasParaIA

src/components/planes/wizard/PasoModoCardGroup.tsx

@@ -4,7 +4,7 @@ import type {
   NewPlanWizardState,
   ModoCreacion,
   SubModoClonado,
-} from '@/features/planes/new/types'
+} from '@/features/planes/nuevo/types'
 
 import {
   Card,
@@ -23,6 +23,19 @@ export function PasoModoCardGroup({
 }) {
   const isSelected = (m: ModoCreacion) => wizard.modoCreacion === m
   const isSubSelected = (s: SubModoClonado) => wizard.subModoClonado === s
+  const handleKeyActivate = (e: React.KeyboardEvent, cb: () => void) => {
+    const key = e.key
+    if (
+      key === 'Enter' ||
+      key === ' ' ||
+      key === 'Spacebar' ||
+      key === 'Space'
+    ) {
+      e.preventDefault()
+      e.stopPropagation()
+      cb()
+    }
+  }
   return (
     <div className="grid gap-4 sm:grid-cols-3">
       <Card
@@ -34,6 +47,15 @@ export function PasoModoCardGroup({
             subModoClonado: undefined,
           }))
         }
+        onKeyDown={(e: React.KeyboardEvent) =>
+          handleKeyActivate(e, () =>
+            onChange((w) => ({
+              ...w,
+              modoCreacion: 'MANUAL',
+              subModoClonado: undefined,
+            })),
+          )
+        }
         role="button"
         tabIndex={0}
       >
@@ -54,6 +76,15 @@ export function PasoModoCardGroup({
             subModoClonado: undefined,
           }))
         }
+        onKeyDown={(e: React.KeyboardEvent) =>
+          handleKeyActivate(e, () =>
+            onChange((w) => ({
+              ...w,
+              modoCreacion: 'IA',
+              subModoClonado: undefined,
+            })),
+          )
+        }
         role="button"
         tabIndex={0}
       >
@@ -70,6 +101,11 @@ export function PasoModoCardGroup({
       <Card
         className={isSelected('CLONADO') ? 'ring-ring ring-2' : ''}
         onClick={() => onChange((w) => ({ ...w, modoCreacion: 'CLONADO' }))}
+        onKeyDown={(e: React.KeyboardEvent) =>
+          handleKeyActivate(e, () =>
+            onChange((w) => ({ ...w, modoCreacion: 'CLONADO' })),
+          )
+        }
         role="button"
         tabIndex={0}
       >
@@ -88,6 +124,11 @@ export function PasoModoCardGroup({
                 e.stopPropagation()
                 onChange((w) => ({ ...w, subModoClonado: 'INTERNO' }))
               }}
+              onKeyDown={(e: React.KeyboardEvent) =>
+                handleKeyActivate(e, () =>
+                  onChange((w) => ({ ...w, subModoClonado: 'INTERNO' })),
+                )
+              }
               className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg border p-4 text-center transition-all sm:flex-col ${
                 isSubSelected('INTERNO')
                   ? 'border-primary bg-primary/5 ring-primary text-primary ring-1'
@@ -105,6 +146,11 @@ export function PasoModoCardGroup({
                 e.stopPropagation()
                 onChange((w) => ({ ...w, subModoClonado: 'TRADICIONAL' }))
               }}
+              onKeyDown={(e: React.KeyboardEvent) =>
+                handleKeyActivate(e, () =>
+                  onChange((w) => ({ ...w, subModoClonado: 'TRADICIONAL' })),
+                )
+              }
               className={`hover:border-primary/50 hover:bg-accent flex cursor-pointer flex-row items-center justify-center gap-2 rounded-lg border p-4 text-center transition-all sm:flex-col ${
                 isSubSelected('TRADICIONAL')
                   ? 'border-primary bg-primary/5 ring-primary text-primary ring-1'

src/components/planes/wizard/PasoResumenCard.tsx

@@ -1,4 +1,4 @@
-import type { NewPlanWizardState } from '@/features/planes/new/types'
+import type { NewPlanWizardState } from '@/features/planes/nuevo/types'
 
 import {
   Card,

src/components/shadcn-studio/checkbox/checkbox-13.tsx

@@ -7,7 +7,7 @@ const CheckboxCardDemo = () => {
       <Label className="border-border hover:border-primary/30 hover:bg-accent/50 flex cursor-pointer items-center items-start gap-2 gap-3 rounded-lg border p-3 transition-colors has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
         <Checkbox
           defaultChecked
-          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+          className="peer border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring h-5 w-5 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         />
         <div className="grid gap-1.5 font-normal">
           <p className="text-sm leading-none font-medium">Auto Start</p>
@@ -17,7 +17,7 @@ const CheckboxCardDemo = () => {
         </div>
       </Label>
       <Label className="hover:bg-accent/50 flex items-start gap-2 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
-        <Checkbox className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700" />
+        <Checkbox className="peer border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring h-5 w-5 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50" />
         <div className="grid gap-1.5 font-normal">
           <p className="text-sm leading-none font-medium">Auto update</p>
           <p className="text-muted-foreground text-sm">

src/components/shadcn-studio/tabs/tabs-27.tsx

@@ -0,0 +1,72 @@
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from '@/components/ui/motion-tabs'
+
+const tabs = [
+  {
+    name: 'Explore',
+    value: 'explore',
+    content: (
+      <>
+        Discover <span className='text-foreground font-semibold'>fresh ideas</span>, trending topics, and hidden gems
+        curated just for you. Start exploring and let your curiosity lead the way!
+      </>
+    )
+  },
+  {
+    name: 'Favorites',
+    value: 'favorites',
+    content: (
+      <>
+        All your <span className='text-foreground font-semibold'>favorites</span> are saved here. Revisit articles,
+        collections, and moments you love, any time you want a little inspiration.
+      </>
+    )
+  },
+  {
+    name: 'Surprise Me',
+    value: 'surprise',
+    content: (
+      <>
+        <span className='text-foreground font-semibold'>Surprise!</span> Here&apos;s something unexpected—a fun fact, a
+        quirky tip, or a daily challenge. Come back for a new surprise every day!
+      </>
+    )
+  }
+]
+
+const AnimatedTabsDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList>
+          {tabs.map(tab => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContents className='bg-background mx-1 -mt-2 mb-1 h-full rounded-sm'>
+          {tabs.map(tab => (
+            <TabsContent key={tab.value} value={tab.value}>
+              <p className='text-muted-foreground text-sm'>{tab.content}</p>
+            </TabsContent>
+          ))}
+        </TabsContents>
+      </Tabs>
+
+      <p className='text-muted-foreground mt-4 text-center text-xs'>
+        Inspired by{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://animate-ui.com/docs/components/tabs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Animate UI
+        </a>
+      </p>
+    </div>
+  )
+}
+
+export default AnimatedTabsDemo

src/components/ui/motion-highlight.tsx

@@ -0,0 +1,549 @@
+import * as React from 'react'
+
+import type { Transition } from 'motion/react'
+import { AnimatePresence, motion } from 'motion/react'
+
+import { cn } from '@/lib/utils'
+
+type MotionHighlightMode = 'children' | 'parent'
+
+type Bounds = {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+type MotionHighlightContextType<T extends string> = {
+  mode: MotionHighlightMode
+  activeValue: T | null
+  setActiveValue: (value: T | null) => void
+  setBounds: (bounds: DOMRect) => void
+  clearBounds: () => void
+  id: string
+  hover: boolean
+  className?: string
+  activeClassName?: string
+  setActiveClassName: (className: string) => void
+  transition?: Transition
+  disabled?: boolean
+  enabled?: boolean
+  exitDelay?: number
+  forceUpdateBounds?: boolean
+}
+
+const MotionHighlightContext = React.createContext<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MotionHighlightContextType<any> | undefined
+>(undefined)
+
+function useMotionHighlight<T extends string>(): MotionHighlightContextType<T> {
+  const context = React.useContext(MotionHighlightContext)
+
+  if (!context) {
+    throw new Error('useMotionHighlight must be used within a MotionHighlightProvider')
+  }
+
+  return context as unknown as MotionHighlightContextType<T>
+}
+
+type BaseMotionHighlightProps<T extends string> = {
+  mode?: MotionHighlightMode
+  value?: T | null
+  defaultValue?: T | null
+  onValueChange?: (value: T | null) => void
+  className?: string
+  transition?: Transition
+  hover?: boolean
+  disabled?: boolean
+  enabled?: boolean
+  exitDelay?: number
+}
+
+type ParentModeMotionHighlightProps = {
+  boundsOffset?: Partial<Bounds>
+  containerClassName?: string
+  forceUpdateBounds?: boolean
+}
+
+type ControlledParentModeMotionHighlightProps<T extends string> = BaseMotionHighlightProps<T> &
+  ParentModeMotionHighlightProps & {
+    mode: 'parent'
+    controlledItems: true
+    children: React.ReactNode
+  }
+
+type ControlledChildrenModeMotionHighlightProps<T extends string> = BaseMotionHighlightProps<T> & {
+  mode?: 'children' | undefined
+  controlledItems: true
+  children: React.ReactNode
+}
+
+type UncontrolledParentModeMotionHighlightProps<T extends string> = BaseMotionHighlightProps<T> &
+  ParentModeMotionHighlightProps & {
+    mode: 'parent'
+    controlledItems?: false
+    itemsClassName?: string
+    children: React.ReactElement | React.ReactElement[]
+  }
+
+type UncontrolledChildrenModeMotionHighlightProps<T extends string> = BaseMotionHighlightProps<T> & {
+  mode?: 'children'
+  controlledItems?: false
+  itemsClassName?: string
+  children: React.ReactElement | React.ReactElement[]
+}
+
+type MotionHighlightProps<T extends string> = React.ComponentProps<'div'> &
+  (
+    | ControlledParentModeMotionHighlightProps<T>
+    | ControlledChildrenModeMotionHighlightProps<T>
+    | UncontrolledParentModeMotionHighlightProps<T>
+    | UncontrolledChildrenModeMotionHighlightProps<T>
+  )
+
+function MotionHighlight<T extends string>({ ref, ...props }: MotionHighlightProps<T>) {
+  const {
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    transition = { type: 'spring', stiffness: 350, damping: 35 },
+    hover = false,
+    enabled = true,
+    controlledItems,
+    disabled = false,
+    exitDelay = 0.2,
+    mode = 'children'
+  } = props
+
+  const localRef = React.useRef<HTMLDivElement>(null)
+
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement)
+
+  const [activeValue, setActiveValue] = React.useState<T | null>(value ?? defaultValue ?? null)
+  const [boundsState, setBoundsState] = React.useState<Bounds | null>(null)
+  const [activeClassNameState, setActiveClassNameState] = React.useState<string>('')
+
+  const safeSetActiveValue = React.useCallback(
+    (id: T | null) => {
+      setActiveValue(prev => (prev === id ? prev : id))
+      if (id !== activeValue) onValueChange?.(id as T)
+    },
+    [activeValue, onValueChange]
+  )
+
+  const safeSetBounds = React.useCallback(
+    (bounds: DOMRect) => {
+      if (!localRef.current) return
+
+      const boundsOffset = (props as ParentModeMotionHighlightProps)?.boundsOffset ?? {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      }
+
+      const containerRect = localRef.current.getBoundingClientRect()
+
+      const newBounds: Bounds = {
+        top: bounds.top - containerRect.top + (boundsOffset.top ?? 0),
+        left: bounds.left - containerRect.left + (boundsOffset.left ?? 0),
+        width: bounds.width + (boundsOffset.width ?? 0),
+        height: bounds.height + (boundsOffset.height ?? 0)
+      }
+
+      setBoundsState(prev => {
+        if (
+          prev &&
+          prev.top === newBounds.top &&
+          prev.left === newBounds.left &&
+          prev.width === newBounds.width &&
+          prev.height === newBounds.height
+        ) {
+          return prev
+        }
+
+        return newBounds
+      })
+    },
+    [props]
+  )
+
+  const clearBounds = React.useCallback(() => {
+    setBoundsState(prev => (prev === null ? prev : null))
+  }, [])
+
+  React.useEffect(() => {
+    if (value !== undefined) setActiveValue(value)
+    else if (defaultValue !== undefined) setActiveValue(defaultValue)
+  }, [value, defaultValue])
+
+  const id = React.useId()
+
+  React.useEffect(() => {
+    if (mode !== 'parent') return
+    const container = localRef.current
+
+    if (!container) return
+
+    const onScroll = () => {
+      if (!activeValue) return
+      const activeEl = container.querySelector<HTMLElement>(`[data-value="${activeValue}"][data-highlight="true"]`)
+
+      if (activeEl) safeSetBounds(activeEl.getBoundingClientRect())
+    }
+
+    container.addEventListener('scroll', onScroll, { passive: true })
+
+    return () => container.removeEventListener('scroll', onScroll)
+  }, [mode, activeValue, safeSetBounds])
+
+  const render = React.useCallback(
+    (children: React.ReactNode) => {
+      if (mode === 'parent') {
+        return (
+          <div
+            ref={localRef}
+            data-slot='motion-highlight-container'
+            className={cn('relative', (props as ParentModeMotionHighlightProps)?.containerClassName)}
+          >
+            <AnimatePresence initial={false}>
+              {boundsState && (
+                <motion.div
+                  data-slot='motion-highlight'
+                  animate={{
+                    top: boundsState.top,
+                    left: boundsState.left,
+                    width: boundsState.width,
+                    height: boundsState.height,
+                    opacity: 1
+                  }}
+                  initial={{
+                    top: boundsState.top,
+                    left: boundsState.left,
+                    width: boundsState.width,
+                    height: boundsState.height,
+                    opacity: 0
+                  }}
+                  exit={{
+                    opacity: 0,
+                    transition: {
+                      ...transition,
+                      delay: (transition?.delay ?? 0) + (exitDelay ?? 0)
+                    }
+                  }}
+                  transition={transition}
+                  className={cn('bg-muted absolute z-0', className, activeClassNameState)}
+                />
+              )}
+            </AnimatePresence>
+            {children}
+          </div>
+        )
+      }
+
+      return children
+    },
+    [mode, props, boundsState, transition, exitDelay, className, activeClassNameState]
+  )
+
+  return (
+    <MotionHighlightContext.Provider
+      value={{
+        mode,
+        activeValue,
+        setActiveValue: safeSetActiveValue,
+        id,
+        hover,
+        className,
+        transition,
+        disabled,
+        enabled,
+        exitDelay,
+        setBounds: safeSetBounds,
+        clearBounds,
+        activeClassName: activeClassNameState,
+        setActiveClassName: setActiveClassNameState,
+        forceUpdateBounds: (props as ParentModeMotionHighlightProps)?.forceUpdateBounds
+      }}
+    >
+      {enabled
+        ? controlledItems
+          ? render(children)
+          : render(
+              React.Children.map(children, (child, index) => (
+                <MotionHighlightItem key={index} className={props?.itemsClassName}>
+                  {child}
+                </MotionHighlightItem>
+              ))
+            )
+        : children}
+    </MotionHighlightContext.Provider>
+  )
+}
+
+function getNonOverridingDataAttributes(
+  element: React.ReactElement,
+  dataAttributes: Record<string, unknown>
+): Record<string, unknown> {
+  return Object.keys(dataAttributes).reduce<Record<string, unknown>>((acc, key) => {
+    if ((element.props as Record<string, unknown>)[key] === undefined) {
+      acc[key] = dataAttributes[key]
+    }
+
+    return acc
+  }, {})
+}
+
+type ExtendedChildProps = React.ComponentProps<'div'> & {
+  id?: string
+  ref?: React.Ref<HTMLElement>
+  'data-active'?: string
+  'data-value'?: string
+  'data-disabled'?: boolean
+  'data-highlight'?: boolean
+  'data-slot'?: string
+}
+
+type MotionHighlightItemProps = React.ComponentProps<'div'> & {
+  children: React.ReactElement
+  id?: string
+  value?: string
+  className?: string
+  transition?: Transition
+  activeClassName?: string
+  disabled?: boolean
+  exitDelay?: number
+  asChild?: boolean
+  forceUpdateBounds?: boolean
+}
+
+function MotionHighlightItem({
+  ref,
+  children,
+  id,
+  value,
+  className,
+  transition,
+  disabled = false,
+  activeClassName,
+  exitDelay,
+  asChild = false,
+  forceUpdateBounds,
+  ...props
+}: MotionHighlightItemProps) {
+  const itemId = React.useId()
+
+  const {
+    activeValue,
+    setActiveValue,
+    mode,
+    setBounds,
+    clearBounds,
+    hover,
+    enabled,
+    className: contextClassName,
+    transition: contextTransition,
+    id: contextId,
+    disabled: contextDisabled,
+    exitDelay: contextExitDelay,
+    forceUpdateBounds: contextForceUpdateBounds,
+    setActiveClassName
+  } = useMotionHighlight()
+
+  const element = children as React.ReactElement<ExtendedChildProps>
+  const childValue = id ?? value ?? element.props?.['data-value'] ?? element.props?.id ?? itemId
+  const isActive = activeValue === childValue
+  const isDisabled = disabled === undefined ? contextDisabled : disabled
+  const itemTransition = transition ?? contextTransition
+
+  const localRef = React.useRef<HTMLDivElement>(null)
+
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement)
+
+  React.useEffect(() => {
+    if (mode !== 'parent') return
+    let rafId: number
+    let previousBounds: Bounds | null = null
+    const shouldUpdateBounds = forceUpdateBounds === true || (contextForceUpdateBounds && forceUpdateBounds !== false)
+
+    const updateBounds = () => {
+      if (!localRef.current) return
+
+      const bounds = localRef.current.getBoundingClientRect()
+
+      if (shouldUpdateBounds) {
+        if (
+          previousBounds &&
+          previousBounds.top === bounds.top &&
+          previousBounds.left === bounds.left &&
+          previousBounds.width === bounds.width &&
+          previousBounds.height === bounds.height
+        ) {
+          rafId = requestAnimationFrame(updateBounds)
+
+          return
+        }
+
+        previousBounds = bounds
+        rafId = requestAnimationFrame(updateBounds)
+      }
+
+      setBounds(bounds)
+    }
+
+    if (isActive) {
+      updateBounds()
+      setActiveClassName(activeClassName ?? '')
+    } else if (!activeValue) clearBounds()
+
+    if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId)
+  }, [
+    mode,
+    isActive,
+    activeValue,
+    setBounds,
+    clearBounds,
+    activeClassName,
+    setActiveClassName,
+    forceUpdateBounds,
+    contextForceUpdateBounds
+  ])
+
+  if (!React.isValidElement(children)) return children
+
+  const dataAttributes = {
+    'data-active': isActive ? 'true' : 'false',
+    'aria-selected': isActive,
+    'data-disabled': isDisabled,
+    'data-value': childValue,
+    'data-highlight': true
+  }
+
+  const commonHandlers = hover
+    ? {
+        onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(childValue)
+          element.props.onMouseEnter?.(e)
+        },
+        onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(null)
+          element.props.onMouseLeave?.(e)
+        }
+      }
+    : {
+        onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(childValue)
+          element.props.onClick?.(e)
+        }
+      }
+
+  if (asChild) {
+    if (mode === 'children') {
+      return React.cloneElement(
+        element,
+        {
+          key: childValue,
+          ref: localRef,
+          className: cn('relative', element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            'data-slot': 'motion-highlight-item-container'
+          }),
+          ...commonHandlers,
+          ...props
+        },
+        <>
+          <AnimatePresence initial={false}>
+            {isActive && !isDisabled && (
+              <motion.div
+                layoutId={`transition-background-${contextId}`}
+                data-slot='motion-highlight'
+                className={cn('bg-muted absolute inset-0 z-0', contextClassName, activeClassName)}
+                transition={itemTransition}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{
+                  opacity: 0,
+                  transition: {
+                    ...itemTransition,
+                    delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0)
+                  }
+                }}
+                {...dataAttributes}
+              />
+            )}
+          </AnimatePresence>
+
+          <div data-slot='motion-highlight-item' className={cn('relative z-[1]', className)} {...dataAttributes}>
+            {children}
+          </div>
+        </>
+      )
+    }
+
+    return React.cloneElement(element, {
+      ref: localRef,
+      ...getNonOverridingDataAttributes(element, {
+        ...dataAttributes,
+        'data-slot': 'motion-highlight-item'
+      }),
+      ...commonHandlers
+    })
+  }
+
+  return enabled ? (
+    <div
+      key={childValue}
+      ref={localRef}
+      data-slot='motion-highlight-item-container'
+      className={cn(mode === 'children' && 'relative', className)}
+      {...dataAttributes}
+      {...props}
+      {...commonHandlers}
+    >
+      {mode === 'children' && (
+        <AnimatePresence initial={false}>
+          {isActive && !isDisabled && (
+            <motion.div
+              layoutId={`transition-background-${contextId}`}
+              data-slot='motion-highlight'
+              className={cn('bg-muted absolute inset-0 z-0', contextClassName, activeClassName)}
+              transition={itemTransition}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{
+                opacity: 0,
+                transition: {
+                  ...itemTransition,
+                  delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0)
+                }
+              }}
+              {...dataAttributes}
+            />
+          )}
+        </AnimatePresence>
+      )}
+
+      {React.cloneElement(element, {
+        className: cn('relative z-[1]', element.props.className),
+        ...getNonOverridingDataAttributes(element, {
+          ...dataAttributes,
+          'data-slot': 'motion-highlight-item'
+        })
+      })}
+    </div>
+  ) : (
+    children
+  )
+}
+
+export {
+  MotionHighlight,
+  MotionHighlightItem,
+  useMotionHighlight,
+  type MotionHighlightProps,
+  type MotionHighlightItemProps
+}

src/components/ui/motion-tabs.tsx

@@ -0,0 +1,261 @@
+'use client'
+
+import * as React from 'react'
+
+import { motion, type Transition, type HTMLMotionProps } from 'motion/react'
+
+import { cn } from '@/lib/utils'
+import { MotionHighlight, MotionHighlightItem } from '@/components/ui/motion-highlight'
+
+type TabsContextType<T extends string> = {
+  activeValue: T
+  handleValueChange: (value: T) => void
+  registerTrigger: (value: T, node: HTMLElement | null) => void
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TabsContext = React.createContext<TabsContextType<any> | undefined>(undefined)
+
+function useTabs<T extends string = string>(): TabsContextType<T> {
+  const context = React.useContext(TabsContext)
+
+  if (!context) {
+    throw new Error('useTabs must be used within a TabsProvider')
+  }
+
+  return context
+}
+
+type BaseTabsProps = React.ComponentProps<'div'> & {
+  children: React.ReactNode
+}
+
+type UnControlledTabsProps<T extends string = string> = BaseTabsProps & {
+  defaultValue?: T
+  value?: never
+  onValueChange?: never
+}
+
+type ControlledTabsProps<T extends string = string> = BaseTabsProps & {
+  value: T
+  onValueChange?: (value: T) => void
+  defaultValue?: never
+}
+
+type TabsProps<T extends string = string> = UnControlledTabsProps<T> | ControlledTabsProps<T>
+
+function Tabs<T extends string = string>({
+  defaultValue,
+  value,
+  onValueChange,
+  children,
+  className,
+  ...props
+}: TabsProps<T>) {
+  const [activeValue, setActiveValue] = React.useState<T | undefined>(defaultValue ?? undefined)
+  const triggersRef = React.useRef(new Map<string, HTMLElement>())
+  const initialSet = React.useRef(false)
+  const isControlled = value !== undefined
+
+  React.useEffect(() => {
+    if (!isControlled && activeValue === undefined && triggersRef.current.size > 0 && !initialSet.current) {
+      const firstTab = Array.from(triggersRef.current.keys())[0]
+
+      setActiveValue(firstTab as T)
+      initialSet.current = true
+    }
+  }, [activeValue, isControlled])
+
+  const registerTrigger = (value: string, node: HTMLElement | null) => {
+    if (node) {
+      triggersRef.current.set(value, node)
+
+      if (!isControlled && activeValue === undefined && !initialSet.current) {
+        setActiveValue(value as T)
+        initialSet.current = true
+      }
+    } else {
+      triggersRef.current.delete(value)
+    }
+  }
+
+  const handleValueChange = (val: T) => {
+    if (!isControlled) setActiveValue(val)
+    else onValueChange?.(val)
+  }
+
+  return (
+    <TabsContext.Provider
+      value={{
+        activeValue: (value ?? activeValue)!,
+        handleValueChange,
+        registerTrigger
+      }}
+    >
+      <div data-slot='tabs' className={cn('flex flex-col gap-2', className)} {...props}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  )
+}
+
+type TabsListProps = React.ComponentProps<'div'> & {
+  children: React.ReactNode
+  activeClassName?: string
+  transition?: Transition
+}
+
+function TabsList({
+  children,
+  className,
+  activeClassName,
+  transition = {
+    type: 'spring',
+    stiffness: 200,
+    damping: 25
+  },
+  ...props
+}: TabsListProps) {
+  const { activeValue } = useTabs()
+
+  return (
+    <MotionHighlight
+      controlledItems
+      className={cn('bg-background rounded-sm shadow-sm', activeClassName)}
+      value={activeValue}
+      transition={transition}
+    >
+      <div
+        role='tablist'
+        data-slot='tabs-list'
+        className={cn(
+          'bg-muted text-muted-foreground inline-flex h-10 w-fit items-center justify-center rounded-lg p-[4px]',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </MotionHighlight>
+  )
+}
+
+type TabsTriggerProps = HTMLMotionProps<'button'> & {
+  value: string
+  children: React.ReactNode
+}
+
+function TabsTrigger({ ref, value, children, className, ...props }: TabsTriggerProps) {
+  const { activeValue, handleValueChange, registerTrigger } = useTabs()
+
+  const localRef = React.useRef<HTMLButtonElement | null>(null)
+
+  React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement)
+
+  React.useEffect(() => {
+    registerTrigger(value, localRef.current)
+
+    return () => registerTrigger(value, null)
+  }, [value, registerTrigger])
+
+  return (
+    <MotionHighlightItem value={value} className='size-full'>
+      <motion.button
+        ref={localRef}
+        data-slot='tabs-trigger'
+        role='tab'
+        onClick={() => handleValueChange(value)}
+        data-state={activeValue === value ? 'active' : 'inactive'}
+        className={cn(
+          'ring-offset-background focus-visible:ring-ring data-[state=active]:text-foreground z-[1] inline-flex size-full cursor-pointer items-center justify-center rounded-sm px-2 py-1 text-sm font-medium whitespace-nowrap transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </motion.button>
+    </MotionHighlightItem>
+  )
+}
+
+type TabsContentsProps = React.ComponentProps<'div'> & {
+  children: React.ReactNode
+  transition?: Transition
+}
+
+function TabsContents({
+  children,
+  className,
+  transition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    bounce: 0,
+    restDelta: 0.01
+  },
+  ...props
+}: TabsContentsProps) {
+  const { activeValue } = useTabs()
+  const childrenArray = React.Children.toArray(children)
+
+  const activeIndex = childrenArray.findIndex(
+    (child): child is React.ReactElement<{ value: string }> =>
+      React.isValidElement(child) &&
+      typeof child.props === 'object' &&
+      child.props !== null &&
+      'value' in child.props &&
+      child.props.value === activeValue
+  )
+
+  return (
+    <div data-slot='tabs-contents' className={cn('overflow-hidden', className)} {...props}>
+      <motion.div className='-mx-2 flex' animate={{ x: activeIndex * -100 + '%' }} transition={transition}>
+        {childrenArray.map((child, index) => (
+          <div key={index} className='w-full shrink-0 px-2'>
+            {child}
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  )
+}
+
+type TabsContentProps = HTMLMotionProps<'div'> & {
+  value: string
+  children: React.ReactNode
+}
+
+function TabsContent({ children, value, className, ...props }: TabsContentProps) {
+  const { activeValue } = useTabs()
+  const isActive = activeValue === value
+
+  return (
+    <motion.div
+      role='tabpanel'
+      data-slot='tabs-content'
+      className={cn('overflow-hidden', className)}
+      initial={{ filter: 'blur(0px)' }}
+      animate={{ filter: isActive ? 'blur(0px)' : 'blur(2px)' }}
+      exit={{ filter: 'blur(0px)' }}
+      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContents,
+  TabsContent,
+  useTabs,
+  type TabsContextType,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentsProps,
+  type TabsContentProps
+}