@solostylist/ui-kit 1.0.166 → 1.0.168
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Typography-B7LOtCzI.js → Typography-C8jwvSWe.js} +1 -1
- package/dist/main.d.ts +5 -3
- package/dist/main.js +182 -172
- package/dist/s-accordion/index.js +2 -2
- package/dist/s-accordion/s-accordion.d.ts +17 -1
- package/dist/s-accordion/s-accordion.js +252 -238
- package/dist/s-action-overlay/index.js +1 -1
- package/dist/s-action-overlay/s-action-overlay.d.ts +34 -1
- package/dist/s-action-overlay/s-action-overlay.js +67 -55
- package/dist/s-ai-tool-bar/index.d.ts +2 -0
- package/dist/s-ai-tool-bar/index.js +3 -2
- package/dist/s-ai-tool-bar/s-ai-tool-bar.d.ts +43 -22
- package/dist/s-ai-tool-bar/s-ai-tool-bar.js +336 -255
- package/dist/s-autocomplete/index.js +2 -2
- package/dist/s-autocomplete/s-autocomplete.d.ts +13 -15
- package/dist/s-autocomplete/s-autocomplete.js +25 -17
- package/dist/s-avatar/index.js +2 -2
- package/dist/s-avatar/s-avatar.d.ts +16 -1
- package/dist/s-avatar/s-avatar.js +23 -10
- package/dist/s-blur-text/index.js +2 -2
- package/dist/s-blur-text/s-blur-text.d.ts +4 -13
- package/dist/s-blur-text/s-blur-text.js +57 -51
- package/dist/s-breadcrumbs/index.js +2 -2
- package/dist/s-breadcrumbs/s-breadcrumbs.d.ts +20 -1
- package/dist/s-breadcrumbs/s-breadcrumbs.js +39 -30
- package/dist/s-button/index.js +2 -2
- package/dist/s-button/s-button.d.ts +7 -1
- package/dist/s-button/s-button.js +15 -5
- package/dist/s-button-link/index.js +2 -2
- package/dist/s-button-link/s-button-link.d.ts +12 -26
- package/dist/s-button-link/s-button-link.js +36 -26
- package/dist/s-carousel/index.js +1 -1
- package/dist/s-carousel/s-carousel.d.ts +11 -1
- package/dist/s-carousel/s-carousel.js +233 -223
- package/dist/s-category-card/index.js +2 -2
- package/dist/s-category-card/s-category-card.d.ts +28 -1
- package/dist/s-category-card/s-category-card.js +77 -58
- package/dist/s-chat-input/index.js +2 -2
- package/dist/s-chat-input/s-chat-input.d.ts +12 -1
- package/dist/s-chat-input/s-chat-input.js +92 -82
- package/dist/s-chat-message/index.js +2 -2
- package/dist/s-chat-message/s-chat-message.d.ts +22 -1
- package/dist/s-chat-message/s-chat-message.js +144 -133
- package/dist/s-checkbox/index.js +2 -2
- package/dist/s-checkbox/s-checkbox.d.ts +2 -15
- package/dist/s-checkbox/s-checkbox.js +20 -10
- package/dist/s-chip/index.js +2 -2
- package/dist/s-chip/s-chip.d.ts +7 -1
- package/dist/s-chip/s-chip.js +15 -5
- package/dist/s-chips/index.js +2 -2
- package/dist/s-chips/s-chips.d.ts +5 -18
- package/dist/s-chips/s-chips.js +56 -41
- package/dist/s-comment-message/index.js +2 -2
- package/dist/s-comment-message/s-comment-message.d.ts +26 -1
- package/dist/s-comment-message/s-comment-message.js +95 -89
- package/dist/s-copyable-text/index.js +1 -1
- package/dist/s-copyable-text/s-copyable-text.d.ts +9 -36
- package/dist/s-copyable-text/s-copyable-text.js +31 -21
- package/dist/s-countdown/index.d.ts +3 -2
- package/dist/s-countdown/index.js +4 -3
- package/dist/s-countdown/s-count-box.d.ts +39 -0
- package/dist/s-countdown/s-count-box.js +112 -0
- package/dist/s-countdown/s-count-down.d.ts +6 -50
- package/dist/s-countdown/s-count-down.js +110 -175
- package/dist/s-data-table/index.js +2 -2
- package/dist/s-data-table/s-data-table.d.ts +9 -65
- package/dist/s-data-table/s-data-table.js +381 -371
- package/dist/s-date-picker/index.js +2 -2
- package/dist/s-date-picker/s-date-picker.d.ts +6 -17
- package/dist/s-date-picker/s-date-picker.js +124 -107
- package/dist/s-datetime-picker/index.js +2 -2
- package/dist/s-datetime-picker/s-datetime-picker.d.ts +5 -16
- package/dist/s-datetime-picker/s-datetime-picker.js +897 -887
- package/dist/s-dialog/index.js +2 -2
- package/dist/s-dialog/s-dialog.d.ts +3 -16
- package/dist/s-dialog/s-dialog.js +32 -23
- package/dist/s-dialog-confirm/index.js +3 -3
- package/dist/s-dialog-confirm/s-dialog-confirm.d.ts +5 -13
- package/dist/s-dialog-confirm/s-dialog-confirm.js +55 -48
- package/dist/s-dialog-message/index.js +4 -4
- package/dist/s-dialog-message/s-dialog-message.d.ts +5 -15
- package/dist/s-dialog-message/s-dialog-message.js +45 -38
- package/dist/s-empty/index.js +2 -2
- package/dist/s-empty/s-empty.d.ts +5 -20
- package/dist/s-empty/s-empty.js +14 -4
- package/dist/s-error/index.js +2 -2
- package/dist/s-error/s-error.d.ts +5 -20
- package/dist/s-error/s-error.js +16 -6
- package/dist/s-error-layout/index.js +2 -2
- package/dist/s-error-layout/s-error-layout.d.ts +6 -1
- package/dist/s-error-layout/s-error-layout.js +60 -51
- package/dist/s-file-dropzone/index.js +2 -2
- package/dist/s-file-dropzone/s-file-dropzone.d.ts +6 -51
- package/dist/s-file-dropzone/s-file-dropzone.js +64 -54
- package/dist/s-file-icon/index.js +2 -2
- package/dist/s-file-icon/s-file-icon.d.ts +5 -25
- package/dist/s-file-icon/s-file-icon.js +14 -8
- package/dist/s-flex-box/index.js +2 -2
- package/dist/s-flex-box/s-flex-box.d.ts +10 -1
- package/dist/s-flex-box/s-flex-box.js +14 -4
- package/dist/s-form/index.js +2 -2
- package/dist/s-form/s-form.d.ts +5 -14
- package/dist/s-form/s-form.js +19 -9
- package/dist/s-gallery/index.js +33 -3
- package/dist/s-gallery/s-gallery.d.ts +3 -36
- package/dist/s-gallery/s-gallery.js +108 -78
- package/dist/s-glow-button/s-glow-button.d.ts +6 -42
- package/dist/s-glow-button/s-glow-button.js +29 -47
- package/dist/s-gradient-icon/index.d.ts +1 -1
- package/dist/s-gradient-icon/index.js +1 -1
- package/dist/s-gradient-icon/s-gradient-icon.d.ts +8 -68
- package/dist/s-gradient-icon/s-gradient-icon.js +54 -44
- package/dist/s-i18n-provider/index.js +1 -1
- package/dist/s-i18n-provider/s-i18n-provider.d.ts +5 -33
- package/dist/s-i18n-provider/s-i18n-provider.js +25 -15
- package/dist/s-icon-button/index.js +2 -2
- package/dist/s-icon-button/s-icon-button.d.ts +6 -19
- package/dist/s-icon-button/s-icon-button.js +14 -4
- package/dist/s-image-comparison/s-image-comparison.js +50 -45
- package/dist/s-image-modal/index.js +3 -3
- package/dist/s-image-modal/s-image-modal.d.ts +4 -20
- package/dist/s-image-modal/s-image-modal.js +150 -135
- package/dist/s-item-not-found/index.js +2 -2
- package/dist/s-item-not-found/s-item-not-found.d.ts +14 -1
- package/dist/s-item-not-found/s-item-not-found.js +21 -10
- package/dist/s-label/index.js +2 -2
- package/dist/s-label/s-label.d.ts +9 -25
- package/dist/s-label/s-label.js +19 -9
- package/dist/s-language-switcher/index.js +3 -3
- package/dist/s-language-switcher/s-language-switcher.d.ts +20 -33
- package/dist/s-language-switcher/s-language-switcher.js +137 -115
- package/dist/s-lazy-image/index.js +10 -2
- package/dist/s-lazy-image/s-lazy-image.d.ts +12 -58
- package/dist/s-lazy-image/s-lazy-image.js +53 -58
- package/dist/s-localization-provider/index.js +2 -2
- package/dist/s-localization-provider/s-localization-provider.d.ts +6 -27
- package/dist/s-localization-provider/s-localization-provider.js +157 -149
- package/dist/s-moving-border/index.js +2 -2
- package/dist/s-moving-border/s-moving-border.d.ts +3 -33
- package/dist/s-moving-border/s-moving-border.js +65 -55
- package/dist/s-multi-select/index.js +2 -2
- package/dist/s-multi-select/s-multi-select.d.ts +5 -15
- package/dist/s-multi-select/s-multi-select.js +54 -45
- package/dist/s-no-ssr/index.js +2 -2
- package/dist/s-no-ssr/s-no-ssr.d.ts +5 -33
- package/dist/s-no-ssr/s-no-ssr.js +21 -11
- package/dist/s-overlay-scrollbar/index.js +2 -2
- package/dist/s-overlay-scrollbar/s-overlay-scrollbar.d.ts +10 -1
- package/dist/s-overlay-scrollbar/s-overlay-scrollbar.js +16 -11
- package/dist/s-pagination/index.js +2 -2
- package/dist/s-pagination/s-pagination.d.ts +5 -23
- package/dist/s-pagination/s-pagination.js +17 -11
- package/dist/s-pixel-reveal/index.d.ts +2 -0
- package/dist/s-pixel-reveal/index.js +4 -0
- package/dist/s-pixel-reveal/package.json +5 -0
- package/dist/s-pixel-reveal/s-pixel-reveal.d.ts +27 -0
- package/dist/s-pixel-reveal/s-pixel-reveal.js +156 -0
- package/dist/s-radial-pulse-animate/index.js +2 -2
- package/dist/s-radial-pulse-animate/s-radial-pulse-animate.d.ts +12 -1
- package/dist/s-radial-pulse-animate/s-radial-pulse-animate.js +52 -42
- package/dist/s-rating/index.js +2 -2
- package/dist/s-rating/s-rating.d.ts +7 -1
- package/dist/s-rating/s-rating.js +15 -5
- package/dist/s-review/index.js +2 -2
- package/dist/s-review/s-review.d.ts +25 -1
- package/dist/s-review/s-review.js +104 -97
- package/dist/s-scroll-reveal/index.js +2 -2
- package/dist/s-scroll-reveal/s-scroll-reveal.d.ts +17 -36
- package/dist/s-scroll-reveal/s-scroll-reveal.js +43 -33
- package/dist/s-scroll-to-top/index.js +2 -2
- package/dist/s-scroll-to-top/s-scroll-to-top.d.ts +12 -17
- package/dist/s-scroll-to-top/s-scroll-to-top.js +20 -15
- package/dist/s-select/index.js +2 -2
- package/dist/s-select/s-select.d.ts +3 -22
- package/dist/s-select/s-select.js +76 -72
- package/dist/s-select-list/index.js +2 -2
- package/dist/s-select-list/s-select-list.d.ts +16 -19
- package/dist/s-select-list/s-select-list.js +33 -28
- package/dist/s-skeleton/index.js +2 -2
- package/dist/s-skeleton/s-skeleton.d.ts +6 -22
- package/dist/s-skeleton/s-skeleton.js +28 -18
- package/dist/s-snackbar-message/index.js +4 -4
- package/dist/s-snackbar-message/s-snackbar-message.d.ts +5 -23
- package/dist/s-snackbar-message/s-snackbar-message.js +38 -31
- package/dist/s-spotlight-cursor/index.js +2 -2
- package/dist/s-spotlight-cursor/s-spotlight-cursor.d.ts +10 -44
- package/dist/s-spotlight-cursor/s-spotlight-cursor.js +35 -29
- package/dist/s-stripe/index.d.ts +4 -1
- package/dist/s-stripe/index.js +7 -4
- package/dist/s-stripe/s-stripe-cvc.d.ts +8 -0
- package/dist/s-stripe/s-stripe-cvc.js +15 -0
- package/dist/s-stripe/s-stripe-expiry.d.ts +8 -0
- package/dist/s-stripe/s-stripe-expiry.js +15 -0
- package/dist/s-stripe/s-stripe-number.d.ts +8 -0
- package/dist/s-stripe/s-stripe-number.js +15 -0
- package/dist/s-stripe/s-stripe.d.ts +6 -85
- package/dist/s-stripe/s-stripe.js +24 -27
- package/dist/s-stripe/stripe-input.js +22 -18
- package/dist/s-tabs/index.js +6 -6
- package/dist/s-tabs/s-tab-panel.d.ts +11 -1
- package/dist/s-tabs/s-tab-panel.js +25 -16
- package/dist/s-tabs/s-tab.js +9 -5
- package/dist/s-tabs/s-tabs.d.ts +24 -3
- package/dist/s-tabs/s-tabs.js +34 -25
- package/dist/s-text-editor/index.js +3 -3
- package/dist/s-text-editor/s-text-editor-toolbar.js +91 -76
- package/dist/s-text-editor/s-text-editor.d.ts +13 -11
- package/dist/s-text-editor/s-text-editor.js +44 -30
- package/dist/s-text-field/index.js +2 -2
- package/dist/s-text-field/s-text-field.d.ts +6 -15
- package/dist/s-text-field/s-text-field.js +38 -28
- package/dist/s-text-shimmer/index.js +2 -2
- package/dist/s-text-shimmer/s-text-shimmer.d.ts +10 -1
- package/dist/s-text-shimmer/s-text-shimmer.js +27 -18
- package/dist/s-text-truncation/index.js +2 -2
- package/dist/s-text-truncation/s-text-truncation.d.ts +9 -38
- package/dist/s-text-truncation/s-text-truncation.js +34 -20
- package/dist/s-theme-demo/s-theme-demo.js +238 -223
- package/dist/s-theme-provider/index.js +1 -1
- package/dist/s-theme-provider/s-theme-provider.d.ts +5 -17
- package/dist/s-theme-provider/s-theme-provider.js +44 -34
- package/dist/s-theme-switch/s-theme-switch.js +23 -19
- package/dist/s-tip/index.js +2 -2
- package/dist/s-tip/s-tip.d.ts +5 -22
- package/dist/s-tip/s-tip.js +22 -12
- package/dist/s-two-pane-layout/index.js +10 -2
- package/dist/s-two-pane-layout/s-two-pane-layout.d.ts +7 -1
- package/dist/s-two-pane-layout/s-two-pane-layout.js +58 -48
- package/dist/s-typewriter-text/index.js +2 -2
- package/dist/s-typewriter-text/s-typewriter-text.d.ts +17 -1
- package/dist/s-typewriter-text/s-typewriter-text.js +37 -27
- package/dist/s-zoom-image/index.js +10 -2
- package/dist/s-zoom-image/s-zoom-image.d.ts +10 -42
- package/dist/s-zoom-image/s-zoom-image.js +62 -52
- package/dist/theme/components/alert.d.ts +1440 -1440
- package/dist/theme/components/button.d.ts +2156 -2156
- package/dist/theme/components/chip.d.ts +2 -2
- package/dist/theme/customizations/data-display.js +1 -1
- package/dist/{typographyClasses-C7fhAsUD.js → typographyClasses-DDyl9mok.js} +4 -4
- package/dist/{useMobilePicker-DgxcRrRB.js → useMobilePicker-C1RZZUWr.js} +1 -1
- package/package.json +10 -4
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material';
|
|
3
|
+
/**
|
|
4
|
+
* Props interface for SCountBox component
|
|
5
|
+
*/
|
|
6
|
+
export interface SCountBoxProps {
|
|
7
|
+
/** The numeric value to display */
|
|
8
|
+
digit: number;
|
|
9
|
+
/** The label/title for this time unit */
|
|
10
|
+
title: string;
|
|
11
|
+
/** Size variant for the count box */
|
|
12
|
+
size?: 'small' | 'medium' | 'large';
|
|
13
|
+
/** Color variant for the count box */
|
|
14
|
+
color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
|
|
15
|
+
/** Animation type for value changes */
|
|
16
|
+
animation?: 'none' | 'fade' | 'slide';
|
|
17
|
+
/** Custom styling */
|
|
18
|
+
sx?: SxProps<Theme>;
|
|
19
|
+
/** Custom digit styling */
|
|
20
|
+
digitSx?: SxProps<Theme>;
|
|
21
|
+
/** Custom title styling */
|
|
22
|
+
titleSx?: SxProps<Theme>;
|
|
23
|
+
/** Show separator after this box */
|
|
24
|
+
showSeparator?: boolean;
|
|
25
|
+
/** Custom separator element */
|
|
26
|
+
separator?: React.ReactNode;
|
|
27
|
+
/** Format for displaying the digit (e.g., '00' for zero-padding) */
|
|
28
|
+
digitFormat?: 'default' | 'padded';
|
|
29
|
+
/** Whether this count box is hidden */
|
|
30
|
+
hidden?: boolean;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* An individual count box component that displays a single time unit with optional animations.
|
|
34
|
+
*/
|
|
35
|
+
export declare const SCountBox: {
|
|
36
|
+
({ digit, title, size, color, animation, sx, digitSx, titleSx, showSeparator, separator, digitFormat, hidden, }: SCountBoxProps): import("react/jsx-runtime").JSX.Element | null;
|
|
37
|
+
displayName: string;
|
|
38
|
+
};
|
|
39
|
+
export default SCountBox;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { j as e } from "../jsx-runtime-OVHDjVDe.js";
|
|
2
|
+
import { Typography as l, Fade as b, Slide as z } from "@mui/material";
|
|
3
|
+
import { SFlexBox as m } from "../s-flex-box/s-flex-box.js";
|
|
4
|
+
const r = ({
|
|
5
|
+
digit: t = 0,
|
|
6
|
+
title: p = "",
|
|
7
|
+
size: c = "medium",
|
|
8
|
+
color: o = "inherit",
|
|
9
|
+
animation: u = "none",
|
|
10
|
+
sx: f,
|
|
11
|
+
digitSx: h,
|
|
12
|
+
titleSx: v,
|
|
13
|
+
showSeparator: g = !1,
|
|
14
|
+
separator: x = ":",
|
|
15
|
+
digitFormat: y = "default",
|
|
16
|
+
hidden: S = !1
|
|
17
|
+
}) => {
|
|
18
|
+
if (S) return null;
|
|
19
|
+
const V = (d) => y === "padded" ? d.toString().padStart(2, "0") : d.toString(), a = (() => {
|
|
20
|
+
switch (c) {
|
|
21
|
+
case "small":
|
|
22
|
+
return {
|
|
23
|
+
digit: { fontSize: "1.5rem", lineHeight: 1.2 },
|
|
24
|
+
title: { fontSize: "0.75rem", letterSpacing: "0.05em" }
|
|
25
|
+
};
|
|
26
|
+
case "large":
|
|
27
|
+
return {
|
|
28
|
+
digit: { fontSize: "3.5rem", lineHeight: 1.1 },
|
|
29
|
+
title: { fontSize: "1rem", letterSpacing: "0.1em" }
|
|
30
|
+
};
|
|
31
|
+
default:
|
|
32
|
+
return {
|
|
33
|
+
digit: { fontSize: "2.5rem", lineHeight: 1.15 },
|
|
34
|
+
title: { fontSize: "0.875rem", letterSpacing: "0.08em" }
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
})(), i = V(t), n = /* @__PURE__ */ e.jsx(
|
|
38
|
+
l,
|
|
39
|
+
{
|
|
40
|
+
variant: "h3",
|
|
41
|
+
component: "span",
|
|
42
|
+
sx: {
|
|
43
|
+
fontWeight: 700,
|
|
44
|
+
color: o === "inherit" ? "text.primary" : `${o}.main`,
|
|
45
|
+
width: "70px",
|
|
46
|
+
...a.digit,
|
|
47
|
+
...h
|
|
48
|
+
},
|
|
49
|
+
children: i
|
|
50
|
+
}
|
|
51
|
+
), q = /* @__PURE__ */ e.jsx(
|
|
52
|
+
l,
|
|
53
|
+
{
|
|
54
|
+
component: "span",
|
|
55
|
+
sx: {
|
|
56
|
+
color: "text.secondary",
|
|
57
|
+
fontWeight: 600,
|
|
58
|
+
textTransform: "uppercase",
|
|
59
|
+
display: "block",
|
|
60
|
+
mt: 0.5,
|
|
61
|
+
...a.title,
|
|
62
|
+
...v
|
|
63
|
+
},
|
|
64
|
+
children: p
|
|
65
|
+
}
|
|
66
|
+
), s = /* @__PURE__ */ e.jsxs(
|
|
67
|
+
m,
|
|
68
|
+
{
|
|
69
|
+
flexDirection: "column",
|
|
70
|
+
alignItems: "center",
|
|
71
|
+
sx: {
|
|
72
|
+
textAlign: "center",
|
|
73
|
+
minWidth: "fit-content",
|
|
74
|
+
...f
|
|
75
|
+
},
|
|
76
|
+
children: [
|
|
77
|
+
u === "fade" ? /* @__PURE__ */ e.jsx(b, { in: !0, timeout: 300, children: /* @__PURE__ */ e.jsx("div", { children: n }) }, i) : u === "slide" ? /* @__PURE__ */ e.jsx(z, { in: !0, direction: "up", timeout: 300, children: /* @__PURE__ */ e.jsx("div", { children: n }) }, i) : n,
|
|
78
|
+
q
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
return g ? /* @__PURE__ */ e.jsxs(m, { alignItems: "center", children: [
|
|
83
|
+
s,
|
|
84
|
+
/* @__PURE__ */ e.jsx(
|
|
85
|
+
l,
|
|
86
|
+
{
|
|
87
|
+
variant: "h3",
|
|
88
|
+
sx: {
|
|
89
|
+
color: "text.secondary",
|
|
90
|
+
...a.digit,
|
|
91
|
+
lineHeight: 1,
|
|
92
|
+
alignSelf: "flex-start",
|
|
93
|
+
mt: 0.5
|
|
94
|
+
},
|
|
95
|
+
children: x
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
] }) : s;
|
|
99
|
+
};
|
|
100
|
+
r.displayName = "SCountBox";
|
|
101
|
+
try {
|
|
102
|
+
r.displayName = "SCountBox", r.__docgenInfo = { description: "An individual count box component that displays a single time unit with optional animations.", displayName: "SCountBox", props: { digit: { defaultValue: { value: "0" }, description: "The numeric value to display", name: "digit", required: !1, type: { name: "number" } }, title: { defaultValue: { value: "" }, description: "The label/title for this time unit", name: "title", required: !1, type: { name: "string" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for the count box", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color variant for the count box", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, sx: { defaultValue: null, description: "Custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, digitSx: { defaultValue: null, description: "Custom digit styling", name: "digitSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom title styling", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, showSeparator: { defaultValue: { value: "false" }, description: "Show separator after this box", name: "showSeparator", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying the digit (e.g., '00' for zero-padding)", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, hidden: { defaultValue: { value: "false" }, description: "Whether this count box is hidden", name: "hidden", required: !1, type: { name: "boolean" } } } };
|
|
103
|
+
} catch {
|
|
104
|
+
}
|
|
105
|
+
try {
|
|
106
|
+
scountbox.displayName = "scountbox", scountbox.__docgenInfo = { description: "An individual count box component that displays a single time unit with optional animations.", displayName: "scountbox", props: { digit: { defaultValue: { value: "0" }, description: "The numeric value to display", name: "digit", required: !1, type: { name: "number" } }, title: { defaultValue: { value: "" }, description: "The label/title for this time unit", name: "title", required: !1, type: { name: "string" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for the count box", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color variant for the count box", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, sx: { defaultValue: null, description: "Custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, digitSx: { defaultValue: null, description: "Custom digit styling", name: "digitSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom title styling", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, showSeparator: { defaultValue: { value: "false" }, description: "Show separator after this box", name: "showSeparator", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying the digit (e.g., '00' for zero-padding)", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, hidden: { defaultValue: { value: "false" }, description: "Whether this count box is hidden", name: "hidden", required: !1, type: { name: "boolean" } } } };
|
|
107
|
+
} catch {
|
|
108
|
+
}
|
|
109
|
+
export {
|
|
110
|
+
r as SCountBox,
|
|
111
|
+
r as default
|
|
112
|
+
};
|
|
@@ -1,40 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { SxProps, Theme } from '@mui/material';
|
|
3
3
|
/**
|
|
4
|
-
* Props for
|
|
5
|
-
*/
|
|
6
|
-
export interface SCountBoxProps {
|
|
7
|
-
/** The numeric value to display */
|
|
8
|
-
digit: number;
|
|
9
|
-
/** The label/title for this time unit */
|
|
10
|
-
title: string;
|
|
11
|
-
/** Size variant for the count box */
|
|
12
|
-
size?: 'small' | 'medium' | 'large';
|
|
13
|
-
/** Color variant for the count box */
|
|
14
|
-
color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
|
|
15
|
-
/** Animation type for value changes */
|
|
16
|
-
animation?: 'none' | 'fade' | 'slide';
|
|
17
|
-
/** Custom styling */
|
|
18
|
-
sx?: SxProps<Theme>;
|
|
19
|
-
/** Custom digit styling */
|
|
20
|
-
digitSx?: SxProps<Theme>;
|
|
21
|
-
/** Custom title styling */
|
|
22
|
-
titleSx?: SxProps<Theme>;
|
|
23
|
-
/** Show separator after this box */
|
|
24
|
-
showSeparator?: boolean;
|
|
25
|
-
/** Custom separator element */
|
|
26
|
-
separator?: React.ReactNode;
|
|
27
|
-
/** Format for displaying the digit (e.g., '00' for zero-padding) */
|
|
28
|
-
digitFormat?: 'default' | 'padded';
|
|
29
|
-
/** Whether this count box is hidden */
|
|
30
|
-
hidden?: boolean;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Individual count box component that displays a single time unit
|
|
34
|
-
*/
|
|
35
|
-
export declare const SCountBox: ({ digit, title, size, color, animation, sx, digitSx, titleSx, showSeparator, separator, digitFormat, hidden, }: SCountBoxProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
36
|
-
/**
|
|
37
|
-
* Props for the main countdown component
|
|
4
|
+
* Props interface for SCountdown component
|
|
38
5
|
*/
|
|
39
6
|
export interface SCountDownProps {
|
|
40
7
|
/** Target date timestamp in milliseconds (from Date.getTime()) */
|
|
@@ -98,21 +65,10 @@ export interface SCountDownProps {
|
|
|
98
65
|
};
|
|
99
66
|
}
|
|
100
67
|
/**
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
* Features:
|
|
104
|
-
* - Multiple size variants and color themes
|
|
105
|
-
* - Flexible layout options (horizontal, vertical, grid)
|
|
106
|
-
* - Animation support for value changes
|
|
107
|
-
* - Customizable time units and labels
|
|
108
|
-
* - Auto-hide zero units option
|
|
109
|
-
* - Accessibility support with ARIA labels
|
|
110
|
-
* - Responsive design capabilities
|
|
111
|
-
* - Event callbacks for interaction
|
|
112
|
-
* - Pause/resume functionality
|
|
113
|
-
*
|
|
114
|
-
* @param props - SCountDownProps
|
|
115
|
-
* @returns JSX.Element - Countdown timer component
|
|
68
|
+
* A comprehensive countdown timer component with extensive customization options, animations, and accessibility features.
|
|
116
69
|
*/
|
|
117
|
-
declare const SCountdown:
|
|
70
|
+
export declare const SCountdown: {
|
|
71
|
+
({ 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;
|
|
72
|
+
displayName: string;
|
|
73
|
+
};
|
|
118
74
|
export default SCountdown;
|
|
@@ -1,191 +1,97 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { Typography as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
size:
|
|
9
|
-
color:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
separator: j = ":",
|
|
16
|
-
digitFormat: w = "default",
|
|
17
|
-
hidden: k = !1
|
|
18
|
-
}) => {
|
|
19
|
-
if (k) return null;
|
|
20
|
-
const v = (t) => w === "padded" ? t.toString().padStart(2, "0") : t.toString(), s = (() => {
|
|
21
|
-
switch (m) {
|
|
22
|
-
case "small":
|
|
23
|
-
return {
|
|
24
|
-
digit: { fontSize: "1.5rem", lineHeight: 1.2 },
|
|
25
|
-
title: { fontSize: "0.75rem", letterSpacing: "0.05em" }
|
|
26
|
-
};
|
|
27
|
-
case "large":
|
|
28
|
-
return {
|
|
29
|
-
digit: { fontSize: "3.5rem", lineHeight: 1.1 },
|
|
30
|
-
title: { fontSize: "1rem", letterSpacing: "0.1em" }
|
|
31
|
-
};
|
|
32
|
-
default:
|
|
33
|
-
return {
|
|
34
|
-
digit: { fontSize: "2.5rem", lineHeight: 1.15 },
|
|
35
|
-
title: { fontSize: "0.875rem", letterSpacing: "0.08em" }
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
})(), l = v(y), o = /* @__PURE__ */ e.jsx(
|
|
39
|
-
x,
|
|
40
|
-
{
|
|
41
|
-
variant: "h3",
|
|
42
|
-
component: "span",
|
|
43
|
-
sx: {
|
|
44
|
-
fontWeight: 700,
|
|
45
|
-
color: u === "inherit" ? "text.primary" : `${u}.main`,
|
|
46
|
-
width: "70px",
|
|
47
|
-
...s.digit,
|
|
48
|
-
...S
|
|
49
|
-
},
|
|
50
|
-
children: l
|
|
51
|
-
}
|
|
52
|
-
), $ = /* @__PURE__ */ e.jsx(
|
|
53
|
-
x,
|
|
54
|
-
{
|
|
55
|
-
component: "span",
|
|
56
|
-
sx: {
|
|
57
|
-
color: "text.secondary",
|
|
58
|
-
fontWeight: 600,
|
|
59
|
-
textTransform: "uppercase",
|
|
60
|
-
display: "block",
|
|
61
|
-
mt: 0.5,
|
|
62
|
-
...s.title,
|
|
63
|
-
...f
|
|
64
|
-
},
|
|
65
|
-
children: i
|
|
66
|
-
}
|
|
67
|
-
), n = /* @__PURE__ */ e.jsxs(
|
|
68
|
-
p,
|
|
69
|
-
{
|
|
70
|
-
flexDirection: "column",
|
|
71
|
-
alignItems: "center",
|
|
72
|
-
sx: {
|
|
73
|
-
textAlign: "center",
|
|
74
|
-
minWidth: "fit-content",
|
|
75
|
-
...g
|
|
76
|
-
},
|
|
77
|
-
children: [
|
|
78
|
-
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,
|
|
79
|
-
$
|
|
80
|
-
]
|
|
81
|
-
}
|
|
82
|
-
);
|
|
83
|
-
return r ? /* @__PURE__ */ e.jsxs(p, { alignItems: "center", children: [
|
|
84
|
-
n,
|
|
85
|
-
/* @__PURE__ */ e.jsx(
|
|
86
|
-
x,
|
|
87
|
-
{
|
|
88
|
-
variant: "h3",
|
|
89
|
-
sx: {
|
|
90
|
-
color: "text.secondary",
|
|
91
|
-
...s.digit,
|
|
92
|
-
lineHeight: 1,
|
|
93
|
-
alignSelf: "flex-start",
|
|
94
|
-
mt: 0.5
|
|
95
|
-
},
|
|
96
|
-
children: j
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
] }) : n;
|
|
100
|
-
}, V = ({
|
|
101
|
-
expireDate: y,
|
|
102
|
-
size: i = "medium",
|
|
103
|
-
color: m = "inherit",
|
|
104
|
-
layout: u = "horizontal",
|
|
105
|
-
animation: h = "none",
|
|
106
|
-
showSeparators: g = !1,
|
|
107
|
-
separator: S = ":",
|
|
108
|
-
units: f = {
|
|
1
|
+
import { j as u } from "../jsx-runtime-OVHDjVDe.js";
|
|
2
|
+
import { Typography as R } from "@mui/material";
|
|
3
|
+
import W from "../hooks/use-count-down.js";
|
|
4
|
+
import { SFlexBox as w } from "../s-flex-box/s-flex-box.js";
|
|
5
|
+
import { SCountBox as I } from "./s-count-box.js";
|
|
6
|
+
const p = ({
|
|
7
|
+
expireDate: o,
|
|
8
|
+
size: e = "medium",
|
|
9
|
+
color: s = "inherit",
|
|
10
|
+
layout: x = "horizontal",
|
|
11
|
+
animation: S = "none",
|
|
12
|
+
showSeparators: f = !1,
|
|
13
|
+
separator: q = ":",
|
|
14
|
+
units: h = {
|
|
109
15
|
days: !0,
|
|
110
16
|
hours: !0,
|
|
111
17
|
minutes: !0,
|
|
112
18
|
seconds: !0
|
|
113
19
|
},
|
|
114
|
-
labels:
|
|
20
|
+
labels: i = {
|
|
115
21
|
days: "DAYS",
|
|
116
22
|
hours: "HOURS",
|
|
117
23
|
minutes: "MINS",
|
|
118
24
|
seconds: "SECS"
|
|
119
25
|
},
|
|
120
|
-
digitFormat:
|
|
121
|
-
onComplete:
|
|
26
|
+
digitFormat: V = "default",
|
|
27
|
+
onComplete: C,
|
|
122
28
|
onTick: k,
|
|
123
|
-
onStart:
|
|
124
|
-
completedText:
|
|
125
|
-
autoHideZeroUnits:
|
|
126
|
-
sx:
|
|
127
|
-
"aria-label":
|
|
128
|
-
paused:
|
|
29
|
+
onStart: T,
|
|
30
|
+
completedText: r = "Time is up!",
|
|
31
|
+
autoHideZeroUnits: y = !1,
|
|
32
|
+
sx: v,
|
|
33
|
+
"aria-label": g = "Countdown timer",
|
|
34
|
+
paused: _ = !1,
|
|
129
35
|
responsive: n
|
|
130
36
|
}) => {
|
|
131
|
-
const { timeLeft:
|
|
132
|
-
expireDate:
|
|
133
|
-
onComplete:
|
|
37
|
+
const { timeLeft: a, isExpired: z } = W({
|
|
38
|
+
expireDate: o,
|
|
39
|
+
onComplete: C,
|
|
134
40
|
onTick: k,
|
|
135
|
-
onStart:
|
|
136
|
-
paused:
|
|
41
|
+
onStart: T,
|
|
42
|
+
paused: _
|
|
137
43
|
});
|
|
138
|
-
if (
|
|
139
|
-
return /* @__PURE__ */
|
|
140
|
-
|
|
44
|
+
if (z && r)
|
|
45
|
+
return /* @__PURE__ */ u.jsx(
|
|
46
|
+
w,
|
|
141
47
|
{
|
|
142
48
|
justifyContent: "center",
|
|
143
49
|
alignItems: "center",
|
|
144
|
-
sx: { textAlign: "center", ...
|
|
50
|
+
sx: { textAlign: "center", ...v },
|
|
145
51
|
role: "timer",
|
|
146
|
-
"aria-label": `${
|
|
147
|
-
children: typeof
|
|
148
|
-
|
|
52
|
+
"aria-label": `${g} - completed`,
|
|
53
|
+
children: typeof r == "string" ? /* @__PURE__ */ u.jsx(
|
|
54
|
+
R,
|
|
149
55
|
{
|
|
150
|
-
variant:
|
|
151
|
-
color:
|
|
56
|
+
variant: e === "large" ? "h4" : e === "small" ? "h6" : "h5",
|
|
57
|
+
color: s === "inherit" ? "text.primary" : `${s}.main`,
|
|
152
58
|
sx: { fontWeight: 600 },
|
|
153
|
-
children:
|
|
59
|
+
children: r
|
|
154
60
|
}
|
|
155
|
-
) :
|
|
61
|
+
) : r
|
|
156
62
|
}
|
|
157
63
|
);
|
|
158
|
-
const
|
|
159
|
-
{ key: "days", value:
|
|
160
|
-
{ key: "hours", value:
|
|
161
|
-
{ key: "minutes", value:
|
|
162
|
-
{ key: "seconds", value:
|
|
64
|
+
const d = [], m = [
|
|
65
|
+
{ key: "days", value: a.days, label: i.days },
|
|
66
|
+
{ key: "hours", value: a.hours, label: i.hours },
|
|
67
|
+
{ key: "minutes", value: a.minutes, label: i.minutes },
|
|
68
|
+
{ key: "seconds", value: a.seconds, label: i.seconds }
|
|
163
69
|
];
|
|
164
|
-
|
|
165
|
-
if (
|
|
166
|
-
const
|
|
167
|
-
(
|
|
70
|
+
m.forEach((t, b) => {
|
|
71
|
+
if (h[t.key] && (!y || t.value > 0 || t.key === "seconds")) {
|
|
72
|
+
const D = b === m.length - 1, N = f && !D && m.slice(b + 1).some(
|
|
73
|
+
(c) => h[c.key] && (!y || c.value > 0 || c.key === "seconds")
|
|
168
74
|
);
|
|
169
|
-
|
|
170
|
-
/* @__PURE__ */
|
|
171
|
-
|
|
75
|
+
d.push(
|
|
76
|
+
/* @__PURE__ */ u.jsx(
|
|
77
|
+
I,
|
|
172
78
|
{
|
|
173
|
-
digit:
|
|
174
|
-
title:
|
|
175
|
-
size:
|
|
176
|
-
color:
|
|
177
|
-
animation:
|
|
178
|
-
digitFormat:
|
|
179
|
-
showSeparator:
|
|
180
|
-
separator:
|
|
79
|
+
digit: t.value,
|
|
80
|
+
title: t.label || "",
|
|
81
|
+
size: e,
|
|
82
|
+
color: s,
|
|
83
|
+
animation: S,
|
|
84
|
+
digitFormat: V,
|
|
85
|
+
showSeparator: N,
|
|
86
|
+
separator: q
|
|
181
87
|
},
|
|
182
|
-
|
|
88
|
+
t.key
|
|
183
89
|
)
|
|
184
90
|
);
|
|
185
91
|
}
|
|
186
92
|
});
|
|
187
|
-
const
|
|
188
|
-
switch (
|
|
93
|
+
const A = () => {
|
|
94
|
+
switch (x) {
|
|
189
95
|
case "vertical":
|
|
190
96
|
return {
|
|
191
97
|
flexDirection: "column",
|
|
@@ -195,54 +101,83 @@ const T = ({
|
|
|
195
101
|
case "grid":
|
|
196
102
|
return {
|
|
197
103
|
display: "grid",
|
|
198
|
-
gridTemplateColumns: `repeat(${
|
|
104
|
+
gridTemplateColumns: `repeat(${d.length}, 1fr)`,
|
|
199
105
|
gap: 2,
|
|
200
106
|
justifyItems: "center"
|
|
201
107
|
};
|
|
202
108
|
default:
|
|
203
109
|
return {
|
|
204
110
|
flexDirection: "row",
|
|
205
|
-
gap:
|
|
111
|
+
gap: f ? 0 : 2,
|
|
206
112
|
alignItems: "center",
|
|
207
113
|
justifyContent: "center",
|
|
208
114
|
flexWrap: "wrap"
|
|
209
115
|
};
|
|
210
116
|
}
|
|
211
|
-
},
|
|
212
|
-
xs: n.xs ||
|
|
213
|
-
sm: n.sm ||
|
|
214
|
-
md: n.md ||
|
|
215
|
-
lg: n.lg ||
|
|
216
|
-
xl: n.xl ||
|
|
117
|
+
}, l = n ? {
|
|
118
|
+
xs: n.xs || e,
|
|
119
|
+
sm: n.sm || e,
|
|
120
|
+
md: n.md || e,
|
|
121
|
+
lg: n.lg || e,
|
|
122
|
+
xl: n.xl || e
|
|
217
123
|
} : void 0;
|
|
218
|
-
return /* @__PURE__ */
|
|
219
|
-
|
|
124
|
+
return /* @__PURE__ */ u.jsx(
|
|
125
|
+
w,
|
|
220
126
|
{
|
|
221
127
|
sx: {
|
|
222
128
|
width: "fit-content",
|
|
223
|
-
...
|
|
224
|
-
...
|
|
225
|
-
...
|
|
129
|
+
...A(),
|
|
130
|
+
...v,
|
|
131
|
+
...l && {
|
|
226
132
|
// Apply responsive sizing if provided
|
|
227
133
|
"@media (max-width: 600px)": {
|
|
228
134
|
"& .MuiTypography-h3": {
|
|
229
|
-
fontSize:
|
|
135
|
+
fontSize: l.xs === "small" ? "1.5rem" : l.xs === "large" ? "3.5rem" : "2.5rem"
|
|
230
136
|
}
|
|
231
137
|
},
|
|
232
138
|
"@media (min-width: 600px) and (max-width: 960px)": {
|
|
233
139
|
"& .MuiTypography-h3": {
|
|
234
|
-
fontSize:
|
|
140
|
+
fontSize: l.sm === "small" ? "1.5rem" : l.sm === "large" ? "3.5rem" : "2.5rem"
|
|
235
141
|
}
|
|
236
142
|
}
|
|
237
143
|
}
|
|
238
144
|
},
|
|
239
145
|
role: "timer",
|
|
240
|
-
"aria-label": `${
|
|
241
|
-
children:
|
|
146
|
+
"aria-label": `${g} - ${a.days} days, ${a.hours} hours, ${a.minutes} minutes, ${a.seconds} seconds remaining`,
|
|
147
|
+
children: d
|
|
242
148
|
}
|
|
243
149
|
);
|
|
244
150
|
};
|
|
151
|
+
p.displayName = "SCountdown";
|
|
152
|
+
try {
|
|
153
|
+
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: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { 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: `{
|
|
154
|
+
days: true,
|
|
155
|
+
hours: true,
|
|
156
|
+
minutes: true,
|
|
157
|
+
seconds: true,
|
|
158
|
+
}` }, 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: `{
|
|
159
|
+
days: 'DAYS',
|
|
160
|
+
hours: 'HOURS',
|
|
161
|
+
minutes: 'MINS',
|
|
162
|
+
seconds: 'SECS',
|
|
163
|
+
}` }, 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' } } } };
|
|
164
|
+
} catch {
|
|
165
|
+
}
|
|
166
|
+
try {
|
|
167
|
+
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: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { 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: `{
|
|
168
|
+
days: true,
|
|
169
|
+
hours: true,
|
|
170
|
+
minutes: true,
|
|
171
|
+
seconds: true,
|
|
172
|
+
}` }, 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: `{
|
|
173
|
+
days: 'DAYS',
|
|
174
|
+
hours: 'HOURS',
|
|
175
|
+
minutes: 'MINS',
|
|
176
|
+
seconds: 'SECS',
|
|
177
|
+
}` }, 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' } } } };
|
|
178
|
+
} catch {
|
|
179
|
+
}
|
|
245
180
|
export {
|
|
246
|
-
|
|
247
|
-
|
|
181
|
+
p as SCountdown,
|
|
182
|
+
p as default
|
|
248
183
|
};
|