zark-design 1.0.0 → 2.0.0

package/templates/{icons.jsx → jsx/icons.jsx}

@@ -1,11 +1,16 @@
-// Zark Icon Set — outline, 1.5px stroke, 18px viewBox, currentColor
-// Modeled after the simple line iconography of the source.
+// ZARK Icon Set — outline · stroke 1.5px · viewBox 18×18 · currentColor
+// Usage:
+//   import { Icons } from './icons';
+//   <Icons.Search size={16}/>
+//   <Icons.Bell size={20} style={{ color: 'var(--ember-500)' }}/>
 
-const Ico = ({ d, size = 16, stroke = 1.5, fill = 'none', children, vb = 18, ...rest }) => (
+import React from 'react';
+
+const Ico = ({ size = 16, stroke = 1.5, fill = 'none', children, ...rest }) => (
   <svg
     width={size}
     height={size}
-    viewBox={`0 0 ${vb} ${vb}`}
+    viewBox="0 0 18 18"
     fill={fill}
     stroke="currentColor"
     strokeWidth={stroke}
@@ -14,11 +19,11 @@ const Ico = ({ d, size = 16, stroke = 1.5, fill = 'none', children, vb = 18, ...
     aria-hidden="true"
     {...rest}
   >
-    {d ? <path d={d} /> : children}
+    {children}
   </svg>
 );
 
-const Icons = {
+export const Icons = {
   Search:    (p) => <Ico {...p}><circle cx="8" cy="8" r="5"/><path d="M15 15l-3-3"/></Ico>,
   Home:      (p) => <Ico {...p}><path d="M3 9l6-5 6 5v6a1 1 0 0 1-1 1h-3v-4H7v4H4a1 1 0 0 1-1-1V9z"/></Ico>,
   Play:      (p) => <Ico {...p}><circle cx="9" cy="9" r="6.5"/><path d="M7.5 6.5l4 2.5-4 2.5z" fill="currentColor"/></Ico>,
@@ -53,7 +58,14 @@ const Icons = {
   Stop:      (p) => <Ico {...p}><rect x="4" y="4" width="10" height="10" rx="1.5"/></Ico>,
   Share:     (p) => <Ico {...p}><path d="M9 2v9M5 6l4-4 4 4M3 11v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3"/></Ico>,
   Warning:   (p) => <Ico {...p}><path d="M9 2l7 13H2L9 2z"/><path d="M9 7v3"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/></Ico>,
-  Drag:      (p) => <Ico {...p} stroke={0}><circle cx="6" cy="5" r="1" fill="currentColor"/><circle cx="6" cy="9" r="1" fill="currentColor"/><circle cx="6" cy="13" r="1" fill="currentColor"/><circle cx="12" cy="5" r="1" fill="currentColor"/><circle cx="12" cy="9" r="1" fill="currentColor"/><circle cx="12" cy="13" r="1" fill="currentColor"/></Ico>,
+  Drag:      (p) => (
+    <Ico {...p} stroke={0}>
+      <g fill="currentColor">
+        <circle cx="6" cy="5" r="1"/><circle cx="6" cy="9" r="1"/><circle cx="6" cy="13" r="1"/>
+        <circle cx="12" cy="5" r="1"/><circle cx="12" cy="9" r="1"/><circle cx="12" cy="13" r="1"/>
+      </g>
+    </Ico>
+  ),
   Flame: (p) => (
     <Ico {...p} fill="currentColor" stroke="none">
       <path d="M9 1.5c0 2.5-2 3.5-3.5 5.5C4 9 4 11.5 5.5 13.5 6.5 14.8 8 15.5 9 15.5s2.5-.7 3.5-2c1.5-2 1.5-4.5 0-6.5C11 5 9 4 9 1.5z M9 9c.5 1 1.5 1.2 1.5 2.5S9.8 13.5 9 13.5s-1.5-.7-1.5-2S8.5 10 9 9z" fillRule="evenodd"/>
@@ -61,5 +73,4 @@ const Icons = {
   ),
 };
 
-window.Icons = Icons;
-window.Ico = Ico;
+export default Icons;

package/templates/jsx/index.js

@@ -0,0 +1,31 @@
+// ZARK Design System — barrel export
+// Importe componentes individuais ou o objeto inteiro:
+//   import { Button, TagDot, StatCard } from '@zark/design-system-apps/jsx';
+
+export { Button }                       from './components/Button.jsx';
+export { Input, UrlInputFull }          from './components/Input.jsx';
+export { Tag }                          from './components/Tag.jsx';
+export { TagDot }                       from './components/TagDot.jsx';
+export { Badge }                        from './components/Badge.jsx';
+export { Toggle }                       from './components/Toggle.jsx';
+export { Segmented }                    from './components/Segmented.jsx';
+export { Chips }                        from './components/Chip.jsx';
+export { StatCard }                     from './components/StatCard.jsx';
+export { AlertCritical }                from './components/AlertCritical.jsx';
+export { Funnel, ProgressBar }          from './components/Funnel.jsx';
+export { EmptyState }                   from './components/EmptyState.jsx';
+export { KanbanColumn, KanbanBoard }    from './components/KanbanColumn.jsx';
+export { LeadCard }                     from './components/LeadCard.jsx';
+export { TableActions }                 from './components/TableActions.jsx';
+export { Sidebar, SidebarLink, SidebarSection } from './components/Sidebar.jsx';
+export { Panel }                        from './components/Panel.jsx';
+export { Section }                      from './components/Section.jsx';
+export { Modal }                        from './components/Modal.jsx';
+export { Toast }                        from './components/Toast.jsx';
+export { Announce, Tip }                from './components/Banner.jsx';
+export { CodeBlock }                    from './components/CodeBlock.jsx';
+export { Avatar, AvatarSpace }          from './components/Avatar.jsx';
+export { Kbd }                          from './components/Kbd.jsx';
+export { Spec }                         from './components/Spec.jsx';
+
+export { Icons }                        from './icons.jsx';

package/templates/jsx/tokens.css

@@ -0,0 +1,283 @@
+/* ============================================================
+   ZARK DESIGN SYSTEM — TOKENS
+   v3 · Sistemas/Apps · 2026
+   Importe este arquivo no entry-point do projeto antes de
+   components.css.
+   ============================================================ */
+
+:root {
+  /* ---------- BRAND / EMBER (Liquid Lava scale) ---------- */
+  --ember-50:  #fff3e9;
+  --ember-100: #ffe1c8;
+  --ember-200: #ffc28e;
+  --ember-300: #ffa056;
+  --ember-400: #ff8a3a;
+  --ember-500: #f56f10;   /* LIQUID LAVA — brand primary */
+  --ember-600: #d45e0d;
+  --ember-700: #ad4a09;
+  --ember-800: #843706;
+  --ember-900: #5e2704;
+  --liquid-lava: #f56f10;
+  --dark-void:   #151419;
+  --glucon-grey: #1b1a1e;
+
+  /* ---------- NEUTRALS (warm paper → ink) ---------- */
+  --paper:     #fafaf8;
+  --canvas:    #f5f4f1;
+  --surface:   #ffffff;
+  --line-100:  #f0eeea;
+  --line-200:  #e8e6e1;
+  --line-300:  #d8d5cf;
+
+  --ink-50:    #f4f3f0;
+  --ink-100:   #e8e6e1;
+  --ink-200:   #c8c5bf;
+  --ink-300:   #a09c95;
+  --ink-400:   #6f6b64;
+  --ink-500:   #4a4741;
+  --ink-600:   #2e2c28;
+  --ink-700:   #1a1916;
+  --ink-800:   #111110;
+  --ink-900:   #0a0a09;
+
+  /* ---------- SEMANTIC ---------- */
+  --success-50:  #ecfdf3;
+  --success-500: #10a960;
+  --success-700: #067a44;
+
+  --warning-50:  #fff8e6;
+  --warning-500: #d99000;
+  --warning-700: #9a6500;
+
+  --danger-50:   #fef1f1;
+  --danger-500:  #dc3545;
+  --danger-700:  #a52833;
+
+  --info-50:     #eef5ff;
+  --info-500:    #2f7adc;
+  --info-700:    #1f5ba8;
+
+  --tag-bg:    #fff0e0;
+  --tag-fg:    #ad4a09;
+  --code-bg:   #fff5ea;
+  --code-fg:   #ad4a09;
+
+  /* ---------- SPACE / CLIENTE COLORS (CRM) ---------- */
+  --space-zark:        #f56f10;
+  --space-zark-soft:   #fff3e9;
+  --space-allsec:      #c2410c;
+  --space-allsec-soft: #fff3e9;
+  --space-vipcar:      #ea580c;
+  --space-vipcar-soft: #fff3e9;
+  --space-limppe:      #f59e0b;
+  --space-limppe-soft: #fff8e6;
+  --space-gerais:      #1f2937;
+  --space-gerais-soft: #f4f3f0;
+  --space-mixshop:     #b91c1c;
+  --space-mixshop-soft:#fef1f1;
+  --space-vipseg:      #991b1b;
+  --space-vipseg-soft: #fef1f1;
+
+  /* ---------- TYPOGRAPHY ----------
+     Inter        → UI texto + NÚMEROS (KPIs, valores, contadores)
+     JetBrains    → Código, labels técnicos, kbd
+     Space Grotesk→ TÍTULOS (h1, h2, h3, modal titles, header bands)
+  */
+  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
+  --font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
+  --font-ui:      "Inter", -apple-system, sans-serif;
+
+  /* type scale (px) */
+  --fs-2xs: 10px;
+  --fs-xs:  11px;
+  --fs-sm:  12px;
+  --fs-md:  13px;
+  --fs-base:14px;
+  --fs-lg:  16px;
+  --fs-xl:  18px;
+  --fs-2xl: 22px;
+  --fs-3xl: 28px;
+  --fs-4xl: 36px;
+  --fs-5xl: 48px;
+  --fs-6xl: 64px;
+  --fs-display: 88px;
+
+  /* line-heights */
+  --lh-tight: 1.1;
+  --lh-snug:  1.25;
+  --lh-base:  1.45;
+  --lh-loose: 1.6;
+
+  /* letter spacing */
+  --ls-tight:  -0.02em;
+  --ls-snug:   -0.01em;
+  --ls-normal:  0;
+  --ls-wide:    0.04em;
+  --ls-wider:   0.08em;
+  --ls-widest:  0.14em;
+
+  /* weights */
+  --fw-regular: 400;
+  --fw-medium:  500;
+  --fw-semibold:600;
+  --fw-bold:    700;
+
+  /* ---------- SPACING (4px base) ---------- */
+  --sp-0:  0;
+  --sp-1:  2px;
+  --sp-2:  4px;
+  --sp-3:  6px;
+  --sp-4:  8px;
+  --sp-5:  10px;
+  --sp-6:  12px;
+  --sp-7:  14px;
+  --sp-8:  16px;
+  --sp-10: 20px;
+  --sp-12: 24px;
+  --sp-14: 28px;
+  --sp-16: 32px;
+  --sp-20: 40px;
+  --sp-24: 48px;
+  --sp-32: 64px;
+  --sp-40: 80px;
+  --sp-48: 96px;
+
+  /* ---------- RADII (sem pill) ---------- */
+  --r-xs:  3px;
+  --r-sm:  4px;
+  --r-md:  6px;
+  --r-lg:  8px;
+  --r-xl:  12px;
+  --r-2xl: 16px;
+  --r-3xl: 20px;
+
+  /* ---------- SHADOWS (warm-black, never cool-black) ---------- */
+  --shadow-xs:  0 1px 0 rgba(20, 17, 12, 0.04);
+  --shadow-sm:  0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
+  --shadow-md:  0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
+  --shadow-lg:  0 12px 32px rgba(20, 17, 12, 0.08), 0 2px 6px rgba(20, 17, 12, 0.04);
+  --shadow-xl:  0 24px 64px rgba(20, 17, 12, 0.12), 0 4px 12px rgba(20, 17, 12, 0.05);
+  --shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);
+  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+
+  --ring-focus:      0 0 0 3px rgba(255, 93, 31, 0.20);
+  --ring-focus-soft: 0 0 0 3px rgba(255, 93, 31, 0.12);
+
+  /* ---------- MOTION ---------- */
+  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --t-fast:    120ms;
+  --t-base:    180ms;
+  --t-slow:    280ms;
+  --t-slower:  420ms;
+
+  /* ---------- LAYOUT ---------- */
+  --sidebar-w:  240px;
+  --topbar-h:   56px;
+  --container-max: 1280px;
+}
+
+/* ============================================================
+   DARK THEME
+   ============================================================ */
+[data-theme="dark"] {
+  --ember-50:  #2a1810;
+  --ember-100: #3d2114;
+  --ember-200: #5e2704;
+  --ember-300: #843706;
+  --ember-400: #ad4a09;
+  --ember-500: #f56f10;   /* brand inalterado */
+  --ember-600: #ff8a3a;
+  --ember-700: #ffa056;
+  --ember-800: #ffc28e;
+  --ember-900: #ffe1c8;
+
+  --paper:     #0e0d11;
+  --canvas:    #151419;
+  --surface:   #1b1a1e;
+  --line-100:  #232227;
+  --line-200:  #2c2b32;
+  --line-300:  #3a383f;
+
+  --ink-50:    #1a1916;
+  --ink-100:   #2c2b27;
+  --ink-200:   #4a4741;
+  --ink-300:   #6f6b64;
+  --ink-400:   #a09c95;
+  --ink-500:   #c8c5bf;
+  --ink-600:   #e0ddd6;
+  --ink-700:   #f0ede5;
+  --ink-800:   #f7f5ef;
+  --ink-900:   #fafaf8;
+
+  --success-50: #0f2419;
+  --warning-50: #2a1f08;
+  --danger-50:  #2a1010;
+  --info-50:    #0e1a2c;
+
+  --tag-bg:  #3d2114;
+  --tag-fg:  #ffc28e;
+  --code-bg: #2a1810;
+  --code-fg: #ffa056;
+
+  --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.5);
+  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
+  --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+
+  --ring-focus:      0 0 0 3px rgba(255, 138, 58, 0.30);
+  --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
+}
+
+/* Auto dark via OS, opt-out: <html data-theme="light"> */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --ember-50:  #2a1810;  --ember-100: #3d2114;  --ember-200: #5e2704;
+    --ember-300: #843706;  --ember-400: #ad4a09;  --ember-500: #f56f10;
+    --ember-600: #ff8a3a;  --ember-700: #ffa056;  --ember-800: #ffc28e;
+    --ember-900: #ffe1c8;
+    --paper:     #0e0d11;  --canvas:    #151419;  --surface:   #1b1a1e;
+    --line-100:  #232227;  --line-200:  #2c2b32;  --line-300:  #3a383f;
+    --ink-50:    #1a1916;  --ink-100:   #2c2b27;  --ink-200:   #4a4741;
+    --ink-300:   #6f6b64;  --ink-400:   #a09c95;  --ink-500:   #c8c5bf;
+    --ink-600:   #e0ddd6;  --ink-700:   #f0ede5;  --ink-800:   #f7f5ef;
+    --ink-900:   #fafaf8;
+    --success-50: #0f2419; --warning-50: #2a1f08; --danger-50:  #2a1010; --info-50: #0e1a2c;
+    --tag-bg: #3d2114; --tag-fg: #ffc28e; --code-bg: #2a1810; --code-fg: #ffa056;
+    --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.5);
+    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+    --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
+    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    --ring-focus:      0 0 0 3px rgba(255, 138, 58, 0.30);
+    --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
+  }
+}
+
+/* ============================================================
+   BASE
+   ============================================================ */
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--fs-base);
+  line-height: var(--lh-base);
+  color: var(--ink-700);
+  background: var(--paper);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+::selection { background: var(--ember-200); color: var(--ink-700); }
+a { color: inherit; text-decoration: none; }
+button { font-family: inherit; }
+
+@keyframes zk-spin   { to { transform: rotate(360deg); } }
+@keyframes zk-fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

package/templates/jsx/tokens.js

@@ -0,0 +1,62 @@
+// Tokens em JS — para casos onde você precisa do valor em runtime
+// (animações, charts, inline styles dinâmicos). Para CSS, use tokens.css.
+
+export const tokens = {
+  brand: {
+    liquidLava: '#f56f10',
+    ember: {
+      50: '#fff3e9', 100: '#ffe1c8', 200: '#ffc28e', 300: '#ffa056',
+      400: '#ff8a3a', 500: '#f56f10', 600: '#d45e0d', 700: '#ad4a09',
+      800: '#843706', 900: '#5e2704',
+    },
+  },
+  neutral: {
+    paper: '#fafaf8', canvas: '#f5f4f1', surface: '#ffffff',
+    line: { 100: '#f0eeea', 200: '#e8e6e1', 300: '#d8d5cf' },
+    ink: {
+      50: '#f4f3f0', 100: '#e8e6e1', 200: '#c8c5bf', 300: '#a09c95',
+      400: '#6f6b64', 500: '#4a4741', 600: '#2e2c28', 700: '#1a1916',
+      800: '#111110', 900: '#0a0a09',
+    },
+  },
+  semantic: {
+    success: { 50: '#ecfdf3', 500: '#10a960', 700: '#067a44' },
+    warning: { 50: '#fff8e6', 500: '#d99000', 700: '#9a6500' },
+    danger:  { 50: '#fef1f1', 500: '#dc3545', 700: '#a52833' },
+    info:    { 50: '#eef5ff', 500: '#2f7adc', 700: '#1f5ba8' },
+  },
+  space: {
+    zark:    '#f56f10',
+    allsec:  '#c2410c',
+    vipcar:  '#ea580c',
+    limppe:  '#f59e0b',
+    gerais:  '#1f2937',
+    mixshop: '#b91c1c',
+    vipseg:  '#991b1b',
+  },
+  font: {
+    sans:    '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono:    '"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace',
+    display: '"Space Grotesk", "Inter Tight", "Inter", sans-serif',
+  },
+  radius: {
+    xs: 3, sm: 4, md: 6, lg: 8, xl: 12, '2xl': 16, '3xl': 20,
+  },
+  spacing: {
+    1: 2, 2: 4, 3: 6, 4: 8, 5: 10, 6: 12, 7: 14, 8: 16,
+    10: 20, 12: 24, 14: 28, 16: 32, 20: 40, 24: 48, 32: 64, 40: 80, 48: 96,
+  },
+  motion: {
+    fast: 120, base: 180, slow: 280, slower: 420,
+    easeOut:    'cubic-bezier(0.22, 1, 0.36, 1)',
+    easeInOut:  'cubic-bezier(0.65, 0, 0.35, 1)',
+    easeSpring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  },
+  layout: {
+    sidebarW: 240,
+    topbarH: 56,
+    containerMax: 1280,
+  },
+};
+
+export default tokens;