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

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'

package/src/components/toggle/parts.ts

@@ -0,0 +1,32 @@
+import type { ElementType } from 'react'
+import { ToggleRoot, ToggleIndicator } from './primitives'
+
+/**
+ * This module contains the parts of the Toggle parts.
+ * @module 'toggle/parts'
+ */
+
+interface TogglePartsValue {
+  /**
+   * The container of the toggle.
+   */
+  Root: ElementType
+  /**
+   * The indicator that appears when a toggle is pressed.
+   */
+  Indicator: 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 ToggleParts: TogglePartsValue = {
+  Root: ToggleRoot,
+  Indicator: ToggleIndicator,
+}

package/src/components/toggle/primitives.tsx

@@ -0,0 +1,17 @@
+import { Toggle } from '@ark-ui/react/toggle'
+
+/**
+ * This module provides the Toggle primitives.
+ * @module 'react/toggle'
+ */
+
+/**
+ * The ToggleRoot is used to manage the state of the Toggle component.
+ */
+export const ToggleRoot = Toggle.Root
+
+/**
+ * The ToggleIndicator is used to render the indicator of the Toggle component
+ * based on the pressed state.
+ */
+export const ToggleIndicator = Toggle.Indicator

package/src/config/types.ts

@@ -34,6 +34,7 @@ export interface DefinedIcons<T extends IconType = IconType> {
   invalidAlt: T
   redo: T
   selectArrow: T
+  selectChecked: T
   toggleChecked: T
 }
 

package/src/context/confirm-modal.tsx

@@ -11,7 +11,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Button } from '../components/Button'
+import { Button } from '../components/button/button'
 import { css } from '@cerberus/styled-system/css'
 import { Show } from '../components/Show'
 import { Avatar } from '../components/Avatar'

package/src/context/cta-modal.tsx

@@ -11,7 +11,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Button } from '../components/Button'
+import { Button } from '../components/button/button'
 import { Show } from '../components/Show'
 import { Avatar } from '../components/Avatar'
 import { useCerberusContext } from './cerberus'

package/src/context/field.tsx

@@ -1,11 +1,13 @@
 'use client'
 
+import type { FieldRootProps } from '@ark-ui/react'
 import {
   createContext,
   useContext,
   useMemo,
   type PropsWithChildren,
 } from 'react'
+import { FieldRoot } from '../components/field/primitives'
 
 /**
  * This module provides a context and hook for the field.
@@ -35,11 +37,10 @@ export interface FieldContextValue {
 const FieldContext = createContext<FieldContextValue | null>(null)
 
 /**
- * Provides the field state for a all related components used within a group.
- * @see https://cerberus.digitalu.design/react/input
+ * @deprecated use FieldRoot or FieldParts instead
  */
