@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.3

package/dist/types/components/Calendar/state/handlers/show-next-double-month-handler.d.ts

@@ -0,0 +1,3 @@
+import { SHOW_NEXT_DOUBLE_MONTH_ACTION } from "../types/actions";
+import { StateHandler } from "../types/state-handler";
+export declare const showNextDoubleMonthHandler: StateHandler<SHOW_NEXT_DOUBLE_MONTH_ACTION>;

package/dist/types/components/Calendar/state/handlers/show-next-month-handler.d.ts

@@ -0,0 +1,3 @@
+import { SHOW_NEXT_MONTH_ACTION } from "../types/actions";
+import { StateHandler } from "../types/state-handler";
+export declare const showNextMonthHandler: StateHandler<SHOW_NEXT_MONTH_ACTION>;

package/dist/types/components/Calendar/state/handlers/show-previous-double-month-handler.d.ts

@@ -0,0 +1,3 @@
+import { SHOW_PREVIOUS_DOUBLE_MONTH_ACTION } from "../types/actions";
+import { StateHandler } from "../types/state-handler";
+export declare const showPreviousDoubleMonthHandler: StateHandler<SHOW_PREVIOUS_DOUBLE_MONTH_ACTION>;

package/dist/types/components/Calendar/state/handlers/show-previous-month-handler.d.ts

@@ -0,0 +1,3 @@
+import { SHOW_PREVIOUS_MONTH_ACTION } from "../types/actions";
+import { StateHandler } from "../types/state-handler";
+export declare const showPreviousMonthHandler: StateHandler<SHOW_PREVIOUS_MONTH_ACTION>;

package/dist/types/components/Calendar/state/index.d.ts

@@ -0,0 +1,2 @@
+export { type Action } from "./types/actions";
+export { reducer } from "./reducer";

package/dist/types/components/Calendar/state/reducer.d.ts

@@ -0,0 +1,3 @@
+import { Action } from "./types/actions";
+import { State } from "./types/state";
+export declare const reducer: (state: State, action: Action) => State;

package/dist/types/components/Calendar/state/reducer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Calendar/state/types/actions.d.ts

@@ -0,0 +1,81 @@
+import { CalendarType, KeyNames, SelectionType } from "../../types";
+export type DAY_NUMBER_SELECT_ACTION = {
+    type: "DAY_NUMBER_SELECT";
+    payload: Date;
+};
+export type RANGE_SELECT_ACTION = {
+    type: "RANGE_SELECT";
+    payload: {
+        date: Date;
+        range: Date[];
+    };
+};
+export type SHOW_PREVIOUS_MONTH_ACTION = {
+    type: "SHOW_PREVIOUS_MONTH";
+    payload: {
+        minDate?: Date;
+    };
+};
+export type SHOW_NEXT_MONTH_ACTION = {
+    type: "SHOW_NEXT_MONTH";
+    payload: {
+        maxDate?: Date;
+    };
+};
+export type SHOW_PREVIOUS_DOUBLE_MONTH_ACTION = {
+    type: "SHOW_PREVIOUS_DOUBLE_MONTH";
+    payload: {
+        minDate?: Date;
+    };
+};
+export type SHOW_NEXT_DOUBLE_MONTH_ACTION = {
+    type: "SHOW_NEXT_DOUBLE_MONTH";
+    payload: {
+        maxDate?: Date;
+    };
+};
+export type DROPDOWN_CHANGE_YEAR_ACTION = {
+    type: "DROPDOWN_CHANGE_YEAR";
+    payload: {
+        year: number;
+        minDate?: Date;
+        maxDate?: Date;
+    };
+};
+export type DROPDOWN_CHANGE_MONTH_ACTION = {
+    type: "DROPDOWN_CHANGE_MONTH";
+    payload: {
+        month: number;
+        minDate?: Date;
+        maxDate?: Date;
+    };
+};
+export type HIGHLIGHT_RANGE_ACTION = {
+    type: "HIGHLIGHT_RANGE";
+    payload: {
+        date: Date;
+        range: Date[];
+        minDate?: Date;
+        maxDate?: Date;
+    };
+};
+export type DAY_GRID_LEAVE_ACTION = {
+    type: "DAY_GRID_LEAVE";
+    payload: {
+        range: Date[];
+        selectionType: SelectionType;
+    };
+};
+export type CALENDAR_KEYDOWN_ACTION = {
+    type: "CALENDAR_KEYDOWN";
+    payload: {
+        minDate?: Date;
+        maxDate?: Date;
+        range: Date[];
+        selectionType: SelectionType;
+        calendarType: CalendarType;
+        key: KeyNames;
+        shiftKey: boolean;
+    };
+};
+export type Action = DAY_NUMBER_SELECT_ACTION | RANGE_SELECT_ACTION | SHOW_PREVIOUS_MONTH_ACTION | SHOW_NEXT_MONTH_ACTION | SHOW_PREVIOUS_DOUBLE_MONTH_ACTION | SHOW_NEXT_DOUBLE_MONTH_ACTION | DROPDOWN_CHANGE_YEAR_ACTION | DROPDOWN_CHANGE_MONTH_ACTION | HIGHLIGHT_RANGE_ACTION | DAY_GRID_LEAVE_ACTION | CALENDAR_KEYDOWN_ACTION;

