@arc-ui/components 11.25.0 → 12.0.0-beta.10

package/dist/types/components/Alert/Alert.d.ts

@@ -31,11 +31,7 @@ export interface AlertProps {
     /**
      * Determine the type of alert
      */
-    type?: "primary" | "secondary";
-    /**
-     * Determine the type of alert
-     */
-    status?: "general" | "error" | "warning" | "success";
+    status?: AlertStatus;
     /**
      * Determine showing a dismiss icon within `<Alert />`
      */
@@ -54,3 +50,5 @@ export interface AlertProps {
      */
     linkAriaLabel?: string;
 }
+type AlertStatus = "general" | "error" | "warning" | "success";
+export {};

package/dist/types/components/AppButton/AppButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const AppButton: React.FC<AppButtonProps>;
+type AppButtonType = "google-play" | "apple-app-store";
+export interface AppButtonProps {
+    type: AppButtonType;
+    screenReaderText: string;
+    url: string;
+}
+export {};

package/dist/types/components/AppButton/icons/AppStore.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AppStoreIcon: () => JSX.Element;

package/dist/types/components/AppButton/icons/GooglePlay.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GooglePlayIcon: () => JSX.Element;

package/dist/types/components/AppButton/index.d.ts

@@ -0,0 +1 @@
+export { AppButton, type AppButtonProps } from "./AppButton";

package/dist/types/components/Avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar } from "./Avatar";
+export { Avatar, type AvatarProps } from "./Avatar";

package/dist/types/components/Avatar/types/avatar-image.d.ts

@@ -1,2 +1,2 @@
 import { type ImageProps } from "../../Image/Image";
-export type AvatarImage = Pick<ImageProps, "src" | "loading" | "sizes" | "srcSet" | "width" | "height" | "alt">;
+export type AvatarImage = Pick<ImageProps, "src" | "loading" | "sizes" | "srcSet" | "width" | "height" | "alt" | "fadeOnLoad">;

package/dist/types/components/Badge/Badge.d.ts

@@ -6,14 +6,6 @@ export interface BadgeProps {
      * Text to display within Badge
      */
     children: ReactNode;
-    /**
-     * Badge Size
-     */
-    size?: "default" | "large";
-    /**
-     * Badge has outline
-     */
-    fill?: "solid" | "outlined";
     /**
      * State of the Badge
      */

package/dist/types/components/Banner/Banner.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { HeadingSize, type HeadingLevel } from "../Heading/Heading";
+import { type ImageProps } from "../Image/Image";
+export declare const Banner: React.FC<BannerProps>;
+type BannerStyle = "light" | "dark" | "contained";
+type BannerAlignment = "top" | "bottom" | "center";
+interface BannerImage extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fit"> {
+    alignment?: BannerAlignment;
+}
+export interface BannerProps {
+    /**
+     * Align content for Banner
+     */
+    alignment?: "start" | "center";
+    /**
+     * Heading for the Banner.
+     */
+    heading: string;
+    /**
+     * Image props for the Banner. Consider avoiding alt if the image is for decorative purposes only.
+     */
+    img?: BannerImage;
+    /**
+     * Provides a min height for the Banner.
+     */
+    minHeight?: string | number;
+    /**
+     * If true the image will appear on the left and the content will be on the right. Doesn't apply to mobile devices.
+     */
+    isReversed?: boolean;
+    /**
+     * Adds a gradient box shadow to the Banner.
+     */
+    isElevated?: boolean;
+    /**
+     * Content for the Banner.
+     */
+    children?: React.ReactNode;
+    /**
+     * Heading level for the ImpactCard heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Heading size for the ImpactCard heading.
+     */
+    headingSize?: Extract<HeadingSize, "m" | "xl">;
+    /**
+     * Uppercase label for the Banner.
+     */
+    label?: string;
+    /**
+     * Text content for the Banner.
+     */
+    text?: string;
+    /**
+     * Sets a dark or light background for the Banner.
+     */
+    type?: BannerStyle;
+    /**
+     * Defines the ratio of the content area within the banner layout.
+     */
+    contentRatio?: "2/3" | "1/1" | "1/0";
+    /**
+     * Add Additional top margin to banner
+     */
+    additionalTopMargin?: boolean;
+}
+export {};

