@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/Loader/Loader.mdx

@@ -0,0 +1,326 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as LoaderStories from './Loader.stories';
+import * as OverlayLoaderStories from './OverlayLoader.stories';
+
+<Meta title="Components/Loader" />
+
+# Loader
+
+The Loader components provide visual feedback to users when content is loading or an operation is in progress.
+Webiny offers two loader components:
+
+1. -  **Loader** - A standalone circular progress indicator.
+2. -  **OverlayLoader** - The OverlayLoader covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive. Please refer below for more examples.
+
+## Loader
+
+The Loader component displays a circular progress indicator that can be used to show loading states or progress of operations.
+
+<Canvas of={LoaderStories.Documentation} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LoaderExample = () => {
+    return (
+        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
+            <Loader
+                size="md"
+                variant="accent"
+                indeterminate={true}
+                text="Loading..."
+            />
+        </div>
+    );
+};
+
+export default LoaderExample;
+
+` } }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/Loader.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={LoaderStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LoaderExample = () => {
+    return (
+        <div className="wby-flex wby-flex-col wby-items-center wby-gap-4">
+            <Loader
+                size="md"
+                variant="accent"
+                indeterminate={true}
+                text="Loading..."
+            />
+        </div>
+    );
+};
+
+export default LoaderExample;
+```
+
+### Loader Sizes
+
+The Loader component supports four different sizes: xs, sm, md, and lg.
+
+<Canvas of={LoaderStories.ExtraSmall} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const ExtraSmallLoaderExample = () => (
+    <Loader size="xs" />
+);
+
+export default ExtraSmallLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Small} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const SmallLoaderExample = () => (
+    <Loader size="sm" />
+);
+
+export default SmallLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Medium} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const MediumLoaderExample = () => (
+    <Loader size="md" />
+);
+
+export default MediumLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Large} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LargeLoaderExample = () => (
+    <Loader size="lg" />
+);
+
+export default LargeLoaderExample;
+` } } />
+
+### Loader Variants
+
+The Loader component supports three different visual variants: accent, subtle, and negative.
+
+<Canvas of={LoaderStories.Accent} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const AccentLoaderExample = () => (
+    <Loader variant="accent" />
+);
+
+export default AccentLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Subtle} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const SubtleLoaderExample = () => (
+    <Loader variant="subtle" />
+);
+
+export default SubtleLoaderExample;
+` } } />
+
+<Canvas of={LoaderStories.Negative} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const NegativeLoaderExample = () => (
+    <div className="wby-bg-primary wby-p-md wby-rounded-md">
+        <Loader variant="negative" />
+    </div>
+);
+
+export default NegativeLoaderExample;
+` } } />
+
+### Controlled Progress
+
+You can use the Loader component to display determinate progress by setting the `indeterminate` prop to `false` and providing a `value`.
+
+<Canvas of={LoaderStories.WithControlledValue} source={ { code: `
+import React, { useState, useEffect } from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const ControlledProgressExample = () => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setValue((prevValue = 0) => {
+                if (prevValue === 100) {
+                    return prevValue;
+                }
+                return prevValue + 5;
+            });
+        }, 50);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <Loader
+            value={value}
+            indeterminate={false}
+            text={"Loading " + value + "%"}
+        />
+    );
+};
+
+export default ControlledProgressExample;
+` } } />
+
+### Loader with Text
+
+You can add descriptive text below the loader using the `text` prop.
+
+<Canvas of={LoaderStories.WithText} source={ { code: `
+import React from "react";
+import { Loader } from "@webiny/admin-ui";
+
+const LoaderWithTextExample = () => (
+    <Loader text="Loading..." />
+);
+
+export default LoaderWithTextExample;
+` } } />
+
+## OverlayLoader
+
+The OverlayLoader component displays a loader on top of its parent container with a semi-transparent overlay. It's useful for indicating loading states for specific sections of your UI.
+
+<Canvas of={OverlayLoaderStories.Documentation} source={ { code: `
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const OverlayLoaderExample = () => {
+    return (
+        <div className="wby-relative wby-h-64 wby-w-full wby-bg-neutral-light wby-rounded-md wby-p-4">
+            <OverlayLoader
+                size="lg"
+                variant="accent"
+                text="Loading content..."
+            />
+            <div className="wby-h-full wby-flex wby-items-center wby-justify-center">
+                <p className="wby-text-neutral-strong">Content is loading...</p>
+            </div>
+        </div>
+    );
+};
+
+export default OverlayLoaderExample;
+
+` } }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Loader/OverlayLoader.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={OverlayLoaderStories.Documentation} />
+
+```tsx
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const DefaultOverlayLoaderExample = () => (
+    <div>
+        <OverlayLoader />
+        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
+    </div>
+);
+
+export default DefaultOverlayLoaderExample;
+```
+
+### Default OverlayLoader
+
+<Canvas of={OverlayLoaderStories.Default} source={ { code: `
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const DefaultOverlayLoaderExample = () => (
+    <div>
+        <OverlayLoader />
+        The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
+    </div>
+);
+
+export default DefaultOverlayLoaderExample;
+` } } />
+
+### OverlayLoader with Text
+
+<Canvas of={OverlayLoaderStories.CircularProgressWithText} source={ { code: `
+import React from "react";
+import { OverlayLoader } from "@webiny/admin-ui";
+
+const OverlayLoaderWithTextExample = () => (
+    <div>
+        <OverlayLoader text="Loading..." />
+         The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.
+    </div>
+);
+
+export default OverlayLoaderWithTextExample;
+` } } />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/loader/construction.png" alt="Construction"/>
+
+### Style
+<img src="/images/storybook/loader/style.png" alt="Style"/>
+
+### Type
+
+A **determinate** circular loader visually represents progress with a circular arc that fills proportionally based on the completed percentage, providing users with a clear indication of task completion.
+
+An **indeterminate loader** does not display exact progress but continuously animates, signaling that a process is ongoing without a known completion time.
+
+<img src="/images/storybook/loader/type.png" alt="Type"/>
+
+### Size
+<img src="/images/storybook/loader/size.png" alt="Size"/>
+
+### Background Overlay
+<img src="/images/storybook/loader/background-overlay.png" alt="Background Overlay"/>
+
+## Usage
+
+<img src="/images/storybook/loader/usage-1.png" alt="Usage"/>
+
+<img src="/images/storybook/loader/usage-2.png" alt="Usage"/>

package/Loader/Loader.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader } from "./Loader";
+declare const meta: Meta<typeof Loader>;
+export default meta;
+type Story = StoryObj<typeof Loader>;
+export declare const Documentation: Story;
+export declare const Default: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Accent: Story;
+export declare const Subtle: Story;
+export declare const Negative: Story;
+export declare const WithControlledValue: Story;
+export declare const WithText: Story;

package/Loader/Loader.stories.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from "react";
+import { Loader } from "./Loader";
+const meta = {
+  title: "Components/Loader",
+  component: Loader,
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Documentation = {
+  args: {
+    size: "md",
+    variant: "accent",
+    indeterminate: true,
+    value: 66,
+    min: 0,
+    max: 100,
+    text: "Loading...",
+    className: undefined
+  },
+  argTypes: {
+    size: {
+      description: "Size of the loader",
+      control: "select",
+      options: ["xs", "sm", "md", "lg"]
+    },
+    variant: {
+      description: "Visual style variant of the loader",
+      control: "select",
+      options: ["accent", "subtle", "negative"]
+    },
+    indeterminate: {
+      description: "Whether the loader should show indeterminate progress",
+      control: "boolean"
+    },
+    value: {
+      description: "Current progress value (when not indeterminate)",
+      control: {
+        type: "number",
+        min: 0,
+        max: 100
+      }
+    },
+    min: {
+      description: "Minimum value for progress calculation",
+      control: "number"
+    },
+    max: {
+      description: "Maximum value for progress calculation",
+      control: "number"
+    },
+    text: {
+      description: "Optional text to display below the loader",
+      control: "text"
+    },
+    className: {
+      description: "Additional CSS class names. You can pass multiple class names, separated by commas or spaces.",
+      control: "none"
+    }
+  }
+};
+export const Default = {};
+export const ExtraSmall = {
+  args: {
+    size: "xs"
+  }
+};
+export const Small = {
+  args: {
+    size: "sm"
+  }
+};
+export const Medium = {
+  args: {
+    size: "md"
+  }
+};
+export const Large = {
+  args: {
+    size: "lg"
+  }
+};
+export const Accent = {
+  args: {
+    variant: "accent"
+  }
+};
+export const Subtle = {
+  args: {
+    variant: "subtle"
+  }
+};
+export const Negative = {
+  args: {
+    variant: "negative"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-primary wby-p-md wby-rounded-md"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const WithControlledValue = {
+  args: {
+    value: 0,
+    indeterminate: false
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setValue((prevValue = 0) => {
+          if (prevValue === 100) {
+            return prevValue;
+          }
+          return prevValue + 5;
+        });
+      }, 50);
+      return () => clearInterval(interval);
+    }, []);
+    return /*#__PURE__*/React.createElement(Loader, Object.assign({}, args, {
+      value: value,
+      text: `Loading ${value}%`
+    }));
+  }
+};
+export const WithText = {
+  args: {
+    text: "Loading..."
+  }
+};
+
+//# sourceMappingURL=Loader.stories.js.map

package/Loader/Loader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","Loader","meta","title","component","parameters","layout","Documentation","args","size","variant","indeterminate","value","min","max","text","className","undefined","argTypes","description","control","options","type","Default","ExtraSmall","Small","Medium","Large","Accent","Subtle","Negative","decorators","Story","createElement","WithControlledValue","render","setValue","interval","setInterval","prevValue","clearInterval","Object","assign","WithText"],"sources":["Loader.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Loader } from \"./Loader\";\n\nconst meta: Meta<typeof Loader> = {\n    title: \"Components/Loader\",\n    component: Loader,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Loader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\",\n            control: \"none\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const ExtraSmall: Story = {\n    args: {\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        size: \"lg\"\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        variant: \"accent\"\n    }\n};\n\nexport const Subtle: Story = {\n    args: {\n        variant: \"subtle\"\n    }\n};\n\nexport const Negative: Story = {\n    args: {\n        variant: \"negative\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-primary wby-p-md wby-rounded-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        value: 0,\n        indeterminate: false\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n\n        useEffect(() => {\n            const interval = setInterval(() => {\n                setValue((prevValue = 0) => {\n                    if (prevValue === 100) {\n                        return prevValue;\n                    }\n                    return prevValue + 5;\n                });\n            }, 50);\n\n            return () => clearInterval(interval);\n        }, []);\n\n        return <Loader {...args} value={value} text={`Loading ${value}%`} />;\n    }\n};\n\nexport const WithText: Story = {\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Loader/OverlayLoader.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { LoaderProps } from "./Loader";
+type OverlayLoaderProps = LoaderProps;
+declare const OverlayLoader: (({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
+    original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
+        original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element) & {
+        original: ({ className, size, ...props }: OverlayLoaderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { OverlayLoader, type OverlayLoaderProps };

package/Loader/OverlayLoader.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Loader } from "./Loader";
+import { cn, makeDecoratable } from "../utils";
+const DecoratableOverlayLoader = ({
+  className,
+  size = "lg",
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30", className)
+  }, /*#__PURE__*/React.createElement(Loader, Object.assign({}, props, {
+    size: size
+  })));
+};
+const OverlayLoader = makeDecoratable("OverlayLoader", DecoratableOverlayLoader);
+export { OverlayLoader };
+
+//# sourceMappingURL=OverlayLoader.js.map

package/Loader/OverlayLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Loader","cn","makeDecoratable","DecoratableOverlayLoader","className","size","props","createElement","Object","assign","OverlayLoader"],"sources":["OverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport type { LoaderProps } from \"./Loader\";\nimport { Loader } from \"./Loader\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ntype OverlayLoaderProps = LoaderProps;\n\nconst DecoratableOverlayLoader = ({ className, size = \"lg\", ...props }: OverlayLoaderProps) => {\n    return (\n        <div\n            className={cn(\n                \"wby-w-full wby-h-full wby-absolute wby-inset-0 wby-bg-neutral-base/80 wby-flex wby-items-center wby-justify-center wby-z-30\",\n                className\n            )}\n        >\n            <Loader {...props} size={size} />\n        </div>\n    );\n};\n\nconst OverlayLoader = makeDecoratable(\"OverlayLoader\", DecoratableOverlayLoader);\n\nexport { OverlayLoader, type OverlayLoaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,eAAe;AAI5B,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,SAAS;EAAEC,IAAI,GAAG,IAAI;EAAE,GAAGC;AAA0B,CAAC,KAAK;EAC3F,oBACIP,KAAA,CAAAQ,aAAA;IACIH,SAAS,EAAEH,EAAE,CACT,6HAA6H,EAC7HG,SACJ;EAAE,gBAEFL,KAAA,CAAAQ,aAAA,CAACP,MAAM,EAAAQ,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAED,IAAI,EAAEA;EAAK,EAAE,CAC/B,CAAC;AAEd,CAAC;AAED,MAAMK,aAAa,GAAGR,eAAe,CAAC,eAAe,EAAEC,wBAAwB,CAAC;AAEhF,SAASO,aAAa","ignoreList":[]}

package/Loader/OverlayLoader.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { OverlayLoader } from "./OverlayLoader";
+declare const meta: Meta<typeof OverlayLoader>;
+export default meta;
+type Story = StoryObj<typeof OverlayLoader>;
+export declare const Documentation: Story;
+export declare const Default: Story;
+export declare const CircularProgressWithText: Story;

package/Loader/OverlayLoader.stories.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { OverlayLoader } from "./OverlayLoader";
+const meta = {
+  title: "Components/Overlay Loader",
+  component: OverlayLoader,
+  parameters: {
+    layout: "padded"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Story, null), "The OverlayLoader component covers its parent container with a semi-transparent overlay, typically used to indicate a loading state while keeping the background content visible but inactive.")]
+};
+export default meta;
+export const Documentation = {
+  args: {
+    size: "lg",
+    variant: "accent",
+    indeterminate: true,
+    value: 66,
+    min: 0,
+    max: 100,
+    text: "Loading...",
+    className: undefined
+  },
+  argTypes: {
+    size: {
+      description: "Size of the loader",
+      control: "select",
+      options: ["xs", "sm", "md", "lg"]
+    },
+    variant: {
+      description: "Visual style variant of the loader",
+      control: "select",
+      options: ["accent", "subtle", "negative"]
+    },
+    indeterminate: {
+      description: "Whether the loader should show indeterminate progress",
+      control: "boolean"
+    },
+    value: {
+      description: "Current progress value (when not indeterminate)",
+      control: {
+        type: "number",
+        min: 0,
+        max: 100
+      }
+    },
+    min: {
+      description: "Minimum value for progress calculation",
+      control: "number"
+    },
+    max: {
+      description: "Maximum value for progress calculation",
+      control: "number"
+    },
+    text: {
+      description: "Optional text to display below the loader",
+      control: "text"
+    },
+    className: {
+      description: "Additional CSS class names. You can pass multiple class names, separated by commas or spaces.",
+      control: "none"
+    }
+  }
+};
+export const Default = {};
+export const CircularProgressWithText = {
+  name: "With text",
+  args: {
+    text: "Loading..."
+  }
+};
+
+//# sourceMappingURL=OverlayLoader.stories.js.map

package/Loader/OverlayLoader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","OverlayLoader","meta","title","component","parameters","layout","decorators","Story","createElement","Documentation","args","size","variant","indeterminate","value","min","max","text","className","undefined","argTypes","description","control","options","type","Default","CircularProgressWithText","name"],"sources":["OverlayLoader.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { OverlayLoader } from \"./OverlayLoader\";\n\nconst meta: Meta<typeof OverlayLoader> = {\n    title: \"Components/Overlay Loader\",\n    component: OverlayLoader,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <div>\n                <Story />\n                The OverlayLoader component covers its parent container with a semi-transparent\n                overlay, typically used to indicate a loading state while keeping the background\n                content visible but inactive.\n            </div>\n        )\n    ]\n};\n\nexport default meta;\ntype Story = StoryObj<typeof OverlayLoader>;\n\nexport const Documentation: Story = {\n    args: {\n        size: \"lg\",\n        variant: \"accent\",\n        indeterminate: true,\n        value: 66,\n        min: 0,\n        max: 100,\n        text: \"Loading...\",\n        className: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the loader\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\"]\n        },\n        variant: {\n            description: \"Visual style variant of the loader\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\", \"negative\"]\n        },\n        indeterminate: {\n            description: \"Whether the loader should show indeterminate progress\",\n            control: \"boolean\"\n        },\n        value: {\n            description: \"Current progress value (when not indeterminate)\",\n            control: { type: \"number\", min: 0, max: 100 }\n        },\n        min: {\n            description: \"Minimum value for progress calculation\",\n            control: \"number\"\n        },\n        max: {\n            description: \"Maximum value for progress calculation\",\n            control: \"number\"\n        },\n        text: {\n            description: \"Optional text to display below the loader\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names, separated by commas or spaces.\",\n            control: \"none\"\n        }\n    }\n};\n\nexport const Default: Story = {};\n\nexport const CircularProgressWithText: Story = {\n    name: \"With text\",\n    args: {\n        text: \"Loading...\"\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa;AAEtB,MAAMC,IAAgC,GAAG;EACrCC,KAAK,EAAE,2BAA2B;EAClCC,SAAS,EAAEH,aAAa;EACxBI,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDR,KAAA,CAAAS,aAAA,2BACIT,KAAA,CAAAS,aAAA,CAACD,KAAK,MAAE,CAAC,kMAIR,CACR;AAET,CAAC;AAED,eAAeN,IAAI;AAGnB,OAAO,MAAMQ,aAAoB,GAAG;EAChCC,IAAI,EAAE;IACFC,IAAI,EAAE,IAAI;IACVC,OAAO,EAAE,QAAQ;IACjBC,aAAa,EAAE,IAAI;IACnBC,KAAK,EAAE,EAAE;IACTC,GAAG,EAAE,CAAC;IACNC,GAAG,EAAE,GAAG;IACRC,IAAI,EAAE,YAAY;IAClBC,SAAS,EAAEC;EACf,CAAC;EACDC,QAAQ,EAAE;IACNT,IAAI,EAAE;MACFU,WAAW,EAAE,oBAAoB;MACjCC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACpC,CAAC;IACDX,OAAO,EAAE;MACLS,WAAW,EAAE,oCAAoC;MACjDC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU;IAC5C,CAAC;IACDV,aAAa,EAAE;MACXQ,WAAW,EAAE,uDAAuD;MACpEC,OAAO,EAAE;IACb,CAAC;IACDR,KAAK,EAAE;MACHO,WAAW,EAAE,iDAAiD;MAC9DC,OAAO,EAAE;QAAEE,IAAI,EAAE,QAAQ;QAAET,GAAG,EAAE,CAAC;QAAEC,GAAG,EAAE;MAAI;IAChD,CAAC;IACDD,GAAG,EAAE;MACDM,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDN,GAAG,EAAE;MACDK,WAAW,EAAE,wCAAwC;MACrDC,OAAO,EAAE;IACb,CAAC;IACDL,IAAI,EAAE;MACFI,WAAW,EAAE,2CAA2C;MACxDC,OAAO,EAAE;IACb,CAAC;IACDJ,SAAS,EAAE;MACPG,WAAW,EACP,+FAA+F;MACnGC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMG,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,wBAA+B,GAAG;EAC3CC,IAAI,EAAE,WAAW;EACjBjB,IAAI,EAAE;IACFO,IAAI,EAAE;EACV;AACJ,CAAC","ignoreList":[]}

package/Loader/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Loader";
+export * from "./OverlayLoader";

package/Loader/index.js

@@ -0,0 +1,4 @@
+export * from "./Loader";
+export * from "./OverlayLoader";
+
+//# sourceMappingURL=index.js.map

package/Loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Loader\";\nexport * from \"./OverlayLoader\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/MultiAutoComplete/MultiAutoComplete.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { MultiAutoCompletePrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
+type MultiAutoCompleteProps = MultiAutoCompletePrimitiveProps & FormComponentProps;
+declare const MultiAutoComplete: (({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
+    original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, ...props }: MultiAutoCompleteProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { MultiAutoComplete };