package/dist/types/components/Calendar/state/types/state-handler.d.ts

@@ -0,0 +1,3 @@
+import { Action } from "../types/actions";
+import { State } from "../types/state";
+export type StateHandler<T extends Action> = (payload: T["payload"], state: State) => State;

package/dist/types/components/Calendar/state/types/state.d.ts

@@ -0,0 +1,5 @@
+export interface State {
+    displayDate: Date;
+    focusDate: Date;
+    highlightedRange: Date[];
+}

package/dist/types/components/Calendar/types/calendar-type.d.ts

@@ -0,0 +1 @@
+export type CalendarType = "month" | "year" | "double";

package/dist/types/components/Calendar/types/date-select-value.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export type DateSelectValue = React.SelectHTMLAttributes<HTMLSelectElement>["value"];

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

@@ -0,0 +1,6 @@
+export { WeekDays, WeekDaysAbbr } from "./week-days";
+export { KeyNames } from "./key-names";
+export { type RangeSelection } from "./range-selection";
+export { type SelectionType } from "./selection-type";
+export { type DateSelectValue } from "./date-select-value";
+export { type CalendarType } from "./calendar-type";

package/dist/types/components/Calendar/types/key-names.d.ts

@@ -0,0 +1,13 @@
+export declare enum KeyNames {
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    Home = "Home",
+    End = "End",
+    PageUp = "PageUp",
+    PageDown = "PageDown",
+    Tab = "Tab",
+    Enter = "Enter",
+    Space = " "
+}

package/dist/types/components/Calendar/types/range-selection.d.ts

@@ -0,0 +1,10 @@
+export interface RangeSelection {
+    dates: {
+        disabled: boolean;
+        value: Date;
+    }[];
+    selectedDate: Date;
+    isSelectionComplete: boolean;
+    start: Date;
+    end: Date;
+}

package/dist/types/components/Calendar/types/selection-type.d.ts

@@ -0,0 +1 @@
+export type SelectionType = "single" | "range";

package/dist/types/components/Calendar/types/week-days.d.ts

@@ -0,0 +1,18 @@
+export declare enum WeekDaysAbbr {
+    MON = "Mon",
+    TUE = "Tue",
+    WED = "Wed",
+    THUR = "Thur",
+    FRI = "Fri",
+    SAT = "Sat",
+    SUN = "Sun"
+}
+export declare enum WeekDays {
+    MONDAY = "Monday",
+    TUESDAY = "Tuesday",
+    WEDNESDAY = "Wednesday",
+    THURSDAY = "Thursday",
+    FRIDAY = "Friday",
+    SATURDAY = "Saturday",
+    SUNDAY = "Sunday"
+}

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.
      */

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { type ArcCalendarRangeSelection } from "../Calendar";
+import { CalendarProps } from "../Calendar/Calendar";
+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<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+interface DatePickerRangeSelection extends ArcCalendarRangeSelection {
+    formattedRange: string;
+}
+export interface DatePickerProps extends Omit<TextInputWithPlaceholderProps, "defaultValue" | "inputMode" | "minLength" | "maxLength" | "pattern" | "type" | "showPassword" | "placeholder" | "iconButton" | "prefix" | "suffix">, Omit<CalendarProps, "onDateSelect" | "onRangeSelect" | "selectedDate" | "selectedRange"> {
+    isFluid?: boolean;
+    onDateSelect?: (value: {
+        date: Date;
+        formattedDate: string;
+    }) => void;
+    onRangeSelect?: (value: DatePickerRangeSelection) => void;
+}
+export {};

package/dist/types/components/DatePicker/constants/date-format.d.ts

@@ -0,0 +1 @@
+export declare const DATE_FORMAT = "dd/MM/yyyy";

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

@@ -0,0 +1 @@
+export { DATE_FORMAT } from "./date-format";

package/dist/types/components/DatePicker/helpers/convert-date-string-to-date.d.ts

@@ -0,0 +1 @@
+export declare const convertDateStringToDate: (value?: string) => Date;

package/dist/types/components/DatePicker/helpers/convert-date-string-to-date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/convert-range-string-to-dates.d.ts

