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

package/dist/ui/components/TimerContainer.js

@@ -2,16 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const gapMap = {
-    horizontal: '0.625rem',
-    vertical: '0.625rem',
+    horizontal: '0.75rem',
+    vertical: '0.5rem',
     compact: '0.25rem',
 };
-const TimerContainer = ({ children, size = 'md', className = '', background = '#ffffff', color = '#323130', layout = 'horizontal', }) => {
-    const flexStyles = {
+const TimerContainer = ({ children, size = 'md', className = '', background = '#ffffff', // SharePoint White
+color = '#323130', // SharePoint Neutral Primary
+layout = 'horizontal', }) => {
+    // Flex layout logic
+    const flexLayouts = {
         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', width: '100%', 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 }));
+    };
+    /**
+     * Directly applying your eth-type-engine settings based on size
+     * sm: 11px/12px, md: 13px/14px, lg: 15px/16px
+     */
+    const getTypographyStyles = () => {
+        if (size === 'sm')
+            return { fontSize: '11px', fontWeight: 400, lineHeight: 1.4 };
+        if (size === 'lg')
+            return { fontSize: '15px', fontWeight: 400, lineHeight: 1.5 };
+        return { fontSize: '13px', fontWeight: 400, lineHeight: 1.5 }; // Default md
+    };
+    const containerStyles = Object.assign(Object.assign(Object.assign(Object.assign({ 
+        // Layout
+        display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', boxSizing: 'border-box', gap: gapMap[layout] }, flexLayouts[layout]), { 
+        // SharePoint Visual Identity
+        backgroundColor: background, color: color, border: '1px solid #edebe9', borderRadius: '2px', padding: size === 'sm' ? '8px' : size === 'md' ? '12px' : '16px' }), getTypographyStyles()), { fontFamily: '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif', 
+        // Polish
+        transition: 'all 0.2s ease-in-out', overflow: 'hidden' });
+    return ((0, jsx_runtime_1.jsx)("div", { className: `timer-container ${className}`.trim(), style: containerStyles, role: "timer", "aria-label": "timer container", children: children }));
 };
 exports.default = TimerContainer;

package/dist/ui/components/TimerUnit.js

@@ -1,45 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-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 })] }));
+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 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
+    };
+    /**
+     * 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 };
+        if (numberSize === 'lg')
+            return { fontSize: '32px', fontWeight: 700, lineHeight: 1.2 };
+        return { fontSize: '24px', fontWeight: 600, lineHeight: 1.3 }; // Default md (Title)
+    };
+    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',
+    };
+    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 })] }));
 };
 exports.default = TimerUnit;

package/package.json

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