@cerberus-design/react 1.0.0-rc.4 → 1.0.0-rc.6

package/src/hooks/useRootColors.ts

@@ -1,72 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useMemo, useReducer } from 'react'
-
-/**
- * This module provides a hook to get Cerberus colors from the document root.
- * @module useRootColors
- */
-
-export interface RootColorsResult {
-  /**
-   * A record of Cerberus colors where the key is the token name provided and the value is the color hex.
-   */
-  colors: Record<string, string>
-  /**
-   * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.
-   */
-  refetch: () => Promise<void>
-}
-
-/**
- * This hook returns a record of Cerberus colors from the document root.
- * This is useful when you are working with a component that uses the `<canvas>`
- * element.
- * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).
- * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.
- */
-export function useRootColors(colors: string[] = []): RootColorsResult {
-  const [state, dispatch] = useReducer(rootColorsReducer, {})
-
-  const handleRefetch = useCallback(() => {
-    return new Promise<void>((resolve) => {
-      dispatch(formatColors(colors))
-      resolve()
-    })
-  }, [colors])
-
-  useEffect(() => {
-    if (Object.keys(state).length === colors.length) return
-    dispatch(formatColors(colors))
-  }, [colors, state])
-
-  // reducer is already memoized
-  return useMemo(
-    () => ({ colors: state, refetch: handleRefetch }),
-    [state, handleRefetch],
-  )
-}
-
-function formatColors(colors: string[]): Record<string, string> {
-  const rootStyles = getComputedStyle(document.body)
-  return colors.reduce(
-    (acc, color) => {
-      const formattedColor = color
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .toLowerCase()
-        .replaceAll('.', '-')
-      acc[color] = rootStyles
-        .getPropertyValue(`--cerberus-colors-${formattedColor}`)
-        .trim()
-      return acc
-    },
-    {} as Record<string, string>,
-  )
-}
-
-function rootColorsReducer(
-  state: Record<string, string>,
-  action: Record<string, string>,
-): Record<string, string> {
-  return { ...state, ...action }
-}

package/src/hooks/useTheme.ts

@@ -1,121 +0,0 @@
-'use client'
-
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'react'
-import {
-  type ColorModes,
-  type CustomThemes,
-  type DefaultThemes,
-  type ThemeContextValue,
-} from '../context/theme'
-
-/**
- * This module provides a hook for using the theme.
- * @module
- */
-
-export const THEME_KEY = 'cerberus-theme'
-export const MODE_KEY = 'cerberus-mode'
-
-export interface UseThemeOptions<T extends string = DefaultThemes> {
-  /**
-   * Whether to cache the theme in local storage.
-   */
-  cache?: boolean
-  /**
-   * Called when the theme is updated.
-   */
-  updateTheme?: (theme: T) => void
-  /**
-   * Called when the color mode is updated.
-   */
-  updateMode?: (mode: ColorModes) => void
-}
-
-/**
- * Provides a hook for using the theme for a single instance of the application.
- * @see https://cerberus.digitalu.design/react/use-theme
- * @param defaultTheme The default theme.
- * @param defaultColorMode The default color mode.
- * @param options Additional options.
- */
-export function useTheme<C extends string = DefaultThemes>(
-  defaultTheme: CustomThemes<C> = 'cerberus',
-  defaultColorMode: ColorModes = 'light',
-  options: UseThemeOptions<C> = {},
-): ThemeContextValue<C> {
-  const { updateMode, updateTheme, cache } = options
-  const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)
-  const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)
-
-  const handleThemeChange = useCallback(
-    (newTheme: C) => {
-      setTheme(newTheme)
-      updateTheme?.(newTheme)
-    },
-    [updateTheme],
-  )
-
-  const handleColorModeChange = useCallback(
-    (newMode: ColorModes) => {
-      setColorMode(newMode)
-      updateMode?.(newMode)
-    },
-    [updateMode],
-  )
-
-  useLayoutEffect(() => {
-    const theme = localStorage.getItem(THEME_KEY)
-    if (theme) {
-      setTheme(theme as CustomThemes<C>)
-    }
-  }, [])
-
-  useLayoutEffect(() => {
-    const mode = localStorage.getItem(MODE_KEY)
-    if (mode) {
-      setColorMode(mode as ColorModes)
-    }
-  }, [])
-
-  useEffect(() => {
-    const root = document.documentElement
-    root.dataset.pandaTheme = theme
-
-    if (cache) {
-      localStorage.setItem(THEME_KEY, theme)
-    }
-  }, [theme, cache])
-
-  useEffect(() => {
-    const root = document.documentElement
-
-    if (colorMode === 'system') {
-      root.dataset.colorMode = window.matchMedia('(prefers-color-scheme: dark)')
-        .matches
-        ? 'dark'
-        : 'light'
-    } else {
-      root.dataset.colorMode = colorMode
-    }
-
-    if (cache) {
-      localStorage.setItem(MODE_KEY, colorMode)
-    }
-  }, [colorMode, cache])
-
-  return useMemo(
-    () => ({
-      theme,
-      mode: colorMode,
-      updateTheme: handleThemeChange,
-      updateMode: handleColorModeChange,
-    }),
-    [theme, colorMode, handleThemeChange, handleColorModeChange],
-  )
-}

package/src/index.client.ts

@@ -1,30 +0,0 @@
-'use client'
-
-// Unstyled Ark Goodies
-
-export {
-  AccordionRootProvider,
-  useAccordion,
-  useCollapsible,
-  useCollapsibleContext,
-  DialogRootProvider,
-  useDialog,
-  FileUploadRootProvider,
-  useFileUpload,
-  usePagination,
-  usePaginationContext,
-  // utilities
-  ClientOnly,
-  DownloadTrigger,
-  FocusTrap,
-  Format,
-  Frame,
-  Highlight,
-  JsonTreeView,
-  useJsonTreeView,
-  Presence,
-  EnvironmentProvider,
-  useEnvironmentContext,
-  LocaleProvider,
-  useLocaleContext,
-} from '@ark-ui/react'

package/src/index.ts

@@ -1,76 +0,0 @@
-/**
- * This module is the entry point for the Cerberus React package.
- * @module
- */
-
-// components
-
-export * from './components/admonition/index'
-export * from './components/accordion/index'
-export * from './components/avatar/index'
-export * from './components/button/index'
-export * from './components/carousel/index'
-export * from './components/checkbox/index'
-export * from './components/circular-progress/index'
-export * from './components/clipboard/index'
-export * from './components/collapsible/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/feature-flag/index'
-export * from './components/field/index'
-export * from './components/fieldset/index'
-export * from './components/file-upload/index'
-export * from './components/for/index'
-export * from './components/group/index'
-export * from './components/icon-button/index'
-export * from './components/menu/index'
-export * from './components/notifications/index'
-export * from './components/number-input/index'
-export * from './components/pagination/index'
-export * from './components/pin-input/index'
-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/index'
-export * from './components/spinner/index'
-export * from './components/split-button/index'
-export * from './components/switch/index'
-export * from './components/table/index'
-export * from './components/tabs/index'
-export * from './components/tag/index'
-export * from './components/text/index'
-export * from './components/theme/index'
-export * from './components/toggle/index'
-export * from './components/tooltip/index'
-
-// context
-
-export * from './context/cerberus'
-export * from './context/confirm-modal'
-export * from './context/feature-flags'
-export * from './context/navMenu'
-export * from './context/prompt-modal'
-export * from './context/theme'
-
-// hooks
-
-export * from './hooks/useTheme'
-export * from './hooks/useRootColors'
-
-// utils
-
-export * from './config/index'
-export * from './utils/index'
-export * from './system/index'
-
-// shared types
-
-export * from './types'
-
-// 3rd party exports
-
-export * from './index.client'

package/src/system/factory.ts

