@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-5d7dc1e

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/prompt-modal.tsx","../../../src/components/button/button.tsx","../../../src/components/Show.tsx","../../../src/components/Input.tsx","../../../src/context/field.tsx","../../../src/context/cerberus.tsx","../../../src/components/Label.tsx","../../../src/components/Avatar.tsx","../../../src/components/Text.tsx","../../../src/components/Dialog.tsx","../../../src/components/Portal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { Text } from '../components/Text'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/Dialog'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { DialogCloseTrigger } from '@ark-ui/react'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n  /**\n   * The kind of prompt modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'destructive' | 'non-destructive'\n  /**\n   * The heading of the prompt modal.\n   */\n  heading: string\n  /**\n   * The description of the prompt modal.\n   */\n  description?: string\n  /**\n   * The key to confirm the action.\n   */\n  key: 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}\nexport type PromptShowResult =\n  | ((value: string | PromiseLike<string>) => void)\n  | null\n\nexport interface PromptModalValue {\n  /**\n   * The method to trigger the prompt modal.\n   * @returns the value of the key if the action is confirmed.\n   * @example\n   * ```tsx\n   * const accepted = await prompt.show({\n   *  kind: 'destructive',\n   *  heading: 'Delete channel?',\n   *  description:\n   *   'This will permanently delete a channel on your account. There is no going back.',\n   *  key: CHANNEL_NAME,\n   *  actionText: 'Yes, delete channel',\n   *  cancelText: 'No, cancel',\n   * })\n   */\n  show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n *   <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n *  const accepted = await prompt.show({\n *   kind: 'destructive',\n *   heading: 'Delete channel?',\n *  description:\n *   'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n  props: PropsWithChildren<PromptModalProviderProps>,\n) {\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n\n  const { icons } = useCerberusContext()\n  const { promptModal: PromptIcon } = icons\n\n  const isValid = useMemo(\n    () => inputValue === content?.key,\n    [inputValue, content],\n  )\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.currentTarget.value)\n    },\n    [content],\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?.(inputValue)\n      }\n      setOpen(false)\n    },\n    [inputValue, setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <PromptModalContext.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                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<PromptIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<PromptIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <VStack\n              alignItems=\"flex-start\"\n              marginBlockStart=\"md\"\n              marginBlockEnd=\"lg\"\n              w=\"full\"\n            >\n              <Field invalid={!isValid}>\n                <Label\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start !important',\n                  })}\n                  htmlFor=\"confirm\"\n                  size=\"md\"\n                >\n                  Type\n                  <Text as=\"strong\" textTransform=\"uppercase\">\n                    {content?.key}\n                  </Text>\n                  to confirm\n                </Label>\n                <Input\n                  id=\"confirm\"\n                  name=\"confirm\"\n                  onChange={handleChange}\n                  type=\"text\"\n                />\n              </Field>\n            </VStack>\n\n            <HStack gap=\"md\" justify=\"stretch\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                disabled={!isValid}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n\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    </PromptModalContext.Provider>\n  )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n  const context = useContext(PromptModalContext)\n  if (context === null) {\n    throw new Error('usePromptModal must be used within a PromptModal Provider')\n  }\n  return context\n}\n","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\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 { Show } from '../Show'\nimport { Spinner } from '../Spinner'\nimport { Box } from '@cerberus/styled-system/jsx'\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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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","'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Show } from './Show'\n\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  /**\n   * The id of the FieldMessage component used to describe the input. Required for accessibility.\n   */\n  describedBy?: string\n  /**\n   * The unique identifier for the input element. Required for accessibility.\n   */\n  id: string\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}\nexport type InputProps = InputBaseProps & InputVariantProps\n\n/**\n * A component that allows the user to input text. Must be wrapped in a Field\n * component to keep track of the state for entire group of elements related to\n * the field.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n\n  const { icons } = useCerberusContext()\n  const { invalid: InvalidIcon } = icons\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <InvalidIcon className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\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 * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\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      {props.children}\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","'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","'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { css, cx } 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 */\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  /**\n   * The unique identifier for the input element. Required for accessibility.\n   */\n  htmlFor: string\n  /**\n   * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.\n   */\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelVariantProps\n\n/**\n * A a11y compliant label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/label\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"search\" hidden>Search everything</Label>\n *   <Input id=\"search\" startIcon={Search} type=\"text\" />\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: 'page.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n","'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { icons } = useCerberusContext()\n  const { avatar: AvatarIcon } = icons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n","import {\n  Em,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  P,\n  Small,\n  Span,\n  Strong,\n  type PProps,\n} from '@cerberus/styled-system/jsx'\nimport { type HTMLAttributes, type PropsWithChildren } from 'react'\n\n/**\n * This module exports a component for rendering text utilizing the styled-system JSX utility.\n * @module @cerberus/react/Text\n */\n\nexport type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'\n\n// For some reason we have to use the HTMLParagraphElement type here\n// or else TS will fail for non-style props like 'id' or 'className'\nexport interface TextProps\n  extends PProps,\n    HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * The element to render as. Defaults to 'p'.\n   */\n  as?: TextElements | Headings\n}\n\n/**\n * A component for rendering text utilizing the styled-system JSX utility.\n * @definition [Text docs](https://cerberus.digitalu.design/react/text)\n * @example\n * ```tsx\n * <Text as=\"h1\" color=\"page.text.100\" textStyle={{\n *   base: 'heading-md',\n *   md: 'heading-lg',\n * }}>\n *  Hello, world!\n * </Text>\n */\nexport function Text(props: PropsWithChildren<TextProps>) {\n  const { as = 'p', ...pandaJSXProps } = props\n  switch (as) {\n    case 'h1':\n      return <H1 {...pandaJSXProps} />\n    case 'h2':\n      return <H2 {...pandaJSXProps} />\n    case 'h3':\n      return <H3 {...pandaJSXProps} />\n    case 'h4':\n      return <H4 {...pandaJSXProps} />\n    case 'h5':\n      return <H5 {...pandaJSXProps} />\n    case 'h6':\n      return <H6 {...pandaJSXProps} />\n    case 'strong':\n      return <Strong {...pandaJSXProps} />\n    case 'em':\n      return <Em {...pandaJSXProps} />\n    case 'small':\n      return <Small {...pandaJSXProps} />\n    case 'span':\n      return <Span {...pandaJSXProps} />\n    default:\n      return <P {...pandaJSXProps} />\n  }\n}\n","import {\n  Dialog as ArkDialog,\n  type DialogContentProps as ArkDialogContentProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n} from '@ark-ui/react'\nimport {\n  dialog,\n  type DialogVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Portal } from './Portal'\nimport { cx } from '@cerberus/styled-system/css'\n\nexport type DialogProviderProps = DialogRootProps\n\n/**\n * The provider that controls the dialog components.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/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 *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogProvider(props: DialogProviderProps) {\n  return <ArkDialog.Root {...props} />\n}\n\nexport interface DialogProps\n  extends Omit<ArkDialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/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  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Portal>\n      <DialogBackdrop className={styles.backdrop} />\n      <DialogPositioner className={styles.positioner}>\n        <DialogContent className={styles.content} {...contentProps} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n\n/**\n * The heading of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Title {...props} className={cx(props.className, styles.title)} />\n  )\n}\n\n/**\n * The description of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <DialogDescription>Dialog Description</DialogDescription>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogDescription(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Description\n      {...props}\n      className={cx(props.className, styles.description)}\n    />\n  )\n}\n\n/**\n * The trigger that opens the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogTrigger asChild>\n *  <Button>Open Dialog</Button>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = ArkDialog.Trigger\n\n/**\n * The trigger that closes the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/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 *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport const DialogCloseTrigger = ArkDialog.CloseTrigger\n\n/**\n * The backdrop of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogBackdrop = ArkDialog.Backdrop\n\n/**\n * The positioner of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogPositioner = ArkDialog.Positioner\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogContent = ArkDialog.Content\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"],"mappings":"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","names":["import_react","import_react","import_css","import_patterns","import_recipes","import_css","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_css","import_patterns","import_recipes","import_jsx_runtime","import_jsx","import_jsx_runtime","import_react","import_recipes","import_react","ArkPortal","import_css","import_jsx_runtime","ArkDialog","import_jsx","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/context/prompt-modal.tsx","../../../src/components/field/primitives.tsx","../../../src/components/field/status-indicator.tsx","../../../src/context/cerberus.tsx","../../../src/components/field/start-indicator.tsx","../../../src/components/Show.tsx","../../../src/components/button/button.tsx","../../../src/components/Avatar.tsx","../../../src/components/Text.tsx","../../../src/components/Dialog.tsx","../../../src/components/Portal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { DialogCloseTrigger } from '@ark-ui/react'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { FieldLabel, FieldRoot, Input } from '../components/field/index'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { Text } from '../components/Text'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/Dialog'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n  /**\n   * The kind of prompt modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'destructive' | 'non-destructive'\n  /**\n   * The heading of the prompt modal.\n   */\n  heading: string\n  /**\n   * The description of the prompt modal.\n   */\n  description?: string\n  /**\n   * The key to confirm the action.\n   */\n  key: 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}\nexport type PromptShowResult =\n  | ((value: string | PromiseLike<string>) => void)\n  | null\n\nexport interface PromptModalValue {\n  /**\n   * The method to trigger the prompt modal.\n   * @returns the value of the key if the action is confirmed.\n   * @example\n   * ```tsx\n   * const accepted = await prompt.show({\n   *  kind: 'destructive',\n   *  heading: 'Delete channel?',\n   *  description:\n   *   'This will permanently delete a channel on your account. There is no going back.',\n   *  key: CHANNEL_NAME,\n   *  actionText: 'Yes, delete channel',\n   *  cancelText: 'No, cancel',\n   * })\n   */\n  show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n *   <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n *  const accepted = await prompt.show({\n *   kind: 'destructive',\n *   heading: 'Delete channel?',\n *  description:\n *   'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n  props: PropsWithChildren<PromptModalProviderProps>,\n) {\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n\n  const { icons } = useCerberusContext()\n  const { promptModal: PromptIcon } = icons\n\n  const isValid = useMemo(\n    () => inputValue === content?.key,\n    [inputValue, content],\n  )\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.currentTarget.value)\n    },\n    [content],\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?.(inputValue)\n      }\n      setOpen(false)\n    },\n    [inputValue, setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <PromptModalContext.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                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<PromptIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<PromptIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <VStack\n              alignItems=\"flex-start\"\n              marginBlockStart=\"md\"\n              marginBlockEnd=\"lg\"\n              w=\"full\"\n            >\n              <FieldRoot\n                ids={{\n                  control: 'confirm',\n                }}\n                invalid={!isValid}\n              >\n                <FieldLabel\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start !important',\n                    marginBlockEnd: 'xs',\n                    textStyle: 'label-md',\n                  })}\n                >\n                  Type\n                  <Text as=\"strong\" textTransform=\"uppercase\">\n                    {content?.key}\n                  </Text>\n                  to confirm\n                </FieldLabel>\n                <Input name=\"confirm\" onChange={handleChange} type=\"text\" />\n              </FieldRoot>\n            </VStack>\n\n            <HStack gap=\"md\" justify=\"stretch\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                disabled={!isValid}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n\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    </PromptModalContext.Provider>\n  )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n  const context = useContext(PromptModalContext)\n  if (context === null) {\n    throw new Error('usePromptModal must be used within a PromptModal 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","'use client'\n\nimport { useFieldContext } from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { field } from '@cerberus/styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface FieldStatusIndicatorProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The fallback content to display when the field is valid.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * The invalid status indicator for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldStatusIndicator />\n * </FieldRoot>\n * ```\n */\nexport function FieldStatusIndicator(props: FieldStatusIndicatorProps) {\n  const { fallback, ...nativeProps } = props\n  const styles = field()\n  const fieldContext = useFieldContext()\n\n  const { icons } = useCerberusContext()\n  const { invalid: InvalidIcon } = icons\n\n  if (fieldContext.invalid) {\n    return (\n      <span\n        {...nativeProps}\n        aria-hidden=\"true\"\n        data-invalid\n        className={cx(nativeProps.className, styles.statusIndicator)}\n      >\n        <InvalidIcon />\n      </span>\n    )\n  }\n\n  return (\n    <span\n      {...nativeProps}\n      aria-hidden=\"true\"\n      data-part=\"end-indicator\"\n      className={cx(nativeProps.className, styles.endIndicator)}\n    >\n      {fallback}\n    </span>\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 { cx } from '@cerberus/styled-system/css'\nimport { field } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>\n\n/**\n * The start indicator displays an indicator at the start of the Input.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n */\nexport function FieldStartIndicator(props: FieldIndicatorProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <span\n      {...props}\n      data-part=\"start-indicator\"\n      className={cx(props.className, styles.startIndicator)}\n    />\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","'use client'\n\nimport {\n  type ButtonHTMLAttributes,\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 = ButtonHTMLAttributes<HTMLButtonElement> &\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): JSX.Element {\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      <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 { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { icons } = useCerberusContext()\n  const { avatar: AvatarIcon } = icons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n","import {\n  Em,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  P,\n  Small,\n  Span,\n  Strong,\n  type PProps,\n} from '@cerberus/styled-system/jsx'\nimport { type HTMLAttributes, type PropsWithChildren } from 'react'\n\n/**\n * This module exports a component for rendering text utilizing the styled-system JSX utility.\n * @module @cerberus/react/Text\n */\n\nexport type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'\n\n// For some reason we have to use the HTMLParagraphElement type here\n// or else TS will fail for non-style props like 'id' or 'className'\nexport interface TextProps\n  extends PProps,\n    HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * The element to render as. Defaults to 'p'.\n   */\n  as?: TextElements | Headings\n}\n\n/**\n * A component for rendering text utilizing the styled-system JSX utility.\n * @definition [Text docs](https://cerberus.digitalu.design/react/text)\n * @example\n * ```tsx\n * <Text as=\"h1\" color=\"page.text.100\" textStyle={{\n *   base: 'heading-md',\n *   md: 'heading-lg',\n * }}>\n *  Hello, world!\n * </Text>\n */\nexport function Text(props: PropsWithChildren<TextProps>) {\n  const { as = 'p', ...pandaJSXProps } = props\n  switch (as) {\n    case 'h1':\n      return <H1 {...pandaJSXProps} />\n    case 'h2':\n      return <H2 {...pandaJSXProps} />\n    case 'h3':\n      return <H3 {...pandaJSXProps} />\n    case 'h4':\n      return <H4 {...pandaJSXProps} />\n    case 'h5':\n      return <H5 {...pandaJSXProps} />\n    case 'h6':\n      return <H6 {...pandaJSXProps} />\n    case 'strong':\n      return <Strong {...pandaJSXProps} />\n    case 'em':\n      return <Em {...pandaJSXProps} />\n    case 'small':\n      return <Small {...pandaJSXProps} />\n    case 'span':\n      return <Span {...pandaJSXProps} />\n    default:\n      return <P {...pandaJSXProps} />\n  }\n}\n","import {\n  Dialog as ArkDialog,\n  type DialogContentProps as ArkDialogContentProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n} from '@ark-ui/react'\nimport {\n  dialog,\n  type DialogVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Portal } from './Portal'\nimport { cx } from '@cerberus/styled-system/css'\n\nexport type DialogProviderProps = DialogRootProps\n\n/**\n * The provider that controls the dialog components.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/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 *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogProvider(props: DialogProviderProps) {\n  return <ArkDialog.Root {...props} />\n}\n\nexport interface DialogProps\n  extends Omit<ArkDialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/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  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Portal>\n      <DialogBackdrop className={styles.backdrop} />\n      <DialogPositioner className={styles.positioner}>\n        <DialogContent className={styles.content} {...contentProps} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n\n/**\n * The heading of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Title {...props} className={cx(props.className, styles.title)} />\n  )\n}\n\n/**\n * The description of the dialog. Must be used within the `DialogContent` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <DialogHeading>Dialog Title</DialogHeading>\n *    <DialogDescription>Dialog Description</DialogDescription>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function DialogDescription(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <ArkDialog.Description\n      {...props}\n      className={cx(props.className, styles.description)}\n    />\n  )\n}\n\n/**\n * The trigger that opens the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @example\n * ```tsx\n * <DialogTrigger asChild>\n *  <Button>Open Dialog</Button>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = ArkDialog.Trigger\n\n/**\n * The trigger that closes the dialog. Must be used within the `DialogProvider`\n * component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/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 *    <DialogCloseTrigger>Close</DialogCloseTrigger>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport const DialogCloseTrigger = ArkDialog.CloseTrigger\n\n/**\n * The backdrop of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogBackdrop = ArkDialog.Backdrop\n\n/**\n * The positioner of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogPositioner = ArkDialog.Positioner\n\n/**\n * The content of the dialog. Must be used within the `DialogProvider`\n * component.\n */\nexport const DialogContent = ArkDialog.Content\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"],"mappings":"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","names":["import_react","import_jsx","import_css","import_patterns","import_css","import_recipes","import_react","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_react","import_react","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_jsx","import_jsx_runtime","import_react","import_recipes","import_react","ArkPortal","import_css","import_jsx_runtime","ArkDialog","import_jsx_runtime"]}

