linkedunion-design-kit 1.5.2 → 1.5.3

package/dist/src/components/Avatar/Avatar.stories.jsx

@@ -0,0 +1,31 @@
+import Avatar from "./Avatar";
+import { avatarShape, avatarSize } from ".";
+export default {
+    title: "Components/Avatar",
+    component: Avatar,
+};
+var Template = function (args) { return <Avatar {...args}/>; };
+export var _Avatar = Template.bind({});
+_Avatar.args = {
+    image: "/images/avatar.png",
+    shape: "square",
+    size: "md",
+    className: "",
+    icon: "user",
+};
+_Avatar.argTypes = {
+    shape: {
+        control: {
+            type: "select",
+            labels: Object.keys(avatarShape),
+        },
+        options: Object.keys(avatarShape),
+    },
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(avatarSize),
+        },
+        options: Object.keys(avatarSize),
+    },
+};

package/dist/src/components/Avatar/Avatar.test.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import Avatar from "./Avatar";
+jest.mock("../Icons/LUIcon", function () { return ({
+    __esModule: true,
+    default: jest.fn(function (_a) {
+        var icon = _a.icon, className = _a.className;
+        return (_jsx("div", { "data-testid": "mock-luIcon", className: className, children: icon || "user" }));
+    }),
+}); });
+// Mock Next.js Image component
+jest.mock("next/image", function () { return ({
+    __esModule: true,
+    default: function (_a) {
+        var src = _a.src, alt = _a.alt;
+        return (
+        // eslint-disable-next-line @next/next/no-img-element
+        _jsx("img", { src: src, alt: alt }));
+    },
+}); });
+describe("Avatar Component", function () {
+    it("renders image when image prop is provided", function () {
+        render(_jsx(Avatar, { image: "/images/avatar.png" }));
+        var avatarImage = screen.getByRole("img", { name: /avatar/i });
+        expect(avatarImage).toBeInTheDocument();
+        expect(avatarImage).toHaveAttribute("src", "/images/avatar.png");
+    });
+});
+it("renders icon when no image is provided", function () {
+    render(_jsx(Avatar, {}));
+    var icon = screen.getByTestId("lu-icon");
+    expect(icon).toBeInTheDocument();
+});
+it("applies shape and size class names correctly", function () {
+    render(_jsx(Avatar, { image: "/images/avatar.png", shape: "square", size: "lg" }));
+    var avatarWrapper = screen.getByTestId("lu-avatar");
+    expect(avatarWrapper).toHaveClass("rounded-none");
+    expect(avatarWrapper).toHaveClass("w-[42px]");
+    expect(avatarWrapper).toHaveClass("h-[42px]");
+});
+it("applies additional class names", function () {
+    render(_jsx(Avatar, { image: "/images/avatar.png", className: "custom-class" }));
+    var avatarWrapper = screen.getByTestId("lu-avatar");
+    expect(avatarWrapper).toHaveClass("custom-class");
+});
+it("renders the correct icon when image is not provided", function () {
+    render(_jsx(Avatar, { icon: "user" }));
+    var icon = screen.getByTestId("lu-icon");
+    expect(icon).toBeInTheDocument();
+});

