zark-design 1.0.0 → 3.0.0

package/templates/jsx/App.example.jsx

@@ -0,0 +1,229 @@
+// App.example.jsx — exemplo completo demonstrando o design system em uso.
+// Replique a estrutura no seu projeto. Lembre de importar tokens.css + components.css
+// no entry-point (main.jsx / App.jsx).
+
+import React, { useState } from 'react';
+import './tokens.css';
+import './components.css';
+
+import {
+  Button,
+  Input,
+  Tag,
+  TagDot,
+  Badge,
+  Toggle,
+  Segmented,
+  Chips,
+  StatCard,
+  AlertCritical,
+  Funnel,
+  EmptyState,
+  KanbanBoard,
+  KanbanColumn,
+  LeadCard,
+  TableActions,
+  Sidebar,
+  SidebarLink,
+  SidebarSection,
+  Panel,
+  Section,
+  Modal,
+  Toast,
+  Announce,
+  Tip,
+  CodeBlock,
+  Avatar,
+  AvatarSpace,
+  Kbd,
+  Spec,
+  Icons,
+} from './index';
+
+import logoZark from './assets/logo-zark-laranja.png';
+import iconZark from './assets/zark-icon.png';
+
+export default function App() {
+  const [tab, setTab] = useState('hoje');
+  const [filter, setFilter] = useState('todas');
+  const [stealth, setStealth] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'var(--sidebar-w) 1fr', minHeight: '100vh' }}>
+
+      {/* SIDEBAR */}
+      <Sidebar logo={<img src={logoZark} alt="ZARK" className="zk-sidebar-logo"/>}>
+        <SidebarSection>Workspace</SidebarSection>
+        <SidebarLink active icon={<Icons.Home/>} shortcut={<Kbd>⌥D</Kbd>}>Dashboard</SidebarLink>
+        <SidebarLink icon={<Icons.Activity/>} shortcut={<Kbd>⌥P</Kbd>}>Pipeline</SidebarLink>
+        <SidebarLink icon={<Icons.Usage/>} shortcut={<Kbd>⌥T</Kbd>}>Painel de Equipe</SidebarLink>
+        <SidebarLink icon={<Icons.Docs/>} shortcut={<Kbd>⌥F</Kbd>}>Financeiro</SidebarLink>
+
+        <SidebarSection>Compartilhados</SidebarSection>
+        <SidebarLink icon={<AvatarSpace name="Z" spaceKey="zark" size={18}/>}>ZARK</SidebarLink>
+        <SidebarLink icon={<AvatarSpace name="V" spaceKey="vipcar" size={18}/>}>VIPCAR</SidebarLink>
+        <SidebarLink icon={<AvatarSpace name="L" spaceKey="limppe" size={18}/>}>LIMPPE TEC</SidebarLink>
+      </Sidebar>
+
+      {/* MAIN */}
+      <main style={{ padding: 32 }}>
+
+        {/* Header */}
+        <header style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          marginBottom: 32,
+        }}>
+          <div>
+            <div className="eyebrow">Hoje · 05 mai 2026</div>
+            <h1 style={{
+              fontFamily: 'var(--font-display)',
+              fontSize: 'var(--fs-3xl)',
+              fontWeight: 700, margin: 0, color: 'var(--ink-700)',
+              letterSpacing: 'var(--ls-tight)',
+            }}>Olá, Renan</h1>
+          </div>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <Segmented
+              value={tab}
+              onChange={setTab}
+              items={[
+                { value: 'hoje', label: 'Hoje' },
+                { value: 'semana', label: 'Semana' },
+                { value: 'todas', label: 'Todas' },
+              ]}
+            />
+            <Button variant="primary" icon={<Icons.Plus size={14}/>} onClick={() => setModalOpen(true)}>
+              Nova Tarefa
+            </Button>
+          </div>
+        </header>
+
+        {/* Stats */}
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
+          <StatCard label="CONCLUÍDAS · SEMANA" value="8" sub="+18% vs anterior" iconColor="green" icon={<Icons.Check size={14}/>}/>
+          <StatCard label="CRIADAS · SEMANA"    value="19" sub="média 2.7/dia"  iconColor="orange" icon={<Icons.Plus size={14}/>}/>
+          <StatCard label="ATIVAS · TOTAL"      value="45" sub="12 esta semana" iconColor="blue"   icon={<Icons.Activity size={14}/>}/>
+          <StatCard label="ATRASADAS"           value="8"  sub="requer ação imediata" iconColor="red" icon={<Icons.Warning size={14}/>} critical/>
+        </div>
+
+        {/* Critical alert */}
+        <div style={{ marginBottom: 32 }}>
+          <AlertCritical
+            title="8 tarefas em atraso"
+            items={[
+              { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'Enviar proposta para TR PAULO', source: 'ZARK · Tarefas', meta: '3 dias' },
+              { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'CHAMANDO O HEXA!', source: 'VIPCAR · Acompanhamento', meta: '3 dias' },
+            ]}
+            footer="+ 6 outras tarefas atrasadas"
+          />
+        </div>
+
+        {/* Pipeline funnel */}
+        <Panel title="Funil de Vendas" kicker="Pipeline · maio">
+          <Funnel stages={[
+            { label: 'Novo',         count: 0, color: '#3b82f6',          percent: 0 },
+            { label: 'Qualificando', count: 4, color: '#7c3aed',          percent: 36 },
+            { label: 'Reunião',      count: 1, color: 'var(--brand-500)', percent: 18 },
+            { label: 'Proposta',     count: 0, color: '#06b6d4',          percent: 0 },
+            { label: 'Won',          count: 0, color: 'var(--success-500)', percent: 0 },
+            { label: 'Perdido',      count: 0, color: 'var(--ink-300)',   percent: 0 },
+          ]}/>
+        </Panel>
+
+        <div style={{ height: 24 }}/>
+
+        {/* Filter chips + Kanban */}
+        <Chips
+          value={filter}
+          onChange={setFilter}
+          items={[
+            { value: 'todas',    label: 'TODAS',     count: 7 },
+            { value: 'urgentes', label: 'URGENTES',  count: 4 },
+            { value: 'paradas',  label: 'PARADAS',   count: 5 },
+          ]}
+        />
+
+        <div style={{ height: 16 }}/>
+
+        <KanbanBoard>
+          <KanbanColumn title="A FAZER" count={3} dotColor="#9a6500" onAddClick={() => alert('Nova tarefa')}>
+            <LeadCard
+              hot
+              name="Tiffany Dias"
+              status={<TagDot kind="status" value="paused">PARADO</TagDot>}
+              channels={<><Icons.Bell size={12}/><Icons.Globe size={12}/></>}
+              time="5d"
+              indicator="Indicado por Karol"
+              paused
+            />
+          </KanbanColumn>
+
+          <KanbanColumn title="EM PROGRESSO" count={1} dotColor="var(--brand-500)" onAddClick={() => {}}>
+            <LeadCard
+              hot
+              name="Paulo Turismo"
+              company="TR PAULO"
+              status={<TagDot kind="status" value="paused">PARADO</TagDot>}
+              channels={<Icons.Bell size={12}/>}
+              time="5d"
+              followUp="Follow-up: 27/04/2026"
+              indicator="Indicado por Gustavo"
+              paused
+            />
+          </KanbanColumn>
+
+          <KanbanColumn title="EM REVISÃO" count={0} dotColor="var(--info-500)" onAddClick={() => {}}>
+            <EmptyState text="Arraste tarefas aqui" style={{ minHeight: 120 }}/>
+          </KanbanColumn>
+        </KanbanBoard>
+
+        <div style={{ height: 32 }}/>
+
+        {/* Inputs / settings demo */}
+        <Panel title="Inputs & controles">
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', marginBottom: 16 }}>
+            <Input size="sm" placeholder="Buscar tarefas..." icon={<Icons.Search size={14}/>} suffix={<Kbd>⌘K</Kbd>}/>
+            <Toggle on={stealth} onChange={setStealth}/>
+            <span style={{ fontSize: 'var(--fs-md)', color: 'var(--ink-600)' }}>Modo stealth</span>
+            <Tag tone="ember" size="sm">NEW</Tag>
+          </div>
+
+          <div style={{ display: 'flex', gap: 8 }}>
+            <Button variant="primary"   icon={<Icons.Plus size={14}/>}>Novo Lead</Button>
+            <Button variant="secondary" icon={<Icons.Filter size={14}/>}>Filtrar</Button>
+            <Button variant="soft"      icon={<Icons.Sparkles size={14}/>}>Try with AI</Button>
+            <Button variant="ghost"     icon={<Icons.Help size={14}/>}>Help</Button>
+          </div>
+
+          <Spec label="Heights" value="22 / 28 / 32 / 40 px"/>
+          <Spec label="Primary fill" value="brand-600 → brand-700 hover"/>
+        </Panel>
+
+        <div style={{ height: 32 }}/>
+
+        {/* Toast */}
+        <Toast tone="default" icon={<img src={iconZark} alt="ZARK" style={{ height: 14, filter: 'brightness(0) invert(1)' }}/>}>
+          Welcome to ZARK!
+        </Toast>
+
+        {/* Modal */}
+        <Modal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          title="Vamos começar"
+          description="Complete essas ações pra ganhar créditos bônus."
+          footer={
+            <>
+              <Button variant="ghost" onClick={() => setModalOpen(false)}>Cancelar</Button>
+              <Button variant="primary" onClick={() => setModalOpen(false)}>Continuar</Button>
+            </>
+          }
+        >
+          <p style={{ margin: 0, color: 'var(--ink-500)' }}>Conteúdo do modal aqui.</p>
+        </Modal>
+
+      </main>
+    </div>
+  );
+}

