linkedunion-design-kit 1.6.2 → 1.6.4

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

@@ -1,62 +1,10 @@
 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 { render, screen } from "@testing-library/react";
 import { Dummy_label } from "../../utils/constants";
+import { Button } from "./Button";
 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/IconButton.d.ts

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

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

@@ -21,10 +21,59 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { buttonColors, buttonShapes, iconButtonSize } from ".";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
 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, props = __rest(_a, ["color", "onClick", "shape", "size", "className", "icon"]);
-    return (_jsx("button", __assign({ className: "flex items-center ".concat(buttonShapes[shape], " ").concat(buttonColors[color], " ").concat(className, " ").concat(iconButtonSize[size]), onClick: onClick }, props, { children: icon && icon })));
+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",
+    "blue-light": "bg-blue-100 text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",
+    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",
+    "red-light": "bg-red-100 text-red-600 hover:bg-red-700 hover:text-red-50 focus-visible:bg-red-600 focus-visible:text-red-50 active:bg-red-800 active:text-red-50",
+    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-50 text-gray-950 hover:bg-gray-100 focus-visible:bg-gray-50 active:bg-gray-300",
+    "light-gray": "bg-gray-900 text-gray-50 hover:bg-gray-100 focus-visible:bg-gray-50 active:bg-gray-300",
 };
-export default IconButton;
+export var size = {
+    xl: "!p-3.5",
+    lg: "!p-3",
+    md: "!p-2.5",
+    sm: "!p-2.5",
+};
+export var shape = {
+    "rounded-sm": "!rounded-sm",
+    "rounded-full": "!rounded-full",
+};
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md 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 cursor-pointer", {
+    variants: {
+        color: color,
+        size: size,
+        shape: shape,
+    },
+    defaultVariants: {
+        color: "blue",
+        size: "md",
+        shape: "rounded-sm",
+    },
+});
+function IconButton(_a) {
+    var className = _a.className, color = _a.color, size = _a.size, shape = _a.shape, _b = _a.asChild, asChild = _b === void 0 ? false : _b, icon = _a.icon, props = __rest(_a, ["className", "color", "size", "shape", "asChild", "icon"]);
+    var Comp = asChild ? Slot : "button";
+    // Map button size to appropriate icon sizes for the icon
+    var getIconSize = function () {
+        if (size === "xl" || size === "lg") {
+            return "xl";
+        }
+        else if (size === "md") {
+            return "lg";
+        }
+        else if (size === "sm") {
+            return "md";
+        }
+    };
+    var iconSize = getIconSize();
+    return (_jsx(Comp, __assign({ "data-slot": "button", className: cn(buttonVariants({ color: color, size: size, shape: shape, className: className })) }, props, { children: _jsx(LUIcon, { size: iconSize, "data-testid": "icon", icon: icon !== null && icon !== void 0 ? icon : "" }) })));
+}
+export { IconButton, buttonVariants };

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

@@ -10,44 +10,56 @@ var __assign = (this && this.__assign) || function () {
     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";
+import { color, IconButton, shape, size } from "./IconButton";
+import { iconList } from "../../utils/iconList";
 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))); };
+var Template = function (args) { return (_jsx(IconButton, __assign({ icon: "chart-simple", size: "md" }, args))); };
 export var _IconButton = Template.bind({});
 _IconButton.args = {
-    icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }),
+    icon: "chart-simple",
 };
 _IconButton.argTypes = {
     color: {
         control: {
             type: "select",
-            labels: Object.keys(buttonColors),
+            labels: Object.keys(color),
         },
-        options: Object.keys(buttonColors),
+        options: Object.keys(color),
     },
     shape: {
         control: {
             type: "select",
-            labels: Object.keys(buttonShapes),
+            labels: Object.keys(shape),
+        },
+        options: Object.keys(shape),
+        description: "Select the shape of the button",
+        table: {
+            defaultValue: { summary: "rounded-sm" },
+            type: { summary: "string" },
         },
-        options: Object.keys(buttonShapes),
     },
     size: {
         control: {
             type: "select",
-            labels: Object.keys(iconButtonSize),
+            labels: Object.keys(size),
         },
-        options: Object.keys(iconButtonSize),
+        options: Object.keys(size),
         description: "Select the size of the button",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "string" },
+        },
     },
     icon: {
-        control: false,
+        control: {
+            type: "select",
+            labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })),
+        },
+        options: iconList.map(function (icon) { return icon.key; }),
         description: "Icon (React component)",
     },
 };

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