@@ -0,0 +1 @@
+export declare const convertRangeStringToDates: (value?: string) => Date[];

package/dist/types/components/DatePicker/helpers/convert-range-string-to-dates.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/format-date.d.ts

@@ -0,0 +1 @@
+export declare const formatDate: (value: Date) => string;

package/dist/types/components/DatePicker/helpers/format-date.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+export { isDateValid } from "./is-date-valid";
+export { parseDateString } from "./parse-date-string";
+export { parseRangeString } from "./parse-range-string";
+export { isRangeValid } from "./is-range-valid";
+export { formatDate } from "./format-date";
+export { isDisabledDate } from "./is-disabled-date";
+export { convertDateStringToDate } from "./convert-date-string-to-date";
+export { convertRangeStringToDates } from "./convert-range-string-to-dates";

package/dist/types/components/DatePicker/helpers/is-date-valid.d.ts

@@ -0,0 +1 @@
+export declare const isDateValid: (value?: string) => boolean;

package/dist/types/components/DatePicker/helpers/is-date-valid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/is-disabled-date.d.ts

@@ -0,0 +1 @@
+export declare const isDisabledDate: (disabledDates: Date[] | undefined, date: Date) => boolean;

package/dist/types/components/DatePicker/helpers/is-disabled-date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/is-range-valid.d.ts

@@ -0,0 +1 @@
+export declare const isRangeValid: (value?: string) => boolean;

package/dist/types/components/DatePicker/helpers/is-range-valid.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/parse-date-string.d.ts

@@ -0,0 +1,5 @@
+export declare const parseDateString: (value: string) => {
+    day: string;
+    month: string;
+    year: string;
+};

package/dist/types/components/DatePicker/helpers/parse-date-string.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DatePicker/helpers/parse-range-string.d.ts

@@ -0,0 +1,14 @@
+export declare const parseRangeString: (value?: string) => {
+    start: {
+        date: string;
+        day: string;
+        month: string;
+        year: string;
+    };
+    end: {
+        date: string;
+        day: string;
+        month: string;
+        year: string;
+    };
+};

package/dist/types/components/DatePicker/helpers/parse-range-string.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+export { parseRangeString } from "./helpers/parse-range-string";
+export { parseDateString } from "./helpers/parse-date-string";
+export { isRangeValid } from "./helpers/is-range-valid";
+export { isDateValid } from "./helpers/is-date-valid";
+export { DATE_FORMAT } from "./constants/date-format";
+export { DatePicker } from "./DatePicker";

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

