@arc-ui/components 11.8.0 → 11.10.0

package/dist/_shared/esm/Breadcrumbs-dafa8dde.d.ts

@@ -1,61 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC, ReactNode } from "react";
-declare const BreadcrumbsLink: FC<LinkProps>;
-interface LinkProps {
-    /**
-     * Render children of `breadcrumbs.link`
-     */
-    children?: ReactNode;
-    /**
-     * Where breadcrumb linkshould lead too
-     */
-    href?: string;
-    /**
-     * Pass a function to the breadcrumb item
-     */
-    onClick?: () => void;
-    /**
-     * Highlights item in breadcrumb (This also removes the a tag and any links)
-     */
-    isActive?: boolean;
-    /**
-     * Ref to `<a>` tag
-     */
-    ref?: React.Ref<HTMLAnchorElement>;
-    /**
-     * React router property
-     */
-    navigate?: () => void;
-}
-declare const BreadcrumbsItem: FC<ItemProps>;
-interface ItemProps {
-    /**
-     * Render child elements within `Breadcrumbs.Item`
-     */
-    children?: ReactNode;
-    /**
-     * Use icon as a spacer that will be positioned after `Breadcrumbs.Item`.
-     */
-    spacerIconAfter?: boolean;
-    /**
-     * Use icon as a spacer that will be positioned before `Breadcrumbs.Item`.
-     */
-    spacerIconBefore?: boolean;
-}
-/** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
-declare const Breadcrumbs: FC<BreadcrumbsProps> & {
-    Item: typeof BreadcrumbsItem;
-    Link: typeof BreadcrumbsLink;
-};
-interface BreadcrumbsProps {
-    /**
-     * Contents of the Breadcrumbs. Should only contain `Breadcrumb.Item`.
-     */
-    children: ReactNode;
-    /**
-     * Select if you want the Nav items to be Light
-     */
-    isLight?: boolean;
-}
-export { BreadcrumbsLink as default, LinkProps, ItemProps, Breadcrumbs, BreadcrumbsProps };

package/dist/_shared/esm/Button-d1dbcf79.d.ts

@@ -1,102 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-import { ArcIcon } from "./arc-icon-17594b2f";
-type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
-type Ref = React.Ref<ElementUnion> | null;
-/**
- * Use `Button` to allow users to take actions with clicks and taps.
- */
-declare const Button: FC<ButtonProps>;
-interface ButtonIconProps {
-    /**
-     * Icon variant.
-     */
-    icon?: ArcIcon;
-    /**
-     * Should the icon be a default chevron?
-     */
-    isChevron?: boolean;
-    /**
-     * Should the icon be positioned before button text?
-     */
-    isBeforeText?: boolean;
-}
-interface ButtonElementProps {
-    /**
-     * Default behavior of the Button element. If not provided, 'submit' will
-     * be inferred. Type 'reset' deliberately excluded.
-     */
-    type?: "button" | "submit";
-    /**
-     * Refers to the id of a form so it can be submitted if the button exists outside of it.
-     */
-    form?: string;
-}
-interface LinkElementProps {
-    /**
-     * URL to link to if Button elementType is 'a'.
-     */
-    href?: string;
-    /**
-     * Target window for the Button href URL.
-     */
-    target?: string;
-    /**
-     * Relationship between the Button href URL and the current page. See
-     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
-     */
-    rel?: string;
-}
-interface ButtonProps extends ButtonElementProps, LinkElementProps {
-    /**
-     * Text to override `label` with additional, more precise information
-     * specifically for screen reader users.
-     */
-    ariaLabel?: string;
-    /**
-     * Button fill.
-     */
-    fill?: "solid" | "outlined" | "flat";
-    /**
-     * Button icon variant.
-     */
-    icon?: ArcIcon;
-    /**
-     * How should a Button icon be displayed?
-     */
-    iconPosition?: "afterText" | "beforeText" | "iconOnly";
-    /**
-     * HTML ID for the Button
-     */
-    id?: string;
-    /**
-     * Should the Button be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Should the Button’s CSS display property be set to block?
-     */
-    isDisplayBlock?: boolean;
-    /**
-     * Should the Button take up the full width of its container?
-     */
-    isFullWidth?: boolean;
-    /**
-     * Button text.
-     */
-    label: string;
-    /**
-     * Optional click handler for the Button.
-     */
-    onClick?: () => void;
-    /**
-     * Optional property to provide component Ref
-     */
-    ref?: Ref;
-    /**
-     * Optional supporting text for the Button.
-     */
-    supportingText?: string;
-}
-export { ElementUnion, Ref, Button, ButtonIconProps, ButtonProps };

