@cerberus-design/react 0.18.3 → 0.19.0

package/src/components/text/text.tsx

@@ -0,0 +1,68 @@
+import {
+  Em,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  Small,
+  Span,
+  Strong,
+  type PProps,
+} from 'styled-system/jsx'
+
+/**
+ * This module exports a component for rendering text utilizing the styled-system JSX utility.
+ * @module @cerberus/react/Text
+ */
+
+export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+export type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'
+
+// For some reason we have to use the HTMLParagraphElement type here
+// or else TS will fail for non-style props like 'id' or 'className'
+export interface TextProps extends PProps {
+  /**
+   * The element to render as. Defaults to 'p'.
+   */
+  as?: TextElements | Headings
+}
+
+/**
+ * A component for rendering text utilizing the styled-system JSX utility.
+ * @definition [Text docs](https://cerberus.digitalu.design/react/text)
+ * @example
+ * ```tsx
+ * <Text as="h1" color="page.text.100" textStyle={{
+ *   base: 'heading-md',
+ *   md: 'heading-lg',
+ * }}>
+ *  Hello, world!
+ * </Text>
+ */
+export function Text(props: TextProps) {
+  const { as = 'p', ...pandaJSXProps } = props
+
+  const cache = {
+    h1: H1,
+    h2: H2,
+    h3: H3,
+    h4: H4,
+    h5: H5,
+    h6: H6,
+    strong: Strong,
+    em: Em,
+    small: Small,
+    span: Span,
+    p: P,
+  }
+
+  if (as in cache) {
+    const Component = cache[as as keyof typeof cache]
+    return <Component {...pandaJSXProps} />
+  }
+
+  return <P {...pandaJSXProps} />
+}

package/src/components/theme/index.ts

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

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,
@@ -22,6 +22,7 @@ import {
   DialogDescription,
   DialogHeading,
   DialogProvider,
+  type OpenChangeDetails,
 } from '../components/dialog'
 import { useCerberusContext } from './cerberus'
 
@@ -75,12 +76,10 @@ export type ShowConfirmModalOptions =
   | NonDestructiveConfirmModalOptions
   | DestructiveConfirmOptions
 
-export type ShowResult =
-  | ((value: boolean | PromiseLike<boolean>) => void)
-  | null
+export type ShowResult = ((value: boolean | null) => void) | null
 
 export interface ConfirmModalValue {
-  show: (options: ShowConfirmModalOptions) => Promise<boolean>
+  show: (options: ShowConfirmModalOptions) => Promise<boolean | null>
 }
 
 const ConfirmModalContext = createContext<ConfirmModalValue | null>(null)
@@ -142,7 +141,7 @@ export function ConfirmModal(
 
   const handleShow = useCallback(
     (options: ShowConfirmModalOptions) => {
-      return new Promise<boolean>((resolve) => {
+      return new Promise<boolean | null>((resolve) => {
         setContent({ ...options })
         setOpen(true)
         resolveRef.current = resolve
@@ -151,6 +150,17 @@ export function ConfirmModal(
     [setOpen, setContent],
   )
 
+  const handleOpenChange = useCallback(
+    ({ open }: OpenChangeDetails) => {
+      setOpen(open)
+      if (!open) {
+        resolveRef.current?.(null)
+        resolveRef.current = null
+      }
+    },
+    [setOpen],
+  )
+
   const value = useMemo(
     () => ({
       show: handleShow,
@@ -162,36 +172,48 @@ export function ConfirmModal(
     <ConfirmModalContext.Provider value={value}>
       {props.children}
 
-      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
-        <Dialog size="sm">
-          <VStack gap="xl" w="full">
-            <VStack alignItems="flex-start" gap="md" w="full">
-              <HStack
-                alignSelf="center"
-                justify="center"
-                paddingBlockEnd="md"
-                w="full"
-              >
-                <Show
-                  when={palette === 'danger'}
-                  fallback={
-                    <Avatar
-                      gradient="charon-light"
-                      fallback={<ConfirmIcon size={24} />}
-                    />
-                  }
-                >
+      <DialogProvider open={open} onOpenChange={handleOpenChange}>
+        <Dialog
+          size="sm"
+          style={{
+            '--dialog-content-min-h': 'auto',
+          }}
+        >
+          <VStack
+            alignItems="flex-start"
+            gap="md"
+            justify="space-between"
+            w="full"
+          >
+            <HStack
+              alignSelf="center"
+              justify="center"
+              paddingBlockEnd="md"
+              w="full"
+            >
+              <Show
+                when={palette === 'danger'}
+                fallback={
                   <Avatar
-                    gradient="hades-dark"
+                    gradient="charon-light"
                     fallback={<ConfirmIcon size={24} />}
                   />
-                </Show>
-              </HStack>
-              <DialogHeading>{content?.heading}</DialogHeading>
+                }
+              >
+                <Avatar
+                  gradient="hades-dark"
+                  fallback={<ConfirmIcon size={24} />}
+                />
+              </Show>
+            </HStack>
+
+            <DialogHeading>{content?.heading}</DialogHeading>
+
+            <Show when={content?.description}>
               <DialogDescription>{content?.description}</DialogDescription>
-            </VStack>
+            </Show>
 
-            <HStack gap="4" w="full">
+            <HStack gap="md" pt="md" w="full">
               <Button
                 autoFocus
                 className={css({

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>) => {
@@ -176,33 +173,42 @@ export function PromptModal(
       {props.children}
 
       <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
-        <Dialog size="sm">
-          <VStack gap="xl" w="full">
-            <VStack alignItems="flex-start" gap="md" w="full">
-              <HStack
-                alignSelf="center"
-                justify="center"
-                paddingBlockEnd="md"
-                w="full"
-              >
-                <Show
-                  when={palette === 'danger'}
-                  fallback={
-                    <Avatar
-                      gradient="charon-light"
-                      fallback={<PromptIcon size={24} />}
-                    />
-                  }
-                >
+        <Dialog
+          size="sm"
+          style={{
+            '--dialog-content-min-h': 'auto',
+          }}
+        >
+          <VStack
+            alignItems="flex-start"
+            h="full"
+            justify="space-between"
+            w="full"
+          >
+            <HStack
+              alignSelf="center"
+              justify="center"
+              paddingBlockEnd="md"
+              w="full"
+            >
+              <Show
+                when={palette === 'danger'}
+                fallback={
                   <Avatar
-                    gradient="hades-dark"
+                    gradient="charon-light"
                     fallback={<PromptIcon size={24} />}
                   />
-                </Show>
-              </HStack>
-              <DialogHeading>{content?.heading}</DialogHeading>
-              <DialogDescription>{content?.description}</DialogDescription>
-            </VStack>
+                }
+              >
+                <Avatar
+                  gradient="hades-dark"
+                  fallback={<PromptIcon size={24} />}
+                />
+              </Show>
+            </HStack>
+
+            <DialogHeading>{content?.heading}</DialogHeading>
+            <DialogDescription>{content?.description}</DialogDescription>
 
             <VStack
               alignItems="flex-start"
@@ -210,18 +216,14 @@ export function PromptModal(
               marginBlockEnd="lg"
               w="full"
             >
-              <FieldRoot
-                ids={{
-                  control: 'confirm',
-                }}
-                invalid={!isValid}
-              >
+              <FieldRoot invalid={!isValid}>
                 <FieldLabel
                   className={hstack({
                     gap: 'xs',
-                    justify: 'flex-start !important',
+                    justify: 'flex-start',
                     marginBlockEnd: 'xs',
                     textStyle: 'label-md',
+                    w: 'initial',
                   })}
                 >
                   Type

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