server-time-timer-yolabs-ui 1.0.10 → 1.0.11

package/dist/hooks/useServerTimer.d.ts

@@ -1,12 +1,10 @@
-export declare function useServerTimer({ serverNow, endTime, onEnd }: {
-    serverNow: string;
-    endTime: string;
-    onEnd?: () => void;
-}): {
+type TimeState = {
+    totalMs: number;
     days: number;
     hours: number;
     minutes: number;
     seconds: number;
-    totalMs: number;
     progress: number;
 };
+export declare const useServerTimer: (endTime: string, onEnd?: () => void) => TimeState;
+export {};

package/dist/hooks/useServerTimer.js

@@ -1,34 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useServerTimer = useServerTimer;
+exports.useServerTimer = void 0;
 const react_1 = require("react");
 const server_time_timer_yolabs_1 = require("server-time-timer-yolabs");
-function useServerTimer({ serverNow, endTime, onEnd }) {
+const useServerTimer = (endTime, onEnd) => {
     const [time, setTime] = (0, react_1.useState)({
+        totalMs: 0,
         days: 0,
         hours: 0,
         minutes: 0,
         seconds: 0,
-        totalMs: 0,
-        progress: 100
+        progress: 100,
     });
     (0, react_1.useEffect)(() => {
-        const timer = (0, server_time_timer_yolabs_1.createServerTimer)({ serverNow, endTime });
-        timer.onTick((t) => {
-            const totalDuration = new Date(endTime).getTime() - new Date(serverNow).getTime();
-            setTime({
-                days: t.days,
-                hours: t.hours,
-                minutes: t.minutes,
-                seconds: t.seconds,
-                totalMs: t.totalMs,
-                progress: Math.max(0, (t.totalMs / totalDuration) * 100)
-            });
-            if (t.totalMs <= 0 && onEnd)
-                onEnd();
+        const timer = (0, server_time_timer_yolabs_1.createServerTimer)({
+            endTime,
+            onTick: setTime,
+            onEnd,
         });
         timer.start();
         return () => timer.stop();
-    }, [serverNow, endTime, onEnd]);
+    }, [endTime, onEnd]);
     return time;
-}
+};
+exports.useServerTimer = useServerTimer;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { ServerTimerUI } from './ui/ServerTimerUI';
-export type { ServerTimerUIProps } from './ui/types';
+export * from './ui/ServerTimerUI';
+export * from './ui/types';

package/dist/index.js

@@ -1,5 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerTimerUI = void 0;
-var ServerTimerUI_1 = require("./ui/ServerTimerUI");
-Object.defineProperty(exports, "ServerTimerUI", { enumerable: true, get: function () { return ServerTimerUI_1.ServerTimerUI; } });
+__exportStar(require("./ui/ServerTimerUI"), exports);
+__exportStar(require("./ui/types"), exports);

package/dist/ui/ServerTimerUI.js

@@ -9,23 +9,14 @@ const TimerContainer_1 = __importDefault(require("./components/TimerContainer"))
 const TimerUnit_1 = __importDefault(require("./components/TimerUnit"));
 const TimerProgress_1 = __importDefault(require("./components/TimerProgress"));
 const useServerTimer_1 = require("../hooks/useServerTimer");
-const light_1 = require("./themes/light");
-const dark_1 = require("./themes/dark");
-const brand_1 = require("./themes/brand");
-const ServerTimerUI = ({ serverNow, endTime, size = 'md', layout = 'horizontal', theme = 'light', showProgress = true, customColors, showUnits = { days: true, hours: true, minutes: true, seconds: true }, onEnd }) => {
-    var _a, _b, _c, _d;
-    const time = (0, useServerTimer_1.useServerTimer)({ serverNow, endTime, onEnd });
-    // 1️⃣ Base theme (ALWAYS defined)
-    const baseTheme = theme === 'dark' ? dark_1.dark :
-        theme === 'brand' ? brand_1.brand :
-            light_1.light;
-    // 2️⃣ Final resolved colors (NO undefined)
-    const colors = {
-        background: (_a = customColors === null || customColors === void 0 ? void 0 : customColors.background) !== null && _a !== void 0 ? _a : baseTheme.background,
-        text: (_b = customColors === null || customColors === void 0 ? void 0 : customColors.text) !== null && _b !== void 0 ? _b : baseTheme.text,
-        unitBackground: (_c = customColors === null || customColors === void 0 ? void 0 : customColors.unitBackground) !== null && _c !== void 0 ? _c : baseTheme.unitBackground,
-        progress: (_d = customColors === null || customColors === void 0 ? void 0 : customColors.progress) !== null && _d !== void 0 ? _d : baseTheme.progress
+const ServerTimerUI = ({ endTime, size = 'md', layout = 'horizontal', theme = 'light', showProgress = true, customColors = {}, showUnits = { days: true, hours: true, minutes: true, seconds: true }, numberSize = 'md', onEnd, className, }) => {
+    const time = (0, useServerTimer_1.useServerTimer)(endTime, onEnd);
+    const themeColors = {
+        light: { background: '#ffffff', text: '#323130', unitBackground: '#f3f2f1', progress: '#0078d4' },
+        dark: { background: '#323130', text: '#ffffff', unitBackground: '#505050', progress: '#0078d4' },
+        brand: { background: '#fef9f3', text: '#323130', unitBackground: '#fffbdd', progress: '#0078d4' },
     };
-    return ((0, jsx_runtime_1.jsxs)(TimerContainer_1.default, { size: size, layout: layout, background: colors.background, color: colors.text, children: [showUnits.days && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Days", value: time.days, size: size, layout: layout, background: colors.unitBackground, color: colors.text })), showUnits.hours && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Hours", value: time.hours, size: size, layout: layout, background: colors.unitBackground, color: colors.text })), showUnits.minutes && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Minutes", value: time.minutes, size: size, layout: layout, background: colors.unitBackground, color: colors.text })), showUnits.seconds && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Seconds", value: time.seconds, size: size, layout: layout, background: colors.unitBackground, color: colors.text })), showProgress && ((0, jsx_runtime_1.jsx)(TimerProgress_1.default, { value: time.progress, color: colors.progress }))] }));
+    const colors = Object.assign(Object.assign({}, themeColors[theme]), customColors);
+    return ((0, jsx_runtime_1.jsxs)(TimerContainer_1.default, { size: size, layout: layout, background: colors.background, color: colors.text, className: className, children: [showUnits.days && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Days", value: time.days, size: size, background: colors.unitBackground, color: colors.text, numberSize: numberSize }), showUnits.hours && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Hours", value: time.hours, size: size, background: colors.unitBackground, color: colors.text, numberSize: numberSize }), showUnits.minutes && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Minutes", value: time.minutes, size: size, background: colors.unitBackground, color: colors.text, numberSize: numberSize }), showUnits.seconds && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Seconds", value: time.seconds, size: size, background: colors.unitBackground, color: colors.text, numberSize: numberSize }), showProgress && (0, jsx_runtime_1.jsx)(TimerProgress_1.default, { value: time.progress, color: colors.progress })] }));
 };
 exports.ServerTimerUI = ServerTimerUI;

