linkedunion-design-kit 1.9.2 → 1.9.4

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

@@ -0,0 +1,198 @@
+"use client";
+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 { useRef, useState, useEffect, useMemo } from "react";
+import { cn } from "../../../lib/utils";
+import { Badge } from "../../../components/Badge/Badge";
+import { renderBadge } from "./utils/renderBadge";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../../components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../../components/ui/popover";
+import { Button } from "../../../components/Button/Button/Button";
+import LUIcon from "../../../components/Icons/LUIcon";
+import { Checkbox } from "../../../components/Checkbox/checkbox";
+import { comboboxColor, comboboxSelectType, comboboxShapes, comboboxSizes, iconSizeMap, } from ".";
+import { Label } from "../../../components/Label/Label";
+import { Caption } from "../../../components/Typography/Caption/caption";
+import { empty_message } from "../../../utils/constants";
+import Tooltip from "../../../components/ToolTip/Tooltip";
+import { useResponsiveBadges } from "./utils/useResponsiveBadge";
+import { getLabelVariant } from "./utils/getLabelVariant";
+var Combobox = function (props) {
+    var _a = props.size, size = _a === void 0 ? "md" : _a, _b = props.placeholder, placeholder = _b === void 0 ? "Select Options" : _b, _c = props.shape, shape = _c === void 0 ? "rectangular" : _c, _d = props.variant, variant = _d === void 0 ? "fill" : _d, _e = props.color, color = _e === void 0 ? "default" : _e, options = props.options, _f = props.isSearch, isSearch = _f === void 0 ? false : _f, _g = props.isMulti, isMulti = _g === void 0 ? false : _g, onSelect = props.onSelect, renderOption = props.renderOption, _h = props.disabled, disabled = _h === void 0 ? false : _h, defaultValue = props.defaultValue;
+    var _j = useState(false), open = _j[0], setOpen = _j[1];
+    var _k = useState(""), singleValue = _k[0], setSingleValue = _k[1];
+    var _l = useState([]), multiValue = _l[0], setMultiValue = _l[1];
+    var buttonRef = useRef(null);
+    var _m = useState(), popoverWidth = _m[0], setPopoverWidth = _m[1];
+    var maxVisibleBadges = useResponsiveBadges();
+    useEffect(function () {
+        if (isMulti && Array.isArray(defaultValue)) {
+            setMultiValue(defaultValue);
+        }
+        else {
+            setSingleValue(defaultValue);
+        }
+    }, [defaultValue, isMulti]);
+    useEffect(function () {
+        if (open && buttonRef.current) {
+            setPopoverWidth("".concat(buttonRef.current.offsetWidth, "px"));
+        }
+    }, [open]);
+    var handleSelect = function (currentValue) {
+        if (isMulti) {
+            setMultiValue(function (prev) {
+                var newValue = prev.includes(currentValue)
+                    ? prev.filter(function (v) { return v !== currentValue; })
+                    : __spreadArray(__spreadArray([], prev, true), [currentValue], false);
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValue);
+                return newValue;
+            });
+        }
+        else {
+            var newValue = currentValue === singleValue ? "" : currentValue;
+            setSingleValue(newValue);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValue);
+            setOpen(false);
+        }
+    };
+    var handleSelectAll = function () {
+        if (!options)
+            return;
+        var allValues = options.map(function (option) {
+            return typeof option === "string" ? option : option.value;
+        });
+        var newValues = multiValue.length === allValues.length ? [] : allValues;
+        setMultiValue(newValues);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValues);
+    };
+    var getDisplay = useMemo(function () {
+        var handleRemove = function (value) {
+            if (isMulti) {
+                var newValues = multiValue.filter(function (val) { return val !== value; });
+                setMultiValue(newValues);
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValues);
+            }
+            else {
+                setSingleValue("");
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect("");
+            }
+        };
+        if (!options)
+            return placeholder;
+        if (isMulti) {
+            if (!multiValue.length)
+                return placeholder;
+            var selectedOptions = options.filter(function (option) {
+                return typeof option === "string"
+                    ? multiValue.includes(option)
+                    : multiValue.includes(option.value);
+            });
+            if (selectedOptions.length <= maxVisibleBadges) {
+                return (<div className="flex flex-wrap gap-1">
+            {selectedOptions.map(function (option) {
+                        return renderBadge(typeof option === "string"
+                            ? { key: option, value: option }
+                            : option, handleRemove);
+                    })}
+          </div>);
+            }
+            var remainingCount = selectedOptions.length - maxVisibleBadges;
+            var remainingOptions = selectedOptions.slice(maxVisibleBadges);
+            return (<div className="flex flex-wrap gap-1">
+          {selectedOptions
+                    .slice(0, maxVisibleBadges)
+                    .map(function (option) {
+                    return renderBadge(typeof option === "string"
+                        ? { key: option, value: option }
+                        : option, handleRemove);
+                })}
+          {/* TODO: Update Tooltip design */}
+          <Tooltip title={remainingOptions
+                    .map(function (option) {
+                    return typeof option === "string" ? option : option.key;
+                })
+                    .join(", ")}>
+            <Badge color="light-blue" className="cursor-help">
+              +{remainingCount}
+            </Badge>
+          </Tooltip>
+        </div>);
+        }
+        else {
+            if (!singleValue)
+                return placeholder;
+            var isMatch = function (option) {
+                return typeof option === "string"
+                    ? option === singleValue
+                    : option.value === singleValue;
+            };
+            var found = options.find(isMatch);
+            return found
+                ? renderBadge(typeof found === "string" ? { key: found, value: found } : found, handleRemove)
+                : placeholder;
+        }
+    }, [
+        options,
+        placeholder,
+        isMulti,
+        multiValue,
+        singleValue,
+        maxVisibleBadges,
+        onSelect,
+        setMultiValue,
+        setSingleValue,
+    ]);
+    var normalizedOptions = useMemo(function () { return (Array.isArray(options) ? options : []); }, [options]);
+    return (<Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button ref={buttonRef} variant="outline" role="combobox" color="light-gray" aria-expanded={open} className={cn("w-full justify-between !py-3 !px-4 font-normal !leading-normal hover:!bg-transparent active:!bg-transparent", comboboxSizes[size], comboboxSelectType[variant], comboboxColor[variant][color], open && comboboxColor[variant]["blue"], disabled && [
+            variant === "fill" && "bg-gray-100",
+            "border border-gray-300 cursor-not-allowed pointer-events-none",
+        ], "min-h-[42px]")} shape={comboboxShapes[shape]} disabled={disabled} tabIndex={disabled ? -1 : 0}>
+          <div className="flex-grow flex items-center">{getDisplay}</div>
+          <LUIcon icon="angle-down" size={iconSizeMap[size]} color="light-gray"/>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={popoverWidth ? { width: popoverWidth } : {}}>
+        <Command>
+          {isSearch && (<CommandInput placeholder="Search" className={comboboxSizes[size]}/>)}
+          {isMulti && normalizedOptions.length > 0 && (<div className="flex flex-col gap-1 !px-4 !py-3 rounded-sm bg-gray-50 text-gray-800">
+              <div className="flex items-center gap-2">
+                <Checkbox id="select-all" checked={multiValue.length === normalizedOptions.length} onCheckedChange={handleSelectAll} size={size}/>
+                <Label variant={getLabelVariant(size)}>Select All</Label>
+              </div>
+              <Caption variant="sm" className="text-gray-500">
+                Selected ({multiValue.length})
+              </Caption>
+            </div>)}
+          <CommandList>
+            <CommandEmpty>{empty_message}</CommandEmpty>
+            <CommandGroup>
+              {normalizedOptions.map(function (option) {
+            var normalizedOption = typeof option === "string"
+                ? { key: option, value: option }
+                : option;
+            var selected = isMulti
+                ? multiValue.includes(normalizedOption.value)
+                : singleValue === normalizedOption.value;
+            return (<CommandItem key={normalizedOption.value} value={normalizedOption.value} onSelect={function () { return handleSelect(normalizedOption.value); }} size={size} className={cn(selected &&
+                    "bg-blue-50 text-blue-600 hover:text-blue-600")}>
+                    {renderOption
+                    ? renderOption(normalizedOption)
+                    : normalizedOption.key}
+                  </CommandItem>);
+        })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>);
+};
+export default Combobox;

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