package/templates/jsx/components/AlertCritical.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+/**
+ * AlertCritical — banner pleno vermelho pra ação imediata
+ * Padrão derivado do "8 TAREFAS EM ATRASO" do dashboard.
+ *
+ * @param title    string ou ReactNode (renderizado no header)
+ * @param items    [{ tag, label, source, meta }]
+ * @param footer   string (ex: "+ 4 outras tarefas atrasadas")
+ * @param icon     opcional — default usa um ⚠
+ */
+export function AlertCritical({ title, items = [], footer, icon, onItemClick }) {
+  return (
+    <div className="alert-critical">
+      <div className="alert-critical-head">
+        {icon || (
+          <svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 2L1 15h16L9 2zM9 7v4M9 13v0.5"/>
+          </svg>
+        )}
+        {title}
+      </div>
+      <div className="alert-critical-list">
+        {items.map((it, i) => (
+          <div
+            key={i}
+            className="alert-critical-row"
+            onClick={() => onItemClick?.(it, i)}
+            style={onItemClick ? { cursor: 'pointer' } : undefined}
+          >
+            {it.tag}
+            <span style={{ fontWeight: 500 }}>{it.label}</span>
+            <span className="src">{it.source}</span>
+            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>{it.meta}</span>
+          </div>
+        ))}
+      </div>
+      {footer && <div className="alert-critical-foot">{footer}</div>}
+    </div>
+  );
+}
+
+export default AlertCritical;

