@cerberus-design/react 0.6.1-next-2d28489 → 0.6.1-next-fa4208e

package/build/modern/hooks/useModal.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  useModal
+} from "../chunk-C5HLLGME.js";
+export {
+  useModal
+};
+//# sourceMappingURL=useModal.js.map

package/build/modern/hooks/useModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/index.js

@@ -1,33 +1,14 @@
-import {
-  Tag
-} from "./chunk-Z6IWNVPN.js";
-import {
-  Textarea
-} from "./chunk-TCO46FK7.js";
 import {
   Toggle
 } from "./chunk-TAZI77TP.js";
-import {
-  PromptModal,
-  PromptModalIcon,
-  usePromptModal
-} from "./chunk-FZ75OJLJ.js";
 import {
   ConfirmModal,
-  ConfirmModalIcon,
   useConfirmModal
-} from "./chunk-4GURONLE.js";
+} from "./chunk-TAVCJ54A.js";
 import {
-  NavMenuList,
-  getPosition
-} from "./chunk-PMCYXRAH.js";
-import {
-  NavMenuTrigger
-} from "./chunk-RPZAPUCF.js";
-import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
+  PromptModal,
+  usePromptModal
+} from "./chunk-WWG5QWXY.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
@@ -43,6 +24,48 @@ import {
 import {
   TabPanel
 } from "./chunk-67S42J4B.js";
+import {
+  Tag
+} from "./chunk-Z6IWNVPN.js";
+import {
+  Textarea
+} from "./chunk-TCO46FK7.js";
+import {
+  Modal
+} from "./chunk-TPFNVGYA.js";
+import {
+  ModalDescription
+} from "./chunk-UPODPCRD.js";
+import {
+  ModalHeader
+} from "./chunk-2F5TB2EV.js";
+import {
+  ModalHeading
+} from "./chunk-OGSAAB6K.js";
+import {
+  ModalIcon
+} from "./chunk-G3JEWPLM.js";
+import {
+  NavMenuLink
+} from "./chunk-6DIGPXAD.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-PMCYXRAH.js";
+import {
+  NavMenuTrigger
+} from "./chunk-RPZAPUCF.js";
+import {
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
+import {
+  MODE_KEY,
+  THEME_KEY,
+  ThemeProvider,
+  useTheme,
+  useThemeContext
+} from "./chunk-SXXWC6UD.js";
 import {
   useToggle
 } from "./chunk-QEA6N6TN.js";
@@ -64,20 +87,17 @@ import {
 } from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-7ISHDUYN.js";
+} from "./chunk-5GEC53G7.js";
 import {
   Label
-} from "./chunk-JJGZRBIR.js";
+} from "./chunk-CU7HXAKM.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
-import {
-  NavMenuLink
-} from "./chunk-6DIGPXAD.js";
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -99,17 +119,12 @@ import {
 } from "./chunk-6TXQZ3PB.js";
 import "./chunk-C45DY4VE.js";
 import {
-  MODE_KEY,
-  THEME_KEY,
-  ThemeProvider,
-  useTheme,
-  useThemeContext
-} from "./chunk-SXXWC6UD.js";
+  useModal
+} from "./chunk-C5HLLGME.js";
 export {
   $cerberusIcons,
   Button,
   ConfirmModal,
-  ConfirmModalIcon,
   FeatureFlag,
   FeatureFlags,
   Field,
@@ -118,13 +133,17 @@ export {
   Input,
   Label,
   MODE_KEY,
+  Modal,
+  ModalDescription,
+  ModalHeader,
+  ModalHeading,
+  ModalIcon,
   NavMenu,
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
   Portal,
   PromptModal,
-  PromptModalIcon,
   Radio,
   Show,
   THEME_KEY,
@@ -144,6 +163,7 @@ export {
   useConfirmModal,
   useFeatureFlags,
   useFieldContext,
+  useModal,
   useNavMenuContext,
   usePromptModal,
   useTabsContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.6.1-next-2d28489",
+  "version": "0.6.1-next-fa4208e",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.6.1-next-2d28489"
+    "@cerberus-design/styled-system": "0.6.1-next-fa4208e"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Modal.tsx

@@ -0,0 +1,37 @@
+import { cx } from '@cerberus-design/styled-system/css'
+import { modal } from '@cerberus-design/styled-system/recipes'
+import { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'
+
+/**
+ * This module contains the Modal root component for a customizable modal.
+ * @module
+ */
+
+// Modal
+
+export type ModalProps = HTMLAttributes<HTMLDialogElement>
+
+function ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {
+  return (
+    <dialog
+      {...props}
+      className={cx(props.className, modal().dialog)}
+      ref={ref}
+    />
+  )
+}
+
+/**
+ * The Modal component is the root element for a customizable modal.
+ * @example
+ * ```tsx
+ * const { modalRef } = useModal()
+ *
+ * <Modal ref={modalRef}>
+ *  <ModalIcon icon={$cerberusIcons.alert} />
+ *  <h2>Modal Heading</h2>
+ *  <p>Modal description</p>
+ * </Modal>
+ * ```
+ */
+export const Modal = forwardRef(ModalEl)

package/src/components/ModalDescription.tsx

@@ -0,0 +1,23 @@
+import { cx } from '@cerberus-design/styled-system/css'
+import { modal } from '@cerberus-design/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+/**
+ * This module contains the ModalDescription component for a customizable modal.
+ * @module
+ */
+
+export type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>
+
+/**
+ * The ModalDescription component is a heading element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalDescription>Modal Heading</ModalDescription>
+ * </Modal>
+ * ```
+ */
+export function ModalDescription(props: ModalDescriptionProps) {
+  return <p {...props} className={cx(props.className, modal().description)} />
+}

package/src/components/ModalHeader.tsx

@@ -0,0 +1,37 @@
+import { cx } from '@cerberus-design/styled-system/css'
+import { vstack } from '@cerberus-design/styled-system/patterns'
+import type { HTMLAttributes } from 'react'
+
+/**
+ * This module contains the ModalHeader component for a customizable modal.
+ * @module
+ */
+
+export type ModalHeaderProps = HTMLAttributes<HTMLDivElement>
+
+/**
+ * The ModalHeader component is a header element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalHeader>
+ *     <h2>Modal Heading</h2>
+ *   </ModalHeader>
+ * </Modal>
+ * ```
+ */
+export function ModalHeader(props: ModalHeaderProps) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        props.className,
+        vstack({
+          alignItems: 'flex-start',
+          gap: '4',
+          mb: '8',
+        }),
+      )}
+    />
+  )
+}

