@cerberus-design/react 0.6.1 → 0.7.0

package/build/modern/context/confirm-modal.js.map

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

package/build/modern/context/feature-flags.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "../chunk-4M3EUP57.js";
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=feature-flags.js.map

package/build/modern/context/feature-flags.js.map

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

package/build/modern/context/prompt-modal.js

@@ -0,0 +1,25 @@
+"use client";
+import {
+  PromptModal,
+  usePromptModal
+} from "../chunk-WWG5QWXY.js";
+import "../chunk-4CAT3FHV.js";
+import "../chunk-TPFNVGYA.js";
+import "../chunk-UPODPCRD.js";
+import "../chunk-2F5TB2EV.js";
+import "../chunk-OGSAAB6K.js";
+import "../chunk-G3JEWPLM.js";
+import "../chunk-2ATICEW3.js";
+import "../chunk-5GEC53G7.js";
+import "../chunk-CU7HXAKM.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-JIZQFTW6.js";
+import "../chunk-6TXQZ3PB.js";
+import "../chunk-C45DY4VE.js";
+import "../chunk-C5HLLGME.js";
+export {
+  PromptModal,
+  usePromptModal
+};
+//# sourceMappingURL=prompt-modal.js.map

package/build/modern/context/prompt-modal.js.map

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

package/build/modern/context/tabs.js

@@ -3,7 +3,7 @@ import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "../chunk-DQOYTLGB.js";
+} from "../chunk-7KJIZIAU.js";
 export {
   Tabs,
   TabsContext,

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,50 +1,57 @@
+import {
+  Toggle
+} from "./chunk-TAZI77TP.js";
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-TAVCJ54A.js";
+import {
+  PromptModal,
+  usePromptModal
+} from "./chunk-WWG5QWXY.js";
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-WE3JNSNO.js";
 import {
   Tab
-} from "./chunk-SUP7U42W.js";
+} from "./chunk-HBEEHHON.js";
 import {
   TabList
-} from "./chunk-5GSXIYD3.js";
+} from "./chunk-X2JMXTBH.js";
 import {
   TabPanel
-} from "./chunk-YJCWUN33.js";
+} from "./chunk-67S42J4B.js";
 import {
   Tag
-} from "./chunk-SLIOCQBZ.js";
+} from "./chunk-Z6IWNVPN.js";
 import {
   Textarea
 } from "./chunk-TCO46FK7.js";
 import {
-  Toggle
-} from "./chunk-734PGVLT.js";
+  Modal
+} from "./chunk-TPFNVGYA.js";
 import {
-  Button
-} from "./chunk-2ATICEW3.js";
+  ModalDescription
+} from "./chunk-UPODPCRD.js";
 import {
-  FieldMessage
-} from "./chunk-VGHVH2T3.js";
+  ModalHeader
+} from "./chunk-2F5TB2EV.js";
 import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
+  ModalHeading
+} from "./chunk-OGSAAB6K.js";
 import {
-  Input
-} from "./chunk-X4YQ27D5.js";
-import {
-  Label
-} from "./chunk-HE3HFKYU.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
+  ModalIcon
+} from "./chunk-G3JEWPLM.js";
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
 import {
   NavMenuList,
   getPosition
-} from "./chunk-G2QMBSK5.js";
+} from "./chunk-PMCYXRAH.js";
 import {
   NavMenuTrigger
 } from "./chunk-RPZAPUCF.js";
