@webiny/admin-ui 6.4.5 → 6.6.0-alpha.0

package/Skeleton/Skeleton.d.ts

@@ -2,25 +2,27 @@ import React from "react";
 import { type VariantProps } from "../utils.js";
 declare const skeletonVariants: (props?: ({
     type?: "area" | "text" | "thumbnail" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | "3xl" | null | undefined;
+    size?: "3xl" | "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | null | undefined;
+    shade?: "dark" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
-declare const Skeleton: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-    original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+declare const DecoratableSkeleton: ({ size, type, shade, className, ...props }: SkeletonProps) => React.JSX.Element;
+declare const Skeleton: typeof DecoratableSkeleton & {
+    original: typeof DecoratableSkeleton;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+    original: typeof DecoratableSkeleton & {
+        original: typeof DecoratableSkeleton;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
-        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableSkeleton & {
+        original: typeof DecoratableSkeleton;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import react from "react";
 import { cn, cva, makeDecoratable } from "../utils.js";
-const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
+const skeletonVariants = cva("rounded-sm", {
     variants: {
         type: {
             text: "w-full",
@@ -15,6 +15,10 @@ const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
             xl: "h-xl",
             xxl: "h-[40px]",
             "3xl": "h-xxl"
+        },
+        shade: {
+            dark: "animate-skeleton-pulse",
+            light: "animate-skeleton-pulse-light"
         }
     },
     compoundVariants: [
@@ -31,13 +35,15 @@ const skeletonVariants = cva("animate-skeleton-pulse rounded-sm", {
     ],
     defaultVariants: {
         type: "area",
-        size: "lg"
+        size: "lg",
+        shade: "dark"
     }
 });
-const DecoratableSkeleton = ({ size, type, className, ...props })=>/*#__PURE__*/ react.createElement("div", {
+const DecoratableSkeleton = ({ size, type, shade, className, ...props })=>/*#__PURE__*/ react.createElement("div", {
         className: cn(skeletonVariants({
             size,
-            type
+            type,
+            shade
         }), className),
         ...props
     });

package/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton/Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"animate-skeleton-pulse rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"names":["skeletonVariants","cva","DecoratableSkeleton","size","type","className","props","cn","Skeleton","makeDecoratable"],"mappings":";;AAGA,MAAMA,mBAAmBC,IAAI,qCAAqC;IAC9D,UAAU;QACN,MAAM;YACF,MAAM;YACN,WAAW;YACX,MAAM;QACV;QACA,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,OAAO;QACX;IACJ;IACA,kBAAkB;QAEd;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;QACA;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;KACH;IACD,iBAAiB;QACb,MAAM;QACN,MAAM;IACV;AACJ;AAKA,MAAMC,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,OAAsB,GACpE,WAAP,GAAO,oBAAC;QAAI,WAAWC,GAAGP,iBAAiB;YAAEG;YAAMC;QAAK,IAAIC;QAAa,GAAGC,KAAK;;AAGrF,MAAME,WAAWC,gBAAgB,YAAYP"}
+{"version":3,"file":"Skeleton/Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils.js\";\n\nconst skeletonVariants = cva(\"rounded-sm\", {\n    variants: {\n        type: {\n            text: \"w-full\",\n            thumbnail: \"aspect-square\",\n            area: \"size-full\"\n        },\n        size: {\n            xs: \"h-sm\",\n            sm: \"h-sm-extra\",\n            md: \"h-md\",\n            lg: \"h-lg\",\n            xl: \"h-xl\",\n            xxl: \"h-[40px]\",\n            \"3xl\": \"h-xxl\"\n        },\n        shade: {\n            dark: \"animate-skeleton-pulse\",\n            light: \"animate-skeleton-pulse-light\"\n        }\n    },\n    compoundVariants: [\n        // The following compound variants are not supported by the current version of the design system.\n        {\n            type: \"thumbnail\",\n            size: \"xs\",\n            class: \"hidden!\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"hidden!\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\",\n        shade: \"dark\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst DecoratableSkeleton = ({ size, type, shade, className, ...props }: SkeletonProps) => {\n    return <div className={cn(skeletonVariants({ size, type, shade }), className)} {...props} />;\n};\n\nconst Skeleton = makeDecoratable(\"Skeleton\", DecoratableSkeleton);\n\nexport { Skeleton, type SkeletonProps };\n"],"names":["skeletonVariants","cva","DecoratableSkeleton","size","type","shade","className","props","cn","Skeleton","makeDecoratable"],"mappings":";;AAGA,MAAMA,mBAAmBC,IAAI,cAAc;IACvC,UAAU;QACN,MAAM;YACF,MAAM;YACN,WAAW;YACX,MAAM;QACV;QACA,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;YACL,OAAO;QACX;QACA,OAAO;YACH,MAAM;YACN,OAAO;QACX;IACJ;IACA,kBAAkB;QAEd;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;QACA;YACI,MAAM;YACN,MAAM;YACN,OAAO;QACX;KACH;IACD,iBAAiB;QACb,MAAM;QACN,MAAM;QACN,OAAO;IACX;AACJ;AAKA,MAAMC,sBAAsB,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,OAAsB,GAC3E,WAAP,GAAO,oBAAC;QAAI,WAAWC,GAAGR,iBAAiB;YAAEG;YAAMC;YAAMC;QAAM,IAAIC;QAAa,GAAGC,KAAK;;AAG5F,MAAME,WAAWC,gBAAgB,YAAYR"}

package/Skeleton/Skeleton.stories.d.ts

@@ -15,4 +15,6 @@ export declare const Large: Story;
 export declare const ExtraLarge: Story;
 export declare const DoubleExtraLarge: Story;
 export declare const TripleExtraLarge: Story;
+export declare const Dark: Story;
+export declare const Light: Story;
 export declare const Documentation: Story;

package/Skeleton/Skeleton.stories.js

@@ -26,6 +26,13 @@ const meta = {
                 "xxl",
                 "3xl"
             ]
+        },
+        shade: {
+            control: "select",
+            options: [
+                "dark",
+                "light"
+            ]
         }
     }
 };
@@ -98,10 +105,21 @@ const TripleExtraLarge = {
         size: "3xl"
     }
 };
+const Dark = {
+    args: {
+        shade: "dark"
+    }
+};
+const Light = {
+    args: {
+        shade: "light"
+    }
+};
 const Documentation = {
     args: {
         type: "area",
-        size: "lg"
+        size: "lg",
+        shade: "dark"
     },
     argTypes: {
         type: {
@@ -125,10 +143,18 @@ const Documentation = {
                 "xxl",
                 "3xl"
             ]
+        },
+        shade: {
+            control: "select",
+            description: "The shade of the skeleton",
+            options: [
+                "dark",
+                "light"
+            ]
         }
     }
 };
 export default Skeleton_stories;
-export { Area, Default, Documentation, DoubleExtraLarge, ExtraLarge, ExtraSmall, Large, Medium, MultipleAreas, Small, Text, Thumbnail, TripleExtraLarge };
+export { Area, Dark, Default, Documentation, DoubleExtraLarge, ExtraLarge, ExtraSmall, Large, Light, Medium, MultipleAreas, Small, Text, Thumbnail, TripleExtraLarge };
 
 //# sourceMappingURL=Skeleton.stories.js.map

package/Skeleton/Skeleton.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton/Skeleton.stories.js","sources":["../../src/Skeleton/Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\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 ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        }\n    }\n};\n"],"names":["meta","Skeleton","Default","Text","Thumbnail","Area","MultipleAreas","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ;AAEA,yBAAeD;AAIR,MAAME,UAAiB,CAAC;AAExB,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;QACN,WAAW;IACf;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAAC;YAAI,WAAU;yBACX,oBAACL,UAAQA;YAAC,MAAK;YAAO,WAAW;0BACjC,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAW;2BAErC,oBAAC,2BACG,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAU;;AAIhD;AAEO,MAAMM,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;IACV;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;IACJ;AACJ"}
+{"version":3,"file":"Skeleton/Skeleton.stories.js","sources":["../../src/Skeleton/Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Skeleton } from \"./Skeleton.js\";\n\nconst meta: Meta<typeof Skeleton> = {\n    title: \"Components/Skeleton\",\n    component: Skeleton,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        },\n        shade: {\n            control: \"select\",\n            options: [\"dark\", \"light\"]\n        }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Skeleton>;\n\nexport const Default: Story = {};\n\nexport const Text: Story = {\n    args: {\n        type: \"text\"\n    }\n};\n\nexport const Thumbnail: Story = {\n    args: {\n        type: \"thumbnail\"\n    }\n};\n\nexport const Area: Story = {\n    args: {\n        type: \"area\",\n        className: \"w-1/2 h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <div className=\"flex flex-col gap-md\">\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n                <Skeleton type=\"area\" className={\"w-32 h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"w-32 h-full\" />\n            </div>\n        </div>\n    )\n};\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 ExtraLarge: Story = {\n    args: {\n        size: \"xl\"\n    }\n};\n\nexport const DoubleExtraLarge: Story = {\n    args: {\n        size: \"xxl\"\n    }\n};\n\nexport const TripleExtraLarge: Story = {\n    args: {\n        size: \"3xl\"\n    }\n};\n\nexport const Dark: Story = {\n    args: {\n        shade: \"dark\"\n    }\n};\n\nexport const Light: Story = {\n    args: {\n        shade: \"light\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"area\",\n        size: \"lg\",\n        shade: \"dark\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            description: \"The type of skeleton to display\",\n            options: [\"text\", \"thumbnail\", \"area\"]\n        },\n        size: {\n            control: \"select\",\n            description: \"The size of the skeleton\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\", \"3xl\"]\n        },\n        shade: {\n            control: \"select\",\n            description: \"The shade of the skeleton\",\n            options: [\"dark\", \"light\"]\n        }\n    }\n};\n"],"names":["meta","Skeleton","Default","Text","Thumbnail","Area","MultipleAreas","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Dark","Light","Documentation"],"mappings":";;AAIA,MAAMA,OAA8B;IAChC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;QACA,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAQ;aAAQ;QAC9B;IACJ;AACJ;AAEA,yBAAeD;AAIR,MAAME,UAAiB,CAAC;AAExB,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,MAAM;QACN,WAAW;IACf;AACJ;AAEO,MAAMC,gBAAuB;IAChC,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAAC;YAAI,WAAU;yBACX,oBAACL,UAAQA;YAAC,MAAK;YAAO,WAAW;0BACjC,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAW;2BAErC,oBAAC,2BACG,oBAACA,UAAQA;YAAC,MAAK;YAAO,WAAU;;AAIhD;AAEO,MAAMM,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,MAAM;IACV;AACJ;AAEO,MAAMC,OAAc;IACvB,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,MAAM;QACN,MAAM;QACN,OAAO;IACX;IACA,UAAU;QACN,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;gBAAa;aAAO;QAC1C;QACA,MAAM;YACF,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;gBAAO;aAAM;QACzD;QACA,OAAO;YACH,SAAS;YACT,aAAa;YACb,SAAS;gBAAC;gBAAQ;aAAQ;QAC9B;IACJ;AACJ"}

package/Slider/Slider.d.ts

@@ -7,21 +7,22 @@ import type { FormComponentProps } from "../FormComponent/index.js";
 type SliderProps = FormComponentProps & SliderPrimitiveProps & {
     labelPosition?: "top" | "side";
 };
-declare const Slider: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-    original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+declare const DecoratableSlider: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+declare const Slider: typeof DecoratableSlider & {
+    original: typeof DecoratableSlider;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    original: typeof DecoratableSlider & {
+        original: typeof DecoratableSlider;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
-        original: ({ description, note, hint, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSlider & {
+        original: typeof DecoratableSlider;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/SteppedProgress/SteppedProgress.d.ts

@@ -3,21 +3,22 @@ import type { ProgressItemParams } from "./domains/index.js";
 interface SteppedProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     items: ProgressItemParams[];
 }
-declare const SteppedProgress: (({ items, ...props }: SteppedProgressProps) => React.JSX.Element) & {
-    original: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+declare const DecoratableSteppedProgress: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+declare const SteppedProgress: typeof DecoratableSteppedProgress & {
+    original: typeof DecoratableSteppedProgress;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ items, ...props }: SteppedProgressProps) => React.JSX.Element) & {
-        original: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+    original: typeof DecoratableSteppedProgress & {
+        original: typeof DecoratableSteppedProgress;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ items, ...props }: SteppedProgressProps) => React.JSX.Element) & {
-        original: ({ items, ...props }: SteppedProgressProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSteppedProgress & {
+        original: typeof DecoratableSteppedProgress;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/SteppedProgress/SteppedProgressItem.d.ts

@@ -1,21 +1,22 @@
 import React from "react";
 import { type ProgressItemFormatted } from "./domains/index.js";
 type SteppedProgressItemProps = React.HTMLAttributes<HTMLDivElement> & ProgressItemFormatted;
-declare const SteppedProgressItem: (({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element) & {
-    original: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+declare const DecoratableSteppedProgressItem: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+declare const SteppedProgressItem: typeof DecoratableSteppedProgressItem & {
+    original: typeof DecoratableSteppedProgressItem;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element) & {
-        original: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+    original: typeof DecoratableSteppedProgressItem & {
+        original: typeof DecoratableSteppedProgressItem;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element) & {
-        original: ({ label, state, errored, disabled, className, ...props }: SteppedProgressItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSteppedProgressItem & {
+        original: typeof DecoratableSteppedProgressItem;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Switch/Switch.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { SwitchPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type SwitchProps = SwitchPrimitiveProps & FormComponentProps;
-declare const Switch: (({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
-    original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+declare const DecoratableSwitch: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+declare const Switch: typeof DecoratableSwitch & {
+    original: typeof DecoratableSwitch;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
-        original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+    original: typeof DecoratableSwitch & {
+        original: typeof DecoratableSwitch;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
-        original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSwitch & {
+        original: typeof DecoratableSwitch;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Switch/primitives/SwitchPrimitive.d.ts

@@ -14,21 +14,25 @@ type SwitchPrimitiveProps = Omit<SwitchPrimitives.SwitchProps, "defaultChecked"
 type SwitchPrimitivVm = {
     item?: SwitchItemFormatted;
 };
-declare const SwitchPrimitive: ((props: SwitchPrimitiveProps) => React.JSX.Element | null) & {
-    original: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+/**
+ * Switch
+ */
+declare const DecoratableSwitchPrimitive: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+declare const SwitchPrimitive: typeof DecoratableSwitchPrimitive & {
+    original: typeof DecoratableSwitchPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SwitchPrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+    original: typeof DecoratableSwitchPrimitive & {
+        original: typeof DecoratableSwitchPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SwitchPrimitiveProps) => React.JSX.Element | null) & {
-        original: (props: SwitchPrimitiveProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableSwitchPrimitive & {
+        original: typeof DecoratableSwitchPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Table/Table.d.ts

@@ -1,20 +1,22 @@
 import * as React from "react";
 import { type VariantProps } from "../utils.js";
+import { Body, Caption, Cell, Direction, Footer, Head, Header, Resizer, Row } from "../Table/components/index.js";
 declare const tableVariants: (props?: ({
     bordered?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
     sticky?: boolean;
 }
-declare const Table: (({ className, bordered, sticky, ...props }: TableProps) => React.JSX.Element) & {
-    Body: ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
-    Caption: ({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) => React.JSX.Element;
-    Cell: ({ className, truncate, ...props }: import("~/Table/components/index.js").CellProps) => React.JSX.Element;
-    Direction: ({ className, direction }: import("~/Table/components/index.js").DirectionProps) => React.JSX.Element | null;
-    Footer: ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
-    Head: ({ className, children, truncate, ...props }: import("~/Table/components/index.js").HeadProps) => React.JSX.Element;
-    Header: ({ className, sticky, ...props }: import("~/Table/components/index.js").HeaderProps) => React.JSX.Element;
-    Resizer: ({ className, isResizing, ...props }: import("~/Table/components/index.js").ResizerProps) => React.JSX.Element;
-    Row: ({ className, selected, ...props }: import("~/Table/components/index.js").RowProps) => React.JSX.Element;
+declare const BaseTable: ({ className, bordered, sticky, ...props }: TableProps) => React.JSX.Element;
+declare const Table: typeof BaseTable & {
+    Body: typeof Body;
+    Caption: typeof Caption;
+    Cell: typeof Cell;
+    Direction: typeof Direction;
+    Footer: typeof Footer;
+    Head: typeof Head;
+    Header: typeof Header;
+    Resizer: typeof Resizer;
+    Row: typeof Row;
 };
 export { Table, type TableProps };

package/Table/components/Direction.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const directionVariants: (props?: ({
-    direction?: "desc" | "asc" | null | undefined;
+    direction?: "asc" | "desc" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface DirectionProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof directionVariants> {
 }

package/Tabs/Tabs.d.ts

@@ -7,22 +7,24 @@ interface TabsProps extends Omit<TabsPrimitive.TabsProps, "children"> {
     size?: VariantProps<typeof tabListVariants>["size"];
     spacing?: VariantProps<typeof tabListVariants>["spacing"];
     separator?: VariantProps<typeof tabListVariants>["separator"];
+    loading?: boolean;
 }
-declare const Tabs: (({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
-    original: ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+declare const DecoratableTabs: ({ defaultValue: initialValue, size, spacing, separator, loading, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+declare const Tabs: typeof DecoratableTabs & {
+    original: typeof DecoratableTabs;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
-        original: ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+    original: typeof DecoratableTabs & {
+        original: typeof DecoratableTabs;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
-        original: ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTabs & {
+        original: typeof DecoratableTabs;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tabs/Tabs.js

@@ -3,7 +3,7 @@ import { Tabs } from "radix-ui";
 import { makeDecoratable, withStaticProps } from "../utils.js";
 import { Content, List, Tab, TabsContext, Trigger } from "./components/index.js";
 const Root = Tabs.Root;
-const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props })=>{
+const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, loading, tabs: tabComponents, ...props })=>{
     const [tabs, setTabs] = useState([]);
     const defaultValue = useMemo(()=>initialValue || tabComponents.find((tab)=>!tab.props.disabled && false !== tab.props.visible)?.props.value, [
         initialValue,
@@ -19,6 +19,7 @@ const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator,
                 disabled: tab.disabled,
                 icon: tab.icon,
                 key: tab.id,
+                loading: loading,
                 size: size,
                 text: tab.trigger,
                 value: tab.value,
@@ -26,7 +27,9 @@ const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator,
             }))), [
         tabs,
         size,
-        spacing
+        spacing,
+        separator,
+        loading
     ]);
     const contents = useMemo(()=>tabs.map((tab)=>/*#__PURE__*/ react.createElement(Content, {
                 key: tab.id,

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps, tabListVariants } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(\n        () => (\n            <List\n                key={tabs.map(tab => tab.id).join(\";\")}\n                size={size}\n                spacing={spacing}\n                separator={separator}\n            >\n                {tabs.map(tab => (\n                    <Trigger\n                        data-testid={tab[\"data-testid\"]}\n                        disabled={tab.disabled}\n                        icon={tab.icon}\n                        key={tab.id}\n                        size={size}\n                        text={tab.trigger}\n                        value={tab.value}\n                        visible={tab.visible}\n                    />\n                ))}\n            </List>\n        ),\n        [tabs, size, spacing]\n    );\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","List","Trigger","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAS/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACT,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAErBV,gBACAI,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACX;QAAcI;KAAc;IAEhC,MAAMQ,WAAWF,QACb,kBACI,oBAACG,MAAIA;YACD,KAAKP,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;YAClC,MAAMV;YACN,SAASC;YACT,WAAWC;WAEVG,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACN,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,MAAMV;gBACN,MAAMU,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;kBAKpC;QAACL;QAAML;QAAMC;KAAQ;IAGzB,MAAMa,WAAWL,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACK,SAAOA;gBACJ,KAAKL,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIT;gBACxB,WAAWS,IAAI,SAAS;iBAGpC;QAACL;QAAMJ;KAAQ;IAGnB,MAAMe,UAAwBP,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMY,gBAAgBZ,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIa,gBAAgB,IAChB,OAAO;2BACAZ,KAAK,KAAK,CAAC,GAAGY;wBACjBb;2BACGC,KAAK,KAAK,CAACY,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIZ;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUc,EAAE;gBACRZ,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKQ;YAClD;QACJ,IACA;QAACZ;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACV,MAAIA;QAAE,GAAGQ,KAAK;QAAE,cAAcI;OAC1BG,UACAG,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUb;AAGnD;AAEA,MAAMiB,WAAWC,gBAAgB,QAAQvB;AAEzC,MAAMwB,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}
+{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps, tabListVariants } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n    loading?: boolean;\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    loading,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(\n        () => (\n            <List\n                key={tabs.map(tab => tab.id).join(\";\")}\n                size={size}\n                spacing={spacing}\n                separator={separator}\n            >\n                {tabs.map(tab => (\n                    <Trigger\n                        data-testid={tab[\"data-testid\"]}\n                        disabled={tab.disabled}\n                        icon={tab.icon}\n                        key={tab.id}\n                        loading={loading}\n                        size={size}\n                        text={tab.trigger}\n                        value={tab.value}\n                        visible={tab.visible}\n                    />\n                ))}\n            </List>\n        ),\n        [tabs, size, spacing, separator, loading]\n    );\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","loading","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","List","Trigger","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAU/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,OAAO,EACP,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAErBX,gBACAK,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACZ;QAAcK;KAAc;IAEhC,MAAMQ,WAAWF,QACb,kBACI,oBAACG,MAAIA;YACD,KAAKP,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;YAClC,MAAMX;YACN,SAASC;YACT,WAAWC;WAEVI,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACN,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,SAASR;gBACT,MAAMH;gBACN,MAAMW,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;kBAKpC;QAACL;QAAMN;QAAMC;QAASC;QAAWC;KAAQ;IAG7C,MAAMY,WAAWL,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACK,SAAOA;gBACJ,KAAKL,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIV;gBACxB,WAAWU,IAAI,SAAS;iBAGpC;QAACL;QAAML;KAAQ;IAGnB,MAAMgB,UAAwBP,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMY,gBAAgBZ,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIa,gBAAgB,IAChB,OAAO;2BACAZ,KAAK,KAAK,CAAC,GAAGY;wBACjBb;2BACGC,KAAK,KAAK,CAACY,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIZ;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUc,EAAE;gBACRZ,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKQ;YAClD;QACJ,IACA;QAACZ;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACX,MAAIA;QAAE,GAAGS,KAAK;QAAE,cAAcI;OAC1BG,UACAG,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUb;AAGnD;AAEA,MAAMiB,WAAWC,gBAAgB,QAAQxB;AAEzC,MAAMyB,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}

package/Tabs/components/Content.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { type VariantProps } from "../../utils.js";
 declare const tabContentVariants: (props?: ({
-    spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
+    spacing?: "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ContentProps = Omit<TabsPrimitive.TabsContentProps, "children" | "content"> & VariantProps<typeof tabContentVariants> & {
     content: React.ReactNode;

package/Tabs/components/List.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { type VariantProps } from "../../utils.js";
 declare const tabListVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+    spacing?: "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | null | undefined;
     separator?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;

package/Tabs/components/Tab.d.ts

@@ -14,21 +14,22 @@ interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"
 interface TabItem extends TabProps {
     id: string;
 }
-declare const Tab: ((props: TabProps) => null) & {
-    original: (props: TabProps) => null;
+declare const DecoratableTab: (props: TabProps) => null;
+declare const Tab: typeof DecoratableTab & {
+    original: typeof DecoratableTab;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: TabProps) => null) & {
-        original: (props: TabProps) => null;
+    original: typeof DecoratableTab & {
+        original: typeof DecoratableTab;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: TabProps) => null) & {
-        original: (props: TabProps) => null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTab & {
+        original: typeof DecoratableTab;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tabs/components/Trigger.d.ts

@@ -2,13 +2,14 @@ import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { type VariantProps } from "../../utils.js";
 declare const tabTriggerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
     visible?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, "children"> & VariantProps<typeof tabTriggerVariants> & {
     text: React.ReactNode;
     icon?: React.ReactElement;
+    loading?: boolean;
     "data-testid"?: string;
 };
-declare const Trigger: ({ className, size, icon, text, visible, ...props }: TriggerProps) => React.JSX.Element;
+declare const Trigger: ({ className, size, icon, text, visible, loading, ...props }: TriggerProps) => React.JSX.Element;
 export { Trigger, type TriggerProps };

package/Tabs/components/Trigger.js

@@ -1,6 +1,7 @@
 import { Tabs } from "radix-ui";
 import { cn, cva } from "../../utils.js";
 import { Icon } from "../../Icon/index.js";
+import { Skeleton } from "../../Skeleton/index.js";
 import * as __rspack_external_react from "react";
 const tabTriggerVariants = cva([
     "group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all",
@@ -41,7 +42,7 @@ const innerTabTriggerVariants = cva([
         size: "sm"
     }
 });
-const Trigger = ({ className, size, icon, text, visible, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tabs.Trigger, {
+const Trigger = ({ className, size, icon, text, visible, loading, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tabs.Trigger, {
         className: cn(tabTriggerVariants({
             size,
             visible
@@ -51,12 +52,16 @@ const Trigger = ({ className, size, icon, text, visible, ...props })=>/*#__PURE_
         className: cn(innerTabTriggerVariants({
             size
         }))
-    }, icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+    }, loading ? /*#__PURE__*/ __rspack_external_react.createElement(Skeleton, {
+        type: "text",
+        size: "md",
+        className: "w-[64px]"
+    }) : /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
         icon: icon,
         size: "sm",
         label: String(text),
         color: "neutral-light"
-    }), text));
+    }), text)));
 export { Trigger };
 
 //# sourceMappingURL=Trigger.js.map

package/Tabs/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/components/Trigger.js","sources":["../../../src/Tabs/components/Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all\",\n        \"text-neutral-strong hover:text-neutral-primary\",\n        \"border-b-md border-transparent border-solid\",\n        \"data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary\",\n        \"disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"text-sm h-[40px]\",\n                md: \"text-md h-xxl\",\n                lg: \"text-lg h-[56px]\",\n                xl: \"text-xl h-3xl\"\n            },\n            visible: {\n                false: \"hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"inline-flex items-center justify-start gap-xs\",\n        \"group-hover:bg-neutral-dimmed\",\n        \"group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"rounded-sm p-xs\",\n                md: \"rounded-sm px-xs py-xs-plus\",\n                lg: \"rounded-sm px-xs-plus py-sm-plus\",\n                xl: \"rounded-lg px-sm py-sm-plus\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\ntype TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, \"children\"> &\n    VariantProps<typeof tabTriggerVariants> & {\n        text: React.ReactNode;\n        icon?: React.ReactElement;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {icon && <Icon icon={icon} size={\"sm\"} label={String(text)} color={\"neutral-light\"} />}\n            {text}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"names":["tabTriggerVariants","cva","innerTabTriggerVariants","Trigger","className","size","icon","text","visible","props","TabsPrimitive","cn","Icon","String"],"mappings":";;;;AAKA,MAAMA,qBAAqBC,IACvB;IACI;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAGJ,MAAMC,0BAA0BD,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAUJ,MAAME,UAAU,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,OAAqB,iBAC7E,sCAACC,KAAAA,OAAqB;QAClB,WAAWC,GAAGX,mBAAmB;YAAEK;YAAMG;QAAQ,IAAIJ;QACpD,GAAGK,KAAK;qBAET,sCAAC;QAAI,WAAWE,GAAGT,wBAAwB;YAAEG;QAAK;OAC7CC,QAAQ,WAARA,GAAQ,sCAACM,MAAIA;QAAC,MAAMN;QAAM,MAAM;QAAM,OAAOO,OAAON;QAAO,OAAO;QAClEA"}
+{"version":3,"file":"Tabs/components/Trigger.js","sources":["../../../src/Tabs/components/Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all\",\n        \"text-neutral-strong hover:text-neutral-primary\",\n        \"border-b-md border-transparent border-solid\",\n        \"data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary\",\n        \"disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"text-sm h-[40px]\",\n                md: \"text-md h-xxl\",\n                lg: \"text-lg h-[56px]\",\n                xl: \"text-xl h-3xl\"\n            },\n            visible: {\n                false: \"hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"inline-flex items-center justify-start gap-xs\",\n        \"group-hover:bg-neutral-dimmed\",\n        \"group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"rounded-sm p-xs\",\n                md: \"rounded-sm px-xs py-xs-plus\",\n                lg: \"rounded-sm px-xs-plus py-sm-plus\",\n                xl: \"rounded-lg px-sm py-sm-plus\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\ntype TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, \"children\"> &\n    VariantProps<typeof tabTriggerVariants> & {\n        text: React.ReactNode;\n        icon?: React.ReactElement;\n        loading?: boolean;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, loading, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {loading ? (\n                <Skeleton type={\"text\"} size={\"md\"} className={\"w-[64px]\"} />\n            ) : (\n                <>\n                    {icon && (\n                        <Icon\n                            icon={icon}\n                            size={\"sm\"}\n                            label={String(text)}\n                            color={\"neutral-light\"}\n                        />\n                    )}\n                    {text}\n                </>\n            )}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"names":["tabTriggerVariants","cva","innerTabTriggerVariants","Trigger","className","size","icon","text","visible","loading","props","TabsPrimitive","cn","Skeleton","Icon","String"],"mappings":";;;;;AAMA,MAAMA,qBAAqBC,IACvB;IACI;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAGJ,MAAMC,0BAA0BD,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAWJ,MAAME,UAAU,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGC,OAAqB,iBACtF,sCAACC,KAAAA,OAAqB;QAClB,WAAWC,GAAGZ,mBAAmB;YAAEK;YAAMG;QAAQ,IAAIJ;QACpD,GAAGM,KAAK;qBAET,sCAAC;QAAI,WAAWE,GAAGV,wBAAwB;YAAEG;QAAK;OAC7CI,UAAU,WAAVA,GACG,sCAACI,UAAQA;QAAC,MAAM;QAAQ,MAAM;QAAM,WAAW;uBAE/C,8EACKP,QAAQ,WAARA,GACG,sCAACQ,MAAIA;QACD,MAAMR;QACN,MAAM;QACN,OAAOS,OAAOR;QACd,OAAO;QAGdA"}