linkedunion-design-kit 1.5.2 → 1.5.4

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

@@ -0,0 +1,30 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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, 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 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.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();
+    });
+});

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

@@ -0,0 +1,39 @@
+export declare const buttonColors: {
+    primary: string;
+    "primary-light": string;
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    gray: string;
+    "primary-outline": string;
+    "success-outline": string;
+    "warning-outline": string;
+    "danger-outline": string;
+    "info-outline": string;
+    "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: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const iconButtonSize: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

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

@@ -0,0 +1,39 @@
+export var buttonColors = {
+    primary: "text-primary-0 bg-primary-600 hover:bg-primary-700 focus:bg-primary-600 active:bg-primary-800",
+    "primary-light": "text-primary-600 bg-primary-100 hover:bg-primary-600 hover:text-primary-100",
+    success: "text-success-0 bg-success-600 hover:bg-success-700 focus:bg-success-600 active:bg-success-800",
+    warning: "text-warning-1000 bg-warning-500 hover:bg-warning-600 focus:bg-warning-500 active:bg-warning-700",
+    danger: "text-danger-0 bg-danger-600 hover:bg-danger-700 focus:bg-danger-600 active:bg-danger-800",
+    info: "text-info-0 bg-info-600 hover:bg-info-700 focus:bg-info-600 active:bg-info-800",
+    gray: "text-neutral-1000 bg-neutral-0 hover:bg-neutral-100 focus:bg-neutral-0 active:bg-neutral-300",
+    "primary-outline": "text-primary-600 border-2 border-primary-600 bg-white hover:border-primary-700 hover:text-primary-700 focus:border-primary-600 focus:text-primary-600 active:border-primary-800 active:text-primary-800",
+    "success-outline": "text-success-600 border-2 border-success-600 bg-white hover:border-success-700 hover:text-success-700 focus:border-success-600 focus:text-success-600 active:border-success-800 active:text-success-800",
+    "warning-outline": "text-warning-500 border-2 border-warning-500 hover:border-warning-600 hover:text-warning-600 focus:border-warning-500 focus:text-warning-500 active:border-warning-700 active:text-warning-700",
+    "danger-outline": "text-danger-600 border-2 border-danger-600 bg-white hover:border-danger-700 hover:text-danger-700 focus:border-danger-600 focus:text-danger-600 active:border-danger-800 active:text-danger-800",
+    "info-outline": "text-info-600 border-2 border-info-600 bg-white hover:border-info-700 hover:text-info-700 focus:border-info-600 focus:text-info-600 active:border-info-800 active:text-info-800",
+    "gray-outline": "text-neutral-0 border-2 border-neutral-0 bg-white hover:border-neutral-100 hover:text-neutral-100 focus:border-neutral-0 focus:text-neutral-0 active:border-neutral-300 active:text-neutral-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-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",
+};
+export var iconButtonSize = {
+    xs: "!p-1",
+    sm: "p-2",
+    md: "p-2",
+    lg: "!p-3",
+    xl: "p-5",
+};

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

@@ -0,0 +1,23 @@
+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.HTMLAttributes<HTMLButtonElement> {
+    color?: colors;
+    onClick?: () => void;
+    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/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,3 @@
+import { ColorPickerInterface } from "./type";
+declare const ColorPicker: ({ onChange, value }: ColorPickerInterface) => import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Input } from "../ui/input";
+var ColorPicker = function (_a) {
+    var onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? "#000000" : _b;
+    var _c = useState(value), hexColor = _c[0], setHexColor = _c[1];
+    // Handle input changes (color picker or text field)
+    var handleColorChange = function (newColor) {
+        setHexColor(newColor);
+        onChange(newColor);
+    };
+    // Handle hex input change
+    var handleHexChange = function (e) {
+        var inputValue = e.target.value;
+        // Ensure it starts with #
+        var formattedValue = inputValue.startsWith("#")
+            ? inputValue
+            : "#".concat(inputValue);
+        handleColorChange(formattedValue);
+    };
+    // Handle color input change (from native color picker)
+    var handleColorInputChange = function (e) {
+        handleColorChange(e.target.value);
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "size-9 shrink-0 rounded-l-sm", style: { backgroundColor: hexColor } }), _jsx(Input, { type: "color", value: hexColor, onChange: handleColorInputChange, className: "absolute inset-0 opacity-0 cursor-pointer rounded-r-sm", "aria-label": "Select color" })] }), _jsx(Input, { id: "color-picker", type: "text", value: hexColor, onChange: handleHexChange, className: "rounded-r-sm border min-w-25" })] }) }));
+};
+export default ColorPicker;

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

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

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

