@cerberus-design/react

Version:

The Cerberus Design React component library.

1 lines • 15.4 kB

Source Map (JSON)

{"version":3,"sources":["../../../../src/components/combobox/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n Combobox,\n type ComboboxClearTriggerProps as ArkComboboxClearTriggerProps,\n type ComboboxContentProps as ArkComboboxContentProps,\n type ComboboxControlProps as ArkComboboxControlProps,\n type ComboboxInputProps as ArkComboboxInputProps,\n type ComboboxItemGroupLabelProps as ArkComboboxItemGroupLabelProps,\n type ComboboxItemGroupProps as ArkComboboxItemGroupProps,\n type ComboboxItemIndicatorProps as ArkComboboxItemIndicatorProps,\n type ComboboxItemProps as ArkComboboxItemProps,\n type ComboboxItemTextProps as ArkComboboxItemTextProps,\n type ComboboxLabelProps as ArkComboboxLabelProps,\n type ComboboxPositionerProps as ArkComboboxPositionerProps,\n type ComboboxRootProps as ArkComboboxRootProps,\n type ComboboxTriggerProps as ArkComboboxTriggerProps,\n} from '@ark-ui/react/combobox'\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { SelectCollectionItem } from '../select/select'\nimport { combobox, type ComboboxVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Combobox.\n * @module 'combobox/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(combobox)\n\n/**\n * The ComboboxRoot component is the context provider for the Combobox\n * component.\n */\n\n// @ts-expect-error there is a type mismatch here, but it works in practice\nexport const ComboboxRoot = withSlotRecipe<ComboboxRootProps>(\n Combobox.Root,\n 'root',\n)\nexport type ComboboxRootProps = CerberusPrimitiveProps<\n ArkComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps\n>\n\n/**\n * The label that appears above the combobox input.\n */\nexport const ComboboxLabel = withSlotRecipe<ComboboxLabelProps>(\n Combobox.Label,\n 'label',\n)\nexport type ComboboxLabelProps = CerberusPrimitiveProps<ArkComboboxLabelProps>\n\n/**\n * The control that wraps the combobox input.\n */\nexport const ComboboxControl = withSlotRecipe<ComboboxControlProps>(\n Combobox.Control,\n 'control',\n)\nexport type ComboboxControlProps =\n CerberusPrimitiveProps<ArkComboboxControlProps>\n\n/**\n * The input of the combobox.\n */\nexport const ComboboxInput = withSlotRecipe<ComboboxInputProps>(\n Combobox.Input,\n 'input',\n)\nexport type ComboboxInputProps = CerberusPrimitiveProps<ArkComboboxInputProps>\n\n/**\n * The trigger that opens the dropdown.\n */\nexport const ComboboxTrigger = withSlotRecipe<ComboboxTriggerProps>(\n Combobox.Trigger,\n 'trigger',\n)\nexport type ComboboxTriggerProps =\n CerberusPrimitiveProps<ArkComboboxTriggerProps>\n\n/**\n * The trigger to clear the combobox input.\n */\nexport const ComboboxClearTrigger = withSlotRecipe<ComboboxClearTriggerProps>(\n Combobox.ClearTrigger,\n 'clearTrigger',\n)\nexport type ComboboxClearTriggerProps =\n CerberusPrimitiveProps<ArkComboboxClearTriggerProps>\n\n/**\n * The positioner that wraps the content.\n */\nexport const ComboboxPositioner = withSlotRecipe<ComboboxPositionerProps>(\n Combobox.Positioner,\n 'positioner',\n)\nexport type ComboboxPositionerProps =\n CerberusPrimitiveProps<ArkComboboxPositionerProps>\n\n/**\n * The content of the combobox component.\n */\nexport const ComboboxContent = withSlotRecipe<ComboboxContentProps>(\n Combobox.Content,\n 'content',\n)\nexport type ComboboxContentProps = CerberusPrimitiveProps<\n ArkComboboxContentProps & ComboboxVariantProps\n>\n\n/**\n * A group of items in the combobox component.\n */\nexport const ComboboxItemGroup = withSlotRecipe<ComboboxItemGroupProps>(\n Combobox.ItemGroup,\n 'itemGroup',\n)\nexport type ComboboxItemGroupProps =\n CerberusPrimitiveProps<ArkComboboxItemGroupProps>\n\n/**\n * The label for a group of items in the combobox component.\n */\nexport const ComboboxItemGroupLabel =\n withSlotRecipe<ComboboxItemGroupLabelProps>(\n Combobox.ItemGroupLabel,\n 'itemGroupLabel',\n )\nexport type ComboboxItemGroupLabelProps =\n CerberusPrimitiveProps<ArkComboboxItemGroupLabelProps>\n\n/**\n * An individual item in the combobox component.\n */\nexport const ComboboxItem = withSlotRecipe<ComboboxItemProps>(\n Combobox.Item,\n 'item',\n)\nexport type ComboboxItemProps = CerberusPrimitiveProps<ArkComboboxItemProps>\n\n/**\n * The text that labels a single item of the combobox.\n */\nexport const ComboboxItemText = withSlotRecipe<ComboboxItemTextProps>(\n Combobox.ItemText,\n 'itemText',\n)\nexport type ComboboxItemTextProps =\n CerberusPrimitiveProps<ArkComboboxItemTextProps>\n\n/**\n * The indicator that appears when the item has been selected.\n */\nexport const ComboboxItemIndicator = withSlotRecipe<ComboboxItemIndicatorProps>(\n Combobox.ItemIndicator,\n 'itemIndicator',\n)\nexport type ComboboxItemIndicatorProps =\n CerberusPrimitiveProps<ArkComboboxItemIndicatorProps>\n\n/**\n * The icon that appears at the start of the combobox input.\n */\nexport const ComboboxStartIcon = withSlotRecipe<ComboboxStartIconProps>(\n ark.span,\n 'startIcon',\n)\nexport type ComboboxStartIconProps = CerberusPrimitiveProps<\n HTMLArkProps<'span'>\n>\n\n// We are only doing this to make the API consistent\nexport const ComboItemText = ComboboxItemText\nexport type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails\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"],"mappings":"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","names":[]}