@cerberus-design/react 0.19.3 → 0.20.0

package/build/modern/index.js

@@ -1,15 +1,3 @@
-import "./chunk-LRHHDORZ.js";
-import {
-  Theme
-} from "./chunk-K3YEOS6O.js";
-import "./chunk-V4YYGGMH.js";
-import {
-  ToggleParts
-} from "./chunk-NHM5IWBE.js";
-import {
-  ToggleIndicator,
-  ToggleRoot
-} from "./chunk-VYJAPLLO.js";
 import "./chunk-TLRRDNS3.js";
 import {
   Tooltip
@@ -25,24 +13,22 @@ import {
   TooltipRoot,
   TooltipTrigger
 } from "./chunk-4O26WCRC.js";
-import "./chunk-4HVKAHBX.js";
-import {
-  Tabs
-} from "./chunk-V5TUC5AS.js";
-import {
-  TabsParts
-} from "./chunk-7JNOY5MW.js";
-import {
-  TabsContent,
-  TabsIndicator,
-  TabsList,
-  TabsRoot,
-  TabsTrigger
-} from "./chunk-2UQWJSA6.js";
 import "./chunk-EZTDGHEX.js";
 import {
   Tag
 } from "./chunk-3Z6W4ZFA.js";
+import "./chunk-LRHHDORZ.js";
+import {
+  Theme
+} from "./chunk-K3YEOS6O.js";
+import "./chunk-V4YYGGMH.js";
+import {
+  ToggleParts
+} from "./chunk-NHM5IWBE.js";
+import {
+  ToggleIndicator,
+  ToggleRoot
+} from "./chunk-VYJAPLLO.js";
 import "./chunk-M6WOFFOA.js";
 import {
   TableParts
@@ -62,6 +48,20 @@ import {
   Thead,
   Tr
 } from "./chunk-SITE2UML.js";
+import "./chunk-4HVKAHBX.js";
+import {
+  Tabs
+} from "./chunk-V5TUC5AS.js";
+import {
+  TabsParts
+} from "./chunk-7JNOY5MW.js";
+import {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger
+} from "./chunk-2UQWJSA6.js";
 import "./chunk-UDY6USHW.js";
 import {
   Switch
@@ -77,26 +77,7 @@ import {
   SwitchThumb
 } from "./chunk-GTAIWUFQ.js";
 import "./chunk-CAZ3EICD.js";
-import "./chunk-ZOSGUATV.js";
-import {
-  Rating
-} from "./chunk-OX3NA6DQ.js";
-import {
-  RatingParts
-} from "./chunk-YWPXLHUO.js";
-import {
-  RatingContext,
-  RatingControl,
-  RatingHiddenInput,
-  RatingItem,
-  RatingItemContext,
-  RatingLabel,
-  RatingRoot
-} from "./chunk-JUSH26RO.js";
 import "./chunk-B4GBNIU7.js";
-import {
-  Select
-} from "./chunk-HCH5I26B.js";
 import {
   OptionGroup,
   OptionGroupLabel
@@ -104,16 +85,19 @@ import {
 import {
   Option
 } from "./chunk-INQZQMLL.js";
+import {
+  Select
+} from "./chunk-HCH5I26B.js";
 import {
   SelectParts
 } from "./chunk-SP7TSFMZ.js";
 import "./chunk-OGYMMATX.js";
-import {
-  Radio
-} from "./chunk-KITDXURN.js";
 import {
   RadioParts
 } from "./chunk-DH7SFE2R.js";
+import {
+  Radio
+} from "./chunk-KITDXURN.js";
 import {
   RadioGroup,
   RadioGroupIndicator,
@@ -124,27 +108,22 @@ import {
   RadioGroupLabel,
   RadioGroupRoot
 } from "./chunk-4O64W4BA.js";
-import "./chunk-IOLYX3SY.js";
+import "./chunk-ZOSGUATV.js";
 import {
-  NotificationCenter,
-  toaster,
-  useNotificationCenter
-} from "./chunk-JBYWQERR.js";
-import "./chunk-JVAGLLOA.js";
-import "./chunk-JHCKXQEK.js";
+  Rating
+} from "./chunk-OX3NA6DQ.js";
 import {
-  NotificationParts
-} from "./chunk-L4KBNOWP.js";
+  RatingParts
+} from "./chunk-YWPXLHUO.js";
 import {
-  NotificationActionTrigger,
-  NotificationCloseTrigger,
-  NotificationDescription,
-  NotificationHeading,
-  NotificationProvider,
-  NotificationRoot
-} from "./chunk-LO6YTNOP.js";
-import "./chunk-MV2AU6UV.js";
-import "./chunk-34U4QQ3I.js";
+  RatingContext,
+  RatingControl,
+  RatingHiddenInput,
+  RatingItem,
+  RatingItemContext,
+  RatingLabel,
+  RatingRoot
+} from "./chunk-JUSH26RO.js";
 import "./chunk-X5LBBTCV.js";
 import {
   Menu,
@@ -167,19 +146,27 @@ import {
   MenuTriggerEl,
   MenuTriggerItem
 } from "./chunk-WGWEAB2Q.js";
-import "./chunk-IDTAB2UJ.js";
+import "./chunk-IOLYX3SY.js";
+import "./chunk-MV2AU6UV.js";
 import {
-  Fieldset
-} from "./chunk-VQUJGCZW.js";
+  NotificationCenter,
+  toaster,
+  useNotificationCenter
+} from "./chunk-LY6ULD43.js";
+import "./chunk-JHCKXQEK.js";
+import "./chunk-JVAGLLOA.js";
 import {
-  FieldsetParts
-} from "./chunk-HMUQEMV2.js";
+  NotificationParts
+} from "./chunk-L4KBNOWP.js";
 import {
-  FieldsetErrorText,
-  FieldsetHelperText,
-  FieldsetLegend,
-  FieldsetRoot
-} from "./chunk-5B6LMHY2.js";
+  NotificationActionTrigger,
+  NotificationCloseTrigger,
+  NotificationDescription,
+  NotificationHeading,
+  NotificationProvider,
+  NotificationRoot
+} from "./chunk-LO6YTNOP.js";
+import "./chunk-34U4QQ3I.js";
 import {
   FileStatus,
   processStatus
@@ -195,6 +182,19 @@ import {
 import {
   FileUploader
 } from "./chunk-CHEYITRR.js";
+import "./chunk-IDTAB2UJ.js";
+import {
+  Fieldset
+} from "./chunk-VQUJGCZW.js";
+import {
+  FieldsetParts
+} from "./chunk-HMUQEMV2.js";
+import {
+  FieldsetErrorText,
+  FieldsetHelperText,
+  FieldsetLegend,
+  FieldsetRoot
+} from "./chunk-5B6LMHY2.js";
 import "./chunk-JIXUOTH4.js";
 import {
   FeatureFlag
@@ -229,37 +229,23 @@ import {
   parseDate,
   today
 } from "./chunk-ADI4DOEW.js";
-import {
-  RangePickerInput
-} from "./chunk-YR6G66UT.js";
-import {
-  DatePicker
-} from "./chunk-MVHFBVDA.js";
 import {
   DatePickerInput
 } from "./chunk-IVQCMXV6.js";
-import "./chunk-SKOX5PJI.js";
-import "./chunk-IKDXADLX.js";
-import {
-  CTAModal,
-  useCTAModal
-} from "./chunk-UAVGKLHV.js";
-import "./chunk-Q4CS3AKY.js";
 import {
-  For
-} from "./chunk-D2TQPEZQ.js";
-import "./chunk-4LSTU6WU.js";
-import "./chunk-3X6VM5FS.js";
-import {
-  createCTAModalActions
-} from "./chunk-PLHYOCY3.js";
+  RangePickerInput
+} from "./chunk-YR6G66UT.js";
+import "./chunk-SKOX5PJI.js";
 import {
   DatePickerCalendar
-} from "./chunk-TBCTCQXG.js";
+} from "./chunk-2Z7IKMZC.js";
+import "./chunk-OG644D7M.js";
 import "./chunk-O4W2BVE7.js";
 import "./chunk-K3NML67W.js";
+import {
+  DatePicker
+} from "./chunk-MVHFBVDA.js";
 import "./chunk-FSX64HPK.js";
-import "./chunk-OG644D7M.js";
 import "./chunk-X24O5DTP.js";
 import {
   DatePickerParts
@@ -290,20 +276,13 @@ import {
   DatePickerViewTrigger,
   DatePickerYearSelect
 } from "./chunk-TJSHJF6G.js";
-import "./chunk-5IMS6G4G.js";
+import "./chunk-ML2IKLMJ.js";
 import {
-  CircularProgress
-} from "./chunk-D7BCQ2CQ.js";
+  ComboItemGroup
+} from "./chunk-7B2ZHSH3.js";
 import {
-  CircularProgressCircle,
-  CircularProgressCircleRange,
-  CircularProgressCircleTrack,
-  CircularProgressInfoGroup,
-  CircularProgressLabel,
-  CircularProgressRoot,
-  CircularProgressValueText
-} from "./chunk-IYF5FS6N.js";
-import "./chunk-ML2IKLMJ.js";
+  ComboItemWithIndicator
+} from "./chunk-EZJMTWXK.js";
 import {
   useStatefulCollection
 } from "./chunk-ET3UY6GV.js";
@@ -325,15 +304,37 @@ import {
   SelectValueText,
   createSelectCollection
 } from "./chunk-LOJBIVY4.js";
+import "./chunk-IKDXADLX.js";
 import {
-  Combobox
-} from "./chunk-2D6BHWPB.js";
+  CTAModal,
+  useCTAModal
+} from "./chunk-CONG7TGJ.js";
+import "./chunk-Q4CS3AKY.js";
+import "./chunk-3X6VM5FS.js";
 import {
-  ComboItemGroup
-} from "./chunk-7B2ZHSH3.js";
+  createCTAModalActions
+} from "./chunk-PLHYOCY3.js";
+import "./chunk-4LSTU6WU.js";
+import "./chunk-TIJAFPHQ.js";
 import {
-  ComboItemWithIndicator
-} from "./chunk-EZJMTWXK.js";
+  Checkbox
+} from "./chunk-45ZTZUCD.js";
+import "./chunk-5IMS6G4G.js";
+import {
+  CircularProgress
+} from "./chunk-D7BCQ2CQ.js";
+import {
+  CircularProgressCircle,
+  CircularProgressCircleRange,
+  CircularProgressCircleTrack,
+  CircularProgressInfoGroup,
+  CircularProgressLabel,
+  CircularProgressRoot,
+  CircularProgressValueText
+} from "./chunk-IYF5FS6N.js";
+import {
+  Combobox
+} from "./chunk-2D6BHWPB.js";
 import {
   ComboboxParts
 } from "./chunk-AQNXQVXP.js";
