@cerberus-design/react 0.18.4 → 0.19.1

package/src/components/theme/theme.tsx

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from 'react'
+import type { ColorModes, CustomThemes } from '../../context/theme'
+import { cerberus, type CerberusPrimitiveProps } from '../../system'
+
+export interface ThemeProps<T extends string> {
+  /**
+   * The color mode to apply to the theme.
+   * @default 'light'
+   */
+  mode?: ColorModes
+  /**
+   * The theme to apply to the component.
+   * @default 'cerberus'
+   */
+  theme?: CustomThemes<T>
+}
+
+export function Theme<T extends string>(
+  props: PropsWithChildren<CerberusPrimitiveProps<ThemeProps<T>>>,
+) {
+  const { mode, theme, ...nativeProps } = props
+  const colorMode = mode || 'light'
+  const themeName = theme || 'cerberus'
+
+  return (
+    <cerberus.div
+      {...nativeProps}
+      data-panda-theme={themeName}
+      data-color-mode={colorMode}
+    >
+      {props.children}
+    </cerberus.div>
+  )
+}

package/src/components/toggle/primitives.tsx

@@ -1,25 +1,29 @@
 import {
   Toggle,
-  type ToggleIndicatorProps,
-  type ToggleRootProps,
+  type ToggleIndicatorProps as ArkToggleIndicatorProps,
+  type ToggleRootProps as ArkToggleRootProps,
 } from '@ark-ui/react/toggle'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module provides the Toggle primitives.
  * @module 'react/toggle'
  */
 
-/**
- * The ToggleRoot is used to manage the state of the Toggle component.
- */
-export function ToggleRoot(props: ToggleRootProps) {
-  return <Toggle.Root {...props} />
-}
+const { withNoRecipe } = createCerberusPrimitive()
 
-/**
- * The ToggleIndicator is used to render the indicator of the Toggle component
- * based on the pressed state.
- */
-export function ToggleIndicator(props: ToggleIndicatorProps) {
-  return <Toggle.Indicator {...props} />
-}
+// Root
+
+export type ToggleRootProps = CerberusPrimitiveProps<ArkToggleRootProps>
+export const ToggleRoot = withNoRecipe<ToggleRootProps>(Toggle.Root)
+
+// Indicator
+
+export type ToggleIndicatorProps =
+  CerberusPrimitiveProps<ArkToggleIndicatorProps>
+export const ToggleIndicator = withNoRecipe<ToggleIndicatorProps>(
+  Toggle.Indicator,
+)

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/parts.ts

