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

package/dist/ui/ServerTimerUI.d.ts

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

package/dist/ui/ServerTimerUI.js

@@ -9,9 +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 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, 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 }))] }));
+    // 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;
-exports.default = exports.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,37 +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' }) => {
-    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,
+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,
+            flexDirection: layout === 'vertical' ? 'column' : 'row',
             alignItems: 'center',
-            gap,
-            fontFamily: `'Segoe UI', sans-serif`,
-            fontSize,
+            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%',
-            overflow: 'hidden',
+            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,11 +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', backgroundColor: '#e1e1e1', borderRadius: '3px', margin: '0 0.5rem', minWidth: '50px' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-            width: `${value}%`,
-            height: '100%',
-            backgroundColor: color,
-            borderRadius: '3px',
-            transition: 'width 0.2s ease'
-        } }) }));
 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,13 +1,11 @@
-import React from 'react';
-import { TimerSize, TimerLayout } from '../types';
-export interface TimerUnitProps {
+import { TimerLayout, TimerSize } from '../types';
+interface Props {
     label: string;
     value: number;
-    size?: TimerSize;
-    numberSize?: 'sm' | 'md' | 'lg';
-    layout?: TimerLayout;
-    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,20 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-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,
-        padding: paddingMap[size],
-        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;
+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 }))] }));
+}

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,18 +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 ShowUnits {
+    days?: boolean;
+    hours?: boolean;
+    minutes?: boolean;
+    seconds?: boolean;
+}
 export interface ServerTimerUIProps {
     serverNow: string;
     endTime: string;
@@ -23,5 +23,4 @@ export interface ServerTimerUIProps {
     customColors?: CustomColors;
     showUnits?: ShowUnits;
     onEnd?: () => void;
-    className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server-time-timer-yolabs-ui",
-  "version": "1.0.6",
+  "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",