@webiny/admin-ui 6.0.0-alpha.0

package/Button/IconButton.stories.js

@@ -0,0 +1,149 @@
+import React from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { IconButton } from "./IconButton";
+const meta = {
+  title: "Components/Icon Button",
+  component: IconButton,
+  tags: ["!autodocs"],
+  argTypes: {
+    variant: {
+      description: "Type",
+      control: "select",
+      options: ["primary", "secondary", "tertiary", "ghost", "ghost-negative"],
+      defaultValue: "primary"
+    },
+    size: {
+      description: "Size",
+      control: "select",
+      options: ["xxs", "xs", "sm", "md", "lg", "xl"],
+      defaultValue: "md"
+    },
+    iconSize: {
+      description: "Icon Size",
+      control: "select",
+      options: ["default", "lg"],
+      defaultValue: "default"
+    },
+    disabled: {
+      description: "State",
+      control: "boolean",
+      defaultValue: false
+    },
+    icon: {
+      description: "Please refer to the example above for usage information.",
+      control: "none"
+    },
+    onClick: {
+      action: "onClick"
+    }
+  }
+};
+export default meta;
+export const Primary = {
+  args: {
+    variant: "primary",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  }
+};
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    variant: "secondary"
+  }
+};
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    variant: "tertiary"
+  }
+};
+export const Ghost = {
+  args: {
+    ...Primary.args,
+    variant: "ghost"
+  }
+};
+export const GhostNegative = {
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px]"
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  args: {
+    ...Primary.args,
+    variant: "ghost-negative"
+  }
+};
+export const DoubleExtraSmall = {
+  args: {
+    ...Primary.args,
+    size: "xxs"
+  }
+};
+export const ExtraSmall = {
+  args: {
+    ...Primary.args,
+    size: "xs"
+  }
+};
+export const Small = {
+  args: {
+    ...Primary.args,
+    size: "sm"
+  }
+};
+export const SmallWithLargeIcon = {
+  args: {
+    ...Primary.args,
+    size: "sm",
+    iconSize: "lg"
+  }
+};
+export const Medium = {
+  args: {
+    ...Primary.args,
+    size: "md"
+  }
+};
+export const MediumWithLargeIcon = {
+  args: {
+    ...Primary.args,
+    size: "md",
+    iconSize: "lg"
+  }
+};
+export const Large = {
+  args: {
+    ...Primary.args,
+    size: "lg"
+  }
+};
+export const LargeWithLargeIcon = {
+  args: {
+    ...Primary.args,
+    size: "lg",
+    iconSize: "lg"
+  }
+};
+export const ExtraLarge = {
+  args: {
+    ...Primary.args,
+    size: "xl"
+  }
+};
+export const WithAsChild = {
+  args: {
+    ...Primary.args,
+    asChild: true,
+    icon: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(AddIcon, null))
+  }
+};
+export const Documentation = {
+  args: {
+    variant: "primary",
+    size: "md",
+    disabled: false,
+    icon: /*#__PURE__*/React.createElement(AddIcon, null),
+    iconSize: "default"
+  }
+};
+
+//# sourceMappingURL=IconButton.stories.js.map

package/Button/IconButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","AddIcon","IconButton","meta","title","component","tags","argTypes","variant","description","control","options","defaultValue","size","iconSize","disabled","icon","onClick","action","Primary","args","createElement","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","className","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","asChild","Documentation"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\",\n            control: \"none\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Button";
+export * from "./CopyButton";
+export * from "./IconButton";

package/Button/index.js

@@ -0,0 +1,5 @@
+export * from "./Button";
+export * from "./CopyButton";
+export * from "./IconButton";
+
+//# sourceMappingURL=index.js.map

package/Button/index.js.map

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

