@gyramais/gyra-design 0.2.43 → 0.2.45

package/dist/emails/balance-sheet-finalized/components/Card/Card.d.ts

@@ -15,6 +15,12 @@ type CardProps = {
     media?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * Placeholder exibido no lugar do conteudo enquanto `loading`. O padrao e um
+     * skeleton de linhas de texto; passe um skeleton com a forma do conteudo real
+     * (grafico, tabela, lista) quando isso ajudar a evitar o pulo de layout.
+     */
+    loadingContent?: React.ReactNode;
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
@@ -23,5 +29,5 @@ type CardProps = {
     headerContent?: React.ReactNode;
     children?: React.ReactNode;
 };
-declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
+declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, loadingContent, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
 export { Card };

package/dist/emails/balance-sheet-finalized/components/Empty/Empty.d.ts

@@ -3,8 +3,25 @@ import "./index.css";
 type EmptyProps = {
     id?: string;
     className?: string;
+    /**
+     * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do
+     * tipo "primeiro uso, ainda nao ha nada aqui", onde ela vem acompanhada de
+     * um titulo e de uma acao.
+     *
+     * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:
+     * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e
+     * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.
+     */
     icon?: React.ReactNode;
     text?: string;
 };
-declare const Empty: ({ id, className, icon, text, }: EmptyProps) => React.JSX.Element;
+/**
+ * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.
+ *
+ * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o
+ * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia
+ * ("nenhuma sanção encontrada"), entao nao deve parecer erro nem falha de
+ * carregamento.
+ */
+declare const Empty: ({ id, className, icon, text }: EmptyProps) => React.JSX.Element;
 export { Empty };

package/dist/emails/balance-sheet-finalized/components/Skeleton/Skeleton.d.ts

@@ -1,18 +1,40 @@
 import React from "react";
 import "./index.css";
-type SkeletonVariant = "text" | "rect" | "circle";
 type SkeletonProps = {
     id?: string;
     className?: string;
-    /** Formato do bloco. `text` = linha fina; `rect` = bloco; `circle` = avatar. */
-    variant?: SkeletonVariant;
+    /**
+     * Forma do placeholder:
+     * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)
+     * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)
+     * - `circle`: avatar, badge, icone
+     */
+    variant?: "text" | "block" | "circle";
+    /** Quantidade de linhas. So vale para `variant="text"`. */
+    lines?: number;
+    /** Diametro do circulo. So vale para `variant="circle"`. */
+    size?: number;
     width?: number | string;
     height?: number | string;
-    /** Quando > 1 (variant text), empilha N linhas; a ultima sai mais curta. */
-    lines?: number;
-    /** Override do border-radius. */
-    radius?: number | string;
+    /**
+     * Liga o brilho que varre o bloco. Padrao `true`.
+     *
+     * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na
+     * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem
+     * prometer trabalho que nao esta em curso, e o movimento fica reservado
+     * para o que de fato esta sendo processado.
+     */
+    animated?: boolean;
 };
-declare const Skeleton: ({ id, className, variant, width, height, lines, radius, }: SkeletonProps) => React.JSX.Element;
+/**
+ * Placeholder de carregamento no formato do conteudo que esta chegando.
+ *
+ * Substitui o spinner: em vez de um indicador generico no meio da tela, o
+ * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o
+ * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).
+ *
+ * A animacao e um brilho que varre o bloco, desligado sob
+ * `prefers-reduced-motion`.
+ */
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, }: SkeletonProps) => React.JSX.Element;
 export { Skeleton };
-export type { SkeletonProps };

package/dist/emails/balance-sheet-finalized/index.d.ts

@@ -45,12 +45,12 @@ import "./components/SegmentedToggle/index.css";
 import "./components/Select/index.css";
 import "./components/Selector/index.css";
 import "./components/SelectTree/index.css";
+import "./components/Skeleton/index.css";
 import "./components/PickerPopover/index.css";
 import "./components/MultiSelectPicker/index.css";
 import "./components/RuleSearchPicker/index.css";
 import "./components/OperatorPicker/index.css";
 import "./components/ContextMenu/index.css";
-import "./components/Skeleton/index.css";
 import "./components/StatusTag/index.css";
 import "./components/Switch/index.css";
 import "./components/SyncChip/index.css";

package/dist/emails/email/components/Card/Card.d.ts

