@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/Card/Card.stories.js

@@ -1,101 +1,164 @@
 import React from "react";
-import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
-import { Card } from "./Card";
-import { Button, IconButton } from "../Button";
-import { Icon } from "../Icon";
+import { Card } from "./Card.js";
+import { Button } from "../Button/index.js";
+import { DropdownMenu } from "../DropdownMenu/index.js";
+import { ReactComponent as NotificationIcon } from "@webiny/icons/notifications_active.svg";
+import { Tabs } from "../Tabs/index.js";
 const meta = {
   title: "Components/Card",
   component: Card,
+  argTypes: {},
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[700px] wby-rounded-[5px] wby-px-[50px] wby-content-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "wby-m-auto wby-w-[300px]"
-  }, /*#__PURE__*/React.createElement(Story, null)))]
+    className: "bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed"
+  }, /*#__PURE__*/React.createElement(Story, null))]
 };
 export default meta;
 export const Default = {
   args: {
-    title: "Card title goes here",
-    description: "Card description goes here",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is card content. Anything can go in here."),
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      variant: "secondary",
-      text: "Cancel"
-    }), /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Confirm"
-    })),
-    padding: "standard",
-    elevation: "sm",
-    borderRadius: "md"
+    padding: "md",
+    title: "Card Title",
+    description: "A short card description.",
+    info: /*#__PURE__*/React.createElement(React.Fragment, null, "Learn more about this ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "here"), "."),
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "The amazing, splendid, and most useful umbrella, resistant to rain and friendly to winds, is something that deserves all admiration. Crafted with perfect textures, it bravely withstands storms and gently shades the rays of the sun. A remarkable innovation, with an ergonomically designed grip most suited to the hand, it remains stable even in the fiercest weather."),
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card.CancelAction, null), /*#__PURE__*/React.createElement(Card.ConfirmAction, null))
   },
-  argTypes: {
-    padding: {
-      control: "select",
-      options: ["none", "standard", "comfortable"]
-    },
-    elevation: {
-      control: "select",
-      options: ["none", "xs", "sm", "md", "lg", "xl"]
-    },
-    borderRadius: {
-      control: "select",
-      options: ["none", "sm", "md", "lg"]
-    }
+  argTypes: {}
+};
+export const SmallSize = {
+  args: {
+    ...Default.args,
+    size: "sm"
   }
 };
-export const NoTitleDescriptionActionsHeaderAndFooter = {
-  name: "Only Body (Without Body, Title, Actions)",
+export const PaddingSmall = {
   args: {
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is card content. Anything can go in here.")
+    ...Default.args,
+    padding: "sm"
   }
 };
-export const WithMorePadding = {
+export const PaddingMedium = {
   args: {
     ...Default.args,
-    actions: null,
-    padding: "comfortable"
+    padding: "md"
   }
 };
-export const WithMoreElevation = {
+export const PaddingLarge = {
   args: {
     ...Default.args,
-    actions: null,
-    elevation: "md"
+    padding: "lg"
   }
 };
-export const NoElevation = {
+export const WithActions = {
+  args: {
+    ...Default.args
+  }
+};
+export const WithHeaderActions = {
   args: {
     ...Default.args,
-    actions: null,
-    elevation: "none"
+    actionsPosition: "header"
   }
 };
-export const NoBorderRadius = {
+export const WithSmallHeaderActions = {
   args: {
     ...Default.args,
-    actions: null,
-    borderRadius: "none"
+    actionsPosition: "header",
+    actionsSize: "sm"
   }
 };
-export const WithOptions = {
+export const WithLargeCorners = {
   args: {
     ...Default.args,
-    actions: null,
-    options: /*#__PURE__*/React.createElement(IconButton, {
-      variant: "ghost",
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        icon: /*#__PURE__*/React.createElement(MoreVertical, null),
-        label: "More options"
-      }),
-      size: "sm",
-      iconSize: "lg",
-      onClick: () => alert("Custom action button clicked.")
+    cornerSize: "lg"
+  }
+};
+export const AccentVariant = {
+  args: {
+    ...Default.args,
+    variant: "accent"
+  }
+};
+export const DropdownMenuInCard = {
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+      trigger: /*#__PURE__*/React.createElement(Button, {
+        variant: "primary",
+        text: "Open"
+      })
+    }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+      text: "Billing"
+    }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+      text: "Settings"
+    }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
+      text: "Keyboard shortcuts"
+    })))
+  }
+};
+export const WithSmallElevation = {
+  args: {
+    ...Default.args,
+    elevation: "small"
+  }
+};
+export const WithMediumElevation = {
+  args: {
+    ...Default.args,
+    elevation: "medium"
+  }
+};
+export const WithLargeElevation = {
+  args: {
+    ...Default.args,
+    elevation: "large"
+  }
+};
+export const WithIcon = {
+  args: {
+    ...Default.args,
+    icon: /*#__PURE__*/React.createElement(Card.Icon, {
+      icon: /*#__PURE__*/React.createElement(NotificationIcon, null),
+      label: "Title icon"
     })
   }
 };
