server-time-timer-yolabs-ui 1.0.16 → 1.0.18

package/README.md

@@ -15,7 +15,6 @@ Unlike traditional timers that rely on the **client’s clock**, this UI uses **
 * 🔒 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
 
@@ -30,7 +29,6 @@ Unlike traditional timers that rely on the **client’s clock**, this UI uses **
 | Drift Handling           | ❌ None          | ✅ Auto-corrected                  |
 | Layouts                  | ❌ Fixed         | ✅ Horizontal / Vertical / Compact |
 | Unit Visibility          | ❌ Fixed         | ✅ Per-unit control                |
-| Progress Bar             | ❌ Missing       | ✅ Built-in                        |
 | Enterprise Styling       | ❌ Basic         | ✅ SharePoint-style                |
 | Tamper Resistance        | ❌ Easy to cheat | ✅ Secure                          |
 
@@ -67,7 +65,7 @@ export default function App() {
         background: '#fef9f3',
         text: '#323130',
         unitBackground: '#fffbdd',
-        progress: '#0078d4'
+      
       }}
       onEnd={() => alert('⏰ Time is up!')}
     />
@@ -109,7 +107,7 @@ export interface ServerTimerUIProps {
     background?: string;
     text?: string;
     unitBackground?: string;
-    progress?: string;
+
   };
 
   /** Callback when timer ends */
@@ -146,7 +144,6 @@ customColors={{
   background: '#fff8f0',
   text: '#333',
   unitBackground: '#ffe5b4',
-  progress: '#0078d4'
 }}
 ```
 

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

@@ -7,6 +7,9 @@ interface TimerUnitProps {
     background?: string;
     color?: string;
     numberSize?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    shape?: 'rectangle' | 'circle';
+    equalSize?: boolean;
 }
 declare const TimerUnit: React.FC<TimerUnitProps>;
 export default TimerUnit;

package/dist/ui/components/TimerUnit.js

@@ -1,50 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', // SharePoint NeutralLighter
-color = '#323130', // SharePoint NeutralPrimary
-numberSize = 'md', }) => {
-    /**
-     * Label Typography - Based on your Engine Body Options
-     * sm: 11px, md: 13px, lg: 15px
-     */
+const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', color = '#323130', numberSize = 'md', showLabel = true, shape = 'rectangle', equalSize = true, }) => {
+    // 1. Typography from your Engine Settings
     const getLabelStyles = () => {
         if (size === 'sm')
             return { fontSize: '11px', lineHeight: 1.4, fontWeight: 400 };
         if (size === 'lg')
             return { fontSize: '15px', lineHeight: 1.5, fontWeight: 400 };
-        return { fontSize: '13px', lineHeight: 1.5, fontWeight: 400 }; // Default md
+        return { fontSize: '13px', lineHeight: 1.5, fontWeight: 400 };
     };
-    /**
-     * Number Typography - Based on your Engine Title/Heading Options
-     * sm (Heading): 18px, md (Title): 24px, lg (Hero): 32px
-     */
     const getNumberStyles = () => {
         if (numberSize === 'sm')
-            return { fontSize: '18px', fontWeight: 600, lineHeight: 1.4 };
+            return { fontSize: '18px', fontWeight: 600, lineHeight: 1 };
         if (numberSize === 'lg')
-            return { fontSize: '32px', fontWeight: 700, lineHeight: 1.2 };
-        return { fontSize: '24px', fontWeight: 600, lineHeight: 1.3 }; // Default md (Title)
+            return { fontSize: '32px', fontWeight: 700, lineHeight: 1 };
+        return { fontSize: '24px', fontWeight: 600, lineHeight: 1 };
     };
-    const containerStyles = {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: background,
-        color: color,
-        // SharePoint Style: Subtle rounding and very light border
-        borderRadius: '2px',
-        border: '1px solid #edebe9',
-        // Spacing
-        padding: size === 'sm' ? '4px 8px' : size === 'md' ? '8px 12px' : '12px 16px',
-        minWidth: size === 'sm' ? '48px' : size === 'md' ? '64px' : '80px',
-        // Visuals
-        boxShadow: '0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108)', // Fluent Depth
-        transition: 'transform 0.1s ease, box-shadow 0.1s ease',
-        boxSizing: 'border-box',
-        fontFamily: '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, sans-serif',
+    // 2. Square/Circle Dimension Logic
+    // Forces height to match width if equalSize or circle is requested
+    const getDimensions = () => {
+        const baseWidth = size === 'sm' ? '56px' : size === 'md' ? '72px' : '96px';
+        if (equalSize || shape === 'circle') {
+            return { width: baseWidth, height: baseWidth };
+        }
+        return { minWidth: baseWidth };
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyles, className: "timer-unit", children: [(0, jsx_runtime_1.jsx)("span", { style: Object.assign(Object.assign({}, getNumberStyles()), { display: 'block' }), children: value.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("span", { style: Object.assign(Object.assign({}, getLabelStyles()), { marginTop: '2px', textTransform: 'lowercase', opacity: 0.8, whiteSpace: 'nowrap' }), children: label })] }));
+    const containerStyles = Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: background, color: color, boxSizing: 'border-box', fontFamily: '"Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif', transition: 'all 0.2s ease-in-out', border: '1px solid #edebe9', 
+        // Shape logic
+        borderRadius: shape === 'circle' ? '50%' : '2px' }, getDimensions()), { 
+        // Visuals (Fluent Depth)
+        boxShadow: '0 1.6px 3.6px 0 rgba(0,0,0,0.1), 0 0.3px 0.9px 0 rgba(0,0,0,0.05)', padding: shape === 'circle' ? '0' : (size === 'sm' ? '4px' : '8px') });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyles, className: `timer-unit timer-unit--${shape}`, children: [(0, jsx_runtime_1.jsx)("span", { style: getNumberStyles(), children: value.toString().padStart(2, '0') }), showLabel && ((0, jsx_runtime_1.jsx)("span", { style: Object.assign(Object.assign({}, getLabelStyles()), { marginTop: shape === 'circle' ? '2px' : '4px', textTransform: 'lowercase', opacity: 0.8, whiteSpace: 'nowrap' }), children: label }))] }));
 };
 exports.default = TimerUnit;

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

@@ -1,6 +1,7 @@
 export type TimerSize = 'sm' | 'md' | 'lg';
 export type TimerLayout = 'horizontal' | 'vertical' | 'compact';
 export type TimerTheme = 'light' | 'dark' | 'brand';
+export type TimerInnerShape = 'rectangle' | 'circle';
 export interface TimerUnits {
     days?: boolean;
     hours?: boolean;
@@ -14,6 +15,11 @@ export interface ServerTimerUIProps {
     theme?: TimerTheme;
     showUnits?: TimerUnits;
     className?: string;
+    /** Show or hide labels */
+    showLabels?: boolean;
+    /** Inner background shape */
+    innerShape?: TimerInnerShape;
+    equalUnitSize: boolean;
     customColors?: {
         background?: string;
         text?: string;

package/package.json

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