@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

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

@@ -0,0 +1,2 @@
+export * from './Icon';
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,57 @@
+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 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

@@ -0,0 +1,39 @@
+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.
+ *
+ * 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 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

@@ -0,0 +1,3 @@
+export * from './Input';
+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

@@ -0,0 +1,28 @@
+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

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

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

@@ -0,0 +1,19 @@
+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" | "root" | "required", import('../../styled-system/types').SlotRecipeVariantRecord<"text" | "root" | "required">>;

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

@@ -0,0 +1,28 @@
+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;

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

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

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

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

package/dist/src/components/Label/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/Link/Link.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement, ReactNode, ElementType, ComponentPropsWithoutRef, MouseEventHandler } from 'react';
+import { ButtonElement, ButtonInstance, ButtonRef } from '../Button';
+import { IressCSSProps, IressTestProps } from '../../interfaces';
+export type IressLinkProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = IressCSSProps & IressTestProps & Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, 'element'> & {
+    /**
+     * Sets the active state of the link, usually used to indicate the link has activated a modal, popover or slideout.
+     */
+    active?: boolean;
+    /**
+     * Content for the append slot.
+     */
+    append?: ReactNode;
+    /**
+     * Content is placed between prepend and append if provided. Used to describe the expected intention of this link.
+     */
+    children?: ReactNode;
+    /**
+     * Change the component that will be rendered as the link, used for third-party libraries that require a specific element type.
+     * By default, it will render a button or an anchor tag based on the `href` prop.
+     */
+    element?: C;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href?: THref;
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: boolean | string;
+    /**
+     * Emitted when the menu item is clicked.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Content for the prepend slot.
+     */
+    prepend?: ReactNode;
+};
+export declare const IressLink: <C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressLinkProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement;

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

@@ -0,0 +1,29 @@
+/**
+ * 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 link: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "spinner" | "root" | "append" | "prepend", {
+    active: {
+        true: {
+            root: {
+                borderBottom: "[1px dashed currentColor]";
+            };
+        };
+    };
+    loading: {
+        true: {
+            content: {
+                _groupHover: {
+                    textDecoration: "underline";
+                };
+            };
+            root: {
+                cursor: "not-allowed";
+                filter: "[saturate(0.25)]";
+                opacity: number;
+                boxShadow: "none";
+            };
+        };
+    };
+}>;

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

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

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

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

package/dist/src/components/Link/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;