package/dist/ui/components/TimerContainer.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { TimerLayout, TimerSize } from '../types';
-interface Props {
+import { TimerSize } from '../types';
+interface TimerContainerProps {
     children: React.ReactNode;
-    size: TimerSize;
-    layout: TimerLayout;
-    background: string;
-    color: string;
+    size?: TimerSize;
+    className?: string;
+    background?: string;
+    color?: string;
+    layout?: 'horizontal' | 'vertical' | 'compact';
 }
-export default function TimerContainer({ children, size, layout, background, color }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const TimerContainer: React.FC<TimerContainerProps>;
+export default TimerContainer;

package/dist/ui/components/TimerContainer.js

@@ -1,26 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = TimerContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const paddingMap = {
-    sm: '6px 10px',
-    md: '10px 16px',
-    lg: '16px 22px'
+    sm: '0.5rem 1rem',
+    md: '1rem 1.5rem',
+    lg: '1.5rem 2rem',
+};
+const gapMap = {
+    horizontal: '0.625rem',
+    vertical: '0.625rem',
+    compact: '0.25rem',
 };
-function TimerContainer({ children, size, layout, background, color }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            display: 'flex',
-            flexDirection: layout === 'vertical' ? 'column' : 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: layout === 'compact' ? '4px' : '10px',
-            padding: paddingMap[size],
-            background,
-            color,
-            border: '1px solid #e1e1e1',
-            borderRadius: 4,
-            fontFamily: `'Segoe UI', system-ui`,
-            flexWrap: 'wrap',
-            maxWidth: '100%'
-        }, children: children }));
-}
+const TimerContainer = ({ children, size = 'md', className = '', background = '#ffffff', color = '#323130', layout = 'horizontal', }) => {
+    const getFlexStyles = () => {
+        switch (layout) {
+            case 'vertical':
+                return {
+                    flexDirection: 'column',
+                    flexWrap: 'nowrap',
+                };
+            case 'compact':
+                return {
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                };
+            default: // horizontal
+                return {
+                    flexDirection: 'row',
+                    flexWrap: 'nowrap',
+                };
+        }
+    };
+    const flexStyles = getFlexStyles();
+    return ((0, jsx_runtime_1.jsx)("div", { className: `timer-container ${className}`, style: Object.assign(Object.assign({ display: 'flex' }, flexStyles), { alignItems: 'center', justifyContent: 'center', gap: gapMap[layout], backgroundColor: background, color: color, border: '1px solid #e1e1e1', borderRadius: '4px', padding: paddingMap[size], fontFamily: `'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif`, fontSize: '1rem', overflow: 'hidden', transition: 'all 0.2s ease', boxSizing: 'border-box', minWidth: layout === 'compact' ? 'fit-content' : undefined }), role: "timer", "aria-label": "timer container", children: children }));
+};
+exports.default = TimerContainer;