@@ -0,0 +1,59 @@
+import type { ElementType } from 'react'
+import {
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipPositioner,
+  TooltipContent,
+  TooltipArrow,
+  TooltipArrowTip,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Tooltip component.
+ * @module 'tooltip/parts'
+ */
+
+interface TooltipPartsValue {
+  /**
+   * The context provider of the tooltip.
+   */
+  Root: ElementType
+  /**
+   * The trigger that of the tooltip.
+   */
+  Trigger: ElementType
+  /**
+   * The positioner of the tooltip.
+   */
+  Positioner: ElementType
+  /**
+   * The content of the tooltip.
+   */
+  Content: ElementType
+  /**
+   * The arrow of the tooltip.
+   */
+  Arrow: ElementType
+  /**
+   * The arrow tip of the tooltip.
+   */
+  ArrowTip: ElementType
+}
+
+/**
+ * An Object containing the parts of the Tooltip component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TooltipParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const TooltipParts: TooltipPartsValue = {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Positioner: TooltipPositioner,
+  Content: TooltipContent,
+  Arrow: TooltipArrow,
+  ArrowTip: TooltipArrowTip,
+}

package/src/components/tooltip/primitives.ts

@@ -0,0 +1,71 @@
+import {
+  Tooltip,
+  type TooltipRootProps as ArkTooltipRootProps,
+  type TooltipTriggerProps as ArkTooltipTriggerProps,
+  type TooltipPositionerProps as ArkTooltipPositionerProps,
+  type TooltipContentProps as ArkTooltipContentProps,
+  type TooltipArrowProps as ArkTooltipArrowProps,
+  type TooltipArrowTipProps as ArkTooltipArrowTipProps,
+} from '@ark-ui/react/tooltip'
+import { tooltip } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+
+/**
+ * This module contains the Tooltip primitive components.
+ * @module TooltipPrimitives
+ */
+
+const { withSlotRecipe } = createCerberusPrimitive(tooltip)
+
+// Root
+
+export type TooltipRootProps = CerberusPrimitiveProps<ArkTooltipRootProps>
+export const TooltipRoot = withSlotRecipe<TooltipRootProps>(
+  Tooltip.Root,
+  'root',
+)
+
+// Trigger
+
+export type TooltipTriggerProps = CerberusPrimitiveProps<ArkTooltipTriggerProps>
+export const TooltipTrigger = withSlotRecipe<TooltipTriggerProps>(
+  Tooltip.Trigger,
+  'trigger',
+)
+
+// Positioner
+
+export type TooltipPositionerProps =
+  CerberusPrimitiveProps<ArkTooltipPositionerProps>
+export const TooltipPositioner = withSlotRecipe<TooltipPositionerProps>(
+  Tooltip.Positioner,
+  'positioner',
+)
+
+// Content
+
+export type TooltipContentProps = CerberusPrimitiveProps<ArkTooltipContentProps>
+export const TooltipContent = withSlotRecipe<TooltipContentProps>(
+  Tooltip.Content,
+  'content',
+)
+
+// Arrow
+
+export type TooltipArrowProps = CerberusPrimitiveProps<ArkTooltipArrowProps>
+export const TooltipArrow = withSlotRecipe<TooltipArrowProps>(
+  Tooltip.Arrow,
+  'arrow',
+)
+
+// ArrowTip
+
+export type TooltipArrowTipProps =
+  CerberusPrimitiveProps<ArkTooltipArrowTipProps>
+export const TooltipArrowTip = withSlotRecipe<TooltipArrowTipProps>(
+  Tooltip.ArrowTip,
+  'arrowTip',
+)

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import { TooltipParts } from './parts'
+import type { TooltipRootProps } from './primitives'
+
+/**
+ * This module contains the Tooltip component.
+ * @module Tooltip
+ */
+
+export interface TooltipProps extends TooltipRootProps {
+  /**
+   * The text content to display in the tooltip.
+   */
+  content: ReactNode
+}
+
+/**
+ * The Tooltip component is used to provide additional information about an element when it is hovered over.
+ * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Information />
+ * </Tooltip>
+ */
+export function Tooltip(props: TooltipProps) {
+  const { content, children, ...rootProps } = props
+  const position = {
+    placement: props.positioning || 'top',
+  }
+
+  return (
+    <TooltipParts.Root openDelay={400} positioning={position} {...rootProps}>
+      <TooltipParts.Trigger asChild>{children}</TooltipParts.Trigger>
+
+      <TooltipParts.Positioner>
+        <TooltipParts.Content>
+          <TooltipParts.Arrow>
+            <TooltipParts.ArrowTip />
+          </TooltipParts.Arrow>
+          {content}
+        </TooltipParts.Content>
+      </TooltipParts.Positioner>
+    </TooltipParts.Root>
+  )
+}

package/src/context/confirm-modal.tsx

@@ -14,7 +14,7 @@ import {
 import { css } from 'styled-system/css'
 import { HStack, VStack } from 'styled-system/jsx'
 import { Button } from '../components/button/button'
-import { Show } from '../components/Show'
+import { Show } from '../components/show/index'
 import { Avatar } from '../components/avatar/avatar'
 import {
   Dialog,

package/src/context/prompt-modal.tsx

@@ -17,9 +17,9 @@ import { css } from 'styled-system/css'
 import { hstack } from 'styled-system/patterns'
 import { FieldLabel, FieldRoot, Input } from '../components/field/index'
 import { Button } from '../components/button/button'
-import { Show } from '../components/Show'
+import { Show } from '../components/show/index'
 import { Avatar } from '../components/avatar/avatar'
-import { Text } from '../components/Text'
+import { Text } from '../components/text/index'
 import {
   Dialog,
   DialogDescription,
@@ -135,12 +135,9 @@ export function PromptModal(
     [content],
   )
 
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setInputValue(e.currentTarget.value)
-    },
-    [content],
-  )
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.currentTarget.value)
+  }, [])
 
   const handleChoice = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {

package/src/hooks/useRootColors.ts

@@ -33,12 +33,12 @@ export function useRootColors(colors: string[] = []): RootColorsResult {
       dispatch(formatColors(colors))
       resolve()
     })
