linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Dropdown/{Select.stories.js → Select.stories.jsx}

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./select";
 import { selectColor, selectShape, selectSize, selectType, } from ".";
 import LUIcon from "../Icons/LUIcon";
@@ -89,7 +88,14 @@ var meta = {
     },
 };
 export default meta;
-export var Default = function (args) { return (_jsxs(Select, { disabled: args.disabled, onValueChange: args.onValueChange, children: [_jsx(SelectTrigger, { size: args.size, shape: args.shape, variant: args.variant, color: args.color, disabled: args.disabled, children: _jsx(SelectValue, { placeholder: args.placeholder }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "one", children: "One" }) })] })); };
+export var Default = function (args) { return (<Select disabled={args.disabled} onValueChange={args.onValueChange}>
+    <SelectTrigger size={args.size} shape={args.shape} variant={args.variant} color={args.color} disabled={args.disabled}>
+      <SelectValue placeholder={args.placeholder}/>
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="one">One</SelectItem>
+    </SelectContent>
+  </Select>); };
 export var Group = function () {
     var groupedOptions = [
         {
@@ -108,9 +114,25 @@ export var Group = function () {
             ],
         },
     ];
-    return (_jsxs(Select, { onValueChange: function (value) {
+    return (<Select onValueChange={function (value) {
             console.log("Select value changed:", value);
-        }, defaultValue: "apple", children: [_jsx(SelectTrigger, { color: "default", size: "md", shape: "rectangular", variant: "fill", disabled: false, children: _jsx(SelectValue, { placeholder: "Select Option" }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: groupedOptions.map(function (group, idx) { return (_jsxs(React.Fragment, { children: [_jsx(SelectLabel, { children: group.label }), group.items.map(function (item) { return (_jsxs(SelectItem, { value: item.value, children: [item.icon && (_jsx(LUIcon, { icon: item.icon, size: "sm" })), item.label] }, item.value)); }), idx < groupedOptions.length - 1 && _jsx(SelectSeparator, {})] }, group.label)); }) }) })] }));
+        }} defaultValue={"apple"}>
+      <SelectTrigger color="default" size="md" shape="rectangular" variant="fill" disabled={false}>
+        <SelectValue placeholder="Select Option"/>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {groupedOptions.map(function (group, idx) { return (<React.Fragment key={group.label}>
+              <SelectLabel>{group.label}</SelectLabel>
+              {group.items.map(function (item) { return (<SelectItem value={item.value} key={item.value}>
+                  {item.icon && (<LUIcon icon={item.icon} size="sm"/>)}
+                  {item.label}
+                </SelectItem>); })}
+              {idx < groupedOptions.length - 1 && <SelectSeparator />}
+            </React.Fragment>); })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>);
 };
 export var KeyValue = function () {
     var backendOptions = [
@@ -120,7 +142,17 @@ export var KeyValue = function () {
         { key: "uk", label: "United Kingdom", icon: "check" },
         { key: "fr", label: "France", icon: "star" },
     ];
-    return (_jsxs(Select, { disabled: false, children: [_jsx(SelectTrigger, { size: "md", shape: "rectangular", variant: "fill", color: "default", disabled: false, children: _jsx(SelectValue, { placeholder: "Select a country" }) }), _jsx(SelectContent, { children: backendOptions.map(function (option) { return (_jsxs(SelectItem, { value: option.key, children: [option.icon && (_jsx(LUIcon, { icon: option.icon, size: "sm", className: "mr-2" })), option.label] }, option.key)); }) })] }));
+    return (<Select disabled={false}>
+      <SelectTrigger size="md" shape="rectangular" variant="fill" color="default" disabled={false}>
+        <SelectValue placeholder={"Select a country"}/>
+      </SelectTrigger>
+      <SelectContent>
+        {backendOptions.map(function (option) { return (<SelectItem key={option.key} value={option.key}>
+            {option.icon && (<LUIcon icon={option.icon} size="sm" className="mr-2"/>)}
+            {option.label}
+          </SelectItem>); })}
+      </SelectContent>
+    </Select>);
 };
 KeyValue.story = {
     parameters: {
@@ -131,8 +163,39 @@ KeyValue.story = {
         },
     },
 };
-export var Disabled = function (args) { return (_jsxs(Select, { disabled: args.disabled, onValueChange: args.onValueChange, children: [_jsx(SelectTrigger, { disabled: args.disabled || true, shape: args.shape, variant: args.variant, color: args.color, children: _jsx(SelectValue, { placeholder: args.placeholder || "Disabled select" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "a", children: "A" }), _jsx(SelectItem, { value: "b", children: "B" })] })] })); };
+export var Disabled = function (args) { return (<Select disabled={args.disabled} onValueChange={args.onValueChange}>
+    <SelectTrigger disabled={args.disabled || true} shape={args.shape} variant={args.variant} color={args.color}>
+      <SelectValue placeholder={args.placeholder || "Disabled select"}/>
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="a">A</SelectItem>
+      <SelectItem value="b">B</SelectItem>
+    </SelectContent>
+  </Select>); };
 // Story: Large Dropdown with many items