@@ -0,0 +1,24 @@
+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 ColorPicker from "./ColorPicker";
+export default {
+    title: "Components/ColorPicker",
+    component: ColorPicker,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(ColorPicker, __assign({}, args))); };
+export var _ColorPicker = Template.bind({});
+_ColorPicker.args = {
+    value: "#000000", // Default color
+    onChange: function () { },
+};

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

@@ -0,0 +1,4 @@
+export interface ColorPickerInterface {
+    onChange: (color: string) => void;
+    value: string;
+}

package/dist/src/components/Colors/color.d.ts

@@ -0,0 +1,4 @@
+import { colors } from "../../utils/colors";
+export declare const Color: ({ color }: {
+    color?: keyof typeof colors;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Colors/color.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colors } from "../../utils/colors";
+export var Color = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "black" : _b;
+    return _jsx("div", { style: { color: colors[color] || colors.black }, children: color });
+};

package/dist/src/components/Colors/color.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/react";
+import { colors } from "../../utils/colors";
+declare const _default: Meta;
+export default _default;
+export declare const _Color: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    color: keyof typeof colors;
+}>;

package/dist/src/components/Colors/color.stories.js

@@ -0,0 +1,32 @@
+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 { colors } from "../../utils/colors";
+import { Color } from "./color";
+export default {
+    title: "Components/Color",
+    component: Color,
+};
+var Template = function (args) { return (_jsx(Color, __assign({}, args))); };
+export var _Color = Template.bind({});
+_Color.args = {
+    color: "black", // Default color
+};
+_Color.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(colors),
+        },
+        options: Object.keys(colors),
+    },
+};

package/dist/src/components/Colors/color.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { colors } from "../../utils/colors";
+import { Color } from "./color";
+describe("TextColor Component", function () {
+    it("renders with default color (black)", function () {
+        render(_jsx(Color, {}));
+        var textElement = screen.getByText("black");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black });
+    });
+    it("renders with a specified color", function () {
+        render(_jsx(Color, { color: "primary-500" }));
+        var textElement = screen.getByText("primary-500");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors["primary-500"] });
+    });
+    it("handles invalid color gracefully", function () {
+        render(_jsx(Color, { color: "invalid-color" }));
+        var textElement = screen.getByText("invalid-color");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black }); // It should default to black
+    });
+});

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

@@ -0,0 +1,5 @@
+declare const EditorTooltip: ({ title, className, }: {
+    title: string;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default EditorTooltip;

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

@@ -0,0 +1,9 @@
+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";
+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 }) })] }) }));
+};
+export default EditorTooltip;

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

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

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

@@ -0,0 +1,24 @@
+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 EditorTooltip from "./EditorTooltip";
+import { Dummy_Para } from "../../utils/constants";
+export default {
+    title: "Components/EditorTooltip",
+    component: EditorTooltip,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(EditorTooltip, __assign({}, args))); };
+export var _EditorTooltip = Template.bind({});
+_EditorTooltip.args = {
+    title: Dummy_Para,
+};

