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

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

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

package/dist/ui/components/TimerUnit.js

@@ -1,13 +1,56 @@
 "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 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';
+    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,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
+                    opacity: 0.7,
+                }, 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.12",
   "description": "FluentUI/SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",