package/templates/jsx/components/Avatar.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * Avatar — circle (default) ou square (square=true)
+ *
+ * @param name    string — primeira letra é renderizada
+ * @param size    number (px)  default 24
+ * @param color   CSS color    default --brand-500
+ * @param square  boolean — usa raio --r-sm em vez de 50%
+ * @param src     string — se passada, renderiza <img>
+ */
+export function Avatar({ name, size = 24, color = 'var(--brand-500)', square = false, src, className = '', ...rest }) {
+  const cls = ['avatar', square && 'avatar-sq', className].filter(Boolean).join(' ');
+  const style = {
+    width: size,
+    height: size,
+    background: color,
+    fontSize: Math.round(size * 0.42),
+    ...rest.style,
+  };
+
+  if (src) {
+    return <img src={src} alt={name || ''} className={cls} style={{ ...style, objectFit: 'cover' }}/>;
+  }
+  return <span className={cls} style={style}>{(name || '?').charAt(0).toUpperCase()}</span>;
+}
+
+/**
+ * AvatarSpace — square avatar com cor fixa por espaço/cliente
+ * @param spaceKey  'zark' | 'allsec' | 'vipcar' | 'limppe' | 'gerais' | 'mixshop' | 'vipseg'
+ */
+export function AvatarSpace({ name, spaceKey = 'zark', size = 24 }) {
+  const color = `var(--space-${spaceKey})`;
+  return (
+    <span className="av-space" style={{ background: color, width: size, height: size, fontSize: Math.round(size * 0.46) }}>
+      {(name || spaceKey).charAt(0).toUpperCase()}
+    </span>
+  );
+}
+
+export default Avatar;

