@cerberus-design/react 0.10.4 → 0.11.0

package/build/modern/_tsup-dts-rollup.d.ts

@@ -1,6 +1,7 @@
 import { Activator } from '@dnd-kit/core';
 import { Activators } from '@dnd-kit/core';
 import { Active } from '@dnd-kit/core';
+import { AdmonitionVariantProps } from '@cerberus/styled-system/recipes';
 import type { AnchorHTMLAttributes } from 'react';
 import { Announcements } from '@dnd-kit/core';
 import { applyModifiers } from '@dnd-kit/core';
@@ -10,6 +11,7 @@ import { AvatarVariantProps } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { CancelDrop } from '@dnd-kit/core';
+import { CarbonIconProps } from '@cerberus/icons';
 import { CarbonIconType } from '@cerberus/icons';
 import { ChangeEvent } from 'react';
 import { CheckboxVariantProps } from '@cerberus/styled-system/recipes';
@@ -55,6 +57,7 @@ import { DroppableContainers } from '@dnd-kit/core';
 import { DroppableMeasuring } from '@dnd-kit/core';
 import { ElementType } from 'react';
 import { FieldMessageVariantProps } from '@cerberus/styled-system/recipes';
+import type { FieldsetHTMLAttributes } from 'react';
 import { FileStatusVariantProps } from '@cerberus/styled-system/recipes';
 import { ForwardRefExoticComponent } from 'react';
 import { getClientRect } from '@dnd-kit/core';
@@ -74,6 +77,7 @@ import { KeyboardSensor } from '@dnd-kit/core';
 import { KeyboardSensorOptions } from '@dnd-kit/core';
 import { KeyboardSensorProps } from '@dnd-kit/core';
 import { LabelVariantProps } from '@cerberus/styled-system/recipes';
+import { LabelVariantProps as LabelVariantProps_2 } from '@cerberus-design/styled-system/recipes';
 import { MeasuringConfiguration } from '@dnd-kit/core';
 import { MeasuringFrequency } from '@dnd-kit/core';
 import { MeasuringStrategy } from '@dnd-kit/core';
@@ -148,6 +152,88 @@ export { Activators }
 
 export { Active }
 
+/**
+ * The `Admonition` component is used to create an admonition.
+ * @example
+ * ```tsx
+ * <Admonition palette="page">
+ *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
+ *  <AdmonitionDescription palette="page">
+ *   This is a page admonition.
+ *  </AdmonitionDescription>
+ * </Admonition>
+ * ```
+ * @see https://cerberus.digitalu.design/react/admonition
+ */
+declare function Admonition(props: AdmonitionProps): JSX_2.Element;
+export { Admonition }
+export { Admonition as Admonition_alias_1 }
+
+/**
+ * The `AdmonitionDescription` component is used to create a description within
+ * an admonition.
+ * @example
+ * ```tsx
+ * <Admonition palette="page">
+ *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
+ *  <AdmonitionDescription palette="page">
+ *   This is a page admonition.
+ *  </AdmonitionDescription>
+ * </Admonition>
+ * ```
+ * @see https://cerberus.digitalu.design/react/admonition
+ */
+declare function AdmonitionDescription(props: AdmonitionDescriptionProps): JSX_2.Element;
+export { AdmonitionDescription }
+export { AdmonitionDescription as AdmonitionDescription_alias_1 }
+
+declare type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> & AdmonitionVariantProps;
+export { AdmonitionDescriptionProps }
+export { AdmonitionDescriptionProps as AdmonitionDescriptionProps_alias_1 }
+
+/**
+ * The `AdmonitionHeading` component is used to create a heading within an
+ * admonition.
+ * @example
+ * ```tsx
+ * <Admonition palette="page">
+ *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
+ *  <AdmonitionDescription palette="page">
+ *   This is a page admonition.
+ *  </AdmonitionDescription>
+ * </Admonition>
+ * ```
+ * @see https://cerberus.digitalu.design/react/admonition
+ */
+declare function AdmonitionHeading(props: AdmonitionHeadingProps): JSX_2.Element;
+export { AdmonitionHeading }
+export { AdmonitionHeading as AdmonitionHeading_alias_1 }
+
+declare type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> & AdmonitionVariantProps;
+export { AdmonitionHeadingProps }
+export { AdmonitionHeadingProps as AdmonitionHeadingProps_alias_1 }
+
+/**
+ * This module provides a set of components for creating admonitions.
+ * @module Admonition
+ */
+declare type AdmonitionProps = HTMLAttributes<HTMLDivElement> & AdmonitionVariantProps & {
+    /**
+     * One off replacement for the icon.
+     */
+    icon?: ReactNode;
+};
+export { AdmonitionProps }
+export { AdmonitionProps as AdmonitionProps_alias_1 }
+
+export declare function AnimatingUploadIcon(props: AnimatingUploadIconProps): JSX_2.Element;
+
+/**
+ * This module contains an animating icon to use for the FileStatus component.
+ * @module
+ */
+export declare type AnimatingUploadIconProps = CarbonIconProps;
+
 export { Announcements }
 
 export { applyModifiers }
