@cerberus-design/react 0.15.0 → 0.16.0-next-feeb186

package/src/components/radio/radio.tsx

@@ -0,0 +1,35 @@
+import type { RadioGroupItemProps } from '@ark-ui/react'
+import { type RadioGroupVariantProps } from '@cerberus/styled-system/recipes'
+import {
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText,
+} from './primitives'
+
+/**
+ * This module contains the Radio component.
+ * @module
+ */
+
+export type RadioProps = RadioGroupVariantProps & RadioGroupItemProps
+
+/**
+ * The Radio component is used to allow users to select a single option from a list of options.
+ * @see https://cerberus.digitalu.design/react/radio
+ * @memberof module:Field
+ * @example
+ * ```tsx
+ * <Radio value="option1">Option 1</Radio>
+ * ```
+ */
+export function Radio(props: RadioProps) {
+  const { size, children, ...groupProps } = props
+  return (
+    <RadioGroupItem {...groupProps}>
+      <RadioGroupItemControl size={size} />
+      <RadioGroupItemText size={size}>{children}</RadioGroupItemText>
+      <RadioGroupItemHiddenInput />
+    </RadioGroupItem>
+  )
+}

package/src/components/select/index.ts

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

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

@@ -0,0 +1,34 @@
+import type {
+  SelectItemGroupLabelProps,
+  SelectItemGroupProps,
+} from '@ark-ui/react/select'
+import { SelectItemGroup, SelectItemGroupLabel } from './primitives'
+
+/**
+ * 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 function OptionGroup(props: SelectItemGroupProps) {
+  return <SelectItemGroup {...props} />
+}
+
+/**
+ * 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 function OptionGroupLabel(props: SelectItemGroupLabelProps) {
+  return <SelectItemGroupLabel {...props} />
+}

package/src/components/select/parts.ts

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

@@ -0,0 +1,205 @@
+import {
+  createListCollection,
+  Select,
+  type ListCollection,
+  type SelectClearTriggerProps,
+  type SelectContentProps,
+  type SelectControlProps,
+  type SelectHiddenSelectProps,
+  type SelectIndicatorProps,
+  type SelectItemGroupLabelProps,
+  type SelectItemGroupProps,
+  type SelectItemIndicatorProps,
+  type SelectItemProps,
+  type SelectItemTextProps,
+  type SelectLabelProps,
+  type SelectPositionerProps,
+  type SelectRootProps,
+  type SelectTriggerProps,
+  type SelectValueChangeDetails,
+  type SelectValueTextProps,
+} from '@ark-ui/react/select'
+import {
+  select,
+  type SelectVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import type { SelectCollectionItem } from './select'
+
+/**
+ * This module contains the Select primitives
+ * @module 'react/select'
+ */
+
+/**
+ * The SelectRoot component is the context provider for the Select component.
+ */
+export function SelectRoot(
+  props: SelectRootProps<SelectCollectionItem> & SelectVariantProps,
+) {
+  const { size, ...rootProps } = props
+  const styles = select({ size })
+  return (
+    <Select.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The label that appears above the select input.
+ */
+export function SelectLabel(props: SelectLabelProps) {
+  const styles = select()
+  return (
+    <Select.Label {...props} className={cx(styles.label, props.className)} />
+  )
+}
+
+/**
+ * The control that wraps the select trigger.
+ */
+export function SelectControl(props: SelectControlProps) {
+  return <Select.Control {...props} />
+}
+
+/**
+ * The trigger that opens the dropdown.
+ */
+export function SelectTrigger(props: SelectTriggerProps) {
+  const styles = select()
+  return (
+    <Select.Trigger
+      {...props}
+      className={cx(styles.trigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The text that appears in the trigger.
+ */
+export function SelectValueText(props: SelectValueTextProps) {
+  return <Select.ValueText {...props} />
+}
+
+/**
+ * The indicator that appears in the trigger.
+ */
+export function SelectIndicator(props: SelectIndicatorProps) {
+  const styles = select()
+  return (
+    <Select.Indicator
+      {...props}
+      className={cx(styles.indicator, props.className)}
+    />
+  )
+}
+
+/**
+ * The trigger that clears the selected value.
+ */
+export function SelectClearTrigger(props: SelectClearTriggerProps) {
+  return <Select.ClearTrigger {...props} />
+}
+
+/**
+ * The positioner that contains the dropdown.
+ */
+export function SelectPositioner(props: SelectPositionerProps) {
+  const styles = select()
+  return (
+    <Select.Positioner
+      {...props}
+      className={cx(styles.positioner, props.className)}
+    />
+  )
+}
+
+/**
+ * The content of the dropdown (i.e. the container itself).
+ */
+export function SelectContent(props: SelectContentProps & SelectVariantProps) {
+  const { size, ...contentProps } = props
+  const styles = select({ size })
+  return (
+    <Select.Content
+      {...contentProps}
+      className={cx(styles.content, contentProps.className)}
+    />
+  )
+}
+
+/**
+ * The container for a group of item options.
+ */
+export function SelectItemGroup(props: SelectItemGroupProps) {
+  return <Select.ItemGroup {...props} />
+}
+
+/**
+ * The label for a group of item options.
+ */
+export function SelectItemGroupLabel(props: SelectItemGroupLabelProps) {
+  const styles = select()
+  return (
+    <Select.ItemGroupLabel
+      {...props}
+      className={cx(styles.itemGroupLabel, props.className)}
+    />
+  )
+}
+
+/**
+ * The container for an item in the select content.
+ */
+export function SelectItem(props: SelectItemProps) {
+  const styles = select()
+  return <Select.Item {...props} className={cx(styles.item, props.className)} />
+}
+
+/**
+ * The text for an item option.
+ */
+export function SelectItemText(props: SelectItemTextProps) {
+  return <Select.ItemText {...props} />
+}
+
+/**
+ * The indicator for an item option shown when it is selected.
+ */
+export function SelectItemIndicator(props: SelectItemIndicatorProps) {
+  const styles = select()
+  return (
+    <Select.ItemIndicator
+      {...props}
+      className={cx(styles.itemIndicator, props.className)}
+    />
+  )
+}
+
+/**
+ * The native input for a select item.
+ */
+export function SelectHiddenSelect(props: SelectHiddenSelectProps) {
+  return <Select.HiddenSelect {...props} />
+}
+
+/**
+ * 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

@@ -0,0 +1,135 @@
+'use client'
+
+import type { SelectItemProps, SelectRootProps } from '@ark-ui/react/select'
+import { type SelectVariantProps } from '@cerberus/styled-system/recipes'
+import { HStack } from '@cerberus/styled-system/jsx'
+import { useCerberusContext } from '../../context/cerberus'
+import { Portal } from '../Portal'
+import { Show } from '../Show'
+import { SelectParts } from './parts'
+
+/**
+ * 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 BaseSelectProps {
+  /**
+   * The placeholder text when no option is selected.
+   */
+  placeholder?: string
+}
+
+export type SelectProps = SelectRootProps<SelectCollectionItem> &
+  BaseSelectProps &
+  SelectVariantProps
+
+/**
+ * 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 } = props
+  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>
+
+      <Portal>
+        <SelectParts.Positioner>
+          <SelectParts.Content size={rootProps.size}>
+            {props.children}
+          </SelectParts.Content>
+        </SelectParts.Positioner>
+      </Portal>
+
+      <SelectParts.HiddenSelect />
+    </SelectParts.Root>
+  )
+}
+
+export interface OptionProps extends SelectItemProps {
+  /**
+   * The CollectionListItem to be displayed in the dropdown list.
+   */
+  item: SelectCollectionItem
+}
+
+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/switch/index.ts

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

package/src/components/switch/parts.ts

@@ -0,0 +1,53 @@
+import type { ElementType } from 'react'
+import {
+  SwitchControl,
+  SwitchLabel,
+  SwitchRoot,
+  SwitchThumb,
+  SwitchHiddenInput,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Radio parts.
+ * @module 'radio/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 Radio 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

@@ -0,0 +1,69 @@
+import {
+  Switch,
+  type SwitchControlProps,
+  type SwitchLabelProps,
+  type SwitchRootProps,
+  type SwitchThumbProps,
+} from '@ark-ui/react'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  switchRecipe,
+  type SwitchRecipeVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the Switch primitives
+ * @module 'react/switch'
+ */
+
+/**
+ * The SwitchRoot component is the context provider for the Switch components.
+ */
+export function SwitchRoot(props: SwitchRootProps & SwitchRecipeVariantProps) {
+  const { size, ...rootProps } = props
+  const styles = switchRecipe({ size })
+  return (
+    <Switch.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The SwitchLabel component is the label for the Switch.
+ */
+export function SwitchLabel(props: SwitchLabelProps) {
+  const styles = switchRecipe()
+  return (
+    <Switch.Label {...props} className={cx(styles.label, props.className)} />
+  )
+}
+
+/**
+ * The SwitchControl component is the visual input for the Switch.
+ */
+export function SwitchControl(props: SwitchControlProps) {
+  const styles = switchRecipe()
+  return (
+    <Switch.Control
+      {...props}
+      className={cx(styles.control, props.className)}
+    />
+  )
+}
+
+/**
+ * The SwitchThumb component is the thumb for the Switch.
+ */
+export function SwitchThumb(props: SwitchThumbProps) {
+  const styles = switchRecipe()
+  return (
+    <Switch.Thumb {...props} className={cx(styles.thumb, props.className)} />
+  )
+}
+
+/**
+ * The SwitchHiddenInput component is the native input for the Switch.
+ */
+export const SwitchHiddenInput = Switch.HiddenInput

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

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

@@ -0,0 +1,30 @@
+import type { SwitchRootProps } from '@ark-ui/react'
+import type { SwitchRecipeVariantProps } from '@cerberus/styled-system/recipes'
+import { SwitchParts } from './parts'
+import { SwitchIndicator } from './switch-indicator'
+
+export type SwitchProps = SwitchRootProps & SwitchRecipeVariantProps
+
+/**
+ * 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: SwitchProps) {
+  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/toggle/index.ts

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