package/dist/ui/components/TimerProgress.d.ts

@@ -1,4 +1,27 @@
-export default function TimerProgress({ value, color }: {
+import React from 'react';
+interface TimerProgressProps {
+    /** Current progress value (0-100) */
     value: number;
-    color: string;
-}): import("react/jsx-runtime").JSX.Element;
+    /** Color of the progress bar */
+    color?: string;
+    /** Height of the progress bar */
+    height?: number | string;
+    /** Background color of the track */
+    trackColor?: string;
+    /** Border radius of the progress bar */
+    borderRadius?: number | string;
+    /** Whether to show an animated glow effect */
+    animated?: boolean;
+    /** Animation duration for value changes (ms) */
+    animationDuration?: number;
+    /** Optional label text */
+    label?: string;
+    /** Show percentage text */
+    showPercentage?: boolean;
+    /** Custom CSS class */
+    className?: string;
+    /** Callback when progress reaches 100% */
+    onComplete?: () => void;
+}
+declare const TimerProgress: React.FC<TimerProgressProps>;
+export default TimerProgress;

package/dist/ui/components/TimerProgress.js

@@ -1,12 +1,91 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = TimerProgress;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function TimerProgress({ value, color }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 4, background: '#e1e1e1', borderRadius: 2 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                width: `${value}%`,
-                height: '100%',
-                background: color,
-                transition: 'width 0.3s linear'
-            } }) }));
-}
+const react_1 = require("react");
+const TimerProgress = ({ value, color = '#0078d4', height = 8, trackColor = '#e1e1e1', borderRadius = 4, animated = true, animationDuration = 300, label, showPercentage = false, className = '', onComplete, }) => {
+    const progressRef = (0, react_1.useRef)(null);
+    const previousValueRef = (0, react_1.useRef)(value);
+    const isCompleteRef = (0, react_1.useRef)(false);
+    // Handle completion callback
+    (0, react_1.useEffect)(() => {
+        if (value >= 100 && !isCompleteRef.current && onComplete) {
+            isCompleteRef.current = true;
+            onComplete();
+        }
+        else if (value < 100) {
+            isCompleteRef.current = false;
+        }
+    }, [value, onComplete]);
+    // Handle animation
+    (0, react_1.useEffect)(() => {
+        if (progressRef.current && animated) {
+            progressRef.current.style.transition = `width ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
+        }
+    }, [animated, animationDuration]);
+    // Calculate percentage for display
+    const displayValue = Math.max(0, Math.min(100, value));
+    const percentageText = `${Math.round(displayValue)}%`;
+    // Determine if we should show label
+    const shouldShowLabel = label || showPercentage;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `timer-progress ${className}`, style: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '4px',
+        }, role: "progressbar", "aria-valuenow": displayValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label || "Progress", children: [shouldShowLabel && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    fontSize: '0.875rem',
+                    color: '#666',
+                }, children: [label && (0, jsx_runtime_1.jsx)("span", { children: label }), showPercentage && (0, jsx_runtime_1.jsx)("span", { children: percentageText })] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    width: '100%',
+                    height: typeof height === 'number' ? `${height}px` : height,
+                    backgroundColor: trackColor,
+                    borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius,
+                    overflow: 'hidden',
+                    position: 'relative',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { ref: progressRef, style: {
+                            width: `${displayValue}%`,
+                            height: '100%',
+                            backgroundColor: color,
+                            borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius,
+                            transition: animated ? undefined : 'none',
+                        } }), animated && value > 0 && value < 100 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            background: `linear-gradient(90deg, 
+              transparent 0%, 
+              rgba(255, 255, 255, 0.3) 50%, 
+              transparent 100%)`,
+                            backgroundSize: '200% 100%',
+                            animation: 'shimmer 2s infinite',
+                            opacity: 0.6,
+                            pointerEvents: 'none',
+                        } })), value >= 100 && animated && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            backgroundColor: color,
+                            borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius,
+                            animation: 'pulse 1.5s infinite',
+                            opacity: 0.5,
+                            pointerEvents: 'none',
+                        } }))] }), (0, jsx_runtime_1.jsx)("style", { children: `
+        @keyframes shimmer {
+          0% { transform: translateX(-100%); }
+          100% { transform: translateX(100%); }
+        }
+        
+        @keyframes pulse {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 0.8; }
+        }
+      ` })] }));
+};
+exports.default = TimerProgress;

package/dist/ui/components/TimerUnit.d.ts

@@ -1,11 +1,12 @@
-import { TimerLayout, TimerSize } from '../types';
-interface Props {
+import React from 'react';
+import { TimerSize } from '../types';
+interface TimerUnitProps {
     label: string;
     value: number;
-    size: TimerSize;
-    layout: TimerLayout;
-    background: string;
-    color: string;
+    size?: TimerSize;
+    background?: string;
+    color?: string;
+    numberSize?: 'sm' | 'md' | 'lg';
 }
-export default function TimerUnit({ label, value, size, layout, background, color }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const TimerUnit: React.FC<TimerUnitProps>;
+export default TimerUnit;

package/dist/ui/components/TimerUnit.js

@@ -1,36 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = TimerUnit;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const numberSizeMap = {
-    sm: '0.9rem',
-    md: '1.2rem',
-    lg: '1.6rem'
-};
-const minWidthMap = {
-    sm: '2ch',
-    md: '2.5ch',
-    lg: '3ch'
-};
-function TimerUnit({ label, value, size, layout, background, color }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-label": label, style: {
-            display: 'flex',
-            flexDirection: layout === 'compact' ? 'row' : 'column',
-            alignItems: 'center',
-            padding: '6px 8px',
-            background,
-            borderRadius: 4,
-            minWidth: layout === 'compact' ? 'auto' : '64px'
-        }, children: [(0, jsx_runtime_1.jsx)("span", { "aria-live": "polite", "aria-atomic": "true", style: {
-                    fontSize: numberSizeMap[size],
-                    fontWeight: 600,
-                    fontFamily: `'Segoe UI Mono', Consolas, monospace`,
-                    minWidth: minWidthMap[size],
-                    textAlign: 'center',
-                    transition: 'transform 0.15s ease, opacity 0.15s ease'
-                }, children: value.toString().padStart(2, '0') }), layout !== 'compact' && ((0, jsx_runtime_1.jsx)("span", { style: {
-                    fontSize: '0.7rem',
-                    opacity: 0.75,
-                    marginTop: 2
-                }, children: label }))] }));
-}
+const fontSizeMap = { sm: '0.9rem', md: '1.2rem', lg: '1.5rem' };
+const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', color = '#323130', numberSize = 'md', }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+        backgroundColor: background,
+        color,
+        padding: '0.5rem',
+        borderRadius: '4px',
+        textAlign: 'center',
+        minWidth: '50px',
+    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: fontSizeMap[numberSize], fontWeight: 'bold' }, children: value.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.8rem' }, children: label })] }));
+exports.default = TimerUnit;

package/dist/ui/types/index.d.ts

@@ -14,7 +14,6 @@ export interface ShowUnits {
     seconds?: boolean;
 }
 export interface ServerTimerUIProps {
-    serverNow: string;
     endTime: string;
     size?: TimerSize;
     layout?: TimerLayout;
@@ -23,4 +22,6 @@ export interface ServerTimerUIProps {
     customColors?: CustomColors;
     showUnits?: ShowUnits;
     onEnd?: () => void;
+    className?: string;
+    numberSize?: 'sm' | 'md' | 'lg';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server-time-timer-yolabs-ui",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "FluentUI/SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
   "license": "yolabs",
   "author": "Yonas <+251930327375>",
   "dependencies": {
-    "server-time-timer-yolabs": "^1.0.2"
+    "server-time-timer-yolabs": "^1.0.4"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",