@cerberus-design/react 0.10.4 → 0.11.0

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -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;
 }
 
 /**