@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

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

@@ -1,76 +0,0 @@
-export declare const card: import('../../styled-system/types').SlotRecipeRuntimeFn<"body" | "footer" | "media" | "heading" | "root" | "prepend" | "topRight", {
-    clickable: {
-        true: {
-            root: {
-                cursor: "pointer";
-                _hover: {
-                    borderColor: "colour.primary.fill";
-                };
-                _focus: {
-                    layerStyle: "elevation.focus";
-                    outline: "[none]";
-                };
-            };
-        };
-    };
-    element: {
-        a: {};
-        button: {
-            root: {
-                width: "[100%]";
-            };
-        };
-        div: {};
-    };
-    selected: {
-        true: {
-            root: {
-                borderWidth: "[0px]";
-                borderColor: "colour.primary.fill";
-                _after: {
-                    content: "\"\"";
-                    position: "absolute";
-                    inset: "[0]";
-                    borderColor: "colour.primary.fill";
-                    borderStyle: "solid";
-                    borderWidth: "[2px]";
-                    borderRadius: "radius.system.form";
-                    pointerEvents: "[none]";
-                };
-            };
-        };
-    };
-    stretch: {
-        true: {
-            root: {
-                flex: "1";
-                width: "[100%]";
-                stretch: true;
-            };
-        };
-    };
-    hasSlots: {
-        true: {
-            root: {
-                display: "grid";
-                gridTemplateAreas: "\"prepend body topRight\" \"footer footer footer\"";
-                gridAutoColumns: "[minmax(0, min-content) auto min-content]";
-                gridAutoRows: "[auto min-content]";
-                padding: "spacing.0";
-            };
-        };
-    };
-    hasPrepend: {
-        true: {};
-    };
-    hasHeading: {
-        true: {};
-    };
-    hasMedia: {
-        true: {
-            root: {
-                padding: "spacing.0";
-            };
-        };
-    };
-}>;

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

@@ -1,66 +0,0 @@
-import { ChangeEvent, ForwardedRef, FocusEvent, ReactNode, ReactElement } from 'react';
-import { FormControlValue, IressStyledProps } from '../../types';
-import { ReactHookFormCompatibleRef } from '../../interfaces';
-export interface IressCheckboxProps<T = FormControlValue> extends Omit<IressStyledProps<'input'>, 'defaultValue' | 'value'> {
-    /**
-     * If true, the checkbox is selected.
-     * Please use this when are rendering the checkbox in controlled mode.
-     */
-    checked?: boolean;
-    /**
-     * If true, the checkbox will be initially rendered as selected.
-     * Please use this when are rendering the checkbox in uncontrolled mode.
-     */
-    defaultChecked?: boolean;
-    /**
-     * Sets whether the control is hidden. If it is within a checkbox group,
-     * it will be overridden with the checkbox group's hiddenCheckbox setting.
-     */
-    hiddenControl?: boolean;
-    /**
-     * Visually hides the label (if set), label will still be read out by screenreaders.
-     */
-    hiddenLabel?: boolean;
-    /**
-     * If true, the checkbox will visually appear as indeterminate.
-     */
-    indeterminate?: boolean;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name?: string;
-    /**
-     * If `true`, the checkbox is a required field and will be validated as such.
-     */
-    required?: boolean;
-    /**
-     * Value of the checkbox when used in a checkbox group. The checked state of the checkbox will be overridden based on this value if used inside a checkbox group.
-     * **Note:**
-     * - The value of the checkbox does not mean if its checked or not, use the checked property for that.
-     * - If the value of the checkbox is true/false, and checked is undefined and not inside a CheckboxGroup, it will use this as the checked value. This ensures out-of-the-box compatibility with React Hook Form.
-     */
-    value?: T;
-    /**
-     * Emitted when the checkbox loses focus.
-     */
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Emitted when the checkbox value changes.
-     */
-    onChange?: (e: ChangeEvent<HTMLInputElement>, checked?: boolean, value?: T) => void;
-    /**
-     * Emitted when the checkbox gains focus.
-     */
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * The checkbox content
-     */
-    children?: ReactNode;
-    /**
-     * Add the button-like border and padding to checkbox when `touch` is true.
-     */
-    touch?: boolean;
-}
-export declare const IressCheckbox: <T = FormControlValue>(props: IressCheckboxProps<T> & {
-    ref?: ForwardedRef<ReactHookFormCompatibleRef<HTMLInputElement>>;
-}) => ReactElement;

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

