@webiny/admin-ui 0.0.0-unstable.461c047ab7 → 0.0.0-unstable.5387e5f7c8

package/Tooltip/Tooltip.stories.js

@@ -1,183 +1,211 @@
-import React from "react";
-import { Tooltip } from "./";
-import { Button } from "../Button";
-import { Text } from "../Text";
-import { Icon } from "../Icon";
-import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
-import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+import react from "react";
+import { Tooltip } from "./index.js";
+import { Button } from "../Button/index.js";
+import { Text } from "../Text/index.js";
+import { Icon } from "../Icon/index.js";
+import { ReactComponent } from "@webiny/icons/info.svg";
+import { ReactComponent as help_svg_ReactComponent } from "@webiny/icons/help.svg";
 const meta = {
-  title: "Components/Tooltip",
-  component: Tooltip,
-  parameters: {
-    layout: "padded"
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["accent", "subtle"]
+    title: "Components/Tooltip",
+    component: Tooltip,
+    parameters: {
+        layout: "padded"
     },
-    align: {
-      control: "select",
-      options: ["start", "center", "end"]
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "accent",
+                "subtle"
+            ]
+        },
+        align: {
+            control: "select",
+            options: [
+                "start",
+                "center",
+                "end"
+            ]
+        },
+        side: {
+            control: "select",
+            options: [
+                "top",
+                "right",
+                "bottom",
+                "left"
+            ]
+        },
+        showArrow: {
+            control: "boolean",
+            defaultValue: true
+        }
     },
-    side: {
-      control: "select",
-      options: ["top", "right", "bottom", "left"]
-    },
-    showArrow: {
-      control: "boolean",
-      defaultValue: true
-    }
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-justify-center wby-items-center wby-h-48"
-  }, /*#__PURE__*/React.createElement(Story, null)))]
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement(Tooltip.Provider, null, /*#__PURE__*/ react.createElement("div", {
+                className: "flex justify-center items-center h-48"
+            }, /*#__PURE__*/ react.createElement(Story, null)))
+    ]
 };
-export default meta;
-export const Default = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Tooltip trigger"),
-    content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
-  }
+const Tooltip_stories = meta;
+const Default = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Tooltip trigger"),
+        content: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
+    }
 };
-export const AccentVariant = {
-  args: {
-    ...Default.args,
-    variant: "accent"
-  }
+const AccentVariant = {
+    args: {
+        ...Default.args,
+        variant: "accent"
+    }
 };
-export const SubtleVariant = {
-  args: {
-    ...Default.args,
-    variant: "subtle"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-justify-center wby-items-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-48"
-  }, /*#__PURE__*/React.createElement(Story, null)))]
+const SubtleVariant = {
+    args: {
+        ...Default.args,
+        variant: "subtle"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement(Tooltip.Provider, null, /*#__PURE__*/ react.createElement("div", {
+                className: "flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48"
+            }, /*#__PURE__*/ react.createElement(Story, null)))
+    ]
 };
-export const WithoutArrow = {
-  args: {
-    ...Default.args,
-    showArrow: false
-  }
+const WithoutArrow = {
+    args: {
+        ...Default.args,
+        showArrow: false
+    }
 };
-export const WithIconTrigger = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(InfoIcon, null),
-      label: "Information"
-    }),
-    content: "This is a helpful tooltip"
-  }
+const WithIconTrigger = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Information"
+        }),
+        content: "This is a helpful tooltip"
+    }
 };
