@arc-ui/components 11.8.0 → 11.10.0

package/dist/Tag/Tag.esm.d.ts

@@ -1,33 +0,0 @@
-import { FC, ReactNode } from "react";
-import { ArcIcon } from "../_shared/esm/arc-icon-17594b2f";
-/**
- * use `Tag` to promote features and manage filtering.
- */
-declare const Tag: FC<TagProps>;
-interface TagProps {
-    /**
-     * Content to render within the Tag
-     */
-    children: ReactNode;
-    /**
-     * Determine if the Tag is removable.
-     */
-    isRemovable?: boolean;
-    /**
-     * Provide a link for the tag
-     */
-    link?: string;
-    /**
-     * Determine a icon to display within the tag.
-     */
-    icon?: ArcIcon;
-    /**
-     * onClick Handler for Tag
-     */
-    onClick?: () => void;
-    /**
-     * Execute function on remove
-     */
-    onRemove?: () => void;
-}
-export { Tag };

package/dist/Text/Text.cjs.d.ts

@@ -1 +0,0 @@
-export { Text } from "../_shared/cjs/Text-fa447e2d";

package/dist/Text/Text.esm.d.ts

@@ -1 +0,0 @@
-export { Text } from "../_shared/esm/Text-40457811";

package/dist/TextArea/TextArea.cjs.d.ts

@@ -1,64 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FormControlProps } from "../_shared/cjs/FormControl-1e1bf2bf";
-type EventType = React.ChangeEvent<HTMLTextAreaElement>;
-/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
-declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
-interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
-    /**
-     * Uncontrolled default value of the TextArea. If the TextArea is controlled
-     * via `value`/`onChange`, `defaultValue` will be ignored.
-     *
-     * `defaultValue` is not to be used instead of helper text.
-     */
-    defaultValue?: string;
-    /**
-     * ID for the TextArea.
-     */
-    id: string;
-    /**
-     * Should the control be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Should the control be read-only?
-     */
-    isReadOnly?: boolean;
-    /**
-     * Should the control be required?
-     */
-    isRequired?: boolean;
-    /**
-     * Maximum number of characters.
-     */
-    maxLength?: number;
-    /**
-     * Shows the current character count and maxLength. Ignored if maxLength is undefined.
-     */
-    showCharacterCount?: boolean;
-    /**
-     * Name of the input.
-     */
-    name?: string;
-    /**
-     * `none` will prevent any resizing.
-     * `manual` will allow the user to resize the TextArea.
-     * `auto` will resize the text area as needed when the user types.
-     */
-    resize?: "none" | "manual" | "auto";
-    /**
-     * Function to call when the TextArea loses focus.
-     */
-    onBlur?: (e: EventType) => void;
-    /**
-     * Callback function commonly used to update the TextArea's controlled
-     * `value`, for example `e => setValue(e.target.value)`.
-     */
-    onChange?: (e: EventType) => void;
-    /**
-     * Current value of the TextArea. Must be controlled via an
-     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
-     */
-    value?: string;
-}
-export { TextArea };

package/dist/TextArea/TextArea.esm.d.ts

@@ -1,64 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FormControlProps } from "../_shared/esm/FormControl-f18e2f59";
-type EventType = React.ChangeEvent<HTMLTextAreaElement>;
-/** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
-declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
-interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
-    /**
-     * Uncontrolled default value of the TextArea. If the TextArea is controlled
-     * via `value`/`onChange`, `defaultValue` will be ignored.
-     *
-     * `defaultValue` is not to be used instead of helper text.
-     */
-    defaultValue?: string;
-    /**
-     * ID for the TextArea.
-     */
-    id: string;
-    /**
-     * Should the control be disabled?
-     */
-    isDisabled?: boolean;
-    /**
-     * Should the control be read-only?
-     */
-    isReadOnly?: boolean;
-    /**
-     * Should the control be required?
-     */
-    isRequired?: boolean;
-    /**
-     * Maximum number of characters.
-     */
-    maxLength?: number;
-    /**
-     * Shows the current character count and maxLength. Ignored if maxLength is undefined.
-     */
-    showCharacterCount?: boolean;
-    /**
-     * Name of the input.
-     */
-    name?: string;
-    /**
-     * `none` will prevent any resizing.
-     * `manual` will allow the user to resize the TextArea.
-     * `auto` will resize the text area as needed when the user types.
-     */
-    resize?: "none" | "manual" | "auto";
-    /**
-     * Function to call when the TextArea loses focus.
-     */
-    onBlur?: (e: EventType) => void;
-    /**
-     * Callback function commonly used to update the TextArea's controlled
-     * `value`, for example `e => setValue(e.target.value)`.
-     */
-    onChange?: (e: EventType) => void;
-    /**
-     * Current value of the TextArea. Must be controlled via an
-     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
-     */
-    value?: string;
-}
-export { TextArea };

