@solostylist/ui-kit 1.0.111 → 1.0.112

package/dist/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export * from './use-dialog';
 export * from './use-popover';
+export * from './use-count-down';
+export * from './use-scroll-animation';

package/dist/hooks/index.js

@@ -1,6 +1,9 @@
-import { useDialog as r } from "./use-dialog.js";
-import { usePopover as f } from "./use-popover.js";
+import { useDialog as m } from "./use-dialog.js";
+import { usePopover as t } from "./use-popover.js";
+import "react";
+import { useScrollAnimation as f } from "./use-scroll-animation.js";
 export {
-  r as useDialog,
-  f as usePopover
+  m as useDialog,
+  t as usePopover,
+  f as useScrollAnimation
 };

package/dist/hooks/use-count-down.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Time left object structure
+ */
+export interface TimeLeft {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+/**
+ * Props for useCountDown hook
+ */
+export interface UseCountDownProps {
+    /** Target date timestamp in milliseconds */
+    expireDate: number;
+    /** Callback fired when countdown reaches zero */
+    onComplete?: () => void;
+    /** Callback fired on each tick (every second) */
+    onTick?: (timeLeft: TimeLeft) => void;
+    /** Callback fired when countdown starts */
+    onStart?: () => void;
+    /** Whether the countdown is paused */
+    paused?: boolean;
+    /** Custom interval in milliseconds (default: 1000) */
+    interval?: number;
+    /** Whether to automatically start the countdown */
+    autoStart?: boolean;
+}
+/**
+ * Return type for useCountDown hook
+ */
+export interface UseCountDownReturn {
+    /** Current time left */
+    timeLeft: TimeLeft;
+    /** Whether the countdown has expired */
+    isExpired: boolean;
+    /** Whether the countdown is currently running */
+    isRunning: boolean;
+    /** Whether the countdown is paused */
+    isPaused: boolean;
+    /** Start the countdown */
+    start: () => void;
+    /** Pause the countdown */
+    pause: () => void;
+    /** Resume the countdown */
+    resume: () => void;
+    /** Reset the countdown to initial state */
+    reset: () => void;
+    /** Get the total duration in milliseconds */
+    totalDuration: number;
+    /** Get the elapsed time in milliseconds */
+    elapsedTime: number;
+    /** Get the progress as a percentage (0-100) */
+    progress: number;
+}
+/**
+ * Enhanced countdown hook with comprehensive features
+ *
+ * Features:
+ * - Pause/resume functionality
+ * - Event callbacks (onComplete, onTick, onStart)
+ * - Custom intervals
+ * - Progress tracking
+ * - Manual start/stop controls
+ * - Expiration detection
+ *
+ * @param props - UseCountDownProps
+ * @returns UseCountDownReturn - Hook return value with time data and controls
+ */
+declare const useCountDown: ({ expireDate, onComplete, onTick, onStart, paused, interval, autoStart, }: UseCountDownProps) => UseCountDownReturn;
+export default useCountDown;

package/dist/hooks/use-count-down.js

@@ -0,0 +1,77 @@
+import { useState as o, useRef as c, useEffect as u, useCallback as f, useMemo as p } from "react";
+const z = {
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0
+}, J = ({
+  expireDate: a,
+  onComplete: T,
+  onTick: L,
+  onStart: M,
+  paused: e = !1,
+  interval: S = 1e3,
+  autoStart: R = !0
+}) => {
+  const [A, j] = o(z), [w, k] = o(!1), [g, i] = o(R && !e), [x, l] = o(e), [t, q] = o(null), s = c(null), I = c(T), E = c(L), v = c(M), y = c(!1), C = c(!1);
+  u(() => {
+    I.current = T;
+  }, [T]), u(() => {
+    E.current = L;
+  }, [L]), u(() => {
+    v.current = M;
+  }, [M]);
+  const m = f(() => {
+    const r = (/* @__PURE__ */ new Date()).getTime(), n = a - r;
+    return n < 0 ? { timeLeft: z, expired: !0 } : {
+      timeLeft: {
+        days: Math.floor(n / (1e3 * 60 * 60 * 24)),
+        hours: Math.floor(n % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)),
+        minutes: Math.floor(n % (1e3 * 60 * 60) / (1e3 * 60)),
+        seconds: Math.floor(n % (1e3 * 60) / 1e3)
+      },
+      expired: !1
+    };
+  }, [a]), h = f(() => {
+    const { timeLeft: r, expired: n } = m();
+    j(r), k(n), E.current && E.current(r), n && !C.current && (C.current = !0, i(!1), I.current && I.current());
+  }, [m]), B = f(() => {
+    !y.current && v.current && (v.current(), y.current = !0), i(!0), l(!1), t || q((/* @__PURE__ */ new Date()).getTime());
+  }, [t]), D = f(() => {
+    i(!1), l(!0);
+  }, []), P = f(() => {
+    i(!0), l(!1);
+  }, []), F = f(() => {
+    i(R && !e), l(e), k(!1), q(null), y.current = !1, C.current = !1;
+    const { timeLeft: r } = m();
+    j(r);
+  }, [R, e, m]);
+  u(() => {
+    e ? D() : x && !e && P();
+  }, [e, x, D, P]), u(() => (g && !w ? s.current = setInterval(h, S) : s.current && (clearInterval(s.current), s.current = null), () => {
+    s.current && (clearInterval(s.current), s.current = null);
+  }), [g, w, S, h]), u(() => {
+    h();
+  }, [h]);
+  const d = p(() => t ? Math.max(0, a - t) : 0, [a, t]), b = p(() => {
+    if (!t) return 0;
+    const r = (/* @__PURE__ */ new Date()).getTime();
+    return Math.max(0, r - t);
+  }, [t]), G = p(() => d === 0 ? 0 : Math.min(100, Math.max(0, b / d * 100)), [b, d]);
+  return {
+    timeLeft: A,
+    isExpired: w,
+    isRunning: g,
+    isPaused: x,
+    start: B,
+    pause: D,
+    resume: P,
+    reset: F,
+    totalDuration: d,
+    elapsedTime: b,
+    progress: G
+  };
+};
+export {
+  J as default
+};

