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

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'

package/src/components/collapsible/parts.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  CollapsibleRootProvider,
-  CollapsibleRoot,
-  CollapsibleTrigger,
-  CollapsibleIndicator,
-  CollapsibleContent,
-} from './primitives'
-
-/**
- * This module contains the parts of the Collapsible component.
- * @module 'collapsible/parts'
- */
-
-interface CollapsiblePartsValue {
-  /**
-   * The low-level context provider for advanced scenarios
-   */
-  RootProvider: ElementType
-  /**
-   * The context provider of the collapsible.
-   */
-  Root: ElementType
-  /**
-   * The button that toggles the collapsible.
-   */
-  Trigger: ElementType
-  /**
-   * The indicator that shows the state of the collapsible.
-   */
-  Indicator: ElementType
-  /**
-   * The content of the collapsible.
-   */
-  Content: ElementType
-}
-
-/**
- * An Object containing the parts of the Collapsible component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the CollapsibleParts object and
- * the entire family of components vs. only what you use.
- */
-export const Collapsible: CollapsiblePartsValue = {
-  RootProvider: CollapsibleRootProvider,
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Indicator: CollapsibleIndicator,
-  Content: CollapsibleContent,
-}

package/src/components/collapsible/primitives.tsx

@@ -1,53 +0,0 @@
-import {
-  Collapsible,
-  type CollapsibleRootProviderProps as ArkCollapsibleProviderProps,
-  type CollapsibleRootProps as ArkCollapsibleRootProps,
-  type CollapsibleTriggerProps as ArkCollapsibleTriggerProps,
-  type CollapsibleIndicatorProps as ArkCollapsibleIndicatorProps,
-  type CollapsibleContentProps as ArkCollapsibleContentProps,
-} from '@ark-ui/react/collapsible'
-import {
-  collapsible,
-  type CollapsibleVariantProps,
-} from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains all the primitives of the Collapsible component.
- * @module 'collapsible'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(collapsible)
-
-// Provider
-
-export type CollapsibleProviderProps = ArkCollapsibleProviderProps
-export const CollapsibleRootProvider = withNoRecipe(Collapsible.RootProvider)
-
-// Root
-
-export type CollapsibleRootProps =
-  CerberusPrimitiveProps<ArkCollapsibleRootProps>
-export const CollapsibleRoot = withNoRecipe(Collapsible.Root)
-
-// Trigger
-
-export type CollapsibleTriggerProps =
-  CerberusPrimitiveProps<ArkCollapsibleTriggerProps>
-export const CollapsibleTrigger = withNoRecipe(Collapsible.Trigger)
-
-// Indicator
-
-export type CollapsibleIndicatorProps =
-  CerberusPrimitiveProps<ArkCollapsibleIndicatorProps>
-export const CollapsibleIndicator = withNoRecipe(Collapsible.Indicator)
-
-// Content
-
-export type CollapsibleContentProps = CerberusPrimitiveProps<
-  ArkCollapsibleContentProps & CollapsibleVariantProps
->
-export const CollapsibleContent = withSlotRecipe(Collapsible.Content, 'content')

package/src/components/combobox/combobox.tsx

@@ -1,67 +0,0 @@
-'use client'
-
-import type { ComboboxRootProps } from '@ark-ui/react/combobox'
-import type { ComboboxVariantProps } from 'styled-system/recipes'
-import { useCerberusContext } from '../../context/cerberus'
-import { splitProps } from '../../utils/index'
-import type { SelectCollectionItem } from '../select/select'
-import { type FieldInputElProps } from '../field/index'
-import { Show } from '../show/index'
-import { ComboboxParts } from './parts'
-import { ComboboxStartIcon } from './primitives'
-
-export interface ComboboxProps
-  extends ComboboxRootProps<SelectCollectionItem>, ComboboxVariantProps {
-  /**
-   * The label that appears above the combobox input.
-   */
-  label?: string
-  /**
-   * The icon that appears at the start of the combobox input.
-   */
-  startIcon?: FieldInputElProps['startIcon']
-}
-
-export function Combobox(props: ComboboxProps) {
-  const [{ startIcon, label, ...elProps }, rootProps] = splitProps(props, [
-    'label',
-    'children',
-    'startIcon',
-  ])
-
-  const { icons } = useCerberusContext()
-  const { selectArrow: SelectArrow, close: CloseIcon } = icons
-
-  const hasStartIcon = Boolean(startIcon)
-
-  return (
-    <ComboboxParts.Root {...rootProps}>
-      <Show when={label}>
-        <ComboboxParts.Label>{label}</ComboboxParts.Label>
-      </Show>
-
-      <ComboboxParts.Control>
-        <Show when={hasStartIcon}>
-          <ComboboxStartIcon>{startIcon}</ComboboxStartIcon>
-        </Show>
-
-        <ComboboxParts.Input
-          {...(hasStartIcon && { 'data-has': 'start-indicator' })}
-        />
-
-        <ComboboxParts.ClearTrigger>
-          <CloseIcon />
-        </ComboboxParts.ClearTrigger>
-        <ComboboxParts.Trigger>
-          <SelectArrow />
-        </ComboboxParts.Trigger>
-      </ComboboxParts.Control>
-
-      <ComboboxParts.Positioner>
-        <ComboboxParts.Content size={rootProps.size}>
-          {elProps.children}
-        </ComboboxParts.Content>
-      </ComboboxParts.Positioner>
-    </ComboboxParts.Root>
-  )
-}

package/src/components/combobox/index.ts

@@ -1,6 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './combobox'
-export * from './item'
-export * from './item-group'
-export * from './use-stateful-collection'

package/src/components/combobox/item-group.tsx

@@ -1,19 +0,0 @@
-import type { ComboboxItemGroupProps } from '@ark-ui/react/combobox'
-import { ComboboxParts } from './parts'
-
-export interface ComboItemGroupProps extends ComboboxItemGroupProps {
-  /**
-   * The label that appears for the combobox item group.
-   */
-  label?: string
-}
-
-export function ComboItemGroup(props: ComboItemGroupProps) {
-  const { label, children, ...groupProps } = props
-  return (
-    <ComboboxParts.ItemGroup {...groupProps}>
-      <ComboboxParts.ItemGroupLabel>{label}</ComboboxParts.ItemGroupLabel>
-      {children}
-    </ComboboxParts.ItemGroup>
-  )
-}

package/src/components/combobox/item.tsx

@@ -1,30 +0,0 @@
-'use client'
-
-import type { ComboboxItemProps } from '@ark-ui/react'
-import { useCerberusContext } from '../../context/cerberus'
-import { ComboboxParts } from './parts'
-
-/**
- * This module contains the ComboboxItemWithIndicator component.
- * @module 'combobox/item'
- */
-
-/**
- * An abstraction of the ComboboxItem component that includes an indicator.
- * @description [Combobox Docs](https://cerberus.digitalu.design/react/combobox)
- * @description [Ark Docs](https://ark-ui.com/react/docs/components/combobox)
- */
-export function ComboItemWithIndicator(props: ComboboxItemProps) {
-  const { icons } = useCerberusContext()
-  const { selectChecked: CheckedIcon } = icons
-
-  return (
-    <ComboboxParts.Item {...props}>
-      <ComboboxParts.ItemIndicator>
-        <CheckedIcon />
-      </ComboboxParts.ItemIndicator>
-
-      {props.children}
-    </ComboboxParts.Item>
-  )
-}