@iress-oss/ids-components 5.16.0 → 6.0.0-alpha.0

package/dist/src/components/Hide/Hide.d.ts

@@ -1,2 +1,28 @@
-import { IressHideProps } from './Hide.types';
-export declare const IressHide: ({ children, hiddenOn, visuallyHidden, className, ...restProps }: IressHideProps) => import("react/jsx-runtime").JSX.Element;
+import { ResponsiveSizing } from '../../interfaces';
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../types';
+/**
+ * @deprecated IressHide has been deprecated.
+ * - Please use the `srOnly` prop on any component to show or hide content from screen readers.
+ * - Please use the `hide` prop on any component to show or hide content at different breakpoints.
+ */
+export interface IressHideProps extends IressStyledProps {
+    /**
+     * Content to hide.
+     */
+    children: ReactNode;
+    /**
+     * Content will be hidden on any screen sizes that are set to true.
+     */
+    hiddenOn: ResponsiveSizing<boolean>;
+    /**
+     * If true, the content will not be visible, but will be available to screen readers
+     */
+    visuallyHidden?: boolean;
+}
+/**
+ * @deprecated IressHide has been deprecated.
+ * - Please use the `srOnly` prop on any component to show or hide content from screen readers.
+ * - Please use the `hide` prop on any component to show or hide content at different breakpoints.
+ */
+export declare const IressHide: ({ children, hiddenOn, visuallyHidden, ...restProps }: IressHideProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Hide/helpers/normaliseHideValues.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveSizing } from '../../../interfaces';
+export declare const normaliseHideValues: (values?: ResponsiveSizing<boolean>) => Record<string, boolean>;

package/dist/src/components/Hide/index.d.ts

@@ -1,2 +1 @@
-export * from './Hide.types';
 export * from './Hide';

package/dist/src/components/Hide/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Hide/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

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

