@arc-ui/components 11.8.0 → 11.10.0

package/dist/_shared/cjs/Checkbox-02c546ca.d.ts

@@ -1,64 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-type EventType = React.ChangeEvent<HTMLInputElement>;
-/**
- *  Use `Checkbox` to allow users to select individual options.
- */
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
-interface CheckboxProps {
-    /**
-     * Error message for the Checkbox.
-     */
-    errorMessage?: string;
-    /**
-     * Helper text for the Checkbox, shown below the label.
-     */
-    helper?: React.ReactNode;
-    /**
-     * Determine the alignment the Checkbox.
-     *
-     */
-    checkboxAlignment?: "top" | "center";
-    /**
-     * ID for the Checkbox.
-     */
-    id: string;
-    /**
-     * Is the input checked?
-     */
-    checked?: boolean;
-    /**
-     * `isDisabled` is a legacy property and not recommended from a UX usability best practice perspective.
-     */
-    isDisabled?: boolean;
-    /**
-     * Is the Checkbox required?
-     */
-    isRequired?: boolean;
-    /**
-     * Label for the Checkbox.
-     */
-    label: React.ReactNode;
-    /**
-     * Name for the Checkbox.
-     */
-    name?: string;
-    /**
-     * Function to call when the Checkbox loses focus.
-     */
-    onBlur?: (e: EventType) => void;
-    /**
-     * Callback function to update the Checkbox's controlled `checked` prop, for
-     * example `e => setChecked(e.target.checked)`.
-     */
-    onChange?: (event: EventType) => void;
-    /**
-     * Size of the Checkbox.
-     */
-    size?: "s" | "l";
-    /**
-     * Value for the Checkbox.
-     */
-    value?: string;
-}
-export { Checkbox, CheckboxProps };

package/dist/_shared/cjs/Columns-e90798f8.d.ts

@@ -1,76 +0,0 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `Columns` to compose layouts on a 12-column grid.
- */
-declare const Columns: FC<ColumnsProps> & {
-    Col: typeof Col;
-};
-declare const Col: FC<ColProps>;
-type Span = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-type Offset = "0" | "24" | "48" | "72" | "96" | "120" | "144" | "168" | "192" | "216" | "240" | "264" | "288" | "312" | "336" | "360" | "384";
-interface ColProps {
-    /**
-     * Vertically align the Column.
-     */
-    align?: "top" | "center" | "bottom";
-    /**
-     * Content to display in the Column.
-     */
-    children?: ReactNode;
-    /**
-     * Should the Column be visible for debugging and documentation
-     * purposes?
-     */
-    isDebugVisible?: boolean;
-    /**
-     * Overlay the column over the previous content on the default breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
-     */
-    offset?: Offset;
-    /**
-     * Overlay the column over the previous content on the S breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
-     */
-    offsetS?: Offset;
-    /**
-     * Overlay the column over the previous content on the M breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
-     */
-    offsetM?: Offset;
-    /**
-     * Overlay the column over the previous content on the L breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
-     */
-    offsetL?: Offset;
-    /**
-     * Overlay the column over the previous content on the XL breakpoint and above. Multiples of 24 up to 384. Use with caution, and ensure to check responsive behaviour.
-     */
-    offsetXL?: Offset;
-    /**
-     * The number of columns to span on the default breakpoint and above, from 1 to 12.
-     */
-    span?: Span;
-    /**
-     * The number of columns to span on the S breakpoint and above, from 1 to 12.
-     */
-    spanS?: Span;
-    /**
-     * The number of columns to span on the M breakpoint and above, from 1 to 12.
-     */
-    spanM?: Span;
-    /**
-     * The number of columns to span on the L breakpoint and above, from 1 to 12.
-     */
-    spanL?: Span;
-    /**
-     * The number of columns to span on the XL breakpoint and above, from 1 to 12.
-     */
-    spanXL?: Span;
-}
-interface ColumnsProps {
-    /**
-     * Contents of the Columns. Should only contain `Columns.Col`.
-     */
-    children: ReactNode;
-    /**
-     * Should the Columns be gutterless?
-     */
-    isGutterless?: boolean;
-}
-export { Columns, Col, Span, ColProps, ColumnsProps };

