server-time-timer-yolabs-ui 1.0.12 → 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/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.d.ts

@@ -6,8 +6,7 @@ interface TimerUnitProps {
     size?: TimerSize;
     background?: string;
     color?: string;
-    leadingZero?: boolean;
-    monospace?: boolean;
+    numberSize?: 'sm' | 'md' | 'lg';
 }
 declare const TimerUnit: React.FC<TimerUnitProps>;
 export default TimerUnit;

package/dist/ui/components/TimerUnit.js

@@ -1,56 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TimerUnit = ({ label, value, size = 'md', background = '#ffffff', color = '#333333', leadingZero = true, monospace = true, }) => {
-    const sizeStyles = {
-        sm: {
-            container: 'p-2 min-w-12',
-            value: 'text-lg font-semibold',
-            label: 'text-xs'
-        },
-        md: {
-            container: 'p-3 min-w-16',
-            value: 'text-2xl font-bold',
-            label: 'text-sm'
-        },
-        lg: {
-            container: 'p-4 min-w-20',
-            value: 'text-3xl font-extrabold',
-            label: 'text-base'
-        }
-    };
-    const formattedValue = leadingZero ?
-        value.toString().padStart(2, '0') :
-        value.toString();
-    const fontFamily = monospace ?
-        'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' :
-        'inherit';
+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: {
-            backgroundColor: background,
-            color: color,
-            padding: size === 'sm' ? '0.5rem' : size === 'lg' ? '1rem' : '0.75rem',
-            borderRadius: '0.5rem',
-            textAlign: 'center',
-            minWidth: size === 'sm' ? '3rem' : size === 'lg' ? '5rem' : '4rem',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            border: '1px solid #e5e5e5',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.04)',
-        }, "aria-label": `${formattedValue} ${label}`, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    fontSize: size === 'sm' ? '1.125rem' : size === 'lg' ? '1.875rem' : '1.5rem',
-                    fontWeight: size === 'sm' ? 600 : size === 'lg' ? 800 : 700,
-                    lineHeight: 1.1,
-                    fontFamily: fontFamily,
-                    fontVariantNumeric: 'tabular-nums',
-                    marginBottom: '0.25rem',
-                }, children: formattedValue }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    fontSize: size === 'sm' ? '0.75rem' : size === 'lg' ? '1rem' : '0.875rem',
-                    fontWeight: 500,
+            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',
-                    letterSpacing: '0.05em',
-                    opacity: 0.7,
+                    whiteSpace: 'nowrap',
                 }, children: label })] }));
 };
 exports.default = TimerUnit;

package/package.json

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