@cerberus-design/react 0.16.0 → 0.17.0

package/src/components/admonition/index.ts

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

package/src/components/admonition/match-avatar.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
+import { useRef, type ReactNode } from 'react'
+import { useCerberusContext } from '../../context/cerberus'
+import { Avatar } from '../avatar/avatar'
+
+/**
+ * This module provides a component for creating the admonition indicator.
+ * @module 'admonition/match-avatar'
+ */
+
+interface AvatarRefProps {
+  page: ReactNode
+  info: ReactNode
+  success: ReactNode
+  warning: ReactNode
+  danger: ReactNode
+}
+
+type MatchAvatarProps = AdmonitionVariantProps
+
+export function MatchAvatar(props: MatchAvatarProps) {
+  const { palette = 'page' } = props
+
+  const { icons } = useCerberusContext()
+  const {
+    infoNotification: InfoIcon,
+    successNotification: SuccessIcon,
+    warningNotification: WarningIcon,
+    dangerNotification: DangerIcon,
+  } = icons
+
+  // cache the el since the result is static and the component is client side
+  const elRef = useRef<AvatarRefProps>({
+    page: <Avatar gradient="charon-light" fallback={<InfoIcon />} size="sm" />,
+    info: (
+      <Avatar gradient="amphiaraus-dark" fallback={<InfoIcon />} size="sm" />
+    ),
+    success: (
+      <Avatar gradient="thanatos-dark" fallback={<SuccessIcon />} size="sm" />
+    ),
+    warning: (
+      <Avatar gradient="asphodel-light" fallback={<WarningIcon />} size="sm" />
+    ),
+    danger: (
+      <Avatar gradient="hades-light" fallback={<DangerIcon />} size="sm" />
+    ),
+  })
+
+  return <>{elRef.current[palette]}</>
+}

package/src/components/admonition/parts.ts

