ui-lab-registry 0.3.1 → 0.3.2

package/src/patterns/data/data-table-row/metadata.json

@@ -15,19 +15,19 @@
   ],
   "complexity": "simple",
   "notes": "hover:bg-background-900 for interactive rows. group class on the row enables child opacity transitions for action buttons that appear on hover.",
-  "code": "import { Badge } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRow({ primary, secondary, status, timestamp }) {\n  return (\n    <div className=\"flex items-center gap-4 px-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
+  "code": "import { Badge } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRow({ primary, secondary, status, timestamp }) {\n  return (\n    <div className=\"flex items-center gap-4 px-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
   "variations": [
     {
       "id": "data-table-row-selectable",
       "name": "Selectable",
       "description": "Leading Checkbox for multi-select operations.",
-      "code": "import { Badge, Checkbox } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowSelectable({ primary, secondary, status, timestamp, isSelected, onChange }) {\n  return (\n    <div className={`flex items-center gap-4 px-4 py-3 border-b border-background-800 transition-colors ${isSelected ? 'bg-background-900' : 'hover:bg-background-900'}`}>\n      <Checkbox isSelected={isSelected} onChange={onChange} aria-label={`Select ${primary}`} />\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}"
+      "code": "import { Badge, Checkbox } from 'ui-lab-components'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowSelectable({ primary, secondary, status, timestamp, isSelected, onChange }) {\n  return (\n    <div className={`flex items-center gap-4 px-4 py-3 border-b border-background-800 transition-colors ${isSelected ? 'bg-background-900' : 'hover:bg-background-900'}`}>\n      <Checkbox isSelected={isSelected} onChange={onChange} aria-label={`Select ${primary}`} />\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{secondary}</p>\n      </div>\n      <div className=\"flex items-center gap-2 flex-shrink-0\">\n        <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n      </div>\n    </div>\n  )\n}"
     },
     {
       "id": "data-table-row-expandable",
       "name": "Expandable",
       "description": "Trailing chevron button that toggles an expanded detail area below the row.",
-      "code": "import { Badge, Button } from 'ui-lab-components'\nimport { useState } from 'react'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowExpandable({ primary, secondary, status, timestamp, details }) {\n  const [expanded, setExpanded] = useState(false)\n  return (\n    <div className=\"border-b border-background-800\">\n      <div className=\"flex items-center gap-4 px-4 py-3 hover:bg-background-900 transition-colors\">\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n          <p className=\"text-xs text-foreground-400 truncate\">{secondary}</p>\n        </div>\n        <div className=\"flex items-center gap-2 flex-shrink-0\">\n          <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n          <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n          <Button variant=\"ghost\" size=\"sm\" onPress={() => setExpanded(!expanded)} aria-label=\"Toggle details\">\n            <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n            </svg>\n          </Button>\n        </div>\n      </div>\n      {expanded && (\n        <div className=\"px-4 pb-3 text-xs text-foreground-400\">{details}</div>\n      )}\n    </div>\n  )\n}"
+      "code": "import { Badge, Button } from 'ui-lab-components'\nimport { useState } from 'react'\n\nconst statusVariant = {\n  active: 'success',\n  pending: 'warning',\n  failed: 'danger',\n  inactive: 'default',\n} as const\n\nfunction DataTableRowExpandable({ primary, secondary, status, timestamp, details }) {\n  const [expanded, setExpanded] = useState(false)\n  return (\n    <div className=\"border-b border-background-800\">\n      <div className=\"flex items-center gap-4 px-4 py-3 hover:bg-background-900 transition-colors\">\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"text-sm font-medium text-foreground-200 truncate\">{primary}</p>\n          <p className=\"text-sm text-foreground-400 truncate\">{secondary}</p>\n        </div>\n        <div className=\"flex items-center gap-2 flex-shrink-0\">\n          <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n          <Badge size=\"sm\" variant={statusVariant[status] ?? 'default'}>{status}</Badge>\n          <Button variant=\"ghost\" size=\"sm\" onPress={() => setExpanded(!expanded)} aria-label=\"Toggle details\">\n            <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n            </svg>\n          </Button>\n        </div>\n      </div>\n      {expanded && (\n        <div className=\"px-4 pb-3 text-sm text-foreground-400\">{details}</div>\n      )}\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/data/data-table-row/variations/expandable/index.tsx

@@ -13,10 +13,10 @@ function DataTableRowExpandable({ primary, secondary, status, timestamp, details
       <div className="flex items-center gap-4 px-4 py-3 hover:bg-background-900 transition-colors">
         <div className="flex-1 min-w-0">
           <p className="text-sm font-medium text-foreground-200 truncate">{primary}</p>
-          <p className="text-xs text-foreground-400 truncate">{secondary}</p>
+          <p className="text-sm text-foreground-400 truncate">{secondary}</p>
         </div>
         <div className="flex items-center gap-2 flex-shrink-0">
-          <span className="text-xs text-foreground-400">{timestamp}</span>
+          <span className="text-sm text-foreground-400">{timestamp}</span>
           <Badge size="sm" variant={statusVariant[status] ?? 'default'}>{status}</Badge>
           <Button variant="ghost" size="sm" onPress={() => setExpanded(!expanded)} aria-label="Toggle details">
             <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
@@ -25,7 +25,7 @@ function DataTableRowExpandable({ primary, secondary, status, timestamp, details
           </Button>
         </div>
       </div>
-      {expanded && <div className="px-4 pb-3 text-xs text-foreground-400">{details}</div>}
+      {expanded && <div className="px-4 pb-3 text-sm text-foreground-400">{details}</div>}
     </div>
   );
 }

package/src/patterns/data/data-table-row/variations/main/index.tsx

@@ -8,10 +8,10 @@ function DataTableRow({ primary, secondary, status, timestamp }: { primary: stri
     <div className="flex items-center gap-4 px-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors">
       <div className="flex-1 min-w-0">
         <p className="text-sm font-medium text-foreground-200 truncate">{primary}</p>
-        <p className="text-xs text-foreground-400 truncate">{secondary}</p>
+        <p className="text-sm text-foreground-400 truncate">{secondary}</p>
       </div>
       <div className="flex items-center gap-2 flex-shrink-0">
-        <span className="text-xs text-foreground-400">{timestamp}</span>
+        <span className="text-sm text-foreground-400">{timestamp}</span>
         <Badge size="sm" variant={statusVariant[status] ?? 'default'}>{status}</Badge>
       </div>
     </div>

package/src/patterns/data/data-table-row/variations/selectable/index.tsx

@@ -19,10 +19,10 @@ function DataTableRowSelectable({ primary, secondary, status, timestamp, isSelec
       <Checkbox checked={isSelected} onChange={onChange} aria-label={`Select ${primary}`} />
       <div className="flex-1 min-w-0">
         <p className="text-sm font-medium text-foreground-200 truncate">{primary}</p>
-        <p className="text-xs text-foreground-400 truncate">{secondary}</p>
+        <p className="text-sm text-foreground-400 truncate">{secondary}</p>
       </div>
       <div className="flex items-center gap-2 flex-shrink-0">
-        <span className="text-xs text-foreground-400">{timestamp}</span>
+        <span className="text-sm text-foreground-400">{timestamp}</span>
         <Badge size="sm" variant={statusVariant[status] ?? 'default'}>{status}</Badge>
       </div>
     </div>

package/src/patterns/data/progress-metric/metadata.json

@@ -15,19 +15,19 @@
   ],
   "complexity": "simple",
   "notes": "Fixed-width label with flex-1 on the bar prevents layout shift when label text varies. Trailing value is right-aligned with a fixed width.",
-  "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetric({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className=\"text-xs text-foreground-400 w-32 flex-shrink-0 truncate\">{label}</span>\n      <Progress value={value} maxValue={max} className=\"flex-1\" />\n      <span className=\"text-xs text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums\">{pct}%</span>\n    </div>\n  )\n}",
+  "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetric({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex items-center gap-3\">\n      <span className=\"text-sm text-foreground-400 w-32 flex-shrink-0 truncate\">{label}</span>\n      <Progress value={value} maxValue={max} className=\"flex-1\" />\n      <span className=\"text-sm text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums\">{pct}%</span>\n    </div>\n  )\n}",
   "variations": [
     {
       "id": "progress-metric-stacked",
       "name": "Stacked",
       "description": "Label above the bar, value below \u2014 for wider display areas where horizontal space is not constrained.",
-      "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricStacked({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium text-foreground-300\">{label}</span>\n        <span className=\"text-xs text-foreground-400 tabular-nums\">{pct}%</span>\n      </div>\n      <Progress value={value} maxValue={max} />\n    </div>\n  )\n}"
+      "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricStacked({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm font-medium text-foreground-300\">{label}</span>\n        <span className=\"text-sm text-foreground-400 tabular-nums\">{pct}%</span>\n      </div>\n      <Progress value={value} maxValue={max} />\n    </div>\n  )\n}"
     },
     {
       "id": "progress-metric-colored",
       "name": "Semantic Color",
       "description": "Bar color shifts to reflect semantic state \u2014 accent for normal, muted warning for high usage.",
-      "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricColored({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  const isHigh = pct >= 80\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium text-foreground-300\">{label}</span>\n        <span className={`text-xs tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`}>\n          {pct}%\n        </span>\n      </div>\n      <Progress\n        value={value}\n        maxValue={max}\n        className={isHigh ? 'text-foreground-300' : undefined}\n      />\n    </div>\n  )\n}"
+      "code": "import { Progress } from 'ui-lab-components'\n\nfunction ProgressMetricColored({ label, value, max = 100 }) {\n  const pct = Math.round((value / max) * 100)\n  const isHigh = pct >= 80\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm font-medium text-foreground-300\">{label}</span>\n        <span className={`text-sm tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`}>\n          {pct}%\n        </span>\n      </div>\n      <Progress\n        value={value}\n        maxValue={max}\n        className={isHigh ? 'text-foreground-300' : undefined}\n      />\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/data/progress-metric/variations/colored/index.tsx

@@ -7,8 +7,8 @@ function ProgressMetricColored({ label, value, max = 100 }: { label: string; val
   return (
     <div className="flex flex-col gap-1.5">
       <div className="flex items-center justify-between">
-        <span className="text-xs font-medium text-foreground-300">{label}</span>
-        <span className={`text-xs tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`}>{pct}%</span>
+        <span className="text-sm font-medium text-foreground-300">{label}</span>
+        <span className={`text-sm tabular-nums ${isHigh ? 'text-foreground-200' : 'text-foreground-400'}`}>{pct}%</span>
       </div>
       <Progress value={value} max={max} className={isHigh ? 'text-foreground-300' : undefined} />
     </div>

package/src/patterns/data/progress-metric/variations/main/index.tsx

@@ -5,9 +5,9 @@ function ProgressMetric({ label, value, max = 100 }: { label: string; value: num
   const pct = Math.round((value / max) * 100);
   return (
     <div className="flex items-center gap-3">
-      <span className="text-xs text-foreground-400 w-32 flex-shrink-0 truncate">{label}</span>
+      <span className="text-sm text-foreground-400 w-32 flex-shrink-0 truncate">{label}</span>
       <Progress value={value} max={max} className="flex-1" />
-      <span className="text-xs text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums">{pct}%</span>
+      <span className="text-sm text-foreground-400 w-8 text-right flex-shrink-0 tabular-nums">{pct}%</span>
     </div>
   );
 }

package/src/patterns/data/progress-metric/variations/stacked/index.tsx

@@ -6,8 +6,8 @@ function ProgressMetricStacked({ label, value, max = 100 }: { label: string; val
   return (
     <div className="flex flex-col gap-1.5">
       <div className="flex items-center justify-between">
-        <span className="text-xs font-medium text-foreground-300">{label}</span>
-        <span className="text-xs text-foreground-400 tabular-nums">{pct}%</span>
+        <span className="text-sm font-medium text-foreground-300">{label}</span>
+        <span className="text-sm text-foreground-400 tabular-nums">{pct}%</span>
       </div>
       <Progress value={value} max={max} />
     </div>

package/src/patterns/form/labeled-field/metadata.json

@@ -12,20 +12,20 @@
     "helper"
   ],
   "complexity": "simple",
-  "notes": "gap-1.5 between label and input is the standard spacing. Helper text uses text-foreground-400 at text-xs. Error state replaces helper text with an error message.",
-  "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledField({ id, label, placeholder, hint }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      {hint && <p className=\"text-xs text-foreground-400\">{hint}</p>}\n    </div>\n  )\n}",
+  "notes": "gap-1.5 between label and input is the standard spacing. Helper text uses text-foreground-400 at text-sm. Error state replaces helper text with an error message.",
+  "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledField({ id, label, placeholder, hint }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      {hint && <p className=\"text-sm text-foreground-400\">{hint}</p>}\n    </div>\n  )\n}",
   "variations": [
     {
       "id": "labeled-field-with-hint",
       "name": "With Hint",
       "description": "Gray helper text below the input providing format or context guidance.",
-      "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithHint({ id, label, placeholder }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      <p className=\"text-xs text-foreground-400\">Shown publicly on your profile.</p>\n    </div>\n  )\n}"
+      "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithHint({ id, label, placeholder }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input id={id} placeholder={placeholder} />\n      <p className=\"text-sm text-foreground-400\">Shown publicly on your profile.</p>\n    </div>\n  )\n}"
     },
     {
       "id": "labeled-field-with-error",
       "name": "With Error",
       "description": "Error message below the input with input in invalid state.",
-      "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithError({ id, label, placeholder, error }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input\n        id={id}\n        placeholder={placeholder}\n        aria-invalid={Boolean(error)}\n        aria-describedby={error ? `${id}-error` : undefined}\n      />\n      {error && (\n        <p id={`${id}-error`} className=\"text-xs text-foreground-300 flex items-center gap-1\">\n          <span className=\"text-foreground-100\">&#9679;</span> {error}\n        </p>\n      )}\n    </div>\n  )\n}"
+      "code": "import { Label, Input } from 'ui-lab-components'\n\nfunction LabeledFieldWithError({ id, label, placeholder, error }) {\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Label htmlFor={id}>{label}</Label>\n      <Input\n        id={id}\n        placeholder={placeholder}\n        aria-invalid={Boolean(error)}\n        aria-describedby={error ? `${id}-error` : undefined}\n      />\n      {error && (\n        <p id={`${id}-error`} className=\"text-sm text-foreground-300 flex items-center gap-1\">\n          <span className=\"text-foreground-100\">&#9679;</span> {error}\n        </p>\n      )}\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/form/labeled-field/variations/main/index.tsx

@@ -6,7 +6,7 @@ function LabeledField({ id, label, placeholder, hint }: { id: string; label: str
     <div className="flex flex-col gap-1.5">
       <Label htmlFor={id}>{label}</Label>
       <Input id={id} placeholder={placeholder} />
-      {hint && <p className="text-xs text-foreground-400">{hint}</p>}
+      {hint && <p className="text-sm text-foreground-400">{hint}</p>}
     </div>
   );
 }

package/src/patterns/form/labeled-field/variations/with-error/index.tsx

@@ -12,7 +12,7 @@ function LabeledFieldWithError({ id, label, placeholder, error }: { id: string;
         aria-describedby={error ? `${id}-error` : undefined}
       />
       {error && (
-        <p id={`${id}-error`} className="text-xs text-foreground-300 flex items-center gap-1">
+        <p id={`${id}-error`} className="text-sm text-foreground-300 flex items-center gap-1">
           <span className="text-foreground-100">&#9679;</span> {error}
         </p>
       )}

package/src/patterns/form/labeled-field/variations/with-hint/index.tsx

@@ -6,7 +6,7 @@ function LabeledFieldWithHint({ id, label, placeholder }: { id: string; label: s
     <div className="flex flex-col gap-1.5">
       <Label htmlFor={id}>{label}</Label>
       <Input id={id} placeholder={placeholder} />
-      <p className="text-xs text-foreground-400">Shown publicly on your profile.</p>
+      <p className="text-sm text-foreground-400">Shown publicly on your profile.</p>
     </div>
   );
 }

package/src/patterns/form/select-row/metadata.json

@@ -14,7 +14,7 @@
   ],
   "complexity": "simple",
   "notes": "items-center (not items-start) here because Select is a single-line control that should align with the label's baseline, not float to the top.",
-  "code": "import { Select, Label } from 'ui-lab-components'\n\nconst options = [\n  { id: 'system', label: 'System' },\n  { id: 'light', label: 'Light' },\n  { id: 'dark', label: 'Dark' },\n]\n\nfunction SelectRow({ id, label, description, defaultValue }) {\n  return (\n    <div className=\"flex items-center justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {options.map((opt) => (\n          <Select.Option key={opt.id} id={opt.id}>{opt.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}",
+  "code": "import { Select, Label } from 'ui-lab-components'\n\nconst options = [\n  { id: 'system', label: 'System' },\n  { id: 'light', label: 'Light' },\n  { id: 'dark', label: 'Dark' },\n]\n\nfunction SelectRow({ id, label, description, defaultValue }) {\n  return (\n    <div className=\"flex items-center justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {options.map((opt) => (\n          <Select.Option key={opt.id} id={opt.id}>{opt.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}",
   "variations": [
     {
       "id": "select-row-inline",
@@ -26,7 +26,7 @@
       "id": "select-row-with-icon",
       "name": "With Icon",
       "description": "Leading icon before the label for visual scanning in longer settings lists.",
-      "code": "import { Select, Label } from 'ui-lab-components'\n\nconst languages = [\n  { id: 'en', label: 'English' },\n  { id: 'fr', label: 'French' },\n  { id: 'de', label: 'German' },\n]\n\nfunction SelectRowWithIcon({ id, label, description, icon, defaultValue }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-400 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {languages.map((lang) => (\n          <Select.Option key={lang.id} id={lang.id}>{lang.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}"
+      "code": "import { Select, Label } from 'ui-lab-components'\n\nconst languages = [\n  { id: 'en', label: 'English' },\n  { id: 'fr', label: 'French' },\n  { id: 'de', label: 'German' },\n]\n\nfunction SelectRowWithIcon({ id, label, description, icon, defaultValue }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-400 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Select defaultSelectedKey={defaultValue}>\n        {languages.map((lang) => (\n          <Select.Option key={lang.id} id={lang.id}>{lang.label}</Select.Option>\n        ))}\n      </Select>\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/form/select-row/variations/main/index.tsx

@@ -12,7 +12,7 @@ function SelectRow({ id, label, description, defaultValue }: { id: string; label
     <div className="flex items-center justify-between gap-4 py-3 border-b border-background-800">
       <div className="flex-1 min-w-0">
         <Label htmlFor={id} className="text-sm font-medium text-foreground-200">{label}</Label>
-        {description && <p className="text-xs text-foreground-400 mt-0.5">{description}</p>}
+        {description && <p className="text-sm text-foreground-400 mt-0.5">{description}</p>}
       </div>
       <Select defaultSelectedKey={defaultValue}>
         <Select.Trigger><Select.Value /></Select.Trigger>

package/src/patterns/form/select-row/variations/with-icon/index.tsx

@@ -22,7 +22,7 @@ function SelectRowWithIcon({ id, label, description, icon, defaultValue }: {
       <div className="w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-400 flex-shrink-0">{icon}</div>
       <div className="flex-1 min-w-0">
         <Label htmlFor={id} className="text-sm font-medium text-foreground-200">{label}</Label>
-        {description && <p className="text-xs text-foreground-400 mt-0.5">{description}</p>}
+        {description && <p className="text-sm text-foreground-400 mt-0.5">{description}</p>}
       </div>
       <Select defaultSelectedKey={defaultValue}>
         <Select.Trigger><Select.Value /></Select.Trigger>

package/src/patterns/form/toggle-setting-row/metadata.json

@@ -13,7 +13,7 @@
   ],
   "complexity": "simple",
   "notes": "items-start on the outer flex so the switch aligns to the first line of the label text, not centered to the full description block.",
-  "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRow({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}",
+  "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRow({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-200 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}",
   "variations": [
     {
       "id": "toggle-setting-row-compact",
@@ -25,7 +25,7 @@
       "id": "toggle-setting-row-destructive",
       "name": "Destructive",
       "description": "Label styled to signal a dangerous or irreversible toggle.",
-      "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRowDestructive({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-100 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-xs text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}"
+      "code": "import { Switch, Label } from 'ui-lab-components'\n\nfunction ToggleSettingRowDestructive({ id, label, description, defaultSelected = false }) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <Label htmlFor={id} className=\"text-sm font-medium text-foreground-100 cursor-pointer\">\n          {label}\n        </Label>\n        {description && (\n          <p className=\"text-sm text-foreground-400 mt-0.5\">{description}</p>\n        )}\n      </div>\n      <Switch id={id} defaultSelected={defaultSelected} />\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/form/toggle-setting-row/variations/destructive/index.tsx

@@ -6,7 +6,7 @@ function ToggleSettingRowDestructive({ id, label, description, defaultSelected =
     <div className="flex items-start justify-between gap-4 py-3 border-b border-background-800">
       <div className="flex-1 min-w-0">
         <Label htmlFor={id} className="text-sm font-medium text-foreground-100 cursor-pointer">{label}</Label>
-        {description && <p className="text-xs text-foreground-400 mt-0.5">{description}</p>}
+        {description && <p className="text-sm text-foreground-400 mt-0.5">{description}</p>}
       </div>
       <Switch id={id} defaultSelected={defaultSelected} />
     </div>

package/src/patterns/form/toggle-setting-row/variations/main/index.tsx

@@ -6,7 +6,7 @@ function ToggleSettingRow({ id, label, description, defaultSelected = false }: {
     <div className="flex items-start justify-between gap-4 py-3 border-b border-background-800">
       <div className="flex-1 min-w-0">
         <Label htmlFor={id} className="text-sm font-medium text-foreground-200 cursor-pointer">{label}</Label>
-        {description && <p className="text-xs text-foreground-400 mt-0.5">{description}</p>}
+        {description && <p className="text-sm text-foreground-400 mt-0.5">{description}</p>}
       </div>
       <Switch id={id} defaultSelected={defaultSelected} />
     </div>

package/src/patterns/interaction/icon-action-bar/variations/compact/index.tsx

@@ -28,7 +28,7 @@ export function IconActionBarCompactDemo() {
     <div className="p-6 flex flex-col gap-0 max-w-md w-full">
       {['api-deploy-prod', 'run-tests', 'seed-db'].map((label) => (
         <div key={label} className="flex items-center justify-between px-2 py-1.5 border-b border-background-800">
-          <span className="text-xs font-mono text-foreground-300">{label}</span>
+          <span className="text-sm font-mono text-foreground-300">{label}</span>
           <IconActionBarCompact onEdit={() => {}} onCopy={() => {}} onDelete={() => {}} />
         </div>
       ))}

package/src/patterns/layout/media-object/metadata.json

@@ -20,7 +20,7 @@
       "id": "media-object-sm",
       "name": "Small",
       "description": "Reduced icon size (w-8 h-8) and tighter gap for dense lists.",
-      "code": "function MediaObjectSm({ icon, title, description }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-300 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"min-w-0\">\n        <p className=\"text-xs font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n    </div>\n  )\n}"
+      "code": "function MediaObjectSm({ icon, title, description }) {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <div className=\"w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-300 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n    </div>\n  )\n}"
     },
     {
       "id": "media-object-lg",
@@ -29,4 +29,4 @@
       "code": "function MediaObjectLg({ icon, title, description }) {\n  return (\n    <div className=\"flex items-start gap-4\">\n      <div className=\"w-14 h-14 flex items-center justify-center rounded-xl bg-background-800 text-foreground-300 flex-shrink-0\">\n        {icon}\n      </div>\n      <div className=\"min-w-0 pt-1\">\n        <p className=\"text-base font-semibold text-foreground-100\">{title}</p>\n        <p className=\"text-sm text-foreground-400 mt-1\">{description}</p>\n      </div>\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/layout/media-object/variations/sm/index.tsx

@@ -12,8 +12,8 @@ function MediaObjectSm({ icon, title, description }: { icon: React.ReactNode; ti
     <div className="flex items-center gap-2">
       <div className="w-8 h-8 flex items-center justify-center rounded-md bg-background-800 text-foreground-300 flex-shrink-0">{icon}</div>
       <div className="min-w-0">
-        <p className="text-xs font-medium text-foreground-200 truncate">{title}</p>
-        <p className="text-xs text-foreground-400 truncate">{description}</p>
+        <p className="text-sm font-medium text-foreground-200 truncate">{title}</p>
+        <p className="text-sm text-foreground-400 truncate">{description}</p>
       </div>
     </div>
   );

package/src/patterns/layout/split-row/metadata.json

@@ -14,19 +14,19 @@
   ],
   "complexity": "simple",
   "notes": "border-b border-background-800 for row separators. flex-shrink-0 on the right side prevents it from wrapping under long titles.",
-  "code": "import { Badge } from 'ui-lab-components'\n\nfunction SplitRow({ title, description, timestamp, status }) {\n  const variant = status === 'active' ? 'success' : status === 'pending' ? 'warning' : 'default'\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors px-2 -mx-2 rounded\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-3 flex-shrink-0\">\n        <span className=\"text-xs text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={variant}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
+  "code": "import { Badge } from 'ui-lab-components'\n\nfunction SplitRow({ title, description, timestamp, status }) {\n  const variant = status === 'active' ? 'success' : status === 'pending' ? 'warning' : 'default'\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors px-2 -mx-2 rounded\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-3 flex-shrink-0\">\n        <span className=\"text-sm text-foreground-400\">{timestamp}</span>\n        <Badge size=\"sm\" variant={variant}>{status}</Badge>\n      </div>\n    </div>\n  )\n}",
   "variations": [
     {
       "id": "split-row-actions",
       "name": "With Actions",
       "description": "Right side shows icon action buttons instead of metadata.",
-      "code": "import { Button, Group } from 'ui-lab-components'\n\nfunction SplitRowActions({ title, description, onEdit, onDelete }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 group\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity\">\n        <Button variant=\"ghost\" size=\"sm\" onPress={onEdit}>Edit</Button>\n        <Button variant=\"ghost\" size=\"sm\" onPress={onDelete}>Delete</Button>\n      </div>\n    </div>\n  )\n}"
+      "code": "import { Button, Group } from 'ui-lab-components'\n\nfunction SplitRowActions({ title, description, onEdit, onDelete }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800 group\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity\">\n        <Button variant=\"ghost\" size=\"sm\" onPress={onEdit}>Edit</Button>\n        <Button variant=\"ghost\" size=\"sm\" onPress={onDelete}>Delete</Button>\n      </div>\n    </div>\n  )\n}"
     },
     {
       "id": "split-row-meta",
       "name": "With Meta",
       "description": "Right side shows two metadata values (e.g. size + date) in a column.",
-      "code": "function SplitRowMeta({ title, description, primaryMeta, secondaryMeta }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-xs text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex flex-col items-end flex-shrink-0\">\n        <span className=\"text-xs font-medium text-foreground-300\">{primaryMeta}</span>\n        <span className=\"text-xs text-foreground-500\">{secondaryMeta}</span>\n      </div>\n    </div>\n  )\n}"
+      "code": "function SplitRowMeta({ title, description, primaryMeta, secondaryMeta }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-background-800\">\n      <div className=\"flex-1 min-w-0\">\n        <p className=\"text-sm font-medium text-foreground-200 truncate\">{title}</p>\n        <p className=\"text-sm text-foreground-400 truncate\">{description}</p>\n      </div>\n      <div className=\"flex flex-col items-end flex-shrink-0\">\n        <span className=\"text-sm font-medium text-foreground-300\">{primaryMeta}</span>\n        <span className=\"text-sm text-foreground-500\">{secondaryMeta}</span>\n      </div>\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/layout/split-row/variations/actions/index.tsx

@@ -6,7 +6,7 @@ function SplitRowActions({ title, description, onEdit, onDelete }: { title: stri
     <div className="flex items-center gap-4 py-3 border-b border-background-800 group">
       <div className="flex-1 min-w-0">
         <p className="text-sm font-medium text-foreground-200 truncate">{title}</p>
-        <p className="text-xs text-foreground-400 truncate">{description}</p>
+        <p className="text-sm text-foreground-400 truncate">{description}</p>
       </div>
       <div className="flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
         <Button variant="ghost" size="sm" onPress={onEdit}>Edit</Button>

package/src/patterns/layout/split-row/variations/main/index.tsx

@@ -7,10 +7,10 @@ function SplitRow({ title, description, timestamp, status }: { title: string; de
     <div className="flex items-center gap-4 py-3 border-b border-background-800 hover:bg-background-900 transition-colors px-2 -mx-2 rounded">
       <div className="flex-1 min-w-0">
         <p className="text-sm font-medium text-foreground-200 truncate">{title}</p>
-        <p className="text-xs text-foreground-400 truncate">{description}</p>
+        <p className="text-sm text-foreground-400 truncate">{description}</p>
       </div>
       <div className="flex items-center gap-3 flex-shrink-0">
-        <span className="text-xs text-foreground-400">{timestamp}</span>
+        <span className="text-sm text-foreground-400">{timestamp}</span>
         <Badge size="sm" variant={variant as 'success' | 'warning' | 'default'}>{status}</Badge>
       </div>
     </div>

package/src/patterns/layout/split-row/variations/meta/index.tsx

@@ -5,11 +5,11 @@ function SplitRowMeta({ title, description, primaryMeta, secondaryMeta }: { titl
     <div className="flex items-center gap-4 py-3 border-b border-background-800">
       <div className="flex-1 min-w-0">
         <p className="text-sm font-medium text-foreground-200 truncate">{title}</p>
-        <p className="text-xs text-foreground-400 truncate">{description}</p>
+        <p className="text-sm text-foreground-400 truncate">{description}</p>
       </div>
       <div className="flex flex-col items-end flex-shrink-0">
-        <span className="text-xs font-medium text-foreground-300">{primaryMeta}</span>
-        <span className="text-xs text-foreground-500">{secondaryMeta}</span>
+        <span className="text-sm font-medium text-foreground-300">{primaryMeta}</span>
+        <span className="text-sm text-foreground-500">{secondaryMeta}</span>
       </div>
     </div>
   );

package/src/patterns/layout/stat-block/metadata.json

@@ -14,19 +14,19 @@
   ],
   "complexity": "simple",
   "notes": "text-foreground-100 for the value \u2014 maximum contrast since the number is the focal point. text-foreground-400 for the label. Trend uses text-accent-400 for positive indicators.",
-  "code": "function StatBlock({ value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <p className=\"text-3xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n      <p className=\"text-sm text-foreground-400\">{label}</p>\n      {trend && (\n        <p className=\"text-xs text-accent-400\">{trend}</p>\n      )}\n    </div>\n  )\n}",
+  "code": "function StatBlock({ value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <p className=\"text-3xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n      <p className=\"text-sm text-foreground-400\">{label}</p>\n      {trend && (\n        <p className=\"text-sm text-accent-400\">{trend}</p>\n      )}\n    </div>\n  )\n}",
   "variations": [
     {
       "id": "stat-block-compact",
       "name": "Compact",
       "description": "Horizontal inline layout \u2014 value and label on one line. For use in dense sidebars and toolbars.",
-      "code": "function StatBlockCompact({ value, label }) {\n  return (\n    <div className=\"flex items-baseline gap-2\">\n      <span className=\"text-xl font-bold text-foreground-100 tabular-nums\">{value}</span>\n      <span className=\"text-xs text-foreground-400\">{label}</span>\n    </div>\n  )\n}"
+      "code": "function StatBlockCompact({ value, label }) {\n  return (\n    <div className=\"flex items-baseline gap-2\">\n      <span className=\"text-xl font-bold text-foreground-100 tabular-nums\">{value}</span>\n      <span className=\"text-sm text-foreground-400\">{label}</span>\n    </div>\n  )\n}"
     },
     {
       "id": "stat-block-with-icon",
       "name": "With Icon",
       "description": "Icon in a pill container above the number. Reinforces metric meaning visually.",
-      "code": "function StatBlockWithIcon({ icon, value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"w-9 h-9 flex items-center justify-center rounded-lg bg-background-800 text-foreground-300\">\n        {icon}\n      </div>\n      <div className=\"flex flex-col gap-0.5\">\n        <p className=\"text-2xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n        <p className=\"text-sm text-foreground-400\">{label}</p>\n        {trend && <p className=\"text-xs text-accent-400\">{trend}</p>}\n      </div>\n    </div>\n  )\n}"
+      "code": "function StatBlockWithIcon({ icon, value, label, trend }) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"w-9 h-9 flex items-center justify-center rounded-lg bg-background-800 text-foreground-300\">\n        {icon}\n      </div>\n      <div className=\"flex flex-col gap-0.5\">\n        <p className=\"text-2xl font-bold text-foreground-100 tabular-nums\">{value}</p>\n        <p className=\"text-sm text-foreground-400\">{label}</p>\n        {trend && <p className=\"text-sm text-accent-400\">{trend}</p>}\n      </div>\n    </div>\n  )\n}"
     }
   ]
-}
+}

package/src/patterns/layout/stat-block/variations/compact/index.tsx

@@ -4,7 +4,7 @@ function StatBlockCompact({ value, label }: { value: string; label: string }) {
   return (
     <div className="flex items-baseline gap-2">
       <span className="text-xl font-bold text-foreground-100 tabular-nums">{value}</span>
-      <span className="text-xs text-foreground-400">{label}</span>
+      <span className="text-sm text-foreground-400">{label}</span>
     </div>
   );
 }

package/src/patterns/layout/stat-block/variations/main/index.tsx

@@ -5,7 +5,7 @@ function StatBlock({ value, label, trend }: { value: string; label: string; tren
     <div className="flex flex-col gap-1">
       <p className="text-3xl font-bold text-foreground-100 tabular-nums">{value}</p>
       <p className="text-sm text-foreground-400">{label}</p>
-      {trend && <p className="text-xs text-accent-400">{trend}</p>}
+      {trend && <p className="text-sm text-accent-400">{trend}</p>}
     </div>
   );
 }

package/src/patterns/layout/stat-block/variations/with-icon/index.tsx

@@ -14,7 +14,7 @@ function StatBlockWithIcon({ icon, value, label, trend }: { icon: React.ReactNod
       <div className="flex flex-col gap-0.5">
         <p className="text-2xl font-bold text-foreground-100 tabular-nums">{value}</p>
         <p className="text-sm text-foreground-400">{label}</p>
-        {trend && <p className="text-xs text-accent-400">{trend}</p>}
+        {trend && <p className="text-sm text-accent-400">{trend}</p>}
       </div>
     </div>
   );