@cerberus-design/react 0.19.2 → 0.20.0

package/build/modern/system/index.js

@@ -1,9 +1,9 @@
 import {
   cerberus,
   createCerberusPrimitive
-} from "../chunk-5WT5BM3V.js";
-import "../chunk-2SBNSYYC.js";
-import "../chunk-33OXE7IJ.js";
+} from "../chunk-YJRAJNYI.js";
+import "../chunk-ZFONE65Q.js";
+import "../chunk-BKPIKVU2.js";
 import "../chunk-VT6DJ2VM.js";
 export {
   cerberus,

package/build/modern/system/primitive-factory.js

@@ -1,6 +1,6 @@
 import {
   CerberusPrimitive
-} from "../chunk-33OXE7IJ.js";
+} from "../chunk-BKPIKVU2.js";
 export {
   CerberusPrimitive
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.19.2",
+  "version": "0.20.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -13,20 +13,20 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.14.1",
+    "@ark-ui/react": "^5.16.1",
     "@dnd-kit/core": "^6.3.1"
   },
   "devDependencies": {
     "@internationalized/date": "^3.8.2",
     "@microsoft/api-extractor": "^7.52.4",
     "@pandacss/dev": "^0.54.0",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.4.0",
-    "@cerberus-design/panda-preset": "0.19.2",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/panda-preset": "0.20.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/carousel/carousel.tsx

@@ -0,0 +1,55 @@
+import type { PropsWithChildren } from 'react'
+import { Show } from '../show/show'
+import { For } from '../for/for'
+import { CarouselParts } from './parts'
+import type { CarouselRootProps } from './primitives'
+
+/**
+ * This module contains an abstraction of the carousel family of components.
+ * @module carousel
+ */
+
+export interface CarouselProps extends CarouselRootProps {
+  /**
+   * Whether to show the carousel indicators (dot list).
+   * @default false
+   */
+  showIndicators?: boolean
+}
+
+/**
+ * The Carousel component is an abstraction of the carousel family of
+ * components. It provides a simple interface for creating carousels with
+ * various configurations.
+ *
+ * @remarks
+ * This component uses the `CarouselParts` object to provide the necessary
+ * parts. For customization, we recommend using the `CarouselParts` object
+ * directly in combination with the `css` prop.
+ */
+function CarouselEl(props: PropsWithChildren<CarouselProps>) {
+  const { showIndicators = false, children, ...rootProps } = props
+
+  return (
+    <CarouselParts.Root {...rootProps}>
+      {children}
+
+      <Show when={showIndicators}>
+        <CarouselParts.IndicatorGroup>
+          <For each={Array.from({ length: props.slideCount ?? 0 })}>
+            {(_, idx) => <CarouselParts.Indicator key={idx} index={idx} />}
+          </For>
+        </CarouselParts.IndicatorGroup>
+      </Show>
+    </CarouselParts.Root>
+  )
+}
+
+export const Carousel = {
+  Root: CarouselEl,
+  ItemGroup: CarouselParts.ItemGroup,
+  Item: CarouselParts.Item,
+  Control: CarouselParts.Control,
+  PrevTrigger: CarouselParts.PrevTrigger,
+  NextTrigger: CarouselParts.NextTrigger,
+}

package/src/components/carousel/index.ts

@@ -0,0 +1,3 @@
+export * from './parts'
+export * from './primitives'
+export * from './carousel'

package/src/components/carousel/parts.ts

@@ -0,0 +1,71 @@
+import type { ElementType } from 'react'
+import {
+  CarouselRoot,
+  CarouselControl,
+  CarouselPrevTrigger,
+  CarouselNextTrigger,
+  CarouselIndicatorGroup,
+  CarouselIndicator,
+  CarouselItemGroup,
+  CarouselItem,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Carousel component.
+ * @module 'carousel/parts'
+ */
+
+interface CarouselPartsValue {
+  /**
+   * The context provider of the carousel.
+   */
+  Root: ElementType
+  /**
+   * The control of the carousel.
+   */
+  Control: ElementType
+  /**
+   * The previous trigger of the carousel.
+   */
+  PrevTrigger: ElementType
+  /**
+   * The next trigger of the carousel.
+   */
+  NextTrigger: ElementType
+  /**
+   * The indicator group of the carousel.
+   */
+  IndicatorGroup: ElementType
+  /**
+   * The indicator of the carousel.
+   */
+  Indicator: ElementType
+  /**
+   * The item group of the carousel.
+   */
+  ItemGroup: ElementType
+  /**
+   * The item of the carousel.
+   */
+  Item: ElementType
+}
+
+/**
+ * An Object containing the parts of the Button component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the CarouselParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const CarouselParts: CarouselPartsValue = {
+  Root: CarouselRoot,
+  Control: CarouselControl,
+  PrevTrigger: CarouselPrevTrigger,
+  NextTrigger: CarouselNextTrigger,
+  IndicatorGroup: CarouselIndicatorGroup,
+  Indicator: CarouselIndicator,
+  ItemGroup: CarouselItemGroup,
+  Item: CarouselItem,
+}

package/src/components/carousel/primitives.ts

@@ -0,0 +1,58 @@
+import {
+  Carousel,
+  type CarouselRootProps as ArkRootProps,
+  type CarouselControlProps as ArkControlProps,
+  type CarouselPrevTriggerProps as ArkPrevTriggerProps,
+  type CarouselNextTriggerProps as ArkNextTriggerProps,
+  type CarouselIndicatorGroupProps as ArkIndicatorGroupProps,
+  type CarouselIndicatorProps as ArkIndicatorProps,
+  type CarouselItemGroupProps as ArkItemGroupProps,
+  type CarouselItemProps as ArkItemProps,
+} from '@ark-ui/react/carousel'
+import { carousel, type CarouselVariantProps } from 'styled-system/recipes'
+import { createCerberusPrimitive } from '../../system/index'
+
+/**
+ * This module contains the carousel primitives.
+ * @module carousel/primitives
+ */
+
+const { withSlotRecipe } = createCerberusPrimitive(carousel)
+
+// Primitives
+
+export type CarouselRootProps = CarouselVariantProps & ArkRootProps
+export const CarouselRoot = withSlotRecipe(Carousel.Root, 'root')
+
+export type CarouselControlProps = CarouselVariantProps & ArkControlProps
+export const CarouselControl = withSlotRecipe(Carousel.Control, 'control')
+
+export type CarouselPrevTriggerProps = CarouselVariantProps &
+  ArkPrevTriggerProps
+export const CarouselPrevTrigger = withSlotRecipe(
+  Carousel.PrevTrigger,
+  'prevTrigger',
+)
+
+export type CarouselNextTriggerProps = CarouselVariantProps &
+  ArkNextTriggerProps
+export const CarouselNextTrigger = withSlotRecipe(
+  Carousel.NextTrigger,
+  'nextTrigger',
+)
+
+export type CarouselIndicatorGroupProps = CarouselVariantProps &
+  ArkIndicatorGroupProps
+export const CarouselIndicatorGroup = withSlotRecipe(
+  Carousel.IndicatorGroup,
+  'indicatorGroup',
+)
+
+export type CarouselIndicatorProps = CarouselVariantProps & ArkIndicatorProps
+export const CarouselIndicator = withSlotRecipe(Carousel.Indicator, 'indicator')
+
+export type CarouselItemGroupProps = CarouselVariantProps & ArkItemGroupProps
+export const CarouselItemGroup = withSlotRecipe(Carousel.ItemGroup, 'itemGroup')
+
+export type CarouselItemProps = CarouselVariantProps & ArkItemProps
+export const CarouselItem = withSlotRecipe(Carousel.Item, 'item')

package/src/index.ts

@@ -22,6 +22,7 @@ export * from './components/admonition/index'
 export * from './components/accordion/index'
 export * from './components/avatar/index'
 export * from './components/button/index'
+export * from './components/carousel/index'
 export * from './components/checkbox/index'
 export * from './components/circular-progress/index'
 export * from './components/combobox/index'

package/src/system/primitive-factory.tsx

@@ -2,6 +2,7 @@ import { css, cx } from 'styled-system/css'
 import type { RecipeVariantRecord } from 'styled-system/types'
 import {
   type ComponentType,
+  type ElementType,
   type HTMLAttributes,
   type PropsWithChildren,
 } from 'react'
@@ -36,39 +37,45 @@ export class CerberusPrimitive {
   }
 
   private validateComponent<P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
   ) {
     if (typeof Component !== 'function' && typeof Component !== 'object') {
-      throw new Error('Expected a React component as the first argument.')
+      return false
     }
+    return true
   }
 
   /**
    * Creates a Cerberus component with bare features and no recipe.
    * @param Component - The React component to enhance with Cerberus features.
+   * Can be a string or a component reference.
    * @returns A new React component that applies Cerberus features to the
    * original component.
+   *
    * @example
-   * ```typescript
-   * const { withNoRecipe } = createCerberusPrimitive(button)
-   * const Button = withNoRecipe(RawButton)
+   * ```ts
+   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
+   * const Button = withNoRecipe('button')
    * ```
    */
   withNoRecipe = <P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
     options?: WithRecipeOptions,
   ): CerberusPrimitiveEl<P> => {
     const { defaultProps } = options || {}
-
-    this.validateComponent(Component)
+    const El = Component as ComponentType<P> | ElementType
 
     const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {
       const { css: customCss, className, ...nativeProps } = props
       const styles = this.hasStyles(cx(className, css(customCss)))
-      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />
+      return <El {...defaultProps} {...styles} {...(nativeProps as P)} />
+    }
+
+    if (this.validateComponent(El)) {
+      const ElName = typeof El === 'string' ? El : El.displayName || El.name
+      CerbComponent.displayName = ElName
     }
 
-    CerbComponent.displayName = Component.displayName || Component.name
     return CerbComponent
   }
 
