@gem-sdk/core 1.12.0-next.31 → 1.12.0-next.36

package/dist/cjs/helpers/make-style.js

@@ -23,10 +23,10 @@ const makeStyleKey = (name)=>{
     ].map((key)=>`--${key}`);
 };
 const makeStyle = (style)=>{
-    return Object.fromEntries(Object.entries(style).map(([key, value])=>[
+    return removeNullUndefined(Object.fromEntries(Object.entries(style).map(([key, value])=>[
             `--${key}`,
             value
-        ]));
+        ])));
 };
 const makeStyleState = (name, value)=>{
     if (!value) return {};

package/dist/cjs/helpers/render.js

@@ -60,8 +60,11 @@ const template = (strings, ...keys)=>{
     });
     return str;
 };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const composeMemo = (fn, _)=>fn();
 
 exports.RenderIf = RenderIf;
+exports.composeMemo = composeMemo;
 exports.dataStringify = dataStringify;
 exports.props = props;
 exports.styles = styles;

package/dist/cjs/helpers/typography.js

@@ -1,5 +1,8 @@
 'use strict';
 
+var colors = require('./colors.js');
+var makeStyle = require('./make-style.js');
+
 const genTypoClass = (name)=>{
     return `g-${name}`;
 };
@@ -15,6 +18,71 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
+function getCustomCSSByDevice(typography, device) {
+    if (!typography || !device) return {};
+    const suffix = device === 'desktop' || !device ? '' : `-${device}`;
+    const { fontFamily  } = typography?.[device] ?? {};
+    return {
+        [`--size${suffix}`]: typography?.[device]?.fontSize,
+        [`--lh${suffix}`]: typography?.[device]?.lineHeight,
+        [`--fs${suffix}`]: typography?.[device]?.fontStyle,
+        [`--ff${suffix}`]: fontFamily ? `var(--g-font-${fontFamily}, ${fontFamily})` : undefined,
+        [`--weight${suffix}`]: typography?.[device]?.fontWeight,
+        [`--ls${suffix}`]: typography?.[device]?.letterSpacing
+    };
+}
+const composeTypography = (typography)=>{
+    if (!typography) return {};
+    return makeStyle.removeNullUndefined({
+        ...getCustomCSSByDevice(typography, 'desktop'),
+        ...getCustomCSSByDevice(typography, 'tablet'),
+        ...getCustomCSSByDevice(typography, 'mobile')
+    });
+};
+const composeTypographyV2 = (value, attrs)=>{
+    if (!value) return {};
+    return makeStyle.removeNullUndefined({
+        ...makeStyle.makeStyle({
+            fs: !attrs?.italic && value?.fontStyle,
+            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily}, ${value.fontFamily})` : undefined,
+            weight: !attrs?.bold && value?.fontWeight,
+            ls: value?.letterSpacing,
+            lh: value?.lineHeight
+        }),
+        ...makeStyle.makeStyleResponsive('size', value?.fontSize)
+    });
+};
+const composeTypographyAttr = (attrs)=>{
+    if (!attrs) return {};
+    return makeStyle.removeNullUndefined({
+        ...makeStyle.makeStyle({
+            fs: attrs?.italic && 'italic',
+            weight: attrs?.bold && 'bold',
+            c: colors.getSingleColorVariable(attrs?.color),
+            tt: attrs?.transform,
+            tdl: attrs?.underline ? 'underline' : undefined
+        })
+    });
+};
+const composeTypographyClassName = (typo, typography)=>{
+    return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
+};
+const composeTypographyStyle = (typo, typography, disableAttr)=>{
+    if (typo) {
+        return {
+            ...composeTypographyV2(typo.custom),
+            ...!disableAttr && composeTypographyAttr(typo.attrs)
+        };
+    }
+    return {
+        ...!typography?.type ? composeTypography(typography?.custom) : {}
+    };
+};
 
+exports.composeTypography = composeTypography;
+exports.composeTypographyAttr = composeTypographyAttr;
+exports.composeTypographyClassName = composeTypographyClassName;
 exports.composeTypographyCss = composeTypographyCss;
+exports.composeTypographyStyle = composeTypographyStyle;
+exports.composeTypographyV2 = composeTypographyV2;
 exports.genTypoClass = genTypoClass;

package/dist/cjs/index.js

@@ -178,7 +178,12 @@ exports.getGlobalColorStateStyle = colors.getGlobalColorStateStyle;
 exports.getGlobalColorStyle = colors.getGlobalColorStyle;
 exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
+exports.composeTypography = typography.composeTypography;
+exports.composeTypographyAttr = typography.composeTypographyAttr;
+exports.composeTypographyClassName = typography.composeTypographyClassName;
 exports.composeTypographyCss = typography.composeTypographyCss;
+exports.composeTypographyStyle = typography.composeTypographyStyle;
+exports.composeTypographyV2 = typography.composeTypographyV2;
 exports.genTypoClass = typography.genTypoClass;
 exports.composeCornerCss = radius.composeCornerCss;
 exports.composeRadius = radius.composeRadius;
@@ -192,6 +197,7 @@ exports.fpixel = fpixel;
 exports.gtag = gtag;
 exports.tiktokpixel = tiktokpixel;
 exports.RenderIf = render.RenderIf;
+exports.composeMemo = render.composeMemo;
 exports.dataStringify = render.dataStringify;
 exports.props = render.props;
 exports.styles = render.styles;

package/dist/esm/helpers/make-style.js

@@ -21,10 +21,10 @@ const makeStyleKey = (name)=>{
     ].map((key)=>`--${key}`);
 };
 const makeStyle = (style)=>{
-    return Object.fromEntries(Object.entries(style).map(([key, value])=>[
+    return removeNullUndefined(Object.fromEntries(Object.entries(style).map(([key, value])=>[
             `--${key}`,
             value
-        ]));
+        ])));
 };
 const makeStyleState = (name, value)=>{
     if (!value) return {};

package/dist/esm/helpers/render.js

@@ -58,5 +58,7 @@ const template = (strings, ...keys)=>{
     });
     return str;
 };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const composeMemo = (fn, _)=>fn();
 
-export { RenderIf, dataStringify, props, styles, template };
+export { RenderIf, composeMemo, dataStringify, props, styles, template };

package/dist/esm/helpers/typography.js

@@ -1,3 +1,6 @@
+import { getSingleColorVariable } from './colors.js';
+import { removeNullUndefined, makeStyle, makeStyleResponsive } from './make-style.js';
+
 const genTypoClass = (name)=>{
     return `g-${name}`;
 };
@@ -13,5 +16,65 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
+function getCustomCSSByDevice(typography, device) {
+    if (!typography || !device) return {};
+    const suffix = device === 'desktop' || !device ? '' : `-${device}`;
+    const { fontFamily  } = typography?.[device] ?? {};
+    return {
+        [`--size${suffix}`]: typography?.[device]?.fontSize,
+        [`--lh${suffix}`]: typography?.[device]?.lineHeight,
+        [`--fs${suffix}`]: typography?.[device]?.fontStyle,
+        [`--ff${suffix}`]: fontFamily ? `var(--g-font-${fontFamily}, ${fontFamily})` : undefined,
+        [`--weight${suffix}`]: typography?.[device]?.fontWeight,
+        [`--ls${suffix}`]: typography?.[device]?.letterSpacing
+    };
+}
+const composeTypography = (typography)=>{
+    if (!typography) return {};
+    return removeNullUndefined({
+        ...getCustomCSSByDevice(typography, 'desktop'),
+        ...getCustomCSSByDevice(typography, 'tablet'),
+        ...getCustomCSSByDevice(typography, 'mobile')
+    });
+};
+const composeTypographyV2 = (value, attrs)=>{
+    if (!value) return {};
+    return removeNullUndefined({
+        ...makeStyle({
+            fs: !attrs?.italic && value?.fontStyle,
+            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily}, ${value.fontFamily})` : undefined,
+            weight: !attrs?.bold && value?.fontWeight,
+            ls: value?.letterSpacing,
+            lh: value?.lineHeight
+        }),
+        ...makeStyleResponsive('size', value?.fontSize)
+    });
+};
+const composeTypographyAttr = (attrs)=>{
+    if (!attrs) return {};
+    return removeNullUndefined({
+        ...makeStyle({
+            fs: attrs?.italic && 'italic',
+            weight: attrs?.bold && 'bold',
+            c: getSingleColorVariable(attrs?.color),
+            tt: attrs?.transform,
+            tdl: attrs?.underline ? 'underline' : undefined
+        })
+    });
+};
+const composeTypographyClassName = (typo, typography)=>{
+    return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
+};
+const composeTypographyStyle = (typo, typography, disableAttr)=>{
+    if (typo) {
+        return {
+            ...composeTypographyV2(typo.custom),
+            ...!disableAttr && composeTypographyAttr(typo.attrs)
+        };
+    }
+    return {
+        ...!typography?.type ? composeTypography(typography?.custom) : {}
+    };
+};
 
-export { composeTypographyCss, genTypoClass };
+export { composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, genTypoClass };

package/dist/esm/index.js

@@ -39,7 +39,7 @@ export { genVariable } from './helpers/css-variable.js';
 export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { isDefined } from './helpers/is-defined.js';
 export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
-export { composeTypographyCss, genTypoClass } from './helpers/typography.js';
+export { composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, genTypoClass } from './helpers/typography.js';
 export { composeCornerCss, composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 import * as fpixel from './helpers/tracking/fpixel.js';
@@ -48,7 +48,7 @@ import * as gtag from './helpers/tracking/gtag.js';
 export { gtag };
 import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
-export { RenderIf, dataStringify, props, styles, template } from './helpers/render.js';
+export { RenderIf, composeMemo, dataStringify, props, styles, template } from './helpers/render.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
 export { composeSize, composeSizeCss, genSizeClass } from './helpers/size.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';