-export const Documentation = {
-  args: {
-    align: "center",
-    side: "top",
-    variant: "accent",
-    showArrow: true,
-    trigger: /*#__PURE__*/React.createElement("p", null, "Tooltip trigger"),
-    content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
-  },
-  argTypes: {
-    trigger: {
-      description: "The element that triggers the tooltip when hovered. Please refer to the example code for details.",
-      control: "none"
+const Documentation = {
+    args: {
+        align: "center",
+        side: "top",
+        variant: "accent",
+        showArrow: true,
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Tooltip trigger"),
+        content: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
     },
-    content: {
-      description: "The content to display inside the tooltip. Please refer to the example code for details.",
-      control: "none"
-    },
-    side: {
-      description: "The side of the trigger where the tooltip appears.",
-      control: "select",
-      options: ["top", "right", "bottom", "left"]
-    },
-    align: {
-      description: "The alignment of the tooltip relative to the trigger.",
-      control: "select",
-      options: ["start", "center", "end"]
-    },
-    variant: {
-      description: "The visual style variant of the tooltip.",
-      control: "select",
-      options: ["accent", "subtle"]
-    },
-    showArrow: {
-      description: "Whether to show an arrow pointing to the trigger.",
-      control: "boolean"
+    argTypes: {
+        trigger: {
+            description: "The element that triggers the tooltip when hovered. Please refer to the example code for details."
+        },
+        content: {
+            description: "The content to display inside the tooltip. Please refer to the example code for details."
+        },
+        side: {
+            description: "The side of the trigger where the tooltip appears.",
+            control: "select",
+            options: [
+                "top",
+                "right",
+                "bottom",
+                "left"
+            ]
+        },
+        align: {
+            description: "The alignment of the tooltip relative to the trigger.",
+            control: "select",
+            options: [
+                "start",
+                "center",
+                "end"
+            ]
+        },
+        variant: {
+            description: "The visual style variant of the tooltip.",
+            control: "select",
+            options: [
+                "accent",
+                "subtle"
+            ]
+        },
+        showArrow: {
+            description: "Whether to show an arrow pointing to the trigger.",
+            control: "boolean"
+        }
     }
-  }
 };
-export const Positioning = {
-  render: () => /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-gap-md"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Top"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on top"),
-    side: "top"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Right"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on right"),
-    side: "right"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Bottom"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on bottom"),
-    side: "bottom"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Left"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on left"),
-    side: "left"
-  }))
+const Positioning = {
+    render: ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "flex gap-md"
+        }, /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Top"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on top"),
+            side: "top"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Right"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on right"),
+            side: "right"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Bottom"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on bottom"),
+            side: "bottom"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Left"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on left"),
+            side: "left"
+        }))
 };
-export const Alignment = {
-  render: () => /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-gap-md"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Start"),
-    content: /*#__PURE__*/React.createElement("div", null, "Aligned to start"),
-    align: "start"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Center"),
-    content: /*#__PURE__*/React.createElement("div", null, "Aligned to center"),
-    align: "center"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "End"),
-    content: /*#__PURE__*/React.createElement("div", null, "Aligned to end"),
-    align: "end"
-  }))
+const Alignment = {
+    render: ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "flex gap-md"
+        }, /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Start"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Aligned to start"),
+            align: "start"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Center"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Aligned to center"),
+            align: "center"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "End"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Aligned to end"),
+            align: "end"
+        }))
 };
-export const WithButtonTrigger = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      text: "Hover me"
-    }),
-    content: "This tooltip is triggered by a button"
-  }
+const WithButtonTrigger = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            text: "Hover me"
+        }),
+        content: "This tooltip is triggered by a button"
+    }
 };
-export const WithFormattedContent = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Hover for more info"),
-    content: /*#__PURE__*/React.createElement("div", {
-      className: "wby-flex wby-flex-col wby-gap-xs"
-    }, /*#__PURE__*/React.createElement(Text, {
-      size: "sm",
-      className: "wby-font-bold"
-    }, "Important Information"), /*#__PURE__*/React.createElement(Text, {
-      size: "sm"
-    }, "This tooltip contains formatted content with multiple paragraphs."), /*#__PURE__*/React.createElement(Text, {
-      size: "sm"
-    }, "You can include various elements inside tooltips."))
-  }
+const WithFormattedContent = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Hover for more info"),
+        content: /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-xs"
+        }, /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "font-bold"
+        }, "Important Information"), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm"
+        }, "This tooltip contains formatted content with multiple paragraphs."), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm"
+        }, "You can include various elements inside tooltips."))
+    }
 };