package/dist/main.d.ts

@@ -101,6 +101,8 @@ export { default as SLazyImage } from './s-lazy-image/index';
 export type { SLazyImageProps } from './s-lazy-image/index';
 export { default as SImageComparison } from './s-image-comparison/index';
 export type { SImageComparisonProps } from './s-image-comparison/index';
+export { default as SCategoryCard } from './s-category-card/index';
+export type { SCategoryCardProps } from './s-category-card/index';
 export { default as SRadialPulseAnimate } from './s-radial-pulse-animate/index';
 export type { SRadialPulseAnimateProps } from './s-radial-pulse-animate/index';
 export { default as SRating } from './s-rating/index';

package/dist/main.js

@@ -1,148 +1,153 @@
-import { default as t } from "./s-accordion/s-accordion.js";
-import { default as f } from "./s-action-overlay/s-action-overlay.js";
+import { default as a } from "./s-accordion/s-accordion.js";
+import { default as l } from "./s-action-overlay/s-action-overlay.js";
 import { default as s } from "./s-autocomplete/s-autocomplete.js";
-import { default as p } from "./s-avatar/s-avatar.js";
-import { default as S } from "./s-button/s-button.js";
-import { default as u } from "./s-button-link/s-button-link.js";
-import { default as n } from "./s-carousel/s-carousel.js";
-import { default as c } from "./s-chat-input/s-chat-input.js";
+import { default as x } from "./s-avatar/s-avatar.js";
+import { default as d } from "./s-button/s-button.js";
+import { default as i } from "./s-button-link/s-button-link.js";
+import { default as g } from "./s-carousel/s-carousel.js";
+import { default as T } from "./s-chat-input/s-chat-input.js";
 import { default as v } from "./s-chat-message/s-chat-message.js";
-import { default as P } from "./s-text-editor/s-text-editor.js";
+import { default as D } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
-import { default as b } from "./s-checkbox/s-checkbox.js";
+import { default as M } from "./s-checkbox/s-checkbox.js";
 import { default as I } from "./s-chip/s-chip.js";