@@ -1,30 +1,28 @@
 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";
+import { color, IconButton, shape, size } 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" }) }));
+        render(_jsx(IconButton, { icon: "chart-simple" }));
         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" }) }));
+        render(_jsx(IconButton, { onClick: handleClick, icon: "chart-simple" }));
         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" }) }));
+        render(_jsx(IconButton, { color: "blue", shape: "rounded-full", size: "lg", icon: "chart-simple" }));
         var buttonElement = screen.getByRole("button");
-        expect(buttonElement).toHaveClass(buttonColors["primary"], buttonShapes["rounded-lg"], iconButtonSize["lg"]);
+        expect(buttonElement).toHaveClass(color["blue"], shape["rounded-full"], size["lg"]);
     });
     it("applies additional className when provided", function () {
-        render(_jsx(IconButton, { className: "custom-class", icon: _jsx(LUIcon, { icon: "chart-simple", size: "xs" }) }));
+        render(_jsx(IconButton, { className: "custom-class", icon: "chart-simple" }));
         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" }) }));
+        render(_jsx(IconButton, { icon: "chart-simple" }));
         expect(screen.getByRole("button")).toBeInTheDocument();
     });
 });

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

@@ -14,14 +14,7 @@ export declare const buttonColors: {
     "gray-outline": string;
 };
 export declare const buttonShapes: {
-    "rounded-none": string;
-    "rounded-xs": string;
     "rounded-sm": string;
-    "rounded-md": string;
-    "rounded-lg": string;
-    "rounded-xl": string;
-    "rounded-2xl": string;
-    "rounded-3xl": string;
     "rounded-full": string;
 };
 export declare const buttonSizes: {

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

@@ -14,26 +14,19 @@ export var buttonColors = {
     "gray-outline": "text-gray-50 border-2 border-gray-50 bg-white hover:border-gray-100 hover:text-gray-100 focus:border-gray-50 focus:text-gray-50 active:border-gray-300 active:text-gray-300",
 };
 export var buttonShapes = {
-    "rounded-none": "rounded-none",
-    "rounded-xs": "rounded-sm",
-    "rounded-sm": "rounded",
-    "rounded-md": "rounded-md",
-    "rounded-lg": "rounded-lg",
-    "rounded-xl": "rounded-xl",
-    "rounded-2xl": "rounded-2xl",
-    "rounded-3xl": "rounded-3xl",
+    "rounded-sm": "!rounded-sm",
     "rounded-full": "!rounded-full",
 };
 export var buttonSizes = {
-    sm: "py-2 px-3 text-base font-normal",
-    md: "py-2 px-4 text-base font-normal",
-    lg: "py-3 px-5 text-lg font-normal",
-    xl: "py-4 px-6 text-xl font-normal",
+    sm: "!py-2 !px-3 text-sm font-normal leading-5",
+    md: "!py-2.5 !px-5 text-sm font-normal leading-5",
+    lg: "!py-3 !px-5 text-base font-normal leading-normal",
+    xl: "!py-3.5 !px-6 text-base font-normal leading-normal",
 };
 export var iconButtonSize = {
     xs: "!p-1",
-    sm: "p-2",
-    md: "p-2",
+    sm: "!p-2",
+    md: "!p-2",
     lg: "!p-3",
-    xl: "p-5",
+    xl: "!p-5",
 };

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

@@ -1,22 +0,0 @@
-import React from "react";
-import { buttonShapes, buttonSizes, buttonColors, iconButtonSize } from ".";
-type colors = keyof typeof buttonColors;
-type buttonShapes = keyof typeof buttonShapes;
-type buttonSizes = keyof typeof buttonSizes;
-type iconButtonSize = keyof typeof iconButtonSize;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    color?: colors;
-    size?: buttonSizes;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    shape?: buttonShapes;
-    className?: string;
-    children: React.ReactNode;
-}
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    color?: colors;
-    size?: iconButtonSize;
-    shape?: buttonShapes;
-    icon: React.ReactNode;
-}
-export {};

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

