@cerberus-design/react 0.18.4 → 0.19.1

package/src/components/button/primitives.tsx

@@ -0,0 +1,15 @@
+import { ark } from '@ark-ui/react/factory'
+import { button } from 'styled-system/recipes'
+import { createCerberusPrimitive } from '../../system/index'
+
+/**
+ * This module contains the Button component primitives.
+ * @module @cerberus-design/react/components/button/primitives
+ */
+
+const { withRecipe } = createCerberusPrimitive(button)
+
+/**
+ * The root element of the Button component.
+ */
+export const ButtonRoot = withRecipe(ark.button)

package/src/components/checkbox/checkbox-icon.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useCerberusContext } from '../../context/cerberus'
+import { Show } from '../show/index'
 import { CheckboxParts } from './parts'
-import { Show } from '../Show'
 
 /**
  * This module contains the Checkbox Icon component.

package/src/components/checkbox/checkbox.tsx

@@ -1,7 +1,7 @@
 import type { CheckboxRootProps } from '@ark-ui/react'
 import { type CheckboxVariantProps } from 'styled-system/recipes'
-import { Show } from '../Show'
-import { Text } from '../Text'
+import { Show } from '../show/index'
+import { Text } from '../text/index'
 import { CheckboxParts } from './parts'
 import { CheckboxIcon } from './checkbox-icon'
 

package/src/components/checkbox/primitives.tsx

@@ -1,91 +1,97 @@
 import {
   Checkbox,
-  type CheckboxControlProps,
-  type CheckboxGroupProps,
-  type CheckboxIndicatorProps,
-  type CheckboxLabelProps,
-  type CheckboxRootProps,
+  type CheckboxControlProps as ArkCheckboxControlProps,
+  type CheckboxGroupProps as ArkCheckboxGroupProps,
+  type CheckboxIndicatorProps as ArkCheckboxIndicatorProps,
+  type CheckboxLabelProps as ArkCheckboxLabelProps,
+  type CheckboxRootProps as ArkCheckboxRootProps,
+  type CheckboxHiddenInputProps as ArkCheckboxHiddenInputProps,
 } from '@ark-ui/react'
-import { cx } from 'styled-system/css'
 import { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the Checkbox primitives.
  * @module 'react/checkbox'
  */
 
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(checkbox)
+
 /**
  * Checkbox Root component used to provide the context to all other checkbox
  * primitives.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export function CheckboxRoot(props: CheckboxRootProps) {
-  const styles = checkbox()
-  return (
-    <Checkbox.Root {...props} className={cx(styles.root, props.className)} />
-  )
-}
+
+// @ts-expect-error there is a type mismatch here, but it works in practice
+export const CheckboxRoot = withSlotRecipe<CheckboxRootProps>(
+  Checkbox.Root,
+  'root',
+)
+export type CheckboxRootProps = CerberusPrimitiveProps<ArkCheckboxRootProps>
 
 /**
  * Checkbox Label component used to display the label of the checkbox.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export function CheckboxLabel(
-  props: CheckboxLabelProps & CheckboxVariantProps,
-) {
-  const { size, ...labelProps } = props
-  const styles = checkbox({ size })
-  return (
-    <Checkbox.Label
-      {...labelProps}
-      className={cx(styles.label, labelProps.className)}
-    />
-  )
-}
+export const CheckboxLabel = withSlotRecipe<CheckboxLabelProps>(
+  Checkbox.Label,
+  'label',
+)
+export type CheckboxLabelProps = CerberusPrimitiveProps<
+  ArkCheckboxLabelProps & CheckboxVariantProps
+>
 
 /**
  * Checkbox Control component used to display the control of the checkbox.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export function CheckboxControl(
-  props: CheckboxControlProps & CheckboxVariantProps,
-) {
-  const { size, ...controlProps } = props
-  const styles = checkbox({ size })
-  return (
-    <Checkbox.Control
-      {...controlProps}
-      className={cx(styles.control, controlProps.className)}
-    />
-  )
-}
+export const CheckboxControl = withSlotRecipe<CheckboxControlProps>(
+  Checkbox.Control,
+  'control',
+)
+export type CheckboxControlProps = CerberusPrimitiveProps<
+  ArkCheckboxControlProps & CheckboxVariantProps
+>
 
 /**
  * Checkbox Indicator component used to display the indicator of the checkbox.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export function CheckboxIndicator(props: CheckboxIndicatorProps) {
-  const styles = checkbox()
-  return (
-    <Checkbox.Indicator
-      {...props}
-      className={cx(styles.indicator, props.className)}
-    />
-  )
-}
+export const CheckboxIndicator = withSlotRecipe<CheckboxIndicatorProps>(
+  Checkbox.Indicator,
+  'indicator',
+)
+export type CheckboxIndicatorProps =
+  CerberusPrimitiveProps<ArkCheckboxIndicatorProps>
+
+// export function CheckboxIndicator(props: CheckboxIndicatorProps) {
+//   const styles = checkbox()
+//   return (
+//     <Checkbox.Indicator
+//       {...props}
+//       className={cx(styles.indicator, props.className)}
+//     />
+//   )
+// }
 
 /**
  * Checkbox HiddenInput component used to provide the native checkbox input.
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export function CheckboxHiddenInput(props: CheckboxControlProps) {
-  return <Checkbox.HiddenInput {...props} />
-}
+export const CheckboxHiddenInput = withNoRecipe<CheckboxHiddenInputProps>(
+  Checkbox.HiddenInput,
+)
+export type CheckboxHiddenInputProps =
+  CerberusPrimitiveProps<ArkCheckboxHiddenInputProps>
 
 /**
  * Checkbox Group is used to group checkboxes together in a consistently styled
@@ -93,9 +99,8 @@ export function CheckboxHiddenInput(props: CheckboxControlProps) {
  * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
  * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
  */
