@stack-spot/citric-react 0.21.0 → 0.22.0

package/dist/citric.css

@@ -481,11 +481,12 @@
 
   > nav {
     display: flex;
+    position: relative;
     border-bottom: 1px solid var(--light-600);
     > label {
       appearance: none;
       margin: 0;
-      padding: 8px 32px;
+      padding: 8px min(2%, 32px);
       position: relative;
       display: flex;
       align-items: center;
@@ -515,6 +516,13 @@
     }
   }
 
+  &.equally-sized > nav > label {
+    padding: 8px 0;
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+  }
+
   > section {
     display: flex;
     flex-direction: column;
@@ -1462,6 +1470,7 @@ input[type="range"][data-citric="slider"] {
 
 
 [data-citric="progress-bar"] {
+  --speed: 1s;
   border-radius: var(--radius-lg);
   width: 100%;
   height: 2px;
@@ -1477,8 +1486,12 @@ input[type="range"][data-citric="slider"] {
     background-color: var(--scheme-500, var(--palette-500, var(--primary-500)));
   }
 
+  &.fast {
+    --speed: 0.5s;
+  }
+
   &.indeterminate:after {
-    animation: progress-indeterminate-bar 1s infinite;
+    animation: progress-indeterminate-bar var(--speed) infinite;
   }
 }
 

package/dist/components/IconBox.d.ts

@@ -17,7 +17,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
      * background and foreground colors change on hover or focus.
      * - text: a circle with transparent background. Its size depends on the value of `size`. If this is clickable, the background and
      * foreground colors change on hover or focus (it won't be transparent).
-     * - none: no special styling, its size depend only on the size of the icon (the property `size` is ignored). Even if this is clickable,
+     * - none: no special styling, its size depends only on the size of the icon (the property `size` is ignored). Even if this is clickable,
      * the style doesn't change on hover or focus.
      *
      * @default 'circle'

package/dist/components/ProgressBar.d.ts

@@ -6,7 +6,11 @@ export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette
      * If not provided, the progress will be indeterminate, causing an animation loop.
      */
     progress?: number;
+    /**
+     * The speed which the bar animation runs. Only valid if `progress` is `undefined`.
+     */
+    speed?: 'normal' | 'fast';
 }
 export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps;
-export declare const ProgressBar: ({ progress, style, className, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressBar: ({ progress, speed, style, className, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/ProgressBar.d.ts.map

@@ -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"}
+{"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

@@ -4,5 +4,5 @@ import { isNil } from 'lodash';
 import { applyCSSVariable } from '../utils/css.js';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-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 }));
+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 }));
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar.js.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 import { TabController } from './TabController.js';
 import { TabsProps } from './types.js';
-declare function _Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>): import("react/jsx-runtime").JSX.Element;
+declare function _Tabs<Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }: TabsProps<Key>): import("react/jsx-runtime").JSX.Element;
 export declare function useTabController<Key extends string = string>(): TabController<Key> | undefined;
 export declare const Tabs: typeof _Tabs;
 export {};

package/dist/components/Tabs/index.d.ts.map

@@ -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"}
+{"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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react';
 import { withRef } from '../../utils/react.js';
@@ -9,7 +10,7 @@ import { Center } from '../layout.js';
 import { TabController } from './TabController.js';
 import { findSelectedIndex } from './utils.js';
 const ctx = createContext(undefined);
-function _Tabs({ tabs, value, onChange, controller: ctrl, ...props }) {
+function _Tabs({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }) {
     const controller = useMemo(() => ctrl ?? new TabController(tabs.map(t => t.key), value || tabs[0]?.key), []);
     const t = useTranslate(dictionary);
     const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
@@ -22,7 +23,7 @@ function _Tabs({ tabs, value, onChange, controller: ctrl, ...props }) {
         onChange?.(v);
     }), [tabs]);
     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]);
