@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/HeaderBar/HeaderBar.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+interface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    start?: React.ReactNode;
+    middle?: React.ReactNode;
+    end?: React.ReactNode;
+}
+declare const HeaderBar: (({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
+    original: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
+        original: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element) & {
+        original: ({ start, middle, end, className, ...props }: HeaderBarProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { HeaderBar, type HeaderBarProps };

package/HeaderBar/HeaderBar.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { cn, makeDecoratable } from "../utils";
+import { Separator } from "../Separator";
+const HeaderBarBase = ({
+  start,
+  middle,
+  end,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("div", Object.assign({
+    className: cn("wby-grid wby-grid-cols-[1fr_auto_1fr] wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base", className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "wby-h-full wby-flex wby-items-center wby-justify-self-start"
+  }, start), /*#__PURE__*/React.createElement("div", {
+    className: "wby-h-full wby-flex wby-items-center"
+  }, middle), /*#__PURE__*/React.createElement("div", {
+    className: "wby-h-full wby-flex wby-items-center wby-justify-self-end"
+  }, end)), /*#__PURE__*/React.createElement(Separator, null));
+};
+const HeaderBar = makeDecoratable("HeaderBar", HeaderBarBase);
+export { HeaderBar };
+
+//# sourceMappingURL=HeaderBar.js.map

package/HeaderBar/HeaderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","makeDecoratable","Separator","HeaderBarBase","start","middle","end","className","props","createElement","Object","assign","HeaderBar"],"sources":["HeaderBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport { Separator } from \"~/Separator\";\n\ninterface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {\n    start?: React.ReactNode;\n    middle?: React.ReactNode;\n    end?: React.ReactNode;\n}\n\nconst HeaderBarBase = ({ start, middle, end, className, ...props }: HeaderBarProps) => {\n    return (\n        <header>\n            <div\n                className={cn(\n                    \"wby-grid wby-grid-cols-[1fr_auto_1fr] wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base\",\n                    className\n                )}\n                {...props}\n            >\n                <div className=\"wby-h-full wby-flex wby-items-center wby-justify-self-start\">\n                    {start}\n                </div>\n                <div className=\"wby-h-full wby-flex wby-items-center\">{middle}</div>\n                <div className=\"wby-h-full wby-flex wby-items-center wby-justify-self-end\">\n                    {end}\n                </div>\n            </div>\n            <Separator />\n        </header>\n    );\n};\n\nconst HeaderBar = makeDecoratable(\"HeaderBar\", HeaderBarBase);\n\nexport { HeaderBar, type HeaderBarProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,SAAS;AAQlB,MAAMC,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC,MAAM;EAAEC,GAAG;EAAEC,SAAS;EAAE,GAAGC;AAAsB,CAAC,KAAK;EACnF,oBACIT,KAAA,CAAAU,aAAA,8BACIV,KAAA,CAAAU,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACIJ,SAAS,EAAEP,EAAE,CACT,+FAA+F,EAC/FO,SACJ;EAAE,GACEC,KAAK,gBAETT,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAA6D,GACvEH,KACA,CAAC,eACNL,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAAsC,GAAEF,MAAY,CAAC,eACpEN,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC;EAA2D,GACrED,GACA,CACJ,CAAC,eACNP,KAAA,CAAAU,aAAA,CAACP,SAAS,MAAE,CACR,CAAC;AAEjB,CAAC;AAED,MAAMU,SAAS,GAAGX,eAAe,CAAC,WAAW,EAAEE,aAAa,CAAC;AAE7D,SAASS,SAAS","ignoreList":[]}

package/HeaderBar/HeaderBar.mdx

@@ -0,0 +1,309 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as HeaderBarStories from './HeaderBar.stories';
+
+<Meta of={HeaderBarStories} />
+
+# HeaderBar
+
+The HeaderBar component is a versatile navigation element that provides a consistent header layout across the application. It divides the header space into three sections (start, middle, and end), allowing for flexible content placement.
+
+## Usage
+
+<Canvas of={HeaderBarStories.Documentation} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const HeaderBarExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const MiddleContent = () => <>Content in the middle</>;
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <HeaderBar
+            start={<StartContent />}
+            middle={<MiddleContent />}
+            end={<EndContent />}
+        />
+    );
+};
+
+export default HeaderBarExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/HeaderBar/HeaderBar.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={HeaderBarStories.Documentation} />
+
+```tsx
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const HeaderBarExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const MiddleContent = () => <>Content in the middle</>;
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md " +
+"wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <HeaderBar
+            start={<StartContent />}
+            middle={<MiddleContent />}
+            end={<EndContent />}
+        />
+    );
+};
+
+export default HeaderBarExample;
+```
+
+## Examples
+
+### Start Content Only
+
+<Canvas of={HeaderBarStories.StartContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar, Text } from "@webiny/admin-ui";
+
+const StartContentOnlyExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    return <HeaderBar start={<StartContent />} />;
+};
+
+export default StartContentOnlyExample;
+` } } />
+
+### Middle Content Only
+
+<Canvas of={HeaderBarStories.MiddleContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar } from "@webiny/admin-ui";
+
+const MiddleContentOnlyExample = () => {
+    const MiddleContent = () => <>Content in the middle</>;
+
+    return <HeaderBar middle={<MiddleContent />} />;
+};
+
+export default MiddleContentOnlyExample;
+` } } />
+
+### End Content Only
+
+<Canvas of={HeaderBarStories.EndContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const EndContentOnlyExample = () => {
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs
+                    wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return <HeaderBar end={<EndContent />} />;
+};
+
+export default EndContentOnlyExample;
+` } } />
+
+### Start and End Content Only
+
+<Canvas of={HeaderBarStories.StartEndContentOnly} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const StartEndContentOnlyExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return <HeaderBar start={<StartContent />} end={<EndContent />} />;
+};
+
+export default StartEndContentOnlyExample;
+` } } />
+
+### Multiple Start Content Items
+
+<Canvas of={HeaderBarStories.MoreStartContent} source={ { code: `
+import React from "react";
+import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+
+const MoreStartContentExample = () => {
+    const StartContent = () => (
+        <Text size={"sm"} className={"wby-text-neutral-dimmed"}>
+            {"Headless CMS / Articles / The best article ever"}
+        </Text>
+    );
+
+    const MiddleContent = () => <>Content in the middle</>;
+
+    const EndContent = () => (
+        <div className={"wby-flex wby-gap-x-sm"}>
+            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
+            <div
+                className={
+                    "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+                }
+            >
+                <Avatar
+                    size={"sm"}
+                    variant={"strong"}
+                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
+                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
+                />
+                <IconButton
+                    variant={"ghost"}
+                    size={"xs"}
+                    color={"neutral-strong"}
+                    icon={<KeyboardArrowRightIcon />}
+                    onClick={() => console.log("clicked")}
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <HeaderBar
+            start={
+                <>
+                    <StartContent />
+                    <StartContent />
+                    <StartContent />
+                </>
+            }
+            middle={<MiddleContent />}
+            end={<EndContent />}
+        />
+    );
+};
+
+export default MoreStartContentExample;
+` } } />

package/HeaderBar/HeaderBar.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HeaderBar } from "./HeaderBar";
+declare const meta: Meta<typeof HeaderBar>;
+export default meta;
+type Story = StoryObj<typeof HeaderBar>;
+export declare const Default: Story;
+export declare const StartContentOnly: Story;
+export declare const MiddleContentOnly: Story;
+export declare const EndContentOnly: Story;
+export declare const StartEndContentOnly: Story;
+export declare const MoreStartContent: Story;
+export declare const Documentation: Story;

package/HeaderBar/HeaderBar.stories.js

@@ -0,0 +1,101 @@
+import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";
+import { HeaderBar } from "./HeaderBar";
+import React from "react";
+import { Button, IconButton } from "../Button";
+import { Avatar } from "../Avatar";
+import { Text } from "../Text";
+const meta = {
+  title: "Components/HeaderBar",
+  component: HeaderBar,
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[850px]  wby-rounded-[5px] wby-px-[50px] wby-content-center"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export default meta;
+const StartExample = () => /*#__PURE__*/React.createElement(Text, {
+  size: "sm",
+  className: "wby-text-neutral-dimmed"
+}, "Headless CMS / Articles / The best article ever");
+const MiddleExample = () => /*#__PURE__*/React.createElement(React.Fragment, null, "Content in the middle");
+const EndExample = () => /*#__PURE__*/React.createElement("div", {
+  className: "wby-flex wby-gap-x-sm"
+}, /*#__PURE__*/React.createElement(Button, {
+  variant: "ghost",
+  size: "md",
+  text: "Root tenant"
+}), /*#__PURE__*/React.createElement("div", {
+  className: "wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light"
+}, /*#__PURE__*/React.createElement(Avatar, {
+  size: "sm",
+  variant: "strong",
+  image: /*#__PURE__*/React.createElement(Avatar.Image, {
+    src: "https://i.pravatar.cc/300"
+  }),
+  fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, {
+    delayMs: 0
+  }, "W")
+}), /*#__PURE__*/React.createElement(IconButton, {
+  variant: "ghost",
+  size: "xs",
+  color: "neutral-strong",
+  icon: /*#__PURE__*/React.createElement(KeyboardArrowRightIcon, null),
+  onClick: () => console.log("clicked")
+})));
+export const Default = {
+  args: {
+    start: /*#__PURE__*/React.createElement(StartExample, null),
+    middle: /*#__PURE__*/React.createElement(MiddleExample, null),
+    end: /*#__PURE__*/React.createElement(EndExample, null)
+  }
+};
+export const StartContentOnly = {
+  args: {
+    start: /*#__PURE__*/React.createElement(StartExample, null)
+  }
+};
+export const MiddleContentOnly = {
+  args: {
+    middle: /*#__PURE__*/React.createElement(MiddleExample, null)
+  }
+};
+export const EndContentOnly = {
+  args: {
+    end: /*#__PURE__*/React.createElement(EndExample, null)
+  }
+};
+export const StartEndContentOnly = {
+  args: {
+    start: /*#__PURE__*/React.createElement(StartExample, null),
+    end: /*#__PURE__*/React.createElement(EndExample, null)
+  }
+};
+export const MoreStartContent = {
+  args: {
+    start: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartExample, null), /*#__PURE__*/React.createElement(StartExample, null), /*#__PURE__*/React.createElement(StartExample, null)),
+    middle: /*#__PURE__*/React.createElement(MiddleExample, null),
+    end: /*#__PURE__*/React.createElement(EndExample, null)
+  }
+};
+export const Documentation = {
+  args: {
+    start: /*#__PURE__*/React.createElement(StartExample, null),
+    middle: /*#__PURE__*/React.createElement(MiddleExample, null),
+    end: /*#__PURE__*/React.createElement(EndExample, null)
+  },
+  argTypes: {
+    start: {
+      description: "Content displayed at the start of the header bar",
+      control: "none"
+    },
+    middle: {
+      description: "Content displayed in the middle of the header bar",
+      control: "none"
+    },
+    end: {
+      description: "Content displayed at the end of the header bar",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=HeaderBar.stories.js.map

package/HeaderBar/HeaderBar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ReactComponent","KeyboardArrowRightIcon","HeaderBar","React","Button","IconButton","Avatar","Text","meta","title","component","decorators","Story","createElement","className","StartExample","size","MiddleExample","Fragment","EndExample","variant","text","image","Image","src","fallback","Fallback","delayMs","color","icon","onClick","console","log","Default","args","start","middle","end","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation","argTypes","description","control"],"sources":["HeaderBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { HeaderBar } from \"./HeaderBar\";\nimport React from \"react\";\nimport { Button, IconButton } from \"~/Button\";\nimport { Avatar } from \"~/Avatar\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof HeaderBar> = {\n    title: \"Components/HeaderBar\",\n    component: HeaderBar,\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[850px]  wby-rounded-[5px] wby-px-[50px] wby-content-center\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof HeaderBar>;\n\nconst StartExample = () => (\n    <Text size={\"sm\"} className={\"wby-text-neutral-dimmed\"}>\n        {\"Headless CMS / Articles / The best article ever\"}\n    </Text>\n);\n\nconst MiddleExample = () => <>Content in the middle</>;\n\nconst EndExample = () => (\n    <div className={\"wby-flex wby-gap-x-sm\"}>\n        <Button variant={\"ghost\"} size={\"md\"} text={\"Root tenant\"} />\n        <div\n            className={\n                \"wby-flex wby-items-center wby-rounded-md wby-gap-xxs wby-py-xs wby-px-xs wby-bg-neutral-light\"\n            }\n        >\n            <Avatar\n                size={\"sm\"}\n                variant={\"strong\"}\n                image={<Avatar.Image src={\"https://i.pravatar.cc/300\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                color={\"neutral-strong\"}\n                icon={<KeyboardArrowRightIcon />}\n                onClick={() => console.log(\"clicked\")}\n            />\n        </div>\n    </div>\n);\n\nexport const Default: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const StartContentOnly: Story = {\n    args: {\n        start: <StartExample />\n    }\n};\n\nexport const MiddleContentOnly: Story = {\n    args: {\n        middle: <MiddleExample />\n    }\n};\n\nexport const EndContentOnly: Story = {\n    args: {\n        end: <EndExample />\n    }\n};\n\nexport const StartEndContentOnly: Story = {\n    args: {\n        start: <StartExample />,\n        end: <EndExample />\n    }\n};\n\nexport const MoreStartContent: Story = {\n    args: {\n        start: (\n            <>\n                <StartExample />\n                <StartExample />\n                <StartExample />\n            </>\n        ),\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    },\n    argTypes: {\n        start: {\n            description: \"Content displayed at the start of the header bar\",\n            control: \"none\"\n        },\n        middle: {\n            description: \"Content displayed in the middle of the header bar\",\n            control: \"none\"\n        },\n        end: {\n            description: \"Content displayed at the end of the header bar\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"AACA,SAASA,cAAc,IAAIC,sBAAsB,QAAQ,uCAAuC;AAChG,SAASC,SAAS;AAClB,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,UAAU;AAC3B,SAASC,MAAM;AACf,SAASC,IAAI;AAEb,MAAMC,IAA4B,GAAG;EACjCC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAER,SAAS;EACpBS,UAAU,EAAE,CACRC,KAAK,iBACDT,KAAA,CAAAU,aAAA;IAAKC,SAAS,EAAC;EAAkG,gBAC7GX,KAAA,CAAAU,aAAA,CAACD,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,eAAeJ,IAAI;AAInB,MAAMO,YAAY,GAAGA,CAAA,kBACjBZ,KAAA,CAAAU,aAAA,CAACN,IAAI;EAACS,IAAI,EAAE,IAAK;EAACF,SAAS,EAAE;AAA0B,GAClD,iDACC,CACT;AAED,MAAMG,aAAa,GAAGA,CAAA,kBAAMd,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAe,QAAA,QAAE,uBAAuB,CAAC;AAEtD,MAAMC,UAAU,GAAGA,CAAA,kBACfhB,KAAA,CAAAU,aAAA;EAAKC,SAAS,EAAE;AAAwB,gBACpCX,KAAA,CAAAU,aAAA,CAACT,MAAM;EAACgB,OAAO,EAAE,OAAQ;EAACJ,IAAI,EAAE,IAAK;EAACK,IAAI,EAAE;AAAc,CAAE,CAAC,eAC7DlB,KAAA,CAAAU,aAAA;EACIC,SAAS,EACL;AACH,gBAEDX,KAAA,CAAAU,aAAA,CAACP,MAAM;EACHU,IAAI,EAAE,IAAK;EACXI,OAAO,EAAE,QAAS;EAClBE,KAAK,eAAEnB,KAAA,CAAAU,aAAA,CAACP,MAAM,CAACiB,KAAK;IAACC,GAAG,EAAE;EAA4B,CAAE,CAAE;EAC1DC,QAAQ,eAAEtB,KAAA,CAAAU,aAAA,CAACP,MAAM,CAACoB,QAAQ;IAACC,OAAO,EAAE;EAAE,GAAC,GAAkB;AAAE,CAC9D,CAAC,eACFxB,KAAA,CAAAU,aAAA,CAACR,UAAU;EACPe,OAAO,EAAE,OAAQ;EACjBJ,IAAI,EAAE,IAAK;EACXY,KAAK,EAAE,gBAAiB;EACxBC,IAAI,eAAE1B,KAAA,CAAAU,aAAA,CAACZ,sBAAsB,MAAE,CAAE;EACjC6B,OAAO,EAAEA,CAAA,KAAMC,OAAO,CAACC,GAAG,CAAC,SAAS;AAAE,CACzC,CACA,CACJ,CACR;AAED,OAAO,MAAMC,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,KAAK,eAAEhC,KAAA,CAAAU,aAAA,CAACE,YAAY,MAAE,CAAC;IACvBqB,MAAM,eAAEjC,KAAA,CAAAU,aAAA,CAACI,aAAa,MAAE,CAAC;IACzBoB,GAAG,eAAElC,KAAA,CAAAU,aAAA,CAACM,UAAU,MAAE;EACtB;AACJ,CAAC;AAED,OAAO,MAAMmB,gBAAuB,GAAG;EACnCJ,IAAI,EAAE;IACFC,KAAK,eAAEhC,KAAA,CAAAU,aAAA,CAACE,YAAY,MAAE;EAC1B;AACJ,CAAC;AAED,OAAO,MAAMwB,iBAAwB,GAAG;EACpCL,IAAI,EAAE;IACFE,MAAM,eAAEjC,KAAA,CAAAU,aAAA,CAACI,aAAa,MAAE;EAC5B;AACJ,CAAC;AAED,OAAO,MAAMuB,cAAqB,GAAG;EACjCN,IAAI,EAAE;IACFG,GAAG,eAAElC,KAAA,CAAAU,aAAA,CAACM,UAAU,MAAE;EACtB;AACJ,CAAC;AAED,OAAO,MAAMsB,mBAA0B,GAAG;EACtCP,IAAI,EAAE;IACFC,KAAK,eAAEhC,KAAA,CAAAU,aAAA,CAACE,YAAY,MAAE,CAAC;IACvBsB,GAAG,eAAElC,KAAA,CAAAU,aAAA,CAACM,UAAU,MAAE;EACtB;AACJ,CAAC;AAED,OAAO,MAAMuB,gBAAuB,GAAG;EACnCR,IAAI,EAAE;IACFC,KAAK,eACDhC,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAe,QAAA,qBACIf,KAAA,CAAAU,aAAA,CAACE,YAAY,MAAE,CAAC,eAChBZ,KAAA,CAAAU,aAAA,CAACE,YAAY,MAAE,CAAC,eAChBZ,KAAA,CAAAU,aAAA,CAACE,YAAY,MAAE,CACjB,CACL;IACDqB,MAAM,eAAEjC,KAAA,CAAAU,aAAA,CAACI,aAAa,MAAE,CAAC;IACzBoB,GAAG,eAAElC,KAAA,CAAAU,aAAA,CAACM,UAAU,MAAE;EACtB;AACJ,CAAC;AAED,OAAO,MAAMwB,aAAoB,GAAG;EAChCT,IAAI,EAAE;IACFC,KAAK,eAAEhC,KAAA,CAAAU,aAAA,CAACE,YAAY,MAAE,CAAC;IACvBqB,MAAM,eAAEjC,KAAA,CAAAU,aAAA,CAACI,aAAa,MAAE,CAAC;IACzBoB,GAAG,eAAElC,KAAA,CAAAU,aAAA,CAACM,UAAU,MAAE;EACtB,CAAC;EACDyB,QAAQ,EAAE;IACNT,KAAK,EAAE;MACHU,WAAW,EAAE,kDAAkD;MAC/DC,OAAO,EAAE;IACb,CAAC;IACDV,MAAM,EAAE;MACJS,WAAW,EAAE,mDAAmD;MAChEC,OAAO,EAAE;IACb,CAAC;IACDT,GAAG,EAAE;MACDQ,WAAW,EAAE,gDAAgD;MAC7DC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}

package/HeaderBar/index.d.ts

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

package/HeaderBar/index.js

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

package/HeaderBar/index.js.map

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

package/Heading/Heading.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
+declare const headingVariants: (props?: ({
+    level?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
+    as?: HeadingTags;
+}
+declare const Heading: (({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
+    original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
+        original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element) & {
+        original: ({ children, level, className, as, ...props }: HeadingProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Heading, type HeadingProps };

package/Heading/Heading.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { cn, makeDecoratable, cva } from "../utils";
+// Create a mapping of variant to tag
+const TAG_MAP = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+const headingVariants = cva("wby-font-sans", {
+  variants: {
+    level: {
+      1: "wby-text-h1",
+      2: "wby-text-h2",
+      3: "wby-text-h3",
+      4: "wby-text-h4",
+      5: "wby-text-h5",
+      6: "wby-text-h6"
+    }
+  },
+  defaultVariants: {
+    level: 1
+  }
+});
+const HeadingBase = ({
+  children,
+  level,
+  className,
+  as,
+  ...props
+}) => {
+  // Ensure `level` is a valid number, or fallback to a default value 1
+  const validatedLevel = level && level in TAG_MAP ? level : 1;
+
+  // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`
+  const Tag = as || TAG_MAP[validatedLevel];
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, props, {
+    className: cn(headingVariants({
+      level
+    }), className)
+  }), children);
+};
+const Heading = makeDecoratable("Heading", HeadingBase);
+export { Heading };
+
+//# sourceMappingURL=Heading.js.map

package/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","makeDecoratable","cva","TAG_MAP","headingVariants","variants","level","defaultVariants","HeadingBase","children","className","as","props","validatedLevel","Tag","createElement","Object","assign","Heading"],"sources":["Heading.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils\";\n\nexport type HeadingTags = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;\n\n// Create a mapping of variant to tag\nconst TAG_MAP: Record<HeadingLevels, HeadingTags> = {\n    1: \"h1\",\n    2: \"h2\",\n    3: \"h3\",\n    4: \"h4\",\n    5: \"h5\",\n    6: \"h6\"\n};\n\nconst headingVariants = cva(\"wby-font-sans\", {\n    variants: {\n        level: {\n            1: \"wby-text-h1\",\n            2: \"wby-text-h2\",\n            3: \"wby-text-h3\",\n            4: \"wby-text-h4\",\n            5: \"wby-text-h5\",\n            6: \"wby-text-h6\"\n        }\n    },\n    defaultVariants: {\n        level: 1\n    }\n});\n\ninterface HeadingProps\n    extends React.HTMLAttributes<HTMLHeadingElement>,\n        VariantProps<typeof headingVariants> {\n    as?: HeadingTags;\n}\n\nconst HeadingBase = ({ children, level, className, as, ...props }: HeadingProps) => {\n    // Ensure `level` is a valid number, or fallback to a default value 1\n    const validatedLevel = level && level in TAG_MAP ? level : 1;\n\n    // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`\n    const Tag = as || TAG_MAP[validatedLevel];\n\n    return (\n        <Tag {...props} className={cn(headingVariants({ level }), className)}>\n            {children}\n        </Tag>\n    );\n};\n\nconst Heading = makeDecoratable(\"Heading\", HeadingBase);\n\nexport { Heading, type HeadingProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AAKjC;AACA,MAAMC,OAA2C,GAAG;EAChD,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE,IAAI;EACP,CAAC,EAAE;AACP,CAAC;AAED,MAAMC,eAAe,GAAGF,GAAG,CAAC,eAAe,EAAE;EACzCG,QAAQ,EAAE;IACNC,KAAK,EAAE;MACH,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE,aAAa;MAChB,CAAC,EAAE;IACP;EACJ,CAAC;EACDC,eAAe,EAAE;IACbD,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAQF,MAAME,WAAW,GAAGA,CAAC;EAAEC,QAAQ;EAAEH,KAAK;EAAEI,SAAS;EAAEC,EAAE;EAAE,GAAGC;AAAoB,CAAC,KAAK;EAChF;EACA,MAAMC,cAAc,GAAGP,KAAK,IAAIA,KAAK,IAAIH,OAAO,GAAGG,KAAK,GAAG,CAAC;;EAE5D;EACA,MAAMQ,GAAG,GAAGH,EAAE,IAAIR,OAAO,CAACU,cAAc,CAAC;EAEzC,oBACId,KAAA,CAAAgB,aAAA,CAACD,GAAG,EAAAE,MAAA,CAAAC,MAAA,KAAKL,KAAK;IAAEF,SAAS,EAAEV,EAAE,CAACI,eAAe,CAAC;MAAEE;IAAM,CAAC,CAAC,EAAEI,SAAS;EAAE,IAChED,QACA,CAAC;AAEd,CAAC;AAED,MAAMS,OAAO,GAAGjB,eAAe,CAAC,SAAS,EAAEO,WAAW,CAAC;AAEvD,SAASU,OAAO","ignoreList":[]}