-export function CheckboxGroup(props: CheckboxGroupProps) {
-  const styles = checkbox()
-  return (
-    <Checkbox.Group {...props} className={cx(styles.group, props.className)} />
-  )
-}
+export const CheckboxGroup = withSlotRecipe<CheckboxGroupProps>(
+  Checkbox.Group,
+  'group',
+)
+export type CheckboxGroupProps = CerberusPrimitiveProps<ArkCheckboxGroupProps>

package/src/components/circular-progress/circular-progress.tsx

@@ -0,0 +1,39 @@
+import {
+  CircularProgressCircle,
+  CircularProgressCircleRange,
+  CircularProgressCircleTrack,
+  CircularProgressInfoGroup,
+  CircularProgressLabel,
+  CircularProgressRoot,
+  CircularProgressValueText,
+  type CircularProgressRootProps,
+} from './primitives'
+
+export interface CircularProgressProps extends CircularProgressRootProps {
+  /**
+   * The background style of the CircularProgress
+   */
+  bgStyle?: 'filled' | 'transparent'
+  /**
+   * The label for the circular progress.
+   */
+  label?: string
+}
+
+export function CircularProgress(props: CircularProgressProps) {
+  const { label, ...rootProps } = props
+
+  return (
+    <CircularProgressRoot {...rootProps}>
+      <CircularProgressCircle>
+        <CircularProgressCircleTrack />
+        <CircularProgressCircleRange />
+      </CircularProgressCircle>
+
+      <CircularProgressInfoGroup>
+        <CircularProgressValueText />
+        <CircularProgressLabel>{label ?? 'Done'}</CircularProgressLabel>
+      </CircularProgressInfoGroup>
+    </CircularProgressRoot>
+  )
+}

package/src/components/circular-progress/index.ts

@@ -0,0 +1,2 @@
+export * from './primitives'
+export * from './circular-progress'

package/src/components/circular-progress/primitives.ts

