linkedunion-design-kit 1.9.2 → 1.9.4

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

@@ -0,0 +1,464 @@
+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 { 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 (<DropdownMenu {...args}>
+      <DropdownMenuTrigger>
+        <Button>Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+            {item.label}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+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 (<div className="flex flex-row space-x-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Small Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="sm">
+          {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+              <LUIcon icon={item.icon} size="sm"/> {item.label}
+            </DropdownMenuItem>); })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Medium Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="md">
+          {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+              <LUIcon icon={item.icon} size="md"/> {item.label}
+            </DropdownMenuItem>); })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Large Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="lg">
+          {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+              <LUIcon icon={item.icon} size="lg"/> {item.label}
+            </DropdownMenuItem>); })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>);
+};
+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 (<DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button>Menu with Icons</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+            <LUIcon icon={item.icon} size="sm"/> {item.label}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var DisabledItems = function () { return (<DropdownMenu>
+    <DropdownMenuTrigger>
+      <Button>Menu with Disabled Items</Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem onSelect={function () { return alert("Enabled selected"); }}>
+        Enabled
+      </DropdownMenuItem>
+      <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onSelect={function () { return alert("Another enabled selected"); }}>
+        Another Enabled
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>); };
+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 (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <IconButton variant="outline" icon="plus"/>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="mt-2">
+        {menuItems.map(function (item, index) {
+            if (item.items && item.items.length > 0) {
+                return (<DropdownMenuSub key={index}>
+                <DropdownMenuSubTrigger>
+                  <LUIcon icon={item.icon}/> {item.label}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  {item.items.map(function (subItem, subIndex) { return (<DropdownMenuItem key={subIndex}>
+                      <LUIcon icon={subItem.icon}/> {subItem.label}
+                    </DropdownMenuItem>); })}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>);
+            }
+            return (<DropdownMenuItem key={index}>
+              <LUIcon icon={item.icon}/> {item.label}
+            </DropdownMenuItem>);
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+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 (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select Tags</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-50" size="lg">
+        <DropdownMenuLabel>Select Tags</DropdownMenuLabel>
+        <div className="flex flex-col gap-1 rounded-sm bg-gray-50 text-gray-800 py-3 px-4">
+          <div className="flex items-center gap-2">
+            <Checkbox id="dm-select-all" checked={selectedTags.length === tags.length} onCheckedChange={function () { return handleSelectAll(); }} onClick={function (e) { return e.stopPropagation(); }} size="md"/>
+            <Label htmlFor="dm-select-all">Select All</Label>
+          </div>
+          <Caption className="text-gray-500">
+            Selected ({selectedTags.length})
+          </Caption>
+        </div>
+        <DropdownMenuSeparator />
+        {tags.map(function (tag) { return (<DropdownMenuCheckboxItem checked={selectedTags.includes(tag)} key={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(); }}>
+            {tag}
+          </DropdownMenuCheckboxItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+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 (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select Tags</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-44" size="lg">
+        <DropdownMenuLabel>Select Tags</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {tags.map(function (tag) { return (<DropdownMenuCheckboxItem checked={selectedTags.includes(tag)} key={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(); }}>
+            {tag}
+          </DropdownMenuCheckboxItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+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 (<DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select an Option</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="p-0" size="lg">
+        <div className="p-2">
+          <Input placeholder="Search..." value={query} onChange={function (e) { return setQuery(e.target.value); }} onKeyDownCapture={function (e) { return e.stopPropagation(); }} startIcon="magnifying-glass"/>
+        </div>
+        {filteredItems.length === 0 ? (<div className="py-6 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>) : (filteredItems.map(function (option) { return (<DropdownMenuItem key={option.label} onSelect={function () { return setOpen(false); }}>
+              <LUIcon icon={option.icon}/> {option.label}
+            </DropdownMenuItem>); }))}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+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 (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select Tags</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent size="lg">
+        <div className="mb-2">
+          <Input placeholder="Search..." value={query} onChange={function (e) { return setQuery(e.target.value); }} onKeyDownCapture={function (e) { return e.stopPropagation(); }} size="lg" startIcon="magnifying-glass"/>
+        </div>
+
+        <SelectAllSection checked={selectedTags.length === tags.length && tags.length > 0} onToggleAll={handleSelectAll} selectedCount={selectedTags.length} size="lg"/>
+        <DropdownMenuSeparator />
+        {filtered.length === 0 ? (<div className="py-6 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>) : (filtered.map(function (tag) {
+            var isSelected = selectedTags.includes(tag);
+            return (<DropdownMenuCheckboxItem key={tag} 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" : ""}>
+                {tag}
+              </DropdownMenuCheckboxItem>);
+        }))}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+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 (<DropdownMenu>
+      <DropdownMenuTrigger className="flex items-center gap-2 bg-accent py-2.5 px-3 rounded-lg">
+        <Avatar>
+          <AvatarImage alt="Avatar" src="/images/avatar.png"/>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+        <div className="text-start flex flex-col gap-1 leading-none">
+          <span className="text-sm leading-none font-semibold truncate max-w-[17ch]">
+            {selectedWorkspace.name}
+          </span>
+          <span className="text-xs text-muted-foreground truncate max-w-[20ch]">
+            {selectedWorkspace.createdBy}
+          </span>
+        </div>
+        <LUIcon icon="angle-down"/>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
+        {workspaces.map(function (workspace) { return (<DropdownMenuItem key={workspace.id} onClick={function () { return setSelectedWorkspace(workspace); }}>
+            <div className="flex items-center gap-2">
+              <Avatar>
+                <AvatarImage alt="Avatar" src="/images/avatar.png"/>
+                <AvatarFallback>AB</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col">
+                <span>{workspace.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  {workspace.createdBy}
+                </span>
+              </div>
+            </div>
+            {selectedWorkspace.id === workspace.id && (<LUIcon icon="check" className="ml-auto"/>)}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+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 (<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button shape="rounded-full" startIcon="language" endIcon={isOpen ? "angle-up" : "angle-down"}>
+          {selectedLanguage}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-50">
+        {languages.map(function (language) { return (<DropdownMenuItem key={language} onSelect={function () { return setSelectedLanguage(language); }}>
+            {language}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var Alignments = function () {
+    return (<div className="flex flex-row space-x-4">
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Align Start</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem>Option 1</DropdownMenuItem>
+          <DropdownMenuItem>Option 2</DropdownMenuItem>
+          <DropdownMenuItem>Option 3</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Align Center</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="center">
+          <DropdownMenuItem>Option 1</DropdownMenuItem>
+          <DropdownMenuItem>Option 2</DropdownMenuItem>
+          <DropdownMenuItem>Option 3</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Align End</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Option 1</DropdownMenuItem>
+          <DropdownMenuItem>Option 2</DropdownMenuItem>
+          <DropdownMenuItem>Option 3</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>);
+};

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+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 (<div className="flex flex-col gap-1 rounded-sm bg-gray-50 text-gray-800 py-3 px-4">
+      <div className="flex items-center gap-2">
+        <Checkbox id={id} checked={checked} onCheckedChange={onToggleAll} onClick={function (e) { return e.stopPropagation(); }} size={size}/>
+        <Label htmlFor={id} variant={labelVariant}>
+          Select All
+        </Label>
+      </div>
+      <Caption className="text-gray-500" variant="sm">
+        Selected ({selectedCount})
+      </Caption>
+    </div>);
+};

package/dist/src/components/Dropdown/Select.stories.jsx

@@ -0,0 +1,201 @@
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./select";
+import { selectColor, selectShape, selectSize, selectType, } from ".";
+import LUIcon from "../Icons/LUIcon";
+import React from "react";
+var meta = {
+    title: "Components/Select",
+    component: Select,
+    tags: ["autodocs"],
+    argTypes: {
+        onValueChange: {
+            control: false,
+            description: "Callback fired when the value changes",
+            table: {
+                type: { summary: "(value: string) => void" },
+                defaultValue: { summary: undefined },
+            },
+        },
+        size: {
+            control: { type: "select" },
+            options: Object.keys(selectSize),
+            description: "Size of the select trigger",
+            table: {
+                type: { summary: "SelectSize" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        variant: {
+            control: { type: "select" },
+            options: Object.keys(selectType),
+            description: "Type of the select trigger",
+            table: {
+                type: { summary: "SelectType" },
+                defaultValue: { summary: "fill" },
+            },
+        },
+        color: {
+            control: { type: "select" },
+            options: Object.keys(selectColor.fill),
+            description: "Color of the select trigger",
+            table: {
+                type: { summary: "SelectColor" },
+                defaultValue: { summary: "default" },
+            },
+        },
+        placeholder: {
+            control: { type: "text" },
+            description: "Placeholder text for the select",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Select an option" },
+            },
+        },
+        shape: {
+            control: { type: "select" },
+            options: Object.keys(selectShape),
+            description: "Shape of the select trigger",
+            table: {
+                type: { summary: "SelectShape" },
+                defaultValue: { summary: "rectangular" },
+            },
+        },
+        disabled: {
+            control: { type: "boolean" },
+            description: "Disable the select",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        defaultValue: {
+            control: { type: "text" },
+            description: "Default value for the select",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+    },
+    args: {
+        size: "md",
+        shape: "rectangular",
+        variant: "fill",
+        color: "default",
+        placeholder: "Select an option",
+        disabled: false,
+        onValueChange: function (value) {
+            console.log("Select value changed:", value);
+        },
+    },
+};
+export default meta;
+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 = [
+        {
+            label: "Fruits",
+            items: [
+                { value: "apple", label: "Apple", icon: "plus" },
+                { value: "banana", label: "Banana" },
+                { value: "orange", label: "Orange" },
+            ],
+        },
+        {
+            label: "Vegetables",
+            items: [
+                { value: "carrot", label: "Carrot" },
+                { value: "lettuce", label: "Lettuce" },
+            ],
+        },
+    ];
+    return (<Select onValueChange={function (value) {
+            console.log("Select value changed:", value);
+        }} 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 = [
+        { key: "us", label: "United States", icon: "info" },
+        { key: "ca", label: "Canada", icon: "plus" },
+        { key: "mx", label: "Mexico", icon: "minus" },
+        { key: "uk", label: "United Kingdom", icon: "check" },
+        { key: "fr", label: "France", icon: "star" },
+    ];
+    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: {
+        docs: {
+            description: {
+                story: "This story demonstrates how to render Select options from a backend-like key-value array. The dropdown values (keys) are mapped from a simulated backend, and the display text is the label. This is useful for cases where you need to show a label but store a key in your form state.",
+            },
+        },
+    },
+};
+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 (<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 (<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>); };