mainbase-ui 1.2.5 → 3.36.0

package/dist/esm/preset.js

@@ -0,0 +1,9 @@
+import { defaultBaseConfig } from './preset-base.js';
+import { mergeConfigs } from './styled-system/merge-config.js';
+import { createSystem } from './styled-system/system.js';
+import { defaultThemeConfig } from './theme/index.js';
+
+const defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig);
+const defaultSystem = createSystem(defaultConfig);
+
+export { defaultConfig, defaultSystem, defaultSystem as system };

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

@@ -0,0 +1,112 @@
+import 'react';
+import { uniq } from '../utils/uniq.js';
+import '../utils/unit.js';
+import { toRem, toPx } from './unit-conversion.js';
+
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+function createBreakpoints(breakpoints) {
+  const sorted = sort(breakpoints);
+  const values = Object.fromEntries(sorted);
+  function get(name) {
+    return values[name];
+  }
+  function only(name) {
+    return build(get(name));
+  }
+  function getRanges() {
+    const breakpoints2 = Object.keys(values);
+    const permutations = getPermutations(breakpoints2);
+    const results = breakpoints2.flatMap((name) => {
+      const value = get(name);
+      const down2 = [
+        `${name}Down`,
+        build({ max: adjust(value.min) })
+      ];
+      const up2 = [name, build({ min: value.min })];
+      const _only = [`${name}Only`, only(name)];
+      return [up2, _only, down2];
+    }).filter(([, value]) => value !== "").concat(
+      permutations.map(([min, max]) => {
+        const minValue = get(min);
+        const maxValue = get(max);
+        return [
+          `${min}To${capitalize(max)}`,
+          build({ min: minValue.min, max: adjust(maxValue.min) })
+        ];
+      })
+    );
+    return Object.fromEntries(results);
+  }
+  function toConditions() {
+    const ranges = getRanges();
+    return Object.fromEntries(Object.entries(ranges));
+  }
+  const conditions = toConditions();
+  const getCondition = (key) => {
+    return conditions[key];
+  };
+  function keys() {
+    return uniq(["base", ...Object.keys(values)]);
+  }
+  function up(name) {
+    return build({ min: get(name).min });
+  }
+  function down(name) {
+    return build({ max: adjust(get(name).min) });
+  }
+  return {
+    values: Object.values(values),
+    only,
+    keys,
+    conditions,
+    getCondition,
+    up,
+    down
+  };
+}
+function adjust(value) {
+  const computedMax = parseFloat(toPx(value) ?? "") - 0.04;
+  return toRem(`${computedMax}px`);
+}
+function sort(breakpoints) {
+  const entries = Object.entries(breakpoints).sort(([, minA], [, minB]) => {
+    return parseInt(minA, 10) < parseInt(minB, 10) ? -1 : 1;
+  });
+  return entries.map(([name, min], index, entries2) => {
+    let max = null;
+    if (index <= entries2.length - 1) {
+      max = entries2[index + 1]?.[1];
+    }
+    if (max != null) {
+      max = adjust(max);
+    }
+    return [name, { name, min: toRem(min), max }];
+  });
+}
+function getPermutations(values) {
+  const result = [];
+  values.forEach((current, index) => {
+    let idx = index;
+    idx++;
+    let next = values[idx];
+    while (next) {
+      result.push([current, next]);
+      idx++;
+      next = values[idx];
+    }
+  });
+  return result;
+}
+function build({
+  min,
+  max
+}) {
+  if (min == null && max == null) return "";
+  return [
+    "@media screen",
+    min && `(min-width: ${min})`,
+    max && `(max-width: ${max})`
+  ].filter(Boolean).join(" and ");
+}
+
+export { createBreakpoints };

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

