@janbox/storefront-ui 1.0.13 → 1.0.14

package/dist/theme/provider.jsx

@@ -0,0 +1,245 @@
+import { Global, ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { getColorVar } from './palette';
+import { flatten } from 'flat';
+import { flatMap } from 'lodash-es';
+import { getTypographyVar } from './typography';
+export const ThemeProvider = ({ theme, children }) => {
+    return (<EmotionThemeProvider theme={theme}>
+      <Global styles={createGlobalStyle(theme)}/>
+      {children}
+    </EmotionThemeProvider>);
+};
+const createGlobalStyle = ({ palette, typography }) => {
+    const flattenPalette = flatten(palette);
+    const colorVars = Object.fromEntries(Object.keys(flattenPalette).map((key) => [getColorVar(key, false), flattenPalette[key]]));
+    const typographyVars = Object.fromEntries(flatMap(Object.keys(typography).map((key) => {
+        const typographyVar = getTypographyVar(key, false);
+        const { fontSize, lineHeight } = typography[key];
+        return [
+            [typographyVar.fontSize, fontSize],
+            [typographyVar.lineHeight, lineHeight],
+        ];
+    })));
+    return {
+        // ─── Reset / Preflight ───────────────────────────────────────────────────
+        // 1. Prevent padding and border from affecting element width.
+        // 2. Allow adding a border to an element by just adding a border-width.
+        '*, ::before, ::after': {
+            boxSizing: 'border-box', // 1
+            borderWidth: 0, // 2
+            borderStyle: 'solid', // 2
+            borderColor: getColorVar('border.default'),
+        },
+        // 1. Use a consistent sensible line-height in all browsers.
+        // 2. Prevent adjustments of font size after orientation changes in iOS.
+        // 3. Use a more readable tab size.
+        // 4. Use the user's configured `sans` font-family by default.
+        // 5. Use the user's configured `sans` font-feature-settings by default.
+        // 6. Use the user's configured `sans` font-variation-settings by default.
+        // 7. Disable tap highlights on iOS
+        'html, :host': {
+            lineHeight: 1.5, // 1
+            WebkitTextSizeAdjust: '100%', // 2
+            MozTabSize: 4, // 3
+            tabSize: 4, // 3
+            fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', // 4
+            fontFeatureSettings: 'normal', // 5
+            fontVariationSettings: 'normal', // 6
+            WebkitTapHighlightColor: 'transparent', // 7
+        },
+        // 1. Remove the margin in all browsers.
+        // 2. Inherit line-height from `html` — overridden below by app-level typography.
+        body: {
+            margin: 0, // 1
+            // ─── App-level styles ───────────────────────────────────────────
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100dvh',
+            color: getColorVar('neutral.600'),
+            backgroundColor: getColorVar('background.default'),
+            fontSize: getTypographyVar('sm').fontSize,
+            lineHeight: getTypographyVar('sm').lineHeight,
+        },
+        // 1. Add the correct height in Firefox.
+        // 2. Correct the inheritance of border color in Firefox.
+        // 3. Ensure horizontal rules are visible by default.
+        hr: {
+            height: 0, // 1
+            color: 'inherit', // 2
+            borderTopWidth: '1px', // 3
+        },
+        // Add the correct text decoration in Chrome, Edge, and Safari.
+        'abbr:where([title])': {
+            textDecoration: 'underline dotted',
+        },
+        // Remove the default font size and weight for headings.
+        'h1, h2, h3, h4, h5, h6': {
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+        },
+        // Reset links to optimize for opt-in styling instead of opt-out.
+        a: {
+            color: 'inherit',
+            textDecoration: 'inherit',
+        },
+        // Add the correct font weight in Edge and Safari.
+        'b, strong': {
+            fontWeight: 'bolder',
+        },
+        // 1. Use the user's configured `mono` font-family by default.
+        // 2. Use the user's configured `mono` font-feature-settings by default.
+        // 3. Use the user's configured `mono` font-variation-settings by default.
+        // 4. Correct the odd `em` font sizing in all browsers.
+        'code, kbd, samp, pre': {
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', // 1
+            fontFeatureSettings: 'normal', // 2
+            fontVariationSettings: 'normal', // 3
+            fontSize: '1em', // 4
+        },
+        // Add the correct font size in all browsers.
+        small: {
+            fontSize: '80%',
+        },
+        // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+        'sub, sup': {
+            fontSize: '75%',
+            lineHeight: 0,
+            position: 'relative',
+            verticalAlign: 'baseline',
+        },
+        sub: {
+            bottom: '-0.25em',
+        },
+        sup: {
+            top: '-0.5em',
+        },
+        // 1. Remove text indentation from table contents in Chrome and Safari.
+        // 2. Correct table border color inheritance in all Chrome and Safari.
+        // 3. Remove gaps between table borders by default.
+        table: {
+            textIndent: 0, // 1
+            borderColor: 'inherit', // 2
+            borderCollapse: 'collapse', // 3
+        },
+        // 1. Change the font styles in all browsers.
+        // 2. Remove the margin in Firefox and Safari.
+        // 3. Remove default padding in all browsers.
+        'button, input, optgroup, select, textarea': {
+            fontFamily: 'inherit', // 1
+            fontFeatureSettings: 'inherit', // 1
+            fontVariationSettings: 'inherit', // 1
+            fontSize: '100%', // 1
+            fontWeight: 'inherit', // 1
+            lineHeight: 'inherit', // 1
+            letterSpacing: 'inherit', // 1
+            color: 'inherit', // 1
+            margin: 0, // 2
+            padding: 0, // 3
+        },
+        // Remove the inheritance of text transform in Edge and Firefox.
+        'button, select': {
+            textTransform: 'none',
+        },
+        // 1. Correct the inability to style clickable types in iOS and Safari.
+        // 2. Remove default button styles.
+        "button, input:where([type='button']), input:where([type='reset']), input:where([type='submit'])": {
+            WebkitAppearance: 'button', // 1
+            backgroundColor: 'transparent', // 2
+            backgroundImage: 'none', // 2
+        },
+        // Use the modern Firefox focus style for all focusable elements.
+        ':-moz-focusring': {
+            outline: 'auto',
+        },
+        // Remove the additional `:invalid` styles in Firefox.
+        ':-moz-ui-invalid': {
+            boxShadow: 'none',
+        },
+        // Add the correct vertical alignment in Chrome and Firefox.
+        progress: {
+            verticalAlign: 'baseline',
+        },
+        // Correct the cursor style of increment and decrement buttons in Safari.
+        '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
+            height: 'auto',
+        },
+        // 1. Correct the odd appearance in Chrome and Safari.
+        // 2. Correct the outline style in Safari.
+        "[type='search']": {
+            WebkitAppearance: 'textfield', // 1
+            outlineOffset: '-2px', // 2
+        },
+        // Remove the inner padding in Chrome and Safari on macOS.
+        '::-webkit-search-decoration': {
+            WebkitAppearance: 'none',
+        },
+        // 1. Correct the inability to style clickable types in iOS and Safari.
+        // 2. Change font properties to `inherit` in Safari.
+        '::-webkit-file-upload-button': {
+            WebkitAppearance: 'button', // 1
+            font: 'inherit', // 2
+        },
+        // Add the correct display in Chrome and Safari.
+        summary: {
+            display: 'list-item',
+        },
+        // Removes the default spacing and border for appropriate elements.
+        'blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre': {
+            margin: 0,
+        },
+        fieldset: {
+            margin: 0,
+            padding: 0,
+        },
+        legend: {
+            padding: 0,
+        },
+        'ol, ul, menu': {
+            listStyle: 'none',
+            margin: 0,
+            padding: 0,
+        },
+        // Reset default styling for dialogs.
+        dialog: {
+            padding: 0,
+        },
+        // Prevent resizing textareas horizontally by default.
+        textarea: {
+            resize: 'vertical',
+        },
+        // 1. Reset the default placeholder opacity in Firefox.
+        // 2. Set the default placeholder color to gray 400.
+        'input::placeholder, textarea::placeholder': {
+            opacity: 1, // 1
+            color: getColorVar('neutral.400'),
+        },
+        // Set the default cursor for buttons.
+        "button, [role='button']": {
+            cursor: 'pointer',
+        },
+        // Make sure disabled buttons don't get the pointer cursor.
+        ':disabled': {
+            cursor: 'default',
+        },
+        // 1. Make replaced elements `display: block` by default.
+        // 2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
+        'img, svg, video, canvas, audio, iframe, embed, object': {
+            display: 'block', // 1
+            verticalAlign: 'middle', // 2
+        },
+        // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
+        'img, video': {
+            maxWidth: '100%',
+            height: 'auto',
+        },
+        // Make elements with the HTML hidden attribute stay hidden by default.
+        "[hidden]:where(:not([hidden='until-found']))": {
+            display: 'none',
+        },
+        // ─── CSS Variables ───────────────────────────────────────────────────────
+        ':root': {
+            ...colorVars,
+            ...typographyVars,
+        },
+    };
+};

