linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.stories.js

@@ -1,253 +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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./DropdownMenu";
-import { Button } from "../../../components/Button/Button/Button";
-import LUIcon from "../../../components/Icons/LUIcon";
-import { useState } from "react";
-import { dropdownMenuSize } from ".";
-import { IconButton } from "../../../components/Button/IconButton/IconButton";
-import { Checkbox } from "../../../components/Checkbox/checkbox";
-import { Label } from "../../../components/Label/Label";
-import { Caption } from "../../../components/Typography/Caption/caption";
-import { Input } from "../../../components/Input";
-import { SelectAllSection } from "./SelectAllSection";
-import { Avatar, AvatarFallback, AvatarImage, } from "../../../components/Avatar/Avatar/Avatar";
-export default {
-    title: "Components/Dropdown/DropdownMenu",
-    component: DropdownMenu,
-    tags: ["autodocs"],
-    argTypes: {
-        size: {
-            control: { type: "select" },
-            options: Object.keys(dropdownMenuSize),
-            description: "Dropdown menu size",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "md" },
-            },
-        },
-        disabled: {
-            control: { type: "boolean" },
-            description: "Disable the dropdown menu item",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            },
-        },
-        align: {
-            control: { type: "select" },
-            options: ["start", "center", "end"],
-            description: "Alignment of the dropdown menu",
-            table: {
-                type: { summary: "string" },
-                defaultValue: { summary: "start" },
-            },
-        },
-    },
-};
-var Template = function (args) {
-    var menuItems = [
-        { label: "Option 1" },
-        { label: "Option 2" },
-        { label: "Option 3" },
-    ];
-    return (_jsxs(DropdownMenu, __assign({}, args, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Open Menu" }) }), _jsx(DropdownMenuContent, { children: menuItems.map(function (item, index) { return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index)); }) })] })));
-};
-export var Default = Template.bind({});
-export var Sizes = function () {
-    var menuItems = [
-        {
-            label: "Home",
-            icon: "chart-simple",
-        },
-        {
-            label: "Profile",
-            icon: "chart-pie",
-        },
-        {
-            label: "Settings",
-            icon: "square-poll-horizontal",
-        },
-        {
-            label: "Logout",
-            icon: "square-poll-vertical",
-        },
-    ];
-    return (_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Small Menu" }) }), _jsx(DropdownMenuContent, { size: "sm", children: menuItems.map(function (item, index) { return (_jsxs(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: [_jsx(LUIcon, { icon: item.icon, size: "sm" }), " ", item.label] }, index)); }) })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Medium Menu" }) }), _jsx(DropdownMenuContent, { size: "md", children: menuItems.map(function (item, index) { return (_jsxs(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: [_jsx(LUIcon, { icon: item.icon, size: "md" }), " ", item.label] }, index)); }) })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Large Menu" }) }), _jsx(DropdownMenuContent, { size: "lg", children: menuItems.map(function (item, index) { return (_jsxs(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: [_jsx(LUIcon, { icon: item.icon, size: "lg" }), " ", item.label] }, index)); }) })] })] }));
-};
-export var WithIcons = function () {
-    var menuItems = [
-        {
-            label: "Home",
-            icon: "chart-simple",
-        },
-        {
-            label: "Profile",
-            icon: "chart-pie",
-        },
-        {
-            label: "Settings",
-            icon: "square-poll-horizontal",
-        },
-        {
-            label: "Logout",
-            icon: "square-poll-vertical",
-        },
-    ];
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Menu with Icons" }) }), _jsx(DropdownMenuContent, { children: menuItems.map(function (item, index) { return (_jsxs(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: [_jsx(LUIcon, { icon: item.icon, size: "sm" }), " ", item.label] }, index)); }) })] }));
-};
-export var DisabledItems = function () { return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Menu with Disabled Items" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { onSelect: function () { return alert("Enabled selected"); }, children: "Enabled" }), _jsx(DropdownMenuItem, { disabled: true, children: "Disabled" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: function () { return alert("Another enabled selected"); }, children: "Another Enabled" })] })] })); };
-export var NestedMenu = function () {
-    var menuItems = [
-        { label: "Open conversation details", icon: "eye", items: [] },
-        { label: "View full profile", icon: "user", items: [] },
-        { label: "Start conversation", icon: "address-book", items: [] },
-        {
-            label: "Copy",
-            icon: "copy",
-            items: [
-                { label: "Copy name", icon: "copy" },
-                { label: "Copy email", icon: "copy" },
-                { label: "Copy link", icon: "copy" },
-            ],
-        },
-        { label: "Search in conversation", icon: "magnifying-glass" },
-        { label: "Open in new window", icon: "arrow-right-to-bracket" },
-    ];
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { variant: "outline", icon: "plus" }) }), _jsx(DropdownMenuContent, { className: "mt-2", children: menuItems.map(function (item, index) {
-                    if (item.items && item.items.length > 0) {
-                        return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(LUIcon, { icon: item.icon }), " ", item.label] }), _jsx(DropdownMenuSubContent, { children: item.items.map(function (subItem, subIndex) { return (_jsxs(DropdownMenuItem, { children: [_jsx(LUIcon, { icon: subItem.icon }), " ", subItem.label] }, subIndex)); }) })] }, index));
-                    }
-                    return (_jsxs(DropdownMenuItem, { children: [_jsx(LUIcon, { icon: item.icon }), " ", item.label] }, index));
-                }) })] }));
-};
-export var DropdownMenuWithSelectAll = function () {
-    var tags = ["Sport", "Music", "Food", "Travel", "Tech", "Science", "Art"];
-    var _a = useState([]), selectedTags = _a[0], setSelectedTags = _a[1];
-    var handleTagChange = function (tag, checked) {
-        if (checked) {
-            setSelectedTags(__spreadArray(__spreadArray([], selectedTags, true), [tag], false));
-        }
-        else {
-            setSelectedTags(selectedTags.filter(function (t) { return t !== tag; }));
-        }
-    };
-    var handleSelectAll = function () {
-        var allSelected = selectedTags.length === tags.length;
-        var next = allSelected ? [] : __spreadArray([], tags, true);
-        setSelectedTags(next);
-    };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Select Tags" }) }), _jsxs(DropdownMenuContent, { className: "w-50", size: "lg", children: [_jsx(DropdownMenuLabel, { children: "Select Tags" }), _jsxs("div", { className: "flex flex-col gap-1 rounded-sm bg-gray-50 text-gray-800 py-3 px-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "dm-select-all", checked: selectedTags.length === tags.length, onCheckedChange: function () { return handleSelectAll(); }, onClick: function (e) { return e.stopPropagation(); }, size: "md" }), _jsx(Label, { htmlFor: "dm-select-all", children: "Select All" })] }), _jsxs(Caption, { className: "text-gray-500", children: ["Selected (", selectedTags.length, ")"] })] }), _jsx(DropdownMenuSeparator, {}), tags.map(function (tag) { return (_jsx(DropdownMenuCheckboxItem, { checked: selectedTags.includes(tag), onCheckedChange: function (checked) { return handleTagChange(tag, checked); }, 
-                        // Prevent the dropdown menu from closing when the checkbox is clicked
-                        onSelect: function (e) { return e.preventDefault(); }, children: tag }, tag)); })] })] }));
-};
-export var MultipleSelections = function () {
-    var tags = ["Sport", "Music", "Food", "Travel", "Tech", "Science", "Art"];
-    var _a = useState([
-        tags[0],
-        tags[4],
-    ]), selectedTags = _a[0], setSelectedTags = _a[1];
-    var handleTagChange = function (tag, checked) {
-        if (checked) {
-            setSelectedTags(__spreadArray(__spreadArray([], selectedTags, true), [tag], false));
-        }
-        else {
-            setSelectedTags(selectedTags.filter(function (t) { return t !== tag; }));
-        }
-    };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Select Tags" }) }), _jsxs(DropdownMenuContent, { className: "w-44", size: "lg", children: [_jsx(DropdownMenuLabel, { children: "Select Tags" }), _jsx(DropdownMenuSeparator, {}), tags.map(function (tag) { return (_jsx(DropdownMenuCheckboxItem, { checked: selectedTags.includes(tag), onCheckedChange: function (checked) { return handleTagChange(tag, checked); }, 
-                        // Prevent the dropdown menu from closing when the checkbox is clicked
-                        onSelect: function (e) { return e.preventDefault(); }, children: tag }, tag)); })] })] }));
-};
-export var DropdownMenuWithSearch = function () {
-    var menuItems = [
-        { label: "Open conversation details", icon: "eye" },
-        { label: "View full profile", icon: "user" },
-        { label: "Start conversation", icon: "address-book" },
-    ];
-    var _a = useState(false), open = _a[0], setOpen = _a[1];
-    var _b = useState(""), query = _b[0], setQuery = _b[1];
-    var filteredItems = menuItems.filter(function (item) {
-        return item.label.toLowerCase().includes(query.toLowerCase());
-    });
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Select an Option" }) }), _jsxs(DropdownMenuContent, { className: "p-0", size: "lg", children: [_jsx("div", { className: "p-2", children: _jsx(Input, { placeholder: "Search...", value: query, onChange: function (e) { return setQuery(e.target.value); }, onKeyDownCapture: function (e) { return e.stopPropagation(); }, startIcon: "magnifying-glass" }) }), filteredItems.length === 0 ? (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found." })) : (filteredItems.map(function (option) { return (_jsxs(DropdownMenuItem, { onSelect: function () { return setOpen(false); }, children: [_jsx(LUIcon, { icon: option.icon }), " ", option.label] }, option.label)); }))] })] }));
-};
-DropdownMenuWithSearch.parameters = {
-    docs: {
-        description: {
-            story: "DropdownMenuWithSearch provides a dropdown menu that includes a search box. Users can type into the box to filter the menu items. For larger dropdowns, a large search input should be used; for medium dropdowns, a medium input; and for small dropdowns, a small input.",
-        },
-    },
-};
-export var DropdownMenuWithSelectAllAndSearch = function () {
-    var tags = ["Sport", "Music", "Food", "Travel", "Tech", "Science", "Art"];
-    var _a = useState([]), selectedTags = _a[0], setSelectedTags = _a[1];
-    var _b = useState(""), query = _b[0], setQuery = _b[1];
-    var toggleTag = function (tag) {
-        setSelectedTags(function (prev) {
-            return prev.includes(tag) ? prev.filter(function (t) { return t !== tag; }) : __spreadArray(__spreadArray([], prev, true), [tag], false);
-        });
-    };
-    var handleSelectAll = function () {
-        var allSelected = selectedTags.length === tags.length;
-        setSelectedTags(allSelected ? [] : __spreadArray([], tags, true));
-    };
-    var filtered = tags.filter(function (t) {
-        return t.toLowerCase().includes(query.toLowerCase());
-    });
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Select Tags" }) }), _jsxs(DropdownMenuContent, { size: "lg", children: [_jsx("div", { className: "mb-2", children: _jsx(Input, { placeholder: "Search...", value: query, onChange: function (e) { return setQuery(e.target.value); }, onKeyDownCapture: function (e) { return e.stopPropagation(); }, size: "lg", startIcon: "magnifying-glass" }) }), _jsx(SelectAllSection, { checked: selectedTags.length === tags.length && tags.length > 0, onToggleAll: handleSelectAll, selectedCount: selectedTags.length, size: "lg" }), _jsx(DropdownMenuSeparator, {}), filtered.length === 0 ? (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found." })) : (filtered.map(function (tag) {
-                        var isSelected = selectedTags.includes(tag);
-                        return (_jsx(DropdownMenuCheckboxItem, { checked: isSelected, 
-                            // Prevent DropdownMenu from closing in multi-select scenario
-                            onSelect: function (e) { return e.preventDefault(); }, onCheckedChange: function () { return toggleTag(tag); }, className: isSelected ? "bg-blue-50 text-blue-600" : "", children: tag }, tag));
-                    }))] })] }));
-};
-export var WorkSpaceSwitcher = function () {
-    var workspaces = [
-        {
-            id: 1,
-            name: "Workspace 1",
-            createdBy: "abc@example.com",
-        },
-        {
-            id: 2,
-            name: "Workspace 2",
-            createdBy: "def@example.com",
-        },
-        {
-            id: 3,
-            name: "Workspace 3",
-            createdBy: "ghi@example.com",
-        },
-    ];
-    var _a = useState(workspaces[0]), selectedWorkspace = _a[0], setSelectedWorkspace = _a[1];
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "flex items-center gap-2 bg-accent py-2.5 px-3 rounded-lg", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "text-start flex flex-col gap-1 leading-none", children: [_jsx("span", { className: "text-sm leading-none font-semibold truncate max-w-[17ch]", children: selectedWorkspace.name }), _jsx("span", { className: "text-xs text-muted-foreground truncate max-w-[20ch]", children: selectedWorkspace.createdBy })] }), _jsx(LUIcon, { icon: "angle-down" })] }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Workspaces" }), workspaces.map(function (workspace) { return (_jsxs(DropdownMenuItem, { onClick: function () { return setSelectedWorkspace(workspace); }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: workspace.name }), _jsx("span", { className: "text-xs text-muted-foreground", children: workspace.createdBy })] })] }), selectedWorkspace.id === workspace.id && (_jsx(LUIcon, { icon: "check", className: "ml-auto" }))] }, workspace.id)); })] })] }));
-};
-export var LanguageDropdownMenu = function () {
-    var languages = ["English", "Spanish", "French", "German", "Chinese"];
-    var _a = useState(languages[0]), selectedLanguage = _a[0], setSelectedLanguage = _a[1];
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsxs(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { shape: "rounded-full", startIcon: "language", endIcon: isOpen ? "angle-up" : "angle-down", children: selectedLanguage }) }), _jsx(DropdownMenuContent, { className: "w-50", children: languages.map(function (language) { return (_jsx(DropdownMenuItem, { onSelect: function () { return setSelectedLanguage(language); }, children: language }, language)); }) })] }));
-};
-export var Alignments = function () {
-    return (_jsxs("div", { className: "flex flex-row space-x-4", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align Start" }) }), _jsxs(DropdownMenuContent, { align: "start", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align Center" }) }), _jsxs(DropdownMenuContent, { align: "center", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Button, { children: "Align End" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { children: "Option 1" }), _jsx(DropdownMenuItem, { children: "Option 2" }), _jsx(DropdownMenuItem, { children: "Option 3" })] })] })] }));
-};

