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

package/src/components/select/select.tsx

@@ -1,110 +0,0 @@
-'use client'
-
-import { HStack } from 'styled-system/jsx'
-import { useCerberusContext } from '../../context/cerberus'
-import { splitProps } from '../../utils/index'
-import { Show } from '../show/index'
-import { SelectParts } from './parts'
-import type { SelectRootProps } from './primitives'
-
-/**
- * This module contains the Select components.
- * @module 'react/select'
- */
-
-export interface SelectCollectionItem {
-  /**
-   * What is displayed in the dropdown list.
-   */
-  label: string
-  /**
-   * The value of the selected item used in the form.
-   */
-  value: string
-  /**
-   * If the item is disabled.
-   */
-  disabled?: boolean
-}
-
-export interface SelectCollection {
-  /**
-   * The items to be displayed in the dropdown list.
-   */
-  items: SelectCollectionItem[]
-}
-
-export interface SelectProps extends Omit<SelectRootProps, 'container'> {
-  /**
-   * The placeholder text when no option is selected.
-   */
-  placeholder?: string
-}
-
-/**
- * The Select component is a dropdown list that allows users to select an
- * option from a list.
- * @definition [Select docs](https://cerberus.digitalu.design/react/select)
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
- * @example
- * ```tsx
- * import { Select, Option, createListCollection } from '@cerberus-design/react'
- *
- * export function SelectBasicPreview() {
- *  const collection = createListCollection({
- *   items: [
- *    { label: 'Hades', value: 'hades' },
- *    { label: 'Persephone', value: 'persephone' },
- *    { label: 'Zeus', value: 'zeus', disabled: true },
- *   ]
- *  })
- *
- *  return (
- *   <Select
- *    collection={collection}
- *    label="Select Relative"
- *    placeholder="Choose option"
- *   >
- *   {collection.items.map((item) => (
- *    <Option key={item.value} item={item} />
- *   ))}
- *  </Select>
- *  )
- * }
- */
-export function Select(props: SelectProps) {
-  const [{ collection, placeholder }, rootProps] = splitProps(props, [
-    'collection',
-    'placeholder',
-  ])
-
-  const { icons } = useCerberusContext()
-  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
-
-  return (
-    <SelectParts.Root collection={collection} {...rootProps}>
-      <SelectParts.Control>
-        <SelectParts.Trigger>
-          <SelectParts.ValueText placeholder={placeholder} />
-
-          <HStack>
-            <Show when={props.invalid}>
-              <InvalidIcon data-part="invalid-icon" />
-            </Show>
-            <SelectParts.Indicator>
-              <SelectArrow />
-            </SelectParts.Indicator>
-          </HStack>
-        </SelectParts.Trigger>
-      </SelectParts.Control>
-
-      <SelectParts.Positioner>
-        <SelectParts.Content size={rootProps.size}>
-          {props.children}
-        </SelectParts.Content>
-      </SelectParts.Positioner>
-
-      <SelectParts.HiddenSelect />
-    </SelectParts.Root>
-  )
-}

package/src/components/show/index.ts

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

package/src/components/show/show.tsx

@@ -1,48 +0,0 @@
-import { type ReactNode } from 'react'
-
-/**
- * This module contains the Show component.
- * @module
- */
-
-export interface ShowProps<T> {
-  /**
-   * The children to render when the condition is true.
-   * This can be a ReactNode or a function that returns a ReactNode. Passing a
-   * function will lazy render the children only when needed.
-   */
-  children: ReactNode | (() => ReactNode)
-  /**
-   * The condition to render memoized children or the fallback content.
-   */
-  when: T | boolean | null | undefined
-  /**
-   * The children to render when the condition is false.
-   */
-  fallback?: ReactNode
-}
-
-/**
- * Conditionally render a memoized version of the children or optional fallback
- * content.
- * @see https://cerberus.digitalu.design/react/show
- * @example
- * ```tsx
- * <Show when={isLoggedIn} fallback={<Navigate to="/login" />}>
- *   <Dashboard />
- * </Show>
- */
-export function Show<T>(props: ShowProps<T>) {
-  const { when, children, fallback } = props
-
-  if (when) {
-    if (typeof children === 'function') {
-      return <>{children()}</>
-    }
-    return <>{children}</>
-  }
-
-  if (fallback) return <>{fallback}</>
-
-  return null
-}