package/dist/theme/screens.d.ts

@@ -8,4 +8,3 @@ export declare const screens: Screen[];
 export declare const getSmallerScreens: (screen: Screen) => Screen[];
 export declare const mediaQuery: (value: Screen | number) => string;
 export {};
-//# sourceMappingURL=screens.d.ts.map

package/dist/theme/screens.js

@@ -1,24 +1,14 @@
-import { isNumber } from "lodash-es";
-const breakpoint = {
-  xs: { minWidth: 0, padding: 16 },
-  // mobile
-  sm: { minWidth: 768, padding: 28 },
-  // tablet
-  md: { minWidth: 1280, padding: 40 },
-  // desktop
-  lg: { minWidth: 1680, padding: 40 }
-  // large desktop
-};
-const screens = ["xs", "sm", "md", "lg"];
-const getSmallerScreens = (screen) => {
-  return screens.slice(0, screens.indexOf(screen)).reverse();
-};
-const mediaQuery = (value) => {
-  return `@media (min-width: ${isNumber(value) ? value : breakpoint[value].minWidth}px)`;
-};
-export {
-  breakpoint,
-  getSmallerScreens,
-  mediaQuery,
-  screens
+import { isNumber } from 'lodash-es';
+export const breakpoint = {
+    xs: { minWidth: 0, padding: 16 }, // mobile
+    sm: { minWidth: 768, padding: 28 }, // tablet
+    md: { minWidth: 1280, padding: 40 }, // desktop
+    lg: { minWidth: 1680, padding: 40 }, // large desktop
+};
+export const screens = ['xs', 'sm', 'md', 'lg'];
+export const getSmallerScreens = (screen) => {
+    return screens.slice(0, screens.indexOf(screen)).reverse();
+};
+export const mediaQuery = (value) => {
+    return `@media (min-width: ${isNumber(value) ? value : breakpoint[value].minWidth}px)`;
 };

package/dist/theme/typography.d.ts

@@ -16,4 +16,3 @@ declare module '@emotion/react' {
     }
 }
 export {};
