@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/Sidebar/components/items/SidebarMenuSubButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Link","cva","DivButton","variants","variant","disabled","true","SidebarMenuSubButton","onClick","active","icon","action","text","to","linkProps","sharedProps","className","content","createElement","Object","assign","tabIndex","undefined"],"sources":["SidebarMenuSubButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link } from \"@webiny/react-router\";\nimport { cva } from \"~/utils\";\nimport type { SidebarMenuItemProps } from \"./SidebarMenuRootItem\";\nimport { DivButton } from \"./DivButton\";\n\nconst variants = cva(\n    [\n        \"wby-flex wby-w-full wby-cursor-pointer wby-items-center wby-gap-sm\",\n        \"wby-text-md wby-text-neutral-primary !wby-no-underline\",\n        \"wby-rounded-md wby-p-xs-plus wby-pr-sm wby-outline-none\",\n        \"wby-whitespace-nowrap wby-overflow-hidden\",\n        \"hover:wby-bg-neutral-dark/5\",\n        \"focus:wby-bg-neutral-dark/5 focus:wby-ring-none focus:wby-ring-transparent\",\n        \"data-[active=true]:wby-bg-neutral-dark/5 data-[active=true]:wby-font-semibold data-[active=true]:wby-pointer-events-none\",\n        \"group-data-[state=collapsed]:wby-hidden\",\n        \"group-data-[state=open]/menu-sub-item-collapsible:!wby-font-semibold\"\n    ],\n    {\n        variants: {\n            variant: {\n                \"group-label\": [\n                    \"wby-uppercase wby-font-semibold !wby-text-neutral-muted wby-text-sm\",\n                    \"wby-pt-md wby-pb-xs-plus wby-pointer-events-none\"\n                ]\n            },\n            disabled: {\n                true: \"wby-pointer-events-none !wby-text-neutral-disabled\"\n            }\n        }\n    }\n);\n\ntype SidebarMenuSubButtonProps = Omit<SidebarMenuItemProps, \"className\" | \"children\">;\n\nconst SidebarMenuSubButton = ({\n    onClick,\n    variant,\n    active,\n    disabled,\n    icon,\n    action,\n    text,\n    to,\n    ...linkProps\n}: SidebarMenuSubButtonProps) => {\n    const sharedProps = {\n        \"data-sidebar\": \"menu-button\",\n        \"data-active\": active,\n        className: variants({ variant, disabled }),\n        onClick\n    };\n\n    const content = to ? (\n        <Link {...sharedProps} to={to} {...linkProps}>\n            {icon}\n            {text}\n        </Link>\n    ) : (\n        <DivButton\n            {...sharedProps}\n            disabled={disabled}\n            tabIndex={variant === \"group-label\" ? -1 : undefined}\n        >\n            {icon}\n            {text}\n        </DivButton>\n    );\n\n    // We can't use the default button element here because the content of the button\n    // can also contain a button, which is not allowed in HTML.\n    return (\n        <div className={\"wby-flex wby-items-center wby-w-full\"}>\n            {content}\n            <div className={\"wby-flex wby-absolute wby-right-[10px]\"}>{action}</div>\n        </div>\n    );\n};\n\nexport { SidebarMenuSubButton };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,SAASC,GAAG;AAEZ,SAASC,SAAS;AAElB,MAAMC,QAAQ,GAAGF,GAAG,CAChB,CACI,oEAAoE,EACpE,wDAAwD,EACxD,yDAAyD,EACzD,2CAA2C,EAC3C,6BAA6B,EAC7B,4EAA4E,EAC5E,0HAA0H,EAC1H,yCAAyC,EACzC,sEAAsE,CACzE,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE,CACX,qEAAqE,EACrE,kDAAkD;IAE1D,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAID,MAAMC,oBAAoB,GAAGA,CAAC;EAC1BC,OAAO;EACPJ,OAAO;EACPK,MAAM;EACNJ,QAAQ;EACRK,IAAI;EACJC,MAAM;EACNC,IAAI;EACJC,EAAE;EACF,GAAGC;AACoB,CAAC,KAAK;EAC7B,MAAMC,WAAW,GAAG;IAChB,cAAc,EAAE,aAAa;IAC7B,aAAa,EAAEN,MAAM;IACrBO,SAAS,EAAEb,QAAQ,CAAC;MAAEC,OAAO;MAAEC;IAAS,CAAC,CAAC;IAC1CG;EACJ,CAAC;EAED,MAAMS,OAAO,GAAGJ,EAAE,gBACdd,KAAA,CAAAmB,aAAA,CAAClB,IAAI,EAAAmB,MAAA,CAAAC,MAAA,KAAKL,WAAW;IAAEF,EAAE,EAAEA;EAAG,GAAKC,SAAS,GACvCJ,IAAI,EACJE,IACC,CAAC,gBAEPb,KAAA,CAAAmB,aAAA,CAAChB,SAAS,EAAAiB,MAAA,CAAAC,MAAA,KACFL,WAAW;IACfV,QAAQ,EAAEA,QAAS;IACnBgB,QAAQ,EAAEjB,OAAO,KAAK,aAAa,GAAG,CAAC,CAAC,GAAGkB;EAAU,IAEpDZ,IAAI,EACJE,IACM,CACd;;EAED;EACA;EACA,oBACIb,KAAA,CAAAmB,aAAA;IAAKF,SAAS,EAAE;EAAuC,GAClDC,OAAO,eACRlB,KAAA,CAAAmB,aAAA;IAAKF,SAAS,EAAE;EAAyC,GAAEL,MAAY,CACtE,CAAC;AAEd,CAAC;AAED,SAASJ,oBAAoB","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type SidebarMenuItemProps } from "./SidebarMenuItem";
+declare const SidebarMenuSubItem: ({ children, className, ...buttonProps }: SidebarMenuItemProps) => React.JSX.Element;
+export { SidebarMenuSubItem };

