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

package/README.md

@@ -1,35 +1,33 @@
 
 # ⏱️ server-time-timer-yolabs-ui
 
-**SharePoint-styled React countdown timer UI built on top of `server-time-timer-yolabs`.**
-
-A **professional, enterprise-grade React UI** for **server-synchronized countdown timers**.
-Designed for **accuracy, consistency, and corporate dashboards**.
+**SharePoint-styled React countdown timer UI** built on top of `server-time-timer-yolabs`.
+Enterprise-grade, **server-synchronized countdown timers** designed for accuracy, consistency, and corporate dashboards.
 
 ---
 
 ## 🚀 Why Use This UI?
 
-Unlike traditional timers that rely on the **client’s local clock**, this UI uses **server time as the single source of truth**.
+Unlike traditional timers that rely on the **client’s clock**, this UI uses **server time as the single source of truth**.
 
 ### ✅ Key Advantages
 
-* 🔒 **Server-trusted time** → no client clock manipulation
-* 🌍 **Consistent countdown across all devices**
-* 🧩 **Dynamic layouts, sizes, themes, and colors**
-* ⚡ **Optional animated progress bar**
-* 🕒 **Configurable units** (days, hours, minutes, seconds)
-* 🏢 **Enterprise UI** inspired by Fluent UI / SharePoint
+* 🔒 Server-trusted time → no client clock manipulation
+* 🌍 Consistent countdown across all devices
+* 🧩 Dynamic layouts, sizes, themes, and colors
+* ⚡ Optional animated progress bar
+* 🕒 Configurable units (days, hours, minutes, seconds)
+* 🏢 Enterprise UI inspired by Fluent UI / SharePoint
 
 ---
 
-## ⚡ Difference From Other Timers
+## ⚡ Difference From Normal Timers
 
 | Feature                  | Normal Timers   | server-time-timer-yolabs-ui       |
 | ------------------------ | --------------- | --------------------------------- |
 | Time Source              | Client          | **Server (trusted)**              |
 | Cross-Device Consistency | ❌ Can differ    | ✅ Always same                     |
-| Time Drift Handling      | ❌ None          | ✅ Auto-corrected                  |
+| Drift Handling           | ❌ None          | ✅ Auto-corrected                  |
 | Layouts                  | ❌ Fixed         | ✅ Horizontal / Vertical / Compact |
 | Unit Visibility          | ❌ Fixed         | ✅ Per-unit control                |
 | Progress Bar             | ❌ Missing       | ✅ Built-in                        |
