@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/theme/provider.js

@@ -0,0 +1,297 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { ThemeProvider as ThemeProvider$1, Global } from "@emotion/react";
+import { getColorVar } from "./palette.js";
+import { flatten } from "flat";
+import { flatMap } from "lodash-es";
+import { getTypographyVar } from "./typography.js";
+const ThemeProvider = ({ theme, children }) => {
+  return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme, children: [
+    /* @__PURE__ */ jsx(Global, { styles: createGlobalStyle(theme) }),
+    children
+  ] });
+};
+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
+    }
+  };
+};
+export {
+  ThemeProvider
+};

package/dist/theme/screens.d.ts

@@ -8,3 +8,4 @@ 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../src/theme/screens.ts"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAKvD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,EAA6B,CAAC;AAE1D,eAAO,MAAM,iBAAiB,WAAY,MAAM,aAE/C,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,MAAM,GAAG,MAAM,WAEhD,CAAC"}

package/dist/theme/screens.js

@@ -1,14 +1,24 @@
-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)`;
+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
 };

package/dist/theme/typography.d.ts

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

package/dist/theme/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAC7B,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,qBAAqB,OAAO,CAAC;;;CASvE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,eAW5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,YAAa,qBAAqB,4BAI1E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAAC;AAEtF,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,UAAU,EAAE,eAAe,CAAC;KAC7B;CACF"}

package/dist/theme/typography.js

@@ -1,24 +1,29 @@
-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 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 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 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 getSmallerTypographyVariants = (variant) => {
-    const allVariants = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
-    return allVariants.slice(0, allVariants.indexOf(variant)).reverse();
+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
 };

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@emotion/react';
-import type * as CSS from 'csstype';
 import { Screen } from '../theme';
+import type * as CSS from 'csstype';
 export type Nullable<T> = T | null;
 export type Dict<T> = Record<string, T>;
 export type ShallowMerge<T1, T2> = Omit<T1, keyof T2> & T2;
@@ -22,3 +22,4 @@ 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AAEnC,MAAM,MAAM,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAExC,MAAM,MAAM,YAAY,CAAC,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC;AAE3D,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAErG,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D;;;;;;GAMG;AAEH,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,CAAC,OAAO,CAAC,GAC/E,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG;KAAG,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS;CAAE,CAAC;AAEvE,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG;IACxD,GAAG,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC"}

package/dist/types/index.js

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

package/dist/utils/common.d.ts

@@ -15,4 +15,5 @@ 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;
+export declare function parseSvgString(source: string, uniqueId: string): ReactElement<import('react').SVGProps<SVGSVGElement>, "svg"> | null;
+//# sourceMappingURL=common.d.ts.map

package/dist/utils/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,YAAY,EAAO,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAO,MAAM,WAAW,GAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,QAU1C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,OAAO,CAAC,YAUlF,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,MAAM,YACH;IACP,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,WAkBF,CAAC;AAEF,eAAO,MAAM,WAAW,SAChB,MAAM,GAAG,MAAM,EAAE,cACX,MAAM,YACR,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,YAOpD,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,GAAG;IAC3D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,uBAAuB,mBAAmB,WASnF,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,MAAM,WAE7C,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,MAAM,SAAQ,KAAK,GAAG,OAAO,2CAIxE,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAWtD;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,KAGtC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CACrD,CAAC;AAEF,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,uEAuD9D"}