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

package/src/components/notifications/parts.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  NotificationActionTrigger,
-  NotificationCloseTrigger,
-  NotificationDescription,
-  NotificationHeading,
-  NotificationRoot,
-} from './primitives'
-
-/**
- * This module contains the parts of the Notification parts.
- * @module 'notification/parts'
- */
-
-interface NotificationPartsValue {
-  /**
-   * The context provider of the notification.
-   */
-  Root: ElementType
-  /**
-   * The title heading of the notification.
-   */
-  Heading: ElementType
-  /**
-   * The description of the notification.
-   */
-  Description: ElementType
-  /**
-   * The close button of the notification.
-   */
-  CloseTrigger: ElementType
-  /**
-   * The action trigger of the notification.
-   */
-  ActionTrigger: ElementType
-}
-
-/**
- * An Object containing the parts of the Notification components. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the NotificationParts object and
- * the entire family of components vs. only what you use.
- */
-export const NotificationParts: NotificationPartsValue = {
-  Root: NotificationRoot,
-  Heading: NotificationHeading,
-  Description: NotificationDescription,
-  CloseTrigger: NotificationCloseTrigger,
-  ActionTrigger: NotificationActionTrigger,
-}

package/src/components/notifications/primitives.tsx

@@ -1,66 +0,0 @@
-import {
-  Toast,
-  Toaster,
-  type ToastActionTriggerProps,
-  type ToastCloseTriggerProps,
-  type ToastDescriptionProps,
-  type ToasterProps,
-  type ToastRootProps,
-  type ToastTitleProps,
-} from '@ark-ui/react/toast'
-import { toast, type ToastVariantProps } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the primitives of the Notification component.
- * @module 'notification/primitives'
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(toast)
-
-// Toaster
-
-export type NotificationProviderProps = ToasterProps
-export const NotificationProvider = Toaster
-
-// Root
-
-export type NotificationRootProps = CerberusPrimitiveProps<
-  ToastRootProps & ToastVariantProps
->
-export const NotificationRoot = withSlotRecipe(Toast.Root, 'root')
-
-// Heading
-
-export type NotificationHeadingProps = CerberusPrimitiveProps<ToastTitleProps>
-export const NotificationHeading = withSlotRecipe(Toast.Title, 'title')
-
-// Description
-
-export type NotificationDescriptionProps =
-  CerberusPrimitiveProps<ToastDescriptionProps>
-export const NotificationDescription = withSlotRecipe(
-  Toast.Description,
-  'description',
-)
-
-// Close Trigger
-
-export type NotificationCloseTriggerProps =
-  CerberusPrimitiveProps<ToastCloseTriggerProps>
-export const NotificationCloseTrigger = withSlotRecipe(
-  Toast.CloseTrigger,
-  'closeTrigger',
-)
-
-// Action Trigger
-
-export type NotificationActionTriggerProps =
-  CerberusPrimitiveProps<ToastActionTriggerProps>
-export const NotificationActionTrigger = withSlotRecipe(
-  Toast.ActionTrigger,
-  'actionTrigger',
-)

package/src/components/notifications/toaster.ts

@@ -1,13 +0,0 @@
-'use client'
-
-import { createToaster, type CreateToasterReturn } from '@ark-ui/react/toast'
-
-export const toaster: CreateToasterReturn = createToaster({
-  gap: 16,
-  overlap: true,
-  placement: 'top-end',
-})
-
-// Re-exporting for easier customization
-
-export { createToaster, Toaster } from '@ark-ui/react/toast'

package/src/components/notifications/types.ts

