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

package/src/components/pagination/item-list.tsx

@@ -1,34 +0,0 @@
-import { Group } from '../group/index'
-import { PaginationItem } from './item'
-import { PaginationProps } from './pagination'
-import { PaginationParts } from './parts'
-import { PaginationContextDetails } from './primitives'
-import { NextTrigger, PrevTrigger } from './triggers'
-
-interface ItemListProps extends PaginationContextDetails {
-  layout?: PaginationProps['layout']
-}
-
-export function ItemList(props: ItemListProps) {
-  const { layout, ...pagination } = props
-
-  return (
-    <Group layout={layout}>
-      <PrevTrigger layout={layout} />
-
-      {pagination.pages.map((page, index) =>
-        page.type === 'page' ? (
-          <PaginationParts.Item key={index} {...page} asChild>
-            <PaginationItem>{page.value}</PaginationItem>
-          </PaginationParts.Item>
-        ) : (
-          <PaginationParts.Ellipsis key={index} index={index} asChild>
-            <PaginationItem>&#8230;</PaginationItem>
-          </PaginationParts.Ellipsis>
-        ),
-      )}
-
-      <NextTrigger layout={layout} />
-    </Group>
-  )
-}

package/src/components/pagination/item.tsx

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react'
-import { Button } from '../button/index'
-
-export function PaginationItem(props: PropsWithChildren) {
-  return <Button shape="default" usage="outlined-subtle" {...props} />
-}

package/src/components/pagination/pagination.tsx

@@ -1,53 +0,0 @@
-'use client'
-
-import type { WithCss } from 'styled-system/types'
-import { type GroupProps } from '../group/index'
-import { Show } from '../show/index'
-import { CompactText } from './compact'
-import { ItemList } from './item-list'
-import { PaginationParts } from './parts'
-import {
-  PaginationRootProps,
-  type PaginationContextDetails,
-} from './primitives'
-
-export interface PaginationProps extends PaginationRootProps, WithCss {
-  /**
-   * Display a compact layout of only text information and triggers.
-   * @default false
-   */
-  compact?: boolean
-  /**
-   * Display the layout of the button group.
-   * @default 'default'
-   */
-  layout?: GroupProps['layout']
-}
-
-/**
- * A pagination component that displays a list of buttons to navigate between pages.
- * @see [Cerby Docs](https://cerberus.digitalu.design/docs/components/pagination)
- * @definition [Ark Docs](https://ark-ui.com/docs/components/pagination#api-reference)
- */
-export function Pagination(props: PaginationProps) {
-  const { compact, layout, ...rootProps } = props
-
-  return (
-    <PaginationParts.Root {...rootProps}>
-      <PaginationParts.Context>
-        {(pagination: PaginationContextDetails) => (
-          <>
-            {props.children}
-
-            <Show
-              when={compact}
-              fallback={<ItemList layout={layout} {...pagination} />}
-            >
-              <CompactText layout={layout} {...pagination} />
-            </Show>
-          </>
-        )}
-      </PaginationParts.Context>
-    </PaginationParts.Root>
-  )
-}

package/src/components/pagination/parts.ts

@@ -1,65 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  PaginationRoot,
-  PaginationPrevTrigger,
-  PaginationNextTrigger,
-  PaginationContext,
-  PaginationItem,
-  PaginationEllipsis,
-  PaginationRootProvider,
-} from './primitives'
-
-/**
- * This module contains the parts of the Pagination component.
- * @module 'pagination/parts'
- */
-
-interface PaginationPartsValue {
-  /**
-   * The context provider of the pagination family.
-   */
-  Root: ElementType
-  /**
-   * The trigger button for going backwards.
-   */
-  PrevTrigger: ElementType
-  /**
-   * The trigger button for going forwards.
-   */
-  NextTrigger: ElementType
-  /**
-   * The context provider of the pagination family.
-   */
-  Context: ElementType
-  /**
-   * The item component of the pagination family.
-   */
-  Item: ElementType
-  /**
-   * The ellipsis component of the pagination family.
-   */
-  Ellipsis: ElementType
-  /**
-   * The context provider of the pagination family.
-   */
-  RootProvider: ElementType
-}
-
-/**
- * An Object containing the parts of the Pagination component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the PaginationParts object and
- * the entire family of components vs. only what you use.
- */
-export const PaginationParts: PaginationPartsValue = {
-  Root: PaginationRoot,
-  PrevTrigger: PaginationPrevTrigger,
-  NextTrigger: PaginationNextTrigger,
-  Context: PaginationContext,
-  Item: PaginationItem,
-  Ellipsis: PaginationEllipsis,
-  RootProvider: PaginationRootProvider,
-}