package/src/components/ModalHeading.tsx

@@ -0,0 +1,23 @@
+import { cx } from '@cerberus-design/styled-system/css'
+import { modal } from '@cerberus-design/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+
+/**
+ * This module contains the ModalHeading component for a customizable modal.
+ * @module
+ */
+
+export type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>
+
+/**
+ * The ModalHeading component is a heading element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalHeading>Modal Heading</ModalHeading>
+ * </Modal>
+ * ```
+ */
+export function ModalHeading(props: ModalHeadingProps) {
+  return <p {...props} className={cx(props.className, modal().heading)} />
+}

package/src/components/ModalIcon.tsx

@@ -0,0 +1,28 @@
+import { cx } from '@cerberus-design/styled-system/css'
+import { circle } from '@cerberus-design/styled-system/patterns'
+import {
+  modalIcon,
+  type ModalIconVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+
+export type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>
+export type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps
+
+export function ModalIcon(props: PropsWithChildren<ModalIconProps>) {
+  const { palette, ...nativeProps } = props
+  return (
+    <div
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        modalIcon({
+          palette,
+        }),
+        circle(),
+      )}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/context/confirm-modal.tsx

@@ -12,15 +12,17 @@ import {
 } from 'react'
 import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
-import { css, cx } from '@cerberus-design/styled-system/css'
-import { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'
+import { css } from '@cerberus-design/styled-system/css'
+import { hstack } from '@cerberus-design/styled-system/patterns'
 import { $cerberusIcons } from '../config/defineIcons'
-import {
-  confirmModal,
-  type ConfirmModalVariantProps,
-} from '@cerberus-design/styled-system/recipes'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
+import { ModalIcon } from '../components/ModalIcon'
 import { Show } from '../components/Show'
+import { Modal } from '../components/Modal'
+import { useModal } from '../hooks/useModal'
+import { ModalHeader } from '../components/ModalHeader'
+import { ModalHeading } from '../components/ModalHeading'
+import { ModalDescription } from '../components/ModalDescription'
 
 /**
  * This module provides a context and hook for the confirm modal.
@@ -73,33 +75,39 @@ export interface ConfirmModalProviderProps {}
 export function ConfirmModal(
   props: PropsWithChildren<ConfirmModalProviderProps>,
 ) {
-  const dialogRef = useRef<HTMLDialogElement>(null)
+  const { modalRef, show, close } = useModal()
   const resolveRef = useRef<ShowResult>(null)
   const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)
-  const focusTrap = trapFocus(dialogRef)
+  const focusTrap = trapFocus(modalRef)
+  const ConfirmIcon = $cerberusIcons.confirmModal
 
   const palette = useMemo(
     () => (content?.kind === 'destructive' ? 'danger' : 'action'),
     [content],
   )
-  const styles = confirmModal({ palette })
 
-  const handleChoice = useCallback((e: MouseEvent<HTMLButtonElement>) => {
-    const target = e.currentTarget as HTMLButtonElement
-    if (target.value === 'true') {
-      resolveRef.current?.(true)
-    }
-    resolveRef.current?.(false)
-    dialogRef?.current?.close()
-  }, [])
+  const handleChoice = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const target = e.currentTarget as HTMLButtonElement
+      if (target.value === 'true') {
+        resolveRef.current?.(true)
+      }
+      resolveRef.current?.(false)
+      close()
+    },
+    [close],
+  )
 
-  const handleShow = useCallback((options: ShowConfirmModalOptions) => {
-    return new Promise<boolean>((resolve) => {
-      setContent({ ...options, kind: options.kind || 'non-destructive' })
-      dialogRef?.current?.showModal()
-      resolveRef.current = resolve
-    })
-  }, [])
+  const handleShow = useCallback(
+    (options: ShowConfirmModalOptions) => {
+      return new Promise<boolean>((resolve) => {
+        setContent({ ...options, kind: options.kind || 'non-destructive' })
+        show()
+        resolveRef.current = resolve
+      })
+    },
+    [show],
+  )
 
   const value = useMemo(
     () => ({
@@ -113,22 +121,26 @@ export function ConfirmModal(
       {props.children}
 
       <Portal>
-        <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>
-          <div
-            className={vstack({
-              alignItems: 'flex-start',
-              gap: '4',
-              mb: '8',
-            })}
-          >
-            <ConfirmModalIcon palette={palette} />
-            <h2 className={styles.heading}>{content?.heading}</h2>
-            <p className={styles.description}>{content?.description}</p>
-          </div>
+        <Modal onKeyDown={focusTrap} ref={modalRef}>
+          <ModalHeader>
+            <Show
+              when={palette === 'danger'}
+              fallback={
+                <ModalIcon palette="action">
+                  <ConfirmIcon size={24} />
+                </ModalIcon>
+              }
+            >
+              <ModalIcon palette="danger">
+                <ConfirmIcon size={24} />
+              </ModalIcon>
+            </Show>
+            <ModalHeading>{content?.heading}</ModalHeading>
+            <ModalDescription>{content?.description}</ModalDescription>
+          </ModalHeader>
 
           <div
             className={hstack({
-              justifyContent: 'stretch',
               gap: '4',
             })}
           >
@@ -156,44 +168,12 @@ export function ConfirmModal(
               {content?.cancelText}
             </Button>
           </div>
-        </dialog>
+        </Modal>
       </Portal>
     </ConfirmModalContext.Provider>
   )
 }
 
-// This is to help show the variant styles for the icon since Panda is
-// not syncing correctly for the danger variant.
-export function ConfirmModalIcon(props: ConfirmModalVariantProps) {
-  const InfoIcon = $cerberusIcons.confirmModal
-  return (
-    <Show
-      when={props.palette === 'danger'}
-      fallback={
-        <div className={cx(confirmModal().icon, circle())}>
-          <InfoIcon size={24} />
-        </div>
-      }
-    >
-      <div
-        className={cx(
-          confirmModal({
-            palette: 'danger',
-          }).icon,
-          circle({
-            bgColor: 'danger.surface.initial',
-          }),
-        )}
-        style={{
-          color: 'var(--cerberus-colors-danger-text-100)',
-        }}
-      >
-        <InfoIcon size={24} />
-      </div>
-    </Show>
-  )
-}
-
 export function useConfirmModal(): ConfirmModalValue {
   const context = useContext(ConfirmModalContext)
   if (context === null) {

package/src/context/prompt-modal.tsx

@@ -13,19 +13,20 @@ import {
 } from 'react'
 import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
-import { css, cx } from '@cerberus-design/styled-system/css'
-import { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'
-import {
-  confirmModal,
-  type ConfirmModalVariantProps,
-} from '@cerberus-design/styled-system/recipes'
+import { css } from '@cerberus-design/styled-system/css'
+import { hstack, vstack } from '@cerberus-design/styled-system/patterns'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
 import { Input } from '../components/Input'
 import { Field } from './field'
 import { Label } from '../components/Label'
-import { ConfirmModalIcon } from './confirm-modal'
 import { $cerberusIcons } from '../config/defineIcons'
+import { ModalIcon } from '../components/ModalIcon'
 import { Show } from '../components/Show'
+import { useModal } from '../hooks/useModal'
+import { Modal } from '../components/Modal'
+import { ModalHeader } from '../components/ModalHeader'
+import { ModalHeading } from '../components/ModalHeading'
+import { ModalDescription } from '../components/ModalDescription'
 
 /**
  * This module provides a context and hook for the prompt modal.
@@ -81,11 +82,12 @@ export interface PromptModalProviderProps {}
 export function PromptModal(
   props: PropsWithChildren<PromptModalProviderProps>,
 ) {
-  const dialogRef = useRef<HTMLDialogElement>(null)
+  const { modalRef, show, close } = useModal()
   const resolveRef = useRef<PromptShowResult>(null)
   const [content, setContent] = useState<ShowPromptModalOptions | null>(null)
   const [inputValue, setInputValue] = useState<string>('')
-  const focusTrap = trapFocus(dialogRef)
+  const focusTrap = trapFocus(modalRef)
+  const PromptIcon = $cerberusIcons.promptModal
 
   const isValid = useMemo(
     () => inputValue === content?.key,
@@ -96,7 +98,6 @@ export function PromptModal(
     () => (content?.kind === 'destructive' ? 'danger' : 'action'),
     [content],
   )
-  const styles = confirmModal({ palette })
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -111,18 +112,21 @@ export function PromptModal(
       if (target.value === 'true') {
         resolveRef.current?.(inputValue)
       }
-      dialogRef?.current?.close()
+      close()
     },
-    [inputValue],
+    [inputValue, close],
   )
 
-  const handleShow = useCallback((options: ShowPromptModalOptions) => {
-    return new Promise<string>((resolve) => {
-      setContent({ ...options, kind: options.kind || 'non-destructive' })
-      dialogRef?.current?.showModal()
-      resolveRef.current = resolve
-    })
-  }, [])
+  const handleShow = useCallback(
+    (options: ShowPromptModalOptions) => {
+      return new Promise<string>((resolve) => {
+        setContent({ ...options, kind: options.kind || 'non-destructive' })
+        show()
+        resolveRef.current = resolve
+      })
+    },
+    [show],
+  )
 
   const value = useMemo(
     () => ({
@@ -136,17 +140,23 @@ export function PromptModal(
       {props.children}
 
       <Portal>
-        <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>
-          <div
-            className={vstack({
-              alignItems: 'flex-start',
-              gap: '4',
-            })}
-          >
-            <ConfirmModalIcon palette={palette} />
-            <h2 className={styles.heading}>{content?.heading}</h2>
-            <p className={styles.description}>{content?.description}</p>
-          </div>
+        <Modal onKeyDown={focusTrap} ref={modalRef}>
+          <ModalHeader>
+            <Show
+              when={palette === 'danger'}
+              fallback={
+                <ModalIcon palette="action">
+                  <PromptIcon size={24} />
+                </ModalIcon>
+              }
+            >
+              <ModalIcon palette="danger">
+                <PromptIcon size={24} />
+              </ModalIcon>
+            </Show>
+            <ModalHeading>{content?.heading}</ModalHeading>
+            <ModalDescription>{content?.description}</ModalDescription>
+          </ModalHeader>
 
           <div
             className={vstack({
@@ -207,44 +217,12 @@ export function PromptModal(
               {content?.cancelText}
             </Button>
           </div>
-        </dialog>
+        </Modal>
       </Portal>
     </PromptModalContext.Provider>
   )
 }
 
-// This is to help show the variant styles for the icon since Panda is
-// not syncing correctly for the danger variant.
-export function PromptModalIcon(props: ConfirmModalVariantProps) {
-  const PromptIcon = $cerberusIcons.promptModal
-  return (
-    <Show
-      when={props.palette === 'danger'}
-      fallback={
-        <div className={cx(confirmModal().icon, circle())}>
-          <PromptIcon size={24} />
-        </div>
-      }
-    >
-      <div
-        className={cx(
-          confirmModal({
-            palette: 'danger',
-          }).icon,
-          circle({
-            bgColor: 'danger.surface.initial',
-          }),
-        )}
-        style={{
-          color: 'var(--cerberus-colors-danger-text-100)',
-        }}
-      >
-        <PromptIcon size={24} />
-      </div>
-    </Show>
-  )
-}
-
 export function usePromptModal(): PromptModalValue {
   const context = useContext(PromptModalContext)
   if (context === null) {