mainbase-ui 1.2.5 → 3.37.0

package/dist/esm/styled-system/preflight.js

@@ -0,0 +1,163 @@
+import { isObject } from '../utils/is.js';
+
+function createPreflight(options) {
+  const { preflight } = options;
+  if (!preflight) return {};
+  const { scope = "", level = "parent" } = isObject(preflight) ? preflight : {};
+  let selector = "";
+  if (scope && level === "parent") {
+    selector = `${scope} `;
+  } else if (scope && level === "element") {
+    selector = `&${scope}`;
+  }
+  const scoped = {
+    "*": {
+      margin: "0px",
+      padding: "0px",
+      font: "inherit",
+      wordWrap: "break-word",
+      WebkitTapHighlightColor: "transparent"
+    },
+    "*, *::before, *::after, *::backdrop": {
+      boxSizing: "border-box",
+      borderWidth: "0px",
+      borderStyle: "solid",
+      borderColor: "var(--global-color-border, currentColor)"
+    },
+    hr: {
+      height: "0px",
+      color: "inherit",
+      borderTopWidth: "1px"
+    },
+    body: {
+      minHeight: "100dvh",
+      position: "relative"
+    },
+    img: {
+      borderStyle: "none"
+    },
+    "img, svg, video, canvas, audio, iframe, embed, object": {
+      display: "block",
+      verticalAlign: "middle"
+    },
+    iframe: { border: "none" },
+    "img, video": { maxWidth: "100%", height: "auto" },
+    "p, h1, h2, h3, h4, h5, h6": { overflowWrap: "break-word" },
+    "ol, ul": { listStyle: "none" },
+    "code, kbd, pre, samp": { fontSize: "1em" },
+    "button, [type='button'], [type='reset'], [type='submit']": {
+      WebkitAppearance: "button",
+      backgroundColor: "transparent",
+      backgroundImage: "none"
+    },
+    "button, input, optgroup, select, textarea": { color: "inherit" },
+    "button, select": { textTransform: "none" },
+    table: {
+      textIndent: "0px",
+      borderColor: "inherit",
+      borderCollapse: "collapse"
+    },
+    "*::placeholder": {
+      opacity: "unset",
+      color: "#9ca3af",
+      userSelect: "none"
+    },
+    textarea: {
+      resize: "vertical"
+    },
+    summary: {
+      display: "list-item"
+    },
+    small: {
+      fontSize: "80%"
+    },
+    "sub, sup": {
+      fontSize: "75%",
+      lineHeight: 0,
+      position: "relative",
+      verticalAlign: "baseline"
+    },
+    sub: {
+      bottom: "-0.25em"
+    },
+    sup: {
+      top: "-0.5em"
+    },
+    dialog: {
+      padding: "0px"
+    },
+    a: {
+      color: "inherit",
+      textDecoration: "inherit"
+    },
+    "abbr:where([title])": {
+      textDecoration: "underline dotted"
+    },
+    "b, strong": {
+      fontWeight: "bolder"
+    },
+    "code, kbd, samp, pre": {
+      fontSize: "1em",
+      "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
+      fontFamily: "var(--global-font-mono, var(--font-mono-fallback))"
+    },
+    'input[type="text"], input[type="email"], input[type="search"], input[type="password"]': {
+      WebkitAppearance: "none",
+      MozAppearance: "none"
+    },
+    "input[type='search']": {
+      WebkitAppearance: "textfield",
+      outlineOffset: "-2px"
+    },
+    "::-webkit-search-decoration, ::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    },
+    "::-webkit-file-upload-button": {
+      WebkitAppearance: "button",
+      font: "inherit"
+    },
+    'input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button': {
+      height: "auto"
+    },
+    "input[type='number']": {
+      MozAppearance: "textfield"
+    },
+    ":-moz-ui-invalid": {
+      boxShadow: "none"
+    },
+    ":-moz-focusring": {
+      outline: "auto"
+    },
+    "[hidden]:where(:not([hidden='until-found']))": {
+      display: "none !important"
+    }
+  };
+  const preflightCss = {
+    [scope || "html"]: {
+      lineHeight: 1.5,
+      "--font-fallback": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+      WebkitTextSizeAdjust: "100%",
+      WebkitFontSmoothing: "antialiased",
+      MozOsxFontSmoothing: "grayscale",
+      textRendering: "optimizeLegibility",
+      touchAction: "manipulation",
+      MozTabSize: "4",
+      tabSize: "4",
+      fontFamily: "var(--global-font-body, var(--font-fallback))"
+    }
+  };
+  if (level === "element") {
+    const modified = Object.entries(scoped).reduce((acc, [k, v]) => {
+      acc[k] = { [selector]: v };
+      return acc;
+    }, {});
+    Object.assign(preflightCss, modified);
+  } else if (selector) {
+    preflightCss[selector] = scoped;
+  } else {
+    Object.assign(preflightCss, scoped);
+  }
+  return preflightCss;
+}
+
+export { createPreflight };

