@stack-spot/citric-react 0.20.3 → 0.20.5

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.
Files changed (17) hide show
  1. package/dist/citric.css +2 -1
  2. package/dist/components/Accordion.d.ts.map +1 -1
  3. package/dist/components/Accordion.js +13 -1
  4. package/dist/components/Accordion.js.map +1 -1
  5. package/dist/components/IconBox.d.ts +5 -0
  6. package/dist/components/IconBox.d.ts.map +1 -1
  7. package/dist/components/IconBox.js +2 -3
  8. package/dist/components/IconBox.js.map +1 -1
  9. package/dist/components/ImageBox.d.ts +5 -0
  10. package/dist/components/ImageBox.d.ts.map +1 -1
  11. package/dist/components/ImageBox.js +2 -3
  12. package/dist/components/ImageBox.js.map +1 -1
  13. package/dist/theme.css +7 -7
  14. package/package.json +1 -1
  15. package/src/components/Accordion.tsx +15 -0
  16. package/src/components/IconBox.tsx +7 -3
  17. package/src/components/ImageBox.tsx +7 -3
package/dist/citric.css CHANGED
@@ -2222,6 +2222,7 @@ input[data-citric="favorite"][type="checkbox"] {
2222
2222
  gap: var(--spacing-2);
2223
2223
  position: relative;
2224
2224
  text-decoration: none;
2225
+ outline: none;
2225
2226
 
2226
2227
  /* Appearances */
2227
2228
 
@@ -2258,7 +2259,7 @@ input[data-citric="favorite"][type="checkbox"] {
2258
2259
 
2259
2260
  /* States */
2260
2261
 
2261
- &:focus {
2262
+ &:focus-visible {
2262
2263
  outline: 0.125rem solid var(--inverse-500);
2263
2264
  outline-offset: 0.15rem;
2264
2265
  }
package/dist/components/Accordion.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAAA;AAEtG,eAAO,MAAM,SAAS,oGACmF,cAAc,4CAkCrH,CAAA"}
1
+ {"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAAA;AAEtG,eAAO,MAAM,SAAS,oGACmF,cAAc,4CAqCrH,CAAA"}
package/dist/components/Accordion.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { listToClass } from '@stack-spot/portal-theme';
3
+ import { useTranslate } from '@stack-spot/portal-translate';
3
4
  import { useEffect, useMemo, useState } from 'react';
4
5
  import { applyCSSVariable } from '../utils/css.js';
5
6
  import { withRef } from '../utils/react.js';
6
7
  import { CitricComponent } from './CitricComponent.js';
7
8
  export const Accordion = withRef(({ id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }) => {
9
+ const t = useTranslate(dictionary);
8
10
  const [ariaHidden, setAriaHidden] = useState(!expanded);
9
11
  const accordionId = useMemo(() => id || `${Math.random()}`, [id]);
10
12
  useEffect(() => {
@@ -13,8 +15,18 @@ export const Accordion = withRef(({ id, appearance, expanded, onChange, header,
13
15
  const expandBtn = _jsx("input", { type: "checkbox", checked: expanded, onChange: () => {
14
16
  setAriaHidden(!ariaHidden);
15
17
  onChange?.(!expanded);
16
- }, onKeyDown: e => e.key === 'Enter' && e.target.click?.(), "aria-controls": accordionId });
18
+ }, "aria-label": ariaHidden ? t.open : t.close, title: ariaHidden ? t.open : t.close, onKeyDown: e => e.key === 'Enter' && e.target.click?.(), "aria-controls": accordionId });
17
19
  const headerContent = typeof header === 'function' ? header(expandBtn) : _jsxs("label", { children: [header, expandBtn] });
18
20
  return (_jsxs(CitricComponent, { tag: "div", component: "accordion", className: listToClass([appearance, className]), style: applyCSSVariable(style, 'max-height', `${maxHeight}px`), ...props, children: [_jsx("header", { children: headerContent }), _jsx("section", { id: accordionId, "aria-hidden": ariaHidden, ...(ariaHidden ? { inert: 'true' } : {}), children: appearance === 'card' ? _jsx("div", { className: "content", children: children }) : children })] }));
19
21
  });
22
+ const dictionary = {
23
+ en: {
24
+ open: 'Open',
25
+ close: 'Close',
26
+ },
27
+ pt: {
28
+ open: 'Abrir',
29
+ close: 'Fechar',
30
+ },
31
+ };
20
32
  //# sourceMappingURL=Accordion.js.map
package/dist/components/Accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAkCnD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAC/B,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EACrH,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IACvD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,gBAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAK,CAAC,CAAC,MAAsB,CAAC,KAAK,EAAE,EAAE,mBACzD,WAAW,GAC1B,CAAA;IACF,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,4BAAQ,MAAM,EAAE,SAAS,IAAS,CAAA;IAC3G,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,IAAI,CAAC,KAC1D,KAAK,aAET,2BAAS,aAAa,GAAU,EAChC,kBAAS,EAAE,EAAE,WAAW,iBAAe,UAAU,KAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACzF,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,GACrE,IACM,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAkCnD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAC/B,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EACrH,EAAE;IACF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IACvD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,gBAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC,gBACW,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACzC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACpC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAK,CAAC,CAAC,MAAsB,CAAC,KAAK,EAAE,EAAE,mBACzD,WAAW,GAC1B,CAAA;IACF,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,4BAAQ,MAAM,EAAE,SAAS,IAAS,CAAA;IAC3G,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,IAAI,CAAC,KAC1D,KAAK,aAET,2BAAS,aAAa,GAAU,EAChC,kBAAS,EAAE,EAAE,WAAW,iBAAe,UAAU,KAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACzF,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,GACrE,IACM,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACmB,CAAA"}
package/dist/components/IconBox.d.ts CHANGED
@@ -17,6 +17,11 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
17
17
  /**
18
18
  * Size of the box.
19
19
  *
20
+ * - xs: 20px;
21
+ * - sm: 24px;
22
+ * - md: 32px;
23
+ * - lg: 40px.
24
+ *
20
25
  * @default 'sm'
21
26
  */
22
27
  size?: 'xs' | 'sm' | 'md' | 'lg';
package/dist/components/IconBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAInE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H,iBAAS,QAAQ,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EAC3E,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAkB9G;AAED;;GAEG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE/G;AAED;;GAEG;AACH,iBAAS,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE3F;AAED,eAAO,MAAM,OAAO,iBAAoB,CAAA;AACxC,eAAO,MAAM,UAAU,oBAAuB,CAAA;AAC9C,eAAO,MAAM,QAAQ,kBAAqB,CAAA"}
1
+ {"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H,iBAAS,QAAQ,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EAC3E,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAkB9G;AAED;;GAEG;AACH,iBAAS,WAAW,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE/G;AAED;;GAEG;AACH,iBAAS,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAE3F;AAED,eAAO,MAAM,OAAO,iBAAoB,CAAA;AACxC,eAAO,MAAM,UAAU,oBAAuB,CAAA;AAC9C,eAAO,MAAM,QAAQ,kBAAqB,CAAA"}
package/dist/components/IconBox.js CHANGED
@@ -1,18 +1,17 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { listToClass } from '@stack-spot/portal-theme';
3
- import { useCallback } from 'react';
4
3
  import { useCitricController } from '../context/hooks.js';
5
4
  import { withRef } from '../utils/react.js';
6
5
  import { CitricComponent } from './CitricComponent.js';
7
6
  function _IconBox({ group, icon, tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
8
7
  const citric = useCitricController();
9
- const handleClick = useCallback((e) => {
8
+ function handleClick(e) {
10
9
  onClick?.(e);
11
10
  if (tag === 'button')
12
11
  citric?.onClickButton?.(e, analytics ?? false);
13
12
  else if (tag === 'a')
14
13
  citric?.onClickLink?.(e, analytics ?? false);
15
- }, [tag]);
14
+ }
16
15
  return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
17
16
  }
18
17
  /**
package/dist/components/IconBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0CnD,SAAS,QAAQ,CACf,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAE7G,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBAC/E,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,WAAW,CAAkC,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0C;IAC9G,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,GAAK,CAAA;AACrE,CAAC;AAED;;GAEG;AACH,SAAS,SAAS,CAAkC,KAAwC;IAC1F,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACvC,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;AACxC,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA"}
1
+ {"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+CnD,SAAS,QAAQ,CACf,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAE7G,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBAC/E,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,WAAW,CAAkC,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0C;IAC9G,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,GAAK,CAAA;AACrE,CAAC;AAED;;GAEG;AACH,SAAS,SAAS,CAAkC,KAAwC;IAC1F,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACvC,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;AACxC,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA"}
package/dist/components/ImageBox.d.ts CHANGED
@@ -16,6 +16,11 @@ export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalet
16
16
  /**
17
17
  * Size of the box.
18
18
  *
19
+ * - xs: 20px;
20
+ * - sm: 24px;
21
+ * - md: 32px;
22
+ * - lg: 40px.
23
+ *
19
24
  * @default 'sm'
20
25
  */
21
26
  size?: 'xs' | 'sm' | 'md' | 'lg';
package/dist/components/ImageBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF,iBAAS,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC9C,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkB/F;AAED;;GAEG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,2CAEhE;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,2CAEzD;AAED,eAAO,MAAM,QAAQ,kBAAqB,CAAA;AAC1C,eAAO,MAAM,WAAW,qBAAwB,CAAA;AAChD,eAAO,MAAM,SAAS,mBAAsB,CAAA"}
1
+ {"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF,iBAAS,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAC9C,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CAkB/F;AAED;;GAEG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,2CAEhE;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,2CAEzD;AAED,eAAO,MAAM,QAAQ,kBAAqB,CAAA;AAC1C,eAAO,MAAM,WAAW,qBAAwB,CAAA;AAChD,eAAO,MAAM,SAAS,mBAAsB,CAAA"}
package/dist/components/ImageBox.js CHANGED
@@ -1,18 +1,17 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { listToClass } from '@stack-spot/portal-theme';
3
- import { useCallback } from 'react';
4
3
  import { useCitricController } from '../context/hooks.js';
5
4
  import { withRef } from '../utils/react.js';
6
5
  import { CitricComponent } from './CitricComponent.js';
7
6
  function _ImageBox({ tag, appearance, size, className, analytics, onClick, feedback, ...props }) {
8
7
  const citric = useCitricController();
9
- const handleClick = useCallback((e) => {
8
+ function handleClick(e) {
10
9
  onClick?.(e);
11
10
  if (tag === 'button')
12
11
  citric?.onClickButton?.(e, analytics ?? false);
13
12
  else if (tag === 'a')
14
13
  citric?.onClickLink?.(e, analytics ?? false);
15
- }, [tag]);
14
+ }
16
15
  return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass([appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
17
16
  }
18
17
  /**
package/dist/components/ImageBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0CnD,SAAS,SAAS,CAChB,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE9F,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,YAAY,CAAC,KAA2C;IAC/D,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAI,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,SAAS,UAAU,CAAC,KAAsC;IACxD,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;AAC1C,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAAA;AAChD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA"}
1
+ {"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+CnD,SAAS,SAAS,CAChB,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE9F,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,YAAY,CAAC,KAA2C;IAC/D,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAI,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,SAAS,UAAU,CAAC,KAAsC;IACxD,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;AAC1C,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAAA;AAChD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA"}
package/dist/theme.css CHANGED
@@ -44,13 +44,13 @@
44
44
  --font-h4: 600 clamp(1.125rem,4vw + 1rem,1.25rem)/1.2 Inter;
45
45
  --font-h5: 600 1rem/1.25 Inter;
46
46
  --font-h6: 600 1rem/1.429 Inter;
47
- --font-microtext1: 400 0.75rem/1.333 Roboto Mono, monospace;
48
- --font-subtitle1: 400 1.5rem/1.333 Roboto Mono, monospace;
49
- --font-subtitle2: 400 1.25rem/1.6 Roboto Mono, monospace;
50
- --font-subtitle3: 400 1rem/1.5 Roboto Mono, monospace;
51
- --font-subtitle4: 400 0.875rem/1.714 Roboto Mono, monospace;
52
- --font-overheader1: 600 0.875rem/1.5 Roboto Mono, monospace;
53
- --font-overheader2: 600 0.75rem/1.5 Roboto Mono, monospace;
47
+ --font-microtext1: 400 0.75rem/1.333 Roboto, sans-serif;
48
+ --font-subtitle1: 400 1.5rem/1.333 Inter;
49
+ --font-subtitle2: 400 1.25rem/1.6 Inter;
50
+ --font-subtitle3: 400 1rem/1.5 Inter;
51
+ --font-subtitle4: 400 0.875rem/1.714 Inter;
52
+ --font-overheader1: 600 0.875rem/1.5 Inter;
53
+ --font-overheader2: 600 0.75rem/1.5 Inter;
54
54
  }
55
55
 
56
56
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.20.3",
3
+ "version": "0.20.5",
4
4
  "author": "StackSpot",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/Accordion.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import { listToClass } from '@stack-spot/portal-theme'
2
+ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
2
3
  import { useEffect, useMemo, useState } from 'react'
3
4
  import { applyCSSVariable } from '../utils/css'
4
5
  import { withRef } from '../utils/react'
@@ -39,6 +40,7 @@ export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'
39
40
  export const Accordion = withRef((
40
41
  { id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }: AccordionProps,
41
42
  ) => {
43
+ const t = useTranslate(dictionary)
42
44
  const [ariaHidden, setAriaHidden] = useState(!expanded)
43
45
  const accordionId = useMemo(() => id || `${Math.random()}`, [id])
44
46
 
@@ -53,6 +55,8 @@ export const Accordion = withRef((
53
55
  setAriaHidden(!ariaHidden)
54
56
  onChange?.(!expanded)
55
57
  }}
58
+ aria-label={ariaHidden ? t.open : t.close}
59
+ title={ariaHidden ? t.open : t.close}
56
60
  onKeyDown={e => e.key === 'Enter' && (e.target as HTMLElement).click?.()}
57
61
  aria-controls={accordionId}
58
62
  />
@@ -72,3 +76,14 @@ export const Accordion = withRef((
72
76
  </CitricComponent>
73
77
  )
74
78
  })
79
+
80
+ const dictionary = {
81
+ en: {
82
+ open: 'Open',
83
+ close: 'Close',
84
+ },
85
+ pt: {
86
+ open: 'Abrir',
87
+ close: 'Fechar',
88
+ },
89
+ } satisfies Dictionary
package/src/components/IconBox.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import { BaseIconProps, IconGroup } from '@stack-spot/citric-icons'
2
2
  import { listToClass } from '@stack-spot/portal-theme'
3
- import { useCallback } from 'react'
4
3
  import { useCitricController } from '../context/hooks'
5
4
  import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
6
5
  import { withRef } from '../utils/react'
@@ -24,6 +23,11 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
24
23
  /**
25
24
  * Size of the box.
26
25
  *
26
+ * - xs: 20px;
27
+ * - sm: 24px;
28
+ * - md: 32px;
29
+ * - lg: 40px.
30
+ *
27
31
  * @default 'sm'
28
32
  */
29
33
  size?: 'xs' | 'sm' | 'md' | 'lg',
@@ -51,11 +55,11 @@ function _IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
51
55
  ) {
52
56
  const citric = useCitricController()
53
57
 
54
- const handleClick = useCallback((e: React.MouseEvent<any>) => {
58
+ function handleClick(e: React.MouseEvent<any>) {
55
59
  onClick?.(e)
56
60
  if (tag === 'button') citric?.onClickButton?.(e, analytics ?? false)
57
61
  else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
58
- }, [tag])
62
+ }
59
63
 
60
64
  return <CitricComponent
61
65
  tag={(tag || 'i') as any}
package/src/components/ImageBox.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import { listToClass } from '@stack-spot/portal-theme'
2
- import { useCallback } from 'react'
3
2
  import { useCitricController } from '../context/hooks'
4
3
  import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
5
4
  import { withRef } from '../utils/react'
@@ -23,6 +22,11 @@ export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalet
23
22
  /**
24
23
  * Size of the box.
25
24
  *
25
+ * - xs: 20px;
26
+ * - sm: 24px;
27
+ * - md: 32px;
28
+ * - lg: 40px.
29
+ *
26
30
  * @default 'sm'
27
31
  */
28
32
  size?: 'xs' | 'sm' | 'md' | 'lg',
@@ -50,11 +54,11 @@ function _ImageBox<T extends ImageBoxTag = 'div'>(
50
54
  ) {
51
55
  const citric = useCitricController()
52
56
 
53
- const handleClick = useCallback((e: React.MouseEvent<any>) => {
57
+ function handleClick(e: React.MouseEvent<any>) {
54
58
  onClick?.(e)
55
59
  if (tag === 'button') citric?.onClickButton?.(e, analytics ?? false)
56
60
  else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
57
- }, [tag])
61
+ }
58
62
 
59
63
  return <CitricComponent
60
64
  tag={(tag || 'i') as any}