@moises.ai/design-system 3.9.4 → 3.9.5

package/dist/index.js

@@ -2295,7 +2295,7 @@ const lm = "_clock_1g00b_2", cm = "_column_1g00b_10", dm = "_sm_1g00b_18", um =
   skeletonBox: vm,
   skeleton: Cm
 }, Qn = (n) => String(n).padStart(2, "0"), xi = ({
-  i18n: n = { _: (p) => p },
+  i18n: n = { _: (y) => y },
   show: e = !0,
   days: t = 0,
   hours: r = 0,
@@ -2306,11 +2306,23 @@ const lm = "_clock_1g00b_2", cm = "_column_1g00b_10", dm = "_sm_1g00b_18", um =
   theme: c = "default",
   variant: u = "lg",
   className: h,
-  showDays: A = !0
+  showDays: A = !0,
+  labels: p = {}
 }) => {
+  const {
+    days: y,
+    hours: f,
+    minutes: m,
+    seconds: k
+  } = {
+    days: p.days ?? n._("Days"),
+    hours: p.hours ?? n._("Hours"),
+    minutes: p.minutes ?? n._("Minutes"),
+    seconds: p.seconds ?? n._("Sec")
+  };
   if (!e || i)
     return null;
-  const p = {
+  const E = {
     [oe.white]: c === "white",
     [oe.gray]: c === "gray",
     [oe.default]: c === "default",
@@ -2318,35 +2330,35 @@ const lm = "_clock_1g00b_2", cm = "_column_1g00b_10", dm = "_sm_1g00b_18", um =
     [oe.md]: u === "md",
     [oe.lg]: u === "lg"
   };
-  return l ? /* @__PURE__ */ s("div", { className: v(oe.skeletonBox, p, h), children: /* @__PURE__ */ s("div", { className: oe.skeleton }) }) : /* @__PURE__ */ g("div", { className: v(oe.clock, h), children: [
+  return l ? /* @__PURE__ */ s("div", { className: v(oe.skeletonBox, E, h), children: /* @__PURE__ */ s("div", { className: oe.skeleton }) }) : /* @__PURE__ */ g("div", { className: v(oe.clock, h), children: [
     A && t > 0 && /* @__PURE__ */ g(ge, { children: [
       /* @__PURE__ */ g(
         "div",
         {
-          className: v(oe.column, p, {
+          className: v(oe.column, E, {
             [oe.days]: t > 0
           }),
           children: [
-            /* @__PURE__ */ s("p", { className: v(oe.labelBig, p), children: Qn(t) }),
-            /* @__PURE__ */ s("p", { className: v(oe.labelSmall, p), children: n._("Days") })
+            /* @__PURE__ */ s("p", { className: v(oe.labelBig, E), children: Qn(t) }),
+            /* @__PURE__ */ s("p", { className: v(oe.labelSmall, E), children: y })
           ]
         }
       ),
-      /* @__PURE__ */ s("p", { className: v(oe.colon, p), children: ":" })
+      /* @__PURE__ */ s("p", { className: v(oe.colon, E), children: ":" })
     ] }),
-    /* @__PURE__ */ g("div", { className: v(oe.column, p), children: [
-      /* @__PURE__ */ s("p", { className: v(oe.labelBig, p), children: Qn(r) }),
-      /* @__PURE__ */ s("p", { className: v(oe.labelSmall, p), children: n._("Hours") })
+    /* @__PURE__ */ g("div", { className: v(oe.column, E), children: [
+      /* @__PURE__ */ s("p", { className: v(oe.labelBig, E), children: Qn(r) }),
+      /* @__PURE__ */ s("p", { className: v(oe.labelSmall, E), children: f })
     ] }),
-    /* @__PURE__ */ s("p", { className: v(oe.colon, p), children: ":" }),
-    /* @__PURE__ */ g("div", { className: v(oe.column, p), children: [
-      /* @__PURE__ */ s("p", { className: v(oe.labelBig, p), children: Qn(a) }),
-      /* @__PURE__ */ s("p", { className: v(oe.labelSmall, p), children: n._("Minutes") })
+    /* @__PURE__ */ s("p", { className: v(oe.colon, E), children: ":" }),
+    /* @__PURE__ */ g("div", { className: v(oe.column, E), children: [
+      /* @__PURE__ */ s("p", { className: v(oe.labelBig, E), children: Qn(a) }),
+      /* @__PURE__ */ s("p", { className: v(oe.labelSmall, E), children: m })
     ] }),
-    (t <= 0 || !A) && /* @__PURE__ */ s("p", { className: v(oe.colon, p), children: ":" }),
-    (t <= 0 || !A) && /* @__PURE__ */ g("div", { className: v(oe.column, p), children: [
-      /* @__PURE__ */ s("p", { className: v(oe.labelBig, p), children: Qn(o) }),
-      /* @__PURE__ */ s("p", { className: v(oe.labelSmall, p), children: n._("Sec") })
+    (t <= 0 || !A) && /* @__PURE__ */ s("p", { className: v(oe.colon, E), children: ":" }),
+    (t <= 0 || !A) && /* @__PURE__ */ g("div", { className: v(oe.column, E), children: [
+      /* @__PURE__ */ s("p", { className: v(oe.labelBig, E), children: Qn(o) }),
+      /* @__PURE__ */ s("p", { className: v(oe.labelSmall, E), children: k })
     ] })
   ] });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.4",
+  "version": "3.9.5",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/Countdown/Countdown.jsx

@@ -16,7 +16,20 @@ export const Countdown = ({
   variant = 'lg',
   className,
   showDays = true,
+  labels = {},
 }) => {
+  const {
+    days: daysLabel,
+    hours: hoursLabel,
+    minutes: minutesLabel,
+    seconds: secondsLabel,
+  } = {
+    days: labels.days ?? i18n._('Days'),
+    hours: labels.hours ?? i18n._('Hours'),
+    minutes: labels.minutes ?? i18n._('Minutes'),
+    seconds: labels.seconds ?? i18n._('Sec'),
+  }
+
   if (!show || ended) {
     return null
   }
@@ -51,7 +64,7 @@ export const Countdown = ({
               {padZero(days)}
             </p>
             <p className={classNames(styles.labelSmall, themeClass)}>
-              {i18n._('Days')}
+              {daysLabel}
             </p>
           </div>
           <p className={classNames(styles.colon, themeClass)}>:</p>
@@ -63,7 +76,7 @@ export const Countdown = ({
           {padZero(hours)}
         </p>
         <p className={classNames(styles.labelSmall, themeClass)}>
-          {i18n._('Hours')}
+          {hoursLabel}
         </p>
       </div>
       <p className={classNames(styles.colon, themeClass)}>:</p>
@@ -73,7 +86,7 @@ export const Countdown = ({
           {padZero(minutes)}
         </p>
         <p className={classNames(styles.labelSmall, themeClass)}>
-          {i18n._('Minutes')}
+          {minutesLabel}
         </p>
       </div>
       {(days <= 0 || !showDays) && (
@@ -86,7 +99,7 @@ export const Countdown = ({
             {padZero(seconds)}
           </p>
           <p className={classNames(styles.labelSmall, themeClass)}>
-            {i18n._('Sec')}
+            {secondsLabel}
           </p>
         </div>
       )}

package/src/components/Countdown/Countdown.stories.jsx

@@ -23,6 +23,10 @@ export default {
       options: ['sm', 'md', 'lg'],
     },
     showDays: { control: 'boolean' },
+    labels: {
+      control: 'object',
+      description: 'Labels for days, hours, minutes and seconds',
+    },
   },
 }
 
@@ -104,5 +108,11 @@ export const Default = {
     theme: 'default',
     variant: 'lg',
     showDays: true,
+    labels: {
+      days: 'Dias',
+      hours: 'Horas',
+      minutes: 'minutos',
+      seconds: 'segundos',
+    },
   },
 }