@webiny/admin-ui 0.0.0-unstable.2aaa1916d9

package/Tabs/Tabs.mdx

@@ -0,0 +1,495 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as Tabs from './Tabs.stories';
+
+<Meta of={Tabs} />
+
+# Tabs
+
+A tab component organizes content into multiple sections, enabling users to seamlessly switch between views without page reloads, enhancing navigation and user experience.
+
+## Usage
+
+<Canvas of={Tabs.Documentation} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const TabsExample = () => {
+    return (
+        <Tabs
+            size="md"
+            spacing="lg"
+            separator={true}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account settings and personal information"
+                />,
+                <Tabs.Tab
+                    key="security"
+                    value="security"
+                    trigger="Security"
+                    content="Security settings and password management"
+                />,
+                <Tabs.Tab
+                    key="preferences"
+                    value="preferences"
+                    trigger="Preferences"
+                    content="User interface preferences and customization"
+                />
+            ]}
+        />
+    );
+};
+
+export default TabsExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Tabs/Tabs.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={Tabs.Documentation} />
+
+```tsx
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const TabsExample = () => {
+    return (
+        <Tabs
+            size="md"
+            spacing="lg"
+            separator={true}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account settings and personal information"
+                />,
+                <Tabs.Tab
+                    key="security"
+                    value="security"
+                    trigger="Security"
+                    content="Security settings and password management"
+                />,
+                <Tabs.Tab
+                    key="preferences"
+                    value="preferences"
+                    trigger="Preferences"
+                    content="User interface preferences and customization"
+                />
+            ]}
+        />
+    );
+};
+
+export default TabsExample;
+```
+
+## Examples
+
+### Default
+
+<Canvas of={Tabs.Default} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const DefaultTabsExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default DefaultTabsExample;
+` } } />
+
+### Size Variants
+
+#### Small (SM)
+
+<Canvas of={Tabs.SizeSmall} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const SmallTabsExample = () => {
+    return (
+        <Tabs
+            size="sm"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default SmallTabsExample;
+` } } />
+
+#### Medium (MD)
+
+<Canvas of={Tabs.SizeMedium} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const MediumTabsExample = () => {
+    return (
+        <Tabs
+            size="md"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default MediumTabsExample;
+` } } />
+
+#### Large (LG)
+
+<Canvas of={Tabs.SizeLarge} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const LargeTabsExample = () => {
+    return (
+        <Tabs
+            size="lg"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default LargeTabsExample;
+` } } />
+
+#### Extra Large (XL)
+
+<Canvas of={Tabs.SizeExtraLarge} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const ExtraLargeTabsExample = () => {
+    return (
+        <Tabs
+            size="xl"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default ExtraLargeTabsExample;
+` } } />
+
+### Spacing Variants
+
+<Canvas of={Tabs.SpacingMedium} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const SpacingMediumExample = () => {
+    return (
+        <Tabs
+            spacing="md"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default SpacingMediumExample;
+` } } />
+
+### With Separator
+
+<Canvas of={Tabs.WithSeparator} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithSeparatorExample = () => {
+    return (
+        <Tabs
+            separator={true}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithSeparatorExample;
+` } } />
+
+### With Default Value
+
+<Canvas of={Tabs.WithDefaultValue} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithDefaultValueExample = () => {
+    return (
+        <Tabs
+            defaultValue="password"
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithDefaultValueExample;
+` } } />
+
+### With Controlled Value
+
+<Canvas of={Tabs.WithControlledValue} source={ { code: `
+import React, { useState } from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithControlledValueExample = () => {
+    const [value, setValue] = useState("password");
+
+    return (
+        <Tabs
+            value={value}
+            onValueChange={setValue}
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithControlledValueExample;
+` } } />
+
+### With Icons
+
+<Canvas of={Tabs.WithIcons} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
+
+const WithIconsExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    icon={<PersonIcon />}
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    icon={<LockIcon />}
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithIconsExample;
+` } } />
+
+### With Disabled Tab
+
+<Canvas of={Tabs.WithDisabledTab} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithDisabledTabExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    disabled={true}
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithDisabledTabExample;
+` } } />
+
+### With Hidden Tab
+
+<Canvas of={Tabs.WithHiddenTab} source={ { code: `
+import React from "react";
+import { Tabs } from "@webiny/admin-ui";
+
+const WithHiddenTabExample = () => {
+    return (
+        <Tabs
+            tabs={[
+                <Tabs.Tab
+                    key="account"
+                    value="account"
+                    trigger="Account"
+                    content="Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    visible={false}
+                />,
+                <Tabs.Tab
+                    key="password"
+                    value="password"
+                    trigger="Password"
+                    content="Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                />
+            ]}
+        />
+    );
+};
+
+export default WithHiddenTabExample;
+` } } />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/tabs/construction.png" alt="Construction"/>
+
+### Size & States
+<img src="/images/storybook/tabs/size-and-states.png" alt="Size & States"/>
+
+### Tab Group
+<img src="/images/storybook/tabs/tab-group.png" alt="Tab Group"/>
+
+## Usage
+<img src="/images/storybook/tabs/usage.png" alt="Usage"/>

package/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "./Tabs";
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+export declare const SizeSmall: Story;
+export declare const SizeMedium: Story;
+export declare const SizeLarge: Story;
+export declare const SizeExtraLarge: Story;
+export declare const SpacingExtraSmall: Story;
+export declare const SpacingSmall: Story;
+export declare const SpacingMedium: Story;
+export declare const SpacingLarge: Story;
+export declare const SpacingExtraLarge: Story;
+export declare const SpacingDoubleExtraLarge: Story;
+export declare const WithSeparator: Story;
+export declare const WithDefaultValue: Story;
+export declare const WithControlledValue: Story;
+export declare const WithIcons: Story;
+export declare const WithDisabledTab: Story;
+export declare const WithHiddenTab: Story;
+export declare const WithCustomTabSpacing: Story;
+export declare const Documentation: Story;