package/Card/Card.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+import { type CardRootProps, cardRootVariants } from "./components";
+interface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    options?: React.ReactNode;
+}
+declare const Card: ((props: CardProps) => React.JSX.Element) & {
+    original: (props: CardProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: CardProps) => React.JSX.Element) & {
+        original: (props: CardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: CardProps) => React.JSX.Element) & {
+        original: (props: CardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Card, type CardProps };

package/Card/Card.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { makeDecoratable } from "../utils";
+import { CardFooter, CardHeader, CardRoot } from "./components";
+const CardBase = props => {
+  const {
+    title,
+    description,
+    actions,
+    children,
+    options,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(CardRoot, rest, /*#__PURE__*/React.createElement(CardHeader, {
+    title: title,
+    description: description,
+    options: options
+  }), children, /*#__PURE__*/React.createElement(CardFooter, {
+    actions: actions
+  }));
+};
+const Card = makeDecoratable("Card", CardBase);
+export { Card };
+
+//# sourceMappingURL=Card.js.map

package/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","CardFooter","CardHeader","CardRoot","CardBase","props","title","description","actions","children","options","rest","createElement","Card"],"sources":["Card.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, type VariantProps } from \"~/utils\";\nimport {\n    CardFooter,\n    CardHeader,\n    CardRoot,\n    type CardRootProps,\n    cardRootVariants\n} from \"./components\";\n\ninterface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {\n    title?: React.ReactNode;\n    description?: React.ReactNode;\n    actions?: React.ReactNode;\n    options?: React.ReactNode;\n}\n\nconst CardBase = (props: CardProps) => {\n    const { title, description, actions, children, options, ...rest } = props;\n\n    return (\n        <CardRoot {...rest}>\n            <CardHeader title={title} description={description} options={options} />\n            {children}\n            <CardFooter actions={actions} />\n        </CardRoot>\n    );\n};\n\nconst Card = makeDecoratable(\"Card\", CardBase);\n\nexport { Card, type CardProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SACIC,UAAU,EACVC,UAAU,EACVC,QAAQ;AAYZ,MAAMC,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EAEzE,oBACIN,KAAA,CAAAa,aAAA,CAACT,QAAQ,EAAKQ,IAAI,eACdZ,KAAA,CAAAa,aAAA,CAACV,UAAU;IAACI,KAAK,EAAEA,KAAM;IAACC,WAAW,EAAEA,WAAY;IAACG,OAAO,EAAEA;EAAQ,CAAE,CAAC,EACvED,QAAQ,eACTV,KAAA,CAAAa,aAAA,CAACX,UAAU;IAACO,OAAO,EAAEA;EAAQ,CAAE,CACzB,CAAC;AAEnB,CAAC;AAED,MAAMK,IAAI,GAAGb,eAAe,CAAC,MAAM,EAAEI,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}

package/Card/Card.mdx

@@ -0,0 +1,127 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} />
+
+# Cards
+
+A Card component in design systems is a versatile UI element used to encapsulate content and actions about a single subject. It serves as a modular container that can include images, text, links, buttons, and other interactive elements. Cards are designed to present information in a concise and organized manner, making it easier for users to scan and interact with multiple pieces of content.
+
+## Usage
+
+<Canvas of={CardStories.Documentation} source={ { code: `
+import React from 'react';
+import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
+import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
+
+const CardExample = () => {
+    return (
+        <Card
+            title="Card title"
+            description="Card description"
+            padding="standard"
+            elevation="sm"
+            borderRadius="md"
+            actions={
+                <>
+                    <Button variant="secondary" text="Cancel" />
+                    <Button variant="primary" text="Confirm" />
+                </>
+            }
+            options={
+                <IconButton
+                    variant={"ghost"}
+                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={() => alert("Custom action button clicked.")}
+                />
+            }
+        >
+            This is card content. Anything can go in here.
+        </Card>
+    );
+};
+
+export default CardExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Card/Card.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={CardStories.Documentation} />
+
+```tsx
+import React from 'react';
+import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
+import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
+
+const CardExample = () => {
+    return (
+        <Card
+            title="Card title"
+            description="Card description"
+            padding="standard"
+            elevation="sm"
+            borderRadius="md"
+            actions={
+                <>
+                    <Button variant="secondary" text="Cancel" />
+                    <Button variant="primary" text="Confirm" />
+                </>
+            }
+            options={
+                <IconButton
+                    variant={"ghost"}
+                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+                    size={"sm"}
+                    iconSize={"lg"}
+                    onClick={() => alert("Custom action button clicked.")}
+                />
+            }
+        >
+            This is card content. Anything can go in here.
+        </Card>
+    );
+};
+
+export default CardExample;
+```
+
+
+## Anatomy
+
+### Construction
+Depending on the content type and card usage, there are several elevation options available.
+
+<img src="/images/storybook/card/construction.png" alt="Construction"/>
+
+### Elevation
+
+<img src="/images/storybook/card/elevation.png" alt="Elevation"/>
+
+### Radius
+Depending on the content type and card usage, there are three basic paddings options to consider. Border radius can vary from 4px - 12px
+
+<img src="/images/storybook/card/radius.png" alt="Radius"/>
+
+### Padding
+
+<img src="/images/storybook/card/padding.png" alt="Padding"/>
+
+## Usage
+
+### Stacked
+
+<img src="/images/storybook/card/stacked.png" alt="Stacked"/>

package/Card/Card.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./Card";
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const NoTitleDescriptionActionsHeaderAndFooter: Story;
+export declare const WithMorePadding: Story;
+export declare const WithMoreElevation: Story;
+export declare const NoElevation: Story;
+export declare const NoBorderRadius: Story;
+export declare const WithOptions: Story;
+export declare const WithActions: Story;
+export declare const Documentation: Story;

package/Card/Card.stories.js

@@ -0,0 +1,168 @@
+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";
+const meta = {
+  title: "Components/Card",
+  component: Card,
+  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)))]
+};
+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"
+  },
+  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"]
+    }
+  }
+};
+export const NoTitleDescriptionActionsHeaderAndFooter = {
+  name: "Only Body (Without Body, Title, Actions)",
+  args: {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is card content. Anything can go in here.")
+  }
+};
+export const WithMorePadding = {
+  args: {
+    ...Default.args,
+    actions: null,
+    padding: "comfortable"
+  }
+};
+export const WithMoreElevation = {
+  args: {
+    ...Default.args,
+    actions: null,
+    elevation: "md"
+  }
+};
+export const NoElevation = {
+  args: {
+    ...Default.args,
+    actions: null,
+    elevation: "none"
+  }
+};
+export const NoBorderRadius = {
+  args: {
+    ...Default.args,
+    actions: null,
+    borderRadius: "none"
+  }
+};
+export const WithOptions = {
+  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.")
+    })
+  }
+};
+export const WithActions = {
+  args: Default.args
+};
+export const Documentation = {
+  render: args => {
+    return /*#__PURE__*/React.createElement(Card, args);
+  },
+  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",
+    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.")
+    })
+  },
+  argTypes: {
+    title: {
+      description: "The title displayed at the top of the card",
+      control: "text"
+    },
+    description: {
+      description: "A description displayed below the title",
+      control: "text"
+    },
+    children: {
+      description: "The main content of the card. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    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"
+    },
+    padding: {
+      description: "Controls the amount of padding inside the card",
+      control: "select",
+      options: ["none", "standard", "comfortable"]
+    },
+    elevation: {
+      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"]
+    }
+  }
+};
+
+//# sourceMappingURL=Card.stories.js.map

package/Card/Card.stories.js.map

@@ -0,0 +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":[]}

package/Card/components/CardFooter.d.ts

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

package/Card/components/CardFooter.js

@@ -0,0 +1,14 @@
+import React from "react";
+const CardFooter = ({
+  actions
+}) => {
+  if (!actions) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-justify-end wby-gap-sm"
+  }, actions);
+};
+export { CardFooter };
+
+//# sourceMappingURL=CardFooter.js.map

package/Card/components/CardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","CardFooter","actions","createElement","className"],"sources":["CardFooter.tsx"],"sourcesContent":["import React from \"react\";\nimport { 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":[]}

package/Card/components/CardHeader.d.ts

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

package/Card/components/CardHeader.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Heading } from "../../Heading";
+import { Text } from "../../Text";
+const CardHeader = ({
+  title,
+  description,
+  options
+}) => {
+  if (!title && !description && !options) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-row wby-justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-col wby-gap-y-xs"
+  }, typeof title === "string" ? /*#__PURE__*/React.createElement(Heading, {
+    level: 6,
+    as: "h1"
+  }, title) : title, typeof description === "string" ? /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    className: "wby-text-neutral-strong"
+  }, description) : description), /*#__PURE__*/React.createElement("div", null, options));
+};
+export { CardHeader };
+
+//# sourceMappingURL=CardHeader.js.map

package/Card/components/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Heading","Text","CardHeader","title","description","options","createElement","className","level","as","size"],"sources":["CardHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Heading } from \"~/Heading\";\nimport { Text } from \"~/Text\";\nimport { CardProps } from \"~/Card\";\n\ntype CardHeaderProps = Pick<CardProps, \"title\" | \"description\" | \"options\">;\n\nconst CardHeader = ({ title, description, options }: CardHeaderProps) => {\n    if (!title && !description && !options) {\n        return null;\n    }\n\n    return (\n        <div className={\"wby-flex wby-flex-row wby-justify-between\"}>\n            <div className={\"wby-flex wby-flex-col wby-gap-y-xs\"}>\n                {typeof title === \"string\" ? (\n                    <Heading level={6} as={\"h1\"}>\n                        {title}\n                    </Heading>\n                ) : (\n                    title\n                )}\n                {typeof description === \"string\" ? (\n                    <Text size=\"sm\" className={\"wby-text-neutral-strong\"}>\n                        {description}\n                    </Text>\n                ) : (\n                    description\n                )}\n            </div>\n            <div>{options}</div>\n        </div>\n    );\n};\n\nexport { CardHeader, type CardHeaderProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,IAAI;AAKb,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAyB,CAAC,KAAK;EACrE,IAAI,CAACF,KAAK,IAAI,CAACC,WAAW,IAAI,CAACC,OAAO,EAAE;IACpC,OAAO,IAAI;EACf;EAEA,oBACIN,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE;EAA4C,gBACxDR,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE;EAAqC,GAChD,OAAOJ,KAAK,KAAK,QAAQ,gBACtBJ,KAAA,CAAAO,aAAA,CAACN,OAAO;IAACQ,KAAK,EAAE,CAAE;IAACC,EAAE,EAAE;EAAK,GACvBN,KACI,CAAC,GAEVA,KACH,EACA,OAAOC,WAAW,KAAK,QAAQ,gBAC5BL,KAAA,CAAAO,aAAA,CAACL,IAAI;IAACS,IAAI,EAAC,IAAI;IAACH,SAAS,EAAE;EAA0B,GAChDH,WACC,CAAC,GAEPA,WAEH,CAAC,eACNL,KAAA,CAAAO,aAAA,cAAMD,OAAa,CAClB,CAAC;AAEd,CAAC;AAED,SAASH,UAAU","ignoreList":[]}

package/Card/components/CardRoot.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { VariantProps } from "../../utils";
+declare const cardRootVariants: (props?: ({
+    padding?: "standard" | "compact" | "comfortable" | null | undefined;
+    elevation?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    borderRadius?: "none" | "sm" | "md" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface CardRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof cardRootVariants> {
+}
+declare const CardRoot: ({ className, padding, elevation, borderRadius, ...props }: CardRootProps) => React.JSX.Element;
+export { CardRoot, type CardRootProps, cardRootVariants };