package/dist/types/components/Banner/index.d.ts

@@ -0,0 +1 @@
+export { Banner } from "./Banner";

package/dist/types/components/BannerWithTabs/BannerWithTabs.d.ts

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { BannerProps } from "../Banner/Banner";
+export declare const BannerWithTabs: FC<BannerWithTabsProps>;
+export interface BannerWithTabsProps {
+    /**
+     * Determine what tabs to render. They need both a `value` and `label` prop
+     */
+    tabs: {
+        value: string;
+        label: string;
+        content: Omit<BannerProps, "children">;
+    }[];
+    /**
+     * Default to an inital value of a tab. If this is left blank it will default to first tab.
+     */
+    defaultValue?: string;
+}

package/dist/types/components/BannerWithTabs/index.d.ts

@@ -0,0 +1 @@
+export { BannerWithTabs } from "./BannerWithTabs";

package/dist/types/components/Box/Box.d.ts

@@ -33,4 +33,8 @@ export interface BoxProps {
      * Background color for the box.
      */
     surface?: SurfaceBackgroundColor;
+    /**
+     * Determine if the background color is transparent.
+     */
+    isSurfaceTransparent?: boolean;
 }

package/dist/types/components/BrandLogo/BrandLogo.d.ts

@@ -4,7 +4,7 @@ import { FC } from "react";
  */
 export declare const BrandLogo: FC<BrandLogoProps>;
 export declare const colors: readonly ["auto", "brand"];
-export declare const subBrands: readonly ["redcare", "wholesale"];
+export declare const subBrands: readonly ["redcare", "wholesale", "ee"];
 export interface BrandLogoProps {
     /**
      * Color of the BrandLogo. The `brand` color only shows on light surfaces.
@@ -19,7 +19,7 @@ export interface BrandLogoProps {
      */
     size?: number;
     /**
-     * Optional sub-brand variant. Only applies to BT.
+     * Optional sub-brand variant.
      */
     subBrand?: (typeof subBrands)[number];
 }

package/dist/types/components/ButtonV2/ButtonV2.d.ts

@@ -0,0 +1,79 @@
+import React, { FC } from "react";
+import { ArcIcon } from "../../types/arc-icon";
+export type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+export type Ref = React.Ref<ElementUnion> | null;
+export declare const ButtonV2: FC<ButtonV2Props>;
+interface LinkElementProps {
+    /**
+     * URL to link to if `ButtonV2` elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the `ButtonV2` 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 ButtonV2ElementProps {
+    /**
+     * 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;
+}
+export interface ButtonV2Props extends ButtonV2ElementProps, LinkElementProps {
+    /**
+     * Label for `ButtonV2`
+     */
+    label?: string;
+    /**
+     * Determine the buttonStyle for `ButtonV2`. Default style is `primary`
+     */
+    buttonStyle?: "primary" | "secondary" | "tertiary" | "warning" | "compact";
+    /**
+     * Render icon within `ButtonV2`
+     */
+    icon?: ArcIcon;
+    /**
+     * Determine the style position for the icon. Default is `afterText`
+     */
+    iconPosition?: "beforeText" | "afterText";
+    /**
+     * Optional click handler for the `ButtonV2`.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
+     * Should the `ButtonV2` take up the full width of its container?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Size of `ButtonV2`
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * HTML ID for the `ButtonV2`
+     */
+    id?: string;
+    /**
+     * `ButtonV2` will be in a loading state. This will override / add a loading icon to the button in it's respective style
+     */
+    isLoading?: boolean;
+}
+export {};

package/dist/types/components/ButtonV2/index.d.ts

@@ -0,0 +1 @@
+export { ButtonV2 } from "./ButtonV2";

package/dist/types/{private-components → components}/CardFooter/CardFooter.d.ts