@@ -1,8 +1,7 @@
 import { FC, ReactNode } from "react";
 import { HeadingLevel } from "../Heading/Heading";
 /**
- * Use `Disclosure` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `Disclosure` to show and hide sections of content.
  */
 export declare const Disclosure: FC<DisclosureProps>;
 export interface DisclosureProps {

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

@@ -1,7 +1,6 @@
 import { FC, ReactNode } from "react";
 /**
- * Use `DisclosureMini` to display content that is only visible when toggled into
- * an "open" state.
+ * Use `DisclosureMini` to show and hide sections of content.
  */
 export declare const DisclosureMini: FC<DisclosureMiniProps>;
 export interface DisclosureMiniProps {

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

@@ -3,7 +3,7 @@ import { FilterControl } from "./FilterControls/FilterControl/FilterControl";
 import { FilterControls, FilterControlsProps } from "./FilterControls/FilterControls";
 import { FilterItem } from "./FilterItems/FilterItem/FilterItem";
 import { FilterItems, FilterItemsProps } from "./FilterItems/FilterItems";
-/** use `Filter` for interactive elements that filter and categorise page content. */
+/** Use `Filter` to filter and categorise page content. */
 export declare const Filter: FC<FilterProps> & {
     Item: typeof FilterItem;
     Items: typeof FilterItems;

package/dist/types/components/Filter/FilterItems/FilterItems.d.ts

@@ -5,6 +5,10 @@ export interface FilterItemsProps {
      * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
      */
     children: ReactNode;
+    /**
+     * Error to display for `<Filter.Item />`
+     */
+    error?: ReactNode;
     /**
      * Determine the display style of `<Filter.Item />`
      */

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

@@ -18,7 +18,7 @@ export interface FormControlProps {
      */
     elementType?: "div" | "fieldset";
     /**
-     * Error message for the FormControl.
+     * Error message for the FormControl. Replaces helper when helperUnderLabel is false.
      */
     errorMessage?: string;
     /**
@@ -71,5 +71,9 @@ export interface FormControlProps {
      * Position helper text under label. This is set to `false` by default.
      */
     helperUnderLabel?: boolean;
+    /**
+     * Use `hideLabel` to visually hide the `FormControl` label. This still allows screen readers to have access to labels. This is set to `false` by default.
+     */
+    hideLabel?: boolean;
 }
 export { Context as FormControlContext };

package/dist/types/components/Grid/Grid.constants.d.ts

@@ -0,0 +1 @@
+export declare const BREAKPOINTS: readonly ["xs", "s", "m", "l", "xl"];

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Col } from "./components/Col";
+import { Row } from "./components/Row";
+/**
+ * Use `Grid` to compose layouts on a 12-column grid.
+ */
+export declare const Grid: React.FC<GridProps> & {
+    Col: typeof Col;
+    Row: typeof Row;
+};
+export interface GridProps {
+    /**
+     * `Grid` is set to 100% width if true.
+     */
+    isFluid?: boolean;
+    /**
+     * Removes gap between columns for an edge to edge layout if true.
+     */
+    isGutterless?: boolean;
+    /**
+     * Allows the rows and columns be visible for debugging.
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Contents of the Grid. Should only contain `Grid.Row`.
+     */
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,10 @@
+import { BREAKPOINTS } from "./Grid.constants";
+type Breakpoints = (typeof BREAKPOINTS)[number];
+type ColumnConfig<T> = Partial<Record<Breakpoints, T>>;
+export type GridValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type AlignmentValue = "normal" | "start" | "center" | "end" | "stretch" | "baseline";
+export type ColumnValue = GridValue | "auto" | "equal";
+export type Column = ColumnConfig<ColumnValue>;
+export type Arrangement = ColumnConfig<GridValue>;
+export type Alignment = ColumnConfig<AlignmentValue>;
+export {};

package/dist/types/components/Grid/components/Col/Col.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Arrangement, Column, Alignment } from "../../Grid.types";
+export declare const Col: React.FC<ColProps>;
+interface ColProps extends Column {
+    offset?: Arrangement;
+    order?: Arrangement;
+    align?: Alignment;
+    children: React.ReactNode;
+}
+export {};

package/dist/types/components/Grid/components/Col/index.d.ts

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

package/dist/types/components/Grid/components/Row/Row.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { type AlignmentValue } from "../../Grid.types";
+export declare const Row: React.FC<RowProps>;
+interface RowProps {
+    align?: AlignmentValue;
+    direction?: "column" | "row" | "column-reverse" | "row-reverse";
+    justify?: "start" | "center" | "end" | "between" | "around" | "normal";
+    children: React.ReactNode;
+}
+export {};

package/dist/types/components/Grid/components/Row/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Grid } from "./Grid";
+export { type GridValue, type ColumnValue, type AlignmentValue, } from "./Grid.types";

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

@@ -0,0 +1,66 @@
+import React, { FC } from "react";
+export type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+export type Ref = React.Ref<ElementUnion> | null;
+export declare const HeroButton: FC<HeroButtonProps>;
+interface LinkElementProps {
+    /**
+     * URL to link to if `HeroButton` elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the `HeroButton` 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 HeroButtonElementProps {
+    /**
+     * 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 HeroButtonProps extends HeroButtonElementProps, LinkElementProps {
+    /**
+     * Label for `HeroButton`
+     */
+    label?: string;
+    /**
+     * Determine the buttonStyle for `HeroButton`. Default style is `primary`
+     */
+    buttonStyle?: "primary" | "primary-gradient" | "secondary" | "secondary-gradient" | "warning";
+    /**
+     * Render icon within `HeroButton`. Warning icon will only render when buttonStyle = 'warning'
+     */
+    icon?: "arrow-right" | "arrow-down" | "play" | "warning";
+    /**
+     * Optional click handler for the `HeroButton`.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * HTML ID for the `HeroButton`
+     */
+    id?: string;
+    /**
+     * `HeroButton` 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/HeroButton/index.d.ts

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const Hidden: React.FC<HiddenProps>;
+interface HiddenProps {
+    xs?: boolean;
+    s?: boolean;
+    m?: boolean;
+    l?: boolean;
+    xl?: boolean;
+    children: React.ReactNode;
+}
+export {};

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

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

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

@@ -30,4 +30,8 @@ export interface IconProps {
      * value for data-testid
      */
     testId?: string;
+    /**
+     * hides the icon from screenreaders
+     */
+    isPresentationIcon?: boolean;
 }

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

@@ -64,6 +64,10 @@ export interface ImageProps extends HTMLAttributes<HTMLElement> {
      * to fit the Image. Otherwise, the intrinsic height of the Image element.
      */
     height?: number;
+    /**
+     * If true the image will fade in when its loaded, resulting in a smooth user experience.
+     */
+    fadeOnLoad?: boolean;
     /**
      * Loading behaviour of the Image.
      */