@cerberus-design/react

Version:

The Cerberus Design React component library.

1 lines • 15.2 kB

Source Map (JSON)

{"version":3,"sources":["../../../../src/components/select/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n createListCollection,\n Select,\n type ListCollection,\n type SelectClearTriggerProps as ArkSelectClearTrigger,\n type SelectContentProps as ArkSelectContentProps,\n type SelectControlProps as ArkSelectControlProps,\n type SelectHiddenSelectProps as ArkSelectHiddenSelectProps,\n type SelectIndicatorProps as ArkSelectIndicatorProps,\n type SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps,\n type SelectItemGroupProps as ArkSelectItemGroupProps,\n type SelectItemIndicatorProps as ArkSelectItemIndicatorProps,\n type SelectItemProps as ArkSelectItemProps,\n type SelectItemTextProps as ArkSelectItemTextProps,\n type SelectLabelProps as ArkSelectLabelProps,\n type SelectPositionerProps as ArkSelectPositionerProps,\n type SelectRootProps as ArkSelectRootProps,\n type SelectTriggerProps as ArkSelectTriggerProps,\n type SelectValueChangeDetails,\n type SelectValueTextProps as ArkSelectValueTextProps,\n} from '@ark-ui/react/select'\nimport { select, type SelectVariantProps } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\nimport type { SelectCollectionItem } from './select'\n\n/**\n * This module contains the Select primitives\n * @module 'react/select'\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(select)\n\n// Root\n\nexport type SelectRootProps = CerberusPrimitiveProps<\n ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps\n>\n// @ts-expect-error this is a workaround for the type mismatch WIP\nexport const SelectRoot = withSlotRecipe<SelectRootProps>(Select.Root, 'root')\n\n// Label\n\nexport type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>\nexport const SelectLabel = withSlotRecipe<SelectLabelProps>(\n Select.Label,\n 'label',\n)\n\n// Control\n\nexport type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>\nexport const SelectControl = withNoRecipe<SelectControlProps>(Select.Control)\n\n// Trigger\n\nexport type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>\nexport const SelectTrigger = withSlotRecipe<SelectTriggerProps>(\n Select.Trigger,\n 'trigger',\n)\n\n// Value Text\n\nexport type SelectValueTextProps =\n CerberusPrimitiveProps<ArkSelectValueTextProps>\nexport const SelectValueText = withNoRecipe<SelectValueTextProps>(\n Select.ValueText,\n)\n\n// Indicator\n\nexport type SelectIndicatorProps =\n CerberusPrimitiveProps<ArkSelectIndicatorProps>\nexport const SelectIndicator = withSlotRecipe<SelectIndicatorProps>(\n Select.Indicator,\n 'indicator',\n)\n\n// Clear Trigger\n\nexport type SelectClearTriggerProps =\n CerberusPrimitiveProps<ArkSelectClearTrigger>\nexport const SelectClearTrigger = withNoRecipe<SelectClearTriggerProps>(\n Select.ClearTrigger,\n)\n\n// Positioner\n\nexport type SelectPositionerProps =\n CerberusPrimitiveProps<ArkSelectPositionerProps>\nexport const SelectPositioner = withSlotRecipe<SelectPositionerProps>(\n Select.Positioner,\n 'positioner',\n)\n\n// Content\n\nexport type SelectContentProps = CerberusPrimitiveProps<\n ArkSelectContentProps & SelectVariantProps\n>\nexport const SelectContent = withSlotRecipe<SelectContentProps>(\n Select.Content,\n 'content',\n)\n\n// Item Group\n\nexport type SelectItemGroupProps =\n CerberusPrimitiveProps<ArkSelectItemGroupProps>\nexport const SelectItemGroup = withNoRecipe<SelectItemGroupProps>(\n Select.ItemGroup,\n)\n\n// Item Group Label\n\nexport type SelectItemGroupLabelProps =\n CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>\nexport const SelectItemGroupLabel = withSlotRecipe<SelectItemGroupLabelProps>(\n Select.ItemGroupLabel,\n 'itemGroupLabel',\n)\n\n// Item\n\nexport type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>\nexport const SelectItem = withSlotRecipe<SelectItemProps>(Select.Item, 'item')\n\n// Item Text\n\nexport type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>\nexport const SelectItemText = withNoRecipe<SelectItemTextProps>(Select.ItemText)\n\n// Item Indicator\n\nexport type SelectItemIndicatorProps =\n CerberusPrimitiveProps<ArkSelectItemIndicatorProps>\nexport const SelectItemIndicator = withSlotRecipe<SelectItemIndicatorProps>(\n Select.ItemIndicator,\n 'itemIndicator',\n)\n\n// Hidden Select\n\nexport type SelectHiddenSelectProps =\n CerberusPrimitiveProps<ArkSelectHiddenSelectProps>\nexport const SelectHiddenSelect = withNoRecipe<SelectHiddenSelectProps>(\n Select.HiddenSelect,\n)\n\n// Collection\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n return createListCollection({\n items: collection,\n })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\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":[]}