@@ -1,32 +0,0 @@
-import { ark } from '@ark-ui/react/factory'
-import { cerberus } from 'styled-system/jsx/factory'
-
-function cerberusFactory(component: keyof typeof ark) {
-  const arkComponent = ark[component]
-
-  if (arkComponent) {
-    return cerberus(arkComponent)
-  }
-
-  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

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

@@ -1,180 +0,0 @@
-import { ark } from '@ark-ui/react/factory'
-import { forwardRef, type ElementType } from 'react'
-import { css, cx, type Styles } from 'styled-system/css'
-import { cerberus } from 'styled-system/jsx/factory'
-import type {
-  CerberusComponent,
-  RecipeVariantRecord,
-} from 'styled-system/types'
-import type { ExtractProps } from '../types'
-import type {
-  CerberusPrimitiveEl,
-  CerberusPrimitiveProps,
-  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 setupStyledComponent<T extends ElementType>(
-    component: T | CerberusPrimitiveEl<T>,
-  ): CerberusComponent<T> {
-    const arkComponent = ark[component as keyof typeof ark]
-
-    if (typeof component !== 'string') {
-      return cerberus(component)
-    }
-
-    if (arkComponent) {
-      return cerberus(arkComponent)
-    }
-
-    throw new Error(`Unknown component: ${component}`)
-  }
-
-  /**
-   * Creates a Cerberus component with bare features and no recipe.
-   * @param Component - The React component to enhance with Cerberus features.
-   * Can be a string or a component reference.
-   * @returns A new React component that applies Cerberus features to the
-   * original component.
-   *
-   * @example
-   * ```ts
-   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
-   * const Button = withNoRecipe('button')
-   * ```
-   */
-  withNoRecipe = <T extends ElementType>(
-    Component: T | CerberusPrimitiveEl<T>,
-    options?: WithRecipeOptions,
-  ) => {
-    type Props = ExtractProps<T>
-    const { defaultProps } = options || {}
-    const El = this.setupStyledComponent<T>(Component)
-
-    const CerbComponent = (props: CerberusPrimitiveProps<Props>) => {
-      return <El {...defaultProps} {...props} />
-    }
-
-    const ElName = typeof El === 'string' ? El : El.displayName || El.name
-    CerbComponent.displayName = `Cerberus.${ElName}`
-
-    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 = <T extends ElementType>(
-    Component: T,
-    options?: WithRecipeOptions,
-  ) => {
-    type Props = ExtractProps<T>
-    const { defaultProps } = options || {}
-    const El = this.setupStyledComponent<T>(Component)
-
-    const recipe = this.recipe as CerberusRecipe
-
-    const CerbComponent = forwardRef<unknown, CerberusPrimitiveProps<Props>>(
-      (internalProps, ref) => {
-        const { css: customCss, ...restOfInternalProps } = internalProps
-
-        const [variantOptions, nativeProps] =
-          recipe.splitVariantProps(restOfInternalProps)
-        const recipeStyles = recipe(variantOptions)
-
-        // Safely access className
-        const className =
-          typeof nativeProps.className === 'string'
-            ? nativeProps.className
-            : undefined
-
-        return (
-          <El
-            {...defaultProps}
-            {...(nativeProps as Props)}
-            ref={ref}
-            className={cx(className, recipeStyles, css(customCss as Styles))}
-          />
-        )
-      },
-    )
-
-    const ElName = typeof El === 'string' ? El : El.displayName || El.name
-    CerbComponent.displayName = ElName
-
-    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 = <T extends ElementType>(
-    Component: T,
-    slot: keyof RecipeVariantRecord,
-    options?: WithRecipeOptions,
-  ) => {
-    type Props = ExtractProps<T>
-    const { defaultProps } = options || {}
-    const El = this.setupStyledComponent<T>(Component)
-
-    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>
-
-    const CerbComponent = forwardRef<unknown, CerberusPrimitiveProps<Props>>(
-      (internalProps, ref) => {
-        const { css: customCss, ...restOfInternalProps } = internalProps
-
-        const [variantOptions, nativeProps] =
-          recipe.splitVariantProps(restOfInternalProps)
-        const styles = recipe(variantOptions)
-        const slotStyles = styles[slot as keyof typeof styles]
-
-        // Safely access className
-        const className =
-          typeof nativeProps.className === 'string'
-            ? nativeProps.className
-            : undefined
-
-        return (
-          <El
-            {...defaultProps}
-            {...(nativeProps as Props)}
-            ref={ref}
-            className={cx(className, slotStyles, css(customCss as Styles))}
-          />
-        )
-      },
-    )
-
-    const ElName = typeof El === 'string' ? El : El.displayName || El.name
-    CerbComponent.displayName = ElName
-
-    return CerbComponent
-  }
-}

package/src/system/types.ts

@@ -1,88 +0,0 @@
-import type { ark } from '@ark-ui/react/factory'
-import type { CSSProperties, ElementType, PropsWithChildren } from 'react'
-import type {
-  AsProps,
-  Assign,
-  ComponentProps,
-  Dict,
-  JsxHTMLProps,
-  JsxStyleProps,
-  RecipeVariantFn,
-  RecipeVariantRecord,
-  SlotRecipeVariantFn,
-  SlotRecipeVariantRecord,
-  UnstyledProps,
-} from 'styled-system/types'
-
-// 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>
-}
-
-export interface BaseCerberusProps
-  extends ArkFactoryProps, JsxStyleProps, Dict, UnstyledProps, AsProps {
-  /**
-   * The CSS styles applied to the component. Supports CSS Properties
-   * declarations and style objects.
-   */
-  style?: CSSProperties | Record<string, string>
-}
-
-export type CerberusProps<
-  T extends ElementType,
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  P extends Dict = {},
-> = JsxHTMLProps<
-  ComponentProps<T> & UnstyledProps & AsProps & ArkFactoryProps,
-  Assign<JsxStyleProps, P>
->
-
-// Primitive Response
-
-export type CerberusPrimitiveProps<T> = PropsWithChildren<BaseCerberusProps> & T
-
-export type CerberusPrimitiveEl<T extends ElementType = ElementType> =
-  ElementType<CerberusProps<T>>
-
-// Factory
-
-export interface ArkFactoryProps {
-  /**
-   * If true, the component will render as a child as the provided element
-   * passing all the given props to the child.
-   */
-  asChild?: boolean
-}
-
-export type ArkPropsWithRef<T extends keyof typeof ark> = {
-  [K in keyof (typeof ark)[T]]: K extends 'asChild' ? never : (typeof ark)[T][K]
-} & ArkFactoryProps
-
-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

package/src/types.ts

@@ -1,23 +0,0 @@
-import type { ComponentType, ElementType, JSX } from 'react'
-
-// types
-
-export type Positions = 'top' | 'right' | 'bottom' | 'left'
-
-/**
- * Utility type to enforce never on all properties of a given type.
- */
-export type EnforceNoProperties<T> = {
-  [K in keyof T]: never
-}
-
-/**
- * Utility type to extract props for string elements or custom components
- */
-export type ExtractProps<T> = T extends keyof JSX.IntrinsicElements
-  ? JSX.IntrinsicElements[T]
-  : T extends ComponentType<infer P>
-    ? P
-    : T extends ElementType<infer P>
-      ? P
-      : Record<string, unknown>