server-time-timer-yolabs-ui 1.0.5 → 1.0.7

package/dist/hooks/useServerTimer.d.ts

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

package/dist/hooks/useServerTimer.js

@@ -1,34 +1,38 @@
 "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 = ({ serverNow, 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)
+        const start = new Date(serverNow).getTime();
+        const end = new Date(endTime).getTime();
+        const totalDuration = end - start;
+        const update = () => {
+            const now = Date.now();
+            const totalMs = end - now;
+            const clampedMs = Math.max(totalMs, 0);
+            const remaining = clampedMs;
+            const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
+            const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
+            const minutes = Math.floor((remaining / (1000 * 60)) % 60);
+            const seconds = Math.floor((remaining / 1000) % 60);
+            const progress = Math.max((remaining / totalDuration) * 100, 0);
+            setTime({ totalMs: clampedMs, days, hours, minutes, seconds, progress });
+            if (clampedMs <= 0 && onEnd)
                 onEnd();
-        });
-        timer.start();
-        return () => timer.stop();
+        };
+        update();
+        const interval = setInterval(update, 1000);
+        return () => clearInterval(interval);
     }, [serverNow, endTime, onEnd]);
     return time;
-}
+};
+exports.useServerTimer = useServerTimer;

package/dist/ui/ServerTimerUI.js

@@ -9,8 +9,23 @@ 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 ServerTimerUI = ({ serverNow, endTime, size = 'md', theme = 'light', layout = 'horizontal', showProgress = true, customColors, showUnits = { days: true, hours: true, minutes: true, seconds: true }, onEnd }) => {
+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 });
-    return ((0, jsx_runtime_1.jsxs)(TimerContainer_1.default, { size: size, background: customColors === null || customColors === void 0 ? void 0 : customColors.background, color: customColors === null || customColors === void 0 ? void 0 : customColors.text, children: [showUnits.days && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Days", value: time.days, size: size, background: customColors === null || customColors === void 0 ? void 0 : customColors.unitBackground }), showUnits.hours && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Hours", value: time.hours, size: size, background: customColors === null || customColors === void 0 ? void 0 : customColors.unitBackground }), showUnits.minutes && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Minutes", value: time.minutes, size: size, background: customColors === null || customColors === void 0 ? void 0 : customColors.unitBackground }), showUnits.seconds && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Seconds", value: time.seconds, size: size, background: customColors === null || customColors === void 0 ? void 0 : customColors.unitBackground }), showProgress && (0, jsx_runtime_1.jsx)(TimerProgress_1.default, { value: time.progress, color: customColors === null || customColors === void 0 ? void 0 : customColors.progress })] }));
+    // 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
+    };
+    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 }))] }));
 };
 exports.ServerTimerUI = ServerTimerUI;

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

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

package/dist/ui/components/TimerContainer.js

@@ -1,24 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TimerContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const paddingMap = { sm: '0.25rem 0.5rem', md: '0.5rem 1rem', lg: '1rem 1.5rem' };
-const gapMap = { sm: '0.25rem', md: '0.5rem', lg: '0.75rem' };
-const TimerContainer = ({ children, size = 'md', layout = 'horizontal', className, background = '#ffffff', color = '#323130' }) => {
-    const flexDirection = layout === 'vertical' ? 'column' : 'row';
-    const isCompact = layout === 'compact';
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: {
-            backgroundColor: background,
+const paddingMap = {
+    sm: '6px 10px',
+    md: '10px 16px',
+    lg: '16px 22px'
+};
+function TimerContainer({ children, size, layout, background, color }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: layout === 'vertical' ? 'column' : 'row',
+            alignItems: 'center',
+            gap: layout === 'compact' ? '4px' : '10px',
+            padding: paddingMap[size],
+            background,
             color,
             border: '1px solid #e1e1e1',
-            borderRadius: '4px',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-            padding: isCompact ? '0.25rem 0.5rem' : paddingMap[size],
-            display: 'inline-flex',
-            flexDirection,
-            alignItems: 'center',
-            gap: isCompact ? '0.25rem' : gapMap[size],
-            fontFamily: `'Segoe UI', sans-serif`,
-            fontSize: isCompact ? '0.75rem' : '1rem'
+            borderRadius: 4,
+            fontFamily: `'Segoe UI', system-ui`,
+            flexWrap: 'wrap',
+            maxWidth: '100%'
         }, children: children }));
-};
-exports.default = TimerContainer;
+}

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