package/dist/esm/styled-system/provider.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Global } from '@emotion/react';
+import { createContext } from '../create-context.js';
+
+const [MainbaseContextProvider, useMainbaseContext] = createContext({
+  name: "MainbaseContext",
+  strict: true,
+  providerName: "<MainbaseProvider />"
+});
+function MainbaseProvider(props) {
+  const { value: sys, children } = props;
+  return /* @__PURE__ */ jsxs(MainbaseContextProvider, { value: sys, children: [
+    !sys._config.disableLayers && /* @__PURE__ */ jsx(Global, { styles: sys.layers.atRule }),
+    /* @__PURE__ */ jsx(Global, { styles: sys._global }),
+    children
+  ] });
+}
+
+export { MainbaseProvider, useMainbaseContext };

package/dist/esm/styled-system/recipe-props.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext } from '../create-context.js';
+
+const [RecipePropsContextProvider, useParentRecipeProps] = createContext({
+  name: "RecipePropsContext",
+  strict: false
+});
+function RecipePropsProvider(props) {
+  return /* @__PURE__ */ jsx(RecipePropsContextProvider, { value: props.value, children: props.children });
+}
+
+export { RecipePropsProvider, useParentRecipeProps };

package/dist/esm/styled-system/recipe.types.js

@@ -0,0 +1 @@
+

package/dist/esm/styled-system/references.js

@@ -0,0 +1,34 @@
+import { isString } from '../utils/is.js';
+
+const REFERENCE_REGEX = /({([^}]*)})/g;
+const CURLY_REGEX = /[{}]/g;
+const TOKEN_PATH_REGEX = /\w+\.\w+/;
+const getReferences = (value) => {
+  if (!isString(value)) return [];
+  const matches = value.match(REFERENCE_REGEX);
+  if (!matches) return [];
+  return matches.map((match) => match.replace(CURLY_REGEX, "").trim());
+};
+const hasReference = (value) => REFERENCE_REGEX.test(value);
+function expandReferences(token) {
+  if (!token.extensions?.references) {
+    return token.extensions?.cssVar?.ref ?? token.value;
+  }
+  const references = token.extensions.references ?? {};
+  let valueStr = token.value;
+  const keys = Object.keys(references);
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const referenceToken = references[key];
+    if (referenceToken.extensions.conditions) {
+      continue;
+    }
+    const value = expandReferences(referenceToken);
+    valueStr = valueStr.replace(`{${key}}`, value);
+  }
+  token.value = valueStr;
+  delete token.extensions.references;
+  return token.value;
+}
+
+export { TOKEN_PATH_REGEX, expandReferences, getReferences, hasReference };

package/dist/esm/styled-system/resolve-token-value.js

