linkedunion-design-kit 1.6.2 → 1.6.4

package/dist/app/page.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from "next/image";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function Home() {
-    return (_jsxs("main", { className: "flex min-h-screen flex-col items-center justify-between p-24", children: [_jsxs("div", { className: "z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex", children: [_jsxs("p", { className: "fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-gray-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30", children: ["Get started by editing\u00A0", _jsx("code", { className: "font-mono font-bold", children: "app/page.tsx" })] }), _jsx("div", { className: "fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none", children: _jsxs("a", { className: "pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0", href: "https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", target: "_blank", rel: "noopener noreferrer", children: ["By", " ", _jsx(Image, { src: "/vercel.svg", alt: "Vercel Logo", className: "dark:invert", width: 100, height: 24, priority: true })] }) })] }), _jsx("div", { className: "relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]", children: _jsx(Image, { className: "relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert", src: "/next.svg", alt: "Next.js Logo", width: 180, height: 37, priority: true }) }), _jsxs("div", { className: "mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left", children: [_jsxs("a", { href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Docs", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Find in-depth information about Next.js features and API." })] }), _jsxs("a", { href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Learn", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Learn about Next.js in an interactive course with\u00A0quizzes!" })] }), _jsxs("a", { href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Templates", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Explore the Next.js 13 playground." })] }), _jsxs("a", { href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Deploy", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Instantly deploy your Next.js site to a shareable URL with Vercel." })] })] })] }));
+    return (_jsx("div", { className: "text-center flex flex-col items-center justify-center min-h-screen p-24 gap-5", children: _jsx("h1", { children: " Welcome to Linkedunion Design kit" }) }));
 }

package/dist/index.d.ts

@@ -1,16 +1,21 @@
 export { default as LUIcon } from "./src/components/Icons/LUIcon";
 export { default as Card } from "./src/components/MediaCard/Card";
-export { default as Button } from "./src/components/Button/Button";
 export { default as LuImage } from "./src/components/Images/LuImage";
 export { default as Avatar } from "./src/components/Avatar/Avatar";
 export { default as Title } from "./src/components/Title/Title";
-export { default as IconButton } from "./src/components/Button/IconButton";
+export { IconButton } from "./src/components/Button/IconButton";
 export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
-export { default as Label } from "./src/components/Label/Label";
 export { Input } from "./src/components/ui/input";
 export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorTooltip";
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
-export { default as ImageUploader } from "./src/components/ui/imageUploader";
-export { Typography } from "./src/components/ui/typography";
+export { default as ImageUploader } from "./src/components/ImageUploader/imageUploader";
 export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";
+export { Typography } from "./src/components/ui/typography";
+export { Heading } from "./src/components/Typography/Heading/heading";
+export { Body } from "./src/components/Typography/Body/body";
+export { Display } from "./src/components/Typography/Display/display";
+export { Caption } from "./src/components/ui/caption";
+export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
+export { Button } from "./src/components/Button/Button";
+export { Label } from "./src/components/Label/Label";

package/dist/index.js

@@ -1,16 +1,21 @@
 export { default as LUIcon } from "./src/components/Icons/LUIcon";
 export { default as Card } from "./src/components/MediaCard/Card";
-export { default as Button } from "./src/components/Button/Button";
 export { default as LuImage } from "./src/components/Images/LuImage";
 export { default as Avatar } from "./src/components/Avatar/Avatar";
 export { default as Title } from "./src/components/Title/Title";
-export { default as IconButton } from "./src/components/Button/IconButton";
+export { IconButton } from "./src/components/Button/IconButton";
 export { default as ColorPicker } from "./src/components/ColorPicker/ColorPicker";
-export { default as Label } from "./src/components/Label/Label";
 export { Input } from "./src/components/ui/input";
 export { default as EditorTooltip } from "./src/components/EditorTooltip/EditorTooltip";
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "./src/components/ui/accordion";
-export { default as ImageUploader } from "./src/components/ui/imageUploader";
-export { Typography } from "./src/components/ui/typography";
+export { default as ImageUploader } from "./src/components/ImageUploader/imageUploader";
 export { Checkbox } from "./src/components/ui/checkbox";
 export { Switch } from "./src/components/ui/switch";