-export var LargeDropdown = function () { return (_jsxs(Select, { disabled: false, children: [_jsx(SelectTrigger, { size: "lg", disabled: false, children: _jsx(SelectValue, { placeholder: "Select a country" }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Options" }), Array.from({ length: 10 }, function (_, i) { return (_jsxs(SelectItem, { value: "option-".concat(i + 1), children: ["Option ", i + 1] }, i)); })] }) })] })); };
+export var LargeDropdown = function () { return (<Select disabled={false}>
+    <SelectTrigger size="lg" disabled={false}>
+      <SelectValue placeholder="Select a country"/>
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Options</SelectLabel>
+        {Array.from({ length: 10 }, function (_, i) { return (<SelectItem key={i} value={"option-".concat(i + 1)}>
+            Option {i + 1}
+          </SelectItem>); })}
+      </SelectGroup>
+    </SelectContent>
+  </Select>); };
 // Story: Select with a disabled item
-export var WithDisabledItem = function () { return (_jsxs(Select, { children: [_jsx(SelectTrigger, { size: "md", children: _jsx(SelectValue, { placeholder: "Select an option" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "enabled-1", children: "Enabled Option 1" }), _jsx(SelectItem, { value: "disabled-2", disabled: true, children: "Disabled Option" }), _jsx(SelectItem, { value: "enabled-3", children: "Enabled Option 2" })] })] })); };
+export var WithDisabledItem = function () { return (<Select>
+    <SelectTrigger size="md">
+      <SelectValue placeholder="Select an option"/>
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="enabled-1">Enabled Option 1</SelectItem>
+      <SelectItem value="disabled-2" disabled>
+        Disabled Option
+      </SelectItem>
+      <SelectItem value="enabled-3">Enabled Option 2</SelectItem>
+    </SelectContent>
+  </Select>); };

package/dist/src/components/Dropdown/select.d.ts

@@ -4,9 +4,9 @@ import { SelectSize, SelectShape, SelectType, SelectColor, ItemSize } from ".";
 type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
     defaultValue?: string;
 };
-declare function Select({ onValueChange, defaultValue, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
-declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
-declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function Select({ onValueChange, defaultValue, ...props }: SelectProps): React.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
 type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: SelectSize;
     shape?: SelectShape;
@@ -15,24 +15,24 @@ type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> &
 };
 declare function SelectTrigger({ className, size, shape, variant, color, children, disabled, ...props }: SelectTriggerProps & {
     disabled?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content> & {
     hidePortal?: boolean;
 };
-declare function SelectContent({ className, children, position, hidePortal, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, hidePortal, ...props }: SelectContentProps): React.JSX.Element;
 type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.Label> & {
     size?: ItemSize;
 };
-declare function SelectLabel({ className, size, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, size, ...props }: SelectLabelProps): React.JSX.Element;
 type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item> & {
     size?: ItemSize;
 };
-declare function SelectItem({ className, children, size, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
-declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, size, ...props }: SelectItemProps): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
 declare function SelectScrollUpButton({ className, size, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton> & {
     size?: SelectSize;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function SelectScrollDownButton({ className, size, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton> & {
     size?: SelectSize;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/src/components/Dropdown/select.jsx

@@ -0,0 +1,94 @@
+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 * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "../../lib/utils";
+import { selectSize, selectShape, selectType, selectColor, itemSize, } from ".";
+import LUIcon from "../Icons/LUIcon";
+import { Reset_BS } from "../../utils/constants";
+// Map select size to icon size
+var iconSizeMap = {
+    lg: "md",
+    md: "sm",
+    sm: "xs",
+};
+function Select(_a) {
+    var onValueChange = _a.onValueChange, defaultValue = _a.defaultValue, props = __rest(_a, ["onValueChange", "defaultValue"]);
+    return (<SelectPrimitive.Root data-slot="select" onValueChange={onValueChange} defaultValue={defaultValue} {...props}/>);
+}
+function SelectGroup(_a) {
+    var props = __rest(_a, []);
+    return <SelectPrimitive.Group data-slot="select-group" {...props}/>;
+}
+function SelectValue(_a) {
+    var props = __rest(_a, []);
+    return <SelectPrimitive.Value data-slot="select-value" {...props}/>;
+}
+function SelectTrigger(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.shape, shape = _c === void 0 ? "rectangular" : _c, _d = _a.variant, variant = _d === void 0 ? "fill" : _d, _e = _a.color, color = _e === void 0 ? "default" : _e, children = _a.children, disabled = _a.disabled, props = __rest(_a, ["className", "size", "shape", "variant", "color", "children", "disabled"]);
+    var iconSize = iconSizeMap[size] || "md";
+    var shapeClass = selectShape[shape];
+    var typeClass = selectType[variant];
+    // Use disabled color if disabled prop is true
+    var isDisabled = !!disabled;
+    var colorClass = isDisabled
+        ? selectColor[variant]["disabled"]
+        : selectColor[variant][color];
+    return (<SelectPrimitive.Trigger data-reset={Reset_BS} data-size={size} data-shape={shape} data-type={variant} data-color={isDisabled ? "disabled" : color} className={cn("data-[placeholder]:text-gray-400 w-full !px-4 !py-3 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center justify-between gap-2 !border border-gray-200 whitespace-nowrap !shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeClass, shapeClass, selectSize[size], colorClass, className)} disabled={isDisabled} {...props}>
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <LUIcon icon="angle-down" size={iconSize} color="light-gray"/>
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>);
+}
+function SelectContent(_a) {
+    var className = _a.className, children = _a.children, _b = _a.position, position = _b === void 0 ? "popper" : _b, _c = _a.hidePortal, hidePortal = _c === void 0 ? false : _c, props = __rest(_a, ["className", "children", "position", "hidePortal"]);
+    var content = (<SelectPrimitive.Content data-slot="select-content" className={cn("!bg-white text-gray-900 !py-2 !px-2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto !rounded-sm shadow-lg", position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className)} position={position} {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport className={cn("p-1", position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1")}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>);
+    return hidePortal ? (content) : (<SelectPrimitive.Portal>{content}</SelectPrimitive.Portal>);
+}
+function SelectLabel(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    return (<SelectPrimitive.Label data-slot="select-label" className={cn("text-muted-foreground !px-2 !py-1.5", itemSize[size], className)} {...props}/>);
+}
+function SelectItem(_a) {
+    var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "size"]);
+    return (<SelectPrimitive.Item data-reset="reset-bs-link" className={cn("text-gray-900 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 !rounded-sm py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[state=checked]:bg-gray-50 hover:bg-gray-50", itemSize[size], className)} {...props}>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>);
+}
+function SelectSeparator(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<SelectPrimitive.Separator data-slot="select-separator" className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)} {...props}/>);
+}
+function SelectScrollUpButton(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    var iconSize = iconSizeMap[size] || "md";
+    return (<SelectPrimitive.ScrollUpButton data-slot="select-scroll-up-button" className={cn("flex cursor-default items-center justify-center py-1", className)} {...props}>
+      <LUIcon icon="angle-up" size={iconSize} color="light-gray"/>
+    </SelectPrimitive.ScrollUpButton>);
+}
+function SelectScrollDownButton(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    var iconSize = iconSizeMap[size] || "md";
+    return (<SelectPrimitive.ScrollDownButton data-slot="select-scroll-down-button" className={cn("flex cursor-default items-center justify-center py-1", className)} {...props}>
+      <LUIcon icon="angle-down" size={iconSize} color="light-gray"/>
+    </SelectPrimitive.ScrollDownButton>);
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

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

package/dist/src/components/Icons/{LUIcon.js → LUIcon.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconList } from "../../utils/iconList";
 import { getAppliedColor, iconBackground, IconShape, iconSize } from ".";
 import { cn } from "../../lib/utils";
@@ -39,6 +27,15 @@ var LUIcon = function (_a) {
         }
         return cn(baseClasses, className);
     };
-    return (_jsxs("svg", __assign({ role: "img", "data-testid": "lu-icon", className: getClassNames(), 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 = iconList[icon]) !== null && _b !== void 0 ? _b : "" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32" }) }) })] })));
+    return (<svg role="img" data-testid={"lu-icon"} className={getClassNames()} viewBox="0 0 32 32" fill="currentColor" {...props}>
+      <g clipPath="url(#clip0_9168_14965)">
+        <path data-testid="lu-path" d={(_b = iconList[icon]) !== null && _b !== void 0 ? _b : ""}/>
+      </g>
+      <defs>
+        <clipPath id="clip0_9168_14965">
+          <rect width="32" height="32"/>
+        </clipPath>
+      </defs>
+    </svg>);
 };
 export default LUIcon;

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,86 @@
+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, " color=\"").concat(selectedColor, "\"");
+        if (selectedVariant === "padded") {
+            code += " variant=\"padded\" \"";
+        }
+        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>
+
+        <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={selectedColor}/>
+        </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.d.ts

@@ -3,10 +3,10 @@ import LUIcon from "../LUIcon";
 declare const _default: Meta<typeof LUIcon>;
 export default _default;
 export declare const Default: StoryObj;
-export declare const IconVariants: () => import("react/jsx-runtime").JSX.Element;
-export declare const DefaultIconSizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const PaddedIconSizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const PaddedIconSizesRounded: () => import("react/jsx-runtime").JSX.Element;
-export declare const IconColors: () => import("react/jsx-runtime").JSX.Element;
+export declare const IconVariants: () => import("react").JSX.Element;
+export declare const DefaultIconSizes: () => import("react").JSX.Element;
+export declare const PaddedIconSizes: () => import("react").JSX.Element;
+export declare const PaddedIconSizesRounded: () => import("react").JSX.Element;
+export declare const IconColors: () => import("react").JSX.Element;
 export declare const InteractiveIconSelector: StoryFn;
 export declare const IconGallery: StoryFn;

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { iconList } from "../../../utils/iconList";
 import { InteractiveIconSelector as InteractiveIconSelectorComponent, IconGallery as IconGalleryComponent, } from ".";
 import LUIcon from "../LUIcon";
@@ -62,14 +61,30 @@ export var Default = {
         variant: "default",
     },
 };
-export var IconVariants = function () { return (_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsx(LUIcon, { icon: "star", variant: "default", size: "lg" }), _jsx(LUIcon, { icon: "star", variant: "padded", color: "blue", size: "lg" })] })); };
-export var DefaultIconSizes = function () { return (_jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(iconSize).map(function (size) { return (_jsx(LUIcon, { icon: "star", size: size }, size)); }) })); };
-export var PaddedIconSizes = function () { return (_jsx("div", { className: "flex gap-2", children: Object.keys(iconSize).map(function (size) { return (_jsx(LUIcon, { icon: "star", color: "blue", size: size, variant: "padded" }, size)); }) })); };
-export var PaddedIconSizesRounded = function () { return (_jsx("div", { className: "flex gap-2", children: Object.keys(iconSize).map(function (size) { return (_jsx(LUIcon, { icon: "star", color: "blue", shape: "rounded", size: size, variant: "padded" }, size)); }) })); };
-export var IconColors = function () { return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-row space-x-2 mb-2", children: Object.keys(iconColor).map(function (color) { return (_jsx(LUIcon, { icon: "star", size: "lg", color: color }, color)); }) }), _jsx("div", { className: "flex flex-row space-x-2", children: Object.keys(iconColor).map(function (color) { return (_jsx(LUIcon, { icon: "star", variant: "padded", size: "lg", color: color }, color)); }) })] })); };
+export var IconVariants = function () { return (<div className="flex flex-row space-x-2">
+    <LUIcon icon="star" variant="default" size="lg"/>
+    <LUIcon icon="star" variant="padded" color="blue" size="lg"/>
+  </div>); };
+export var DefaultIconSizes = function () { return (<div className="flex flex-row space-x-2">
+    {Object.keys(iconSize).map(function (size) { return (<LUIcon key={size} icon="star" size={size}/>); })}
+  </div>); };
+export var PaddedIconSizes = function () { return (<div className="flex gap-2">
+    {Object.keys(iconSize).map(function (size) { return (<LUIcon key={size} icon="star" color="blue" size={size} variant="padded"/>); })}
+  </div>); };
+export var PaddedIconSizesRounded = function () { return (<div className="flex gap-2">
+    {Object.keys(iconSize).map(function (size) { return (<LUIcon key={size} icon="star" color="blue" shape="rounded" size={size} variant="padded"/>); })}
+  </div>); };
+export var IconColors = function () { return (<>
+    <div className="flex flex-row space-x-2 mb-2">
+      {Object.keys(iconColor).map(function (color) { return (<LUIcon key={color} icon="star" size="lg" color={color}/>); })}
+    </div>
+    <div className="flex flex-row space-x-2">
+      {Object.keys(iconColor).map(function (color) { return (<LUIcon key={color} icon="star" variant="padded" size="lg" color={color}/>); })}
+    </div>
+  </>); };
 // Export stories using separate components for better maintainability
-export var InteractiveIconSelector = function () { return (_jsx(InteractiveIconSelectorComponent, {})); };
-export var IconGallery = function () { return _jsx(IconGalleryComponent, {}); };
+export var InteractiveIconSelector = function () { return (<InteractiveIconSelectorComponent />); };
+export var IconGallery = function () { return <IconGalleryComponent />; };
 // Set parameters for the stories
 InteractiveIconSelector.parameters = {
     docs: {

package/dist/src/components/ImageUploader/imageUploader.d.ts

@@ -1,3 +1,3 @@
 import { ImageUploaderProps } from "../ImageUploader/type";
-declare const ImageUploader: ({ value, onChange, onRemove, required, className, maxFileSizeMB, acceptedTypes, labels, }: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageUploader: ({ value, onChange, onRemove, required, className, maxFileSizeMB, acceptedTypes, labels, }: ImageUploaderProps) => import("react").JSX.Element;
 export default ImageUploader;