@carto/meridian-ds 2.7.0-alpha-loader.1 → 2.7.0-alpha-loader.2

package/dist/components/index.cjs

@@ -894,7 +894,10 @@ function _Loader({
   label,
   secondLabel,
   color = "primary",
+  size = 40,
   fullHeight,
+  labelTypographyProps,
+  secondLabelTypographyProps,
   ...otherProps
 }, ref) {
   const labelText = cssUtils.useTranslationWithFallback("c4r.utils.loader.label", label);
@@ -914,16 +917,27 @@ function _Loader({
           material.CircularProgress,
           {
             color,
+            size,
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
         hasAnyLabel && /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "column", alignItems: "center", children: [
-          labelText && /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "body2", color: "textSecondary", id: "loader-label", children: labelText }),
+          labelText && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelTypographyProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
           secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
             cssUtils.Typography,
             {
               variant: "body2",
               color: "textSecondary",
+              ...secondLabelTypographyProps,
               id: labelText ? void 0 : "loader-label",
               children: secondLabel
             }

package/dist/components/index.js

@@ -894,7 +894,10 @@ function _Loader({
   label,
   secondLabel,
   color = "primary",
+  size = 40,
   fullHeight,
+  labelTypographyProps,
+  secondLabelTypographyProps,
   ...otherProps
 }, ref) {
   const labelText = useTranslationWithFallback("c4r.utils.loader.label", label);
@@ -914,16 +917,27 @@ function _Loader({
           CircularProgress,
           {
             color,
+            size,
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
         hasAnyLabel && /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
-          labelText && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", id: "loader-label", children: labelText }),
+          labelText && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelTypographyProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
           secondLabel && /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "body2",
               color: "textSecondary",
+              ...secondLabelTypographyProps,
               id: labelText ? void 0 : "loader-label",
               children: secondLabel
             }

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

@@ -1,8 +1,41 @@
 import { ReactNode } from 'react';
+import { TypographyProps } from '../Typography';
 export type LoaderProps = {
+    /**
+     * The label to display.
+     * If not provided, the default label 'Loading...' will be displayed.
+     */
     label?: ReactNode;
+    /**
+     * The props to pass to the label Typography component to override the default styles.
+     */
+    labelTypographyProps?: TypographyProps;
+    /**
+     * The second label to display.
+     * If not provided, no second label will be displayed.
+     */
     secondLabel?: ReactNode;
+    /**
+     * The props to pass to the second label Typography component to override the default styles.
+     */
+    secondLabelTypographyProps?: TypographyProps;
+    /**
+     * The color of the circular progress.
+     * It supports both primary and secondary colors.
+     * @default 'primary'
+     */
     color?: 'primary' | 'secondary';
+    /**
+     * The size of the component.
+     * If using a number, the pixel unit is assumed.
+     * If using a string, you need to provide the CSS unit, for example '3rem'.
+     * @default 40
+     */
+    size?: number | string;
+    /**
+     * If `true`, the component will take the full height of its container.
+     * @default false
+     */
     fullHeight?: boolean;
 };
 declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAK3D,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAsED,QAAA,MAAM,MAAM,wGAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAG3D,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAA;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;OAEG;IACH,0BAA0B,CAAC,EAAE,eAAe,CAAA;IAC5C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC/B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAgFD,QAAA,MAAM,MAAM,wGAAsB,CAAA;AAClC,eAAe,MAAM,CAAA"}

package/dist/types/components/Loader/Loader.stories.d.ts

@@ -8,12 +8,34 @@ declare const options: {
             control: "select";
             options: string[];
         };
+        size: {
+            control: "select";
+            options: number[];
+        };
+        label: {
+            control: "text";
+        };
+        secondLabel: {
+            control: "text";
+        };
+        labelTypographyProps: {
+            control: "object";
+        };
+        secondLabelTypographyProps: {
+            control: "object";
+        };
+        fullHeight: {
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: "boolean";
+        };
     };
     args: {
-        variant: string;
         color: string;
-        disabled: boolean;
-        loading: boolean;
+        fullHeight: boolean;
     };
     parameters: {
         design: {
@@ -37,6 +59,9 @@ export declare const Playground: {
 export declare const Color: {
     render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Size: {
+    render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+};
 export declare const LabelAndSecondLabel: {
     render: (args: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/types/components/Loader/Loader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG9C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAyBG,CAAA;AAChB,eAAe,OAAO,CAAA;AA6DtB,eAAO,MAAM,UAAU;mBA3DC,WAAW;;;;;;CAgElC,CAAA;AAED,eAAO,MAAM,KAAK;mBAhEW,WAAW;CAkEvC,CAAA;AAED,eAAO,MAAM,mBAAmB;mBAtDH,WAAW;CAwDvC,CAAA;AAED,eAAO,MAAM,UAAU;mBA9BO,WAAW;CAgCxC,CAAA;AAED,eAAO,MAAM,cAAc;mBA9EH,WAAW;;;;;;CAmFlC,CAAA"}
+{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Loader/Loader.stories.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG9C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CG,CAAA;AAChB,eAAe,OAAO,CAAA;AAqGtB,eAAO,MAAM,UAAU;mBAnGC,WAAW;;;;;;CAwGlC,CAAA;AAED,eAAO,MAAM,KAAK;mBAxGW,WAAW;CA0GvC,CAAA;AAED,eAAO,MAAM,IAAI;mBA9FW,WAAW;CAgGtC,CAAA;AAED,eAAO,MAAM,mBAAmB;mBA7EH,WAAW;CA+EvC,CAAA;AAED,eAAO,MAAM,UAAU;mBAlCO,WAAW;CAoCxC,CAAA;AAED,eAAO,MAAM,cAAc;mBA1HH,WAAW;;;;;;CA+HlC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.7.0-alpha-loader.1",
+  "version": "2.7.0-alpha-loader.2",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {