@webiny/admin-ui 6.0.0-alpha.0

package/Separator/Separator.stories.js

@@ -0,0 +1,193 @@
+import { Separator } from "./Separator";
+import React from "react";
+import { Heading } from "../Heading";
+import { Text } from "../Text";
+const meta = {
+  title: "Components/Separator",
+  component: Separator,
+  argTypes: {},
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-[700px]"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export default meta;
+export const Documentation = {
+  args: {
+    variant: "dimmed",
+    margin: "none",
+    orientation: "horizontal",
+    decorative: true
+  },
+  argTypes: {
+    margin: {
+      description: "The margin around the separator.",
+      control: "select",
+      options: ["none", "xs", "sm", "md", "lg", "xl"]
+    },
+    variant: {
+      description: "The visual style variant of the separator.",
+      control: "select",
+      options: ["transparent", "base", "dimmed", "muted", "strong"]
+    },
+    orientation: {
+      description: "The orientation of the separator.",
+      control: "select",
+      options: ["horizontal", "vertical"]
+    },
+    decorative: {
+      description: "Whether the separator is purely decorative and should be hidden from screen readers.",
+      control: "boolean"
+    }
+  },
+  render: props => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-text-neutral-strong"
+    }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
+      margin: props.margin,
+      variant: props.variant,
+      orientation: props.orientation,
+      decorative: props.decorative
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const Default = {
+  args: {
+    variant: "dimmed",
+    margin: "lg"
+  },
+  render: props => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-text-neutral-strong"
+    }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
+      margin: props.margin,
+      variant: props.variant
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  },
+  argTypes: {
+    margin: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl"]
+    },
+    variant: {
+      control: "select",
+      options: ["transparent", "base", "dimmed", "muted", "strong"]
+    }
+  }
+};
+export const VerticalAndHorizontal = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-text-neutral-strong"
+    }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3.")));
+  }
+};
+export const HorizontalOrientation = {
+  args: {
+    orientation: "horizontal"
+  },
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-text-neutral-strong"
+    }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1.")));
+  }
+};
+export const VerticalOrientation = {
+  args: {
+    orientation: "vertical"
+  },
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "lg"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3."));
+  }
+};
+export const LessMargin = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-text-neutral-strong"
+    }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "md"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "md"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "md"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3.")));
+  }
+};
+export const MoreMargin = {
+  render: () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "wby-space-y-1"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6
+    }, "This is a heading."), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: "wby-text-neutral-strong"
+    }, "This is a short description here")), /*#__PURE__*/React.createElement(Separator, {
+      margin: "xl"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-items-center wby-h-6 wby-text-sm"
+    }, /*#__PURE__*/React.createElement(Text, null, "This is text 1."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "xl"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 2."), /*#__PURE__*/React.createElement(Separator, {
+      orientation: "vertical",
+      margin: "xl"
+    }), /*#__PURE__*/React.createElement(Text, null, "This is text 3.")));
+  }
+};
+
+//# sourceMappingURL=Separator.stories.js.map

