@cerberus-design/react

Version:

The Cerberus Design React component library.

1 lines • 14.9 kB

Source Map (JSON)

{"version":3,"sources":["../../../../src/components/tooltip/index.ts","../../../../src/components/tooltip/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/tooltip/parts.ts","../../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["export * from './primitives'\nexport * from './parts'\nexport * from './tooltip'\n","import {\n Tooltip,\n type TooltipRootProps as ArkTooltipRootProps,\n type TooltipTriggerProps as ArkTooltipTriggerProps,\n type TooltipPositionerProps as ArkTooltipPositionerProps,\n type TooltipContentProps as ArkTooltipContentProps,\n type TooltipArrowProps as ArkTooltipArrowProps,\n type TooltipArrowTipProps as ArkTooltipArrowTipProps,\n} from '@ark-ui/react/tooltip'\nimport { tooltip } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Tooltip primitive components.\n * @module TooltipPrimitives\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(tooltip)\n\n// Root\n\nexport type TooltipRootProps = CerberusPrimitiveProps<ArkTooltipRootProps>\nexport const TooltipRoot = withSlotRecipe<TooltipRootProps>(\n Tooltip.Root,\n 'root',\n)\n\n// Trigger\n\nexport type TooltipTriggerProps = CerberusPrimitiveProps<ArkTooltipTriggerProps>\nexport const TooltipTrigger = withSlotRecipe<TooltipTriggerProps>(\n Tooltip.Trigger,\n 'trigger',\n)\n\n// Positioner\n\nexport type TooltipPositionerProps =\n CerberusPrimitiveProps<ArkTooltipPositionerProps>\nexport const TooltipPositioner = withSlotRecipe<TooltipPositionerProps>(\n Tooltip.Positioner,\n 'positioner',\n)\n\n// Content\n\nexport type TooltipContentProps = CerberusPrimitiveProps<ArkTooltipContentProps>\nexport const TooltipContent = withSlotRecipe<TooltipContentProps>(\n Tooltip.Content,\n 'content',\n)\n\n// Arrow\n\nexport type TooltipArrowProps = CerberusPrimitiveProps<ArkTooltipArrowProps>\nexport const TooltipArrow = withSlotRecipe<TooltipArrowProps>(\n Tooltip.Arrow,\n 'arrow',\n)\n\n// ArrowTip\n\nexport type TooltipArrowTipProps =\n CerberusPrimitiveProps<ArkTooltipArrowTipProps>\nexport const TooltipArrowTip = withSlotRecipe<TooltipArrowTipProps>(\n Tooltip.ArrowTip,\n 'arrowTip',\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>(\n Component: ComponentType | 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 = >(\n Component: ComponentType | string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl => {\n const { defaultProps } = options || {}\n const El = Component as ComponentType | ElementType\n\n const CerbComponent = (props: PropsWithChildren & 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 = >(\n Component: ComponentType | string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl => {\n const { defaultProps } = options || {}\n const El = Component as ComponentType | ElementType\n\n const recipe = this.recipe as CerberusRecipe\n\n const CerbComponent = (internalProps: PropsWithChildren & 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 = >(\n Component: ComponentType | string,\n slot: keyof RecipeVariantRecord,\n options?: WithRecipeOptions,\n ) => {\n const { defaultProps } = options || {}\n const El = Component as ComponentType | ElementType\n\n const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n const CerbComponent = (internalProps: PropsWithChildren & 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 TooltipRoot,\n TooltipTrigger,\n TooltipPositioner,\n TooltipContent,\n TooltipArrow,\n TooltipArrowTip,\n} from './primitives'\n\n/**\n * This module contains the parts of the Tooltip component.\n * @module 'tooltip/parts'\n */\n\ninterface TooltipPartsValue {\n /**\n * The context provider of the tooltip.\n */\n Root: ElementType\n /**\n * The trigger that of the tooltip.\n */\n Trigger: ElementType\n /**\n * The positioner of the tooltip.\n */\n Positioner: ElementType\n /**\n * The content of the tooltip.\n */\n Content: ElementType\n /**\n * The arrow of the tooltip.\n */\n Arrow: ElementType\n /**\n * The arrow tip of the tooltip.\n */\n ArrowTip: ElementType\n}\n\n/**\n * An Object containing the parts of the Tooltip component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the TooltipParts object and\n * the entire family of components vs. only what you use.\n */\nexport const TooltipParts: TooltipPartsValue = {\n Root: TooltipRoot,\n Trigger: TooltipTrigger,\n Positioner: TooltipPositioner,\n Content: TooltipContent,\n Arrow: TooltipArrow,\n ArrowTip: TooltipArrowTip,\n}\n","import type { ReactNode } from 'react'\nimport { TooltipParts } from './parts'\nimport type { TooltipRootProps } from './primitives'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps extends TooltipRootProps {\n /**\n * The text content to display in the tooltip.\n */\n content: ReactNode\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n * <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps) {\n const { content, children, ...rootProps } = props\n const position = {\n placement: props.positioning || 'top',\n }\n\n return (\n <TooltipParts.Root openDelay={400} positioning={position} {...rootProps}>\n <TooltipParts.Trigger asChild>{children}</TooltipParts.Trigger>\n\n <TooltipParts.Positioner>\n <TooltipParts.Content>\n <TooltipParts.Arrow>\n <TooltipParts.ArrowTip />\n </TooltipParts.Arrow>\n {content}\n </TooltipParts.Content>\n </TooltipParts.Positioner>\n </TooltipParts.Root>\n )\n}\n"],"mappings":"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","names":["Tooltip","import_jsx_runtime","Tooltip"]}