@stack-spot/citric-react 0.20.5 → 0.22.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 (19) hide show
  1. package/dist/citric.css +27 -2
  2. package/dist/components/IconBox.d.ts +10 -1
  3. package/dist/components/IconBox.d.ts.map +1 -1
  4. package/dist/components/IconBox.js.map +1 -1
  5. package/dist/components/ProgressBar.d.ts +5 -1
  6. package/dist/components/ProgressBar.d.ts.map +1 -1
  7. package/dist/components/ProgressBar.js +1 -1
  8. package/dist/components/ProgressBar.js.map +1 -1
  9. package/dist/components/Tabs/index.d.ts +1 -1
  10. package/dist/components/Tabs/index.d.ts.map +1 -1
  11. package/dist/components/Tabs/index.js +3 -2
  12. package/dist/components/Tabs/index.js.map +1 -1
  13. package/dist/components/Tabs/types.d.ts +6 -0
  14. package/dist/components/Tabs/types.d.ts.map +1 -1
  15. package/package.json +1 -1
  16. package/src/components/IconBox.tsx +10 -1
  17. package/src/components/ProgressBar.tsx +6 -2
  18. package/src/components/Tabs/index.tsx +3 -2
  19. package/src/components/Tabs/types.ts +6 -0
package/dist/citric.css CHANGED
@@ -481,11 +481,12 @@
481
481
 
482
482
  > nav {
483
483
  display: flex;
484
+ position: relative;
484
485
  border-bottom: 1px solid var(--light-600);
485
486
  > label {
486
487
  appearance: none;
487
488
  margin: 0;
488
- padding: 8px 32px;
489
+ padding: 8px min(2%, 32px);
489
490
  position: relative;
490
491
  display: flex;
491
492
  align-items: center;
@@ -515,6 +516,13 @@
515
516
  }
516
517
  }
517
518
 
