@webiny/admin-ui 6.0.0-alpha.0

package/Button/Button.mdx

@@ -0,0 +1,207 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+The Button component is a key UI element that enables users to trigger actions or events, such as submitting forms, navigating pages, or interacting with system functionality. Its purpose is to provide a clear, intuitive way for users to interact with a system. Buttons are relevant in virtually all interfaces, ensuring user engagement by offering a simple, recognizable mechanism for executing commands. They are essential for usability, guiding user behavior and driving application workflows.
+
+## Usage
+
+<Canvas of={ButtonStories.Documentation}
+        source={ { code:
+                ` // Code for a Primary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="primary" text={"Button"}></Button>
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={ButtonStories.Documentation} exclude={"onClick"} />
+
+```jsx
+import { Button } from '@webiny/admin-ui';
+
+<Button variant="primary" text={"Button"}></Button>
+```
+
+## Examples
+
+### Primary
+
+<Canvas of={ButtonStories.Primary}
+        source={ { code:
+                `// Code for a Primary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="primary" text={"Button"}></Button>
+
+` } }
+/>
+
+
+### Secondary
+
+<Canvas of={ButtonStories.Secondary}
+        source={ { code:
+                `// Code for a Secondary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="secondary" text={"Button"}></Button>
+
+` } }
+/>
+
+### Tertiary
+
+<Canvas of={ButtonStories.Tertiary}
+        source={ { code:
+                `// Code for a Tertiary button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="tertiary" text={"Button"}></Button>
+
+` } }
+/>
+
+### Ghost
+
+<Canvas of={ButtonStories.Ghost}
+        source={ { code:
+                `// Code for a Ghost button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="ghost" text={"Button"}></Button>
+
+` } }
+/>
+
+### Ghost Negative
+
+<Canvas of={ButtonStories.GhostNegative}
+        source={ { code:
+                `// Code for a Ghost Negative button
+        \n import { Button } from '@webiny/admin-ui';
+        \n <Button variant="ghost-negative" text={"Button"}></Button>
+
+` } }
+/>
+
+### With Icon
+
+<Canvas of={ButtonStories.WithIcon} story={ {inline: false}}
+        source={ { code:
+                `// Code for a With Icon button
+
+                import { Button } from '@webiny/admin-ui';
+                import { ReactComponent as PencilIcon } from "@webiny/icons/edit.svg";
+                \n<Button variant="primary"  text={"Button"} size="md" icon={<PencilIcon />} iconPosition="start"></Button>
+` } }
+/>
+
+
+### As Child
+The Button component can be used as a wrapper for other elements, allowing flexible composition. This is particularly useful when integrating custom text elements, or any other components inside a button.
+
+<Canvas of={ButtonStories.WithAsChild} story={ {inline: false}}
+        source={ { code:
+                `// Code for a As Child button
+\n import { Button } from '@webiny/admin-ui';
+
+                <Button variant="primary" asChild={true}>
+                    <span>Button</span>
+                </Button>
+
+` } }
+/>
+
+### Icon Only Button
+import * as IconButtonStories from './IconButton.stories';
+
+**We have a dedicated `IconButton` component for the Icon-only button. Please check the code below for more details.**
+
+#### Usage
+
+```jsx
+import { IconButton } from '@webiny/admin-ui';
+```
+
+```jsx
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg"
+<IconButton icon={<AddIcon />} size={"md"}/>
+```
+
+<Canvas of={IconButtonStories.Documentation}
+        source={ { code:
+                ` // Code for a Icon Only Primary button
+        \n import { IconButton } from '@webiny/admin-ui';
+        \n import { ReactComponent as AddIcon } from "@webiny/icons/add.svg"
+        \n <IconButton icon={<AddIcon />} size={"md"}/>
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Button/Button.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+#### Props
+
+<Controls of={IconButtonStories.Documentation} exclude={"onClick"} />
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/button/contruction.png" alt="Construction"/>
+
+### Options
+<img src="/images/storybook/button/options.png" alt="Options"/>
+
+### Variants
+<img src="/images/storybook/button/type.png" alt="Variants"/>
+
+### Size
+Regular buttons come in four different sizes: small, medium, large, and xl. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
+
+<img src="/images/storybook/button/size.png" alt="Size"/>
+
+**Icon-only button** come in six different sizes to accommodate for various component needs.
+
+<img src="/images/storybook/button/size-icon-only.png" alt="Size - Icon Only"/>
+
+
+### States
+<img src="/images/storybook/button/states.png" alt="States"/>
+
+## Usage
+
+### Icon Usage
+An icon should only be used in a button when it's benefitial and when it has a meaningful association with the label.
+
+<img src="/images/storybook/button/icon-usage.png" alt="Icon Usage"/>
+
+### Use primary buttons sparingly
+Use primary buttons as the desired action for users. Competing primary buttons may leave the user unsure of next steps in their user journey. As a rule of thumb limit primary buttons to 1 in contained UIs and 3 in full page UIs.
+
+<img src="/images/storybook/button/primary-button-usage.png" alt="Primary Button Usage"/>
+
+### Button Group
+When used in groups, buttons should support only maximum of two type variants, with an exception of third variant being ghost extension button (eg. ellipsis). Avoid using random type and icon options within the button groups. Avoid using different sizes within the same group.
+
+<img src="/images/storybook/button/button-group.png" alt="Button Group"/>

package/Button/Button.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Ghost: Story;
+export declare const GhostNegative: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const WithIcon: Story;
+export declare const WithIconPositionEnd: Story;
+export declare const WithAsChild: Story;
+export declare const Documentation: Story;

package/Button/Button.stories.js

@@ -0,0 +1,148 @@
+import React from "react";
+import { ReactComponent as PencilIcon } from "@webiny/icons/edit.svg";
+import { Button } from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      description: "Type",
+      control: "select",
+      options: ["primary", "secondary", "tertiary", "ghost", "ghost-negative"],
+      defaultValue: "primary"
+    },
+    size: {
+      description: "Size",
+      control: "select",
+      options: ["sm", "md", "lg", "xl"],
+      defaultValue: "md"
+    },
+    text: {
+      description: "Label",
+      control: "text",
+      defaultValue: "Button"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    },
+    icon: {
+      description: "Please refer to the 'With Icon' button example below for details.",
+      control: "none"
+    },
+    iconPosition: {
+      description: "Please refer to the 'With Icon' button example below for details.",
+      control: "select",
+      defaultValue: "start",
+      options: ["start", "end"]
+    },
+    asChild: {
+      description: "Please refer to the 'As Child' button example below for details.",
+      control: "none"
+    },
+    // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.
+    onClick: {
+      action: "onClick"
+    }
+  }
+};
+export default meta;
+export const Primary = {
+  args: {
+    variant: "primary",
+    text: "Button"
+  }
+};
+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-[50px] wby-rounded-[5px]"
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  args: {
+    ...Primary.args,
+    variant: "ghost-negative"
+  }
+};
+export const Small = {
+  args: {
+    ...Primary.args,
+    size: "sm"
+  }
+};
+export const Medium = {
+  args: {
+    ...Primary.args,
+    size: "md"
+  }
+};
+export const Large = {
+  args: {
+    ...Primary.args,
+    size: "lg"
+  }
+};
+export const ExtraLarge = {
+  args: {
+    ...Primary.args,
+    size: "xl"
+  }
+};
+export const WithIcon = {
+  args: {
+    ...Primary.args,
+    icon: /*#__PURE__*/React.createElement(PencilIcon, null)
+  }
+};
+export const WithIconPositionEnd = {
+  args: {
+    ...Primary.args,
+    icon: /*#__PURE__*/React.createElement(PencilIcon, null),
+    iconPosition: "end"
+  }
+};
+export const WithAsChild = {
+  args: {
+    ...Primary.args,
+    asChild: true,
+    text: /*#__PURE__*/React.createElement("span", null, "Button")
+  }
+};
+
+/* The Documentation story is created for the Docs page.
+ * The description column for the `iconPosition` and `icon` props displays
+ * an extra dash (-), and the formatting breaks unless defined in the story.
+ * Hence, this Documentation story was created.
+ */
+
+export const Documentation = {
+  args: {
+    variant: "primary",
+    text: "Button",
+    size: "md",
+    disabled: false,
+    icon: "",
+    iconPosition: "start",
+    asChild: false
+  }
+};
+
+//# sourceMappingURL=Button.stories.js.map