package/dist/_shared/esm/Card-e62c3ff6.d.ts

@@ -1,136 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC, HTMLAttributes } from "react";
-/**
- * Detect interaction mode
- */
-declare const useInteractionMode: () => {
-    interactionMode: string;
-};
-/**
- * Use `Card` to contain content and actions about a single subject.
- */
-declare const Card: FC<CardProps> & {
-    Block: typeof CardBlock;
-    Image: typeof CardImage;
-};
-/**
- * Internal `Card.Block` component to section blocks of content within a Card.
- */
-declare const CardBlock: FC<{
-    /**
-     * Contents of the CardBlock.
-     */
-    children: React.ReactNode;
-    /**
-     * How should the content of the block be aligned?
-     */
-    align?: "left" | "center" | "right";
-    /**
-     * Should the block stretch to the width of the Card?
-     */
-    isFullWidth?: boolean;
-    /**
-     * Should the block grow to the fill the available vertical space? Used when the Card appears in a column.
-     */
-    grow?: boolean;
-}>;
-/**
- * Internal `Card.Image` component to show an image within a Card.
- */
-declare const CardImage: FC<{
-    /**
-     * Alternative text for the Card.Image, shown if the image cannot be displayed.
-     */
-    alt?: string;
-    /**
-     * Height of the Card.Image.
-     */
-    height?: number;
-    /**
-     * Loading behaviour of the Card.Image.
-     */
-    loading?: "eager" | "lazy";
-    /**
-     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Required if srcSet is defined.
-     */
-    sizes?: string;
-    /**
-     * HTML src for the Card.Image.
-     */
-    src: string;
-    /**
-     * A comma-separated list indicating a set of possible image sources for the user agent to use for different screen sizes. 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`.
-     */
-    srcSet?: string;
-}>;
-type TitleSize = "xs" | "s" | "m" | "l" | "xl";
-interface CardProps extends HTMLAttributes<HTMLElement> {
-    /**
-     * The HTML ID passed to the Card Button for aria- attributes.
-     */
-    actionId?: string;
-    /**
-     * Label for the Card's Button. You should specify this if defining an href.
-     */
-    actionLabel?: string;
-    /**
-     * A `Card.Image` to use for the cover image.
-     */
-    coverImage?: React.ReactNode;
-    /**
-     * Card fill.
-     */
-    fill?: "solid" | "outlined" | "neutral";
-    /**
-     * A URL to link to when the Card is clicked or touched.
-     */
-    href: string;
-    /**
-     * Alternative text for the Card cover image, shown if the image cannot be displayed.
-     */
-    imageAlt?: string;
-    /**
-     * Height of the Card cover image.
-     */
-    imageHeight?: number;
-    /**
-     * Loading behaviour of the Card cover image.
-     */
-    imageLoading?: "eager" | "lazy";
-    /**
-     * HTML src for the Card cover image.
-     */
-    imageSrc?: string;
-    /**
-     * A comma-separated list indicating a set of possible image sources for the user agent to use for different screen sizes in the Card cover 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`.
-     */
-    imageSrcSet?: string;
-    /**
-     * Object of `data-` attributes to render on internal anchor element, e.g.
-     * `{ data-analytics-link: "My link"}` => `<a data-analytics-link="My link">`.
-     */
-    linkData?: {};
-    /**
-     * The minimum height of the card. Cards in a series of columns will match the
-     * height of the tallest Card.
-     */
-    minHeight?: number;
-    /**
-     * Link target attribute for the Card link.
-     */
-    target?: "_blank" | "_parent" | "_self" | "_top";
-    /**
-     * The title for the Card, describing the content. This is required to provide good accessibility to screen readers.
-     */
-    title: string;
-    /**
-     * The size for the Card title.
-     */
-    titleSize?: TitleSize;
-    /**
-     * On click handler.
-     */
-    onClick?: () => void;
-}
-export { useInteractionMode, Card, TitleSize, CardProps };

package/dist/_shared/esm/Checkbox-d8891198.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/esm/Columns-8704515b.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/esm/Curve-bbc5589c.d.ts

@@ -1,35 +0,0 @@
-import { FC } from "react";
-import { backgroundsBT } from "../../Surface/Surface.esm";
-/**
-#### 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/esm/DisclosureMini-9b819941.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/esm/Filter-a01aed11.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/esm/FormControl-f18e2f59.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 };