-import { default as h } from "./s-chips/s-chips.js";
-import { default as L } from "./s-data-table/s-data-table.js";
-import { DialogConfirmProvider as B, default as A, useDialogConfirm as z } from "./s-dialog-confirm/s-dialog-confirm.js";
-import { DialogMessageProvider as R, default as w, useDialogMessage as G } from "./s-dialog-message/s-dialog-message.js";
-import { default as j } from "./s-error/s-error.js";
-import { default as O } from "./s-empty/s-empty.js";
-import { default as q } from "./s-flex-box/s-flex-box.js";
-import { default as J } from "./s-dialog/s-dialog.js";
-import { default as U } from "./s-file-dropzone/s-file-dropzone.js";
-import { default as X } from "./s-file-icon/s-file-icon.js";
-import { default as Z } from "./s-i18n-provider/s-i18n-provider.js";
-import { default as $ } from "./s-icon-button/s-icon-button.js";
-import { default as oe } from "./s-label/s-label.js";
-import { default as te } from "./s-multi-select/s-multi-select.js";
-import { default as fe } from "./s-no-ssr/s-no-ssr.js";
+import { default as k } from "./s-chips/s-chips.js";
+import { default as F } from "./s-data-table/s-data-table.js";
+import { DialogConfirmProvider as B, default as z, useDialogConfirm as E } from "./s-dialog-confirm/s-dialog-confirm.js";
+import { DialogMessageProvider as w, default as G, useDialogMessage as N } from "./s-dialog-message/s-dialog-message.js";
+import { default as K } from "./s-error/s-error.js";
+import { default as V } from "./s-empty/s-empty.js";
+import { default as H } from "./s-flex-box/s-flex-box.js";
+import { default as Q } from "./s-dialog/s-dialog.js";
+import { default as W } from "./s-file-dropzone/s-file-dropzone.js";
+import { default as Y } from "./s-file-icon/s-file-icon.js";
+import { default as _ } from "./s-i18n-provider/s-i18n-provider.js";
+import { default as ee } from "./s-icon-button/s-icon-button.js";
+import { default as re } from "./s-label/s-label.js";
+import { default as ae } from "./s-multi-select/s-multi-select.js";
+import { default as le } from "./s-no-ssr/s-no-ssr.js";
 import { default as se } from "./s-text-field/s-text-field.js";
-import { default as pe } from "./s-pagination/s-pagination.js";
-import { default as Se } from "./s-select/s-select.js";
-import { default as ue } from "./s-skeleton/s-skeleton.js";
-import { default as ne } from "./s-tip/s-tip.js";
-import { default as ce } from "./s-text-truncation/s-text-truncation.js";
-import { default as ve, SnackbarMessageProvider as Ce, useSnackbarMessage as Pe } from "./s-snackbar-message/s-snackbar-message.js";
-import { default as be } from "./s-form/s-form.js";
+import { default as xe } from "./s-pagination/s-pagination.js";
+import { default as de } from "./s-select/s-select.js";
+import { default as ie } from "./s-skeleton/s-skeleton.js";
+import { default as ge } from "./s-tip/s-tip.js";
+import { default as Te } from "./s-text-truncation/s-text-truncation.js";
+import { default as ve, SnackbarMessageProvider as Pe, useSnackbarMessage as De } from "./s-snackbar-message/s-snackbar-message.js";
+import { default as Me } from "./s-form/s-form.js";
 import { SSmartTextField as Ie } from "./s-smart-text-field/s-smart-text-field.js";
-import { SCopilotKitProvider as he } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as Le, SStripeExpiry as Fe, SStripeNumber as Be, StripeTextField as Ae } from "./s-stripe/s-stripe.js";
-import { default as Ee } from "./s-theme-provider/s-theme-provider.js";
-import { default as we } from "./s-datetime-picker/s-datetime-picker.js";
-import { default as Ne } from "./s-date-picker/s-date-picker.js";
-import { default as Ke } from "./s-localization-provider/s-localization-provider.js";
-import { default as Ve } from "./s-gradient-icon/s-gradient-icon.js";
-import { default as He } from "./s-glow-button/s-glow-button.js";
-import { default as Qe } from "./s-moving-border/s-moving-border.js";
-import { default as We } from "./s-scroll-reveal/s-scroll-reveal.js";
-import { default as Ye } from "./s-spotlight-cursor/s-spotlight-cursor.js";
-import { default as _e } from "./s-copyable-text/s-copyable-text.js";
-import { MediaItem as eo, default as oo } from "./s-interactive-gallery/s-interactive-gallery.js";
-import { default as to } from "./s-image-modal/s-image-modal.js";
-import { default as fo } from "./s-lazy-image/s-lazy-image.js";
+import { SCopilotKitProvider as ke } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
+import { SStripeCVC as Fe, SStripeExpiry as Ae, SStripeNumber as Be, StripeTextField as ze } from "./s-stripe/s-stripe.js";
+import { default as Re } from "./s-theme-provider/s-theme-provider.js";
+import { default as Ge } from "./s-datetime-picker/s-datetime-picker.js";
+import { default as je } from "./s-date-picker/s-date-picker.js";
+import { default as Oe } from "./s-localization-provider/s-localization-provider.js";
+import { default as qe } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as Je } from "./s-glow-button/s-glow-button.js";
+import { default as Ue } from "./s-moving-border/s-moving-border.js";
+import { default as Xe } from "./s-scroll-reveal/s-scroll-reveal.js";
+import { default as Ze } from "./s-spotlight-cursor/s-spotlight-cursor.js";
+import { default as $e } from "./s-copyable-text/s-copyable-text.js";
+import { MediaItem as oo, default as ro } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as ao } from "./s-image-modal/s-image-modal.js";
+import { default as lo } from "./s-lazy-image/s-lazy-image.js";
 import { default as so } from "./s-image-comparison/s-image-comparison.js";
