zark-design 1.0.0 → 2.0.0

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(--ember-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(--ember-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;

package/templates/jsx/components/Kbd.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+/**
+ * Kbd — tecla com bg surface, border line-200, font-mono
+ * @example <Kbd>⌘</Kbd><Kbd>K</Kbd>
+ */
+export function Kbd({ children, className = '', ...rest }) {
+  return <span className={`kbd ${className}`.trim()} {...rest}>{children}</span>;
+}
+
+export default Kbd;

package/templates/jsx/components/LeadCard.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+/**
+ * LeadCard — card compacto para Pipeline de Vendas
+ *
+ * @param name       string — nome do lead
+ * @param company    string — sublinha (TR PAULO, Save Car, etc)
+ * @param status     ReactNode — ex: <TagDot kind="status" value="paused">PARADO</TagDot>
+ * @param hot        boolean — mostra flame icon ember antes do nome
+ * @param channels   ReactNode[] — ícones de canal (telefone, instagram, email)
+ * @param time       string — "5d", "2h ago"
+ * @param followUp   string — "Follow-up: 27/04/2026" (renderiza em ember)
+ * @param indicator  string — "Indicado por X"
+ * @param paused     boolean — adiciona border-left amber
+ * @param overdue    boolean — adiciona border-left vermelho
+ */
+export function LeadCard({
+  name,
+  company,
+  status,
+  hot = false,
+  channels,
+  time,
+  followUp,
+  indicator,
+  paused = false,
+  overdue = false,
+  className = '',
+  ...rest
+}) {
+  const cls = [
+    'lead-card',
+    paused && 'is-paused',
+    overdue && 'is-overdue',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={cls} {...rest}>
+      <div className="lead-card-head">
+        <span className="lead-card-name">
+          {hot && (
+            <svg className="flame" width="14" height="14" viewBox="0 0 18 18" fill="currentColor">
+              <path d="M9 2c0 0 4 3 4 7a4 4 0 11-8 0c0-2 1-3 1-3 0 1 1 2 2 2 0-2 1-4 1-6z"/>
+            </svg>
+          )}
+          {name}
+        </span>
+        {status}
+      </div>
+      {company && <div className="lead-card-sub">{company}</div>}
+      {(channels || time) && (
+        <div className="lead-card-meta">
+          {channels && <span className="icons">{channels}</span>}
+          {time && <span style={{ fontFamily: 'var(--font-mono)' }}>{time}</span>}
+        </div>
+      )}
+      {followUp && (
+        <div className="lead-card-followup">
+          <svg width="11" height="11" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <rect x="3" y="4" width="12" height="11" rx="1.5"/>
+            <path d="M3 7h12M6 2v3M12 2v3"/>
+          </svg>
+          {followUp}
+        </div>
+      )}
+      {indicator && (
+        <div className="lead-card-foot">
+          <svg width="11" height="11" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <path d="M3 9c2-3 5-4 6-4s4 1 6 4c-2 3-5 4-6 4s-4-1-6-4z"/>
+          </svg>
+          {indicator}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default LeadCard;

package/templates/jsx/components/Modal.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * Modal — overlay + card max-width 460px, raio 2xl, shadow modal
+ *
+ * @param open       boolean
+ * @param onClose    function
+ * @param title      string (Space Grotesk)
+ * @param description string opcional
+ * @param footer     ReactNode (botões à direita)
+ * @param closeOnOverlay boolean — default true
+ */
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  footer,
+  closeOnOverlay = true,
+  children,
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === 'Escape' && onClose?.();
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const content = (
+    <div
+      className="modal-overlay"
+      onClick={(e) => closeOnOverlay && e.target === e.currentTarget && onClose?.()}
+    >
+      <div className="modal" role="dialog" aria-modal="true">
+        {(title || description) && (
+          <div className="modal-head">
+            {title && (
+              <div className="modal-title-row">
+                <h3 className="modal-title">{title}</h3>
+              </div>
+            )}
+            {description && <p className="modal-desc">{description}</p>}
+          </div>
+        )}
+        {children && <div className="modal-body">{children}</div>}
+        {footer && <div className="modal-foot">{footer}</div>}
+      </div>
+    </div>
+  );
+
+  return typeof document !== 'undefined' ? createPortal(content, document.body) : content;
+}
+
+export default Modal;

package/templates/jsx/components/Panel.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * Panel — card padrão com surface bg, border line-200, raio xl, sombra sm
+ *
+ * @param title    string ou ReactNode
+ * @param kicker   string opcional (uppercase mono à direita)
+ * @param flush    boolean — remove o padding interno (padding: 0)
+ */
+export function Panel({ title, kicker, flush = false, className = '', children }) {
+  const bodyCls = `panel-body ${flush ? 'flush' : ''}`.trim();
+  return (
+    <div className={`panel ${className}`.trim()}>
+      {(title || kicker) && (
+        <div className="panel-head">
+          {title && <div className="panel-title">{title}</div>}
+          {kicker && <div className="panel-kicker">{kicker}</div>}
+        </div>
+      )}
+      <div className={bodyCls}>{children}</div>
+    </div>
+  );
+}
+
+export default Panel;

package/templates/jsx/components/Section.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+/**
+ * Section — bloco de página com eyebrow + título display + descrição
+ *
+ * @param eyebrow      uppercase mono small (ex: "01 — Foundations")
+ * @param title        h2 em Space Grotesk
+ * @param description  texto auxiliar à direita
+ * @param id           anchor para nav
+ */
+export function Section({ eyebrow, title, description, id, children }) {
+  return (
+    <section id={id} className="section">
+      <div className="section-inner">
+        <div className="section-header">
+          <div>
+            {eyebrow && <div className="eyebrow">{eyebrow}</div>}
+            {title && <h2>{title}</h2>}
+          </div>
+          {description && <p className="section-desc">{description}</p>}
+        </div>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export default Section;

package/templates/jsx/components/Segmented.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * Segmented — radio-style horizontal selector
+ * @param items     [{ value, label, icon? }]
+ * @param value     selected value
+ * @param onChange  function(nextValue)
+ */
+export function Segmented({ items = [], value, onChange, className = '' }) {
+  return (
+    <div className={`segmented ${className}`.trim()}>
+      {items.map(it => (
+        <button
+          key={it.value}
+          type="button"
+          className={it.value === value ? 'active' : ''}
+          onClick={() => onChange?.(it.value)}
+        >
+          {it.icon}{it.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default Segmented;

package/templates/jsx/components/Sidebar.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+/**
+ * Sidebar — 240px, bg canvas, com slot para brand/logo no topo.
+ *
+ * @param logo      ReactNode — passe <img src="..." className="zk-sidebar-logo"/>
+ * @param children  qualquer conteúdo (use SidebarLink + SidebarSection)
+ * @param footer    ReactNode opcional fixo no bottom
+ */
+export function Sidebar({ logo, footer, children }) {
+  return (
+    <aside className="zk-sidebar">
+      {logo && <div className="zk-sidebar-brand">{logo}</div>}
+      {children}
+      {footer && (
+        <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line-200)' }}>
+          {footer}
+        </div>
+      )}
+    </aside>
+  );
+}
+
+/** Section header — eyebrow uppercase mono pra agrupar links */
+export function SidebarSection({ children }) {
+  return <div className="zk-sidebar-eyebrow">{children}</div>;
+}
+
+/**
+ * SidebarLink — item de navegação
+ * @param active   boolean
+ * @param icon     ReactNode
+ * @param children label
+ * @param shortcut ReactNode opcional (ex: <Kbd>⌥D</Kbd>)
+ */
+export function SidebarLink({ active = false, icon, shortcut, onClick, href, children }) {
+  const cls = `zk-sidebar-link ${active ? 'active' : ''}`.trim();
+  const content = (
+    <>
+      {icon && <span style={{ display: 'inline-flex', color: active ? 'var(--ember-600)' : 'var(--ink-400)' }}>{icon}</span>}
+      <span style={{ flex: 1 }}>{children}</span>
+      {shortcut}
+    </>
+  );
+  if (href) return <a href={href} className={cls} onClick={onClick}>{content}</a>;
+  return <button type="button" className={cls} onClick={onClick} style={{ background: 'inherit', border: 'none', textAlign: 'left', font: 'inherit' }}>{content}</button>;
+}
+
+export default Sidebar;

package/templates/jsx/components/Spec.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ * Spec — linha label/value separada por dashed line.
+ * Usar dentro de Panel para listar specs técnicas (heights, paddings, tokens).
+ *
+ * @param label  string
+ * @param value  string ou ReactNode (renderizado em mono ink-600)
+ */
+export function Spec({ label, value, className = '' }) {
+  return (
+    <div className={`spec ${className}`.trim()}>
+      <span className="l">{label}</span>
+      <span className="v">{value}</span>
+    </div>
+  );
+}
+
+export default Spec;