-export const WithHelpIcon = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      label: "Help"
-    }),
-    content: "Need help? Contact support at support@example.com"
-  }
+const WithHelpIcon = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            label: "Help"
+        }),
+        content: "Need help? Contact support at support@example.com"
+    }
 };
+export default Tooltip_stories;
+export { AccentVariant, Alignment, Default, Documentation, Positioning, SubtleVariant, WithButtonTrigger, WithFormattedContent, WithHelpIcon, WithIconTrigger, WithoutArrow };
 
 //# sourceMappingURL=Tooltip.stories.js.map

package/Tooltip/Tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","Button","Text","Icon","ReactComponent","InfoIcon","HelpIcon","meta","title","component","parameters","layout","argTypes","variant","control","options","align","side","showArrow","defaultValue","decorators","Story","createElement","Provider","className","Default","args","trigger","content","Fragment","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","icon","label","Documentation","description","Positioning","render","Alignment","WithButtonTrigger","text","WithFormattedContent","size","WithHelpIcon"],"sources":["Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { Button } from \"~/Button\";\nimport { Text } from \"~/Text\";\nimport { Icon } from \"~/Icon\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"wby-flex wby-justify-center wby-items-center wby-h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"wby-flex wby-justify-center wby-items-center wby-bg-neutral-dark wby-text-neutral-light wby-w-full wby-h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\",\n            control: \"none\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\",\n            control: \"none\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"wby-flex wby-gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"wby-flex wby-gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"wby-flex wby-flex-col wby-gap-xs\">\n                <Text size=\"sm\" className=\"wby-font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip/Tooltip.stories.js","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"names":["meta","Tooltip","Story","Default","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","Icon","InfoIcon","Documentation","Positioning","Alignment","WithButtonTrigger","Button","WithFormattedContent","Text","WithHelpIcon","HelpIcon"],"mappings":"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"}