package/dist/{components → src/components}/Icons/IconList.test.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-var IconView_1 = require("./IconView");
-var iconList_1 = require("../../utils/iconList");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { IconView } from "./IconView";
+import { iconList } from "../../utils/iconList";
 // Mocking iconList for the tests
 jest.mock("../../utils/iconList", function () { return ({
     iconList: [
@@ -14,43 +12,43 @@ jest.mock("../../utils/iconList", function () { return ({
 describe("IconView Component", function () {
     // Test: Check if the correct number of icons are rendered
     it("should render the correct number of icons", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        var iconContainers = react_1.screen.getAllByTestId("single-icon");
-        expect(iconContainers).toHaveLength(iconList_1.iconList.length); // Should match the length of iconList
+        render(_jsx(IconView, {}));
+        var iconContainers = screen.getAllByTestId("single-icon");
+        expect(iconContainers).toHaveLength(iconList.length); // Should match the length of iconList
     });
     // Test: Ensure each icon has a path with correct `d` attribute
     it("should render each icon with the correct path", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
+        render(_jsx(IconView, {}));
         // Ensure the correct number of icon containers are rendered
-        var iconContainers = react_1.screen.getAllByTestId("single-icon");
+        var iconContainers = screen.getAllByTestId("single-icon");
         iconContainers.forEach(function (_, index) {
             // const svgElement = screen.getByTestId(`single-icon-svg-${index}`);
-            var pathElement = react_1.screen.getByTestId("icon-path-".concat(index));
+            var pathElement = screen.getByTestId("icon-path-".concat(index));
             // Find the corresponding icon object
-            var icon = iconList_1.iconList[index];
+            var icon = iconList[index];
             // Check that the path matches the icon's path
             expect(pathElement).toHaveAttribute("d", icon.path);
         });
     });
     // Test: Ensure each icon has the correct label
     it("should render each icon with the correct label", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        iconList_1.iconList.forEach(function (icon, index) {
-            var labelElement = react_1.screen.getByTestId("icon-label-".concat(index));
+        render(_jsx(IconView, {}));
+        iconList.forEach(function (icon, index) {
+            var labelElement = screen.getByTestId("icon-label-".concat(index));
             expect(labelElement).toHaveTextContent(icon.label); // Check label text content
         });
     });
     // Test: Ensure the grid structure is correct
     it("should render icons inside a grid structure", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        var gridContainer = react_1.screen.getByTestId("icons-list");
+        render(_jsx(IconView, {}));
+        var gridContainer = screen.getByTestId("icons-list");
         expect(gridContainer).toBeInTheDocument();
         expect(gridContainer).toHaveClass("grid");
     });
     // Test: Check hover behavior for icons (optional)
     it("should change background color on hover", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        var iconContainers = react_1.screen.getAllByTestId("single-icon");
+        render(_jsx(IconView, {}));
+        var iconContainers = screen.getAllByTestId("single-icon");
         var icon = iconContainers[0];
         // Simulate hover effect by adding the class for hover
         icon.classList.add("hover:bg-gray-200");

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { colors } from "../../utils/colors";
+import { iconList } from "../../utils/iconList";
+export var IconView = function () {
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6", "data-testid": "icons-list", children: iconList.map(function (icon, index) {
+                return (_jsxs("div", { className: "flex flex-col items-center justify-center bg-neutral-100 rounded-lg p-4 shadow-md hover:bg-neutral-200", "data-testid": "single-icon", children: [_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 32 32", fill: "none", className: "mb-2", role: "img", children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "icon-path-".concat(index), d: icon === null || icon === void 0 ? void 0 : icon.path, fill: colors["neutral-1000"] }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }), _jsx("p", { "data-testid": "icon-label-".concat(index), className: "text-xs font-normal ".concat(colors["neutral-600"], " text-center"), children: icon === null || icon === void 0 ? void 0 : icon.label })] }, index));
+            }) }) }));
+};

package/dist/{components → src/components}/Icons/IconView.stories.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,14 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._IconView = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var IconView_1 = require("./IconView");
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconView } from "./IconView";
+export default {
     title: "Components/Icon",
-    component: IconView_1.IconView,
+    component: IconView,
     tags: ["!autodocs"],
 };
-var Template = function (args) { return (0, jsx_runtime_1.jsx)(IconView_1.IconView, __assign({}, args)); };
-exports._IconView = Template.bind({});
+var Template = function (args) { return _jsx(IconView, __assign({}, args)); };
+export var _IconView = Template.bind({});

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

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

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

@@ -0,0 +1,32 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconList } from "../../utils/iconList";
+import { 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 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" }) }) })] })) }));
+};
+export default LUIcon;

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

@@ -0,0 +1,44 @@
+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 { iconList } from "../../utils/iconList";
+import LUIcon from "./LUIcon";
+import { iconSize } from ".";
+export default {
+    title: "Components/Icon",
+    component: LUIcon,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(LUIcon, __assign({ size: "xxs", className: "text-primary-500" }, args))); };
+export var Icon = Template.bind({});
+Icon.args = {
+    size: "xxs",
+    icon: iconList[0].key,
+};
+Icon.argTypes = {
+    size: {
+        control: {
+            type: "select",
+            labels: Object.keys(iconSize),
+        },
+        options: Object.keys(iconSize),
+        defaultValue: "xxs",
+    },
+    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,
+    },
+};