server-time-timer-yolabs-ui 1.0.17 → 1.0.19

package/dist/ui/ServerTimerUI.js

@@ -8,14 +8,38 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const TimerContainer_1 = __importDefault(require("./components/TimerContainer"));
 const TimerUnit_1 = __importDefault(require("./components/TimerUnit"));
 const useServerTimer_1 = require("../hooks/useServerTimer");
-const ServerTimerUI = ({ endTime, size = 'md', layout = 'horizontal', theme = 'light', customColors = {}, showUnits = { days: true, hours: true, minutes: true, seconds: true }, onEnd, className, }) => {
+const ServerTimerUI = ({ endTime, size = 'md', layout = 'horizontal', theme = 'light', showLabels = true, innerShape = 'rectangle', equalUnitSize = true, customColors = {}, showUnits = { days: true, hours: true, minutes: true, seconds: true }, onEnd, className, }) => {
     const time = (0, useServerTimer_1.useServerTimer)(endTime, onEnd);
+    // SharePoint Fluent UI Color Palettes
     const themeColors = {
-        light: { background: '#ffffff', text: '#323130', unitBackground: '#f3f2f1', progress: '#0078d4' },
-        dark: { background: '#323130', text: '#ffffff', unitBackground: '#505050', progress: '#0078d4' },
-        brand: { background: '#fef9f3', text: '#323130', unitBackground: '#fffbdd', progress: '#0078d4' },
+        light: {
+            background: '#ffffff',
+            text: '#323130',
+            unitBackground: '#f3f2f1', // NeutralLighter
+        },
+        dark: {
+            background: '#201f1e', // NeutralDark
+            text: '#ffffff',
+            unitBackground: '#323130', // NeutralPrimary
+        },
+        brand: {
+            background: '#fef9f3',
+            text: '#323130',
+            unitBackground: '#fffbdd', // Soft brand tint
+        },
     };
     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 }), 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 })] }));
+    /**
+     * Automatically maps the container size to the number size
+     * to maintain SharePoint visual hierarchy.
+     */
+    const getNumberSize = () => {
+        if (size === 'sm')
+            return 'sm';
+        if (size === 'lg')
+            return 'lg';
+        return 'md';
+    };
+    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, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize })), showUnits.hours && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Hours", value: time.hours, size: size, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize })), showUnits.minutes && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Minutes", value: time.minutes, size: size, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize })), showUnits.seconds && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Seconds", value: time.seconds, size: size, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize }))] }));
 };
 exports.ServerTimerUI = ServerTimerUI;

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.17",
+  "version": "1.0.19",
   "description": "FluentUI/SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",