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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/ui/components/TimerContainer.js +27 -6
  2. package/dist/ui/components/TimerUnit.js +45 -40
  3. package/package.json +1 -1
package/dist/ui/components/TimerContainer.js CHANGED
@@ -2,16 +2,37 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
4
  const gapMap = {
5
- horizontal: '0.625rem',
6
- vertical: '0.625rem',
5
+ horizontal: '0.75rem',
6
+ vertical: '0.5rem',
7
7
  compact: '0.25rem',
8
8
  };
9
- const TimerContainer = ({ children, size = 'md', className = '', background = '#ffffff', color = '#323130', layout = 'horizontal', }) => {
10
- const flexStyles = {
9
+ const TimerContainer = ({ children, size = 'md', className = '', background = '#ffffff', // SharePoint White
10
+ color = '#323130', // SharePoint Neutral Primary
11
+ layout = 'horizontal', }) => {
12
+ // Flex layout logic
13
+ const flexLayouts = {
11
14
  horizontal: { flexDirection: 'row', flexWrap: 'nowrap' },
12
15
  vertical: { flexDirection: 'column', flexWrap: 'nowrap' },
13
16
  compact: { flexDirection: 'row', flexWrap: 'wrap' },
14
- }[layout]; // <--- cast here
15
- 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 }));
17
+ };
18
+ /**
19
+ * Directly applying your eth-type-engine settings based on size
20
+ * sm: 11px/12px, md: 13px/14px, lg: 15px/16px
21
+ */
22
+ const getTypographyStyles = () => {
23
+ if (size === 'sm')
24
+ return { fontSize: '11px', fontWeight: 400, lineHeight: 1.4 };
25
+ if (size === 'lg')
26
+ return { fontSize: '15px', fontWeight: 400, lineHeight: 1.5 };
27
+ return { fontSize: '13px', fontWeight: 400, lineHeight: 1.5 }; // Default md
28
+ };
29
+ const containerStyles = Object.assign(Object.assign(Object.assign(Object.assign({
30
+ // Layout
31
+ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', boxSizing: 'border-box', gap: gapMap[layout] }, flexLayouts[layout]), {
32
+ // SharePoint Visual Identity
33
+ 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',
34
+ // Polish
35
+ transition: 'all 0.2s ease-in-out', overflow: 'hidden' });
36
+ return ((0, jsx_runtime_1.jsx)("div", { className: `timer-container ${className}`.trim(), style: containerStyles, role: "timer", "aria-label": "timer container", children: children }));
16
37
  };
17
38
  exports.default = TimerContainer;
package/dist/ui/components/TimerUnit.js CHANGED
@@ -1,45 +1,50 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
- const fontSizeMap = {
5
- sm: '0.75rem', // label font
6
- md: '0.875rem',
7
- lg: '1rem',
8
- };
9
- const numberFontMap = {
10
- sm: '1rem',
11
- md: '1.25rem',
12
- lg: '1.5rem',
13
- };
14
- const paddingMap = {
15
- sm: '0.25rem 0.5rem',
16
- md: '0.5rem 0.75rem',
17
- lg: '0.75rem 1rem',
18
- };
19
- const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', color = '#323130', numberSize = 'md', }) => {
20
- return ((0, jsx_runtime_1.jsxs)("div", { style: {
21
- display: 'flex',
22
- flexDirection: 'column',
23
- alignItems: 'center',
24
- justifyContent: 'center',
25
- backgroundColor: background,
26
- color: color,
27
- borderRadius: '6px',
28
- padding: paddingMap[size],
29
- minWidth: size === 'sm' ? '3rem' : size === 'md' ? '4rem' : '5rem',
30
- boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
31
- transition: 'all 0.2s ease',
32
- boxSizing: 'border-box',
33
- fontFamily: `'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif`,
34
- }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
35
- fontSize: numberFontMap[numberSize],
36
- fontWeight: 600,
37
- lineHeight: 1,
38
- }, children: value.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("span", { style: {
39
- fontSize: fontSizeMap[size],
40
- marginTop: '0.25rem',
41
- textTransform: 'uppercase',
42
- whiteSpace: 'nowrap',
43
- }, children: label })] }));
4
+ const TimerUnit = ({ label, value, size = 'md', background = '#f3f2f1', // SharePoint NeutralLighter
5
+ color = '#323130', // SharePoint NeutralPrimary
6
+ numberSize = 'md', }) => {
7
+ /**
8
+ * Label Typography - Based on your Engine Body Options
9
+ * sm: 11px, md: 13px, lg: 15px
10
+ */
11
+ const getLabelStyles = () => {
12
+ if (size === 'sm')
13
+ return { fontSize: '11px', lineHeight: 1.4, fontWeight: 400 };
14
+ if (size === 'lg')
15
+ return { fontSize: '15px', lineHeight: 1.5, fontWeight: 400 };
16
+ return { fontSize: '13px', lineHeight: 1.5, fontWeight: 400 }; // Default md
17
+ };
18
+ /**
19
+ * Number Typography - Based on your Engine Title/Heading Options
20
+ * sm (Heading): 18px, md (Title): 24px, lg (Hero): 32px
21
+ */
22
+ const getNumberStyles = () => {
23
+ if (numberSize === 'sm')
24
+ return { fontSize: '18px', fontWeight: 600, lineHeight: 1.4 };
25
+ if (numberSize === 'lg')
26
+ return { fontSize: '32px', fontWeight: 700, lineHeight: 1.2 };
27
+ return { fontSize: '24px', fontWeight: 600, lineHeight: 1.3 }; // Default md (Title)
28
+ };
29
+ const containerStyles = {
30
+ display: 'flex',
31
+ flexDirection: 'column',
32
+ alignItems: 'center',
33
+ justifyContent: 'center',
34
+ backgroundColor: background,
35
+ color: color,
36
+ // SharePoint Style: Subtle rounding and very light border
37
+ borderRadius: '2px',
38
+ border: '1px solid #edebe9',
39
+ // Spacing
40
+ padding: size === 'sm' ? '4px 8px' : size === 'md' ? '8px 12px' : '12px 16px',
41
+ minWidth: size === 'sm' ? '48px' : size === 'md' ? '64px' : '80px',
42
+ // Visuals
43
+ 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
44
+ transition: 'transform 0.1s ease, box-shadow 0.1s ease',
45
+ boxSizing: 'border-box',
46
+ fontFamily: '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, sans-serif',
47
+ };
48
+ 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 })] }));
44
49
  };
45
50
  exports.default = TimerUnit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "server-time-timer-yolabs-ui",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "FluentUI/SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",