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

package/dist/src/patterns/Loading/components/ComponentLoading.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+declare const templates: {
+    chart: import("react/jsx-runtime").JSX.Element;
+};
+export interface ComponentLoadingProps extends IressStyledProps {
+    /**
+     * The chart that is being loaded for the first time or being refreshed/updated.
+     */
+    children: ReactNode;
+    /**
+     * If set to `true`, will hide the skeleton and display the chart.
+     */
+    loaded?: boolean;
+    /**
+     * Use `pattern="component"` for the following use cases:
+     * - Component that is expected to be slow to load, such as a chart, table or large graphic.
+     * - Component that can be refreshed/updated with new data.
+     */
+    pattern?: 'component';
+    /**
+     * Only screen readers will see this message, it is changed to the `message` after the delay.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+     * @default 'chart'
+     */
+    template?: keyof typeof templates | Exclude<ReactNode, string | number | boolean | null>;
+    /**
+     * Set the timeouts for showing the skeleton and update messages.
+     */
+    timeout?: {
+        /**
+         * The time in milliseconds before the skeleton is displayed.
+         * @default 0
+         */
+        skeleton?: number;
+        /**
+         * The time in milliseconds before the update message is displayed.
+         * @default 1000
+         */
+        update?: number;
+    };
+    /**
+     * Set the chart to be updated. If a `ReactNode` is provided, it will be displayed as the message.
+     * If set to `true`, will display the default message `Updating...`.
+     */
+    update?: ReactNode;
+}
+export declare const ComponentLoading: ({ children, className, loaded, screenReaderText, template, timeout, update, ...restProps }: ComponentLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/patterns/Loading/components/DefaultLoading.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+export interface DefaultLoadingProps extends IressStyledProps {
+    /**
+     * Message to display when the loading time is longer than expected.
+     * @default 'This is taking longer than expected...'
+     */
+    children?: ReactNode;
+    /**
+     * Only screen readers will see this message, it is changed to the `children` message after the delay.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Do not set the `pattern` prop when no other pattern can be applied. It will only show the loading message after a delay, and is intended for use when loading is not expected to take a long time.
+     * Example use cases:
+     * - Navigating between different routes
+     * - Calling an API within the page that does not require a loading state
+     */
+    pattern?: 'default';
+    /**
+     * Delay in milliseconds before the message is displayed.
+     * @default 3000
+     */
+    timeout?: number;
+}
+export declare const DefaultLoading: ({ children, className, screenReaderText, timeout, ...restProps }: DefaultLoadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/patterns/Loading/components/LongLoading.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { IressProgressProps } from '../../../components/Progress';
+import { IressStyledProps } from '../../../types';
+export interface LongLoadingProps extends IressStyledProps {
+    /**
+     * The children are displayed while loading. This will be displayed above the progress bar and checklist.
+     */
+    children?: ReactNode;
+    /**
+     * An error to display if the loading fails. This will override the `messageList` and show an error message instead.
+     */
+    error?: ReactNode;
+    /**
+     * Estimated time in milliseconds for the loading to finish.
+     * @default 10000
+     */
+    estimatedFinishTime?: number;
+    /**
+     * If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+     */
+    loaded?: boolean;
+    /**
+     * A checklist to display while loading. The key is the time when you want the item to be checked.
+     */
+    messageList: Record<number, ReactNode>;
+    /**
+     * The long loading pattern will display a checklist of items that are being loaded.
+     *
+     * Use `pattern="long"` for the following use cases:
+     * - Calling multiple slow APIs to load data
+     * - Loading results from AI
+     * - Processing a large amount of data as a queue (eg. bulk uploading or large media file uploads)
+     */
+    pattern?: 'long';
+    /**
+     * If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+     */
+    progress?: IressProgressProps['value'];
+    /**
+     * This is a render prop that allows you to override the default progress rendering.
+     * This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+     */
+    renderProgress?: (props: Pick<IressProgressProps, 'max' | 'sectionTitle' | 'value'>) => ReactNode;
+    /**
+     * Set the timeouts for showing the progress bar and message.
+     */
+    timeout?: {
+        /**
+         * The time in milliseconds before this component begins to fade out (if `loaded` is set to `true`).
+         * @default 1300
+         */
+        loaded?: number;
+        /**
+         * The time in milliseconds before the checklist is displayed.
+         * @default 500
+         */
+        message?: number;
+    };
+}
+export declare const LongLoading: ({ children, className, error, estimatedFinishTime, loaded, messageList, progress, renderProgress, timeout, ...restProps }: LongLoadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/patterns/Loading/components/PageLoading.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+declare const templates: {
+    page: () => import("react/jsx-runtime").JSX.Element;
+    form: () => import("react/jsx-runtime").JSX.Element;
+    dashboard: () => import("react/jsx-runtime").JSX.Element;
+};
+export interface PageLoadingProps extends Omit<IressStyledProps, 'children'> {
+    /**
+     * If provided, will switch the skeleton to this template. Use when you have critical content that can be displayed while loading to allow the user to see some content while the rest is loading.
+     */
+    critical?: ReactNode;
+    /**
+     * An error to display if the loading fails. This will override the skeleton.
+     */
+    error?: ReactNode;
+    /**
+     * If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+     */
+    loaded?: boolean;
+    /**
+     * Use `pattern="page"` for the following use cases:
+     * - Detail page for a record
+     * - Form page
+     * - Article page
+     */
+    pattern?: 'page';
+    /**
+     * Only screen readers will see this message.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Which template to use as the skeleton, or you can use a ReactNode to customise the skeleton completely.
+     * @default 'page'
+     */
+    template?: keyof typeof templates | Exclude<ReactNode, string | number | boolean | null>;
+    /**
+     * Delay in milliseconds before the skeleton is displayed.
+     * @default 500
+     */
+    timeout?: number;
+}
+export declare const PageLoading: ({ className, critical, error, loaded, screenReaderText, template, timeout, ...restProps }: PageLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/patterns/Loading/components/StartUpLoading.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { IressProgressProps } from '../../../components/Progress';
+import { IressStyledProps } from '../../../types';
+export interface StartUpLoadingProps extends Omit<IressStyledProps, 'color'> {
+    /**
+     * Message to display when the loading time is longer than expected.
+     * @default 'One moment please...'
+     */
+    children?: ReactNode;
+    /**
+     * Estimated time in milliseconds for the loading to finish.
+     * @default 3000
+     */
+    estimatedFinishTime?: number;
+    /**
+     * If set to `true`, will start hiding the loading indicator. It is recommended to use this prop if you are using the `IressLoading.shouldRender` hook to achieve a smooth loading experience.
+     */
+    loaded?: boolean;
+    /**
+     * A message list to display while loading. The key is the time when you want the message to change to this message.
+     * If using a message list, the `children` will not be displayed.
+     */
+    messageList?: Record<number, ReactNode>;
+    /**
+     * Use `pattern="start-up"` for the following use cases:
+     * - Loading an application for the first time
+     * - Switching from a different application to a new application
+     * - Switching from a client's website to an Iress application
+     * - Switching themes
+     */
+    pattern?: 'start-up';
+    /**
+     * If provided, will use this to set the `value` of the progress bar. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+     */
+    progress?: IressProgressProps<number | undefined>['value'];
+    /**
+     * This is a render prop that allows you to override the default progress rendering.
+     * This is useful if you want to use a different progress component or if you want to add additional props to the progress bar.
+     */
+    renderProgress?: (props: Pick<IressProgressProps<number | undefined>, 'min' | 'max' | 'sectionTitle' | 'value'>) => ReactNode;
+    /**
+     * Only screen readers will see this message, it is changed to the `children` message after the delay.
+     * @default 'Loading...'
+     */
+    screenReaderText?: ReactNode;
+    /**
+     * Set the start from timer, useful when stringing multiple loading patterns across different pages (eg. logging via a third-party authentication provider)
+     * @default 0
+     */
+    startFrom?: number;
+    /**
+     * Set the timeouts for showing the progress bar and message.
+     */
+    timeout?: {
+        /**
+         * The time in milliseconds before this component begins to fade out (if `loaded` is set to `true`).
+         * @default 200
+         */
+        loaded?: number;
+        /**
+         * The time in milliseconds before the message message is displayed.
+         * @default 2500
+         */
+        message?: number;
+        /**
+         * The time in milliseconds before the progress bar is displayed.
+         * @default 500
+         */
+        progress?: number;
+    };
+}
+export declare const StartUpLoading: ({ className, children, "data-testid": dataTestId, estimatedFinishTime, loaded, messageList, progress, renderProgress, screenReaderText, startFrom, timeout, ...restProps }: StartUpLoadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/patterns/Loading/components/ValidateLoading.d.ts

@@ -0,0 +1,38 @@
+import { IressButtonProps } from '../../../components/Button';
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../../types';
+export interface ValidateLoadingProps extends IressStyledProps {
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: IressButtonProps['loading'];
+    /**
+     * Set the message to be displayed when the button is in the loading state.
+     * @default 'This is taking longer than expected...'
+     */
+    message?: ReactNode;
+    /**
+     * Use `pattern="validate"` for the following use cases:
+     * - Submitting a form
+     * - Saving a record
+     */
+    pattern?: 'validate';
+    /**
+     * This sets where the loading message will be displayed.
+     * - `bottom` - The loading message will be displayed below the button. It will be absolute positioned.
+     * - `top` - The loading message will be displayed above the button. It will be absolute positioned.
+     * - `right` - The loading message will be displayed to the right of the button. It will be inline positioned.
+     */
+    position?: 'bottom' | 'top' | 'right';
+    /**
+     * This is a render prop that allows you to override the default button rendering.
+     * This is useful if you want to use a different button component or if you want to add additional props to the button.
+     */
+    renderButton?: (props: Pick<IressButtonProps, 'loading'>) => ReactNode;
+    /**
+     * The time in milliseconds before the loading message is displayed.
+     * @default 2500
+     */
+    timeout?: number;
+}
+export declare const ValidateLoading: ({ children, className, loading: loadingProp, message, pattern, position, renderButton, timeout, ...restProps }: ValidateLoadingProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/src/patterns/Loading/hooks/useEstimatedProgressValue.d.ts

@@ -0,0 +1,11 @@
+import { IressProgressProps } from '../../../components/Progress';
+/**
+ * This hook is used to calculate the estimated progress of a loading component, allowing you to show an animated progress bar even when real progress is not available.
+ *
+ * @param estimatedFinishTime - The estimated time in milliseconds for the loading to finish.
+ * @param isLoaded - A boolean value that determines if the component waiting to be loaded has finished loading.
+ * @param progress - If provided, will use this as the progress value. If not provided, will use the `estimatedFinishTime` to calculate the progress.
+ * @param latestMessageTimecode - The latest timecode of the message list. It helps us determine if still in progress, particularly when its higher than the estimated finish time.
+ * @returns A number value that represents the current progress of the loading component.
+ */
+export declare const useEstimatedProgressValue: (estimatedFinishTime: number, isLoaded?: boolean, progress?: IressProgressProps<undefined>["value"], latestMessageTimecode?: number) => number;

package/dist/src/patterns/Loading/hooks/useShouldRenderLoading.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This hook is used to smooth the loading experience by delaying the loading indicator being removed after the loading of an element finishes, as well as avoiding the indicator completely if the loading is too quick.
+ *
+ * @param isLoaded - A boolean value that determines if the component waiting to be loaded has finished loading.
+ * @param delay - Once a component has loaded, how long should the loading indicator be displayed for. This is useful to allow the loading indicator to animate out.
+ * @param startFrom - If a component is still loading after this time in milliseconds, you should show the loading message. Default is 500ms, meaning a user will not even see the loading indicator if the page loads before this time.
+ * @param avoidDelayTimeout - If the component has a start up animation, this is the time in milliseconds that we will avoid the delay timeout for. This is useful to speed up the loading indicator removal if the component loaded before the first half of an animation finishes.
+ * @returns A boolean value that determines whether the `IressLoading` component should be rendered.
+ */
+export declare const useShouldRenderLoading: (isLoaded: boolean, delay?: number, startFrom?: number, avoidDelayTimeout?: number) => boolean;

package/dist/src/patterns/Loading/hooks/useShowIndicator.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This hook is used to delay the indicator being shown and removed during the loading process.
+ *
+ * @param isLoaded - A boolean value that determines if the component waiting to be loaded has finished loading.
+ * @param showDelay - Once a component has started loading, how long long we should wait before showing the loading indicator. This is useful to avoid flickering if the component loads quickly.
+ * @param hideDelay - Once a component has loaded, how long we should wait before removing the loading indicator. This is useful to allow the loading indicator to animate out.
+ * @returns A boolean value that determines whether the loading indicator should be shown.
+ */
+export declare const useShowIndicator: (isLoaded?: boolean, showDelay?: number, hideDelay?: number) => boolean;

package/dist/src/patterns/Loading/hooks/useSuspenseResource.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This is a polyfill for the `use` hook in React 19, allowing you to suspend a component until the resource (Promise) is resolved.
+ * **Note:** For those using React 19, import the `use` hook from React instead of using this polyfill.
+ * @param promise The promise to suspend on. Once it resolves, the component will re-render with the resolved value.
+ * @returns {T | Error | Promise<void>} If the promise has not resolved, it will throw the promise, causing the component to suspend. If it has resolved successfully, it will return the result. If it has errored, it will throw the error.
+ * @see https://react.dev/reference/react/use
+ */
+export declare const useSuspenseResource: <T>(fetcher: () => Promise<T>) => T;
+/**
+ * Our polyfill is not as smart as React's `use` hook, so we need to manually uncache the resource after a certain timeout.
+ * You usually need this if you are calling parameters with your `useSuspenseResource` hook (eg. `useSuspenseResource(() => fetch('/api/data'))`).
+ * **Note:** For those using React 19, import the `use` hook from React instead of using this polyfill.
+ * @param fetcher The function that returns a promise to suspend on (usually an API call).
+ * @param timeout The time in milliseconds after which the resource will be uncached. Default is 1000ms, usually enough to avoid flickering.
+ * @see https://react.dev/reference/react/use
+ */
+export declare const uncacheSuspenseResource: (fetcher: () => Promise<unknown>, timeout?: number) => void;

package/dist/src/patterns/Loading/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Loading';
+export * from './LoadingSuspense';

package/dist/src/patterns/Loading/meta/Thumbnail.d.ts

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

package/dist/src/patterns/Loading/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/patterns/Shadow/Shadow.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { IressUnstyledProps } from '../../types';
+export interface IressShadowProps extends IressUnstyledProps {
+    /**
+     * Children to be rendered inside the shadow DOM
+     */
+    children?: ReactNode;
+    /**
+     * Optional array of font URLs to be included in the parent document head.
+     * By default it will include the default fonts from `@iress-oss/ids-tokens`
+     * (e.g., ['https://fonts.googleapis.com/css?family=Roboto']
+     */
+    fontFaceUrls?: string[];
+    /**
+     * If true, the Iress icon stylesheet will not be included in the shadow DOM and the head.
+     */
+    noIcons?: boolean;
+    /**
+     * Optional array of stylesheet contents to be included in the shadow DOM
+     * (e.g. { styleId: '.my-class { color: red; }' })
+     */
+    stylesheetContents?: Record<string, string>;
+    /**
+     * Optional array of stylesheet URLs to be included in the shadow DOM
+     * (e.g., ['https://example.com/style.css'])
+     */
+    stylesheetUrls?: string[];
+}
+/**
+ * This component allows you to encapsulate its children within a Shadow DOM.
+ * It automatically includes the IDS CSS and allows for additional stylesheets
+ * and font faces to be added either to the shadow DOM or the parent document head.
+ */
+export declare const IressShadow: import('react').ForwardRefExoticComponent<IressShadowProps & import('react').RefAttributes<ShadowRoot | null>>;

package/dist/src/patterns/Shadow/index.d.ts

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

package/dist/src/patterns/Shadow/meta/Thumbnail.d.ts

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

package/dist/src/patterns/Shadow/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/styled-system/css/css.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject } from '../types/index';
+
+type Styles = SystemStyleObject | undefined | null | false
+
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
+interface CssFunction {
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: CssRawFunction
+}
+
+export declare const css: CssFunction;

package/dist/src/styled-system/css/cva.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import type { RecipeCreatorFn } from '../types/recipe';
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariant, RecipeVariantProps } from '../types/recipe';

package/dist/src/styled-system/css/cx.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+type Argument = string | boolean | null | undefined
+
+/** Conditionally join classNames into a single string */
+export declare function cx(...args: Argument[]): string

package/dist/src/styled-system/css/index.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+export * from './css';
+export * from './cx';
+export * from './cva';
+export * from './sva';

package/dist/src/styled-system/css/sva.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import type { SlotRecipeCreatorFn } from '../types/recipe';
+
+export declare const sva: SlotRecipeCreatorFn

package/dist/src/styled-system/jsx/aspect-ratio.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { AspectRatioProperties } from '../patterns/aspect-ratio';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
+
+
+export declare const AspectRatio: FunctionComponent<AspectRatioProps>

package/dist/src/styled-system/jsx/bleed.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { BleedProperties } from '../patterns/bleed';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BleedProperties > {}
+
+
+export declare const Bleed: FunctionComponent<BleedProps>

package/dist/src/styled-system/jsx/box.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { BoxProperties } from '../patterns/box';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties > {}
+
+
+export declare const Box: FunctionComponent<BoxProps>

package/dist/src/styled-system/jsx/center.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CenterProperties } from '../patterns/center';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CenterProperties > {}
+
+
+export declare const Center: FunctionComponent<CenterProps>

package/dist/src/styled-system/jsx/circle.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CircleProperties } from '../patterns/circle';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CircleProperties > {}
+
+
+export declare const Circle: FunctionComponent<CircleProps>

package/dist/src/styled-system/jsx/container.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { ContainerProperties } from '../patterns/container';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof ContainerProperties > {}
+
+
+export declare const Container: FunctionComponent<ContainerProps>

package/dist/src/styled-system/jsx/cq.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CqProperties } from '../patterns/cq';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CqProps extends CqProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CqProperties > {}
+
+
+export declare const Cq: FunctionComponent<CqProps>

package/dist/src/styled-system/jsx/create-style-context.d.ts

@@ -0,0 +1,47 @@
+/* eslint-disable */
+import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
+import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
+import type { JsxFactoryOptions } from '../types/jsx';
+import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
+
+interface UnstyledProps {
+  unstyled?: boolean
+}
+
+type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
+interface SlotRecipeFn {
+  __type: any
+  __slot: string
+  (props?: any): any
+}
+type SlotRecipe = SvaFn | SlotRecipeFn
+
+type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
+
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
+type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+>
+
+type StyleContextConsumer<T extends ElementType> = ComponentType<
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+>
+
+export interface StyleContext<R extends SlotRecipe> {
+  withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
+  withProvider: <T extends ElementType>(
+    Component: T,
+    slot: InferSlot<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>>
+  ) => StyleContextProvider<T, R>
+  withContext: <T extends ElementType>(
+    Component: T,
+    slot: InferSlot<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>>
+  ) => StyleContextConsumer<T>
+}
+
+export declare function createStyleContext<R extends SlotRecipe>(recipe: R): StyleContext<R>

package/dist/src/styled-system/jsx/divider.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { DividerProperties } from '../patterns/divider';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties > {}
+
+
+export declare const Divider: FunctionComponent<DividerProps>

package/dist/src/styled-system/jsx/factory.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+import type { Styled } from '../types/jsx';
+export declare const styled: Styled

package/dist/src/styled-system/jsx/flex.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { FlexProperties } from '../patterns/flex';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface FlexProps extends FlexProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FlexProperties > {}
+
+
+export declare const Flex: FunctionComponent<FlexProps>