@@ -2,7 +2,7 @@ import { FC } from "react";
 export declare const CardFooter: FC<CardFooterProps>;
 type CardFooterIcon = "play" | "arrow";
 export interface CardFooterProps {
-    metaText?: string;
+    metaText?: string | Date;
     isDarkPathway?: boolean;
     buttonIcon?: CardFooterIcon;
     showButton?: boolean;

package/dist/types/components/CardFooter/index.d.ts

@@ -0,0 +1 @@
+export { CardFooter, type CardFooterProps } from "./CardFooter";

package/dist/types/{private-components → components}/CardHeading/CardHeading.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-import { HeadingLevel } from "../../components/Heading/Heading";
+import { type HeadingLevel, type HeadingSize } from "../../components/Heading/Heading";
 export declare const CardHeading: React.FC<CardHeadingProps>;
+export type CardHeadingSize = Extract<HeadingSize, "m" | "l">;
 interface CardHeadingProps {
     heading: string;
-    size?: "s" | "m";
-    isDarkPathway?: boolean;
+    size?: CardHeadingSize;
     href?: string;
     headingLevel?: HeadingLevel;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;

package/dist/types/components/CardHeading/index.d.ts

@@ -0,0 +1 @@
+export { CardHeading, type CardHeadingSize } from "./CardHeading";

package/dist/types/components/Carousel/Carousel.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { type Responsive } from "./types/responsive";
+export declare const Carousel: React.FC<CarouselProps>;
+interface CarouselProps {
+    /**
+     * Adds a gap between the slides.
+     */
+    withGutter?: boolean;
+    /**
+     * How many slides to scroll on each navigation.
+     */
+    itemsToScroll?: number;
+    /**
+     * How many items to show for each slide.
+     */
+    itemsPerSlide?: number;
+    /**
+     * Shows some of the first item in the next slide if true.
+     */
+    isPartialVisible?: boolean;
+    /**
+     * Allows the carousel to scroll infinitely.
+     */
+    loop?: boolean;
+    /**
+     * Configure the carousel options for different breakpoints.
+     */
+    responsive?: Responsive;
+    /**
+     * items for the carousel.
+     */
+    children: React.ReactNode;
+}
+export {};

package/dist/types/components/Carousel/components/DotButton.d.ts

@@ -0,0 +1,10 @@
+import React, { type KeyboardEvent } from "react";
+export declare const DotButton: React.FC<DotButtonProps>;
+interface DotButtonProps {
+    onKeyDown: (scrollSnapIndex: number) => (e: KeyboardEvent<HTMLButtonElement>) => void;
+    onClick: (scrollSnapIndex: number) => void;
+    visibleSlideIndex: number;
+    scrollSnapIndex: number;
+    focusIndex?: number;
+}
+export {};

package/dist/types/components/Carousel/constants/breakpoints.d.ts

@@ -0,0 +1,5 @@
+export declare const XS_BREAKPOINT: string;
+export declare const S_BREAKPOINT: string;
+export declare const M_BREAKPOINT: string;
+export declare const L_BREAKPOINT: string;
+export declare const XL_BREAKPOINT: string;

package/dist/types/components/Carousel/helpers/get-options.d.ts

@@ -0,0 +1,3 @@
+import { type EmblaOptionsType } from "embla-carousel";
+import { type Responsive } from "../types/responsive";
+export declare const getOptions: (itemsToScroll: number, loop: boolean, responsive?: Responsive) => EmblaOptionsType;

package/dist/types/components/Carousel/helpers/get-slide-width.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type Responsive } from "../types/responsive";
+import { type ScreenSizes } from "../types/screen-sizes";
+export declare const getSlideWidth: ({ screenSizes, itemsPerSlide, isPartialVisible, responsive, children, }: getSlideWidthParams) => number;
+interface getSlideWidthParams {
+    itemsPerSlide: number;
+    isPartialVisible: boolean;
+    screenSizes: ScreenSizes;
+    responsive?: Responsive;
+    children: React.ReactNode;
+}
+export {};

package/dist/types/components/Carousel/index.d.ts

@@ -0,0 +1 @@
+export { Carousel } from "./Carousel";

package/dist/types/components/Carousel/types/breakpoints.d.ts

@@ -0,0 +1 @@
+export type BreakPoints = "xs" | "s" | "m" | "l" | "xl";

package/dist/types/components/Carousel/types/keynames.d.ts

@@ -0,0 +1,5 @@
+export declare enum KeyNames {
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    Escape = "Escape"
+}

package/dist/types/components/Carousel/types/responsive.d.ts

@@ -0,0 +1,3 @@
+import { type BreakPoints } from "./breakpoints";
+import { type SlideConfig } from "./slide-config";
+export type Responsive = Partial<Record<BreakPoints, SlideConfig>>;

package/dist/types/components/Carousel/types/screen-sizes.d.ts

@@ -0,0 +1,2 @@
+import { BreakPoints } from "./breakpoints";
+export type ScreenSizes = Record<BreakPoints, boolean>;

package/dist/types/components/Carousel/types/slide-config.d.ts

@@ -0,0 +1,5 @@
+export interface SlideConfig {
+    itemsToScroll?: number;
+    itemsPerSlide?: number;
+    isPartialVisible?: boolean;
+}

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { FC } from "react";
 type EventType = React.ChangeEvent<HTMLInputElement>;
 /**
  *  Use `Checkbox` to allow users to select individual options.
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: FC<CheckboxProps>;
 export interface CheckboxProps {
     /**
      * Error message for the Checkbox.
@@ -14,8 +14,7 @@ export interface CheckboxProps {
      */
     helper?: React.ReactNode;
     /**
-     * Determine the alignment the Checkbox.
-     *
+     * Determine the alignment of the Checkbox.
      */
     checkboxAlignment?: "top" | "center";
     /**
@@ -38,6 +37,10 @@ export interface CheckboxProps {
      * Label for the Checkbox.
      */
     label: React.ReactNode;
+    /**
+     * Use `hideLabel` to visually hide the `Checkbox` label. This still allows screen readers to have access to labels. This is set to `false` by default.
+     */
+    hideLabel?: boolean;
     /**
      * Name for the Checkbox.
      */
@@ -54,7 +57,7 @@ export interface CheckboxProps {
     /**
      * Size of the Checkbox.
      */
-    size?: "s" | "l";
+    size?: "s" | "m";
     /**
      * Value for the Checkbox.
      */

package/dist/types/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -0,0 +1,32 @@
+import { FC, ReactNode } from "react";
+import { ContentSwitcherTab } from "./ContentSwitcherTab";
+import { ContentSwitcherContent } from "./ContentSwitcherContent";
+import { ContentSwitcherList } from "./ContentSwitcherList";
+/** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
+export declare const ContentSwitcher: FC<ContentSwitcherProps> & {
+    Tab: typeof ContentSwitcherTab;
+    Content: typeof ContentSwitcherContent;
+    List: typeof ContentSwitcherList;
+};
+export interface ContentSwitcherProps {
+    /**
+     * Render children
+     */
+    children: ReactNode;
+    /**
+     * Default to an inital value of a tab. If this is left blank it is possible for there to be no active tabs
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.
+     */
+    activationMode?: "automatic" | "manual";
+    /**
+     * value for the `ContentSwitcher`. Passing a value makes the Select a controlled component.
+     */
+    value?: string;
+}

package/dist/types/components/ContentSwitcher/ContentSwitcherContent/ContentSwitcherContent.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const ContentSwitcherContent: FC<ContentSwitcherContentProps>;
+export interface ContentSwitcherContentProps {
+    /**
+     * Content to display
+     */
+    children: ReactNode;
+    /**
+     * This value links the `ContentSwitcherContent` with `ContentSwitcherTab`
+     */
+    value: string;
+}

package/dist/types/components/ContentSwitcher/ContentSwitcherContent/index.d.ts

@@ -0,0 +1 @@
+export { ContentSwitcherContent } from "./ContentSwitcherContent";

package/dist/types/components/ContentSwitcher/ContentSwitcherList/ContentSwitcherList.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from "react";
+export declare const ContentSwitcherList: FC<ContentSwitcherListProps>;
+export interface ContentSwitcherListProps {
+    /**
+     * Contents of the `ContentSwitcherList` Should contain `Tab`
+     */
+    children: ReactNode;
+    /**
+     * Determine if `ContentSwitcherList` should be justified
+     */
+    isJustified?: boolean;
+    /**
+     * Determine the type of `ContentSwitcherList`. Default is standard
+     */
+    type?: "standard" | "contained";
+    /**
+     * Determine a accessible label for `ContentSwitcherList`
+     */
+    ariaLabel?: string;
+    /**
+     * Determines if the `ContentSwitcherList` should be inset within the content panel.
+     */
+    isInset?: boolean;
+}

package/dist/types/components/ContentSwitcher/ContentSwitcherList/index.d.ts

@@ -0,0 +1 @@
+export { ContentSwitcherList } from "./ContentSwitcherList";

package/dist/types/components/ContentSwitcher/ContentSwitcherTab/ContentSwitcherTab.d.ts

@@ -0,0 +1,17 @@
+import { FC } from "react";
+export declare const ContentSwitcherTab: FC<ContentSwitcherTabProps>;
+interface ContentSwitcherTabProps {
+    /**
+     * Label to display on the ContentSwitcherTab
+     */
+    label: string;
+    /**
+     * Value to link `ContentSwitcherTab` to `ContentSwitcherTabContent`
+     */
+    value: string;
+    /**
+     * Pass a function to `ContentSwitcherTab`
+     */
+    onClick?: () => void;
+}
+export {};

package/dist/types/components/ContentSwitcher/ContentSwitcherTab/index.d.ts

@@ -0,0 +1 @@
+export { ContentSwitcherTab } from "./ContentSwitcherTab";

package/dist/types/components/ContentSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { ContentSwitcher } from "./ContentSwitcher";

package/dist/types/components/ContentSwitcherDropdown/ContentSwitcherDropdown.d.ts

@@ -0,0 +1,57 @@
+import { FC, ReactNode } from "react";
+export declare const ContentSwitcherDropdown: FC<ContentSwitcherDropdownProps> & {
+    Content: typeof ContentSwitcherDropdownContent;
+};
+declare const ContentSwitcherDropdownContent: FC<ContentSwitcherDropdownContentProps>;
+export interface ContentSwitcherDropdownContentProps {
+    /**
+     * Content to display
+     */
+    children: ReactNode;
+    /**
+     * This value links the `ContentSwitcherDropdown.Content` with `ContentSwitcherDropdown` property `Tabs`
+     */
+    value: string;
+}
+export interface ContentSwitcherDropdownProps {
+    /**
+     * Render children
+     */
+    children?: ReactNode;
+    /**
+     * Default to an inital value of a tab. If this is not set default to first tab.
+     */
+    defaultValue?: string;
+    /**
+     * Event handler called when the value changes. This can only be active when child elements are not present
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Determine what tabs to render. They need both a `value` and `label` prop
+     */
+    tabs: {
+        value: string;
+        label: string;
+    }[];
+    /**
+     * Determines if the `ContentSwitcherDropdown` should be inset within the content panel.
+     */
+    isInset?: boolean;
+    /**
+     * value for the `ContentSwitcherDropdown`. Passing a value makes the Select a controlled component.
+     */
+    value?: string;
+    /**
+     * Aria label for the `ContentSwitcherDropdown`.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the `ContentSwitcherDropdown` to 100% width.
+     */
+    isFluid?: boolean;
+    /**
+     * Sets the width of the `ContentSwitcherDropdown`.
+     */
+    width?: string;
+}
+export {};

package/dist/types/components/ContentSwitcherDropdown/index.d.ts

@@ -0,0 +1 @@
+export { ContentSwitcherDropdown } from "./ContentSwitcherDropdown";

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import { TextInputWithPlaceholderProps } from "../TextInput/TextInput";
 /**
  * Use `DatePicker` to clearly present available dates and allow users to choose a way to enter information.
  */
-export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 interface DatePickerRangeSelection extends ArcCalendarRangeSelection {
     formattedRange: string;
 }

package/dist/types/components/Disclosure/index.d.ts

@@ -1 +1 @@
-export { Disclosure } from "./Disclosure";
+export { Disclosure, type DisclosureProps } from "./Disclosure";