@cerberus-design/react 0.18.4 → 0.19.1

package/src/components/rating/primitives.tsx

@@ -1,99 +1,76 @@
 import {
   RatingGroup,
-  type RatingGroupContextProps,
-  type RatingGroupControlProps,
-  type RatingGroupHiddenInputProps,
-  type RatingGroupItemContextProps,
-  type RatingGroupItemProps,
-  type RatingGroupLabelProps,
-  type RatingGroupRootProps,
+  type RatingGroupContextProps as ArkRatingGroupContextProps,
+  type RatingGroupControlProps as ArkRatingGroupControlProps,
+  type RatingGroupHiddenInputProps as ArkRatingGroupHiddenInputProps,
+  type RatingGroupItemContextProps as ArkRatingGroupItemContextProps,
+  type RatingGroupItemProps as ArkRatingGroupItemProps,
+  type RatingGroupLabelProps as ArkRatingGroupLabelProps,
+  type RatingGroupRootProps as ArkRatingGroupRootProps,
 } from '@ark-ui/react/rating-group'
-import { cx } from 'styled-system/css'
 import {
   ratingGroup,
   type RatingGroupVariantProps,
 } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the primitives of the Rating component.
  * @module 'rating/primitives'
  */
 
-/**
- * The root primitive of the Rating component.
- */
-export function RatingRoot(
-  props: RatingGroupRootProps & RatingGroupVariantProps,
-) {
-  const { orientation, size, ...rootProps } = props
-  const styles = ratingGroup({ orientation, size })
-  return (
-    <RatingGroup.Root
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-    />
-  )
-}
+const { withSlotRecipe } = createCerberusPrimitive(ratingGroup)
 
-/**
- * The label primitive of the Rating component.
- */
-export function RatingLabel(props: RatingGroupLabelProps) {
-  const styles = ratingGroup()
-  return (
-    <RatingGroup.Label
-      {...props}
-      className={cx(styles.label, props.className)}
-    />
-  )
-}
+// Root
 
-/**
- * The control primitive of the Rating component.
- */
-export function RatingControl(props: RatingGroupControlProps) {
-  const styles = ratingGroup()
-  return (
-    <RatingGroup.Control
-      {...props}
-      className={cx(styles.control, props.className)}
-    />
-  )
-}
+export type RatingRootProps = CerberusPrimitiveProps<
+  ArkRatingGroupRootProps & RatingGroupVariantProps
+>
+export const RatingRoot = withSlotRecipe<RatingRootProps>(
+  RatingGroup.Root,
+  'root',
+)
 
-/**
- * The context primitive of the Rating component.
- */
-export function RatingContext(props: RatingGroupContextProps) {
-  return <RatingGroup.Context {...props} />
-}
+// Label
 
-/**
- * The item primitive of the Rating component.
- */
-export function RatingItem(
-  props: RatingGroupItemProps & RatingGroupVariantProps,
-) {
-  const { palette, ...itemProps } = props
-  const styles = ratingGroup({ palette })
-  return (
-    <RatingGroup.Item
-      {...itemProps}
-      className={cx(styles.item, itemProps.className)}
-    />
-  )
-}
+export type RatingLabelProps = CerberusPrimitiveProps<ArkRatingGroupLabelProps>
+export const RatingLabel = withSlotRecipe<RatingLabelProps>(
+  RatingGroup.Label,
+  'label',
+)
 
-/**
- * The item context primitive of the Rating component.
- */
-export function RatingItemContext(props: RatingGroupItemContextProps) {
-  return <RatingGroup.ItemContext {...props} />
-}
+// Control
 