@@ -0,0 +1,25 @@
+function resolveTokenValue(category, value) {
+  if (value == null || !Array.isArray(value)) {
+    return value;
+  }
+  switch (category) {
+    case "easings":
+      return `cubic-bezier(${value.join(", ")})`;
+    case "animations":
+    case "fonts":
+    case "gradients":
+    case "shadows":
+      return value.join(", ");
+    default:
+      return value;
+  }
+}
+function resolveSemanticConditionValues(category, conditions) {
+  const next = {};
+  for (const key in conditions) {
+    next[key] = resolveTokenValue(category, conditions[key]);
+  }
+  return next;
+}
+
+export { resolveSemanticConditionValues, resolveTokenValue };

package/dist/esm/styled-system/selectors.js

@@ -0,0 +1 @@
+

package/dist/esm/styled-system/serialize.js

@@ -0,0 +1,67 @@
+import { isObject } from '../utils/is.js';
+import { memo } from '../utils/memo.js';
+import { walkObject } from '../utils/walk-object.js';
+
+function createSerializeFn(options) {
+  const { conditions, isValidProperty } = options;
+  const isSelectorLike = memo((prop, valueKeys) => {
+    if (!isValidProperty(prop)) return true;
+    return !valueKeys.split(",").every((key) => key === "base" || conditions.has(key));
+  });
+  return function serialize(styles) {
+    return walkObject(styles, (value) => value, {
+      stop: (value) => Array.isArray(value),
+      getKey: (prop, value) => {
+        if (!isObject(value)) return prop;
+        if (conditions.has(prop)) return prop;
+        if (isSelectorLike(prop, Object.keys(value).join(","))) {
+          return parseSelectors(prop).map((s) => {
+            const selector = s.startsWith("&") ? s.slice(1) : s;
+            return isTopLevelSelector(selector) ? `${selector} &` : `&${selector}`;
+          }).join(", ");
+        }
+        return prop;
+      }
+    });
+  };
+}
+function isTopLevelSelector(s) {
+  const lower = s.toLowerCase();
+  return lower.startsWith(":host-context") || lower.startsWith(":host") || lower.startsWith("::slotted");
+}
+function parseSelectors(selector) {
+  const result = [];
+  let parenCount = 0;
+  let currentSelector = "";
+  let inEscape = false;
+  for (let i = 0; i < selector.length; i++) {
+    const char = selector[i];
+    if (char === "\\" && !inEscape) {
+      inEscape = true;
+      currentSelector += char;
+      continue;
+    }
+    if (inEscape) {
+      inEscape = false;
+      currentSelector += char;
+      continue;
+    }
+    if (char === "(") {
+      parenCount++;
+    } else if (char === ")") {
+      parenCount--;
+    }
+    if (char === "," && parenCount === 0) {
+      result.push(currentSelector.trim());
+      currentSelector = "";
+    } else {
+      currentSelector += char;
+    }
+  }
+  if (currentSelector) {
+    result.push(currentSelector.trim());
+  }
+  return result;
+}
+
+export { createSerializeFn };

package/dist/esm/styled-system/singleton.js

@@ -0,0 +1,10 @@
+const EMPTY_OBJECT = Object.freeze(/* @__PURE__ */ Object.create(null));
+const EMPTY_ARRAY = Object.freeze([]);
+function createEmptyObject() {
+  return /* @__PURE__ */ Object.create(null);
+}
+function getEmptyObject(mutable = false) {
+  return mutable ? createEmptyObject() : EMPTY_OBJECT;
+}
+
+export { EMPTY_ARRAY, EMPTY_OBJECT, createEmptyObject, getEmptyObject };

package/dist/esm/styled-system/sort-at-params.js