@@ -0,0 +1,42 @@
+import { isObject } from '../utils/is.js';
+import 'react';
+import '../utils/unit.js';
+
+const CALC_REGEX = /calc/g;
+function resolveReference(operand) {
+  if (isObject(operand) && operand.reference) {
+    return operand.reference;
+  }
+  return String(operand);
+}
+const toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(CALC_REGEX, "");
+const add = (...operands) => `calc(${toExpression("+", ...operands)})`;
+const subtract = (...operands) => `calc(${toExpression("-", ...operands)})`;
+const multiply = (...operands) => `calc(${toExpression("*", ...operands)})`;
+const divide = (...operands) => `calc(${toExpression("/", ...operands)})`;
+const negate = (x) => {
+  const value = resolveReference(x);
+  if (value != null && !Number.isNaN(parseFloat(value))) {
+    return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`;
+  }
+  return multiply(value, -1);
+};
+const calc = Object.assign(
+  (x) => ({
+    add: (...operands) => calc(add(x, ...operands)),
+    subtract: (...operands) => calc(subtract(x, ...operands)),
+    multiply: (...operands) => calc(multiply(x, ...operands)),
+    divide: (...operands) => calc(divide(x, ...operands)),
+    negate: () => calc(negate(x)),
+    toString: () => x.toString()
+  }),
+  {
+    add,
+    subtract,
+    multiply,
+    divide,
+    negate
+  }
+);
+
+export { calc };

package/dist/esm/styled-system/color-mix.js

@@ -0,0 +1,32 @@
+const colorMix = (value, token) => {
+  if (!value || typeof value !== "string") {
+    return { invalid: true, value };
+  }
+  const [rawColor, rawOpacity] = value.split("/");
+  if (!rawColor || !rawOpacity || rawColor === "currentBg") {
+    return { invalid: true, value: rawColor };
+  }
+  const colorToken = token(`colors.${rawColor}`);
+  const opacityToken = token.raw(`opacity.${rawOpacity}`)?.value;
+  if (!opacityToken && isNaN(Number(rawOpacity))) {
+    return { invalid: true, value: rawColor };
+  }
+  const percent = opacityToken ? Number(opacityToken) * 100 + "%" : `${rawOpacity}%`;
+  const color = colorToken ?? rawColor;
+  return {
+    invalid: false,
+    color,
+    value: `color-mix(in srgb, ${color} ${percent}, transparent)`
+  };
+};
+const createColorMixTransform = (prop) => (value, args) => {
+  const mix = args.utils.colorMix(value);
+  if (mix.invalid) return { [prop]: value };
+  const cssVar = "--mix-" + prop;
+  return {
+    [cssVar]: mix.value,
+    [prop]: `var(${cssVar}, ${mix.color})`
+  };
+};
+
+export { colorMix, createColorMixTransform };

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,43 @@
+import { mapEntries } from '../utils/entries.js';
+import { memo } from '../utils/memo.js';
+import 'react';
+import '../utils/unit.js';
+
+const SPECIAL_KEY_REGEX = /^@|&|&$/;
+const createConditions = (options) => {
+  const { breakpoints, conditions: conds = {} } = options;
+  const conditions = mapEntries(conds, (key, value) => [`_${key}`, value]);
+  const values = Object.assign({}, conditions, breakpoints.conditions);
+  function keys() {
+    return Object.keys(values);
+  }
+  function has(key) {
+    return keys().includes(key) || SPECIAL_KEY_REGEX.test(key) || key.startsWith("_");
+  }
+  const sort = memo((paths) => {
+    return paths.filter((v) => v !== "base").sort((a, b) => {
+      const aa = has(a);
+      const bb = has(b);
+      if (aa && !bb) return 1;
+      if (!aa && bb) return -1;
+      return 0;
+    });
+  });
+  function expandAtRule(key) {
+    if (!key.startsWith("@breakpoint")) return key;
+    return breakpoints.getCondition(key.replace("@breakpoint ", ""));
+  }
+  function resolve(key) {
+    return Reflect.get(values, key) || key;
+  }
+  return {
+    keys,
+    sort,
+    has,
+    resolve,
+    breakpoints: breakpoints.keys(),
+    expandAtRule
+  };
+};
+
+export { createConditions };

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

@@ -0,0 +1,24 @@
+export { mergeConfigs } from './merge-config.js';
+
+const defineConditions = (v) => v;
+const defineRecipe = (v) => v;
+const defineSlotRecipe = (v) => v;
+const defineKeyframes = (v) => v;
+const defineGlobalStyles = (v) => v;
+const defineStyle = (v) => v;
+const defineTextStyles = (v) => v;
+const defineAnimationStyles = (v) => v;
+const defineLayerStyles = (v) => v;
+function createProxy() {
+  const identity = (v) => v;
+  return new Proxy(identity, {
+    get() {
+      return identity;
+    }
+  });
+}
+const defineTokens = /* @__PURE__ */ createProxy();
+const defineSemanticTokens = /* @__PURE__ */ createProxy();
+const defineConfig = (v) => v;
+
+export { defineAnimationStyles, defineConditions, defineConfig, defineGlobalStyles, defineKeyframes, defineLayerStyles, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineStyle, defineTextStyles, defineTokens };

package/dist/esm/styled-system/create-recipe-context.js

@@ -0,0 +1,74 @@
+"use client";
+import { useMemo, forwardRef } from 'react';
+import { createContext } from '../create-context.js';
+import { mergeProps } from '../merge-props.js';
+import { cx } from '../utils/cx.js';
+import '../utils/unit.js';
+import { upperFirst, getElementTypeDisplayName } from './display-name.js';
+import { EMPTY_STYLES } from './empty.js';
+import { mainbase } from './factory.js';
+import { useRecipe } from './use-recipe.js';
+
+function createRecipeContext(options) {
+  const { key: recipeKey, recipe: recipeConfig } = options;
+  const contextName = upperFirst(
+    recipeKey || recipeConfig.className || "Component"
+  );
+  const [PropsProvider, usePropsContext] = createContext({
+    strict: false,
+    name: `${contextName}PropsContext`,
+    providerName: `${contextName}PropsContext`
+  });
+  function useRecipeResult(props) {
+    const { unstyled, ...restProps } = props;
+    const recipe = useRecipe({
+      key: recipeKey,
+      recipe: restProps.recipe || recipeConfig
+    });
+    const [variantProps, otherProps] = useMemo(
+      () => recipe.splitVariantProps(restProps),
+      [recipe, restProps]
+    );
+    const styles = unstyled ? EMPTY_STYLES : recipe(variantProps);
+    return {
+      styles,
+      className: recipe.className,
+      props: otherProps
+    };
+  }
+  const withContext = (Component, options2) => {
+    const { displayName: displayNameOverride, ...mainbaseOptions } = options2 ?? {};
+    const SuperComponent = mainbase(Component, {}, mainbaseOptions);
+    const StyledComponent = forwardRef((inProps, ref) => {
+      const propsContext = usePropsContext();
+      const props = useMemo(
+        () => mergeProps(propsContext, inProps),
+        [inProps, propsContext]
+      );
+      const { styles, className, props: localProps } = useRecipeResult(props);
+      return /* @__PURE__ */ React.createElement(
+        SuperComponent,
+        {
+          ...localProps,
+          ref,
+          css: [styles, props.css],
+          className: cx(className, props.className)
+        }
+      );
+    });
+    StyledComponent.displayName = displayNameOverride ?? contextName ?? getElementTypeDisplayName(Component);
+    return StyledComponent;
+  };
+  function withPropsProvider() {
+    return PropsProvider;
+  }
+  return {
+    withContext,
+    PropsProvider,
+    withPropsProvider,
+    usePropsContext,
+    useRecipeResult
+  };
+}
+
+export { createRecipeContext };

package/dist/esm/styled-system/create-slot-recipe-context.js

@@ -0,0 +1,141 @@
+"use client";
+import { forwardRef, useMemo } from 'react';
+import { createContext } from '../create-context.js';
+import { mergeProps } from '../merge-props.js';
+import { cx } from '../utils/cx.js';
+import '../utils/unit.js';
+import { upperFirst, getElementTypeDisplayName, inferRootProviderDisplayName, inferSlotRecipeComponentDisplayName } from './display-name.js';
+import { EMPTY_SLOT_STYLES } from './empty.js';
+import { mainbase } from './factory.js';
+import { useSlotRecipe } from './use-slot-recipe.js';
+
+const createSlotRecipeContext = (options) => {
+  const { key: recipeKey, recipe: recipeConfig } = options;
+  const contextName = upperFirst(
+    recipeKey || recipeConfig.className || "Component"
+  );
+  const [StylesProvider, useStyles] = createContext({
+    name: `${contextName}StylesContext`,
+    errorMessage: `use${contextName}Styles returned is 'undefined'. Seems you forgot to wrap the components in "<${contextName}.Root />" `
+  });
+  const [ClassNamesProvider, useClassNames] = createContext({
+    name: `${contextName}ClassNameContext`,
+    errorMessage: `use${contextName}ClassNames returned is 'undefined'. Seems you forgot to wrap the components in "<${contextName}.Root />" `,
+    strict: false
+  });
+  const [PropsProvider, usePropsContext] = createContext({
+    strict: false,
+    name: `${contextName}PropsContext`,
+    providerName: `${contextName}PropsContext`,
+    defaultValue: {}
+  });
+  function useRecipeResult(props) {
+    const { unstyled, ...restProps } = props;
+    const slotRecipe = useSlotRecipe({
+      key: recipeKey,
+      recipe: restProps.recipe || recipeConfig
+    });
+    const [variantProps, otherProps] = useMemo(
+      () => slotRecipe.splitVariantProps(restProps),
+      [restProps, slotRecipe]
+    );
+    const styles = useMemo(
+      () => unstyled ? EMPTY_SLOT_STYLES : slotRecipe(variantProps),
+      [unstyled, variantProps, slotRecipe]
+    );
+    return {
+      styles,
+      classNames: slotRecipe.classNameMap,
+      props: otherProps
+    };
+  }
+  function withRootProvider(Component, options2 = {}) {
+    const { defaultProps, displayName: displayNameOverride } = options2;
+    const innerName = getElementTypeDisplayName(Component);
+    const inferredDisplayName = inferRootProviderDisplayName(
+      contextName,
+      innerName
+    );
+    const StyledComponent = (inProps) => {
+      const propsContext = usePropsContext();
+      const props = useMemo(
+        () => mergeProps(defaultProps, propsContext, inProps),
+        [propsContext, inProps]
+      );
+      const { styles, classNames, props: rootProps } = useRecipeResult(props);
+      return /* @__PURE__ */ React.createElement(StylesProvider, { value: styles }, /* @__PURE__ */ React.createElement(ClassNamesProvider, { value: classNames }, /* @__PURE__ */ React.createElement(Component, { ...rootProps })));
+    };
+    StyledComponent.displayName = displayNameOverride ?? inferredDisplayName ?? innerName;
+    return StyledComponent;
+  }
+  const withProvider = (Component, slot, options2) => {
+    const {
+      defaultProps,
+      displayName: displayNameOverride,
+      wrapElement,
+      ...restOptions
+    } = options2 ?? {};
+    const inferredDisplayName = inferSlotRecipeComponentDisplayName(
+      contextName,
+      String(slot)
+    );
+    const SuperComponent = mainbase(Component, {}, restOptions);
+    const StyledComponent = forwardRef((inProps, ref) => {
+      const propsContext = usePropsContext();
+      const props = useMemo(
+        () => mergeProps(defaultProps ?? {}, propsContext, inProps),
+        [propsContext, inProps]
+      );
+      const { styles, props: rootProps, classNames } = useRecipeResult(props);
+      const className = classNames[slot];
+      const element = /* @__PURE__ */ React.createElement(StylesProvider, { value: styles }, /* @__PURE__ */ React.createElement(ClassNamesProvider, { value: classNames }, /* @__PURE__ */ React.createElement(
+        SuperComponent,
+        {
+          ref,
+          ...rootProps,
+          css: [styles[slot], props.css],
+          className: cx(props.className, className)
+        }
+      )));
+      return wrapElement?.(element, props) ?? element;
+    });
+    StyledComponent.displayName = displayNameOverride ?? inferredDisplayName ?? getElementTypeDisplayName(Component);
+    return StyledComponent;
+  };
+  const withContext = (Component, slot, options2) => {
+    const { displayName: displayNameOverride, ...mainbaseOptions } = options2 ?? {};
+    const inferredDisplayName = slot != null && slot !== "" ? inferSlotRecipeComponentDisplayName(contextName, String(slot)) : contextName;
+    const SuperComponent = mainbase(Component, {}, mainbaseOptions);
+    const StyledComponent = forwardRef((props, ref) => {
+      const { unstyled, ...restProps } = props;
+      const styles = useStyles();
+      const classNames = useClassNames();
+      const className = classNames?.[slot];
+      return /* @__PURE__ */ React.createElement(
+        SuperComponent,
+        {
+          ...restProps,
+          css: [!unstyled && slot ? styles[slot] : void 0, props.css],
+          ref,
+          className: cx(props.className, className)
+        }
+      );
+    });
+    StyledComponent.displayName = displayNameOverride ?? inferredDisplayName ?? getElementTypeDisplayName(Component);
+    return StyledComponent;
+  };
+  return {
+    StylesProvider,
+    ClassNamesProvider,
+    PropsProvider,
+    usePropsContext,
+    useRecipeResult,
+    withProvider,
+    withContext,
+    withRootProvider,
+    useStyles,
+    useClassNames
+  };
+};
+
+export { createSlotRecipeContext };

package/dist/esm/styled-system/css-var.js

@@ -0,0 +1,18 @@
+const escRegex = /[^a-zA-Z0-9_\u0081-\uffff-]/g;
+function esc(string) {
+  return `${string}`.replace(escRegex, (s) => `\\${s}`);
+}
+const dashCaseRegex = /[A-Z]/g;
+function dashCase(string) {
+  return string.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`);
+}
+function cssVar(name, options = {}) {
+  const { fallback = "", prefix = "" } = options;
+  const variable = dashCase(["-", prefix, esc(name)].filter(Boolean).join("-"));
+  return {
+    var: variable,
+    ref: `var(${variable}${fallback ? `, ${fallback}` : ""})`
+  };
+}
+
+export { cssVar };

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

