@cerberus-design/react 0.18.3 → 0.19.0

package/src/components/dialog/primitives.tsx

@@ -1,113 +1,83 @@
 import {
   Dialog,
-  type DialogBackdropProps,
-  type DialogContentProps,
-  type DialogDescriptionProps,
-  type DialogPositionerProps,
-  type DialogRootProps,
-  type DialogTitleProps,
-  type DialogTriggerProps,
+  type DialogBackdropProps as ArkDialogBackdropProps,
+  type DialogContentProps as ArkDialogContentProps,
+  type DialogDescriptionProps as ArkDialogDescriptionProps,
+  type DialogPositionerProps as ArkDialogPositionerProps,
+  type DialogRootProps as ArkDialogRootProps,
+  type DialogTitleProps as ArkDialogTitleProps,
+  type DialogTriggerProps as ArkDialogTriggerProps,
 } from '@ark-ui/react/dialog'
-import { cx } from 'styled-system/css'
 import { dialog, type DialogVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the primitives of the Dialog component.
  * @module 'dialog/primitives'
  */
 
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(dialog)
+
 /**
  * The provider that controls the dialog components.
  */
-export function DialogRoot(props: DialogRootProps) {
-  return <Dialog.Root {...props} />
-}
+export type DialogRootProps = CerberusPrimitiveProps<ArkDialogRootProps>
+export const DialogRoot = withNoRecipe(Dialog.Root)
+
+/**
+ * An abstraction of the DialogRoot component for naming consistency.
+ */
+export const DialogProvider = DialogRoot
 
 /**
  * The trigger that opens the dialog.
  */
-export function DialogTrigger(props: DialogTriggerProps) {
-  const styles = dialog()
-  return (
-    <Dialog.Trigger
-      {...props}
-      className={cx(styles.trigger, props.className)}
-    />
-  )
-}
+export type DialogTriggerProps = CerberusPrimitiveProps<ArkDialogTriggerProps>
+export const DialogTrigger = withSlotRecipe(Dialog.Trigger, 'trigger')
 
 /**
  * The overlay of the dialog.
  */
-export function DialogBackdrop(props: DialogBackdropProps) {
-  const styles = dialog()
-  return (
-    <Dialog.Backdrop
-      {...props}
-      className={cx(styles.backdrop, props.className)}
-    />
-  )
-}
+export type DialogBackdropProps = CerberusPrimitiveProps<ArkDialogBackdropProps>
+export const DialogBackdrop = withSlotRecipe(Dialog.Backdrop, 'backdrop')
 
 /**
  * The container that positions the dialog.
  */
-export function DialogPositioner(props: DialogPositionerProps) {
-  const styles = dialog()
-  return (
-    <Dialog.Positioner
-      {...props}
-      className={cx(styles.positioner, props.className)}
-    />
-  )
-}
+export type DialogPositionerProps =
+  CerberusPrimitiveProps<ArkDialogPositionerProps>
+export const DialogPositioner = withSlotRecipe(Dialog.Positioner, 'positioner')
 
 /**
  * The visible content of the dialog.
  */
-export function DialogContent(props: DialogContentProps & DialogVariantProps) {
-  const { size, ...contentProps } = props
-  const styles = dialog({ size })
-  return (
-    <Dialog.Content
-      {...contentProps}
-      className={cx(styles.content, contentProps.className)}
-    />
-  )
-}
+export type DialogContentProps = CerberusPrimitiveProps<
+  ArkDialogContentProps & DialogVariantProps
+>
+export const DialogContent = withSlotRecipe(Dialog.Content, 'content')
 
 /**
  * The heading of the dialog.
  */
-export function DialogHeading(props: DialogTitleProps) {
-  const styles = dialog()
-  return (
-    <Dialog.Title {...props} className={cx(styles.title, props.className)} />
-  )
-}
+export type DialogHeadingProps = CerberusPrimitiveProps<ArkDialogTitleProps>
+export const DialogHeading = withSlotRecipe(Dialog.Title, 'title')
 
 /**
  * The description of the dialog.
  */
-export function DialogDescription(props: DialogDescriptionProps) {
-  const styles = dialog()
-  return (
-    <Dialog.Description
-      {...props}
-      className={cx(styles.description, props.className)}
-    />
-  )
-}
+export type DialogDescriptionProps =
+  CerberusPrimitiveProps<ArkDialogDescriptionProps>
+export const DialogDescription = withSlotRecipe(
+  Dialog.Description,
+  'description',
+)
 
 /**
  * The trigger that closes the dialog.
  */
-export function DialogCloseTrigger(props: DialogTriggerProps) {
-  return <Dialog.CloseTrigger {...props} />
-}
-
-/**
- * The provider that controls the dialog components. This is a named export of
- * the DialogRoot primitive.
- */
-export const DialogProvider = DialogRoot
+export type DialogCloseTriggerProps =
+  CerberusPrimitiveProps<ArkDialogTriggerProps>
+export const DialogCloseTrigger = withNoRecipe(Dialog.CloseTrigger)

package/src/components/feature-flag/feature-flag.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import type { PropsWithChildren } from 'react'
+import { useFeatureFlags } from '../../context/feature-flags'
+import { Show } from '../show/index'
+
+export interface FeatureFlagProps {
+  /**
+   * The name of the feature flag to check.
+   */
+  flag: string
+}
+
+/**
+ * A component that allows you to show or hide content based on a feature flag.
+ * @see https://cerberus.digitalu.design/react/feature-flags
+ */
+export function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {
+  const showContent = useFeatureFlags(props.flag)
+  return <Show when={showContent}>{props.children}</Show>
+}

package/src/components/feature-flag/index.ts

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

package/src/components/field/error-text.tsx

@@ -0,0 +1,19 @@
+import { Field } from '@ark-ui/react/field'
+import type { FieldErrorTextProps } from './primitives'
+
+/**
+ * The error text for the Field component that is shown when the field is
+ * invalid.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * <FieldRoot>
+ *   <FieldInput />
+ *   <FieldErrorText>Error text</FieldErrorText>
+ * </FieldRoot>
+ * ```
+ */
+export function CerberusFieldErrorText(props: FieldErrorTextProps) {
+  if (!props.children) return null
+  return <Field.ErrorText {...props} />
+}

package/src/components/field/field.tsx

@@ -1,13 +1,14 @@
 import { type FieldRootProps } from '@ark-ui/react/field'
+import { HStack } from 'styled-system/jsx'
 import { splitProps } from '../../utils/index'
+import { Show } from '../show/index'
 import {
   FieldErrorText,
   FieldHelperText,
   FieldLabel,
   FieldRoot,
 } from './primitives'
-import { HStack } from 'styled-system/jsx'
-import { Show } from '../Show'
+import { HelperText } from './helper-text'
 
 export interface FieldProps extends FieldRootProps {
   /**
@@ -62,16 +63,17 @@ export function Field(props: FieldProps) {
 
       {fieldProps.children}
 
-      <Show when={fieldProps.helperText && !statusProps.invalid}>
-        <HStack justifyContent="space-between" w="full">
-          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>
-          <Show when={fieldProps.secondaryHelperText}>
-            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
-          </Show>
-        </HStack>
-      </Show>
+      <HStack justifyContent="space-between" w="full">
+        <HelperText invalid={statusProps.invalid}>
+          {fieldProps.helperText}
+        </HelperText>
+
+        <FieldErrorText>{fieldProps.errorText}</FieldErrorText>
 
-      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>
+        <Show when={fieldProps.secondaryHelperText}>
+          <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
+        </Show>
+      </HStack>
     </FieldRoot>
   )
 }

package/src/components/field/helper-text.tsx

@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from 'react'
+import { FieldHelperText } from './primitives'
+
+interface HelperTextProps {
+  invalid?: boolean
+}
+
+/**
+ * The HelperText component is an abstraction for hiding the helper text
+ * when the field is invalid. Ark UI assumes people want the helper text
+ * to always be visible, so this is a workaround for that.
+ */
+export function HelperText(props: PropsWithChildren<HelperTextProps>) {
+  if (props.invalid) return null
+  return (
+    <FieldHelperText data-has-content={Boolean(props.children)}>
+      {props.children}
+    </FieldHelperText>
+  )
+}

package/src/components/field/index.ts

@@ -1,5 +1,7 @@
 export * from './field'
 export * from './primitives'
+export * from './parts'
 export * from './start-indicator'
 export * from './status-indicator'
-export * from './parts'
+
+export type { FieldInputElProps } from './input'

package/src/components/field/input.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+import type { FieldVariantProps } from 'styled-system/recipes'
+import { FieldStartIndicator } from './start-indicator'
+import { FieldStatusIndicator } from './status-indicator'
+import {
+  FieldInputRoot,
+  FieldInput as PrimitiveInput,
+  type FieldInputProps as PrimitiveInputProps,
+} from './primitives'
+import { splitProps } from '../../utils/index'
+
+/**
+ * This module contains an abstraction of the Field.Input component.
+ * @module 'field/input'
+ */
+
+export interface FieldInputElProps
+  extends Omit<PrimitiveInputProps, 'size'>,
+    FieldVariantProps {
+  /**
+   * An optional icon to display at the start of the input.
+   */
+  startIcon?: ReactNode
+  /**
+   * An optional icon to display at the end of the input.
+   */
+  endIcon?: ReactNode
+}
+
+export function CerberusFieldInput(props: FieldInputElProps) {
+  const [{ startIcon, endIcon }, fieldProps] = splitProps(props, [
+    'startIcon',
+    'endIcon',
+  ])
+  const hasStartIcon = Boolean(startIcon)
+
+  return (
+    <FieldInputRoot>
+      <FieldStartIndicator>{startIcon}</FieldStartIndicator>
+      <PrimitiveInput
+        {...(fieldProps as Omit<FieldInputElProps, 'size'>)}
+        {...(hasStartIcon && { 'data-has': 'start-indicator' })}
+      />
+      <FieldStatusIndicator fallback={endIcon} />
+    </FieldInputRoot>
+  )
+}

package/src/components/field/primitives.tsx

@@ -1,184 +1,104 @@
 import {
   Field,
-  type FieldHelperTextProps,
+  type FieldHelperTextProps as ArkFieldHelperTextProps,
   type FieldInputProps as ArkFieldInputProps,
-  type FieldLabelProps,
+  type FieldLabelProps as ArkFieldLabelProps,
   type FieldRootProps as ArkFieldRootProps,
-  type FieldTextareaProps,
+  type FieldTextareaProps as ArkFieldTextareaProps,
+  type FieldRequiredIndicatorProps as ArkFieldRequiredIndicatorProps,
 } from '@ark-ui/react/field'
-import type { ReactNode } from 'react'
-import { cx } from 'styled-system/css'
+import { ark, type HTMLArkProps } from '@ark-ui/react'
 import { field, type FieldVariantProps } from 'styled-system/recipes'
-import { FieldStatusIndicator } from './status-indicator'
-import { FieldStartIndicator } from './start-indicator'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+import { CerberusFieldInput } from './input'
+import { CerberusFieldErrorText } from './error-text'
 
 /**
  * This module contains all the primitives of the Field component.
  * @module 'field'
  */
 
-export type FieldRootProps = ArkFieldRootProps & FieldVariantProps
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(field)
 
-/**
- * The context & container for the Field components.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * <FieldRoot required ids={{ input: 'exampleId' }}>
- *  <FieldLabel>Label</FieldLabel>
- *  <FieldInput />
- * </FieldRoot>
- * ```
- */
-export function FieldRoot(props: FieldRootProps) {
-  const { size, ...fieldProps } = props
-  const styles = field({ size })
-  return (
-    <Field.Root
-      {...fieldProps}
-      className={cx(styles.root, fieldProps.className)}
-    />
-  )
-}
+// Root
 
-/**
- * The label for the Field component.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * <FieldRoot>
- *   <FieldLabel>Label</FieldLabel>
- * </FieldRoot>
- * ```
- */
-export function FieldLabel(props: FieldLabelProps) {
+export type FieldRootProps = CerberusPrimitiveProps<
+  ArkFieldRootProps & FieldVariantProps
+>
+export const FieldRoot = withSlotRecipe<FieldRootProps>(Field.Root, 'root')
+
+// Label
+
+function FieldLabelEl(props: FieldLabelProps) {
   const { children, ...nativeProps } = props
-  const styles = field()
   return (
-    <Field.Label {...nativeProps} className={cx(styles.label, props.className)}>
+    <Field.Label {...nativeProps}>
       {children}
       <Field.RequiredIndicator>(required)</Field.RequiredIndicator>
     </Field.Label>
   )
 }
 
-/**
- * The required indicator for the Field component.
- */
-export function FieldRequiredIndicator() {
-  return <Field.RequiredIndicator>(required)</Field.RequiredIndicator>
-}
+export type FieldLabelProps = CerberusPrimitiveProps<ArkFieldLabelProps>
+export const FieldLabel = withSlotRecipe<FieldLabelProps>(FieldLabelEl, 'label')
 
-export interface FieldInputProps
-  extends Omit<ArkFieldInputProps, 'size'>,
-    FieldVariantProps {
-  /**
-   * An optional icon to display at the start of the input.
-   */
-  startIcon?: ReactNode
-  /**
-   * An optional icon to display at the end of the input.
-   */
-  endIcon?: ReactNode
-}
-
-/**
- * The input for the Field component.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * <FieldRoot>
- *   <FieldInput />
- * </FieldRoot>
- * ```
- */
-export function FieldInput(props: FieldInputProps) {
-  const { size, startIcon, endIcon, ...fieldProps } = props
-  const styles = field({ size })
-  const hasStartIcon = Boolean(startIcon)
+// Required Indicator
 
+function FieldRequiredIndicatorEl(props: FieldRequiredIndicatorProps) {
   return (
-    <div className={styles.inputRoot}>
-      <FieldStartIndicator>{startIcon}</FieldStartIndicator>
-      <Field.Input
-        {...fieldProps}
-        {...(hasStartIcon && { 'data-has': 'start-indicator' })}
-        className={cx(styles.input, fieldProps.className)}
-      />
-      <FieldStatusIndicator fallback={endIcon} />
-    </div>
+    <Field.RequiredIndicator {...props}>(required)</Field.RequiredIndicator>
   )
 }
 
-/**
- * The helper text for the Field component that is shown when the field is
- * valid.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * <FieldRoot>
- *   <FieldInput />
- *   <FieldHelperText>Helper text</FieldHelperText>
- * </FieldRoot>
- * ```
- */
-export function FieldHelperText(props: FieldHelperTextProps) {
-  const styles = field()
-
-  if (!props.children) return null
-
-  return (
-    <Field.HelperText
-      {...props}
-      className={cx(styles.helperText, props.className)}
-    />
-  )
-}
-
-/**
- * The error text for the Field component that is shown when the field is
- * invalid.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * <FieldRoot>
- *   <FieldInput />
- *   <FieldErrorText>Error text</FieldErrorText>
- * </FieldRoot>
- * ```
- */
-export function FieldErrorText(props: FieldHelperTextProps) {
-  const styles = field()
-
-  if (!props.children) return null
-
-  return (
-    <Field.ErrorText
-      {...props}
-      className={cx(styles.errorText, props.className)}
-    />
-  )
-}
-
-/**
- * The textarea for the Field component.
- * @description [Field Docs](https://cerberus.digitalu.design/react/field)
- * @example
- * ```tsx
- * <FieldRoot>
- *   <FieldTextarea />
- * </FieldRoot>
- * ```
- */
-export function FieldTextarea(props: FieldTextareaProps) {
-  const styles = field()
-  return (
-    <Field.Textarea
-      {...props}
-      className={cx(styles.textarea, props.className)}
-    />
-  )
-}
+export type FieldRequiredIndicatorProps =
+  CerberusPrimitiveProps<ArkFieldRequiredIndicatorProps>
+export const FieldRequiredIndicator = withNoRecipe<FieldRequiredIndicatorProps>(
+  FieldRequiredIndicatorEl,
+)
+
+// Input
+
+export type FieldInputRootProps = CerberusPrimitiveProps<
+  HTMLArkProps<'div'> & FieldVariantProps
+>
+export const FieldInputRoot = withSlotRecipe<FieldInputRootProps>(
+  ark.div,
+  'inputRoot',
+)
+
+export type FieldInputProps = CerberusPrimitiveProps<
+  ArkFieldInputProps & FieldVariantProps
+>
+export const FieldInput = withSlotRecipe<FieldInputProps>(Field.Input, 'input')
+
+// Helper Text
+
+export type FieldHelperTextProps =
+  CerberusPrimitiveProps<ArkFieldHelperTextProps>
+export const FieldHelperText = withSlotRecipe<FieldHelperTextProps>(
+  Field.HelperText,
+  'helperText',
+)
+
+// Error Text
+
+export type FieldErrorTextProps =
+  CerberusPrimitiveProps<ArkFieldHelperTextProps>
+export const FieldErrorText = withSlotRecipe<FieldErrorTextProps>(
+  CerberusFieldErrorText,
+  'errorText',
+)
+
+// Textarea
+
+export type FieldTextareaProps = CerberusPrimitiveProps<ArkFieldTextareaProps>
+export const FieldTextarea = withSlotRecipe<FieldTextareaProps>(
+  Field.Textarea,
+  'textarea',
+)
 
 /**
  * A named export for the FieldInput component.
@@ -188,9 +108,6 @@ export function FieldTextarea(props: FieldTextareaProps) {
  * import { Input } from '@cerberus/react'
  *
  * <Field
- *   ids={{
- *    control: 'email',
- *   }}
  *   label="Enter your email"
  *   helperText="We'll never share your email with anyone else."
  *   errorText="Email is required."
@@ -200,5 +117,21 @@ export function FieldTextarea(props: FieldTextareaProps) {
  * </Field>
  * ```
  */
-export const Input = FieldInput
+export const Input = CerberusFieldInput
+
+/**
+ * A named export for the FieldTextarea component.
+ * @description [Field Docs](https://cerberus.digitalu.design/react/field)
+ * @example
+ * ```tsx
+ * import { Textarea } from '@cerberus/react'
+ *
+ * <Field
+ *   label="Comments"
+ *   helperText="Your comments are valuable to us."
+ * >
+ *   <Textarea />
+ * </Field>
+ * ```
+ */
 export const Textarea = FieldTextarea

package/src/components/fieldset/fieldset.tsx

@@ -1,14 +1,13 @@
-import type { FieldsetRootProps } from '@ark-ui/react'
 import { splitProps } from '../../utils'
 import { FieldsetParts } from './parts'
-import type { FieldsetVariantProps } from 'styled-system/recipes'
+import type { FieldsetRootProps } from './primitives'
 
 /**
  * This module contains the Fieldset component.
  * @module Fieldset
  */
 
-export interface FieldsetProps extends FieldsetRootProps, FieldsetVariantProps {
+export interface FieldsetProps extends FieldsetRootProps {
   /**
    * The legend/title/label of the fieldset group.
    */