package/templates/jsx/components/Badge.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ * Badge — small notification counter
+ * @param tone  'ember' (default) | 'ink'
+ */
+export function Badge({ count, tone = 'ember', className = '', ...rest }) {
+  const cls = ['badge', tone === 'ink' && 'badge-ink', className].filter(Boolean).join(' ');
+  return <span className={cls} {...rest}>{count}</span>;
+}
+
+export default Badge;

package/templates/jsx/components/Banner.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+/**
+ * Announce — top announcement bar (full-width, neutro)
+ */
+export function Announce({ children, className = '', ...rest }) {
+  return <div className={`announce ${className}`.trim()} {...rest}>{children}</div>;
+}
+
+/**
+ * Tip — in-page tip card com ícone ember + título + descrição
+ *
+ * @param eyebrow string (uppercase mono small)
+ * @param title   string
+ * @param desc    string
+ * @param icon    ReactNode
+ * @param onClose function opcional (mostra close X)
+ */
+export function Tip({ eyebrow, title, desc, icon, onClose }) {
+  return (
+    <div className="tip">
+      {icon && <span className="ico">{icon}</span>}
+      <div style={{ flex: 1 }}>
+        {eyebrow && <div className="what">{eyebrow}</div>}
+        {title && <div className="title">{title}</div>}
+        {desc && <div className="desc">{desc}</div>}
+      </div>
+      {onClose && (
+        <svg
+          width="12" height="12" viewBox="0 0 18 18"
+          fill="none" stroke="currentColor" strokeWidth="1.5"
+          style={{ color: 'var(--ink-300)', cursor: 'pointer' }}
+          onClick={onClose}
+        >
+          <path d="M5 5l8 8M13 5l-8 8"/>
+        </svg>
+      )}
+    </div>
+  );
+}
+
+export default Announce;

package/templates/jsx/components/Button.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+/**
+ * Button — 5 variants × 4 sizes
+ * @param variant   primary · secondary · soft · ghost · danger
+ * @param size      xs · sm · md · lg
+ * @param icon      ReactNode rendered before children
+ * @param iconRight ReactNode rendered after children
+ * @param iconOnly  boolean — square button with no padding
+ * @param full      boolean — width: 100%
+ * @param loading   boolean — replaces icon with spinner
+ */
+export function Button({
+  variant = 'secondary',
+  size = 'md',
+  icon,
+  iconRight,
+  iconOnly = false,
+  full = false,
+  loading = false,
+  className = '',
+  children,
+  ...rest
+}) {
+  const cls = [
+    'btn',
+    `btn-${variant}`,
+    `btn-${size}`,
+    iconOnly && 'btn-icon-only',
+    full && 'btn-full',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button className={cls} {...rest}>
+      {loading ? <span className="spinner"/> : icon}
+      {children}
+      {iconRight}
+    </button>
+  );
+}
+
+export default Button;