@@ -336,6 +422,10 @@ declare interface CircularProgressProps extends SVGProps<SVGSVGElement> {
      * What is shown below the now value (default: 'Done')
      */
     syntax?: string;
+    /**
+     * The background style of the CircularProgress
+     */
+    bgStyle?: 'filled' | 'transparent';
 }
 export { CircularProgressProps }
 export { CircularProgressProps as CircularProgressProps_alias_1 }
@@ -466,6 +556,7 @@ export declare interface DefinedIcons {
     confirmModal?: IconType;
     delete?: IconType;
     promptModal?: IconType;
+    waitingFileUploader?: IconType;
     fileUploader?: IconType;
     indeterminate?: IconType;
     infoNotification?: IconType;
@@ -687,6 +778,96 @@ declare type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProp
 export { FieldMessageProps }
 export { FieldMessageProps as FieldMessageProps_alias_1 }
 
+/**
+ * A component to group related elements in a form for accessibility.
+ * @memberof Field
+ * @see https://cerberus.digitalu.com/react/fieldset
+ * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
+ * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
+ * @example
+ * ```tsx
+ * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
+ * import { Hstack } from '@cerberus/styled-system/jsx'
+ *
+ * function SomeForm() {
+ *   return (
+ *    <form>
+ *     <Fieldset>
+ *      <Legend>Do you like cats?</Legend>
+ *      <Hstack>
+ *        <Field>
+ *          <Radio id="yes" name="cats" value="yes" />
+ *          <Label htmlFor="yes">Yes</Label>
+ *        </Field>
+ *      </Hstack>
+ *      <Hstack>
+ *        <Field>
+ *         <Radio id="no" name="cats" value="no" />
+ *         <Label htmlFor="no">No</Label>
+ *        </Field>
+ *      </Hstack>
+ *     </Fieldset>
+ *    </form>
+ *   )
+ * }
+ */
+declare function Fieldset(props: FieldsetProps): JSX_2.Element;
+export { Fieldset }
+export { Fieldset as Fieldset_alias_1 }
+
+/**
+ * Used for labeling inputs that are children of a Fieldset group.
+ * @memberof Fieldset
+ * @see https://cerberus.digitalu.design/react/fieldset
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @example
+ * ```tsx
+ * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
+ * import { Hstack } from '@cerberus/styled-system/jsx'
+ *
+ * function SomeForm() {
+ *   return (
+ *    <form>
+ *     <Fieldset>
+ *      <Legend>Do you like cats?</Legend>
+ *      <Hstack>
+ *        <Field>
+ *          <Radio id="yes" name="cats" value="yes" />
+ *          <FieldsetLabel htmlFor="yes">Yes</FieldsetLabel>
+ *        </Field>
+ *      </Hstack>
+ *      <Hstack>
+ *        <Field>
+ *         <Radio id="no" name="cats" value="no" />
+ *         <FieldsetLabel htmlFor="no">No</FieldsetLabel>
+ *        </Field>
+ *      </Hstack>
+ *     </Fieldset>
+ *    </form>
+ *   )
+ * }
+ * ```
+ */
+declare function FieldsetLabel(props: FieldsetLabelProps): JSX_2.Element;
+export { FieldsetLabel }
+export { FieldsetLabel as FieldsetLabel_alias_1 }
+
+/**
+ * This module contains the FieldsetLabel component.
+ * @module FieldsetLabel
+ */
+declare type FieldsetLabelProps = LabelProps & LabelVariantProps;
+export { FieldsetLabelProps }
+export { FieldsetLabelProps as FieldsetLabelProps_alias_1 }
+
+/**
+ * This module contains the Fieldset component.
+ * @module Fieldset
+ */
+declare type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export { FieldsetProps }
+export { FieldsetProps as FieldsetProps_alias_1 }
+
 declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
     /**
      * A unique identifier for the file status. Required for accessibility.
@@ -776,6 +957,10 @@ declare interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement
      * The name of the file input element.
      */
     name: string;
+    /**
+     * Disable the FileUploader component. Good for single-use file uploads.
+     */
+    disabled?: boolean;
 }
 export { FileUploaderProps }
 export { FileUploaderProps as FileUploaderProps_alias_1 }
