@webiny/admin-ui 6.0.0-alpha.0

package/Tabs/Tabs.stories.js

@@ -0,0 +1,248 @@
+import React, { useState } from "react";
+import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
+import { Tabs } from "./Tabs";
+const meta = {
+  title: "Components/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "account",
+      value: "account",
+      trigger: "Account",
+      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum."
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "password",
+      value: "password",
+      trigger: "Password",
+      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+    })]
+  }
+};
+export const SizeSmall = {
+  args: {
+    ...Default.args,
+    size: "sm"
+  }
+};
+export const SizeMedium = {
+  args: {
+    ...Default.args,
+    size: "md"
+  }
+};
+export const SizeLarge = {
+  args: {
+    ...Default.args,
+    size: "lg"
+  }
+};
+export const SizeExtraLarge = {
+  args: {
+    ...Default.args,
+    size: "xl"
+  }
+};
+export const SpacingExtraSmall = {
+  args: {
+    ...Default.args,
+    spacing: "xs"
+  }
+};
+export const SpacingSmall = {
+  args: {
+    ...Default.args,
+    spacing: "sm"
+  }
+};
+export const SpacingMedium = {
+  args: {
+    ...Default.args,
+    spacing: "md"
+  }
+};
+export const SpacingLarge = {
+  args: {
+    ...Default.args,
+    spacing: "lg"
+  }
+};
+export const SpacingExtraLarge = {
+  args: {
+    ...Default.args,
+    spacing: "xl"
+  }
+};
+export const SpacingDoubleExtraLarge = {
+  args: {
+    ...Default.args,
+    spacing: "xxl"
+  }
+};
+export const WithSeparator = {
+  args: {
+    ...Default.args,
+    separator: true
+  }
+};
+export const WithDefaultValue = {
+  args: {
+    ...Default.args,
+    defaultValue: "password"
+  }
+};
+export const WithControlledValue = {
+  args: {
+    ...Default.args,
+    value: "password"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement(Tabs, Object.assign({}, args, {
+      value: value,
+      onValueChange: setValue
+    }));
+  }
+};
+export const WithIcons = {
+  args: {
+    ...Default.args,
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "account",
+      value: "account",
+      trigger: "Account",
+      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+      icon: /*#__PURE__*/React.createElement(PersonIcon, null)
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "password",
+      value: "password",
+      trigger: "Password",
+      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. ",
+      icon: /*#__PURE__*/React.createElement(LockIcon, null)
+    })]
+  }
+};
+export const WithDisabledTab = {
+  args: {
+    ...Default.args,
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "account",
+      value: "account",
+      trigger: "Account",
+      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+      disabled: true
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "password",
+      value: "password",
+      trigger: "Password",
+      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+    })]
+  }
+};
+export const WithHiddenTab = {
+  args: {
+    ...Default.args,
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "account",
+      value: "account",
+      trigger: "Account",
+      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+      visible: false
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "password",
+      value: "password",
+      trigger: "Password",
+      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+    })]
+  }
+};
+export const WithCustomTabSpacing = {
+  args: {
+    ...Default.args,
+    spacing: "sm",
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "account",
+      value: "account",
+      trigger: "Account",
+      content: "Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+      spacing: "xxl"
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "password",
+      value: "password",
+      trigger: "Password",
+      content: "Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+    })]
+  }
+};
+
+// Update the Documentation story to properly handle control changes
+export const Documentation = {
+  render: args => {
+    // Force re-render when args change by using a key
+    return /*#__PURE__*/React.createElement(Tabs, Object.assign({
+      key: JSON.stringify(args)
+    }, args));
+  },
+  args: {
+    size: "md",
+    spacing: "lg",
+    separator: true,
+    defaultValue: "account",
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "account",
+      value: "account",
+      trigger: "Account",
+      content: "Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences."
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "security",
+      value: "security",
+      trigger: "Security",
+      content: "Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity."
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "preferences",
+      value: "preferences",
+      trigger: "Preferences",
+      content: "Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings."
+    })],
+    value: undefined
+  },
+  argTypes: {
+    size: {
+      description: "Size of the tabs",
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+      defaultValue: "md"
+    },
+    spacing: {
+      description: "Spacing around the tabs and content",
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl", "xxl"],
+      defaultValue: "lg"
+    },
+    separator: {
+      description: "Whether to show a separator line below the tabs, by default it's `false`.",
+      control: "boolean",
+      defaultValue: false
+    },
+    defaultValue: {
+      description: "The value of the tab that should be active by default",
+      control: "text"
+    },
+    value: {
+      description: "The controlled value of the active tab, please refer to the example code for details.",
+      control: "none"
+    },
+    tabs: {
+      description: "The tabs to render, please refer to the example code for details.",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=Tabs.stories.js.map

package/Tabs/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ReactComponent","PersonIcon","LockIcon","Tabs","meta","title","component","parameters","layout","Default","args","tabs","createElement","Tab","key","value","trigger","content","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","spacing","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","separator","WithDefaultValue","defaultValue","WithControlledValue","render","setValue","Object","assign","onValueChange","WithIcons","icon","WithDisabledTab","disabled","WithHiddenTab","visible","WithCustomTabSpacing","Documentation","JSON","stringify","undefined","argTypes","description","control","options"],"sources":["Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\",\n            control: \"none\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Tabs/components/Content.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { type VariantProps } from "../../utils";
+declare const tabContentVariants: (props?: ({
+    spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type ContentProps = Omit<TabsPrimitive.TabsContentProps, "children" | "content"> & VariantProps<typeof tabContentVariants> & {
+    content: React.ReactNode;
+};
+declare const Content: ({ className, content, spacing, ...props }: ContentProps) => React.JSX.Element;
+export { Content, type ContentProps };

package/Tabs/components/Content.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn, cva } from "../../utils";
+const tabContentVariants = cva(["wby-bg-transparent", "focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed",
+// By default, the inner content is removed by the DOM when the tab becomes inactive.
+// This is a problem when we need to keep track of the state inside a tab content, such as forms.
+//  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.
+"data-[state=inactive]:wby-hidden"], {
+  variants: {
+    spacing: {
+      xs: "wby-p-xs",
+      sm: "wby-p-sm",
+      md: "wby-p-md",
+      lg: "wby-p-lg",
+      xl: "wby-p-xl",
+      xxl: "wby-p-xxl"
+    }
+  }
+});
+const Content = ({
+  className,
+  content,
+  spacing,
+  ...props
+}) => /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({
+  className: cn(tabContentVariants({
+    spacing
+  }), className),
+  forceMount: true
+}, props), content);
+export { Content };
+
+//# sourceMappingURL=Content.js.map

package/Tabs/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabContentVariants","variants","spacing","xs","sm","md","lg","xl","xxl","Content","className","content","props","createElement","Object","assign","forceMount"],"sources":["Content.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tabContentVariants = cva(\n    [\n        \"wby-bg-transparent\",\n        \"focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\",\n        // By default, the inner content is removed by the DOM when the tab becomes inactive.\n        // This is a problem when we need to keep track of the state inside a tab content, such as forms.\n        //  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.\n        \"data-[state=inactive]:wby-hidden\"\n    ],\n    {\n        variants: {\n            spacing: {\n                xs: \"wby-p-xs\",\n                sm: \"wby-p-sm\",\n                md: \"wby-p-md\",\n                lg: \"wby-p-lg\",\n                xl: \"wby-p-xl\",\n                xxl: \"wby-p-xxl\"\n            }\n        }\n    }\n);\n\ntype ContentProps = Omit<TabsPrimitive.TabsContentProps, \"children\" | \"content\"> &\n    VariantProps<typeof tabContentVariants> & {\n        content: React.ReactNode;\n    };\n\nconst Content = ({ className, content, spacing, ...props }: ContentProps) => (\n    <TabsPrimitive.Content\n        className={cn(tabContentVariants({ spacing }), className)}\n        forceMount={true}\n        {...props}\n    >\n        {content}\n    </TabsPrimitive.Content>\n);\n\nexport { Content, type ContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,kBAAkB,GAAGD,GAAG,CAC1B,CACI,oBAAoB,EACpB,gGAAgG;AAChG;AACA;AACA;AACA,kCAAkC,CACrC,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,GAAG,EAAE;IACT;EACJ;AACJ,CACJ,CAAC;AAOD,MAAMC,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAET,OAAO;EAAE,GAAGU;AAAoB,CAAC,kBACpEjB,KAAA,CAAAkB,aAAA,CAAChB,aAAa,CAACY,OAAO,EAAAK,MAAA,CAAAC,MAAA;EAClBL,SAAS,EAAEZ,EAAE,CAACE,kBAAkB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEQ,SAAS,CAAE;EAC1DM,UAAU,EAAE;AAAK,GACbJ,KAAK,GAERD,OACkB,CAC1B;AAED,SAASF,OAAO","ignoreList":[]}

package/Tabs/components/Context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TabItem } from "./Tab";
+interface ITabsContext {
+    addTab(props: TabItem): void;
+    removeTab(id: string): void;
+}
+declare const TabsContext: import("react").Context<ITabsContext | undefined>;
+export { TabsContext, type ITabsContext };

package/Tabs/components/Context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const TabsContext = /*#__PURE__*/createContext(undefined);
+export { TabsContext };
+
+//# sourceMappingURL=Context.js.map

package/Tabs/components/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","TabsContext","undefined"],"sources":["Context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { TabItem } from \"./Tab\";\n\ninterface ITabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nconst TabsContext = createContext<ITabsContext | undefined>(undefined);\n\nexport { TabsContext, type ITabsContext };\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAQrC,MAAMC,WAAW,gBAAGD,aAAa,CAA2BE,SAAS,CAAC;AAEtE,SAASD,WAAW","ignoreList":[]}

package/Tabs/components/List.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { type VariantProps } from "../../utils";
+declare const tabListVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
+    separator?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;
+declare const List: ({ className, spacing, size, separator, ...props }: ListProps) => React.JSX.Element;
+export { List, type ListProps, tabListVariants };

package/Tabs/components/List.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn, cva } from "../../utils";
+const tabListVariants = cva("wby-w-full wby-inline-flex wby-items-center wby-justify-start", {
+  variants: {
+    size: {
+      sm: "wby-gap-sm",
+      md: "wby-gap-sm",
+      lg: "wby-gap-sm-extra",
+      xl: "wby-gap-md"
+    },
+    spacing: {
+      xs: "wby-px-xs",
+      sm: "wby-px-sm",
+      md: "wby-px-md",
+      lg: "wby-px-lg",
+      xl: "wby-px-xl",
+      xxl: "wby-px-xxl"
+    },
+    separator: {
+      true: "wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+const List = ({
+  className,
+  spacing,
+  size,
+  separator,
+  ...props
+}) => /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({
+  className: cn(tabListVariants({
+    spacing,
+    size,
+    separator
+  }), className)
+}, props));
+export { List, tabListVariants };
+
+//# sourceMappingURL=List.js.map

package/Tabs/components/List.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabListVariants","variants","size","sm","md","lg","xl","spacing","xs","xxl","separator","true","defaultVariants","List","className","props","createElement","Object","assign"],"sources":["List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tabListVariants = cva(\"wby-w-full wby-inline-flex wby-items-center wby-justify-start\", {\n    variants: {\n        size: {\n            sm: \"wby-gap-sm\",\n            md: \"wby-gap-sm\",\n            lg: \"wby-gap-sm-extra\",\n            xl: \"wby-gap-md\"\n        },\n        spacing: {\n            xs: \"wby-px-xs\",\n            sm: \"wby-px-sm\",\n            md: \"wby-px-md\",\n            lg: \"wby-px-lg\",\n            xl: \"wby-px-xl\",\n            xxl: \"wby-px-xxl\"\n        },\n        separator: {\n            true: \"wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\"\n        }\n    },\n    defaultVariants: {\n        size: \"sm\"\n    }\n});\n\ntype ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;\n\nconst List = ({ className, spacing, size, separator, ...props }: ListProps) => (\n    <TabsPrimitive.List\n        className={cn(tabListVariants({ spacing, size, separator }), className)}\n        {...props}\n    />\n);\n\nexport { List, type ListProps, tabListVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,eAAe,GAAGD,GAAG,CAAC,+DAA+D,EAAE;EACzFE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,kBAAkB;MACtBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,EAAE,EAAE,WAAW;MACfL,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfG,GAAG,EAAE;IACT,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbV,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAIF,MAAMW,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEL,IAAI;EAAEQ,SAAS;EAAE,GAAGK;AAAiB,CAAC,kBACtEpB,KAAA,CAAAqB,aAAA,CAACnB,aAAa,CAACgB,IAAI,EAAAI,MAAA,CAAAC,MAAA;EACfJ,SAAS,EAAEhB,EAAE,CAACE,eAAe,CAAC;IAAEO,OAAO;IAAEL,IAAI;IAAEQ;EAAU,CAAC,CAAC,EAAEI,SAAS;AAAE,GACpEC,KAAK,CACZ,CACJ;AAED,SAASF,IAAI,EAAkBb,eAAe","ignoreList":[]}

package/Tabs/components/Tab.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { type VariantProps } from "../../utils";
+import { tabListVariants } from "./List";
+interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content"> {
+    value: string;
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    icon?: React.ReactElement;
+    spacing?: VariantProps<typeof tabListVariants>["spacing"];
+    disabled?: boolean;
+    visible?: boolean;
+    "data-testid"?: string;
+}
+interface TabItem extends TabProps {
+    id: string;
+}
+declare const Tab: ((props: TabProps) => null) & {
+    original: (props: TabProps) => null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: TabProps) => null) & {
+        original: (props: TabProps) => null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: TabProps) => null) & {
+        original: (props: TabProps) => null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Tab, type TabProps, type TabItem };