-export const WithActions = {
-  args: Default.args
+export const WithTabs = {
+  args: {
+    ...Default.args,
+    bodyPadding: false,
+    icon: /*#__PURE__*/React.createElement(Card.Icon, {
+      icon: /*#__PURE__*/React.createElement(NotificationIcon, null),
+      label: "Title icon"
+    }),
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
+      className: "w-[500px]",
+      separator: true,
+      spacing: "lg",
+      tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+        key: "account",
+        value: "account",
+        trigger: "Account",
+        content: "Make changes to your account here."
+      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+        key: "company",
+        value: "company",
+        trigger: "Company",
+        content: "Make changes to your company info here."
+      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+        key: "security",
+        value: "security",
+        trigger: "Security",
+        content: "Make changes to your security settings here."
+      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+        key: "development",
+        value: "development",
+        trigger: "Development",
+        content: "Make changes to your development settings here."
+      })]
+    }))
+  }
 };
 export const Documentation = {
   render: args => {
@@ -112,19 +175,8 @@ export const Documentation = {
       variant: "primary",
       text: "Confirm"
     })),
-    padding: "standard",
-    elevation: "sm",
-    borderRadius: "md",
-    options: /*#__PURE__*/React.createElement(IconButton, {
-      variant: "ghost",
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        icon: /*#__PURE__*/React.createElement(MoreVertical, null),
-        label: "More options"
-      }),
-      size: "sm",
-      iconSize: "lg",
-      onClick: () => alert("Custom action button clicked.")
-    })
+    padding: "sm",
+    elevation: "small"
   },
   argTypes: {
     title: {
@@ -136,16 +188,10 @@ export const Documentation = {
       control: "text"
     },
     children: {
-      description: "The main content of the card. Please refer to the example code for details on usage.",
-      control: "none"
+      description: "The main content of the card. Please refer to the example code for details on usage."
     },
     actions: {
-      description: "Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.",
-      control: "none"
-    },
-    options: {
-      description: "Additional options or actions displayed in the top-right corner. Please refer to the example code for details on usage.",
-      control: "none"
+      description: "Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage."
     },
     padding: {
       description: "Controls the amount of padding inside the card",
@@ -156,11 +202,6 @@ export const Documentation = {
       description: "Controls the shadow depth of the card",
       control: "select",
       options: ["none", "xs", "sm", "md", "lg", "xl"]
-    },
-    borderRadius: {
-      description: "Controls the roundness of the card corners",
-      control: "select",
-      options: ["none", "sm", "md", "lg"]
     }
   }
 };

package/Card/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","MoreVertical","Card","Button","IconButton","Icon","meta","title","component","decorators","Story","createElement","className","Default","args","description","children","Fragment","actions","variant","text","padding","elevation","borderRadius","argTypes","control","options","NoTitleDescriptionActionsHeaderAndFooter","name","WithMorePadding","WithMoreElevation","NoElevation","NoBorderRadius","WithOptions","icon","label","size","iconSize","onClick","alert","WithActions","Documentation","render"],"sources":["Card.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as MoreVertical } from \"@webiny/icons/more_vert.svg\";\nimport { Card } from \"./Card\";\nimport { Button, IconButton } from \"~/Button\";\nimport { Icon } from \"~/Icon\";\n\nconst meta: Meta<typeof Card> = {\n    title: \"Components/Card\",\n    component: Card,\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[700px] wby-rounded-[5px] wby-px-[50px] wby-content-center\">\n                <div className={\"wby-m-auto wby-w-[300px]\"}>\n                    <Story />\n                </div>\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Card>;\n\nexport const Default: Story = {\n    args: {\n        title: \"Card title goes here\",\n        description: \"Card description goes here\",\n        children: <>This is card content. Anything can go in here.</>,\n        actions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"standard\",\n        elevation: \"sm\",\n        borderRadius: \"md\"\n    },\n    argTypes: {\n        padding: {\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        borderRadius: {\n            control: \"select\",\n            options: [\"none\", \"sm\", \"md\", \"lg\"]\n        }\n    }\n};\n\nexport const NoTitleDescriptionActionsHeaderAndFooter: Story = {\n    name: \"Only Body (Without Body, Title, Actions)\",\n    args: {\n        children: <>This is card content. Anything can go in here.</>\n    }\n};\n\nexport const WithMorePadding: Story = {\n    args: {\n        ...Default.args,\n        actions: null,\n        padding: \"comfortable\"\n    }\n};\n\nexport const WithMoreElevation: Story = {\n    args: {\n        ...Default.args,\n        actions: null,\n        elevation: \"md\"\n    }\n};\n\nexport const NoElevation: Story = {\n    args: {\n        ...Default.args,\n        actions: null,\n        elevation: \"none\"\n    }\n};\n\nexport const NoBorderRadius: Story = {\n    args: {\n        ...Default.args,\n        actions: null,\n        borderRadius: \"none\"\n    }\n};\n\nexport const WithOptions: Story = {\n    args: {\n        ...Default.args,\n        actions: null,\n        options: (\n            <IconButton\n                variant={\"ghost\"}\n                icon={<Icon icon={<MoreVertical />} label={\"More options\"} />}\n                size={\"sm\"}\n                iconSize={\"lg\"}\n                onClick={() => alert(\"Custom action button clicked.\")}\n            />\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    args: Default.args\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Card {...args} />;\n    },\n    args: {\n        title: \"Card title goes here\",\n        description: \"Card description goes here\",\n        children: <>This is card content. Anything can go in here.</>,\n        actions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"standard\",\n        elevation: \"sm\",\n        borderRadius: \"md\",\n        options: (\n            <IconButton\n                variant={\"ghost\"}\n                icon={<Icon icon={<MoreVertical />} label={\"More options\"} />}\n                size={\"sm\"}\n                iconSize={\"lg\"}\n                onClick={() => alert(\"Custom action button clicked.\")}\n            />\n        )\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the card\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the card. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        actions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        options: {\n            description:\n                \"Additional options or actions displayed in the top-right corner. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the card\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the card\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        borderRadius: {\n            description: \"Controls the roundness of the card corners\",\n            control: \"select\",\n            options: [\"none\", \"sm\", \"md\", \"lg\"]\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Card","Button","DropdownMenu","ReactComponent","NotificationIcon","Tabs","meta","title","component","argTypes","decorators","Story","createElement","className","Default","args","padding","description","info","Fragment","href","children","actions","CancelAction","ConfirmAction","SmallSize","size","PaddingSmall","PaddingMedium","PaddingLarge","WithActions","WithHeaderActions","actionsPosition","WithSmallHeaderActions","actionsSize","WithLargeCorners","cornerSize","AccentVariant","variant","DropdownMenuInCard","trigger","text","Item","WithSmallElevation","elevation","WithMediumElevation","WithLargeElevation","WithIcon","icon","Icon","label","WithTabs","bodyPadding","separator","spacing","tabs","Tab","key","value","content","Documentation","render","control","options"],"sources":["Card.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Card } from \"./Card.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\n\nconst meta: Meta<typeof Card> = {\n    title: \"Components/Card\",\n    component: Card,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Card>;\n\nexport const Default: Story = {\n    args: {\n        padding: \"md\",\n        title: \"Card Title\",\n        description: \"A short card description.\",\n        info: (\n            <>\n                Learn more about this <a href={\"#\"}>here</a>.\n            </>\n        ),\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        ),\n        actions: (\n            <>\n                <Card.CancelAction />\n                <Card.ConfirmAction />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SmallSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const PaddingLarge: Story = {\n    args: {\n        ...Default.args,\n        padding: \"lg\"\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args\n    }\n};\nexport const WithHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\"\n    }\n};\n\nexport const WithSmallHeaderActions: Story = {\n    args: {\n        ...Default.args,\n        actionsPosition: \"header\",\n        actionsSize: \"sm\"\n    }\n};\n\nexport const WithLargeCorners: Story = {\n    args: {\n        ...Default.args,\n        cornerSize: \"lg\"\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const DropdownMenuInCard: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                <DropdownMenu trigger={<Button variant=\"primary\" text={\"Open\"} />}>\n                    <DropdownMenu.Item text={\"Billing\"} />\n                    <DropdownMenu.Item text={\"Settings\"} />\n                    <DropdownMenu.Item text={\"Keyboard shortcuts\"} />\n                </DropdownMenu>\n            </>\n        )\n    }\n};\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"small\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"medium\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"large\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithTabs: Story = {\n    args: {\n        ...Default.args,\n        bodyPadding: false,\n        icon: <Card.Icon icon={<NotificationIcon />} label={\"Title icon\"} />,\n        children: (\n            <>\n                <Tabs\n                    className={\"w-[500px]\"}\n                    separator={true}\n                    spacing={\"lg\"}\n                    tabs={[\n                        <Tabs.Tab\n                            key={\"account\"}\n                            value={\"account\"}\n                            trigger={\"Account\"}\n                            content={\"Make changes to your account here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"company\"}\n                            value={\"company\"}\n                            trigger={\"Company\"}\n                            content={\"Make changes to your company info here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"security\"}\n                            value={\"security\"}\n                            trigger={\"Security\"}\n                            content={\"Make changes to your security settings here.\"}\n                        />,\n                        <Tabs.Tab\n                            key={\"development\"}\n                            value={\"development\"}\n                            trigger={\"Development\"}\n                            content={\"Make changes to your development settings here.\"}\n                        />\n                    ]}\n                />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Card {...args} />;\n    },\n    args: {\n        title: \"Card title goes here\",\n        description: \"Card description goes here\",\n        children: <>This is card content. Anything can go in here.</>,\n        actions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"small\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the card\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the card. Please refer to the example code for details on usage.\"\n        },\n        actions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the card. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the card\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the card\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/{Dialog/components/CancelButton.d.ts → Card/components/CancelAction.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { ButtonProps } from "../../Button";
-export declare const CancelButton: ((props: ButtonProps) => React.JSX.Element) & {
+import { ButtonProps } from "../../Button/index.js";
+export declare const CancelAction: ((props: ButtonProps) => React.JSX.Element) & {
     original: (props: ButtonProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
@@ -13,7 +13,7 @@ export declare const CancelButton: ((props: ButtonProps) => React.JSX.Element) &
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
         original: (props: ButtonProps) => React.JSX.Element;
         originalName: string;
         displayName: string;

package/Card/components/CancelAction.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { makeDecoratable } from "../../utils.js";
+import { Button } from "../../Button/index.js";
+import { useCardProps } from "./CardPropsProvider.js";
+const CancelActionBase = props => {
+  const {
+    actionsSize
+  } = useCardProps();
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    text: "Cancel"
+  }, props, {
+    variant: "secondary",
+    size: actionsSize
+  }));
+};
+export const CancelAction = makeDecoratable("CancelAction", CancelActionBase);
+
+//# sourceMappingURL=CancelAction.js.map

package/Card/components/CancelAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","Button","useCardProps","CancelActionBase","props","actionsSize","createElement","Object","assign","text","variant","size","CancelAction"],"sources":["CancelAction.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport { Button, ButtonProps } from \"~/Button/index.js\";\nimport { useCardProps } from \"./CardPropsProvider.js\";\n\nconst CancelActionBase = (props: ButtonProps) => {\n    const { actionsSize } = useCardProps();\n\n    return <Button text={\"Cancel\"} {...props} variant=\"secondary\" size={actionsSize} />;\n};\nexport const CancelAction = makeDecoratable(\"CancelAction\", CancelActionBase);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe;AACxB,SAASC,MAAM;AACf,SAASC,YAAY;AAErB,MAAMC,gBAAgB,GAAIC,KAAkB,IAAK;EAC7C,MAAM;IAAEC;EAAY,CAAC,GAAGH,YAAY,CAAC,CAAC;EAEtC,oBAAOH,KAAA,CAAAO,aAAA,CAACL,MAAM,EAAAM,MAAA,CAAAC,MAAA;IAACC,IAAI,EAAE;EAAS,GAAKL,KAAK;IAAEM,OAAO,EAAC,WAAW;IAACC,IAAI,EAAEN;EAAY,EAAE,CAAC;AACvF,CAAC;AACD,OAAO,MAAMO,YAAY,GAAGZ,eAAe,CAAC,cAAc,EAAEG,gBAAgB,CAAC","ignoreList":[]}

package/Card/components/CardBody.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const CardBody: () => React.JSX.Element;

package/Card/components/CardBody.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "../../utils.js";
+import { cva } from "../../utils.js";
+import { useCardProps } from "./CardPropsProvider.js";
+const cardBodyVariants = cva("flex-1", {
+  variants: {
+    padding: {
+      none: "",
+      sm: "px-md",
+      md: "px-lg",
+      lg: "px-xl"
+    },
+    variant: {
+      default: "",
+      accent: "pt-lg pb-sm"
+    }
+  },
+  defaultVariants: {
+    padding: "md"
+  }
+});
+export const CardBody = () => {
+  const {
+    padding,
+    variant,
+    bodyPadding,
+    children
+  } = useCardProps();
+  return /*#__PURE__*/React.createElement("div", {
+    "data-card": "body",
+    className: cn(cardBodyVariants({
+      padding: bodyPadding !== false ? padding : "none",
+      variant
+    }))
+  }, children);
+};
+
+//# sourceMappingURL=CardBody.js.map

package/Card/components/CardBody.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","useCardProps","cardBodyVariants","variants","padding","none","sm","md","lg","variant","default","accent","defaultVariants","CardBody","bodyPadding","children","createElement","className"],"sources":["CardBody.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\nimport { cva } from \"~/utils.js\";\nimport { useCardProps } from \"./CardPropsProvider.js\";\n\nconst cardBodyVariants = cva(\"flex-1\", {\n    variants: {\n        padding: {\n            none: \"\",\n            sm: \"px-md\",\n            md: \"px-lg\",\n            lg: \"px-xl\"\n        },\n        variant: {\n            default: \"\",\n            accent: \"pt-lg pb-sm\"\n        }\n    },\n    defaultVariants: {\n        padding: \"md\"\n    }\n});\n\nexport const CardBody = () => {\n    const { padding, variant, bodyPadding, children } = useCardProps();\n    return (\n        <div\n            data-card=\"body\"\n            className={cn(\n                cardBodyVariants({\n                    padding: bodyPadding !== false ? padding : \"none\",\n                    variant\n                })\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AACX,SAASC,GAAG;AACZ,SAASC,YAAY;AAErB,MAAMC,gBAAgB,GAAGF,GAAG,CAAC,QAAQ,EAAE;EACnCG,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,IAAI,EAAE,EAAE;MACRC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,EAAE;MACXC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,OAAO,MAAMS,QAAQ,GAAGA,CAAA,KAAM;EAC1B,MAAM;IAAET,OAAO;IAAEK,OAAO;IAAEK,WAAW;IAAEC;EAAS,CAAC,GAAGd,YAAY,CAAC,CAAC;EAClE,oBACIH,KAAA,CAAAkB,aAAA;IACI,aAAU,MAAM;IAChBC,SAAS,EAAElB,EAAE,CACTG,gBAAgB,CAAC;MACbE,OAAO,EAAEU,WAAW,KAAK,KAAK,GAAGV,OAAO,GAAG,MAAM;MACjDK;IACJ,CAAC,CACL;EAAE,GAEDM,QACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/Card/components/CardContent.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils.js";
+declare const cardContentVariants: (props?: ({
+    cornerSize?: "md" | "lg" | null | undefined;
+    variant?: "accent" | "default" | null | undefined;
+    elevation?: "none" | "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface CardContentProps extends VariantProps<typeof cardContentVariants> {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const CardContent: {
+    ({ children }: CardContentProps): React.JSX.Element;
+    displayName: string;
+};
+export { CardContent };

package/Card/components/CardContent.js

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cn, cva } from "../../utils.js";
+import { useCardProps } from "./CardPropsProvider.js";
+const cardContentVariants = cva(["border-md border-solid bg-neutral-base text-md text-neutral-strong overflow-hidden"], {
+  variants: {
+    cornerSize: {
+      md: "rounded-lg",
+      lg: "rounded-xl"
+    },
+    variant: {
+      default: "border-transparent",
+      accent: "border-accent-dimmed"
+    },
+    elevation: {
+      none: "",
+      small: "shadow-sm",
+      medium: "shadow-md",
+      large: "shadow-lg"
+    }
+  },
+  defaultVariants: {
+    cornerSize: "lg",
+    variant: "default"
+  }
+});
+const CardContent = ({
+  children
+}) => {
+  const {
+    cornerSize,
+    variant,
+    elevation,
+    className
+  } = useCardProps();
+  return /*#__PURE__*/React.createElement("div", {
+    "data-card": "content",
+    className: cn(cardContentVariants({
+      cornerSize,
+      variant,
+      elevation
+    }), className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col justify-between w-full max-w-full h-full relative"
+  }, children));
+};
+CardContent.displayName = "CardContent";
+export { CardContent };
+
+//# sourceMappingURL=CardContent.js.map

package/Card/components/CardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","useCardProps","cardContentVariants","variants","cornerSize","md","lg","variant","default","accent","elevation","none","small","medium","large","defaultVariants","CardContent","children","className","createElement","displayName"],"sources":["CardContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { useCardProps } from \"~/Card/components/CardPropsProvider.js\";\n\nconst cardContentVariants = cva(\n    [\"border-md border-solid bg-neutral-base text-md text-neutral-strong overflow-hidden\"],\n    {\n        variants: {\n            cornerSize: {\n                md: \"rounded-lg\",\n                lg: \"rounded-xl\"\n            },\n            variant: {\n                default: \"border-transparent\",\n                accent: \"border-accent-dimmed\"\n            },\n            elevation: {\n                none: \"\",\n                small: \"shadow-sm\",\n                medium: \"shadow-md\",\n                large: \"shadow-lg\"\n            }\n        },\n        defaultVariants: {\n            cornerSize: \"lg\",\n            variant: \"default\"\n        }\n    }\n);\n\nexport interface CardContentProps extends VariantProps<typeof cardContentVariants> {\n    className?: string;\n    children: React.ReactNode;\n}\n\nconst CardContent = ({ children }: CardContentProps) => {\n    const { cornerSize, variant, elevation, className } = useCardProps();\n\n    return (\n        <div\n            data-card=\"content\"\n            className={cn(cardContentVariants({ cornerSize, variant, elevation }), className)}\n        >\n            <div className={\"flex flex-col justify-between w-full max-w-full h-full relative\"}>\n                {children}\n            </div>\n        </div>\n    );\n};\n\nCardContent.displayName = \"CardContent\";\n\nexport { CardContent };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,YAAY;AAErB,MAAMC,mBAAmB,GAAGF,GAAG,CAC3B,CAAC,oFAAoF,CAAC,EACtF;EACIG,QAAQ,EAAE;IACNC,UAAU,EAAE;MACRC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,oBAAoB;MAC7BC,MAAM,EAAE;IACZ,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE,WAAW;MAClBC,MAAM,EAAE,WAAW;MACnBC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbX,UAAU,EAAE,IAAI;IAChBG,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAOD,MAAMS,WAAW,GAAGA,CAAC;EAAEC;AAA2B,CAAC,KAAK;EACpD,MAAM;IAAEb,UAAU;IAAEG,OAAO;IAAEG,SAAS;IAAEQ;EAAU,CAAC,GAAGjB,YAAY,CAAC,CAAC;EAEpE,oBACIH,KAAA,CAAAqB,aAAA;IACI,aAAU,SAAS;IACnBD,SAAS,EAAEnB,EAAE,CAACG,mBAAmB,CAAC;MAAEE,UAAU;MAAEG,OAAO;MAAEG;IAAU,CAAC,CAAC,EAAEQ,SAAS;EAAE,gBAElFpB,KAAA,CAAAqB,aAAA;IAAKD,SAAS,EAAE;EAAkE,GAC7ED,QACA,CACJ,CAAC;AAEd,CAAC;AAEDD,WAAW,CAACI,WAAW,GAAG,aAAa;AAEvC,SAASJ,WAAW","ignoreList":[]}

package/Card/components/CardDescription.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const CardDescription: ({ className, ...props }: CardDescriptionProps) => React.JSX.Element;

package/Card/components/CardDescription.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { cn } from "../../utils.js";
+export const CardDescription = ({
+  className,
+  ...props
+}) => /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+  className: cn("text-sm text-neutral-strong text-left", className)
+}));
+
+//# sourceMappingURL=CardDescription.js.map

package/Card/components/CardDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","CardDescription","className","props","createElement","Object","assign"],"sources":["CardDescription.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\n\nexport type CardDescriptionProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const CardDescription = ({ className, ...props }: CardDescriptionProps) => (\n    <div {...props} className={cn(\"text-sm text-neutral-strong text-left\", className)} />\n);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AAIX,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAA4B,CAAC,kBACzEJ,KAAA,CAAAK,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;EAAED,SAAS,EAAEF,EAAE,CAAC,uCAAuC,EAAEE,SAAS;AAAE,EAAE,CACvF","ignoreList":[]}

package/Card/components/CardFooter.d.ts

@@ -1,5 +1,2 @@
-import React from "react";
-import type { CardProps } from "..";
-type CardFooterProps = Pick<CardProps, "actions">;
-declare const CardFooter: ({ actions }: CardFooterProps) => React.JSX.Element | null;
-export { CardFooter, type CardFooterProps };
+import * as React from "react";
+export declare const CardFooter: () => React.JSX.Element;

package/Card/components/CardFooter.js

@@ -1,14 +1,53 @@
-import React from "react";
-const CardFooter = ({
-  actions
-}) => {
-  if (!actions) {
-    return null;
+import * as React from "react";
+import { cva } from "../../utils.js";
+import { useCardProps } from "./CardPropsProvider.js";
+const cardFooterVariants = cva("flex justify-between", {
+  variants: {
+    padding: {
+      sm: "p-md",
+      md: "py-md-extra px-lg",
+      lg: "pt-lg pb-xl px-xl"
+    }
+  },
+  defaultVariants: {
+    padding: "md"
+  }
+});
+const emptyCardFooterVariants = cva("", {
+  variants: {
+    padding: {
+      sm: "h-lg",
+      md: "h-lg",
+      lg: "h-xl"
+    }
+  },
+  defaultVariants: {
+    padding: "md"
+  }
+});
+export const CardFooter = () => {
+  const {
+    actionsPosition,
+    actions,
+    info,
+    padding
+  } = useCardProps();
+  if (!actions && !info) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: emptyCardFooterVariants({
+        padding
+      })
+    });
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex wby-justify-end wby-gap-sm"
-  }, actions);
+    className: cardFooterVariants({
+      padding
+    })
+  }, info && /*#__PURE__*/React.createElement("div", {
+    className: "text-sm flex items-center"
+  }, /*#__PURE__*/React.createElement("div", null, info)), actions && actionsPosition !== "header" && /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-x-sm ml-auto"
+  }, actions));
 };
