@gyramais/gyra-design 0.2.22 → 0.2.23

package/dist/components/Gauge/Gauge.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import "./index.css";
+export type GaugeBandVariant = "neutral" | "success" | "warning" | "danger";
+/** Formata o valor central: inteiro sem casas, fracionado com 1 casa, ausente "—". */
+export declare const formatGaugeValue: (v?: number | null) => string;
+export type GaugeProps = {
+    id?: string;
+    className?: string;
+    /** Valor atual (0..max). null/undefined => mostra "—" e anel vazio. */
+    value?: number | null;
+    /** Máximo da escala. Default 1000 (escala dos bureaus de crédito). */
+    max?: number;
+    /** Legenda curta acima do número (ex.: "GYRA+ Score"). */
+    label: string;
+    /** Pill de classificação abaixo do número (ex.: "Risco baixo"). Opcional. */
+    band?: string;
+    /** Cor do pill de banda; o anel permanece azul. Default "neutral". */
+    bandVariant?: GaugeBandVariant;
+    /** Diâmetro em px (escala número/legenda proporcionalmente). Default 240. */
+    size?: number;
+};
+/**
+ * Gauge circular de score (anel azul). Usado para o score da política de
+ * crédito, score setorial e afins. O número e a legenda escalam com `size`.
+ */
+declare const Gauge: ({ id, className, value, max, label, band, bandVariant, size, }: GaugeProps) => React.JSX.Element;
+export { Gauge };
+export default Gauge;

package/dist/components/Gauge/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Gauge";
+export { default } from "./Gauge";

package/dist/components/Gauge/index.js

@@ -0,0 +1,7 @@
+"use client";import e from"react";function a(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t,r={exports:{}};
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/t=r,function(){var e={}.hasOwnProperty;function a(){for(var e="",a=0;a<arguments.length;a++){var t=arguments[a];t&&(e=n(e,r(t)))}return e}function r(t){if("string"==typeof t||"number"==typeof t)return t;if("object"!=typeof t)return"";if(Array.isArray(t))return a.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var r="";for(var i in t)e.call(t,i)&&t[i]&&(r=n(r,i));return r}function n(e,a){return a?e?e+" "+a:e+a:e}t.exports?(a.default=a,t.exports=a):window.classNames=a}();var n=a(r.exports);const i=e=>null==e?"—":Number.isInteger(e)?String(e):e.toFixed(1),s=2*Math.PI*42,c=({id:a,className:t,value:r,max:c=1e3,label:l,band:o,bandVariant:u="neutral",size:g=240})=>{const m=`${(Math.max(0,Math.min(1,(r??0)/(c||1)))*s).toFixed(1)} ${s.toFixed(1)}`;return e.createElement("div",{id:a,className:n("gyramais-gauge",t),style:{"--gauge-size":`${g}px`}},e.createElement("svg",{viewBox:"0 0 100 100","aria-hidden":"true"},e.createElement("circle",{cx:"50",cy:"50",r:42,fill:"none",className:"gyramais-gauge__track",strokeWidth:"9"}),e.createElement("circle",{cx:"50",cy:"50",r:42,fill:"none",className:"gyramais-gauge__arc",strokeWidth:"9",strokeDasharray:m,strokeLinecap:"round"})),e.createElement("div",{className:"gyramais-gauge__center"},e.createElement("div",{className:"gyramais-gauge__caption"},l),e.createElement("div",{className:"gyramais-gauge__num"},i(r)),e.createElement("div",{className:"gyramais-gauge__max"},"de ",c),o&&e.createElement("div",{className:n("gyramais-gauge__band",`gyramais-gauge__band--${u}`)},o)))};export{c as Gauge,c as default,i as formatGaugeValue};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/Gauge/Gauge.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\nexport type GaugeBandVariant = \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\n/** Formata o valor central: inteiro sem casas, fracionado com 1 casa, ausente \"—\". */\nexport const formatGaugeValue = (v?: number | null): string => {\n  if (v == null) return \"—\";\n  return Number.isInteger(v) ? String(v) : v.toFixed(1);\n};\n\nexport type GaugeProps = {\n  id?: string;\n  className?: string;\n  /** Valor atual (0..max). null/undefined => mostra \"—\" e anel vazio. */\n  value?: number | null;\n  /** Máximo da escala. Default 1000 (escala dos bureaus de crédito). */\n  max?: number;\n  /** Legenda curta acima do número (ex.: \"GYRA+ Score\"). */\n  label: string;\n  /** Pill de classificação abaixo do número (ex.: \"Risco baixo\"). Opcional. */\n  band?: string;\n  /** Cor do pill de banda; o anel permanece azul. Default \"neutral\". */\n  bandVariant?: GaugeBandVariant;\n  /** Diâmetro em px (escala número/legenda proporcionalmente). Default 240. */\n  size?: number;\n};\n\nconst RADIUS = 42;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n/**\n * Gauge circular de score (anel azul). Usado para o score da política de\n * crédito, score setorial e afins. O número e a legenda escalam com `size`.\n */\nconst Gauge = ({\n  id,\n  className,\n  value,\n  max = 1000,\n  label,\n  band,\n  bandVariant = \"neutral\",\n  size = 240,\n}: GaugeProps) => {\n  const pct = Math.max(0, Math.min(1, (value ?? 0) / (max || 1)));\n  const dash = `${(pct * CIRCUMFERENCE).toFixed(1)} ${CIRCUMFERENCE.toFixed(1)}`;\n\n  return (\n    <div\n      id={id}\n      className={classNames(\"gyramais-gauge\", className)}\n      style={{ [\"--gauge-size\" as string]: `${size}px` }}\n    >\n      <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={RADIUS}\n          fill=\"none\"\n          className=\"gyramais-gauge__track\"\n          strokeWidth=\"9\"\n        />\n        <circle\n          cx=\"50\"\n          cy=\"50\"\n          r={RADIUS}\n          fill=\"none\"\n          className=\"gyramais-gauge__arc\"\n          strokeWidth=\"9\"\n          strokeDasharray={dash}\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      <div className=\"gyramais-gauge__center\">\n        <div className=\"gyramais-gauge__caption\">{label}</div>\n        <div className=\"gyramais-gauge__num\">{formatGaugeValue(value)}</div>\n        <div className=\"gyramais-gauge__max\">de {max}</div>\n        {band && (\n          <div\n            className={classNames(\n              \"gyramais-gauge__band\",\n              `gyramais-gauge__band--${bandVariant}`,\n            )}\n          >\n            {band}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Gauge };\nexport default Gauge;\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","formatGaugeValue","v","Number","isInteger","String","toFixed","CIRCUMFERENCE","Math","PI","Gauge","id","className","max","label","band","bandVariant","size","dash","min","React","createElement","style","viewBox","cx","cy","r","fill","strokeWidth","strokeDasharray","strokeLinecap"],"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,sBCAO,MAAMuB,EAAoBC,GACtB,MAALA,EAAkB,IACfC,OAAOC,UAAUF,GAAKG,OAAOH,GAAKA,EAAEI,QAAQ,GAqB/CC,EAAgB,EAAIC,KAAKC,GADhB,GAOTC,EAAQ,EACZC,KACAC,YACAjB,QACAkB,MAAM,IACNC,QACAC,OACAC,cAAc,UACdC,OAAO,QAEP,MACMC,EAAO,IADDV,KAAKK,IAAI,EAAGL,KAAKW,IAAI,GAAIxB,GAAS,IAAMkB,GAAO,KACpCN,GAAeD,QAAQ,MAAMC,EAAcD,QAAQ,KAE1E,OACEc,EAAAC,cAAA,MAAA,CACEV,GAAIA,EACJC,UAAWlC,EAAW,iBAAkBkC,GACxCU,MAAO,CAAE,eAA4B,GAAGL,QAExCG,EAAAC,cAAA,MAAA,CAAKE,QAAQ,cAAa,cAAa,QACrCH,EAAAC,cAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHC,EA9BK,GA+BLC,KAAK,OACLf,UAAU,wBACVgB,YAAY,MAEdR,EAAAC,cAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHC,EAtCK,GAuCLC,KAAK,OACLf,UAAU,sBACVgB,YAAY,IACZC,gBAAiBX,EACjBY,cAAc,WAGlBV,EAAAC,cAAA,MAAA,CAAKT,UAAU,0BACbQ,EAAAC,cAAA,MAAA,CAAKT,UAAU,2BAA2BE,GAC1CM,EAAAC,cAAA,MAAA,CAAKT,UAAU,uBAAuBX,EAAiBN,IACvDyB,EAAAC,cAAA,MAAA,CAAKT,UAAU,6BAA0BC,GACxCE,GACCK,EAAAC,cAAA,MAAA,CACET,UAAWlC,EACT,uBACA,yBAAyBsC,MAG1BD","x_google_ignoreList":[0]}