package/dist/src/components/Avatar/Avatar.test.jsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import Avatar from "./Avatar";
+jest.mock("../Icons/LUIcon", function () { return ({
+    __esModule: true,
+    default: jest.fn(function (_a) {
+        var icon = _a.icon, className = _a.className;
+        return (<div data-testid="mock-luIcon" className={className}>
+      {icon || "user"}
+    </div>);
+    }),
+}); });
+// Mock Next.js Image component
+jest.mock("next/image", function () { return ({
+    __esModule: true,
+    default: function (_a) {
+        var src = _a.src, alt = _a.alt;
+        return (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={src} alt={alt}/>);
+    },
+}); });
+describe("Avatar Component", function () {
+    it("renders image when image prop is provided", function () {
+        render(<Avatar image="/images/avatar.png"/>);
+        var avatarImage = screen.getByRole("img", { name: /avatar/i });
+        expect(avatarImage).toBeInTheDocument();
+        expect(avatarImage).toHaveAttribute("src", "/images/avatar.png");
+    });
+});
+it("renders icon when no image is provided", function () {
+    render(<Avatar />);
+    var icon = screen.getByTestId("lu-icon");
+    expect(icon).toBeInTheDocument();
+});
+it("applies shape and size class names correctly", function () {
+    render(<Avatar image="/images/avatar.png" shape="square" size="lg"/>);
+    var avatarWrapper = screen.getByTestId("lu-avatar");
+    expect(avatarWrapper).toHaveClass("rounded-none");
+    expect(avatarWrapper).toHaveClass("w-[42px]");
+    expect(avatarWrapper).toHaveClass("h-[42px]");
+});
+it("applies additional class names", function () {
+    render(<Avatar image="/images/avatar.png" className="custom-class"/>);
+    var avatarWrapper = screen.getByTestId("lu-avatar");
+    expect(avatarWrapper).toHaveClass("custom-class");
+});
+it("renders the correct icon when image is not provided", function () {
+    render(<Avatar icon="user"/>);
+    var icon = screen.getByTestId("lu-icon");
+    expect(icon).toBeInTheDocument();
+});

package/dist/src/components/Avatar/index.d.ts

@@ -0,0 +1,32 @@
+export declare const avatarSize: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    huge: string;
+    massive: string;
+};
+export declare const avatarPadding: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    huge: string;
+    massive: string;
+};
+export declare const avatarShape: {
+    square: string;
+    circle: string;
+};

package/dist/src/components/Avatar/index.js

@@ -0,0 +1,32 @@
+export var avatarSize = {
+    sm: "w-[30px] h-[30px]", //TODO: Change to hand coded values
+    md: "w-8 h-8",
+    lg: "w-[42px] h-[42px]",
+    xl: "w-[52px] h-[52px]",
+    "2xl": "w-16 h-16",
+    "3xl": "w-[76px] h-[76px]",
+    "4xl": "w-24 h-24",
+    "5xl": "w-[116px] h-[116px]",
+    "6xl": "w-32 h-32",
+    "7xl": "w-36 h-36",
+    huge: "w-40 h-40",
+    massive: "w-[200px] h-[200px]",
+};
+export var avatarPadding = {
+    sm: "p-2",
+    md: "p-2",
+    lg: "p-3",
+    xl: "p-4",
+    "2xl": "p-5",
+    "3xl": "p-6",
+    "4xl": "p-8",
+    "5xl": "p-10",
+    "6xl": "p-10",
+    "7xl": "p-10",
+    huge: "p-10",
+    massive: "p-10",
+};
+export var avatarShape = {
+    square: "rounded-none",
+    circle: "rounded-full",
+};

package/dist/src/components/Avatar/type.d.ts

@@ -0,0 +1,11 @@
+import { avatarShape, avatarSize } from ".";
+type avatarSize = keyof typeof avatarSize;
+type avatarShape = keyof typeof avatarShape;
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    image?: string;
+    icon?: string;
+    shape?: avatarShape;
+    size?: avatarSize;
+    className?: string;
+}
+export {};

package/dist/src/components/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "./type";
+declare const Button: ({ color, startIcon, endIcon, onClick, shape, size, className, children, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/src/components/Button/Button.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonShapes, buttonSizes, buttonColors } from "./index";
+var Button = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, children = _a.children;
+    return (_jsxs("button", { className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className, " ").concat(buttonSizes[size]), onClick: onClick, children: [startIcon && _jsxs("span", { "data-testid": "start-icon", children: [" ", startIcon, " "] }), children, endIcon && _jsxs("span", { "data-testid": "end-icon", children: [" ", endIcon, " "] })] }));
+};
+export default Button;

package/dist/src/components/Button/Button.jsx

