@cerberus-design/react 0.19.0 → 0.19.1

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

@@ -134,7 +134,7 @@ var CerberusPrimitive = class {
 // src/system/factory.ts
 var import_factory = require("@ark-ui/react/factory");
 function cerberusFactory(component, defaultProps) {
-  const { withNoRecipe } = createCerberusPrimitive();
+  const { withNoRecipe } = new CerberusPrimitive();
   const arkComponent = import_factory.ark[component];
   if (arkComponent) {
     return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} });
@@ -157,9 +157,6 @@ var cerberusFactoryProxy = new Proxy(cerberusFactory, {
 });
 
 // src/system/index.ts
-function createCerberusPrimitive(recipe) {
-  return new CerberusPrimitive(recipe);
-}
 var cerberus = cerberusFactoryProxy;
 
 // src/components/theme/theme.tsx

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/theme/index.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/factory.ts","../../../../src/system/index.ts","../../../../src/components/theme/theme.tsx"],"sourcesContent":["export * from './theme'\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 { ark } from '@ark-ui/react/factory'\nimport { createCerberusPrimitive } from './index'\nimport type { ComponentType } from 'react'\n\nfunction cerberusFactory<T extends Record<string, unknown>>(\n  component: keyof typeof ark,\n  defaultProps?: T,\n) {\n  const { withNoRecipe } = createCerberusPrimitive()\n  const arkComponent = ark[component] as ComponentType\n\n  if (arkComponent) {\n    return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} })\n  }\n\n  throw new Error(\n    `Component \"${String(component)}\" is not a valid Cerberus component. Please check the component name.`,\n  )\n}\n\nconst cache = new Map()\n\n// Create a proxy that handles both function calls and property access\nexport const cerberusFactoryProxy = new Proxy(cerberusFactory, {\n  apply(target, thisArg, argArray) {\n    // Handle function calls like cerberus('button')\n    // @ts-expect-error: Ignore type error for dynamic property access\n    return target.apply(thisArg, argArray)\n  },\n  get(_target, el: keyof typeof ark) {\n    // Handle property access like cerberus.button\n    if (!cache.has(el)) {\n      cache.set(el, cerberusFactory(el))\n    }\n    return cache.get(el) as ReturnType<typeof cerberusFactory>\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 { PropsWithChildren } from 'react'\nimport type { ColorModes, CustomThemes } from '../../context/theme'\nimport { cerberus, type CerberusPrimitiveProps } from '../../system'\n\nexport interface ThemeProps<T extends string> {\n  /**\n   * The color mode to apply to the theme.\n   * @default 'light'\n   */\n  mode?: ColorModes\n  /**\n   * The theme to apply to the component.\n   * @default 'cerberus'\n   */\n  theme?: CustomThemes<T>\n}\n\nexport function Theme<T extends string>(\n  props: PropsWithChildren<CerberusPrimitiveProps<ThemeProps<T>>>,\n) {\n  const { mode, theme, ...nativeProps } = props\n  const colorMode = mode || 'light'\n  const themeName = theme || 'cerberus'\n\n  return (\n    <cerberus.div\n      {...nativeProps}\n      data-panda-theme={themeName}\n      data-color-mode={colorMode}\n    >\n      {props.children}\n    </cerberus.div>\n  )\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/theme/index.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/factory.ts","../../../../src/system/index.ts","../../../../src/components/theme/theme.tsx"],"sourcesContent":["export * from './theme'\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 { ark } from '@ark-ui/react/factory'\nimport type { ComponentType } from 'react'\nimport { CerberusPrimitive } from './primitive-factory'\n\nfunction cerberusFactory<T extends Record<string, unknown>>(\n  component: keyof typeof ark,\n  defaultProps?: T,\n) {\n  const { withNoRecipe } = new CerberusPrimitive()\n  const arkComponent = ark[component] as ComponentType\n\n  if (arkComponent) {\n    return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} })\n  }\n\n  throw new Error(\n    `Component \"${String(component)}\" is not a valid Cerberus component. Please check the component name.`,\n  )\n}\n\nconst cache = new Map()\n\n// Create a proxy that handles both function calls and property access\nexport const cerberusFactoryProxy = new Proxy(cerberusFactory, {\n  apply(target, thisArg, argArray) {\n    // Handle function calls like cerberus('button')\n    // @ts-expect-error: Ignore type error for dynamic property access\n    return target.apply(thisArg, argArray)\n  },\n  get(_target, el: keyof typeof ark) {\n    // Handle property access like cerberus.button\n    if (!cache.has(el)) {\n      cache.set(el, cerberusFactory(el))\n    }\n    return cache.get(el) as ReturnType<typeof cerberusFactory>\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 { PropsWithChildren } from 'react'\nimport type { ColorModes, CustomThemes } from '../../context/theme'\nimport { cerberus, type CerberusPrimitiveProps } from '../../system'\n\nexport interface ThemeProps<T extends string> {\n  /**\n   * The color mode to apply to the theme.\n   * @default 'light'\n   */\n  mode?: ColorModes\n  /**\n   * The theme to apply to the component.\n   * @default 'cerberus'\n   */\n  theme?: CustomThemes<T>\n}\n\nexport function Theme<T extends string>(\n  props: PropsWithChildren<CerberusPrimitiveProps<ThemeProps<T>>>,\n) {\n  const { mode, theme, ...nativeProps } = props\n  const colorMode = mode || 'light'\n  const themeName = theme || 'cerberus'\n\n  return (\n    <cerberus.div\n      {...nativeProps}\n      data-panda-theme={themeName}\n      data-color-mode={colorMode}\n    >\n      {props.children}\n    </cerberus.div>\n  )\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/build/legacy/components/theme/theme.cjs