-//# sourceMappingURL=typography.d.ts.map

package/dist/theme/typography.js

@@ -1,29 +1,24 @@
-const getTypographyVar = (key, fullVar = true) => {
-  const value = `--text-${key}--{{property}}`;
-  const cssVar = fullVar ? `var(${value})` : value;
-  return {
-    fontSize: cssVar.replace("{{property}}", "font-size"),
-    lineHeight: cssVar.replace("{{property}}", "line-height")
-  };
+export const getTypographyVar = (key, fullVar = true) => {
+    const value = `--text-${key}--{{property}}`;
+    const cssVar = fullVar ? `var(${value})` : value;
+    return {
+        fontSize: cssVar.replace('{{property}}', 'font-size'),
+        lineHeight: cssVar.replace('{{property}}', 'line-height'),
+    };
 };
-const typographyVars = {
-  xs: getTypographyVar("xs"),
-  sm: getTypographyVar("sm"),
-  base: getTypographyVar("base"),
-  lg: getTypographyVar("lg"),
-  xl: getTypographyVar("xl"),
-  "2xl": getTypographyVar("2xl"),
-  "3xl": getTypographyVar("3xl"),
-  "4xl": getTypographyVar("4xl"),
-  "5xl": getTypographyVar("5xl"),
-  "6xl": getTypographyVar("6xl")
+export const typographyVars = {
+    xs: getTypographyVar('xs'),
+    sm: getTypographyVar('sm'),
+    base: getTypographyVar('base'),
+    lg: getTypographyVar('lg'),
+    xl: getTypographyVar('xl'),
+    '2xl': getTypographyVar('2xl'),
+    '3xl': getTypographyVar('3xl'),
+    '4xl': getTypographyVar('4xl'),
+    '5xl': getTypographyVar('5xl'),
+    '6xl': getTypographyVar('6xl'),
 };
-const getSmallerTypographyVariants = (variant) => {
-  const allVariants = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
-  return allVariants.slice(0, allVariants.indexOf(variant)).reverse();
-};
-export {
-  getSmallerTypographyVariants,
-  getTypographyVar,
-  typographyVars
+export const getSmallerTypographyVariants = (variant) => {
+    const allVariants = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
+    return allVariants.slice(0, allVariants.indexOf(variant)).reverse();
 };

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@emotion/react';
-import { Screen } from '../theme';
 import type * as CSS from 'csstype';
+import { Screen } from '../theme';
 export type Nullable<T> = T | null;
 export type Dict<T> = Record<string, T>;
 export type ShallowMerge<T1, T2> = Omit<T1, keyof T2> & T2;
@@ -22,4 +22,3 @@ export type StyledCSS = Omit<CSSObject, keyof CSS.Properties | keyof CSS.Pseudos
 export type PropsWithCSS<T extends object = object> = T & {
     css?: StyledCSS;
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/types/index.js

@@ -1 +1 @@
-
+export {};

package/dist/utils/common.d.ts

@@ -15,5 +15,4 @@ export declare const getDecimalDigits: (value: number) => number;
 export declare const parseNumber: (text?: string | number, type?: "int" | "float", separator?: string) => number | undefined;
 export declare function omitEmpty<T extends object>(obj?: T): T;
 export declare const getEnumValues: <T extends Dict<string | number>>(enumObject: T) => Array<T[keyof T]>;
-export declare function parseSvgString(source: string, uniqueId: string): ReactElement<import('react').SVGProps<SVGSVGElement>, "svg"> | null;
-//# sourceMappingURL=common.d.ts.map
+export declare function parseSvgString(source: string, uniqueId: string): ReactElement<import("react").SVGProps<SVGSVGElement>, "svg"> | null;

package/dist/utils/common.js

@@ -1,132 +1,130 @@
-import { isValidElement } from "react";
-import parse from "html-react-parser";
-import { isNil, isBoolean, omitBy, isArray, isString, parseInt } from "lodash-es";
-import { Booleanish } from "../constants/index.js";
-const ensureArray = (val) => {
-  if (isNil(val)) {
-    return [];
-  }
-  if (Array.isArray(val)) {
-    return val;
-  }
-  return [val];
-};
-const ensureBoolean = (val) => {
-  if (isNil(val)) {
-    return false;
-  }
-  if (isBoolean(val)) {
-    return val;
-  }
-  return val === Booleanish.True;
-};
-const normalizeSearchText = (str, options = {}) => {
-  const { lower = true, trim = true } = options ?? {};
-  let normalized = str == null ? void 0 : str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[đĐ]/g, (m) => m === "đ" ? "d" : "D");
-  if (lower) {
-    normalized = normalized == null ? void 0 : normalized.toLowerCase();
-  }
-  if (trim) {
-    normalized = normalized == null ? void 0 : normalized.trim();
-  }
-  return normalized ?? "";
-};
-const matchSearch = (text, searchText, options) => {
-  const normalizedSearchText = normalizeSearchText(searchText, options);
-  return ensureArray(text).some((entry) => {
-    return normalizeSearchText(entry, options).includes(normalizedSearchText);
-  });
+import { isValidElement } from 'react';
+import parse from 'html-react-parser';
+import { isArray, isBoolean, isNil, isString, omitBy, parseInt } from 'lodash-es';
+import { Booleanish } from '../constants';
+export const ensureArray = (val) => {
+    if (isNil(val)) {
+        return [];
+    }
+    if (Array.isArray(val)) {
+        return val;
+    }
+    return [val];
 };
-const formatNumber = (value, { lng, ...options }) => {
-  try {
-    return new Intl.NumberFormat(lng, {
-      minimumFractionDigits: 0,
-      ...options
-    }).format(value);
-  } catch (error) {
-    return value.toString();
-  }
+export const ensureBoolean = (val) => {
+    if (isNil(val)) {
+        return false;
+    }
+    if (isBoolean(val)) {
+        return val;
+    }
+    return val === Booleanish.True;
 };
-const getDecimalDigits = (value) => {
-  var _a;
-  return ((_a = value.toString().split(".").at(1)) == null ? void 0 : _a.length) ?? 0;
+export const normalizeSearchText = (str, options = {}) => {
+    const { lower = true, trim = true } = options ?? {};
+    let normalized = str
+        ?.normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[đĐ]/g, (m) => (m === 'đ' ? 'd' : 'D'));
+    if (lower) {
+        normalized = normalized?.toLowerCase();
+    }
+    if (trim) {
+        normalized = normalized?.trim();
+    }
+    return normalized ?? '';
 };
-const parseNumber = (text, type = "int", separator = ",") => {
-  const parseFunc = type === "int" ? parseInt : parseFloat;
-  const parsedValue = parseFunc((text ?? "").toString().trim().replaceAll(separator, ""));
-  return isNaN(parsedValue) ? void 0 : parsedValue;
+export const matchSearch = (text, searchText, options) => {
+    const normalizedSearchText = normalizeSearchText(searchText, options);
+    return ensureArray(text).some((entry) => {
+        return normalizeSearchText(entry, options).includes(normalizedSearchText);
+    });
 };
-function omitEmpty(obj) {
-  if (isNil(obj)) return {};
-  return omitBy(obj, (value) => {
-    if (isNil(value)) {
-      return true;
+export const formatNumber = (value, { lng, ...options }) => {
+    try {
+        return new Intl.NumberFormat(lng, {
+            minimumFractionDigits: 0,
+            ...options,
+        }).format(value);
     }
-    if (isArray(value) || isString(value)) {
-      return value.length === 0;
+    catch (error) {
+        return value.toString();
     }
-    return false;
-  });
-}
-const getEnumValues = (enumObject) => {
-  return Object.keys(enumObject).filter((key) => isNaN(Number(key))).map((key) => enumObject[key]);
 };
-function parseSvgString(source, uniqueId) {
-  const createUniqueId = (originalId) => {
-    return `${originalId}-${uniqueId}`;
-  };
-  const options = {
-    replace(domNode) {
-      if (domNode.type === "tag" && "attribs" in domNode && domNode.attribs) {
-        const el = domNode;
-        if (el.attribs.id) {
-          el.attribs.id = createUniqueId(el.attribs.id);
+export const getDecimalDigits = (value) => {
+    return value.toString().split('.').at(1)?.length ?? 0;
+};
+export const parseNumber = (text, type = 'int', separator = ',') => {
+    const parseFunc = type === 'int' ? parseInt : parseFloat;
+    const parsedValue = parseFunc((text ?? '').toString().trim().replaceAll(separator, ''));
+    return isNaN(parsedValue) ? undefined : parsedValue;
+};
+export function omitEmpty(obj) {
+    if (isNil(obj))
+        return {};
+    return omitBy(obj, (value) => {
+        if (isNil(value)) {
+            return true;
         }
-        const urlRefAttrs = [
-          "fill",
-          "stroke",
-          "filter",
-          "clip-path",
-          "mask",
-          "marker-start",
-          "marker-mid",
-          "marker-end",
-          "style"
-        ];
-        for (const attr of urlRefAttrs) {
-          const value = el.attribs[attr];
-          if (!value) continue;
-          if (attr === "style") {
-            const match = value == null ? void 0 : value.match(/url\(#(.+?)\)/);
-            if (match) {
-              el.attribs[attr] = value.replace(match[1], createUniqueId(match[1]));
-            }
-          } else {
-            const match = value == null ? void 0 : value.match(/^url\(#(.+?)\)$/);
-            if (match) {
-              el.attribs[attr] = `url(#${createUniqueId(match[1])})`;
-            }
-          }
+        if (isArray(value) || isString(value)) {
+            return value.length === 0;
         }
-        return el;
-      }
-      return void 0;
-    },
-    trim: true
-  };
-  const parsed = parse(source, options);
-  const validType = "svg";
-  return isValidElement(parsed) && parsed.type === validType ? parsed : null;
+        return false;
+    });
 }
-export {
-  ensureArray,
-  ensureBoolean,
-  formatNumber,
-  getDecimalDigits,
-  getEnumValues,
-  matchSearch,
-  normalizeSearchText,
-  omitEmpty,
-  parseNumber,
-  parseSvgString
+export const getEnumValues = (enumObject) => {
+    return Object.keys(enumObject)
+        .filter((key) => isNaN(Number(key)))
+        .map((key) => enumObject[key]);
 };
+export function parseSvgString(source, uniqueId) {
+    const createUniqueId = (originalId) => {
+        return `${originalId}-${uniqueId}`;
+    };
+    const options = {
+        replace(domNode) {
+            if (domNode.type === 'tag' && 'attribs' in domNode && domNode.attribs) {
+                const el = domNode;
+                if (el.attribs.id) {
+                    el.attribs.id = createUniqueId(el.attribs.id);
+                }
+                const urlRefAttrs = [
+                    'fill',
+                    'stroke',
+                    'filter',
+                    'clip-path',
+                    'mask',
+                    'marker-start',
+                    'marker-mid',
+                    'marker-end',
+                    'style',
+                ];
+                for (const attr of urlRefAttrs) {
+                    const value = el.attribs[attr];
+                    if (!value)
+                        continue;
+                    if (attr === 'style') {
+                        const match = value?.match(/url\(#(.+?)\)/);
+                        if (match) {
+                            el.attribs[attr] = value.replace(match[1], createUniqueId(match[1]));
+                        }
+                    }
+                    else {
+                        const match = value?.match(/^url\(#(.+?)\)$/);
+                        if (match) {
+                            el.attribs[attr] = `url(#${createUniqueId(match[1])})`;
+                        }
+                    }
+                }
+                return el;
+            }
+            return undefined;
+        },
+        trim: true,
+    };
+    const parsed = parse(source, options);
+    const validType = 'svg';
+    return isValidElement(parsed) && parsed.type === validType
+        ? parsed
+        : null;
+}

package/dist/utils/index.d.ts

@@ -39,4 +39,3 @@ export declare const getSizeVariantState: (size?: SizeVariant) => SizeVariantSta
 export declare const getResponsiveProp: <O extends object, P extends Paths<O>, R = Get<O, `${P}`>>(record: ResponsiveDesign<O>, field: P, screen: Screen, options?: {
     condition?: (value?: R) => boolean;
 }) => R;
-//# sourceMappingURL=index.d.ts.map