@@ -1,59 +0,0 @@
-export declare const checkbox: import('../../styled-system/types').SlotRecipeRuntimeFn<"srOnly" | "input" | "label" | "mark" | "root" | "touch" | "formElement" | "labelSpan" | "hiddenControl", {
-    hiddenLabel: {
-        true: {
-            label: {
-                display: "inline-block";
-            };
-            mark: {
-                marginInlineEnd: "spacing.0";
-            };
-            labelSpan: {
-                srOnly: true;
-            };
-        };
-    };
-    hiddenControl: {
-        true: {
-            label: {
-                position: "relative";
-                padding: "spacing.0";
-                width: "[100%]";
-                cursor: "pointer";
-                borderRadius: "radius.system.form";
-                borderColor: "colour.neutral.40";
-                borderStyle: "solid";
-                borderWidth: "1px";
-                _hover: {
-                    backgroundColor: "colour.primary.surfaceHover";
-                };
-                _groupFocusWithin: {
-                    layerStyle: "elevation.focus";
-                };
-            };
-            labelSpan: {
-                display: "block";
-            };
-            mark: {
-                checkmark: false;
-            };
-        };
-    };
-    touch: {
-        true: {
-            label: {
-                borderColor: "colour.neutral.40";
-                borderStyle: "solid";
-                borderWidth: "1px";
-                borderRadius: "radius.system.form";
-                padding: "spacing.3";
-            };
-        };
-    };
-    checked: {
-        true: {
-            label: {
-                borderColor: "[currentColor]";
-            };
-        };
-    };
-}>;

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

@@ -1,55 +0,0 @@
-import { ReactNode, ForwardedRef, ReactElement } from 'react';
-import { FormControlValue, IressStyledProps } from '../../types';
-import { IressCheckboxProps } from '../Checkbox/Checkbox';
-import { ReactHookFormCompatibleRef } from '../../interfaces';
-export interface IressCheckboxGroupProps<T = FormControlValue> extends Omit<IressStyledProps, 'defaultValue' | 'onChange' | 'color'> {
-    /**
-     * Content to be displayed inside the group, usually multiple `IressCheckbox`.
-     */
-    children?: ReactNode;
-    /**
-     * Value of checkbox group when in uncontrolled mode.
-     */
-    defaultValue?: T | T[];
-    /**
-     * Hides the checkbox controls to allow the creation of custom checkboxes.
-     */
-    hiddenCheckbox?: boolean;
-    /**
-     * Sets which of the block / inline layout options apply.
-     * @default 'stack'
-     */
-    layout?: 'stack' | 'block' | 'inline';
-    /**
-     * Name to be applied to all checkboxes in the group.
-     */
-    name?: string;
-    /**
-     * Called with collated new value when a user toggles one of its children checkboxes.
-     */
-    onChange?: (value?: T[]) => void;
-    /**
-     * Renders the group in a read-only state.
-     */
-    readOnly?: boolean;
-    /**
-     * Value of checkbox group when in controlled mode.
-     */
-    value?: T | T[];
-    /**
-     * Add the button-like border and padding to checkbox when `touch` is true.
-     */
-    touch?: boolean;
-}
-export interface CheckboxGroupRef<T = FormControlValue> extends ReactHookFormCompatibleRef<HTMLDivElement> {
-    check: (checked: T) => void;
-    reset: () => void;
-}
-export type CheckboxGroupContextValue<T = FormControlValue> = Pick<IressCheckboxGroupProps<T>, 'name' | 'hiddenCheckbox' | 'readOnly' | 'touch'> & Pick<IressCheckboxProps<T>, 'onChange'> & {
-    value: T[];
-};
-export declare function getCheckboxGroupContext<T = FormControlValue>(): React.Context<CheckboxGroupContextValue<T>>;
-export declare const CheckboxGroupContext: import('react').Context<CheckboxGroupContextValue<FormControlValue> | undefined>;
-export declare const IressCheckboxGroup: <T = FormControlValue>(props: IressCheckboxGroupProps<T> & {
-    ref?: ForwardedRef<CheckboxGroupRef<T>>;
-}) => ReactElement;

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

