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

package/dist/src/components/ButtonGroup/hooks/useButtonGroupItem.d.ts

@@ -0,0 +1,15 @@
+import { FormControlValue } from '../../../types';
+export interface ButtonGroupItemProps {
+    /**
+     * The value of the button, when used in `IressButtonGroup`.
+     */
+    value?: FormControlValue;
+}
+export interface ButtonGroupItemHook {
+    active: boolean;
+    props: {
+        'aria-pressed': boolean;
+    };
+    toggle: () => void;
+}
+export declare const useButtonGroupItem: ({ value, }: ButtonGroupItemProps) => ButtonGroupItemHook | undefined;

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

@@ -0,0 +1,3 @@
+export * from './ButtonGroup';
+export * from './ButtonGroup.styles';
+export * from './hooks/useButtonGroupItem';

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

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

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

@@ -0,0 +1,44 @@
+import { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
+import { IressCSSProps, IressTestProps } from '../../interfaces';
+export interface InternalCardProps<E extends ElementType = 'div'> extends IressCSSProps, IressTestProps {
+    /**
+     * Main body of the card
+     */
+    children?: ReactNode;
+    /**
+     * Element type to render the Card as.
+     */
+    element?: E;
+    /**
+     * Section that sticks to the bottom of the card
+     */
+    footer?: ReactNode;
+    /**
+     * Heading slot. Often used for a title or description.
+     */
+    heading?: ReactNode;
+    /**
+     * Section (often for an image, table or chart) that appears before the heading
+     */
+    media?: ReactNode;
+    /**
+     * Slot to the left of card content.
+     */
+    prepend?: ReactNode;
+    /**
+     * When set to true, card appears selected.
+     */
+    selected?: boolean;
+    /**
+     * Slot positioned to the top right of the card, often used for an icon or action menu
+     */
+    topRight?: ReactNode;
+}
+type ElementProps<E extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<E>, keyof InternalCardProps<E>>;
+export type IressCardProps<E extends ElementType = 'div'> = ElementProps<E> & InternalCardProps<E>;
+export type IressButtonCardProps = IressCardProps<'button'>;
+export type IressLinkCardProps = IressCardProps<'a'>;
+export declare const IressCard: <E extends ElementType = "div">({ element, className, selected, stretch, children, footer, heading, media, prepend, topRight, ...restProps }: IressCardProps<E>) => import("react/jsx-runtime").JSX.Element;
+export declare const IressButtonCard: (props: IressButtonCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressLinkCard: (props: IressLinkCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,76 @@
+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.000";
+            };
+        };
+    };
+    hasPrepend: {
+        true: {};
+    };
+    hasHeading: {
+        true: {};
+    };
+    hasMedia: {
+        true: {
+            root: {
+                padding: "spacing.000";
+            };
+        };
+    };
+}>;

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

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

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

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

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

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

@@ -0,0 +1,59 @@
+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.000";
+            };
+            labelSpan: {
+                srOnly: true;
+            };
+        };
+    };
+    hiddenControl: {
+        true: {
+            label: {
+                position: "relative";
+                padding: "spacing.000";
+                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.300";
+            };
+        };
+    };
+    checked: {
+        true: {
+            label: {
+                borderColor: "[currentColor]";
+            };
+        };
+    };
+}>;

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

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

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

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

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

@@ -0,0 +1,55 @@
+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/CheckboxGroup/CheckboxGroup.styles.d.ts

@@ -0,0 +1,37 @@
+export declare const checkboxGroup: import('../../styled-system/types').RecipeRuntimeFn<{
+    layout: {
+        block: {
+            display: "flex";
+            flexWrap: "wrap";
+            rowGap: "spacing.200";
+            '& label': {
+                display: "flex";
+                flexBasis: "[100%]";
+            };
+            '& label span': {
+                flexBasis: "[100%]";
+            };
+            '& > *': {
+                flexBasis: "[100%]";
+            };
+        };
+        stack: {
+            display: "flex";
+            flexWrap: "wrap";
+            rowGap: "spacing.200";
+            '& > *': {
+                flexBasis: "[100%]";
+            };
+        };
+        inline: {
+            display: "flex";
+            flexFlow: "row wrap";
+            width: "[100%]";
+            rowGap: "spacing.200";
+            columnGap: "spacing.400";
+        };
+    };
+    readOnly: {
+        true: {};
+    };
+}>;

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

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

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

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

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

@@ -0,0 +1,16 @@
+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/CheckboxMark/CheckboxMark.styles.d.ts

@@ -0,0 +1,42 @@
+export declare const checkboxMark: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "indeterminateMark" | "checkedMark", {
+    indeterminate: {
+        true: {
+            root: {
+                bg: "[currentColor]";
+                borderColor: "[currentColor]";
+                _hover: {
+                    borderColor: "colour.primary.fillHover";
+                    bg: "colour.primary.fillHover";
+                    stroke: "colour.primary.onFill";
+                };
+            };
+            indeterminateMark: {
+                display: "revert";
+            };
+        };
+    };
+    checked: {
+        true: {
+            root: {
+                bg: "[currentColor]";
+                borderColor: "[currentColor]";
+                _hover: {
+                    borderColor: "colour.primary.fillHover";
+                    bg: "colour.primary.fillHover";
+                    stroke: "colour.primary.onFill";
+                };
+            };
+            checkedMark: {
+                display: "revert";
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                width: "[calc(1.25 * {sizes.typography.base})]";
+                height: "[calc(1.25 * {sizes.typography.base})]";
+            };
+        };
+    };
+}>;

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

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

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

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

@@ -0,0 +1,16 @@
+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/Col/index.d.ts

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

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

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

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

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

@@ -0,0 +1,35 @@
+/**
+ * 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/Container/index.d.ts

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

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

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

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

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

@@ -0,0 +1,18 @@
+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/Divider/index.d.ts

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

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

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