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

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

@@ -0,0 +1,9 @@
+export declare const buttonGroup: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "values" | "root", {
+    hiddenLabel: {
+        true: {
+            label: {
+                srOnly: true;
+            };
+        };
+    };
+}>;

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

@@ -1,3 +1,18 @@
-import { ButtonGroupContextValue, IressButtonGroupProviderProps } from './ButtonGroup.types';
-export declare const ButtonGroupContext: import('react').Context<ButtonGroupContextValue<import('../../types').FormControlValue[], import('../../types').FormControlValue> | undefined>;
-export declare const IressButtonGroupProvider: ({ children, defaultSelected, multiple, onChange, selected: selectedProp, }: IressButtonGroupProviderProps) => import("react/jsx-runtime").JSX.Element;
+import { Context, PropsWithChildren } from 'react';
+import { ControlledValue } from '../../hooks/useControlledState';
+import { FormControlValue } from '../../types';
+export interface ButtonGroupProviderProps<T = FormControlValue, TMultiple extends boolean = false> extends PropsWithChildren {
+    defaultSelected?: ControlledValue<T, TMultiple>;
+    multiple?: boolean;
+    onChange?: (newSelected?: ControlledValue<T, TMultiple>) => void;
+    selected?: ControlledValue<T, TMultiple>;
+}
+interface ButtonGroupContextValue<T = FormControlValue, TMultiple extends boolean = false> {
+    isActive: (value?: T) => boolean;
+    selected?: ControlledValue<T, TMultiple>;
+    toggle?: (value?: T, flag?: boolean) => void;
+}
+export declare function getButtonGroupContext<T = FormControlValue, TMultiple extends boolean = false>(): Context<ButtonGroupContextValue<T, TMultiple>>;
+export declare const ButtonGroupContext: Context<ButtonGroupContextValue<FormControlValue, false> | undefined>;
+export declare const ButtonGroupProvider: <T = FormControlValue, TMultiple extends boolean = false>({ children, defaultSelected, multiple, onChange, selected: selectedProp, }: ButtonGroupProviderProps<T, TMultiple>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,3 @@
-export * from './ButtonGroup.types';
 export * from './ButtonGroup';
-export * from './hooks/useIDSButtonGroupItem';
+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

@@ -1,2 +1,44 @@
-import { CardWithEnums } from './Card.types';
-export declare const IressCard: CardWithEnums;
+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

@@ -1,6 +1,2 @@
-export * from './Card.types';
 export * from './Card';
-export * from './components/ButtonCard';
-export * from './components/LinkCard';
-export * from './helpers/composeIDSCard';
-export * from './helpers/composeIDSCardSlots';
+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

@@ -1,2 +1,64 @@
-import { CheckboxRef, IressCheckboxProps } from './Checkbox.types';
-export declare const IressCheckbox: import('react').ForwardRefExoticComponent<IressCheckboxProps & import('react').RefAttributes<CheckboxRef>>;
+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.
+     */
+    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

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

@@ -1,2 +1,55 @@
-import { CheckboxGroupWithEnums } from './CheckboxGroup.types';
-export declare const IressCheckboxGroup: CheckboxGroupWithEnums;
+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

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

@@ -1,2 +1,16 @@
-import { IressCheckboxMarkProps } from './CheckboxMark.types';
-export declare const IressCheckboxMark: import('react').ForwardRefExoticComponent<IressCheckboxMarkProps & import('react').RefAttributes<SVGSVGElement>>;
+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

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

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

@@ -1,2 +1,23 @@
-import { ColWithEnums } from './Col.types';
-export declare const IressCol: ColWithEnums;
+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

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

@@ -1,2 +1,13 @@
-import { IressContainerProps } from './Container.types';
-export declare const IressContainer: ({ children, className, fluid, ...restProps }: IressContainerProps) => import("react/jsx-runtime").JSX.Element;
+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";
+            };
+        };
+    };
+}>;