package/Button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","PencilIcon","Button","meta","title","component","argTypes","variant","description","control","options","defaultValue","size","text","disabled","icon","iconPosition","asChild","onClick","action","Primary","args","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","createElement","className","Small","Medium","Large","ExtraLarge","WithIcon","WithIconPositionEnd","WithAsChild","Documentation"],"sources":["Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\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: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"none\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\",\n            control: \"none\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\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: any) => (\n            <div className=\"wby-bg-[#25292e] wby-p-[50px] wby-rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Button/CopyButton.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { ButtonProps } from "./Button";
+interface CopyButtonProps extends ButtonProps {
+    /**
+     * Value to copy to clipboard.
+     */
+    value: string;
+    /**
+     * Callback function that is executed after the value is copied to the clipboard.
+     */
+    onCopy?: () => void;
+}
+declare const CopyButton: ((props: CopyButtonProps) => React.JSX.Element) & {
+    original: (props: CopyButtonProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: CopyButtonProps) => React.JSX.Element) & {
+        original: (props: CopyButtonProps) => React.JSX.Element;
+        /**
+         * Callback function that is executed after the value is copied to the clipboard.
+         */
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: CopyButtonProps) => React.JSX.Element) & {
+        original: (props: CopyButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { CopyButton, type CopyButtonProps };

package/Button/CopyButton.js

@@ -0,0 +1,25 @@
+import React, { useCallback } from "react";
+import { ReactComponent as CopyToClipboardIcon } from "@webiny/icons/content_copy.svg";
+import { Button } from "./Button";
+import { makeDecoratable } from "../utils";
+const CopyButtonBase = props => {
+  const {
+    value,
+    onCopy,
+    ...rest
+  } = props;
+  const copyToClipboard = useCallback(() => {
+    navigator.clipboard.writeText(value);
+    if (typeof onCopy === "function") {
+      onCopy();
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement(Button, Object.assign({}, rest, {
+    onClick: copyToClipboard,
+    icon: /*#__PURE__*/React.createElement(CopyToClipboardIcon, null)
+  }));
+};
+const CopyButton = makeDecoratable("CopyButton", CopyButtonBase);
+export { CopyButton };
+
+//# sourceMappingURL=CopyButton.js.map

package/Button/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","ReactComponent","CopyToClipboardIcon","Button","makeDecoratable","CopyButtonBase","props","value","onCopy","rest","copyToClipboard","navigator","clipboard","writeText","createElement","Object","assign","onClick","icon","CopyButton"],"sources":["CopyButton.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ButtonProps, Button } from \"./Button\";\nimport { makeDecoratable } from \"../utils\";\n\ninterface CopyButtonProps extends ButtonProps {\n    /**\n     * Value to copy to clipboard.\n     */\n    value: string;\n\n    /**\n     * Callback function that is executed after the value is copied to the clipboard.\n     */\n    onCopy?: () => void;\n}\n\nconst CopyButtonBase = (props: CopyButtonProps) => {\n    const { value, onCopy, ...rest } = props;\n\n    const copyToClipboard = useCallback(() => {\n        navigator.clipboard.writeText(value);\n        if (typeof onCopy === \"function\") {\n            onCopy();\n        }\n    }, [value]);\n\n    return <Button {...rest} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nconst CopyButton = makeDecoratable(\"CopyButton\", CopyButtonBase);\n\nexport { CopyButton, type CopyButtonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,cAAc,IAAIC,mBAAmB,QAAQ,gCAAgC;AACtF,SAAsBC,MAAM;AAC5B,SAASC,eAAe;AAcxB,MAAMC,cAAc,GAAIC,KAAsB,IAAK;EAC/C,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAExC,MAAMI,eAAe,GAAGV,WAAW,CAAC,MAAM;IACtCW,SAAS,CAACC,SAAS,CAACC,SAAS,CAACN,KAAK,CAAC;IACpC,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC,CAAC;IACZ;EACJ,CAAC,EAAE,CAACD,KAAK,CAAC,CAAC;EAEX,oBAAOR,KAAA,CAAAe,aAAA,CAACX,MAAM,EAAAY,MAAA,CAAAC,MAAA,KAAKP,IAAI;IAAEQ,OAAO,EAAEP,eAAgB;IAACQ,IAAI,eAAEnB,KAAA,CAAAe,aAAA,CAACZ,mBAAmB,MAAE;EAAE,EAAE,CAAC;AACxF,CAAC;AAED,MAAMiB,UAAU,GAAGf,eAAe,CAAC,YAAY,EAAEC,cAAc,CAAC;AAEhE,SAASc,UAAU","ignoreList":[]}

package/Button/IconButton.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+declare const iconButtonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | "ghost-negative" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxs" | null | undefined;
+    iconSize?: "default" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
+    icon?: React.ReactNode;
+    asChild?: boolean;
+}
+declare const IconButton: (({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
+    original: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
+        original: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element) & {
+        original: ({ className, variant, size, icon, iconSize, asChild, disabled, ...props }: IconButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { IconButton, type IconButtonProps, iconButtonVariants };

package/Button/IconButton.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { Slot } from "radix-ui";
+import { cn, cva, makeDecoratable } from "../utils";
+const iconButtonWrapperVariants = cva("wby-inline-block", {
+  variants: {
+    disabled: {
+      true: "wby-cursor-not-allowed",
+      false: "wby-cursor-pointer"
+    }
+  }
+});
+const iconButtonVariants = cva(["wby-border-transparent wby-rounded wby-flex wby-flex-shrink-0 wby-items-center wby-justify-center wby-ring-offset-background wby-transition-colors", "[&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0", "[&_img]:wby-pointer-events-none [&_img]:wby-shrink-0", "aria-disabled:wby-pointer-events-none", "focus-visible:wby-outline-none focus-visible:wby-border-accent-default"], {
+  variants: {
+    variant: {
+      primary: ["wby-bg-primary wby-fill-neutral-base", "hover:wby-bg-primary-strong", "active:wby-bg-primary-xstrong", "aria-disabled:wby-bg-primary-disabled", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
+      secondary: ["wby-bg-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-bg-neutral-muted", "active:wby-bg-neutral-strong", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
+      tertiary: ["wby-bg-neutral-base wby-border-neutral-muted wby-fill-neutral-xstrong", "hover:wby-bg-neutral-light", "active:wby-bg-neutral-muted", "aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong aria-disabled:wby-border-neutral-dimmed", "focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed"],
+      ghost: ["wby-fill-neutral-xstrong", "hover:wby-bg-neutral-dimmed", "active:wby-bg-neutral-muted", "aria-disabled:wby-fill-neutral-strong hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"],
+      "ghost-negative": ["wby-fill-neutral-base", "hover:wby-bg-neutral-base/20", "active:wby-bg-neutral-base/30", "focus-visible:!wby-border-neutral-base", "aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent"]
+    },
+    size: {
+      xxs: "wby-border-sm wby-rounded-xs wby-size-sm-extra [&_svg]:wby-size-md [&_img]:wby-size-md",
+      xs: "wby-border-sm wby-rounded-xs wby-size-md [&_svg]:wby-size-md [&_img]:wby-size-md",
+      sm: "wby-border-sm wby-rounded-sm",
+      md: "wby-border-sm wby-rounded-md",
+      lg: "wby-border-sm wby-rounded-md",
+      xl: "wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+    },
+    iconSize: {
+      default: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [{
+    size: "xl",
+    variant: "ghost",
+    className: "focus-visible:wby-border-md"
+  }, {
+    size: "sm",
+    iconSize: "default",
+    className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+  }, {
+    size: "sm",
+    iconSize: "lg",
+    className: "wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+  }, {
+    size: "md",
+    iconSize: "default",
+    className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md"
+  }, {
+    size: "md",
+    iconSize: "lg",
+    className: "wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+  }, {
+    size: "lg",
+    iconSize: "default",
+    className: "wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus"
+  }, {
+    size: "lg",
+    iconSize: "lg",
+    className: "wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg"
+  }],
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    iconSize: "default"
+  }
+});
+const DecoratableIconButton = ({
+  className,
+  variant,
+  size,
+  icon,
+  iconSize,
+  asChild = false,
+  disabled,
+  ...props
+}) => {
+  const Comp = asChild ? Slot.Root : "button";
+  return /*#__PURE__*/React.createElement("span", {
+    className: cn(iconButtonWrapperVariants({
+      disabled
+    }))
+  }, /*#__PURE__*/React.createElement(Comp, Object.assign({}, props, {
+    className: cn(iconButtonVariants({
+      variant,
+      size,
+      iconSize
+    }), className),
+    disabled: disabled,
+    "aria-disabled": disabled
+  }), icon));
+};
+const IconButton = makeDecoratable("IconButton", DecoratableIconButton);
+export { IconButton, iconButtonVariants };
+
+//# sourceMappingURL=IconButton.js.map

package/Button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Slot","cn","cva","makeDecoratable","iconButtonWrapperVariants","variants","disabled","true","false","iconButtonVariants","variant","primary","secondary","tertiary","ghost","size","xxs","xs","sm","md","lg","xl","iconSize","default","compoundVariants","className","defaultVariants","DecoratableIconButton","icon","asChild","props","Comp","Root","createElement","Object","assign","IconButton"],"sources":["IconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\nconst iconButtonWrapperVariants = cva(\"wby-inline-block\", {\n    variants: {\n        disabled: {\n            true: \"wby-cursor-not-allowed\",\n            false: \"wby-cursor-pointer\"\n        }\n    }\n});\n\nconst iconButtonVariants = cva(\n    [\n        \"wby-border-transparent wby-rounded wby-flex wby-flex-shrink-0 wby-items-center wby-justify-center wby-ring-offset-background wby-transition-colors\",\n        \"[&_svg]:wby-pointer-events-none [&_svg]:wby-shrink-0\",\n        \"[&_img]:wby-pointer-events-none [&_img]:wby-shrink-0\",\n        \"aria-disabled:wby-pointer-events-none\",\n        \"focus-visible:wby-outline-none focus-visible:wby-border-accent-default\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"wby-bg-primary wby-fill-neutral-base\",\n                    \"hover:wby-bg-primary-strong\",\n                    \"active:wby-bg-primary-xstrong\",\n                    \"aria-disabled:wby-bg-primary-disabled\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-dimmed wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-muted\",\n                    \"active:wby-bg-neutral-strong\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                tertiary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-bg-neutral-disabled aria-disabled:wby-fill-neutral-strong aria-disabled:wby-border-neutral-dimmed\",\n                    \"focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\"\n                ],\n                ghost: [\n                    \"wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"active:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-fill-neutral-strong hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-fill-neutral-base\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"active:wby-bg-neutral-base/30\",\n                    \"focus-visible:!wby-border-neutral-base\",\n                    \"aria-disabled:wby-fill-neutral-base aria-disabled:wby-opacity-50 hover:aria-disabled:wby-bg-transparent active:aria-disabled:wby-bg-transparent\"\n                ]\n            },\n            size: {\n                xxs: \"wby-border-sm wby-rounded-xs wby-size-sm-extra [&_svg]:wby-size-md [&_img]:wby-size-md\",\n                xs: \"wby-border-sm wby-rounded-xs wby-size-md [&_svg]:wby-size-md [&_img]:wby-size-md\",\n                sm: \"wby-border-sm wby-rounded-sm\",\n                md: \"wby-border-sm wby-rounded-md\",\n                lg: \"wby-border-sm wby-rounded-md\",\n                xl: \"wby-border-md wby-rounded-lg wby-p-[calc(theme(padding.md)-theme(borderWidth.md))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            },\n            iconSize: {\n                default: \"\",\n                lg: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"xl\",\n                variant: \"ghost\",\n                className: \"focus-visible:wby-border-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md\"\n            },\n            {\n                size: \"sm\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.xxs)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-md [&_img]:wby-size-md\"\n            },\n            {\n                size: \"md\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.xs)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"default\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] [&_svg]:wby-size-md-plus [&_img]:wby-size-md-plus\"\n            },\n            {\n                size: \"lg\",\n                iconSize: \"lg\",\n                className:\n                    \"wby-p-[calc(theme(padding.sm)-theme(borderWidth.sm))] [&_svg]:wby-size-lg [&_img]:wby-size-lg\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\",\n            iconSize: \"default\"\n        }\n    }\n);\n\ninterface IconButtonProps\n    extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\">,\n        VariantProps<typeof iconButtonVariants> {\n    icon?: React.ReactNode;\n    asChild?: boolean;\n}\n\nconst DecoratableIconButton = ({\n    className,\n    variant,\n    size,\n    icon,\n    iconSize,\n    asChild = false,\n    disabled,\n    ...props\n}: IconButtonProps) => {\n    const Comp = asChild ? Slot.Root : \"button\";\n    return (\n        <span className={cn(iconButtonWrapperVariants({ disabled }))}>\n            <Comp\n                {...props}\n                className={cn(iconButtonVariants({ variant, size, iconSize }), className)}\n                disabled={disabled}\n                aria-disabled={disabled}\n            >\n                {icon}\n            </Comp>\n        </span>\n    );\n};\n\nconst IconButton = makeDecoratable(\"IconButton\", DecoratableIconButton);\n\nexport { IconButton, type IconButtonProps, iconButtonVariants };\n"],"mappings":"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","ignoreList":[]}

package/Button/IconButton.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from "./IconButton";
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Ghost: Story;
+export declare const GhostNegative: Story;
+export declare const DoubleExtraSmall: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const SmallWithLargeIcon: Story;
+export declare const Medium: Story;
+export declare const MediumWithLargeIcon: Story;
+export declare const Large: Story;
+export declare const LargeWithLargeIcon: Story;
+export declare const ExtraLarge: Story;
+export declare const WithAsChild: Story;
+export declare const Documentation: Story;