@@ -958,6 +1143,52 @@ declare type LabelProps = LabelBaseProps & LabelVariantProps;
 export { LabelProps }
 export { LabelProps as LabelProps_alias_1 }
 
+/**
+ * A component to provide a global label for a group of related elements in a form (for accessibility).
+ * @memberof Fieldset
+ * @see https://cerberus.digitalu.com/react/fieldset
+ * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
+ * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
+ * @example
+ * ```tsx
+ * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
+ * import { Hstack } from '@cerberus/styled-system/jsx'
+ *
+ * function SomeForm() {
+ *   return (
+ *    <form>
+ *     <Fieldset>
+ *      <Legend>Do you like cats?</Legend>
+ *      <Hstack>
+ *        <Field>
+ *          <Radio id="yes" name="cats" value="yes" />
+ *          <Label htmlFor="yes">Yes</Label>
+ *        </Field>
+ *      </Hstack>
+ *      <Hstack>
+ *        <Field>
+ *         <Radio id="no" name="cats" value="no" />
+ *         <Label htmlFor="no">No</Label>
+ *        </Field>
+ *      </Hstack>
+ *     </Fieldset>
+ *    </form>
+ *   )
+ * }
+ * ```
+ */
+declare function Legend(props: LegendProps): JSX_2.Element;
+export { Legend }
+export { Legend as Legend_alias_1 }
+
+/**
+ * This module contains the Fieldset component.
+ * @module Fieldset
+ */
+declare type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps_2;
+export { LegendProps }
+export { LegendProps as LegendProps_alias_1 }
+
 export { MeasuringConfiguration }
 
 export { MeasuringFrequency }
@@ -2347,9 +2578,16 @@ export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }
 
 /**
- * Provides a hook for using a custom modal.
+ * Provides a hook for using a custom modal via the native dialog element
+ * methods.
+ *
+ * Cerberus modals use the native dialog element. This hook
+ * does not control the modal via React state but rather by calling the
+ * native dialog element's `showModal` and `close` methods.
+ *
  * @memberof module:Modal
- * @returns The modal hook.
+ * @see https://cerberus.digitalu.design/react/modal
+ * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
  */
 declare function useModal(): UseModalReturnValue;
 export { useModal }