@@ -0,0 +1,69 @@
+import { memo } from '../utils/memo.js';
+
+const createMediaQueryRegex = (dimension) => ({
+  minMax: new RegExp(
+    `(!?\\(\\s*min(-device-)?-${dimension})(.|
+)+\\(\\s*max(-device)?-${dimension}`,
+    "i"
+  ),
+  min: new RegExp(`\\(\\s*min(-device)?-${dimension}`, "i"),
+  maxMin: new RegExp(
+    `(!?\\(\\s*max(-device)?-${dimension})(.|
+)+\\(\\s*min(-device)?-${dimension}`,
+    "i"
+  ),
+  max: new RegExp(`\\(\\s*max(-device)?-${dimension}`, "i")
+});
+const widthRegex = createMediaQueryRegex("width");
+const heightRegex = createMediaQueryRegex("height");
+const createQueryTester = (regexSet) => ({
+  isMin: _testQuery(regexSet.minMax, regexSet.maxMin, regexSet.min),
+  isMax: _testQuery(regexSet.maxMin, regexSet.minMax, regexSet.max)
+});
+const { isMin: isMinWidth, isMax: isMaxWidth } = createQueryTester(widthRegex);
+const { isMin: isMinHeight, isMax: isMaxHeight } = createQueryTester(heightRegex);
+const isPrint = /print/i;
+const isPrintOnly = /^print$/i;
+const isLength = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/;
+const lengthExec = /(\d)/;
+const maxValue = Number.MAX_VALUE;
+const multipliers = { ch: 8.8984375, em: 16, rem: 16, ex: 8.296875, px: 1 };
+function getQueryLength(query) {
+  const length = isLength.exec(query) || (isMinWidth(query) || isMinHeight(query) ? lengthExec.exec(query) : null);
+  if (!length) return maxValue;
+  if (length[0] === "0") return 0;
+  const number = parseFloat(length[1]);
+  const unit = length[2];
+  return number * (multipliers[unit] || 1);
+}
+function _testQuery(doubleTestTrue, doubleTestFalse, singleTest) {
+  return (query) => doubleTestTrue.test(query) || !doubleTestFalse.test(query) && singleTest.test(query);
+}
+function _testIsPrint(a, b) {
+  const isPrintA = isPrint.test(a), isPrintOnlyA = isPrintOnly.test(a);
+  const isPrintB = isPrint.test(b), isPrintOnlyB = isPrintOnly.test(b);
+  if (isPrintA && isPrintB) {
+    if (!isPrintOnlyA && isPrintOnlyB) return 1;
+    if (isPrintOnlyA && !isPrintOnlyB) return -1;
+    return a.localeCompare(b);
+  }
+  return isPrintA ? 1 : isPrintB ? -1 : null;
+}
+const sortAtParams = memo((a, b) => {
+  const testIsPrint = _testIsPrint(a, b);
+  if (testIsPrint !== null) return testIsPrint;
+  const minA = isMinWidth(a) || isMinHeight(a), maxA = isMaxWidth(a) || isMaxHeight(a);
+  const minB = isMinWidth(b) || isMinHeight(b), maxB = isMaxWidth(b) || isMaxHeight(b);
+  if (minA && maxB) return -1;
+  if (maxA && minB) return 1;
+  const lengthA = getQueryLength(a), lengthB = getQueryLength(b);
+  if (lengthA === maxValue && lengthB === maxValue) return a.localeCompare(b);
+  if (lengthA === maxValue) return 1;
+  if (lengthB === maxValue) return -1;
+  if (lengthA !== lengthB) {
+    return lengthA > lengthB ? maxA ? -1 : 1 : maxA ? 1 : -1;
+  }
+  return a.localeCompare(b);
+});
+
+export { sortAtParams };

package/dist/esm/styled-system/sort-at-rules.js

