zark-design 1.0.0 → 3.0.0

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

package/templates/jsx/components/StatCard.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+/**
+ * StatCard — KPI unificado (substitui as 4 variantes que tinham no CRM)
+ *
+ * @param label     uppercase mono label
+ * @param value     número/valor (Inter, NUNCA Space Grotesk)
+ * @param sub       texto auxiliar abaixo do valor
+ * @param icon      ReactNode rendered no quadrado colorido
+ * @param iconColor 'green' | 'orange' | 'blue' | 'purple' | 'red' | 'ghost'
+ * @param progress  0–100 (renderiza barra de progresso)
+ * @param critical  boolean — borda vermelha + bg danger-50
+ */
+export function StatCard({
+  label,
+  value,
+  sub,
+  icon,
+  iconColor = 'orange',
+  progress,
+  critical = false,
+  className = '',
+  ...rest
+}) {
+  const cls = ['stat', critical && 'is-critical', className].filter(Boolean).join(' ');
+
+  return (
+    <div className={cls} {...rest}>
+      <div className="stat-head">
+        <span className="stat-label">{label}</span>
+        {icon && <span className={`stat-icon ${iconColor}`}>{icon}</span>}
+      </div>
+      <div className="stat-value">{value}</div>
+      {sub && <div className="stat-sub">{sub}</div>}
+      {typeof progress === 'number' && (
+        <div className="stat-progress">
+          <span style={{ width: `${Math.max(0, Math.min(100, progress))}%` }}/>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default StatCard;

package/templates/jsx/components/TableActions.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * TableActions — linha de ações em data-table (check / edit / delete)
+ * Substitui ícones soltos coloridos por botões com border + hover state.
+ *
+ * @param onConfirm  function (botão verde de check, ex: confirmar pagamento)
+ * @param onEdit     function (lápis cinza)
+ * @param onDelete   function (lixeira vermelha — sempre pedir confirmação no handler)
+ * @param showConfirm boolean — esconde o check (default true)
+ */
+export function TableActions({ onConfirm, onEdit, onDelete, showConfirm = true, className = '' }) {
+  return (
+    <span className={`t-actions ${className}`.trim()}>
+      {showConfirm && onConfirm && (
+        <button className="t-act t-confirm" onClick={onConfirm} title="Confirmar">
+          <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 9l4 4 6-8"/></svg>
+        </button>
+      )}
+      {onEdit && (
+        <button className="t-act t-edit" onClick={onEdit} title="Editar">
+          <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3l3 3-9 9H3v-3l9-9z"/></svg>
+        </button>
+      )}
+      {onDelete && (
+        <button className="t-act t-delete" onClick={onDelete} title="Excluir">
+          <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 5h12M7 5V3h4v2M5 5v10a1 1 0 001 1h6a1 1 0 001-1V5"/></svg>
+        </button>
+      )}
+    </span>
+  );
+}
+
+export default TableActions;

package/templates/jsx/components/Tag.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+/**
+ * Tag — label sem dot indicator
+ * @param tone   default · ember · mono · success · warning · danger · info
+ * @param size   xs · sm · md
+ * @param square boolean — raio --r-xs (mais sharp ainda)
+ */
+export function Tag({ tone = 'default', size = 'sm', square = false, className = '', children, ...rest }) {
+  const cls = [
+    'tag',
+    `tag-${size}`,
+    tone !== 'default' && `tag-${tone}`,
+    square && 'tag-square',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return <span className={cls} {...rest}>{children}</span>;
+}
+
+export default Tag;

package/templates/jsx/components/TagDot.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * TagDot — tag com dot indicator à esquerda. Usado pra status, prioridade,
+ * espaço/cliente. SEMPRE usar este componente em vez do Tag puro quando
+ * representar um estado semântico (não decorativo).
+ *
+ * @param kind   'status' | 'priority' | 'space'
+ * @param value  status:   'todo' | 'progress' | 'review' | 'done' | 'canceled' | 'overdue' | 'paused' | 'followup'
+ *               priority: 'urgent' | 'high' | 'med' | 'low'
+ *               space:    'zark' | 'allsec' | 'vipcar' | 'limppe' | 'gerais' | 'mixshop' | 'vipseg'
+ *
+ * Ordem recomendada num row de tarefa: space → status → priority
+ */
+export function TagDot({ kind, value, className = '', children, ...rest }) {
+  const prefixMap = { status: 's-', priority: 'p-', space: 'sp ' };
+  const prefix = prefixMap[kind] || '';
+  const variantClass = kind === 'space'
+    ? `sp sp-${value}`
+    : `${prefix}${value}`;
+
+  const cls = ['tag-dot', variantClass, className].filter(Boolean).join(' ');
+  return <span className={cls} {...rest}>{children}</span>;
+}
+
+export default TagDot;

package/templates/jsx/components/Toast.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * Toast — pill (na semântica) com bg ink-700 ou success-500, raio --r-md
+ * Usar em micro-confirmações (copied, saved, welcome).
+ *
+ * @param tone  'default' | 'success' | 'danger'
+ * @param icon  ReactNode (default: nenhum) — ex: <img src="zark-icon.png"/>
+ */
+export function Toast({ tone = 'default', icon, className = '', children, ...rest }) {
+  const cls = [
+    'toast',
+    tone === 'success' && 'toast-success',
+    tone === 'danger'  && 'toast-danger',
+    className,
+  ].filter(Boolean).join(' ');
+  return (
+    <div className={cls} {...rest}>
+      {children}
+      {icon}
+    </div>
+  );
+}
+
+export default Toast;

package/templates/jsx/components/Toggle.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Toggle — square switch (no pills)
+ * @param on        boolean — controlled state
+ * @param onChange  function(nextValue: boolean)
+ * @param size      'sm' | 'md'
+ */
+export function Toggle({ on = false, onChange, size = 'md', className = '', ...rest }) {
+  const cls = [
+    'toggle',
+    size === 'sm' && 'toggle-sm',
+    on && 'on',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      type="button"
+      className={cls}
+      onClick={() => onChange?.(!on)}
+      {...rest}
+    >
+      <span className="knob"/>
+    </button>
+  );
+}
+
+export default Toggle;