server-time-timer-yolabs-ui 1.0.3 → 1.0.5

package/dist/hooks/useServerTimer.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useServerTimer = useServerTimer;
 const react_1 = require("react");
-const server_time_timer_yoLabs_1 = require("server-time-timer-yoLabs");
+const server_time_timer_yolabs_1 = require("server-time-timer-yolabs");
 function useServerTimer({ serverNow, endTime, onEnd }) {
     const [time, setTime] = (0, react_1.useState)({
         days: 0,
@@ -13,7 +13,7 @@ function useServerTimer({ serverNow, endTime, onEnd }) {
         progress: 100
     });
     (0, react_1.useEffect)(() => {
-        const timer = (0, server_time_timer_yoLabs_1.createServerTimer)({ serverNow, endTime });
+        const timer = (0, server_time_timer_yolabs_1.createServerTimer)({ serverNow, endTime });
         timer.onTick((t) => {
             const totalDuration = new Date(endTime).getTime() - new Date(serverNow).getTime();
             setTime({

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { TimerSize } from '../types';
+import { TimerSize, TimerLayout } from '../types';
 interface TimerContainerProps {
     children: React.ReactNode;
     size?: TimerSize;
+    layout?: TimerLayout;
     className?: string;
     background?: string;
     color?: string;

package/dist/ui/components/TimerContainer.js

@@ -1,22 +1,24 @@
 "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 paddingMap = { sm: '0.25rem 0.5rem', md: '0.5rem 1rem', lg: '1rem 1.5rem' };
+const gapMap = { sm: '0.25rem', md: '0.5rem', lg: '0.75rem' };
+const TimerContainer = ({ children, size = 'md', layout = 'horizontal', className, background = '#ffffff', color = '#323130' }) => {
+    const flexDirection = layout === 'vertical' ? 'column' : 'row';
+    const isCompact = layout === 'compact';
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: {
+            backgroundColor: background,
+            color,
+            border: '1px solid #e1e1e1',
+            borderRadius: '4px',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+            padding: isCompact ? '0.25rem 0.5rem' : paddingMap[size],
+            display: 'inline-flex',
+            flexDirection,
+            alignItems: 'center',
+            gap: isCompact ? '0.25rem' : gapMap[size],
+            fontFamily: `'Segoe UI', sans-serif`,
+            fontSize: isCompact ? '0.75rem' : '1rem'
+        }, children: children }));
 };
-const TimerContainer = ({ children, size = 'md', className, background = '#ffffff', color = '#323130' }) => ((0, jsx_runtime_1.jsx)("div", { className: className, style: {
-        backgroundColor: background,
-        color,
-        border: '1px solid #e1e1e1',
-        borderRadius: '4px',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-        padding: paddingMap[size],
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '0.75rem',
-        fontFamily: `'Segoe UI', sans-serif`,
-        fontSize: '1rem'
-    }, children: children }));
 exports.default = TimerContainer;

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TimerSize } from '../types';
-export interface TimerUnitProps {
+interface TimerUnitProps {
     label: string;
     value: number;
     size?: TimerSize;
+    numberSize?: 'sm' | 'md' | 'lg';
     background?: string;
     color?: string;
 }

package/dist/ui/components/TimerUnit.js

@@ -1,22 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const paddingMap = {
-    sm: '0.25rem 0.5rem',
-    md: '0.5rem 1rem',
-    lg: '0.75rem 1.5rem'
+const TimerUnit = ({ label, value, size = 'md', numberSize = 'md', background = '#f3f2f1', color = '#323130' }) => {
+    const fontMap = { sm: '0.75rem', md: '1rem', lg: '1.5rem' };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            backgroundColor: background,
+            color,
+            padding: '0.25rem 0.5rem',
+            borderRadius: '4px',
+            textAlign: 'center',
+            minWidth: '2.5rem'
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: fontMap[numberSize], fontWeight: 600 }, children: value.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '0.75rem' }, children: label })] }));
 };
-const fontSizeMap = {
-    sm: '0.625rem',
-    md: '0.75rem',
-    lg: '0.875rem'
-};
-const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', color = '#323130' }) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-        backgroundColor: background,
-        color,
-        borderRadius: '4px',
-        padding: paddingMap[size],
-        minWidth: '2.5rem',
-        textAlign: 'center'
-    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 600, fontSize: fontSizeMap[size] }, children: String(value).padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: fontSizeMap[size], opacity: 0.8 }, children: label })] }));
 exports.default = TimerUnit;

package/package.json

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