519
+ &.equally-sized > nav > label {
520
+ padding: 8px 0;
521
+ flex: 1;
522
+ justify-content: center;
523
+ text-align: center;
524
+ }
525
+
518
526
  > section {
519
527
  display: flex;
520
528
  flex-direction: column;
@@ -1462,6 +1470,7 @@ input[type="range"][data-citric="slider"] {
1462
1470
 
1463
1471
 
1464
1472
  [data-citric="progress-bar"] {
1473
+ --speed: 1s;
1465
1474
  border-radius: var(--radius-lg);
1466
1475
  width: 100%;
1467
1476
  height: 2px;
@@ -1477,8 +1486,12 @@ input[type="range"][data-citric="slider"] {
1477
1486
  background-color: var(--scheme-500, var(--palette-500, var(--primary-500)));
1478
1487
  }
1479
1488
 
1489
+ &.fast {
1490
+ --speed: 0.5s;
1491
+ }
1492
+
1480
1493
  &.indeterminate:after {
1481
- animation: progress-indeterminate-bar 1s infinite;
1494
+ animation: progress-indeterminate-bar var(--speed) infinite;
1482
1495
  }
1483
1496
  }
1484
1497
 
@@ -1797,6 +1810,18 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
1797
1810
  border-radius: var(--radius-xs);
1798
1811
  }
1799
1812
 
1813
+ &.text {
1814
+ background-color: transparent;
1815
+ }
1816
+
1817
+ &.none, &[data-color-scheme].none, &[data-color-palette].none {
1818
+ --bg: transparent;
1819
+ --bg-hover: transparent;
1820
+ --size: auto;
1821
+ border-radius: 0;
1822
+ padding: 0;
1823
+ }
1824
+
1800
1825
  /* Colors */
1801
1826
 
1802
1827
  &[data-color-scheme] {
package/dist/components/IconBox.d.ts CHANGED
@@ -11,9 +11,18 @@ 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 depends 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
  *
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;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"}
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.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,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"}
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/ProgressBar.d.ts CHANGED
@@ -6,7 +6,11 @@ export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette
6
6
  * If not provided, the progress will be indeterminate, causing an animation loop.
7
7
  */
8
8
  progress?: number;
9
+ /**
10
+ * The speed which the bar animation runs. Only valid if `progress` is `undefined`.
11
+ */
12
+ speed?: 'normal' | 'fast';
9
13
  }
10
14
  export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps;
11
- export declare const ProgressBar: ({ progress, style, className, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const ProgressBar: ({ progress, speed, style, className, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
12
16
  //# sourceMappingURL=ProgressBar.d.ts.map
package/dist/components/ProgressBar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK5D,MAAM,WAAW,oBAAqB,SAAQ,eAAe,EAAE,gBAAgB;IAC7E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAA;AAExF,eAAO,MAAM,WAAW,6CAAsD,gBAAgB,4CAQ7F,CAAA"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK5D,MAAM,WAAW,oBAAqB,SAAQ,eAAe,EAAE,gBAAgB;IAC7E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAA;AAExF,eAAO,MAAM,WAAW,oDAA6D,gBAAgB,4CAQpG,CAAA"}
package/dist/components/ProgressBar.js CHANGED
@@ -4,5 +4,5 @@ import { isNil } from 'lodash';
4
4
  import { applyCSSVariable } from '../utils/css.js';
5
5
  import { withRef } from '../utils/react.js';
6
6
  import { CitricComponent } from './CitricComponent.js';
7
- export const ProgressBar = withRef(({ progress, style, className, ...props }) => _jsx(CitricComponent, { tag: "div", component: "progress-bar", className: listToClass([className, isNil(progress) && 'indeterminate']), style: progress === undefined ? style : applyCSSVariable(style, 'progress', progress), ...props }));
7
+ export const ProgressBar = withRef(({ progress, speed, style, className, ...props }) => _jsx(CitricComponent, { tag: "div", component: "progress-bar", className: listToClass([className, isNil(progress) && 'indeterminate', speed === 'fast' && 'fast']), style: progress === undefined ? style : applyCSSVariable(style, 'progress', progress), ...props }));
8
8
  //# sourceMappingURL=ProgressBar.js.map
package/dist/components/ProgressBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAE9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAanD,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CAChG,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,eAAe,CAAC,CAAC,EACvE,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,KACjF,KAAK,GACT,CACH,CAAA"}
1
+ {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAE9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAiBnD,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CACvG,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,eAAe,EAAE,KAAK,KAAK,MAAM,IAAI,MAAM,CAAC,CAAC,EACnG,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,KACjF,KAAK,GACT,CACH,CAAA"}
package/dist/components/Tabs/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { TabController } from './TabController.js';
2
2
  import { TabsProps } from './types.js';
3
- declare function _Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>): import("react/jsx-runtime").JSX.Element;
3
+ declare function _Tabs<Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }: TabsProps<Key>): import("react/jsx-runtime").JSX.Element;
4
4
  export declare function useTabController<Key extends string = string>(): TabController<Key> | undefined;
5
5
  export declare const Tabs: typeof _Tabs;
6
6
  export {};
package/dist/components/Tabs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKnC,iBAAS,KAAK,CAAC,GAAG,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,2CAsCvG;AAED,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE9F;AAWD,eAAO,MAAM,IAAI,cAAiB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKnC,iBAAS,KAAK,CAAC,GAAG,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,2CAsChI;AAED,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE9F;AAWD,eAAO,MAAM,IAAI,cAAiB,CAAA"}
package/dist/components/Tabs/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { listToClass } from '@stack-spot/portal-theme';
2
3
  import { useTranslate } from '@stack-spot/portal-translate';
3
4
  import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react';
4
5
  import { withRef } from '../../utils/react.js';
@@ -9,7 +10,7 @@ import { Center } from '../layout.js';
9
10
  import { TabController } from './TabController.js';
10
11
  import { findSelectedIndex } from './utils.js';
11
12
  const ctx = createContext(undefined);
12
- function _Tabs({ tabs, value, onChange, controller: ctrl, ...props }) {
13
+ function _Tabs({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }) {
13
14
  const controller = useMemo(() => ctrl ?? new TabController(tabs.map(t => t.key), value || tabs[0]?.key), []);
14
15
  const t = useTranslate(dictionary);
15
16
  const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
@@ -22,7 +23,7 @@ function _Tabs({ tabs, value, onChange, controller: ctrl, ...props }) {
22
23
  onChange?.(v);
23
24
  }), [tabs]);
24
25
  const nav = useMemo(() => tabs.map(({ key, label, disabled }, index) => (_jsxs("label", { children: [_jsx("input", { type: "radio", role: "tab", checked: index === selectedIndex, onChange: () => controller.setValue(key), disabled: disabled }), label || key] }, key))), [tabs, selectedIndex]);
25
- return (_jsx(ctx.Provider, { value: controller, children: _jsxs(CitricComponent, { tag: "div", component: "tabs", ...props, children: [_jsx("nav", { children: nav }), _jsx("section", { children: _jsx(ErrorBoundary, { message: t.error, children: _jsx(Suspense, { fallback: _jsx(Center, { style: { padding: '20px' }, children: _jsx(ProgressCircular, {}) }), children: selectedIndex === -1 ? null : tabs[selectedIndex]?.content }) }, selectedIndex) })] }) }));
26
+ return (_jsx(ctx.Provider, { value: controller, children: _jsxs(CitricComponent, { tag: "div", component: "tabs", className: listToClass([className, equallySized && 'equally-sized']), ...props, children: [_jsx("nav", { children: nav }), _jsx("section", { children: _jsx(ErrorBoundary, { message: t.error, children: _jsx(Suspense, { fallback: _jsx(Center, { style: { padding: '20px' }, children: _jsx(ProgressCircular, {}) }), children: selectedIndex === -1 ? null : tabs[selectedIndex]?.content }) }, selectedIndex) })] }) }));
26
27
  }
27
28
  export function useTabController() {
28
29
  return useContext(ctx);
package/dist/components/Tabs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}
package/dist/components/Tabs/types.d.ts CHANGED
@@ -41,6 +41,12 @@ export interface BaseTabsProps<Key extends string> extends WithColorScheme, With
41
41
  * A tab-controller, useful if you want to control the tabs outside the component context.
42
42
  */
43
43
  controller?: TabController<Key>;
44
+ /**
45
+ * Instead of each tab occupying only the space it needs, all tabs will have their sizes equally distributed.
46
+ *
47
+ * @default false
48
+ */
49
+ equallySized?: boolean;
44
50
  }
