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

package/src/components/select/index.ts

@@ -1,5 +0,0 @@
-export * from './parts'
-export * from './primitives'
-export * from './select'
-export * from './option'
-export * from './option-group'

package/src/components/select/option-group.tsx

@@ -1,32 +0,0 @@
-import { SelectItemGroup, SelectItemGroupLabel } from './primitives'
-
-/**
- * This module contains the named abstractions OptionGroup and OptionGroupLabel
- * components for API consistency with the Select component.
- * @module 'react/select/option-group'
- */
-
-/**
- * The OptionGroup component is a group of options in the dropdown list.
- * @definition [Select docs](https://cerberus.digitalu.design/react/select)
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
- * @example
- * ```tsx
- * <OptionGroup>
- *  <OptionGroupLabel>Greek gods</OptionGroupLabel>
- *  ...
- * </OptionGroup>
- * ```
- */
-export const OptionGroup = SelectItemGroup
-
-/**
- * The OptionGroupLabel component is the label of the OptionGroup.
- * @definition [Select docs](https://cerberus.digitalu.design/react/select)
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
- * @example
- * ```tsx
- * <OptionGroupLabel>Greek gods</OptionGroupLabel>
- * ```
- */
-export const OptionGroupLabel = SelectItemGroupLabel

package/src/components/select/option.tsx

@@ -1,42 +0,0 @@
-'use client'
-
-import { useCerberusContext } from '../../context/cerberus'
-import { SelectParts } from './parts'
-import type { SelectItemProps } from './primitives'
-import type { SelectCollectionItem } from './select'
-
-/**
- * This module contains the Option component for the Select dropdown.
- * @module 'react/select/option'
- */
-
-export interface OptionProps extends SelectItemProps {
-  /**
-   * The CollectionListItem to be displayed in the dropdown list.
-   */
-  item: SelectCollectionItem
-}
-
-/**
- * The Option component is used to render an individual item in the Select
- * dropdown. It is an abstraction of the Select Item, ItemText, and
- * ItemIndicator primitives that also displays a Checked icon when the item is
- * selected.
- *
- * @definition [Select docs](https://cerberus.digitalu.design/react/select/dev)
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
- */
-export function Option(props: OptionProps) {
-  const { item, ...itemProps } = props
-  const { icons } = useCerberusContext()
-  const { selectChecked: CheckedIcon } = icons
-
-  return (
-    <SelectParts.Item {...itemProps} item={item}>
-      <SelectParts.ItemText>{item?.label}</SelectParts.ItemText>
-      <SelectParts.ItemIndicator>
-        <CheckedIcon />
-      </SelectParts.ItemIndicator>
-    </SelectParts.Item>
-  )
-}

package/src/components/select/parts.ts

