npm - @cerberus-design/react - Versions diffs - 0.19.1 → 0.19.3 - Mend

@cerberus-design/react 0.19.1 → 0.19.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (584) hide show

package/build/legacy/components/tabs/tabs.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/tabs/tabs.tsx","../../../../src/components/tabs/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/tabs/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport { TabsParts, type TabsPartsValue } from './parts'\nimport type { TabsListProps } from './primitives'\n\n/*\n This module contains an abstraction of the Tabs family.\n * @module 'tabs'\n /\n\ninterface TabsValueProps\n extends Omit<TabsPartsValue, 'Trigger' \| 'Content' \| 'Indicator'> {\n /\n A named component for the TabsTrigger.\n /\n Tab: ElementType\n /\n A named component for the TabsContent.\n /\n Panel: ElementType\n}\n\n/\n An abstraction of the TabsList component that includes the TabIndicator.\n /\nfunction TabsList(props: TabsListProps) {\n const { children, ...listProps } = props\n return (\n <TabsParts.List {...listProps}>\n {children}\n <TabsParts.Indicator />\n </TabsParts.List>\n )\n}\n\n/\n An Object containing the abstracted parts of the Tabs component.\n \n @remarks\n \n When using object component syntax, you import the TabsParts object and\n * the entire family of components vs. only what you use.\n /\nexport const Tabs: TabsValueProps = {\n Root: TabsParts.Root,\n List: TabsList,\n Tab: TabsParts.Trigger,\n Panel: TabsParts.Content,\n}\n","import {\n Tabs,\n type TabContentProps as ArkTabContentProps,\n type TabIndicatorProps as ArkTabIndicatorProps,\n type TabListProps as ArkTabListProps,\n type TabsRootProps as ArkTabsRootProps,\n type TabTriggerProps as ArkTabTriggerProps,\n} from '@ark-ui/react/tabs'\nimport { tabs, type TabsVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/\n This module provides the primitives for the Tabs component.\n * @module 'tabs/primitives'\n /\n\nconst { withSlotRecipe } = createCerberusPrimitive(tabs)\n\n// Root\n\nexport type TabsRootProps = CerberusPrimitiveProps<\n ArkTabsRootProps & TabsVariantProps\n>\n// @ts-expect-error this is a workaround for the type issue WIP\nexport const TabsRoot = withSlotRecipe<TabsRootProps>(Tabs.Root, 'root')\n\n// TabsList\n\nexport type TabsListProps = CerberusPrimitiveProps<ArkTabListProps>\nexport const TabsList = withSlotRecipe<TabsListProps>(Tabs.List, 'list')\n\n// TabsTrigger\n\nexport type TabsTriggerProps = CerberusPrimitiveProps<ArkTabTriggerProps>\nexport const TabsTrigger = withSlotRecipe<TabsTriggerProps>(\n Tabs.Trigger,\n 'trigger',\n)\n\n// TabsContent\n\nexport type TabContentProps = CerberusPrimitiveProps<ArkTabContentProps>\nexport const TabsContent = withSlotRecipe<TabContentProps>(\n Tabs.Content,\n 'content',\n)\n\n// TabsIndicator\n\nexport type TabIndicatorProps = CerberusPrimitiveProps<ArkTabIndicatorProps>\nexport const TabsIndicator = withSlotRecipe<TabIndicatorProps>(\n Tabs.Indicator,\n 'indicator',\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 { 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 {\n TabsContent,\n TabsIndicator,\n TabsList,\n TabsRoot,\n TabsTrigger,\n} from './primitives'\n\n/*\n This module contains the parts of the Tabs parts.\n * @module 'tabs/parts'\n /\n\nexport interface TabsPartsValue {\n /\n The container of the tabs.\n /\n Root: ElementType\n /\n The tab list element.\n /\n List: ElementType\n /\n The tab element.\n /\n Trigger: ElementType\n /\n The tab content element.\n /\n Content: ElementType\n /\n The tab indicator element.\n /\n Indicator: ElementType\n}\n\n/\n An Object containing the parts of the Switch component. For users that\n * prefer Object component syntax.\n \n @remarks\n \n When using object component syntax, you import the TabsParts object and\n * the entire family of components vs. only what you use.\n */\nexport const TabsParts: TabsPartsValue = {\n Root: TabsRoot,\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n Indicator: TabsIndicator,\n}\n"],"mappings":"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","names":["Tabs","import_jsx_runtime","TabsList","Tabs"]}
1	+ {"version":3,"sources":["../../../../src/components/tabs/tabs.tsx","../../../../src/components/tabs/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/tabs/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport { TabsParts, type TabsPartsValue } from './parts'\nimport type { TabsListProps } from './primitives'\n\n/*\n This module contains an abstraction of the Tabs family.\n * @module 'tabs'\n /\n\ninterface TabsValueProps\n extends Omit<TabsPartsValue, 'Trigger' \| 'Content' \| 'Indicator'> {\n /\n A named component for the TabsTrigger.\n /\n Tab: ElementType\n /\n A named component for the TabsContent.\n /\n Panel: ElementType\n}\n\n/\n An abstraction of the TabsList component that includes the TabIndicator.\n /\nfunction TabsList(props: TabsListProps) {\n const { children, ...listProps } = props\n return (\n <TabsParts.List {...listProps}>\n {children}\n <TabsParts.Indicator />\n </TabsParts.List>\n )\n}\n\n/\n An Object containing the abstracted parts of the Tabs component.\n \n @remarks\n \n When using object component syntax, you import the TabsParts object and\n * the entire family of components vs. only what you use.\n /\nexport const Tabs: TabsValueProps = {\n Root: TabsParts.Root,\n List: TabsList,\n Tab: TabsParts.Trigger,\n Panel: TabsParts.Content,\n}\n","import {\n Tabs,\n type TabContentProps as ArkTabContentProps,\n type TabIndicatorProps as ArkTabIndicatorProps,\n type TabListProps as ArkTabListProps,\n type TabsRootProps as ArkTabsRootProps,\n type TabTriggerProps as ArkTabTriggerProps,\n} from '@ark-ui/react/tabs'\nimport { tabs, type TabsVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/\n This module provides the primitives for the Tabs component.\n * @module 'tabs/primitives'\n /\n\nconst { withSlotRecipe } = createCerberusPrimitive(tabs)\n\n// Root\n\nexport type TabsRootProps = CerberusPrimitiveProps<\n ArkTabsRootProps & TabsVariantProps\n>\n// @ts-expect-error this is a workaround for the type issue WIP\nexport const TabsRoot = withSlotRecipe<TabsRootProps>(Tabs.Root, 'root')\n\n// TabsList\n\nexport type TabsListProps = CerberusPrimitiveProps<ArkTabListProps>\nexport const TabsList = withSlotRecipe<TabsListProps>(Tabs.List, 'list')\n\n// TabsTrigger\n\nexport type TabsTriggerProps = CerberusPrimitiveProps<ArkTabTriggerProps>\nexport const TabsTrigger = withSlotRecipe<TabsTriggerProps>(\n Tabs.Trigger,\n 'trigger',\n)\n\n// TabsContent\n\nexport type TabContentProps = CerberusPrimitiveProps<ArkTabContentProps>\nexport const TabsContent = withSlotRecipe<TabContentProps>(\n Tabs.Content,\n 'content',\n)\n\n// TabsIndicator\n\nexport type TabIndicatorProps = CerberusPrimitiveProps<ArkTabIndicatorProps>\nexport const TabsIndicator = withSlotRecipe<TabIndicatorProps>(\n Tabs.Indicator,\n 'indicator',\n)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n type ComponentType,\n type ElementType,\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> \| string,\n ) {\n if (typeof Component !== 'function' && typeof Component !== 'object') {\n return false\n }\n return true\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 * Can be a string or a component reference.\n * @returns A new React component that applies Cerberus features to the\n * original component.\n \n @example\n * ```ts\n * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n * const Button = withNoRecipe('button')\n * ```\n /\n withNoRecipe = <P extends HTMLAttributes<unknown>>(\n Component: ComponentType<P> \| string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl<P> => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\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 <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n }\n\n if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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> \| string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\n\n const recipe = this.recipe as CerberusRecipe\n\n const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\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 if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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> \| string,\n slot: keyof RecipeVariantRecord,\n options?: WithRecipeOptions,\n ) => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\n\n const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\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 if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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 {\n TabsContent,\n TabsIndicator,\n TabsList,\n TabsRoot,\n TabsTrigger,\n} from './primitives'\n\n/*\n This module contains the parts of the Tabs parts.\n * @module 'tabs/parts'\n /\n\nexport interface TabsPartsValue {\n /\n The container of the tabs.\n /\n Root: ElementType\n /\n The tab list element.\n /\n List: ElementType\n /\n The tab element.\n /\n Trigger: ElementType\n /\n The tab content element.\n /\n Content: ElementType\n /\n The tab indicator element.\n /\n Indicator: ElementType\n}\n\n/\n An Object containing the parts of the Switch component. For users that\n * prefer Object component syntax.\n \n @remarks\n \n When using object component syntax, you import the TabsParts object and\n * the entire family of components vs. only what you use.\n */\nexport const TabsParts: TabsPartsValue = {\n Root: TabsRoot,\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n Indicator: TabsIndicator,\n}\n"],"mappings":"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","names":["Tabs","import_jsx_runtime","TabsList","Tabs"]}