-  }, [])
+  }, [colors])
 
   useEffect(() => {
     if (Object.keys(state).length === colors.length) return
     dispatch(formatColors(colors))
-  }, [colors])
+  }, [colors, state])
 
   // reducer is already memoized
   return useMemo(

package/src/index.ts

@@ -14,6 +14,7 @@ export * from './components/deprecated/NavMenuLink'
 export * from './components/deprecated/Legend'
 export * from './hooks/useDate'
 export * from './hooks/useToggle'
+export * from './components/Droppable'
 
 // components
 
@@ -22,35 +23,34 @@ export * from './components/accordion/index'
 export * from './components/avatar/index'
 export * from './components/button/index'
 export * from './components/checkbox/index'
-export * from './components/CircularProgress'
+export * from './components/circular-progress/index'
 export * from './components/combobox/index'
 export * from './components/cta-dialog/index'
 export * from './components/date-picker/index'
 export * from './components/dialog/index'
-export * from './components/Droppable'
-export * from './components/FeatureFlag'
+export * from './components/feature-flag/index'
 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/Menu'
+export * from './components/file-upload/index'
+export * from './components/for/index'
+export * from './components/icon-button/index'
+export * from './components/menu/index'
 export * from './components/notifications/index'
-export * from './components/Portal'
-export * from './components/ProgressBar'
+export * from './components/portal/index'
+export * from './components/progress/index'
 export * from './components/radio/index'
 export * from './components/rating/index'
 export * from './components/select/index'
-export * from './components/Show'
-export * from './components/Spinner'
+export * from './components/show/index'
+export * from './components/spinner/index'
 export * from './components/switch/index'
 export * from './components/table/index'
 export * from './components/tabs/index'
-export * from './components/Tag'
-export * from './components/Text'
+export * from './components/tag/index'
+export * from './components/text/index'
+export * from './components/theme/index'
 export * from './components/toggle/index'
-export * from './components/Tooltip'
+export * from './components/tooltip/index'
 
 // context
 
@@ -66,15 +66,11 @@ export * from './context/theme'
 export * from './hooks/useTheme'
 export * from './hooks/useRootColors'
 
-// aria-helpers
-
-export * from './aria-helpers/nav-menu.aria'
-export * from './aria-helpers/trap-focus.aria'
-
 // utils
 
 export * from './config/index'
 export * from './utils/index'
+export * from './system/index'
 
 // shared types
 

package/src/system/factory.ts

@@ -0,0 +1,37 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentType } from 'react'
+import { CerberusPrimitive } from './primitive-factory'
+
+function cerberusFactory<T extends Record<string, unknown>>(
+  component: keyof typeof ark,
+  defaultProps?: T,
+) {
+  const { withNoRecipe } = new CerberusPrimitive()
+  const arkComponent = ark[component] as ComponentType
+
+  if (arkComponent) {
+    return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} })
+  }
+
+  throw new Error(
+    `Component "${String(component)}" is not a valid Cerberus component. Please check the component name.`,
+  )
+}
+
+const cache = new Map()
+
+// Create a proxy that handles both function calls and property access
+export const cerberusFactoryProxy = new Proxy(cerberusFactory, {
+  apply(target, thisArg, argArray) {
+    // Handle function calls like cerberus('button')
+    // @ts-expect-error: Ignore type error for dynamic property access
+    return target.apply(thisArg, argArray)
+  },
+  get(_target, el: keyof typeof ark) {
+    // Handle property access like cerberus.button
+    if (!cache.has(el)) {
+      cache.set(el, cerberusFactory(el))
+    }
+    return cache.get(el) as ReturnType<typeof cerberusFactory>
+  },
+})