@@ -1,16 +0,0 @@
-import { IressStyledProps } from '../../types';
-export interface IressCheckboxMarkProps extends IressStyledProps<'svg'> {
-    /**
-     * Checked status of the checkbox mark
-     */
-    checked?: boolean;
-    /**
-     * Indeterminate status of the checkbox mark
-     */
-    indeterminate?: boolean;
-    /**
-     * Size of the checkbox mark
-     */
-    size?: 'sm';
-}
-export declare const IressCheckboxMark: ({ checked, className, indeterminate, size, ...restProps }: IressCheckboxMarkProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { IressStyledProps, ResponsiveProp } from '../../types';
-import { UtilityValues } from '../../styled-system/types/prop-type';
-export interface IressColProps extends IressStyledProps {
-    /**
-     * Individual alignment of column
-     */
-    alignSelf?: 'start' | 'end' | 'center' | 'stretch';
-    /**
-     * Any content you would like to be contained in a column.
-     */
-    children?: ReactNode;
-    /**
-     * Number of columns to offset.
-     */
-    offset?: ResponsiveProp<UtilityValues['offset'] | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11>;
-    /**
-     * Number of columns to span.
-     * @default auto
-     */
-    span?: ResponsiveProp<UtilityValues['span'] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
-}
-export declare const IressCol: ({ className, ...restProps }: IressColProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,16 +0,0 @@
-export declare const col: import('../../styled-system/types').RecipeRuntimeFn<{
-    alignSelf: {
-        start: {
-            alignSelf: "start";
-        };
-        end: {
-            alignSelf: "end";
-        };
-        center: {
-            alignSelf: "center";
-        };
-        stretch: {
-            alignSelf: "stretch";
-        };
-    };
-}>;

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

@@ -1,13 +0,0 @@
-import { IressStyledProps } from '../../types';
-import { ReactNode } from 'react';
-export interface IressContainerProps extends IressStyledProps {
-    /**
-     * Content to be contained, usually used with `IressRow` and `IressCol`.
-     */
-    children?: ReactNode;
-    /**
-     * Container stretches to fill the width of the browser window if true.
-     */
-    fluid?: boolean;
-}
-export declare const IressContainer: ({ className, ...restProps }: IressContainerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,35 +0,0 @@
-/**
- * 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 container: import('../../styled-system/types').RecipeRuntimeFn<{
-    /**
-     * Container stretches to fill the width of the browser window if true.
-     */
-    fluid: {
-        true: {
-            maxWidth: "[100%]";
-        };
-        false: {
-            xs: {
-                maxWidth: "container.xs";
-            };
-            sm: {
-                maxWidth: "container.sm";
-            };
-            md: {
-                maxWidth: "container.md";
-            };
-            lg: {
-                maxWidth: "container.lg";
-            };
-            xl: {
-                maxWidth: "container.xl";
-            };
-            xxl: {
-                maxWidth: "container.xxl";
-            };
-        };
-    };
-}>;

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

@@ -1,8 +0,0 @@
-import { IressStyledProps } from '../../types';
-export interface IressDividerProps extends IressStyledProps<'hr'> {
-    /**
-     * Change to a vertical divider.
-     */
-    vertical?: boolean;
-}
-export declare const IressDivider: ({ className, vertical, ...restProps }: IressDividerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +0,0 @@
-export declare const divider: import('../../styled-system/types').RecipeRuntimeFn<{
-    vertical: {
-        true: {
-            display: "inline-block";
-            alignSelf: "stretch";
-            borderInlineStartWidth: "1px";
-            borderInlineStartStyle: "solid";
-            height: "auto";
-            minHeight: "[1em]";
-            verticalAlign: "middle";
-        };
-        false: {
-            display: "block";
-            borderBlockStartWidth: "1px";
-            borderBlockStartStyle: "solid";
-        };
-    };
-}>;

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

@@ -1,31 +0,0 @@
-import { ReactNode } from 'react';
-import { IressTextProps } from '../Text';
-import { IressCustomiseSlot } from '../../interfaces';
-export interface IressExpanderProps extends Omit<IressTextProps<'div'>, 'element' | 'onChange'> {
-    /**
-     * The element used to activate the expandable container.
-     */
-    activator: ReactNode;
-    /**
-     * This allows you to customise the content styling specifically, which is the floating element.
-     * It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
-     */
-    activatorStyle?: IressCustomiseSlot;
-    /**
-     * Contents that will be expanded/collapsed when the expander is activated.
-     */
-    children?: ReactNode;
-    /**
-     * Emitted when the open state changes.
-     */
-    onChange?: (newValue: boolean) => void;
-    /**
-     * Controls the display mode of the activator element. Can be Section, Heading or Link.
-     */
-    mode?: 'section' | 'link';
-    /**
-     * When true the expandable container will be visible and the activator will display as open.
-     */
-    open?: boolean;
-}
-export declare const IressExpander: ({ activator, activatorStyle, children, className, "data-testid": testid, onChange, id: idProp, mode, noGutter, open, ...restProps }: IressExpanderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,45 +0,0 @@
-export declare const expander: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "content" | "root" | "activator" | "containerInner", {
-    mode: {
-        section: {
-            activator: {
-                display: "flex";
-                justifyContent: "space-between";
-                alignItems: "flex-end";
-                width: "[100%]";
-                textStyle: "typography.heading.4";
-                py: "spacing.3";
-                borderBottom: "divider";
-                transition: "[all 0.2s ease-in-out]";
-                _after: {
-                    mr: "spacing.2";
-                };
-                _hover: {
-                    color: "colour.primary.text";
-                    borderBottom: "hover";
-                };
-            };
-        };
-        link: {
-            activator: {
-                color: "colour.primary.text";
-                textDecoration: "underline";
-                _before: {
-                    borderRadius: "radius.system.badge";
-                };
-                _hover: {
-                    textDecoration: "none";
-                };
-            };
-        };
-    };
-    open: {
-        true: {
-            activator: {
-                tableChevron: false;
-            };
-            container: {
-                gridTemplateRows: "1fr";
-            };
-        };
-    };
-}>;

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

@@ -1,57 +0,0 @@
-import { ReactNode } from 'react';
-import { LabelBaseProps } from '../Label/LabelBase/LabelBase';
-import { IressStyledProps } from '../../types';
-import { ValidationMessageObj } from '../../interfaces';
-export type IressFieldProps<E extends 'div' | 'fieldset' = 'div', ELabel extends 'label' | 'legend' = 'label'> = IressStyledProps<E> & Pick<LabelBaseProps<ELabel>, 'hiddenLabel' | 'required'> & {
-    /**
-     * The form control this field is related to.
-     */
-    children?: ReactNode;
-    /**
-     * Text to be displayed as supporting field description.
-     */
-    hint?: ReactNode;
-    /**
-     * Displays the label and input field inline instead of stacked vertically.
-     */
-    horizontal?: boolean;
-    /**
-     * Controls the width of the label container when in horizontal mode.
-     * Can be any valid CSS width value (e.g., '200px', '20%', 'auto').
-     * Only applies when `horizontal` is true.
-     */
-    labelWidth?: string;
-    /**
-     * 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?: ELabel extends 'label' ? string : undefined;
-    /**
-     * Text to be displayed in the label.
-     **/
-    label: ReactNode;
-    /**
-     * Validation error to be displayed above the field.
-     */
-    error?: ReactNode;
-    /**
-     * Validation errors to be displayed above the field, an array of validation messages to be displayed in `IressValidationSummary`.
-     */
-    errorMessages?: ValidationMessageObj[];
-    /**
-     * Renders the group in a read-only state (no asterisk symbol).
-     */
-    readOnly?: boolean;
-    /**
-     * Removes the reserved space for error messages, allowing fields to stack with narrower gaps.
-     * When true, no margin is reserved for potential error messages.
-     */
-    removeErrorMargin?: boolean;
-    /**
-     * Supplementary content to be displayed below the field. Is only shown when the field is not in an error state.
-     */
-    supplementary?: ReactNode;
-};
-export declare const IressField: ({ children, className, "data-testid": dataTestId, error, errorMessages, hiddenLabel, hint, horizontal, label, labelWidth, required, readOnly, removeErrorMargin, supplementary, ...restProps }: IressFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,88 +0,0 @@
-export declare const field: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "label" | "hint" | "element" | "root" | "supplementary" | "labelContainer" | "fieldContainer", {
-    horizontal: {
-        true: {
-            root: {
-                display: "grid";
-                gridTemplateColumns: "auto 1fr";
-                gridTemplateRows: "auto auto";
-                gridTemplateAreas: "\"label field\" \". footer\"";
-                columnGap: "spacing.2";
-                alignItems: "center";
-            };
-            labelContainer: {
-                gridArea: "label";
-                alignSelf: "center";
-            };
-            fieldContainer: {
-                gridArea: "field";
-            };
-            footer: {
-                gridArea: "footer";
-                mt: "spacing.1";
-            };
-            label: {
-                mb: "none";
-            };
-        };
-    };
-    hasError: {
-        true: {
-            root: {
-                _nestedFormElements: {
-                    borderColor: "colour.system.danger.fill";
-                };
-            };
-        };
-    };
-    hasHint: {
-        true: {
-            label: {
-                mb: "spacing.0";
-            };
-        };
-    };
-    hiddenLabel: {
-        true: {
-            label: {
-                mb: "none";
-            };
-        };
-    };
-    multipleFields: {
-        true: {
-            supplementary: {
-                position: "relative";
-                _after: {
-                    content: "\"\"";
-                    position: "absolute";
-                    left: "[0]";
-                    right: "[0]";
-                    bottom: "[100%]";
-                    borderBottom: "divider";
-                };
-            };
-        };
-    };
-    removeErrorMargin: {
-        true: {
-            root: {
-                mb: "none";
-            };
-            footer: {
-                position: "static";
-            };
-        };
-        false: {
-            root: {
-                mb: "field.footer";
-            };
-            footer: {
-                position: "absolute";
-                left: "spacing.0";
-                right: "spacing.0";
-                top: "[100%]";
-                mt: "spacing.1";
-            };
-        };
-    };
-}>;

package/dist/src/components/Field/FieldGroup/FieldGroup.d.ts

@@ -1,17 +0,0 @@
-import { IressFieldProps } from '../Field';
-import { ReactNode } from 'react';
-export interface IressFieldGroupProps extends IressFieldProps<'fieldset', 'legend'> {
-    /**
-     * Should contain multiple `IressField`, or other elements supported in field group such as `IressButton`.
-     */
-    children?: ReactNode;
-    /**
-     * Displays multiple children inline rather than stacked, with a small gap.
-     */
-    inline?: boolean;
-    /**
-     * Displays multiple children inline and removes column gap.
-     */
-    join?: boolean;
-}
-export declare const IressFieldGroup: ({ children, className, "data-testid": dataTestId, error, errorMessages, hiddenLabel, hint, inline, join, label, required, supplementary, ...restProps }: IressFieldGroupProps) => import("react/jsx-runtime").JSX.Element;