-/**
- * The hidden input primitive of the Rating component.
- */
-export function RatingHiddenInput(props: RatingGroupHiddenInputProps) {
-  return <RatingGroup.HiddenInput {...props} />
-}
+export type RatingGroupControlProps =
+  CerberusPrimitiveProps<ArkRatingGroupControlProps>
+export const RatingControl = withSlotRecipe<RatingGroupControlProps>(
+  RatingGroup.Control,
+  'control',
+)
+
+// Context
+
+export type RatingGroupContextProps = ArkRatingGroupContextProps
+export const RatingContext = RatingGroup.Context
+
+// Item
+
+export type RatingGroupItemProps = CerberusPrimitiveProps<
+  ArkRatingGroupItemProps & RatingGroupVariantProps
+>
+export const RatingItem = withSlotRecipe<RatingGroupItemProps>(
+  RatingGroup.Item,
+  'item',
+)
+
+// Item Context
+export type RatingGroupItemContextProps = ArkRatingGroupItemContextProps
+export const RatingItemContext = RatingGroup.ItemContext
+
+// Hidden Input
+
+export type RatingGroupHiddenInputProps = ArkRatingGroupHiddenInputProps
+export const RatingHiddenInput = RatingGroup.HiddenInput

package/src/components/rating/rating.tsx

@@ -1,22 +1,19 @@
 import type {
-  RatingGroupRootProps,
   UseRatingGroupContext,
   UseRatingGroupItemContext,
 } from '@ark-ui/react/rating-group'
-import type { RatingGroupVariantProps } from 'styled-system/recipes'
 import type { ReactNode } from 'react'
 import { splitProps } from '../../utils/index'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 import { RatingParts } from './parts'
+import type { RatingRootProps } from './primitives'
 
 /**
  * This module contains the abstracted Rating component.
  * @module 'react/rating'
  */
 