package/src/components/spinner/index.ts

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

package/src/components/spinner/spinner.tsx

@@ -1,81 +0,0 @@
-/**
- * This module contains the Spinner component.
- * @module
- */
-
-export interface SpinnerProps {
-  /**
-   * The size of the spinner
-   */
-  size?: number | string
-}
-
-/**
- * The Spinner component is used to display a loading indicator. Typically used
- * in buttons, modals, and other components that require a loading state.
- * @see https://cerberus.digitalu.design/react/loading-states/
- * @example
- * ```tsx
- * <Button>
- *   <Show when={loading} fallback={<>Save</>}>
- *      Saving
- *      <Spinner size={24} />
- *   </Show>
- * </Button>
- * ```
- */
-export function Spinner(props: SpinnerProps) {
-  return (
-    <svg
-      aria-busy="true"
-      data-scope="spinner"
-      data-part="root"
-      role="status"
-      xmlns="http://www.w3.org/2000/svg"
-      height={props.size}
-      width={props.size}
-      viewBox="0 0 24 24"
-    >
-      <g
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-      >
-        <path
-          strokeDasharray={16}
-          strokeDashoffset={16}
-          d="M12 3c4.97 0 9 4.03 9 9"
-        >
-          <animate
-            fill="freeze"
-            attributeName="stroke-dashoffset"
-            dur="0.15s"
-            values="16;0"
-          ></animate>
-          <animateTransform
-            attributeName="transform"
-            dur="0.75s"
-            repeatCount="indefinite"
-            type="rotate"
-            values="0 12 12;360 12 12"
-          ></animateTransform>
-        </path>
-        <path
-          strokeDasharray={64}
-          strokeDashoffset={64}
-          strokeOpacity={0.3}
-          d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z"
-        >
-          <animate
-            fill="freeze"
-            attributeName="stroke-dashoffset"
-            dur="0.6s"
-            values="64;0"
-          ></animate>
-        </path>
-      </g>
-    </svg>
-  )
-}

package/src/components/split-button/button.tsx

@@ -1,63 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { splitProps } from '../../utils'
-import { ButtonGroup, ButtonParts, type ButtonProps } from '../button/index'
-import { IconButton } from '../icon-button/index'
-import { Menu, MenuTrigger, MenuContent } from '../menu/index'
-import type { CerberusPrimitiveProps } from '../../system/types'
-
-/**
- * This module provides an abstraction for a SplitButton component.
- * @module SplitButton
- */
-
-export interface SplitButtonProps extends ButtonProps {
-  /** T
-   * he text for the primary action button.
-   */
-  actionText: string
-}
-
-/**
- * A SplitButton component that combines a primary action button with a
- * dropdown menu for additional actions.
- * @definition [Cerberus docs](https://cerberus.digitalu.designdocs/components/split-button)
- */
-export function SplitButton(props: CerberusPrimitiveProps<SplitButtonProps>) {
-  const [elProps, { usage = 'filled', actionText }, actionProps] = splitProps(
-    props,
-    ['children'],
-    ['usage', 'actionText'],
-  )
-
-  const { icons } = useCerberusContext()
-  const { selectArrow: SelectArrow } = icons
-
-  const iconShape = actionProps.shape === 'rounded' ? 'circle' : 'square'
-
-  return (
-    <ButtonGroup layout="attached" shape={actionProps.shape}>
-      <ButtonParts.Root usage={usage} {...actionProps}>
-        <ButtonParts.Icon />
-        {actionText}
-      </ButtonParts.Root>
-
-      <Menu>
-        <MenuTrigger>
-          <IconButton
-            ariaLabel="More options"
-            palette={actionProps.palette}
-            disabled={actionProps.pending}
-            shape={iconShape}
-            usage={usage}
-          >
-            <SelectArrow />
-          </IconButton>
-        </MenuTrigger>
-
-        <MenuContent>{elProps.children}</MenuContent>
-      </Menu>
-    </ButtonGroup>
-  )
-}

package/src/components/split-button/index.tsx

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

package/src/components/switch/index.ts

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

package/src/components/switch/parts.ts

