@gyramais/gyra-design 0.2.43 → 0.2.44

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

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

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

@@ -6101,9 +6101,9 @@ h6 {
 
 .gyramais-hover-card-content {
 
-    width: -moz-fit-content;
+    width: -moz-fit-content !important;
 
-    width: fit-content;
+    width: fit-content !important;
 
     border-radius: 20px;
 
@@ -6119,6 +6119,7 @@ h6 {
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
+
 .gyramais-icon {
   content: var(--icon-url);
 }
@@ -9851,72 +9852,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 +9992,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 +10020,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 +10037,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.44",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

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

@@ -1,18 +0,0 @@
-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/components/Skeleton/index.d.ts

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

package/dist/components/Skeleton/index.js

@@ -1,7 +0,0 @@
-"use client";import e from"react";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var r,a={exports:{}};
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/r=a,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];r&&(e=n(e,a(r)))}return e}function a(r){if("string"==typeof r||"number"==typeof r)return r;if("object"!=typeof r)return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var a="";for(var i in r)e.call(r,i)&&r[i]&&(a=n(a,i));return a}function n(e,t){return t?e?e+" "+t:e+t:e}r.exports?(t.default=t,r.exports=t):window.classNames=t}();var n=t(a.exports);const i=e=>"number"==typeof e?`${e}px`:e,o=({id:t,className:r,variant:a="text",width:o,height:s,lines:l,radius:u})=>"text"===a&&l&&l>1?e.createElement("div",{id:t,className:n("gyramais-skeleton-stack",r),"aria-hidden":"true"},Array.from({length:l}).map((t,r)=>{const a=r===l-1;return e.createElement("span",{key:r,className:"gyramais-skeleton gyramais-skeleton-text",style:{width:a?"60%":i(o)??"100%",height:i(s),borderRadius:i(u)}})})):e.createElement("span",{id:t,className:n("gyramais-skeleton",`gyramais-skeleton-${a}`,r),style:{width:i(o),height:i(s),borderRadius:i(u)},"aria-hidden":"true"});export{o as Skeleton};
-//# sourceMappingURL=index.js.map

package/dist/components/Skeleton/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\n/* Placeholder de carregamento (shimmer). Primitivo generico: mostra a\n   silhueta cinza do conteudo que vai chegar, em vez de um spinner. Compõe\n   varios pra montar o esqueleto de um card/tabela. Respeita\n   prefers-reduced-motion (troca o brilho deslizante por um pulso suave). */\n\ntype SkeletonVariant = \"text\" | \"rect\" | \"circle\";\n\ntype SkeletonProps = {\n  id?: string;\n  className?: string;\n  /** Formato do bloco. `text` = linha fina; `rect` = bloco; `circle` = avatar. */\n  variant?: SkeletonVariant;\n  width?: number | string;\n  height?: number | string;\n  /** Quando > 1 (variant text), empilha N linhas; a ultima sai mais curta. */\n  lines?: number;\n  /** Override do border-radius. */\n  radius?: number | string;\n};\n\nconst toCss = (value?: number | string) =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst Skeleton = ({\n  id,\n  className,\n  variant = \"text\",\n  width,\n  height,\n  lines,\n  radius,\n}: SkeletonProps) => {\n  if (variant === \"text\" && lines && lines > 1) {\n    return (\n      <div\n        id={id}\n        className={classNames(\"gyramais-skeleton-stack\", className)}\n        aria-hidden=\"true\"\n      >\n        {Array.from({ length: lines }).map((_, index) => {\n          const isLast = index === lines - 1;\n          return (\n            <span\n              key={index}\n              className=\"gyramais-skeleton gyramais-skeleton-text\"\n              style={{\n                width: isLast ? \"60%\" : toCss(width) ?? \"100%\",\n                height: toCss(height),\n                borderRadius: toCss(radius),\n              }}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <span\n      id={id}\n      className={classNames(\n        \"gyramais-skeleton\",\n        `gyramais-skeleton-${variant}`,\n        className,\n      )}\n      style={{\n        width: toCss(width),\n        height: toCss(height),\n        borderRadius: toCss(radius),\n      }}\n      aria-hidden=\"true\"\n    />\n  );\n};\n\nexport { Skeleton };\nexport type { SkeletonProps };\n"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","appendClass","parseValue","Array","isArray","apply","toString","Object","prototype","includes","key","call","value","newClass","module","exports","default","window","toCss","Skeleton","id","className","variant","width","height","lines","radius","React","createElement","from","map","_","index","isLast","style","borderRadius"],"mappings":";;;;;MAOC,WAGA,IAAIA,EAAS,CAAA,EAAGC,eAEhB,SAASC,IAGR,IAFA,IAAIC,EAAU,GAELC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAC1C,IAAIG,EAAMF,UAAUD,GAChBG,IACHJ,EAAUK,EAAYL,EAASM,EAAWF,IAE9C,CAEE,OAAOJ,CACT,CAEC,SAASM,EAAYF,GACpB,GAAmB,iBAARA,GAAmC,iBAARA,EACrC,OAAOA,EAGR,GAAmB,iBAARA,EACV,MAAO,GAGR,GAAIG,MAAMC,QAAQJ,GACjB,OAAOL,EAAWU,MAAM,KAAML,GAG/B,GAAIA,EAAIM,WAAaC,OAAOC,UAAUF,WAAaN,EAAIM,SAASA,WAAWG,SAAS,iBACnF,OAAOT,EAAIM,WAGZ,IAAIV,EAAU,GAEd,IAAK,IAAIc,KAAOV,EACXP,EAAOkB,KAAKX,EAAKU,IAAQV,EAAIU,KAChCd,EAAUK,EAAYL,EAASc,IAIjC,OAAOd,CACT,CAEC,SAASK,EAAaW,EAAOC,GAC5B,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAOC,SAC3CpB,EAAWqB,QAAUrB,EACrBmB,UAAiBnB,GAOjBsB,OAAOtB,WAAaA,CAEtB,CArEA,sBCiBA,MAAMuB,EAASN,GACI,iBAAVA,EAAqB,GAAGA,MAAYA,EAEvCO,EAAW,EACfC,KACAC,YACAC,UAAU,OACVC,QACAC,SACAC,QACAC,YAEgB,SAAZJ,GAAsBG,GAASA,EAAQ,EAEvCE,EAAAC,cAAA,MAAA,CACER,GAAIA,EACJC,UAAW1B,EAAW,0BAA2B0B,iBACrC,QAEXlB,MAAM0B,KAAK,CAAE9B,OAAQ0B,IAASK,IAAI,CAACC,EAAGC,KACrC,MAAMC,EAASD,IAAUP,EAAQ,EACjC,OACEE,EAAAC,cAAA,OAAA,CACElB,IAAKsB,EACLX,UAAU,2CACVa,MAAO,CACLX,MAAOU,EAAS,MAAQf,EAAMK,IAAU,OACxCC,OAAQN,EAAMM,GACdW,aAAcjB,EAAMQ,SAUhCC,wBACEP,GAAIA,EACJC,UAAW1B,EACT,oBACA,qBAAqB2B,IACrBD,GAEFa,MAAO,CACLX,MAAOL,EAAMK,GACbC,OAAQN,EAAMM,GACdW,aAAcjB,EAAMQ,IACrB,cACW","x_google_ignoreList":[0]}

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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

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