import { jsx as _jsx } from "react/jsx-runtime";
import { Icon } from "../icon/icon.js";
import { PowerhouseButton } from "./button.js";
const meta = {
    title: "Powerhouse/Components/Button",
    component: PowerhouseButton,
};
export default meta;
const Template = {
    args: {
        children: "Button",
    },
    decorators: [
        (Story) => (_jsx("div", { className: "grid h-screen place-items-center bg-white", children: _jsx(Story, {}) })),
    ],
};
export const Default = {
    ...Template,
};
export const DefaultHover = {
    ...Default,
    parameters: {
        pseudo: {
            hover: true,
        },
    },
};
export const DefaultActive = {
    ...Default,
    parameters: {
        pseudo: {
            active: true,
        },
    },
};
export const DefaultDisabled = {
    ...Default,
    args: {
        ...Default.args,
        disabled: true,
    },
};
export const Light = {
    ...Template,
    args: {
        ...Template.args,
        color: "light",
    },
};
export const LightHover = {
    ...Light,
    parameters: {
        pseudo: {
            hover: true,
        },
    },
};
export const LightActive = {
    ...Light,
    parameters: {
        pseudo: {
            active: true,
        },
    },
};
export const LightDisabled = {
    ...Light,
    args: {
        ...Light.args,
        disabled: true,
    },
};
export const Red = {
    ...Template,
    args: {
        ...Template.args,
        color: "red",
    },
};
export const RedHover = {
    ...Red,
    parameters: {
        pseudo: {
            hover: true,
        },
    },
};
export const RedActive = {
    ...Red,
    parameters: {
        pseudo: {
            active: true,
        },
    },
};
export const RedDisabled = {
    ...Red,
    args: {
        ...Red.args,
        disabled: true,
    },
};
export const Blue = {
    ...Template,
    args: {
        ...Template.args,
        color: "blue",
    },
};
export const BlueHover = {
    ...Blue,
    parameters: {
        pseudo: {
            hover: true,
        },
    },
};
export const BlueActive = {
    ...Blue,
    parameters: {
        pseudo: {
            active: true,
        },
    },
};
export const BlueDisabled = {
    ...Blue,
    args: {
        ...Blue.args,
        disabled: true,
    },
};
export const Small = {
    ...Template,
    args: {
        ...Template.args,
        size: "small",
    },
};
export const WithIcon = {
    ...Template,
    args: {
        ...Template.args,
        icon: _jsx(Icon, { name: "Plus", size: 20 }),
    },
};
export const SmallWithIcon = {
    ...Small,
    args: {
        ...Small.args,
        icon: _jsx(Icon, { name: "Plus", size: 16 }),
    },
};
//# sourceMappingURL=button.stories.js.map