feat(ui): add size system (sm/md/lg) + compact mode + remove collapsed dot

2026-07-26 20:14:42 +08:00
parent 29319ee2d3
commit a9024ff6f8
11 changed files with 137 additions and 29 deletions
@@ -5,12 +5,19 @@ export function Tabs({
  onValueChange,
  items,
  className,
+  size = 'md',
 }: {
  value: string
  onValueChange: (v: string) => void
  items: { value: string; label: string }[]
  className?: string
+  size?: 'sm' | 'md' | 'lg'
 }) {
+  const tabSizes = {
+    sm: 'px-2.5 py-1 text-[12px]',
+    md: 'px-3.5 py-1.5 text-[13px]',
+    lg: 'px-4 py-2 text-[14px]',
+  }
  return (
    <div
      className={cn(
@@ -29,7 +36,8 @@ export function Tabs({
            role="tab"
            aria-selected={active}
            className={cn(
-              'relative shrink-0 rounded-md px-3.5 py-1.5 text-[13px] font-medium whitespace-nowrap transition-colors',
+              'relative shrink-0 rounded-md font-medium whitespace-nowrap transition-colors',
+              tabSizes[size],
              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]',
              active
                ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-sm)] ring-1 ring-[var(--border)]'