@@ -1,2 +1,36 @@
-import { IconWithEnums } from './Icon.types';
-export declare const IressIcon: IconWithEnums;
+import { IressStyledProps } from '../../types';
+import { IconName } from '@fortawesome/fontawesome-common-types';
+export interface IressIconProps extends IressStyledProps<'span'> {
+    /**
+     * The name of the icon
+     */
+    name: IconName;
+    /**
+     * Adds screen reader text if the icon needs to be visible to screen reader users
+     */
+    screenreaderText?: string;
+    /**
+     * The icon set to be used:
+     * - `fal`: Font Awesome Light
+     * - `fab`: Font Awesome Brand
+     * @default 'fal'
+     */
+    set?: 'fal' | 'fab';
+    /**
+     * Amount of degrees to rotate the icon.
+     */
+    rotate?: 90 | 180 | 270;
+    /**
+     * Adds fixed width class for Font Awesome icons - fa-fw
+     */
+    fixedWidth?: boolean;
+    /**
+     * Flip the icon horizontally, vertically or both axes.
+     */
+    flip?: 'horizontal' | 'vertical' | 'both';
+    /**
+     * Accepts a numeric value for speed for one rotation.
+     */
+    spin?: 'half' | 1 | 2 | 3;
+}
+export declare const IressIcon: ({ className, fixedWidth, flip, name, rotate, screenreaderText, set, spin, ...restProps }: IressIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Icon/Icon.styles.d.ts

@@ -0,0 +1,38 @@
+export declare const icon: import('../../styled-system/types').RecipeRuntimeFn<{
+    flip: {
+        horizontal: {
+            transform: "scaleX(-1)";
+        };
+        vertical: {
+            transform: "scaleY(-1)";
+        };
+        both: {
+            transform: "scale(-1)";
+        };
+    };
+    rotate: {
+        90: {
+            transform: "rotate(90deg)";
+        };
+        180: {
+            transform: "rotate(180deg)";
+        };
+        270: {
+            transform: "rotate(270deg)";
+        };
+    };
+    spin: {
+        half: {
+            animationStyle: "icon-spin-half";
+        };
+        1: {
+            animationStyle: "icon-spin-1";
+        };
+        2: {
+            animationStyle: "icon-spin-2";
+        };
+        3: {
+            animationStyle: "icon-spin-3";
+        };
+    };
+}>;

package/dist/src/components/Icon/index.d.ts

@@ -1,2 +1,2 @@
 export * from './Icon';
-export * from './Icon.types';
+export * from './Icon.styles';

package/dist/src/components/Icon/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Icon/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+import { IressStyledProps } from '../../types';
+export interface IressImageProps extends Omit<IressStyledProps<'img'>, 'maxWidth' | 'alt' | 'src'> {
+    /**
+     * The alternative text representation of the image. It is used by screen readers to describe the image. If the image is intended for decoration purposes only, make it an empty string.
+     */
+    alt: string;
+    /**
+     * Override the maximum width of the image
+     */
+    maxWidth?: string | number;
+    /**
+     * The address of the image
+     */
+    src: string;
+}
+export declare const IressImage: ({ className, maxWidth, style, ...restProps }: IressImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Image/Image.styles.d.ts

@@ -0,0 +1 @@
+export declare const image: import('../../styled-system/types').RecipeRuntimeFn<{}>;

package/dist/src/components/Image/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Image';
+export * from './Image.styles';

package/dist/src/components/Image/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Image/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Inline/Inline.d.ts

@@ -1,2 +1,32 @@
-import { InlineWithEnums } from './Inline.types';
-export declare const IressInline: InlineWithEnums;
+import { HorizontalAligns, VerticalAligns, IressStyledProps, ResponsiveProp } from '../../types';
+import { ReactNode } from 'react';
+import { PositiveSpacingToken } from '../../../theme-preset/tokens/spacing';
+export interface IressInlineProps extends IressStyledProps {
+    /**
+     * Content to be displayed inline.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the gap between direct children.
+     * @see https://developer.mozilla.org/docs/Web/CSS/gap
+     */
+    gap?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Sets the horizontal alignment of the inline content.
+     */
+    horizontalAlign?: HorizontalAligns;
+    /**
+     * Wraps content when stretches beyond container.
+     */
+    noWrap?: boolean;
+    /**
+     * Sets the size of the top and bottom gap between direct children when they begin to wrap.
+     * @see https://developer.mozilla.org/docs/Web/CSS/row-gap
+     */
+    rowGap?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Sets the vertical alignment of the inline content.
+     */
+    verticalAlign?: VerticalAligns;
+}
+export declare const IressInline: ({ className, ...restProps }: IressInlineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Inline/Inline.styles.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const inline: import('../../styled-system/types').RecipeRuntimeFn<{
+    horizontalAlign: {
+        around: {
+            justifyContent: "space-around";
+        };
+        between: {
+            justifyContent: "space-between";
+        };
+        center: {
+            justifyContent: "center";
+        };
+        evenly: {
+            justifyContent: "space-evenly";
+        };
+        left: {
+            justifyContent: "flex-start";
+        };
+        right: {
+            justifyContent: "flex-end";
+        };
+    };
+    verticalAlign: {
+        bottom: {
+            alignItems: "flex-end";
+        };
+        middle: {
+            alignItems: "center";
+        };
+        top: {
+            alignItems: "flex-start";
+        };
+        stretch: {
+            alignItems: "stretch";
+        };
+    };
+    noWrap: {
+        true: {
+            flexWrap: "nowrap";
+        };
+        false: {
+            flexWrap: "wrap";
+        };
+    };
+}>;

package/dist/src/components/Inline/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Inline.types';
+export * from './Inline.styles';
 export * from './Inline';

package/dist/src/components/Inline/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Inline/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Input/Input.d.ts

@@ -1,14 +1,57 @@
-import { FormElementWidth, TextFieldType } from '../../enums';
-import { InputMode, IressInputProps } from './Input.types';
-import { InputRef } from './InputBase/InputBase.types';
-import { FormControlValue } from '../../types';
-declare const ForwardedInput: <T extends FormControlValue>(props: IressInputProps<T> & React.RefAttributes<InputRef | null>) => React.ReactElement;
-export declare const IressInput: typeof ForwardedInput & {
-    /** @deprecated IressInput.Type is now deprecated and will be removed in a future version. Please use the value directly instead. **/
-    Type: typeof TextFieldType;
-    /** @deprecated IressInput.Width is now deprecated and will be removed in a future version. Please use the value directly instead. **/
-    Width: typeof FormElementWidth;
-    /** @deprecated IressInput.InputMode is now deprecated and will be removed in a future version. Please use the value directly instead. **/
-    InputMode: typeof InputMode;
+import { ChangeEvent, RefAttributes, ReactElement, ReactNode } from 'react';
+import { InputRef, InputBaseProps, InputBaseElement } from './InputBase/InputBase';
+import { FormControlValue, FormElementWidths } from '../../types';
+export type IressInputProps<T extends FormControlValue = string | number, TRows extends number | undefined = undefined> = Omit<InputBaseProps<TRows>, 'defaultValue' | 'onChange' | 'value'> & {
+    /**
+     * Set input content align to right, useful for numeric inputs.
+     * @default false
+     */
+    alignRight?: boolean;
+    /**
+     * Content to append to the input field, usually a button or icon.
+     **/
+    append?: ReactNode;
+    /**
+     * If `true`, then user can clear the value of the input. Will be ignored if `rows` prop is in use.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+     */
+    defaultValue?: T;
+    /**
+     * Bring your own formatter that will be used to format the value when the input is not focused, allowing you to display the value in a different format.
+     * e.g. User type in value="dsf 987kkk123" => result after formatter: $987,123 (string)
+     */
+    formatter?: (value?: T) => string | number;
+    /**
+     * Make prepend/append element closer to the input content.
+     */
+    inline?: boolean;
+    /**
+     * The loading states of the input field. If provided a string, will use that text as the loading message.
+     */
+    loading?: boolean | string;
+    /**
+     * Emitted when the input value changes with the new changed value.
+     */
+    onChange?: (e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void;
+    /**
+     * Emitted when the input is manually cleared.
+     */
+    onClear?: (e: ChangeEvent<InputBaseElement<TRows>>) => void;
+    /**
+     * Content to prepended to the input field, usually an icon.
+     */
+    prepend?: ReactNode;
+    /**
+     * The value of the input. Can be a string or a number. Use for controlled inputs.
+     */
+    value?: T;
+    /**
+     * The width of the input.
+     */
+    width?: FormElementWidths;
 };
-export {};
+export declare const IressInput: <T extends FormControlValue = string | number, TRows extends number | undefined = undefined>(props: IressInputProps<T, TRows> & RefAttributes<InputRef<TRows> | null>) => ReactElement;

package/dist/src/components/Input/Input.styles.d.ts

@@ -0,0 +1,121 @@
+export declare const input: import('../../styled-system/types').SlotRecipeRuntimeFn<"inline" | "wrapper" | "root" | "addon" | "internal" | "formControl", {
+    alignRight: {
+        true: {
+            formControl: {
+                textAlign: "right";
+            };
+        };
+    };
+    inline: {
+        true: {
+            wrapper: {
+                display: "inline-flex";
+            };
+        };
+    };
+    isTextarea: {
+        true: {
+            formControl: {
+                lineHeight: number;
+                height: "auto";
+            };
+        };
+    };
+    readOnly: {
+        true: {
+            wrapper: {
+                border: "[none]";
+            };
+        };
+    };
+    width: {
+        '2': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.2";
+            };
+        };
+        '4': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.4";
+            };
+        };
+        '6': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.6";
+            };
+        };
+        '8': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.8";
+            };
+        };
+        '10': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.10";
+            };
+        };
+        '12': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.12";
+            };
+        };
+        '16': {
+            wrapper: {
+                maxWidth: "[fit-content]";
+            };
+            formControl: {
+                width: "input.16";
+            };
+        };
+        '25perc': {
+            wrapper: {
+                width: "input.25perc";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+        '50perc': {
+            wrapper: {
+                width: "input.50perc";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+        '75perc': {
+            wrapper: {
+                width: "input.75perc";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+        '100perc': {
+            wrapper: {
+                width: "input.100perc";
+            };
+            formControl: {
+                width: "[100%]";
+            };
+        };
+    };
+}>;

package/dist/src/components/Input/InputBase/InputBase.d.ts

@@ -1,4 +1,31 @@
-import { InputBaseProps, InputRef } from './InputBase.types';
+import { ReactElement, Ref } from 'react';
+import { IressStyledProps } from '../../../types';
+import { ReactHookFormCompatibleRef } from '../../../interfaces';
+type InputElement<TRows extends number | undefined = undefined> = TRows extends number ? 'textarea' : 'input';
+/**
+ * InputBaseElement is a type that maps to either an HTMLInputElement or HTMLTextAreaElement
+ * based on the `TRows` type parameter.
+ * If `TRows` is a number, it maps to HTMLTextAreaElement; otherwise, it maps to HTMLInputElement.
+ */
+export type InputBaseElement<TRows extends number | undefined = undefined> = HTMLElementTagNameMap[InputElement<TRows>];
+/**
+ * InputRef is a type that represents a ref to the InputBaseElement.
+ * It is compatible with React Hook Form and can be used to access the input or textarea element.
+ */
+export type InputRef<TRows extends number | undefined = undefined> = ReactHookFormCompatibleRef<InputBaseElement<TRows>>;
+/**
+ * `InputBase` is a versatile input field component that can be used as either a text input or a textarea.
+ *
+ * If the `rows` prop is greater than 0, it will render a textarea; otherwise, it will render a regular text input.
+ *
+ * - **Ref Forwarding and Imperative Handle**: This component forwards a ref to the input or textarea element and provides a `focus` method via `useImperativeHandle`. This allows parent components to programmatically focus the input.
+ */
+export type InputBaseProps<TRows extends number | undefined = undefined> = Omit<IressStyledProps<InputElement<TRows>>, 'width'> & {
+    /**
+     * Number of rows in the `textarea` (when set the component renders a textarea element)
+     */
+    rows?: TRows;
+};
 /**
  * `InputBase` is a versatile input field component that can be used as either a text input or a textarea.
  *
@@ -6,4 +33,7 @@ import { InputBaseProps, InputRef } from './InputBase.types';
  *
  * - **Ref Forwarding and Imperative Handle**: This component forwards a ref to the input or textarea element and provides a `focus` method via `useImperativeHandle`. This allows parent components to programmatically focus the input.
  */
-export declare const InputBase: import('react').ForwardRefExoticComponent<InputBaseProps & import('react').RefAttributes<InputRef>>;
+export declare const InputBase: <TRows extends number | undefined = undefined>(props: InputBaseProps<TRows> & {
+    ref?: Ref<InputRef<TRows>>;
+}) => ReactElement;
+export {};

package/dist/src/components/Input/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Input';
-export * from './Input.types';
-export * from './InputBase/InputBase.types';
+export * from './Input.styles';
+export type * from './InputBase/InputBase';

package/dist/src/components/Input/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/Input/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/InputCurrency/InputCurrency.d.ts

@@ -1,4 +1,28 @@
-import { IressInputCurrencyProps } from './InputCurrency.types';
-import { InputRef } from '../Input/InputBase/InputBase.types';
-import { default as React } from 'react';
-export declare const IressInputCurrency: React.ForwardRefExoticComponent<IressInputCurrencyProps & React.RefAttributes<InputRef>>;
+import { InputRef } from '../Input/InputBase/InputBase';
+import { ReactElement, RefAttributes } from 'react';
+import { IressInputProps } from '../Input/Input';
+import { FormControlValue } from '../../types';
+export interface IressInputCurrencyProps<T extends FormControlValue = string | number> extends IressInputProps<T, undefined> {
+    /**
+     * Set input content align to right.
+     */
+    alignRight?: boolean;
+    /**
+     * Set the currency symbol and appended currency code, default is `AUD`.
+     */
+    currencyCode?: string;
+    /**
+     * Pass additional number format options.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+     */
+    formatOptions?: Omit<Intl.NumberFormatOptions, 'currency'>;
+    /**
+     * Set the region of the currency, default is `en-AU`.
+     */
+    locale?: Intl.LocalesArgument;
+    /**
+     * Set the currency symbol.
+     */
+    withSymbol?: boolean;
+}
+export declare const IressInputCurrency: <T extends FormControlValue = string | number>(props: IressInputCurrencyProps<T> & RefAttributes<InputRef<undefined> | null>) => ReactElement;

package/dist/src/components/InputCurrency/index.d.ts

@@ -1,2 +1 @@
 export * from './InputCurrency';
-export * from './InputCurrency.types';

package/dist/src/components/InputCurrency/meta/Thumbnail.d.ts

@@ -0,0 +1,2 @@
+declare const Thumbnail: () => import("react/jsx-runtime").JSX.Element;
+export default Thumbnail;

package/dist/src/components/InputCurrency/meta/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    heading: string;
+    href: string;
+    tags: string[];
+    Thumbnail: import('react').LazyExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+};
+export default _default;

package/dist/src/components/Label/Label.d.ts

@@ -1,2 +1,19 @@
-import { IressLabelProps } from './Label.types';
-export declare const IressLabel: (props: IressLabelProps) => import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+import { LabelBaseProps } from './LabelBase/LabelBase';
+type LabelElement<THtmlFor extends string | undefined = undefined> = THtmlFor extends string ? 'label' : 'strong';
+export type IressLabelProps<THtmlFor extends string | undefined = undefined> = Omit<LabelBaseProps<LabelElement<THtmlFor>>, 'element'> & {
+    /**
+     * Content to be displayed in the label.
+     * This can also include error messages to make sure it makes sense in this context.
+     */
+    children: ReactNode;
+    /**
+     * Used to connect it to the input element, it should be the input's id.
+     * If provided, the label will be rendered as a `<label>` element, otherwise it will be rendered as a `<strong>` element.
+     *
+     * [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for)
+     */
+    htmlFor?: THtmlFor;
+};
+export declare const IressLabel: <THtmlFor extends string | undefined = undefined>(props: IressLabelProps<THtmlFor>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Label/Label.styles.d.ts

@@ -0,0 +1 @@
+export declare const label: import('../../styled-system/types').SlotRecipeRuntimeFn<"text" | "required" | "root", import('../../styled-system/types').SlotRecipeVariantRecord<"text" | "required" | "root">>;

package/dist/src/components/Label/LabelBase/LabelBase.d.ts

@@ -1,2 +1,28 @@
-import { LabelBaseProps } from './LabelBase.types';
-export declare const LabelBase: ({ append, as: BaseTag, children, className, "data-testid": dataTestId, hiddenLabel, optional, required, ...restProps }: LabelBaseProps) => import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+export type LabelBaseProps<E extends 'label' | 'strong' | 'legend' = 'label'> = IressStyledProps<E> & {
+    /**
+     * Content to be appended to the label.
+     * This is not affected by the `hiddenLabel` prop.
+     */
+    append?: ReactNode;
+    /**
+     * Content to be displayed in the label.
+     * This can also include error messages to make sure it makes sense in this context.
+     */
+    children: ReactNode;
+    /**
+     * The base tag of the label.
+     * @default label
+     */
+    element?: E;
+    /**
+     * Visually hides the label text, but still available to screen readers.
+     */
+    hiddenLabel?: boolean;
+    /**
+     * When set to true, the 'required asterisk (*)' is displayed next to the label text.
+     */
+    required?: boolean;
+};
+export declare const LabelBase: <E extends "label" | "strong" | "legend" = "label">({ append, children, className, "data-testid": dataTestId, element, hiddenLabel, required, ...restProps }: LabelBaseProps<E>) => import("react/jsx-runtime").JSX.Element;