-    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) })] }) }));
+    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) })] }) }));
 }
 export function useTabController() {
     return useContext(ctx);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzF,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3C,MAAM,GAAG,GAAG,aAAa,CAAiC,SAAS,CAAC,CAAA;AAEpE,SAAS,KAAK,CAAqB,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC/H,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,IAAI,aAAa,CAAM,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAA;IACjH,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;IAElG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK;YAAE,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;QACxC,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;QAC5C,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;IACf,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEX,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAClD,4BACE,gBAAO,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,KAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAChI,KAAK,IAAI,GAAG,KAFH,GAAG,CAGP,CACT,CAAC,EACF,CAAC,IAAI,EAAE,aAAa,CAAC,CACtB,CAAA;IAED,OAAO,CACL,KAAC,GAAG,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAC7B,MAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,YAAY,IAAI,eAAe,CAAC,CAAC,KAAM,KAAK,aACzH,wBAAM,GAAG,GAAO,EAChB,4BACE,KAAC,aAAa,IAAqB,OAAO,EAAE,CAAC,CAAC,KAAK,YACjD,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,MAAM,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAAE,KAAC,gBAAgB,KAAG,GAAS,YAClF,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,GAClD,IAHO,aAAa,CAIjB,GACR,IACM,GACL,CAChB,CAAA;AACH,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC9B,OAAO,UAAU,CAAC,GAAG,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,8BAA8B;KACtC;IACD,EAAE,EAAE;QACF,KAAK,EAAE,oCAAoC;KAC5C;CACmB,CAAA;AAEtB,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAA"}

package/dist/components/Tabs/types.d.ts

@@ -41,6 +41,12 @@ export interface BaseTabsProps<Key extends string> extends WithColorScheme, With
      * A tab-controller, useful if you want to control the tabs outside the component context.
      */
     controller?: TabController<Key>;
+    /**
+     * Instead of each tab occupying only the space it needs, all tabs will have their sizes equally distributed.
+     *
+     * @default false
+     */
+    equallySized?: boolean;
 }
 export type TabsProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseTabsProps<Key>;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Tabs/types.d.ts.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/IconBox.tsx

@@ -23,7 +23,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
    * background and foreground colors change on hover or focus.
    * - text: a circle with transparent background. Its size depends on the value of `size`. If this is clickable, the background and
    * foreground colors change on hover or focus (it won't be transparent).
-   * - none: no special styling, its size depend only on the size of the icon (the property `size` is ignored). Even if this is clickable,
+   * - none: no special styling, its size depends only on the size of the icon (the property `size` is ignored). Even if this is clickable,
    * the style doesn't change on hover or focus.
    * 
    * @default 'circle'

package/src/components/ProgressBar.tsx

@@ -12,15 +12,19 @@ export interface BaseProgressBarProps extends WithColorScheme, WithColorPalette
    * If not provided, the progress will be indeterminate, causing an animation loop.
    */
   progress?: number,
+  /**
+   * The speed which the bar animation runs. Only valid if `progress` is `undefined`.
+   */
+  speed?: 'normal' | 'fast',
 }
 
 export type ProgressBarProps = React.JSX.IntrinsicElements['div'] & BaseProgressBarProps
 
-export const ProgressBar = withRef(({ progress, style, className, ...props }: ProgressBarProps) =>
+export const ProgressBar = withRef(({ progress, speed, style, className, ...props }: ProgressBarProps) =>
   <CitricComponent
     tag="div"
     component="progress-bar"
-    className={listToClass([className, isNil(progress) && 'indeterminate'])}
+    className={listToClass([className, isNil(progress) && 'indeterminate', speed === 'fast' && 'fast'])}
     style={progress === undefined ? style : applyCSSVariable(style, 'progress', progress)}
     {...props}
   />,

package/src/components/Tabs/index.tsx

@@ -1,3 +1,4 @@
+import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react'
 import { withRef } from '../../utils/react'
@@ -11,7 +12,7 @@ import { findSelectedIndex } from './utils'
 
 const ctx = createContext<TabController<any> | undefined>(undefined)
 
-function _Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>) {
+function _Tabs<Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, className, ...props }: TabsProps<Key>) {
   const controller = useMemo(() => ctrl ?? new TabController<Key>(tabs.map(t => t.key), value || tabs[0]?.key), [])
   const t = useTranslate(dictionary)
   const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
@@ -37,7 +38,7 @@ function _Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ..
 
   return (
     <ctx.Provider value={controller}>
-      <CitricComponent tag="div" component="tabs" {...props}>
+      <CitricComponent tag="div" component="tabs" className={listToClass([className, equallySized && 'equally-sized'])} {...props}>
         <nav>{nav}</nav>
         <section>
           <ErrorBoundary key={selectedIndex} message={t.error}>

package/src/components/Tabs/types.ts

@@ -43,6 +43,12 @@ export interface BaseTabsProps<Key extends string> extends WithColorScheme, With
    * A tab-controller, useful if you want to control the tabs outside the component context.
    */
   controller?: TabController<Key>,
+  /**
+   * Instead of each tab occupying only the space it needs, all tabs will have their sizes equally distributed.
+   * 
+   * @default false
+   */
+  equallySized?: boolean,
 }
 
 export type TabsProps<Key extends string> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseTabsProps<Key>