@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/Table/Table.d.ts

@@ -1,20 +1,22 @@
 import * as React from "react";
 import { type VariantProps } from "../utils.js";
+import { Body, Caption, Cell, Direction, Footer, Head, Header, Resizer, Row } from "../Table/components/index.js";
 declare const tableVariants: (props?: ({
     bordered?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
     sticky?: boolean;
 }
-declare const Table: (({ className, bordered, sticky, ...props }: TableProps) => React.JSX.Element) & {
-    Body: ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
-    Caption: ({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>) => React.JSX.Element;
-    Cell: ({ className, truncate, ...props }: import("~/Table/components/index.js").CellProps) => React.JSX.Element;
-    Direction: ({ className, direction }: import("~/Table/components/index.js").DirectionProps) => React.JSX.Element | null;
-    Footer: ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
-    Head: ({ className, children, truncate, ...props }: import("~/Table/components/index.js").HeadProps) => React.JSX.Element;
-    Header: ({ className, sticky, ...props }: import("~/Table/components/index.js").HeaderProps) => React.JSX.Element;
-    Resizer: ({ className, isResizing, ...props }: import("~/Table/components/index.js").ResizerProps) => React.JSX.Element;
-    Row: ({ className, selected, ...props }: import("~/Table/components/index.js").RowProps) => React.JSX.Element;
+declare const BaseTable: ({ className, bordered, sticky, ...props }: TableProps) => React.JSX.Element;
+declare const Table: typeof BaseTable & {
+    Body: typeof Body;
+    Caption: typeof Caption;
+    Cell: typeof Cell;
+    Direction: typeof Direction;
+    Footer: typeof Footer;
+    Head: typeof Head;
+    Header: typeof Header;
+    Resizer: typeof Resizer;
+    Row: typeof Row;
 };
 export { Table, type TableProps };

package/Table/components/Direction.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const directionVariants: (props?: ({
-    direction?: "desc" | "asc" | null | undefined;
+    direction?: "asc" | "desc" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface DirectionProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof directionVariants> {
 }

package/Tabs/Tabs.d.ts

@@ -1,28 +1,35 @@
 import React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { type VariantProps } from "../utils.js";
-import type { TabProps, tabListVariants } from "./components/index.js";
+import type { TabProps } from "./components/index.js";
+import { tabListVariants } from "./components/index.js";
 interface TabsProps extends Omit<TabsPrimitive.TabsProps, "children"> {
     tabs: React.ReactElement<TabProps>[];
     size?: VariantProps<typeof tabListVariants>["size"];
     spacing?: VariantProps<typeof tabListVariants>["spacing"];
     separator?: VariantProps<typeof tabListVariants>["separator"];
+    loading?: boolean;
+    /**
+     * Controls rendered at the end of the tab row, e.g. a filter checkbox or a button.
+     */
+    actions?: React.ReactNode;
 }
-declare const Tabs: (({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
-    original: ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+declare const DecoratableTabs: ({ defaultValue: initialValue, size, spacing, separator, loading, actions, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+declare const Tabs: typeof DecoratableTabs & {
+    original: typeof DecoratableTabs;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
-        original: ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+    original: typeof DecoratableTabs & {
+        original: typeof DecoratableTabs;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
-        original: ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTabs & {
+        original: typeof DecoratableTabs;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tabs/Tabs.js

@@ -1,32 +1,53 @@
 import react, { useMemo, useState } from "react";
 import { Tabs } from "radix-ui";
-import { makeDecoratable, withStaticProps } from "../utils.js";
-import { Content, List, Tab, TabsContext, Trigger } from "./components/index.js";
+import { cn, makeDecoratable, withStaticProps } from "../utils.js";
+import { Content, List, Tab, TabsContext, Trigger, tabListVariants } from "./components/index.js";
 const Root = Tabs.Root;
-const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props })=>{
+const DecoratableTabs = ({ defaultValue: initialValue, size, spacing, separator, loading, actions, tabs: tabComponents, ...props })=>{
     const [tabs, setTabs] = useState([]);
     const defaultValue = useMemo(()=>initialValue || tabComponents.find((tab)=>!tab.props.disabled && false !== tab.props.visible)?.props.value, [
         initialValue,
         tabComponents
     ]);
-    const triggers = useMemo(()=>/*#__PURE__*/ react.createElement(List, {
-            key: tabs.map((tab)=>tab.id).join(";"),
-            size: size,
-            spacing: spacing,
-            separator: separator
-        }, tabs.map((tab)=>/*#__PURE__*/ react.createElement(Trigger, {
+    const triggers = useMemo(()=>{
+        const triggerList = tabs.map((tab)=>/*#__PURE__*/ react.createElement(Trigger, {
                 "data-testid": tab["data-testid"],
                 disabled: tab.disabled,
                 icon: tab.icon,
                 key: tab.id,
+                loading: loading,
                 size: size,
                 text: tab.trigger,
                 value: tab.value,
                 visible: tab.visible
-            }))), [
+            }));
+        const listKey = tabs.map((tab)=>tab.id).join(";");
+        if (!actions) return /*#__PURE__*/ react.createElement(List, {
+            key: listKey,
+            size: size,
+            spacing: spacing,
+            separator: separator
+        }, triggerList);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: cn(tabListVariants({
+                size,
+                spacing,
+                separator
+            }))
+        }, /*#__PURE__*/ react.createElement(List, {
+            key: listKey,
+            size: size,
+            className: "w-auto"
+        }, triggerList), /*#__PURE__*/ react.createElement("div", {
+            className: "ml-auto flex items-center gap-sm"
+        }, actions));
+    }, [
         tabs,
         size,
-        spacing
+        spacing,
+        separator,
+        loading,
+        actions
     ]);
     const contents = useMemo(()=>tabs.map((tab)=>/*#__PURE__*/ react.createElement(Content, {
                 key: tab.id,

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps, tabListVariants } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        // `defaultValue` prop works only at first render so we need to use the `tabComponents` instead of the `TabItems`\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(\n        () => (\n            // We need to generate a key like this to trigger a proper component re-render when child tabs change.\n            <List\n                key={tabs.map(tab => tab.id).join(\";\")}\n                size={size}\n                spacing={spacing}\n                separator={separator}\n            >\n                {tabs.map(tab => (\n                    <Trigger\n                        data-testid={tab[\"data-testid\"]}\n                        disabled={tab.disabled}\n                        icon={tab.icon}\n                        key={tab.id}\n                        size={size}\n                        text={tab.trigger}\n                        value={tab.value}\n                        visible={tab.visible}\n                    />\n                ))}\n            </List>\n        ),\n        [tabs, size, spacing]\n    );\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","List","Trigger","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAS/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACT,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAGrBV,gBACAI,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACX;QAAcI;KAAc;IAEhC,MAAMQ,WAAWF,QACb,I,cAEI,oBAACG,MAAIA;YACD,KAAKP,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;YAClC,MAAMV;YACN,SAASC;YACT,WAAWC;WAEVG,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACN,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,MAAMV;gBACN,MAAMU,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;kBAKpC;QAACL;QAAML;QAAMC;KAAQ;IAGzB,MAAMa,WAAWL,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACK,SAAOA;gBACJ,KAAKL,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIT;gBACxB,WAAWS,IAAI,SAAS;iBAGpC;QAACL;QAAMJ;KAAQ;IAGnB,MAAMe,UAAwBP,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMY,gBAAgBZ,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIa,gBAAgB,IAChB,OAAO;2BACAZ,KAAK,KAAK,CAAC,GAAGY;wBACjBb;2BACGC,KAAK,KAAK,CAACY,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIZ;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUc,EAAE;gBACRZ,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKQ;YAClD;QACJ,IACA;QAACZ;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACV,MAAIA;QAAE,GAAGQ,KAAK;QAAE,cAAcI;OAC1BG,UACAG,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUb;AAGnD;AAEA,MAAMiB,WAAWC,gBAAgB,QAAQvB;AAEzC,MAAMwB,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}
+{"version":3,"file":"Tabs/Tabs.js","sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger, tabListVariants } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n    loading?: boolean;\n    /**\n     * Controls rendered at the end of the tab row, e.g. a filter checkbox or a button.\n     */\n    actions?: React.ReactNode;\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    loading,\n    actions,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(() => {\n        const triggerList = tabs.map(tab => (\n            <Trigger\n                data-testid={tab[\"data-testid\"]}\n                disabled={tab.disabled}\n                icon={tab.icon}\n                key={tab.id}\n                loading={loading}\n                size={size}\n                text={tab.trigger}\n                value={tab.value}\n                visible={tab.visible}\n            />\n        ));\n        const listKey = tabs.map(tab => tab.id).join(\";\");\n\n        if (!actions) {\n            return (\n                <List key={listKey} size={size} spacing={spacing} separator={separator}>\n                    {triggerList}\n                </List>\n            );\n        }\n\n        // Actions sit outside the tablist, so arrow keys only move between tabs.\n        return (\n            <div className={cn(tabListVariants({ size, spacing, separator }))}>\n                <List key={listKey} size={size} className={\"w-auto\"}>\n                    {triggerList}\n                </List>\n                <div className={\"ml-auto flex items-center gap-sm\"}>{actions}</div>\n            </div>\n        );\n    }, [tabs, size, spacing, separator, loading, actions]);\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id !== id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"names":["Root","TabsPrimitive","DecoratableTabs","initialValue","size","spacing","separator","loading","actions","tabComponents","props","tabs","setTabs","useState","defaultValue","useMemo","tab","triggers","triggerList","Trigger","listKey","List","cn","tabListVariants","contents","Content","context","existingIndex","id","TabsContext","BaseTabs","makeDecoratable","Tabs","withStaticProps","Tab"],"mappings":";;;;AAMA,MAAMA,OAAOC,KAAAA,IAAkB;AAc/B,MAAMC,kBAAkB,CAAC,EACrB,cAAcC,YAAY,EAC1BC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,OAAO,EACP,MAAMC,aAAa,EACnB,GAAGC,OACK;IACR,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAoB,EAAE;IAE9C,MAAMC,eAAeC,QAAQ,IAErBZ,gBACAM,cAAc,IAAI,CAACO,CAAAA,MAAO,CAACA,IAAI,KAAK,CAAC,QAAQ,IAAIA,AAAsB,UAAtBA,IAAI,KAAK,CAAC,OAAO,GAAa,MAC1E,OAEV;QAACb;QAAcM;KAAc;IAEhC,MAAMQ,WAAWF,QAAQ;QACrB,MAAMG,cAAcP,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACzB,oBAACG,SAAOA;gBACJ,eAAaH,GAAG,CAAC,cAAc;gBAC/B,UAAUA,IAAI,QAAQ;gBACtB,MAAMA,IAAI,IAAI;gBACd,KAAKA,IAAI,EAAE;gBACX,SAAST;gBACT,MAAMH;gBACN,MAAMY,IAAI,OAAO;gBACjB,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;;QAG5B,MAAMI,UAAUT,KAAK,GAAG,CAACK,CAAAA,MAAOA,IAAI,EAAE,EAAE,IAAI,CAAC;QAE7C,IAAI,CAACR,SACD,OAAO,WAAP,GACI,oBAACa,MAAIA;YAAC,KAAKD;YAAS,MAAMhB;YAAM,SAASC;YAAS,WAAWC;WACxDY;QAMb,OAAO,WAAP,GACI,oBAAC;YAAI,WAAWI,GAAGC,gBAAgB;gBAAEnB;gBAAMC;gBAASC;YAAU;yBAC1D,oBAACe,MAAIA;YAAC,KAAKD;YAAS,MAAMhB;YAAM,WAAW;WACtCc,cAAAA,WAAAA,GAEL,oBAAC;YAAI,WAAW;WAAqCV;IAGjE,GAAG;QAACG;QAAMP;QAAMC;QAASC;QAAWC;QAASC;KAAQ;IAErD,MAAMgB,WAAWT,QACb,IACIJ,KAAK,GAAG,CAACK,CAAAA,MAAAA,WAAAA,GACL,oBAACS,SAAOA;gBACJ,KAAKT,IAAI,EAAE;gBACX,OAAOA,IAAI,KAAK;gBAChB,SAASA,IAAI,OAAO;gBACpB,SAASA,IAAI,OAAO,IAAIX;gBACxB,WAAWW,IAAI,SAAS;iBAGpC;QAACL;QAAMN;KAAQ;IAGnB,MAAMqB,UAAwBX,QAC1B,IAAO;YACH,QAAOL,KAAK;gBACRE,QAAQD,CAAAA;oBACJ,MAAMgB,gBAAgBhB,KAAK,SAAS,CAACK,CAAAA,MAAOA,IAAI,KAAK,KAAKN,MAAM,KAAK;oBACrE,IAAIiB,gBAAgB,IAChB,OAAO;2BACAhB,KAAK,KAAK,CAAC,GAAGgB;wBACjBjB;2BACGC,KAAK,KAAK,CAACgB,gBAAgB;qBACjC;oBAEL,OAAO;2BAAIhB;wBAAMD;qBAAM;gBAC3B;YACJ;YACA,WAAUkB,EAAE;gBACRhB,QAAQD,CAAAA,OAAQA,KAAK,MAAM,CAACK,CAAAA,MAAOA,IAAI,EAAE,KAAKY;YAClD;QACJ,IACA;QAAChB;KAAQ;IAGb,OAAO,WAAP,GACI,oBAACZ,MAAIA;QAAE,GAAGU,KAAK;QAAE,cAAcI;OAC1BG,UACAO,UAAAA,WAAAA,GACD,oBAACK,YAAY,QAAQ;QAAC,OAAOH;OAAUjB;AAGnD;AAEA,MAAMqB,WAAWC,gBAAgB,QAAQ7B;AAEzC,MAAM8B,YAAOC,gBAAgBH,UAAU;IACnCI,KAAGA;AACP"}

package/Tabs/Tabs.mdx

@@ -385,6 +385,33 @@ const [value, setValue] = useState("password");
 export default WithControlledValueExample;
 ` } } />
 
+### With Actions
+
+Use `actions` to put controls at the end of the tab row, such as a filter checkbox or a button. They render outside the tab list, so arrow keys still move only between tabs.
+
+<Canvas of={Tabs.WithActions} source={ { code: `
+import React, { useState } from "react";
+import { Checkbox, Tabs } from "@webiny/admin-ui";
+
+const WithActionsExample = () => {
+const [unreadOnly, setUnreadOnly] = useState(false);
+
+    return (
+        <Tabs
+            separator={true}
+            actions={<Checkbox label="Unread only" checked={unreadOnly} onChange={setUnreadOnly} />}
+            tabs={[
+                <Tabs.Tab key="inbox" value="inbox" trigger="Inbox" content="Inbox content" />,
+                <Tabs.Tab key="archive" value="archive" trigger="Archive" content="Archive content" />
+            ]}
+        />
+    );
+
+};
+
+export default WithActionsExample;
+` } } />
+
 ### With Icons
 
 <Canvas of={Tabs.WithIcons} source={ { code: `

package/Tabs/Tabs.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Tabs } from "./Tabs.js";
 declare const meta: Meta<typeof Tabs>;
 export default meta;
@@ -17,6 +17,7 @@ export declare const SpacingDoubleExtraLarge: Story;
 export declare const WithSeparator: Story;
 export declare const WithDefaultValue: Story;
 export declare const WithControlledValue: Story;
+export declare const WithActions: Story;
 export declare const WithIcons: Story;
 export declare const WithDisabledTab: Story;
 export declare const WithHiddenTab: Story;

package/Tabs/Tabs.stories.js

@@ -1,6 +1,7 @@
 import react, { useState } from "react";
 import { ReactComponent } from "@webiny/icons/person.svg";
 import { ReactComponent as lock_svg_ReactComponent } from "@webiny/icons/lock.svg";
+import { Checkbox } from "../Checkbox/index.js";
 import { Tabs } from "./Tabs.js";
 const meta = {
     title: "Components/Tabs",
@@ -114,6 +115,23 @@ const WithControlledValue = {
         });
     }
 };
+const WithActions = {
+    args: {
+        ...Default.args,
+        separator: true
+    },
+    render: (args)=>{
+        const [unreadOnly, setUnreadOnly] = useState(false);
+        return /*#__PURE__*/ react.createElement(Tabs, {
+            ...args,
+            actions: /*#__PURE__*/ react.createElement(Checkbox, {
+                label: "Unread only",
+                checked: unreadOnly,
+                onChange: setUnreadOnly
+            })
+        });
+    }
+};
 const WithIcons = {
     args: {
         ...Default.args,
@@ -271,6 +289,6 @@ const Documentation = {
     }
 };
 export default Tabs_stories;
-export { Default, Documentation, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, SpacingDoubleExtraLarge, SpacingExtraLarge, SpacingExtraSmall, SpacingLarge, SpacingMedium, SpacingSmall, WithControlledValue, WithCustomTabSpacing, WithDefaultValue, WithDisabledTab, WithHiddenTab, WithIcons, WithSeparator };
+export { Default, Documentation, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, SpacingDoubleExtraLarge, SpacingExtraLarge, SpacingExtraSmall, SpacingLarge, SpacingMedium, SpacingSmall, WithActions, WithControlledValue, WithCustomTabSpacing, WithDefaultValue, WithDisabledTab, WithHiddenTab, WithIcons, WithSeparator };
 
 //# sourceMappingURL=Tabs.stories.js.map

package/Tabs/Tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/Tabs.stories.js","sources":["../../src/Tabs/Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs.js\";\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        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tabs","Default","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","WithDefaultValue","WithControlledValue","args","value","setValue","useState","WithIcons","PersonIcon","LockIcon","WithDisabledTab","WithHiddenTab","WithCustomTabSpacing","Documentation","JSON","undefined"],"mappings":";;;;AAMA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;0BAGR,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,aAAoB;IAC7B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMG,YAAmB;IAC5B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMI,iBAAwB;IACjC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMO,gBAAuB;IAChC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMQ,eAAsB;IAC/B,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMS,oBAA2B;IACpC,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMU,0BAAiC;IAC1C,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMW,gBAAuB;IAChC,MAAM;QACF,GAAGX,QAAQ,IAAI;QACf,WAAW;IACf;AACJ;AAEO,MAAMY,mBAA0B;IACnC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,cAAc;IAClB;AACJ;AAEO,MAAMa,sBAA6B;IACtC,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,OAAO;IACX;IACA,QAAQc,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK;QAC7C,OAAO,WAAP,GAAO,oBAACf,MAAIA;YAAE,GAAGe,IAAI;YAAE,OAAOC;YAAO,eAAeC;;IACxD;AACJ;AAEO,MAAME,YAAmB;IAC5B,MAAM;QACF,GAAGlB,QAAQ,IAAI;QACf,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,oBAAM,oBAACoB,gBAAUA;;0BAErB,oBAACpB,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,oBAAM,oBAACqB,yBAAQA;;SAEtB;IACL;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,GAAGrB,QAAQ,IAAI;QACf,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,UAAU;;0BAEd,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAEO,MAAMuB,gBAAuB;IAChC,MAAM;QACF,GAAGtB,QAAQ,IAAI;QACf,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,SAAS;;0BAEb,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAEO,MAAMwB,uBAA8B;IACvC,MAAM;QACF,GAAGvB,QAAQ,IAAI;QACf,SAAS;QACT,MAAM;0BACF,oBAACD,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;gBAEJ,SAAS;;0BAEb,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;IACL;AACJ;AAGO,MAAMyB,gBAAuB;IAChC,QAAQV,CAAAA,OAEG,WAAP,GAAO,oBAACf,MAAIA;YAAC,KAAK0B,KAAK,SAAS,CAACX;YAAQ,GAAGA,IAAI;;IAEpD,MAAM;QACF,MAAM;QACN,SAAS;QACT,WAAW;QACX,cAAc;QACd,MAAM;0BACF,oBAACf,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;0BAGR,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;0BAGR,oBAACA,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS;gBACT,SACI;;SAGX;QACD,OAAO2B;IACX;IACA,UAAU;QACN,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;gBAAM;gBAAM;aAAM;YAC9C,cAAc;QAClB;QACA,WAAW;YACP,aACI;YACJ,SAAS;YACT,cAAc;QAClB;QACA,cAAc;YACV,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aACI;QACR;QACA,MAAM;YACF,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"Tabs/Tabs.stories.js","sources":["../../src/Tabs/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 { Checkbox } from \"~/Checkbox/index.js\";\nimport { Tabs } from \"./Tabs.js\";\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 WithActions: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    },\n    render: args => {\n        const [unreadOnly, setUnreadOnly] = useState(false);\n        return (\n            <Tabs\n                {...args}\n                actions={\n                    <Checkbox label=\"Unread only\" checked={unreadOnly} onChange={setUnreadOnly} />\n                }\n            />\n        );\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        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tabs","Default","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","WithDefaultValue","WithControlledValue","args","value","setValue","useState","WithActions","unreadOnly","setUnreadOnly","Checkbox","WithIcons","PersonIcon","LockIcon","WithDisabledTab","WithHiddenTab","WithCustomTabSpacing","Documentation","JSON","undefined"],"mappings":"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"}

package/Tabs/components/Content.d.ts

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

package/Tabs/components/List.d.ts

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

package/Tabs/components/Tab.d.ts

@@ -14,21 +14,22 @@ interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"
 interface TabItem extends TabProps {
     id: string;
 }
-declare const Tab: ((props: TabProps) => null) & {
-    original: (props: TabProps) => null;
+declare const DecoratableTab: (props: TabProps) => null;
+declare const Tab: typeof DecoratableTab & {
+    original: typeof DecoratableTab;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: TabProps) => null) & {
-        original: (props: TabProps) => null;
+    original: typeof DecoratableTab & {
+        original: typeof DecoratableTab;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: TabProps) => null) & {
-        original: (props: TabProps) => null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTab & {
+        original: typeof DecoratableTab;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tabs/components/Trigger.d.ts

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

package/Tabs/components/Trigger.js

@@ -1,6 +1,7 @@
 import { Tabs } from "radix-ui";
 import { cn, cva } from "../../utils.js";
 import { Icon } from "../../Icon/index.js";
+import { Skeleton } from "../../Skeleton/index.js";
 import * as __rspack_external_react from "react";
 const tabTriggerVariants = cva([
     "group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all",
@@ -41,7 +42,7 @@ const innerTabTriggerVariants = cva([
         size: "sm"
     }
 });
-const Trigger = ({ className, size, icon, text, visible, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tabs.Trigger, {
+const Trigger = ({ className, size, icon, text, visible, loading, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tabs.Trigger, {
         className: cn(tabTriggerVariants({
             size,
             visible
@@ -51,12 +52,16 @@ const Trigger = ({ className, size, icon, text, visible, ...props })=>/*#__PURE_
         className: cn(innerTabTriggerVariants({
             size
         }))
-    }, icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+    }, loading ? /*#__PURE__*/ __rspack_external_react.createElement(Skeleton, {
+        type: "text",
+        size: "md",
+        className: "w-[64px]"
+    }) : /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
         icon: icon,
         size: "sm",
         label: String(text),
         color: "neutral-light"
-    }), text));
+    }), text)));
 export { Trigger };
 
 //# sourceMappingURL=Trigger.js.map

package/Tabs/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs/components/Trigger.js","sources":["../../../src/Tabs/components/Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all\",\n        \"text-neutral-strong hover:text-neutral-primary\",\n        \"border-b-md border-transparent border-solid\",\n        \"data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary\",\n        \"disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"text-sm h-[40px]\",\n                md: \"text-md h-xxl\",\n                lg: \"text-lg h-[56px]\",\n                xl: \"text-xl h-3xl\"\n            },\n            visible: {\n                false: \"hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"inline-flex items-center justify-start gap-xs\",\n        \"group-hover:bg-neutral-dimmed\",\n        \"group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"rounded-sm p-xs\",\n                md: \"rounded-sm px-xs py-xs-plus\",\n                lg: \"rounded-sm px-xs-plus py-sm-plus\",\n                xl: \"rounded-lg px-sm 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"],"names":["tabTriggerVariants","cva","innerTabTriggerVariants","Trigger","className","size","icon","text","visible","props","TabsPrimitive","cn","Icon","String"],"mappings":";;;;AAKA,MAAMA,qBAAqBC,IACvB;IACI;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAGJ,MAAMC,0BAA0BD,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAUJ,MAAME,UAAU,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,OAAqB,iBAC7E,sCAACC,KAAAA,OAAqB;QAClB,WAAWC,GAAGX,mBAAmB;YAAEK;YAAMG;QAAQ,IAAIJ;QACpD,GAAGK,KAAK;qBAET,sCAAC;QAAI,WAAWE,GAAGT,wBAAwB;YAAEG;QAAK;OAC7CC,QAAQ,WAARA,GAAQ,sCAACM,MAAIA;QAAC,MAAMN;QAAM,MAAM;QAAM,OAAOO,OAAON;QAAO,OAAO;QAClEA"}
+{"version":3,"file":"Tabs/components/Trigger.js","sources":["../../../src/Tabs/components/Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all\",\n        \"text-neutral-strong hover:text-neutral-primary\",\n        \"border-b-md border-transparent border-solid\",\n        \"data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary\",\n        \"disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"text-sm h-[40px]\",\n                md: \"text-md h-xxl\",\n                lg: \"text-lg h-[56px]\",\n                xl: \"text-xl h-3xl\"\n            },\n            visible: {\n                false: \"hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"inline-flex items-center justify-start gap-xs\",\n        \"group-hover:bg-neutral-dimmed\",\n        \"group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"rounded-sm p-xs\",\n                md: \"rounded-sm px-xs py-xs-plus\",\n                lg: \"rounded-sm px-xs-plus py-sm-plus\",\n                xl: \"rounded-lg px-sm 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        loading?: boolean;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, loading, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {loading ? (\n                <Skeleton type={\"text\"} size={\"md\"} className={\"w-[64px]\"} />\n            ) : (\n                <>\n                    {icon && (\n                        <Icon\n                            icon={icon}\n                            size={\"sm\"}\n                            label={String(text)}\n                            color={\"neutral-light\"}\n                        />\n                    )}\n                    {text}\n                </>\n            )}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"names":["tabTriggerVariants","cva","innerTabTriggerVariants","Trigger","className","size","icon","text","visible","loading","props","TabsPrimitive","cn","Skeleton","Icon","String"],"mappings":";;;;;AAMA,MAAMA,qBAAqBC,IACvB;IACI;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAGJ,MAAMC,0BAA0BD,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAWJ,MAAME,UAAU,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGC,OAAqB,iBACtF,sCAACC,KAAAA,OAAqB;QAClB,WAAWC,GAAGZ,mBAAmB;YAAEK;YAAMG;QAAQ,IAAIJ;QACpD,GAAGM,KAAK;qBAET,sCAAC;QAAI,WAAWE,GAAGV,wBAAwB;YAAEG;QAAK;OAC7CI,UAAU,WAAVA,GACG,sCAACI,UAAQA;QAAC,MAAM;QAAQ,MAAM;QAAM,WAAW;uBAE/C,8EACKP,QAAQ,WAARA,GACG,sCAACQ,MAAIA;QACD,MAAMR;QACN,MAAM;QACN,OAAOS,OAAOR;QACd,OAAO;QAGdA"}

package/Tag/Tag.d.ts

@@ -4,7 +4,7 @@ declare const tagVariants: (props?: ({
     isInteractive?: boolean | null | undefined;
     isDismissible?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
-    variant?: "accent" | "neutral-light" | "neutral-strong" | "neutral-base" | "success" | "warning" | "neutral-base-outline" | "neutral-muted" | "neutral-xstrong" | "neutral-dark" | "accent-light" | "success-light" | "destructive" | null | undefined;
+    variant?: "accent" | "accent-light" | "destructive" | "neutral-base" | "neutral-base-outline" | "neutral-dark" | "neutral-light" | "neutral-muted" | "neutral-strong" | "neutral-xstrong" | "success" | "success-light" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "content">, VariantProps<typeof tagVariants> {
     content: React.ReactNode;
@@ -16,21 +16,22 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "c
     icon?: React.ReactElement | null;
     disabled?: boolean;
 }
-declare const Tag: ((props: TagProps) => React.JSX.Element) & {
-    original: (props: TagProps) => React.JSX.Element;
+declare const DecoratableTag: (props: TagProps) => React.JSX.Element;
+declare const Tag: typeof DecoratableTag & {
+    original: typeof DecoratableTag;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: TagProps) => React.JSX.Element) & {
-        original: (props: TagProps) => React.JSX.Element;
+    original: typeof DecoratableTag & {
+        original: typeof DecoratableTag;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: TagProps) => React.JSX.Element) & {
-        original: (props: TagProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTag & {
+        original: typeof DecoratableTag;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tag/Tag.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Tag } from "./Tag.js";
 declare const meta: Meta<typeof Tag>;
 export default meta;

package/Tag/Tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag/Tag.stories.js","sources":["../../src/Tag/Tag.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Tag } from \"./Tag.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\nconst meta: Meta<typeof Tag> = {\n    title: \"Components/Tag\",\n    component: Tag,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {\n    args: {\n        content: \"Label\",\n        icon: <InfoIcon />\n    }\n};\n\nexport const WithOnClickCallback: Story = {\n    args: {\n        ...Default.args,\n        onClick: evt => {\n            console.log(\"onClick\", evt);\n        }\n    }\n};\n\nexport const WithOnDismissCallback: Story = {\n    args: {\n        ...Default.args,\n        onDismiss: evt => {\n            console.log(\"onDismiss\", evt);\n        }\n    }\n};\n\nexport const WithCustomDismissIconElement: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        dismissIconElement: <AddIcon />,\n        dismissIconLabel: \"Custom dismiss label\"\n    }\n};\n\nexport const NeutralBase: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base\"\n    }\n};\n\nexport const NeutralBaseDisabled: Story = {\n    args: {\n        ...NeutralBase.args,\n        disabled: true\n    }\n};\n\nexport const NeutralBaseOutline: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\"\n    }\n};\n\nexport const NeutralBaseOutlineDisabled: Story = {\n    args: {\n        ...NeutralBaseOutline.args,\n        disabled: true\n    }\n};\n\nexport const NeutralLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-light\"\n    }\n};\n\nexport const NeutralLightDisabled: Story = {\n    args: {\n        ...NeutralLight.args,\n        disabled: true\n    }\n};\n\nexport const NeutralMuted: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-muted\"\n    }\n};\n\nexport const NeutralMutedDisabled: Story = {\n    args: {\n        ...NeutralMuted.args,\n        disabled: true\n    }\n};\n\nexport const NeutralStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-strong\"\n    }\n};\n\nexport const NeutralStrongDisabled: Story = {\n    args: {\n        ...NeutralStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralXStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-xstrong\"\n    }\n};\n\nexport const NeutralXStrongDisabled: Story = {\n    args: {\n        ...NeutralXStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralDark: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-dark\"\n    }\n};\n\nexport const NeutralDarkDisabled: Story = {\n    args: {\n        ...NeutralDark.args,\n        disabled: true\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent\"\n    }\n};\n\nexport const AccentDisabled: Story = {\n    args: {\n        ...Accent.args,\n        disabled: true\n    }\n};\n\nexport const AccentLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent-light\"\n    }\n};\n\nexport const AccentLightDisabled: Story = {\n    args: {\n        ...AccentLight.args,\n        disabled: true\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success\"\n    }\n};\n\nexport const SuccessDisabled: Story = {\n    args: {\n        ...Success.args,\n        disabled: true\n    }\n};\n\nexport const SuccessLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success-light\"\n    }\n};\n\nexport const SuccessLightDisabled: Story = {\n    args: {\n        ...SuccessLight.args,\n        disabled: true\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"warning\"\n    }\n};\n\nexport const WarningDisabled: Story = {\n    args: {\n        ...Warning.args,\n        disabled: true\n    }\n};\n\nexport const Destructive: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"destructive\"\n    }\n};\n\nexport const DestructiveDisabled: Story = {\n    args: {\n        ...Destructive.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: WithOnDismissCallback.args,\n    render: args => {\n        return (\n            <div className={\"flex gap-sm\"}>\n                <Tag {...args} content={\"Neutral base\"} variant={\"neutral-base\"} />\n                <Tag {...args} content={\"Neutral base outline\"} variant={\"neutral-base-outline\"} />\n                <Tag {...args} content={\"Neutral light\"} variant={\"neutral-light\"} />\n                <Tag {...args} content={\"Neutral muted\"} variant={\"neutral-muted\"} />\n                <Tag {...args} content={\"Neutral strong\"} variant={\"neutral-strong\"} />\n                <Tag {...args} content={\"Neutral xstrong\"} variant={\"neutral-xstrong\"} />\n                <Tag {...args} content={\"Neutral dark\"} variant={\"neutral-dark\"} />\n                <Tag {...args} content={\"Success\"} variant={\"success\"} />\n                <Tag {...args} content={\"Success light\"} variant={\"success-light\"} />\n                <Tag {...args} content={\"Warning\"} variant={\"warning\"} />\n                <Tag {...args} content={\"Destructive\"} variant={\"destructive\"} />\n                <Tag {...args} content={\"Accent\"} variant={\"accent\"} />\n                <Tag {...args} content={\"Accent light\"} variant={\"accent-light\"} />\n            </div>\n        );\n    }\n};\n\nexport const WithSwatchColor: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\",\n        content: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        content: \"Label\",\n        variant: \"neutral-base\",\n        disabled: false,\n        onDismiss: undefined,\n        dismissIconElement: undefined,\n        dismissIconLabel: undefined\n    },\n    argTypes: {\n        content: {\n            description: \"The content of the tag. Please refer to the example code for details.\",\n            control: \"text\"\n        },\n        variant: {\n            description: \"The color variant of the tag.\",\n            control: \"select\",\n            options: [\n                \"neutral-base\",\n                \"neutral-base-outline\",\n                \"neutral-light\",\n                \"neutral-muted\",\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"success-light\",\n                \"warning\",\n                \"destructive\",\n                \"accent\",\n                \"accent-light\"\n            ]\n        },\n        disabled: {\n            description: \"Whether the tag is disabled.\",\n            control: \"boolean\"\n        },\n        onDismiss: {\n            description:\n                \"Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.\"\n        },\n        dismissIconElement: {\n            description:\n                \"Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.\"\n        },\n        dismissIconLabel: {\n            description:\n                \"Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tag","Default","InfoIcon","WithOnClickCallback","evt","console","WithOnDismissCallback","WithCustomDismissIconElement","AddIcon","NeutralBase","NeutralBaseDisabled","NeutralBaseOutline","NeutralBaseOutlineDisabled","NeutralLight","NeutralLightDisabled","NeutralMuted","NeutralMutedDisabled","NeutralStrong","NeutralStrongDisabled","NeutralXStrong","NeutralXStrongDisabled","NeutralDark","NeutralDarkDisabled","Accent","AccentDisabled","AccentLight","AccentLightDisabled","Success","SuccessDisabled","SuccessLight","SuccessLightDisabled","Warning","WarningDisabled","Destructive","DestructiveDisabled","FullExample","args","WithSwatchColor","Documentation","undefined"],"mappings":"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"}
+{"version":3,"file":"Tag/Tag.stories.js","sources":["../../src/Tag/Tag.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\nconst meta: Meta<typeof Tag> = {\n    title: \"Components/Tag\",\n    component: Tag,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {\n    args: {\n        content: \"Label\",\n        icon: <InfoIcon />\n    }\n};\n\nexport const WithOnClickCallback: Story = {\n    args: {\n        ...Default.args,\n        onClick: evt => {\n            console.log(\"onClick\", evt);\n        }\n    }\n};\n\nexport const WithOnDismissCallback: Story = {\n    args: {\n        ...Default.args,\n        onDismiss: evt => {\n            console.log(\"onDismiss\", evt);\n        }\n    }\n};\n\nexport const WithCustomDismissIconElement: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        dismissIconElement: <AddIcon />,\n        dismissIconLabel: \"Custom dismiss label\"\n    }\n};\n\nexport const NeutralBase: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base\"\n    }\n};\n\nexport const NeutralBaseDisabled: Story = {\n    args: {\n        ...NeutralBase.args,\n        disabled: true\n    }\n};\n\nexport const NeutralBaseOutline: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\"\n    }\n};\n\nexport const NeutralBaseOutlineDisabled: Story = {\n    args: {\n        ...NeutralBaseOutline.args,\n        disabled: true\n    }\n};\n\nexport const NeutralLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-light\"\n    }\n};\n\nexport const NeutralLightDisabled: Story = {\n    args: {\n        ...NeutralLight.args,\n        disabled: true\n    }\n};\n\nexport const NeutralMuted: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-muted\"\n    }\n};\n\nexport const NeutralMutedDisabled: Story = {\n    args: {\n        ...NeutralMuted.args,\n        disabled: true\n    }\n};\n\nexport const NeutralStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-strong\"\n    }\n};\n\nexport const NeutralStrongDisabled: Story = {\n    args: {\n        ...NeutralStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralXStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-xstrong\"\n    }\n};\n\nexport const NeutralXStrongDisabled: Story = {\n    args: {\n        ...NeutralXStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralDark: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-dark\"\n    }\n};\n\nexport const NeutralDarkDisabled: Story = {\n    args: {\n        ...NeutralDark.args,\n        disabled: true\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent\"\n    }\n};\n\nexport const AccentDisabled: Story = {\n    args: {\n        ...Accent.args,\n        disabled: true\n    }\n};\n\nexport const AccentLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent-light\"\n    }\n};\n\nexport const AccentLightDisabled: Story = {\n    args: {\n        ...AccentLight.args,\n        disabled: true\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success\"\n    }\n};\n\nexport const SuccessDisabled: Story = {\n    args: {\n        ...Success.args,\n        disabled: true\n    }\n};\n\nexport const SuccessLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success-light\"\n    }\n};\n\nexport const SuccessLightDisabled: Story = {\n    args: {\n        ...SuccessLight.args,\n        disabled: true\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"warning\"\n    }\n};\n\nexport const WarningDisabled: Story = {\n    args: {\n        ...Warning.args,\n        disabled: true\n    }\n};\n\nexport const Destructive: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"destructive\"\n    }\n};\n\nexport const DestructiveDisabled: Story = {\n    args: {\n        ...Destructive.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: WithOnDismissCallback.args,\n    render: args => {\n        return (\n            <div className={\"flex gap-sm\"}>\n                <Tag {...args} content={\"Neutral base\"} variant={\"neutral-base\"} />\n                <Tag {...args} content={\"Neutral base outline\"} variant={\"neutral-base-outline\"} />\n                <Tag {...args} content={\"Neutral light\"} variant={\"neutral-light\"} />\n                <Tag {...args} content={\"Neutral muted\"} variant={\"neutral-muted\"} />\n                <Tag {...args} content={\"Neutral strong\"} variant={\"neutral-strong\"} />\n                <Tag {...args} content={\"Neutral xstrong\"} variant={\"neutral-xstrong\"} />\n                <Tag {...args} content={\"Neutral dark\"} variant={\"neutral-dark\"} />\n                <Tag {...args} content={\"Success\"} variant={\"success\"} />\n                <Tag {...args} content={\"Success light\"} variant={\"success-light\"} />\n                <Tag {...args} content={\"Warning\"} variant={\"warning\"} />\n                <Tag {...args} content={\"Destructive\"} variant={\"destructive\"} />\n                <Tag {...args} content={\"Accent\"} variant={\"accent\"} />\n                <Tag {...args} content={\"Accent light\"} variant={\"accent-light\"} />\n            </div>\n        );\n    }\n};\n\nexport const WithSwatchColor: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\",\n        content: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        content: \"Label\",\n        variant: \"neutral-base\",\n        disabled: false,\n        onDismiss: undefined,\n        dismissIconElement: undefined,\n        dismissIconLabel: undefined\n    },\n    argTypes: {\n        content: {\n            description: \"The content of the tag. Please refer to the example code for details.\",\n            control: \"text\"\n        },\n        variant: {\n            description: \"The color variant of the tag.\",\n            control: \"select\",\n            options: [\n                \"neutral-base\",\n                \"neutral-base-outline\",\n                \"neutral-light\",\n                \"neutral-muted\",\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"success-light\",\n                \"warning\",\n                \"destructive\",\n                \"accent\",\n                \"accent-light\"\n            ]\n        },\n        disabled: {\n            description: \"Whether the tag is disabled.\",\n            control: \"boolean\"\n        },\n        onDismiss: {\n            description:\n                \"Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.\"\n        },\n        dismissIconElement: {\n            description:\n                \"Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.\"\n        },\n        dismissIconLabel: {\n            description:\n                \"Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tag","Default","InfoIcon","WithOnClickCallback","evt","console","WithOnDismissCallback","WithCustomDismissIconElement","AddIcon","NeutralBase","NeutralBaseDisabled","NeutralBaseOutline","NeutralBaseOutlineDisabled","NeutralLight","NeutralLightDisabled","NeutralMuted","NeutralMutedDisabled","NeutralStrong","NeutralStrongDisabled","NeutralXStrong","NeutralXStrongDisabled","NeutralDark","NeutralDarkDisabled","Accent","AccentDisabled","AccentLight","AccentLightDisabled","Success","SuccessDisabled","SuccessLight","SuccessLightDisabled","Warning","WarningDisabled","Destructive","DestructiveDisabled","FullExample","args","WithSwatchColor","Documentation","undefined"],"mappings":"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"}