package/Sidebar/components/items/SidebarMenuSubItem.js

@@ -0,0 +1,64 @@
+import React, { useCallback, useMemo } from "react";
+import { cn } from "../../../utils";
+import { Collapsible } from "radix-ui";
+import { SidebarMenuSubButton } from "./SidebarMenuSubButton";
+import { SidebarMenuSubItemIndentation } from "./SidebarMenuSubItemIndentation";
+import { SidebarMenuSub } from "./SidebarMenuSub";
+import { IconButton } from "../../../Button";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { useSidebarMenu } from "./SidebarMenuProvider";
+import { useSidebar } from "../..";
+const SidebarMenuSubItem = ({
+  children,
+  className,
+  ...buttonProps
+}) => {
+  const {
+    currentLevel
+  } = useSidebarMenu();
+  const sidebar = useSidebar();
+  const menuItemId = useMemo(() => {
+    return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);
+  }, [buttonProps.text, currentLevel]);
+  const isSectionExpanded = useMemo(() => {
+    return sidebar.isSectionExpanded(menuItemId);
+  }, [sidebar.expandedSections]);
+  const toggleSectionExpanded = useCallback(() => {
+    sidebar.toggleSectionExpanded(menuItemId);
+  }, [isSectionExpanded]);
+  const sidebarMenuSubButton = useMemo(() => {
+    if (!children) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SidebarMenuSubItemIndentation, {
+        lvl: currentLevel,
+        variant: buttonProps.variant
+      }), /*#__PURE__*/React.createElement(SidebarMenuSubButton, buttonProps));
+    }
+    const chevron = /*#__PURE__*/React.createElement(IconButton, {
+      variant: "ghost",
+      size: "xs",
+      className: "wby-ml-auto wby-transition-transform wby-duration-175 group-data-[state=open]/menu-sub-item-collapsible:wby-rotate-180 group-data-[state=collapsed]:wby-hidden",
+      color: "neutral-strong",
+      "data-sidebar": "menu-item-expanded-indicator",
+      icon: /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, null)
+    });
+    return /*#__PURE__*/React.createElement(Collapsible.Root, {
+      className: "wby-w-full wby-group/menu-sub-item-collapsible"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-items-center"
+    }, /*#__PURE__*/React.createElement(SidebarMenuSubItemIndentation, {
+      lvl: currentLevel,
+      variant: buttonProps.variant
+    }), /*#__PURE__*/React.createElement(Collapsible.Trigger, {
+      asChild: true
+    }, /*#__PURE__*/React.createElement(SidebarMenuSubButton, Object.assign({}, buttonProps, {
+      action: chevron
+    })))), /*#__PURE__*/React.createElement(Collapsible.Content, null, /*#__PURE__*/React.createElement(SidebarMenuSub, null, children)));
+  }, [children, buttonProps, currentLevel, menuItemId, isSectionExpanded, toggleSectionExpanded]);
+  return /*#__PURE__*/React.createElement("li", {
+    "data-sidebar": "menu-sub-item",
+    className: cn("wby-group/menu-sub-item wby-relative wby-flex", className)
+  }, sidebarMenuSubButton);
+};
+export { SidebarMenuSubItem };
+
+//# sourceMappingURL=SidebarMenuSubItem.js.map