@@ -0,0 +1,71 @@
+import { compact } from '../utils/compact.js';
+import { isString, isObject } from '../utils/is.js';
+import { walkObject } from '../utils/walk-object.js';
+import { memo } from '../utils/memo.js';
+import { mergeWith } from '../utils/merge.js';
+import 'react';
+import '../utils/unit.js';
+import { EMPTY_OBJECT, createEmptyObject } from './singleton.js';
+import { sortAtRules } from './sort-at-rules.js';
+
+const importantRegex = /\s*!(important)?/i;
+const isImportant = memo(
+  (v) => isString(v) ? importantRegex.test(v) : false
+);
+const withoutImportant = memo(
+  (v) => isString(v) ? v.replace(importantRegex, "").trim() : v
+);
+function createCssFn(context) {
+  const { transform, conditions, normalize } = context;
+  const mergeFn = mergeCss(context);
+  return memo(function cssFn(...styleArgs) {
+    const styles = mergeFn(...styleArgs);
+    const normalized = normalize(styles);
+    const result = createEmptyObject();
+    walkObject(normalized, (value, paths) => {
+      if (value == null) return;
+      const [prop, ...selectors] = conditions.sort(paths).map(conditions.resolve);
+      const important = isImportant(value);
+      if (important) {
+        value = withoutImportant(value);
+      }
+      let transformed = transform(prop, value) ?? EMPTY_OBJECT;
+      transformed = walkObject(
+        transformed,
+        (v) => isString(v) && important ? `${v} !important` : v,
+        { getKey: (prop2) => conditions.expandAtRule(prop2) }
+      );
+      mergeByPath(result, selectors.flat(), transformed);
+    });
+    return sortAtRules(result);
+  });
+}
+function mergeByPath(target, paths, value) {
+  let acc = target;
+  for (const path of paths) {
+    if (!path) continue;
+    if (!acc[path]) acc[path] = createEmptyObject();
+    acc = acc[path];
+  }
+  mergeWith(acc, value);
+}
+function compactFn(...styles) {
+  return styles.filter((style) => {
+    if (!isObject(style)) return false;
+    const compacted = compact(style);
+    const keys = Object.keys(compacted);
+    return keys.length > 0;
+  });
+}
+function mergeCss(ctx) {
+  function resolve(styles) {
+    const comp = compactFn(...styles);
+    if (comp.length === 1) return comp;
+    return comp.map((style) => ctx.normalize(style));
+  }
+  return memo(function mergeFn(...styles) {
+    return mergeWith({}, ...resolve(styles));
+  });
+}
+
+export { createCssFn };

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

@@ -0,0 +1 @@
+