@@ -1 +1,25 @@
-export {};
+"use strict";
+// import React from "react";
+// import { buttonShapes, buttonSizes, buttonColors, iconButtonSize } from ".";
+// type colors = keyof typeof buttonColors;
+// type buttonShapes = keyof typeof buttonShapes;
+// type buttonSizes = keyof typeof buttonSizes;
+// type iconButtonSize = keyof typeof iconButtonSize;
+// export interface ButtonProps
+//   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+//   color?: colors;
+//   size?: buttonSizes;
+//   startIcon?: string;
+//   endIcon?: string;
+//   shape?: buttonShapes;
+//   variant?: "default" | "link";
+//   className?: string;
+//   children: React.ReactNode;
+// }
+// export interface IconButtonProps
+//   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+//   color?: colors;
+//   size?: iconButtonSize;
+//   shape?: buttonShapes;
+//   icon: React.ReactNode;
+// }

package/dist/src/components/Checkbox/checkbox.stories.js

@@ -11,8 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from "../ui/checkbox";
-import { Label } from "../ui/label";
-import Button from "../Button/Button";
+import { Label } from "../Label/Label";
+import { Button } from "../Button/Button";
 var meta = {
     title: "components/Checkbox",
     component: Checkbox,

package/dist/src/components/ColorPicker/ColorPicker.js

@@ -45,10 +45,15 @@ var ColorPicker = function (_a) {
         var formattedColor = newColor.startsWith("#") ? newColor : "#".concat(newColor);
         setHexColor(formattedColor); // Set the local state immediately
     };
+    useEffect(function () {
+        if (value !== hexColor) {
+            setHexColor(value);
+        }
+    }, [value]);
     // Trigger onChange callback only when debounced value updates
     useEffect(function () {
         onChange(debouncedHexColor); // Trigger onChange with debounced value
-    }, [debouncedHexColor, onChange]);
+    }, [debouncedHexColor]);
     // Handle hex input change
     var handleHexChange = function (e) {
         var inputValue = e.target.value;

package/dist/src/components/EditorTooltip/EditorTooltip.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
-import IconButton from "../Button/IconButton";
-import LUIcon from "../Icons/LUIcon";
+import { IconButton } from "../Button/IconButton";
 var EditorTooltip = function (_a) {
     var title = _a.title, className = _a.className;
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: className, children: _jsx(IconButton, { icon: _jsx(LUIcon, { icon: "question", size: "xs" }), size: "xs", shape: "rounded-full", color: "primary-light" }) }), _jsx(TooltipContent, { children: _jsx("div", { className: "text-base w-48 text-center font-medium", children: title }) })] }) }));
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: className, children: _jsx(IconButton, { icon: "question", size: "sm", shape: "rounded-full", color: "blue-light" }) }), _jsx(TooltipContent, { children: _jsx("div", { className: "text-base w-48 text-center font-medium", children: title }) })] }) }));
 };
 export default EditorTooltip;

package/dist/src/components/Icons/LUIcon.d.ts

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

package/dist/src/components/Icons/LUIcon.js

@@ -20,13 +20,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconList } from "../../utils/iconList";
-import { iconSize } from ".";
+import { getAppliedColor, iconBackground, IconShape, iconSize } from ".";
 var LUIcon = function (_a) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? "md" : _c, icon = _a.icon, className = _a.className, props = __rest(_a, ["size", "icon", "className"]);
+    var _c = _a.size, size = _c === void 0 ? "md" : _c, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? "default" : _d, _e = _a.shape, shape = _e === void 0 ? "square" : _e, className = _a.className, color = _a.color, props = __rest(_a, ["size", "icon", "variant", "shape", "className", "color"]);
     var selectedIcon = iconList.find(function (item) { return item.key === icon; });