@@ -60,29 +58,17 @@ import { ServerTimerUI } from 'server-time-timer-yolabs-ui';
 export default function App() {
   return (
     <ServerTimerUI
-      serverNow="2025-12-25T12:00:00Z"
       endTime="2025-12-25T12:10:00Z"
-
       size="lg"
       layout="horizontal"
       theme="brand"
-
-      showProgress={true}
-
+      showUnits={{ days: true, hours: true, minutes: true, seconds: true }}
       customColors={{
         background: '#fef9f3',
         text: '#323130',
         unitBackground: '#fffbdd',
         progress: '#0078d4'
       }}
-
-      showUnits={{
-        days: true,
-        hours: true,
-        minutes: true,
-        seconds: true
-      }}
-
       onEnd={() => alert('⏰ Time is up!')}
     />
   );
@@ -95,9 +81,6 @@ export default function App() {
 
 ```ts
 export interface ServerTimerUIProps {
-  /** Server UTC time (ISO string) */
-  serverNow: string;
-
   /** Countdown end UTC time (ISO string) */
   endTime: string;
 
@@ -110,11 +93,13 @@ export interface ServerTimerUIProps {
   /** Built-in theme */
   theme?: 'light' | 'dark' | 'brand';
 
-  /** Show animated progress bar */
-  showProgress?: boolean;
-
-  /** Called once when timer reaches zero */
-  onEnd?: () => void;
+  /** Show time units */
+  showUnits?: {
+    days?: boolean;
+    hours?: boolean;
+    minutes?: boolean;
+    seconds?: boolean;
+  };
 
   /** Optional wrapper class */
   className?: string;
@@ -127,13 +112,8 @@ export interface ServerTimerUIProps {
     progress?: string;
   };
 
-  /** Control visible time units */
-  showUnits?: {
-    days?: boolean;
-    hours?: boolean;
-    minutes?: boolean;
-    seconds?: boolean;
-  };
+  /** Callback when timer ends */
+  onEnd?: () => void;
 }
 ```
 
@@ -141,34 +121,17 @@ export interface ServerTimerUIProps {
 
 ## 🎨 Layouts
 
-### Horizontal (default)
-
-Units displayed in a row.
-✔ Dashboards
-✔ Desktop views
-
-### Vertical
-
-Units stacked vertically.
-✔ Mobile
-✔ Side panels
-
-### Compact
-
-Minimal, label-free layout.
-✔ Cards
-✔ Headers
-✔ Space-constrained UIs
+* **Horizontal (default)** – units in a row, ideal for dashboards and desktop views
+* **Vertical** – stacked units, best for mobile or side panels
+* **Compact** – minimal, label-free, fits in cards or headers
 
 ---
 
 ## 🎭 Themes
 
-Built-in themes are located in the `themes` folder:
-
-* `light` –  light style
+* `light` – Light UI
 * `dark` – Enterprise dark mode
-* `brand` – Corporate / SharePoint branding
+* `brand` – Corporate / SharePoint styling
 
 ```tsx
 <ServerTimerUI theme="dark" />
@@ -187,8 +150,8 @@ customColors={{
 }}
 ```
 
-✅ Optional
-✅ Automatically overrides theme defaults
+* Overrides theme defaults
+* Optional
 
 ---
 
@@ -203,27 +166,22 @@ showUnits={{
 }}
 ```
 
-✔ Hide unused units
-✔ Cleaner UI for short timers
+* Hide unused units for a cleaner UI
+* Useful for short timers
 
 ---
 
-## 📱 Responsiveness & Overflow Safety
+## 📱 Responsive & Safe
 
 * Uses `flex-wrap` to prevent overflow
-* Auto-scales typography by `size`
-* Vertical layout recommended for small screens
+* Auto-scales typography based on `size`
 * Numbers never jump or resize unexpectedly
-
-✔ Mobile-safe
-✔ Dashboard-safe
+* Vertical layout recommended for small screens
 
 ---
 
 ## 🔁 Server Re-Sync (Long Timers)
 
-For long-running timers, periodically resync with the server:
-
 ```ts
 setInterval(async () => {
   const res = await fetch('/api/server-time');
@@ -232,40 +190,36 @@ setInterval(async () => {
 }, 30000);
 ```
 
-✔ Prevents long-term drift
-✔ Enterprise-grade accuracy
+* Prevents long-term drift
+* Enterprise-grade accuracy
 
 ---
 
-## 🔧 Angular / Framework-Agnostic Usage
+## 🔧 Framework-Agnostic Usage
 
-For Angular, Vue, or Vanilla JS, use the **core engine**:
+Use the **core engine** (`server-time-timer-yolabs`) for Angular, Vue, or Vanilla JS:
 
 ```ts
 import { createServerTimer } from 'server-time-timer-yolabs';
 
 const timer = createServerTimer({
-  serverNow: new Date().toISOString(),
   endTime: new Date(Date.now() + 10 * 60 * 1000).toISOString()
 });
 
-timer.onTick((t) => {
-  console.log(`${t.hours}h ${t.minutes}m ${t.seconds}s`);
-});
-
+timer.onTick(t => console.log(`${t.hours}h ${t.minutes}m ${t.seconds}s`));
 timer.start();
 ```
 
-✔ Wrap values in your own UI layer
-✔ React UI package remains optional
+* Wrap values in your own UI
+* React UI package remains optional
 
 ---
 
-## 🏢 Common Use Cases
+## 🏢 Use Cases
 
 * 🎟️ Lottery & raffle systems
 * 🛒 Flash sales & promotions
-* 📝 Online exams & quizzes
+* 📝 Online exams & timed quizzes
 * 🎮 Games & live events
 * 📱 Telegram Mini Apps
 * 🌐 Distributed enterprise dashboards
@@ -275,17 +229,17 @@ timer.start();
 
 ## 📜 License
 
-**Yonas**
-© **YoLabs**
+**YonasLabs / YoLabs**
 
 ---
 
-## ✅ Final Notes
+## ✅ Notes
 
-This package is designed for **mission-critical timers** where:
+Designed for **mission-critical timers**:
 
 * Accuracy matters
-* Client manipulation must be avoided
-* UI consistency is required across platforms
+* Client manipulation is prevented
+* UI consistency across platforms is guaranteed
 
 ---
+

package/dist/hooks/useServerTimer.d.ts

@@ -4,7 +4,6 @@ type TimeState = {
     hours: number;
     minutes: number;
     seconds: number;
-    progress: number;
 };
 export declare const useServerTimer: (endTime: string, onEnd?: () => void) => TimeState;
 export {};

package/dist/hooks/useServerTimer.js

@@ -10,7 +10,6 @@ const useServerTimer = (endTime, onEnd) => {
         hours: 0,
         minutes: 0,
         seconds: 0,
-        progress: 100,
     });
     (0, react_1.useEffect)(() => {
         const timer = (0, server_time_timer_yolabs_1.createServerTimer)({

package/dist/ui/ServerTimerUI.js

@@ -7,9 +7,8 @@ exports.ServerTimerUI = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 = ({ endTime, size = 'md', layout = 'horizontal', theme = 'light', showProgress = true, customColors = {}, showUnits = { days: true, hours: true, minutes: true, seconds: true }, numberSize = 'md', onEnd, className, }) => {
+const ServerTimerUI = ({ endTime, size = 'md', layout = 'horizontal', theme = 'light', customColors = {}, showUnits = { days: true, hours: true, minutes: true, seconds: true }, onEnd, className, }) => {
     const time = (0, useServerTimer_1.useServerTimer)(endTime, onEnd);
     const themeColors = {
         light: { background: '#ffffff', text: '#323130', unitBackground: '#f3f2f1', progress: '#0078d4' },
@@ -17,6 +16,6 @@ const ServerTimerUI = ({ endTime, size = 'md', layout = 'horizontal', theme = 'l
         brand: { background: '#fef9f3', text: '#323130', unitBackground: '#fffbdd', progress: '#0078d4' },
     };
     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 })] }));
+    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 }), showUnits.hours && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Hours", value: time.hours, size: size, background: colors.unitBackground, color: colors.text }), showUnits.minutes && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Minutes", value: time.minutes, size: size, background: colors.unitBackground, color: colors.text }), showUnits.seconds && (0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Seconds", value: time.seconds, size: size, background: colors.unitBackground, color: colors.text })] }));
 };
 exports.ServerTimerUI = ServerTimerUI;

package/dist/ui/components/TimerContainer.js

@@ -1,37 +1,17 @@
 "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 gapMap = {
     horizontal: '0.625rem',
     vertical: '0.625rem',
     compact: '0.25rem',
 };
 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 }));
+    const flexStyles = {
+        horizontal: { flexDirection: 'row', flexWrap: 'nowrap' },
+        vertical: { flexDirection: 'column', flexWrap: 'nowrap' },
+        compact: { flexDirection: 'row', flexWrap: 'wrap' },
+    }[layout]; // <--- cast here
+    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: '6px', padding: size === 'sm' ? '0.25rem' : size === 'md' ? '0.5rem' : '0.75rem', fontFamily: `'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif`, fontSize: '1rem', overflow: 'hidden', boxSizing: 'border-box', transition: 'all 0.2s ease' }), role: "timer", "aria-label": "timer container", children: children }));
 };
 exports.default = TimerContainer;

package/dist/ui/components/TimerUnit.js

@@ -1,13 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-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 })] }));
+const fontSizeMap = {
+    sm: '0.75rem', // label font
+    md: '0.875rem',
+    lg: '1rem',
+};
+const numberFontMap = {
+    sm: '1rem',
+    md: '1.25rem',
+    lg: '1.5rem',
+};
+const paddingMap = {
+    sm: '0.25rem 0.5rem',
+    md: '0.5rem 0.75rem',
+    lg: '0.75rem 1rem',
+};
+const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', color = '#323130', numberSize = 'md', }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: background,
+            color: color,
+            borderRadius: '6px',
+            padding: paddingMap[size],
+            minWidth: size === 'sm' ? '3rem' : size === 'md' ? '4rem' : '5rem',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+            transition: 'all 0.2s ease',
+            boxSizing: 'border-box',
+            fontFamily: `'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif`,
+        }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                    fontSize: numberFontMap[numberSize],
+                    fontWeight: 600,
+                    lineHeight: 1,
+                }, children: value.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("span", { style: {
+                    fontSize: fontSizeMap[size],
+                    marginTop: '0.25rem',
+                    textTransform: 'uppercase',
+                    whiteSpace: 'nowrap',
+                }, children: label })] }));
+};
 exports.default = TimerUnit;

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

@@ -1,13 +1,7 @@
 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 {
+export interface TimerUnits {
     days?: boolean;
     hours?: boolean;
     minutes?: boolean;
@@ -18,10 +12,12 @@ export interface ServerTimerUIProps {
     size?: TimerSize;
     layout?: TimerLayout;
     theme?: TimerTheme;
-    showProgress?: boolean;
-    customColors?: CustomColors;
-    showUnits?: ShowUnits;
-    onEnd?: () => void;
+    showUnits?: TimerUnits;
     className?: string;
-    numberSize?: 'sm' | 'md' | 'lg';
+    customColors?: {
+        background?: string;
+        text?: string;
+        unitBackground?: string;
+    };
+    onEnd?: () => void;
 }

package/package.json

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