45
51
  export type TabsProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseTabsProps<Key>;
46
52
  //# sourceMappingURL=types.d.ts.map
package/dist/components/Tabs/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,WAAW,GAAG,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9C;;OAEG;IACH,GAAG,EAAE,GAAG,CAAC;IACT;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IAC1F;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,WAAW,GAAG,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9C;;OAEG;IACH,GAAG,EAAE,GAAG,CAAC;IACT;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IAC1F;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stack-spot/citric-react",
3
- "version": "0.20.5",
3
+ "version": "0.22.0",
4
4
  "author": "StackSpot",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/IconBox.tsx CHANGED
@@ -17,9 +17,18 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
17
17
  /**
18
18
  * The box appearance.
19
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 depends 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
+ *
20
29
  * @default 'circle'
21
30
  */
22
- appearance?: 'circle' | 'square',
31
+ appearance?: 'circle' | 'square' | 'text' | 'none',
23
32
  /**
24
33
  * Size of the box.
25
34
  *
package/src/components/ProgressBar.tsx CHANGED
@@ -12,15 +12,19 @@ export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette
12
12
  * If not provided, the progress will be indeterminate, causing an animation loop.
13
13
  */
14
14
  progress?: number,
15
+ /**
16
+ * The speed which the bar animation runs. Only valid if `progress` is `undefined`.
17
+ */
18
+ speed?: 'normal' | 'fast',
15
19
  }
16
20
 
17
21
  export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps
18
22
 
19
- export const ProgressBar = withRef(({ progress, style, className, ...props }: ProgressBarProps) =>
23
+ export const ProgressBar = withRef(({ progress, speed, style, className, ...props }: ProgressBarProps) =>
20
24
  <CitricComponent
21
25
  tag="div"
22
26
  component="progress-bar"
23
- className={listToClass([className, isNil(progress) && 'indeterminate'])}
27
+ className={listToClass([className, isNil(progress) && 'indeterminate', speed === 'fast' && 'fast'])}
24
28
  style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
25
29
  {...props}
26
30
  />,
package/src/components/Tabs/index.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { listToClass } from '@stack-spot/portal-theme'
1
2
  import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
2
3
  import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react'
3
4
  import { withRef } from '../../utils/react'
@@ -11,7 +12,7 @@ import { findSelectedIndex } from './utils'
11
12
 
12
13
  const ctx = createContext<TabController<any> | undefined>(undefined)
13
14
 
14
- function _Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>) {
15
+ function _Tabs<Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }: TabsProps<Key>) {
15
16
  const controller = useMemo(() => ctrl ?? new TabController<Key>(tabs.map(t => t.key), value || tabs[0]?.key), [])
16
17
  const t = useTranslate(dictionary)
17
18
  const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
@@ -37,7 +38,7 @@ function _Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ..
37
38
 
38
39
  return (
39
40
  <ctx.Provider value={controller}>
40
- <CitricComponent tag="div" component="tabs" {...props}>
41
+ <CitricComponent tag="div" component="tabs" className={listToClass([className, equallySized && 'equally-sized'])} {...props}>
41
42
  <nav>{nav}</nav>
42
43
  <section>
43
44
  <ErrorBoundary key={selectedIndex} message={t.error}>
package/src/components/Tabs/types.ts CHANGED
@@ -43,6 +43,12 @@ export interface BaseTabsProps<Key extends string> extends WithColorScheme, With
43
43
  * A tab-controller, useful if you want to control the tabs outside the component context.
44
44
  */
45
45
  controller?: TabController<Key>,
46
+ /**
47
+ * Instead of each tab occupying only the space it needs, all tabs will have their sizes equally distributed.
48
+ *
49
+ * @default false
50
+ */
51
+ equallySized?: boolean,
46
52
  }
47
53
 
48
54
  export type TabsProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseTabsProps<Key>