package/src/system/index.ts

@@ -0,0 +1,47 @@
+import { CerberusPrimitive } from './primitive-factory'
+import type { CerberusFactory, CerberusPrimitiveRecipe } from './types'
+import { cerberusFactoryProxy } from './factory'
+
+/**
+ * This module contains the user interface for creating Cerberus primitives.
+ * @module @cerberus/core/system/create-cerb-primitive
+ */
+
+/**
+ * A factory function that creates a Cerberus primitive instance with the given
+ * recipe.
+ * @param recipe
+ * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that
+ * apply the recipes and special Cerberus helpers like `css`.
+ *
+ * @example
+ * ```tsx
+ * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);
+ * export const Button = withRecipe(MyCustomButton)
+ * ```
+ */
+export function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(
+  recipe?: T,
+) {
+  return new CerberusPrimitive(recipe)
+}
+
+/**
+ * A utility function to access Cerberus components by their name.
+ * @param component - The name of the Cerberus component to access.
+ * @returns The Cerberus component corresponding to the provided name.
+ * @throws An error if the component name is not valid.
+ *
+ * @example
+ * ```tsx
+ * import { cerberus } from '@cerberus/react'
+ * const Button = cerberus('button')
+ *
+ * <Button css={{ color: 'blue' }} asChild>
+ *  <Link href="/some-page">Click me</Link>
+ * </Button>
+ * ```
+ */
+export const cerberus = cerberusFactoryProxy as CerberusFactory
+
+export * from './types'

package/src/system/primitive-factory.tsx

@@ -0,0 +1,151 @@
+import { css, cx } from 'styled-system/css'
+import type { RecipeVariantRecord } from 'styled-system/types'
+import {
+  type ComponentType,
+  type HTMLAttributes,
+  type PropsWithChildren,
+} from 'react'
+import type { WithCss } from '../types'
+import type {
+  CerberusPrimitiveEl,
+  CerberusPrimitiveRecipe,
+  CerberusRecipe,
+  CerberusSlotRecipe,
+  WithRecipeOptions,
+} from './types'
+
+/**
+ * This module contains a factory for creating Cerberus primitives.
+ * @module @cerberus/core/system/factory
+ */
+
+export class CerberusPrimitive {
+  recipe: CerberusPrimitiveRecipe | null
+
+  constructor(recipe?: CerberusPrimitiveRecipe) {
+    this.recipe = recipe ?? null
+  }
+
+  private hasStyles(styles: string | undefined): Record<string, unknown> {
+    if (styles) {
+      return {
+        className: styles,
+      }
+    }
+    return {}
+  }
+
+  private validateComponent<P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+  ) {
+    if (typeof Component !== 'function' && typeof Component !== 'object') {
+      throw new Error('Expected a React component as the first argument.')
+    }
+  }
+
+  /**
+   * Creates a Cerberus component with bare features and no recipe.
+   * @param Component - The React component to enhance with Cerberus features.
+   * @returns A new React component that applies Cerberus features to the
+   * original component.
+   * @example
+   * ```typescript
+   * const { withNoRecipe } = createCerberusPrimitive(button)
+   * const Button = withNoRecipe(RawButton)
+   * ```
+   */
+  withNoRecipe = <P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+    options?: WithRecipeOptions,
+  ): CerberusPrimitiveEl<P> => {
+    const { defaultProps } = options || {}
+
+    this.validateComponent(Component)
+
+    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {
+      const { css: customCss, className, ...nativeProps } = props
+      const styles = this.hasStyles(cx(className, css(customCss)))
+      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />
+    }
+
+    CerbComponent.displayName = Component.displayName || Component.name
+    return CerbComponent
+  }
+
+  /**
+   * Creates a Cerberus component with the given recipe.
+   * @param Component - The React component to enhance with the recipe.
+   * @param options - Options for the recipe.
+   * @returns A new React component that applies the recipe to the original
+   * component.
+   */
+  withRecipe = <P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+    options?: WithRecipeOptions,
+  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {
+    const { defaultProps } = options || {}
+    const recipe = this.recipe as CerberusRecipe
+
+    this.validateComponent(Component)
+
+    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
+      const { css: customCss, className, ...nativeProps } = internalProps
+
+      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const recipeStyles = recipe(variantOptions)
+
+      return (
+        <Component
+          {...defaultProps}
+          {...(nativeProps as P)}
+          className={cx(className, recipeStyles, css(customCss))}
+        />
+      )
+    }
+
+    CerbComponent.displayName = Component.displayName || Component.name
+    return CerbComponent
+  }
+
+  /**
+   * Creates a Cerberus component with a slot recipe applied.
+   * @param Component - The React component to enhance with Cerberus features.
+   * @param recipe - The slot recipe to apply to the component.
+   * @returns A new React component that applies Cerberus features and the
+   * specified slot recipe to the original component.
+   * @example
+   * ```typescript
+   * const { withSlotRecipe } = createCerberusPrimitive(field)
+   * const Field = withSlotRecipe(RawField, field)
+   * ```
+   */
+  withSlotRecipe = <P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+    slot: keyof RecipeVariantRecord,
+    options?: WithRecipeOptions,
+  ) => {
+    const { defaultProps } = options || {}
+    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>
+
+    this.validateComponent(Component)
+
+    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
+      const { css: customCss, className, ...nativeProps } = internalProps
+
+      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const styles = recipe(variantOptions)
+      const slotStyles = styles[slot as keyof typeof styles]
+
+      return (
+        <Component
+          {...defaultProps}
+          {...(nativeProps as P)}
+          className={cx(className, slotStyles, css(customCss))}
+        />
+      )
+    }
+
+    CerbComponent.displayName = Component.displayName || Component.name
+    return CerbComponent
+  }
+}

