@janbox/storefront-ui 1.0.0 → 1.0.2

package/dist/theme/provider.cjs

@@ -1,303 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@emotion/react");
-const theme_palette = require("./palette.cjs");
-const flat = require("flat");
-const lodashEs = require("lodash-es");
-const theme_typography = require("./typography.cjs");
-const ThemeProvider = ({ theme, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.ThemeProvider, { theme, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: createGlobalStyle(theme) }),
-    children
-  ] });
-};
-const createGlobalStyle = ({ palette, typography }) => {
-  const flattenPalette = flat.flatten(palette);
-  const colorVars = Object.fromEntries(
-    Object.keys(flattenPalette).map((key) => [
-      theme_palette.getColorVar(key, false),
-      flattenPalette[key]
-    ])
-  );
-  const typographyVars = Object.fromEntries(
-    lodashEs.flatMap(
-      Object.keys(typography).map((key) => {
-        const typographyVar = theme_typography.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: theme_palette.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: theme_palette.getColorVar("neutral.600"),
-      backgroundColor: theme_palette.getColorVar("background.default"),
-      fontSize: theme_typography.getTypographyVar("sm").fontSize,
-      lineHeight: theme_typography.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: theme_palette.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
-    }
-  };
-};
-exports.ThemeProvider = ThemeProvider;

package/dist/theme/screens.cjs

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lodashEs = require("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: ${lodashEs.isNumber(value) ? value : breakpoint[value].minWidth}px)`;
-};
-exports.breakpoint = breakpoint;
-exports.getSmallerScreens = getSmallerScreens;
-exports.mediaQuery = mediaQuery;
-exports.screens = screens;

package/dist/theme/typography.cjs

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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")
-};
-const getSmallerTypographyVariants = (variant) => {
-  const allVariants = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
-  return allVariants.slice(0, allVariants.indexOf(variant)).reverse();
-};
-exports.getSmallerTypographyVariants = getSmallerTypographyVariants;
-exports.getTypographyVar = getTypographyVar;
-exports.typographyVars = typographyVars;

package/dist/types/index.cjs

@@ -1 +0,0 @@
-"use strict";

package/dist/utils/common.cjs

@@ -1,139 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const parse = require("html-react-parser");
-const lodashEs = require("lodash-es");
-const slugify = require("slugify");
-const constants_index = require("../constants/index.cjs");
-const ensureArray = (val) => {
-  if (lodashEs.isNil(val)) {
-    return [];
-  }
-  if (Array.isArray(val)) {
-    return val;
-  }
-  return [val];
-};
-const ensureBoolean = (val) => {
-  if (lodashEs.isNil(val)) {
-    return false;
-  }
-  if (lodashEs.isBoolean(val)) {
-    return val;
-  }
-  return val === constants_index.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);
-  });
-};
-const createSlug = (text) => {
-  return slugify(lodashEs.kebabCase(text.toLowerCase()), {
-    lower: true
-  });
-};
-const formatNumber = (value, { lng, ...options }) => {
-  try {
-    return new Intl.NumberFormat(lng, {
-      minimumFractionDigits: 0,
-      ...options
-    }).format(value);
-  } catch (error) {
-    return value.toString();
-  }
-};
-const getDecimalDigits = (value) => {
-  var _a;
-  return ((_a = value.toString().split(".").at(1)) == null ? void 0 : _a.length) ?? 0;
-};
-const parseNumber = (text, type = "int", separator = ",") => {
-  const parseFunc = type === "int" ? lodashEs.parseInt : parseFloat;
-  const parsedValue = parseFunc((text ?? "").toString().trim().replaceAll(separator, ""));
-  return isNaN(parsedValue) ? void 0 : parsedValue;
-};
-function omitEmpty(obj) {
-  if (lodashEs.isNil(obj)) return {};
-  return lodashEs.omitBy(obj, (value) => {
-    if (lodashEs.isNil(value)) {
-      return true;
-    }
-    if (lodashEs.isArray(value) || lodashEs.isString(value)) {
-      return value.length === 0;
-    }
-    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);
-        }
-        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])})`;
-            }
-          }
-        }
-        return el;
-      }
-      return void 0;
-    },
-    trim: true
-  };
-  const parsed = parse(source, options);
-  const validType = "svg";
-  return react.isValidElement(parsed) && parsed.type === validType ? parsed : null;
-}
-exports.createSlug = createSlug;
-exports.ensureArray = ensureArray;
-exports.ensureBoolean = ensureBoolean;
-exports.formatNumber = formatNumber;
-exports.getDecimalDigits = getDecimalDigits;
-exports.getEnumValues = getEnumValues;
-exports.matchSearch = matchSearch;
-exports.normalizeSearchText = normalizeSearchText;
-exports.omitEmpty = omitEmpty;
-exports.parseNumber = parseNumber;
-exports.parseSvgString = parseSvgString;

package/dist/utils/emotion-helpers.cjs

@@ -1,145 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
-const theme_screens = require("../theme/screens.cjs");
-const theme_typography = require("../theme/typography.cjs");
-const scrollbarNone = {
-  scrollbarWidth: "none",
-  "&::-webkit-scrollbar": { display: "none" }
-};
-const pulseKeyframes = react.keyframes`
-  50% { opacity: 0.5; }
-`;
-const spinKeyframes = react.keyframes`
-  to { transform: rotate(360deg); }
-`;
-const animatePulse = {
-  animation: `${pulseKeyframes} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`
-};
-const animateSpin = {
-  animation: `${spinKeyframes} 1s linear infinite`
-};
-const ptBlock = {
-  paddingTop: "1rem",
-  [theme_screens.mediaQuery("sm")]: { paddingTop: "1.5rem" },
-  [theme_screens.mediaQuery("md")]: { paddingTop: "2rem" },
-  [theme_screens.mediaQuery("lg")]: { paddingTop: "2.5rem" }
-};
-const pbBlock = {
-  paddingBottom: "1rem",
-  [theme_screens.mediaQuery("sm")]: { paddingBottom: "1.5rem" },
-  [theme_screens.mediaQuery("md")]: { paddingBottom: "2rem" },
-  [theme_screens.mediaQuery("lg")]: { paddingBottom: "2.5rem" }
-};
-const pyBlock = {
-  paddingTop: "1rem",
-  paddingBottom: "1rem",
-  [theme_screens.mediaQuery("sm")]: { paddingTop: "1.5rem", paddingBottom: "1.5rem" },
-  [theme_screens.mediaQuery("md")]: { paddingTop: "2rem", paddingBottom: "2rem" },
-  [theme_screens.mediaQuery("lg")]: { paddingTop: "2.5rem", paddingBottom: "2.5rem" }
-};
-const textHeading6 = {
-  fontSize: theme_typography.getTypographyVar("lg").fontSize,
-  lineHeight: theme_typography.getTypographyVar("lg").lineHeight,
-  [theme_screens.mediaQuery(theme_screens.breakpoint.md.minWidth)]: {
-    fontSize: theme_typography.getTypographyVar("xl").fontSize,
-    lineHeight: theme_typography.getTypographyVar("xl").lineHeight
-  }
-};
-const textHeading5 = {
-  fontSize: theme_typography.getTypographyVar("xl").fontSize,
-  lineHeight: theme_typography.getTypographyVar("xl").lineHeight,
-  [theme_screens.mediaQuery(theme_screens.breakpoint.md.minWidth)]: {
-    fontSize: theme_typography.getTypographyVar("2xl").fontSize,
-    lineHeight: theme_typography.getTypographyVar("2xl").lineHeight
-  }
-};
-const textHeading4 = {
-  fontSize: theme_typography.getTypographyVar("2xl").fontSize,
-  lineHeight: theme_typography.getTypographyVar("2xl").lineHeight,
-  [theme_screens.mediaQuery(theme_screens.breakpoint.md.minWidth)]: {
-    fontSize: theme_typography.getTypographyVar("3xl").fontSize,
-    lineHeight: theme_typography.getTypographyVar("3xl").lineHeight
-  }
-};
-const textHeading3 = {
-  fontSize: theme_typography.getTypographyVar("3xl").fontSize,
-  lineHeight: theme_typography.getTypographyVar("3xl").lineHeight,
-  [theme_screens.mediaQuery(theme_screens.breakpoint.md.minWidth)]: {
-    fontSize: theme_typography.getTypographyVar("4xl").fontSize,
-    lineHeight: theme_typography.getTypographyVar("4xl").lineHeight
-  }
-};
-const textHeading2 = {
-  fontSize: theme_typography.getTypographyVar("4xl").fontSize,
-  lineHeight: theme_typography.getTypographyVar("4xl").lineHeight,
-  [theme_screens.mediaQuery(theme_screens.breakpoint.md.minWidth)]: {
-    fontSize: theme_typography.getTypographyVar("5xl").fontSize,
-    lineHeight: theme_typography.getTypographyVar("5xl").lineHeight
-  }
-};
-const textHeading1 = {
-  fontSize: theme_typography.getTypographyVar("5xl").fontSize,
-  lineHeight: theme_typography.getTypographyVar("5xl").lineHeight,
-  [theme_screens.mediaQuery(theme_screens.breakpoint.md.minWidth)]: {
-    fontSize: theme_typography.getTypographyVar("6xl").fontSize,
-    lineHeight: theme_typography.getTypographyVar("6xl").lineHeight
-  }
-};
-const truncate = {
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
-const pointerEventsNone = {
-  pointerEvents: "none"
-};
-const cursorPointer = {
-  cursor: "pointer"
-};
-const overflowHidden = {
-  overflow: "hidden"
-};
-const overflowAuto = {
-  overflow: "auto"
-};
-const containerStyle = {
-  width: "100%",
-  marginLeft: "auto",
-  marginRight: "auto",
-  paddingLeft: `${theme_screens.breakpoint.xs.padding}px`,
-  paddingRight: `${theme_screens.breakpoint.xs.padding}px`,
-  [theme_screens.mediaQuery("sm")]: {
-    maxWidth: `${theme_screens.breakpoint.sm.minWidth}px`,
-    paddingLeft: `${theme_screens.breakpoint.sm.padding}px`,
-    paddingRight: `${theme_screens.breakpoint.sm.padding}px`
-  },
-  [theme_screens.mediaQuery("md")]: {
-    maxWidth: `${theme_screens.breakpoint.md.minWidth}px`,
-    paddingLeft: `${theme_screens.breakpoint.md.padding}px`,
-    paddingRight: `${theme_screens.breakpoint.md.padding}px`
-  },
-  [theme_screens.mediaQuery("lg")]: {
-    maxWidth: `${theme_screens.breakpoint.lg.minWidth}px`,
-    paddingLeft: `${theme_screens.breakpoint.lg.padding}px`,
-    paddingRight: `${theme_screens.breakpoint.lg.padding}px`
-  }
-};
-exports.animatePulse = animatePulse;
-exports.animateSpin = animateSpin;
-exports.containerStyle = containerStyle;
-exports.cursorPointer = cursorPointer;
-exports.overflowAuto = overflowAuto;
-exports.overflowHidden = overflowHidden;
-exports.pbBlock = pbBlock;
-exports.pointerEventsNone = pointerEventsNone;
-exports.ptBlock = ptBlock;
-exports.pyBlock = pyBlock;
-exports.scrollbarNone = scrollbarNone;
-exports.textHeading1 = textHeading1;
-exports.textHeading2 = textHeading2;
-exports.textHeading3 = textHeading3;
-exports.textHeading4 = textHeading4;
-exports.textHeading5 = textHeading5;
-exports.textHeading6 = textHeading6;
-exports.truncate = truncate;