@stack-spot/citric-react 0.39.0 → 0.40.0

package/dist/components/AsyncContent.d.ts

@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+import { LoadingStyle } from '../types.js';
 interface Props {
     /**
      * Whether or not to show the loading feedback.
@@ -17,6 +18,10 @@ interface Props {
      * The content to show if it's not loading or has errors.
      */
     children: React.ReactNode;
+    /**
+     * Customizes the loading component.
+     */
+    loadingStyle?: LoadingStyle;
 }
 /**
  * Renders a component that provides user feedback on async requests. It renders either a loading component, an error component or its
@@ -40,6 +45,6 @@ interface Props {
  * )
  * ```
  */
-export declare const AsyncContent: ({ loading, error, autofocus, children }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const AsyncContent: ({ loading, error, autofocus, children, loadingStyle }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};
 //# sourceMappingURL=AsyncContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAMpE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,YAAY,4CAAqD,KAAK,iIAoBjF,CAAA"}
+{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAKvC,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,YAAY,0DAAmE,KAAK,iIAoB/F,CAAA"}

package/dist/components/AsyncContent.js

@@ -26,7 +26,7 @@ import { LoadingPanel } from './LoadingPanel.js';
  * )
  * ```
  */
-export const AsyncContent = withRef(({ loading, error, autofocus, children }) => {
+export const AsyncContent = withRef(({ loading, error, autofocus, children, loadingStyle }) => {
     const citric = useCitricController();
     useEffect(() => {
         if (error) {
@@ -41,7 +41,7 @@ export const AsyncContent = withRef(({ loading, error, autofocus, children }) =>
         }
     }, [loading, error]);
     if (loading)
-        return _jsx(LoadingPanel, {});
+        return citric?.renderLoading ? citric.renderLoading(loadingStyle) : _jsx(LoadingPanel, { ...loadingStyle });
     if (error)
         return citric?.renderError ? citric.renderError(error) : _jsx(ErrorMessage, { error: error });
     return children;

package/dist/components/AsyncContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAsB7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAS,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,KAAC,YAAY,KAAG,CAAA;IACpC,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAC,CAAA"}
+{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AA0B7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAS,EAAE,EAAE;IACnG,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,OAAK,YAAY,GAAI,CAAA;IACnH,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAC,CAAA"}

package/dist/components/Card.d.ts

@@ -1,5 +1,5 @@
 import { WithColorScheme, WithStyleShortcuts } from '../types.js';
-type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article' | 'a' | 'button' | 'header';
+type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'li' | 'section' | 'article' | 'a' | 'button' | 'header';
 export interface BaseCardProps<T extends SupportedTags = SupportedTags> extends WithColorScheme, Omit<WithStyleShortcuts, 'bg'> {
     /**
      * HTML tag to render.

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK9D,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9G,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC7H;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAGD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,CAC/C,CAAC,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CACjD,CAAC,SAAS,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GACxD,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAA;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,6EAAqF,SAAS,CAAC,CAAC,CAAC,4CAcvI,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK9D,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAErH,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC7H;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC9B;AAGD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,CAC/C,CAAC,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CACjD,CAAC,SAAS,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GACxD,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAA;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,6EAAqF,SAAS,CAAC,CAAC,CAAC,4CAcvI,CAAA"}

package/dist/components/LoadingPanel.d.ts

@@ -1,2 +1,3 @@
-export declare const LoadingPanel: () => import("react/jsx-runtime").JSX.Element;
+import { LoadingStyle } from '../types.js';
+export declare const LoadingPanel: ({ type, text, colorScheme }: LoadingStyle) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LoadingPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingPanel.d.ts","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,+CAIxB,CAAA"}
+{"version":3,"file":"LoadingPanel.d.ts","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAMvC,eAAO,MAAM,YAAY,GAAI,6BAAwC,YAAY,4CAKhF,CAAA"}

package/dist/components/LoadingPanel.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Center } from './layout.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Column } from './layout.js';
+import { ProgressBar } from './ProgressBar.js';
 import { ProgressCircular } from './ProgressCircular.js';
-export const LoadingPanel = () => (_jsx(Center, { flex: 1, p: "80px", style: { alignSelf: 'stretch' }, "data-test-hint": "loading", children: _jsx(ProgressCircular, {}) }));
+import { Text } from './Text.js';
+export const LoadingPanel = ({ type = 'circle', text, colorScheme }) => (_jsxs(Column, { flex: 1, p: "80px", alignItems: "center", justifyContent: "center", style: { alignSelf: 'stretch' }, "data-test-hint": "loading", gap: 8, children: [typeof text === 'string' ? _jsx(Text, { color: "light.700", children: text }) : text, type === 'circle' ? _jsx(ProgressCircular, { colorScheme: colorScheme }) : _jsx(ProgressBar, { colorScheme: colorScheme })] }));
 //# sourceMappingURL=LoadingPanel.js.map

package/dist/components/LoadingPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingPanel.js","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CAChC,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAiB,SAAS,YACjF,KAAC,gBAAgB,KAAG,GACb,CACV,CAAA"}
+{"version":3,"file":"LoadingPanel.js","sourceRoot":"","sources":["../../src/components/LoadingPanel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAgB,EAAE,EAAE,CAAC,CACpF,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAiB,SAAS,EAAC,GAAG,EAAE,CAAC,aACnI,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,EACvE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,gBAAgB,IAAC,WAAW,EAAE,WAAW,GAAI,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,IACxG,CACV,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,oIAclB,eAAe,CAAC,CAAC,CAAC,4CA0BtB,CAAA"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,oIAclB,eAAe,CAAC,CAAC,CAAC,4CA2BtB,CAAA"}

package/dist/components/RadioGroup.js

@@ -33,7 +33,7 @@ export const RadioGroup = withRef(function RadioGroup({ name, value, options, on
         const valueKey = value ? renderKey(value) : undefined;
         return options.map((o) => {
             const key = renderKey(o);
-            const radio = _jsx(CitricComponent, { tag: "input", component: "radio", type: "radio", name: name, value: key, checked: value === o || (!isNil(key) && valueKey === key), onChange: () => onChange?.(o), disabled: isDisabled?.(o), tabIndex: focusable ? undefined : -1 });
+            const radio = _jsx(CitricComponent, { tag: "input", component: "radio", type: "radio", name: name, value: key, checked: value === o || (!isNil(key) && valueKey === key), onChange: () => onChange?.(o), disabled: isDisabled?.(o), tabIndex: focusable ? undefined : -1, colorScheme: colorScheme });
             return renderItem ? renderItem(radio, o) : (_jsxs(CitricComponent, { tag: "label", component: "radio-row", colorScheme: colorScheme, children: [radio, renderLabel(o)] }, key));
         });
     }, [options, value, name, colorScheme]);

package/dist/components/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA2EjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAI,EACrB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,GAAG,GAAG,KAAK,EACX,SAAS,GAAG,IAAI,EAChB,KAAK,EACL,GAAG,KAAK,EACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,KAAK,GAAG,KAAC,eAAe,IAC5B,GAAG,EAAC,OAAO,EACX,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,EACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EACzB,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GACpC,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACzC,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAW,WAAW,EAAE,WAAW,aAClF,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,KAFuC,GAAG,CAGzC,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvC,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AACtE,CAAC,CACF,CAAA"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA2EjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAI,EACrB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,GAAG,GAAG,KAAK,EACX,SAAS,GAAG,IAAI,EAChB,KAAK,EACL,GAAG,KAAK,EACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,KAAK,GAAG,KAAC,eAAe,IAC5B,GAAG,EAAC,OAAO,EACX,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,EACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EACzB,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,EACpC,WAAW,EAAE,WAAW,GACxB,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACzC,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAW,WAAW,EAAE,WAAW,aAClF,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,KAFuC,GAAG,CAGzC,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvC,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AACtE,CAAC,CACF,CAAA"}

package/dist/types.d.ts

@@ -161,6 +161,24 @@ export interface WithStyleShortcuts {
      */
     gap?: React.CSSProperties['gap'];
 }
+export interface LoadingStyle {
+    /**
+     * Whether to show a ProgressCircular or a ProgressBar as the loading feedback.
+     *
+     * @default 'circle'
+     */
+    type?: 'circle' | 'bar';
+    /**
+     * A text to show above the ProgressCircular or ProgressBar.
+     */
+    text?: React.ReactNode;
+    /**
+     * The color scheme of the loading view.
+     *
+     * @default 'primary'
+     */
+    colorScheme?: ColorSchemeName;
+}
 export interface CitricController {
     /**
      * If set, instead of rendering the HTML tag "a", the Link component will render the return value of this function.
@@ -198,7 +216,7 @@ export interface CitricController {
      * Loadings are rendered in Suspended calls or in AsyncContent.
      * @returns the UI for the feedback.
      */
-    renderLoading?: () => void;
+    renderLoading?: (options?: LoadingStyle) => React.ReactElement;
     /**
      * Function to run whenever an Error is caught.
      * @param error the error caught.

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACtF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAEhF,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,GACtI,aAAa,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAA;AAGvF,MAAM,MAAM,OAAO,GAAG;IACpB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACjD,UAAU,EAAE,KAAK,CAAC,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACtD,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,IAAI,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAC1C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACnD,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACnD,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC1C,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACvC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IAC9C,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,MAAM,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACtD,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAC5C,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACnD,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IACjD,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IACjD,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;CAC5C,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAA;AAC9F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAEjH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;OAMG;IACH,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;IACvC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;IACvC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC/C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACpF;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAClF;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,YAAY,CAAC;IACjD;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/AsyncContent.tsx

@@ -1,5 +1,6 @@
 import { MutableRefObject, useEffect, useLayoutEffect } from 'react'
 import { useCitricController } from '../context/hooks'
+import { LoadingStyle } from '../types'
 import { withRef } from '../utils/react'
 import { ErrorMessage } from './ErrorMessage'
 import { LoadingPanel } from './LoadingPanel'
@@ -22,6 +23,10 @@ interface Props {
    * The content to show if it's not loading or has errors.
    */
   children: React.ReactNode,
+  /**
+   * Customizes the loading component.
+   */
+  loadingStyle?: LoadingStyle,
 }
 
 /**
@@ -47,7 +52,7 @@ interface Props {
  * ```
  */
 
-export const AsyncContent = withRef(({ loading, error, autofocus, children }: Props) => {
+export const AsyncContent = withRef(({ loading, error, autofocus, children, loadingStyle }: Props) => {
   const citric = useCitricController()
 
   useEffect(() => {
@@ -64,7 +69,7 @@ export const AsyncContent = withRef(({ loading, error, autofocus, children }: Pr
     }
   }, [loading, error])
 
-  if (loading) return <LoadingPanel />
+  if (loading) return citric?.renderLoading ? citric.renderLoading(loadingStyle) : <LoadingPanel {...loadingStyle} />
   if (error) return citric?.renderError ? citric.renderError(error) : <ErrorMessage error={error} />
   return children
 })

package/src/components/Card.tsx

@@ -5,7 +5,7 @@ import { applyStyles } from '../utils/css'
 import { withRef } from '../utils/react'
 import { asCitricProps, CitricComponent } from './CitricComponent'
 
-type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article' | 'a' | 'button' | 'header'
+type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'li' | 'section' | 'article' | 'a' | 'button' | 'header'
 
 export interface BaseCardProps<T extends SupportedTags = SupportedTags> extends WithColorScheme, Omit<WithStyleShortcuts, 'bg'> {
   /**

package/src/components/LoadingPanel.tsx

@@ -1,8 +1,12 @@
-import { Center } from './layout'
+import { LoadingStyle } from '../types'
+import { Column } from './layout'
+import { ProgressBar } from './ProgressBar'
 import { ProgressCircular } from './ProgressCircular'
+import { Text } from './Text'
 
-export const LoadingPanel = () => (
-  <Center flex={1} p="80px" style={{ alignSelf: 'stretch' }} data-test-hint="loading">
-    <ProgressCircular />
-  </Center>
+export const LoadingPanel = ({ type = 'circle', text, colorScheme }: LoadingStyle) => (
+  <Column flex={1} p="80px" alignItems="center" justifyContent="center" style={{ alignSelf: 'stretch' }} data-test-hint="loading" gap={8}>
+    {typeof text === 'string' ? <Text color="light.700">{text}</Text> : text}
+    {type === 'circle' ? <ProgressCircular colorScheme={colorScheme} /> : <ProgressBar colorScheme={colorScheme} />}
+  </Column>
 )

package/src/components/RadioGroup.tsx

@@ -132,6 +132,7 @@ export const RadioGroup = withRef(
           onChange={() => onChange?.(o)}
           disabled={isDisabled?.(o)}
           tabIndex={focusable ? undefined : -1}
+          colorScheme={colorScheme}
         />
         return renderItem ? renderItem(radio, o) : (
           <CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>

package/src/types.ts

@@ -170,6 +170,25 @@ export interface WithStyleShortcuts {
   gap?: React.CSSProperties['gap'],
 }
 
+export interface LoadingStyle {
+  /**
+   * Whether to show a ProgressCircular or a ProgressBar as the loading feedback.
+   * 
+   * @default 'circle'
+   */
+  type?: 'circle' | 'bar',
+  /**
+   * A text to show above the ProgressCircular or ProgressBar.
+   */
+  text?: React.ReactNode,
+  /**
+   * The color scheme of the loading view.
+   * 
+   * @default 'primary'
+   */
+  colorScheme?: ColorSchemeName,
+}
+
 export interface CitricController {
   /**
    * If set, instead of rendering the HTML tag "a", the Link component will render the return value of this function.
@@ -207,7 +226,7 @@ export interface CitricController {
    * Loadings are rendered in Suspended calls or in AsyncContent.
    * @returns the UI for the feedback.
    */
-  renderLoading?: () => void,
+  renderLoading?: (options?: LoadingStyle) => React.ReactElement,
   /**
    * Function to run whenever an Error is caught.
    * @param error the error caught.