package/Tabs/components/Tab.js

@@ -0,0 +1,24 @@
+import { useContext, useEffect, useRef } from "react";
+import { makeDecoratable, generateId } from "../../utils";
+import { TabsContext } from "./Context";
+const DecoratableTab = props => {
+  const tabsContext = useContext(TabsContext);
+  const idRef = useRef(generateId());
+  useEffect(() => {
+    tabsContext.addTab({
+      ...props,
+      id: idRef.current,
+      visible: props.visible ?? true
+    });
+  }, [props]);
+  useEffect(() => {
+    return () => {
+      return tabsContext.removeTab(idRef.current);
+    };
+  }, []);
+  return null;
+};
+const Tab = makeDecoratable("Tab", DecoratableTab);
+export { Tab };
+
+//# sourceMappingURL=Tab.js.map

package/Tabs/components/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","useEffect","useRef","makeDecoratable","generateId","TabsContext","DecoratableTab","props","tabsContext","idRef","addTab","id","current","visible","removeTab","Tab"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { makeDecoratable, generateId, type VariantProps } from \"~/utils\";\nimport { TabsContext } from \"./Context\";\nimport { tabListVariants } from \"./List\";\n\ninterface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"content\"> {\n    value: string;\n    trigger: React.ReactNode;\n    content: React.ReactNode;\n    icon?: React.ReactElement;\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    disabled?: boolean;\n    visible?: boolean;\n    \"data-testid\"?: string;\n}\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\nconst DecoratableTab = (props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n};\n\nconst Tab = makeDecoratable(\"Tab\", DecoratableTab);\n\nexport { Tab, type TabProps, type TabItem };\n"],"mappings":"AAAA,SAAgBA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC5D,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,WAAW;AAkBpB,MAAMC,cAAc,GAAIC,KAAe,IAAK;EACxC,MAAMC,WAAW,GAAGR,UAAU,CAACK,WAAW,CAAC;EAC3C,MAAMI,KAAK,GAAGP,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;EAElCH,SAAS,CAAC,MAAM;IACZO,WAAW,CAAEE,MAAM,CAAC;MAAE,GAAGH,KAAK;MAAEI,EAAE,EAAEF,KAAK,CAACG,OAAO;MAAEC,OAAO,EAAEN,KAAK,CAACM,OAAO,IAAI;IAAK,CAAC,CAAC;EACxF,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEXN,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,OAAOO,WAAW,CAAEM,SAAS,CAACL,KAAK,CAACG,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC;AAED,MAAMG,GAAG,GAAGZ,eAAe,CAAC,KAAK,EAAEG,cAAc,CAAC;AAElD,SAASS,GAAG","ignoreList":[]}

