@cerberus-design/react
Version:
The Cerberus Design React component library.
1 lines • 18.6 kB
Source Map (JSON)
{"version":3,"sources":["../../../../src/components/date-picker/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n DatePicker,\n type DatePickerContentProps as ArkDatePickerContentProps,\n type DatePickerContextProps as ArkDatePickerContextProps,\n type DatePickerControlProps as ArkDatePickerControlProps,\n type DatePickerInputProps as ArkDatePickerInputProps,\n type DatePickerLabelProps as ArkDatePickerLabelProps,\n type DatePickerMonthSelectProps as ArkDatePickerMonthSelectProps,\n type DatePickerNextTriggerProps as ArkDatePickerNextTriggerProps,\n type DatePickerPositionerProps as ArkDatePickerPositionerProps,\n type DatePickerPrevTriggerProps as ArkDatePickerPrevTriggerProps,\n type DatePickerRangeTextProps as ArkDatePickerRangeTextProps,\n type DatePickerRootProps as ArkDatePickerRootProps,\n type DatePickerTableBodyProps as ArkDatePickerTableBodyProps,\n type DatePickerTableCellProps as ArkDatePickerTableCellProps,\n type DatePickerTableCellTriggerProps as ArkDatePickerTableCellTriggerProps,\n type DatePickerTableHeaderProps as ArkDatePickerTableHeaderProps,\n type DatePickerTableHeadProps as ArkDatePickerTableHeadProps,\n type DatePickerTableProps as ArkDatePickerTableProps,\n type DatePickerTableRowProps as ArkDatePickerTableRowProps,\n type DatePickerTriggerProps as ArkDatePickerTriggerProps,\n type DatePickerViewControlProps as ArkDatePickerViewControlProps,\n type DatePickerViewProps as ArkDatePickerViewProps,\n type DatePickerViewTriggerProps as ArkDatePickerViewTriggerProps,\n type DatePickerYearSelectProps as ArkDatePickerYearSelectProps,\n} from '@ark-ui/react/date-picker'\nimport { datePicker } from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the DatePicker primitives.\n * @module 'date-picker/primitives'\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(datePicker)\n\n/**\n * The label component for the DatePicker.\n */\nexport type DatePickerLabelProps =\n CerberusPrimitiveProps<ArkDatePickerLabelProps>\nexport const DatePickerLabel = withSlotRecipe(DatePicker.Label, 'label')\n\n/**\n * The control component for the DatePicker which wraps the input and the\n * triggers to open the DatePicker and clear the value.\n */\nexport type DatePickerControlProps =\n CerberusPrimitiveProps<ArkDatePickerControlProps>\nexport const DatePickerControl = withSlotRecipe(DatePicker.Control, 'control')\n\n/**\n * The input component for the DatePicker.\n */\nexport type DatePickerInputElProps =\n CerberusPrimitiveProps<ArkDatePickerInputProps>\nexport const DatePickerInputEl = withSlotRecipe(DatePicker.Input, 'input')\n\n/**\n * The trigger component that opens the DatePicker.\n */\nexport type DatePickerTriggerProps =\n CerberusPrimitiveProps<ArkDatePickerTriggerProps>\nexport const DatePickerTrigger = withSlotRecipe(DatePicker.Trigger, 'trigger')\n\n/**\n * The content component for the DatePicker.\n */\nexport type DatePickerContentProps =\n CerberusPrimitiveProps<ArkDatePickerContentProps>\nexport const DatePickerContent = withSlotRecipe(DatePicker.Content, 'content')\n\n/**\n * The view control component for the DatePicker which wraps the triggers to\n * switch between calendar views.\n */\nexport type DatePickerViewControlProps =\n CerberusPrimitiveProps<ArkDatePickerViewControlProps>\nexport const DatePickerViewControl = withSlotRecipe(\n DatePicker.Control,\n 'viewControl',\n)\n\n/**\n * The range text component for the DatePicker.\n */\nexport type DatePickerRangeTextProps =\n CerberusPrimitiveProps<ArkDatePickerRangeTextProps>\nexport const DatePickerRangeText = withSlotRecipe(\n DatePicker.RangeText,\n 'rangeText',\n)\n\n/**\n * The table component for the DatePicker.\n */\nexport type DatePickerTableProps =\n CerberusPrimitiveProps<ArkDatePickerTableProps>\nexport const DatePickerTable = withSlotRecipe(DatePicker.Table, 'table')\n\n/**\n * The header component for the DatePicker table.\n */\nexport type DatePickerTableHeaderProps =\n CerberusPrimitiveProps<ArkDatePickerTableHeaderProps>\nexport const DatePickerTableHeader = withSlotRecipe(\n DatePicker.TableHeader,\n 'tableHeader',\n)\n\n/**\n * The table cell component for the DatePicker.\n */\nexport type DatePickerTableCellProps =\n CerberusPrimitiveProps<ArkDatePickerTableCellProps>\nexport const DatePickerTableCell = withSlotRecipe(\n DatePicker.TableCell,\n 'tableCell',\n)\n\n/**\n * The table cell trigger component for the DatePicker.\n */\nexport type DatePickerTableCellTriggerProps =\n CerberusPrimitiveProps<ArkDatePickerTableCellTriggerProps>\nexport const DatePickerTableCellTrigger = withSlotRecipe(\n DatePicker.TableCellTrigger,\n 'tableCellTrigger',\n)\n\n/**\n * The root component of the DatePicker. This primitive has no Cerberus styles.\n */\nexport type DatePickerRootProps = CerberusPrimitiveProps<ArkDatePickerRootProps>\n// @ts-expect-error this is a workaround for the type error WIP\nexport const DatePickerRoot = withNoRecipe(DatePicker.Root)\n\n/**\n * The label component of the DatePicker. This primitive has no Cerberus styles.\n */\nexport type DatePickerClearTriggerProps =\n CerberusPrimitiveProps<ArkDatePickerTriggerProps>\nexport const DatePickerClearTrigger = withNoRecipe(DatePicker.ClearTrigger)\n\n/**\n * The control component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerPositionerProps =\n CerberusPrimitiveProps<ArkDatePickerPositionerProps>\nexport const DatePickerPositioner = withNoRecipe(DatePicker.Positioner)\n\n/**\n * The year select input component of the DatePicker. This primitive has no\n * Cerberus styles.\n */\nexport type DatePickerYearSelectProps =\n CerberusPrimitiveProps<ArkDatePickerYearSelectProps>\nexport const DatePickerYearSelect = withNoRecipe(DatePicker.YearSelect)\n\n/**\n * The month select input component of the DatePicker. This primitive has no\n * Cerberus styles.\n */\nexport type DatePickerMonthSelectProps =\n CerberusPrimitiveProps<ArkDatePickerMonthSelectProps>\nexport const DatePickerMonthSelect = withNoRecipe(DatePicker.MonthSelect)\n\n/**\n * The day view component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerViewProps = CerberusPrimitiveProps<ArkDatePickerViewProps>\nexport const DatePickerView = withNoRecipe(DatePicker.View)\n\n/**\n * The day context component of the DatePicker. This primitive has no\n * Cerberus styles.\n */\nexport type DatePickerContextProps =\n CerberusPrimitiveProps<ArkDatePickerContextProps>\nexport const DatePickerContext = DatePicker.Context\n\n/**\n * The trigger component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerPrevTriggerProps =\n CerberusPrimitiveProps<ArkDatePickerPrevTriggerProps>\nexport const DatePickerPrevTrigger = withNoRecipe(DatePicker.PrevTrigger)\n\n/**\n * The trigger component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerNextTriggerProps =\n CerberusPrimitiveProps<ArkDatePickerNextTriggerProps>\nexport const DatePickerNextTrigger = withNoRecipe(DatePicker.NextTrigger)\n\n/**\n * The trigger component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerViewTriggerProps =\n CerberusPrimitiveProps<ArkDatePickerViewTriggerProps>\nexport const DatePickerViewTrigger = withNoRecipe(DatePicker.ViewTrigger)\n\n/**\n * The table head component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerTableHeadProps =\n CerberusPrimitiveProps<ArkDatePickerTableHeadProps>\nexport const DatePickerTableHead = withNoRecipe(DatePicker.TableHead)\n\n/**\n * The table row component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerTableRowProps =\n CerberusPrimitiveProps<ArkDatePickerTableRowProps>\nexport const DatePickerTableRow = withNoRecipe(DatePicker.TableRow)\n\n/**\n * The table body component of the DatePicker. This primitive has no Cerberus\n * styles.\n */\nexport type DatePickerTableBodyProps =\n CerberusPrimitiveProps<ArkDatePickerTableBodyProps>\nexport const DatePickerTableBody = withNoRecipe(DatePicker.TableBody)\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":[]}