@cerberus-design/react 0.15.0 → 0.16.0-next-4f6c716

package/src/components/radio/parts.ts

@@ -0,0 +1,65 @@
+import type { ElementType } from 'react'
+import {
+  RadioGroupRoot,
+  RadioGroupLabel,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupItemText,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Radio parts.
+ * @module 'radio/parts'
+ */
+
+interface RadioPartsValue {
+  /**
+   * The container of the field.
+   */
+  Root: ElementType
+  /**
+   * The label of the field.
+   */
+  Label: ElementType
+  /**
+   * The indicator that appears when a radio is checked.
+   */
+  Indicator: ElementType
+  /**
+   * An individual radio item of the field.
+   */
+  Item: ElementType
+  /**
+   * The text that labels a single radio of the field.
+   */
+  ItemText: ElementType
+  /**
+   * The visual radio control of the field.
+   */
+  ItemControl: ElementType
+  /**
+   * The native input for a radio item in the field.
+   */
+  ItemHiddenInput: 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 RadioParts: RadioPartsValue = {
+  Root: RadioGroupRoot,
+  Label: RadioGroupLabel,
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemText: RadioGroupItemText,
+  ItemControl: RadioGroupItemControl,
+  ItemHiddenInput: RadioGroupItemHiddenInput,
+}

package/src/components/radio/primitives.tsx

@@ -0,0 +1,123 @@
+import {
+  RadioGroup as ArkRadioGroup,
+  type RadioGroupIndicatorProps,
+  type RadioGroupItemControlProps,
+  type RadioGroupItemHiddenInputProps,
+  type RadioGroupItemProps,
+  type RadioGroupItemTextProps,
+  type RadioGroupLabelProps,
+  type RadioGroupRootProps,
+} from '@ark-ui/react/radio-group'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  radioGroup,
+  type RadioGroupVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the Radio primitives
+ * @module 'react/radio'
+ */
+
+/**
+ * The RadioGroupRoot component is used to group radio buttons together.
+ */
+export function RadioGroupRoot(
+  props: RadioGroupRootProps & RadioGroupVariantProps,
+) {
+  const { size, orientation, ...rootProps } = props
+  const styles = radioGroup({ size, orientation })
+  return (
+    <ArkRadioGroup.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupLabel component is used to label a group of radio buttons.
+ */
+export function RadioGroupLabel(props: RadioGroupLabelProps) {
+  const styles = radioGroup()
+  return (
+    <ArkRadioGroup.Label
+      {...props}
+      className={cx(styles.label, props.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupIndicator component is used to indicate the selected radio
+ * button in a group.
+ */
+export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
+  const styles = radioGroup()
+  return (
+    <ArkRadioGroup.Indicator
+      {...props}
+      className={cx(styles.indicator, props.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItem component is used to render a single radio button in a
+ * group.
+ */
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const styles = radioGroup()
+  return (
+    <ArkRadioGroup.Item
+      {...props}
+      className={cx(styles.item, props.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItemText component is used to render the text label for a
+ * single radio button in a group.
+ */
+export function RadioGroupItemText(
+  props: RadioGroupItemTextProps & RadioGroupVariantProps,
+) {
+  const { size, orientation, ...itemTextProps } = props
+  const styles = radioGroup({ size, orientation })
+  return (
+    <ArkRadioGroup.ItemText
+      {...itemTextProps}
+      className={cx(styles.itemText, itemTextProps.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItemControl component is used to render the control for a
+ * single radio button in a group.
+ */
+export function RadioGroupItemControl(
+  props: RadioGroupItemControlProps & RadioGroupVariantProps,
+) {
+  const { size, orientation, ...itemControlProps } = props
+  const styles = radioGroup({ size, orientation })
+  return (
+    <ArkRadioGroup.ItemControl
+      {...itemControlProps}
+      className={cx(styles.itemControl, itemControlProps.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItemHiddenInput component is used to render the hidden input
+ * for a single radio button in a group.
+ */
+export function RadioGroupItemHiddenInput(
+  props: RadioGroupItemHiddenInputProps,
+) {
+  return <ArkRadioGroup.ItemHiddenInput {...props} />
+}
+
+export const RadioGroup = RadioGroupRoot

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 }