linkedunion-design-kit 1.9.1 → 1.9.2

package/dist/src/components/Icons/LUIcon.test.jsx

@@ -1,243 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import LUIcon from "./LUIcon";
-import { iconList } from "../../utils/iconList";
-import { iconSize, iconBackground, IconShape, iconWithBgColor, iconColor, getAppliedColor, } from ".";
-describe("LUIcon Component", function () {
-    var validIcon = "chart-simple";
-    describe("Basic Rendering", function () {
-        it("renders correctly when a valid icon is provided", function () {
-            var props = {
-                size: "xs",
-                icon: validIcon,
-            };
-            render(<LUIcon {...props}/>);
-            // Select the element
-            var singleIconElement = screen.getByTestId("lu-icon");
-            var computedClassName = iconSize[props.size];
-            expect(singleIconElement).toHaveClass(computedClassName);
-            // Assert that the fill class is applied correctly on the <path>
-            var pathElement = screen.getByTestId("lu-path");
-            expect(pathElement).toBeInTheDocument();
-            var selectedIcon = iconList[props.icon];
-            expect(pathElement).toHaveAttribute("d", selectedIcon || "");
-        });
-        it("renders correctly when an invalid icon is provided", function () {
-            var props = {
-                size: "md",
-                icon: "non-existent-icon", // Invalid icon
-            };
-            render(<LUIcon {...props}/>);
-            var svgElement = screen.getByTestId("lu-icon");
-            expect(svgElement).toBeInTheDocument();
-            var pathElement = screen.getByTestId("lu-path");
-            expect(pathElement).toBeInTheDocument();
-            // Since the icon does not exist, path should be an empty string
-            expect(pathElement).toHaveAttribute("d", "");
-        });
-        it("renders correctly when selectedIcon is undefined", function () {
-            var props = {
-                size: "md",
-                icon: "", // Empty string as icon key
-            };
-            render(<LUIcon {...props}/>);
-            var pathElement = screen.getByTestId("lu-path");
-            expect(pathElement).toBeInTheDocument();
-            expect(pathElement).toHaveAttribute("d", ""); // Expect empty path when selectedIcon is undefined
-        });
-        it("renders with default props when only icon is provided", function () {
-            render(<LUIcon icon={validIcon}/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toBeInTheDocument();
-            expect(iconElement).toHaveClass(iconSize.md); // default size
-        });
-        it("has correct SVG attributes", function () {
-            render(<LUIcon icon={validIcon}/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toHaveAttribute("role", "img");
-            expect(iconElement).toHaveAttribute("viewBox", "0 0 32 32");
-            expect(iconElement).toHaveAttribute("fill", "currentColor");
-        });
-    });
-    describe("Size Variations", function () {
-        var sizes = Object.keys(iconSize);
-        sizes.forEach(function (size) {
-            it("renders correctly with size ".concat(size), function () {
-                render(<LUIcon icon={validIcon} size={size}/>);
-                var iconElement = screen.getByTestId("lu-icon");
-                expect(iconElement).toHaveClass(iconSize[size]);
-            });
-        });
-    });
-    describe("Variant: Default", function () {
-        it("renders default variant correctly", function () {
-            render(<LUIcon icon={validIcon} variant="default"/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toBeInTheDocument();
-            // Should not have wrapper div in default variant
-            expect(screen.queryByTestId("lu-icon-wrapper")).not.toBeInTheDocument();
-        });
-        it("applies custom className to SVG in default variant", function () {
-            var customClass = "custom-test-class";
-            render(<LUIcon icon={validIcon} variant="default" className={customClass}/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toHaveClass(customClass);
-        });
-        it("applies color classes correctly in default variant", function () {
-            var colors = Object.keys(iconColor);
-            colors.forEach(function (color) {
-                var rerender = render(<LUIcon icon={validIcon} variant="default" color={color}/>).rerender;
-                var iconElement = screen.getByTestId("lu-icon");
-                expect(iconElement).toHaveClass(iconColor[color]);
-                rerender(<></>); // Clean up for next iteration
-            });
-        });
-        it("does not apply color when color prop is undefined in default variant", function () {
-            render(<LUIcon icon={validIcon} variant="default"/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            var classList = Array.from(iconElement.classList);
-            // Should not have any color classes
-            Object.values(iconColor).forEach(function (colorClass) {
-                expect(classList).not.toContain(colorClass);
-            });
-        });
-    });
-    describe("Variant: Padded", function () {
-        it("renders padded variant correctly", function () {
-            render(<LUIcon icon={validIcon} variant="padded"/>);
-            // Find wrapper by test-id
-            var wrapperElement = screen.getByTestId("lu-icon-wrapper");
-            expect(wrapperElement).toBeInTheDocument();
-            expect(wrapperElement).toHaveClass("inline-flex", "items-center", "justify-center");
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toBeInTheDocument();
-        });
-        it("applies padding classes correctly in padded variant", function () {
-            var sizes = Object.keys(iconBackground);
-            sizes.forEach(function (size) {
-                var rerender = render(<LUIcon icon={validIcon} variant="padded" size={size}/>).rerender;
-                var wrapperElement = screen.getByTestId("lu-icon-wrapper");
-                expect(wrapperElement).toHaveClass(iconBackground[size]);
-                rerender(<></>); // Clean up for next iteration
-            });
-        });
-        it("applies custom className to wrapper in padded variant", function () {
-            var customClass = "custom-wrapper-class";
-            render(<LUIcon icon={validIcon} variant="padded" className={customClass}/>);
-            var wrapperElement = screen.getByTestId("lu-icon-wrapper");
-            expect(wrapperElement).toHaveClass(customClass);
-            // SVG should not have the custom class in padded variant
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).not.toHaveClass(customClass);
-        });
-        it("applies background color classes correctly in padded variant", function () {
-            var colors = Object.keys(iconWithBgColor);
-            colors.forEach(function (color) {
-                var rerender = render(<LUIcon icon={validIcon} variant="padded" color={color}/>).rerender;
-                var wrapperElement = screen.getByTestId("lu-icon-wrapper");
-                expect(wrapperElement).toHaveClass(iconWithBgColor[color]);
-                rerender(<></>); // Clean up for next iteration
-            });
-        });
-    });
-    describe("Shape Variations", function () {
-        it("renders square shape correctly in padded variant", function () {
-            var sizes = Object.keys(IconShape.square);
-            sizes.forEach(function (size) {
-                var rerender = render(<LUIcon icon={validIcon} variant="padded" shape="square" size={size}/>).rerender;
-                var wrapperElement = screen.getByTestId("lu-icon-wrapper");
-                expect(wrapperElement).toHaveClass(IconShape.square[size]);
-                rerender(<></>); // Clean up for next iteration
-            });
-        });
-        it("renders rounded shape correctly in padded variant", function () {
-            render(<LUIcon icon={validIcon} variant="padded" shape="rounded"/>);
-            var wrapperElement = screen.getByTestId("lu-icon-wrapper");
-            expect(wrapperElement).toHaveClass(IconShape.rounded);
-        });
-        it("defaults to square shape when shape prop is not provided", function () {
-            render(<LUIcon icon={validIcon} variant="padded" size="md"/>);
-            var wrapperElement = screen.getByTestId("lu-icon-wrapper");
-            expect(wrapperElement).toHaveClass(IconShape.square.md);
-        });
-        it("shape prop has no effect in default variant", function () {
-            render(<LUIcon icon={validIcon} variant="default" shape="rounded"/>);
-            // Should not have wrapper div in default variant
-            expect(screen.queryByTestId("lu-icon-wrapper")).not.toBeInTheDocument();
-        });
-    });
-    describe("HTML Attributes Forwarding", function () {
-        it("forwards additional props to SVG element in default variant", function () {
-            var testId = "custom-test-id";
-            var ariaLabel = "Custom icon";
-            render(<LUIcon icon={validIcon} variant="default" data-testid={testId} aria-label={ariaLabel}/>);
-            var iconElement = screen.getByTestId(testId); // Use custom test id
-            expect(iconElement).toHaveAttribute("data-testid", testId);
-            expect(iconElement).toHaveAttribute("aria-label", ariaLabel);
-        });
-        it("forwards style prop correctly", function () {
-            var customStyle = { opacity: 0.5 };
-            render(<LUIcon icon={validIcon} style={customStyle}/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toHaveStyle("opacity: 0.5");
-        });
-    });
-    describe("Edge Cases", function () {
-        it("handles empty icon gracefully", function () {
-            // Empty string as icon key to test edge case
-            render(<LUIcon icon={""}/>);
-            var pathElement = screen.getByTestId("lu-path");
-            expect(pathElement).toHaveAttribute("d", "");
-        });
-        it("handles undefined color gracefully", function () {
-            render(<LUIcon icon={validIcon} color={undefined}/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toBeInTheDocument();
-        });
-        it("combines multiple class names correctly", function () {
-            var customClass = "custom-class another-class";
-            render(<LUIcon icon={validIcon} size="lg" color="blue" className={customClass}/>);
-            var iconElement = screen.getByTestId("lu-icon");
-            expect(iconElement).toHaveClass(iconSize.lg);
-            expect(iconElement).toHaveClass(iconColor.blue);
-            expect(iconElement).toHaveClass("custom-class");
-            expect(iconElement).toHaveClass("another-class");
-        });
-    });
-    describe("Color Helper Function", function () {
-        it("getAppliedColor returns correct class for padded variant", function () {
-            var result = getAppliedColor("padded", "blue");
-            expect(result).toBe(iconWithBgColor.blue);
-        });
-        it("getAppliedColor returns correct class for default variant", function () {
-            var result = getAppliedColor("default", "blue");
-            expect(result).toBe(iconColor.blue);
-        });
-        it("getAppliedColor returns empty string when color is undefined", function () {
-            var result = getAppliedColor("default", undefined);
-            expect(result).toBe("");
-        });
-    });
-    describe("Integration Tests", function () {
-        it("renders complex configuration correctly", function () {
-            render(<LUIcon icon="info" size="2xl" variant="padded" shape="rounded" color="light-blue" className="test-complex" data-testid="complex-icon"/>);
-            var wrapperElement = screen.getByTestId("complex-icon-wrapper");
-            expect(wrapperElement).toHaveClass(iconBackground["2xl"]);
-            expect(wrapperElement).toHaveClass(IconShape.rounded);
-            expect(wrapperElement).toHaveClass(iconWithBgColor["light-blue"]);
-            expect(wrapperElement).toHaveClass("test-complex");
-            var iconElement = screen.getByTestId("complex-icon"); // Use custom test id
-            expect(iconElement).toHaveClass(iconSize["2xl"]);
-            expect(iconElement).toHaveAttribute("data-testid", "complex-icon");
-        });
-        it("handles all icon variants from iconList", function () {
-            var iconKeys = Object.keys(iconList);
-            // Test first few icons to ensure they all render
-            iconKeys.slice(0, 5).forEach(function (iconKey) {
-                var rerender = render(<LUIcon icon={iconKey}/>).rerender;
-                var pathElement = screen.getByTestId("lu-path");
-                expect(pathElement).toHaveAttribute("d", iconList[iconKey]);
-                rerender(<></>);
-            });
-        });
-    });
-});

package/dist/src/components/Icons/SingleIcon.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/components/Icons/SingleIcon.test.js

@@ -1,68 +0,0 @@
-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 { render, screen } from "@testing-library/react";
-import LUIcon from "./LUIcon";
-import { iconList } from "../../utils/iconList";
-import { iconSize } from ".";
-describe("LUIcon Component", function () {
-    it("renders correctly when a valid icon is provided", function () {
-        var props = {
-            size: "xs",
-            icon: iconList[0].key,
-        };
-        render(_jsx(LUIcon, __assign({}, props)));
-        // Select the element
-        var singleIconElement = screen.getByTestId("lu-icon");
-        var computedClassName = iconSize[props.size];
-        expect(singleIconElement).toHaveClass(computedClassName);
-        // Assert that the fill class is applied correctly on the <path>
-        var pathElement = screen.getByTestId("lu-path");
-        expect(pathElement).toBeInTheDocument();
-        var selectedIcon = iconList.find(function (icon) { return icon.key === props.icon; });
-        expect(pathElement).toHaveAttribute("d", (selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) || "");
-    });
-    it("renders correctly when an invalid icon is provided", function () {
-        var props = {
-            size: "md",
-            icon: "non-existent-icon", // Invalid icon
-        };
-        render(_jsx(LUIcon, __assign({}, props)));
-        var svgElement = screen.getByTestId("lu-icon");
-        expect(svgElement).toBeInTheDocument();
-        var pathElement = screen.getByTestId("lu-path");
-        expect(pathElement).toBeInTheDocument();
-        // Since the icon does not exist, path should be an empty string
-        expect(pathElement).toHaveAttribute("d", "");
-    });
-    it("applies additional className correctly", function () {
-        var props = {
-            size: "lg",
-            icon: iconList[0].key,
-            className: "custom-class",
-        };
-        render(_jsx(LUIcon, __assign({}, props)));
-        var singleIconElement = screen.getByTestId("lu-icon");
-        expect(singleIconElement).toHaveClass(iconSize[props.size] || "");
-        expect(singleIconElement).toHaveClass("custom-class");
-    });
-    it("renders correctly when selectedIcon is undefined", function () {
-        var props = {
-            size: "md",
-            icon: "", // Pass an empty string to ensure find() returns undefined
-        };
-        render(_jsx(LUIcon, __assign({}, props)));
-        var pathElement = screen.getByTestId("lu-path");
-        expect(pathElement).toBeInTheDocument();
-        expect(pathElement).toHaveAttribute("d", ""); // Expect empty path when selectedIcon is undefined
-    });
-});

package/dist/src/components/Icons/stories/IconDropdown.jsx

@@ -1,67 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import LUIcon from "../LUIcon";
-import { Input } from "../../../components/Input";
-export var IconDropdown = function (_a) {
-    var value = _a.value, onChange = _a.onChange, options = _a.options;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = useState(""), searchTerm = _c[0], setSearchTerm = _c[1];
-    var dropdownRef = useRef(null);
-    var filteredOptions = options.filter(function (option) {
-        return option.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            option
-                .replace(/-/g, " ")
-                .toLowerCase()
-                .includes(searchTerm.toLowerCase());
-    });
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
-    }, []);
-    var handleSelect = function (option) {
-        onChange(option);
-        setIsOpen(false);
-        setSearchTerm("");
-    };
-    var formatLabel = function (iconKey) {
-        return iconKey.replace(/-/g, " ").replace(/\b\w/g, function (l) { return l.toUpperCase(); });
-    };
-    return (<div ref={dropdownRef} className="relative w-full">
-      {/* Dropdown trigger */}
-      <div onClick={function () { return setIsOpen(!isOpen); }} className="px-3 py-2 border border-gray-300 rounded bg-white cursor-pointer flex items-center justify-between min-h-9">
-        <div className="flex items-center gap-2">
-          {value && <LUIcon icon={value} size="xs"/>}
-          <span>{value ? formatLabel(value) : "Select an icon..."}</span>
-        </div>
-        <span className={"transition-transform duration-200 ".concat(isOpen ? "rotate-180" : "rotate-0")}>
-          ▼
-        </span>
-      </div>
-
-      {/* Dropdown menu */}
-      {isOpen && (<div className="absolute top-full left-0 right-0 bg-white border border-gray-300 rounded shadow-lg z-[1000] max-h-[300px] overflow-y-auto">
-          {/* Search input */}
-          <div className="p-2">
-            <Input type="text" placeholder="Search icons..." value={searchTerm} onChange={function (e) { return setSearchTerm(e.target.value); }} className="w-full px-2 py-1.5 border border-gray-300 rounded-sm text-sm" onClick={function (e) { return e.stopPropagation(); }}/>
-          </div>
-
-          {/* Options list */}
-          <div className="max-h-[200px] overflow-y-auto">
-            {filteredOptions.length === 0 ? (<div className="p-3 text-gray-600 italic">No icons found</div>) : (filteredOptions.map(function (option) { return (<div key={option} onClick={function () { return handleSelect(option); }} className={"px-3 py-2 cursor-pointer flex items-center gap-2 transition-colors duration-100 ".concat(value === option
-                    ? "bg-blue-50 border-l-4 border-l-blue-600"
-                    : "border-l-4 border-l-transparent hover:bg-gray-50")}>
-                  <LUIcon icon={option} size="xs"/>
-                  <span className="text-sm">{formatLabel(option)}</span>
-                  <span className="text-xs text-gray-600 ml-auto">
-                    {option}
-                  </span>
-                </div>); }))}
-          </div>
-        </div>)}
-    </div>);
-};

package/dist/src/components/Icons/stories/IconGallery.jsx

@@ -1,77 +0,0 @@
-import React, { useState } from "react";
-import { iconList } from "../../../utils/iconList";
-import LUIcon from "../LUIcon";
-import { Heading } from "../../../components/Typography/Heading/heading";
-import { Body } from "../../../components/Typography/Body/body";
-import { Input } from "../../../components/Input/input";
-export var IconGallery = function () {
-    var _a = useState(""), searchTerm = _a[0], setSearchTerm = _a[1];
-    var _b = useState(""), selectedIcon = _b[0], setSelectedIcon = _b[1];
-    var filteredIcons = Object.keys(iconList)
-        .sort()
-        .filter(function (iconKey) {
-        return iconKey.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            iconKey
-                .replace(/-/g, " ")
-                .toLowerCase()
-                .includes(searchTerm.toLowerCase());
-    });
-    var IconItem = function (_a) {
-        var iconKey = _a.iconKey;
-        return (<div key={iconKey} onClick={function () { return setSelectedIcon(iconKey); }} className={"flex items-center gap-2 p-2 border rounded cursor-pointer transition-all duration-200 ".concat(selectedIcon === iconKey
-                ? "border-blue-600 bg-blue-50 border-2"
-                : "border-gray-200 bg-white hover:bg-gray-50 hover:border-gray-300")}>
-      <LUIcon icon={iconKey} size="sm"/>
-      <span className="text-xs font-mono text-gray-700 break-all">
-        {iconKey}
-      </span>
-    </div>);
-    };
-    var IconPreview = function (_a) {
-        var iconKey = _a.iconKey;
-        return (<div className="mt-5 p-4 bg-gray-50 rounded-lg border border-gray-200">
-      <Heading variant="h4" className="mb-4">
-        Preview Selected Icon: {iconKey}
-      </Heading>
-      <div className="flex gap-4 items-center flex-wrap">
-        <div className="flex items-center gap-2">
-          <Body variant="body-sm-600">Default:</Body>
-          <LUIcon icon={iconKey} size="md"/>
-        </div>
-        <div className="flex items-center gap-2">
-          <Body variant="body-sm-600">Padded:</Body>
-          <LUIcon icon={iconKey} size="md" variant="padded" color="blue"/>
-        </div>
-        <div className="flex items-center gap-2">
-          <Body variant="body-sm-600">Large:</Body>
-          <LUIcon icon={iconKey} size="xl"/>
-        </div>
-      </div>
-      <div className="mt-3 font-mono text-sm">
-        <Body variant="body-sm-600">Usage:</Body>
-        <br />
-        <code className="bg-gray-100 p-1 rounded">{"<LUIcon icon=\"".concat(iconKey, "\" size=\"md\" />")}</code>
-      </div>
-    </div>);
-    };
-    return (<div className="p-5">
-      <Heading variant="h3" className="mb-5">
-        Icon Gallery - All Available Icons ({Object.keys(iconList).length}{" "}
-        total)
-      </Heading>
-
-      <div className="mb-5">
-        <Input type="text" placeholder="Search icons... (e.g., 'circle', 'info', 'qr')" value={searchTerm} onChange={function (e) { return setSearchTerm(e.target.value); }} className="w-full max-w-md" startIcon="magnifying-glass"/>
-        <Body variant="body-sm" className="mt-2 text-gray-600">
-          {filteredIcons.length} icons found
-          {selectedIcon && (<span className="ml-4 font-semibold">Selected: {selectedIcon}</span>)}
-        </Body>
-      </div>
-
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3 max-h-[500px] overflow-y-auto border border-gray-200 p-4 rounded-lg">
-        {filteredIcons.map(function (iconKey) { return (<IconItem key={iconKey} iconKey={iconKey}/>); })}
-      </div>
-
-      {selectedIcon && <IconPreview iconKey={selectedIcon}/>}
-    </div>);
-};

package/dist/src/components/Icons/stories/InteractiveIconSelector.jsx

@@ -1,86 +0,0 @@
-import React, { useState } from "react";
-import { iconList } from "../../../utils/iconList";
-import LUIcon from "../LUIcon";
-import { iconSize, iconWithBgColor } from "../index";
-import { IconDropdown } from "./IconDropdown";
-import { Heading } from "../../../components/Typography/Heading/heading";
-import { Body } from "../../../components/Typography/Body/body";
-import { Label } from "../../../components/Label/Label";
-export var InteractiveIconSelector = function () {
-    var _a = useState("info"), selectedIcon = _a[0], setSelectedIcon = _a[1];
-    var _b = useState("md"), selectedSize = _b[0], setSelectedSize = _b[1];
-    var _c = useState("default"), selectedVariant = _c[0], setSelectedVariant = _c[1];
-    var _d = useState("blue"), selectedColor = _d[0], setSelectedColor = _d[1];
-    var generateUsageCode = function () {
-        var code = "<LUIcon icon=\"".concat(selectedIcon, "\" size=\"").concat(selectedSize, "\"");
-        if (selectedVariant === "padded") {
-            code += " variant=\"padded\" color=\"".concat(selectedColor, "\"");
-        }
-        code += " />";
-        return code;
-    };
-    return (<div className="p-5">
-      <Heading variant="h3" className="mb-3">
-        Interactive Icon Selector
-      </Heading>
-      <Body variant="body-md" className="mb-6 text-gray-600">
-        This demonstrates a custom searchable dropdown that shows icons
-        alongside their names.
-      </Body>
-
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 mb-6">
-        <div>
-          <Label variant="label-md" className="block mb-2 ">
-            Select Icon:
-          </Label>
-          <IconDropdown value={selectedIcon} onChange={setSelectedIcon} options={Object.keys(iconList).sort()}/>
-        </div>
-
-        <div>
-          <Label variant="label-md" className="block mb-2 ">
-            Size:
-          </Label>
-          <select value={selectedSize} onChange={function (e) { return setSelectedSize(e.target.value); }} className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-            {Object.keys(iconSize).map(function (size) { return (<option key={size} value={size}>
-                {size}
-              </option>); })}
-          </select>
-        </div>
-
-        <div>
-          <Label variant="label-md" className="block mb-2 ">
-            Variant:
-          </Label>
-          <select value={selectedVariant} onChange={function (e) {
-            return setSelectedVariant(e.target.value);
-        }} className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-            <option value="default">Default</option>
-            <option value="padded">Padded</option>
-          </select>
-        </div>
-
-        {selectedVariant === "padded" && (<div>
-            <Label variant="label-md" className="block mb-2">
-              Color:
-            </Label>
-            <select value={selectedColor} onChange={function (e) { return setSelectedColor(e.target.value); }} className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
-              {Object.keys(iconWithBgColor).map(function (color) { return (<option key={color} value={color}>
-                  {color}
-                </option>); })}
-            </select>
-          </div>)}
-      </div>
-
-      <div className="p-6 border-2 border-dashed border-gray-300 rounded-lg text-center bg-gray-50">
-        <Heading variant="h4" className="mb-4">
-          Preview:
-        </Heading>
-        <div className="my-4">
-          <LUIcon icon={selectedIcon} size={selectedSize} variant={selectedVariant} color={selectedVariant === "padded" ? selectedColor : undefined}/>
-        </div>
-        <div className="font-mono text-sm bg-gray-100 p-2 rounded">
-          {generateUsageCode()}
-        </div>
-      </div>
-    </div>);
-};

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

@@ -1,96 +0,0 @@
-import { iconList } from "../../../utils/iconList";
-import { InteractiveIconSelector as InteractiveIconSelectorComponent, IconGallery as IconGalleryComponent, } from ".";
-import LUIcon from "../LUIcon";
-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",
-                labels: Object.fromEntries(Object.keys(iconList)
-                    .sort()
-                    .map(function (key) { return [key]; })),
-            },
-            options: Object.keys(iconList).sort(), // Sort alphabetically for easier finding
-            description: "Icon to display (searchable dropdown with formatted labels)",
-        },
-        variant: {
-            control: { type: "select" },
-            options: ["default", "padded"],
-            description: "Type of the icon",
-        },
-        shape: {
-            control: {
-                type: "radio",
-                options: Object.keys(IconShape),
-            },
-            options: Object.keys(IconShape),
-            description: "Shape of the padded icon",
-            if: { arg: "variant", eq: "padded" },
-        },
-    },
-};
-var Template = function (args) { return <LUIcon {...args}/>; };
-// Default Icon Story
-export var _DefaultIcon = Template.bind({});
-_DefaultIcon.args = {
-    size: "md",
-    icon: Object.keys(iconList)[0],
-    color: "blue",
-    variant: "default",
-};
-_DefaultIcon.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(iconColor),
-        description: "Text color (no background)",
-    },
-};
-// Padded Icon Story
-export var _PaddedIcon = Template.bind({});
-_PaddedIcon.args = {
-    size: "md",
-    icon: Object.keys(iconList)[0],
-    variant: "padded",
-    color: "blue",
-    shape: "square",
-};
-_PaddedIcon.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(iconWithBgColor),
-        description: "Background color for padded variant",
-    },
-};
-// Export stories using separate components for better maintainability
-export var InteractiveIconSelector = function () { return (<InteractiveIconSelectorComponent />); };
-export var IconGallery = function () { return <IconGalleryComponent />; };
-// Set parameters for the stories
-InteractiveIconSelector.parameters = {
-    docs: {
-        description: {
-            story: "Use this interactive tool to select icons with a custom dropdown that shows both the icon and its name. Perfect for developers to quickly find and preview icons.",
-        },
-        source: {
-            code: null, // This hides the source code
-        },
-    },
-};
-IconGallery.parameters = {
-    docs: {
-        description: {
-            story: "Browse and search through all available icons. Click on any icon to see a preview and get the usage code.",
-        },
-        source: {
-            code: null, // This hides the source code
-        },
-    },
-};