@@ -0,0 +1,10 @@
+import { buttonShapes, buttonSizes, buttonColors } from "./index";
+var Button = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, children = _a.children;
+    return (<button className={"flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className, " ").concat(buttonSizes[size])} onClick={onClick}>
+      {startIcon && <span data-testid="start-icon"> {startIcon} </span>}
+      {children}
+      {endIcon && <span data-testid="end-icon"> {endIcon} </span>}
+    </button>);
+};
+export default Button;

package/dist/{components → src/components}/Button/Button.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import { ButtonProps } from "./type";
 declare const _default: Meta;
 export default _default;
-export declare const _Button: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
+export declare const _Button: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ButtonProps>;

package/dist/src/components/Button/Button.stories.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonShapes, buttonSizes, buttonColors } from ".";
+import Button from "./Button";
+export default {
+    title: "Components/Button/Button",
+    component: Button,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Button, __assign({}, args)); };
+export var _Button = Template.bind({});
+_Button.args = {
+    children: "Button Text",
+};
+_Button.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonColors),
+        },
+        options: Object.keys(buttonColors),
+    },
+    startIcon: {
+        control: false,
+        description: "Start icon (React component)",
+    },
+    endIcon: {
+        control: false,
+        description: "End icon (React component)",
+    },
+    shape: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonShapes),
+        },
+        options: Object.keys(buttonShapes),
+    },
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonSizes),
+        },
+        options: Object.keys(buttonSizes),
+        description: "Select the size of the button",
+    },
+};

package/dist/src/components/Button/Button.stories.jsx

@@ -0,0 +1,44 @@
+import { buttonShapes, buttonSizes, buttonColors } from ".";
+import Button from "./Button";
+export default {
+    title: "Components/Button/Button",
+    component: Button,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return <Button {...args}></Button>; };
+export var _Button = Template.bind({});
+_Button.args = {
+    children: "Button Text",
+};
+_Button.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonColors),
+        },
+        options: Object.keys(buttonColors),
+    },
+    startIcon: {
+        control: false,
+        description: "Start icon (React component)",
+    },
+    endIcon: {
+        control: false,
+        description: "End icon (React component)",
+    },
+    shape: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonShapes),
+        },
+        options: Object.keys(buttonShapes),
+    },
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonSizes),
+        },
+        options: Object.keys(buttonSizes),
+        description: "Select the size of the button",
+    },
+};