@@ -0,0 +1,88 @@
+import {
+  Progress,
+  type ProgressRootProps,
+  type ProgressLabelProps,
+  type ProgressValueTextProps,
+  type ProgressCircleProps,
+  type ProgressCircleTrackProps,
+  type ProgressCircleRangeProps,
+} from '@ark-ui/react/progress'
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import {
+  circularProgress,
+  type CircularProgressVariantProps,
+} from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+
+/**
+ * This module contains the CircularProgress component primitives.
+ * @module @cerberus-design/react/components/circular-progress/primitives
+ */
+
+const { withSlotRecipe } = createCerberusPrimitive(circularProgress)
+
+// Root
+
+export type CircularProgressRootProps = CerberusPrimitiveProps<
+  ProgressRootProps & CircularProgressVariantProps
+>
+// @ts-expect-error this is a workaround for the type
+export const CircularProgressRoot = withSlotRecipe<CircularProgressRootProps>(
+  Progress.Root,
+  'root',
+)
+
+// Label
+
+export type CircularProgressLabelProps =
+  CerberusPrimitiveProps<ProgressLabelProps>
+export const CircularProgressLabel = withSlotRecipe<CircularProgressLabelProps>(
+  Progress.Label,
+  'label',
+)
+
+// ValueText
+
+export type CircularProgressValueTextProps =
+  CerberusPrimitiveProps<ProgressValueTextProps>
+export const CircularProgressValueText =
+  withSlotRecipe<CircularProgressValueTextProps>(
+    Progress.ValueText,
+    'valueText',
+  )
+
+// Circle
+
+export type CircularProgressCircleProps =
+  CerberusPrimitiveProps<ProgressCircleProps>
+export const CircularProgressCircle =
+  withSlotRecipe<CircularProgressCircleProps>(Progress.Circle, 'circle')
+
+// CircleTrack
+
+export type CircularProgressCircleTrackProps =
+  CerberusPrimitiveProps<ProgressCircleTrackProps>
+export const CircularProgressCircleTrack =
+  withSlotRecipe<CircularProgressCircleTrackProps>(
+    Progress.CircleTrack,
+    'circleTrack',
+  )
+
+// CircleRange
+
+export type CircularProgressCircleRangeProps =
+  CerberusPrimitiveProps<ProgressCircleRangeProps>
+export const CircularProgressCircleRange =
+  withSlotRecipe<CircularProgressCircleRangeProps>(
+    Progress.CircleRange,
+    'circleRange',
+  )
+
+// InfoGroup
+
+export type CircularProgressInfoGroupProps = HTMLArkProps<'div'>
+export const CircularProgressInfoGroup =
+  withSlotRecipe<CircularProgressInfoGroupProps>(ark.div, 'infoGroup')

package/src/components/combobox/combobox.tsx

@@ -2,11 +2,13 @@
 
 import type { ComboboxRootProps } from '@ark-ui/react/combobox'
 import type { ComboboxVariantProps } from 'styled-system/recipes'
+import type { RefObject } from 'react'
 import { useCerberusContext } from '../../context/cerberus'
+import { splitProps } from '../../utils/index'
 import type { SelectCollectionItem } from '../select/select'
-import { type FieldInputProps } from '../field/index'
-import { Portal } from '../Portal'
-import { Show } from '../Show'
+import { type FieldInputElProps } from '../field/index'
+import { Portal } from '../portal/index'
+import { Show } from '../show/index'
 import { ComboboxParts } from './parts'
 import { ComboboxStartIcon } from './primitives'
 
@@ -20,11 +22,22 @@ export interface ComboboxProps
   /**
    * The icon that appears at the start of the combobox input.
    */
-  startIcon?: FieldInputProps['startIcon']
+  startIcon?: FieldInputElProps['startIcon']
+  /**
+   * 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 function Combobox(props: ComboboxProps) {
-  const { label, children, startIcon, ...rootProps } = props
+  const [{ startIcon, label, ...elProps }, rootProps] = splitProps(props, [
+    'label',
+    'children',
+    'startIcon',
+    'container',
+  ])
 
   const { icons } = useCerberusContext()
   const { selectArrow: SelectArrow, close: CloseIcon } = icons
@@ -54,10 +67,10 @@ export function Combobox(props: ComboboxProps) {
         </ComboboxParts.Trigger>
       </ComboboxParts.Control>
 
-      <Portal>
+      <Portal container={elProps.container}>
         <ComboboxParts.Positioner>
           <ComboboxParts.Content size={rootProps.size}>
-            {children}
+            {elProps.children}
           </ComboboxParts.Content>
         </ComboboxParts.Positioner>
       </Portal>