@cerberus-design/react 0.18.4 → 0.19.1

package/build/legacy/components/avatar/index.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/avatar/index.ts
 var avatar_exports = {};
@@ -32,34 +34,129 @@ module.exports = __toCommonJS(avatar_exports);
 // src/components/avatar/primitives.tsx
 var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
 var import_css = require("styled-system/css");
 var import_jsx_runtime = require("react/jsx-runtime");
-function AvatarRoot(props) {
-  const { gradient, shape, size, ...rootProps } = props;
-  const styles = (0, import_recipes.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_avatar.Avatar.Root,
-    {
-      ...rootProps,
-      className: (0, import_css.cx)(styles.root, rootProps.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      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.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      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)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function AvatarImage(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css.cx)(styles.image, props.className) });
-}
-function AvatarFallback(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_avatar.Avatar.Fallback,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.fallback, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/avatar/primitives.tsx
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes.avatar);
+var AvatarRoot = withSlotRecipe(import_avatar.Avatar.Root, "root");
+var AvatarImage = withSlotRecipe(
+  import_avatar.Avatar.Image,
+  "image"
+);
+var AvatarFallback = withSlotRecipe(
+  import_avatar.Avatar.Fallback,
+  "fallback"
+);
+
 // src/components/avatar/parts.ts
 var AvatarParts = {
   Root: AvatarRoot,
@@ -87,7 +184,7 @@ function splitProps(props, ...keyGroups) {
   return [...result, rest];
 }
 
-// src/components/Show.tsx
+// src/components/show/show.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;

package/build/legacy/components/avatar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/avatar/index.ts","../../../../src/components/avatar/primitives.tsx","../../../../src/components/avatar/parts.ts","../../../../src/utils/index.ts","../../../../src/components/Show.tsx","../../../../src/components/avatar/avatar.tsx"],"sourcesContent":["export * from './parts'\nexport * from './primitives'\nexport * from './avatar'\n\nexport { useAvatarContext } from '@ark-ui/react/avatar'\n","import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n","import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import type { AvatarRootProps } from '@ark-ui/react/avatar'\nimport type { AvatarVariantProps } from 'styled-system/recipes'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils'\nimport { Show } from '../Show'\nimport { AvatarParts } from './parts'\n\n/**\n * This module provides an abstraction of the Avatar primitives.\n * @module 'avatar'\n */\n\nexport interface AvatarWithoutImage\n  extends AvatarRootProps,\n    AvatarVariantProps {\n  alt?: never\n  src?: never\n  fallback?: ReactNode\n}\n\nexport interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {\n  alt: string\n  src: string\n  fallback?: ReactNode\n}\n\n/**\n * Avatar component is an abstraction of the primitives that displays a\n * avatar or it's fallback when the image fails to load.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)\n */\nexport function Avatar(props: AvatarWithoutImage | AvatarWithImage) {\n  const [imgProps, { fallback, children }, rootProps] = splitProps(\n    props,\n    ['alt', 'src'],\n    ['fallback', 'children'],\n  )\n\n  return (\n    <AvatarParts.Root {...rootProps}>\n      <Show\n        when={children}\n        fallback={\n          <>\n            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>\n            <AvatarParts.Image {...imgProps} />\n          </>\n        }\n      >\n        {children}\n      </Show>\n    </AvatarParts.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAKO;AACP,qBAAgD;AAChD,iBAAmB;AAcf;AAJG,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,UAAU,OAAO,MAAM,GAAG,UAAU,IAAI;AAChD,QAAM,aAAS,uBAAO,EAAE,UAAU,OAAO,KAAK,CAAC;AAC/C,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAAyB;AACnD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;;;ACjBO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;;;ACVO,SAAS,WACd,UACG,WAC0B;AAC7B,QAAM,SAAS,UAAU,IAAI,OAAO,CAAC,EAA+B;AACpE,QAAM,OAAO,CAAC;AAEd,aAAW,OAAO,OAAO;AACvB,QAAI,WAAW;AACf,aAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,UAAI,UAAU,CAAC,EAAE,SAAS,GAAc,GAAG;AACzC,eAAO,CAAC,EAAE,GAAc,IAAI,MAAM,GAAG;AACrC,mBAAW;AACX;AAAA,MACF;AAAA,IACF;AACA,QAAI,CAAC,UAAU;AACb,WAAK,GAAc,IAAI,MAAM,GAAG;AAAA,IAClC;AAAA,EACF;AAEA,SAAO,CAAC,GAAG,QAAQ,IAAI;AACzB;;;AChBW,IAAAC,sBAAA;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,6EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,6EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;ACIU,IAAAC,sBAAA;AAZH,SAASC,QAAO,OAA6C;AAClE,QAAM,CAAC,UAAU,EAAE,UAAU,SAAS,GAAG,SAAS,IAAI;AAAA,IACpD;AAAA,IACA,CAAC,OAAO,KAAK;AAAA,IACb,CAAC,YAAY,UAAU;AAAA,EACzB;AAEA,SACE,6CAAC,YAAY,MAAZ,EAAkB,GAAG,WACpB;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE,8EACE;AAAA,qDAAC,YAAY,UAAZ,EAAsB,oBAAS;AAAA,QAChC,6CAAC,YAAY,OAAZ,EAAmB,GAAG,UAAU;AAAA,SACnC;AAAA,MAGD;AAAA;AAAA,EACH,GACF;AAEJ;;;ALlDA,IAAAC,iBAAiC;","names":["Avatar","import_jsx_runtime","import_jsx_runtime","Avatar","import_avatar"]}
+{"version":3,"sources":["../../../../src/components/avatar/index.ts","../../../../src/components/avatar/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/avatar/parts.ts","../../../../src/utils/index.ts","../../../../src/components/show/show.tsx","../../../../src/components/avatar/avatar.tsx"],"sourcesContent":["export * from './parts'\nexport * from './primitives'\nexport * from './avatar'\n\nexport { useAvatarContext } from '@ark-ui/react/avatar'\n","import {\n  Avatar,\n  type AvatarFallbackProps as ArkAvatarFallbackProps,\n  type AvatarImageProps as ArkAvatarImageProps,\n  type AvatarRootProps as ArkAvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(avatar)\n\n/**\n * The root component of the Avatar.\n */\nexport const AvatarRoot = withSlotRecipe<AvatarRootProps>(Avatar.Root, 'root')\nexport type AvatarRootProps = CerberusPrimitiveProps<\n  ArkAvatarRootProps & AvatarVariantProps\n>\n\n/**\n * The image component of the Avatar.\n */\nexport const AvatarImage = withSlotRecipe<ArkAvatarImageProps>(\n  Avatar.Image,\n  'image',\n)\nexport type AvatarImageProps = CerberusPrimitiveProps<ArkAvatarImageProps>\n\n/**\n * The fallback component of the Avatar.\n */\nexport const AvatarFallback = withSlotRecipe<ArkAvatarFallbackProps>(\n  Avatar.Fallback,\n  'fallback',\n)\nexport type AvatarFallbackProps = CerberusPrimitiveProps<ArkAvatarFallbackProps>\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n","import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import type { AvatarVariantProps } from 'styled-system/recipes'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils'\nimport { Show } from '../show/index'\nimport { AvatarParts } from './parts'\nimport type { AvatarRootProps } from './primitives'\n\n/**\n * This module provides an abstraction of the Avatar primitives.\n * @module 'avatar'\n */\n\nexport interface AvatarWithoutImage extends AvatarRootProps {\n  alt?: never\n  src?: never\n  fallback?: ReactNode\n}\n\nexport interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {\n  alt: string\n  src: string\n  fallback?: ReactNode\n}\n\n/**\n * Avatar component is an abstraction of the primitives that displays a\n * avatar or it's fallback when the image fails to load.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)\n */\nexport function Avatar(props: AvatarWithoutImage | AvatarWithImage) {\n  const [imgProps, { fallback, children }, rootProps] = splitProps(\n    props,\n    ['alt', 'src'],\n    ['fallback', 'children'],\n  )\n\n  return (\n    <AvatarParts.Root {...rootProps}>\n      <Show\n        when={children}\n        fallback={\n          <>\n            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>\n            <AvatarParts.Image {...imgProps} />\n          </>\n        }\n      >\n        {children}\n      </Show>\n    </AvatarParts.Root>\n  )\n}\n"],"mappings":"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","names":["Avatar","import_jsx_runtime","import_jsx_runtime","Avatar","import_avatar"]}

package/build/legacy/components/avatar/index.d.cts

@@ -1,8 +1,11 @@
 export { useAvatarContext_alias_1 as useAvatarContext } from '../../_tsup-dts-rollup.cjs';
 export { AvatarParts_alias_1 as AvatarParts } from '../../_tsup-dts-rollup.cjs';
 export { AvatarRoot_alias_1 as AvatarRoot } from '../../_tsup-dts-rollup.cjs';
+export { AvatarRootProps_alias_1 as AvatarRootProps } from '../../_tsup-dts-rollup.cjs';
 export { AvatarImage_alias_1 as AvatarImage } from '../../_tsup-dts-rollup.cjs';
+export { AvatarImageProps_alias_1 as AvatarImageProps } from '../../_tsup-dts-rollup.cjs';
 export { AvatarFallback_alias_1 as AvatarFallback } from '../../_tsup-dts-rollup.cjs';
+export { AvatarFallbackProps_alias_1 as AvatarFallbackProps } from '../../_tsup-dts-rollup.cjs';
 export { Avatar_alias_2 as Avatar } from '../../_tsup-dts-rollup.cjs';
 export { AvatarWithoutImage_alias_2 as AvatarWithoutImage } from '../../_tsup-dts-rollup.cjs';
 export { AvatarWithImage_alias_2 as AvatarWithImage } from '../../_tsup-dts-rollup.cjs';

package/build/legacy/components/avatar/parts.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/avatar/parts.ts
 var parts_exports = {};
@@ -27,34 +29,129 @@ module.exports = __toCommonJS(parts_exports);
 // src/components/avatar/primitives.tsx
 var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
 var import_css = require("styled-system/css");
 var import_jsx_runtime = require("react/jsx-runtime");
-function AvatarRoot(props) {
-  const { gradient, shape, size, ...rootProps } = props;
-  const styles = (0, import_recipes.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_avatar.Avatar.Root,
-    {
-      ...rootProps,
-      className: (0, import_css.cx)(styles.root, rootProps.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      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.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      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)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function AvatarImage(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css.cx)(styles.image, props.className) });
-}
-function AvatarFallback(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_avatar.Avatar.Fallback,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.fallback, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/avatar/primitives.tsx
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes.avatar);
+var AvatarRoot = withSlotRecipe(import_avatar.Avatar.Root, "root");
+var AvatarImage = withSlotRecipe(
+  import_avatar.Avatar.Image,
+  "image"
+);
+var AvatarFallback = withSlotRecipe(
+  import_avatar.Avatar.Fallback,
+  "fallback"
+);
+
 // src/components/avatar/parts.ts
 var AvatarParts = {
   Root: AvatarRoot,

package/build/legacy/components/avatar/parts.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/avatar/parts.ts","../../../../src/components/avatar/primitives.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAKO;AACP,qBAAgD;AAChD,iBAAmB;AAcf;AAJG,SAAS,WAAW,OAA6C;AACtE,QAAM,EAAE,UAAU,OAAO,MAAM,GAAG,UAAU,IAAI;AAChD,QAAM,aAAS,uBAAO,EAAE,UAAU,OAAO,KAAK,CAAC;AAC/C,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,UAAU,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,YAAY,OAAyB;AACnD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;;;ADjBO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;","names":[]}
+{"version":3,"sources":["../../../../src/components/avatar/parts.ts","../../../../src/components/avatar/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","import {\n  Avatar,\n  type AvatarFallbackProps as ArkAvatarFallbackProps,\n  type AvatarImageProps as ArkAvatarImageProps,\n  type AvatarRootProps as ArkAvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(avatar)\n\n/**\n * The root component of the Avatar.\n */\nexport const AvatarRoot = withSlotRecipe<AvatarRootProps>(Avatar.Root, 'root')\nexport type AvatarRootProps = CerberusPrimitiveProps<\n  ArkAvatarRootProps & AvatarVariantProps\n>\n\n/**\n * The image component of the Avatar.\n */\nexport const AvatarImage = withSlotRecipe<ArkAvatarImageProps>(\n  Avatar.Image,\n  'image',\n)\nexport type AvatarImageProps = CerberusPrimitiveProps<ArkAvatarImageProps>\n\n/**\n * The fallback component of the Avatar.\n */\nexport const AvatarFallback = withSlotRecipe<ArkAvatarFallbackProps>(\n  Avatar.Fallback,\n  'fallback',\n)\nexport type AvatarFallbackProps = CerberusPrimitiveProps<ArkAvatarFallbackProps>\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n"],"mappings":"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","names":[]}

package/build/legacy/components/avatar/primitives.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/avatar/primitives.tsx
 var primitives_exports = {};
@@ -27,33 +29,128 @@ __export(primitives_exports, {
 module.exports = __toCommonJS(primitives_exports);
 var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
 var import_css = require("styled-system/css");
 var import_jsx_runtime = require("react/jsx-runtime");
-function AvatarRoot(props) {
-  const { gradient, shape, size, ...rootProps } = props;
-  const styles = (0, import_recipes.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_avatar.Avatar.Root,
-    {
-      ...rootProps,
-      className: (0, import_css.cx)(styles.root, rootProps.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      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.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      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)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function AvatarImage(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css.cx)(styles.image, props.className) });
-}
-function AvatarFallback(props) {
-  const styles = (0, import_recipes.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_avatar.Avatar.Fallback,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.fallback, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
+
+// src/components/avatar/primitives.tsx
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes.avatar);
+var AvatarRoot = withSlotRecipe(import_avatar.Avatar.Root, "root");
+var AvatarImage = withSlotRecipe(
+  import_avatar.Avatar.Image,
+  "image"
+);
+var AvatarFallback = withSlotRecipe(
+  import_avatar.Avatar.Fallback,
+  "fallback"
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarFallback,