@webiny/admin-ui 6.0.0-alpha.0

package/List/List.stories.js

@@ -0,0 +1,352 @@
+import React from "react";
+import { ReactComponent as ChartIcon } from "@webiny/icons/insert_chart.svg";
+import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as OpenIcon } from "@webiny/icons/visibility.svg";
+import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
+import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
+import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+import { List } from "./List";
+import { Avatar } from "../Avatar";
+const meta = {
+  title: "Components/List",
+  component: List,
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+const ListItem = props => {
+  return /*#__PURE__*/React.createElement(List.Item, Object.assign({
+    title: `List item ${props.index}`
+  }, props));
+};
+export const Default = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+      index: 1
+    }), /*#__PURE__*/React.createElement(ListItem, {
+      index: 2
+    }), /*#__PURE__*/React.createElement(ListItem, {
+      index: 3
+    }))
+  }
+};
+export const WithTransparentBackground = {
+  args: {
+    background: "transparent",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(UserIcon, null),
+      title: "User Profile",
+      description: "View and edit your profile information"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      title: "Settings",
+      description: "Configure application settings"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
+      title: "Help & Support",
+      description: "Get assistance and view documentation"
+    }))
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-light wby-p-md"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const WithBaseBackground = {
+  args: {
+    ...Default.args,
+    background: "base"
+  }
+};
+export const WithLightBackground = {
+  args: {
+    background: "light",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(UserIcon, null),
+      title: "User Profile",
+      description: "View and edit your profile information"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      title: "Settings",
+      description: "Configure application settings"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
+      title: "Help & Support",
+      description: "Get assistance and view documentation"
+    }))
+  }
+};
+export const WithUnderlineVariant = {
+  args: {
+    ...Default.args,
+    variant: "underline"
+  }
+};
+export const WithContainerVariant = {
+  args: {
+    variant: "container",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(UserIcon, null),
+      title: "User Profile",
+      description: "View and edit your profile information"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      title: "Settings",
+      description: "Configure application settings"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
+      title: "Help & Support",
+      description: "Get assistance and view documentation"
+    }))
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-light wby-p-md"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const WithDescription = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      title: "User Profile",
+      description: "View and edit your profile information"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Settings",
+      description: "Configure application settings"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Help & Support",
+      description: "Get assistance and view documentation"
+    }))
+  }
+};
+export const WithIcon = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(UserIcon, null),
+      title: "User Profile"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      title: "Settings"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
+      title: "Help & Support"
+    }))
+  }
+};
+export const WithIconsAndDescriptions = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(UserIcon, null),
+      title: "User Profile",
+      description: "View and edit your profile information"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      title: "Settings",
+      description: "Configure application settings"
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
+      title: "Help & Support",
+      description: "Get assistance and view documentation"
+    }))
+  }
+};
+export const WithAvatar = {
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+      index: 1,
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      icon: /*#__PURE__*/React.createElement(Avatar, {
+        image: /*#__PURE__*/React.createElement(Avatar.Image, {
+          src: "https://i.pravatar.cc/300?img=1",
+          alt: "@webiny"
+        }),
+        fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, "W")
+      })
+    }), /*#__PURE__*/React.createElement(ListItem, {
+      index: 2,
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      icon: /*#__PURE__*/React.createElement(Avatar, {
+        image: /*#__PURE__*/React.createElement(Avatar.Image, {
+          src: "https://i.pravatar.cc/300?img=2",
+          alt: "@webiny"
+        }),
+        fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, "W")
+      })
+    }))
+  }
+};
+export const WithHandle = {
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+      index: 1,
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      handle: /*#__PURE__*/React.createElement(List.Item.Handle, null)
+    }), /*#__PURE__*/React.createElement(ListItem, {
+      index: 2,
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      handle: /*#__PURE__*/React.createElement(List.Item.Handle, null)
+    }))
+  }
+};
+export const WithActions = {
+  ...Default,
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+      index: 1,
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      icon: /*#__PURE__*/React.createElement(List.Item.Icon, {
+        icon: /*#__PURE__*/React.createElement(ChartIcon, null),
+        label: "Chart"
+      }),
+      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(EditIcon, null)
+      }), /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(TrashIcon, null)
+      }), /*#__PURE__*/React.createElement(List.Item.Action.Separator, null), /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(OpenIcon, null)
+      }), /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(MoreIcon, null)
+      }))
+    }), /*#__PURE__*/React.createElement(ListItem, {
+      index: 2,
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+      icon: /*#__PURE__*/React.createElement(List.Item.Icon, {
+        icon: /*#__PURE__*/React.createElement(ChartIcon, null),
+        label: "Chart"
+      }),
+      actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(EditIcon, null)
+      }), /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(TrashIcon, null)
+      }), /*#__PURE__*/React.createElement(List.Item.Action.Separator, null), /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(OpenIcon, null)
+      }), /*#__PURE__*/React.createElement(List.Item.Action, {
+        icon: /*#__PURE__*/React.createElement(MoreIcon, null)
+      }))
+    }))
+  }
+};
+export const WithDisabled = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      title: "User Profile",
+      description: "View and edit your profile information",
+      onClick: () => alert("User Profile clicked")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Settings",
+      description: "Configure application settings",
+      disabled: true,
+      onClick: () => alert("This alert won't show because the item is disabled")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Help & Support",
+      description: "Get assistance and view documentation",
+      onClick: () => alert("Help & Support clicked")
+    }))
+  }
+};
+export const WithActivated = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      title: "User Profile",
+      description: "View and edit your profile information",
+      activated: true,
+      onClick: () => console.log("User Profile clicked")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Settings",
+      description: "Configure application settings",
+      onClick: () => console.log("Settings clicked")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Help & Support",
+      description: "Get assistance and view documentation",
+      onClick: () => console.log("Help & Support clicked")
+    }))
+  }
+};
+export const WithClickHandlers = {
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      title: "User Profile",
+      description: "View and edit your profile information",
+      onClick: () => alert("User Profile clicked")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Settings",
+      description: "Configure application settings",
+      onClick: () => alert("Settings clicked")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Help & Support",
+      description: "Get assistance and view documentation",
+      onClick: () => alert("Help & Support clicked")
+    }))
+  }
+};
+export const WithSelectedItem = {
+  render: () => {
+    // Using render function to handle state
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    return /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, {
+      title: "User Profile",
+      description: "View and edit your profile information",
+      selected: selectedIndex === 0,
+      onClick: () => setSelectedIndex(0)
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Settings",
+      description: "Configure application settings",
+      selected: selectedIndex === 1,
+      onClick: () => setSelectedIndex(1)
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      title: "Help & Support",
+      description: "Get assistance and view documentation",
+      selected: selectedIndex === 2,
+      onClick: () => setSelectedIndex(2)
+    }));
+  }
+};
+export const Documentation = {
+  args: {
+    variant: "underline",
+    background: "base",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(UserIcon, null),
+      title: "User Profile",
+      description: "View and edit your profile information",
+      onClick: () => console.log("User Profile clicked")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+      title: "Settings",
+      description: "Configure application settings",
+      onClick: () => console.log("Settings clicked")
+    }), /*#__PURE__*/React.createElement(List.Item, {
+      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
+      title: "Help & Support",
+      description: "Get assistance and view documentation",
+      onClick: () => console.log("Help & Support clicked")
+    }))
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["underline", "container"],
+      description: "The visual style of the list"
+    },
+    background: {
+      control: "select",
+      options: ["base", "light", "transparent"],
+      description: "The background color of the list"
+    },
+    children: {
+      description: "The content of the list. Please refer to the example code for details.",
+      control: "none"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "This example shows a List with icons, titles, descriptions, and click handlers."
+      }
+    }
+  }
+};
+
+//# sourceMappingURL=List.stories.js.map

