zark-design 1.0.0 → 2.0.0

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;