@@ -52,49 +59,91 @@ 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";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
+import {
+  FeatureFlag
+} from "./chunk-VULPMZUW.js";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "./chunk-4M3EUP57.js";
+import {
+  FieldMessage
+} from "./chunk-VGHVH2T3.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
+import {
+  Input
+} from "./chunk-5GEC53G7.js";
+import {
+  Label
+} from "./chunk-CU7HXAKM.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-S7HBD2A7.js";
+} from "./chunk-KFUXGX33.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
+import {
+  trapFocus
+} from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-3CBN7U25.js";
-import "./chunk-5MNCW677.js";
-import {
-  MODE_KEY,
-  THEME_KEY,
-  ThemeProvider,
-  useTheme,
-  useThemeContext
-} from "./chunk-SXXWC6UD.js";
+} from "./chunk-6TXQZ3PB.js";
+import "./chunk-C45DY4VE.js";
 import {
-  useToggle
-} from "./chunk-QEA6N6TN.js";
+  useModal
+} from "./chunk-C5HLLGME.js";
 export {
   $cerberusIcons,
   Button,
+  ConfirmModal,
+  FeatureFlag,
+  FeatureFlags,
   Field,
   FieldMessage,
   IconButton,
   Input,
   Label,
   MODE_KEY,
+  Modal,
+  ModalDescription,
+  ModalHeader,
+  ModalHeading,
+  ModalIcon,
   NavMenu,
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
+  Portal,
+  PromptModal,
   Radio,
   Show,
   THEME_KEY,
@@ -110,8 +159,13 @@ export {
   createNavTriggerProps,
   defineIcons,
   getPosition,
+  trapFocus,
+  useConfirmModal,
+  useFeatureFlags,
   useFieldContext,
+  useModal,
   useNavMenuContext,
+  usePromptModal,
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -18,11 +18,12 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.46.2",
     "@types/react": "^18",
+    "@types/react-dom": "^18",
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.6.1"
+    "@cerberus-design/styled-system": "0.7.0"
   },
   "publishConfig": {
     "access": "public"

package/src/aria-helpers/trap-focus.aria.ts

@@ -0,0 +1,29 @@
+import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'
+
+export function trapFocus(
+  modalRef: RefObject<HTMLDialogElement>,
+): KeyboardEventHandler<HTMLDialogElement> {
+  const focusableElements =
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  const focusable = Array.from(
+    modalRef.current?.querySelectorAll(focusableElements) ?? [],
+  )
+  const firstFocusable = focusable[0] as HTMLElement
+  const lastFocusable = focusable[focusable.length - 1] as HTMLElement
+
+  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {
+    if (event.key === 'Tab') {
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          lastFocusable.focus()
+          event.preventDefault()
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          firstFocusable.focus()
+          event.preventDefault()
+        }
+      }
+    }
+  }
+}

package/src/components/FeatureFlag.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import type { PropsWithChildren } from 'react'
+import { useFeatureFlags } from '../context/feature-flags'
+import { Show } from './Show'
+
+export interface FeatureFlagProps {
+  flag: string
+}
+
+export function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {
+  const showContent = useFeatureFlags(props.flag)
+  return <Show when={showContent}>{props.children}</Show>
+}

package/src/components/Label.tsx