@@ -15,6 +15,12 @@ type CardProps = {
     media?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * Placeholder exibido no lugar do conteudo enquanto `loading`. O padrao e um
+     * skeleton de linhas de texto; passe um skeleton com a forma do conteudo real
+     * (grafico, tabela, lista) quando isso ajudar a evitar o pulo de layout.
+     */
+    loadingContent?: React.ReactNode;
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
@@ -23,5 +29,5 @@ type CardProps = {
     headerContent?: React.ReactNode;
     children?: React.ReactNode;
 };
-declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
+declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, loadingContent, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
 export { Card };

package/dist/emails/email/components/Empty/Empty.d.ts

@@ -3,8 +3,25 @@ import "./index.css";
 type EmptyProps = {
     id?: string;
     className?: string;
+    /**
+     * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do
+     * tipo "primeiro uso, ainda nao ha nada aqui", onde ela vem acompanhada de
+     * um titulo e de uma acao.
+     *
+     * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:
+     * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e
+     * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.
+     */
     icon?: React.ReactNode;
     text?: string;
 };
-declare const Empty: ({ id, className, icon, text, }: EmptyProps) => React.JSX.Element;
+/**
+ * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.
+ *
+ * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o
+ * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia
+ * ("nenhuma sanção encontrada"), entao nao deve parecer erro nem falha de
+ * carregamento.
+ */
+declare const Empty: ({ id, className, icon, text }: EmptyProps) => React.JSX.Element;
 export { Empty };

package/dist/emails/email/components/Skeleton/Skeleton.d.ts

@@ -1,18 +1,40 @@
 import React from "react";
 import "./index.css";
-type SkeletonVariant = "text" | "rect" | "circle";
 type SkeletonProps = {
     id?: string;
     className?: string;
-    /** Formato do bloco. `text` = linha fina; `rect` = bloco; `circle` = avatar. */
-    variant?: SkeletonVariant;
+    /**
+     * Forma do placeholder:
+     * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)
+     * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)
+     * - `circle`: avatar, badge, icone
+     */
+    variant?: "text" | "block" | "circle";
+    /** Quantidade de linhas. So vale para `variant="text"`. */
+    lines?: number;
+    /** Diametro do circulo. So vale para `variant="circle"`. */
+    size?: number;
     width?: number | string;
     height?: number | string;
-    /** Quando > 1 (variant text), empilha N linhas; a ultima sai mais curta. */
-    lines?: number;
-    /** Override do border-radius. */
-    radius?: number | string;
+    /**
+     * Liga o brilho que varre o bloco. Padrao `true`.
+     *
+     * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na
+     * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem
+     * prometer trabalho que nao esta em curso, e o movimento fica reservado
+     * para o que de fato esta sendo processado.
+     */
+    animated?: boolean;
 };
-declare const Skeleton: ({ id, className, variant, width, height, lines, radius, }: SkeletonProps) => React.JSX.Element;
+/**
+ * Placeholder de carregamento no formato do conteudo que esta chegando.
+ *
+ * Substitui o spinner: em vez de um indicador generico no meio da tela, o
+ * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o
+ * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).
+ *
+ * A animacao e um brilho que varre o bloco, desligado sob
+ * `prefers-reduced-motion`.
+ */
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, }: SkeletonProps) => React.JSX.Element;
 export { Skeleton };
-export type { SkeletonProps };

package/dist/emails/email/index.d.ts

@@ -45,12 +45,12 @@ import "./components/SegmentedToggle/index.css";
 import "./components/Select/index.css";
 import "./components/Selector/index.css";
 import "./components/SelectTree/index.css";
+import "./components/Skeleton/index.css";
 import "./components/PickerPopover/index.css";
 import "./components/MultiSelectPicker/index.css";
 import "./components/RuleSearchPicker/index.css";
 import "./components/OperatorPicker/index.css";
 import "./components/ContextMenu/index.css";
-import "./components/Skeleton/index.css";
 import "./components/StatusTag/index.css";
 import "./components/Switch/index.css";
 import "./components/SyncChip/index.css";

package/dist/index.css