package/dist/_shared/cjs/Curve-781ef633.d.ts

@@ -1,35 +0,0 @@
-import { FC } from "react";
-import { backgroundsBT } from "../../Surface/Surface.cjs";
-/**
-#### Deprecation Notice
-
-The `Curve` component is an outdated brand feature and is being deprecated from Arc as a standalone component or sub-component within other components. Do not use Curve for any new work, and prepare to update any design that features it to remove it.
-
-`Curve` will be removed from Arc in a subsequent release
- */
-declare const Curve: FC<CurveProps>;
-declare const sizes: readonly ["s", "m", "l"];
-declare const positions: readonly ["bottom", "bottomLeft", "bottomRight", "top", "topLeft", "topRight"];
-interface CurveProps {
-    /**
-     * Bottom color of the Curve. Shares values with Surface.
-     */
-    bottomColor?: typeof backgroundsBT[number];
-    /**
-     * Positional variants of the Curve.
-     */
-    from?: typeof positions[number];
-    /**
-     * Should the Curve colors be flipped? Normally used at the top of Poster.
-     */
-    isInverted?: boolean;
-    /**
-     * Size of the Curve.
-     */
-    size?: typeof sizes[number];
-    /**
-     * Top color of the Curve. Shares values with Surface.
-     */
-    topColor?: typeof backgroundsBT[number];
-}
-export { Curve, sizes, positions, CurveProps };

package/dist/_shared/cjs/DisclosureMini-52706ee6.d.ts

@@ -1,37 +0,0 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `DisclosureMini` to display content that is only visible when toggled into
- * an "open" state.
- */
-declare const DisclosureMini: FC<DisclosureMiniProps>;
-interface DisclosureMiniProps {
-    /**
-     * Content to display in the DisclosureMini.
-     */
-    children: ReactNode;
-    /**
-     * DisclosureMini ID.
-     */
-    id?: string;
-    /**
-     * The DisclosureMini summary text.
-     */
-    summary: string;
-    /**
-     * Should the Disclosure content be open by default?
-     */
-    isOpen?: boolean;
-    /**
-     * Position of the DisclosureMini icon?
-     */
-    iconPosition?: "left" | "right";
-    /**
-     * On Click handler for DisclosureMini summary disclosure.
-     */
-    onClick?: () => void;
-    /**
-     * Disclosure size.
-     */
-    size?: "s" | "l";
-}
-export { DisclosureMini, DisclosureMiniProps };

package/dist/_shared/cjs/Filter-a7574fe7.d.ts

@@ -1,83 +0,0 @@
-import { FC, ReactNode } from "react";
-declare const FilterItems: FC<FilterItemsProps>;
-interface FilterItemsProps {
-    /**
-     * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
-     */
-    children: ReactNode;
-    /**
-     * Determine the display style of `<Filter.Item />`
-     */
-    displayType?: "grid" | "list";
-}
-declare const FilterItem: FC<FilterItemProps>;
-interface FilterItemProps {
-    /**
-     * Content to display within `Filter.Item`
-     */
-    children: ReactNode;
-    /**
-     * Attach Tags to content provided within `Filter.Item`
-     */
-    tags: string[];
-}
-declare const FilterControls: FC<FilterControlsProps>;
-interface FilterControlsProps {
-    /**
-     * Contents of the `<FilterControls />` Should contain `<FilterControl />`
-     */
-    children: ReactNode;
-    /**
-     * Detmine how to align <FilterControl /> with in <FilterControls />. Default `center`
-     */
-    controlsAlignment?: "left" | "right" | "center";
-}
-declare const FilterControl: FC<FilterControlProps>;
-interface FilterControlProps {
-    /**
-     * Name of the `<FilterControl />`
-     */
-    children: ReactNode;
-    /**
-     * Determine if the `<FilterControl />` is selected
-     */
-    isSelected?: boolean;
-    /**
-     * onClick handler
-     */
-    onClick?: () => void;
-}
-/** use `Filter` for interactive elements that filter and categorise page content. */
-declare const Filter: FC<FilterProps> & {
-    Item: typeof FilterItem;
-    Items: typeof FilterItems;
-    Control: typeof FilterControl;
-    Controls: typeof FilterControls;
-};
-interface FilterProps {
-    /**
-     * Contents of the `<Filter />` Should contain `<Filter.Item />`
-     */
-    children?: ReactNode;
-    /**
-     * onChange handler called everytime `<FilterControl />` is pressed
-     */
-    onChange?: (selectedControls: string[]) => void;
-    /**
-     * Detmine how to display the content within `<Filter.Items />`. Default is `grid`
-     */
-    displayType?: FilterItemsProps["displayType"];
-    /**
-     * Detmine how to align <Filter.Controls />. Default `center`
-     */
-    controlsAlignment?: FilterControlsProps["controlsAlignment"];
-    /**
-     * Detmine if the `<Filter.Control />` have to partially match or match all
-     */
-    logicType?: "AND" | "OR";
-    /**
-     * Detmine what is display when no items match the filtering criteria
-     */
-    error?: ReactNode;
-}
-export { FilterItems, FilterItemsProps, FilterItem, FilterItemProps, FilterControls, FilterControlsProps, FilterControl, FilterControlProps, Filter, FilterProps };

