@solostylist/ui-kit 1.0.175 → 1.0.176

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

@@ -1,97 +1,97 @@
-import { j as u } from "../jsx-runtime-OVHDjVDe.js";
-import { Typography as R } from "@mui/material";
-import W from "../hooks/use-count-down.js";
-import { SFlexBox as w } from "../s-flex-box/s-flex-box.js";
-import { SCountBox as I } from "./s-count-box.js";
-const p = ({
-  expireDate: o,
+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 { SCountBox as N } from "./s-count-box.js";
+import { SFlexBox as x } from "../s-flex-box/s-flex-box.js";
+const R = ({
+  expireDate: S,
   size: e = "medium",
-  color: s = "inherit",
-  layout: x = "horizontal",
-  animation: S = "none",
-  showSeparators: f = !1,
-  separator: q = ":",
-  units: h = {
+  color: i = "inherit",
+  layout: w = "horizontal",
+  animation: j = "none",
+  showSeparators: h = !1,
+  separator: k = ":",
+  units: c = {
     days: !0,
     hours: !0,
     minutes: !0,
     seconds: !0
   },
-  labels: i = {
+  labels: a = {
     days: "DAYS",
     hours: "HOURS",
     minutes: "MINS",
     seconds: "SECS"
   },
-  digitFormat: V = "default",
-  onComplete: C,
-  onTick: k,
-  onStart: T,
-  completedText: r = "Time is up!",
+  digitFormat: C = "default",
+  onComplete: $,
+  onTick: v,
+  onStart: I,
+  completedText: n = "Time is up!",
   autoHideZeroUnits: y = !1,
-  sx: v,
+  sx: f,
   "aria-label": g = "Countdown timer",
-  paused: _ = !1,
-  responsive: n
+  paused: b = !1,
+  responsive: r
 }) => {
-  const { timeLeft: a, isExpired: z } = W({
-    expireDate: o,
-    onComplete: C,
-    onTick: k,
-    onStart: T,
-    paused: _
+  const { timeLeft: t, isExpired: D } = L({
+    expireDate: S,
+    onComplete: $,
+    onTick: v,
+    onStart: I,
+    paused: b
   });
-  if (z && r)
-    return /* @__PURE__ */ u.jsx(
-      w,
+  if (D && n)
+    return /* @__PURE__ */ l.jsx(
+      x,
       {
         justifyContent: "center",
         alignItems: "center",
-        sx: { textAlign: "center", ...v },
+        sx: { textAlign: "center", ...f },
         role: "timer",
         "aria-label": `${g} - completed`,
-        children: typeof r == "string" ? /* @__PURE__ */ u.jsx(
-          R,
+        children: typeof n == "string" ? /* @__PURE__ */ l.jsx(
+          A,
           {
             variant: e === "large" ? "h4" : e === "small" ? "h6" : "h5",
-            color: s === "inherit" ? "text.primary" : `${s}.main`,
+            color: i === "inherit" ? "text.primary" : `${i}.main`,
             sx: { fontWeight: 600 },
-            children: r
+            children: n
           }
-        ) : r
+        ) : n
       }
     );
-  const d = [], m = [
-    { key: "days", value: a.days, label: i.days },
-    { key: "hours", value: a.hours, label: i.hours },
-    { key: "minutes", value: a.minutes, label: i.minutes },
-    { key: "seconds", value: a.seconds, label: i.seconds }
+  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 }
   ];
-  m.forEach((t, b) => {
-    if (h[t.key] && (!y || t.value > 0 || t.key === "seconds")) {
-      const D = b === m.length - 1, N = f && !D && m.slice(b + 1).some(
-        (c) => h[c.key] && (!y || c.value > 0 || c.key === "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")
       );
-      d.push(
-        /* @__PURE__ */ u.jsx(
-          I,
+      m.push(
+        /* @__PURE__ */ l.jsx(
+          N,
           {
-            digit: t.value,
-            title: t.label || "",
+            digit: s.value,
+            title: s.label || "",
             size: e,
-            color: s,
-            animation: S,
-            digitFormat: V,
-            showSeparator: N,
-            separator: q
+            color: i,
+            animation: j,
+            digitFormat: C,
+            showSeparator: M,
+            separator: k
           },
-          t.key
+          s.key
         )
       );
     }
   });
-  const A = () => {
-    switch (x) {
+  const E = () => {
+    switch (w) {
       case "vertical":
         return {
           flexDirection: "column",
@@ -101,83 +101,55 @@ const p = ({
       case "grid":
         return {
           display: "grid",
-          gridTemplateColumns: `repeat(${d.length}, 1fr)`,
+          gridTemplateColumns: `repeat(${m.length}, 1fr)`,
           gap: 2,
           justifyItems: "center"
         };
       default:
         return {
           flexDirection: "row",
-          gap: f ? 0 : 2,
+          gap: h ? 0 : 2,
           alignItems: "center",
           justifyContent: "center",
           flexWrap: "wrap"
         };
     }
-  }, l = n ? {
-    xs: n.xs || e,
-    sm: n.sm || e,
-    md: n.md || e,
-    lg: n.lg || e,
-    xl: n.xl || e
+  }, o = r ? {
+    xs: r.xs || e,
+    sm: r.sm || e,
+    md: r.md || e,
+    lg: r.lg || e,
+    xl: r.xl || e
   } : void 0;
-  return /* @__PURE__ */ u.jsx(
-    w,
+  return /* @__PURE__ */ l.jsx(
+    x,
     {
       sx: {
         width: "fit-content",
-        ...A(),
-        ...v,
-        ...l && {
+        ...E(),
+        ...f,
+        ...o && {
           // Apply responsive sizing if provided
           "@media (max-width: 600px)": {
             "& .MuiTypography-h3": {
-              fontSize: l.xs === "small" ? "1.5rem" : l.xs === "large" ? "3.5rem" : "2.5rem"
+              fontSize: o.xs === "small" ? "1.5rem" : o.xs === "large" ? "3.5rem" : "2.5rem"
             }
           },
           "@media (min-width: 600px) and (max-width: 960px)": {
             "& .MuiTypography-h3": {
-              fontSize: l.sm === "small" ? "1.5rem" : l.sm === "large" ? "3.5rem" : "2.5rem"
+              fontSize: o.sm === "small" ? "1.5rem" : o.sm === "large" ? "3.5rem" : "2.5rem"
             }
           }
         }
       },
       role: "timer",
-      "aria-label": `${g} - ${a.days} days, ${a.hours} hours, ${a.minutes} minutes, ${a.seconds} seconds remaining`,
-      children: d
+      "aria-label": `${g} - ${t.days} days, ${t.hours} hours, ${t.minutes} minutes, ${t.seconds} seconds remaining`,
+      children: m
     }
   );
 };
-p.displayName = "SCountdown";
-try {
-  p.displayName = "SCountdown", p.__docgenInfo = { description: "A comprehensive countdown timer component with extensive customization options, animations, and accessibility features.", displayName: "SCountdown", props: { expireDate: { defaultValue: null, description: "Target date timestamp in milliseconds (from Date.getTime())", name: "expireDate", required: !0, type: { name: "number" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for all count boxes", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color theme for the countdown", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, layout: { defaultValue: { value: "horizontal" }, description: "Layout orientation", name: "layout", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"horizontal"' }, { value: '"vertical"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, showSeparators: { defaultValue: { value: "false" }, description: "Whether to show separators between units", name: "showSeparators", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, units: { defaultValue: { value: `{
-    days: true,
-    hours: true,
-    minutes: true,
-    seconds: true,
-  }` }, description: "Which time units to display", name: "units", required: !1, type: { name: "{ days?: boolean; hours?: boolean; minutes?: boolean | undefined; seconds?: boolean | undefined; } | undefined" } }, labels: { defaultValue: { value: `{
-    days: 'DAYS',
-    hours: 'HOURS',
-    minutes: 'MINS',
-    seconds: 'SECS',
-  }` }, description: "Custom labels for time units", name: "labels", required: !1, type: { name: "{ days?: string; hours?: string; minutes?: string | undefined; seconds?: string | undefined; } | undefined" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying digits", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, onComplete: { defaultValue: null, description: "Callback fired when countdown reaches zero", name: "onComplete", required: !1, type: { name: "(() => void)" } }, onTick: { defaultValue: null, description: "Callback fired on each tick (every second)", name: "onTick", required: !1, type: { name: "((timeLeft: { days: number; hours: number; minutes: number; seconds: number; }) => void)" } }, onStart: { defaultValue: null, description: "Callback fired when countdown starts", name: "onStart", required: !1, type: { name: "(() => void)" } }, completedText: { defaultValue: { value: "Time is up!" }, description: "What to display when countdown is complete", name: "completedText", required: !1, type: { name: "ReactNode" } }, autoHideZeroUnits: { defaultValue: { value: "false" }, description: "Whether to auto-hide completed units (e.g., hide days when 0)", name: "autoHideZeroUnits", required: !1, type: { name: "boolean" } }, sx: { defaultValue: null, description: "Custom styling for the container", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, "aria-label": { defaultValue: { value: "Countdown timer" }, description: "ARIA label for accessibility", name: "aria-label", required: !1, type: { name: "string" } }, paused: { defaultValue: { value: "false" }, description: "Whether the countdown is paused", name: "paused", required: !1, type: { name: "boolean" } }, responsive: { defaultValue: null, description: "Responsive breakpoints for size changes", name: "responsive", required: !1, type: { name: '{ xs?: "small" | "medium" | "large"; sm?: "small" | "medium" | "large"; md?: "small" | "medium" | "large" | undefined; lg?: "small" | "medium" | "large" | undefined; xl?: "small" | ... 2 more ... | undefined; } | undefined' } } } };
-} catch {
-}
-try {
-  scountdown.displayName = "scountdown", scountdown.__docgenInfo = { description: "A comprehensive countdown timer component with extensive customization options, animations, and accessibility features.", displayName: "scountdown", props: { expireDate: { defaultValue: null, description: "Target date timestamp in milliseconds (from Date.getTime())", name: "expireDate", required: !0, type: { name: "number" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for all count boxes", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color theme for the countdown", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, layout: { defaultValue: { value: "horizontal" }, description: "Layout orientation", name: "layout", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"horizontal"' }, { value: '"vertical"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, showSeparators: { defaultValue: { value: "false" }, description: "Whether to show separators between units", name: "showSeparators", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, units: { defaultValue: { value: `{
-    days: true,
-    hours: true,
-    minutes: true,
-    seconds: true,
-  }` }, description: "Which time units to display", name: "units", required: !1, type: { name: "{ days?: boolean; hours?: boolean; minutes?: boolean | undefined; seconds?: boolean | undefined; } | undefined" } }, labels: { defaultValue: { value: `{
-    days: 'DAYS',
-    hours: 'HOURS',
-    minutes: 'MINS',
-    seconds: 'SECS',
-  }` }, description: "Custom labels for time units", name: "labels", required: !1, type: { name: "{ days?: string; hours?: string; minutes?: string | undefined; seconds?: string | undefined; } | undefined" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying digits", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, onComplete: { defaultValue: null, description: "Callback fired when countdown reaches zero", name: "onComplete", required: !1, type: { name: "(() => void)" } }, onTick: { defaultValue: null, description: "Callback fired on each tick (every second)", name: "onTick", required: !1, type: { name: "((timeLeft: { days: number; hours: number; minutes: number; seconds: number; }) => void)" } }, onStart: { defaultValue: null, description: "Callback fired when countdown starts", name: "onStart", required: !1, type: { name: "(() => void)" } }, completedText: { defaultValue: { value: "Time is up!" }, description: "What to display when countdown is complete", name: "completedText", required: !1, type: { name: "ReactNode" } }, autoHideZeroUnits: { defaultValue: { value: "false" }, description: "Whether to auto-hide completed units (e.g., hide days when 0)", name: "autoHideZeroUnits", required: !1, type: { name: "boolean" } }, sx: { defaultValue: null, description: "Custom styling for the container", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, "aria-label": { defaultValue: { value: "Countdown timer" }, description: "ARIA label for accessibility", name: "aria-label", required: !1, type: { name: "string" } }, paused: { defaultValue: { value: "false" }, description: "Whether the countdown is paused", name: "paused", required: !1, type: { name: "boolean" } }, responsive: { defaultValue: null, description: "Responsive breakpoints for size changes", name: "responsive", required: !1, type: { name: '{ xs?: "small" | "medium" | "large"; sm?: "small" | "medium" | "large"; md?: "small" | "medium" | "large" | undefined; lg?: "small" | "medium" | "large" | undefined; xl?: "small" | ... 2 more ... | undefined; } | undefined' } } } };
-} catch {
-}
+R.displayName = "SCountdown";
 export {
-  p as SCountdown,
-  p as default
+  R as SCountdown,
+  R as default
 };