package/Separator/Separator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Separator","React","Heading","Text","meta","title","component","argTypes","decorators","Story","createElement","className","Documentation","args","variant","margin","orientation","decorative","description","control","options","render","props","level","size","Default","VerticalAndHorizontal","HorizontalOrientation","VerticalOrientation","LessMargin","MoreMargin"],"sources":["Separator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Separator } from \"./Separator\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof Separator> = {\n    title: \"Components/Separator\",\n    component: Separator,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"wby-w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Separator>;\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"none\",\n        orientation: \"horizontal\",\n        decorative: true\n    },\n    argTypes: {\n        margin: {\n            description: \"The margin around the separator.\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            description: \"The visual style variant of the separator.\",\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\"]\n        },\n        orientation: {\n            description: \"The orientation of the separator.\",\n            control: \"select\",\n            options: [\"horizontal\", \"vertical\"]\n        },\n        decorative: {\n            description:\n                \"Whether the separator is purely decorative and should be hidden from screen readers.\",\n            control: \"boolean\"\n        }\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator\n                    margin={props.margin}\n                    variant={props.variant}\n                    orientation={props.orientation}\n                    decorative={props.decorative}\n                />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const Default: Story = {\n    args: {\n        variant: \"dimmed\",\n        margin: \"lg\"\n    },\n    render: props => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={props.margin} variant={props.variant} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    },\n    argTypes: {\n        margin: {\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"transparent\", \"base\", \"dimmed\", \"muted\", \"strong\"]\n        }\n    }\n};\n\nexport const VerticalAndHorizontal: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"lg\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const HorizontalOrientation: Story = {\n    args: {\n        orientation: \"horizontal\"\n    },\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"lg\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const VerticalOrientation: Story = {\n    args: {\n        orientation: \"vertical\"\n    },\n    render: () => {\n        return (\n            <div className=\"wby-flex wby-justify-center wby-h-6 wby-text-sm\">\n                <Text>{\"This is text 1.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 2.\"}</Text>\n                <Separator orientation=\"vertical\" margin={\"lg\"} />\n                <Text>{\"This is text 3.\"}</Text>\n            </div>\n        );\n    }\n};\n\nexport const LessMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"md\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"md\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const MoreMargin: Story = {\n    render: () => {\n        return (\n            <div>\n                <div className=\"wby-space-y-1\">\n                    <Heading level={6}>{\"This is a heading.\"}</Heading>\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {\"This is a short description here\"}\n                    </Text>\n                </div>\n                <Separator margin={\"xl\"} />\n                <div className=\"wby-flex wby-items-center wby-h-6 wby-text-sm\">\n                    <Text>{\"This is text 1.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 2.\"}</Text>\n                    <Separator orientation=\"vertical\" margin={\"xl\"} />\n                    <Text>{\"This is text 3.\"}</Text>\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Separator/index.d.ts

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

package/Separator/index.js

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

package/Separator/index.js.map

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

package/Sidebar/Sidebar.d.ts

@@ -0,0 +1,169 @@
+import * as React from "react";
+import { SidebarRoot } from "./components/SidebarRoot";
+import { SidebarContent } from "./components/SidebarContent";
+interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<typeof SidebarRoot>, "title">, Omit<React.ComponentPropsWithoutRef<typeof SidebarContent>, "title"> {
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const Sidebar: ((props: SidebarProps) => React.JSX.Element) & {
+    original: (props: SidebarProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: SidebarProps) => React.JSX.Element) & {
+        original: (props: SidebarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: SidebarProps) => React.JSX.Element) & {
+        original: (props: SidebarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Item: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element) & {
+        original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        Icon: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Action: ({ element, ...props }: import("./components/items/SidebarMenuItemAction").SidebarMenuItemActionProps) => React.JSX.Element;
+    };
+    Link: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element) & {
+        original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemLinkProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        Icon: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Action: ({ element, ...props }: import("./components/items/SidebarMenuItemAction").SidebarMenuItemActionProps) => React.JSX.Element;
+    };
+    Group: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element) & {
+        original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element) & {
+            original: (props: import("./components/items/SidebarMenuItem").SidebarMenuItemButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        Icon: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element) & {
+                original: ({ element, ...props }: import("./components/items/SidebarMenuItemIcon").SidebarMenuItemIconProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        Action: ({ element, ...props }: import("./components/items/SidebarMenuItemAction").SidebarMenuItemActionProps) => React.JSX.Element;
+    };
+    Icon: (({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element) & {
+        original: ({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element) & {
+            original: ({ element, ...props }: import("./components/SidebarIcon").SidebarIconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+};
+export { Sidebar };

package/Sidebar/Sidebar.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "../utils";
+import { SidebarRoot } from "./components/SidebarRoot";
+import { SidebarHeader } from "./components/SidebarHeader";
+import { SidebarContent } from "./components/SidebarContent";
+import { SidebarIcon } from "./components/SidebarIcon";
+import { SidebarFooter } from "./components/SidebarFooter";
+import { SidebarMenuItem } from "./components/items/SidebarMenuItem";
+import { SidebarMenuLink } from "./components/items/SidebarMenuLink";
+import { SidebarMenuRoot } from "./components/items/SidebarMenuRoot";
+import { SidebarMenuGroup } from "./components/items/SidebarMenuGroup";
+const SidebarBase = props => {
+  const {
+    headerProps,
+    rootProps,
+    footerProps,
+    contentProps
+  } = React.useMemo(() => {
+    const {
+      // Header props.
+      title,
+      icon,
+      // Root props.
+      side,
+      // Footer props.
+      footer,
+      // Content props.
+      ...rest
+    } = props;
+    return {
+      headerProps: {
+        title,
+        icon
+      },
+      rootProps: {
+        side
+      },
+      footerProps: {
+        footer
+      },
+      contentProps: rest
+    };
+  }, [props]);
+  return /*#__PURE__*/React.createElement(SidebarRoot, rootProps, /*#__PURE__*/React.createElement(SidebarHeader, headerProps), /*#__PURE__*/React.createElement(SidebarContent, contentProps, /*#__PURE__*/React.createElement(SidebarMenuRoot, null, props.children)), /*#__PURE__*/React.createElement(SidebarFooter, null, /*#__PURE__*/React.createElement(SidebarMenuRoot, null, footerProps.footer)));
+};
+const DecoratableSidebar = makeDecoratable("Sidebar", SidebarBase);
+const Sidebar = withStaticProps(DecoratableSidebar, {
+  Item: SidebarMenuItem,
+  Link: SidebarMenuLink,
+  Group: SidebarMenuGroup,
+  Icon: SidebarIcon
+});
+export { Sidebar };
+
+//# sourceMappingURL=Sidebar.js.map

package/Sidebar/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","withStaticProps","SidebarRoot","SidebarHeader","SidebarContent","SidebarIcon","SidebarFooter","SidebarMenuItem","SidebarMenuLink","SidebarMenuRoot","SidebarMenuGroup","SidebarBase","props","headerProps","rootProps","footerProps","contentProps","useMemo","title","icon","side","footer","rest","createElement","children","DecoratableSidebar","Sidebar","Item","Link","Group","Icon"],"sources":["Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { SidebarRoot } from \"./components/SidebarRoot\";\nimport { SidebarHeader } from \"./components/SidebarHeader\";\nimport { SidebarContent } from \"./components/SidebarContent\";\nimport { SidebarIcon } from \"./components/SidebarIcon\";\nimport { SidebarFooter } from \"./components/SidebarFooter\";\nimport { SidebarMenuItem } from \"./components/items/SidebarMenuItem\";\nimport { SidebarMenuLink } from \"./components/items/SidebarMenuLink\";\nimport { SidebarMenuRoot } from \"./components/items/SidebarMenuRoot\";\nimport { SidebarMenuGroup } from \"~/Sidebar/components/items/SidebarMenuGroup\";\n\ninterface SidebarProps\n    extends Omit<React.ComponentPropsWithoutRef<typeof SidebarRoot>, \"title\">,\n        Omit<React.ComponentPropsWithoutRef<typeof SidebarContent>, \"title\"> {\n    title?: React.ReactNode;\n    icon?: React.ReactNode;\n    children: React.ReactNode;\n    footer?: React.ReactNode;\n}\n\nconst SidebarBase = (props: SidebarProps) => {\n    const { headerProps, rootProps, footerProps, contentProps } = React.useMemo(() => {\n        const {\n            // Header props.\n            title,\n            icon,\n\n            // Root props.\n            side,\n\n            // Footer props.\n            footer,\n\n            // Content props.\n            ...rest\n        } = props;\n\n        return {\n            headerProps: {\n                title,\n                icon\n            },\n            rootProps: {\n                side\n            },\n            footerProps: {\n                footer\n            },\n            contentProps: rest\n        };\n    }, [props]);\n\n    return (\n        <SidebarRoot {...rootProps}>\n            <SidebarHeader {...headerProps} />\n            <SidebarContent {...contentProps}>\n                <SidebarMenuRoot>{props.children}</SidebarMenuRoot>\n            </SidebarContent>\n            <SidebarFooter>\n                <SidebarMenuRoot>{footerProps.footer}</SidebarMenuRoot>\n            </SidebarFooter>\n        </SidebarRoot>\n    );\n};\n\nconst DecoratableSidebar = makeDecoratable(\"Sidebar\", SidebarBase);\n\nconst Sidebar = withStaticProps(DecoratableSidebar, {\n    Item: SidebarMenuItem,\n    Link: SidebarMenuLink,\n    Group: SidebarMenuGroup,\n    Icon: SidebarIcon\n});\n\nexport { Sidebar };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,WAAW;AACpB,SAASC,aAAa;AACtB,SAASC,cAAc;AACvB,SAASC,WAAW;AACpB,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAWzB,MAAMC,WAAW,GAAIC,KAAmB,IAAK;EACzC,MAAM;IAAEC,WAAW;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAa,CAAC,GAAGjB,KAAK,CAACkB,OAAO,CAAC,MAAM;IAC9E,MAAM;MACF;MACAC,KAAK;MACLC,IAAI;MAEJ;MACAC,IAAI;MAEJ;MACAC,MAAM;MAEN;MACA,GAAGC;IACP,CAAC,GAAGV,KAAK;IAET,OAAO;MACHC,WAAW,EAAE;QACTK,KAAK;QACLC;MACJ,CAAC;MACDL,SAAS,EAAE;QACPM;MACJ,CAAC;MACDL,WAAW,EAAE;QACTM;MACJ,CAAC;MACDL,YAAY,EAAEM;IAClB,CAAC;EACL,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;EAEX,oBACIb,KAAA,CAAAwB,aAAA,CAACrB,WAAW,EAAKY,SAAS,eACtBf,KAAA,CAAAwB,aAAA,CAACpB,aAAa,EAAKU,WAAc,CAAC,eAClCd,KAAA,CAAAwB,aAAA,CAACnB,cAAc,EAAKY,YAAY,eAC5BjB,KAAA,CAAAwB,aAAA,CAACd,eAAe,QAAEG,KAAK,CAACY,QAA0B,CACtC,CAAC,eACjBzB,KAAA,CAAAwB,aAAA,CAACjB,aAAa,qBACVP,KAAA,CAAAwB,aAAA,CAACd,eAAe,QAAEM,WAAW,CAACM,MAAwB,CAC3C,CACN,CAAC;AAEtB,CAAC;AAED,MAAMI,kBAAkB,GAAGzB,eAAe,CAAC,SAAS,EAAEW,WAAW,CAAC;AAElE,MAAMe,OAAO,GAAGzB,eAAe,CAACwB,kBAAkB,EAAE;EAChDE,IAAI,EAAEpB,eAAe;EACrBqB,IAAI,EAAEpB,eAAe;EACrBqB,KAAK,EAAEnB,gBAAgB;EACvBoB,IAAI,EAAEzB;AACV,CAAC,CAAC;AAEF,SAASqB,OAAO","ignoreList":[]}