@gyramais/gyra-design 0.2.39 → 0.2.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/SegmentedToggle/SegmentedToggle.d.ts +11 -2
- package/dist/components/SegmentedToggle/index.js +1 -1
- package/dist/components/SegmentedToggle/index.js.map +1 -1
- package/dist/emails/balance-sheet-finalized/components/SegmentedToggle/SegmentedToggle.d.ts +11 -2
- package/dist/emails/email/components/SegmentedToggle/SegmentedToggle.d.ts +11 -2
- package/dist/index.css +4 -2
- package/package.json +1 -1
|
@@ -12,14 +12,23 @@ type SegmentedToggleOption<T extends string> = {
|
|
|
12
12
|
type SegmentedToggleProps<T extends string> = {
|
|
13
13
|
id?: string;
|
|
14
14
|
className?: string;
|
|
15
|
-
|
|
15
|
+
/** Opcional: quando nao casa nenhuma opcao (ou undefined), nenhum segmento
|
|
16
|
+
fica ativo — o estado "nenhum selecionado" (usado com allowDeselect). */
|
|
17
|
+
value?: T;
|
|
16
18
|
options: Array<SegmentedToggleOption<T>>;
|
|
17
19
|
onChange?: (value: T) => void;
|
|
20
|
+
/** GYR-1446 — quando true, clicar no segmento JA ativo o desmarca e dispara
|
|
21
|
+
onDeselect() (estado "nenhum selecionado"). Default false: comportamento
|
|
22
|
+
atual preservado (clicar o ativo e' no-op). */
|
|
23
|
+
allowDeselect?: boolean;
|
|
24
|
+
/** Chamado quando allowDeselect=true e o usuario clica no segmento ativo,
|
|
25
|
+
colapsando a selecao. So dispara nesse caminho. */
|
|
26
|
+
onDeselect?: () => void;
|
|
18
27
|
/** Tamanho do toggle. Default "md". */
|
|
19
28
|
size?: "sm" | "md";
|
|
20
29
|
/** Label invisível pra screen readers (a11y). */
|
|
21
30
|
ariaLabel?: string;
|
|
22
31
|
};
|
|
23
|
-
declare function SegmentedToggle<T extends string>({ id, className, value, options, onChange, size, ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;
|
|
32
|
+
declare function SegmentedToggle<T extends string>({ id, className, value, options, onChange, allowDeselect, onDeselect, size, ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;
|
|
24
33
|
export { SegmentedToggle };
|
|
25
34
|
export type { SegmentedToggleOption, SegmentedToggleProps };
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|
|
5
5
|
http://jedwatson.github.io/classnames
|
|
6
|
-
*/a=r,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var a=arguments[t];a&&(e=n(e,r(a)))}return e}function r(a){if("string"==typeof a||"number"==typeof a)return a;if("object"!=typeof a)return"";if(Array.isArray(a))return t.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var r="";for(var
|
|
6
|
+
*/a=r,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var a=arguments[t];a&&(e=n(e,r(a)))}return e}function r(a){if("string"==typeof a||"number"==typeof a)return a;if("object"!=typeof a)return"";if(Array.isArray(a))return t.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var r="";for(var l in a)e.call(a,l)&&a[l]&&(r=n(r,l));return r}function n(e,t){return t?e?e+" "+t:e+t:e}a.exports?(t.default=t,a.exports=t):window.classNames=t}();var n=t(r.exports);function l({id:t,className:a,value:r,options:l,onChange:o,allowDeselect:i=!1,onDeselect:s,size:c="md",ariaLabel:g}){return e.createElement("div",{id:t,role:"tablist","aria-label":g,className:n("gyramais-segmented-toggle",`gyramais-segmented-toggle-${c}`,a)},l.map(t=>{const a=t.value===r,l=t.kind??"primary";return e.createElement("button",{key:t.value,type:"button",role:"tab","aria-selected":a,disabled:t.disabled,className:n("gyramais-segmented-toggle-btn",`gyramais-segmented-toggle-kind-${l}`,a&&"is-on"),onClick:()=>{if(t.disabled)return;t.value===r?i&&s?.():o?.(t.value)}},t.icon&&e.createElement("span",{className:"gyramais-segmented-toggle-icon"},t.icon),e.createElement("span",{className:"gyramais-segmented-toggle-label"},t.label))}))}export{l as SegmentedToggle};
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/SegmentedToggle/SegmentedToggle.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/* SegmentedToggle — 3-segmentos sempre visíveis (iPhone-style), com variants\n de cor por opção (success / warning / danger / info / neutral / primary).\n Diferente do SegmentedPicker, que é um trigger de dropdown e mostra só a\n opção ativa. Usado, por exemplo, no verdict global da seção de Condições. */\n\ntype Kind = \"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\";\n\ntype SegmentedToggleOption<T extends string> = {\n value: T;\n label: string;\n icon?: React.ReactNode;\n /** Cor aplicada quando a opção está ativa. */\n kind?: Kind;\n disabled?: boolean;\n};\n\ntype SegmentedToggleProps<T extends string> = {\n id?: string;\n className?: string;\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/SegmentedToggle/SegmentedToggle.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/* SegmentedToggle — 3-segmentos sempre visíveis (iPhone-style), com variants\n de cor por opção (success / warning / danger / info / neutral / primary).\n Diferente do SegmentedPicker, que é um trigger de dropdown e mostra só a\n opção ativa. Usado, por exemplo, no verdict global da seção de Condições. */\n\ntype Kind = \"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\";\n\ntype SegmentedToggleOption<T extends string> = {\n value: T;\n label: string;\n icon?: React.ReactNode;\n /** Cor aplicada quando a opção está ativa. */\n kind?: Kind;\n disabled?: boolean;\n};\n\ntype SegmentedToggleProps<T extends string> = {\n id?: string;\n className?: string;\n /** Opcional: quando nao casa nenhuma opcao (ou undefined), nenhum segmento\n fica ativo — o estado \"nenhum selecionado\" (usado com allowDeselect). */\n value?: T;\n options: Array<SegmentedToggleOption<T>>;\n onChange?: (value: T) => void;\n /** GYR-1446 — quando true, clicar no segmento JA ativo o desmarca e dispara\n onDeselect() (estado \"nenhum selecionado\"). Default false: comportamento\n atual preservado (clicar o ativo e' no-op). */\n allowDeselect?: boolean;\n /** Chamado quando allowDeselect=true e o usuario clica no segmento ativo,\n colapsando a selecao. So dispara nesse caminho. */\n onDeselect?: () => void;\n /** Tamanho do toggle. Default \"md\". */\n size?: \"sm\" | \"md\";\n /** Label invisível pra screen readers (a11y). */\n ariaLabel?: string;\n};\n\nfunction SegmentedToggle<T extends string>({\n id,\n className,\n value,\n options,\n onChange,\n allowDeselect = false,\n onDeselect,\n size = \"md\",\n ariaLabel,\n}: SegmentedToggleProps<T>) {\n return (\n <div\n id={id}\n role=\"tablist\"\n aria-label={ariaLabel}\n className={classNames(\n \"gyramais-segmented-toggle\",\n `gyramais-segmented-toggle-${size}`,\n className,\n )}\n >\n {options.map((opt) => {\n const on = opt.value === value;\n const kind: Kind = opt.kind ?? \"primary\";\n return (\n <button\n key={opt.value}\n type=\"button\"\n role=\"tab\"\n aria-selected={on}\n disabled={opt.disabled}\n className={classNames(\n \"gyramais-segmented-toggle-btn\",\n `gyramais-segmented-toggle-kind-${kind}`,\n on && \"is-on\",\n )}\n onClick={() => {\n if (opt.disabled) return;\n const isOn = opt.value === value;\n if (isOn) {\n // Sem allowDeselect: re-clicar o ativo continua sendo no-op\n // (comportamento historico, preservado para os consumidores\n // que nao passam a prop).\n if (allowDeselect) onDeselect?.();\n } else {\n onChange?.(opt.value);\n }\n }}\n >\n {opt.icon && (\n <span className=\"gyramais-segmented-toggle-icon\">{opt.icon}</span>\n )}\n <span className=\"gyramais-segmented-toggle-label\">{opt.label}</span>\n </button>\n );\n })}\n </div>\n );\n}\n\nexport { SegmentedToggle };\nexport type { SegmentedToggleOption, SegmentedToggleProps };\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","SegmentedToggle","id","className","options","onChange","allowDeselect","onDeselect","size","ariaLabel","React","createElement","role","map","opt","on","kind","type","disabled","onClick","icon","label"],"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,sBCkCA,SAASuB,GAAkCC,GACzCA,EAAEC,UACFA,EAASR,MACTA,EAAKS,QACLA,EAAOC,SACPA,EAAQC,cACRA,GAAgB,EAAKC,WACrBA,EAAUC,KACVA,EAAO,KAAIC,UACXA,IAEA,OACEC,EAAAC,cAAA,MAAA,CACET,GAAIA,EACJU,KAAK,UAAS,aACFH,EACZN,UAAWzB,EACT,4BACA,6BAA6B8B,IAC7BL,IAGDC,EAAQS,IAAKC,IACZ,MAAMC,EAAKD,EAAInB,QAAUA,EACnBqB,EAAaF,EAAIE,MAAQ,UAC/B,OACEN,EAAAC,cAAA,SAAA,CACElB,IAAKqB,EAAInB,MACTsB,KAAK,SACLL,KAAK,sBACUG,EACfG,SAAUJ,EAAII,SACdf,UAAWzB,EACT,gCACA,kCAAkCsC,IAClCD,GAAM,SAERI,QAAS,KACP,GAAIL,EAAII,SAAU,OACLJ,EAAInB,QAAUA,EAKrBW,GAAeC,MAEnBF,IAAWS,EAAInB,SAIlBmB,EAAIM,MACHV,EAAAC,cAAA,OAAA,CAAMR,UAAU,kCAAkCW,EAAIM,MAExDV,EAAAC,cAAA,OAAA,CAAMR,UAAU,mCAAmCW,EAAIO,UAMnE","x_google_ignoreList":[0]}
|
|
@@ -12,14 +12,23 @@ type SegmentedToggleOption<T extends string> = {
|
|
|
12
12
|
type SegmentedToggleProps<T extends string> = {
|
|
13
13
|
id?: string;
|
|
14
14
|
className?: string;
|
|
15
|
-
|
|
15
|
+
/** Opcional: quando nao casa nenhuma opcao (ou undefined), nenhum segmento
|
|
16
|
+
fica ativo — o estado "nenhum selecionado" (usado com allowDeselect). */
|
|
17
|
+
value?: T;
|
|
16
18
|
options: Array<SegmentedToggleOption<T>>;
|
|
17
19
|
onChange?: (value: T) => void;
|
|
20
|
+
/** GYR-1446 — quando true, clicar no segmento JA ativo o desmarca e dispara
|
|
21
|
+
onDeselect() (estado "nenhum selecionado"). Default false: comportamento
|
|
22
|
+
atual preservado (clicar o ativo e' no-op). */
|
|
23
|
+
allowDeselect?: boolean;
|
|
24
|
+
/** Chamado quando allowDeselect=true e o usuario clica no segmento ativo,
|
|
25
|
+
colapsando a selecao. So dispara nesse caminho. */
|
|
26
|
+
onDeselect?: () => void;
|
|
18
27
|
/** Tamanho do toggle. Default "md". */
|
|
19
28
|
size?: "sm" | "md";
|
|
20
29
|
/** Label invisível pra screen readers (a11y). */
|
|
21
30
|
ariaLabel?: string;
|
|
22
31
|
};
|
|
23
|
-
declare function SegmentedToggle<T extends string>({ id, className, value, options, onChange, size, ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;
|
|
32
|
+
declare function SegmentedToggle<T extends string>({ id, className, value, options, onChange, allowDeselect, onDeselect, size, ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;
|
|
24
33
|
export { SegmentedToggle };
|
|
25
34
|
export type { SegmentedToggleOption, SegmentedToggleProps };
|
|
@@ -12,14 +12,23 @@ type SegmentedToggleOption<T extends string> = {
|
|
|
12
12
|
type SegmentedToggleProps<T extends string> = {
|
|
13
13
|
id?: string;
|
|
14
14
|
className?: string;
|
|
15
|
-
|
|
15
|
+
/** Opcional: quando nao casa nenhuma opcao (ou undefined), nenhum segmento
|
|
16
|
+
fica ativo — o estado "nenhum selecionado" (usado com allowDeselect). */
|
|
17
|
+
value?: T;
|
|
16
18
|
options: Array<SegmentedToggleOption<T>>;
|
|
17
19
|
onChange?: (value: T) => void;
|
|
20
|
+
/** GYR-1446 — quando true, clicar no segmento JA ativo o desmarca e dispara
|
|
21
|
+
onDeselect() (estado "nenhum selecionado"). Default false: comportamento
|
|
22
|
+
atual preservado (clicar o ativo e' no-op). */
|
|
23
|
+
allowDeselect?: boolean;
|
|
24
|
+
/** Chamado quando allowDeselect=true e o usuario clica no segmento ativo,
|
|
25
|
+
colapsando a selecao. So dispara nesse caminho. */
|
|
26
|
+
onDeselect?: () => void;
|
|
18
27
|
/** Tamanho do toggle. Default "md". */
|
|
19
28
|
size?: "sm" | "md";
|
|
20
29
|
/** Label invisível pra screen readers (a11y). */
|
|
21
30
|
ariaLabel?: string;
|
|
22
31
|
};
|
|
23
|
-
declare function SegmentedToggle<T extends string>({ id, className, value, options, onChange, size, ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;
|
|
32
|
+
declare function SegmentedToggle<T extends string>({ id, className, value, options, onChange, allowDeselect, onDeselect, size, ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;
|
|
24
33
|
export { SegmentedToggle };
|
|
25
34
|
export type { SegmentedToggleOption, SegmentedToggleProps };
|
package/dist/index.css
CHANGED
|
@@ -8004,10 +8004,12 @@ h6 {
|
|
|
8004
8004
|
gap: 2px;
|
|
8005
8005
|
border-radius: 12px;
|
|
8006
8006
|
border-width: 1px;
|
|
8007
|
-
border-color: var(--color-border-subtle);
|
|
8008
8007
|
--tw-bg-opacity: 1;
|
|
8009
8008
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
8010
8009
|
padding: 4px;
|
|
8010
|
+
/* GYR-1446 — borda um tico mais definida que a subtle (#F0F0F2), que somia
|
|
8011
|
+
sobre card branco. #E5E5EA = separador iOS, define sem pesar. */
|
|
8012
|
+
border-color: #E5E5EA;
|
|
8011
8013
|
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
|
|
8012
8014
|
}
|
|
8013
8015
|
|
|
@@ -8025,7 +8027,7 @@ h6 {
|
|
|
8025
8027
|
padding-bottom: 10px;
|
|
8026
8028
|
font-size: 13.5px;
|
|
8027
8029
|
font-weight: 500;
|
|
8028
|
-
color: var(--color-text-
|
|
8030
|
+
color: var(--color-text-secondary);
|
|
8029
8031
|
font-family: inherit;
|
|
8030
8032
|
transition:
|
|
8031
8033
|
background var(--duration-normal) var(--ease-default),
|