package/Sidebar/components/items/SidebarMenuSubItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","cn","Collapsible","SidebarMenuSubButton","SidebarMenuSubItemIndentation","SidebarMenuSub","IconButton","ReactComponent","KeyboardArrowRightIcon","useSidebarMenu","useSidebar","SidebarMenuSubItem","children","className","buttonProps","currentLevel","sidebar","menuItemId","btoa","text","isSectionExpanded","expandedSections","toggleSectionExpanded","sidebarMenuSubButton","createElement","Fragment","lvl","variant","chevron","size","color","icon","Root","Trigger","asChild","Object","assign","action","Content"],"sources":["SidebarMenuSubItem.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { cn } from \"~/utils\";\nimport { Collapsible } from \"radix-ui\";\nimport { SidebarMenuSubButton } from \"./SidebarMenuSubButton\";\nimport { SidebarMenuSubItemIndentation } from \"./SidebarMenuSubItemIndentation\";\nimport { SidebarMenuSub } from \"./SidebarMenuSub\";\nimport { IconButton } from \"~/Button\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { useSidebarMenu } from \"./SidebarMenuProvider\";\nimport { type SidebarMenuItemProps } from \"./SidebarMenuItem\";\nimport { useSidebar } from \"~/Sidebar\";\n\nconst SidebarMenuSubItem = ({ children, className, ...buttonProps }: SidebarMenuItemProps) => {\n    const { currentLevel } = useSidebarMenu();\n    const sidebar = useSidebar();\n\n    const menuItemId = useMemo(() => {\n        return btoa(`sidebar-item-${currentLevel}-${buttonProps.text}`);\n    }, [buttonProps.text, currentLevel]);\n\n    const isSectionExpanded = useMemo(() => {\n        return sidebar.isSectionExpanded(menuItemId);\n    }, [sidebar.expandedSections]);\n\n    const toggleSectionExpanded = useCallback(() => {\n        sidebar.toggleSectionExpanded(menuItemId);\n    }, [isSectionExpanded]);\n\n    const sidebarMenuSubButton = useMemo(() => {\n        if (!children) {\n            return (\n                <>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <SidebarMenuSubButton {...buttonProps} />\n                </>\n            );\n        }\n\n        const chevron = (\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                className={\n                    \"wby-ml-auto wby-transition-transform wby-duration-175 group-data-[state=open]/menu-sub-item-collapsible:wby-rotate-180 group-data-[state=collapsed]:wby-hidden\"\n                }\n                color={\"neutral-strong\"}\n                data-sidebar={\"menu-item-expanded-indicator\"}\n                icon={<KeyboardArrowRightIcon />}\n            />\n        );\n\n        return (\n            <Collapsible.Root className=\"wby-w-full wby-group/menu-sub-item-collapsible\">\n                <div className={\"wby-flex wby-items-center\"}>\n                    <SidebarMenuSubItemIndentation\n                        lvl={currentLevel}\n                        variant={buttonProps.variant}\n                    />\n                    <Collapsible.Trigger asChild>\n                        <SidebarMenuSubButton {...buttonProps} action={chevron} />\n                    </Collapsible.Trigger>\n                </div>\n                <Collapsible.Content>\n                    <SidebarMenuSub>{children}</SidebarMenuSub>\n                </Collapsible.Content>\n            </Collapsible.Root>\n        );\n    }, [children, buttonProps, currentLevel, menuItemId, isSectionExpanded, toggleSectionExpanded]);\n\n    return (\n        <li\n            data-sidebar=\"menu-sub-item\"\n            className={cn(\"wby-group/menu-sub-item wby-relative wby-flex\", className)}\n        >\n            {sidebarMenuSubButton}\n        </li>\n    );\n};\n\nexport { SidebarMenuSubItem };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { type VariantProps } from "../../../utils";
+declare const separatorVariants: (props?: ({
+    variant?: "group-label" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface SidebarMenuSubItemIndentationProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "content">, VariantProps<typeof separatorVariants> {
+    lvl: number;
+}
+declare const SidebarMenuSubItemIndentation: ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => React.JSX.Element;
+export { SidebarMenuSubItemIndentation };

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { Separator } from "../../../Separator";
+import { cva } from "../../../utils";
+const separatorVariants = cva(["wby-h-xl wby-ml-px"], {
+  variants: {
+    variant: {
+      "group-label": "!wby-h-[38px]"
+    }
+  }
+});
+const SidebarMenuSubItemIndentation = ({
+  lvl,
+  variant
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-sidebar": "indentation",
+    className: "wby-gap-x-xs wby-flex wby-mr-sm"
+  }, Array.from({
+    length: lvl
+  }, (_, index) => /*#__PURE__*/React.createElement("div", {
+    "data-sidebar": "indentation-element",
+    className: "wby-ml-md",
+    key: lvl + index
+  }, /*#__PURE__*/React.createElement(Separator, {
+    orientation: "vertical",
+    margin: "none",
+    variant: "strong",
+    className: separatorVariants({
+      variant
+    })
+  }))));
+};
+export { SidebarMenuSubItemIndentation };
+
+//# sourceMappingURL=SidebarMenuSubItemIndentation.js.map

package/Sidebar/components/items/SidebarMenuSubItemIndentation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Separator","cva","separatorVariants","variants","variant","SidebarMenuSubItemIndentation","lvl","createElement","className","Array","from","length","_","index","key","orientation","margin"],"sources":["SidebarMenuSubItemIndentation.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"~/Separator\";\n\nimport { cva, type VariantProps } from \"~/utils\";\n\nconst separatorVariants = cva([\"wby-h-xl wby-ml-px\"], {\n    variants: {\n        variant: {\n            \"group-label\": \"!wby-h-[38px]\"\n        }\n    }\n});\n\nexport interface SidebarMenuSubItemIndentationProps\n    extends Omit<React.HTMLAttributes<HTMLLIElement>, \"content\">,\n        VariantProps<typeof separatorVariants> {\n    lvl: number;\n}\n\nconst SidebarMenuSubItemIndentation = ({ lvl, variant }: SidebarMenuSubItemIndentationProps) => {\n    return (\n        <div data-sidebar=\"indentation\" className={\"wby-gap-x-xs wby-flex wby-mr-sm\"}>\n            {Array.from({ length: lvl }, (_, index) => (\n                <div data-sidebar={\"indentation-element\"} className={\"wby-ml-md\"} key={lvl + index}>\n                    <Separator\n                        orientation={\"vertical\"}\n                        margin={\"none\"}\n                        variant={\"strong\"}\n                        className={separatorVariants({ variant })}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\nexport { SidebarMenuSubItemIndentation };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAElB,SAASC,GAAG;AAEZ,MAAMC,iBAAiB,GAAGD,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE;EAClDE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACL,aAAa,EAAE;IACnB;EACJ;AACJ,CAAC,CAAC;AAQF,MAAMC,6BAA6B,GAAGA,CAAC;EAAEC,GAAG;EAAEF;AAA4C,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAQ,aAAA;IAAK,gBAAa,aAAa;IAACC,SAAS,EAAE;EAAkC,GACxEC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEL;EAAI,CAAC,EAAE,CAACM,CAAC,EAAEC,KAAK,kBAClCd,KAAA,CAAAQ,aAAA;IAAK,gBAAc,qBAAsB;IAACC,SAAS,EAAE,WAAY;IAACM,GAAG,EAAER,GAAG,GAAGO;EAAM,gBAC/Ed,KAAA,CAAAQ,aAAA,CAACP,SAAS;IACNe,WAAW,EAAE,UAAW;IACxBC,MAAM,EAAE,MAAO;IACfZ,OAAO,EAAE,QAAS;IAClBI,SAAS,EAAEN,iBAAiB,CAAC;MAAEE;IAAQ,CAAC;EAAE,CAC7C,CACA,CACR,CACA,CAAC;AAEd,CAAC;AAED,SAASC,6BAA6B","ignoreList":[]}

package/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Sidebar";
+export * from "./components/SidebarProvider";

package/Sidebar/index.js

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

package/Sidebar/index.js.map

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

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+declare const skeletonVariants: (props?: ({
+    type?: "area" | "text" | "thumbnail" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | "3xl" | null | undefined;
+} & import("class-variance-authority/dist/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;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
+        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element) & {
+        original: ({ size, type, className, ...props }: SkeletonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Skeleton, type SkeletonProps };

package/Skeleton/Skeleton.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { cn, cva, makeDecoratable } from "../utils";
+const skeletonVariants = cva("wby-animate-skeleton-pulse wby-rounded-sm", {
+  variants: {
+    type: {
+      text: "wby-w-full",
+      thumbnail: "wby-aspect-square",
+      area: "wby-size-full"
+    },
+    size: {
+      xs: "wby-h-[8px]",
+      sm: "wby-h-[12px]",
+      md: "wby-h-[16px]",
+      lg: "wby-h-[24px]",
+      xl: "wby-h-[32px]",
+      xxl: "wby-h-[40px]",
+      "3xl": "wby-h-[48px]"
+    }
+  },
+  compoundVariants: [
+  // The following compound variants are not supported by the current version of the design system.
+  {
+    type: "thumbnail",
+    size: "xs",
+    class: "!wby-hidden"
+  }, {
+    type: "text",
+    size: "3xl",
+    class: "!wby-hidden"
+  }],
+  defaultVariants: {
+    type: "area",
+    size: "lg"
+  }
+});
+const DecoratableSkeleton = ({
+  size,
+  type,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: cn(skeletonVariants({
+      size,
+      type
+    }), className)
+  }, props));
+};
+const Skeleton = makeDecoratable("Skeleton", DecoratableSkeleton);
+export { Skeleton };
+
+//# sourceMappingURL=Skeleton.js.map

package/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","makeDecoratable","skeletonVariants","variants","type","text","thumbnail","area","size","xs","sm","md","lg","xl","xxl","compoundVariants","class","defaultVariants","DecoratableSkeleton","className","props","createElement","Object","assign","Skeleton"],"sources":["Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\nconst skeletonVariants = cva(\"wby-animate-skeleton-pulse wby-rounded-sm\", {\n    variants: {\n        type: {\n            text: \"wby-w-full\",\n            thumbnail: \"wby-aspect-square\",\n            area: \"wby-size-full\"\n        },\n        size: {\n            xs: \"wby-h-[8px]\",\n            sm: \"wby-h-[12px]\",\n            md: \"wby-h-[16px]\",\n            lg: \"wby-h-[24px]\",\n            xl: \"wby-h-[32px]\",\n            xxl: \"wby-h-[40px]\",\n            \"3xl\": \"wby-h-[48px]\"\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: \"!wby-hidden\"\n        },\n        {\n            type: \"text\",\n            size: \"3xl\",\n            class: \"!wby-hidden\"\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        size: \"lg\"\n    }\n});\n\ninterface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAqBC,eAAe;AAEpD,MAAMC,gBAAgB,GAAGF,GAAG,CAAC,2CAA2C,EAAE;EACtEG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,YAAY;MAClBC,SAAS,EAAE,mBAAmB;MAC9BC,IAAI,EAAE;IACV,CAAC;IACDC,IAAI,EAAE;MACFC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE,cAAc;MAClBC,GAAG,EAAE,cAAc;MACnB,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIX,IAAI,EAAE,WAAW;IACjBI,IAAI,EAAE,IAAI;IACVQ,KAAK,EAAE;EACX,CAAC,EACD;IACIZ,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE,KAAK;IACXQ,KAAK,EAAE;EACX,CAAC,CACJ;EACDC,eAAe,EAAE;IACbb,IAAI,EAAE,MAAM;IACZI,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAMF,MAAMU,mBAAmB,GAAGA,CAAC;EAAEV,IAAI;EAAEJ,IAAI;EAAEe,SAAS;EAAE,GAAGC;AAAqB,CAAC,KAAK;EAChF,oBAAOtB,KAAA,CAAAuB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IAAKJ,SAAS,EAAEpB,EAAE,CAACG,gBAAgB,CAAC;MAAEM,IAAI;MAAEJ;IAAK,CAAC,CAAC,EAAEe,SAAS;EAAE,GAAKC,KAAK,CAAG,CAAC;AACzF,CAAC;AAED,MAAMI,QAAQ,GAAGvB,eAAe,CAAC,UAAU,EAAEiB,mBAAmB,CAAC;AAEjE,SAASM,QAAQ","ignoreList":[]}

package/Skeleton/Skeleton.mdx

@@ -0,0 +1,219 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SkeletonStories from './Skeleton.stories';
+
+<Meta of={SkeletonStories} />
+
+# Skeleton
+
+The Skeleton component is a placeholder UI element used to indicate that content is loading. It provides a visual representation of the content's structure before the actual content is loaded, improving the perceived performance and user experience during loading states.
+
+## Usage
+
+<Canvas of={SkeletonStories.Documentation} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SkeletonExample = () => {
+    return <Skeleton />;
+};
+
+export default SkeletonExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Skeleton/Skeleton.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SkeletonStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SkeletonExample = () => {
+    return <Skeleton />;
+};
+
+export default SkeletonExample;
+```
+
+## Examples
+
+### Types
+
+The Skeleton component supports three different types: `area`, `text`, and `thumbnail`.
+
+#### Area
+
+The default type, used for general content areas.
+
+<Canvas of={SkeletonStories.Area} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const AreaSkeletonExample = () => {
+    return <Skeleton type="area" className="wby-w-1/2 wby-h-32" />;
+};
+
+export default AreaSkeletonExample;
+` } } />
+
+#### Text
+
+Used for text content, spans the full width of its container.
+
+<Canvas of={SkeletonStories.Text} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const TextSkeletonExample = () => {
+    return <Skeleton type="text" />;
+};
+
+export default TextSkeletonExample;
+` } } />
+
+#### Thumbnail
+
+Used for square-shaped content like images or avatars.
+
+<Canvas of={SkeletonStories.Thumbnail} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const ThumbnailSkeletonExample = () => {
+    return <Skeleton type="thumbnail" />;
+};
+
+export default ThumbnailSkeletonExample;
+` } } />
+
+### Sizes
+
+The Skeleton component comes in various sizes to match different content dimensions.
+
+#### Extra Small (XS)
+
+<Canvas of={SkeletonStories.ExtraSmall} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XsSkeletonExample = () => {
+    return <Skeleton size="xs" />;
+};
+
+export default XsSkeletonExample;
+` } } />
+
+#### Small (SM)
+
+<Canvas of={SkeletonStories.Small} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const SmSkeletonExample = () => {
+    return <Skeleton size="sm" />;
+};
+
+export default SmSkeletonExample;
+` } } />
+
+#### Medium (MD)
+
+<Canvas of={SkeletonStories.Medium} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const MdSkeletonExample = () => {
+    return <Skeleton size="md" />;
+};
+
+export default MdSkeletonExample;
+` } } />
+
+#### Large (LG)
+
+<Canvas of={SkeletonStories.Large} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const LgSkeletonExample = () => {
+    return <Skeleton size="lg" />;
+};
+
+export default LgSkeletonExample;
+` } } />
+
+#### Extra Large (XL)
+
+<Canvas of={SkeletonStories.ExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XlSkeletonExample = () => {
+    return <Skeleton size="xl" />;
+};
+
+export default XlSkeletonExample;
+` } } />
+
+#### Double Extra Large (XXL)
+
+<Canvas of={SkeletonStories.DoubleExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const XxlSkeletonExample = () => {
+    return <Skeleton size="xxl" />;
+};
+
+export default XxlSkeletonExample;
+` } } />
+
+#### Triple Extra Large (3XL)
+
+<Canvas of={SkeletonStories.TripleExtraLarge} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const ThreeXlSkeletonExample = () => {
+    return <Skeleton size="3xl" />;
+};
+
+export default ThreeXlSkeletonExample;
+` } } />
+
+### Complex Layouts
+
+You can combine multiple Skeleton components to create more complex loading states.
+
+<Canvas of={SkeletonStories.MultipleAreas} source={ { code: `
+import React from "react";
+import { Skeleton } from "@webiny/admin-ui";
+
+const MultipleAreasExample = () => {
+    return (
+        <div className="wby-flex wby-gap-md">
+            <div className="wby-flex wby-flex-col wby-gap-md">
+                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
+                <Skeleton type="area" className={"wby-w-32 wby-h-32"} />
+            </div>
+            <div>
+                <Skeleton type="area" className="wby-w-32 wby-h-full" />
+            </div>
+        </div>
+    );
+};
+
+export default MultipleAreasExample;
+` } } />

package/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./Skeleton";
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const Text: Story;
+export declare const Thumbnail: Story;
+export declare const Area: Story;
+export declare const MultipleAreas: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const DoubleExtraLarge: Story;
+export declare const TripleExtraLarge: Story;
+export declare const Documentation: Story;

package/Skeleton/Skeleton.stories.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { Skeleton } from "./Skeleton";
+const meta = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "padded"
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["text", "thumbnail", "area"]
+    },
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+    }
+  }
+};
+export default meta;
+export const Default = {};
+export const Text = {
+  args: {
+    type: "text"
+  }
+};
+export const Thumbnail = {
+  args: {
+    type: "thumbnail"
+  }
+};
+export const Area = {
+  args: {
+    type: "area",
+    className: "wby-w-1/2 wby-h-32"
+  }
+};
+export const MultipleAreas = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-col wby-gap-md"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    type: "area",
+    className: "wby-w-32 wby-h-32"
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    type: "area",
+    className: "wby-w-32 wby-h-32"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton, {
+    type: "area",
+    className: "wby-w-32 wby-h-full"
+  })))
+};
+export const ExtraSmall = {
+  args: {
+    size: "xs"
+  }
+};
+export const Small = {
+  args: {
+    size: "sm"
+  }
+};
+export const Medium = {
+  args: {
+    size: "md"
+  }
+};
+export const Large = {
+  args: {
+    size: "lg"
+  }
+};
+export const ExtraLarge = {
+  args: {
+    size: "xl"
+  }
+};
+export const DoubleExtraLarge = {
+  args: {
+    size: "xxl"
+  }
+};
+export const TripleExtraLarge = {
+  args: {
+    size: "3xl"
+  }
+};
+export const Documentation = {
+  args: {
+    type: "area",
+    size: "lg"
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      description: "The type of skeleton to display",
+      options: ["text", "thumbnail", "area"]
+    },
+    size: {
+      control: "select",
+      description: "The size of the skeleton",
+      options: ["xs", "sm", "md", "lg", "xl", "xxl", "3xl"]
+    }
+  }
+};
+
+//# sourceMappingURL=Skeleton.stories.js.map

package/Skeleton/Skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Skeleton","meta","title","component","parameters","layout","argTypes","type","control","options","size","Default","Text","args","Thumbnail","Area","className","MultipleAreas","render","createElement","ExtraSmall","Small","Medium","Large","ExtraLarge","DoubleExtraLarge","TripleExtraLarge","Documentation","description"],"sources":["Skeleton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Skeleton } from \"./Skeleton\";\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: \"wby-w-1/2 wby-h-32\"\n    }\n};\n\nexport const MultipleAreas: Story = {\n    render: () => (\n        <div className=\"wby-flex wby-gap-md\">\n            <div className=\"wby-flex wby-flex-col wby-gap-md\">\n                <Skeleton type=\"area\" className={\"wby-w-32 wby-h-32\"} />\n                <Skeleton type=\"area\" className={\"wby-w-32 wby-h-32\"} />\n            </div>\n            <div>\n                <Skeleton type=\"area\" className=\"wby-w-32 wby-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"],"mappings":"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","ignoreList":[]}

package/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/Skeleton/index.js

@@ -0,0 +1,3 @@
+export * from "./Skeleton";
+
+//# sourceMappingURL=index.js.map

package/Skeleton/index.js.map

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

package/Slider/Slider.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { SliderPrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
+/**
+ * Slider
+ */
+type SliderProps = FormComponentProps & SliderPrimitiveProps & {
+    labelPosition?: "top" | "side";
+};
+declare const Slider: (({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+    original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element) & {
+        original: ({ description, note, validation, labelPosition, ...props }: SliderProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Slider, type SliderProps };