@cerberus-design/react 0.9.2 → 0.10.0

package/src/context/notification-center.tsx

@@ -26,10 +26,26 @@ import { cx } from '@cerberus/styled-system/css'
  */
 
 export interface NotifyOptions {
+  /**
+   * The palette of the notification.
+   * @default 'info'
+   */
   palette: 'info' | 'success' | 'warning' | 'danger'
+  /**
+   * The heading of the notification.
+   */
   heading: string
+  /**
+   * The unique id of the notification.
+   */
   id?: string
+  /**
+   * The description of the notification.
+   */
   description?: ReactNode
+  /**
+   * The action to take when the notification is closed
+   */
   onClose?: () => void
 }
 
@@ -43,6 +59,7 @@ export interface NotificationsProviderProps extends PortalProps {}
 
 /**
  * Provides a notification center to the app.
+ * @see https://cerberus.digitalu.design/react/notification
  * @example
  * ```tsx
  * // Wrap the Provider around the root of the feature.
@@ -134,20 +151,11 @@ export function NotificationCenter(
               }}
             >
               {activeNotifications.map((option) => (
-                <Notification
-                  id={option.id!}
+                <MatchNotification
                   key={option.id}
+                  {...option}
                   onClose={handleClose}
-                  open
-                  palette={option.palette}
-                >
-                  <NotificationHeading palette={option.palette}>
-                    {option.heading}
-                  </NotificationHeading>
-                  <NotificationDescription palette={option.palette}>
-                    {option.description}
-                  </NotificationDescription>
-                </Notification>
+                />
               ))}
             </div>
           </div>
@@ -157,6 +165,70 @@ export function NotificationCenter(
   )
 }
 
+interface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {
+  onClose: (e: MouseEvent<HTMLButtonElement>) => void
+  key: string | undefined
+}
+
+function MatchNotification(props: MatchNotificationProps) {
+  const { palette, id, onClose, heading, description } = props
+
+  switch (palette) {
+    case 'success':
+      return (
+        <Notification
+          id={id!}
+          key={id}
+          onClose={onClose}
+          open
+          palette="success"
+        >
+          <NotificationHeading palette="success">{heading}</NotificationHeading>
+          <NotificationDescription palette="success">
+            {description}
+          </NotificationDescription>
+        </Notification>
+      )
+
+    case 'warning':
+      return (
+        <Notification
+          id={id!}
+          key={id}
+          onClose={onClose}
+          open
+          palette="warning"
+        >
+          <NotificationHeading palette="warning">{heading}</NotificationHeading>
+          <NotificationDescription palette="warning">
+            {description}
+          </NotificationDescription>
+        </Notification>
+      )
+
+    case 'danger':
+      return (
+        <Notification id={id!} key={id} onClose={onClose} open palette="danger">
+          <NotificationHeading palette="danger">{heading}</NotificationHeading>
+          <NotificationDescription palette="danger">
+            {description}
+          </NotificationDescription>
+        </Notification>
+      )
+
+    case 'info':
+    default:
+      return (
+        <Notification id={id!} key={id} onClose={onClose} open palette="info">
+          <NotificationHeading palette="info">{heading}</NotificationHeading>
+          <NotificationDescription palette="info">
+            {description}
+          </NotificationDescription>
+        </Notification>
+      )
+  }
+}
+
 /**
  * The hook to use the NotificationCenter.
  * @returns The notify method to trigger a notification.

package/src/context/prompt-modal.tsx

@@ -30,15 +30,34 @@ import { Avatar } from '../components/Avatar'
 
 /**
  * This module provides a context and hook for the prompt modal.
- * @module
+ * @module PromptModal
  */
 
 export interface ShowPromptModalOptions {
+  /**
+   * The kind of prompt modal to show.
+   * @default 'non-destructive'
+   */
   kind?: 'destructive' | 'non-destructive'
+  /**
+   * The heading of the prompt modal.
+   */
   heading: string
+  /**
+   * The description of the prompt modal.
+   */
   description?: string
+  /**
+   * The key to confirm the action.
+   */
   key: string
+  /**
+   * The text for the action button.
+   */
   actionText: string
+  /**
+   * The text for the cancel button.
+   */
   cancelText: string
 }
 export type PromptShowResult =