package/templates/jsx/components/Chip.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+/**
+ * Chip — filter pill-style (mas raio sm, sem pill)
+ * @param items     [{ value, label, count?, icon? }]
+ * @param value     selected value
+ * @param onChange  function(nextValue)
+ */
+export function Chips({ items = [], value, onChange, className = '' }) {
+  return (
+    <div className={`chips ${className}`.trim()}>
+      {items.map(it => (
+        <button
+          key={it.value}
+          type="button"
+          className={`chip ${it.value === value ? 'active' : ''}`.trim()}
+          onClick={() => onChange?.(it.value)}
+        >
+          {it.icon}
+          {it.label}
+          {typeof it.count === 'number' && <span className="count">({it.count})</span>}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default Chips;

package/templates/jsx/components/CodeBlock.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+/**
+ * CodeBlock — bg --code-bg warm, font-mono, com botões eye/copy no canto.
+ * Pode receber tanto string quanto JSX (pra syntax highlighting custom via spans .k .s).
+ *
+ * @param code        string ou ReactNode
+ * @param onCopy      function — handler do copy
+ * @param onPreview   function — handler do eye
+ */
+export function CodeBlock({ code, onCopy, onPreview, className = '' }) {
+  const handleCopy = () => {
+    if (onCopy) return onCopy();
+    if (typeof code === 'string' && navigator.clipboard) {
+      navigator.clipboard.writeText(code);
+    }
+  };
+
+  return (
+    <div className={`code-block ${className}`.trim()}>
+      <div className="copy">
+        {onPreview && (
+          <button className="btn btn-ghost btn-icon-only btn-xs" onClick={onPreview} title="Preview">
+            <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <path d="M1 9c2-3.5 5-5 8-5s6 1.5 8 5c-2 3.5-5 5-8 5s-6-1.5-8-5z"/>
+              <circle cx="9" cy="9" r="2"/>
+            </svg>
+          </button>
+        )}
+        <button className="btn btn-ghost btn-icon-only btn-xs" onClick={handleCopy} title="Copiar">
+          <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <rect x="6" y="6" width="9" height="9" rx="1.5"/>
+            <path d="M3 12V4a1 1 0 011-1h8"/>
+          </svg>
+        </button>
+      </div>
+      {typeof code === 'string' ? <pre style={{ margin: 0 }}>{code}</pre> : code}
+    </div>
+  );
+}
+
+export default CodeBlock;

package/templates/jsx/components/EmptyState.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * EmptyState — dashed border + sparkle/icon + texto muted
+ * Usado em colunas Kanban vazias, drop zones do Pipeline, listas sem dados.
+ *
+ * @param icon   ReactNode — default usa Sparkles
+ * @param text   string ou ReactNode
+ * @param action ReactNode opcional (botão, link)
+ */
+export function EmptyState({ icon, text, action, style, ...rest }) {
+  return (
+    <div className="empty-state" style={style} {...rest}>
+      <div className="ico">
+        {icon || (
+          <svg width="24" height="24" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/>
+          </svg>
+        )}
+      </div>
+      {text && <div className="text">{text}</div>}
+      {action}
+    </div>
+  );
+}
+
+export default EmptyState;

package/templates/jsx/components/Funnel.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+/**
+ * Funnel — horizontal segmented funnel (Pipeline de Vendas)
+ *
+ * @param stages [{ label, count, color, percent }]
+ *  color   — qualquer CSS color (sugestão: var(--brand-500), var(--success-500), etc)
+ *  percent — 0-100, largura proporcional do segmento
+ */
+export function Funnel({ stages = [] }) {
+  const total = stages.reduce((s, x) => s + (x.percent || 0), 0);
+  const fillRest = Math.max(0, 100 - total);
+
+  return (
+    <div>
+      <div className="funnel">
+        {stages.map((s, i) => (
+          <span key={i} style={{ width: `${s.percent || 0}%`, background: s.color }}/>
+        ))}
+        {fillRest > 0 && <span style={{ width: `${fillRest}%`, background: 'var(--ink-200)' }}/>}
+      </div>
+      <div className="funnel-stages" style={{ gridTemplateColumns: `repeat(${stages.length}, 1fr)` }}>
+        {stages.map((s, i) => (
+          <div key={i} className="funnel-stage">
+            <span className="funnel-stage-label" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: s.color }}/>
+              {s.label}
+            </span>
+            <span className="funnel-stage-count">{s.count}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ProgressBar — linear progress (meta, recebido vs previsto)
+ * @param value     0-100
+ * @param tone      'success' (default) | 'ember' | 'danger'
+ */
+export function ProgressBar({ value = 0, tone = 'success', height = 4 }) {
+  const colorMap = {
+    success: 'var(--success-500)',
+    ember:   'var(--brand-500)',
+    danger:  'var(--danger-500)',
+  };
+  return (
+    <div className="stat-progress" style={{ height }}>
+      <span style={{ width: `${Math.max(0, Math.min(100, value))}%`, background: colorMap[tone] }}/>
+    </div>
+  );
+}
+
+export default Funnel;

package/templates/jsx/components/Input.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+/**
+ * Input — text input with optional icon and suffix
+ * @param size    sm · md · lg
+ * @param icon    ReactNode rendered before input
+ * @param suffix  ReactNode rendered after input
+ * @param mono    boolean — monospace font (API keys, codes)
+ * @param invalid boolean — danger border + ring
+ */
+export function Input({
+  size = 'md',
+  icon,
+  suffix,
+  mono = false,
+  invalid = false,
+  className = '',
+  ...rest
+}) {
+  const cls = [
+    'input',
+    `input-${size}`,
+    mono && 'mono',
+    invalid && 'invalid',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <label className={cls}>
+      {icon && <span className="ico">{icon}</span>}
+      <input {...rest}/>
+      {suffix && <span className="suffix">{suffix}</span>}
+    </label>
+  );
+}
+
+/**
+ * UrlInputFull — full-width URL input with scheme prefix
+ * Substitui o antigo .url-pill (search-style)
+ */
+export function UrlInputFull({ scheme = 'https://', placeholder, schemeIcon, ...rest }) {
+  return (
+    <div className="url-input-full">
+      <span className="scheme">
+        {schemeIcon}
+        {scheme}
+      </span>
+      <input placeholder={placeholder} {...rest}/>
+    </div>
+  );
+}
+
+export default Input;

package/templates/jsx/components/KanbanColumn.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+/**
+ * KanbanColumn — coluna de Kanban com header + dot colorido + contador
+ *
+ * @param title       string
+ * @param count       number
+ * @param dotColor    CSS color (segue cor do status)
+ * @param onAddClick  function — handler do "+ Nova tarefa"
+ * @param addLabel    string — default "+ Nova tarefa"
+ * @param children    cards (LeadCard, custom...) ou EmptyState
+ */
+export function KanbanColumn({
+  title,
+  count,
+  dotColor = 'var(--ink-300)',
+  onAddClick,
+  addLabel = 'Nova tarefa',
+  children,
+}) {
+  return (
+    <div className="k-col">
+      <div className="k-col-head">
+        <span className="lh">
+          <span className="dot" style={{ background: dotColor }}/>
+          {title}
+        </span>
+        <span className="count">{count}</span>
+      </div>
+      {onAddClick && (
+        <button className="k-add" onClick={onAddClick}>
+          <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 4v10M4 9h10"/>
+          </svg>
+          {addLabel}
+        </button>
+      )}
+      {children}
+    </div>
+  );
+}
+
+/**
+ * KanbanBoard — wrapper opcional que aplica o display:flex correto + scroll horizontal.
+ * Use se quiser; também pode renderizar colunas direto num div.kanban próprio.
+ */
+export function KanbanBoard({ children, className = '', ...rest }) {
+  return <div className={`kanban ${className}`.trim()} {...rest}>{children}</div>;
+}
+
+export default KanbanColumn;