package/Tabs/components/Trigger.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { type VariantProps } from "../../utils";
+declare const tabTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    visible?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, "children"> & VariantProps<typeof tabTriggerVariants> & {
+    text: React.ReactNode;
+    icon?: React.ReactElement;
+    "data-testid"?: string;
+};
+declare const Trigger: ({ className, size, icon, text, visible, ...props }: TriggerProps) => React.JSX.Element;
+export { Trigger, type TriggerProps };

package/Tabs/components/Trigger.js

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn, cva } from "../../utils";
+import { Icon } from "../../Icon";
+const tabTriggerVariants = cva(["wby-group wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-outline-none wby-transition-all", "wby-text-neutral-strong hover:text-neutral-primary", "wby-border-b-md wby-border-transparent wby-border-solid", "data-[state=active]:wby-border-accent-default data-[state=active]:wby-text-neutral-primary", "disabled:wby-pointer-events-none disabled:!wby-text-neutral-disabled disabled:!wby-fill-neutral-disabled disabled:!wby-border-transparent"], {
+  variants: {
+    size: {
+      sm: "wby-text-sm wby-h-[40px]",
+      md: "wby-text-md wby-h-[48px]",
+      lg: "wby-text-lg wby-h-[56px]",
+      xl: "wby-text-xl wby-h-[64px]"
+    },
+    visible: {
+      false: "wby-hidden"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+const innerTabTriggerVariants = cva(["wby-inline-flex wby-items-center wby-justify-start wby-gap-xs", "group-hover:wby-bg-neutral-dimmed", "group-focus-visible:wby-ring-lg group-focus-visible:wby-ring-primary-dimmed"], {
+  variants: {
+    size: {
+      sm: "wby-rounded-sm wby-p-xs",
+      md: "wby-rounded-sm wby-px-xs wby-py-xs-plus",
+      lg: "wby-rounded-sm wby-px-xs-plus wby-py-sm-plus",
+      xl: "wby-rounded-lg wby-px-sm wby-py-sm-plus"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+const Trigger = ({
+  className,
+  size,
+  icon,
+  text,
+  visible,
+  ...props
+}) => /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({
+  className: cn(tabTriggerVariants({
+    size,
+    visible
+  }), className)
+}, props), /*#__PURE__*/React.createElement("div", {
+  className: cn(innerTabTriggerVariants({
+    size
+  }))
+}, icon && /*#__PURE__*/React.createElement(Icon, {
+  icon: icon,
+  size: "sm",
+  label: String(text),
+  color: "neutral-light"
+}), text));
+export { Trigger };
+
+//# sourceMappingURL=Trigger.js.map

package/Tabs/components/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","Icon","tabTriggerVariants","variants","size","sm","md","lg","xl","visible","false","defaultVariants","innerTabTriggerVariants","Trigger","className","icon","text","props","createElement","Object","assign","label","String","color"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { Icon } from \"~/Icon\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"wby-group wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-outline-none wby-transition-all\",\n        \"wby-text-neutral-strong hover:text-neutral-primary\",\n        \"wby-border-b-md wby-border-transparent wby-border-solid\",\n        \"data-[state=active]:wby-border-accent-default data-[state=active]:wby-text-neutral-primary\",\n        \"disabled:wby-pointer-events-none disabled:!wby-text-neutral-disabled disabled:!wby-fill-neutral-disabled disabled:!wby-border-transparent\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"wby-text-sm wby-h-[40px]\",\n                md: \"wby-text-md wby-h-[48px]\",\n                lg: \"wby-text-lg wby-h-[56px]\",\n                xl: \"wby-text-xl wby-h-[64px]\"\n            },\n            visible: {\n                false: \"wby-hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-justify-start wby-gap-xs\",\n        \"group-hover:wby-bg-neutral-dimmed\",\n        \"group-focus-visible:wby-ring-lg group-focus-visible:wby-ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"wby-rounded-sm wby-p-xs\",\n                md: \"wby-rounded-sm wby-px-xs wby-py-xs-plus\",\n                lg: \"wby-rounded-sm wby-px-xs-plus wby-py-sm-plus\",\n                xl: \"wby-rounded-lg wby-px-sm wby-py-sm-plus\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\ntype TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, \"children\"> &\n    VariantProps<typeof tabTriggerVariants> & {\n        text: React.ReactNode;\n        icon?: React.ReactElement;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {icon && <Icon icon={icon} size={\"sm\"} label={String(text)} color={\"neutral-light\"} />}\n            {text}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,kBAAkB,GAAGF,GAAG,CAC1B,CACI,yHAAyH,EACzH,oDAAoD,EACpD,yDAAyD,EACzD,4FAA4F,EAC5F,2IAA2I,CAC9I,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAED,MAAMQ,uBAAuB,GAAGZ,GAAG,CAC/B,CACI,+DAA+D,EAC/D,mCAAmC,EACnC,6EAA6E,CAChF,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,yBAAyB;MAC7BC,EAAE,EAAE,yCAAyC;MAC7CC,EAAE,EAAE,8CAA8C;MAClDC,EAAE,EAAE;IACR;EACJ,CAAC;EACDG,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AASD,MAAMS,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEV,IAAI;EAAEW,IAAI;EAAEC,IAAI;EAAEP,OAAO;EAAE,GAAGQ;AAAoB,CAAC,kBAC7ErB,KAAA,CAAAsB,aAAA,CAACpB,aAAa,CAACe,OAAO,EAAAM,MAAA,CAAAC,MAAA;EAClBN,SAAS,EAAEf,EAAE,CAACG,kBAAkB,CAAC;IAAEE,IAAI;IAAEK;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,GAC5DG,KAAK,gBAETrB,KAAA,CAAAsB,aAAA;EAAKJ,SAAS,EAAEf,EAAE,CAACa,uBAAuB,CAAC;IAAER;EAAK,CAAC,CAAC;AAAE,GACjDW,IAAI,iBAAInB,KAAA,CAAAsB,aAAA,CAACjB,IAAI;EAACc,IAAI,EAAEA,IAAK;EAACX,IAAI,EAAE,IAAK;EAACiB,KAAK,EAAEC,MAAM,CAACN,IAAI,CAAE;EAACO,KAAK,EAAE;AAAgB,CAAE,CAAC,EACrFP,IACA,CACc,CAC1B;AAED,SAASH,OAAO","ignoreList":[]}

package/Tabs/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Content";
+export * from "./Context";
+export * from "./List";
+export * from "./Tab";
+export * from "./Trigger";

package/Tabs/components/index.js

@@ -0,0 +1,7 @@
+export * from "./Content";
+export * from "./Context";
+export * from "./List";
+export * from "./Tab";
+export * from "./Trigger";
+
+//# sourceMappingURL=index.js.map

package/Tabs/components/index.js.map

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

package/Tabs/index.d.ts

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

package/Tabs/index.js

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

package/Tabs/index.js.map

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