package/build/legacy/components/tag/index.cjs CHANGED Viewed

@@ -56,23 +56,28 @@ var CerberusPrimitive = class {
     /**
      * Creates a Cerberus component with bare features and no recipe.
      * @param Component - The React component to enhance with Cerberus features.
+     * Can be a string or a component reference.
      * @returns A new React component that applies Cerberus features to the
      * original component.
+     *
      * @example
-     * ```typescript
-     * const { withNoRecipe } = createCerberusPrimitive(button)
-     * const Button = withNoRecipe(RawButton)
+     * ```ts
+     * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
+     * const Button = withNoRecipe('button')
      * ```
      */
     __publicField(this, "withNoRecipe", (Component, options) => {
       const { defaultProps } = options || {};
-      this.validateComponent(Component);
+      const El = 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_runtime2.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     /**
@@ -84,11 +89,15 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withRecipe", (Component, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
-        const { css: customCss, className, ...nativeProps } = internalProps;
-        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const {
+          css: customCss,
+          className,
+          ...restOfInternalProps
+        } = internalProps;
+        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
         const recipeStyles = recipe(variantOptions);
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           Component,
@@ -99,7 +108,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     /**
@@ -116,11 +128,15 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withSlotRecipe", (Component, slot, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
-        const { css: customCss, className, ...nativeProps } = internalProps;
-        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const {
+          css: customCss,
+          className,
+          ...restOfInternalProps
+        } = internalProps;
+        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
         const styles = recipe(variantOptions);
         const slotStyles = styles[slot];
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -132,7 +148,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     this.recipe = recipe ?? null;
@@ -147,8 +166,9 @@ var CerberusPrimitive = class {
   }
   validateComponent(Component) {
     if (typeof Component !== "function" && typeof Component !== "object") {
-      throw new Error("Expected a React component as the first argument.");
+      return false;
     }
+    return true;
   }
 };

package/build/legacy/components/tag/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/tag/index.ts","../../../../src/components/tag/tag.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/icon-button/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/icon-button/button.tsx","../../../../src/components/show/show.tsx"],"sourcesContent":["export * from './tag'\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { MouseEventHandler, PropsWithChildren } from 'react'\nimport { css, cx } from 'styled-system/css'\nimport { tag, type TagVariantProps } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../icon-button/index'\nimport { Show } from '../show/index'\n\n/*\n This module contains the tag component.\n * @module\n /\n\nexport type StaticTagProps = HTMLArkProps<'span'> &\n TagVariantProps & {\n /\n The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n /\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLArkProps<'span'> & {\n /\n The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n /\n gradient?: never\n /\n The palette to use for the tag. Not available when the onClick prop is\n * provided.\n /\n palette?: never\n /\n The action to be performed when the tag is clicked.\n /\n onClick: MouseEventHandler<HTMLSpanElement>\n /\n The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' \| 'rounded'\n * @default 'pill'\n /\n shape?: never\n /\n The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' \| 'outlined'\n * @default 'filled'\n /\n usage?: never\n}\n\nexport type TagProps = StaticTagProps \| ClickableTagProps\n\n/\n The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n /\nexport function Tag(props: PropsWithChildren<TagProps>) {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { icons } = useCerberusContext()\n const { close: Close } = icons\n\n return (\n <ark.span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <IconButton\n ariaLabel=\"Close\"\n onClick={onClick}\n palette=\"action\"\n usage=\"filled\"\n size=\"sm\"\n >\n <Close />\n </IconButton>\n </Show>\n </ark.span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/\n This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n /\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue \| null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/\n Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n /\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/\n Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n /\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/\n This module contains the IconButton component primitives.\n * @module @cerberus-design/react/components/icon-button/primitives\n /\n\nconst { withRecipe } = createCerberusPrimitive(iconButton)\n\n/\n The root element of the Button component.\n /\nexport type IconButtonRootProps = CerberusPrimitiveProps<\n HTMLArkProps<'button'> & IconButtonVariantProps\n>\nexport const IconButtonRoot = withRecipe(ark.button)\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 { IconButtonRoot, type IconButtonRootProps } from './primitives'\n\n/*\n This module contains the Icon Button component.\n * @module\n /\n\nexport interface IconButtonProps extends IconButtonRootProps {\n /\n The aria-label attribute for the icon button.\n /\n ariaLabel: string\n}\n\n/\n A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n /\nexport function IconButton(props: IconButtonProps) {\n const { ariaLabel, ...rootProps } = props\n return (\n <IconButtonRoot {...rootProps} aria-label={ariaLabel ?? 'Icon Button'} />\n )\n}\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"],"mappings":"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","names":["import_factory","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../../../src/components/tag/index.ts","../../../../src/components/tag/tag.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/icon-button/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/icon-button/button.tsx","../../../../src/components/show/show.tsx"],"sourcesContent":["export * from './tag'\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { MouseEventHandler, PropsWithChildren } from 'react'\nimport { css, cx } from 'styled-system/css'\nimport { tag, type TagVariantProps } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../icon-button/index'\nimport { Show } from '../show/index'\n\n/*\n This module contains the tag component.\n * @module\n /\n\nexport type StaticTagProps = HTMLArkProps<'span'> &\n TagVariantProps & {\n /\n The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n /\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLArkProps<'span'> & {\n /\n The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n /\n gradient?: never\n /\n The palette to use for the tag. Not available when the onClick prop is\n * provided.\n /\n palette?: never\n /\n The action to be performed when the tag is clicked.\n /\n onClick: MouseEventHandler<HTMLSpanElement>\n /\n The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' \| 'rounded'\n * @default 'pill'\n /\n shape?: never\n /\n The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' \| 'outlined'\n * @default 'filled'\n /\n usage?: never\n}\n\nexport type TagProps = StaticTagProps \| ClickableTagProps\n\n/\n The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n /\nexport function Tag(props: PropsWithChildren<TagProps>) {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { icons } = useCerberusContext()\n const { close: Close } = icons\n\n return (\n <ark.span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <IconButton\n ariaLabel=\"Close\"\n onClick={onClick}\n palette=\"action\"\n usage=\"filled\"\n size=\"sm\"\n >\n <Close />\n </IconButton>\n </Show>\n </ark.span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/\n This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n /\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue \| null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/\n Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n /\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/\n Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n /\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/\n This module contains the IconButton component primitives.\n * @module @cerberus-design/react/components/icon-button/primitives\n /\n\nconst { withRecipe } = createCerberusPrimitive(iconButton)\n\n/\n The root element of the Button component.\n /\nexport type IconButtonRootProps = CerberusPrimitiveProps<\n HTMLArkProps<'button'> & IconButtonVariantProps\n>\nexport const IconButtonRoot = withRecipe(ark.button)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n type ComponentType,\n type ElementType,\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> \| string,\n ) {\n if (typeof Component !== 'function' && typeof Component !== 'object') {\n return false\n }\n return true\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 * Can be a string or a component reference.\n * @returns A new React component that applies Cerberus features to the\n * original component.\n \n @example\n * ```ts\n * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n * const Button = withNoRecipe('button')\n * ```\n /\n withNoRecipe = <P extends HTMLAttributes<unknown>>(\n Component: ComponentType<P> \| string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl<P> => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\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 <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n }\n\n if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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> \| string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\n\n const recipe = this.recipe as CerberusRecipe\n\n const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\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 if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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> \| string,\n slot: keyof RecipeVariantRecord,\n options?: WithRecipeOptions,\n ) => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\n\n const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\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 if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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 { IconButtonRoot, type IconButtonRootProps } from './primitives'\n\n/*\n This module contains the Icon Button component.\n * @module\n /\n\nexport interface IconButtonProps extends IconButtonRootProps {\n /\n The aria-label attribute for the icon button.\n /\n ariaLabel: string\n}\n\n/\n A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n /\nexport function IconButton(props: IconButtonProps) {\n const { ariaLabel, ...rootProps } = props\n return (\n <IconButtonRoot {...rootProps} aria-label={ariaLabel ?? 'Icon Button'} />\n )\n}\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"],"mappings":"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","names":["import_factory","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/tag/tag.cjs CHANGED Viewed

@@ -55,23 +55,28 @@ var CerberusPrimitive = class {
     /**
      * Creates a Cerberus component with bare features and no recipe.
      * @param Component - The React component to enhance with Cerberus features.
+     * Can be a string or a component reference.
      * @returns A new React component that applies Cerberus features to the
      * original component.
+     *
      * @example
-     * ```typescript
-     * const { withNoRecipe } = createCerberusPrimitive(button)
-     * const Button = withNoRecipe(RawButton)
+     * ```ts
+     * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
+     * const Button = withNoRecipe('button')
      * ```
      */
     __publicField(this, "withNoRecipe", (Component, options) => {
       const { defaultProps } = options || {};
-      this.validateComponent(Component);
+      const El = 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_runtime2.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     /**
@@ -83,11 +88,15 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withRecipe", (Component, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
-        const { css: customCss, className, ...nativeProps } = internalProps;
-        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const {
+          css: customCss,
+          className,
+          ...restOfInternalProps
+        } = internalProps;
+        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
         const recipeStyles = recipe(variantOptions);
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           Component,
@@ -98,7 +107,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     /**
@@ -115,11 +127,15 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withSlotRecipe", (Component, slot, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
-        const { css: customCss, className, ...nativeProps } = internalProps;
-        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const {
+          css: customCss,
+          className,
+          ...restOfInternalProps
+        } = internalProps;
+        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
         const styles = recipe(variantOptions);
         const slotStyles = styles[slot];
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -131,7 +147,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     this.recipe = recipe ?? null;
@@ -146,8 +165,9 @@ var CerberusPrimitive = class {
   }
   validateComponent(Component) {
     if (typeof Component !== "function" && typeof Component !== "object") {
-      throw new Error("Expected a React component as the first argument.");
+      return false;
     }
+    return true;
   }
 };

package/build/legacy/components/tag/tag.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/tag/tag.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/icon-button/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/icon-button/button.tsx","../../../../src/components/show/show.tsx"],"sourcesContent":["'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { MouseEventHandler, PropsWithChildren } from 'react'\nimport { css, cx } from 'styled-system/css'\nimport { tag, type TagVariantProps } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../icon-button/index'\nimport { Show } from '../show/index'\n\n/*\n This module contains the tag component.\n * @module\n /\n\nexport type StaticTagProps = HTMLArkProps<'span'> &\n TagVariantProps & {\n /\n The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n /\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLArkProps<'span'> & {\n /\n The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n /\n gradient?: never\n /\n The palette to use for the tag. Not available when the onClick prop is\n * provided.\n /\n palette?: never\n /\n The action to be performed when the tag is clicked.\n /\n onClick: MouseEventHandler<HTMLSpanElement>\n /\n The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' \| 'rounded'\n * @default 'pill'\n /\n shape?: never\n /\n The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' \| 'outlined'\n * @default 'filled'\n /\n usage?: never\n}\n\nexport type TagProps = StaticTagProps \| ClickableTagProps\n\n/\n The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n /\nexport function Tag(props: PropsWithChildren<TagProps>) {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { icons } = useCerberusContext()\n const { close: Close } = icons\n\n return (\n <ark.span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <IconButton\n ariaLabel=\"Close\"\n onClick={onClick}\n palette=\"action\"\n usage=\"filled\"\n size=\"sm\"\n >\n <Close />\n </IconButton>\n </Show>\n </ark.span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/\n This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n /\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue \| null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/\n Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n /\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/\n Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n /\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/\n This module contains the IconButton component primitives.\n * @module @cerberus-design/react/components/icon-button/primitives\n /\n\nconst { withRecipe } = createCerberusPrimitive(iconButton)\n\n/\n The root element of the Button component.\n /\nexport type IconButtonRootProps = CerberusPrimitiveProps<\n HTMLArkProps<'button'> & IconButtonVariantProps\n>\nexport const IconButtonRoot = withRecipe(ark.button)\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 { IconButtonRoot, type IconButtonRootProps } from './primitives'\n\n/*\n This module contains the Icon Button component.\n * @module\n /\n\nexport interface IconButtonProps extends IconButtonRootProps {\n /\n The aria-label attribute for the icon button.\n /\n ariaLabel: string\n}\n\n/\n A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n /\nexport function IconButton(props: IconButtonProps) {\n const { ariaLabel, ...rootProps } = props\n return (\n <IconButtonRoot {...rootProps} aria-label={ariaLabel ?? 'Icon Button'} />\n )\n}\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,kBAAuC;AAEvC,IAAAC,cAAwB;AACxB,IAAAC,kBAA0C;;;ACH1C,mBAAkE;AAyB9D;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AC3CA,qBAAuC;AACvC,qBAAwD;;;ACDxD,iBAAwB;AAmEX,IAAAC,sBAAA;AA9CN,IAAM,oBAAN,MAAwB;AAAA,EAG7B,YAAY,QAAkC;AAF9C;AAkCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAe,CACb,WACA,YAC2B;AAC3B,YAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AAErC,WAAK,kBAAkB,SAAS;AAEhC,YAAM,gBAAgB,CAAC,UAA0C;AAC/D,cAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AACtD,cAAM,SAAS,KAAK,cAAU,eAAG,eAAW,gBAAI,SAAS,CAAC,CAAC;AAC3D,eAAO,6CAAC,aAAW,GAAG,cAAe,GAAG,QAAS,GAAI,aAAmB;AAAA,MAC1E;AAEA,oBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,aAAO;AAAA,IACT;AASA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAa,CACX,WACA,YAC+D;AAC/D,YAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,YAAM,SAAS,KAAK;AAEpB,WAAK,kBAAkB,SAAS;AAEhC,YAAM,gBAAgB,CAAC,kBAAkD;AACvE,cAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,cAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,cAAM,eAAe,OAAO,cAAc;AAE1C,eACE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAI;AAAA,YACL,eAAW,eAAG,WAAW,kBAAc,gBAAI,SAAS,CAAC;AAAA;AAAA,QACvD;AAAA,MAEJ;AAEA,oBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,aAAO;AAAA,IACT;AAcA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAAiB,CACf,WACA,MACA,YACG;AACH,YAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,YAAM,SAAS,KAAK;AAEpB,WAAK,kBAAkB,SAAS;AAEhC,YAAM,gBAAgB,CAAC,kBAAkD;AACvE,cAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,cAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,cAAM,SAAS,OAAO,cAAc;AACpC,cAAM,aAAa,OAAO,IAA2B;AAErD,eACE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAI;AAAA,YACL,eAAW,eAAG,WAAW,gBAAY,gBAAI,SAAS,CAAC;AAAA;AAAA,QACrD;AAAA,MAEJ;AAEA,oBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,aAAO;AAAA,IACT;AA5HE,SAAK,SAAS,UAAU;AAAA,EAC1B;AAAA,EAEQ,UAAU,QAAqD;AACrE,QAAI,QAAQ;AACV,aAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AACA,WAAO,CAAC;AAAA,EACV;AAAA,EAEQ,kBACN,WACA;AACA,QAAI,OAAO,cAAc,cAAc,OAAO,cAAc,UAAU;AACpE,YAAM,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAAA,EACF;AA2GF;;;AChIO,SAAS,wBACd,QACA;AACA,SAAO,IAAI,kBAAkB,MAAM;AACrC;;;AFdA,IAAM,EAAE,WAAW,IAAI,wBAAwB,yBAAU;AAQlD,IAAM,iBAAiB,WAAW,mBAAI,MAAM;;;AGC/C,IAAAC,sBAAA;AAHG,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SACE,6CAAC,kBAAgB,GAAG,WAAW,cAAY,aAAa,eAAe;AAE3E;;;ACSW,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;;;ANiCI,IAAAC,sBAAA;AAVG,SAAS,IAAI,OAAoC;AACtD,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,WAAU,+BAAO,YAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAClD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,OAAO,MAAM,IAAI;AAEzB,SACE;AAAA,IAAC,oBAAI;AAAA,IAAJ;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,qBAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,6CAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YAEL,uDAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,kBAAc,iBAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":["import_factory","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../../../src/components/tag/tag.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/icon-button/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/icon-button/button.tsx","../../../../src/components/show/show.tsx"],"sourcesContent":["'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { MouseEventHandler, PropsWithChildren } from 'react'\nimport { css, cx } from 'styled-system/css'\nimport { tag, type TagVariantProps } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../icon-button/index'\nimport { Show } from '../show/index'\n\n/*\n This module contains the tag component.\n * @module\n /\n\nexport type StaticTagProps = HTMLArkProps<'span'> &\n TagVariantProps & {\n /\n The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n /\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLArkProps<'span'> & {\n /\n The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n /\n gradient?: never\n /\n The palette to use for the tag. Not available when the onClick prop is\n * provided.\n /\n palette?: never\n /\n The action to be performed when the tag is clicked.\n /\n onClick: MouseEventHandler<HTMLSpanElement>\n /\n The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' \| 'rounded'\n * @default 'pill'\n /\n shape?: never\n /\n The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' \| 'outlined'\n * @default 'filled'\n /\n usage?: never\n}\n\nexport type TagProps = StaticTagProps \| ClickableTagProps\n\n/\n The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n /\nexport function Tag(props: PropsWithChildren<TagProps>) {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { icons } = useCerberusContext()\n const { close: Close } = icons\n\n return (\n <ark.span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <IconButton\n ariaLabel=\"Close\"\n onClick={onClick}\n palette=\"action\"\n usage=\"filled\"\n size=\"sm\"\n >\n <Close />\n </IconButton>\n </Show>\n </ark.span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/\n This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n /\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue \| null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/\n Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n /\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/\n Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n /\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/\n This module contains the IconButton component primitives.\n * @module @cerberus-design/react/components/icon-button/primitives\n /\n\nconst { withRecipe } = createCerberusPrimitive(iconButton)\n\n/\n The root element of the Button component.\n /\nexport type IconButtonRootProps = CerberusPrimitiveProps<\n HTMLArkProps<'button'> & IconButtonVariantProps\n>\nexport const IconButtonRoot = withRecipe(ark.button)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n type ComponentType,\n type ElementType,\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> \| string,\n ) {\n if (typeof Component !== 'function' && typeof Component !== 'object') {\n return false\n }\n return true\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 * Can be a string or a component reference.\n * @returns A new React component that applies Cerberus features to the\n * original component.\n \n @example\n * ```ts\n * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n * const Button = withNoRecipe('button')\n * ```\n /\n withNoRecipe = <P extends HTMLAttributes<unknown>>(\n Component: ComponentType<P> \| string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl<P> => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\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 <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n }\n\n if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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> \| string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\n\n const recipe = this.recipe as CerberusRecipe\n\n const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\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 if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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> \| string,\n slot: keyof RecipeVariantRecord,\n options?: WithRecipeOptions,\n ) => {\n const { defaultProps } = options \|\| {}\n const El = Component as ComponentType<P> \| ElementType\n\n const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\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 if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName \|\| El.name\n CerbComponent.displayName = ElName\n }\n\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 { IconButtonRoot, type IconButtonRootProps } from './primitives'\n\n/*\n This module contains the Icon Button component.\n * @module\n /\n\nexport interface IconButtonProps extends IconButtonRootProps {\n /\n The aria-label attribute for the icon button.\n /\n ariaLabel: string\n}\n\n/\n A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n /\nexport function IconButton(props: IconButtonProps) {\n const { ariaLabel, ...rootProps } = props\n return (\n <IconButtonRoot {...rootProps} aria-label={ariaLabel ?? 'Icon Button'} />\n )\n}\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"],"mappings":"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","names":["import_factory","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

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

@@ -35,23 +35,28 @@ var CerberusPrimitive = class {
     /**
      * Creates a Cerberus component with bare features and no recipe.
      * @param Component - The React component to enhance with Cerberus features.
+     * Can be a string or a component reference.
      * @returns A new React component that applies Cerberus features to the
      * original component.
+     *
      * @example
-     * ```typescript
-     * const { withNoRecipe } = createCerberusPrimitive(button)
-     * const Button = withNoRecipe(RawButton)
+     * ```ts
+     * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
+     * const Button = withNoRecipe('button')
      * ```
      */
     __publicField(this, "withNoRecipe", (Component, options) => {
       const { defaultProps } = options || {};
-      this.validateComponent(Component);
+      const El = 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 });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     /**
@@ -63,11 +68,15 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withRecipe", (Component, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
-        const { css: customCss, className, ...nativeProps } = internalProps;
-        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const {
+          css: customCss,
+          className,
+          ...restOfInternalProps
+        } = internalProps;
+        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
         const recipeStyles = recipe(variantOptions);
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           Component,
@@ -78,7 +87,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     /**
@@ -95,11 +107,15 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withSlotRecipe", (Component, slot, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
-        const { css: customCss, className, ...nativeProps } = internalProps;
-        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const {
+          css: customCss,
+          className,
+          ...restOfInternalProps
+        } = internalProps;
+        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
         const styles = recipe(variantOptions);
         const slotStyles = styles[slot];
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -111,7 +127,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      CerbComponent.displayName = Component.displayName || Component.name;
+      if (this.validateComponent(El)) {
+        const ElName = typeof El === "string" ? El : El.displayName || El.name;
+        CerbComponent.displayName = ElName;
+      }
       return CerbComponent;
     });
     this.recipe = recipe ?? null;
@@ -126,8 +145,9 @@ var CerberusPrimitive = class {
   }
   validateComponent(Component) {
     if (typeof Component !== "function" && typeof Component !== "object") {
-      throw new Error("Expected a React component as the first argument.");
+      return false;
     }
+    return true;
   }
 };