package/dist/src/components/Button/Button.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Button from "./Button";
+import { buttonColors, buttonShapes, buttonSizes } from ".";
+import { Dummy_label } from "../../utils/constants";
+describe("Button Component", function () {
+    it("renders default button component", function () {
+        render(_jsx(Button, { children: Dummy_label }));
+        var buttonElement = screen.getByRole("button", { name: Dummy_label });
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).toHaveClass(buttonColors["primary"], buttonShapes["rounded-none"], buttonSizes["sm"]);
+    });
+    it("renders button with a custom label", function () {
+        render(_jsx(Button, { children: Dummy_label }));
+        expect(screen.getByRole("button", { name: Dummy_label })).toBeInTheDocument();
+    });
+    it("calls onClick handler when clicked", function () {
+        var handleClick = jest.fn();
+        render(_jsx(Button, { onClick: handleClick, children: "Click" }));
+        fireEvent.click(screen.getByRole("button"));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it("renders startIcon when provided", function () {
+        render(_jsx(Button, { startIcon: _jsx("span", { children: "*" }), children: Dummy_label }));
+        expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+    });
+    it("renders endIcon when provided", function () {
+        render(_jsx(Button, { endIcon: _jsx("span", { children: "*" }), children: Dummy_label }));
+        expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+    });
+    it("applies correct color, shape, and size classes", function () {
+        render(_jsx(Button, { color: "primary", shape: "rounded-lg", size: "lg", children: Dummy_label }));
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).toHaveClass(buttonColors["primary"], buttonShapes["rounded-lg"], buttonSizes["lg"]);
+    });
+    it("applies additional className when provided", function () {
+        render(_jsx(Button, { className: "custom-class", children: Dummy_label }));
+        expect(screen.getByRole("button")).toHaveClass("custom-class");
+    });
+    it("renders without crashing when no props are provided", function () {
+        render(_jsx(Button, { children: Dummy_label }));
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("renders button with both startIcon and endIcon", function () {
+        render(_jsx(Button, { startIcon: _jsx("span", { children: "*" }), endIcon: _jsx("span", { children: "*" }), children: Dummy_label }));
+        expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+        expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+    });
+    it("does not render startIcon when not provided", function () {
+        render(_jsx(Button, { children: Dummy_label }));
+        expect(screen.queryByTestId("start-icon")).not.toBeInTheDocument();
+    });
+    it("does not render endIcon when not provided", function () {
+        render(_jsx(Button, { children: Dummy_label }));
+        expect(screen.queryByTestId("end-icon")).not.toBeInTheDocument();
+    });
+    it("renders correctly without a className prop", function () {
+        render(_jsx(Button, { children: Dummy_label }));
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).not.toHaveClass("custom-class");
+    });
+});

package/dist/src/components/Button/Button.test.jsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import Button from "./Button";
+import { buttonColors, buttonShapes, buttonSizes } from ".";
+import { Dummy_label } from "../../utils/constants";
+describe("Button Component", function () {
+    it("renders default button component", function () {
+        render(<Button>{Dummy_label}</Button>);
+        var buttonElement = screen.getByRole("button", { name: Dummy_label });
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).toHaveClass(buttonColors["primary"], buttonShapes["rounded-none"], buttonSizes["sm"]);
+    });
+    it("renders button with a custom label", function () {
+        render(<Button>{Dummy_label}</Button>);
+        expect(screen.getByRole("button", { name: Dummy_label })).toBeInTheDocument();
+    });
+    it("calls onClick handler when clicked", function () {
+        var handleClick = jest.fn();
+        render(<Button onClick={handleClick}>Click</Button>);
+        fireEvent.click(screen.getByRole("button"));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it("renders startIcon when provided", function () {
+        render(<Button startIcon={<span>*</span>}>{Dummy_label}</Button>);
+        expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+    });
+    it("renders endIcon when provided", function () {
+        render(<Button endIcon={<span>*</span>}>{Dummy_label}</Button>);
+        expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+    });
+    it("applies correct color, shape, and size classes", function () {
+        render(<Button color="primary" shape="rounded-lg" size="lg">
+        {Dummy_label}
+      </Button>);
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).toHaveClass(buttonColors["primary"], buttonShapes["rounded-lg"], buttonSizes["lg"]);
+    });
+    it("applies additional className when provided", function () {
+        render(<Button className="custom-class">{Dummy_label}</Button>);
+        expect(screen.getByRole("button")).toHaveClass("custom-class");
+    });
+    it("renders without crashing when no props are provided", function () {
+        render(<Button>{Dummy_label}</Button>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("renders button with both startIcon and endIcon", function () {
+        render(<Button startIcon={<span>*</span>} endIcon={<span>*</span>}>
+        {Dummy_label}
+      </Button>);
+        expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+        expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+    });
+    it("does not render startIcon when not provided", function () {
+        render(<Button>{Dummy_label}</Button>);
+        expect(screen.queryByTestId("start-icon")).not.toBeInTheDocument();
+    });
+    it("does not render endIcon when not provided", function () {
+        render(<Button>{Dummy_label}</Button>);
+        expect(screen.queryByTestId("end-icon")).not.toBeInTheDocument();
+    });
+    it("renders correctly without a className prop", function () {
+        render(<Button>{Dummy_label}</Button>);
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).not.toHaveClass("custom-class");
+    });
+});

package/dist/src/components/Button/IconButton.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from "./type";
+declare const IconButton: ({ color, onClick, shape, size, className, icon, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/src/components/Button/IconButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonColors, buttonShapes, iconButtonSize } from ".";
+import LUIcon from "../Icons/LUIcon";
+var IconButton = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, _e = _a.icon, icon = _e === void 0 ? _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) : _e;
+    return (_jsx("button", { className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className, " ").concat(iconButtonSize[size]), onClick: onClick, children: icon && icon }));
+};
+export default IconButton;

package/dist/src/components/Button/IconButton.jsx

@@ -0,0 +1,9 @@
+import { buttonColors, buttonShapes, iconButtonSize } from ".";
+import LUIcon from "../Icons/LUIcon";
+var IconButton = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "primary" : _b, onClick = _a.onClick, _c = _a.shape, shape = _c === void 0 ? "rounded-none" : _c, _d = _a.size, size = _d === void 0 ? "sm" : _d, className = _a.className, _e = _a.icon, icon = _e === void 0 ? <LUIcon icon="chart-simple" size="xs"/> : _e;
+    return (<button className={"flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className, " ").concat(iconButtonSize[size])} onClick={onClick}>
+      {icon && icon}
+    </button>);
+};
+export default IconButton;

package/dist/src/components/Button/IconButton.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const _IconButton: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;

package/dist/src/components/Button/IconButton.stories.js

@@ -0,0 +1,53 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonColors, buttonShapes, iconButtonSize } from ".";
+import LUIcon from "../Icons/LUIcon";
+import IconButton from "./IconButton";
+export default {
+    title: "Components/Button/IconButton",
+    component: IconButton,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(IconButton, __assign({ icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) }, args))); };
+export var _IconButton = Template.bind({});
+_IconButton.args = {
+    icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }),
+};
+_IconButton.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonColors),
+        },
+        options: Object.keys(buttonColors),
+    },
+    shape: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonShapes),
+        },
+        options: Object.keys(buttonShapes),
+    },
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(iconButtonSize),
+        },
+        options: Object.keys(iconButtonSize),
+        description: "Select the size of the button",
+    },
+    icon: {
+        control: false,
+        description: "Icon (React component)",
+    },
+};

