@cerberus-design/react 0.17.2 → 0.18.1

package/build/legacy/context/confirm-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/confirm-modal.tsx","../../../src/components/button/button.tsx","../../../src/components/Show.tsx","../../../src/utils/index.ts","../../../src/components/avatar/primitives.tsx","../../../src/components/avatar/parts.ts","../../../src/components/avatar/avatar.tsx","../../../src/context/cerberus.tsx","../../../src/components/dialog/primitives.tsx","../../../src/components/Portal.tsx","../../../src/components/dialog/dialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/avatar/avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogCloseTrigger,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/dialog'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\n\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const kind = content?.kind ?? 'non-destructive'\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: ConfirmIcon } = icons\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      setOpen(false)\n    },\n    [setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen, setContent],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      gradient=\"charon-light\"\n                      fallback={<ConfirmIcon size={24} />}\n                    />\n                  }\n                >\n                  <Avatar\n                    gradient=\"hades-dark\"\n                    fallback={<ConfirmIcon size={24} />}\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <HStack gap=\"4\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\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","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n","import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","import type { AvatarRootProps } from '@ark-ui/react/avatar'\nimport type { AvatarVariantProps } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils'\nimport { Show } from '../Show'\nimport { AvatarParts } from './parts'\n\n/**\n * This module provides an abstraction of the Avatar primitives.\n * @module 'avatar'\n */\n\nexport interface AvatarWithoutImage\n  extends AvatarRootProps,\n    AvatarVariantProps {\n  alt?: never\n  src?: never\n  fallback?: ReactNode\n}\n\nexport interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {\n  alt: string\n  src: string\n  fallback?: ReactNode\n}\n\n/**\n * Avatar component is an abstraction of the primitives that displays a\n * avatar or it's fallback when the image fails to load.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)\n */\nexport function Avatar(props: AvatarWithoutImage | AvatarWithImage) {\n  const [imgProps, { fallback, children }, rootProps] = splitProps(\n    props,\n    ['alt', 'src'],\n    ['fallback', 'children'],\n  )\n\n  return (\n    <AvatarParts.Root {...rootProps}>\n      <Show\n        when={Boolean(children)}\n        fallback={\n          <>\n            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>\n            <AvatarParts.Image {...imgProps} />\n          </>\n        }\n      >\n        {children}\n      </Show>\n    </AvatarParts.Root>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  dialog,\n  type DialogVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(props: DialogContentProps & DialogVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\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 * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from '@cerberus/styled-system/recipes'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n  extends Omit<DialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  return (\n    <Portal>\n      <DialogBackdrop />\n      <DialogPositioner>\n        <DialogContent {...props} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n"],"mappings":"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","names":["import_react","import_react","import_css","import_recipes","import_css","import_jsx_runtime","import_jsx_runtime","Avatar","import_jsx","import_react","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_react","ArkPortal","import_jsx_runtime","Dialog","import_jsx_runtime","Dialog","Avatar"]}
+{"version":3,"sources":["../../../src/context/confirm-modal.tsx","../../../src/components/button/button.tsx","../../../src/components/Show.tsx","../../../src/utils/index.ts","../../../src/components/avatar/primitives.tsx","../../../src/components/avatar/parts.ts","../../../src/components/avatar/avatar.tsx","../../../src/components/dialog/primitives.tsx","../../../src/context/cerberus.tsx","../../../src/components/Portal.tsx","../../../src/components/dialog/dialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { css } from 'styled-system/css'\nimport { HStack, VStack } from 'styled-system/jsx'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/avatar/avatar'\nimport {\n  Dialog,\n  DialogCloseTrigger,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/dialog'\nimport { useCerberusContext } from './cerberus'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\n\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const kind = content?.kind ?? 'non-destructive'\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: ConfirmIcon } = icons\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      setOpen(false)\n    },\n    [setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen, setContent],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      gradient=\"charon-light\"\n                      fallback={<ConfirmIcon size={24} />}\n                    />\n                  }\n                >\n                  <Avatar\n                    gradient=\"hades-dark\"\n                    fallback={<ConfirmIcon size={24} />}\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <HStack gap=\"4\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <ark.button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","import {\n  Avatar,\n  type AvatarFallbackProps,\n  type AvatarImageProps,\n  type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n  const { gradient, shape, size, ...rootProps } = props\n  const styles = avatar({ gradient, shape, size })\n  return (\n    <Avatar.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n  )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n  const styles = avatar()\n  return (\n    <Avatar.Fallback\n      {...props}\n      className={cx(styles.fallback, props.className)}\n    />\n  )\n}\n","import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n  /**\n   * The context provider of the Avatar.\n   */\n  Root: ElementType\n  /**\n   * The image of the Avatar.\n   */\n  Image: ElementType\n  /**\n   * The fallback content to display when the image fails to load.\n   */\n  Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n  Root: AvatarRoot,\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n}\n","import type { AvatarRootProps } from '@ark-ui/react/avatar'\nimport type { AvatarVariantProps } from 'styled-system/recipes'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils'\nimport { Show } from '../Show'\nimport { AvatarParts } from './parts'\n\n/**\n * This module provides an abstraction of the Avatar primitives.\n * @module 'avatar'\n */\n\nexport interface AvatarWithoutImage\n  extends AvatarRootProps,\n    AvatarVariantProps {\n  alt?: never\n  src?: never\n  fallback?: ReactNode\n}\n\nexport interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {\n  alt: string\n  src: string\n  fallback?: ReactNode\n}\n\n/**\n * Avatar component is an abstraction of the primitives that displays a\n * avatar or it's fallback when the image fails to load.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)\n */\nexport function Avatar(props: AvatarWithoutImage | AvatarWithImage) {\n  const [imgProps, { fallback, children }, rootProps] = splitProps(\n    props,\n    ['alt', 'src'],\n    ['fallback', 'children'],\n  )\n\n  return (\n    <AvatarParts.Root {...rootProps}>\n      <Show\n        when={children}\n        fallback={\n          <>\n            <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>\n            <AvatarParts.Image {...imgProps} />\n          </>\n        }\n      >\n        {children}\n      </Show>\n    </AvatarParts.Root>\n  )\n}\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(props: DialogContentProps & DialogVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\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 * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  return <ArkPortal {...props} />\n}\n","import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n  extends Omit<DialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  return (\n    <Portal>\n      <DialogBackdrop />\n      <DialogPositioner>\n        <DialogContent {...props} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n"],"mappings":"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","names":["import_react","import_css","import_jsx","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_jsx_runtime","Avatar","import_css","import_recipes","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","ArkPortal","import_jsx_runtime","Dialog","import_jsx_runtime","Dialog","Avatar"]}

package/build/legacy/context/field.cjs

@@ -29,8 +29,8 @@ var import_react = require("react");
 
 // src/components/field/primitives.tsx
 var import_field = require("@ark-ui/react/field");
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
+var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
 var import_jsx_runtime = require("react/jsx-runtime");
 function FieldRoot(props) {
   const { size, ...fieldProps } = props;

package/build/legacy/context/field.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/field.tsx","../../../src/components/field/primitives.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldRootProps } from '@ark-ui/react'\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\nimport { FieldRoot } from '../components/field/primitives'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * @deprecated use FieldRoot or FieldParts instead\n */\nexport function FieldProvider(\n  props: PropsWithChildren<FieldRootProps>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      <FieldRoot {...props} />\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","import {\n  Field,\n  type FieldHelperTextProps,\n  type FieldInputProps as ArkFieldInputProps,\n  type FieldLabelProps,\n  type FieldRootProps as ArkFieldRootProps,\n  type FieldTextareaProps,\n} from '@ark-ui/react/field'\nimport type { ReactNode } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { field, type FieldVariantProps } from '@cerberus/styled-system/recipes'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains all the primitives of the Field component.\n * @module 'field'\n */\n\nexport type FieldRootProps = ArkFieldRootProps & FieldVariantProps\n\n/**\n * The context & container for the Field components.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot required ids={{ input: 'exampleId' }}>\n *  <FieldLabel>Label</FieldLabel>\n *  <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldRoot(props: FieldRootProps) {\n  const { size, ...fieldProps } = props\n  const styles = field({ size })\n  return (\n    <Field.Root\n      {...fieldProps}\n      className={cx(styles.root, fieldProps.className)}\n    />\n  )\n}\n\n/**\n * The label for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldLabel>Label</FieldLabel>\n * </FieldRoot>\n * ```\n */\nexport function FieldLabel(props: FieldLabelProps) {\n  const { children, ...nativeProps } = props\n  const styles = field()\n  return (\n    <Field.Label {...nativeProps} className={cx(styles.label, props.className)}>\n      {children}\n      <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n    </Field.Label>\n  )\n}\n\n/**\n * The required indicator for the Field component.\n */\nexport function FieldRequiredIndicator() {\n  return <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n}\n\nexport interface FieldInputProps\n  extends Omit<ArkFieldInputProps, 'size'>,\n    FieldVariantProps {\n  /**\n   * An optional icon to display at the start of the input.\n   */\n  startIcon?: ReactNode\n  /**\n   * An optional icon to display at the end of the input.\n   */\n  endIcon?: ReactNode\n}\n\n/**\n * The input for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldInput(props: FieldInputProps) {\n  const { size, startIcon, endIcon, ...fieldProps } = props\n  const styles = field({ size })\n  const hasStartIcon = Boolean(startIcon)\n\n  return (\n    <div className={styles.inputRoot}>\n      <FieldStartIndicator>{startIcon}</FieldStartIndicator>\n      <Field.Input\n        {...fieldProps}\n        {...(hasStartIcon && { 'data-has': 'start-indicator' })}\n        className={cx(styles.input, fieldProps.className)}\n      />\n      <FieldStatusIndicator fallback={endIcon} />\n    </div>\n  )\n}\n\n/**\n * The helper text for the Field component that is shown when the field is\n * valid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldHelperText>Helper text</FieldHelperText>\n * </FieldRoot>\n * ```\n */\nexport function FieldHelperText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.HelperText\n      {...props}\n      className={cx(styles.helperText, props.className)}\n    />\n  )\n}\n\n/**\n * The error text for the Field component that is shown when the field is\n * invalid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldErrorText>Error text</FieldErrorText>\n * </FieldRoot>\n * ```\n */\nexport function FieldErrorText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.ErrorText\n      {...props}\n      className={cx(styles.errorText, props.className)}\n    />\n  )\n}\n\n/**\n * The textarea for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldTextarea />\n * </FieldRoot>\n * ```\n */\nexport function FieldTextarea(props: FieldTextareaProps) {\n  const styles = field()\n  return (\n    <Field.Textarea\n      {...props}\n      className={cx(styles.textarea, props.className)}\n    />\n  )\n}\n\n/**\n * A named export for the FieldInput component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * import { Input } from '@cerberus/react'\n *\n * <Field\n *   ids={{\n *    control: 'email',\n *   }}\n *   label=\"Enter your email\"\n *   helperText=\"We'll never share your email with anyone else.\"\n *   errorText=\"Email is required.\"\n *   required\n * >\n *   <Input type=\"email\" />\n * </Field>\n * ```\n */\nexport const Input = FieldInput\nexport const Textarea = FieldTextarea\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAKO;;;ACRP,mBAOO;AAEP,iBAAmB;AACnB,qBAA8C;AA0B1C;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAC7B,SACE;AAAA,IAAC,mBAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,WAAW,SAAS;AAAA;AAAA,EACjD;AAEJ;;;ADeM,IAAAA,sBAAA;AApBN,IAAM,mBAAe,4BAAwC,IAAI;AAK1D,SAAS,cACd,OACa;AACb,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,SAAS,MAAM;AAAA,IACjB;AAAA,IACA,CAAC,MAAM,UAAU,MAAM,UAAU,MAAM,UAAU,MAAM,OAAO;AAAA,EAChE;AAEA,SACE,6CAAC,aAAa,UAAb,EAAsB,OACrB,uDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;AAMO,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/context/field.tsx","../../../src/components/field/primitives.tsx"],"sourcesContent":["'use client'\n\nimport type { FieldRootProps } from '@ark-ui/react/field'\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\nimport { FieldRoot } from '../components/field/primitives'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * @deprecated use FieldRoot or FieldParts instead\n */\nexport function FieldProvider(props: PropsWithChildren<FieldRootProps>) {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      <FieldRoot {...props} />\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","import {\n  Field,\n  type FieldHelperTextProps,\n  type FieldInputProps as ArkFieldInputProps,\n  type FieldLabelProps,\n  type FieldRootProps as ArkFieldRootProps,\n  type FieldTextareaProps,\n} from '@ark-ui/react/field'\nimport type { ReactNode } from 'react'\nimport { cx } from 'styled-system/css'\nimport { field, type FieldVariantProps } from 'styled-system/recipes'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains all the primitives of the Field component.\n * @module 'field'\n */\n\nexport type FieldRootProps = ArkFieldRootProps & FieldVariantProps\n\n/**\n * The context & container for the Field components.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot required ids={{ input: 'exampleId' }}>\n *  <FieldLabel>Label</FieldLabel>\n *  <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldRoot(props: FieldRootProps) {\n  const { size, ...fieldProps } = props\n  const styles = field({ size })\n  return (\n    <Field.Root\n      {...fieldProps}\n      className={cx(styles.root, fieldProps.className)}\n    />\n  )\n}\n\n/**\n * The label for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldLabel>Label</FieldLabel>\n * </FieldRoot>\n * ```\n */\nexport function FieldLabel(props: FieldLabelProps) {\n  const { children, ...nativeProps } = props\n  const styles = field()\n  return (\n    <Field.Label {...nativeProps} className={cx(styles.label, props.className)}>\n      {children}\n      <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n    </Field.Label>\n  )\n}\n\n/**\n * The required indicator for the Field component.\n */\nexport function FieldRequiredIndicator() {\n  return <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n}\n\nexport interface FieldInputProps\n  extends Omit<ArkFieldInputProps, 'size'>,\n    FieldVariantProps {\n  /**\n   * An optional icon to display at the start of the input.\n   */\n  startIcon?: ReactNode\n  /**\n   * An optional icon to display at the end of the input.\n   */\n  endIcon?: ReactNode\n}\n\n/**\n * The input for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldInput(props: FieldInputProps) {\n  const { size, startIcon, endIcon, ...fieldProps } = props\n  const styles = field({ size })\n  const hasStartIcon = Boolean(startIcon)\n\n  return (\n    <div className={styles.inputRoot}>\n      <FieldStartIndicator>{startIcon}</FieldStartIndicator>\n      <Field.Input\n        {...fieldProps}\n        {...(hasStartIcon && { 'data-has': 'start-indicator' })}\n        className={cx(styles.input, fieldProps.className)}\n      />\n      <FieldStatusIndicator fallback={endIcon} />\n    </div>\n  )\n}\n\n/**\n * The helper text for the Field component that is shown when the field is\n * valid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldHelperText>Helper text</FieldHelperText>\n * </FieldRoot>\n * ```\n */\nexport function FieldHelperText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.HelperText\n      {...props}\n      className={cx(styles.helperText, props.className)}\n    />\n  )\n}\n\n/**\n * The error text for the Field component that is shown when the field is\n * invalid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldErrorText>Error text</FieldErrorText>\n * </FieldRoot>\n * ```\n */\nexport function FieldErrorText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.ErrorText\n      {...props}\n      className={cx(styles.errorText, props.className)}\n    />\n  )\n}\n\n/**\n * The textarea for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldTextarea />\n * </FieldRoot>\n * ```\n */\nexport function FieldTextarea(props: FieldTextareaProps) {\n  const styles = field()\n  return (\n    <Field.Textarea\n      {...props}\n      className={cx(styles.textarea, props.className)}\n    />\n  )\n}\n\n/**\n * A named export for the FieldInput component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * import { Input } from '@cerberus/react'\n *\n * <Field\n *   ids={{\n *    control: 'email',\n *   }}\n *   label=\"Enter your email\"\n *   helperText=\"We'll never share your email with anyone else.\"\n *   errorText=\"Email is required.\"\n *   required\n * >\n *   <Input type=\"email\" />\n * </Field>\n * ```\n */\nexport const Input = FieldInput\nexport const Textarea = FieldTextarea\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAKO;;;ACRP,mBAOO;AAEP,iBAAmB;AACnB,qBAA8C;AA0B1C;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAC7B,SACE;AAAA,IAAC,mBAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,MAAM,WAAW,SAAS;AAAA;AAAA,EACjD;AAEJ;;;ADaM,IAAAA,sBAAA;AAlBN,IAAM,mBAAe,4BAAwC,IAAI;AAK1D,SAAS,cAAc,OAA0C;AACtE,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,SAAS,MAAM;AAAA,IACjB;AAAA,IACA,CAAC,MAAM,UAAU,MAAM,UAAU,MAAM,UAAU,MAAM,OAAO;AAAA,EAChE;AAEA,SACE,6CAAC,aAAa,UAAb,EAAsB,OACrB,uDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;AAMO,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":["import_jsx_runtime"]}

package/build/legacy/context/navMenu.cjs

@@ -25,7 +25,7 @@ __export(navMenu_exports, {
   useNavMenuContext: () => useNavMenuContext
 });
 module.exports = __toCommonJS(navMenu_exports);
-var import_css = require("@cerberus/styled-system/css");
+var import_css = require("styled-system/css");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var NavMenuContext = (0, import_react.createContext)(null);

package/build/legacy/context/navMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef | null\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef | null\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,mBASO;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAK9D,SAAS,QAAQ,OAAuC;AAC7D,QAAM,iBAAa,qBAA0B,IAAI;AACjD,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAkB,KAAK;AAEvD,QAAM,mBAAe,0BAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,4CAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from 'styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement | null>\nexport type NavMenuRef = RefObject<HTMLUListElement | null>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenu(props: PropsWithChildren) {\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const menuRef = useRef<HTMLUListElement | null>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,mBASO;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAK9D,SAAS,QAAQ,OAA0B;AAChD,QAAM,iBAAa,qBAAiC,IAAI;AACxD,QAAM,cAAU,qBAAgC,IAAI;AACpD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAkB,KAAK;AAEvD,QAAM,mBAAe,0BAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,4CAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}