package/src/components/pagination/primitives.ts

@@ -1,41 +0,0 @@
-import {
-  Pagination,
-  type PaginationContextProps as ArkPaginationContextProps,
-  type PaginationEllipsisProps as ArkPaginationEllipsisProps,
-  type PaginationItemProps as ArkPaginationItemProps,
-  type PaginationNextTriggerProps as ArkPaginationNextTriggerProps,
-  type PaginationPrevTriggerProps as ArkPaginationPrevTriggerProps,
-  type PaginationRootProps as ArkPaginationRootProps,
-  type PaginationRootProviderProps as ArkPaginationRootProviderProps,
-  type UsePaginationReturn as ArkUsePaginationReturn,
-  type PaginationPageUrlDetails,
-  type PaginationPageSizeChangeDetails,
-} from '@ark-ui/react/pagination'
-import { createCerberusPrimitive } from '../../system/index'
-
-const { withNoRecipe } = createCerberusPrimitive()
-
-export type PaginationRootProps = ArkPaginationRootProps
-export const PaginationRoot = withNoRecipe(Pagination.Root)
-
-export type PaginationPrevTriggerProps = ArkPaginationPrevTriggerProps
-export const PaginationPrevTrigger = withNoRecipe(Pagination.PrevTrigger)
-
-export type PaginationNextTriggerProps = ArkPaginationNextTriggerProps
-export const PaginationNextTrigger = withNoRecipe(Pagination.NextTrigger)
-
-export type PaginationContextProps = ArkPaginationContextProps
-export const PaginationContext = withNoRecipe(Pagination.Context)
-
-export type PaginationItemProps = ArkPaginationItemProps
-export const PaginationItem = withNoRecipe(Pagination.Item)
-
-export type PaginationEllipsisProps = ArkPaginationEllipsisProps
-export const PaginationEllipsis = withNoRecipe(Pagination.Ellipsis)
-
-export type PaginationRootProviderProps = ArkPaginationRootProviderProps
-export const PaginationRootProvider = withNoRecipe(Pagination.RootProvider)
-
-export type PaginationContextDetails = ArkUsePaginationReturn
-export type PageDetails = PaginationPageUrlDetails
-export type PageSizeChangeDetails = PaginationPageSizeChangeDetails

package/src/components/pagination/triggers.tsx

@@ -1,55 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { PropsWithChildren } from 'react'
-import { IconButton, type IconButtonProps } from '../icon-button/index'
-import { PaginationParts } from './parts'
-import { GroupProps } from '../group'
-
-export function PrevTrigger(props: TriggerProps) {
-  const { icons } = useCerberusContext()
-  const { calendarPrev: Icon } = icons
-
-  return (
-    <PaginationParts.PrevTrigger asChild>
-      <PaginationTrigger {...props}>
-        <Icon />
-      </PaginationTrigger>
-    </PaginationParts.PrevTrigger>
-  )
-}
-
-export function NextTrigger(props: TriggerProps) {
-  const { icons } = useCerberusContext()
-  const { calendarNext: Icon } = icons
-
-  return (
-    <PaginationParts.NextTrigger asChild>
-      <PaginationTrigger {...props}>
-        <Icon />
-      </PaginationTrigger>
-    </PaginationParts.NextTrigger>
-  )
-}
-
-export interface TriggerBaseProps {
-  layout?: GroupProps['layout']
-}
-export type TriggerProps = TriggerBaseProps & Omit<IconButtonProps, 'clipboard'>
-
-function PaginationTrigger(props: PropsWithChildren<TriggerProps>) {
-  const { layout, ...btnProps } = props
-
-  if (layout === 'attached') {
-    return (
-      <IconButton
-        shape="square"
-        usage="outlined-subtle"
-        clipboard
-        {...btnProps}
-      />
-    )
-  }
-
-  return <IconButton shape="square" clipboard {...btnProps} />
-}

package/src/components/pin-input/index.ts

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

package/src/components/pin-input/input.tsx