-export { CardFooter };
 
 //# sourceMappingURL=CardFooter.js.map

package/Card/components/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","CardFooter","actions","createElement","className"],"sources":["CardFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport type { CardProps } from \"~/Card\";\n\ntype CardFooterProps = Pick<CardProps, \"actions\">;\n\nconst CardFooter = ({ actions }: CardFooterProps) => {\n    if (!actions) {\n        return null;\n    }\n\n    return <div className={\"wby-flex wby-justify-end wby-gap-sm\"}>{actions}</div>;\n};\n\nexport { CardFooter, type CardFooterProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAKzB,MAAMC,UAAU,GAAGA,CAAC;EAAEC;AAAyB,CAAC,KAAK;EACjD,IAAI,CAACA,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,oBAAOF,KAAA,CAAAG,aAAA;IAAKC,SAAS,EAAE;EAAsC,GAAEF,OAAa,CAAC;AACjF,CAAC;AAED,SAASD,UAAU","ignoreList":[]}
+{"version":3,"names":["React","cva","useCardProps","cardFooterVariants","variants","padding","sm","md","lg","defaultVariants","emptyCardFooterVariants","CardFooter","actionsPosition","actions","info","createElement","className"],"sources":["CardFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport { useCardProps } from \"./CardPropsProvider.js\";\n\nconst cardFooterVariants = cva(\"flex justify-between\", {\n    variants: {\n        padding: {\n            sm: \"p-md\",\n            md: \"py-md-extra px-lg\",\n            lg: \"pt-lg pb-xl px-xl\"\n        }\n    },\n    defaultVariants: {\n        padding: \"md\"\n    }\n});\n\nconst emptyCardFooterVariants = cva(\"\", {\n    variants: {\n        padding: {\n            sm: \"h-lg\",\n            md: \"h-lg\",\n            lg: \"h-xl\"\n        }\n    },\n    defaultVariants: {\n        padding: \"md\"\n    }\n});\n\nexport const CardFooter = () => {\n    const { actionsPosition, actions, info, padding } = useCardProps();\n\n    if (!actions && !info) {\n        return <div className={emptyCardFooterVariants({ padding })} />;\n    }\n\n    return (\n        <div className={cardFooterVariants({ padding })}>\n            {info && (\n                <div className={\"text-sm flex items-center\"}>\n                    <div>{info}</div>\n                </div>\n            )}\n            {actions && actionsPosition !== \"header\" && (\n                <div className={\"flex gap-x-sm ml-auto\"}>{actions}</div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,GAAG;AACZ,SAASC,YAAY;AAErB,MAAMC,kBAAkB,GAAGF,GAAG,CAAC,sBAAsB,EAAE;EACnDG,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,mBAAmB;MACvBC,EAAE,EAAE;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbJ,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,MAAMK,uBAAuB,GAAGT,GAAG,CAAC,EAAE,EAAE;EACpCG,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbJ,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAEF,OAAO,MAAMM,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC,eAAe;IAAEC,OAAO;IAAEC,IAAI;IAAET;EAAQ,CAAC,GAAGH,YAAY,CAAC,CAAC;EAElE,IAAI,CAACW,OAAO,IAAI,CAACC,IAAI,EAAE;IACnB,oBAAOd,KAAA,CAAAe,aAAA;MAAKC,SAAS,EAAEN,uBAAuB,CAAC;QAAEL;MAAQ,CAAC;IAAE,CAAE,CAAC;EACnE;EAEA,oBACIL,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAEb,kBAAkB,CAAC;MAAEE;IAAQ,CAAC;EAAE,GAC3CS,IAAI,iBACDd,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAA4B,gBACxChB,KAAA,CAAAe,aAAA,cAAMD,IAAU,CACf,CACR,EACAD,OAAO,IAAID,eAAe,KAAK,QAAQ,iBACpCZ,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAAwB,GAAEH,OAAa,CAE1D,CAAC;AAEd,CAAC","ignoreList":[]}

package/Card/components/CardHeader.d.ts

@@ -1,5 +1,2 @@
-import React from "react";
-import type { CardProps } from "..";
-type CardHeaderProps = Pick<CardProps, "title" | "description" | "options">;
-declare const CardHeader: ({ title, description, options }: CardHeaderProps) => React.JSX.Element | null;
-export { CardHeader, type CardHeaderProps };
+import * as React from "react";
+export declare const CardHeader: () => React.JSX.Element | null;