@@ -0,0 +1,31 @@
+import { isObject } from '../utils/is.js';
+import { sortAtParams } from './sort-at-params.js';
+
+function sortQueries(queries) {
+  return queries.sort(([a], [b]) => sortAtParams(a, b));
+}
+function sortAtRules(obj) {
+  const mediaQueries = [];
+  const containerQueries = [];
+  const rest = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (key.startsWith("@media")) {
+      mediaQueries.push([key, value]);
+    } else if (key.startsWith("@container")) {
+      containerQueries.push([key, value]);
+    } else if (isObject(value)) {
+      rest[key] = sortAtRules(value);
+    } else {
+      rest[key] = value;
+    }
+  }
+  const sortedMediaQueries = sortQueries(mediaQueries);
+  const sortedContainerQueries = sortQueries(containerQueries);
+  return {
+    ...rest,
+    ...Object.fromEntries(sortedMediaQueries),
+    ...Object.fromEntries(sortedContainerQueries)
+  };
+}
+
+export { sortAtRules };

package/dist/esm/styled-system/sva.js

@@ -0,0 +1,82 @@
+import { mapEntries } from '../utils/entries.js';
+import { memo } from '../utils/memo.js';
+import { omit } from '../utils/omit.js';
+import { splitProps } from '../utils/split-props.js';
+import { EMPTY_OBJECT, EMPTY_ARRAY, createEmptyObject } from './singleton.js';
+
+const getSlotRecipes = (config = EMPTY_OBJECT) => {
+  const init = (slot) => ({
+    base: config.base?.[slot] ?? EMPTY_OBJECT,
+    variants: createEmptyObject(),
+    defaultVariants: config.defaultVariants ?? EMPTY_OBJECT,
+    compoundVariants: config.compoundVariants ? getSlotCompoundVariant(config.compoundVariants, slot) : EMPTY_ARRAY
+  });
+  const slots = config.slots ?? [];
+  const entries = slots.map((slot) => [slot, init(slot)]);
+  for (const [variantsKey, variantsSpec] of Object.entries(
+    config.variants ?? {}
+  )) {
+    for (const [variantKey, variantSpec] of Object.entries(
+      variantsSpec
+    )) {
+      entries.forEach(([slot, slotRecipe]) => {
+        var _a;
+        (_a = slotRecipe.variants)[variantsKey] ?? (_a[variantsKey] = {});
+        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? EMPTY_OBJECT;
+      });
+    }
+  }
+  return Object.fromEntries(entries);
+};
+const getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({
+  ...compoundVariant,
+  css: compoundVariant.css[slotName]
+}));
+function createSlotRecipeFn(options) {
+  const { cva } = options;
+  return function sva(config = EMPTY_OBJECT) {
+    const slots = Object.entries(getSlotRecipes(config)).map(
+      ([slot, slotCva]) => [slot, cva(slotCva)]
+    );
+    const svaFn = memo(function svaFn2(props) {
+      const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)]);
+      return Object.fromEntries(result);
+    });
+    const variants = config.variants ?? EMPTY_OBJECT;
+    const variantKeys = Object.keys(variants);
+    function splitVariantProps(props) {
+      const restProps = omit(props, ["recipe"]);
+      const [recipeProps, localProps] = splitProps(restProps, variantKeys);
+      const hasColorPalette = variantKeys.includes("colorPalette");
+      const hasOrientation = variantKeys.includes("orientation");
+      if (!hasColorPalette) {
+        recipeProps.colorPalette = props.colorPalette || config.defaultVariants?.colorPalette;
+      }
+      if (hasOrientation) {
+        localProps.orientation = props.orientation;
+      }
+      return [recipeProps, localProps];
+    }
+    const variantMap = mapEntries(variants, (key, value) => [
+      key,
+      Object.keys(value)
+    ]);
+    let classNameMap = {};
+    if (config.className) {
+      classNameMap = Object.fromEntries(
+        config.slots.map((slot) => [
+          slot,
+          `${config.className}__${slot}`
+        ])
+      );
+    }
+    return Object.assign(svaFn, {
+      variantMap,
+      variantKeys,
+      splitVariantProps,
+      classNameMap
+    });
+  };
+}
+
+export { createSlotRecipeFn, getSlotCompoundVariant };