package/dist/_shared/cjs/FormControl-1e1bf2bf.d.ts

@@ -1,99 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-/**
- * Optionally define ariaDescribedBy if errorMessage or helper exist.
- */
-declare const useAriaDescribedby: ({ id, idError, idHelper, idDisclosure, errorMessage, helper, disclosureText }: {
-    id?: string | undefined;
-    idError?: string | undefined;
-    idDisclosure?: string | undefined;
-    idHelper?: string | undefined;
-    errorMessage?: any;
-    helper?: any;
-    disclosureText?: string | undefined;
-}) => {
-    ariaDescribedby: undefined;
-    idHelper: undefined;
-    idError: undefined;
-    idDisclosure: undefined;
-} | {
-    ariaDescribedby: string | undefined;
-    idError: string;
-    idHelper: string;
-    idDisclosure: string;
-};
-type RequirementStatus = "required" | "optional" | "not-applicable";
-declare const Context: React.Context<{
-    requirementStatus: RequirementStatus | null;
-}>;
-/**
- * Use `FormControl` to provide inputs with labels, helper text and error messages
- */
-declare const FormControl: FC<FormControlProps>;
-interface FormControlProps {
-    /**
-     * Render the input or series of inputs
-     */
-    children: React.ReactNode;
-    /**
-     * HTML Element type for the FormControl.
-     * @default 'div'
-     */
-    elementType?: "div" | "fieldset";
-    /**
-     * Error message for the FormControl.
-     */
-    errorMessage?: string;
-    /**
-     * Helper text for the FormControl, shown below the label.
-     */
-    helper?: React.ReactNode;
-    /**
-     * ID for the input that the FormControl points towards.
-     */
-    htmlFor?: string;
-    /**
-     * ID for the FormControl. Used for helper and errorMessage if `htmlFor` is undefined.
-     */
-    id?: string;
-    /**
-     * Are all of the inputs in the FormControl required, optional, or is a
-     * uniform requirement status for all inputs not applicable?
-     */
-    requirementStatus?: RequirementStatus;
-    /**
-     * Label for the FormControl.
-     */
-    label: string;
-    /**
-     * Determins if the Label should be in a disabled state
-     */
-    isDisabled?: boolean;
-    /**
-     * Label size.
-     */
-    labelSize?: "s" | "l";
-    /**
-     *   Use `DisclosureTitle` to display content that is only visible when toggled into
-     * an "open" state. This overrides helper text.
-     */
-    disclosureTitle?: string;
-    /**
-     * Text to display within the disclosure
-     */
-    disclosureText?: string;
-    /**
-     * onClick handler for FormControlDisclosure
-     */
-    onClickDisclosure?: () => void;
-    /**
-     * Optional additional information for the FormControl.
-     */
-    supplementaryInfo?: React.ReactNode;
-    /**
-     * Position helper text under label. This is set to `false` by default.
-     */
-    helperUnderLabel?: boolean;
-}
-export { useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/cjs/Group-f85dd4c0.d.ts

@@ -1,46 +0,0 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `Group` to arrange flexible items in a row.
- */
-declare const Group: FC<GroupProps> & {
-    Item: typeof GroupItem;
-};
-declare const GroupItem: FC<ItemProps>;
-interface ItemProps {
-    /**
-     * Content to display in the Group.Item.
-     */
-    children?: ReactNode;
-    /**
-     * Should the Group.Item be visible for debugging and documentation
-     * purposes?
-     */
-    isDebugVisible?: boolean;
-    /**
-     * Should the Group.Item stretch to fill the available space?
-     */
-    grow?: boolean;
-}
-interface GroupProps {
-    /**
-     * Contents of the Group. Should only contain `Group.Item`.
-     */
-    children: ReactNode;
-    /**
-     * Should all Group.Items in the Group stretch to fill the available space?
-     */
-    grow?: boolean;
-    /**
-     * Should all Group.Items in the Group stretch to fill the available space with equal widths?
-     */
-    growEqual?: boolean;
-    /**
-     * Should a border be shown between Group.Items? **Warning: Sets CSS property `overflow:hidden`.**
-     */
-    gutterBorder?: boolean;
-    /**
-     * Should wrapping of Group.Items in the Group be disabled?
-     */
-    noWrap?: boolean;
-}
-export { Group, GroupItem, ItemProps, GroupProps };

package/dist/_shared/cjs/Heading-e3332dcf.d.ts

@@ -1,50 +0,0 @@
-import { FC, ReactNode } from "react";
-/**
- * Use `Heading` to display heading text.
- */
-declare const Heading: FC<HeadingProps> & {
-    Proposition: typeof HeadingProposition;
-};
-declare const HeadingProposition: FC<HeadingPropositionProps>;
-interface HeadingPropositionProps {
-    /**
-     * Text to display in the Proposition.
-     */
-    children: ReactNode;
-}
-type HeadingCasing = "auto" | "none";
-type HeadingColor = "auto" | "brand";
-type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
-type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-interface HeadingProps {
-    /**
-     * Text alignment of the Heading.
-     */
-    align?: "left" | "center" | "right";
-    /**
-     * Typographic casing of the Heading.
-     */
-    casing?: HeadingCasing;
-    /**
-     * Text and inline markup to display in the Heading.
-     */
-    children: ReactNode;
-    /**
-     * The color of the Heading.
-     */
-    color?: HeadingColor;
-    /**
-     * Id for the Heading.
-     */
-    id?: string;
-    /**
-     * HTML section heading level. If not provided, the Heading will render as
-     * a span.
-     */
-    level?: HeadingLevel;
-    /**
-     * Typographic size of the Heading.
-     */
-    size?: HeadingSize;
-}
-export { Heading, HeadingProposition, HeadingPropositionProps, HeadingCasing, HeadingColor, HeadingLevel, HeadingSize, HeadingProps };

package/dist/_shared/cjs/Icon-e1dd45eb.d.ts

@@ -1,34 +0,0 @@
-import { FC } from "react";
-import { ArcIcon } from "./arc-icon-17594b2f";
-/**
- * Use `Icon` to display brand iconography.
- */
-declare const Icon: FC<IconProps>;
-declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
-interface IconProps {
-    /**
-     * Color of the Icon.
-     */
-    color?: typeof colors[number];
-    /**
-     * Should the Icon component be styled as an inline element?
-     */
-    isInline?: boolean;
-    /**
-     * Icon variant.
-     */
-    icon?: ArcIcon;
-    /**
-     * Alternative text label for the Icon.
-     */
-    label?: string;
-    /**
-     * Size of the Icon, in pixels.
-     */
-    size?: number;
-    /**
-     * value for data-testid
-     */
-    testId?: string;
-}
-export { Icon, colors, IconProps };

package/dist/_shared/cjs/Image-0e393cbf.d.ts

@@ -1,94 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from "react";
-import { anchorPoints } from "./index-9483ad5f";
-/**
- * Use `Image` to render a single image, or set of images, with support for
- * image fitting and art direction.
- */
-declare const Image: FC<ImageProps> & {
-    Source: typeof ImageSource;
-};
-declare const ImageSource: FC<ImageSourceProps>;
-interface ImageSourceProps {
-    /**
-     * The intrinsic height of the ImageSource, in pixels
-     */
-    height?: number;
-    /**
-     * Media condition (similar to a media query) that the user agent will evaluate for each ImageSource element. Same format as [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media), i.e. `(min-width: 600px)`
-     */
-    media?: string;
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attribute. Only required if srcSet is switching widths.
-     */
-    sizes?: string;
-    /**
-     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the ImageSource element. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
-     */
-    srcSet: string;
-    /**
-     * MIME type for the resource URL(s) in the ImageSource element's srcset attribute. If the user agent does not support the given type, the element is skipped. Same format as [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type), i.e. `image/jpeg`.
-     */
-    type?: string;
-    /**
-     * The intrinsic width of the ImageSource, in pixels
-     */
-    width?: number;
-}
-declare const fitOptions: readonly ["cover"];
-declare const loadingOptions: readonly ["eager", "lazy"];
-declare const overlayOptions: readonly ["scrimBottomDark"];
-interface ImageProps extends HTMLAttributes<HTMLElement> {
-    /**
-     * Alternative text for the Image, shown if the image cannot be displayed.
-     */
-    alt?: string;
-    /**
-     * Anchor point for the Image if using fit="cover".
-     */
-    anchor?: typeof anchorPoints[number];
-    /**
-     * Optionally enable HTML <picture> functionality by passing `Image.Source`
-     * components as children.
-     */
-    children?: ReactNode;
-    /**
-     * Fallback hexadecimal fill color. The intent is to increase perceived loading speed. Do not use on images with transparency. Requires that an explicit width and height be set for the image.
-     */
-    fillColor?: string;
-    /**
-     * Fit of the Image.
-     */
-    fit?: typeof fitOptions[number];
-    /**
-     * Height dimension of the Image, in pixels. If fit="cover", the height in which
-     * to fit the Image. Otherwise, the intrinsic height of the Image element.
-     */
-    height?: number;
-    /**
-     * Loading behaviour of the Image.
-     */
-    loading?: typeof loadingOptions[number];
-    /**
-     * Apply an overlay to the Image, e.g. a scrim gradient for text legibility.
-     * Should not be used if the image has a rasterized overlay.
-     */
-    overlay?: typeof overlayOptions[number];
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Only required if srcSet is switching widths. Ignored if `children` (<source> elements) are present.
-     */
-    sizes?: string;
-    /**
-     * Image `src`. Used if srcSet is not defined, or as a fallback.
-     */
-    src: string;
-    /**
-     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`. Ignored if `children` (<source> elements) are present.
-     */
-    srcSet?: string;
-    /**
-     * Width dimension of the Image, in pixels. If fit="cover", the width in which
-     * to fit the Image. Otherwise, the intrinsic width of the Image element.
-     */
-    width?: number;
-}
-export { Image, ImageSource, ImageSourceProps, fitOptions, loadingOptions, overlayOptions, ImageProps };

package/dist/_shared/cjs/ItemGroup-5af4d600.d.ts

@@ -1,27 +0,0 @@
-import { FC, ReactNode } from "react";
-declare const ItemGroup: FC<ItemGroupProps>;
-interface ItemGroupProps {
-    /**
-     * Contents of the ItemGroup. Must be Item components.
-     */
-    children: ReactNode;
-    /**
-     * A top-level URL for the ItemGroup to link to.
-     */
-    href?: string;
-    /**
-     * Title text to be displayed in the ItemGroup summary.
-     */
-    title?: string;
-    /**
-     * Text to display in top-level link inside the ItemGroup in narrow viewports.
-     * Only applies if `href` is present. If not provided, top-level link text
-     * will be automatically generated from `title`.
-     */
-    viewAllTitle?: string;
-    /**
-     * On click handler.
-     */
-    onClick?: () => void;
-}
-export { ItemGroup, ItemGroupProps };