@stack-spot/citric-react 0.44.0 → 0.46.0

package/dist/citric.css

@@ -519,7 +519,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 8px;
         background-color: transparent;
         border: none;
         outline: none;
@@ -609,7 +609,7 @@
         padding: 8px 32px;
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 8px;
         background-color: transparent;
         border: none;
         border-radius: 2px;

package/dist/components/Stepper.d.ts

@@ -66,5 +66,5 @@ export type StepperProps<Key extends string> = Omit<React.JSX.IntrinsicElements[
  * return <Stepper tabs={steps} />
  * ```
  */
-export declare const Stepper: <Key extends string>({ tabs: initialTabs, controller: ctrl, value, onChange, buttons, className, ...props }: StepperProps<Key>) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: <Key extends string>({ tabs: initialTabs, value, onChange, buttons, className, ...props }: StepperProps<Key>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Stepper.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAO,MAAM,cAAc,CAAA;AAGjD,MAAM,WAAW,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,GAAG,CAAC;IAC9E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAClB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB;;;WAGG;QACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QAC1C;;;WAGG;QACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QACtC;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACH;AAED,MAAM,MAAM,YAAY,CAAC,GAAG,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;AAQxI;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,GACD,GAAG,SAAS,MAAM,0FAC8D,YAAY,CAAC,GAAG,CAAC,4CA2DnH,CAAA"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAO,MAAM,cAAc,CAAA;AAGjD,MAAM,WAAW,gBAAgB,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,GAAG,CAAC;IAC9E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAClB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB;;;WAGG;QACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QAC1C;;;WAGG;QACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC;QACtC;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACH;AAED,MAAM,MAAM,YAAY,CAAC,GAAG,SAAS,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;AAoDxI;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,GACD,GAAG,SAAS,MAAM,wEAC4C,YAAY,CAAC,GAAG,CAAC,4CAyBjG,CAAA"}

package/dist/components/Stepper.js

@@ -1,12 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { withRef } from '../utils/react.js';
 import { Button } from './Button.js';
-import { Column, Row } from './layout.js';
-import { Tabs } from './Tabs/index.js';
-import { TabController } from './Tabs/TabController.js';
+import { Row } from './layout.js';
+import { Tabs, useTabController } from './Tabs/index.js';
 import { findSelectedIndex } from './Tabs/utils.js';
 function getTabsWithDisabled(tabs, value) {
     let index = findSelectedIndex(tabs, value ?? '');
@@ -14,6 +13,27 @@ function getTabsWithDisabled(tabs, value) {
         index = 0;
     return tabs.map((t, i) => ({ ...t, disabled: i > index }));
 }
+const StepperButtons = ({ buttons, tabs }) => {
+    const controller = useTabController();
+    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
+    const t = useTranslate(dictionary);
+    const tabsRef = useRef(tabs);
+    tabsRef.current = tabs;
+    useEffect(() => controller.onChange((value) => {
+        setSelectedIndex(findSelectedIndex(tabsRef.current, value));
+    }), [controller]);
+    const onPrevious = useCallback(() => {
+        controller.previous();
+        if (typeof buttons === 'object')
+            buttons.onPrevious?.(controller.getValue());
+    }, [controller]);
+    const onNext = useCallback(() => {
+        controller.next();
+        if (typeof buttons === 'object')
+            buttons.onNext?.(controller.getValue());
+    }, [controller]);
+    return _jsxs(Row, { mt: "20px", justifyContent: (typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between', children: [selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (_jsx(Button, { onClick: buttons.onCancel, colorScheme: "inverse", appearance: "outlined", children: buttons.cancel || t.cancel })), selectedIndex > 0 && buttons && (_jsx(Button, { onClick: onPrevious, colorScheme: "inverse", appearance: "outlined", children: (typeof buttons === 'object' && buttons.previous) || t.previous })), selectedIndex < tabs.length - 1 && buttons && (_jsx(Button, { onClick: onNext, children: (typeof buttons === 'object' && buttons.next) || t.next })), selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (_jsx(Button, { onClick: buttons.onFinish, children: buttons.finish || t.finish }))] });
+};
 /**
  * A Stepper is a tab view with a different appearance. To control the current tab (step), retrieve the controller by calling
  * `useTabsController()` from within a tab (step) content.
@@ -33,28 +53,12 @@ function getTabsWithDisabled(tabs, value) {
  * return <Stepper tabs={steps} />
  * ```
  */
-export const Stepper = withRef(function Stepper({ tabs: initialTabs, controller: ctrl, value, onChange, buttons = true, className, ...props }) {
-    const controller = useMemo(() => ctrl ?? new TabController(initialTabs.map(t => t.key), value || initialTabs[0]?.key), []);
+export const Stepper = withRef(function Stepper({ tabs: initialTabs, value, onChange, buttons = true, className, ...props }) {
     const [tabs, setTabs] = useState(getTabsWithDisabled(initialTabs, value));
-    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
-    const t = useTranslate(dictionary);
-    useEffect(() => controller.onChange((v) => {
-        setSelectedIndex(findSelectedIndex(tabs, v));
-    }), [tabs]);
-    useEffect(() => controller.onChange((value) => {
-        setTabs(getTabsWithDisabled(initialTabs, value));
-    }), []);
-    const onPrevious = useCallback(() => {
-        controller.previous();
-        if (typeof buttons === 'object')
-            buttons.onPrevious?.(controller.getValue());
-    }, []);
-    const onNext = useCallback(() => {
-        controller.next();
-        if (typeof buttons === 'object')
-            buttons.onNext?.(controller.getValue());
-    }, []);
-    return buttons ? (_jsxs(Column, { ...props, className: className, gap: "20px", children: [_jsx(Tabs, { tabs: tabs, controller: controller, value: value, onChange: onChange, className: "stepper" }), _jsxs(Row, { justifyContent: (typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between', children: [selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (_jsx(Button, { onClick: buttons.onCancel, colorScheme: "inverse", appearance: "outlined", children: buttons.cancel || t.cancel })), selectedIndex > 0 && buttons && (_jsx(Button, { onClick: onPrevious, colorScheme: "inverse", appearance: "outlined", children: (typeof buttons === 'object' && buttons.previous) || t.previous })), selectedIndex < tabs.length - 1 && buttons && (_jsx(Button, { onClick: onNext, children: (typeof buttons === 'object' && buttons.next) || t.next })), selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (_jsx(Button, { onClick: buttons.onFinish, children: buttons.finish || t.finish }))] })] })) : _jsx(Tabs, { tabs: tabs, controller: controller, value: value, onChange: onChange, className: listToClass([className, 'stepper']), ...props });
+    return buttons ? (_jsx(Tabs, { tabs: tabs, className: listToClass([className, 'stepper']), value: value, onChange: (value) => {
+            setTabs(getTabsWithDisabled(initialTabs, value));
+            onChange?.(value);
+        }, customRenderer: (selector, content) => _jsxs(_Fragment, { children: [selector, content, _jsx(StepperButtons, { buttons: buttons, tabs: initialTabs })] }) })) : _jsx(Tabs, { tabs: tabs, className: listToClass([className, 'stepper']), ...props });
 });
 const dictionary = {
     en: {

package/dist/components/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/components/Stepper.tsx"],"names":[],"mappings":"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"}

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

@@ -3,6 +3,10 @@ export declare class TabController<Key extends string> extends ValueController<K
     private tabOrder;
     constructor(tabOrder: Key[], value: Key);
     private getCurrentIndex;
+    /**
+     * Replaces the current set of tabs.
+     */
+    setTabOrder(tabOrder: Key[]): void;
     /**
      * @returns true if there's another tab after the one currently selected. False otherwise.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"TabController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,qBAAa,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,CAAC,GAAG,CAAC;IACzE,OAAO,CAAC,QAAQ,CAAO;gBAEX,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG;IAKvC,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,OAAO,IAAI,OAAO;IAKlB;;OAEG;IACH,WAAW,IAAI,OAAO;IAKtB;;;OAGG;IACH,IAAI,IAAI,OAAO;IAQf;;;OAGG;IACH,QAAQ,IAAI,OAAO;CAOpB"}
+{"version":3,"file":"TabController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,qBAAa,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,CAAC,GAAG,CAAC;IACzE,OAAO,CAAC,QAAQ,CAAO;gBAEX,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG;IAKvC,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,GAAG,EAAE;IAe3B;;OAEG;IACH,OAAO,IAAI,OAAO;IAKlB;;OAEG;IACH,WAAW,IAAI,OAAO;IAKtB;;;OAGG;IACH,IAAI,IAAI,OAAO;IAQf;;;OAGG;IACH,QAAQ,IAAI,OAAO;CAOpB"}

package/dist/components/Tabs/TabController.js

@@ -13,6 +13,24 @@ export class TabController extends ValueController {
     getCurrentIndex() {
         return this.tabOrder.findIndex(t => t === this.value);
     }
+    /**
+     * Replaces the current set of tabs.
+     */
+    setTabOrder(tabOrder) {
+        let newValue = this.value;
+        if (!tabOrder.includes(this.value)) {
+            const prev = this.getCurrentIndex() - 1;
+            const key = this.tabOrder[prev];
+            if (key && tabOrder.includes(key)) {
+                newValue = key;
+            }
+            else {
+                newValue = tabOrder[0];
+            }
+        }
+        this.tabOrder = tabOrder;
+        this.setValue(newValue);
+    }
     /**
      * @returns true if there's another tab after the one currently selected. False otherwise.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"TabController.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,OAAO,aAAkC,SAAQ,eAAoB;IAGzE,YAAY,QAAe,EAAE,KAAU;QACrC,KAAK,CAAC,KAAK,CAAC,CAAA;QAHN;;;;;WAAe;QAIrB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC1B,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;IACvD,CAAC;IAED;;OAEG;IACH,OAAO;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC3D,CAAC;IAED;;OAEG;IACH,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;OAGG;IACH,QAAQ;QACN,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;CACF"}
+{"version":3,"file":"TabController.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,OAAO,aAAkC,SAAQ,eAAoB;IAGzE,YAAY,QAAe,EAAE,KAAU;QACrC,KAAK,CAAC,KAAK,CAAC,CAAA;QAHN;;;;;WAAe;QAIrB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC1B,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;IACvD,CAAC;IAED;;OAEG;IACH,WAAW,CAAC,QAAe;QACzB,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAA;QACzB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACnC,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAA;YACvC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC/B,IAAI,GAAG,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBAClC,QAAQ,GAAG,GAAG,CAAA;YAChB,CAAC;iBAAM,CAAC;gBACN,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;YACxB,CAAC;QACH,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACzB,CAAC;IAED;;OAEG;IACH,OAAO;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC3D,CAAC;IAED;;OAEG;IACH,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;OAGG;IACH,QAAQ;QACN,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;CACF"}

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

@@ -15,7 +15,7 @@ import { TabsProps } from './types.js';
  * return <Tabs tabs={tabs} />
  * ```
  */
-export declare const Tabs: <Key extends string>({ tabs, value, equallySized, onChange, controller: ctrl, appearance, customRenderer, className, ...props }: TabsProps<Key>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: <Key extends string>({ tabs, value, equallySized, onChange, appearance, customRenderer, className, ...props }: TabsProps<Key>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Request the tab controller of the current context. Use this to control the tabs in the parent components. This returns undefined when
  * no tab context is found.

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":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKnC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,GACD,GAAG,SAAS,MAAM,8GAC8E,SAAS,CAAC,GAAG,CAAC,4CAyD7H,CAAA;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE9F"}
+{"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;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,GACD,GAAG,SAAS,MAAM,4FAC4D,SAAS,CAAC,GAAG,CAAC,4CAkE3G,CAAA;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE9F"}

package/dist/components/Tabs/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { createContext, Suspense, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { withRef } from '../../utils/react.js';
 import { CitricComponent } from '../CitricComponent.js';
 import { ErrorBoundary } from '../ErrorBoundary.js';
@@ -25,20 +25,26 @@ const ctx = createContext(undefined);
  * return <Tabs tabs={tabs} />
  * ```
  */
-export const Tabs = withRef(function Tabs({ tabs, value, equallySized, onChange, controller: ctrl, appearance, customRenderer, className, ...props }) {
-    const controller = useMemo(() => ctrl ?? new TabController(tabs.map(t => t.key), value || tabs[0]?.key), []);
+export const Tabs = withRef(function Tabs({ tabs, value, equallySized, onChange, appearance, customRenderer, className, ...props }) {
+    const tabKeys = tabs.map(t => t.key);
+    const controller = useMemo(() => new TabController(tabKeys, value || tabs[0]?.key), []);
     const t = useTranslate(dictionary);
     const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
+    const tabsRef = useRef(tabs);
+    tabsRef.current = tabs;
     useEffect(() => {
         if (value)
             controller.setValue(value);
     }, [value]);
     useEffect(() => controller.onChange((v) => {
-        setSelectedIndex(findSelectedIndex(tabs, v));
+        setSelectedIndex(findSelectedIndex(tabsRef.current, v));
         onChange?.(v);
-    }), [tabs]);
-    const tabSelector = useMemo(() => (_jsx("nav", { className: "tab-selector", children: 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]);
-    const content = useMemo(() => (_jsx("section", { className: "tab-content", 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) })), [selectedIndex, t]);
+    }), [controller]);
+    useEffect(() => {
+        controller.setTabOrder(tabKeys);
+    }, [tabKeys.join(','), controller]);
+    const tabSelector = useMemo(() => (_jsx("nav", { className: "tab-selector", children: tabs.map(({ key, label, icon, after, disabled }, index) => (_jsxs("label", { children: [_jsx("input", { type: "radio", role: "tab", checked: index === selectedIndex, onChange: () => controller.setValue(key), disabled: disabled }), icon, label || key, after] }, key))) })), [tabs, selectedIndex]);
+    const content = useMemo(() => (_jsx("section", { className: "tab-content", 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) })), [selectedIndex, value, t]);
     return (_jsx(ctx.Provider, { value: controller, children: _jsx(CitricComponent, { tag: "div", component: "tabs", className: listToClass([className, equallySized && 'equally-sized', appearance]), ...props, children: customRenderer ? customRenderer(tabSelector, content) : _jsxs(_Fragment, { children: [tabSelector, content] }) }) }));
 });
 /**

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":"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"}

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

@@ -1,5 +1,4 @@
 import { WithColorPalette, WithColorScheme } from '../../types.js';
-import { TabController } from './TabController.js';
 export interface Tab<Key extends string = string> {
     /**
      * A unique identifier for the tab.
@@ -9,6 +8,14 @@ export interface Tab<Key extends string = string> {
      * The tab's label. Will be the "key" if not provided.
      */
     label?: string;
+    /**
+     * An icon for the tab.
+     */
+    icon?: React.ReactElement;
+    /**
+     * Content to place after the tab's name.
+     */
+    after?: React.ReactElement;
     /**
      * The tab's content. This can be a suspended component.
      *
@@ -37,10 +44,6 @@ export interface BaseTabsProps<Key extends string> extends WithColorScheme, With
      * @param key the key of the selected tab.
      */
     onChange?: (key: Key) => void;
-    /**
-     * 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.
      *

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;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC;CACpG;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;AAE/D,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;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;;;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;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC;CACpG;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.44.0",
+  "version": "0.46.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Stepper.tsx

@@ -1,11 +1,10 @@
 import { listToClass } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { withRef } from '../utils/react'
 import { Button } from './Button'
-import { Column, Row } from './layout'
-import { Tabs } from './Tabs'
-import { TabController } from './Tabs/TabController'
+import { Row } from './layout'
+import { Tabs, useTabController } from './Tabs'
 import { BaseTabsProps, Tab } from './Tabs/types'
 import { findSelectedIndex } from './Tabs/utils'
 
@@ -65,6 +64,50 @@ function getTabsWithDisabled<Key extends string>(tabs: Tab<Key>[], value: Key |
   return tabs.map((t, i) => ({ ...t, disabled: i > index }))
 }
 
+const StepperButtons = ({ buttons, tabs }: { buttons: StepperProps<any>['buttons'], tabs: Tab[] }) => {
+  const controller = useTabController()!
+  const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
+  const t = useTranslate(dictionary)
+  const tabsRef = useRef(tabs)
+  tabsRef.current = tabs
+
+  useEffect(() => controller.onChange((value) => {
+    setSelectedIndex(findSelectedIndex(tabsRef.current, value))
+  }), [controller])
+
+  const onPrevious = useCallback(() => {
+    controller.previous()
+    if (typeof buttons === 'object') buttons.onPrevious?.(controller.getValue())
+  }, [controller])
+
+  const onNext = useCallback(() => {
+    controller.next()
+    if (typeof buttons === 'object') buttons.onNext?.(controller.getValue())
+  }, [controller])
+
+  return <Row
+    mt="20px"
+    justifyContent={(typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between'}
+  >
+    {selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (
+      <Button onClick={buttons.onCancel} colorScheme="inverse" appearance="outlined">{buttons.cancel || t.cancel}</Button>
+    )}
+    {selectedIndex > 0 && buttons && (
+      <Button onClick={onPrevious} colorScheme="inverse" appearance="outlined">
+        {(typeof buttons === 'object' && buttons.previous) || t.previous}
+      </Button>
+    )}
+    {selectedIndex < tabs.length - 1 && buttons && (
+      <Button onClick={onNext}>
+        {(typeof buttons === 'object' && buttons.next) || t.next}
+      </Button>
+    )}
+    {selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (
+      <Button onClick={buttons.onFinish}>{buttons.finish || t.finish}</Button>
+    )}
+  </Row>
+}
+
 /**
  * A Stepper is a tab view with a different appearance. To control the current tab (step), retrieve the controller by calling
  * `useTabsController()` from within a tab (step) content.
@@ -86,61 +129,27 @@ function getTabsWithDisabled<Key extends string>(tabs: Tab<Key>[], value: Key |
  */
 export const Stepper = withRef(
   function Stepper<Key extends string>(
-    { tabs: initialTabs, controller: ctrl, value, onChange, buttons = true, className, ...props }: StepperProps<Key>,
+    { tabs: initialTabs, value, onChange, buttons = true, className, ...props }: StepperProps<Key>,
   ) {
-    const controller = useMemo(
-      () => ctrl ?? new TabController<Key>(initialTabs.map(t => t.key), value || initialTabs[0]?.key),
-      [],
-    )
     const [tabs, setTabs] = useState(getTabsWithDisabled(initialTabs, value))
-    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
-    const t = useTranslate(dictionary)
-
-    useEffect(() => controller.onChange((v) => {
-      setSelectedIndex(findSelectedIndex(tabs, v))
-    }), [tabs])
-
-    useEffect(() => controller.onChange((value) => {
-      setTabs(getTabsWithDisabled(initialTabs, value))
-    }), [])
-
-    const onPrevious = useCallback(() => {
-      controller.previous()
-      if (typeof buttons === 'object') buttons.onPrevious?.(controller.getValue())
-    }, [])
-
-    const onNext = useCallback(() => {
-      controller.next()
-      if (typeof buttons === 'object') buttons.onNext?.(controller.getValue())
-    }, [])
-
+    
     return buttons ? (
-      <Column {...props} className={className} gap="20px">
-        <Tabs tabs={tabs} controller={controller} value={value} onChange={onChange} className="stepper" />
-        <Row justifyContent={(typeof buttons !== 'object' || !buttons.onCancel) && selectedIndex === 0 ? 'end' : 'space-between'}>
-          {selectedIndex === 0 && typeof buttons === 'object' && buttons.onCancel && (
-            <Button onClick={buttons.onCancel} colorScheme="inverse" appearance="outlined">{buttons.cancel || t.cancel}</Button>
-          )}
-          {selectedIndex > 0 && buttons && (
-            <Button onClick={onPrevious} colorScheme="inverse" appearance="outlined">
-              {(typeof buttons === 'object' && buttons.previous) || t.previous}
-            </Button>
-          )}
-          {selectedIndex < tabs.length - 1 && buttons && (
-            <Button onClick={onNext}>
-              {(typeof buttons === 'object' && buttons.next) || t.next}
-            </Button>
-          )}
-          {selectedIndex === tabs.length - 1 && typeof buttons === 'object' && buttons.onFinish && (
-            <Button onClick={buttons.onFinish}>{buttons.finish || t.finish}</Button>
-          )}
-        </Row>
-      </Column>
+      <Tabs
+        tabs={tabs}
+        className={listToClass([className, 'stepper'])}
+        value={value}
+        onChange={(value) => {
+          setTabs(getTabsWithDisabled(initialTabs, value))
+          onChange?.(value)
+        }}
+        customRenderer={(selector, content) => <>
+          {selector}
+          {content}
+          <StepperButtons buttons={buttons} tabs={initialTabs} />
+        </>}
+      />
     ) : <Tabs
       tabs={tabs}
-      controller={controller}
-      value={value}
-      onChange={onChange}
       className={listToClass([className, 'stepper'])}
       {...props}
     />

package/src/components/Tabs/TabController.ts

@@ -12,6 +12,24 @@ export class TabController<Key extends string> extends ValueController<Key> {
     return this.tabOrder.findIndex(t => t === this.value)
   }
 
+  /**
+   * Replaces the current set of tabs.
+   */
+  setTabOrder(tabOrder: Key[]) {
+    let newValue = this.value
+    if (!tabOrder.includes(this.value)) {
+      const prev = this.getCurrentIndex() - 1
+      const key = this.tabOrder[prev]
+      if (key && tabOrder.includes(key)) {
+        newValue = key
+      } else {
+        newValue = tabOrder[0]
+      }
+    }
+    this.tabOrder = tabOrder
+    this.setValue(newValue)
+  }
+
   /**
    * @returns true if there's another tab after the one currently selected. False otherwise.
    */

package/src/components/Tabs/index.tsx

@@ -1,6 +1,6 @@
 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 { createContext, Suspense, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { withRef } from '../../utils/react'
 import { CitricComponent } from '../CitricComponent'
 import { ErrorBoundary } from '../ErrorBoundary'
@@ -29,25 +29,32 @@ const ctx = createContext<TabController<any> | undefined>(undefined)
  */
 export const Tabs = withRef(
   function Tabs<Key extends string>(
-    { tabs, value, equallySized, onChange, controller: ctrl, appearance, customRenderer, className, ...props }: TabsProps<Key>,
+    { tabs, value, equallySized, onChange, appearance, customRenderer, className, ...props }: TabsProps<Key>,
   ) {
-    const controller = useMemo(() => ctrl ?? new TabController<Key>(tabs.map(t => t.key), value || tabs[0]?.key), [])
+    const tabKeys = tabs.map(t => t.key)
+    const controller = useMemo(() => new TabController<Key>(tabKeys, value || tabs[0]?.key), [])
     const t = useTranslate(dictionary)
     const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()))
+    const tabsRef = useRef(tabs)
+    tabsRef.current = tabs
 
     useEffect(() => {
       if (value) controller.setValue(value)
     }, [value])
 
     useEffect(() => controller.onChange((v) => {
-      setSelectedIndex(findSelectedIndex(tabs, v))
+      setSelectedIndex(findSelectedIndex(tabsRef.current, v))
       onChange?.(v)
-    }), [tabs])
+    }), [controller])
+
+    useEffect(() => {
+      controller.setTabOrder(tabKeys)
+    }, [tabKeys.join(','), controller])
 
     const tabSelector = useMemo(
       () => (
         <nav className="tab-selector">
-          {tabs.map(({ key, label, disabled }, index) => (
+          {tabs.map(({ key, label, icon, after, disabled }, index) => (
             <label key={key}>
               <input
                 type="radio"
@@ -55,7 +62,9 @@ export const Tabs = withRef(
                 checked={index === selectedIndex}
                 onChange={() => controller.setValue(key)} disabled={disabled}
               />
+              {icon}
               {label || key}
+              {after}
             </label>
           ))}
         </nav>
@@ -71,7 +80,7 @@ export const Tabs = withRef(
           </Suspense>
         </ErrorBoundary>
       </section>
-    ), [selectedIndex, t])
+    ), [selectedIndex, value, t])
 
     return (
       <ctx.Provider value={controller}>

package/src/components/Tabs/types.ts

@@ -1,5 +1,4 @@
 import { WithColorPalette, WithColorScheme } from '../../types'
-import { TabController } from './TabController'
 
 export interface Tab<Key extends string = string> {
   /**
@@ -10,6 +9,14 @@ export interface Tab<Key extends string = string> {
    * The tab's label. Will be the "key" if not provided.
    */
   label?: string,
+  /**
+   * An icon for the tab.
+   */
+  icon?: React.ReactElement,
+  /**
+   * Content to place after the tab's name.
+   */
+  after?: React.ReactElement,
   /**
    * The tab's content. This can be a suspended component.
    * 
@@ -39,10 +46,6 @@ export interface BaseTabsProps<Key extends string> extends WithColorScheme, With
    * @param key the key of the selected tab.
    */
   onChange?: (key: Key) => void,
-  /**
-   * 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.
    *