@@ -1,53 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  SwitchControl,
-  SwitchLabel,
-  SwitchRoot,
-  SwitchThumb,
-  SwitchHiddenInput,
-} from './primitives'
-
-/**
- * This module contains the parts of the Switch parts.
- * @module 'switch/parts'
- */
-
-interface SwitchPartsValue {
-  /**
-   * The container of the field.
-   */
-  Root: ElementType
-  /**
-   * The label of the field.
-   */
-  Label: ElementType
-  /**
-   * The visual input of the switch.
-   */
-  Control: ElementType
-  /**
-   * The thumb item of the switch.
-   */
-  Thumb: ElementType
-  /**
-   * The native input for the switch.
-   */
-  HiddenInput: ElementType
-}
-
-/**
- * An Object containing the parts of the Switch component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the SwitchParts object and
- * the entire family of components vs. only what you use.
- */
-export const SwitchParts: SwitchPartsValue = {
-  Root: SwitchRoot,
-  Label: SwitchLabel,
-  Control: SwitchControl,
-  Thumb: SwitchThumb,
-  HiddenInput: SwitchHiddenInput,
-}

package/src/components/switch/primitives.tsx

@@ -1,51 +0,0 @@
-import {
-  Switch,
-  type SwitchControlProps as ArkSwitchControlProps,
-  type SwitchHiddenInputProps as ArkSwitchHiddenInputProps,
-  type SwitchLabelProps as ArkSwitchLabelProps,
-  type SwitchRootProps as ArkSwitchRootProps,
-  type SwitchThumbProps as ArkSwitchThumbProps,
-} from '@ark-ui/react/switch'
-import {
-  switchRecipe,
-  type SwitchRecipeVariantProps,
-} from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the Switch primitives
- * @module 'react/switch'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(switchRecipe)
-
-// Root
-
-export type SwitchRootProps = CerberusPrimitiveProps<
-  ArkSwitchRootProps & SwitchRecipeVariantProps
->
-export const SwitchRoot = withSlotRecipe(Switch.Root, 'root')
-
-// Label
-
-export type SwitchLabelProps = CerberusPrimitiveProps<ArkSwitchLabelProps>
-export const SwitchLabel = withSlotRecipe(Switch.Label, 'label')
-
-// Control
-
-export type SwitchControlProps = CerberusPrimitiveProps<ArkSwitchControlProps>
-export const SwitchControl = withSlotRecipe(Switch.Control, 'control')
-
-// Thumb
-
-export type SwitchThumbProps = CerberusPrimitiveProps<ArkSwitchThumbProps>
-export const SwitchThumb = withSlotRecipe(Switch.Thumb, 'thumb')
-
-// HiddenInput
-
-export type SwitchHiddenInputProps =
-  CerberusPrimitiveProps<ArkSwitchHiddenInputProps>
-export const SwitchHiddenInput = withNoRecipe(Switch.HiddenInput)

package/src/components/switch/switch-indicator.tsx

@@ -1,9 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-
-export function SwitchIndicator() {
-  const { icons } = useCerberusContext()
-  const { toggleChecked: CheckIcon } = icons
-  return <CheckIcon />
-}

package/src/components/switch/switch.tsx

@@ -1,27 +0,0 @@
-import { SwitchParts } from './parts'
-import { SwitchIndicator } from './switch-indicator'
-import type { SwitchRootProps } from './primitives'
-
-/**
- * The Switch component is a and abstraction of the primitives that displays a
- * controlled Switch with a label.
- * @description [Cerberus Docs] https://cerberus.digitalu.design/react/switch
- * @description [Ark Docs] https://ark-ui.com/docs/components/switch
- */
-export function Switch(props: SwitchRootProps) {
-  const { children, ...rootProps } = props
-
-  return (
-    <SwitchParts.Root {...rootProps}>
-      <SwitchParts.Control>
-        <SwitchParts.Thumb>
-          <SwitchIndicator />
-        </SwitchParts.Thumb>
-      </SwitchParts.Control>
-
-      <SwitchParts.Label>{children}</SwitchParts.Label>
-
-      <SwitchParts.HiddenInput />
-    </SwitchParts.Root>
-  )
-}

package/src/components/table/index.ts

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

package/src/components/table/parts.ts

