@cerberus-design/react 1.0.0-rc.5 → 1.0.0-rc.7

package/src/components/carousel/parts.ts

@@ -1,71 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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/components/checkbox/checkbox-icon.tsx

@@ -1,39 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { Show } from '../show/index'
-import { CheckboxParts } from './parts'
-
-/**
- * This module contains the Checkbox Icon component.
- * @module
- */
-
-interface CheckboxIconProps {
-  indeterminate?: boolean
-}
-
-/**
- * Checkbox component
- * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @see https://cerberus.digitalu.design/react/checkbox
- * @example
- * ```tsx
- * <Field>
- *   <Checkbox id="legal" checked={checked.legal} onChange={handleChange} />
- * </Field>
- * ```
- */
-export function CheckboxIcon(props: CheckboxIconProps) {
-  const { icons } = useCerberusContext()
-  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons
-
-  return (
-    <CheckboxParts.Indicator indeterminate={props.indeterminate}>
-      <Show when={props.indeterminate} fallback={<CheckIcon />}>
-        <IndeterminateIcon />
-      </Show>
-    </CheckboxParts.Indicator>
-  )
-}

package/src/components/checkbox/checkbox.tsx

@@ -1,42 +0,0 @@
-import type { CheckboxRootProps } from '@ark-ui/react'
-import { type CheckboxVariantProps } from 'styled-system/recipes'
-import { Show } from '../show/index'
-import { Text } from '../text/index'
-import { CheckboxParts } from './parts'
-import { CheckboxIcon } from './checkbox-icon'
-
-/**
- * This module contains the Checkbox component.
- * @module
- */
-
-export type CheckboxProps = CheckboxVariantProps & CheckboxRootProps
-
-/**
- * Checkbox component is an abstraction of the primitives that displays a
- * controlled checkbox with a label.
- * @description [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
- * @description [Ark Docs](https://ark-ui.com/docs/components/checkbox)
- */
-export function Checkbox(props: CheckboxProps) {
-  const { size, children, ...rootProps } = props
-
-  return (
-    <CheckboxParts.Root {...rootProps}>
-      <CheckboxParts.Control size={size}>
-        <CheckboxIcon indeterminate={rootProps.checked === 'indeterminate'} />
-      </CheckboxParts.Control>
-
-      <CheckboxParts.Label size={size}>
-        {children}
-        <Show when={props.required}>
-          <Text as="span" data-part="required-indicator">
-            (required)
-          </Text>
-        </Show>
-      </CheckboxParts.Label>
-
-      <CheckboxParts.HiddenInput />
-    </CheckboxParts.Root>
-  )
-}

package/src/components/checkbox/index.ts

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

package/src/components/checkbox/parts.ts

@@ -1,59 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  CheckboxRoot,
-  CheckboxLabel,
-  CheckboxControl,
-  CheckboxIndicator,
-  CheckboxHiddenInput,
-  CheckboxGroup,
-} from './primitives'
-
-/**
- * This module contains the parts of the Field component.
- * @module 'field/parts'
- */
-
-interface CheckboxPartsValue {
-  /**
-   * The container of the field.
-   */
-  Root: ElementType
-  /**
-   * The label of the field.
-   */
-  Label: ElementType
-  /**
-   * The control of the field.
-   */
-  Control: ElementType
-  /**
-   * The indicator of the field.
-   */
-  Indicator: ElementType
-  /**
-   * The hidden input of the field.
-   */
-  HiddenInput: ElementType
-  /**
-   * The checkbox group component.
-   */
-  Group: ElementType
-}
-
-/**
- * An Object containing the parts of the Checkbox component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the CheckboxParts object and
- * the entire family of components vs. only what you use.
- */
-export const CheckboxParts: CheckboxPartsValue = {
-  Root: CheckboxRoot,
-  Label: CheckboxLabel,
-  Control: CheckboxControl,
-  Indicator: CheckboxIndicator,
-  HiddenInput: CheckboxHiddenInput,
-  Group: CheckboxGroup,
-}

package/src/components/checkbox/primitives.tsx

