feat: mejoras componentes UI — card variants, kpi_card slots, sparkline colors, bar_chart horizontal radius

- card: variantes default/borderless/ghost con ring condicional
- kpi_card: props unit, action, chart y delta con label/suffix personalizable
- sparkline: prop colors para colores por barra en variant bar
- bar_chart: radius condicional según orientación horizontal/vertical

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

frontend/functions/ui/kpi_card.md

@@ -3,11 +3,11 @@ name: kpi_card
 kind: component
 lang: typescript
 domain: ui
-version: "1.0.0"
+version: "2.0.0"
 purity: impure
 signature: "KPICard(props: KPICardProps): JSX.Element"
-description: "Card de KPI con label, valor, delta porcentual con color semántico, icono y subtítulo. 3 tamaños."
-tags: [kpi, card, metrics, dashboard, component, ui]
+description: "Card de KPI con label, valor+unidad, delta descriptivo con color semántico, icono, slot de chart inline y action. 3 tamaños."
+tags: [kpi, card, metrics, dashboard, component, ui, sparkline]
 uses_functions: [cn_typescript_core]
 uses_types: []
 returns: []
@@ -27,14 +27,26 @@ props:
     type: "string | number"
     required: true
     description: "Valor principal"
-  - name: delta
-    type: "{ value: number; isPositive: boolean }"
+  - name: unit
+    type: "string"
     required: false
-    description: "Cambio porcentual con dirección"
+    description: "Unidad junto al valor en font menor (ej: k, ms, %)"
+  - name: delta
+    type: "{ value: number; isPositive: boolean; label?: string; suffix?: string }"
+    required: false
+    description: "Cambio con dirección, label descriptivo y sufijo"
   - name: icon
     type: "ReactNode"
     required: false
-    description: "Icono decorativo"
+    description: "Icono a la izquierda del label"
+  - name: action
+    type: "ReactNode"
+    required: false
+    description: "Slot top-right para menú o acciones"
+  - name: chart
+    type: "ReactNode"
+    required: false
+    description: "Slot para mini chart inline junto al valor"
   - name: size
     type: "'sm' | 'default' | 'lg'"
     required: false
@@ -51,6 +63,31 @@ source_file: "frontend/src/components/ui/kpi-card.tsx"
 ## Ejemplo
 
 ```tsx
+import { KPICard, Sparkline } from '@anthropic/frontend-lib'
+
+{/* Básico */}
 <KPICard label="Revenue" value="$12,450" delta={{ value: 12.5, isPositive: true }} />
-<KPICard label="Users" value={1234} size="lg" icon={<UsersIcon />} />
+
+{/* Con unidad separada, delta descriptivo, y mini barras */}
+<KPICard
+  label="Processed Prompts"
+  value="124"
+  unit="k"
+  icon={<ZapIcon className="h-4 w-4" />}
+  delta={{ value: 15, isPositive: true, label: "Prompts Increased by", suffix: "vs yesterday" }}
+  chart={<Sparkline data={[5, 8, 3, 9, 6, 12, 7]} variant="bar" colors={['#3b82f6', '#8b5cf6', '#f59e0b', '#10b981', '#ef4444', '#ec4899', '#06b6d4']} height={32} />}
+  action={<button className="text-muted-foreground hover:text-foreground">...</button>}
+/>
+
+{/* Dashboard dark sin bordes */}
+<KPICard label="Sessions" value={9821} className="border-0 shadow-none" />
 ```
+
+## Notas
+
+- El icono ahora se renderiza a la **izquierda** del label (antes estaba a la derecha).
+- `unit` separa la unidad del valor con font menor para el efecto "124 k" del diseño.
+- `delta.label` y `delta.suffix` permiten texto descriptivo: "Increased by ▲ +15% vs yesterday".
+- `chart` es un slot genérico — pasar un `<Sparkline variant="bar" colors={[...]} />` para mini barras multicolor.
+- `action` es un slot top-right para menú contextual.
+- Usa `cn()` para merge de clases. `className="border-0 shadow-none"` para dashboards dark.