@@ -46,6 +65,21 @@ export type PromptShowResult =
   | null
 
 export interface PromptModalValue {
+  /**
+   * The method to trigger the prompt modal.
+   * @returns the value of the key if the action is confirmed.
+   * @example
+   * ```tsx
+   * const accepted = await prompt.show({
+   *  kind: 'destructive',
+   *  heading: 'Delete channel?',
+   *  description:
+   *   'This will permanently delete a channel on your account. There is no going back.',
+   *  key: CHANNEL_NAME,
+   *  actionText: 'Yes, delete channel',
+   *  cancelText: 'No, cancel',
+   * })
+   */
   show: (options: ShowPromptModalOptions) => Promise<string>
 }
 
@@ -55,6 +89,7 @@ export interface PromptModalProviderProps {}
 
 /**
  * Provides a prompt modal to the app.
+ * @see https://cerberus.digitalu.design/react/prompt-modal
  * @example
  * ```tsx
  * // Wrap the Provider around the root of the feature.
@@ -153,7 +188,7 @@ export function PromptModal(
                 fallback={
                   <Avatar
                     ariaLabel=""
-                    gradient="light-purple"
+                    gradient="charon-light"
                     icon={<PromptIcon size={24} />}
                     src=""
                   />
@@ -161,7 +196,7 @@ export function PromptModal(
               >
                 <Avatar
                   ariaLabel=""
-                  gradient="red"
+                  gradient="hades-dark"
                   icon={<PromptIcon size={24} />}
                   src=""
                 />
@@ -236,6 +271,9 @@ export function PromptModal(
   )
 }
 
+/**
+ * Used to retrieve the context of the PromptModal provider.
+ */
 export function usePromptModal(): PromptModalValue {
   const context = useContext(PromptModalContext)
   if (context === null) {

package/src/context/tabs.tsx

@@ -15,30 +15,53 @@ import {
 
 /**
  * This module provides a Tabs component and a hook to access its context.
- * @module
+ * @module Tabs
  */
 
 export interface TabsContextValue {
+  /**
+   * The ref for the tabs.
+   */
   tabs: MutableRefObject<HTMLButtonElement[]>
+  /**
+   * The id of the tabs component.
+   */
   id: string
+  /**
+   * The active tab id.
+   */
   active: string
+  /**
+   * The styles for the tabs.
+   */
   styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>
+  /**
+   * Called when the active tab is updated.
+   */
   onTabUpdate: (active: string) => void
 }
 
 export const TabsContext = createContext<TabsContextValue | null>(null)
 
 export interface TabsProps {
+  /**
+   * A unique identifier for the Tabs component. Typically used when there are
+   * multiple Tabs components on the same page.
+   */
   id?: string
+  /**
+   * The default active tab id.
+   */
   active?: string
+  /**
+   * Whether to cache the active tab state in local storage.
+   */
   cache?: boolean
 }
 
 /**
  * The Tabs component provides a context to manage tab state.
- * @param id - the id of the tabs component,
- * @param active - the default active tab id,
- * @param cache - whether to cache the active tab state in local storage
+ * @see https://cerberus.digitalu.design/react/tabs
  * @example
  * ```tsx
  * <Tabs cache>
@@ -96,6 +119,10 @@ export function Tabs(
   )
 }
 
+/**
+ * Used to access the tabs context.
+ * @returns The tabs context.
+ */
 export function useTabsContext(): TabsContextValue {
   const context = useContext(TabsContext)
   if (!context) {

package/src/context/theme.tsx

@@ -1,28 +1,55 @@
 'use client'
 
 import { createContext, useContext, type PropsWithChildren } from 'react'
-import { useTheme } from '../hooks/useTheme'
+import { useTheme, type UseThemeOptions } from '../hooks/useTheme'
 
-export type DefaultThemes = 'cerberus'
+/**
+ * This module provides a context and hook for the theme.
+ * @module Theme
+ */
+
+export type DefaultThemes = 'cerberus' | 'acheron'
 export type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K
-export type ColorModes = 'light' | 'dark'
+export type ColorModes = 'light' | 'dark' | 'system'
 
 export interface ThemeContextValue<T extends string = DefaultThemes> {
+  /**
+   * The current theme.
+   */
   theme: CustomThemes<T>
+  /**
+   * The current color mode.
+   */
   mode: ColorModes
+  /**
+   * Called when the theme is updated.
+   */
   updateTheme: (theme: T) => void
-  updateMode: () => void
+  /**
+   * Called when the color mode is updated.
+   */
+  updateMode: (mode: ColorModes) => void
 }
 
-export const THEME_KEY = 'cerberus-theme'
-export const MODE_KEY = 'cerberus-mode'
-
 const ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(
   null,
 )
 
+export interface ThemeProviderProps extends UseThemeOptions {
+  /**
+   * The default theme.
+   */
+  defaultTheme?: DefaultThemes
+  /**
+   * The default color mode.
+   */
+  defaultColorMode?: ColorModes
+}
+
 /**
- * A context provider that allows the user to set the theme and mode of the application.
+ * A context provider that allows the user to set the theme and mode of the
+ * application.
+ * @see https://cerberus.digitalu.design/react/use-theme-context
  * @example
  * ```tsx
  * <ThemeProvider>
@@ -30,8 +57,15 @@ const ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(
  * </ThemeProvider>
  * ```
  */
-export function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {
-  const state = useTheme()
+export function ThemeProvider(
+  props: PropsWithChildren<ThemeProviderProps>,
+): JSX.Element {
+  const state = useTheme(props.defaultTheme, props.defaultColorMode, {
+    cache: props.cache,
+    updateMode: props.updateMode,
+    updateTheme: props.updateTheme,
+  }) as ThemeContextValue<DefaultThemes>
+
   return (
     <ThemeContext.Provider value={state}>
       {props.children}
@@ -39,6 +73,9 @@ export function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {
   )
 }
 
+/**
+ * Used to access the theme context.
+ */
 export function useThemeContext(): ThemeContextValue<DefaultThemes> {
   const context = useContext(ThemeContext)
   if (!context) {

package/src/hooks/useModal.ts

@@ -8,11 +8,25 @@ import { useCallback, useMemo, useRef, type RefObject } from 'react'
  */
 
 interface UseModalReturnValue {
+  /**
+   * The ref for the modal.
+   */
   modalRef: RefObject<HTMLDialogElement>
+  /**
+   * Shows the modal.
+   */
   show: () => void
+  /**
+   * Closes the modal.
+   */
   close: () => void
 }
 
+/**
+ * Provides a hook for using a custom modal.
+ * @memberof module:Modal
+ * @returns The modal hook.
+ */
 export function useModal(): UseModalReturnValue {
   const modalRef = useRef<HTMLDialogElement | null>(null)
 

package/src/hooks/useTheme.ts

@@ -8,33 +8,66 @@ import {
   useState,
 } from 'react'
 import {
-  MODE_KEY,
-  THEME_KEY,
   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: CustomThemes<C>) => {
-    setTheme(newTheme)
-    localStorage.setItem(THEME_KEY, newTheme)
-  }, [])
+  const handleThemeChange = useCallback(
+    (newTheme: C) => {
+      setTheme(newTheme)
+      updateTheme?.(newTheme)
+    },
+    [updateTheme],
+  )
 
-  const handleColorModeChange = useCallback(() => {
-    setColorMode((prev) => {
-      const newMode = prev === 'light' ? 'dark' : 'light'
-      localStorage.setItem(MODE_KEY, newMode)
-      return newMode
-    })
-  }, [])
+  const handleColorModeChange = useCallback(
+    (newMode: ColorModes) => {
+      setColorMode(newMode)
+      updateMode?.(newMode)
+    },
+    [updateMode],
+  )
 
   useLayoutEffect(() => {
     const theme = localStorage.getItem(THEME_KEY)
@@ -52,13 +85,29 @@ export function useTheme<C extends string = DefaultThemes>(
 
   useEffect(() => {
     const root = document.documentElement
-    root.dataset.theme = theme
-  }, [theme])
+    root.dataset.pandaTheme = theme
+
+    if (cache) {
+      localStorage.setItem(THEME_KEY, theme)
+    }
+  }, [theme, cache])
 
   useEffect(() => {
     const root = document.documentElement
-    root.dataset.colorMode = colorMode
-  }, [colorMode])
+
+    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(
     () => ({

package/src/hooks/useToggle.ts

@@ -2,15 +2,37 @@
 
 import { useCallback, useMemo, useState, type ChangeEvent } from 'react'
 
+/**
+ * This module provides a hook for using a toggle.
+ * @module useToggle
+ */
+
 export interface UseToggleOptions {
+  /**
+   * The initial checked state.
+   */
   checked?: string
+  /**
+   * Called when the checked state changes.
+   */
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
 }
 export interface ToggleHookReturn {
+  /**
+   * The checked state.
+   */
   checked: string
+  /**
+   * A custom handler to be called when the checked state changes.
+   */
   handleChange: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
+/**
+ * Provides a hook for using a toggle.
+ * @see https://cerberus.digitalu.design/react/use-toggle
+ * @memberof module:Toggle
+ */
 export function useToggle(options?: UseToggleOptions): ToggleHookReturn {
   const [checked, setChecked] = useState<string>(options?.checked ?? '')
   const onChange = options?.onChange

package/src/index.ts

@@ -8,6 +8,7 @@
 export * from './components/Avatar'
 export * from './components/Button'
 export * from './components/Checkbox'
+export * from './components/CircularProgress'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
@@ -30,6 +31,7 @@ export * from './components/Portal'
 export * from './components/ProgressBar'
 export * from './components/Radio'
 export * from './components/Select'
+export * from './components/Spinner'
 export * from './components/Tab'
 export * from './components/TabList'
 export * from './components/TabPanel'

package/build/modern/chunk-2FK7NR7Y.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      {...(disabled && { 'data-disabled': true })}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n          w: 'full',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'inherit',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAcI,KAdJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,iBAAiB,KAAK;AAAA,MACzC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-3C2DJSEE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NotificationHeading.tsx"],"sourcesContent":["/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationHeadingProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * The NotificationHeading component is used to render the heading of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}

package/build/modern/chunk-3GXISGPS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AA4BhC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-4CAT3FHV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  container?: Element | DocumentFragment\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

package/build/modern/chunk-4M3EUP57.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n  [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n  flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @param flags - The flags data for the provider.\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n *  featureOne: true,\n *  featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlags flags={flags}>\n *    <FeatureFlag flag=\"featureOne\">\n *      This is visible.\n *    </FeatureFlag>\n *   <FeatureFlag flag=\"featureTwo\">\n *     This is hidden.\n *   </FeatureFlag>\n * </FeatureFlags>\n * ```\n */\nexport function FeatureFlags(\n  props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n  return (\n    <FeatureFlagContext.Provider value={props.flags}>\n      {props.children}\n    </FeatureFlagContext.Provider>\n  )\n}\n\nexport function useFeatureFlags(key: string): boolean {\n  const context = useContext(FeatureFlagContext)\n  if (context === null) {\n    throw new Error(\n      'useFeatureFlag must be used within a FeatureFlags Provider',\n    )\n  }\n  return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}

package/build/modern/chunk-4O4QFF4S.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";AAEA,SAAS,eAAuD;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,YAAY,QAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,SAAO,QAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}

package/build/modern/chunk-4YJOK7JJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  toggle,\n  type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\nexport type ToggleBase = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'id' | 'value'\n> & {\n  describedBy?: string\n  id: string\n  value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\nexport function Toggle(props: ToggleProps) {\n  const { size, describedBy, ...nativeProps } = props\n  const styles = toggle({ size })\n  const { invalid, ...state } = useFieldContext()\n  const Icon = $cerberusIcons.toggleChecked\n\n  return (\n    <span\n      className={cx('group', styles.track, hstack())}\n      data-checked={props.checked || props.defaultChecked}\n    >\n      <input\n        {...nativeProps}\n        {...state}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', styles.input)}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        className={cx(\n          styles.thumb,\n          vstack({\n            justify: 'center',\n          }),\n        )}\n      >\n        <Icon />\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AAsBH,SAIE,KAJF;AAPG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,aAAa,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS,OAAO,OAAO,OAAO,CAAC;AAAA,MAC7C,gBAAc,MAAM,WAAW,MAAM;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-6DIGPXAD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  as?: ElementType\n}\n\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAsBd;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-6F34A7NZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAiBH;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-7VJOPJVX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Droppable.tsx"],"sourcesContent":["'use client'\n\nimport { useDroppable, type UseDroppableArguments } from '@dnd-kit/core'\nimport { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'\n\nexport interface DroppableProps\n  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,\n    UseDroppableArguments {\n  dropped?: boolean\n}\n\nexport function Droppable(props: PropsWithChildren<DroppableProps>) {\n  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =\n    props\n  const uuid = useId()\n  const { isOver, setNodeRef } = useDroppable({\n    data,\n    disabled,\n    id: id || uuid,\n    resizeObserverConfig,\n  })\n\n  return (\n    <div\n      {...nativeProps}\n      data-over={isOver}\n      data-dropped={dropped}\n      ref={setNodeRef}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":";AAEA,SAAS,oBAAgD;AACzD,SAAS,aAA8D;AAoBnE;AAZG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,IAAI,UAAU,MAAM,sBAAsB,GAAG,YAAY,IACxE;AACF,QAAM,OAAO,MAAM;AACnB,QAAM,EAAE,QAAQ,WAAW,IAAI,aAAa;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,IAAI,MAAM;AAAA,IACV;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW;AAAA,MACX,gBAAc;AAAA,MACd,KAAK;AAAA,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/build/modern/chunk-A5WYZVUR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Table.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { table } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren, TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the table component.\n * @module\n */\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  caption: string\n}\n\n/**\n * The Table component is used to render a table.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @prop caption - An easy to understand description of the table.\n * @example\n * ```tsx\n * <Table caption=\"Basic Table\">\n *  {children}\n * </Table>\n * ```\n */\nexport function Table(props: PropsWithChildren<TableProps>) {\n  const { caption, children, ...nativeProps } = props\n  const styles = table()\n\n  return (\n    <div className={styles.container}>\n      <table\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.table)}\n      >\n        <caption className={styles.caption}>{caption}</caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n// We only provide this for consistency with the rest of the components\n\nexport type TrProps = TableHTMLAttributes<HTMLTableRowElement>\n\n/**\n * The Tr component is used to render a table row.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Tr>\n *  {children}\n * </Tr>\n * ```\n */\nexport function Tr(props: PropsWithChildren<TrProps>) {\n  return <tr {...props} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AA6BhB,SAIE,KAJF;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,MAAM;AAErB,SACE,oBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,4BAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,oBAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}

package/build/modern/chunk-C5HLLGME.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/useModal.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\ninterface UseModalReturnValue {\n  modalRef: RefObject<HTMLDialogElement>\n  show: () => void\n  close: () => void\n}\n\nexport function useModal(): UseModalReturnValue {\n  const modalRef = useRef<HTMLDialogElement | null>(null)\n\n  const show = useCallback(() => {\n    modalRef.current?.showModal()\n  }, [])\n\n  const close = useCallback(() => {\n    modalRef.current?.close()\n  }, [])\n\n  return useMemo(() => {\n    return {\n      modalRef,\n      show,\n      close,\n    }\n  }, [modalRef, show, close])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,cAA8B;AAatD,SAAS,WAAgC;AAC9C,QAAM,WAAW,OAAiC,IAAI;AAEtD,QAAM,OAAO,YAAY,MAAM;AAC7B,aAAS,SAAS,UAAU;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,MAAM;AACnB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,KAAK,CAAC;AAC5B;","names":[]}