@@ -2372,6 +2610,10 @@ declare interface UseModalReturnValue {
      * Closes the modal.
      */
     close: () => void;
+    /**
+     * Whether the modal is open based on the show and close methods.
+     */
+    isOpen: boolean;
 }
 
 /**

package/build/modern/{chunk-S7XGIQY6.js → chunk-243VUIA6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-NBG2OSYI.js";
+} from "./chunk-FT7DFRHQ.js";
 
 // src/components/Tag.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -61,4 +61,4 @@ var closableCss = css({
 export {
   Tag
 };
-//# sourceMappingURL=chunk-S7XGIQY6.js.map
+//# sourceMappingURL=chunk-243VUIA6.js.map

package/build/modern/{chunk-LKFXUM3Z.js → chunk-3NE6C66J.js}

@@ -1,27 +1,27 @@
 import {
   Portal
 } from "./chunk-GLY7GU5S.js";
-import {
-  ModalHeader
-} from "./chunk-WLEX22KS.js";
-import {
-  ModalHeading
-} from "./chunk-2UXE5PDG.js";
 import {
   Input
-} from "./chunk-WZOYPFUU.js";
+} from "./chunk-UJKS4DDN.js";
 import {
   Label
-} from "./chunk-I35HMGJQ.js";
+} from "./chunk-NMF2HYWO.js";
 import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
   ModalDescription
 } from "./chunk-Q7BRMIBR.js";
+import {
+  ModalHeader
+} from "./chunk-ULYQLKWA.js";
+import {
+  ModalHeading
+} from "./chunk-2UXE5PDG.js";
 import {
   Avatar
-} from "./chunk-477G5ZEL.js";
+} from "./chunk-ZX6DBC2Z.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
@@ -36,10 +36,10 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-NBG2OSYI.js";
+} from "./chunk-FT7DFRHQ.js";
 import {
   useModal
-} from "./chunk-OW62FLJ6.js";
+} from "./chunk-7T3JIGM7.js";
 
 // src/context/prompt-modal.tsx
 import {
@@ -150,19 +150,30 @@ function PromptModal(props) {
             mb: "8"
           }),
           children: /* @__PURE__ */ jsxs(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "confirm", size: "md", children: [
-              "Type",
-              /* @__PURE__ */ jsx(
-                "strong",
-                {
-                  className: css({
-                    textTransform: "uppercase"
-                  }),
-                  children: content?.key
-                }
-              ),
-              "to confirm"
-            ] }),
+            /* @__PURE__ */ jsxs(
+              Label,
+              {
+                className: css({
+                  gap: 1,
+                  justifyContent: "flex-start"
+                }),
+                htmlFor: "confirm",
+                size: "md",
+                children: [
+                  "Type",
+                  /* @__PURE__ */ jsx(
+                    "strong",
+                    {
+                      className: css({
+                        textTransform: "uppercase"
+                      }),
+                      children: content?.key
+                    }
+                  ),
+                  "to confirm"
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -229,4 +240,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-LKFXUM3Z.js.map
+//# sourceMappingURL=chunk-3NE6C66J.js.map

package/build/modern/{chunk-LKFXUM3Z.js.map → chunk-3NE6C66J.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/prompt-modal.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 { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\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 interface PromptModalProviderProps {}\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 { modalRef, show, close } = useModal()\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n  const focusTrap = trapFocus(modalRef)\n  const PromptIcon = $cerberusIcons.promptModal\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      close()\n    },\n    [inputValue, close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\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      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\n            <div\n              className={hstack({\n                justify: 'center',\n                w: 'full',\n              })}\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            </div>\n            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\n\n          <div\n            className={vstack({\n              alignItems: 'flex-start',\n              mt: '4',\n              mb: '8',\n            })}\n          >\n            <Field invalid={!isValid}>\n              <Label htmlFor=\"confirm\" size=\"md\">\n                Type\n                <strong\n                  className={css({\n                    textTransform: 'uppercase',\n                  })}\n                >\n                  {content?.key}\n                </strong>\n                to confirm\n              </Label>\n              <Input\n                id=\"confirm\"\n                name=\"confirm\"\n                onChange={handleChange}\n                type=\"text\"\n              />\n            </Field>\n          </div>\n\n          <div\n            className={hstack({\n              justifyContent: 'stretch',\n              gap: '4',\n            })}\n          >\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            <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          </div>\n        </Modal>\n      </Portal>\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"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/context/prompt-modal.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 { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\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 interface PromptModalProviderProps {}\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 { modalRef, show, close } = useModal()\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n  const focusTrap = trapFocus(modalRef)\n  const PromptIcon = $cerberusIcons.promptModal\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      close()\n    },\n    [inputValue, close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\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      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\n            <div\n              className={hstack({\n                justify: 'center',\n                w: 'full',\n              })}\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            </div>\n            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\n\n          <div\n            className={vstack({\n              alignItems: 'flex-start',\n              mt: '4',\n              mb: '8',\n            })}\n          >\n            <Field invalid={!isValid}>\n              <Label\n                className={css({\n                  gap: 1,\n                  justifyContent: 'flex-start',\n                })}\n                htmlFor=\"confirm\"\n                size=\"md\"\n              >\n                Type\n                <strong\n                  className={css({\n                    textTransform: 'uppercase',\n                  })}\n                >\n                  {content?.key}\n                </strong>\n                to confirm\n              </Label>\n              <Input\n                id=\"confirm\"\n                name=\"confirm\"\n                onChange={handleChange}\n                type=\"text\"\n              />\n            </Field>\n          </div>\n\n          <div\n            className={hstack({\n              justifyContent: 'stretch',\n              gap: '4',\n            })}\n          >\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            <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          </div>\n        </Modal>\n      </Portal>\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"],"mappings":"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","names":[]}

package/build/modern/chunk-3ZDFQO25.js

@@ -0,0 +1,31 @@
+import {
+  useFieldContext
+} from "./chunk-UZDVOIW5.js";
+
+// src/components/Fieldset.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function Fieldset(props) {
+  const { invalid, ...formState } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      ...props,
+      ...formState,
+      ...invalid && { "aria-invalid": true },
+      className: cx(
+        props.className,
+        css({
+          border: "none",
+          pt: 2,
+          margin: 0
+        })
+      )
+    }
+  );
+}
+
+export {
+  Fieldset
+};
+//# sourceMappingURL=chunk-3ZDFQO25.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Fieldset.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport type { FieldsetHTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>\n\n/**\n * A component to group related elements in a form for accessibility.\n * @memberof Field\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <Label htmlFor=\"yes\">Yes</Label>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <Label htmlFor=\"no\">No</Label>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n */\nexport function Fieldset(props: FieldsetProps) {\n  const { invalid, ...formState } = useFieldContext()\n\n  return (\n    <fieldset\n      {...props}\n      {...formState}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        css({\n          border: 'none',\n          pt: 2,\n          margin: 0,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,KAAK,UAAU;AAgDpB;AAJG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI,gBAAgB;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,IAAI;AAAA,UACF,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-YLPSE5Z2.js → chunk-6QHOKCV3.js}

@@ -1,3 +1,7 @@
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
 // src/components/CircularProgress.tsx
 import { cq } from "@cerberus/styled-system/patterns";
 import { css } from "@cerberus/styled-system/css";
@@ -7,6 +11,7 @@ function CircularProgress(props) {
   const radius = `calc(50% * (1 - ${strokeW}/100))`;
   const status = props.syntax ?? "Done";
   const now = props.now >= 100 ? 100 : props.now;
+  const bgStyle = props.bgStyle ?? "filled";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -44,18 +49,18 @@ function CircularProgress(props) {
                 "stop",
                 {
                   offset: "0%",
-                  stopColor: "var(--cerberus-colors-action-bg-initial)"
+                  stopColor: "var(--cerberus-colors-data-viz-progress-start)"
                 }
               ),
               /* @__PURE__ */ jsx(
                 "stop",
                 {
                   offset: "100%",
-                  stopColor: "var(--cerberus-colors-action-bg-active)"
+                  stopColor: "var(--cerberus-colors-data-viz-progress-end)"
                 }
               )
             ] }) }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ jsx(
               "circle",
               {
                 className: css({
@@ -66,7 +71,7 @@ function CircularProgress(props) {
                 r: `calc(50% * (1 - ${strokeW}/100))`,
                 pathLength: "100"
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               "circle",
               {
@@ -86,7 +91,7 @@ function CircularProgress(props) {
                 className: css({
                   stroke: "url(#gradient)",
                   transition: "stroke-dashoffset, stroke 0.5s ease",
-                  "&:is([data-complete=true])": {
+                  _isComplete: {
                     stroke: "success.bg.initial"
                   }
                 }),
@@ -145,4 +150,4 @@ function CircularProgress(props) {
 export {
   CircularProgress
 };
-//# sourceMappingURL=chunk-YLPSE5Z2.js.map
+//# sourceMappingURL=chunk-6QHOKCV3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from '@cerberus/styled-system/patterns'\nimport { css } from '@cerberus/styled-system/css'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  syntax?: string\n  /**\n   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n  const bgStyle: string = props.bgStyle ?? 'filled'\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={cq({\n        alignSelf: 'stretch',\n        flex: 1,\n        m: '4px',\n        position: 'relative',\n      })}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={css({\n          display: 'block',\n          rounded: 'full',\n          transition: 'all 0.5s ease',\n        })}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\n          <circle\n            className={css({\n              fill: 'page.surface.initial',\n            })}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={`calc(50% * (1 - ${strokeW}/100))`}\n            pathLength=\"100\"\n          />\n        </Show>\n        <circle\n          className={css({\n            stroke: 'page.bg.100',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n        <circle\n          data-complete={now === 100}\n          className={css({\n            stroke: 'url(#gradient)',\n            transition: 'stroke-dashoffset, stroke 0.5s ease',\n            _isComplete: {\n              stroke: 'success.bg.initial',\n            },\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          r={radius}\n          pathLength=\"100\"\n          strokeDasharray=\"100\"\n          strokeDashoffset={100 - now}\n          transform=\"rotate(-90 50 50)\"\n        />\n\n        <g>\n          <text\n            className={css({\n              fill: 'page.text.initial',\n              fontFamily: 'mono',\n              textStyle: '1.25rem',\n            })}\n            x=\"50%\"\n            y=\"47%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n              fontWeight: 600,\n            })}\n            x=\"50%\"\n            y=\"59%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/build/modern/chunk-6TTN2JMY.js

@@ -0,0 +1,54 @@
+import {
+  useFieldContext
+} from "./chunk-UZDVOIW5.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
+// src/components/Legend.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import {
+  label
+} from "@cerberus-design/styled-system/recipes";
+import { hstack } from "@cerberus-design/styled-system/patterns";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Legend(props) {
+  const { size, ...nativeProps } = props;
+  const { invalid, ...formState } = useFieldContext();
+  return /* @__PURE__ */ jsxs(
+    "legend",
+    {
+      ...nativeProps,
+      ...formState,
+      ...invalid && { "aria-invalid": true },
+      className: cx(
+        nativeProps.className,
+        hstack({
+          justify: "space-between",
+          w: "full"
+        }),
+        label({
+          size
+        })
+      ),
+      children: [
+        nativeProps.children,
+        /* @__PURE__ */ jsx(Show, { when: formState.required, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: css({
+              color: "page.text.100",
+              fontSize: "inherit"
+            }),
+            children: "(required)"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Legend
+};
+//# sourceMappingURL=chunk-6TTN2JMY.js.map