@@ -1,22 +0,0 @@
-import { PinInputParts } from './parts'
-import type { PinInputRootProps } from './primitives'
-
-/**
- * PinInput component for entering a numeric PIN code.
- * @definition [Cerberus Docs](https://cerberus.digitalu.design/docs/components/pin-input)
- */
-export function PinInput(props: PinInputRootProps) {
-  const { size, ...rootProps } = props
-  const count = rootProps.count ?? 3
-
-  return (
-    <PinInputParts.Root placeholder="" size={size} {...rootProps}>
-      <PinInputParts.Control>
-        {Array.from({ length: count }, (_, index) => (
-          <PinInputParts.Input key={index} index={index} size={size} />
-        ))}
-      </PinInputParts.Control>
-      <PinInputParts.HiddenInput />
-    </PinInputParts.Root>
-  )
-}

package/src/components/pin-input/parts.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  PinInputRoot,
-  PinInputInput,
-  PinInputControl,
-  PinInputHiddenInput,
-  PinInputLabel,
-} from './primitives'
-
-/**
- * This module contains the parts of the PinInput component.
- * @module 'pin-input/parts'
- */
-
-interface PinInputPartsValue {
-  /**
-   * The context provider of the pin-input.
-   */
-  Root: ElementType
-  /**
-   * The label element of the pin-input.
-   */
-  Label: ElementType
-  /**
-   * The control element of the pin-input.
-   */
-  Control: ElementType
-  /**
-   * The input element of the pin-input.
-   */
-  Input: ElementType
-  /**
-   * The hidden input element of the pin-input.
-   */
-  HiddenInput: ElementType
-}
-
-/**
- * An Object containing the parts of the PinInput component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the PinInputParts object and
- * the entire family of components vs. only what you use.
- */
-export const PinInputParts: PinInputPartsValue = {
-  Root: PinInputRoot,
-  Label: PinInputLabel,
-  Control: PinInputControl,
-  Input: PinInputInput,
-  HiddenInput: PinInputHiddenInput,
-}

package/src/components/pin-input/primitives.tsx

@@ -1,46 +0,0 @@
-import { pinInput, type PinInputVariantProps } from 'styled-system/recipes'
-import {
-  PinInput as ArkPinInput,
-  type PinInputRootProps as ArkPinInputRootProps,
-  type PinInputLabelProps as ArkPinInputLabelProps,
-  type PinInputInputProps as ArkPinInputInputProps,
-  type PinInputControlProps as ArkPinInputControlProps,
-  type PinInputHiddenInputProps as ArkPinInputHiddenInputProps,
-} from '@ark-ui/react/pin-input'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains all the primitives of the PinInput component.
- * @module 'pin-input'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(pinInput)
-
-// Root
-export type PinInputRootProps = CerberusPrimitiveProps<
-  ArkPinInputRootProps & PinInputVariantProps
->
-export const PinInputRoot = withSlotRecipe(ArkPinInput.Root, 'root')
-
-// Label
-export type PinInputLabelProps = CerberusPrimitiveProps<ArkPinInputLabelProps>
-export const PinInputLabel = withSlotRecipe(ArkPinInput.Label, 'label')
-
-// Control
-export type PinInputControlProps =
-  CerberusPrimitiveProps<ArkPinInputControlProps>
-export const PinInputControl = withSlotRecipe(ArkPinInput.Control, 'control')
-
-// Input
-export type PinInputInputProps = CerberusPrimitiveProps<
-  ArkPinInputInputProps & PinInputVariantProps
->
-export const PinInputInput = withSlotRecipe(ArkPinInput.Input, 'input')
-
-// HiddenInput
-export type PinInputHiddenInputProps =
-  CerberusPrimitiveProps<ArkPinInputHiddenInputProps>
-export const PinInputHiddenInput = withNoRecipe(ArkPinInput.HiddenInput)

package/src/components/portal/index.ts

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

package/src/components/portal/portal.tsx

@@ -1,28 +0,0 @@
-import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'
-
-/**
- * This module is the Portal component.
- * @module
- */
-
-export type { PortalProps }
-
-/**
- * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
- * @see https://cerberus.digitalu.design/react/portal
- * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)
- * @example
- * ```tsx
- * 'use client'
- *
- * import { Portal } from '@cerberus/react'
- *
- * function SomeFeatureWithinSSRPage() {
- *   return (
- *     <Portal>
- *       <div>Portal Content outside of the React VDom tree</div>
- *     </Portal>
- *   )
- * }
- */
-export const Portal = ArkPortal

package/src/components/progress/index.ts

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

package/src/components/progress/primitives.ts