+export { Typography } from "./src/components/ui/typography";
+export { Heading } from "./src/components/Typography/Heading/heading";
+export { Body } from "./src/components/Typography/Body/body";
+export { Display } from "./src/components/Typography/Display/display";
+export { Caption } from "./src/components/ui/caption";
+export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
+export { Button } from "./src/components/Button/Button";
+export { Label } from "./src/components/Label/Label";

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

@@ -1,3 +1,45 @@
-import { ButtonProps } from "./type";
-declare const Button: ({ color, startIcon, endIcon, onClick, shape, size, className, children, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default Button;
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export declare const color: {
+    blue: string;
+    red: string;
+    green: string;
+    yellow: string;
+    indigo: string;
+    gray: string;
+};
+export declare const size: {
+    xl: string;
+    lg: string;
+    md: string;
+    sm: string;
+};
+export declare const shape: {
+    "rounded-sm": string;
+    "rounded-full": string;
+};
+export declare const variant: {
+    default: string;
+    link: string;
+};
+export declare const linkColor: {
+    blue: string;
+    red: string;
+    green: string;
+    yellow: string;
+    indigo: string;
+    gray: string;
+};
+declare const buttonVariants: (props?: ({
+    color?: "blue" | "green" | "yellow" | "red" | "indigo" | "gray" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    shape?: "rounded-full" | "rounded-sm" | null | undefined;
+    variant?: "link" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, color, size, shape, variant, asChild, startIcon, endIcon, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    startIcon?: string;
+    endIcon?: string;
+    variant?: "default" | "link";
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

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

@@ -20,10 +20,81 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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, rest = __rest(_a, ["color", "startIcon", "endIcon", "onClick", "shape", "size", "className", "children"]);
-    return (_jsxs("button", __assign({ className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className || "", " ").concat(buttonSizes[size]), onClick: onClick }, rest, { children: [startIcon && _jsxs("span", { "data-testid": "start-icon", children: [" ", startIcon, " "] }), children, endIcon && _jsxs("span", { "data-testid": "end-icon", children: [" ", endIcon, " "] })] })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+export var color = {
+    blue: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-300 active:bg-blue-800 disabled:bg-gray-100 disabled:text-gray-400",
+    red: "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-300 active:bg-red-800 disabled:bg-gray-100 disabled:text-gray-400",
+    green: "bg-green-600 text-white hover:bg-green-700 focus-visible:ring-green-300 active:bg-green-800 disabled:bg-gray-100 disabled:text-gray-400",
+    yellow: "bg-yellow-500 text-white hover:bg-yellow-600 focus-visible:ring-yellow-200 active:bg-yellow-700 disabled:bg-gray-100 disabled:text-gray-400",
+    indigo: "bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:ring-indigo-300 active:bg-indigo-800 disabled:bg-gray-100 disabled:text-gray-400",
+    gray: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-300 active:bg-gray-800 disabled:bg-gray-100 disabled:text-gray-400",
 };
-export default Button;
+export var size = {
+    xl: "!py-3.5 !px-6 text-base font-normal leading-normal",
+    lg: "!py-3 !px-5 text-base font-normal leading-normal",
+    md: "!py-2.5 !px-5 text-sm font-normal leading-5",
+    sm: "!py-2 !px-3 text-sm font-normal leading-5",
+};
+export var shape = {
+    "rounded-sm": "!rounded-sm",
+    "rounded-full": "!rounded-full",
+};
+export var variant = {
+    default: "",
+    link: "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent !p-0 underline-offset-4 hover:underline",
+};
+// Link variant text colors based on the color prop
+export var linkColor = {
+    blue: "text-blue-600 hover:text-blue-700",
+    red: "text-red-600 hover:text-red-700",
+    green: "text-green-600 hover:text-green-700",
+    yellow: "text-yellow-500 hover:text-yellow-600",
+    indigo: "text-indigo-600 hover:text-indigo-700",
+    gray: "text-gray-600 hover:text-gray-700",
+};
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        color: color,
+        size: size,
+        shape: shape,
+        variant: variant,
+    },
+    defaultVariants: {
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "default",
+    },
+});
+function Button(_a) {
+    var className = _a.className, _b = _a.color, color = _b === void 0 ? "blue" : _b, size = _a.size, shape = _a.shape, _c = _a.variant, variant = _c === void 0 ? "default" : _c, _d = _a.asChild, asChild = _d === void 0 ? false : _d, startIcon = _a.startIcon, endIcon = _a.endIcon, props = __rest(_a, ["className", "color", "size", "shape", "variant", "asChild", "startIcon", "endIcon"]);
+    var Comp = asChild ? Slot : "button";
+    // Map button size to appropriate icon sizes for start and end icons
+    var getIconSizes = function () {
+        if (size === "xl" || size === "lg" || size === "md") {
+            return {
+                startIcon: "md", // 16px (size-6) - matches iconSize.xl
+                endIcon: "xs", // 12px (size-3.5)
+            };
+        }
+        return {
+            startIcon: "sm", // 14px (size-4)
+            endIcon: "xs", // 12px (size-3.5)
+        };
+    };
+    // Get icon sizes based on button size
+    var iconSizes = getIconSizes();
+    // Use the calculated sizes based on button size
+    var startIconSizeValue = iconSizes.startIcon;
+    var endIconSizeValue = iconSizes.endIcon;
+    // Apply appropriate text color for link variant
+    var extraClasses = variant === "link" && color
+        ? linkColor[color]
+        : "";
+    return (_jsxs(Comp, __assign({ "data-slot": "button", className: cn(buttonVariants({ variant: variant, color: color, size: size, shape: shape, className: className }), extraClasses) }, props, { children: [startIcon && (_jsx(LUIcon, { size: startIconSizeValue, "data-testid": "start-icon", icon: startIcon })), props.children, endIcon && (_jsx(LUIcon, { size: endIconSizeValue, "data-testid": "end-icon", icon: endIcon }))] })));
+}
+export { Button, buttonVariants };

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

@@ -1,5 +1,124 @@
-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, ButtonProps>;
+import { StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+declare const meta: {
+    title: string;
+    component: typeof Button;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            expanded: boolean;
+            sort: string;
+            hideNoControlsWarning: boolean;
+            exclude: never[];
+        };
+    };
+    args: {
+        color: "blue";
+        size: "md";
+        shape: "rounded-sm";
+        variant: "default";
+    };
+    argTypes: {
+        color: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+            defaultValue: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+            defaultValue: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        shape: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+            defaultValue: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+            defaultValue: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        startIcon: {
+            control: "text";
+            description: string;
+        };
+        endIcon: {
+            control: "text";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        asChild: {
+            control: "boolean";
+            description: string;
+        };
+        onClick: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Blue: Story;
+export declare const Red: Story;
+export declare const Green: Story;
+export declare const Yellow: Story;
+export declare const Indigo: Story;
+export declare const Gray: Story;
+export declare const WithStartIcon: Story;
+export declare const WithEndIcon: Story;
+export declare const WithBothIcons: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const DefaultVariant: Story;
+export declare const LinkVariant: Story;
+export declare const LinkVariantRed: Story;
+export declare const LinkVariantGreen: Story;
+export declare const RoundedSmall: Story;
+export declare const RoundedFull: Story;
+export declare const Disabled: Story;
+export declare const DisabledButton: Story;

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

@@ -1,63 +1,248 @@
-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",
+import { Button, size, color, shape, variant } from "./Button";
+var meta = {
+    title: "Components/Button",
     component: Button,
     tags: ["autodocs"],
-};
-var Template = function (args) { return _jsx(Button, __assign({}, args)); };
-export var _Button = Template.bind({});
-_Button.args = {
-    children: "Button Text",
-    onClick: function () {
-        alert("Button clicked!");
+    parameters: {
+        docs: {
+            description: {
+                component: "Button component with default variants: color: blue, size: md, shape: rounded-sm, variant: default",
+            },
+        },
+        controls: {
+            expanded: true,
+            sort: "requiredFirst",
+            hideNoControlsWarning: true,
+            exclude: [],
+        },
+    },
+    args: {
+        // Default values for all stories
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "default",
+    },
+    argTypes: {
+        color: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(color),
+            description: "The color and visual style of the button",
+            defaultValue: "blue",
+            table: {
+                defaultValue: { summary: "blue" },
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(size),
+            description: "The size of the button",
+            defaultValue: "md",
+            table: {
+                defaultValue: { summary: "md" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(shape),
+            description: "The shape of the button",
+            defaultValue: "rounded-sm",
+            table: {
+                defaultValue: { summary: "rounded-sm" },
+            },
+        },
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(variant),
+            description: "The variant of the button (default or link)",
+            defaultValue: "default",
+            table: {
+                defaultValue: { summary: "default" },
+            },
+        },
+        startIcon: {
+            control: "text",
+            description: "Icon to display at the start of the button",
+        },
+        endIcon: {
+            control: "text",
+            description: "Icon to display at the end of the button",
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the button is disabled",
+        },
+        asChild: {
+            control: "boolean",
+            description: "Whether to render as a child component",
+        },
+        onClick: {
+            action: "clicked",
+            description: "Function called when button is clicked",
+        },
     },
 };
-_Button.argTypes = {
-    color: {
-        control: {
-            type: "select",
-            labels: Object.keys(buttonColors),
+export default meta;
+// Display Default button with explicit default values
+export var Default = {
+    args: {
+        children: "Button Text",
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+        variant: "default",
+        onClick: function () {
+            alert("Button clicked!");
         },
-        options: Object.keys(buttonColors),
     },
-    startIcon: {
-        control: false,
-        description: "Start icon (React component)",
+};
+export var Blue = {
+    args: {
+        children: "Blue Button",
+        color: "blue",
+        size: "md",
     },
-    endIcon: {
-        control: false,
-        description: "End icon (React component)",
+};
+export var Red = {
+    args: {
+        children: "Red Button",
+        color: "red",
+        size: "md",
     },
-    shape: {
-        control: {
-            type: "select",
-            labels: Object.keys(buttonShapes),
-        },
-        options: Object.keys(buttonShapes),
+};
+export var Green = {
+    args: {
+        children: "Green Button",
+        color: "green",
+        size: "md",
     },
-    size: {
-        control: {
-            type: "select",
-            labels: Object.keys(buttonSizes),
-        },
-        options: Object.keys(buttonSizes),
-        description: "Select the size of the button",
+};
+export var Yellow = {
+    args: {
+        children: "Yellow Button",
+        color: "yellow",
+        size: "md",
     },
-    onClick: {
-        action: "clicked",
-        description: "Function to call when button is clicked",
+};
+export var Indigo = {
+    args: {
+        children: "Indigo Button",
+        color: "indigo",
+        size: "md",
+    },
+};
+export var Gray = {
+    args: {
+        children: "Gray Button",
+        color: "gray",
+        size: "md",
+    },
+};
+export var WithStartIcon = {
+    args: {
+        children: "Button with Start Icon",
+        startIcon: "arrow-right",
+        size: "md",
+    },
+};
+export var WithEndIcon = {
+    args: {
+        children: "Button with End Icon",
+        endIcon: "arrow-right",
+        size: "md",
+    },
+};
+export var WithBothIcons = {
+    args: {
+        children: "Button with Icons",
+        startIcon: "plus",
+        endIcon: "arrow-right",
+        size: "md",
+    },
+};
+export var Small = {
+    args: {
+        children: "Small Button",
+        size: "sm",
+    },
+};
+export var Medium = {
+    args: {
+        children: "Medium Button",
+        size: "md",
+    },
+};
+export var Large = {
+    args: {
+        children: "Large Button",
+        size: "lg",
+    },
+};
+export var ExtraLarge = {
+    args: {
+        children: "Extra Large Button",
+        size: "xl",
+    },
+};
+export var DefaultVariant = {
+    args: {
+        children: "Default Variant Button",
+        variant: "default",
+    },
+};
+export var LinkVariant = {
+    args: {
+        children: "Link Style Button",
+        variant: "link",
+        color: "blue",
+    },
+};
+export var LinkVariantRed = {
+    args: {
+        children: "Red Link Button",
+        variant: "link",
+        color: "red",
+    },
+};
+export var LinkVariantGreen = {
+    args: {
+        children: "Green Link Button",
+        variant: "link",
+        color: "green",
+    },
+};
+export var RoundedSmall = {
+    args: {
+        children: "Rounded Small",
+        shape: "rounded-sm",
+    },
+};
+export var RoundedFull = {
+    args: {
+        children: "Rounded Full",
+        shape: "rounded-full",
+    },
+};
+export var Disabled = {
+    args: {
+        children: "Disabled Button",
+        disabled: true,
+    },
+};
+// Color variants
+// Example of color with different button states
+export var DisabledButton = {
+    args: {
+        children: "Disabled Button",
+        color: "blue",
+        disabled: true,
     },
 };