package/dist/src/components/Dropdown/DropdownMenu/SelectAllSection.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox } from "../../../components/Checkbox/checkbox";
-import { Label } from "../../../components/Label/Label";
-import { Caption } from "../../../components/Typography/Caption/caption";
-export var SelectAllSection = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? "dm-select-all" : _b, checked = _a.checked, onToggleAll = _a.onToggleAll, selectedCount = _a.selectedCount, _c = _a.size, size = _c === void 0 ? "md" : _c;
-    var labelVariant = size === "lg" ? "label-lg" : size === "md" ? "label-md" : "label-sm";
-    return (_jsxs("div", { className: "flex flex-col gap-1 rounded-sm bg-gray-50 text-gray-800 py-3 px-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: id, checked: checked, onCheckedChange: onToggleAll, onClick: function (e) { return e.stopPropagation(); }, size: size }), _jsx(Label, { htmlFor: id, variant: labelVariant, children: "Select All" })] }), _jsxs(Caption, { className: "text-gray-500", variant: "sm", children: ["Selected (", selectedCount, ")"] })] }));
-};

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

@@ -1,87 +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);
-};
-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 } from "react/jsx-runtime";
-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";
-// 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 (_jsx(SelectPrimitive.Root, __assign({ "data-slot": "select", onValueChange: onValueChange, defaultValue: defaultValue }, props)));
-}
-function SelectGroup(_a) {
-    var props = __rest(_a, []);
-    return _jsx(SelectPrimitive.Group, __assign({ "data-slot": "select-group" }, props));
-}
-function SelectValue(_a) {
-    var props = __rest(_a, []);
-    return _jsx(SelectPrimitive.Value, __assign({ "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 (_jsxs(SelectPrimitive.Trigger, __assign({ "data-slot": "select-trigger", "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: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(LUIcon, { icon: "angle-down", size: iconSize, color: "light-gray" }) })] })));
-}
-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 = (_jsxs(SelectPrimitive.Content, __assign({ "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, { children: [_jsx(SelectScrollUpButton, {}), _jsx(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: children }), _jsx(SelectScrollDownButton, {})] })));
-    return hidePortal ? (content) : (_jsx(SelectPrimitive.Portal, { children: content }));
-}
-function SelectLabel(_a) {
-    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
-    return (_jsx(SelectPrimitive.Label, __assign({ "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 (_jsx(SelectPrimitive.Item, __assign({ "data-slot": "select-item", 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, { children: _jsx(SelectPrimitive.ItemText, { children: children }) })));
-}
-function SelectSeparator(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(SelectPrimitive.Separator, __assign({ "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 (_jsx(SelectPrimitive.ScrollUpButton, __assign({ "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(LUIcon, { icon: "angle-up", size: iconSize, color: "light-gray" }) })));
-}
-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 (_jsx(SelectPrimitive.ScrollDownButton, __assign({ "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(LUIcon, { icon: "angle-down", size: iconSize, color: "light-gray" }) })));
-}
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 (_jsxs("div", { ref: dropdownRef, className: "relative w-full", children: [_jsxs("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", children: [_jsxs("div", { className: "flex items-center gap-2", children: [value && _jsx(LUIcon, { icon: value, size: "xs" }), _jsx("span", { children: value ? formatLabel(value) : "Select an icon..." })] }), _jsx("span", { className: "transition-transform duration-200 ".concat(isOpen ? "rotate-180" : "rotate-0"), children: "\u25BC" })] }), isOpen && (_jsxs("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", children: [_jsx("div", { className: "p-2", children: _jsx(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(); } }) }), _jsx("div", { className: "max-h-[200px] overflow-y-auto", children: filteredOptions.length === 0 ? (_jsx("div", { className: "p-3 text-gray-600 italic", children: "No icons found" })) : (filteredOptions.map(function (option) { return (_jsxs("div", { 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"), children: [_jsx(LUIcon, { icon: option, size: "xs" }), _jsx("span", { className: "text-sm", children: formatLabel(option) }), _jsx("span", { className: "text-xs text-gray-600 ml-auto", children: option })] }, option)); })) })] }))] }));
-};

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

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 (_jsxs("div", { 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"), children: [_jsx(LUIcon, { icon: iconKey, size: "sm" }), _jsx("span", { className: "text-xs font-mono text-gray-700 break-all", children: iconKey })] }, iconKey));
-    };
-    var IconPreview = function (_a) {
-        var iconKey = _a.iconKey;
-        return (_jsxs("div", { className: "mt-5 p-4 bg-gray-50 rounded-lg border border-gray-200", children: [_jsxs(Heading, { variant: "h4", className: "mb-4", children: ["Preview Selected Icon: ", iconKey] }), _jsxs("div", { className: "flex gap-4 items-center flex-wrap", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Body, { variant: "body-sm-600", children: "Default:" }), _jsx(LUIcon, { icon: iconKey, size: "md" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Body, { variant: "body-sm-600", children: "Padded:" }), _jsx(LUIcon, { icon: iconKey, size: "md", variant: "padded", color: "blue" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Body, { variant: "body-sm-600", children: "Large:" }), _jsx(LUIcon, { icon: iconKey, size: "xl" })] })] }), _jsxs("div", { className: "mt-3 font-mono text-sm", children: [_jsx(Body, { variant: "body-sm-600", children: "Usage:" }), _jsx("br", {}), _jsx("code", { className: "bg-gray-100 p-1 rounded", children: "<LUIcon icon=\"".concat(iconKey, "\" size=\"md\" />") })] })] }));
-    };
-    return (_jsxs("div", { className: "p-5", children: [_jsxs(Heading, { variant: "h3", className: "mb-5", children: ["Icon Gallery - All Available Icons (", Object.keys(iconList).length, " ", "total)"] }), _jsxs("div", { className: "mb-5", children: [_jsx(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" }), _jsxs(Body, { variant: "body-sm", className: "mt-2 text-gray-600", children: [filteredIcons.length, " icons found", selectedIcon && (_jsxs("span", { className: "ml-4 font-semibold", children: ["Selected: ", selectedIcon] }))] })] }), _jsx("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", children: filteredIcons.map(function (iconKey) { return (_jsx(IconItem, { iconKey: iconKey }, iconKey)); }) }), selectedIcon && _jsx(IconPreview, { iconKey: selectedIcon })] }));
-};

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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 (_jsxs("div", { className: "p-5", children: [_jsx(Heading, { variant: "h3", className: "mb-3", children: "Interactive Icon Selector" }), _jsx(Body, { variant: "body-md", className: "mb-6 text-gray-600", children: "This demonstrates a custom searchable dropdown that shows icons alongside their names." }), _jsxs("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 mb-6", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-md", className: "block mb-2 ", children: "Select Icon:" }), _jsx(IconDropdown, { value: selectedIcon, onChange: setSelectedIcon, options: Object.keys(iconList).sort() })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", className: "block mb-2 ", children: "Size:" }), _jsx("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", children: Object.keys(iconSize).map(function (size) { return (_jsx("option", { value: size, children: size }, size)); }) })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", className: "block mb-2 ", children: "Variant:" }), _jsxs("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", children: [_jsx("option", { value: "default", children: "Default" }), _jsx("option", { value: "padded", children: "Padded" })] })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", className: "block mb-2", children: "Color:" }), _jsx("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", children: Object.keys(iconWithBgColor).map(function (color) { return (_jsx("option", { value: color, children: color }, color)); }) })] })] }), _jsxs("div", { className: "p-6 border-2 border-dashed border-gray-300 rounded-lg text-center bg-gray-50", children: [_jsx(Heading, { variant: "h4", className: "mb-4", children: "Preview:" }), _jsx("div", { className: "my-4", children: _jsx(LUIcon, { icon: selectedIcon, size: selectedSize, variant: selectedVariant, color: selectedColor }) }), _jsx("div", { className: "font-mono text-sm bg-gray-100 p-2 rounded", children: generateUsageCode() })] })] }));
-};

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

@@ -1,133 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Input, inputVariantConfig } from "./input";
-import { inputType } from "."; // Ensure this exports an object like { text: 'text', email: 'email', ... }
-import { Label } from "../Label/Label";
-import LUIcon from "../Icons/LUIcon";
-import Tooltip from "../ToolTip/Tooltip";
-import { Caption } from "../Typography/Caption/caption";
-export default {
-    title: "Components/Input",
-    component: Input,
-    tags: ["autodocs"],
-    argTypes: {
-        type: {
-            control: {
-                type: "select",
-                labels: Object.keys(inputType),
-            },
-            options: Object.keys(inputType),
-            defaultValue: "text",
-        },
-        variant: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(inputVariantConfig.variant),
-            defaultValue: "filled",
-        },
-        size: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(inputVariantConfig.size),
-            defaultValue: "lg",
-        },
-        color: {
-            control: {
-                type: "select",
-            },
-            options: Object.keys(inputVariantConfig.color),
-            defaultValue: "default",
-        },
-        startIcon: {
-            control: "text",
-            description: "Icon to display at the start of the input",
-        },
-        endIcon: {
-            control: "text",
-            description: "Icon to display at the end of the input",
-        },
-        placeholder: {
-            control: "text",
-            defaultValue: "Enter text",
-        },
-        disabled: {
-            control: "boolean",
-            defaultValue: false,
-        },
-        className: {
-            control: "text",
-        },
-    },
-};
-var Template = function (args) { return _jsx(Input, __assign({}, args)); };
-export var Default = Template.bind({});
-Default.args = {
-    type: "text",
-    placeholder: "Enter your input",
-    variant: "filled",
-    size: "lg",
-};
-export var WithIcons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Search with start icon" }), _jsx(Input, { placeholder: "Search...", startIcon: "magnifying-glass" })] }), _jsxs("div", { children: [_jsx(Label, { className: "block text-sm font-medium mb-2", children: "Email with end icon" }), _jsx(Input, { placeholder: "Enter email", endIcon: "envelope", type: "email" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Password with both icons" }), _jsx(Input, { placeholder: "Enter password", startIcon: "lock", endIcon: "eye", type: "password" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "User input" }), _jsx(Input, { placeholder: "Enter username", startIcon: "user" })] })] })); };
-export var IconSizes = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-sm", children: "Small with icons" }), _jsx(Input, { placeholder: "Small size", size: "sm", startIcon: "magnifying-glass", endIcon: "xMark" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Medium with icons" }), _jsx(Input, { placeholder: "Medium size", size: "md", startIcon: "magnifying-glass", endIcon: "xMark" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-lg", children: "Large with icons" }), _jsx(Input, { placeholder: "Large size", size: "lg", startIcon: "magnifying-glass", endIcon: "xMark" })] })] })); };
-export var Variants = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Filled" }), _jsx(Input, { placeholder: "Filled variant", variant: "filled" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Outlined" }), _jsx(Input, { placeholder: "Outlined variant", variant: "outlined" })] })] })); };
-export var Sizes = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Small" }), _jsx(Input, { placeholder: "Small size", size: "sm" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Medium" }), _jsx(Input, { placeholder: "Medium size", size: "md" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-lg", children: "Large (Default)" }), _jsx(Input, { placeholder: "Large size", size: "lg" })] })] })); };
-export var VariantsWithIcons = function () { return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Filled with icons" }), _jsx(Input, { placeholder: "Filled variant", variant: "filled", startIcon: "magnifying-glass", endIcon: "xMark" })] }), _jsxs("div", { children: [_jsx(Label, { variant: "label-md", children: "Outlined with icons" }), _jsx(Input, { placeholder: "Outlined variant", variant: "outlined", startIcon: "magnifying-glass", endIcon: "xMark" })] })] })); };
-export var ErrorValidation = function () {
-    var _a = React.useState("Steve"), email = _a[0], setEmail = _a[1];
-    var maxLength = 5;
-    var isError = email.length === 5;
-    var characterCount = email.length;
-    var handleEmailChange = function (e) {
-        var newValue = e.target.value;
-        // Restrict typing when exactly 5 characters
-        if (newValue.length <= 5) {
-            setEmail(newValue);
-        }
-    };
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Label, { variant: "label-md", children: "Name" }), _jsx("span", { className: "text-red-600", children: "*" }), _jsx(Tooltip, { title: "This is a tooltip for the email input field", children: _jsx(LUIcon, { variant: "padded", size: "xs", shape: "rounded", icon: "question", color: "light-blue" }) }), _jsxs(Caption, { variant: "md", className: "ms-auto mb-1 ".concat(isError ? "text-red-600" : "text-gray-500"), children: [_jsx("span", { className: isError ? "text-red-600" : "text-gray-900", children: characterCount }), "/", maxLength] })] }), _jsx(Input, { color: isError ? "danger" : "default", placeholder: "Enter your email address", variant: "filled", type: "email", value: email, onChange: handleEmailChange, startIcon: "user", endIcon: "envelope" }), email.length > 4 && (_jsx(Caption, { variant: "md", className: "mt-1 ".concat(isError ? "text-red-600" : "text-gray-500"), children: isError
-                        ? "Email must be longer than 5 characters"
-                        : "Please enter a valid email address" }))] }) }));
-};
-export var SuccessValidation = function () {
-    var _a = React.useState("john_doe"), username = _a[0], setUsername = _a[1];
-    var maxLength = 20;
-    var isSuccess = username.length >= 6 && username.length <= 15;
-    var characterCount = username.length;
-    var handleUsernameChange = function (e) {
-        var newValue = e.target.value;
-        if (newValue.length <= maxLength) {
-            setUsername(newValue);
-        }
-    };
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Label, { variant: "label-sm", children: "Username" }), _jsx("span", { className: "text-red-600", children: "*" }), _jsx(Tooltip, { title: "Username must be 6-15 characters long", children: _jsx(LUIcon, { variant: "padded", size: "xs", shape: "rounded", icon: "question", color: "light-blue" }) }), _jsxs(Caption, { variant: "md", className: "ms-auto mb-1 ".concat(isSuccess ? "text-green-600" : "text-gray-500"), children: [_jsx("span", { className: isSuccess ? "text-green-600" : "text-gray-900", children: characterCount }), "/", maxLength] })] }), _jsx(Input, { color: isSuccess ? "success" : "default", placeholder: "Enter your username", variant: "filled", type: "text", value: username, onChange: handleUsernameChange, startIcon: "user", endIcon: isSuccess ? "check" : "user-gear" }), _jsx(Caption, { variant: "md", className: "mt-1 ".concat(isSuccess ? "text-green-600" : "text-gray-500"), children: isSuccess
-                        ? "Great! Username is available"
-                        : "Username must be 6-15 characters" })] }) }));
-};
-export var WarningValidation = function () {
-    var _a = React.useState("pass123"), password = _a[0], setPassword = _a[1];
-    var maxLength = 30;
-    var hasWarning = password.length >= 4 && password.length < 8;
-    var characterCount = password.length;
-    var handlePasswordChange = function (e) {
-        var newValue = e.target.value;
-        if (newValue.length <= maxLength) {
-            setPassword(newValue);
-        }
-    };
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Label, { variant: "label-md", children: "Password" }), _jsx("span", { className: "text-red-600", children: "*" }), _jsx(Tooltip, { title: "Password should be at least 8 characters for better security", children: _jsx(LUIcon, { variant: "padded", size: "xs", shape: "rounded", icon: "question", color: "light-blue" }) }), _jsxs(Caption, { variant: "md", className: "ms-auto mb-1 ".concat(hasWarning ? "text-yellow-600" : "text-gray-500"), children: [_jsx("span", { className: hasWarning ? "text-yellow-600" : "text-gray-900", children: characterCount }), "/", maxLength] })] }), _jsx(Input, { color: hasWarning ? "warning" : "default", placeholder: "Enter your password", variant: "filled", type: "password", value: password, onChange: handlePasswordChange, startIcon: "lock", endIcon: hasWarning ? "circle-exclamation" : "eye" }), _jsx(Caption, { variant: "md", className: "mt-1 ".concat(hasWarning ? "text-yellow-600" : "text-gray-500"), children: hasWarning
-                        ? "Password is weak. Consider using 8+ characters"
-                        : "Enter a secure password" })] }) }));
-};