package/src/system/types.ts

@@ -0,0 +1,58 @@
+import type {
+  RecipeVariantFn,
+  RecipeVariantRecord,
+  SlotRecipeVariantFn,
+  SlotRecipeVariantRecord,
+} from 'styled-system/types'
+import type { WithCss } from '../types'
+import type { ElementType, PropsWithChildren } from 'react'
+import type { ark } from '@ark-ui/react/factory'
+
+// Method signatures for recipes
+
+type RecipeBase = {
+  splitVariantProps: (
+    props: Record<string, unknown>,
+  ) => [Record<string, unknown>, Record<string, unknown>]
+}
+
+export type CerberusRecipe = RecipeVariantFn<RecipeVariantRecord> & RecipeBase
+export type CerberusSlotRecipe<T extends string> = SlotRecipeVariantFn<
+  string,
+  SlotRecipeVariantRecord<T>
+> &
+  RecipeBase
+
+export type CerberusPrimitiveRecipe =
+  | CerberusRecipe
+  | CerberusSlotRecipe<string>
+
+export type WithRecipeOptions = {
+  defaultProps?: Record<string, unknown>
+}
+
+// Primitive Response
+
+export type CerberusPrimitiveProps<T> = WithCss & PropsWithChildren<T>
+export type CerberusPrimitiveEl<T = object> = ElementType<
+  CerberusPrimitiveProps<T>
+>
+
+// Factory
+
+export type ArkPropsWithRef<T extends keyof typeof ark> = {
+  [K in keyof (typeof ark)[T]]: K extends 'asChild' ? never : (typeof ark)[T][K]
+} & {
+  asChild?: boolean
+}
+
+export type CerberusFactoryFn = <T extends Record<string, unknown>>(
+  component: keyof typeof ark,
+  defaultProps?: T,
+) => CerberusPrimitiveEl
+
+export type CerberusFactoryObject = {
+  [K in keyof typeof ark]: CerberusPrimitiveEl
+}
+
+export type CerberusFactory = CerberusFactoryFn & CerberusFactoryObject