@@ -0,0 +1,289 @@
+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 { useState } from "react";
+import Combobox from "./Combobox";
+import { comboboxColor, comboboxSelectType, comboboxShapes, comboboxSizes, } from ".";
+import LUIcon from "../../../components/Icons/LUIcon";
+import { Label } from "../../../components/Label/Label";
+import Tooltip from "../../../components/ToolTip/Tooltip";
+import { Caption } from "../../../components/Typography/Caption/caption";
+import { Button } from "../../../components/Button/Button/Button";
+import { Checkbox } from "../../../components/Checkbox/checkbox";
+import { Badge } from "../../../components/Badge/Badge";
+export default {
+    title: "Components/Dropdown/Combobox",
+    component: Combobox,
+    tags: ["autodocs"],
+    argTypes: {
+        options: {
+            control: { type: "object" },
+            description: "Options for the combobox dropdown",
+            table: {
+                type: { summary: "Array<{ value: string; label: string }>" },
+                defaultValue: { summary: "See default" },
+            },
+        },
+        size: {
+            control: { type: "select" },
+            options: Object.keys(comboboxSizes),
+            description: "Size of the combobox button",
+            table: {
+                type: { summary: "comboboxSizes" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        placeholder: {
+            control: { type: "text" },
+            description: "Placeholder text for the combobox",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Select Options" },
+            },
+        },
+        shape: {
+            control: { type: "select" },
+            options: Object.keys(comboboxShapes),
+            description: "Shape of the combobox button",
+            table: {
+                type: { summary: "comboboxShapes" },
+                defaultValue: { summary: "rectangular" },
+            },
+        },
+        variant: {
+            control: { type: "select" },
+            options: Object.keys(comboboxSelectType),
+            description: "Type of the combobox",
+            table: {
+                type: { summary: "comboboxSelectType" },
+                defaultValue: { summary: "fill" },
+            },
+        },
+        color: {
+            control: { type: "select" },
+            options: Object.keys(comboboxColor.fill),
+            description: "Color of the combobox",
+            table: {
+                type: { summary: "comboboxColor" },
+                defaultValue: { summary: "default" },
+            },
+        },
+        isSearch: {
+            control: { type: "boolean" },
+            description: "Enable search functionality",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        isMulti: {
+            control: { type: "boolean" },
+            description: "Enable multi-select functionality",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        onSelect: {
+            control: false,
+            description: "Callback fired when an option is selected",
+            table: {
+                type: { summary: "(selected: any) => void" },
+            },
+        },
+        disabled: {
+            control: { type: "boolean" },
+            description: "Disable the combobox",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        renderOption: {
+            control: false,
+            description: "Custom render function for options",
+            table: {
+                type: { summary: "(option: any) => ReactNode" },
+            },
+        },
+        defaultValue: {
+            control: { type: "text" },
+            description: "Default value for the combobox",
+            table: {
+                type: { summary: "string | string[]" },
+            },
+        },
+    },
+};
+var Template = function (args) { return <Combobox {...args}/>; };
+export var Default = Template.bind({});
+Default.args = {
+    size: "md",
+    placeholder: "Select Options",
+    shape: "rectangular",
+    options: [
+        { key: "next.js", value: "Next.js" },
+        { key: "sveltekit", value: "SvelteKit" },
+        { key: "nest.js", value: "Nest.js" },
+        { key: "remix", value: "Remix" },
+        { key: "astro", value: "Astro" },
+        { key: "react", value: "React" },
+        { key: "nest", value: "Nest" },
+        { key: "python", value: "Python" },
+        { key: "ai", value: "AI" },
+    ],
+    isSearch: true,
+    isMulti: true,
+    renderOption: function (option) { return (<>
+      {option.icon && <LUIcon icon={option.icon} size="md"/>}
+      <span>{option.key}</span>
+    </>); },
+    onSelect: function (value) { return console.log(value); },
+};
+export var Basic = function () { return (<Combobox options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>); };
+export var ComboboxSize = function () { return (<div className="space-y-4">
+    <Combobox size="sm" options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>
+    <Combobox size="md" options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>
+    <Combobox size="lg" options={[
+        { key: "React", value: "react" },
+        { key: "Vue", value: "vue" },
+    ]} onSelect={function (value) { return console.log(value); }}/>
+  </div>); };
+export var ComboboxType = function () { return (<div className="space-y-4">
+    <Label variant="label-sm">Text</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return <span>{option.value}</span>; }}/>
+
+    <Label variant="label-sm">Text With Right Icon</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return (<div className="flex items-center justify-between w-full">
+          <span>{option.value}</span>
+          <LUIcon icon="plus"/>
+        </div>); }}/>
+
+    <Label variant="label-sm">Text With Left Icon</Label>
+    <Combobox isMulti options={[
+        { key: "next.js", value: "Next.js", icon: "plus" },
+        { key: "sveltekit", value: "SvelteKit", icon: "star" },
+        { key: "nest.js", value: "Nest.js", icon: "check" },
+        { key: "remix", value: "Remix", icon: "minus" },
+        { key: "astro", value: "Astro", icon: "plus" },
+    ]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon={option.icon}/>
+          <span>{option.value}</span>
+        </div>); }}/>
+
+    <Label variant="label-sm">Badge</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return (<Badge startIcon="star" color="light-blue">
+          {option.value}
+        </Badge>); }}/>
+
+    <Label variant="label-sm">Text+Counter</Label>
+    <Combobox isMulti options={["React", "Vue", "Angular"]} renderOption={function (option) { return (<div className="flex items-center justify-between w-full">
+          <span>{option.value}</span>
+          <Badge color="light-blue">{+3}</Badge>
+        </div>); }}/>
+  </div>); };
+export var ComboboxWithCheckbox = function () {
+    var _a = useState([]), selected = _a[0], setSelected = _a[1];
+    var options = ["React", "Vue", "Angular"];
+    var onCheckChange = function (value) {
+        setSelected(function (prev) {
+            return prev.includes(value) ? prev.filter(function (v) { return v !== value; }) : __spreadArray(__spreadArray([], prev, true), [value], false);
+        });
+    };
+    return (<Combobox isMulti options={options} onSelect={function (value) {
+            if (Array.isArray(value)) {
+                setSelected(value);
+            }
+        }} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <Checkbox id={"checkbox-".concat(option.value)} checked={selected.includes(option.value)} onCheckedChange={function () {
+                onCheckChange(option.value);
+            }}/>
+          <span>{option.value}</span>
+        </div>); }}/>);
+};
+export var ComboboxWithUserIcon = function () { return (<Combobox isMulti options={["React", "Vue", "Angular", "Nest", "Next"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+        {/* TODO: Replace it with Avatar */}
+        <LUIcon icon="user" variant="padded"/>
+        <span>{option.value}</span>
+      </div>); }}/>); };
+export var ComboboxWithDefaultValue = function () { return (<div className="space-y-4">
+    <Label variant="label-sm">Multiple Default Values in Multiple Select</Label>
+    <Combobox isMulti isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} defaultValue={["React", "Vue"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon="plus"/>
+          <span>{option.value}</span>
+        </div>); }}/>
+
+    <Label variant="label-sm">Single Default Value in Multiple Select</Label>
+    <Combobox isMulti isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} defaultValue={["React"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon="plus"/>
+          <span>{option.value}</span>
+        </div>); }}/>
+
+    <Label variant="label-sm">Single Default Value in Single Select</Label>
+    <Combobox isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} defaultValue={"React"} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+          <LUIcon icon="plus"/>
+          <span>{option.value}</span>
+        </div>); }}/>
+  </div>); };
+export var ListOfArray = function () { return (<Combobox isMulti isSearch options={["React", "Vue", "Angular", "Nest", "Next"]} renderOption={function (option) { return (<div className="flex items-center gap-2 w-full">
+        <LUIcon icon="plus"/>
+        <span>{option.value}</span>
+      </div>); }}/>); };
+export var ComboboxValidation = function () {
+    var _a = useState(""), selected = _a[0], setSelected = _a[1];
+    var _b = useState(false), error = _b[0], setError = _b[1];
+    var handleSelect = function (value) {
+        // Since isMulti is false, value will be string
+        if (typeof value === "string") {
+            setSelected(value);
+            if (value && error)
+                setError(false);
+        }
+    };
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        if (!selected) {
+            setError(true);
+        }
+        else {
+            setError(false);
+        }
+    };
+    return (<form className="space-y-4" onSubmit={handleSubmit}>
+      <div className="flex items-center gap-2 mb-2">
+        <Label variant="label-sm">Select Category</Label>
+        <span className="text-red-600">*</span>
+        <Tooltip title="Select Option">
+          <LUIcon variant="padded" size="xs" shape="rounded" icon="question" color="light-blue"/>
+        </Tooltip>
+      </div>
+      <div>
+        <Combobox placeholder="Select framework..." size="md" options={[
+            { key: "next.js", value: "Next.js" },
+            { key: "sveltekit", value: "SvelteKit" },
+            { key: "nest.js", value: "Nest.js" },
+            { key: "remix", value: "Remix" },
+            { key: "astro", value: "Astro" },
+        ]} isSearch onSelect={handleSelect} color={error ? "red" : "default"} renderOption={function (option) { return <span>{option.value}</span>; }}/>
+        {error && (<Caption variant="md" className="mt-1 text-red-600">
+            field is required
+          </Caption>)}
+      </div>
+      <Button type="submit">Submit</Button>
+    </form>);
+};