@@ -51,7 +51,7 @@ export function Label(props: PropsWithChildren<LabelProps>) {
       <Show when={required}>
         <span
           className={css({
-            color: 'neutral.text.100',
+            color: 'page.text.100',
             fontSize: 'inherit',
           })}
         >

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/components/NavMenuList.tsx

@@ -37,7 +37,7 @@ export function getPosition(position: Positions): GetPositionResult {
 
 const navListStyles = vstack({
   alignItems: 'flex-start',
-  bgColor: 'neutral.surface.100',
+  bgColor: 'page.surface.100',
   boxShadow: 'lg',
   gap: '2',
   opacity: '0',

package/src/components/Portal.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react'
+import { createPortal } from 'react-dom'
+
+/**
+ * This module is the Portal component.
+ * @module
+ */
+
+export interface PortalProps {
+  container?: Element | DocumentFragment
+  key?: null | string
+}
+
+/**
+ * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+ * @param container - The props for the Portal component.
+ * @returns ReactPortal
+ */
+export function Portal(props: PropsWithChildren<PortalProps>) {
+  const container = props.container || document.body
+  return createPortal(props.children, container, props.key)
+}

package/src/components/Tab.tsx

@@ -7,14 +7,13 @@ import {
   type MouseEvent,
 } from 'react'
 import { useTabsContext } from '../context/tabs'
-import { css, cx } from '@cerberus/styled-system/css'
+import { cx } from '@cerberus/styled-system/css'
 import { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'
 
 /**
  * This module provides a Tab component.
  * @module
  */
-
 export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   value: string
 }
@@ -33,7 +32,7 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 export function Tab(props: TabProps) {
   const { value, ...nativeProps } = props
-  const { active, onTabUpdate } = useTabsContext()
+  const { active, onTabUpdate, styles } = useTabsContext()
   const [isPending, startTransition] = useTransition()
   const { ref } = useTabsKeyboardNavigation()
   const isActive = useMemo(() => active === value, [active, value])
@@ -51,7 +50,7 @@ export function Tab(props: TabProps) {
       aria-busy={isPending}
       aria-selected={isActive}
       id={value}
-      className={cx(nativeProps.className, btnStyles)}
+      className={cx(nativeProps.className, styles.tab)}
       onClick={handleClick}
       role="tab"
       ref={ref}
@@ -59,83 +58,3 @@ export function Tab(props: TabProps) {
     />
   )
 }
-
-const btnStyles = css({
-  alignItems: 'center',
-  display: 'inline-flex',
-  borderTopLeftRadius: 'md',
-  borderTopRightRadius: 'md',
-  fontSize: 'sm',
-  fontWeight: '600',
-  gap: '2',
-  h: '2.75rem',
-  justifyContent: 'center',
-  position: 'relative',
-  pxi: '4',
-  zIndex: 'base',
-  _motionSafe: {
-    transition: 'all 200ms ease-in-out',
-    _before: {
-      transitionProperty: 'height',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-in-out',
-    },
-    _after: {
-      transitionProperty: 'height',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-in-out',
-    },
-  },
-  _before: {
-    bgColor: 'action.border.initial',
-    bottom: '0',
-    content: '""',
-    h: '0',
-    position: 'absolute',
-    left: '0',
-    right: '0',
-    w: 'full',
-    willChange: 'height',
-    zIndex: 'decorator',
-  },
-  _after: {
-    borderTopLeftRadius: 'md',
-    borderTopRightRadius: 'md',
-    bottom: '0',
-    bgColor: 'neutral.surface.100',
-    content: '""',
-    left: '0',
-    position: 'absolute',
-    right: '0',
-    h: '0',
-    w: 'full',
-    willChange: 'height',
-    zIndex: '-1',
-  },
-  _hover: {
-    _after: {
-      h: 'full',
-    },
-  },
-  _focusVisible: {
-    boxShadow: 'none',
-    outline: '3px solid',
-    outlineColor: 'action.border.focus',
-    outlineOffset: '2px',
-  },
-  _disabled: {
-    cursor: 'not-allowed',
-    opacity: '0.5',
-  },
-  _selected: {
-    color: 'action.text.200',
-    _before: {
-      h: '3px',
-    },
-    _hover: {
-      _after: {
-        h: '0',
-      },
-    },
-  },
-})

package/src/components/TabList.tsx

@@ -27,7 +27,7 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
  */
 export function TabList(props: PropsWithChildren<TabListProps>) {
   const { description, ...nativeProps } = props
-  const { id } = useTabsContext()
+  const { id, styles } = useTabsContext()
 
   return (
     <div
@@ -36,11 +36,9 @@ export function TabList(props: PropsWithChildren<TabListProps>) {
       className={cx(
         nativeProps.className,
         hstack({
-          borderBottom: '1px solid',
-          borderBottomColor: 'action.border.100',
           gap: '0',
-          w: 'full',
         }),
+        styles.tabList,
       )}
       id={id ?? nativeProps.id}
     />