@arc-ui/components 12.0.0-beta.6 → 12.0.0-beta.9

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

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

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/ButtonV2/ButtonV2.d.ts

@@ -37,7 +37,7 @@ export interface ButtonV2Props extends ButtonV2ElementProps, LinkElementProps {
     /**
      * Determine the buttonStyle for `ButtonV2`. Default style is `primary`
      */
-    buttonStyle?: "primary" | "secondary" | "tertiary" | "warning";
+    buttonStyle?: "primary" | "secondary" | "tertiary" | "warning" | "compact";
     /**
      * Render icon within `ButtonV2`
      */
@@ -66,7 +66,7 @@ export interface ButtonV2Props extends ButtonV2ElementProps, LinkElementProps {
     /**
      * Size of `ButtonV2`
      */
-    size?: "s" | "m";
+    size?: "s" | "m" | "l";
     /**
      * HTML ID for the `ButtonV2`
      */

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

@@ -57,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/Disclosure/index.d.ts

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

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

@@ -0,0 +1,41 @@
+import React, { MouseEvent } from "react";
+import { type ThemeIconNames } from "../ThemeIcon";
+export declare const Download: React.FC<DownloadProps>;
+export interface DownloadProps {
+    /**
+     * Name for `<Download />`
+     */
+    name: string;
+    /**
+     * File type for `<Download />`
+     */
+    type: string;
+    /**
+     * File url for `<Download />`
+     */
+    href?: string;
+    /**
+     * If true, the spacing will be reduced resulting in a tighter look and feel.
+     */
+    isCompact?: boolean;
+    /**
+     * If false the width will be the same as the inner content
+     */
+    isFullWidth?: boolean;
+    /**
+     * Description for `<Download />`
+     */
+    description?: string;
+    /**
+     * File size for `<Download />`
+     */
+    size?: string;
+    /**
+     * Icon for `<Download />`
+     */
+    icon?: Extract<ThemeIconNames, "downloadFile" | "downloadAccessibility">;
+    /**
+     * Click handler for `<Download />`
+     */
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+}

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

@@ -0,0 +1 @@
+export { Download, type DownloadProps } from "./Download";

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

@@ -46,4 +46,8 @@ export interface HeadingProps {
      * Typographic size of the Heading.
      */
     size?: HeadingSize;
+    /**
+     * Should the Heading component be styled as an inline element?
+     */
+    isInline?: boolean;
 }

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

@@ -1 +1 @@
-export { Heading } from "./Heading";
+export { Heading, type HeadingLevel } from "./Heading";

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

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { BannerProps } from "../Banner/Banner";
+export declare const HeroBanner: FC<HeroBannerProps>;
+export interface HeroBannerProps extends Omit<BannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
+}

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

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

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

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import { ArcIcon } from "../../types/arc-icon";
 /**
  * Use `Icon` to display brand iconography.
@@ -17,7 +17,7 @@ export interface IconProps {
     /**
      * Icon variant.
      */
-    icon?: ArcIcon;
+    icon?: ArcIcon | React.ReactElement<SVGElement>;
     /**
      * Alternative text label for the Icon.
      */

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

@@ -1 +1 @@
-export { ImpactCard } from "./ImpactCard";
+export { ImpactCard, type ImpactCardProps } from "./ImpactCard";

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

@@ -49,9 +49,9 @@ export interface InformationCardProps {
      */
     minHeight?: number;
     /**
-     * Tags for the InformationCard.
+     * Badges for the InformationCard.
      */
-    tags?: {
+    badges?: {
         text: string;
     }[];
     /**

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

@@ -1 +1 @@
-export { InformationCard } from "./InformationCard";
+export { InformationCard, type InformationCardProps } from "./InformationCard";

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

@@ -1 +1 @@
-export { MediaCard } from "./MediaCard";
+export { MediaCard, type MediaCardProps } from "./MediaCard";

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

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { BannerProps } from "../Banner/Banner";
+export declare const PageBanner: FC<PageBannerProps>;
+export interface PageBannerProps extends Omit<BannerProps, "headingSize" | "additionalTopMargin"> {
+}

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

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

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

@@ -1,35 +1,43 @@
 import React, { FC } from "react";
+/**
+ * TODO! Revise method of aligning svg's
+ */
 /**
  * Use `PaginationSimple` to navigate through multiple pages of content.
  */
 export declare const PaginationSimple: FC<PaginationSimpleProps>;
 export interface PaginationSimpleProps {
     /**
-     * hides prev button if true.
-     */
-    hidePrev?: boolean;
-    /**
-     * hides next button if true.
+     * hide buttons if true.
      */
-    hideNext?: boolean;
+    hide?: {
+        first?: boolean;
+        prev?: boolean;
+        next?: boolean;
+        last?: boolean;
+    };
     /**
-     * makes prev button a link
+     * makes each button a link
      */
-    prevHref?: string;
-    /**
-     * makes next button a link
-     */
-    nextHref?: string;
+    hrefs?: {
+        first?: string;
+        prev?: string;
+        next?: string;
+        last?: string;
+    };
     /**
      * if true buttons will hug either edge of the parent element
      */
     isFluid?: boolean;
     /**
-     * Function to call when previous page is selected
+     * if true ellipsis will show in-between previous and next
+     */
+    /**
+     * Function to call when page is changed. This is called with type and event
      */
-    onPrevPage?: (e: React.MouseEvent) => void;
+    showEllipsis?: boolean;
     /**
-     * Function to call when next page is selected
+     * Function to call when page is changed. This is called with type and event
      */
-    onNextPage?: (e: React.MouseEvent) => void;
+    onPageChange?: (e: React.MouseEvent, type?: "prev" | "next" | "first" | "last") => void;
 }

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

@@ -0,0 +1,16 @@
+import { FC } from "react";
+/**
+ * Use `Spinner` to display a loading state.
+ */
+export declare const Spinner: FC<SpinnerProps>;
+export type SpinnerSize = "s" | "m" | "l" | "xl" | "xxl";
+export interface SpinnerProps {
+    /**
+     * Colour options. If no `color` option defined, the colour will use currentColor.
+     */
+    color?: "light" | "dark" | undefined;
+    /**
+     * Set sizes of spinner `s`, `m`, `l`, `xl`, `xxl` or a custom number value e.g. `100`px.
+     */
+    size?: SpinnerSize | number | null;
+}

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

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

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

@@ -17,6 +17,10 @@ export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
      * accessibility requirements.
      */
     background?: SurfaceBackgroundColor;
+    /**
+     * Should the Surface be transparent? When true, no background colour will be applied.
+     */
+    isTransparent?: boolean;
     /**
      * Content to display on the Surface.
      */

package/dist/types/components/Tabs/TabsList/TabsList.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { SurfaceBackgroundColor } from "../../Surface";
 export declare const TabsList: FC<TabsListProps>;
 export interface TabsListProps {
     /**
@@ -17,4 +18,8 @@ export interface TabsListProps {
      * Determine a accessible label for `Tabs`
      */
     ariaLabel?: string;
+    /**
+     * Background color for the overlap gradient.
+     */
+    overflowGradient?: SurfaceBackgroundColor;
 }

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

@@ -34,4 +34,8 @@ export interface TextProps {
      * Id for the Text.
      */
     id?: string;
+    /**
+     * Element type for text component. Default value is span
+     */
+    elementType?: "span" | "p";
 }