-export interface RatingProps
-  extends Omit<RatingGroupRootProps, 'children'>,
-    RatingGroupVariantProps {
+export interface RatingProps extends Omit<RatingRootProps, 'children'> {
   /**
    * The label of the rating component.
    */

package/src/components/select/index.ts

@@ -1,4 +1,5 @@
 export * from './parts'
 export * from './primitives'
 export * from './select'
+export * from './option'
 export * from './option-group'

package/src/components/select/option-group.tsx

@@ -1,9 +1,11 @@
-import type {
-  SelectItemGroupLabelProps,
-  SelectItemGroupProps,
-} from '@ark-ui/react/select'
 import { SelectItemGroup, SelectItemGroupLabel } from './primitives'
 
+/**
+ * This module contains the named abstractions OptionGroup and OptionGroupLabel
+ * components for API consistency with the Select component.
+ * @module 'react/select/option-group'
+ */
+
 /**
  * The OptionGroup component is a group of options in the dropdown list.
  * @definition [Select docs](https://cerberus.digitalu.design/react/select)
@@ -16,9 +18,7 @@ import { SelectItemGroup, SelectItemGroupLabel } from './primitives'
  * </OptionGroup>
  * ```
  */
-export function OptionGroup(props: SelectItemGroupProps) {
-  return <SelectItemGroup {...props} />
-}
+export const OptionGroup = SelectItemGroup
 
 /**
  * The OptionGroupLabel component is the label of the OptionGroup.
@@ -29,6 +29,4 @@ export function OptionGroup(props: SelectItemGroupProps) {
  * <OptionGroupLabel>Greek gods</OptionGroupLabel>
  * ```
  */
-export function OptionGroupLabel(props: SelectItemGroupLabelProps) {
-  return <SelectItemGroupLabel {...props} />
-}
+export const OptionGroupLabel = SelectItemGroupLabel

package/src/components/select/option.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useCerberusContext } from '../../context/cerberus'
+import { SelectParts } from './parts'
+import type { SelectItemProps } from './primitives'
+import type { SelectCollectionItem } from './select'
+
+/**
+ * This module contains the Option component for the Select dropdown.
+ * @module 'react/select/option'
+ */
+
+export interface OptionProps extends SelectItemProps {
+  /**
+   * The CollectionListItem to be displayed in the dropdown list.
+   */
+  item: SelectCollectionItem
+}
+
+/**
+ * The Option component is used to render an individual item in the Select
+ * dropdown. It is an abstraction of the Select Item, ItemText, and
+ * ItemIndicator primitives that also displays a Checked icon when the item is
+ * selected.
+ *
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select/dev)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+ */
+export function Option(props: OptionProps) {
+  const { item, ...itemProps } = props
+  const { icons } = useCerberusContext()
+  const { selectChecked: CheckedIcon } = icons
+
+  return (
+    <SelectParts.Item {...itemProps} item={item}>
+      <SelectParts.ItemText>{item?.label}</SelectParts.ItemText>
+      <SelectParts.ItemIndicator>
+        <CheckedIcon />
+      </SelectParts.ItemIndicator>
+    </SelectParts.Item>
+  )
+}

package/src/components/select/primitives.tsx

@@ -2,25 +2,28 @@ import {
   createListCollection,
   Select,
   type ListCollection,
-  type SelectClearTriggerProps,
-  type SelectContentProps,
-  type SelectControlProps,
-  type SelectHiddenSelectProps,
-  type SelectIndicatorProps,
-  type SelectItemGroupLabelProps,
-  type SelectItemGroupProps,
-  type SelectItemIndicatorProps,
-  type SelectItemProps,
-  type SelectItemTextProps,
-  type SelectLabelProps,
-  type SelectPositionerProps,
-  type SelectRootProps,
-  type SelectTriggerProps,
+  type SelectClearTriggerProps as ArkSelectClearTrigger,
+  type SelectContentProps as ArkSelectContentProps,
+  type SelectControlProps as ArkSelectControlProps,
+  type SelectHiddenSelectProps as ArkSelectHiddenSelectProps,
+  type SelectIndicatorProps as ArkSelectIndicatorProps,
+  type SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps,
+  type SelectItemGroupProps as ArkSelectItemGroupProps,
+  type SelectItemIndicatorProps as ArkSelectItemIndicatorProps,
+  type SelectItemProps as ArkSelectItemProps,
+  type SelectItemTextProps as ArkSelectItemTextProps,
+  type SelectLabelProps as ArkSelectLabelProps,
+  type SelectPositionerProps as ArkSelectPositionerProps,
+  type SelectRootProps as ArkSelectRootProps,
+  type SelectTriggerProps as ArkSelectTriggerProps,
   type SelectValueChangeDetails,
-  type SelectValueTextProps,
+  type SelectValueTextProps as ArkSelectValueTextProps,
 } from '@ark-ui/react/select'
 import { select, type SelectVariantProps } from 'styled-system/recipes'
-import { cx } from 'styled-system/css'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 import type { SelectCollectionItem } from './select'
 
 /**
@@ -28,160 +31,126 @@ import type { SelectCollectionItem } from './select'
  * @module 'react/select'
  */
 
-/**
- * The SelectRoot component is the context provider for the Select component.
- */
-export function SelectRoot(
-  props: SelectRootProps<SelectCollectionItem> & SelectVariantProps,
-) {
-  const { size, ...rootProps } = props
-  const styles = select({ size })
-  return (
-    <Select.Root
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-    />
-  )
-}
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(select)
 
-/**
- * The label that appears above the select input.
- */
-export function SelectLabel(props: SelectLabelProps) {
-  const styles = select()
-  return (
-    <Select.Label {...props} className={cx(styles.label, props.className)} />
-  )
-}
+// Root
 
-/**
- * The control that wraps the select trigger.
- */
-export function SelectControl(props: SelectControlProps) {
-  return <Select.Control {...props} />
-}
+export type SelectRootProps = CerberusPrimitiveProps<
+  ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps
+>
+// @ts-expect-error this is a workaround for the type mismatch WIP
+export const SelectRoot = withSlotRecipe<SelectRootProps>(Select.Root, 'root')
 
-/**
- * The trigger that opens the dropdown.
- */
-export function SelectTrigger(props: SelectTriggerProps) {
-  const styles = select()
-  return (
-    <Select.Trigger
-      {...props}
-      className={cx(styles.trigger, props.className)}
-    />
-  )
-}
+// Label
 
-/**
- * The text that appears in the trigger.
- */
-export function SelectValueText(props: SelectValueTextProps) {
-  return <Select.ValueText {...props} />
-}
+export type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>
+export const SelectLabel = withSlotRecipe<SelectLabelProps>(
+  Select.Label,
+  'label',
+)
 
-/**
- * The indicator that appears in the trigger.
- */
-export function SelectIndicator(props: SelectIndicatorProps) {
-  const styles = select()
-  return (
-    <Select.Indicator
-      {...props}
-      className={cx(styles.indicator, props.className)}
-    />
-  )
-}
+// Control
 
-/**
- * The trigger that clears the selected value.
- */
-export function SelectClearTrigger(props: SelectClearTriggerProps) {
-  return <Select.ClearTrigger {...props} />
-}
+export type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>
+export const SelectControl = withNoRecipe<SelectControlProps>(Select.Control)
 
-/**
- * The positioner that contains the dropdown.
- */
-export function SelectPositioner(props: SelectPositionerProps) {
-  const styles = select()
-  return (
-    <Select.Positioner
-      {...props}
-      className={cx(styles.positioner, props.className)}
-    />
-  )
-}
+// Trigger
 
-/**
- * The content of the dropdown (i.e. the container itself).
- */
-export function SelectContent(props: SelectContentProps & SelectVariantProps) {
-  const { size, ...contentProps } = props
-  const styles = select({ size })
-  return (
-    <Select.Content
-      {...contentProps}
-      className={cx(styles.content, contentProps.className)}
-    />
-  )
-}
+export type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>
+export const SelectTrigger = withSlotRecipe<SelectTriggerProps>(
+  Select.Trigger,
+  'trigger',
+)
 
-/**
- * The container for a group of item options.
- */
-export function SelectItemGroup(props: SelectItemGroupProps) {
-  return <Select.ItemGroup {...props} />
-}
+// Value Text
 
-/**
- * The label for a group of item options.
- */
-export function SelectItemGroupLabel(props: SelectItemGroupLabelProps) {
-  const styles = select()
-  return (
-    <Select.ItemGroupLabel
-      {...props}
-      className={cx(styles.itemGroupLabel, props.className)}
-    />
-  )
-}
+export type SelectValueTextProps =
+  CerberusPrimitiveProps<ArkSelectValueTextProps>
+export const SelectValueText = withNoRecipe<SelectValueTextProps>(
+  Select.ValueText,
+)
 
-/**
- * The container for an item in the select content.
- */
-export function SelectItem(props: SelectItemProps) {
-  const styles = select()
-  return <Select.Item {...props} className={cx(styles.item, props.className)} />
-}
+// Indicator
 
-/**
- * The text for an item option.
- */
-export function SelectItemText(props: SelectItemTextProps) {
-  return <Select.ItemText {...props} />
-}
+export type SelectIndicatorProps =
+  CerberusPrimitiveProps<ArkSelectIndicatorProps>
+export const SelectIndicator = withSlotRecipe<SelectIndicatorProps>(
+  Select.Indicator,
+  'indicator',
+)
 
-/**
- * The indicator for an item option shown when it is selected.
- */
-export function SelectItemIndicator(props: SelectItemIndicatorProps) {
-  const styles = select()
-  return (
-    <Select.ItemIndicator
-      {...props}
-      className={cx(styles.itemIndicator, props.className)}
-    />
-  )
-}
+// Clear Trigger
 
-/**
- * The native input for a select item.
- */
-export function SelectHiddenSelect(props: SelectHiddenSelectProps) {
-  return <Select.HiddenSelect {...props} />
-}
+export type SelectClearTriggerProps =
+  CerberusPrimitiveProps<ArkSelectClearTrigger>
+export const SelectClearTrigger = withNoRecipe<SelectClearTriggerProps>(
+  Select.ClearTrigger,
+)
+
+// Positioner
+
+export type SelectPositionerProps =
+  CerberusPrimitiveProps<ArkSelectPositionerProps>
+export const SelectPositioner = withSlotRecipe<SelectPositionerProps>(
+  Select.Positioner,
+  'positioner',
+)
+
+// Content
+
+export type SelectContentProps = CerberusPrimitiveProps<
+  ArkSelectContentProps & SelectVariantProps
+>
+export const SelectContent = withSlotRecipe<SelectContentProps>(
+  Select.Content,
+  'content',
+)
+
+// Item Group
+
+export type SelectItemGroupProps =
+  CerberusPrimitiveProps<ArkSelectItemGroupProps>
+export const SelectItemGroup = withNoRecipe<SelectItemGroupProps>(
+  Select.ItemGroup,
+)
+
+// Item Group Label
+
+export type SelectItemGroupLabelProps =
+  CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>
+export const SelectItemGroupLabel = withSlotRecipe<SelectItemGroupLabelProps>(
+  Select.ItemGroupLabel,
+  'itemGroupLabel',
+)
+
+// Item
+
+export type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>
+export const SelectItem = withSlotRecipe<SelectItemProps>(Select.Item, 'item')
+
+// Item Text
+
+export type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>
+export const SelectItemText = withNoRecipe<SelectItemTextProps>(Select.ItemText)
+
+// Item Indicator
+
+export type SelectItemIndicatorProps =
+  CerberusPrimitiveProps<ArkSelectItemIndicatorProps>
+export const SelectItemIndicator = withSlotRecipe<SelectItemIndicatorProps>(
+  Select.ItemIndicator,
+  'itemIndicator',
+)
+
+// Hidden Select
+
+export type SelectHiddenSelectProps =
+  CerberusPrimitiveProps<ArkSelectHiddenSelectProps>
+export const SelectHiddenSelect = withNoRecipe<SelectHiddenSelectProps>(
+  Select.HiddenSelect,
+)
+
+// Collection
 
 /**
  * A helper function to create a SelectCollection object.

package/src/components/select/select.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import type { SelectItemProps, SelectRootProps } from '@ark-ui/react/select'
-import { type SelectVariantProps } from 'styled-system/recipes'
 import { HStack } from 'styled-system/jsx'
 import { useCerberusContext } from '../../context/cerberus'
-import { Portal } from '../Portal'
-import { Show } from '../Show'
+import { Portal } from '../portal/index'
+import { Show } from '../show/index'
 import { SelectParts } from './parts'
+import type { RefObject } from 'react'
+import type { SelectRootProps } from './primitives'
 
 /**
  * This module contains the Select components.
@@ -35,17 +35,19 @@ export interface SelectCollection {
   items: SelectCollectionItem[]
 }
 
-export interface BaseSelectProps {
+export interface SelectProps extends SelectRootProps {
   /**
    * The placeholder text when no option is selected.
    */
   placeholder?: string
+  /**
+   * The container element to render the Select dropdown in. This is used
+   * to render the Select dropdown in a specific context, such as a modal.
+   * @default document.body
+   */
+  container?: RefObject<HTMLElement | null>
 }
 
