@gyramais/gyra-design 0.2.41 → 0.2.43

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

@@ -0,0 +1,18 @@
+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;
+    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;
+};
+declare const Skeleton: ({ id, className, variant, width, height, lines, radius, }: SkeletonProps) => React.JSX.Element;
+export { Skeleton };
+export type { SkeletonProps };

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

@@ -0,0 +1 @@
+export * from "./Skeleton";

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

@@ -50,6 +50,7 @@ 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/Skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+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;
+    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;
+};
+declare const Skeleton: ({ id, className, variant, width, height, lines, radius, }: SkeletonProps) => React.JSX.Element;
+export { Skeleton };
+export type { SkeletonProps };

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

@@ -0,0 +1 @@
+export * from "./Skeleton";

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

@@ -50,6 +50,7 @@ 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

@@ -9851,6 +9851,72 @@ 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;
@@ -9991,23 +10057,27 @@ h6 {
   color: var(--color-text-primary);
   font-feature-settings: "tnum";
 }
-.gyramais-sync-chip .gyramais-sync-chip-loading {
-  position: relative;
-  height: 4px;
-  width: 64px;
-  overflow: hidden;
-  border-radius: 2px;
-  background-color: var(--color-border-subtle);
+/* "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-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-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-dots-dot:nth-child(3) {
+  animation-delay: 0.3s;
 }
 
 .gyramais-sync-chip.gyramais-sync-chip-error {
@@ -10019,10 +10089,13 @@ 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: rgba(255,159,10,0.20);
-  background-color: rgba(255,159,10,0.08);
-  color: var(--warning-color);
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-secondary);
+  color: var(--color-text-secondary);
 }
 .gyramais-sync-chip.gyramais-sync-chip-success {
   border-color: rgba(52,199,89,0.18);
@@ -10036,15 +10109,15 @@ h6 {
   background-color: var(--status-danger-text);
 }
 
-@keyframes gyramais-sync-chip-bar {
-  0% {
-    transform: translateX(-32px);
+@keyframes gyramais-sync-chip-pulse {
+  0%,
+  100% {
+    transform: scale(0.5);
+    opacity: 0.3;
   }
   50% {
-    transform: translateX(64px);
-  }
-  100% {
-    transform: translateX(-32px);
+    transform: scale(1);
+    opacity: 1;
   }
 }
 

package/package.json

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