@@ -134,7 +134,7 @@ var CerberusPrimitive = class {
 // src/system/factory.ts
 var import_factory = require("@ark-ui/react/factory");
 function cerberusFactory(component, defaultProps) {
-  const { withNoRecipe } = createCerberusPrimitive();
+  const { withNoRecipe } = new CerberusPrimitive();
   const arkComponent = import_factory.ark[component];
   if (arkComponent) {
     return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} });
@@ -157,9 +157,6 @@ var cerberusFactoryProxy = new Proxy(cerberusFactory, {
 });
 
 // src/system/index.ts
-function createCerberusPrimitive(recipe) {
-  return new CerberusPrimitive(recipe);
-}
 var cerberus = cerberusFactoryProxy;
 
 // src/components/theme/theme.tsx

package/build/legacy/components/theme/theme.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/theme/theme.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/factory.ts","../../../../src/system/index.ts"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport type { ColorModes, CustomThemes } from '../../context/theme'\nimport { cerberus, type CerberusPrimitiveProps } from '../../system'\n\nexport interface ThemeProps<T extends string> {\n  /**\n   * The color mode to apply to the theme.\n   * @default 'light'\n   */\n  mode?: ColorModes\n  /**\n   * The theme to apply to the component.\n   * @default 'cerberus'\n   */\n  theme?: CustomThemes<T>\n}\n\nexport function Theme<T extends string>(\n  props: PropsWithChildren<CerberusPrimitiveProps<ThemeProps<T>>>,\n) {\n  const { mode, theme, ...nativeProps } = props\n  const colorMode = mode || 'light'\n  const themeName = theme || 'cerberus'\n\n  return (\n    <cerberus.div\n      {...nativeProps}\n      data-panda-theme={themeName}\n      data-color-mode={colorMode}\n    >\n      {props.children}\n    </cerberus.div>\n  )\n}\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 { ark } from '@ark-ui/react/factory'\nimport { createCerberusPrimitive } from './index'\nimport type { ComponentType } from 'react'\n\nfunction cerberusFactory<T extends Record<string, unknown>>(\n  component: keyof typeof ark,\n  defaultProps?: T,\n) {\n  const { withNoRecipe } = createCerberusPrimitive()\n  const arkComponent = ark[component] as ComponentType\n\n  if (arkComponent) {\n    return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} })\n  }\n\n  throw new Error(\n    `Component \"${String(component)}\" is not a valid Cerberus component. Please check the component name.`,\n  )\n}\n\nconst cache = new Map()\n\n// Create a proxy that handles both function calls and property access\nexport const cerberusFactoryProxy = new Proxy(cerberusFactory, {\n  apply(target, thisArg, argArray) {\n    // Handle function calls like cerberus('button')\n    // @ts-expect-error: Ignore type error for dynamic property access\n    return target.apply(thisArg, argArray)\n  },\n  get(_target, el: keyof typeof ark) {\n    // Handle property access like cerberus.button\n    if (!cache.has(el)) {\n      cache.set(el, cerberusFactory(el))\n    }\n    return cache.get(el) as ReturnType<typeof cerberusFactory>\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":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/theme/theme.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/factory.ts","../../../../src/system/index.ts"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport type { ColorModes, CustomThemes } from '../../context/theme'\nimport { cerberus, type CerberusPrimitiveProps } from '../../system'\n\nexport interface ThemeProps<T extends string> {\n  /**\n   * The color mode to apply to the theme.\n   * @default 'light'\n   */\n  mode?: ColorModes\n  /**\n   * The theme to apply to the component.\n   * @default 'cerberus'\n   */\n  theme?: CustomThemes<T>\n}\n\nexport function Theme<T extends string>(\n  props: PropsWithChildren<CerberusPrimitiveProps<ThemeProps<T>>>,\n) {\n  const { mode, theme, ...nativeProps } = props\n  const colorMode = mode || 'light'\n  const themeName = theme || 'cerberus'\n\n  return (\n    <cerberus.div\n      {...nativeProps}\n      data-panda-theme={themeName}\n      data-color-mode={colorMode}\n    >\n      {props.children}\n    </cerberus.div>\n  )\n}\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 { ark } from '@ark-ui/react/factory'\nimport type { ComponentType } from 'react'\nimport { CerberusPrimitive } from './primitive-factory'\n\nfunction cerberusFactory<T extends Record<string, unknown>>(\n  component: keyof typeof ark,\n  defaultProps?: T,\n) {\n  const { withNoRecipe } = new CerberusPrimitive()\n  const arkComponent = ark[component] as ComponentType\n\n  if (arkComponent) {\n    return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} })\n  }\n\n  throw new Error(\n    `Component \"${String(component)}\" is not a valid Cerberus component. Please check the component name.`,\n  )\n}\n\nconst cache = new Map()\n\n// Create a proxy that handles both function calls and property access\nexport const cerberusFactoryProxy = new Proxy(cerberusFactory, {\n  apply(target, thisArg, argArray) {\n    // Handle function calls like cerberus('button')\n    // @ts-expect-error: Ignore type error for dynamic property access\n    return target.apply(thisArg, argArray)\n  },\n  get(_target, el: keyof typeof ark) {\n    // Handle property access like cerberus.button\n    if (!cache.has(el)) {\n      cache.set(el, cerberusFactory(el))\n    }\n    return cache.get(el) as ReturnType<typeof cerberusFactory>\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":["import_jsx_runtime"]}

package/build/legacy/index.cjs

@@ -522,7 +522,7 @@ var CerberusPrimitive = class {
 // src/system/factory.ts
 var import_factory = require("@ark-ui/react/factory");
 function cerberusFactory(component, defaultProps) {
-  const { withNoRecipe: withNoRecipe10 } = createCerberusPrimitive();
+  const { withNoRecipe: withNoRecipe10 } = new CerberusPrimitive();
   const arkComponent = import_factory.ark[component];
   if (arkComponent) {
     return withNoRecipe10(arkComponent, { defaultProps: defaultProps ?? {} });