@stack-spot/citric-react 0.20.4 → 0.21.0

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 (16) hide show
  1. package/dist/citric.css +14 -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 +15 -1
  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/package.json +1 -1
  14. package/src/components/Accordion.tsx +15 -0
  15. package/src/components/IconBox.tsx +17 -4
  16. package/src/components/ImageBox.tsx +7 -3
package/dist/citric.css CHANGED
@@ -1797,6 +1797,18 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
1797
1797
  border-radius: var(--radius-xs);
1798
1798
  }
1799
1799
 
1800
+ &.text {
1801
+ background-color: transparent;
1802
+ }
1803
+
1804
+ &.none, &[data-color-scheme].none, &[data-color-palette].none {
1805
+ --bg: transparent;
1806
+ --bg-hover: transparent;
1807
+ --size: auto;
1808
+ border-radius: 0;
1809
+ padding: 0;
1810
+ }
1811
+
1800
1812
  /* Colors */
1801
1813
 
1802
1814
  &[data-color-scheme] {
@@ -2222,6 +2234,7 @@ input[data-citric="favorite"][type="checkbox"] {
2222
2234
  gap: var(--spacing-2);
2223
2235
  position: relative;
2224
2236
  text-decoration: none;
2237
+ outline: none;
2225
2238
 
2226
2239
  /* Appearances */
2227
2240
 
@@ -2258,7 +2271,7 @@ input[data-citric="favorite"][type="checkbox"] {
2258
2271
 
2259
2272
  /* States */
2260
2273
 
2261
- &:focus {
2274
+ &:focus-visible {
2262
2275
  outline: 0.125rem solid var(--inverse-500);
2263
2276
  outline-offset: 0.15rem;
2264
2277
  }
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
@@ -11,12 +11,26 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
11
11
  /**
12
12
  * The box appearance.
13
13
  *
14
+ * - circle: a circle with a background color. Its size depends on the value of `size`. If this is clickable, the background and
15
+ * foreground colors change on hover or focus.
16
+ * - square: a square with rounded corners and a background color. Its size depends on the value of `size`. If this is clickable, the
17
+ * background and foreground colors change on hover or focus.
18
+ * - text: a circle with transparent background. Its size depends on the value of `size`. If this is clickable, the background and
19
+ * foreground colors change on hover or focus (it won't be transparent).
20
+ * - none: no special styling, its size depend only on the size of the icon (the property `size` is ignored). Even if this is clickable,
21
+ * the style doesn't change on hover or focus.
22
+ *
14
23
  * @default 'circle'
15
24
  */
16
- appearance?: 'circle' | 'square';
25
+ appearance?: 'circle' | 'square' | 'text' | 'none';
17
26
  /**
18
27
  * Size of the box.
19
28
  *
29
+ * - xs: 20px;
30
+ * - sm: 24px;
31
+ * - md: 32px;
32
+ * - lg: 40px.
33
+ *
20
34
  * @default 'sm'
21
35
  */
22
36
  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;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;;;;;;;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;AAwDnD,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.20.4",
3
+ "version": "0.21.0",
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'
@@ -18,12 +17,26 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
18
17
  /**
19
18
  * The box appearance.
20
19
  *
20
+ * - circle: a circle with a background color. Its size depends on the value of `size`. If this is clickable, the background and
21
+ * foreground colors change on hover or focus.
22
+ * - square: a square with rounded corners and a background color. Its size depends on the value of `size`. If this is clickable, the
23
+ * background and foreground colors change on hover or focus.
24
+ * - text: a circle with transparent background. Its size depends on the value of `size`. If this is clickable, the background and
25
+ * foreground colors change on hover or focus (it won't be transparent).
26
+ * - none: no special styling, its size depend only on the size of the icon (the property `size` is ignored). Even if this is clickable,
27
+ * the style doesn't change on hover or focus.
28
+ *
21
29
  * @default 'circle'
22
30
  */
23
- appearance?: 'circle' | 'square',
31
+ appearance?: 'circle' | 'square' | 'text' | 'none',
24
32
  /**
25
33
  * Size of the box.
26
34
  *
35
+ * - xs: 20px;
36
+ * - sm: 24px;
37
+ * - md: 32px;
38
+ * - lg: 40px.
39
+ *
27
40
  * @default 'sm'
28
41
  */
29
42
  size?: 'xs' | 'sm' | 'md' | 'lg',
@@ -51,11 +64,11 @@ function _IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
51
64
  ) {
52
65
  const citric = useCitricController()
53
66
 
54
- const handleClick = useCallback((e: React.MouseEvent<any>) => {
67
+ function handleClick(e: React.MouseEvent<any>) {
55
68
  onClick?.(e)
56
69
  if (tag === 'button') citric?.onClickButton?.(e, analytics ?? false)
57
70
  else if (tag === 'a') citric?.onClickLink?.(e, analytics ?? false)
58
- }, [tag])
71
+ }
59
72
 
60
73
  return <CitricComponent
61
74
  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}