-export type SelectProps = SelectRootProps<SelectCollectionItem> &
-  BaseSelectProps &
-  SelectVariantProps
-
 /**
  * The Select component is a dropdown list that allows users to select an
  * option from a list.
@@ -78,7 +80,7 @@ export type SelectProps = SelectRootProps<SelectCollectionItem> &
  * }
  */
 export function Select(props: SelectProps) {
-  const { collection, placeholder, ...rootProps } = props
+  const { collection, container, placeholder, ...rootProps } = props
 
   const { icons } = useCerberusContext()
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
@@ -100,7 +102,7 @@ export function Select(props: SelectProps) {
         </SelectParts.Trigger>
       </SelectParts.Control>
 
-      <Portal>
+      <Portal container={container}>
         <SelectParts.Positioner>
           <SelectParts.Content size={rootProps.size}>
             {props.children}
@@ -112,25 +114,3 @@ export function Select(props: SelectProps) {
     </SelectParts.Root>
   )
 }
-
-export interface OptionProps extends SelectItemProps {
-  /**
-   * The CollectionListItem to be displayed in the dropdown list.
-   */
-  item: SelectCollectionItem
-}
-
-export function Option(props: OptionProps) {
-  const { item, ...itemProps } = props
-  const { icons } = useCerberusContext()
-  const { selectChecked: CheckedIcon } = icons
-
-  return (
-    <SelectParts.Item {...itemProps} item={item}>
-      <SelectParts.ItemText>{item?.label}</SelectParts.ItemText>
-      <SelectParts.ItemIndicator>
-        <CheckedIcon />
-      </SelectParts.ItemIndicator>
-    </SelectParts.Item>
-  )
-}

package/src/components/show/index.ts

@@ -0,0 +1 @@
+export * from './show'

package/src/components/spinner/index.ts

@@ -0,0 +1 @@
+export * from './spinner'