@solostylist/ui-kit 1.0.196 → 1.0.198

package/dist/s-countdown/s-count-down.d.ts

@@ -3,17 +3,22 @@ import { SxProps, Theme } from '@mui/material';
 /**
  * Props interface for SCountdown component
  */
+export type SCountDownSize = 'small' | 'medium' | 'large';
+export type SCountDownColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+export type SCountDownLayout = 'horizontal' | 'vertical' | 'grid';
+export type SCountDownAnimation = 'none' | 'fade' | 'slide';
+export type SCountDownDigitFormat = 'default' | 'padded';
 export interface SCountDownProps {
     /** Target date timestamp in milliseconds (from Date.getTime()) */
     expireDate: number;
     /** Size variant for all count boxes */
-    size?: 'small' | 'medium' | 'large';
+    size?: SCountDownSize;
     /** Color theme for the countdown */
-    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+    color?: SCountDownColor;
     /** Layout orientation */
-    layout?: 'horizontal' | 'vertical' | 'grid';
+    layout?: SCountDownLayout;
     /** Animation type for value changes */
-    animation?: 'none' | 'fade' | 'slide';
+    animation?: SCountDownAnimation;
     /** Whether to show separators between units */
     showSeparators?: boolean;
     /** Custom separator element */
@@ -33,7 +38,7 @@ export interface SCountDownProps {
         seconds?: string;
     };
     /** Format for displaying digits */
-    digitFormat?: 'default' | 'padded';
+    digitFormat?: SCountDownDigitFormat;
     /** Callback fired when countdown reaches zero */
     onComplete?: () => void;
     /** Callback fired on each tick (every second) */
@@ -57,11 +62,11 @@ export interface SCountDownProps {
     paused?: boolean;
     /** Responsive breakpoints for size changes */
     responsive?: {
-        xs?: 'small' | 'medium' | 'large';
-        sm?: 'small' | 'medium' | 'large';
-        md?: 'small' | 'medium' | 'large';
-        lg?: 'small' | 'medium' | 'large';
-        xl?: 'small' | 'medium' | 'large';
+        xs?: SCountDownSize;
+        sm?: SCountDownSize;
+        md?: SCountDownSize;
+        lg?: SCountDownSize;
+        xl?: SCountDownSize;
     };
 }
 /**

package/dist/s-countdown/s-count-down.js

@@ -1,149 +1,132 @@
-import { j as l } from "../jsx-runtime-tc70JA_2.js";
-import { Typography as A } from "@mui/material";
-import L from "../hooks/use-count-down.js";
-import { SFlexBox as x } from "../s-flex-box/s-flex-box.js";
+import { j as a } from "../jsx-runtime-tc70JA_2.js";
+import { Typography as M } from "@mui/material";
+import A from "../hooks/use-count-down.js";
+import { SFlexBox as y } from "../s-flex-box/s-flex-box.js";
 import { SCountBox as N } from "./s-count-box.js";
 const R = ({
-  expireDate: S,
+  expireDate: x,
   size: e = "medium",
-  color: i = "inherit",
-  layout: w = "horizontal",
-  animation: j = "none",
-  showSeparators: h = !1,
-  separator: k = ":",
-  units: c = {
+  color: l = "inherit",
+  layout: u = "horizontal",
+  animation: g = "none",
+  showSeparators: d = !1,
+  separator: p = ":",
+  units: S = {
     days: !0,
     hours: !0,
     minutes: !0,
     seconds: !0
   },
-  labels: a = {
+  labels: i = {
     days: "DAYS",
     hours: "HOURS",
     minutes: "MINS",
     seconds: "SECS"
   },
-  digitFormat: C = "default",
-  onComplete: $,
-  onTick: v,
-  onStart: I,
-  completedText: n = "Time is up!",
-  autoHideZeroUnits: y = !1,
-  sx: f,
-  "aria-label": g = "Countdown timer",
+  digitFormat: w = "default",
+  onComplete: j,
+  onTick: C,
+  onStart: $,
+  completedText: o = "Time is up!",
+  autoHideZeroUnits: k = !1,
+  sx: h,
+  "aria-label": c = "Countdown timer",
   paused: b = !1,
-  responsive: r
+  responsive: n
 }) => {
-  const { timeLeft: t, isExpired: D } = L({
-    expireDate: S,
-    onComplete: $,
-    onTick: v,
-    onStart: I,
+  const { timeLeft: t, isExpired: v } = A({
+    expireDate: x,
+    onComplete: j,
+    onTick: C,
+    onStart: $,
     paused: b
   });
-  if (D && n)
-    return /* @__PURE__ */ l.jsx(
-      x,
+  if (v && o)
+    return /* @__PURE__ */ a.jsx(
+      y,
       {
         justifyContent: "center",
         alignItems: "center",
-        sx: { textAlign: "center", ...f },
+        sx: { textAlign: "center", ...h },
         role: "timer",
-        "aria-label": `${g} - completed`,
-        children: typeof n == "string" ? /* @__PURE__ */ l.jsx(
-          A,
+        "aria-label": `${c} - completed`,
+        children: typeof o == "string" ? /* @__PURE__ */ a.jsx(
+          M,
           {
             variant: e === "large" ? "h4" : e === "small" ? "h6" : "h5",
-            color: i === "inherit" ? "text.primary" : `${i}.main`,
+            color: l === "inherit" ? "text.primary" : `${l}.main`,
             sx: { fontWeight: 600 },
-            children: n
+            children: o
           }
-        ) : n
+        ) : o
       }
     );
-  const m = [], u = [
-    { key: "days", value: t.days, label: a.days },
-    { key: "hours", value: t.hours, label: a.hours },
-    { key: "minutes", value: t.minutes, label: a.minutes },
-    { key: "seconds", value: t.seconds, label: a.seconds }
-  ];
-  u.forEach((s, p) => {
-    if (c[s.key] && (!y || s.value > 0 || s.key === "seconds")) {
-      const B = p === u.length - 1, M = h && !B && u.slice(p + 1).some(
-        (d) => c[d.key] && (!y || d.value > 0 || d.key === "seconds")
-      );
-      m.push(
-        /* @__PURE__ */ l.jsx(
-          N,
-          {
-            digit: s.value,
-            title: s.label || "",
-            size: e,
-            color: i,
-            animation: j,
-            digitFormat: C,
-            showSeparator: M,
-            separator: k
-          },
-          s.key
-        )
-      );
-    }
+  const m = [], I = [
+    { key: "days", value: t.days, label: i.days },
+    { key: "hours", value: t.hours, label: i.hours },
+    { key: "minutes", value: t.minutes, label: i.minutes },
+    { key: "seconds", value: t.seconds, label: i.seconds }
+  ], D = (r) => S[r.key] && (!k || r.value > 0 || r.key === "seconds"), f = I.filter(D);
+  f.forEach((r, U) => {
+    const B = d && U < f.length - 1;
+    m.push(
+      /* @__PURE__ */ a.jsx(
+        N,
+        {
+          digit: r.value,
+          title: r.label ?? "",
+          size: e,
+          color: l,
+          animation: g,
+          digitFormat: w,
+          showSeparator: B,
+          separator: p
+        },
+        r.key
+      )
+    );
   });
-  const E = () => {
-    switch (w) {
-      case "vertical":
-        return {
-          flexDirection: "column",
-          gap: 2,
-          alignItems: "center"
-        };
-      case "grid":
-        return {
-          display: "grid",
-          gridTemplateColumns: `repeat(${m.length}, 1fr)`,
-          gap: 2,
-          justifyItems: "center"
-        };
-      default:
-        return {
-          flexDirection: "row",
-          gap: h ? 0 : 2,
-          alignItems: "center",
-          justifyContent: "center",
-          flexWrap: "wrap"
-        };
-    }
-  }, o = r ? {
-    xs: r.xs || e,
-    sm: r.sm || e,
-    md: r.md || e,
-    lg: r.lg || e,
-    xl: r.xl || e
+  const E = () => u === "vertical" ? { flexDirection: "column", gap: 2, alignItems: "center" } : u === "grid" ? {
+    display: "grid",
+    gridTemplateColumns: `repeat(${m.length}, 1fr)`,
+    gap: 2,
+    justifyItems: "center"
+  } : {
+    flexDirection: "row",
+    gap: d ? 0 : 2,
+    alignItems: "center",
+    justifyContent: "center",
+    flexWrap: "wrap"
+  }, s = n ? {
+    xs: n.xs ?? e,
+    sm: n.sm ?? e,
+    md: n.md ?? e,
+    lg: n.lg ?? e,
+    xl: n.xl ?? e
   } : void 0;
-  return /* @__PURE__ */ l.jsx(
-    x,
+  return /* @__PURE__ */ a.jsx(
+    y,
     {
       sx: {
         width: "fit-content",
         ...E(),
-        ...f,
-        ...o && {
+        ...h,
+        ...s && {
           // Apply responsive sizing if provided
           "@media (max-width: 600px)": {
             "& .MuiTypography-h3": {
-              fontSize: o.xs === "small" ? "1.5rem" : o.xs === "large" ? "3.5rem" : "2.5rem"
+              fontSize: s.xs === "small" ? "1.5rem" : s.xs === "large" ? "3.5rem" : "2.5rem"
             }
           },
           "@media (min-width: 600px) and (max-width: 960px)": {
             "& .MuiTypography-h3": {
-              fontSize: o.sm === "small" ? "1.5rem" : o.sm === "large" ? "3.5rem" : "2.5rem"
+              fontSize: s.sm === "small" ? "1.5rem" : s.sm === "large" ? "3.5rem" : "2.5rem"
             }
           }
         }
       },
       role: "timer",
-      "aria-label": `${g} - ${t.days} days, ${t.hours} hours, ${t.minutes} minutes, ${t.seconds} seconds remaining`,
+      "aria-label": `${c} - ${t.days} days, ${t.hours} hours, ${t.minutes} minutes, ${t.seconds} seconds remaining`,
       children: m
     }
   );