package/Tooltip/components/TooltipArrow.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tooltipArrowVariants: (props?: ({
     variant?: "accent" | "subtle" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TooltipArrowProps = TooltipPrimitive.TooltipArrowProps & VariantProps<typeof tooltipArrowVariants>;
 declare const TooltipArrow: ({ variant, className, ...props }: TooltipArrowProps) => React.JSX.Element;
 export { TooltipArrow, type TooltipArrowProps };

package/Tooltip/components/TooltipArrow.js

@@ -1,28 +1,25 @@
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
+import { Tooltip } from "radix-ui";
+import { cn, cva } from "../../utils.js";
+import * as __rspack_external_react from "react";
 const tooltipArrowVariants = cva("", {
-  variants: {
-    variant: {
-      accent: "wby-fill-bg-neutral-dark",
-      subtle: "wby-fill-neutral-base"
+    variants: {
+        variant: {
+            accent: "fill-bg-neutral-dark",
+            subtle: "fill-neutral-base"
+        }
+    },
+    defaultVariants: {
+        variant: "accent"
     }
-  },
-  defaultVariants: {
-    variant: "accent"
-  }
 });
-const TooltipArrow = ({
-  variant,
-  className,
-  ...props
-}) => /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, Object.assign({}, props, {
-  width: 12,
-  height: 6,
-  className: cn(tooltipArrowVariants({
-    variant
-  }), className)
-}));
+const TooltipArrow = ({ variant, className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tooltip.Arrow, {
+        ...props,
+        width: 12,
+        height: 6,
+        className: cn(tooltipArrowVariants({
+            variant
+        }), className)
+    });
 export { TooltipArrow };
 
 //# sourceMappingURL=TooltipArrow.js.map

package/Tooltip/components/TooltipArrow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipArrowVariants","variants","variant","accent","subtle","defaultVariants","TooltipArrow","className","props","createElement","Arrow","Object","assign","width","height"],"sources":["TooltipArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tooltipArrowVariants = cva(\"\", {\n    variants: {\n        variant: {\n            accent: \"wby-fill-bg-neutral-dark\",\n            subtle: \"wby-fill-neutral-base\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ntype TooltipArrowProps = TooltipPrimitive.TooltipArrowProps &\n    VariantProps<typeof tooltipArrowVariants>;\n\nconst TooltipArrow = ({ variant, className, ...props }: TooltipArrowProps) => (\n    <TooltipPrimitive.Arrow\n        {...props}\n        width={12}\n        height={6}\n        className={cn(tooltipArrowVariants({ variant }), className)}\n    />\n);\n\nexport { TooltipArrow, type TooltipArrowProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,EAAE,EAAE;EACjCE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,0BAA0B;MAClCC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbH,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAKF,MAAMI,YAAY,GAAGA,CAAC;EAAEJ,OAAO;EAAEK,SAAS;EAAE,GAAGC;AAAyB,CAAC,kBACrEb,KAAA,CAAAc,aAAA,CAACZ,gBAAgB,CAACa,KAAK,EAAAC,MAAA,CAAAC,MAAA,KACfJ,KAAK;EACTK,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,CAAE;EACVP,SAAS,EAAET,EAAE,CAACE,oBAAoB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,EAC/D,CACJ;AAED,SAASD,YAAY","ignoreList":[]}
+{"version":3,"file":"Tooltip/components/TooltipArrow.js","sources":["../../../src/Tooltip/components/TooltipArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tooltipArrowVariants = cva(\"\", {\n    variants: {\n        variant: {\n            accent: \"fill-bg-neutral-dark\",\n            subtle: \"fill-neutral-base\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ntype TooltipArrowProps = TooltipPrimitive.TooltipArrowProps &\n    VariantProps<typeof tooltipArrowVariants>;\n\nconst TooltipArrow = ({ variant, className, ...props }: TooltipArrowProps) => (\n    <TooltipPrimitive.Arrow\n        {...props}\n        width={12}\n        height={6}\n        className={cn(tooltipArrowVariants({ variant }), className)}\n    />\n);\n\nexport { TooltipArrow, type TooltipArrowProps };\n"],"names":["tooltipArrowVariants","cva","TooltipArrow","variant","className","props","TooltipPrimitive","cn"],"mappings":";;;AAIA,MAAMA,uBAAuBC,IAAI,IAAI;IACjC,UAAU;QACN,SAAS;YACL,QAAQ;YACR,QAAQ;QACZ;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAKA,MAAMC,eAAe,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,OAA0B,iBACrE,sCAACC,QAAAA,KAAsB;QAClB,GAAGD,KAAK;QACT,OAAO;QACP,QAAQ;QACR,WAAWE,GAAGP,qBAAqB;YAAEG;QAAQ,IAAIC"}

package/Tooltip/components/TooltipContent.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tooltipContentVariants: (props?: ({
     variant?: "accent" | "subtle" | null | undefined;
     hiddenArrow?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TooltipContentProps = TooltipPrimitive.TooltipContentProps & VariantProps<typeof tooltipContentVariants>;
 declare const TooltipContent: ({ className, variant, hiddenArrow, ...props }: TooltipContentProps) => React.JSX.Element;
 export { TooltipContent, type TooltipContentProps };

package/Tooltip/components/TooltipContent.js

@@ -1,33 +1,38 @@
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const tooltipContentVariants = cva(["wby-px-sm-extra wby-py-sm wby-max-w-64 wby-rounded-md wby-text-sm wby-font-normal wby-animate-in wby-fade-in-0 wby-zoom-in-95", "data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=closed]:wby-zoom-out-95", "data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2"], {
-  variants: {
-    variant: {
-      accent: "wby-bg-neutral-dark wby-text-neutral-light",
-      subtle: "wby-bg-neutral-base wby-text-neutral-primary wby-shadow-md"
+import { Tooltip } from "radix-ui";
+import { cn, cva } from "../../utils.js";
+import * as __rspack_external_react from "react";
+const tooltipContentVariants = cva([
+    "z-[var(--z-index-tooltip)] px-sm-extra py-sm max-w-64 rounded-md text-sm font-normal animate-in fade-in-0 zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+], {
+    variants: {
+        variant: {
+            accent: "bg-neutral-dark text-neutral-light",
+            subtle: "bg-neutral-base text-neutral-primary shadow-md"
+        },
+        hiddenArrow: {
+            true: [
+                "data-[side=top]:mb-xs-plus",
+                "data-[side=bottom]:mt-xs-plus",
+                "data-[side=left]:mr-xs-plus",
+                "data-[side=right]:ml-xs-plus"
+            ]
+        }
     },
-    hiddenArrow: {
-      true: ["data-[side=top]:wby-mb-xs-plus", "data-[side=bottom]:wby-mt-xs-plus", "data-[side=left]:wby-mr-xs-plus", "data-[side=right]:wby-ml-xs-plus"]
+    defaultVariants: {
+        variant: "accent"
     }
-  },
-  defaultVariants: {
-    variant: "accent"
-  }
 });
-const TooltipContent = ({
-  className,
-  variant,
-  hiddenArrow,
-  ...props
-}) => /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({
-  collisionPadding: 8,
-  sideOffset: 4,
-  className: cn(tooltipContentVariants({
-    variant,
-    hiddenArrow
-  }), className)
-}, props)));
+const TooltipContent = ({ className, variant, hiddenArrow, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tooltip.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Tooltip.Content, {
+        collisionPadding: 8,
+        sideOffset: 4,
+        className: cn(tooltipContentVariants({
+            variant,
+            hiddenArrow
+        }), className),
+        ...props
+    }));
 export { TooltipContent };
 
 //# sourceMappingURL=TooltipContent.js.map

package/Tooltip/components/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipContentVariants","variants","variant","accent","subtle","hiddenArrow","true","defaultVariants","TooltipContent","className","props","createElement","Portal","Content","Object","assign","collisionPadding","sideOffset"],"sources":["TooltipContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tooltipContentVariants = cva(\n    [\n        \"wby-px-sm-extra wby-py-sm wby-max-w-64 wby-rounded-md wby-text-sm wby-font-normal wby-animate-in wby-fade-in-0 wby-zoom-in-95\",\n        \"data-[state=closed]:wby-animate-out data-[state=closed]:wby-fade-out-0 data-[state=closed]:wby-zoom-out-95\",\n        \"data-[side=bottom]:wby-slide-in-from-top-2 data-[side=left]:wby-slide-in-from-right-2 data-[side=right]:wby-slide-in-from-left-2 data-[side=top]:wby-slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"wby-bg-neutral-dark wby-text-neutral-light\",\n                subtle: \"wby-bg-neutral-base wby-text-neutral-primary wby-shadow-md\"\n            },\n            hiddenArrow: {\n                true: [\n                    \"data-[side=top]:wby-mb-xs-plus\",\n                    \"data-[side=bottom]:wby-mt-xs-plus\",\n                    \"data-[side=left]:wby-mr-xs-plus\",\n                    \"data-[side=right]:wby-ml-xs-plus\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"accent\"\n        }\n    }\n);\n\ntype TooltipContentProps = TooltipPrimitive.TooltipContentProps &\n    VariantProps<typeof tooltipContentVariants>;\n\nconst TooltipContent = ({ className, variant, hiddenArrow, ...props }: TooltipContentProps) => (\n    <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n            collisionPadding={8}\n            sideOffset={4}\n            className={cn(tooltipContentVariants({ variant, hiddenArrow }), className)}\n            {...props}\n        />\n    </TooltipPrimitive.Portal>\n);\n\nexport { TooltipContent, type TooltipContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,sBAAsB,GAAGD,GAAG,CAC9B,CACI,+HAA+H,EAC/H,4GAA4G,EAC5G,6KAA6K,CAChL,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,4CAA4C;MACpDC,MAAM,EAAE;IACZ,CAAC;IACDC,WAAW,EAAE;MACTC,IAAI,EAAE,CACF,gCAAgC,EAChC,mCAAmC,EACnC,iCAAiC,EACjC,kCAAkC;IAE1C;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAKD,MAAMM,cAAc,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEG,WAAW;EAAE,GAAGK;AAA2B,CAAC,kBACtFf,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACe,MAAM,qBACpBjB,KAAA,CAAAgB,aAAA,CAACd,gBAAgB,CAACgB,OAAO,EAAAC,MAAA,CAAAC,MAAA;EACrBC,gBAAgB,EAAE,CAAE;EACpBC,UAAU,EAAE,CAAE;EACdR,SAAS,EAAEX,EAAE,CAACE,sBAAsB,CAAC;IAAEE,OAAO;IAAEG;EAAY,CAAC,CAAC,EAAEI,SAAS;AAAE,GACvEC,KAAK,CACZ,CACoB,CAC5B;AAED,SAASF,cAAc","ignoreList":[]}
+{"version":3,"file":"Tooltip/components/TooltipContent.js","sources":["../../../src/Tooltip/components/TooltipContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tooltipContentVariants = cva(\n    [\n        \"z-[var(--z-index-tooltip)] px-sm-extra py-sm max-w-64 rounded-md text-sm font-normal animate-in fade-in-0 zoom-in-95\",\n        \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"bg-neutral-dark text-neutral-light\",\n                subtle: \"bg-neutral-base text-neutral-primary shadow-md\"\n            },\n            hiddenArrow: {\n                true: [\n                    \"data-[side=top]:mb-xs-plus\",\n                    \"data-[side=bottom]:mt-xs-plus\",\n                    \"data-[side=left]:mr-xs-plus\",\n                    \"data-[side=right]:ml-xs-plus\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"accent\"\n        }\n    }\n);\n\ntype TooltipContentProps = TooltipPrimitive.TooltipContentProps &\n    VariantProps<typeof tooltipContentVariants>;\n\nconst TooltipContent = ({ className, variant, hiddenArrow, ...props }: TooltipContentProps) => (\n    <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n            collisionPadding={8}\n            sideOffset={4}\n            className={cn(tooltipContentVariants({ variant, hiddenArrow }), className)}\n            {...props}\n        />\n    </TooltipPrimitive.Portal>\n);\n\nexport { TooltipContent, type TooltipContentProps };\n"],"names":["tooltipContentVariants","cva","TooltipContent","className","variant","hiddenArrow","props","TooltipPrimitive","cn"],"mappings":";;;AAIA,MAAMA,yBAAyBC,IAC3B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,QAAQ;YACR,QAAQ;QACZ;QACA,aAAa;YACT,MAAM;gBACF;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAMJ,MAAMC,iBAAiB,CAAC,EAAEC,SAAS,EAAEC,OAAO,EAAEC,WAAW,EAAE,GAAGC,OAA4B,iBACtF,sCAACC,QAAAA,MAAuB,sBACpB,sCAACA,QAAAA,OAAwB;QACrB,kBAAkB;QAClB,YAAY;QACZ,WAAWC,GAAGR,uBAAuB;YAAEI;YAASC;QAAY,IAAIF;QAC/D,GAAGG,KAAK"}

package/Tooltip/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./TooltipArrow";
-export * from "./TooltipContent";
+export * from "./TooltipArrow.js";
+export * from "./TooltipContent.js";

package/Tooltip/components/index.js

@@ -1,4 +1,2 @@
-export * from "./TooltipArrow";
-export * from "./TooltipContent";
-
-//# sourceMappingURL=index.js.map
+export * from "./TooltipArrow.js";
+export * from "./TooltipContent.js";