package/List/List.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","ChartIcon","MoreIcon","OpenIcon","EditIcon","TrashIcon","UserIcon","SettingsIcon","HelpIcon","List","Avatar","meta","title","component","parameters","layout","ListItem","props","createElement","Item","Object","assign","index","Default","args","children","Fragment","WithTransparentBackground","background","icon","description","decorators","Story","className","WithBaseBackground","WithLightBackground","WithUnderlineVariant","variant","WithContainerVariant","WithDescription","WithIcon","WithIconsAndDescriptions","WithAvatar","image","Image","src","alt","fallback","Fallback","WithHandle","handle","Handle","WithActions","Icon","label","actions","Action","Separator","WithDisabled","onClick","alert","disabled","WithActivated","activated","console","log","WithClickHandlers","WithSelectedItem","render","selectedIndex","setSelectedIndex","useState","selected","Documentation","argTypes","control","options","docs","story"],"sources":["List.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ChartIcon } from \"@webiny/icons/insert_chart.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as OpenIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as UserIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { List, type ListItemProps as BaseListItemProps } from \"./List\";\nimport { Avatar } from \"~/Avatar\";\n\nconst meta: Meta<typeof List> = {\n    title: \"Components/List\",\n    component: List,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof List>;\n\ninterface ListItemProps extends Omit<BaseListItemProps, \"title\"> {\n    index: number;\n}\n\nconst ListItem = (props: ListItemProps) => {\n    return <List.Item title={`List item ${props.index}`} {...props} />;\n};\n\nexport const Default: Story = {\n    args: {\n        children: (\n            <>\n                <ListItem index={1} />\n                <ListItem index={2} />\n                <ListItem index={3} />\n            </>\n        )\n    }\n};\n\nexport const WithTransparentBackground: Story = {\n    args: {\n        background: \"transparent\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-light wby-p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithBaseBackground: Story = {\n    args: {\n        ...Default.args,\n        background: \"base\"\n    }\n};\n\nexport const WithLightBackground: Story = {\n    args: {\n        background: \"light\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithUnderlineVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"underline\"\n    }\n};\n\nexport const WithContainerVariant: Story = {\n    args: {\n        variant: \"container\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-light wby-p-md\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithDescription: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item title=\"Settings\" description=\"Configure application settings\" />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item icon={<UserIcon />} title=\"User Profile\" />\n                <List.Item icon={<SettingsIcon />} title=\"Settings\" />\n                <List.Item icon={<HelpIcon />} title=\"Help & Support\" />\n            </>\n        )\n    }\n};\n\nexport const WithIconsAndDescriptions: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                />\n            </>\n        )\n    }\n};\n\nexport const WithAvatar: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=1\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={\n                        <Avatar\n                            image={\n                                <Avatar.Image src=\"https://i.pravatar.cc/300?img=2\" alt=\"@webiny\" />\n                            }\n                            fallback={<Avatar.Fallback>W</Avatar.Fallback>}\n                        />\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithHandle: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    handle={<List.Item.Handle />}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    ...Default,\n    args: {\n        children: (\n            <>\n                <ListItem\n                    index={1}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n                <ListItem\n                    index={2}\n                    description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n                    icon={<List.Item.Icon icon={<ChartIcon />} label={\"Chart\"} />}\n                    actions={\n                        <>\n                            <List.Item.Action icon={<EditIcon />} />\n                            <List.Item.Action icon={<TrashIcon />} />\n                            <List.Item.Action.Separator />\n                            <List.Item.Action icon={<OpenIcon />} />\n                            <List.Item.Action icon={<MoreIcon />} />\n                        </>\n                    }\n                />\n            </>\n        )\n    }\n};\n\nexport const WithDisabled: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    disabled={true}\n                    onClick={() => alert(\"This alert won't show because the item is disabled\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithActivated: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    activated={true}\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithClickHandlers: Story = {\n    args: {\n        children: (\n            <>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => alert(\"User Profile clicked\")}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => alert(\"Settings clicked\")}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => alert(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSelectedItem: Story = {\n    render: () => {\n        // Using render function to handle state\n        const [selectedIndex, setSelectedIndex] = React.useState(0);\n\n        return (\n            <List>\n                <List.Item\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    selected={selectedIndex === 0}\n                    onClick={() => setSelectedIndex(0)}\n                />\n                <List.Item\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    selected={selectedIndex === 1}\n                    onClick={() => setSelectedIndex(1)}\n                />\n                <List.Item\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    selected={selectedIndex === 2}\n                    onClick={() => setSelectedIndex(2)}\n                />\n            </List>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"underline\",\n        background: \"base\",\n        children: (\n            <>\n                <List.Item\n                    icon={<UserIcon />}\n                    title=\"User Profile\"\n                    description=\"View and edit your profile information\"\n                    onClick={() => console.log(\"User Profile clicked\")}\n                />\n                <List.Item\n                    icon={<SettingsIcon />}\n                    title=\"Settings\"\n                    description=\"Configure application settings\"\n                    onClick={() => console.log(\"Settings clicked\")}\n                />\n                <List.Item\n                    icon={<HelpIcon />}\n                    title=\"Help & Support\"\n                    description=\"Get assistance and view documentation\"\n                    onClick={() => console.log(\"Help & Support clicked\")}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"underline\", \"container\"],\n            description: \"The visual style of the list\"\n        },\n        background: {\n            control: \"select\",\n            options: [\"base\", \"light\", \"transparent\"],\n            description: \"The background color of the list\"\n        },\n        children: {\n            description: \"The content of the list. Please refer to the example code for details.\",\n            control: \"none\"\n        }\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a List with icons, titles, descriptions, and click handlers.\"\n            }\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,gCAAgC;AAC5E,SAASD,cAAc,IAAIE,QAAQ,QAAQ,6BAA6B;AACxE,SAASF,cAAc,IAAIG,QAAQ,QAAQ,8BAA8B;AACzE,SAASH,cAAc,IAAII,QAAQ,QAAQ,wBAAwB;AACnE,SAASJ,cAAc,IAAIK,SAAS,QAAQ,0BAA0B;AACtE,SAASL,cAAc,IAAIM,QAAQ,QAAQ,0BAA0B;AACrE,SAASN,cAAc,IAAIO,YAAY,QAAQ,4BAA4B;AAC3E,SAASP,cAAc,IAAIQ,QAAQ,QAAQ,wBAAwB;AAEnE,SAASC,IAAI;AACb,SAASC,MAAM;AAEf,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,iBAAiB;EACxBC,SAAS,EAAEJ,IAAI;EACfK,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeJ,IAAI;AAQnB,MAAMK,QAAQ,GAAIC,KAAoB,IAAK;EACvC,oBAAOlB,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAACT,KAAK,EAAE,aAAaK,KAAK,CAACK,KAAK;EAAG,GAAKL,KAAK,CAAG,CAAC;AACtE,CAAC;AAED,OAAO,MAAMM,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MAACM,KAAK,EAAE;IAAE,CAAE,CAAC,eACtBvB,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MAACM,KAAK,EAAE;IAAE,CAAE,CAAC,eACtBvB,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MAACM,KAAK,EAAE;IAAE,CAAE,CACvB;EAEV;AACJ,CAAC;AAED,OAAO,MAAMK,yBAAgC,GAAG;EAC5CH,IAAI,EAAE;IACFI,UAAU,EAAE,aAAa;IACzBH,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDjC,KAAA,CAAAmB,aAAA;IAAKe,SAAS,EAAC;EAA+B,gBAC1ClC,KAAA,CAAAmB,aAAA,CAACc,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,OAAO,MAAME,kBAAyB,GAAG;EACrCV,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfI,UAAU,EAAE;EAChB;AACJ,CAAC;AAED,OAAO,MAAMO,mBAA0B,GAAG;EACtCX,IAAI,EAAE;IACFI,UAAU,EAAE,OAAO;IACnBH,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMM,oBAA2B,GAAG;EACvCZ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfa,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,oBAA2B,GAAG;EACvCd,IAAI,EAAE;IACFa,OAAO,EAAE,WAAW;IACpBZ,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACDjC,KAAA,CAAAmB,aAAA;IAAKe,SAAS,EAAC;EAA+B,gBAC1ClC,KAAA,CAAAmB,aAAA,CAACc,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,OAAO,MAAMO,eAAsB,GAAG;EAClCf,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACP,KAAK,EAAC,UAAU;MAACkB,WAAW,EAAC;IAAgC,CAAE,CAAC,eAC3E/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMU,QAAe,GAAG;EAC3BhB,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MAACM,KAAK,EAAC;IAAc,CAAE,CAAC,eACtDb,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MAACK,KAAK,EAAC;IAAU,CAAE,CAAC,eACtDb,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MAACU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MAACI,KAAK,EAAC;IAAgB,CAAE,CACzD;EAEV;AACJ,CAAC;AAED,OAAO,MAAM6B,wBAA+B,GAAG;EAC3CjB,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC;IAAwC,CACvD,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC;IAAgC,CAC/C,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC;IAAuC,CACtD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMY,UAAiB,GAAG;EAC7BlB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eACA9B,KAAA,CAAAmB,aAAA,CAACR,MAAM;QACHiC,KAAK,eACD5C,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACkC,KAAK;UAACC,GAAG,EAAC,iCAAiC;UAACC,GAAG,EAAC;QAAS,CAAE,CACtE;QACDC,QAAQ,eAAEhD,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACsC,QAAQ,QAAC,GAAkB;MAAE,CAClD;IACJ,CACJ,CAAC,eACFjD,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eACA9B,KAAA,CAAAmB,aAAA,CAACR,MAAM;QACHiC,KAAK,eACD5C,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACkC,KAAK;UAACC,GAAG,EAAC,iCAAiC;UAACC,GAAG,EAAC;QAAS,CAAE,CACtE;QACDC,QAAQ,eAAEhD,KAAA,CAAAmB,aAAA,CAACR,MAAM,CAACsC,QAAQ,QAAC,GAAkB;MAAE,CAClD;IACJ,CACJ,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BzB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtEoB,MAAM,eAAEnD,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACgC,MAAM,MAAE;IAAE,CAChC,CAAC,eACFpD,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtEoB,MAAM,eAAEnD,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACgC,MAAM,MAAE;IAAE,CAChC,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,WAAkB,GAAG;EAC9B,GAAG7B,OAAO;EACVC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACkC,IAAI;QAACxB,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACjB,SAAS,MAAE,CAAE;QAACqD,KAAK,EAAE;MAAQ,CAAE,CAAE;MAC9DC,OAAO,eACHxD,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACd,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCL,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACb,SAAS,MAAE;MAAE,CAAE,CAAC,eACzCN,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM,CAACC,SAAS,MAAE,CAAC,eAC9B1D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACf,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCJ,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAAChB,QAAQ,MAAE;MAAE,CAAE,CACzC;IACL,CACJ,CAAC,eACFH,KAAA,CAAAmB,aAAA,CAACF,QAAQ;MACLM,KAAK,EAAE,CAAE;MACTQ,WAAW,EAAC,0DAA0D;MACtED,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACkC,IAAI;QAACxB,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACjB,SAAS,MAAE,CAAE;QAACqD,KAAK,EAAE;MAAQ,CAAE,CAAE;MAC9DC,OAAO,eACHxD,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACd,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCL,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACb,SAAS,MAAE;MAAE,CAAE,CAAC,eACzCN,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM,CAACC,SAAS,MAAE,CAAC,eAC9B1D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACf,QAAQ,MAAE;MAAE,CAAE,CAAC,eACxCJ,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI,CAACqC,MAAM;QAAC3B,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAAChB,QAAQ,MAAE;MAAE,CAAE,CACzC;IACL,CACJ,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMwD,YAAmB,GAAG;EAC/BlC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,sBAAsB;IAAE,CAChD,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C+B,QAAQ,EAAE,IAAK;MACfF,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,oDAAoD;IAAE,CAC9E,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,wBAAwB;IAAE,CAClD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAME,aAAoB,GAAG;EAChCtC,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpDiC,SAAS,EAAE,IAAK;MAChBJ,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,sBAAsB;IAAE,CACtD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,kBAAkB;IAAE,CAClD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,wBAAwB;IAAE,CACxD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,iBAAwB,GAAG;EACpC1C,IAAI,EAAE;IACFC,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,sBAAsB;IAAE,CAChD,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,kBAAkB;IAAE,CAC5C,CAAC,eACF7D,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,wBAAwB;IAAE,CAClD,CACH;EAEV;AACJ,CAAC;AAED,OAAO,MAAMO,gBAAuB,GAAG;EACnCC,MAAM,EAAEA,CAAA,KAAM;IACV;IACA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGvE,KAAK,CAACwE,QAAQ,CAAC,CAAC,CAAC;IAE3D,oBACIxE,KAAA,CAAAmB,aAAA,CAACT,IAAI,qBACDV,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD0C,QAAQ,EAAEH,aAAa,KAAK,CAAE;MAC9BV,OAAO,EAAEA,CAAA,KAAMW,gBAAgB,CAAC,CAAC;IAAE,CACtC,CAAC,eACFvE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C0C,QAAQ,EAAEH,aAAa,KAAK,CAAE;MAC9BV,OAAO,EAAEA,CAAA,KAAMW,gBAAgB,CAAC,CAAC;IAAE,CACtC,CAAC,eACFvE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNP,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD0C,QAAQ,EAAEH,aAAa,KAAK,CAAE;MAC9BV,OAAO,EAAEA,CAAA,KAAMW,gBAAgB,CAAC,CAAC;IAAE,CACtC,CACC,CAAC;EAEf;AACJ,CAAC;AAED,OAAO,MAAMG,aAAoB,GAAG;EAChCjD,IAAI,EAAE;IACFa,OAAO,EAAE,WAAW;IACpBT,UAAU,EAAE,MAAM;IAClBH,QAAQ,eACJ1B,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACZ,QAAQ,MAAE,CAAE;MACnBM,KAAK,EAAC,cAAc;MACpBkB,WAAW,EAAC,wCAAwC;MACpD6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,sBAAsB;IAAE,CACtD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACX,YAAY,MAAE,CAAE;MACvBK,KAAK,EAAC,UAAU;MAChBkB,WAAW,EAAC,gCAAgC;MAC5C6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,kBAAkB;IAAE,CAClD,CAAC,eACFlE,KAAA,CAAAmB,aAAA,CAACT,IAAI,CAACU,IAAI;MACNU,IAAI,eAAE9B,KAAA,CAAAmB,aAAA,CAACV,QAAQ,MAAE,CAAE;MACnBI,KAAK,EAAC,gBAAgB;MACtBkB,WAAW,EAAC,uCAAuC;MACnD6B,OAAO,EAAEA,CAAA,KAAMK,OAAO,CAACC,GAAG,CAAC,wBAAwB;IAAE,CACxD,CACH;EAEV,CAAC;EACDS,QAAQ,EAAE;IACNrC,OAAO,EAAE;MACLsC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;MACnC9C,WAAW,EAAE;IACjB,CAAC;IACDF,UAAU,EAAE;MACR+C,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,aAAa,CAAC;MACzC9C,WAAW,EAAE;IACjB,CAAC;IACDL,QAAQ,EAAE;MACNK,WAAW,EAAE,wEAAwE;MACrF6C,OAAO,EAAE;IACb;EACJ,CAAC;EACD7D,UAAU,EAAE;IACR+D,IAAI,EAAE;MACF/C,WAAW,EAAE;QACTgD,KAAK,EAAE;MACX;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/List/components/ListItem.d.ts

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils";
+declare const listItemVariant: (props?: ({
+    disabled?: boolean | null | undefined;
+    activated?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    clickable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof listItemVariant> {
+    title: React.ReactNode;
+    actions?: React.ReactNode;
+    description?: React.ReactNode;
+    handle?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+declare const ListItem: (({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+    original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Action: ((props: import("../../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+        original: (props: import("../../Button/IconButton").IconButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+            original: (props: import("../../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
+            original: (props: import("../../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        Separator: ((props: import("../../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+            original: (props: import("../../Separator/Separator").SeparatorProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: ((props: import("../../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                original: (props: import("../../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
+                original: (props: import("../../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+    };
+    Handle: ((props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
+        original: (props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
+            original: (props: import("./ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    Icon: ((props: import("../../Icon/Icon").IconProps) => React.JSX.Element) & {
+        original: (props: import("../../Icon/Icon").IconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../../Icon/Icon").IconProps) => React.JSX.Element) & {
+            original: (props: import("../../Icon/Icon").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../../Icon/Icon").IconProps) => React.JSX.Element) & {
+            original: (props: import("../../Icon/Icon").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+};
+export { ListItem, type ListItemProps };

package/List/components/ListItem.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { cn, cva, makeDecoratable, withStaticProps } from "../../utils";
+import { Text } from "../../Text";
+import { ListItemAction } from "./ListItemAction";
+import { ListItemHandle } from "./ListItemHandle";
+import { ListItemIcon } from "./ListItemIcon";
+const listItemVariant = cva(["wby-w-full wby-flex wby-items-center", "group-[.wby-list-background-base]:wby-bg-neutral-base", "group-[.wby-list-background-light]:wby-bg-neutral-light", "group-[.wby-list-variant-container]:wby-rounded-sm", "group-[.wby-list-variant-underline]:wby-border-b-sm group-[.wby-list-variant-underline]:wby-border-b-neutral-dimmed", "hover:!wby-bg-neutral-dimmed", "focus-visible:wby-outline-none focus-visible:wby-ring-sm focus-visible:wby-ring-inset focus-visible:wby-ring-primary-dimmed"], {
+  variants: {
+    disabled: {
+      true: "wby-pointer-events-none wby-opacity-50"
+    },
+    activated: {
+      true: "!wby-bg-neutral-light"
+    },
+    selected: {
+      true: "!wby-bg-neutral-light"
+    },
+    clickable: {
+      true: "wby-cursor-pointer"
+    }
+  }
+});
+const DecoratableListItem = ({
+  actions,
+  children,
+  className,
+  description,
+  activated,
+  disabled,
+  selected,
+  handle,
+  icon,
+  onClick,
+  title,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    tabIndex: 0,
+    className: cn(listItemVariant({
+      disabled,
+      activated,
+      selected,
+      clickable: Boolean(onClick)
+    }), className)
+  }), handle, /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-flex wby-justify-between wby-items-center wby-pl-lg wby-pr-md wby-py-sm-extra"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-flex wby-items-center wby-gap-md",
+    onClick: onClick
+  }, icon && /*#__PURE__*/React.createElement("div", null, icon), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "md",
+    as: "div",
+    className: "wby-font-semibold wby-text-neutral-primary"
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    as: "div",
+    className: "wby-text-neutral-strong"
+  }, description))), actions && /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-center wby-gap-xs-plus"
+  }, actions)), children);
+};
+const ListItem = withStaticProps(makeDecoratable("ListItem", DecoratableListItem), {
+  Action: ListItemAction,
+  Handle: ListItemHandle,
+  Icon: ListItemIcon
+});
+export { ListItem };
+
+//# sourceMappingURL=ListItem.js.map

package/List/components/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","Text","ListItemAction","ListItemHandle","ListItemIcon","listItemVariant","variants","disabled","true","activated","selected","clickable","DecoratableListItem","actions","children","className","description","handle","icon","onClick","title","props","createElement","Object","assign","tabIndex","Boolean","size","as","ListItem","Action","Handle","Icon"],"sources":["ListItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, makeDecoratable, withStaticProps, type VariantProps } from \"~/utils\";\nimport { Text } from \"~/Text\";\nimport { ListItemAction } from \"./ListItemAction\";\nimport { ListItemHandle } from \"./ListItemHandle\";\nimport { ListItemIcon } from \"./ListItemIcon\";\n\nconst listItemVariant = cva(\n    [\n        \"wby-w-full wby-flex wby-items-center\",\n        \"group-[.wby-list-background-base]:wby-bg-neutral-base\",\n        \"group-[.wby-list-background-light]:wby-bg-neutral-light\",\n        \"group-[.wby-list-variant-container]:wby-rounded-sm\",\n        \"group-[.wby-list-variant-underline]:wby-border-b-sm group-[.wby-list-variant-underline]:wby-border-b-neutral-dimmed\",\n        \"hover:!wby-bg-neutral-dimmed\",\n        \"focus-visible:wby-outline-none focus-visible:wby-ring-sm focus-visible:wby-ring-inset focus-visible:wby-ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            disabled: {\n                true: \"wby-pointer-events-none wby-opacity-50\"\n            },\n            activated: {\n                true: \"!wby-bg-neutral-light\"\n            },\n            selected: {\n                true: \"!wby-bg-neutral-light\"\n            },\n            clickable: {\n                true: \"wby-cursor-pointer\"\n            }\n        }\n    }\n);\n\ninterface ListItemProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof listItemVariant> {\n    title: React.ReactNode;\n    actions?: React.ReactNode;\n    description?: React.ReactNode;\n    handle?: React.ReactNode;\n    icon?: React.ReactNode;\n}\n\nconst DecoratableListItem = ({\n    actions,\n    children,\n    className,\n    description,\n    activated,\n    disabled,\n    selected,\n    handle,\n    icon,\n    onClick,\n    title,\n    ...props\n}: ListItemProps) => {\n    return (\n        <div\n            {...props}\n            tabIndex={0}\n            className={cn(\n                listItemVariant({ disabled, activated, selected, clickable: Boolean(onClick) }),\n                className\n            )}\n        >\n            {handle}\n            <div\n                className={\n                    \"wby-w-full wby-flex wby-justify-between wby-items-center wby-pl-lg wby-pr-md wby-py-sm-extra\"\n                }\n            >\n                <div\n                    className={\"wby-w-full wby-flex wby-items-center wby-gap-md\"}\n                    onClick={onClick}\n                >\n                    {icon && <div>{icon}</div>}\n                    <div\n                        className={\"wby-flex wby-flex-col wby-gap-xxs wby-flex-grow wby-text-left\"}\n                    >\n                        <Text\n                            size={\"md\"}\n                            as={\"div\"}\n                            className={\"wby-font-semibold wby-text-neutral-primary\"}\n                        >\n                            {title}\n                        </Text>\n                        <Text size={\"sm\"} as={\"div\"} className={\"wby-text-neutral-strong\"}>\n                            {description}\n                        </Text>\n                    </div>\n                </div>\n                {actions && (\n                    <div className={\"wby-flex wby-items-center wby-gap-xs-plus\"}>{actions}</div>\n                )}\n            </div>\n            {children}\n        </div>\n    );\n};\n\nconst ListItem = withStaticProps(makeDecoratable(\"ListItem\", DecoratableListItem), {\n    Action: ListItemAction,\n    Handle: ListItemHandle,\n    Icon: ListItemIcon\n});\n\nexport { ListItem, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe,EAAEC,eAAe;AAClD,SAASC,IAAI;AACb,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,YAAY;AAErB,MAAMC,eAAe,GAAGP,GAAG,CACvB,CACI,sCAAsC,EACtC,uDAAuD,EACvD,yDAAyD,EACzD,oDAAoD,EACpD,qHAAqH,EACrH,8BAA8B,EAC9B,6HAA6H,CAChI,EACD;EACIQ,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,SAAS,EAAE;MACPD,IAAI,EAAE;IACV,CAAC;IACDE,QAAQ,EAAE;MACNF,IAAI,EAAE;IACV,CAAC;IACDG,SAAS,EAAE;MACPH,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAYD,MAAMI,mBAAmB,GAAGA,CAAC;EACzBC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXP,SAAS;EACTF,QAAQ;EACRG,QAAQ;EACRO,MAAM;EACNC,IAAI;EACJC,OAAO;EACPC,KAAK;EACL,GAAGC;AACQ,CAAC,KAAK;EACjB,oBACIzB,KAAA,CAAA0B,aAAA,QAAAC,MAAA,CAAAC,MAAA,KACQH,KAAK;IACTI,QAAQ,EAAE,CAAE;IACZV,SAAS,EAAElB,EAAE,CACTQ,eAAe,CAAC;MAAEE,QAAQ;MAAEE,SAAS;MAAEC,QAAQ;MAAEC,SAAS,EAAEe,OAAO,CAACP,OAAO;IAAE,CAAC,CAAC,EAC/EJ,SACJ;EAAE,IAEDE,MAAM,eACPrB,KAAA,CAAA0B,aAAA;IACIP,SAAS,EACL;EACH,gBAEDnB,KAAA,CAAA0B,aAAA;IACIP,SAAS,EAAE,iDAAkD;IAC7DI,OAAO,EAAEA;EAAQ,GAEhBD,IAAI,iBAAItB,KAAA,CAAA0B,aAAA,cAAMJ,IAAU,CAAC,eAC1BtB,KAAA,CAAA0B,aAAA;IACIP,SAAS,EAAE;EAAgE,gBAE3EnB,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IACD0B,IAAI,EAAE,IAAK;IACXC,EAAE,EAAE,KAAM;IACVb,SAAS,EAAE;EAA6C,GAEvDK,KACC,CAAC,eACPxB,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAAC0B,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE,KAAM;IAACb,SAAS,EAAE;EAA0B,GAC7DC,WACC,CACL,CACJ,CAAC,EACLH,OAAO,iBACJjB,KAAA,CAAA0B,aAAA;IAAKP,SAAS,EAAE;EAA4C,GAAEF,OAAa,CAE9E,CAAC,EACLC,QACA,CAAC;AAEd,CAAC;AAED,MAAMe,QAAQ,GAAG7B,eAAe,CAACD,eAAe,CAAC,UAAU,EAAEa,mBAAmB,CAAC,EAAE;EAC/EkB,MAAM,EAAE5B,cAAc;EACtB6B,MAAM,EAAE5B,cAAc;EACtB6B,IAAI,EAAE5B;AACV,CAAC,CAAC;AAEF,SAASyB,QAAQ","ignoreList":[]}