@cerberus-design/react
Version:
The Cerberus Design React component library.
1 lines • 11.8 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/components/carousel/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n Carousel,\n type CarouselRootProps as ArkRootProps,\n type CarouselControlProps as ArkControlProps,\n type CarouselPrevTriggerProps as ArkPrevTriggerProps,\n type CarouselNextTriggerProps as ArkNextTriggerProps,\n type CarouselIndicatorGroupProps as ArkIndicatorGroupProps,\n type CarouselIndicatorProps as ArkIndicatorProps,\n type CarouselItemGroupProps as ArkItemGroupProps,\n type CarouselItemProps as ArkItemProps,\n} from '@ark-ui/react/carousel'\nimport { carousel, type CarouselVariantProps } from 'styled-system/recipes'\nimport { createCerberusPrimitive } from '../../system/index'\n\n/**\n * This module contains the carousel primitives.\n * @module carousel/primitives\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(carousel)\n\n// Primitives\n\nexport type CarouselRootProps = CarouselVariantProps & ArkRootProps\nexport const CarouselRoot = withSlotRecipe(Carousel.Root, 'root')\n\nexport type CarouselControlProps = CarouselVariantProps & ArkControlProps\nexport const CarouselControl = withSlotRecipe(Carousel.Control, 'control')\n\nexport type CarouselPrevTriggerProps = CarouselVariantProps &\n ArkPrevTriggerProps\nexport const CarouselPrevTrigger = withSlotRecipe(\n Carousel.PrevTrigger,\n 'prevTrigger',\n)\n\nexport type CarouselNextTriggerProps = CarouselVariantProps &\n ArkNextTriggerProps\nexport const CarouselNextTrigger = withSlotRecipe(\n Carousel.NextTrigger,\n 'nextTrigger',\n)\n\nexport type CarouselIndicatorGroupProps = CarouselVariantProps &\n ArkIndicatorGroupProps\nexport const CarouselIndicatorGroup = withSlotRecipe(\n Carousel.IndicatorGroup,\n 'indicatorGroup',\n)\n\nexport type CarouselIndicatorProps = CarouselVariantProps & ArkIndicatorProps\nexport const CarouselIndicator = withSlotRecipe(Carousel.Indicator, 'indicator')\n\nexport type CarouselItemGroupProps = CarouselVariantProps & ArkItemGroupProps\nexport const CarouselItemGroup = withSlotRecipe(Carousel.ItemGroup, 'itemGroup')\n\nexport type CarouselItemProps = CarouselVariantProps & ArkItemProps\nexport const CarouselItem = withSlotRecipe(Carousel.Item, 'item')\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"],"mappings":"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","names":[]}