@@ -1,7 +1,4 @@
-import React from 'react';
-interface TimerProgressProps {
+export default function TimerProgress({ value, color }: {
     value: number;
-    color?: string;
-}
-declare const TimerProgress: React.FC<TimerProgressProps>;
-export default TimerProgress;
+    color: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/TimerProgress.js

@@ -1,16 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TimerProgress = ({ value, color = '#0078d4' }) => ((0, jsx_runtime_1.jsx)("div", { style: {
-        flex: 1,
-        height: '6px',
-        background: '#e1e1e1',
-        borderRadius: '3px',
-        overflow: 'hidden',
-        marginLeft: '0.5rem'
-    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-            width: `${value}%`,
-            background: color,
-            height: '100%'
-        } }) }));
 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'
+            } }) }));
+}

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

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

package/dist/ui/components/TimerUnit.js

@@ -1,15 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TimerUnit;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TimerUnit = ({ label, value, size = 'md', numberSize = 'md', background = '#f3f2f1', color = '#323130' }) => {
-    const fontMap = { sm: '0.75rem', md: '1rem', lg: '1.5rem' };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            backgroundColor: background,
-            color,
-            padding: '0.25rem 0.5rem',
-            borderRadius: '4px',
-            textAlign: 'center',
-            minWidth: '2.5rem'
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: fontMap[numberSize], fontWeight: 600 }, children: value.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.75rem' }, children: label })] }));
+const numberSizeMap = {
+    sm: '0.9rem',
+    md: '1.2rem',
+    lg: '1.6rem'
 };
-exports.default = TimerUnit;
+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 }))] }));
+}

package/dist/ui/themes/brand.d.ts

@@ -1,4 +1,6 @@
 export declare const brand: {
     background: string;
-    color: string;
+    text: string;
+    unitBackground: string;
+    progress: string;
 };

package/dist/ui/themes/brand.js

@@ -1,4 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.brand = void 0;
-exports.brand = { background: '#0078d4', color: '#ffffff' };
+exports.brand = {
+    background: '#f5f9ff',
+    text: '#003a8f',
+    unitBackground: '#e6f0ff',
+    progress: '#005fb8'
+};

package/dist/ui/themes/dark.d.ts

@@ -1,4 +1,6 @@
 export declare const dark: {
     background: string;
-    color: string;
+    text: string;
+    unitBackground: string;
+    progress: string;
 };

package/dist/ui/themes/dark.js

@@ -1,4 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dark = void 0;
-exports.dark = { background: '#323130', color: '#f3f2f1' };
+exports.dark = {
+    background: '#1f1f1f',
+    text: '#ffffff',
+    unitBackground: '#2d2d2d',
+    progress: '#2899f5'
+};

package/dist/ui/themes/light.d.ts

@@ -1,4 +1,6 @@
 export declare const light: {
     background: string;
-    color: string;
+    text: string;
+    unitBackground: string;
+    progress: string;
 };

package/dist/ui/themes/light.js

@@ -1,4 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.light = void 0;
-exports.light = { background: '#f3f2f1', color: '#323130' };
+exports.light = {
+    background: '#ffffff',
+    text: '#323130',
+    unitBackground: '#f3f2f1',
+    progress: '#0078d4',
+};

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

@@ -1,6 +1,18 @@
 export type TimerSize = 'sm' | 'md' | 'lg';
 export type TimerLayout = 'horizontal' | 'vertical' | 'compact';
 export type TimerTheme = 'light' | 'dark' | 'brand';
+export interface CustomColors {
+    background?: string;
+    text?: string;
+    unitBackground?: string;
+    progress?: string;
+}
+export interface ShowUnits {
+    days?: boolean;
+    hours?: boolean;
+    minutes?: boolean;
+    seconds?: boolean;
+}
 export interface ServerTimerUIProps {
     serverNow: string;
     endTime: string;
@@ -8,18 +20,7 @@ export interface ServerTimerUIProps {
     layout?: TimerLayout;
     theme?: TimerTheme;
     showProgress?: boolean;
+    customColors?: CustomColors;
+    showUnits?: ShowUnits;
     onEnd?: () => void;
-    className?: string;
-    customColors?: {
-        background?: string;
-        text?: string;
-        unitBackground?: string;
-        progress?: string;
-    };
-    showUnits?: {
-        days?: boolean;
-        hours?: boolean;
-        minutes?: boolean;
-        seconds?: boolean;
-    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server-time-timer-yolabs-ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "FluentUI/SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",