-    return (_jsx(_Fragment, { children: _jsxs("svg", __assign({ role: "img", "data-testid": "lu-icon", className: "".concat(iconSize[size], " ").concat(className), viewBox: "0 0 32 32", fill: "currentColor" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "lu-path", d: (_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : "", className: "icon" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] })) }));
+    var paddingIcon = iconBackground[size];
+    var colorClass = variant === "default" ? getAppliedColor(variant, color) : "";
+    var svg = (_jsxs("svg", __assign({ role: "img", "data-testid": "lu-icon", className: "".concat(iconSize[size], " ").concat(variant !== "padded" ? className : "", " ").concat(colorClass), viewBox: "0 0 32 32", fill: "currentColor" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "lu-path", d: (_b = selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) !== null && _b !== void 0 ? _b : "" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32" }) }) })] })));
+    if (variant === "padded") {
+        return (_jsx("div", { className: "inline-flex items-center justify-center ".concat(paddingIcon, " ").concat(shape === "rounded" ? IconShape.rounded : IconShape.square[size], " ").concat(className, " ").concat(getAppliedColor(variant, color)), children: svg }));
+    }
+    return svg;
 };
 export default LUIcon;

package/dist/src/components/Icons/LUIcon.stories.d.ts

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

package/dist/src/components/Icons/LUIcon.stories.js

@@ -12,33 +12,64 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { iconList } from "../../utils/iconList";
 import LUIcon from "./LUIcon";
-import { iconSize } from ".";
+import { iconColor, IconShape, iconSize, iconWithBgColor } from ".";
 export default {
     title: "Components/Icon",
     component: LUIcon,
     tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: Object.keys(iconSize),
+            description: "Size of the icon",
+        },
+        icon: {
+            control: { type: "select" },
+            options: iconList.map(function (icon) { return icon.key; }),
+            description: "Icon to display",
+        },
+        variant: {
+            control: { type: "select" },
+            options: ["default", "padded"],
+            description: "Type of the icon",
+        },
+        shape: {
+            control: { type: "select" },
+            options: Object.keys(IconShape),
+            description: "Shape of the padded icon",
+            if: { arg: "variant", eq: "padded" },
+        },
+    },
 };
-var Template = function (args) { return (_jsx(LUIcon, __assign({ size: "xxs", className: "text-blue-500" }, args))); };
-export var Icon = Template.bind({});
-Icon.args = {
-    size: "xxs",
+var Template = function (args) { return _jsx(LUIcon, __assign({}, args)); };
+// Default Icon Story
+export var _DefaultIcon = Template.bind({});
+_DefaultIcon.args = {
+    size: "md",
     icon: iconList[0].key,
+    color: "blue",
+    variant: "default",
 };
-Icon.argTypes = {
-    size: {
-        control: {
-            type: "select",
-            labels: Object.keys(iconSize),
-        },
-        options: Object.keys(iconSize),
-        defaultValue: "xxs",
+_DefaultIcon.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: Object.keys(iconColor),
+        description: "Text color (no background)",
     },
-    icon: {
-        control: {
-            type: "select",
-            labels: Object.fromEntries(iconList.map(function (icon) { return [icon.key, icon.label]; })),
-        },
-        options: iconList.map(function (icon) { return icon.key; }),
-        defaultValue: iconList[0].key,
+};
+// Padded Icon Story
+export var _PaddedIcon = Template.bind({});
+_PaddedIcon.args = {
+    size: "md",
+    icon: iconList[0].key,
+    variant: "padded",
+    color: "blue",
+    shape: "square",
+};
+_PaddedIcon.argTypes = {
+    color: {
+        control: { type: "select" },
+        options: Object.keys(iconWithBgColor),
+        description: "Background color for padded variant",
     },
 };

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

@@ -1,5 +1,4 @@
 export declare const iconSize: {
-    xxs: string;
     xs: string;
     sm: string;
     md: string;
@@ -14,3 +13,67 @@ export declare const iconSize: {
     huge: string;
     massive: string;
 };
+export declare const iconBackground: {
+    xs: string;
+    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 IconShape: {
+    square: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        huge: string;
+        massive: string;
+    };
+    rounded: string;
+};
+export declare const iconWithBgColor: {
+    blue: string;
+    "light-blue": string;
+    green: string;
+    "light-green": string;
+    yellow: string;
+    "light-yellow": string;
+    red: string;
+    "light-red": string;
+    indigo: string;
+    "light-indigo": string;
+    gray: string;
+    "dark-gray": string;
+    disabled: string;
+};
+export declare const iconColor: {
+    blue: string;
+    "light-blue": string;
+    green: string;
+    "light-green": string;
+    yellow: string;
+    "light-yellow": string;
+    red: string;
+    "light-red": string;
+    indigo: string;
+    "light-indigo": string;
+    gray: string;
+    "dark-gray": string;
+    disabled: string;
+};
+export declare const getAppliedColor: (variant: string, color?: keyof typeof iconWithBgColor) => string;