package/dist/TextInput/TextInput.cjs.d.ts

@@ -1 +0,0 @@
-export { TextInput } from "../_shared/cjs/TextInput-13050538";

package/dist/TextInput/TextInput.esm.d.ts

@@ -1 +0,0 @@
-export { TextInput } from "../_shared/esm/TextInput-13050538";

package/dist/Toast/Toast.cjs.d.ts

@@ -1,52 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-declare const ToastNotification: FC<ToastNotificationProps>;
-type ToastStatus = "general" | "error" | "warning" | "success";
-interface ToastNotificationProps {
-    /**
-     * Title for `<Toast />`
-     */
-    title: string;
-    /**
-     * Set open state for `<Toast />`
-     */
-    isOpen: boolean;
-    /**
-     * Function to call when the open state of `<Toast />` changes. This needs to be supplied in order for the auto dismiss and the close button to work.
-     */
-    onOpenChange: (isOpen: boolean) => void;
-    /**
-     * Set whether close button shows
-     */
-    isCloseButtonVisible?: boolean;
-    /**
-     * Set whether to include a status icon
-     */
-    isStatusIconVisible?: boolean;
-    /**
-     * Link for `<Toast />`
-     */
-    link?: {
-        text: string;
-        ariaLabel?: string;
-        href?: string;
-        onClick?: () => void;
-    };
-    /**
-     * Sstatus of `<Toast />`
-     */
-    status?: ToastStatus;
-}
-/** Use `Toast` to display temporary messages at the bottom of the viewport. */
-declare const Toast: FC<ToastProps> & {
-    Notification: typeof ToastNotification;
-};
-interface ToastProps {
-    children: React.ReactNode;
-    /**
-     * Color scheme for `<Toast />`
-     */
-    pathway?: "dark" | "light";
-}
-export { Toast };

package/dist/Toast/Toast.esm.d.ts

@@ -1,52 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-declare const ToastNotification: FC<ToastNotificationProps>;
-type ToastStatus = "general" | "error" | "warning" | "success";
-interface ToastNotificationProps {
-    /**
-     * Title for `<Toast />`
-     */
-    title: string;
-    /**
-     * Set open state for `<Toast />`
-     */
-    isOpen: boolean;
-    /**
-     * Function to call when the open state of `<Toast />` changes. This needs to be supplied in order for the auto dismiss and the close button to work.
-     */
-    onOpenChange: (isOpen: boolean) => void;
-    /**
-     * Set whether close button shows
-     */
-    isCloseButtonVisible?: boolean;
-    /**
-     * Set whether to include a status icon
-     */
-    isStatusIconVisible?: boolean;
-    /**
-     * Link for `<Toast />`
-     */
-    link?: {
-        text: string;
-        ariaLabel?: string;
-        href?: string;
-        onClick?: () => void;
-    };
-    /**
-     * Sstatus of `<Toast />`
-     */
-    status?: ToastStatus;
-}
-/** Use `Toast` to display temporary messages at the bottom of the viewport. */
-declare const Toast: FC<ToastProps> & {
-    Notification: typeof ToastNotification;
-};
-interface ToastProps {
-    children: React.ReactNode;
-    /**
-     * Color scheme for `<Toast />`
-     */
-    pathway?: "dark" | "light";
-}
-export { Toast };