package/build/legacy/hooks/useDate.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDate.ts"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useCallback,\n  ChangeEvent,\n  useMemo,\n  type InputHTMLAttributes,\n} from 'react'\n\nexport interface UseDateBase {\n  /**\n   * The format of the date input\n   */\n  format?: string\n  /**\n   * The callback to run when the date input changes\n   */\n  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']\n}\n\nexport interface UseDateOptions extends UseDateBase {\n  /**\n   * The initial value of the date input\n   */\n  initialValue?: string\n}\n\nexport interface UseDateReturn extends UseDateBase {\n  /**\n   * The ISO formatted date string\n   */\n  ISO: string\n  /**\n   * The value of the date input\n   */\n  value: string\n}\n\n/**\n * A hook for formatting and validating date inputs. The date format defaults to US Military format.\n * @example\n * ```tsx\n * const MyComponent = () => {\n *  const date = useDate({ initialValue: '01 JAN 2024' })\n *  return <input onChange={date.onChange} type=\"text\" value={date.value} />\n * }\n */\nexport function useDate(options?: UseDateOptions): UseDateReturn {\n  const initialValue = options?.initialValue ?? ''\n  const format = options?.format ?? DateFormats.USMilitary\n  const onChange = options?.onChange\n  const [value, setValue] = useState(initialValue)\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = formatMilitaryDate(e.currentTarget.value)\n      if (onChange) onChange(e)\n      setValue(newValue)\n    },\n    [onChange],\n  )\n\n  return useMemo(\n    () => ({\n      format,\n      value,\n      ISO: formatMilitaryToISO(value),\n      onChange: handleChange,\n    }),\n    [format, value, handleChange],\n  )\n}\n\n// helpers\n\n/**\n * Converts a string in US Military format to ISO format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in ISO format (YYYY-MM-DD)\n */\nexport function formatMilitaryToISO(input: string) {\n  const [day, month, year] = input.split(' ')\n  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n  const monthNum = monthIndex + 1\n  return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(\n    2,\n    '0',\n  )}`\n}\n\n/**\n * Converts a string to US Military format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in US Military format (DD MMM YYYY)\n */\nexport function formatMilitaryDate(input: string): string {\n  let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')\n  let day = ''\n  let month = ''\n  let year = ''\n\n  // Format day\n  if (formatted.length >= 2) {\n    day = formatted.replace(/[^0-9]/g, '').slice(0, 2)\n    const dayNum = parseInt(day, 10)\n    if (dayNum > 31) day = '31'\n    else if (dayNum === 0) day = '01'\n    formatted = formatted.slice(2)\n  }\n\n  // Format month\n  if (formatted.length >= 3) {\n    month = formatted.slice(0, 3)\n    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n    if (monthIndex !== -1) {\n      month = MONTHS[monthIndex]\n    } else {\n      month = month.replace(/[^A-Z]/g, '')\n    }\n    formatted = formatted.slice(3)\n  }\n\n  // Format year\n  if (formatted.length > 0) {\n    year = formatted.slice(0, 4)\n  }\n\n  return [day, month, year].filter(Boolean).join(' ')\n}\n\n/**\n * Formats a date string to US Military format.\n * @param date The date string to format (i.e., '2024-01-01')\n * @returns The formatted date string in US Military format (DD MMM YYYY)\n */\nexport function formatISOToMilitary(date: string): string {\n  const [year, month, day] = date.split('-')\n  const monthIndex = parseInt(month, 10) - 1\n  const monthStr = MONTHS[monthIndex]\n  return `${day} ${monthStr} ${year}`\n}\n\n/**\n * Date formatting options\n * @example\n * ```tsx\n * const date = new Date()\n * const formatted = date.format(DateFormats.USMilitary)\n */\nexport const DateFormats = {\n  get ISO() {\n    return 'YYYY-MM-DD'\n  },\n  get USMilitary() {\n    return 'DD MMM YYYY'\n  },\n  get Months() {\n    return MONTHS\n  },\n}\n\nconst MONTHS = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AAwCA,SAAS,QAAQ,SAAyC;AAC/D,QAAM,gBAAe,mCAAS,iBAAgB;AAC9C,QAAM,UAAS,mCAAS,WAAU,YAAY;AAC9C,QAAM,WAAW,mCAAS;AAC1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAE/C,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,WAAW,mBAAmB,EAAE,cAAc,KAAK;AACzD,UAAI,SAAU,UAAS,CAAC;AACxB,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK,oBAAoB,KAAK;AAAA,MAC9B,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY;AAAA,EAC9B;AACF;AASO,SAAS,oBAAoB,OAAe;AACjD,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,MAAM,MAAM,GAAG;AAC1C,QAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAM,WAAW,aAAa;AAC9B,SAAO,GAAG,QAAQ,MAAM,IAAI,SAAS,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI;AAAA,IACtE;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAOO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,YAAY,MAAM,YAAY,EAAE,QAAQ,cAAc,EAAE;AAC5D,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAGX,MAAI,UAAU,UAAU,GAAG;AACzB,UAAM,UAAU,QAAQ,WAAW,EAAE,EAAE,MAAM,GAAG,CAAC;AACjD,UAAM,SAAS,SAAS,KAAK,EAAE;AAC/B,QAAI,SAAS,GAAI,OAAM;AAAA,aACd,WAAW,EAAG,OAAM;AAC7B,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,UAAU,GAAG;AACzB,YAAQ,UAAU,MAAM,GAAG,CAAC;AAC5B,UAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAI,eAAe,IAAI;AACrB,cAAQ,OAAO,UAAU;AAAA,IAC3B,OAAO;AACL,cAAQ,MAAM,QAAQ,WAAW,EAAE;AAAA,IACrC;AACA,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,SAAS,GAAG;AACxB,WAAO,UAAU,MAAM,GAAG,CAAC;AAAA,EAC7B;AAEA,SAAO,CAAC,KAAK,OAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpD;AAOO,SAAS,oBAAoB,MAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,KAAK,MAAM,GAAG;AACzC,QAAM,aAAa,SAAS,OAAO,EAAE,IAAI;AACzC,QAAM,WAAW,OAAO,UAAU;AAClC,SAAO,GAAG,GAAG,IAAI,QAAQ,IAAI,IAAI;AACnC;AASO,IAAM,cAAc;AAAA,EACzB,IAAI,MAAM;AACR,WAAO;AAAA,EACT;AAAA,EACA,IAAI,aAAa;AACf,WAAO;AAAA,EACT;AAAA,EACA,IAAI,SAAS;AACX,WAAO;AAAA,EACT;AACF;AAEA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
+{"version":3,"sources":["../../../src/hooks/useDate.ts"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useCallback,\n  ChangeEvent,\n  useMemo,\n  type InputHTMLAttributes,\n} from 'react'\n\nexport interface UseDateBase {\n  /**\n   * The format of the date input\n   */\n  format?: string\n  /**\n   * The callback to run when the date input changes\n   */\n  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']\n}\n\nexport interface UseDateOptions extends UseDateBase {\n  /**\n   * The initial value of the date input\n   */\n  initialValue?: string\n}\n\nexport interface UseDateReturn extends UseDateBase {\n  /**\n   * The ISO formatted date string\n   */\n  ISO: string\n  /**\n   * The value of the date input\n   */\n  value: string\n}\n\n/**\n * @deprecated use the DatePicker family instead\n */\nexport function useDate(options?: UseDateOptions): UseDateReturn {\n  const initialValue = options?.initialValue ?? ''\n  const format = options?.format ?? DateFormats.USMilitary\n  const onChange = options?.onChange\n  const [value, setValue] = useState(initialValue)\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = formatMilitaryDate(e.currentTarget.value)\n      if (onChange) onChange(e)\n      setValue(newValue)\n    },\n    [onChange],\n  )\n\n  return useMemo(\n    () => ({\n      format,\n      value,\n      ISO: formatMilitaryToISO(value),\n      onChange: handleChange,\n    }),\n    [format, value, handleChange],\n  )\n}\n\n// helpers\n\n/**\n * Converts a string in US Military format to ISO format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in ISO format (YYYY-MM-DD)\n */\nexport function formatMilitaryToISO(input: string) {\n  const [day, month, year] = input.split(' ')\n  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n  const monthNum = monthIndex + 1\n  return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(\n    2,\n    '0',\n  )}`\n}\n\n/**\n * Converts a string to US Military format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in US Military format (DD MMM YYYY)\n */\nexport function formatMilitaryDate(input: string): string {\n  let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')\n  let day = ''\n  let month = ''\n  let year = ''\n\n  // Format day\n  if (formatted.length >= 2) {\n    day = formatted.replace(/[^0-9]/g, '').slice(0, 2)\n    const dayNum = parseInt(day, 10)\n    if (dayNum > 31) day = '31'\n    else if (dayNum === 0) day = '01'\n    formatted = formatted.slice(2)\n  }\n\n  // Format month\n  if (formatted.length >= 3) {\n    month = formatted.slice(0, 3)\n    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n    if (monthIndex !== -1) {\n      month = MONTHS[monthIndex]\n    } else {\n      month = month.replace(/[^A-Z]/g, '')\n    }\n    formatted = formatted.slice(3)\n  }\n\n  // Format year\n  if (formatted.length > 0) {\n    year = formatted.slice(0, 4)\n  }\n\n  return [day, month, year].filter(Boolean).join(' ')\n}\n\n/**\n * Formats a date string to US Military format.\n * @param date The date string to format (i.e., '2024-01-01')\n * @returns The formatted date string in US Military format (DD MMM YYYY)\n */\nexport function formatISOToMilitary(date: string): string {\n  const [year, month, day] = date.split('-')\n  const monthIndex = parseInt(month, 10) - 1\n  const monthStr = MONTHS[monthIndex]\n  return `${day} ${monthStr} ${year}`\n}\n\n/**\n * Date formatting options\n * @example\n * ```tsx\n * const date = new Date()\n * const formatted = date.format(DateFormats.USMilitary)\n */\nexport const DateFormats = {\n  get ISO() {\n    return 'YYYY-MM-DD'\n  },\n  get USMilitary() {\n    return 'DD MMM YYYY'\n  },\n  get Months() {\n    return MONTHS\n  },\n}\n\nconst MONTHS = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AAkCA,SAAS,QAAQ,SAAyC;AAC/D,QAAM,gBAAe,mCAAS,iBAAgB;AAC9C,QAAM,UAAS,mCAAS,WAAU,YAAY;AAC9C,QAAM,WAAW,mCAAS;AAC1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAE/C,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,WAAW,mBAAmB,EAAE,cAAc,KAAK;AACzD,UAAI,SAAU,UAAS,CAAC;AACxB,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK,oBAAoB,KAAK;AAAA,MAC9B,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY;AAAA,EAC9B;AACF;AASO,SAAS,oBAAoB,OAAe;AACjD,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,MAAM,MAAM,GAAG;AAC1C,QAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAM,WAAW,aAAa;AAC9B,SAAO,GAAG,QAAQ,MAAM,IAAI,SAAS,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI;AAAA,IACtE;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAOO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,YAAY,MAAM,YAAY,EAAE,QAAQ,cAAc,EAAE;AAC5D,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAGX,MAAI,UAAU,UAAU,GAAG;AACzB,UAAM,UAAU,QAAQ,WAAW,EAAE,EAAE,MAAM,GAAG,CAAC;AACjD,UAAM,SAAS,SAAS,KAAK,EAAE;AAC/B,QAAI,SAAS,GAAI,OAAM;AAAA,aACd,WAAW,EAAG,OAAM;AAC7B,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,UAAU,GAAG;AACzB,YAAQ,UAAU,MAAM,GAAG,CAAC;AAC5B,UAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAI,eAAe,IAAI;AACrB,cAAQ,OAAO,UAAU;AAAA,IAC3B,OAAO;AACL,cAAQ,MAAM,QAAQ,WAAW,EAAE;AAAA,IACrC;AACA,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,SAAS,GAAG;AACxB,WAAO,UAAU,MAAM,GAAG,CAAC;AAAA,EAC7B;AAEA,SAAO,CAAC,KAAK,OAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpD;AAOO,SAAS,oBAAoB,MAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,KAAK,MAAM,GAAG;AACzC,QAAM,aAAa,SAAS,OAAO,EAAE,IAAI;AACzC,QAAM,WAAW,OAAO,UAAU;AAClC,SAAO,GAAG,GAAG,IAAI,QAAQ,IAAI,IAAI;AACnC;AASO,IAAM,cAAc;AAAA,EACzB,IAAI,MAAM;AACR,WAAO;AAAA,EACT;AAAA,EACA,IAAI,aAAa;AACf,WAAO;AAAA,EACT;AAAA,EACA,IAAI,SAAS;AACX,WAAO;AAAA,EACT;AACF;AAEA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}