@@ -80,13 +87,13 @@ export class CerberusPrimitive {
    * component.
    */
   withRecipe = <P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
     options?: WithRecipeOptions,
   ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {
     const { defaultProps } = options || {}
-    const recipe = this.recipe as CerberusRecipe
+    const El = Component as ComponentType<P> | ElementType
 
-    this.validateComponent(Component)
+    const recipe = this.recipe as CerberusRecipe
 
     const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
       const {
@@ -108,7 +115,11 @@ export class CerberusPrimitive {
       )
     }
 
-    CerbComponent.displayName = Component.displayName || Component.name
+    if (this.validateComponent(El)) {
+      const ElName = typeof El === 'string' ? El : El.displayName || El.name
+      CerbComponent.displayName = ElName
+    }
+
     return CerbComponent
   }
 
@@ -125,14 +136,14 @@ export class CerberusPrimitive {
    * ```
    */
   withSlotRecipe = <P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
     slot: keyof RecipeVariantRecord,
     options?: WithRecipeOptions,
   ) => {
     const { defaultProps } = options || {}
-    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>
+    const El = Component as ComponentType<P> | ElementType
 
-    this.validateComponent(Component)
+    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>
 
     const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
       const {
@@ -155,7 +166,11 @@ export class CerberusPrimitive {
       )
     }
 
-    CerbComponent.displayName = Component.displayName || Component.name
+    if (this.validateComponent(El)) {
+      const ElName = typeof El === 'string' ? El : El.displayName || El.name
+      CerbComponent.displayName = ElName
+    }
+
     return CerbComponent
   }
 }

package/build/modern/chunk-33OXE7IJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/system/primitive-factory.tsx"],"sourcesContent":["import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\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>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\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   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\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 <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\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>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\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    CerbComponent.displayName = Component.displayName || Component.name\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>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\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    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n"],"mappings":";AAAA,SAAS,KAAK,UAAU;AAmEX;AA9CN,IAAM,oBAAN,MAAwB;AAAA,EAC7B;AAAA,EAEA,YAAY,QAAkC;AAC5C,SAAK,SAAS,UAAU;AAAA,EAC1B;AAAA,EAEQ,UAAU,QAAqD;AACrE,QAAI,QAAQ;AACV,aAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AACA,WAAO,CAAC;AAAA,EACV;AAAA,EAEQ,kBACN,WACA;AACA,QAAI,OAAO,cAAc,cAAc,OAAO,cAAc,UAAU;AACpE,YAAM,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,eAAe,CACb,WACA,YAC2B;AAC3B,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AAErC,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,UAA0C;AAC/D,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AACtD,YAAM,SAAS,KAAK,UAAU,GAAG,WAAW,IAAI,SAAS,CAAC,CAAC;AAC3D,aAAO,oBAAC,aAAW,GAAG,cAAe,GAAG,QAAS,GAAI,aAAmB;AAAA,IAC1E;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa,CACX,WACA,YAC+D;AAC/D,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,GAAG;AAAA,MACL,IAAI;AAEJ,YAAM,CAAC,gBAAgB,WAAW,IAChC,OAAO,kBAAkB,mBAAmB;AAC9C,YAAM,eAAe,OAAO,cAAc;AAE1C,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,cAAc,IAAI,SAAS,CAAC;AAAA;AAAA,MACvD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,iBAAiB,CACf,WACA,MACA,YACG;AACH,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QACA,GAAG;AAAA,MACL,IAAI;AAEJ,YAAM,CAAC,gBAAgB,WAAW,IAChC,OAAO,kBAAkB,mBAAmB;AAC9C,YAAM,SAAS,OAAO,cAAc;AACpC,YAAM,aAAa,OAAO,IAA2B;AAErD,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,YAAY,IAAI,SAAS,CAAC;AAAA;AAAA,MACrD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AACF;","names":[]}