package/dist/index.css

@@ -10699,3 +10699,76 @@ h6 {
 .gyramais-tourguide__btn-next:hover {
   background: var(--gyra-blue-hover, #2f5dcb);
 }
+
+/* Gauge (CU-86ahzcm82) */
+/* Gauge circular de score. Diâmetro controlado por --gauge-size; número e
+   legenda escalam proporcionalmente. Cores via design tokens (dark-mode safe). */
+.gyramais-gauge {
+  position: relative;
+  width: var(--gauge-size, 240px);
+  height: var(--gauge-size, 240px);
+  margin: 0 auto;
+}
+.gyramais-gauge svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.gyramais-gauge__track {
+  stroke: var(--color-border-subtle, #f0f0f2);
+}
+.gyramais-gauge__arc {
+  stroke: var(--gyra-blue, #1256ff);
+}
+.gyramais-gauge__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+.gyramais-gauge__caption {
+  font-size: calc(var(--gauge-size, 240px) * 0.0458);
+  color: var(--color-text-tertiary, #8e8e93);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+.gyramais-gauge__num {
+  font-family: var(--font-display, "Lexend", "Inter", sans-serif);
+  font-size: calc(var(--gauge-size, 240px) * 0.233);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary, #1d1d1f);
+  line-height: 1;
+}
+.gyramais-gauge__max {
+  font-size: calc(var(--gauge-size, 240px) * 0.05);
+  color: var(--color-text-tertiary, #8e8e93);
+  margin-top: 6px;
+}
+.gyramais-gauge__band {
+  margin-top: 8px;
+  font-size: calc(var(--gauge-size, 240px) * 0.0458);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  background: var(--gyra-blue-light, #eef1fb);
+  color: var(--gyra-blue, #1256ff);
+}
+.gyramais-gauge__band--success {
+  background: var(--success-light, #e8f9ed);
+  color: var(--status-success-text, #1a7d37);
+}
+.gyramais-gauge__band--warning {
+  background: var(--warning-light, #fff4e0);
+  color: var(--status-warning-text, #946200);
+}
+.gyramais-gauge__band--danger {
+  background: var(--danger-light, #ffedec);
+  color: var(--status-danger-text, #c93430);
+}

package/package.json

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