refactor: migrate frontend from shadcn/Tailwind to Mantine v9

Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/functions/ui/tabs.tsx

@@ -1,43 +1,55 @@
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../core/cn"
+import * as React from "react"
+import { Tabs as MantineTabs } from "@mantine/core"
 
-function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
-  return (
-    <TabsPrimitive.Root data-slot="tabs" data-orientation={orientation} className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)} {...props} />
-  )
+interface TabsProps {
+  defaultValue?: string | null
+  value?: string | null
+  onTabChange?: (value: string | null) => void
+  orientation?: "horizontal" | "vertical"
+  variant?: "default" | "line"
+  className?: string
+  children?: React.ReactNode
 }
 
-const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: { default: "bg-muted", line: "gap-1 bg-transparent" },
-    },
-    defaultVariants: { variant: "default" },
-  }
-)
-
-function TabsList({ className, variant = "default", ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
-  return <TabsPrimitive.List data-slot="tabs-list" data-variant={variant} className={cn(tabsListVariants({ variant }), className)} {...props} />
-}
-
-function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+function Tabs({ className, orientation = "horizontal", variant = "default", defaultValue, value, onTabChange, children, ...props }: TabsProps) {
   return (
-    <TabsPrimitive.Tab
-      data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30",
-        className
-      )}
+    <MantineTabs
+      data-slot="tabs"
+      defaultValue={defaultValue}
+      value={value}
+      onChange={onTabChange}
+      orientation={orientation}
+      variant={variant === "line" ? "outline" : "default"}
+      className={className}
       {...props}
-    />
+    >
+      {children}
+    </MantineTabs>
   )
 }
 
-function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
-  return <TabsPrimitive.Panel data-slot="tabs-content" className={cn("flex-1 text-sm outline-none", className)} {...props} />
+function TabsList({ className, variant, children, ...props }: { className?: string; variant?: "default" | "line"; children?: React.ReactNode } & React.ComponentProps<typeof MantineTabs.List>) {
+  return (
+    <MantineTabs.List data-slot="tabs-list" className={className} {...props}>
+      {children}
+    </MantineTabs.List>
+  )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+function TabsTrigger({ className, value, children, disabled, ...props }: { className?: string; value: string; children?: React.ReactNode; disabled?: boolean }) {
+  return (
+    <MantineTabs.Tab data-slot="tabs-trigger" value={value} disabled={disabled} className={className} {...props}>
+      {children}
+    </MantineTabs.Tab>
+  )
+}
+
+function TabsContent({ className, value, children, ...props }: { className?: string; value: string; children?: React.ReactNode }) {
+  return (
+    <MantineTabs.Panel data-slot="tabs-content" value={value} className={className} {...props}>
+      {children}
+    </MantineTabs.Panel>
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }