zark-design 3.2.0 → 3.3.0

package/templates/jsx/App.example.jsx.hbs

@@ -1,4 +1,4 @@
-// App.example.jsx — exemplo completo demonstrando o design system em uso.
+// 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).
 

package/templates/jsx/components.css

@@ -617,8 +617,10 @@
   cursor: pointer;
   transition: all var(--t-fast) var(--ease-out);
   position: relative;
+  text-decoration: none;
 }
-.zk-sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
+.zk-sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); text-decoration: none; }
+.zk-sidebar-link:visited { color: inherit; text-decoration: none; }
 .zk-sidebar-link.active {
   color: var(--brand-700);
   background: var(--brand-50);
@@ -738,3 +740,553 @@
 .zk-table-row .url  { color: var(--ink-600); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .zk-table-row .num  { color: var(--ink-500); font-family: var(--font-mono); }
 .zk-table-row .date { color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-xs); }
+
+/* ============================================================
+   ADVANCED COMPONENTS v3.3 — adaptados de referencias externas
+   pra identidade ZARK (warm, hairline, sem pill, sem glow, sem
+   backdrop-blur decorativo, sem gradient colorido).
+   ============================================================ */
+
+/* ---------- USER DROPDOWN (menu do usuario, rico) ----------
+   Uso: trigger avatar; abre um card 320px com header (avatar+nome+status),
+   grupos separados por hairline, items com icone+label+direita. */
+
+.zk-user-menu {
+  position: relative;
+  display: inline-block;
+}
+.zk-user-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px; height: 40px;
+  border-radius: 50%;
+  border: 1px solid var(--line-200);
+  background: var(--surface);
+  cursor: pointer;
+  overflow: hidden;
+  transition: box-shadow var(--t-fast) var(--ease-out);
+}
+.zk-user-menu-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-focus);
+}
+.zk-user-menu-trigger img {
+  width: 100%; height: 100%;
+  object-fit: cover;
+}
+
+.zk-user-menu-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 320px;
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 4px;
+  z-index: 60;
+}
+.zk-user-menu-panel .head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 12px 10px;
+}
+.zk-user-menu-panel .head .avatar {
+  width: 40px; height: 40px; border-radius: 50%;
+  border: 1px solid var(--line-200); overflow: hidden;
+  flex-shrink: 0;
+}
+.zk-user-menu-panel .head .avatar img { width: 100%; height: 100%; object-fit: cover; }
+.zk-user-menu-panel .head .who { flex: 1; min-width: 0; }
+.zk-user-menu-panel .head .name {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--ink-700);
+  line-height: 1.2;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.zk-user-menu-panel .head .handle {
+  font-size: var(--fs-xs);
+  color: var(--ink-400);
+  font-family: var(--font-mono);
+  margin-top: 2px;
+}
+.zk-user-menu-panel .head .status-badge {
+  font-family: var(--font-mono);
+  font-size: var(--fs-2xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ls-wider);
+  padding: 2px 8px;
+  border-radius: var(--r-xs);
+  font-weight: 600;
+}
+.zk-user-menu-panel .head .status-badge.online { background: var(--success-50); color: var(--success-700); }
+.zk-user-menu-panel .head .status-badge.busy   { background: var(--danger-50);  color: var(--danger-700); }
+.zk-user-menu-panel .head .status-badge.offline{ background: var(--ink-50);     color: var(--ink-500); }
+
+.zk-user-menu-sep {
+  height: 1px;
+  background: var(--line-100);
+  margin: 4px 0;
+}
+
+.zk-user-menu-group {
+  display: flex; flex-direction: column;
+  padding: 2px;
+}
+.zk-user-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--r-sm);
+  font-size: var(--fs-md);
+  color: var(--ink-700);
+  cursor: pointer;
+  transition: background var(--t-fast);
+  text-decoration: none;
+  border: none;
+  background: transparent;
+  text-align: left;
+  width: 100%;
+  font-family: inherit;
+}
+.zk-user-menu-item:hover { background: var(--ink-50); }
+.zk-user-menu-item .icon {
+  width: 18px; height: 18px;
+  color: var(--ink-400);
+  flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.zk-user-menu-item .label { flex: 1; min-width: 0; }
+.zk-user-menu-item .right {
+  color: var(--ink-400);
+  font-size: var(--fs-xs);
+  font-family: var(--font-mono);
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.zk-user-menu-item.is-danger { color: var(--danger-700); }
+.zk-user-menu-item.is-danger:hover { background: var(--danger-50); }
+.zk-user-menu-item.is-brand .icon { color: var(--brand-500); }
+.zk-user-menu-item .badge-off {
+  font-family: var(--font-mono);
+  font-size: var(--fs-2xs);
+  padding: 2px 6px;
+  border-radius: var(--r-xs);
+  background: var(--brand-50);
+  color: var(--brand-700);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: var(--ls-wider);
+}
+
+/* ---------- TOOLBAR DOCK (barra flutuante de icones) ----------
+   Uso: floating action dock. Icones circulares 32px em container r-lg
+   (nao pill 999px). Toggle pinado. Sem backdrop-blur.
+   Extensivel com Motion em React pra collapse animado. */
+
+.zk-dock {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-lg);
+  padding: 6px;
+  box-shadow: var(--shadow-md);
+  height: 44px;
+  font-family: var(--font-sans);
+}
+.zk-dock.dark {
+  background: var(--ink-800);
+  border-color: var(--ink-700);
+  color: var(--ink-50);
+}
+.zk-dock-btn {
+  position: relative;
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 6px;
+  border-radius: var(--r-md);
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  transition: background var(--t-fast);
+}
+.zk-dock-btn:hover { background: var(--ink-50); }
+.zk-dock.dark .zk-dock-btn:hover { background: rgba(255,255,255,0.08); }
+.zk-dock-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-focus);
+}
+.zk-dock-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }
+.zk-dock-btn .dot {
+  position: absolute;
+  top: 4px; right: 4px;
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--brand-500);
+  border: 1.5px solid var(--surface);
+}
+.zk-dock.dark .zk-dock-btn .dot { border-color: var(--ink-800); }
+.zk-dock-sep {
+  width: 1px; height: 20px;
+  background: var(--line-200);
+  margin: 0 2px;
+  flex-shrink: 0;
+}
+.zk-dock.dark .zk-dock-sep { background: var(--ink-700); }
+
+/* ---------- CHART CARD (viz card com hover reveal) ----------
+   Uso: card 356px width com area de viz 180px em cima + body embaixo.
+   Barras SVG mudam de altura no hover (CSS transition). Sem gradient
+   colorido, sem drop-shadow-xl. Grid sutil hairline. */
+
+.zk-chart-card {
+  position: relative;
+  width: 356px;
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--t-base) var(--ease-out);
+  font-family: var(--font-sans);
+}
+.zk-chart-card:hover { box-shadow: var(--shadow-md); }
+
+.zk-chart-card-viz {
+  position: relative;
+  height: 180px;
+  background: var(--paper);
+  overflow: hidden;
+  background-image:
+    linear-gradient(to right,  var(--line-100) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--line-100) 1px, transparent 1px);
+  background-size: 20px 20px;
+  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 60%, transparent 100%);
+          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 60%, transparent 100%);
+}
+.zk-chart-card-viz svg {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  overflow: visible;
+}
+.zk-chart-card-viz svg rect {
+  transition: y 400ms var(--ease-out), height 400ms var(--ease-out), fill 400ms var(--ease-out);
+}
+.zk-chart-card-viz .tags {
+  position: absolute;
+  top: 12px; left: 12px;
+  display: flex; gap: 6px;
+  z-index: 4;
+  transition: opacity var(--t-slow) var(--ease-out);
+}
+.zk-chart-card-viz .tag {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 8px;
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  font-size: var(--fs-2xs);
+  font-family: var(--font-mono);
+  color: var(--ink-600);
+  font-weight: 600;
+}
+.zk-chart-card-viz .tag .dot {
+  width: 6px; height: 6px; border-radius: 50%;
+}
+.zk-chart-card:hover .zk-chart-card-viz .tags { opacity: 0; }
+
+.zk-chart-card-body {
+  padding: 14px 16px 16px;
+  border-top: 1px solid var(--line-200);
+  display: flex; flex-direction: column; gap: 4px;
+  position: relative;
+}
+.zk-chart-card-body .title {
+  font-family: var(--font-display);
+  font-size: var(--fs-lg);
+  font-weight: 600;
+  color: var(--ink-700);
+  line-height: 1.15;
+  letter-spacing: var(--ls-snug);
+}
+.zk-chart-card-body .desc {
+  font-size: var(--fs-sm);
+  color: var(--ink-400);
+  line-height: 1.4;
+}
+
+/* ---------- ORBIT CARD (KPI card com dots orbitais) ----------
+   Uso: card KPI grande com 2 aneis de dots concentricos, valor total
+   no centro, 2 sub-metricas embaixo, botao secondary full-width.
+   ZARK: sem gradient colorido, sem shadow-lg exagerado. */
+
+.zk-orbit-card {
+  width: 320px;
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font-sans);
+}
+.zk-orbit-card-viz {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 0.85;
+  overflow: hidden;
+  background: var(--paper);
+}
+.zk-orbit-card-viz svg {
+  position: absolute;
+  inset: 0;
+  width: 100%; height: 100%;
+}
+.zk-orbit-card-viz svg circle {
+  opacity: 0.6;
+}
+.zk-orbit-card-viz .center {
+  position: absolute;
+  top: 32%; left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+}
+.zk-orbit-card-viz .center .kicker {
+  font-family: var(--font-mono);
+  font-size: var(--fs-2xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ls-widest);
+  color: var(--ink-400);
+  margin-bottom: 4px;
+}
+.zk-orbit-card-viz .center .value {
+  font-family: var(--font-display);
+  font-size: var(--fs-4xl);
+  font-weight: 800;
+  color: var(--ink-700);
+  line-height: 1;
+  letter-spacing: var(--ls-tight);
+}
+.zk-orbit-card-viz .fade {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 55%;
+  background: linear-gradient(to bottom, transparent 0%, var(--surface) 70%);
+  pointer-events: none;
+}
+.zk-orbit-card-body {
+  padding: 0 20px 16px;
+  margin-top: -32px;
+  position: relative;
+  z-index: 2;
+}
+.zk-orbit-card-metrics {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.zk-orbit-card-metric {
+  display: flex; flex-direction: column; gap: 4px;
+}
+.zk-orbit-card-metric .head {
+  display: flex; align-items: center; gap: 8px;
+}
+.zk-orbit-card-metric .bar {
+  width: 2px; height: 14px; border-radius: 1px;
+}
+.zk-orbit-card-metric .label {
+  font-size: var(--fs-sm);
+  color: var(--ink-400);
+  font-weight: 500;
+}
+.zk-orbit-card-metric .value {
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  color: var(--ink-700);
+  font-family: var(--font-sans);
+}
+.zk-orbit-card-metric .delta {
+  font-size: var(--fs-xs);
+  font-family: var(--font-mono);
+  color: var(--success-700);
+}
+
+/* ---------- WHEEL PICKER (radial time picker) ----------
+   Uso: input central + wheel de 8 wedges com atalhos de +/- tempo.
+   Wheel aparece em hover. ZARK: sem pill 999px no input; usa r-md.
+   Sem drop-shadow-xl; sombra warm sm/md. */
+
+.zk-wheel-picker {
+  position: relative;
+  width: 340px; height: 340px;
+  display: flex;
+  align-items: center; justify-content: center;
+  font-family: var(--font-sans);
+}
+.zk-wheel-picker-wheel {
+  position: absolute;
+  inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0;
+  transform: scale(0.9) rotate(-8deg);
+  transform-origin: center;
+  transition:
+    opacity var(--t-slow) var(--ease-out),
+    transform var(--t-slow) var(--ease-out);
+  pointer-events: none;
+  z-index: 10;
+}
+.zk-wheel-picker:hover .zk-wheel-picker-wheel {
+  opacity: 1;
+  transform: scale(1) rotate(0);
+  pointer-events: auto;
+}
+.zk-wheel-picker-wheel svg { width: 100%; height: 100%; overflow: visible; }
+.zk-wheel-picker-wheel .wedge {
+  fill: var(--surface);
+  stroke: var(--paper);
+  stroke-width: 3;
+  cursor: pointer;
+  transition: fill var(--t-fast) var(--ease-out);
+}
+.zk-wheel-picker-wheel .wedge:hover { fill: var(--ink-50); }
+.zk-wheel-picker-wheel .wedge.pos:hover { fill: var(--brand-50); }
+.zk-wheel-picker-wheel .wedge-label {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 700;
+  pointer-events: none;
+  fill: var(--ink-500);
+}
+.zk-wheel-picker-wheel .wedge-label.pos { fill: var(--brand-700); }
+.zk-wheel-picker-input {
+  position: relative;
+  z-index: 20;
+  background: var(--surface);
+  border: 1px solid var(--line-300);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-sm);
+  padding: 12px 20px;
+  display: inline-flex;
+  align-items: center;
+  transition: box-shadow var(--t-fast) var(--ease-out), border-color var(--t-fast);
+}
+.zk-wheel-picker-input:focus-within {
+  border-color: var(--brand-400);
+  box-shadow: var(--ring-focus);
+}
+.zk-wheel-picker-input input {
+  width: 112px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-display);
+  font-size: var(--fs-2xl);
+  font-weight: 700;
+  color: var(--ink-700);
+  text-align: center;
+  letter-spacing: var(--ls-snug);
+}
+
+/* ---------- Advanced components · ANIMATIONS ---------- */
+
+/* ChartCard: 13 barras com hover targets (bar-1 ... bar-13).
+   Rest state fica no SVG (y/height inline como attrs). Hover state
+   define y/height diferentes via CSS. Transition ja esta na regra
+   base .zk-chart-card-viz svg rect. */
+.zk-chart-card:hover .bar-1  { y: 130; height: 20; fill: var(--viz-cat-1); }
+.zk-chart-card:hover .bar-2  { y: 130; height: 20; }
+.zk-chart-card:hover .bar-3  { y: 120; height: 30; }
+.zk-chart-card:hover .bar-4  { y: 100; height: 50; }
+.zk-chart-card:hover .bar-5  { y: 110; height: 40; fill: var(--viz-cat-1); }
+.zk-chart-card:hover .bar-6  { y: 120; height: 30; }
+.zk-chart-card:hover .bar-7  { y: 130; height: 20; }
+.zk-chart-card:hover .bar-8  { y: 110; height: 40; fill: var(--viz-cat-1); }
+.zk-chart-card:hover .bar-9  { y: 90;  height: 60; }
+.zk-chart-card:hover .bar-10 { y: 80;  height: 70; fill: var(--viz-cat-1); }
+.zk-chart-card:hover .bar-11 { y: 100; height: 40; }
+.zk-chart-card:hover .bar-12 { y: 70;  height: 80; fill: var(--viz-cat-1); }
+.zk-chart-card:hover .bar-13 { y: 100; height: 50; fill: var(--viz-cat-1); }
+
+/* Detalhe flutuante que aparece no hover (sobre a viz) */
+.zk-chart-card-detail {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translate(-50%, 12px);
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-sm);
+  padding: 8px 12px;
+  box-shadow: var(--shadow-sm);
+  opacity: 0;
+  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
+  pointer-events: none;
+  z-index: 6;
+  min-width: 180px;
+}
+.zk-chart-card:hover .zk-chart-card-detail {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+.zk-chart-card-detail .row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
+.zk-chart-card-detail .row .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.zk-chart-card-detail .row .label { color: var(--ink-700); font-weight: 500; }
+.zk-chart-card-detail .row .value { color: var(--ink-400); font-family: var(--font-mono); margin-left: auto; font-size: var(--fs-2xs); }
+
+/* OrbitCard: fade-in dos dots ao entrar em view (load animation).
+   Usa animation-delay via inline --i pra criar stagger de ripple. */
+.zk-orbit-card-viz circle {
+  animation: zk-orbit-in 0.6s var(--ease-out) both;
+  animation-delay: calc(var(--i, 0) * 15ms);
+  transform-origin: center;
+  transform-box: fill-box;
+}
+@keyframes zk-orbit-in {
+  from { opacity: 0; transform: scale(0.3); }
+  to   { opacity: 0.6; transform: scale(1); }
+}
+
+/* Center overlay (Total + valor) aparece depois dos dots */
+.zk-orbit-card-viz .center {
+  animation: zk-orbit-center-in 0.5s var(--ease-out) 0.7s both;
+}
+@keyframes zk-orbit-center-in {
+  from { opacity: 0; transform: translate(-50%, -40%); }
+  to   { opacity: 1; transform: translate(-50%, -50%); }
+}
+
+/* Metrics slide up depois do centro */
+.zk-orbit-card-metric {
+  animation: zk-orbit-metric-in 0.45s var(--ease-out) 1.05s both;
+}
+.zk-orbit-card-metric:nth-child(2) { animation-delay: 1.25s; }
+@keyframes zk-orbit-metric-in {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* UserDropdown: mount animation da panel (fade + drop) */
+.zk-user-menu-panel {
+  animation: zk-menu-in var(--t-base) var(--ease-out) both;
+  transform-origin: top right;
+}
+@keyframes zk-menu-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+/* Items do menu com hover state ja funciona; adiciona micro-slide no icone */
+.zk-user-menu-item .icon { transition: transform var(--t-fast) var(--ease-out); }
+.zk-user-menu-item:hover .icon { transform: translateX(2px); }
+
+/* ToolbarDock: micro-scale no botao pressed */
+.zk-dock-btn { transition: background var(--t-fast), transform 90ms var(--ease-out); }
+.zk-dock-btn:active { transform: scale(0.92); }