@@ -696,6 +696,12 @@ video {
 .w-\[360px\] {
   width: 360px;
 }
+.w-\[420px\] {
+  width: 420px;
+}
+.w-\[560px\] {
+  width: 560px;
+}
 .w-\[800px\] {
   width: 800px;
 }
@@ -770,6 +776,15 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
+.gap-4 {
+  gap: 1rem;
+}
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -804,6 +819,9 @@ video {
 .rounded-\[6px\] {
   border-radius: 6px;
 }
+.rounded-\[var\(--radius-lg\)\] {
+  border-radius: var(--radius-lg);
+}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -816,6 +834,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-\[var\(--color-border-secondary\)\] {
+  border-color: var(--color-border-secondary);
+}
 .bg-\[var\(--background-color\)\] {
   background-color: var(--background-color);
 }
@@ -840,6 +861,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .fill-current {
   fill: currentColor;
 }
@@ -929,6 +954,9 @@ video {
 .text-\[var\(--color-text-secondary\)\] {
   color: var(--color-text-secondary);
 }
+.text-\[var\(--color-text-tertiary\)\] {
+  color: var(--color-text-tertiary);
+}
 .text-\[var\(--primary-button-color\)\] {
   color: var(--primary-button-color);
 }
@@ -4382,25 +4410,26 @@ h6 {
   padding-top: 1rem;
 }
 .gyramais-card.gyramais-card-loading .gyramais-card-content {
-  min-height: 4rem;
+  min-height: 6rem;
 }
 
+/* Estado de carregando: o skeleton entra NO FLUXO, nao sobreposto. Assim ele
+   e' quem dita a altura do card, e um `loadingContent` alto (grafico, tabela)
+   nao fica cortado pela altura do conteudo vazio que ele esta substituindo.
+   O conteudo real continua montado, so escondido pela regra abaixo, para nao
+   perder estado no meio do carregamento. */
 .gyramais-card .gyramais-card-loading {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
   display: flex;
-  height: 100%;
   width: 100%;
-  --tw-scale-x: 102%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  align-items: center;
-  justify-content: center;
-  background-color: #ffffff80;
-  padding-top: 1rem;
-  --tw-backdrop-blur: blur(4px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  flex-direction: column;
+  align-items: stretch;
+  background-color: var(--color-surface-primary);
+}
+
+.gyramais-card.gyramais-card-loading
+  .gyramais-card-content
+  > *:not(.gyramais-card-loading) {
+  display: none;
 }
 
 .gyramais-chart .recharts-legend-item {
@@ -5724,30 +5753,33 @@ h6 {
 }
 
 .gyramais-empty {
-    padding-top: 1rem;
-    padding-bottom: 1rem
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem
 }
+
 .gyramais-empty .gyramais-empty-icon {
-    display: flex;
-    justify-content: center
-}
-.gyramais-empty .gyramais-empty-icon svg {
-    font-size: 40px;
-    --tw-text-opacity: 1;
-    color: rgb(184 184 184 / var(--tw-text-opacity, 1))
+  display: flex;
+  justify-content: center;
+  font-size: 40px;
+  color: var(--color-text-quaternary)
 }
+
+/* Texto secundario, nao preto: lista vazia informa, nao anuncia. Em preto ela
+   pesava igual ao dado de verdade da tabela ao lado. */
 .gyramais-empty .gyramais-empty-text {
-    display: flex;
-    justify-content: center;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-    line-height: 22px;
-    --tw-text-opacity: 1;
-    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
+  text-align: center;
+  font-size: var(--fs-subheadline);
+  line-height: var(--lh-normal);
+  color: var(--color-text-tertiary)
 }
+
 .gyramais-filter .gyramais-filter-button-container {
   position: relative;
   width: -moz-fit-content;
@@ -8879,6 +8911,68 @@ h6 {
     left: 0.5rem !important
 }
 
+.gyramais-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background-color: var(--color-gray-100);
+  border-radius: var(--radius-sm);
+}
+
+/* O brilho que varre o bloco. Pseudo-elemento para nao exigir um filho no DOM. */
+.gyramais-skeleton::after {
+  position: absolute;
+  inset: 0px;
+  content: "";
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.7) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: gyramais-skeleton-shimmer 1.6s ease-in-out infinite;
+}
+
+/* Parado de proposito: item na fila, nao em processamento. */
+.gyramais-skeleton.gyramais-skeleton-static::after {
+  animation: none;
+}
+
+.gyramais-skeleton.gyramais-skeleton-circle {
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+}
+
+.gyramais-skeleton.gyramais-skeleton-block {
+  border-radius: var(--radius-md);
+}
+
+.gyramais-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.gyramais-skeleton-lines .gyramais-skeleton-line {
+  height: 0.75rem;
+}
+
+@keyframes gyramais-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Sem animacao para quem pediu menos movimento: o bloco continua marcando o
+   espaco, so nao pulsa. */
+@media (prefers-reduced-motion: reduce) {
+  .gyramais-skeleton::after {
+    animation: none;
+  }
+}
+
 /* PickerPopover — shell base de popovers tipo command-palette / tag-picker. */
 
 /* Container override do Popover base — chrome flat com elevação de dropdown */
@@ -9851,72 +9945,6 @@ h6 {
   height: 16px;
 }
 
-/* Skeleton shimmer — silhueta cinza do conteudo que carrega */
-
-.gyramais-skeleton {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  background-color: var(--color-border-subtle);
-  border-radius: 6px;
-}
-.gyramais-skeleton::after {
-  position: absolute;
-  inset: 0px;
-  --tw-content: '';
-  content: var(--tw-content);
-  transform: translateX(-100%);
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.55),
-    transparent
-  );
-  animation: gyramais-skeleton-sweep 1.4s ease-in-out infinite;
-}
-.gyramais-skeleton-text {
-  height: 12px;
-  width: 100%;
-}
-.gyramais-skeleton-rect {
-  height: 64px;
-  width: 100%;
-}
-.gyramais-skeleton-circle {
-  border-radius: 9999px;
-}
-.gyramais-skeleton-stack {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: 8px;
-}
-
-@keyframes gyramais-skeleton-sweep {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-/* Sem movimento deslizante pra quem pediu menos animacao: pulso de opacidade */
-@media (prefers-reduced-motion: reduce) {
-  .gyramais-skeleton::after {
-    animation: none;
-  }
-  .gyramais-skeleton {
-    animation: gyramais-skeleton-pulse 1.6s ease-in-out infinite;
-  }
-}
-@keyframes gyramais-skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.55;
-  }
-}
-
 .gyramais-status-tag {
 
   display: inline-flex;
@@ -10057,27 +10085,23 @@ h6 {
   color: var(--color-text-primary);
   font-feature-settings: "tnum";
 }
-/* "Sincronizando" — 3 pontos com pulso escalonado (estilo Apple), no lugar
-   da barra deslizante. Cada ponto anima scale+opacity com delay crescente,
-   dando a onda da esquerda pra direita. Sem framer-motion: keyframes CSS. */
-.gyramais-sync-chip .gyramais-sync-chip-dots {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.gyramais-sync-chip .gyramais-sync-chip-dots-dot {
-  height: 5px;
-  width: 5px;
-  flex-shrink: 0;
-  border-radius: 9999px;
-  background-color: var(--color-text-tertiary);
-  animation: gyramais-sync-chip-pulse 1.2s ease-in-out infinite;
-}
-.gyramais-sync-chip .gyramais-sync-chip-dots-dot:nth-child(2) {
-  animation-delay: 0.15s;
+.gyramais-sync-chip .gyramais-sync-chip-loading {
+  position: relative;
+  height: 4px;
+  width: 64px;
+  overflow: hidden;
+  border-radius: 2px;
+  background-color: var(--color-border-subtle);
 }
-.gyramais-sync-chip .gyramais-sync-chip-dots-dot:nth-child(3) {
-  animation-delay: 0.3s;
+.gyramais-sync-chip .gyramais-sync-chip-loading::after {
+  position: absolute;
+  height: 100%;
+  width: 32px;
+  border-radius: 2px;
+  background-color: var(--gyra-blue);
+  --tw-content: '';
+  content: var(--tw-content);
+  animation: gyramais-sync-chip-bar 1.6s ease-in-out infinite;
 }
 
 .gyramais-sync-chip.gyramais-sync-chip-error {
@@ -10089,13 +10113,10 @@ h6 {
 .gyramais-sync-chip.gyramais-sync-chip-error .gyramais-sync-chip-label {
   color: var(--status-danger-text);
 }
-/* "Sincronizando" e' status neutro (em andamento), nao warning: pilula,
-   ponto e pulse em cinza — sincronizar nao sinaliza problema. Erro fica
-   vermelho e sucesso verde; so o em-andamento saiu do laranja. */
 .gyramais-sync-chip.gyramais-sync-chip-warning {
-  border-color: var(--color-border-secondary);
-  background-color: var(--color-surface-secondary);
-  color: var(--color-text-secondary);
+  border-color: rgba(255,159,10,0.20);
+  background-color: rgba(255,159,10,0.08);
+  color: var(--warning-color);
 }
 .gyramais-sync-chip.gyramais-sync-chip-success {
   border-color: rgba(52,199,89,0.18);
@@ -10109,15 +10130,15 @@ h6 {
   background-color: var(--status-danger-text);
 }
 
-@keyframes gyramais-sync-chip-pulse {
-  0%,
-  100% {
-    transform: scale(0.5);
-    opacity: 0.3;
+@keyframes gyramais-sync-chip-bar {
+  0% {
+    transform: translateX(-32px);
   }
   50% {
-    transform: scale(1);
-    opacity: 1;
+    transform: translateX(64px);
+  }
+  100% {
+    transform: translateX(-32px);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.2.43",
+  "version": "0.2.45",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",