tembro 2.0.5 → 2.1.0

package/packages/cli/vendor/src/components/modern/calendar-scheduler.tsx

@@ -2,18 +2,22 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type CalendarSchedulerEvent = {
-  id: string
-  title: React.ReactNode
-  date: string
-  time?: string
-  tone?: "default" | "success" | "warning" | "danger"
-}
-
+export type CalendarSchedulerEvent = {
+  id: string
+  title: React.ReactNode
+  date: string
+  time?: string
+  tone?: "default" | "success" | "warning" | "danger"
+  durationMinutes?: number
+}
+
 export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
   events: CalendarSchedulerEvent[]
   days?: string[]
+  view?: "day" | "week" | "month"
   empty?: React.ReactNode
+  onCreateEvent?: (date: string) => void
+  onEventClick?: (event: CalendarSchedulerEvent) => void
 }
 
 const toneClassName = {
@@ -23,11 +27,11 @@ const toneClassName = {
   danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
 }
 
-function CalendarScheduler({ events, days, empty = "No events scheduled.", className, ...props }: CalendarSchedulerProps) {
+function CalendarScheduler({ events, days, view = "week", empty = "No events scheduled.", onCreateEvent, onEventClick, className, ...props }: CalendarSchedulerProps) {
   const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
 
   return (
-    <div data-slot="calendar-scheduler" className={cn("grid gap-3", className)} {...props}>
+    <div data-slot="calendar-scheduler" data-view={view} className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)} {...props}>
       {visibleDays.map((day) => (
         <section key={day} className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]">
           <div className="mb-3 flex items-center justify-between gap-3">
@@ -41,16 +45,27 @@ function CalendarScheduler({ events, days, empty = "No events scheduled.", class
               </div>
             ) : (
               events.filter((event) => event.date === day).map((event) => (
-                <div key={event.id} className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-sm shadow-sm", toneClassName[event.tone ?? "default"])}>
+                <button
+                  key={event.id}
+                  type="button"
+                  className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", toneClassName[event.tone ?? "default"])}
+                  onClick={() => onEventClick?.(event)}
+                >
                   <div className="font-medium">{event.title}</div>
                   {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
-                </div>
+                  {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
+                </button>
               ))
             )}
           </div>
+          {onCreateEvent && (
+            <button type="button" className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50" onClick={() => onCreateEvent(day)}>
+              Create event
+            </button>
+          )}
         </section>
       ))}
-    </div>
+    </div>
   )
 }
 

package/packages/cli/vendor/src/components/modern/dual-list-picker.tsx

@@ -8,44 +8,112 @@ export type DualListItem = {
   disabled?: boolean
 }
 
-export type DualListPickerProps = React.ComponentProps<"div"> & {
-  items: DualListItem[]
-  picked?: string[]
-  onPickedChange?: (value: string[]) => void
-  availableTitle?: React.ReactNode
-  pickedTitle?: React.ReactNode
-}
-
-function DualListPicker({ items, picked = [], onPickedChange, availableTitle = "Available", pickedTitle = "Selected", className, ...props }: DualListPickerProps) {
-  const pickedSet = new Set(picked)
-  const availableItems = items.filter((item) => !pickedSet.has(item.value))
-  const pickedItems = items.filter((item) => pickedSet.has(item.value))
-
-  function toggle(value: string) {
-    const next = pickedSet.has(value) ? picked.filter((item) => item !== value) : [...picked, value]
-    onPickedChange?.(next)
-  }
-
-  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[]) => (
-    <div className="min-h-48 rounded-lg border bg-card">
-      <div className="border-b px-3 py-2 text-sm font-medium">{title}</div>
-      <div className="grid gap-1 p-2">
-        {columnItems.map((item) => (
-          <button key={item.value} type="button" disabled={item.disabled} className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted disabled:opacity-50" onClick={() => toggle(item.value)}>
-            <span>{item.label}</span>
-            <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
-          </button>
+export type DualListPickerProps = React.ComponentProps<"div"> & {
+  items: DualListItem[]
+  picked?: string[]
+  onPickedChange?: (value: string[]) => void
+  availableTitle?: React.ReactNode
+  pickedTitle?: React.ReactNode
+  searchPlaceholder?: string
+  emptyMessage?: React.ReactNode
+  maxPicked?: number
+  transferAll?: boolean
+}
+
+function DualListPicker({
+  items,
+  picked = [],
+  onPickedChange,
+  availableTitle = "Available",
+  pickedTitle = "Selected",
+  searchPlaceholder = "Search items...",
+  emptyMessage = "No items.",
+  maxPicked,
+  transferAll = true,
+  className,
+  ...props
+}: DualListPickerProps) {
+  const [query, setQuery] = React.useState("")
+  const pickedSet = new Set(picked)
+  const normalizedQuery = query.trim().toLowerCase()
+  const matchesQuery = (item: DualListItem) => {
+    if (!normalizedQuery) return true
+    return String(item.label).toLowerCase().includes(normalizedQuery) || item.value.toLowerCase().includes(normalizedQuery)
+  }
+  const availableItems = items.filter((item) => !pickedSet.has(item.value) && matchesQuery(item))
+  const pickedItems = items.filter((item) => pickedSet.has(item.value) && matchesQuery(item))
+  const maxReached = maxPicked !== undefined && picked.length >= maxPicked
+
+  function toggle(value: string) {
+    const isPicked = pickedSet.has(value)
+    if (!isPicked && maxReached) return
+    const next = isPicked ? picked.filter((item) => item !== value) : [...picked, value]
+    onPickedChange?.(next)
+  }
+
+  function addAll() {
+    const next = [...picked]
+    for (const item of items) {
+      if (item.disabled || pickedSet.has(item.value)) continue
+      if (maxPicked !== undefined && next.length >= maxPicked) break
+      next.push(item.value)
+    }
+    onPickedChange?.(next)
+  }
+
+  function removeAll() {
+    onPickedChange?.([])
+  }
+
+  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[], mode: "available" | "picked") => (
+    <div className="min-h-48 rounded-lg border bg-card">
+      <div className="flex items-center justify-between gap-2 border-b px-3 py-2 text-sm font-medium">
+        <span>{title}</span>
+        <span className="text-xs font-normal text-muted-foreground">{columnItems.length}</span>
+      </div>
+      <div className="grid gap-1 p-2">
+        {columnItems.length === 0 ? (
+          <div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
+        ) : columnItems.map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            disabled={item.disabled || (mode === "available" && maxReached)}
+            className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:opacity-50"
+            aria-pressed={pickedSet.has(item.value)}
+            onClick={() => toggle(item.value)}
+          >
+            <span>{item.label}</span>
+            <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
+          </button>
         ))}
       </div>
     </div>
   )
-
-  return (
-    <div data-slot="dual-list-picker" className={cn("grid gap-3 md:grid-cols-2", className)} {...props}>
-      {renderColumn(availableTitle, availableItems)}
-      {renderColumn(pickedTitle, pickedItems)}
-    </div>
-  )
-}
+
+  return (
+    <div data-slot="dual-list-picker" className={cn("grid gap-3", className)} {...props}>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <input
+          value={query}
+          placeholder={searchPlaceholder}
+          className="h-9 min-w-0 rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40 sm:max-w-xs"
+          onChange={(event) => setQuery(event.currentTarget.value)}
+        />
+        {transferAll && (
+          <div className="flex gap-2">
+            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={maxReached} onClick={addAll}>Add all</button>
+            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={picked.length === 0} onClick={removeAll}>Remove all</button>
+          </div>
+        )}
+      </div>
+      <div className="grid gap-3 md:grid-cols-2">
+        {renderColumn(availableTitle, availableItems, "available")}
+        {renderColumn(pickedTitle, pickedItems, "picked")}
+      </div>
+      {maxPicked !== undefined && <div className="text-xs text-muted-foreground">{picked.length} / {maxPicked} selected</div>}
+    </div>
+  )
+}
 
 export { DualListPicker }

package/packages/cli/vendor/src/components/modern/rich-text-editor.tsx

@@ -2,14 +2,16 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "onChange"> & {
-  value?: string
-  onValueChange?: (value: string) => void
-  placeholder?: string
-}
-
-function RichTextEditor({ value, onValueChange, placeholder = "Write something...", className, ...props }: RichTextEditorProps) {
-  const ref = React.useRef<HTMLDivElement | null>(null)
+export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  output?: "html" | "text"
+  disabled?: boolean
+}
+
+function RichTextEditor({ value, onValueChange, placeholder = "Write something...", output = "html", disabled = false, className, ...props }: RichTextEditorProps) {
+  const ref = React.useRef<HTMLDivElement | null>(null)
 
   React.useEffect(() => {
     if (ref.current && value !== undefined && ref.current.innerHTML !== value) {
@@ -18,27 +20,28 @@ function RichTextEditor({ value, onValueChange, placeholder = "Write something..
   }, [value])
 
   return (
-    <div data-slot="rich-text-editor" className={cn("grid gap-2 rounded-lg border bg-background p-2", className)} {...props}>
-      <div className="flex flex-wrap gap-1 border-b pb-2">
+    <div data-slot="rich-text-editor" data-disabled={disabled || undefined} className={cn("grid gap-2 rounded-lg border bg-background p-2", disabled && "opacity-60", className)} {...props}>
+      <div className="flex flex-wrap gap-1 border-b pb-2">
         {[
           ["bold", "B"],
           ["italic", "I"],
           ["underline", "U"],
         ].map(([command, label]) => (
-          <button key={command} type="button" className="rounded border px-2 py-1 text-xs font-medium" onClick={() => document.execCommand(command)}>
-            {label}
-          </button>
+          <button key={command} type="button" disabled={disabled} className="rounded border px-2 py-1 text-xs font-medium disabled:opacity-50" onClick={() => document.execCommand(command)}>
+            {label}
+          </button>
         ))}
       </div>
       <div
-        ref={ref}
-        contentEditable
-        data-placeholder={placeholder}
-        className="min-h-32 rounded-md p-2 text-sm outline-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]"
-        onInput={(event) => onValueChange?.(event.currentTarget.innerHTML)}
-      />
-    </div>
-  )
-}
+        ref={ref}
+        contentEditable={!disabled}
+        aria-disabled={disabled || undefined}
+        data-placeholder={placeholder}
+        className="min-h-32 rounded-md p-2 text-sm outline-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]"
+        onInput={(event) => onValueChange?.(output === "text" ? event.currentTarget.textContent ?? "" : event.currentTarget.innerHTML)}
+      />
+    </div>
+  )
+}
 
 export { RichTextEditor }

package/packages/cli/vendor/src/components/modern/tour.tsx

@@ -2,38 +2,56 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type TourStep = {
-  title: React.ReactNode
-  description?: React.ReactNode
-}
+export type TourStep = {
+  title: React.ReactNode
+  description?: React.ReactNode
+  target?: string
+}
 
 export type TourProps = React.ComponentProps<"div"> & {
   steps: TourStep[]
-  index?: number
-  onIndexChange?: (index: number) => void
-  onClose?: () => void
-}
-
-function Tour({ steps, index = 0, onIndexChange, onClose, className, ...props }: TourProps) {
-  const step = steps[index]
-  if (!step) return null
-
-  return (
-    <div data-slot="tour" className={cn("rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg", className)} {...props}>
-      <div className="grid gap-2">
-        <div className="font-semibold">{step.title}</div>
-        {step.description && <div className="text-sm text-muted-foreground">{step.description}</div>}
-        <div className="flex items-center justify-between gap-3 pt-2">
-          <span className="text-xs text-muted-foreground">{index + 1} / {steps.length}</span>
-          <div className="flex gap-2">
-            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" disabled={index === 0} onClick={() => onIndexChange?.(index - 1)}>Back</button>
-            {index < steps.length - 1 ? (
-              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => onIndexChange?.(index + 1)}>Next</button>
-            ) : (
-              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={onClose}>Done</button>
-            )}
-          </div>
-        </div>
+  index?: number
+  onIndexChange?: (index: number) => void
+  onClose?: () => void
+  onSkip?: () => void
+  onFinish?: () => void
+  placement?: "top" | "right" | "bottom" | "left"
+}
+
+function Tour({ steps, index = 0, onIndexChange, onClose, onSkip, onFinish, placement = "bottom", className, ...props }: TourProps) {
+  const step = steps[index]
+  const containerRef = React.useRef<HTMLDivElement | null>(null)
+  React.useEffect(() => {
+    containerRef.current?.focus()
+  }, [index])
+
+  if (!step) return null
+
+  return (
+    <div
+      ref={containerRef}
+      data-slot="tour"
+      data-placement={placement}
+      tabIndex={-1}
+      className={cn("rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/40", className)}
+      {...props}
+    >
+      <div className="grid gap-2">
+        <div className="font-semibold">{step.title}</div>
+        {step.description && <div className="text-sm text-muted-foreground">{step.description}</div>}
+        {step.target && <div className="text-xs text-muted-foreground">{step.target}</div>}
+        <div className="flex items-center justify-between gap-3 pt-2">
+          <span className="text-xs text-muted-foreground">{index + 1} / {steps.length}</span>
+          <div className="flex gap-2">
+            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" onClick={() => { onSkip?.(); onClose?.() }}>Skip</button>
+            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" disabled={index === 0} onClick={() => onIndexChange?.(index - 1)}>Back</button>
+            {index < steps.length - 1 ? (
+              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => onIndexChange?.(index + 1)}>Next</button>
+            ) : (
+              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => { onFinish?.(); onClose?.() }}>Done</button>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   )

package/packages/cli/vendor/src/components/navigation/command-bar.tsx

@@ -5,11 +5,15 @@ export type CommandBarProps = React.ComponentProps<"div"> & {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   position?: "bottom" | "top"
+  grouped?: boolean
+  label?: React.ReactNode
 }
 
 function CommandBar({
   open = true,
   position = "bottom",
+  grouped = false,
+  label,
   children,
   className,
   ...props
@@ -22,10 +26,12 @@ function CommandBar({
       className={cn(
         "fixed left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full border bg-background/95 px-4 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/60",
         position === "bottom" ? "bottom-6" : "top-6",
+        grouped && "gap-3 rounded-[28px] px-3 py-2.5",
         className
       )}
       {...props}
     >
+      {label ? <span className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">{label}</span> : null}
       {children}
     </div>
   )

package/packages/cli/vendor/src/components/navigation/demo.tsx

@@ -3,7 +3,6 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 export const navigationShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("pagination", "Pagination", "navigation", "Controlled page navigation with edge buttons and active state."),
   component("nav-tabs", "NavTabs", "navigation", "Navigation tabs for switching related document sections."),
-  component("anchor-nav", "AnchorNav", "navigation", "Section jump navigation for long detail pages."),
   component("page-tabs", "PageTabs", "navigation", "Top-level page tab strip for route-sized sections."),
   component("stepper-tabs", "StepperTabs", "navigation", "Step-like tabs for setup and onboarding progress."),
 ])

package/packages/cli/vendor/src/components/navigation/nav-tabs.tsx

@@ -1,6 +1,7 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import * as React from "react"
+
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
 
 export type NavTabItem = {
   label: React.ReactNode
@@ -24,37 +25,45 @@ const sizeClassName = {
   lg: "h-11 px-5 text-base",
 }
 
-function NavTabs({ items, value, onValueChange, size = "default", fullWidth = false, className, ...props }: NavTabsProps) {
-  return (
-    <div data-slot="nav-tabs" className={cn("inline-flex rounded-[var(--radius-xl)] border border-border/80 bg-muted/45 p-1", fullWidth && "w-full", className)} {...props}>
-      {items.map((item) => {
-        const active = item.value === value
-        const content = (
+function NavTabs({ items, value, onValueChange, size = "default", fullWidth = false, className, ...props }: NavTabsProps) {
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
+      data-slot="nav-tabs"
+      className={cn("min-w-0", fullWidth && "w-full", className)}
+      {...props}
+    >
+      <TabsList data-slot="nav-tabs-list" variant="pills" overflow="scroll" className={cn(fullWidth && "w-full")}>
+      {items.map((item) => {
+        const active = item.value === value
+        const content = (
           <>
             {item.icon ? <span className="[&_svg]:size-4">{item.icon}</span> : null}
             <span className="truncate">{item.label}</span>
           </>
         )
 
-        const itemClassName = cn(
-          "inline-flex items-center justify-center gap-2 rounded-[calc(var(--radius-xl)-4px)] font-medium text-muted-foreground transition hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
-          sizeClassName[size],
-          fullWidth && "flex-1",
-          active && "bg-background text-foreground shadow-sm"
-        )
-
-        return item.href ? (
-          <a key={item.value} href={item.href} aria-current={active ? "page" : undefined} className={itemClassName}>
-            {content}
-          </a>
-        ) : (
-          <button key={item.value} type="button" disabled={item.disabled} className={itemClassName} onClick={() => onValueChange?.(item.value)}>
-            {content}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
+        const itemClassName = cn(
+          "min-w-0 disabled:pointer-events-none disabled:opacity-50",
+          sizeClassName[size],
+          fullWidth && "flex-1",
+          active && "bg-background text-foreground shadow-sm"
+        )
+
+        return item.href ? (
+          <TabsTrigger key={item.value} value={item.value} render={<a href={item.href} aria-current={active ? "page" : undefined} className={itemClassName} />}>
+            {content}
+          </TabsTrigger>
+        ) : (
+          <TabsTrigger key={item.value} value={item.value} disabled={item.disabled} className={itemClassName} onClick={() => onValueChange?.(item.value)}>
+            {content}
+          </TabsTrigger>
+        )
+      })}
+      </TabsList>
+    </Tabs>
+  )
+}
 
 export { NavTabs }

package/packages/cli/vendor/src/components/navigation/page-tabs.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
 
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
 
 export type PageTabItem<TValue extends string = string> = {
   value: TValue
@@ -30,40 +31,50 @@ function PageTabs<TValue extends string = string>({
   ...props
 }: PageTabsProps<TValue>) {
   const visibleItems = items.filter((item) => !item.hidden)
+  const handleValueChange = (nextValue: unknown) => {
+    const nextItem = visibleItems.find((item) => item.value === nextValue)
+    if (nextItem) {
+      onValueChange?.(nextItem.value, nextItem)
+    }
+  }
 
   return (
-    <div
+    <Tabs
+      value={value}
+      onValueChange={handleValueChange}
       data-slot="page-tabs"
       data-variant={variant}
       className={cn(
-        "flex min-w-0 flex-wrap gap-1.5 border-b border-border/70",
-        variant === "pills" && "rounded-full border border-border/75 bg-muted/22 p-1 shadow-[0_1px_0_rgba(255,255,255,0.04)]",
-        variant === "cards" && "gap-2 border-b-0",
-        variant !== "underline" && "border-b-0",
+        "min-w-0",
         className
       )}
       {...props}
     >
+      <TabsList
+        data-slot="page-tabs-list"
+        variant={variant === "underline" ? "underline" : "pills"}
+        overflow="scroll"
+        className={cn(
+          "w-full",
+          variant === "cards" && "gap-2 border-0 bg-transparent p-0 shadow-none"
+        )}
+      >
       {visibleItems.map((item) => {
         const active = item.value === value
         return (
-          <button
-            key={item.value}
-            type="button"
-            disabled={item.disabled}
-            data-slot="page-tab"
-            data-active={active || undefined}
+          <TabsTrigger
+            key={item.value}
+            disabled={item.disabled}
+            value={item.value}
+            data-slot="page-tab"
+            data-active={active || undefined}
             className={cn(
-              "inline-flex min-w-0 items-center gap-2 rounded-full px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+              "min-w-0 px-3 disabled:pointer-events-none disabled:opacity-50",
               size === "sm" ? "h-8" : "h-10",
-              variant === "underline" && "rounded-none border-b-2 border-transparent px-1 text-muted-foreground hover:text-foreground",
-              variant === "underline" && active && "border-primary text-foreground",
-              variant === "pills" && "text-muted-foreground hover:bg-background/72 hover:text-foreground",
-              variant === "pills" && active && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
+              variant === "underline" && "px-1",
               variant === "cards" && "rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 text-muted-foreground shadow-sm ring-1 ring-foreground/4 hover:border-primary/28 hover:text-foreground",
               variant === "cards" && active && "border-primary/50 bg-primary/7 text-foreground"
             )}
-            onClick={() => onValueChange?.(item.value, item)}
           >
             {item.icon}
             <span className="truncate">{item.label}</span>
@@ -72,11 +83,12 @@ function PageTabs<TValue extends string = string>({
                 {item.badge}
               </Badge>
             )}
-          </button>
+          </TabsTrigger>
         )
       })}
-    </div>
-  )
-}
+      </TabsList>
+    </Tabs>
+  )
+}
 
 export { PageTabs }