package/dist/src/components/Dropdown/Combobox/utils/renderBadge.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { Badge } from "../../../../components/Badge/Badge";
+export var renderBadge = function (option, handleRemove) {
+    return (<Badge key={option.value} color="light-blue" startIcon={option.icon} onRemove={function () { return handleRemove(option.value); }}>
+      {option.key}
+    </Badge>);
+};

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

@@ -0,0 +1,102 @@
+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 DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { checkBoxSize, dropdownMenuIconSize, dropDownMenuItemSize, dropdownMenuSize, } from ".";
+import { Checkbox } from "../../../components/Checkbox/checkbox";
+// Provide size from Content to all items
+var DropdownMenuSizeContext = React.createContext("md");
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = React.forwardRef(function (_a, ref) {
+    var className = _a.className, inset = _a.inset, children = _a.children, props = __rest(_a, ["className", "inset", "children"]);
+    return (<DropdownMenuPrimitive.SubTrigger ref={ref} className={cn("flex cursor-default select-none items-center gap-2 rounded-sm p-2 outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className)} {...props}>
+    {children}
+    <ChevronRight className="ml-auto"/>
+  </DropdownMenuPrimitive.SubTrigger>);
+});
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, size = _a.size, props = __rest(_a, ["className", "size"]);
+    var inheritedSize = React.useContext(DropdownMenuSizeContext);
+    var effectiveSize = (_b = size !== null && size !== void 0 ? size : inheritedSize) !== null && _b !== void 0 ? _b : "md";
+    return (<DropdownMenuPrimitive.SubContent ref={ref} className={cn("z-50 min-w-[8rem] overflow-hidden rounded-sm bg-white text-gray-900 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 origin-[--radix-dropdown-menu-content-transform-origin]", className, dropDownMenuItemSize[effectiveSize])} {...props}/>);
+});
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.sideOffset, sideOffset = _b === void 0 ? 4 : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.align, align = _d === void 0 ? "start" : _d, props = __rest(_a, ["className", "sideOffset", "size", "align"]);
+    return (<DropdownMenuPrimitive.Portal>
+      <DropdownMenuSizeContext.Provider value={size}>
+        <DropdownMenuPrimitive.Content ref={ref} sideOffset={sideOffset} align={align} // Pass align prop to DropdownMenuPrimitive.Content
+     className={cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm bg-white p-2 text-gray-900 shadow-backdrop-shadow-lg", "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 origin-[--radix-dropdown-menu-content-transform-origin]", dropdownMenuSize[size], className)} {...props}/>
+      </DropdownMenuSizeContext.Provider>
+    </DropdownMenuPrimitive.Portal>);
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, inset = _a.inset, selected = _a.selected, size = _a.size, props = __rest(_a, ["className", "inset", "selected", "size"]);
+    var inheritedSize = React.useContext(DropdownMenuSizeContext);
+    var effectiveSize = (_b = size !== null && size !== void 0 ? size : inheritedSize) !== null && _b !== void 0 ? _b : "md";
+    return (<DropdownMenuPrimitive.Item ref={ref} className={cn("relative flex cursor-pointer select-none items-center gap-2 rounded-sm outline-none transition-colors text-gray-900 hover:bg-blue-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&>svg]:shrink-0", dropdownMenuIconSize[effectiveSize], dropdownMenuSize[effectiveSize], dropDownMenuItemSize[effectiveSize], inset && "pl-8", selected && "bg-blue-50 text-blue-600", // Apply styles for selected item
+        className)} {...props}/>);
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, children = _a.children, checked = _a.checked, size = _a.size, props = __rest(_a, ["className", "children", "checked", "size"]);
+    var inheritedSize = React.useContext(DropdownMenuSizeContext);
+    var effectiveSize = (_b = size !== null && size !== void 0 ? size : inheritedSize) !== null && _b !== void 0 ? _b : "md";
+    return (<DropdownMenuPrimitive.CheckboxItem ref={ref} className={cn("relative flex cursor-default select-none items-center gap-2 rounded-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className, dropDownMenuItemSize[effectiveSize])} checked={checked} {...props}>
+      <Checkbox size={checkBoxSize[effectiveSize]} checked={!!checked} className="pointer-events-none"/>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>);
+});
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (<DropdownMenuPrimitive.RadioItem ref={ref} className={cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)} {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current"/>
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>);
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React.forwardRef(function (_a, ref) {
+    var className = _a.className, inset = _a.inset, props = __rest(_a, ["className", "inset"]);
+    return (<DropdownMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props}/>);
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props}/>);
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props}/>);
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };