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

package/src/components/text/text.tsx

@@ -1,55 +0,0 @@
-import { cerberus, CerberusProps } from '../../system/index'
-
-/**
- * This module exports a component for rendering text utilizing the styled-system JSX utility.
- * @module @cerberus/react/Text
- */
-
-export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-export type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'
-
-// For some reason we have to use the HTMLParagraphElement type here
-// or else TS will fail for non-style props like 'id' or 'className'
-export interface TextProps extends CerberusProps<'p'> {
-  /**
-   * The element to render as. Defaults to 'p'.
-   */
-  as?: TextElements | Headings
-}
-
-/**
- * A component for rendering text utilizing the styled-system JSX utility.
- * @definition [Text docs](https://cerberus.digitalu.design/react/text)
- * @example
- * ```tsx
- * <Text as="h1" color="page.text.100" textStyle={{
- *   base: 'heading-md',
- *   md: 'heading-lg',
- * }}>
- *  Hello, world!
- * </Text>
- */
-export function Text(props: TextProps) {
-  const { as = 'p', ...elProps } = props
-
-  const cache = {
-    h1: cerberus.h1,
-    h2: cerberus.h2,
-    h3: cerberus.h3,
-    h4: cerberus.h4,
-    h5: cerberus.h5,
-    h6: cerberus.h6,
-    strong: cerberus.strong,
-    em: cerberus.em,
-    small: cerberus.small,
-    span: cerberus.span,
-    p: cerberus.p,
-  }
-
-  if (as in cache) {
-    const Component = cache[as as keyof typeof cache]
-    return <Component {...elProps} />
-  }
-
-  return <cerberus.p {...elProps} />
-}

package/src/components/theme/index.ts

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

package/src/components/theme/theme.tsx

@@ -1,34 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import type { ColorModes, CustomThemes } from '../../context/theme'
-import { cerberus, type CerberusPrimitiveProps } from '../../system'
-
-export interface ThemeProps<T extends string> {
-  /**
-   * The color mode to apply to the theme.
-   * @default 'light'
-   */
-  mode?: ColorModes
-  /**
-   * The theme to apply to the component.
-   * @default 'cerberus'
-   */
-  theme?: CustomThemes<T>
-}
-
-export function Theme<T extends string>(
-  props: PropsWithChildren<CerberusPrimitiveProps<ThemeProps<T>>>,
-) {
-  const { mode, theme, ...nativeProps } = props
-  const colorMode = mode || 'light'
-  const themeName = theme || 'cerberus'
-
-  return (
-    <cerberus.div
-      {...nativeProps}
-      data-panda-theme={themeName}
-      data-color-mode={colorMode}
-    >
-      {props.children}
-    </cerberus.div>
-  )
-}

package/src/components/toggle/index.ts

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

package/src/components/toggle/parts.ts

@@ -1,32 +0,0 @@
-import type { ElementType } from 'react'
-import { ToggleRoot, ToggleIndicator } from './primitives'
-
-/**
- * This module contains the parts of the Toggle parts.
- * @module 'toggle/parts'
- */
-
-interface TogglePartsValue {
-  /**
-   * The container of the toggle.
-   */
-  Root: ElementType
-  /**
-   * The indicator that appears when a toggle is pressed.
-   */
-  Indicator: 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 ToggleParts: TogglePartsValue = {
-  Root: ToggleRoot,
-  Indicator: ToggleIndicator,
-}

package/src/components/toggle/primitives.tsx

@@ -1,27 +0,0 @@
-import {
-  Toggle,
-  type ToggleIndicatorProps as ArkToggleIndicatorProps,
-  type ToggleRootProps as ArkToggleRootProps,
-} from '@ark-ui/react/toggle'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module provides the Toggle primitives.
- * @module 'react/toggle'
- */
-
-const { withNoRecipe } = createCerberusPrimitive()
-
-// Root
-
-export type ToggleRootProps = CerberusPrimitiveProps<ArkToggleRootProps>
-export const ToggleRoot = withNoRecipe(Toggle.Root)
-
-// Indicator
-
-export type ToggleIndicatorProps =
-  CerberusPrimitiveProps<ArkToggleIndicatorProps>
-export const ToggleIndicator = withNoRecipe(Toggle.Indicator)

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/parts.ts

@@ -1,59 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  TooltipRoot,
-  TooltipTrigger,
-  TooltipPositioner,
-  TooltipContent,
-  TooltipArrow,
-  TooltipArrowTip,
-} from './primitives'
-
-/**
- * This module contains the parts of the Tooltip component.
- * @module 'tooltip/parts'
- */
-
-interface TooltipPartsValue {
-  /**
-   * The context provider of the tooltip.
-   */
-  Root: ElementType
-  /**
-   * The trigger that of the tooltip.
-   */
-  Trigger: ElementType
-  /**
-   * The positioner of the tooltip.
-   */
-  Positioner: ElementType
-  /**
-   * The content of the tooltip.
-   */
-  Content: ElementType
-  /**
-   * The arrow of the tooltip.
-   */
-  Arrow: ElementType
-  /**
-   * The arrow tip of the tooltip.
-   */
-  ArrowTip: ElementType
-}
-
-/**
- * An Object containing the parts of the Tooltip component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the TooltipParts object and
- * the entire family of components vs. only what you use.
- */
-export const TooltipParts: TooltipPartsValue = {
-  Root: TooltipRoot,
-  Trigger: TooltipTrigger,
-  Positioner: TooltipPositioner,
-  Content: TooltipContent,
-  Arrow: TooltipArrow,
-  ArrowTip: TooltipArrowTip,
-}

package/src/components/tooltip/primitives.ts

@@ -1,56 +0,0 @@
-import {
-  Tooltip,
-  type TooltipRootProps as ArkTooltipRootProps,
-  type TooltipTriggerProps as ArkTooltipTriggerProps,
-  type TooltipPositionerProps as ArkTooltipPositionerProps,
-  type TooltipContentProps as ArkTooltipContentProps,
-  type TooltipArrowProps as ArkTooltipArrowProps,
-  type TooltipArrowTipProps as ArkTooltipArrowTipProps,
-} from '@ark-ui/react/tooltip'
-import { tooltip } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the Tooltip primitive components.
- * @module TooltipPrimitives
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(tooltip)
-
-// Root
-
-export type TooltipRootProps = CerberusPrimitiveProps<ArkTooltipRootProps>
-export const TooltipRoot = withSlotRecipe(Tooltip.Root, 'root')
-
-// Trigger
-
-export type TooltipTriggerProps = CerberusPrimitiveProps<ArkTooltipTriggerProps>
-export const TooltipTrigger = withSlotRecipe(Tooltip.Trigger, 'trigger')
-
-// Positioner
-
-export type TooltipPositionerProps =
-  CerberusPrimitiveProps<ArkTooltipPositionerProps>
-export const TooltipPositioner = withSlotRecipe(
-  Tooltip.Positioner,
-  'positioner',
-)
-
-// Content
-
-export type TooltipContentProps = CerberusPrimitiveProps<ArkTooltipContentProps>
-export const TooltipContent = withSlotRecipe(Tooltip.Content, 'content')
-
-// Arrow
-
-export type TooltipArrowProps = CerberusPrimitiveProps<ArkTooltipArrowProps>
-export const TooltipArrow = withSlotRecipe(Tooltip.Arrow, 'arrow')
-
-// ArrowTip
-
-export type TooltipArrowTipProps =
-  CerberusPrimitiveProps<ArkTooltipArrowTipProps>
-export const TooltipArrowTip = withSlotRecipe(Tooltip.ArrowTip, 'arrowTip')

package/src/components/tooltip/tooltip.tsx

@@ -1,46 +0,0 @@
-import type { ReactNode } from 'react'
-import { TooltipParts } from './parts'
-import type { TooltipRootProps } from './primitives'
-
-/**
- * This module contains the Tooltip component.
- * @module Tooltip
- */
-
-export interface TooltipProps extends Omit<TooltipRootProps, 'content'> {
-  /**
-   * The text content to display in the tooltip.
-   */
-  content: ReactNode
-}
-
-/**
- * The Tooltip component is used to provide additional information about an element when it is hovered over.
- * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)
- * @example
- * ```tsx
- * <Tooltip content="This is a tooltip">
- *   <Information />
- * </Tooltip>
- */
-export function Tooltip(props: TooltipProps) {
-  const { content, children, ...rootProps } = props
-  const position = {
-    placement: props.positioning || 'top',
-  }
-
-  return (
-    <TooltipParts.Root openDelay={400} positioning={position} {...rootProps}>
-      <TooltipParts.Trigger asChild>{children}</TooltipParts.Trigger>
-
-      <TooltipParts.Positioner>
-        <TooltipParts.Content>
-          <TooltipParts.Arrow>
-            <TooltipParts.ArrowTip />
-          </TooltipParts.Arrow>
-          {content}
-        </TooltipParts.Content>
-      </TooltipParts.Positioner>
-    </TooltipParts.Root>
-  )
-}

package/src/config/defineIcons.ts

@@ -1,24 +0,0 @@
-import { defaultIcons } from './icons/default'
-import type { DefinedIcons, IconType } from './types'
-
-/**
- * Defines the icons that will be used in Cerberus React components via the
- * CerberusProvider.
- * @param icons The icons that will be used in Cerberus React components.
- * @returns Icons object compatible with the CerberusProvider SystemConfig.
- * @example
- * ```tsx
- * const icons = defineIcons({
- *  accordionIndicator: MyAccordionIndicatorIcon,
- *  ...
- * })
- * ```
- */
-export function defineIcons<T extends IconType>(
-  icons: DefinedIcons<T>,
-): Required<DefinedIcons<T>> {
-  return {
-    ...defaultIcons,
-    ...icons,
-  } as Required<DefinedIcons<T>>
-}

package/src/config/icons/checkbox.icons.tsx

@@ -1,98 +0,0 @@
-/**
- * This module contains substitute icons for the Checkbox component.
- * @module
- */
-
-/**
- * Checkmark icon for Checkbox component
- */
-export function CheckmarkIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      role="img"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="currentColor"
-        d="M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
-      />
-    </svg>
-  )
-}
-
-/**
- * Indeterminate icon for Checkbox component
- */
-export function IndeterminateIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path fill="currentColor" d="M4 11h16v2.667H4z" />
-    </svg>
-  )
-}
-
-/**
- * Animated checkmark icon for Clipboard.Indicator component
- */
-export function AnimatedCheckmarkIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeDasharray={24}
-        strokeDashoffset={24}
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M5 11l6 6l10 -10"
-      >
-        <animate
-          fill="freeze"
-          attributeName="stroke-dashoffset"
-          dur="0.28s"
-          values="24;0"
-        ></animate>
-      </path>
-    </svg>
-  )
-}
-
-/**
- * Copy icon for Clipboard.Indicator component
- */
-export function CopyIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      role="img"
-      viewBox="0 0 32 32"
-    >
-      <title>copy</title>
-      <path
-        d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"
-        fill="currentColor"
-      />
-      <path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor" />
-      <path
-        fill="none"
-        d="M0 0h32v32H0z"
-        data-name="&lt;Transparent Rectangle&gt;"
-      />
-    </svg>
-  )
-}

package/src/config/icons/default.ts

@@ -1,69 +0,0 @@
-import {
-  Calendar,
-  CaretDown,
-  Checkmark,
-  CheckmarkOutline,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  Close,
-  CloudUpload,
-  Information,
-  OverflowMenuVertical,
-  Restart,
-  TrashCan,
-  UserFilled,
-  Warning,
-  WarningAlt,
-  WarningFilled,
-} from '@carbon/icons-react'
-import { AnimatingUploadIcon } from '../../components/AnimatingUploadIcon'
-import { DefinedIcons } from '../types'
-import { CheckmarkIcon, IndeterminateIcon } from './checkbox.icons'
-import {
-  PinLeftFilledIcon,
-  PinLeftIcon,
-  PinRightFilledIcon,
-  PinRightIcon,
-} from './pinned.icons'
-import { SortAscIcon, SortDescIcon } from './sort.icons'
-
-/**
- * Fallback icons when there is no custom set provided by the user.
- */
-export const defaultIcons: Required<DefinedIcons> = {
-  accordionIndicator: ChevronDown,
-  avatar: UserFilled,
-  calendar: Calendar,
-  calendarPrev: ChevronLeft,
-  calendarNext: ChevronRight,
-  caretDown: CaretDown,
-  checkbox: CheckmarkIcon,
-  close: Close,
-  confirmModal: Information,
-  dangerNotification: WarningFilled,
-  decrement: ChevronDown,
-  delete: TrashCan,
-  fileUploader: AnimatingUploadIcon,
-  increment: ChevronUp,
-  indeterminate: IndeterminateIcon,
-  infoNotification: Information,
-  invalid: WarningFilled,
-  invalidAlt: Warning,
-  moreVertical: OverflowMenuVertical,
-  pinLeft: PinLeftIcon,
-  pinLeftFilled: PinLeftFilledIcon,
-  pinRight: PinRightIcon,
-  pinRightFilled: PinRightFilledIcon,
-  promptModal: Information,
-  redo: Restart,
-  selectArrow: ChevronDown,
-  selectChecked: Checkmark,
-  sortAsc: SortAscIcon,
-  sortDesc: SortDescIcon,
-  successNotification: CheckmarkOutline,
-  toggleChecked: Checkmark,
-  waitingFileUploader: CloudUpload,
-  warningNotification: WarningAlt,
-}

package/src/config/icons/pinned.icons.tsx

@@ -1,31 +0,0 @@
-import { CarbonIconProps, Pin, PinFilled } from '@carbon/icons-react'
-import { PropsWithChildren } from 'react'
-import { Box } from 'styled-system/jsx'
-
-export function PinLeftIcon(props: CarbonIconProps) {
-  return <Pin {...props} />
-}
-
-export function PinLeftFilledIcon(props: CarbonIconProps) {
-  return <PinFilled {...props} />
-}
-
-export function PinRightIcon(props: CarbonIconProps) {
-  return (
-    <FlippedContainer>
-      <Pin {...props} />
-    </FlippedContainer>
-  )
-}
-
-export function PinRightFilledIcon(props: CarbonIconProps) {
-  return (
-    <FlippedContainer>
-      <PinFilled {...props} />
-    </FlippedContainer>
-  )
-}
-
-function FlippedContainer(props: PropsWithChildren) {
-  return <Box transform="scaleX(-1)" {...props} />
-}

package/src/config/icons/sort.icons.tsx

@@ -1,19 +0,0 @@
-import { CarbonIconProps, SortAscending } from '@carbon/icons-react'
-import { PropsWithChildren } from 'react'
-import { Box } from 'styled-system/jsx'
-
-export function SortAscIcon(props: CarbonIconProps) {
-  return <SortAscending {...props} />
-}
-
-export function SortDescIcon(props: CarbonIconProps) {
-  return (
-    <FlippedContainer>
-      <SortAscending {...props} />
-    </FlippedContainer>
-  )
-}
-
-function FlippedContainer(props: PropsWithChildren) {
-  return <Box transform="rotate(180deg)" {...props} />
-}

package/src/config/index.ts

@@ -1,41 +0,0 @@
-import { defaultIcons } from './icons/default'
-import type { SystemConfig } from './types'
-
-/**
- * Create a system configuration object to be used on the CerberusProvider.
- * @param options The system configuration options you want to customize.
- * @returns A CerberusProvider-compatible system configuration object.
- * @example
- * ```tsx
- * const icons = defineIcons({
- *  accordionIndicator: MyAccordionIndicatorIcon,
- *  ...
- * })
- * const config = makeSystemConfig({
- *   icons,
- * })
- *
- * // In your app
- * <CerberusProvider config={config}>
- *  <App />
- * </CerberusProvider>
- * ```
- */
-export function makeSystemConfig(options?: SystemConfig): SystemConfig {
-  if (!options) {
-    return {
-      icons: defaultIcons,
-    }
-  }
-
-  return {
-    ...options,
-    icons: {
-      ...defaultIcons,
-      ...options.icons,
-    },
-  }
-}
-
-export * from './defineIcons'
-export * from './types'

package/src/config/types.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-
-/**
- * This module contains the types for the Cerberus React configuration.
- * @module config.types
- */
-
-export interface SystemConfig {
-  /**
-   * The icons that will be used in Cerberus React components.
-   */
-  icons: Required<DefinedIcons>
-}
-
-export interface DefinedIcons<T extends IconType = IconType> {
-  accordionIndicator?: T
-  avatar?: T
-  calendar?: T
-  calendarPrev?: T
-  calendarNext?: T
-  caretDown?: T
-  checkbox?: T
-  close?: T
-  confirmModal?: T
-  decrement?: T
-  delete?: T
-  dangerNotification?: T
-  fileUploader?: T
-  indeterminate?: T
-  increment?: T
-  infoNotification?: T
-  invalid?: T
-  invalidAlt?: T
-  moreVertical?: T
-  pinLeft?: T
-  pinLeftFilled?: T
-  pinRight?: T
-  pinRightFilled?: T
-  promptModal?: T
-  redo?: T
-  selectArrow?: T
-  selectChecked?: T
-  sortAsc?: T
-  sortDesc?: T
-  successNotification?: T
-  toggleChecked?: T
-  waitingFileUploader?: T
-  warningNotification?: T
-}
-
-// types
-
-export type IconType = ElementType