-import { default as po } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as So } from "./s-rating/s-rating.js";
-import { default as io } from "./s-review/s-review.js";
-import { default as go } from "./s-tabs/s-tabs.js";
-import { default as To } from "./s-tabs/s-tab.js";
-import { default as Co } from "./s-tabs/s-tab-panel.js";
-import { default as Do } from "./s-text-shimmer/s-text-shimmer.js";
-import { default as Mo } from "./s-typewriter-text/s-typewriter-text.js";
-import { useDialog as yo } from "./hooks/use-dialog.js";
-import { usePopover as ko } from "./hooks/use-popover.js";
-import { formatDatePosted as Fo } from "./utils/dayjs.js";
-import { bytesToSize as Ao } from "./utils/bytes-to-size.js";
-import { LogLevel as Eo, Logger as Ro, createLogger as wo, logger as Go } from "./utils/logger.js";
-import { default as jo } from "dayjs";
+import { default as xo } from "./s-category-card/s-category-card.js";
+import { default as uo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
+import { default as no } from "./s-rating/s-rating.js";
+import { default as co } from "./s-review/s-review.js";
+import { default as Co } from "./s-tabs/s-tabs.js";
+import { default as Po } from "./s-tabs/s-tab.js";
+import { default as bo } from "./s-tabs/s-tab-panel.js";
+import { default as yo } from "./s-text-shimmer/s-text-shimmer.js";
+import { default as ho } from "./s-typewriter-text/s-typewriter-text.js";
+import { useDialog as Lo } from "./hooks/use-dialog.js";
+import { usePopover as Ao } from "./hooks/use-popover.js";
+import "react";
+import { useScrollAnimation as zo } from "./hooks/use-scroll-animation.js";
+import { formatDatePosted as Ro } from "./utils/dayjs.js";
+import { bytesToSize as Go } from "./utils/bytes-to-size.js";
+import { LogLevel as jo, Logger as Ko, createLogger as Oo, logger as Vo } from "./utils/logger.js";
+import { default as Ho } from "dayjs";
 export {
   B as DialogConfirmProvider,
-  R as DialogMessageProvider,
-  Eo as LogLevel,
-  Ro as Logger,
-  eo as MediaItem,
-  t as SAccordion,
-  f as SActionOverlay,
+  w as DialogMessageProvider,
+  jo as LogLevel,
+  Ko as Logger,
+  oo as MediaItem,
+  a as SAccordion,
+  l as SActionOverlay,
   s as SAutocomplete,
-  p as SAvatar,
-  S as SButton,
-  u as SButtonLink,
-  n as SCarousel,
-  c as SChatInput,
+  x as SAvatar,
+  d as SButton,
+  i as SButtonLink,
+  g as SCarousel,
+  xo as SCategoryCard,
+  T as SChatInput,
   v as SChatMessage,
-  b as SCheckbox,
+  M as SCheckbox,
   I as SChip,
-  h as SChips,
-  he as SCopilotKitProvider,
-  _e as SCopyableText,
-  L as SDataTable,
-  Ne as SDatePicker,
-  we as SDateTimePicker,
-  J as SDialog,
-  A as SDialogConfirm,
-  w as SDialogMessage,
-  O as SEmpty,
-  j as SError,
-  U as SFileDropzone,
-  X as SFileIcon,
-  q as SFlexBox,
-  be as SForm,
-  He as SGlowButton,
-  Ve as SGradientIcon,
-  Z as SI18nProvider,
-  $ as SIconButton,
+  k as SChips,
+  ke as SCopilotKitProvider,
+  $e as SCopyableText,
+  F as SDataTable,
+  je as SDatePicker,
+  Ge as SDateTimePicker,
+  Q as SDialog,
+  z as SDialogConfirm,
+  G as SDialogMessage,
+  V as SEmpty,
+  K as SError,
+  W as SFileDropzone,
+  Y as SFileIcon,
+  H as SFlexBox,
+  Me as SForm,
+  Je as SGlowButton,
+  qe as SGradientIcon,
+  _ as SI18nProvider,
+  ee as SIconButton,
   so as SImageComparison,
-  to as SImageModal,
-  oo as SInteractiveGallery,
-  oe as SLabel,
-  fo as SLazyImage,
-  Ke as SLocalizationProvider,
-  Qe as SMovingBorder,
-  te as SMultiSelect,
-  fe as SNoSsr,
-  pe as SPagination,
-  po as SRadialPulseAnimate,
-  So as SRating,
-  io as SReview,
-  We as SScrollReveal,
-  Se as SSelect,
-  ue as SSkeleton,
+  ao as SImageModal,
+  ro as SInteractiveGallery,
+  re as SLabel,
+  lo as SLazyImage,
+  Oe as SLocalizationProvider,
+  Ue as SMovingBorder,
+  ae as SMultiSelect,
+  le as SNoSsr,
+  xe as SPagination,
+  uo as SRadialPulseAnimate,
+  no as SRating,
+  co as SReview,
+  Xe as SScrollReveal,
+  de as SSelect,
+  ie as SSkeleton,
   Ie as SSmartTextField,
   ve as SSnackbarMessage,
-  Ye as SSpotlightCursor,
-  Le as SStripeCVC,
-  Fe as SStripeExpiry,
+  Ze as SSpotlightCursor,
+  Fe as SStripeCVC,
+  Ae as SStripeExpiry,
   Be as SStripeNumber,
-  To as STab,
-  Co as STabPanel,
-  go as STabs,
-  P as STextEditor,
+  Po as STab,
+  bo as STabPanel,
+  Co as STabs,
+  D as STextEditor,
   se as STextField,
-  Do as STextShimmer,
-  ce as STextTruncation,
-  Ee as SThemeProvider,
-  ne as STip,
-  Mo as STypewriterText,
-  Ce as SnackbarMessageProvider,
-  Ae as StripeTextField,
-  Ao as bytesToSize,
-  wo as createLogger,
-  jo as dayjs,
-  Fo as formatDatePosted,
-  Go as logger,
-  yo as useDialog,
-  z as useDialogConfirm,
-  G as useDialogMessage,
-  ko as usePopover,
-  Pe as useSnackbarMessage
+  yo as STextShimmer,
+  Te as STextTruncation,
+  Re as SThemeProvider,
+  ge as STip,
+  ho as STypewriterText,
+  Pe as SnackbarMessageProvider,
+  ze as StripeTextField,
+  Go as bytesToSize,
+  Oo as createLogger,
+  Ho as dayjs,
+  Ro as formatDatePosted,
+  Vo as logger,
+  Lo as useDialog,
+  E as useDialogConfirm,
+  N as useDialogMessage,
+  Ao as usePopover,
+  zo as useScrollAnimation,
+  De as useSnackbarMessage
 };

package/dist/s-category-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-category-card';
+export type { SCategoryCardProps } from './s-category-card';

package/dist/s-category-card/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-category-card.js";
+export {
+  o as default
+};

package/dist/s-category-card/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-category-card/s-category-card.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme> & {
+    disableHoverEffect?: boolean;
+    hoverScale?: number;
+}, {}, {}>;
+export declare const CategoryTitle: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme> & {
+    titlePosition?: "bottom" | "top" | "center";
+    titleAlignment?: "left" | "center" | "right";
+}, {}, {}>;
+export interface SCategoryCardProps {
+    image: string;
+    title: string;
+    width?: number | string;
+    height?: number | string;
+    alt?: string;
+    titlePosition?: 'bottom' | 'top' | 'center';
+    titleAlignment?: 'left' | 'center' | 'right';
+    titleVariant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
+    titleColor?: string;
+    titleBackgroundColor?: string;
+    titleOpacity?: number;
+    borderRadius?: number | string;
+    disableHoverEffect?: boolean;
+    hoverScale?: number;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    sx?: SxProps<Theme>;
+    titleSx?: SxProps<Theme>;
+    imageSx?: SxProps<Theme>;
+}
+declare const SCategoryCard: ({ image, title, width, height, alt, titlePosition, titleAlignment, titleVariant, titleColor, titleBackgroundColor, titleOpacity, borderRadius, disableHoverEffect, hoverScale, onClick, sx, titleSx, imageSx, }: SCategoryCardProps) => import("react/jsx-runtime").JSX.Element;
+export default SCategoryCard;

package/dist/s-category-card/s-category-card.js

@@ -0,0 +1,103 @@
+import { j as r } from "../jsx-runtime-DywqP_6a.js";
+import { styled as c, Box as i, Typography as v } from "@mui/material";
+import C from "../s-lazy-image/s-lazy-image.js";
+const F = c(i)(
+  ({ disableHoverEffect: t = !1, hoverScale: o = 1.1 }) => ({
+    height: "100%",
+    cursor: "pointer",
+    overflow: "hidden",
+    borderRadius: 1,
+    position: "relative",
+    img: {
+      height: "100%",
+      objectFit: "cover",
+      transition: "all 0.3s",
+      objectPosition: "center center"
+    },
+    ...!t && {
+      ":hover": {
+        img: { transform: `scale(${o})` }
+      }
+    }
+  })
+), S = c(i)(({ titlePosition: t = "bottom", titleAlignment: o = "center" }) => ({
+  left: 10,
+  right: 10,
+  padding: 8,
+  textAlign: o,
+  position: "absolute",
+  transition: "all 0.3s",
+  ...t === "bottom" && { bottom: 10 },
+  ...t === "top" && { top: 10 },
+  ...t === "center" && {
+    top: "50%",
+    transform: "translateY(-50%)"
+  }
+})), B = ({
+  image: t,
+  title: o,
+  width: e = 250,
+  height: a = 250,
+  alt: l = "category",
+  titlePosition: p = "bottom",
+  titleAlignment: m = "center",
+  titleVariant: g = "body1",
+  titleColor: d,
+  titleBackgroundColor: b = "background.paper",
+  titleOpacity: f = 1,
+  borderRadius: s = 2,
+  disableHoverEffect: x = !1,
+  hoverScale: y = 1.1,
+  onClick: n,
+  sx: j,
+  titleSx: h,
+  imageSx: u
+}) => /* @__PURE__ */ r.jsxs(
+  F,
+  {
+    disableHoverEffect: x,
+    hoverScale: y,
+    onClick: n,
+    sx: {
+      borderRadius: s,
+      cursor: n ? "pointer" : "default",
+      width: e,
+      height: a,
+      ...j
+    },
+    children: [
+      /* @__PURE__ */ r.jsx(
+        C,
+        {
+          src: t,
+          width: e,
+          height: a,
+          alt: l,
+          style: {
+            objectFit: "cover",
+            ...u
+          }
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        S,
+        {
+          titlePosition: p,
+          titleAlignment: m,
+          sx: {
+            borderRadius: s,
+            bgcolor: b,
+            opacity: f,
+            ...h
+          },
+          children: /* @__PURE__ */ r.jsx(v, { variant: g, color: d, children: o })
+        }
+      )
+    ]
+  }
+);
+export {
+  S as CategoryTitle,
+  F as Wrapper,
+  B as default
+};

package/dist/s-countdown/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SCountdown } from './s-count-down';
+export { SCountBox } from './s-count-down';
+export type { SCountDownProps, SCountBoxProps } from './s-count-down';

package/dist/s-countdown/index.js

@@ -0,0 +1,5 @@
+import { SCountBox as n, default as u } from "./s-count-down.js";
+export {
+  n as SCountBox,
+  u as SCountdown
+};

package/dist/s-countdown/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,118 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+/**
+ * Props for individual count box component
+ */
+export interface SCountBoxProps {
+    /** The numeric value to display */
+    digit: number;
+    /** The label/title for this time unit */
+    title: string;
+    /** Size variant for the count box */
+    size?: 'small' | 'medium' | 'large';
+    /** Color variant for the count box */
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+    /** Animation type for value changes */
+    animation?: 'none' | 'fade' | 'slide';
+    /** Custom styling */
+    sx?: SxProps<Theme>;
+    /** Custom digit styling */
+    digitSx?: SxProps<Theme>;
+    /** Custom title styling */
+    titleSx?: SxProps<Theme>;
+    /** Show separator after this box */
+    showSeparator?: boolean;
+    /** Custom separator element */
+    separator?: React.ReactNode;
+    /** Format for displaying the digit (e.g., '00' for zero-padding) */
+    digitFormat?: 'default' | 'padded';
+    /** Whether this count box is hidden */
+    hidden?: boolean;
+}
+/**
+ * Individual count box component that displays a single time unit
+ */
+export declare const SCountBox: ({ digit, title, size, color, animation, sx, digitSx, titleSx, showSeparator, separator, digitFormat, hidden, }: SCountBoxProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Props for the main countdown component
+ */
+export interface SCountDownProps {
+    /** Target date timestamp in milliseconds (from Date.getTime()) */
+    expireDate: number;
+    /** Size variant for all count boxes */
+    size?: 'small' | 'medium' | 'large';
+    /** Color theme for the countdown */
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+    /** Layout orientation */
+    layout?: 'horizontal' | 'vertical' | 'grid';
+    /** Animation type for value changes */
+    animation?: 'none' | 'fade' | 'slide';
+    /** Whether to show separators between units */
+    showSeparators?: boolean;
+    /** Custom separator element */
+    separator?: React.ReactNode;
+    /** Which time units to display */
+    units?: {
+        days?: boolean;
+        hours?: boolean;
+        minutes?: boolean;
+        seconds?: boolean;
+    };
+    /** Custom labels for time units */
+    labels?: {
+        days?: string;
+        hours?: string;
+        minutes?: string;
+        seconds?: string;
+    };
+    /** Format for displaying digits */
+    digitFormat?: 'default' | 'padded';
+    /** Callback fired when countdown reaches zero */
+    onComplete?: () => void;
+    /** Callback fired on each tick (every second) */
+    onTick?: (timeLeft: {
+        days: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
+    /** Callback fired when countdown starts */
+    onStart?: () => void;
+    /** What to display when countdown is complete */
+    completedText?: React.ReactNode;
+    /** Whether to auto-hide completed units (e.g., hide days when 0) */
+    autoHideZeroUnits?: boolean;
+    /** Custom styling for the container */
+    sx?: SxProps<Theme>;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** Whether the countdown is paused */
+    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';
+    };
+}
+/**
+ * SCountdown - A comprehensive countdown timer component with extensive customization options
+ *
+ * Features:
+ * - Multiple size variants and color themes
+ * - Flexible layout options (horizontal, vertical, grid)
+ * - Animation support for value changes
+ * - Customizable time units and labels
+ * - Auto-hide zero units option
+ * - Accessibility support with ARIA labels
+ * - Responsive design capabilities
+ * - Event callbacks for interaction
+ * - Pause/resume functionality
+ *
+ * @param props - SCountDownProps
+ * @returns JSX.Element - Countdown timer component
+ */
+declare const SCountdown: ({ expireDate, size, color, layout, animation, showSeparators, separator, units, labels, digitFormat, onComplete, onTick, onStart, completedText, autoHideZeroUnits, sx, "aria-label": ariaLabel, paused, responsive, }: SCountDownProps) => import("react/jsx-runtime").JSX.Element;
+export default SCountdown;

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

@@ -0,0 +1,248 @@
+import { j as e } from "../jsx-runtime-DywqP_6a.js";
+import { Typography as x, Fade as A, Slide as B } from "@mui/material";
+import M from "../hooks/use-count-down.js";
+import p from "../s-flex-box/s-flex-box.js";
+const T = ({
+  digit: y = 0,
+  title: i = "",
+  size: m = "medium",
+  color: u = "inherit",
+  animation: h = "none",
+  sx: g,
+  digitSx: S,
+  titleSx: f,
+  showSeparator: r = !1,
+  separator: j = ":",
+  digitFormat: w = "default",
+  hidden: k = !1
+}) => {
+  if (k) return null;
+  const v = (t) => w === "padded" ? t.toString().padStart(2, "0") : t.toString(), s = (() => {
+    switch (m) {
+      case "small":
+        return {
+          digit: { fontSize: "1.5rem", lineHeight: 1.2 },
+          title: { fontSize: "0.75rem", letterSpacing: "0.05em" }
+        };
+      case "large":
+        return {
+          digit: { fontSize: "3.5rem", lineHeight: 1.1 },
+          title: { fontSize: "1rem", letterSpacing: "0.1em" }
+        };
+      default:
+        return {
+          digit: { fontSize: "2.5rem", lineHeight: 1.15 },
+          title: { fontSize: "0.875rem", letterSpacing: "0.08em" }
+        };
+    }
+  })(), l = v(y), o = /* @__PURE__ */ e.jsx(
+    x,
+    {
+      variant: "h3",
+      component: "span",
+      sx: {
+        fontWeight: 700,
+        color: u === "inherit" ? "text.primary" : `${u}.main`,
+        width: "70px",
+        ...s.digit,
+        ...S
+      },
+      children: l
+    }
+  ), $ = /* @__PURE__ */ e.jsx(
+    x,
+    {
+      component: "span",
+      sx: {
+        color: "text.secondary",
+        fontWeight: 600,
+        textTransform: "uppercase",
+        display: "block",
+        mt: 0.5,
+        ...s.title,
+        ...f
+      },
+      children: i
+    }
+  ), n = /* @__PURE__ */ e.jsxs(
+    p,
+    {
+      flexDirection: "column",
+      alignItems: "center",
+      sx: {
+        textAlign: "center",
+        minWidth: "fit-content",
+        ...g
+      },
+      children: [
+        h === "fade" ? /* @__PURE__ */ e.jsx(A, { in: !0, timeout: 300, children: /* @__PURE__ */ e.jsx("div", { children: o }) }, l) : h === "slide" ? /* @__PURE__ */ e.jsx(B, { in: !0, direction: "up", timeout: 300, children: /* @__PURE__ */ e.jsx("div", { children: o }) }, l) : o,
+        $
+      ]
+    }
+  );
+  return r ? /* @__PURE__ */ e.jsxs(p, { alignItems: "center", children: [
+    n,
+    /* @__PURE__ */ e.jsx(
+      x,
+      {
+        variant: "h3",
+        sx: {
+          color: "text.secondary",
+          ...s.digit,
+          lineHeight: 1,
+          alignSelf: "flex-start",
+          mt: 0.5
+        },
+        children: j
+      }
+    )
+  ] }) : n;
+}, V = ({
+  expireDate: y,
+  size: i = "medium",
+  color: m = "inherit",
+  layout: u = "horizontal",
+  animation: h = "none",
+  showSeparators: g = !1,
+  separator: S = ":",
+  units: f = {
+    days: !0,
+    hours: !0,
+    minutes: !0,
+    seconds: !0
+  },
+  labels: r = {
+    days: "DAYS",
+    hours: "HOURS",
+    minutes: "MINS",
+    seconds: "SECS"
+  },
+  digitFormat: j = "default",
+  onComplete: w,
+  onTick: k,
+  onStart: v,
+  completedText: c = "Time is up!",
+  autoHideZeroUnits: s = !1,
+  sx: l,
+  "aria-label": o = "Countdown timer",
+  paused: $ = !1,
+  responsive: n
+}) => {
+  const { timeLeft: t, isExpired: E } = M({
+    expireDate: y,
+    onComplete: w,
+    onTick: k,
+    onStart: v,
+    paused: $
+  });
+  if (E && c)
+    return /* @__PURE__ */ e.jsx(
+      p,
+      {
+        justifyContent: "center",
+        alignItems: "center",
+        sx: { textAlign: "center", ...l },
+        role: "timer",
+        "aria-label": `${o} - completed`,
+        children: typeof c == "string" ? /* @__PURE__ */ e.jsx(
+          x,
+          {
+            variant: i === "large" ? "h4" : i === "small" ? "h6" : "h5",
+            color: m === "inherit" ? "text.primary" : `${m}.main`,
+            sx: { fontWeight: 600 },
+            children: c
+          }
+        ) : c
+      }
+    );
+  const C = [], I = [
+    { key: "days", value: t.days, label: r.days },
+    { key: "hours", value: t.hours, label: r.hours },
+    { key: "minutes", value: t.minutes, label: r.minutes },
+    { key: "seconds", value: t.seconds, label: r.seconds }
+  ];
+  I.forEach((a, D) => {
+    if (f[a.key] && (!s || a.value > 0 || a.key === "seconds")) {
+      const W = D === I.length - 1, H = g && !W && I.slice(D + 1).some(
+        (z) => f[z.key] && (!s || z.value > 0 || z.key === "seconds")
+      );
+      C.push(
+        /* @__PURE__ */ e.jsx(
+          T,
+          {
+            digit: a.value,
+            title: a.label || "",
+            size: i,
+            color: m,
+            animation: h,
+            digitFormat: j,
+            showSeparator: H,
+            separator: S
+          },
+          a.key
+        )
+      );
+    }
+  });
+  const b = () => {
+    switch (u) {
+      case "vertical":
+        return {
+          flexDirection: "column",
+          gap: 2,
+          alignItems: "center"
+        };
+      case "grid":
+        return {
+          display: "grid",
+          gridTemplateColumns: `repeat(${C.length}, 1fr)`,
+          gap: 2,
+          justifyItems: "center"
+        };
+      default:
+        return {
+          flexDirection: "row",
+          gap: g ? 0 : 2,
+          alignItems: "center",
+          justifyContent: "center",
+          flexWrap: "wrap"
+        };
+    }
+  }, d = n ? {
+    xs: n.xs || i,
+    sm: n.sm || i,
+    md: n.md || i,
+    lg: n.lg || i,
+    xl: n.xl || i
+  } : void 0;
+  return /* @__PURE__ */ e.jsx(
+    p,
+    {
+      sx: {
+        width: "fit-content",
+        ...b(),
+        ...l,
+        ...d && {
+          // Apply responsive sizing if provided
+          "@media (max-width: 600px)": {
+            "& .MuiTypography-h3": {
+              fontSize: d.xs === "small" ? "1.5rem" : d.xs === "large" ? "3.5rem" : "2.5rem"
+            }
+          },
+          "@media (min-width: 600px) and (max-width: 960px)": {
+            "& .MuiTypography-h3": {
+              fontSize: d.sm === "small" ? "1.5rem" : d.sm === "large" ? "3.5rem" : "2.5rem"
+            }
+          }
+        }
+      },
+      role: "timer",
+      "aria-label": `${o} - ${t.days} days, ${t.hours} hours, ${t.minutes} minutes, ${t.seconds} seconds remaining`,
+      children: C
+    }
+  );
+};
+export {
+  T as SCountBox,
+  V as default
+};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.111",
+  "version": "1.0.112",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",