-export function Field(
-  props: PropsWithChildren<FieldContextValue>,
+export function FieldProvider(
+  props: PropsWithChildren<FieldRootProps>,
 ): JSX.Element {
   const value = useMemo(
     () => ({
@@ -53,7 +54,7 @@ export function Field(
 
   return (
     <FieldContext.Provider value={value}>
-      {props.children}
+      <FieldRoot {...props} />
     </FieldContext.Provider>
   )
 }

package/src/context/notification-center.tsx

@@ -17,7 +17,7 @@ import { Notification } from '../components/Notification'
 import { animateIn, vstack } from '@cerberus/styled-system/patterns'
 import { Portal, type PortalProps } from '../components/Portal'
 import { notification } from '@cerberus/styled-system/recipes'
-import { Button } from '../components/Button'
+import { Button } from '../components/button/button'
 import { cx } from '@cerberus/styled-system/css'
 import {
   addNotification,

package/src/context/prompt-modal.tsx

@@ -11,12 +11,12 @@ import {
   type MouseEvent,
   type PropsWithChildren,
 } from 'react'
-import { Button } from '../components/Button'
+import { DialogCloseTrigger } from '@ark-ui/react'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
 import { css } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
-import { Input } from '../components/Input'
-import { Field } from './field'
-import { Label } from '../components/Label'
+import { FieldLabel, FieldRoot, Input } from '../components/field/index'
+import { Button } from '../components/button/button'
 import { Show } from '../components/Show'
 import { Avatar } from '../components/Avatar'
 import { Text } from '../components/Text'
@@ -27,8 +27,6 @@ import {
   DialogHeading,
   DialogProvider,
 } from '../components/Dialog'
-import { HStack, VStack } from '@cerberus/styled-system/jsx'
-import { DialogCloseTrigger } from '@ark-ui/react'
 
 /**
  * This module provides a context and hook for the prompt modal.
@@ -216,28 +214,28 @@ export function PromptModal(
               marginBlockEnd="lg"
               w="full"
             >
-              <Field invalid={!isValid}>
-                <Label
+              <FieldRoot
+                ids={{
+                  control: 'confirm',
+                }}
+                invalid={!isValid}
+              >
+                <FieldLabel
                   className={hstack({
                     gap: 'xs',
                     justify: 'flex-start !important',
+                    marginBlockEnd: 'xs',
+                    textStyle: 'label-md',
                   })}
-                  htmlFor="confirm"
-                  size="md"
                 >
                   Type
                   <Text as="strong" textTransform="uppercase">
                     {content?.key}
                   </Text>
                   to confirm
-                </Label>
-                <Input
-                  id="confirm"
-                  name="confirm"
-                  onChange={handleChange}
-                  type="text"
-                />
-              </Field>
+                </FieldLabel>
+                <Input name="confirm" onChange={handleChange} type="text" />
+              </FieldRoot>
             </VStack>
 
             <HStack gap="md" justify="stretch" w="full">

package/src/hooks/useDate.ts

@@ -38,13 +38,7 @@ export interface UseDateReturn extends UseDateBase {
 }
 
 /**
- * A hook for formatting and validating date inputs. The date format defaults to US Military format.
- * @example
- * ```tsx
- * const MyComponent = () => {
- *  const date = useDate({ initialValue: '01 JAN 2024' })
- *  return <input onChange={date.onChange} type="text" value={date.value} />
- * }
+ * @deprecated use the DatePicker family instead
  */
 export function useDate(options?: UseDateOptions): UseDateReturn {
   const initialValue = options?.initialValue ?? ''

package/src/hooks/useRootColors.ts

@@ -38,7 +38,6 @@ export function useRootColors(colors: string[] = []): RootColorsResult {
   useEffect(() => {
     if (Object.keys(state).length === colors.length) return
     dispatch(formatColors(colors))
-    console.log('updating colors in root hook')
   }, [colors])
 
   // reducer is already memoized

package/src/hooks/useToggle.ts

@@ -29,9 +29,7 @@ export interface ToggleHookReturn {
 }
 
 /**
- * Provides a hook for using a toggle.
- * @see https://cerberus.digitalu.design/react/use-toggle
- * @memberof module:Toggle
+ * @deprecated Will be removed in v1. Use ToggleParts instead.
  */
 export function useToggle(options?: UseToggleOptions): ToggleHookReturn {
   const [checked, setChecked] = useState<string>(options?.checked ?? '')

package/src/index.ts

@@ -5,13 +5,19 @@
 
 // deprecated
 
-export * from './components/Modal'
-export * from './components/ModalHeader'
-export * from './components/ModalHeading'
-export * from './components/ModalDescription'
-export * from './components/NavMenuTrigger'
-export * from './components/NavMenuList'
-export * from './components/NavMenuLink'
+export * from './components/deprecated/FieldMessage'
+export * from './components/deprecated/FieldsetLabel'
+export * from './components/deprecated/Label'
+export * from './components/deprecated/Modal'
+export * from './components/deprecated/ModalHeader'
+export * from './components/deprecated/ModalHeading'
+export * from './components/deprecated/ModalDescription'
+export * from './components/deprecated/NavMenuTrigger'
+export * from './components/deprecated/NavMenuList'
+export * from './components/deprecated/NavMenuLink'
+export * from './hooks/useDate'
+export * from './hooks/useModal'
+export * from './hooks/useToggle'
 
 // components
 
@@ -20,23 +26,21 @@ export * from './components/Accordion.client'
 export * from './components/AccordionItemGroup'
 export * from './components/Admonition'
 export * from './components/Avatar'
-export * from './components/Button'
-export * from './components/Checkbox'
+export * from './components/button/index'
+export * from './components/checkbox/index'
 export * from './components/CircularProgress'
 export * from './components/DatePicker.client'
 export * from './components/DatePicker.server'
 export * from './components/Dialog'
 export * from './components/Dialog.client'
 export * from './components/Droppable'
-export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
-export * from './components/Fieldset'
-export * from './components/FieldsetLabel'
+export * from './components/field/index'
+export * from './components/fieldset/index'
 export * from './components/FileStatus'
 export * from './components/FileUploader'
+export * from './components/for'
 export * from './components/IconButton'
-export * from './components/Input'
-export * from './components/Label'
 export * from './components/Legend'
 export * from './components/Menu'
 export * from './components/Notification'
@@ -44,9 +48,11 @@ export * from './components/NotificationHeading'
 export * from './components/NotificationDescription'
 export * from './components/Portal'
 export * from './components/ProgressBar'
-export * from './components/Radio'
-export * from './components/Select'
+export * from './components/radio/index'
+export * from './components/select/index'
+export * from './components/Show'
 export * from './components/Spinner'
+export * from './components/switch/index'
 export * from './components/Tabs.client'
 export * from './components/Table'
 export * from './components/Thead'
@@ -55,10 +61,8 @@ export * from './components/Td'
 export * from './components/Tbody'
 export * from './components/Tag'
 export * from './components/Text'
-export * from './components/Textarea'
-export * from './components/Toggle'
+export * from './components/toggle/index'
 export * from './components/Tooltip'
-export * from './components/Show'
 
 // context
 
@@ -66,7 +70,6 @@ export * from './context/cerberus'
 export * from './context/confirm-modal'
 export * from './context/cta-modal'
 export * from './context/feature-flags'
-export * from './context/field'
 export * from './context/navMenu'
 export * from './context/notification-center'
 export * from './context/prompt-modal'
@@ -75,10 +78,7 @@ export * from './context/theme'
 
 // hooks
 
-export * from './hooks/useDate'
-export * from './hooks/useModal'
 export * from './hooks/useTheme'
-export * from './hooks/useToggle'
 export * from './hooks/useRootColors'
 
 // aria-helpers

package/src/utils/index.ts

@@ -18,4 +18,34 @@ export function formatNotifyCount(count: number): string {
   return count.toString()
 }
 
+/**
+ * Splits the properties of an object into multiple groups based on lists of keys.
+ * @param props - The object to split.
+ * @param keyGroups - The lists of keys to include in each group.
+ * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.
+ */
+export function splitProps<T extends object>(
+  props: T,
+  ...keyGroups: (keyof T)[][]
+): { [K in keyof T]?: T[K] }[] {
+  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })
+  const rest = {} as { [K in keyof T]?: T[K] }
+
+  for (const key in props) {
+    let assigned = false
+    for (let i = 0; i < keyGroups.length; i++) {
+      if (keyGroups[i].includes(key as keyof T)) {
+        result[i][key as keyof T] = props[key]
+        assigned = true
+        break
+      }
+    }
+    if (!assigned) {
+      rest[key as keyof T] = props[key]
+    }
+  }
+
+  return [...result, rest]
+}
+
 export * from './localStorage'