@@ -1,37 +0,0 @@
-import { type HTMLArkProps } from '@ark-ui/react/factory'
-import {
-  progressBar,
-  type ProgressBarVariantProps,
-} from 'styled-system/recipes'
-import {
-  cerberus,
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the ProgressBar component primitives.
- * @module @cerberus-design/react/components/progress-bar/primitives
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(progressBar)
-
-// Root
-
-export type ProgressBarRootProps = CerberusPrimitiveProps<
-  HTMLArkProps<'div'> & ProgressBarVariantProps
->
-export const ProgressBarRoot = withSlotRecipe(cerberus.div, 'root', {
-  defaultProps: {
-    'aria-valuemin': '0',
-    'aria-valuemax': '100',
-    role: 'progressbar',
-  },
-})
-
-// Bar
-
-export type ProgressBarBarProps = CerberusPrimitiveProps<
-  HTMLArkProps<'div'> & ProgressBarVariantProps
->
-export const ProgressBarBar = withSlotRecipe(cerberus.div, 'bar')

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

@@ -1,80 +0,0 @@
-import {
-  ProgressBarBar,
-  ProgressBarRoot,
-  type ProgressBarRootProps,
-} from './primitives'
-
-/**
- * This module contains the ProgressBar component.
- * @module
- */
-
-export type NonIndeterminateProgressBarProps = {
-  /**
-   * A unique identifier for the progress bar. Required for accessibility.
-   */
-  id: string
-  /**
-   * A description label for the progress bar. Required for accessibility.
-   */
-  label: string
-  /**
-   * The state of the progress bar.
-   */
-  indeterminate?: never
-  /**
-   * The current value of the progress bar.
-   */
-  now: number
-}
-export type IndeterminateProgressBarProps = {
-  /**
-   * A unique identifier for the progress bar. Required for accessibility.
-   */
-  id: string
-  /**
-   * A description label for the progress bar. Required for accessibility.
-   */
-  label: string
-  /**
-   * The state of the progress bar.
-   */
-  indeterminate?: true
-  /**
-   * The current value of the progress bar.
-   */
-  now?: never
-}
-export type ProgressBarProps = ProgressBarRootProps &
-  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)
-
-/**
- * The ProgressBar component is used to display the progress of a task.
- * @see https://cerberus.digitalu.design/react/progress-indicators
- * @example
- * ```tsx
- * <ProgressBar value={75} />
- * ```
- */
-export function ProgressBar(props: ProgressBarProps) {
-  const { indeterminate, now, label, ...nativeProps } = props
-
-  const nowClamped = Math.min(100, Math.max(0, now || 0))
-  const width = {
-    width: indeterminate ? '50%' : `${nowClamped}%`,
-  }
-
-  return (
-    <ProgressBarRoot
-      {...nativeProps}
-      aria-label={label}
-      aria-valuenow={indeterminate ? 0 : nowClamped}
-    >
-      <ProgressBarBar
-        {...(indeterminate && { 'data-state': 'indeterminate' })}
-        data-complete={nowClamped === 100}
-        style={width}
-      />
-    </ProgressBarRoot>
-  )
-}

package/src/components/radio/index.ts

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

package/src/components/radio/parts.ts

@@ -1,65 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  RadioGroupRoot,
-  RadioGroupLabel,
-  RadioGroupIndicator,
-  RadioGroupItem,
-  RadioGroupItemText,
-  RadioGroupItemControl,
-  RadioGroupItemHiddenInput,
-} from './primitives'
-
-/**
- * This module contains the parts of the Radio parts.
- * @module 'radio/parts'
- */
-
-interface RadioPartsValue {
-  /**
-   * The container of the field.
-   */
-  Root: ElementType
-  /**
-   * The label of the field.
-   */
-  Label: ElementType
-  /**
-   * The indicator that appears when a radio is checked.
-   */
-  Indicator: ElementType
-  /**
-   * An individual radio item of the field.
-   */
-  Item: ElementType
-  /**
-   * The text that labels a single radio of the field.
-   */
-  ItemText: ElementType
-  /**
-   * The visual radio control of the field.
-   */
-  ItemControl: ElementType
-  /**
-   * The native input for a radio item in the field.
-   */
-  ItemHiddenInput: ElementType
-}
-
-/**
- * An Object containing the parts of the Radio component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the RadioParts object and
- * the entire family of components vs. only what you use.
- */
-export const RadioParts: RadioPartsValue = {
-  Root: RadioGroupRoot,
-  Label: RadioGroupLabel,
-  Indicator: RadioGroupIndicator,
-  Item: RadioGroupItem,
-  ItemText: RadioGroupItemText,
-  ItemControl: RadioGroupItemControl,
-  ItemHiddenInput: RadioGroupItemHiddenInput,
-}