@@ -1,77 +0,0 @@
-import {
-  Checkbox,
-  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 { 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 const CheckboxRoot = withSlotRecipe(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 const CheckboxLabel = withSlotRecipe(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 const CheckboxControl = withSlotRecipe(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 const CheckboxIndicator = withSlotRecipe(Checkbox.Indicator, 'indicator')
-export type CheckboxIndicatorProps =
-  CerberusPrimitiveProps<ArkCheckboxIndicatorProps>
-
-/**
- * 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 const CheckboxHiddenInput = withNoRecipe(Checkbox.HiddenInput)
-export type CheckboxHiddenInputProps =
-  CerberusPrimitiveProps<ArkCheckboxHiddenInputProps>
-
-/**
- * Checkbox Group is used to group checkboxes together in a consistently styled
- * way.
- * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
- * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)
- */
-export const CheckboxGroup = withSlotRecipe(Checkbox.Group, 'group')
-export type CheckboxGroupProps = CerberusPrimitiveProps<ArkCheckboxGroupProps>

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

@@ -1,49 +0,0 @@
-import type { ReactNode } from 'react'
-import {
-  CircularProgressCircle,
-  CircularProgressCircleRange,
-  CircularProgressCircleTrack,
-  CircularProgressInfoGroup,
-  CircularProgressLabel,
-  CircularProgressRoot,
-  CircularProgressValueText,
-  type CircularProgressRootProps,
-} from './primitives'
-import { Show } from '../show/show'
-
-export interface CircularProgressProps extends CircularProgressRootProps {
-  /**
-   * The background style of the CircularProgress
-   */
-  bgStyle?: 'filled' | 'transparent'
-  /**
-   * The label for the circular progress.
-   * @default 'Done'
-   */
-  label?: ReactNode
-  /**
-   * Whether to hide the value text inside the circular progress.
-   * @default false
-   */
-  hideValueText?: boolean
-}
-
-export function CircularProgress(props: CircularProgressProps) {
-  const { label, hideValueText, ...rootProps } = props
-
-  return (
-    <CircularProgressRoot {...rootProps}>
-      <CircularProgressCircle>
-        <CircularProgressCircleTrack />
-        <CircularProgressCircleRange />
-      </CircularProgressCircle>
-
-      <CircularProgressInfoGroup>
-        <Show when={!hideValueText}>
-          <CircularProgressValueText />
-        </Show>
-        <CircularProgressLabel>{label ?? 'Done'}</CircularProgressLabel>
-      </CircularProgressInfoGroup>
-    </CircularProgressRoot>
-  )
-}

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

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

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

@@ -1,80 +0,0 @@
-import {
-  Progress,
-  type ProgressRootProps,
-  type ProgressLabelProps,
-  type ProgressValueTextProps,
-  type ProgressCircleProps,
-  type ProgressCircleTrackProps,
-  type ProgressCircleRangeProps,
-} from '@ark-ui/react/progress'
-import { type HTMLArkProps } from '@ark-ui/react/factory'
-import {
-  circularProgress,
-  type CircularProgressVariantProps,
-} from 'styled-system/recipes'
-import {
-  cerberus,
-  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
->
-export const CircularProgressRoot = withSlotRecipe(Progress.Root, 'root')
-
-// Label
-
-export type CircularProgressLabelProps =
-  CerberusPrimitiveProps<ProgressLabelProps>
-export const CircularProgressLabel = withSlotRecipe(Progress.Label, 'label')
-
-// ValueText
-
-export type CircularProgressValueTextProps =
-  CerberusPrimitiveProps<ProgressValueTextProps>
-export const CircularProgressValueText = withSlotRecipe(
-  Progress.ValueText,
-  'valueText',
-)
-
-// Circle
-
-export type CircularProgressCircleProps =
-  CerberusPrimitiveProps<ProgressCircleProps>
-export const CircularProgressCircle = withSlotRecipe(Progress.Circle, 'circle')
-
-// CircleTrack
-
-export type CircularProgressCircleTrackProps =
-  CerberusPrimitiveProps<ProgressCircleTrackProps>
-export const CircularProgressCircleTrack = withSlotRecipe(
-  Progress.CircleTrack,
-  'circleTrack',
-)
-
-// CircleRange
-
-export type CircularProgressCircleRangeProps =
-  CerberusPrimitiveProps<ProgressCircleRangeProps>
-export const CircularProgressCircleRange = withSlotRecipe(
-  Progress.CircleRange,
-  'circleRange',
-)
-
-// InfoGroup
-
-export type CircularProgressInfoGroupProps = HTMLArkProps<'div'>
-export const CircularProgressInfoGroup = withSlotRecipe(
-  cerberus.div,
-  'infoGroup',
-)

package/src/components/clipboard/copy-indicator.tsx

@@ -1,22 +0,0 @@
-import {
-  AnimatedCheckmarkIcon,
-  CopyIcon,
-} from '../../config/icons/checkbox.icons'
-import { ClipboardIndicator, type ClipboardIndicatorProps } from './primitives'
-
-/**
- * A simple abstraction around the `Clipboard.Indicator` component that provides
- * default "Copy" and "Copied" icons.
- */
-export function CopyIndicator(props: ClipboardIndicatorProps) {
-  return (
-    <ClipboardIndicator
-      copied={<AnimatedCheckmarkIcon />}
-      h="1em"
-      w="1em"
-      {...props}
-    >
-      <CopyIcon />
-    </ClipboardIndicator>
-  )
-}

package/src/components/clipboard/copy-text.tsx

@@ -1,13 +0,0 @@
-import { ClipboardIndicator, type ClipboardIndicatorProps } from './primitives'
-
-/**
- * A simple abstraction around the `Clipboard.Indicator` component that provides
- * default "Copy" and "Copied" text.
- */
-export function CopyText(props: ClipboardIndicatorProps) {
-  return (
-    <ClipboardIndicator copied="Copied" {...props}>
-      Copy
-    </ClipboardIndicator>
-  )
-}

package/src/components/clipboard/index.ts

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

package/src/components/clipboard/parts.ts

@@ -1,74 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  ClipboardRoot,
-  ClipboardLabel,
-  ClipboardControl,
-  ClipboardContext,
-  ClipboardInput,
-} from './primitives'
-import { CopyText } from './copy-text'
-import { CopyIndicator } from './copy-indicator'
-import { TriggerWithTooltip } from './trigger'
-
-/**
- * This module contains the parts of the Clipboard component.
- * @module 'clipboard/parts'
- */
-
-interface ClipboardPartsValue {
-  /**
-   * The root context provider of the clipboard.
-   */
-  Root: ElementType
-  /**
-   * The label of the clipboard.
-   */
-  Label: ElementType
-  /**
-   * The control of the clipboard.
-   */
-  Control: ElementType
-  /**
-   * The input of the clipboard.
-   */
-  Input: ElementType
-  /**
-   * The raw context of the clipboard. Useful for obtaining the context state
-   * within the hierarchy of the clipboard component.
-   */
-  Context: ElementType
-  /**
-   * The trigger of the clipboard.
-   */
-  Trigger: ElementType
-  /**
-   * A simple abstraction around the `Clipboard.Indicator` component that
-   * provides default "Copy" and "Copied" icons.
-   */
-  Indicator: ElementType
-  /**
-   * A simple abstraction around the `Clipboard.Indicator` component that
-   * provides default "Copy" and "Copied" text.
-   */
-  CopyText: ElementType
-}
-
-/**
- * An Object containing the parts of the Clipboard component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the Clipboard parts object and
- * the entire family of components versus only what you use.
- */
-export const Clipboard: ClipboardPartsValue = {
-  Root: ClipboardRoot,
-  Label: ClipboardLabel,
-  Control: ClipboardControl,
-  Context: ClipboardContext,
-  Input: ClipboardInput,
-  Trigger: TriggerWithTooltip,
-  Indicator: CopyIndicator,
-  CopyText: CopyText,
-}

package/src/components/clipboard/primitives.ts

@@ -1,56 +0,0 @@
-import {
-  Clipboard,
-  type ClipboardContextProps as ArkContextProps,
-  type ClipboardRootProps as ArkRootProps,
-  type ClipboardLabelProps as ArkLabelProps,
-  type ClipboardControlProps as ArkControlProps,
-  type ClipboardInputProps as ArkInputProps,
-  type ClipboardTriggerProps as ArkTriggerProps,
-  type ClipboardIndicatorProps as ArkIndicatorProps,
-} from '@ark-ui/react/clipboard'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the Clipboard component primitives.
- * @module @cerberus-design/react/components/clipboard/primitives
- */
-
-const { withNoRecipe } = createCerberusPrimitive()
-
-// Context
-
-export type ClipboardContextProps = ArkContextProps
-export const ClipboardContext = Clipboard.Context
-
-// Root
-
-export type ClipboardRootProps = CerberusPrimitiveProps<ArkRootProps>
-export const ClipboardRoot = withNoRecipe(Clipboard.Root)
-
-// Label
-
-export type ClipboardLabelProps = CerberusPrimitiveProps<ArkLabelProps>
-export const ClipboardLabel = withNoRecipe(Clipboard.Label)
-
-// Control
-
-export type ClipboardControlProps = CerberusPrimitiveProps<ArkControlProps>
-export const ClipboardControl = withNoRecipe(Clipboard.Control)
-
-// Input
-
-export type ClipboardInputProps = CerberusPrimitiveProps<ArkInputProps>
-export const ClipboardInput = withNoRecipe(Clipboard.Input)
-
-// Trigger
-
-export type ClipboardTriggerProps = CerberusPrimitiveProps<ArkTriggerProps>
-export const ClipboardTrigger = withNoRecipe(Clipboard.Trigger)
-
-// Indicator
-
-export type ClipboardIndicatorProps = CerberusPrimitiveProps<ArkIndicatorProps>
-export const ClipboardIndicator = withNoRecipe(Clipboard.Indicator)

package/src/components/clipboard/trigger.tsx

@@ -1,14 +0,0 @@
-import { Tooltip } from '../tooltip/index'
-import { ClipboardTrigger, type ClipboardTriggerProps } from './primitives'
-import { CopyText } from './copy-text'
-
-/**
- * A Clipboard trigger wrapped with a Tooltip that displays the copy status.
- */
-export function TriggerWithTooltip(props: ClipboardTriggerProps) {
-  return (
-    <Tooltip closeOnClick={false} content={<CopyText />} asChild>
-      <ClipboardTrigger {...props} />
-    </Tooltip>
-  )
-}

package/src/components/collapsible/index.ts

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