package/dist/src/components/Button/IconButton.stories.jsx

@@ -0,0 +1,41 @@
+import { buttonColors, buttonShapes, iconButtonSize } from ".";
+import LUIcon from "../Icons/LUIcon";
+import IconButton from "./IconButton";
+export default {
+    title: "Components/Button/IconButton",
+    component: IconButton,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (<IconButton icon={<LUIcon icon="chart-simple" size="xs"/>} {...args}/>); };
+export var _IconButton = Template.bind({});
+_IconButton.args = {
+    icon: <LUIcon icon="chart-simple" size="xs"/>,
+};
+_IconButton.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonColors),
+        },
+        options: Object.keys(buttonColors),
+    },
+    shape: {
+        control: {
+            type: "select",
+            labels: Object.keys(buttonShapes),
+        },
+        options: Object.keys(buttonShapes),
+    },
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(iconButtonSize),
+        },
+        options: Object.keys(iconButtonSize),
+        description: "Select the size of the button",
+    },
+    icon: {
+        control: false,
+        description: "Icon (React component)",
+    },
+};

package/dist/src/components/Button/IconButton.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { buttonColors, buttonShapes, iconButtonSize } from ".";
+import LUIcon from "../Icons/LUIcon";
+import IconButton from "./IconButton";
+describe("Icon Button Component", function () {
+    it("renders icon button with required icon prop", function () {
+        render(_jsx(IconButton, { icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) }));
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("calls onClick handler when clicked", function () {
+        var handleClick = jest.fn();
+        render(_jsx(IconButton, { onClick: handleClick, icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) }));
+        fireEvent.click(screen.getByRole("button"));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it("applies correct color, shape, and size classes", function () {
+        render(_jsx(IconButton, { color: "primary", shape: "rounded-lg", size: "lg", icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) }));
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).toHaveClass(buttonColors["primary"], buttonShapes["rounded-lg"], iconButtonSize["lg"]);
+    });
+    it("applies additional className when provided", function () {
+        render(_jsx(IconButton, { className: "custom-class", icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) }));
+        expect(screen.getByRole("button")).toHaveClass("custom-class");
+    });
+    it("renders without crashing when all required props are provided", function () {
+        render(_jsx(IconButton, { icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) }));
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+});