server-time-timer-yolabs-ui 1.0.4 → 1.0.6

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.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { ServerTimerUIProps } from './types';
 export declare const ServerTimerUI: React.FC<ServerTimerUIProps>;
+export default ServerTimerUI;

package/dist/ui/ServerTimerUI.js

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

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { TimerSize } from '../types';
+import { TimerSize, TimerLayout } from '../types';
 interface TimerContainerProps {
     children: React.ReactNode;
     size?: TimerSize;
+    layout?: TimerLayout;
     className?: string;
     background?: string;
     color?: string;

package/dist/ui/components/TimerContainer.js

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

package/dist/ui/components/TimerProgress.js

@@ -1,16 +1,11 @@
 "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: {
+const TimerProgress = ({ value, color = '#0078d4' }) => ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1, height: '6px', backgroundColor: '#e1e1e1', borderRadius: '3px', margin: '0 0.5rem', minWidth: '50px' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
             width: `${value}%`,
-            background: color,
-            height: '100%'
+            height: '100%',
+            backgroundColor: color,
+            borderRadius: '3px',
+            transition: 'width 0.2s ease'
         } }) }));
 exports.default = TimerProgress;

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

@@ -1,9 +1,11 @@
 import React from 'react';
-import { TimerSize } from '../types';
+import { TimerSize, TimerLayout } from '../types';
 export interface TimerUnitProps {
     label: string;
     value: number;
     size?: TimerSize;
+    numberSize?: 'sm' | 'md' | 'lg';
+    layout?: TimerLayout;
     background?: string;
     color?: string;
 }

package/dist/ui/components/TimerUnit.js

@@ -1,22 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const paddingMap = {
-    sm: '0.25rem 0.5rem',
-    md: '0.5rem 1rem',
-    lg: '0.75rem 1.5rem'
-};
-const fontSizeMap = {
-    sm: '0.625rem',
-    md: '0.75rem',
-    lg: '0.875rem'
-};
-const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', color = '#323130' }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+const fontMap = { sm: '0.75rem', md: '1rem', lg: '1.5rem' };
+const paddingMap = { sm: '0.25rem 0.5rem', md: '0.5rem 1rem', lg: '1rem 1.5rem' };
+const TimerUnit = ({ label, value, size = 'md', numberSize = 'md', layout = 'horizontal', background = '#f3f2f1', color = '#323130' }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
         backgroundColor: background,
         color,
-        borderRadius: '4px',
         padding: paddingMap[size],
-        minWidth: '2.5rem',
-        textAlign: 'center'
-    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, fontSize: fontSizeMap[size] }, children: String(value).padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: fontSizeMap[size], opacity: 0.8 }, children: label })] }));
+        borderRadius: '4px',
+        textAlign: 'center',
+        minWidth: layout === 'compact' ? '2rem' : '3rem',
+        flex: layout === 'horizontal' ? '1 1 auto' : undefined,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginBottom: layout === 'vertical' ? '0.25rem' : undefined,
+        overflow: 'hidden'
+    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: fontMap[numberSize], fontWeight: 600, whiteSpace: 'nowrap' }, children: value.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.75rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: label })] }));
 exports.default = TimerUnit;

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 ShowUnits {
+    days?: boolean;
+    hours?: boolean;
+    minutes?: boolean;
+    seconds?: boolean;
+}
+export interface CustomColors {
+    background?: string;
+    text?: string;
+    unitBackground?: string;
+    progress?: string;
+}
 export interface ServerTimerUIProps {
     serverNow: string;
     endTime: string;
@@ -8,18 +20,8 @@ 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.4",
+  "version": "1.0.6",
   "description": "FluentUI/SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",