@@ -1,44 +0,0 @@
-import type { CreateToasterReturn } from '@ark-ui/react/toast'
-import type { ReactNode } from 'react'
-
-export type NotifyOptionsType =
-  | 'info'
-  | 'info-subtle'
-  | 'success'
-  | 'success-subtle'
-  | 'warning'
-  | 'warning-subtle'
-  | 'error'
-  | 'error-subtle'
-  | 'loading'
-  | 'loading-subtle'
-
-export interface NotifyOptions {
-  /**
-   * The palette of the notification.
-   * @default 'info'
-   */
-  palette?: NotifyOptionsType
-  /**
-   * The heading of the notification.
-   */
-  heading: string
-  /**
-   * The description of the notification.
-   */
-  description?: ReactNode
-  /**
-   * The action to take when the notification is closed
-   */
-  action?: {
-    label: string
-    onClick: () => void
-  }
-}
-
-export type UseNotificationCenterReturn = CreateToasterReturn & {
-  /**
-   * @deprecated use `create` instead
-   */
-  notify: (options: NotifyOptions) => void
-}

package/src/components/number-input/decrement-trigger.tsx

@@ -1,16 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { NumberInputParts } from './parts'
-import type { NumberInputDecrementTriggerProps } from './primitives'
-
-export function DecrementTrigger(props: NumberInputDecrementTriggerProps) {
-  const { icons } = useCerberusContext()
-  const { decrement: ChevronDown } = icons
-
-  return (
-    <NumberInputParts.DecrementTrigger {...props}>
-      <ChevronDown />
-    </NumberInputParts.DecrementTrigger>
-  )
-}

package/src/components/number-input/increment-trigger.tsx

@@ -1,16 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { NumberInputParts } from './parts'
-import type { NumberInputIncrementTriggerProps } from './primitives'
-
-export function IncrementTrigger(props: NumberInputIncrementTriggerProps) {
-  const { icons } = useCerberusContext()
-  const { increment: ChevronUp } = icons
-
-  return (
-    <NumberInputParts.IncrementTrigger {...props}>
-      <ChevronUp />
-    </NumberInputParts.IncrementTrigger>
-  )
-}

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

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

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

@@ -1,33 +0,0 @@
-import { Show } from '../show/show'
-import { NumberInputParts } from './parts'
-import type { NumberInputRootProps } from './primitives'
-import { DecrementTrigger } from './decrement-trigger'
-import { IncrementTrigger } from './increment-trigger'
-
-interface NumberInputElProps extends NumberInputRootProps {
-  /**
-   * Whether to show a scrubber for fine-tuning the value.
-   */
-  scrubber?: boolean
-}
-
-/**
- * An input for displaying a numeric value.
- * @definition [Cerberus Docs](https://cerberus.digitalu.design/docs/components/number-input)
- */
-export function NumberInput(props: NumberInputElProps) {
-  const { scrubber, ...rootProps } = props
-  return (
-    <NumberInputParts.Root {...rootProps}>
-      <Show when={scrubber}>
-        <NumberInputParts.Scrubber />
-      </Show>
-
-      <NumberInputParts.Control>
-        <NumberInputParts.Input />
-        <IncrementTrigger />
-        <DecrementTrigger />
-      </NumberInputParts.Control>
-    </NumberInputParts.Root>
-  )
-}

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

@@ -1,65 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  NumberInputControl,
-  NumberInputDecrementTrigger,
-  NumberInputIncrementTrigger,
-  NumberInputInput,
-  NumberInputLabel,
-  NumberInputRoot,
-  NumberInputScrubber,
-} from './primitives'
-
-/**
- * This module contains the parts of the NumberInput component.
- * @module 'number-input/parts'
- */
-
-interface NumberInputPartsValue {
-  /**
-   * The context provider of the number input.
-   */
-  Root: ElementType
-  /**
-   * The label of the number input.
-   */
-  Label: ElementType
-  /**
-   * The input element of the number input.
-   */
-  Input: ElementType
-  /**
-   * The control container for increment and decrement buttons.
-   */
-  Control: ElementType
-  /**
-   * The button to decrement the value.
-   */
-  DecrementTrigger: ElementType
-  /**
-   * The button to increment the value.
-   */
-  IncrementTrigger: ElementType
-  /**
-   * The scrubber element for pointer-based value adjustment.
-   */
-  Scrubber: ElementType
-}
-
-/**
- * An Object containing the parts of the NumberInput component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the NumberInputParts object and
- * the entire family of components vs. only what you use.
- */
-export const NumberInputParts: NumberInputPartsValue = {
-  Root: NumberInputRoot,
-  Label: NumberInputLabel,
-  Input: NumberInputInput,
-  Control: NumberInputControl,
-  DecrementTrigger: NumberInputDecrementTrigger,
-  IncrementTrigger: NumberInputIncrementTrigger,
-  Scrubber: NumberInputScrubber,
-}

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

@@ -1,74 +0,0 @@
-import {
-  NumberInput,
-  type NumberInputControlProps as ArkNumberInputControlProps,
-  type NumberInputDecrementTriggerProps as ArkNumberInputDecrementTriggerProps,
-  type NumberInputIncrementTriggerProps as ArkNumberInputIncrementTriggerProps,
-  type NumberInputInputProps as ArkNumberInputInputProps,
-  type NumberInputLabelProps as ArkNumberInputLabelProps,
-  type NumberInputRootProps as ArkNumberInputRootProps,
-  type NumberInputScrubberProps as ArkNumberInputScrubberProps,
-} from '@ark-ui/react/number-input'
-import {
-  numberInput,
-  type NumberInputVariantProps,
-} from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains all the primitives of the NumberInput component.
- * @module 'number-input'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(numberInput)
-
-// Root
-
-export type NumberInputRootProps = CerberusPrimitiveProps<
-  ArkNumberInputRootProps & NumberInputVariantProps
->
-export const NumberInputRoot = withSlotRecipe(NumberInput.Root, 'root')
-
-// Label
-
-export type NumberInputLabelProps =
-  CerberusPrimitiveProps<ArkNumberInputLabelProps>
-export const NumberInputLabel = withNoRecipe(NumberInput.Label)
-
-// Input
-
-export type NumberInputInputProps =
-  CerberusPrimitiveProps<ArkNumberInputInputProps>
-export const NumberInputInput = withSlotRecipe(NumberInput.Input, 'input')
-
-// Control
-
-export type NumberInputControlProps =
-  CerberusPrimitiveProps<ArkNumberInputControlProps>
-export const NumberInputControl = withSlotRecipe(NumberInput.Control, 'control')
-
-// DecrementTrigger
-
-export type NumberInputDecrementTriggerProps =
-  CerberusPrimitiveProps<ArkNumberInputDecrementTriggerProps>
-export const NumberInputDecrementTrigger = withSlotRecipe(
-  NumberInput.DecrementTrigger,
-  'decrementTrigger',
-)
-
-// IncrementTrigger
-
-export type NumberInputIncrementTriggerProps =
-  CerberusPrimitiveProps<ArkNumberInputIncrementTriggerProps>
-export const NumberInputIncrementTrigger = withSlotRecipe(
-  NumberInput.IncrementTrigger,
-  'incrementTrigger',
-)
-
-// Scrubber
-
-export type NumberInputScrubberProps =
-  CerberusPrimitiveProps<ArkNumberInputScrubberProps>
-export const NumberInputScrubber = withNoRecipe(NumberInput.Scrubber)

package/src/components/pagination/compact.tsx

@@ -1,25 +0,0 @@
-import { Group } from '../group/index'
-import { Text } from '../text/index'
-import { PaginationProps } from './pagination'
-import { PaginationContextDetails } from './primitives'
-import { NextTrigger, PrevTrigger } from './triggers'
-
-interface CompactTextProps extends PaginationContextDetails {
-  layout: PaginationProps['layout']
-}
-
-export function CompactText(props: CompactTextProps) {
-  const { layout, ...pagination } = props
-
-  return (
-    <Group layout={layout}>
-      <PrevTrigger layout={layout} />
-
-      <Text alignSelf="center" textAlign="center" textStyle="label-sm">
-        {pagination.page} of {pagination.totalPages}
-      </Text>
-
-      <NextTrigger layout={layout} />
-    </Group>
-  )
-}

package/src/components/pagination/index.ts

@@ -1,6 +0,0 @@
-export * from './pagination'
-export * from './triggers'
-export * from './compact'
-export * from './item-list'
-export * from './primitives'
-export * from './parts'

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