@@ -1,83 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  TableRoot,
-  Thead,
-  Th,
-  Tbody,
-  Tr,
-  Td,
-  Tfoot,
-  TableEl,
-  Caption,
-  TableTrigger,
-} from './primitives'
-
-/**
- * This module contains the parts of the Table parts.
- * @module 'table/parts'
- */
-
-export interface TablePartsValue {
-  /**
-   * The container of the table.
-   */
-  Root: ElementType
-  /**
-   * The table element.
-   */
-  Table: ElementType
-  /**
-   * The table caption element.
-   */
-  Caption: ElementType
-  /**
-   * The table head element.
-   */
-  Header: ElementType
-  /**
-   * The table header cell element.
-   */
-  HeaderCol: ElementType
-  /**
-   * The table body element.
-   */
-  Body: ElementType
-  /**
-   * The table row element.
-   */
-  Row: ElementType
-  /**
-   * The table cell element.
-   */
-  Cell: ElementType
-  /**
-   * The table footer element.
-   */
-  Footer: ElementType
-  /**
-   * The table trigger element.
-   */
-  Trigger: ElementType
-}
-
-/**
- * An Object containing the parts of the Table component. For users that
- * prefer Object component syntax.
- *
- * @remarks
- *
- * When using object component syntax, you import the TableParts object and
- * the entire family of components vs. only what you use.
- */
-export const TableParts: TablePartsValue = {
-  Root: TableRoot,
-  Table: TableEl,
-  Caption: Caption,
-  Header: Thead,
-  HeaderCol: Th,
-  Body: Tbody,
-  Row: Tr,
-  Cell: Td,
-  Footer: Tfoot,
-  Trigger: TableTrigger,
-}

package/src/components/table/primitives.tsx

@@ -1,115 +0,0 @@
-import { type HTMLArkProps } from '@ark-ui/react/factory'
-import { table, type TableVariantProps } from 'styled-system/recipes'
-import {
-  cerberus,
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-
-/**
- * This module contains the primitives of the Table component.
- * @module 'table/primitives'
- */
-
-const { withSlotRecipe } = createCerberusPrimitive(table)
-
-// Root
-
-export type TableRootProps = CerberusPrimitiveProps<
-  HTMLArkProps<'div'> & TableVariantProps
->
-export const TableRoot = withSlotRecipe(cerberus.div, 'root', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'root',
-  },
-})
-
-// TableEl
-
-export type TableElProps = CerberusPrimitiveProps<HTMLArkProps<'table'>>
-export const TableEl = withSlotRecipe(cerberus.table, 'table', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'table',
-  },
-})
-
-// Caption
-
-export type CaptionProps = CerberusPrimitiveProps<HTMLArkProps<'caption'>>
-export const Caption = withSlotRecipe(cerberus.caption, 'caption', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'caption',
-  },
-})
-
-// Thead
-
-export type TheadProps = CerberusPrimitiveProps<HTMLArkProps<'thead'>>
-export const Thead = withSlotRecipe(cerberus.thead, 'thead', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'header',
-  },
-})
-
-// Th
-
-export type ThProps = CerberusPrimitiveProps<HTMLArkProps<'th'>>
-export const Th = withSlotRecipe(cerberus.th, 'th', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'header-col',
-  },
-})
-
-// Tbody
-
-export type TbodyProps = CerberusPrimitiveProps<HTMLArkProps<'tbody'>>
-export const Tbody = withSlotRecipe(cerberus.tbody, 'tbody', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'body',
-  },
-})
-
-// Tr
-export type TrProps = CerberusPrimitiveProps<HTMLArkProps<'tr'>>
-export const Tr = withSlotRecipe(cerberus.tr, 'tr', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'row',
-  },
-})
-
-// Td
-
-export type TdProps = CerberusPrimitiveProps<HTMLArkProps<'td'>>
-export const Td = withSlotRecipe(cerberus.td, 'td', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'cell',
-  },
-})
-
-// Tfoot
-
-export type TfootProps = CerberusPrimitiveProps<HTMLArkProps<'tfoot'>>
-export const Tfoot = withSlotRecipe(cerberus.tfoot, 'tfoot', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'footer',
-  },
-})
-
-// TableTrigger
-
-export type TableTriggerProps = CerberusPrimitiveProps<HTMLArkProps<'button'>>
-export const TableTrigger = withSlotRecipe(cerberus.button, 'trigger', {
-  defaultProps: {
-    'data-scope': 'table',
-    'data-part': 'trigger',
-  },
-})