@webiny/admin-ui 6.4.12-beta.5 → 6.5.0-beta.1

package/Sidebar/components/items/SidebarMenuItemIcon.d.ts

@@ -3,21 +3,22 @@ import { type IconProps } from "../../../Icon/index.js";
 interface SidebarMenuItemIconProps extends Omit<IconProps, "icon"> {
     element?: React.ReactNode;
 }
-declare const SidebarMenuItemIcon: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-    original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+declare const SidebarMenuItemIconBase: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+declare const SidebarMenuItemIcon: typeof SidebarMenuItemIconBase & {
+    original: typeof SidebarMenuItemIconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+    original: typeof SidebarMenuItemIconBase & {
+        original: typeof SidebarMenuItemIconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null) & {
-        original: ({ element, ...props }: SidebarMenuItemIconProps) => React.JSX.Element | null;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<typeof SidebarMenuItemIconBase & {
+        original: typeof SidebarMenuItemIconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Sidebar/components/items/SidebarMenuLink.d.ts

@@ -1,23 +1,24 @@
 import React from "react";
 import { type SidebarMenuItemLinkProps } from "./SidebarMenuItem.js";
 import { type SidebarMenuItemIconProps } from "../../../Sidebar/components/items/SidebarMenuItemIcon.js";
-import { type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
-import { type SidebarMenuItemBadgeProps } from "../../../Sidebar/components/items/SidebarMenuItemBadge.js";
-declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-    original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+import { SidebarMenuItemAction, type SidebarMenuItemActionProps } from "../../../Sidebar/components/items/SidebarMenuItemAction.js";
+import { SidebarMenuItemBadge, type SidebarMenuItemBadgeProps } from "../../../Sidebar/components/items/SidebarMenuItemBadge.js";
+declare const SidebarMenuLinkBase: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+declare const SidebarMenuLink: typeof SidebarMenuLinkBase & {
+    original: typeof SidebarMenuLinkBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+    original: typeof SidebarMenuLinkBase & {
+        original: typeof SidebarMenuLinkBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: SidebarMenuItemLinkProps) => React.JSX.Element) & {
-        original: (props: SidebarMenuItemLinkProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuLinkBase & {
+        original: typeof SidebarMenuLinkBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -41,7 +42,7 @@ declare const SidebarMenuLink: ((props: SidebarMenuItemLinkProps) => React.JSX.E
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: SidebarMenuItemActionProps) => React.JSX.Element | null;
-    Badge: ({ text }: SidebarMenuItemBadgeProps) => React.JSX.Element;
+    Action: typeof SidebarMenuItemAction;
+    Badge: typeof SidebarMenuItemBadge;
 };
 export { SidebarMenuLink, type SidebarMenuItemLinkProps, type SidebarMenuItemIconProps, type SidebarMenuItemActionProps, type SidebarMenuItemBadgeProps };

package/Sidebar/components/items/SidebarMenuProvider.d.ts

@@ -11,8 +11,8 @@ interface SidebarMenuProviderProps {
 }
 declare const SidebarMenuContext: React.Context<SidebarMenuContext>;
 declare function useSidebarMenu(): SidebarMenuContext;
-declare const SidebarMenuProvider: {
-    ({ level, parentIcon, children }: SidebarMenuProviderProps): React.JSX.Element;
-    displayName: string;
-};
+declare function SidebarMenuProvider({ level, parentIcon, children }: SidebarMenuProviderProps): React.JSX.Element;
+declare namespace SidebarMenuProvider {
+    var displayName: string;
+}
 export { SidebarMenuProvider, useSidebarMenu };

package/Sidebar/components/items/SidebarMenuRootItem.d.ts

@@ -1,20 +1,22 @@
 import React from "react";
+import { SidebarMenuItemAction } from "./SidebarMenuItemAction.js";
 import { type SidebarMenuItemProps } from "./SidebarMenuItem.js";
-declare const SidebarMenuRootItem: (({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-    original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuItemBase: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+declare const SidebarMenuRootItem: typeof SidebarMenuItemBase & {
+    original: typeof SidebarMenuItemBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+    original: typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element) & {
-        original: ({ children, className, pinnable, action, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof SidebarMenuItemBase & {
+        original: typeof SidebarMenuItemBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -38,6 +40,6 @@ declare const SidebarMenuRootItem: (({ children, className, pinnable, action, ..
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     };
-    Action: ({ element, showOnHover, className, ...props }: import("./SidebarMenuItemAction.js").SidebarMenuItemActionProps) => React.JSX.Element | null;
+    Action: typeof SidebarMenuItemAction;
 };
 export { SidebarMenuRootItem, type SidebarMenuItemProps };

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;