@@ -358,10 +359,26 @@ import "./chunk-CYC2YUKU.js";
 import {
   ButtonParts
 } from "./chunk-N5D6HNGL.js";
-import "./chunk-TIJAFPHQ.js";
+import "./chunk-YUAUGU3G.js";
 import {
-  Checkbox
-} from "./chunk-45ZTZUCD.js";
+  Carousel
+} from "./chunk-RJTFRZAL.js";
+import {
+  For
+} from "./chunk-D2TQPEZQ.js";
+import {
+  CarouselParts
+} from "./chunk-VVZOWCNQ.js";
+import {
+  CarouselControl,
+  CarouselIndicator,
+  CarouselIndicatorGroup,
+  CarouselItem,
+  CarouselItemGroup,
+  CarouselNextTrigger,
+  CarouselPrevTrigger,
+  CarouselRoot
+} from "./chunk-PH3GZIQE.js";
 import "./chunk-HYEFRC5Z.js";
 import {
   CheckboxParts
@@ -431,27 +448,27 @@ import {
   usePromptModal
 } from "./chunk-UZZ26IWW.js";
 import "./chunk-TYPULJMJ.js";
+import {
+  FieldParts
+} from "./chunk-SFS5ILWG.js";
 import {
   Field
 } from "./chunk-6LU43Z4K.js";
 import "./chunk-TIQO4VNE.js";
-import {
-  FieldParts
-} from "./chunk-SFS5ILWG.js";
 import "./chunk-NZP3XQNQ.js";
 import {
   Text
 } from "./chunk-VPD3PPBW.js";
 import "./chunk-DJOYRUNT.js";
+import {
+  DialogParts
+} from "./chunk-TKHDOZWN.js";
 import {
   DialogCloseIconTrigger
 } from "./chunk-2KVC3OJ3.js";
 import {
   Dialog
 } from "./chunk-OZTYYWIX.js";
-import {
-  DialogParts
-} from "./chunk-TKHDOZWN.js";
 import {
   DialogBackdrop,
   DialogCloseTrigger,
@@ -595,6 +612,16 @@ export {
   CTAModal,
   CalendarDate,
   Caption,
+  Carousel,
+  CarouselControl,
+  CarouselIndicator,
+  CarouselIndicatorGroup,
+  CarouselItem,
+  CarouselItemGroup,
+  CarouselNextTrigger,
+  CarouselParts,
+  CarouselPrevTrigger,
+  CarouselRoot,
   CerberusProvider,
   Checkbox,
   CheckboxControl,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './components/deprecated/Legend'\nexport * from './hooks/useDate'\nexport * from './hooks/useToggle'\nexport * from './components/Droppable'\n\n// components\n\nexport * from './components/admonition/index'\nexport * from './components/accordion/index'\nexport * from './components/avatar/index'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/circular-progress/index'\nexport * from './components/combobox/index'\nexport * from './components/cta-dialog/index'\nexport * from './components/date-picker/index'\nexport * from './components/dialog/index'\nexport * from './components/feature-flag/index'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/file-upload/index'\nexport * from './components/for/index'\nexport * from './components/icon-button/index'\nexport * from './components/menu/index'\nexport * from './components/notifications/index'\nexport * from './components/portal/index'\nexport * from './components/progress/index'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/show/index'\nexport * from './components/spinner/index'\nexport * from './components/switch/index'\nexport * from './components/table/index'\nexport * from './components/tabs/index'\nexport * from './components/tag/index'\nexport * from './components/text/index'\nexport * from './components/theme/index'\nexport * from './components/toggle/index'\nexport * from './components/tooltip/index'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/prompt-modal'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\nexport * from './system/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './components/deprecated/Legend'\nexport * from './hooks/useDate'\nexport * from './hooks/useToggle'\nexport * from './components/Droppable'\n\n// components\n\nexport * from './components/admonition/index'\nexport * from './components/accordion/index'\nexport * from './components/avatar/index'\nexport * from './components/button/index'\nexport * from './components/carousel/index'\nexport * from './components/checkbox/index'\nexport * from './components/circular-progress/index'\nexport * from './components/combobox/index'\nexport * from './components/cta-dialog/index'\nexport * from './components/date-picker/index'\nexport * from './components/dialog/index'\nexport * from './components/feature-flag/index'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/file-upload/index'\nexport * from './components/for/index'\nexport * from './components/icon-button/index'\nexport * from './components/menu/index'\nexport * from './components/notifications/index'\nexport * from './components/portal/index'\nexport * from './components/progress/index'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/show/index'\nexport * from './components/spinner/index'\nexport * from './components/switch/index'\nexport * from './components/table/index'\nexport * from './components/tabs/index'\nexport * from './components/tag/index'\nexport * from './components/text/index'\nexport * from './components/theme/index'\nexport * from './components/toggle/index'\nexport * from './components/tooltip/index'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/prompt-modal'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\nexport * from './system/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.19.3",
+  "version": "0.20.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -13,7 +13,7 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.15.1",
+    "@ark-ui/react": "^5.16.1",
     "@dnd-kit/core": "^6.3.1"
   },
   "devDependencies": {
@@ -25,8 +25,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.4.0",
-    "@cerberus-design/panda-preset": "0.19.3",
-    "@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'