package/dist/Truncate/Truncate.cjs.d.ts

@@ -1,18 +0,0 @@
-import { FC, ReactNode } from "react";
-/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
-declare const Truncate: FC<TruncateProps>;
-interface TruncateProps {
-    /**
-     * Content to truncate.
-     */
-    children: ReactNode;
-    /**
-     * Use title to provide extra information about text that is truncated.
-     */
-    title: string;
-    /**
-     * Set max width of visible content within `Truncate`. Default is `100%`.
-     */
-    maxWidth?: number;
-}
-export { Truncate };

package/dist/Truncate/Truncate.esm.d.ts

@@ -1,18 +0,0 @@
-import { FC, ReactNode } from "react";
-/** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
-declare const Truncate: FC<TruncateProps>;
-interface TruncateProps {
-    /**
-     * Content to truncate.
-     */
-    children: ReactNode;
-    /**
-     * Use title to provide extra information about text that is truncated.
-     */
-    title: string;
-    /**
-     * Set max width of visible content within `Truncate`. Default is `100%`.
-     */
-    maxWidth?: number;
-}
-export { Truncate };

package/dist/UniversalHeader/UniversalHeader.cjs.d.ts

@@ -1 +0,0 @@
-export { UniversalHeader } from "../_shared/cjs/UniversalHeader-da622e1a";

package/dist/UniversalHeader/UniversalHeader.esm.d.ts

@@ -1 +0,0 @@
-export { UniversalHeader } from "../_shared/esm/UniversalHeader-1c5a886d";

package/dist/VerticalSpace/VerticalSpace.cjs.d.ts

@@ -1 +0,0 @@
-export { VerticalSpace } from "../_shared/cjs/VerticalSpace-86f697e7";

package/dist/VerticalSpace/VerticalSpace.esm.d.ts

@@ -1 +0,0 @@
-export { VerticalSpace } from "../_shared/esm/VerticalSpace-93980c9c";

package/dist/VisuallyHidden/VisuallyHidden.cjs.d.ts

@@ -1 +0,0 @@
-export { VisuallyHidden } from "../_shared/cjs/VisuallyHidden-e2c8b291";

package/dist/VisuallyHidden/VisuallyHidden.esm.d.ts

@@ -1 +0,0 @@
-export { VisuallyHidden } from "../_shared/esm/VisuallyHidden-b9eebf71";

package/dist/_shared/cjs/Base-569e4334.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import React from "react";
-import { FC } from "react";
-declare const ArcRootElementContext: React.Context<HTMLElement | null>;
-/**
- * Use `Base` as the root component of the arc system.
- */
-declare const Base: FC<BaseProps>;
-interface BaseProps {
-    /**
-     * Brand theme to apply to Base.
-     */
-    brand?: "bt" | null;
-    /**
-     * Content to display inside Base.
-     */
-    children: any;
-}
-export { ArcRootElementContext, Base, BaseProps };

package/dist/_shared/cjs/BrandLogo-8107d59f.d.ts

@@ -1,26 +0,0 @@
-import { FC } from "react";
-/**
- * Use `BrandLogo` to display the brand logo.
- */
-declare const BrandLogo: FC<BrandLogoProps>;
-declare const colors: readonly ["auto", "brand"];
-declare const subBrands: readonly ["redcare", "wholesale"];
-interface BrandLogoProps {
-    /**
-     * Color of the BrandLogo. The `brand` color only shows on light surfaces.
-     */
-    color?: typeof colors[number];
-    /**
-     * Accessible text for the BrandLogo.
-     */
-    label?: string;
-    /**
-     * Size of the BrandLogo, in pixels.
-     */
-    size?: number;
-    /**
-     * Optional sub-brand variant. Only applies to BT.
-     */
-    subBrand?: typeof subBrands[number];
-}
-export { BrandLogo, colors, subBrands, BrandLogoProps };

package/dist/_shared/cjs/Breadcrumbs-0906dd10.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/cjs/Button-5aaa6776.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/cjs/Card-fd189ba8.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 };