@@ -0,0 +1,53 @@
+import type { ElementType } from 'react'
+import {
+  AdmonitionContent,
+  AdmonitionDescription,
+  AdmonitionHeading,
+  AdmonitionIndicator,
+  AdmonitionRoot,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Admonition component.
+ * @module 'admonition/parts'
+ */
+
+interface AdmonitionPartsValue {
+  /**
+   * The context provider of the Admonition.
+   */
+  Root: ElementType
+  /**
+   * The indicator of the Admonition.
+   */
+  Indicator: ElementType
+  /**
+   * The content of the Admonition.
+   */
+  Content: ElementType
+  /**
+   * The heading of the Admonition.
+   */
+  Heading: ElementType
+  /**
+   * The description of the Admonition.
+   */
+  Description: 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 AdmonitionParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const AdmonitionParts: AdmonitionPartsValue = {
+  Root: AdmonitionRoot,
+  Indicator: AdmonitionIndicator,
+  Content: AdmonitionContent,
+  Heading: AdmonitionHeading,
+  Description: AdmonitionDescription,
+}

package/src/components/admonition/primitives.tsx

@@ -0,0 +1,73 @@
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  admonition,
+  type AdmonitionVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Admonition components.
+ * @module 'admonition/primitives'
+ */
+
+/**
+ * The `AdmonitionRoot` component is the container for the Admonition.
+ */
+export function AdmonitionRoot(
+  props: HTMLArkProps<'aside'> & AdmonitionVariantProps,
+) {
+  const { palette, usage, ...nativeProps } = props
+  const styles = admonition({ palette, usage })
+  return (
+    <ark.aside
+      {...nativeProps}
+      className={cx(styles.root, nativeProps.className)}
+      data-scope="admonition"
+      data-part="root"
+    />
+  )
+}
+
+/**
+ * The `AdmonitionIndicator` component is the indicator for the Admonition.
+ */
+export function AdmonitionIndicator(props: HTMLArkProps<'span'>) {
+  return <ark.span {...props} data-scope="admonition" data-part="indicator" />
+}
+
+/**
+ * The `AdmonitionContent` component is the content for the Admonition.
+ */
+export function AdmonitionContent(props: HTMLArkProps<'div'>) {
+  return <ark.div {...props} data-scope="admonition" data-part="content" />
+}
+
+/**
+ * The `AdmonitionHeading` component is the heading title for the Admonition.
+ */
+export function AdmonitionHeading(props: HTMLArkProps<'p'>) {
+  const styles = admonition()
+  return (
+    <ark.p
+      {...props}
+      className={cx(styles.heading, props.className)}
+      data-scope="admonition"
+      data-part="heading"
+    />
+  )
+}
+
+/**
+ * The `AdmonitionDescription` component is the description for the Admonition.
+ */
+export function AdmonitionDescription(props: HTMLArkProps<'p'>) {
+  const styles = admonition()
+  return (
+    <ark.p
+      {...props}
+      className={cx(styles.description, props.className)}
+      data-scope="admonition"
+      data-part="description"
+    />
+  )
+}

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,55 @@
+import type { AvatarRootProps } from '@ark-ui/react/avatar'
+import type { AvatarVariantProps } from '@cerberus/styled-system/recipes'
+import type { ReactNode } from 'react'
+import { splitProps } from '../../utils'
+import { Show } from '../Show'
+import { AvatarParts } from './parts'
+
+/**
+ * This module provides an abstraction of the Avatar primitives.
+ * @module 'avatar'
+ */
+
+export interface AvatarWithoutImage
+  extends AvatarRootProps,
+    AvatarVariantProps {
+  alt?: never
+  src?: never
+  fallback?: ReactNode
+}
+
+export interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {
+  alt: string
+  src: string
+  fallback?: ReactNode
+}
+
+/**
+ * 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: AvatarWithoutImage | AvatarWithImage) {
+  const [imgProps, { fallback, children }, rootProps] = splitProps(
+    props,
+    ['alt', 'src'],
+    ['fallback', 'children'],
+  )
+
+  return (
+    <AvatarParts.Root {...rootProps}>
+      <Show
+        when={Boolean(children)}
+        fallback={
+          <>
+            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>
+            <AvatarParts.Image {...imgProps} />
+          </>
+        }
+      >
+        {children}
+      </Show>
+    </AvatarParts.Root>
+  )
+}

package/src/components/avatar/index.ts

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

package/src/components/avatar/parts.ts

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

@@ -0,0 +1,53 @@
+import {
+  Avatar,
+  type AvatarFallbackProps,
+  type AvatarImageProps,
+  type AvatarRootProps,
+} from '@ark-ui/react/avatar'
+import {
+  avatar,
+  type AvatarVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+
+/**
+ * This module provides the primitive components for the Avatar component.
+ * @module 'avatar/primitives'
+ */
+
+/**
+ * The root component of the Avatar.
+ */
+export function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {
+  const { gradient, shape, size, ...rootProps } = props
+  const styles = avatar({ gradient, shape, size })
+  return (
+    <Avatar.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The image component of the Avatar.
+ */
+export function AvatarImage(props: AvatarImageProps) {
+  const styles = avatar()
+  return (
+    <Avatar.Image {...props} className={cx(styles.image, props.className)} />
+  )
+}
+
+/**
+ * The fallback component of the Avatar.
+ */
+export function AvatarFallback(props: AvatarFallbackProps) {
+  const styles = avatar()
+  return (
+    <Avatar.Fallback
+      {...props}
+      className={cx(styles.fallback, props.className)}
+    />
+  )
+}

package/src/components/button/button.tsx

@@ -1,7 +1,7 @@
 'use client'
 
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import {
-  type ButtonHTMLAttributes,
   type PropsWithChildren,
   createContext,
   useContext,
@@ -29,7 +29,7 @@ const ButtonContext = createContext<ButtonContextValue>({
   pending: false,
 })
 
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+export type ButtonProps = HTMLArkProps<'button'> &
   ButtonVariantProps & {
     pending?: boolean
   }
@@ -38,13 +38,13 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
  * A component that allows the user to perform actions
  * @see https://cerberus.digitalu.design/react/button
  */
-export function Button(props: ButtonProps): JSX.Element {
+export function Button(props: ButtonProps) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props
   const value = useMemo(() => ({ pending }), [pending])
 
   return (
     <ButtonContext.Provider value={value}>
-      <button
+      <ark.button
         {...nativeProps}
         disabled={pending || nativeProps.disabled}
         className={cx(

package/src/components/checkbox/checkbox.tsx

@@ -15,8 +15,8 @@ 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
+ * @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

package/src/components/combobox/combobox.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import type { ComboboxRootProps } from '@ark-ui/react/combobox'
+import type { ComboboxVariantProps } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import type { SelectCollectionItem } from '../select/select'
+import { type FieldInputProps } from '../field/index'
+import { Portal } from '../Portal'
+import { Show } from '../Show'
+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?: FieldInputProps['startIcon']
+}
+
+export function Combobox(props: ComboboxProps) {
+  const { label, children, startIcon, ...rootProps } = props
+
+  const { icons } = useCerberusContext()
+  const { selectArrow: SelectArrow, close: CloseIcon } = icons
+
+  const hasStartIcon = Boolean(startIcon)
+
+  return (
+    <ComboboxParts.Root {...rootProps}>
+      <Show when={Boolean(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>
+
+      <Portal>
+        <ComboboxParts.Positioner>
+          <ComboboxParts.Content size={rootProps.size}>
+            {children}
+          </ComboboxParts.Content>
+        </ComboboxParts.Positioner>
+      </Portal>
+    </ComboboxParts.Root>
+  )
+}

package/src/components/combobox/index.ts

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

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

@@ -0,0 +1,30 @@
+'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>
+  )
+}

package/src/components/combobox/parts.ts

@@ -0,0 +1,101 @@
+import type { ElementType } from 'react'
+import {
+  ComboboxClearTrigger,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxLabel,
+  ComboboxPositioner,
+  ComboboxRoot,
+  ComboboxTrigger,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Combobox parts.
+ * @module 'combobox/parts'
+ */
+
+interface ComboboxPartsValue {
+  /**
+   * The context provider for the Select component.
+   */
+  Root: ElementType
+  /**
+   * The label that appears above the select input.
+   */
+  Label: ElementType
+  /**
+   * The control that wraps the select trigger.
+   */
+  Control: ElementType
+  /**
+   * The filterable input of the combobox.
+   */
+  Input: ElementType
+  /**
+   * The trigger that opens the dropdown.
+   */
+  Trigger: ElementType
+  /**
+   * The trigger to clear the select input.
+   */
+  ClearTrigger: ElementType
+  /**
+   * The positioner that wraps the content.
+   */
+  Positioner: ElementType
+  /**
+   * The content of the select component.
+   */
+  Content: ElementType
+  /**
+   * A group of items in the select component.
+   */
+  ItemGroup: ElementType
+  /**
+   * The label for a group of items in the select component.
+   */
+  ItemGroupLabel: ElementType
+  /**
+   * An individual item in the select component.
+   */
+  Item: ElementType
+  /**
+   * The text that labels a single radio of the field.
+   */
+  ItemText: ElementType
+  /**
+   * The indicator that appears when the item has been selected.
+   */
+  ItemIndicator: 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 ComboboxParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const ComboboxParts: ComboboxPartsValue = {
+  Root: ComboboxRoot,
+  Label: ComboboxLabel,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Trigger: ComboboxTrigger,
+  ClearTrigger: ComboboxClearTrigger,
+  Positioner: ComboboxPositioner,
+  Content: ComboboxContent,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  Item: ComboboxItem,
+  ItemText: ComboboxItemText,
+  ItemIndicator: ComboboxItemIndicator,
+}