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

package/src/components/avatar/avatar.tsx

@@ -1,51 +0,0 @@
-import type { ReactNode } from 'react'
-import { Show } from '../show/index'
-import { AvatarParts } from './parts'
-import type { AvatarRootProps } from './primitives'
-
-/**
- * This module provides an abstraction of the Avatar primitives.
- * @module 'avatar'
- */
-
-export type AvatarWithoutImage = {
-  alt?: never
-  src?: never
-  fallback: ReactNode
-}
-
-export type AvatarWithImage = {
-  alt: string
-  src: string
-  fallback?: ReactNode
-}
-
-export type AvatarProps = AvatarRootProps &
-  (AvatarWithoutImage | AvatarWithImage)
-
-/**
- * Avatar component is an abstraction of the primitives that displays a
- * avatar or it's fallback when the image fails to load.
- * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)
- * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)
- */
-export function Avatar(props: AvatarProps) {
-  const { alt, src, fallback, children, ...rootProps } = props
-  const imgProps = { alt, src }
-
-  return (
-    <AvatarParts.Root {...rootProps}>
-      <Show
-        when={children}
-        fallback={
-          <>
-            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>
-            <AvatarParts.Image {...imgProps} />
-          </>
-        }
-      >
-        {children}
-      </Show>
-    </AvatarParts.Root>
-  )
-}

package/src/components/avatar/index.ts

@@ -1,5 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './avatar'
-
-export { useAvatarContext } from '@ark-ui/react/avatar'

package/src/components/avatar/parts.ts

@@ -1,37 +0,0 @@
-import type { ElementType } from 'react'
-import { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'
-
-/**
- * This module contains the parts of the Avatar component.
- * @module 'avatar/parts'
- */
-
-interface AvatarPartsValue {
-  /**
-   * The context provider of the Avatar.
-   */
-  Root: ElementType
-  /**
-   * The image of the Avatar.
-   */
-  Image: ElementType
-  /**
-   * The fallback content to display when the image fails to load.
-   */
-  Fallback: ElementType
-}
-
-/**
- * An Object containing the parts of the Accordion component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the AvatarParts object and
- * the entire family of components vs. only what you use.
- */
-export const AvatarParts: AvatarPartsValue = {
-  Root: AvatarRoot,
-  Image: AvatarImage,
-  Fallback: AvatarFallback,
-}

package/src/components/avatar/primitives.tsx

@@ -1,38 +0,0 @@
-import {
-  Avatar,
-  type AvatarFallbackProps as ArkAvatarFallbackProps,
-  type AvatarImageProps as ArkAvatarImageProps,
-  type AvatarRootProps as ArkAvatarRootProps,
-} from '@ark-ui/react/avatar'
-import { avatar, type AvatarVariantProps } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module provides the primitive components for the Avatar component.
- * @module 'avatar/primitives'
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(avatar)
-
-/**
- * The root component of the Avatar.
- */
-export const AvatarRoot = withSlotRecipe(Avatar.Root, 'root')
-export type AvatarRootProps = CerberusPrimitiveProps<
-  ArkAvatarRootProps & AvatarVariantProps
->
-
-/**
- * The image component of the Avatar.
- */
-export const AvatarImage = withSlotRecipe(Avatar.Image, 'image')
-export type AvatarImageProps = CerberusPrimitiveProps<ArkAvatarImageProps>
-
-/**
- * The fallback component of the Avatar.
- */
-export const AvatarFallback = withSlotRecipe(Avatar.Fallback, 'fallback')
-export type AvatarFallbackProps = CerberusPrimitiveProps<ArkAvatarFallbackProps>

package/src/components/button/button.tsx

@@ -1,62 +0,0 @@
-'use client'
-
-import { createContext, useContext, useMemo } from 'react'
-import { Box } from 'styled-system/jsx'
-import type { CerberusProps } from '../../system/types'
-import { Show } from '../show/index'
-import { Spinner } from '../spinner/index'
-import { ButtonRoot, ButtonRootProps } from './primitives'
-
-/**
- * This module contains the Button component.
- * @module
- */
-
-interface ButtonContextValue {
-  pending: boolean
-}
-
-const ButtonContext = createContext<ButtonContextValue>({
-  pending: false,
-})
-
-export interface ButtonProps extends ButtonRootProps {
-  /**
-   * If true, the button will show a loading spinner.
-   */
-  pending?: boolean
-}
-
-/**
- * A component that allows the user to perform actions
- * @see https://cerberus.digitalu.design/react/button
- */
-export function Button(props: ButtonProps) {
-  const { pending = false, ...nativeProps } = props
-  const value = useMemo(() => ({ pending }), [pending])
-  return (
-    <ButtonContext.Provider value={value}>
-      <ButtonRoot
-        {...nativeProps}
-        data-scope="button"
-        data-part="root"
-        disabled={pending || props.disabled}
-      />
-    </ButtonContext.Provider>
-  )
-}
-
-/**
- * An icon to display in a button that utilizes the pending state to display
- * a loading spinner.
- */
-export function ButtonIcon(props: CerberusProps<'div'>) {
-  const { pending } = useContext(ButtonContext)
-  return (
-    <Show when={pending} fallback={<>{props.children}</>}>
-      <Box data-scope="button" data-part="button-spinner" w="4">
-        <Spinner />
-      </Box>
-    </Show>
-  )
-}

package/src/components/button/index.ts

@@ -1,3 +0,0 @@
-export * from './button'
-export * from './parts'
-export { ButtonGroup, type ButtonGroupProps } from './primitives'

package/src/components/button/parts.ts

@@ -1,32 +0,0 @@
-import type { ElementType } from 'react'
-import { Button, ButtonIcon } from './button'
-
-/**
- * This module contains the parts of the Button component.
- * @module 'button/parts'
- */
-
-interface ButtonPartsValue {
-  /**
-   * The context provider of the button.
-   */
-  Root: ElementType
-  /**
-   * The icon of the button.
-   */
-  Icon: 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 ButtonParts object and
- * the entire family of components vs. only what you use.
- */
-export const ButtonParts: ButtonPartsValue = {
-  Root: Button,
-  Icon: ButtonIcon,
-}

package/src/components/button/primitives.tsx

@@ -1,41 +0,0 @@
-import { ark } from '@ark-ui/react/factory'
-import type { HTMLAttributes } from 'react'
-import {
-  button,
-  buttonGroup,
-  ButtonVariantProps,
-  type ButtonGroupVariantProps,
-} from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the Button component primitives.
- * @module @cerberus-design/react/components/button/primitives
- */
-
-const { withRecipe } = createCerberusPrimitive(button)
-const { withRecipe: withGroupRecipe } = createCerberusPrimitive(buttonGroup)
-
-/**
- * The root element of the Button component.
- */
-export const ButtonRoot = withRecipe(ark.button)
-export type ButtonRootProps = CerberusPrimitiveProps<
-  HTMLAttributes<HTMLButtonElement> & ButtonVariantProps
->
-
-const ButtonGroupEl = withGroupRecipe(ark.div)
-export type ButtonGroupProps = CerberusPrimitiveProps<
-  HTMLAttributes<HTMLDivElement> & ButtonGroupVariantProps
->
-
-/**
- * The ButtonGroup component is a wrapper that groups multiple Button
- * components together.
- */
-export function ButtonGroup(props: ButtonGroupProps) {
-  return <ButtonGroupEl {...props} />
-}

package/src/components/carousel/carousel.tsx

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

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

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,
-}