@@ -1,113 +0,0 @@
-import type { ElementType } from 'react'
-import {
-  SelectClearTrigger,
-  SelectContent,
-  SelectControl,
-  SelectHiddenSelect,
-  SelectIndicator,
-  SelectItem,
-  SelectItemGroup,
-  SelectItemGroupLabel,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectLabel,
-  SelectPositioner,
-  SelectRoot,
-  SelectTrigger,
-  SelectValueText,
-} from './primitives'
-
-/**
- * This module contains the parts of the Select parts.
- * @module 'select/parts'
- */
-
-interface SelectPartsValue {
-  /**
-   * 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 trigger that opens the dropdown.
-   */
-  Trigger: ElementType
-  /**
-   * The trigger to clear the select input.
-   */
-  ClearTrigger: ElementType
-  /**
-   * The text that appears in the trigger.
-   */
-  ValueText: ElementType
-  /**
-   * The indicator that appears in the trigger.
-   */
-  Indicator: 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
-  /**
-   * The native select for use within a field.
-   */
-  HiddenSelect: 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 SelectParts object and
- * the entire family of components vs. only what you use.
- */
-export const SelectParts: SelectPartsValue = {
-  Root: SelectRoot,
-  Label: SelectLabel,
-  Control: SelectControl,
-  Trigger: SelectTrigger,
-  ClearTrigger: SelectClearTrigger,
-  ValueText: SelectValueText,
-  Indicator: SelectIndicator,
-  Positioner: SelectPositioner,
-  Content: SelectContent,
-  ItemGroup: SelectItemGroup,
-  ItemGroupLabel: SelectItemGroupLabel,
-  Item: SelectItem,
-  ItemText: SelectItemText,
-  ItemIndicator: SelectItemIndicator,
-  HiddenSelect: SelectHiddenSelect,
-}

package/src/components/select/primitives.tsx

@@ -1,147 +0,0 @@
-import {
-  createListCollection,
-  Select,
-  type ListCollection,
-  type SelectClearTriggerProps as ArkSelectClearTrigger,
-  type SelectContentProps as ArkSelectContentProps,
-  type SelectControlProps as ArkSelectControlProps,
-  type SelectHiddenSelectProps as ArkSelectHiddenSelectProps,
-  type SelectIndicatorProps as ArkSelectIndicatorProps,
-  type SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps,
-  type SelectItemGroupProps as ArkSelectItemGroupProps,
-  type SelectItemIndicatorProps as ArkSelectItemIndicatorProps,
-  type SelectItemProps as ArkSelectItemProps,
-  type SelectItemTextProps as ArkSelectItemTextProps,
-  type SelectLabelProps as ArkSelectLabelProps,
-  type SelectPositionerProps as ArkSelectPositionerProps,
-  type SelectRootProps as ArkSelectRootProps,
-  type SelectTriggerProps as ArkSelectTriggerProps,
-  type SelectValueChangeDetails,
-  type SelectValueTextProps as ArkSelectValueTextProps,
-} from '@ark-ui/react/select'
-import { select, type SelectVariantProps } from 'styled-system/recipes'
-import {
-  createCerberusPrimitive,
-  type CerberusPrimitiveProps,
-} from '../../system/index'
-import type { SelectCollectionItem } from './select'
-
-/**
- * This module contains the Select primitives
- * @module 'react/select'
- */
-
-const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(select)
-
-// Root
-
-export type SelectRootProps = CerberusPrimitiveProps<
-  ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps
->
-export const SelectRoot = withSlotRecipe(Select.Root, 'root')
-
-// Label
-
-export type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>
-export const SelectLabel = withSlotRecipe(Select.Label, 'label')
-
-// Control
-
-export type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>
-export const SelectControl = withNoRecipe(Select.Control)
-
-// Trigger
-
-export type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>
-export const SelectTrigger = withSlotRecipe(Select.Trigger, 'trigger')
-
-// Value Text
-
-export type SelectValueTextProps =
-  CerberusPrimitiveProps<ArkSelectValueTextProps>
-export const SelectValueText = withNoRecipe(Select.ValueText)
-
-// Indicator
-
-export type SelectIndicatorProps =
-  CerberusPrimitiveProps<ArkSelectIndicatorProps>
-export const SelectIndicator = withSlotRecipe(Select.Indicator, 'indicator')
-
-// Clear Trigger
-
-export type SelectClearTriggerProps =
-  CerberusPrimitiveProps<ArkSelectClearTrigger>
-export const SelectClearTrigger = withNoRecipe(Select.ClearTrigger)
-
-// Positioner
-
-export type SelectPositionerProps =
-  CerberusPrimitiveProps<ArkSelectPositionerProps>
-export const SelectPositioner = withSlotRecipe(Select.Positioner, 'positioner')
-
-// Content
-
-export type SelectContentProps = CerberusPrimitiveProps<
-  ArkSelectContentProps & SelectVariantProps
->
-export const SelectContent = withSlotRecipe(Select.Content, 'content')
-
-// Item Group
-
-export type SelectItemGroupProps =
-  CerberusPrimitiveProps<ArkSelectItemGroupProps>
-export const SelectItemGroup = withNoRecipe(Select.ItemGroup)
-
-// Item Group Label
-
-export type SelectItemGroupLabelProps =
-  CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>
-export const SelectItemGroupLabel = withSlotRecipe(
-  Select.ItemGroupLabel,
-  'itemGroupLabel',
-)
-
-// Item
-
-export type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>
-export const SelectItem = withSlotRecipe(Select.Item, 'item')
-
-// Item Text
-
-export type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>
-export const SelectItemText = withNoRecipe(Select.ItemText)
-
-// Item Indicator
-
-export type SelectItemIndicatorProps =
-  CerberusPrimitiveProps<ArkSelectItemIndicatorProps>
-export const SelectItemIndicator = withSlotRecipe(
-  Select.ItemIndicator,
-  'itemIndicator',
-)
-
-// Hidden Select
-
-export type SelectHiddenSelectProps =
-  CerberusPrimitiveProps<ArkSelectHiddenSelectProps>
-export const SelectHiddenSelect = withNoRecipe(Select.HiddenSelect)
-
-// Collection
-
-/**
- * A helper function to create a SelectCollection object.
- * @param collection - An array of SelectCollectionItem objects that matches
- * the following shape:
- * ```ts
- * [{ label: 'Hades', value: 'hades', disabled?: true }]
- * ```
- */
-export function createSelectCollection(
-  collection: SelectCollectionItem[],
-): ListCollection<SelectCollectionItem> {
-  return createListCollection({
-    items: collection,
-  })
-}
-
-export type { SelectValueChangeDetails, ListCollection }

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'