@cerberus-design/react/build/modern/chunk-BKPIKVU2.js

The Cerberus Design React component library.

// src/system/primitive-factory.tsx
import { css, cx } from "styled-system/css";
import { jsx } from "react/jsx-runtime";
var CerberusPrimitive = class {
  recipe;
  constructor(recipe) {
    this.recipe = recipe ?? null;
  }
  hasStyles(styles) {
    if (styles) {
      return {
        className: styles
      };
    }
    return {};
  }
  validateComponent(Component) {
    if (typeof Component !== "function" && typeof Component !== "object") {
      return false;
    }
    return true;
  }
  /**
   * Creates a Cerberus component with bare features and no recipe.
   * @param Component - The React component to enhance with Cerberus features.
   * Can be a string or a component reference.
   * @returns A new React component that applies Cerberus features to the
   * original component.
   *
   * @example
   * ```ts
   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
   * const Button = withNoRecipe('button')
   * ```
   */
  withNoRecipe = (Component, options) => {
    const { defaultProps } = options || {};
    const El = Component;
    const CerbComponent = (props) => {
      const { css: customCss, className, ...nativeProps } = props;
      const styles = this.hasStyles(cx(className, css(customCss)));
      return /* @__PURE__ */ jsx(El, { ...defaultProps, ...styles, ...nativeProps });
    };
    if (this.validateComponent(El)) {
      const ElName = typeof El === "string" ? El : El.displayName || El.name;
      CerbComponent.displayName = ElName;
    }
    return CerbComponent;
  };
  /**
   * Creates a Cerberus component with the given recipe.
   * @param Component - The React component to enhance with the recipe.
   * @param options - Options for the recipe.
   * @returns A new React component that applies the recipe to the original
   * component.
   */
  withRecipe = (Component, options) => {
    const { defaultProps } = options || {};
    const El = Component;
    const recipe = this.recipe;
    const CerbComponent = (internalProps) => {
      const {
        css: customCss,
        className,
        ...restOfInternalProps
      } = internalProps;
      const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
      const recipeStyles = recipe(variantOptions);
      return /* @__PURE__ */ jsx(
        Component,
        {
          ...defaultProps,
          ...nativeProps,
          className: cx(className, recipeStyles, css(customCss))
        }
      );
    };
    if (this.validateComponent(El)) {
      const ElName = typeof El === "string" ? El : El.displayName || El.name;
      CerbComponent.displayName = ElName;
    }
    return CerbComponent;
  };
  /**
   * Creates a Cerberus component with a slot recipe applied.
   * @param Component - The React component to enhance with Cerberus features.
   * @param recipe - The slot recipe to apply to the component.
   * @returns A new React component that applies Cerberus features and the
   * specified slot recipe to the original component.
   * @example
   * ```typescript
   * const { withSlotRecipe } = createCerberusPrimitive(field)
   * const Field = withSlotRecipe(RawField, field)
   * ```
   */
  withSlotRecipe = (Component, slot, options) => {
    const { defaultProps } = options || {};
    const El = Component;
    const recipe = this.recipe;
    const CerbComponent = (internalProps) => {
      const {
        css: customCss,
        className,
        ...restOfInternalProps
      } = internalProps;
      const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
      const styles = recipe(variantOptions);
      const slotStyles = styles[slot];
      return /* @__PURE__ */ jsx(
        Component,
        {
          ...defaultProps,
          ...nativeProps,
          className: cx(className, slotStyles, css(customCss))
        }
      );
    };
    if (this.validateComponent(El)) {
      const ElName = typeof El === "string" ? El : El.displayName || El.name;
      CerbComponent.displayName = ElName;
    }
    return CerbComponent;
  };
};

export {
  CerberusPrimitive
};
//# sourceMappingURL=chunk-BKPIKVU2.js.map