linkedunion-design-kit 1.9.1 → 1.9.2

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

@@ -0,0 +1,145 @@
+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 { Badge } from "./Badge";
+import { badgeStyles } from ".";
+import { iconList } from "../../utils/iconList";
+var meta = {
+    title: "Components/Badge",
+    component: Badge,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            control: {
+                type: "select",
+                options: Object.keys(badgeStyles.type),
+            },
+            description: "The type of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "fill" },
+            },
+        },
+        color: {
+            control: {
+                type: "select",
+            },
+            options: Object.keys(badgeStyles.fillColor),
+            description: "The color of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "blue" },
+            },
+        },
+        size: {
+            control: {
+                type: "select",
+                options: Object.keys(badgeStyles.size),
+            },
+            description: "The size of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        shape: {
+            control: {
+                type: "select",
+                options: Object.keys(badgeStyles.shape),
+            },
+            description: "The shape of the badge.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "rounded" },
+            },
+        },
+        startIcon: {
+            control: {
+                type: "select",
+                options: Object.keys(iconList),
+            },
+            description: "The icon to display at the start of the badge.",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        endIcon: {
+            control: {
+                type: "select",
+                options: Object.keys(iconList),
+            },
+            description: "The icon to display at the end of the badge.",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        disabled: {
+            control: {
+                type: "boolean",
+            },
+            description: "Whether the badge is disabled.",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        onRemove: {
+            description: "When provided, displays a close icon that calls this function when clicked. The close icon is only shown when this prop is present.",
+            table: {
+                type: { summary: "() => void" },
+                defaultValue: { summary: "undefined" },
+            },
+            control: false,
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            // Use type, not color, to determine color options
+            var currentType = context.args.type;
+            if (context.argTypes && context.argTypes.color) {
+                context.argTypes.color.options =
+                    currentType === "fill"
+                        ? Object.keys(badgeStyles.fillColor)
+                        : Object.keys(badgeStyles.outlineColor);
+            }
+            return _jsx(Story, __assign({}, context));
+        },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        children: "Default Badge",
+        onRemove: undefined,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Default badge without a close icon. The close icon is only shown when the onRemove prop is provided.",
+            },
+        },
+    },
+};
+export var BadgeSize = function () { return (_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx(Badge, { size: "sm", children: "Small Badge" }), _jsx(Badge, { size: "md", children: "Medium Badge" }), _jsx(Badge, { size: "lg", children: "Large Badge" })] })); };
+export var WithIcons = function () { return (_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx(Badge, { startIcon: "check", children: "Left Icon Only" }), _jsx(Badge, { endIcon: "check", children: "Right Icon Only" }), _jsx(Badge, { startIcon: "check", endIcon: "star", children: "Both Icons" }), _jsx("p", { className: "text-sm mt-2 text-gray-500", children: "Note: None of these have an onRemove handler, so no close icon is shown" })] })); };
+export var BadgeType = function () { return (_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx(Badge, { type: "fill", children: "Fill Badge" }), _jsx(Badge, { type: "outline", children: "Outline Badge" })] })); };
+export var BadgeShape = function () { return (_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx(Badge, { shape: "rounded", children: "Rounded Badge" }), _jsx(Badge, { shape: "square", children: "Square Badge" })] })); };
+export var BadgeFillColors = function () { return (_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsx(Badge, { color: "blue", children: "Blue" }), _jsx(Badge, { color: "light-blue", children: "Light Blue" }), _jsx(Badge, { color: "red", children: "Red" }), _jsx(Badge, { color: "light-red", children: "Light Red" }), _jsx(Badge, { color: "indigo", children: "Indigo" }), _jsx(Badge, { color: "light-indigo", children: "Light Indigo" }), _jsx(Badge, { color: "green", children: "Green" }), _jsx(Badge, { color: "light-green", children: "Light Green" }), _jsx(Badge, { color: "yellow", children: "Yellow" }), _jsx(Badge, { color: "light-yellow", children: "Light Yellow" }), _jsx(Badge, { color: "gray", children: "Gray" }), _jsx(Badge, { color: "light-gray", children: "Light Gray" })] })); };
+export var BadgeOutlineColors = function () { return (_jsxs("div", { className: "flex flex-row space-x-2", children: [_jsx(Badge, { color: "blue", type: "outline", children: "Blue" }), _jsx(Badge, { color: "red", type: "outline", children: "Red" }), _jsx(Badge, { color: "indigo", type: "outline", children: "Indigo" }), _jsx(Badge, { color: "green", type: "outline", children: "Green" }), _jsx(Badge, { color: "yellow", type: "outline", children: "Yellow" }), _jsx(Badge, { color: "gray", type: "outline", children: "Gray" })] })); };
+export var DisabledBadge = function () { return (_jsx("div", { className: "flex flex-col space-y-2", children: _jsx(Badge, { disabled: true, children: "Disabled Badge" }) })); };
+export var BadgeWithCounter = function () { return (_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx(Badge, { children: "3" }), _jsx(Badge, { color: "red", children: "+3" })] })); };
+export var BadgeWithRemoveHandler = function () {
+    var handleRemove = function () {
+        alert("Badge removed!");
+    };
+    return (_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx(Badge, { startIcon: "plus", onRemove: handleRemove, color: "green", children: "Badge with Close Icon" }), _jsx(Badge, { onRemove: handleRemove, children: "Removable Badge" }), _jsx(Badge, { startIcon: "check", onRemove: handleRemove, children: "Check with Remove" }), _jsx(Badge, { type: "outline", onRemove: handleRemove, children: "Outline Removable" })] }));
+};

package/dist/src/components/Badge/index.d.ts

@@ -0,0 +1,47 @@
+export declare const badgeStyles: {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    type: {
+        fill: string;
+        outline: string;
+    };
+    shape: {
+        rounded: string;
+        square: string;
+    };
+    fillColor: {
+        blue: string;
+        "light-blue": string;
+        red: string;
+        "light-red": string;
+        indigo: string;
+        "light-indigo": string;
+        green: string;
+        "light-green": string;
+        yellow: string;
+        "light-yellow": string;
+        gray: string;
+        "light-gray": string;
+    };
+    outlineColor: {
+        blue: string;
+        red: string;
+        indigo: string;
+        green: string;
+        yellow: string;
+        gray: string;
+    };
+};
+export declare const badgeLeftIconSize: {
+    readonly sm: "2xs";
+    readonly md: "xs";
+    readonly lg: "sm";
+};
+export declare const badgeRightIconSize: {
+    readonly sm: "2xs";
+    readonly md: "2xs";
+    readonly lg: "2xs";
+};

package/dist/src/components/Badge/index.js

@@ -0,0 +1,49 @@
+export var badgeStyles = {
+    size: {
+        sm: "px-2 py-0.5 text-[0.625rem] leading-4", //TODO: Add text-tiny font-size
+        md: "px-2.5 py-1 text-xs leading-4",
+        lg: "px-2.5 py-1 text-sm leading-5",
+    },
+    type: {
+        fill: "",
+        outline: "border bg-transparent",
+    },
+    shape: {
+        rounded: "rounded-full",
+        square: "rounded-sm",
+    },
+    fillColor: {
+        blue: "bg-blue-600 text-blue-50",
+        "light-blue": "bg-blue-100 text-blue-600",
+        red: "bg-red-600 text-red-50",
+        "light-red": "bg-red-100 text-red-600",
+        indigo: "bg-indigo-600 text-indigo-50",
+        "light-indigo": "bg-indigo-100 text-indigo-600",
+        green: "bg-green-600 text-green-50",
+        "light-green": "bg-green-100 text-green-600",
+        yellow: "bg-yellow-500 text-yellow-950",
+        "light-yellow": "bg-yellow-100 text-yellow-950",
+        gray: "bg-gray-300 text-gray-950",
+        "light-gray": "bg-gray-100 text-gray-950",
+    },
+    outlineColor: {
+        blue: "border-blue-600 text-blue-600",
+        red: "border-red-600 text-red-600",
+        indigo: "border-indigo-600 text-indigo-600",
+        green: "border-green-600 text-green-600",
+        yellow: "border-yellow-500 text-yellow-500",
+        gray: "border-gray-200 text-gray-950",
+    },
+};
+// Map badge left size to icon size
+export var badgeLeftIconSize = {
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+};
+// Map badge right size to icon size
+export var badgeRightIconSize = {
+    sm: "2xs",
+    md: "2xs",
+    lg: "2xs",
+};

package/dist/src/components/Button/Button/Button.d.ts

@@ -8,9 +8,9 @@ export declare const variant: {
     ghost: string;
 };
 declare const buttonVariants: (props?: ({
-    color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "disabled" | "light-gray" | null | undefined;
+    color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    shape?: "rounded-full" | "rounded-sm" | null | undefined;
+    shape?: "rounded-sm" | "rounded-full" | null | undefined;
     variant?: "link" | "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, color, size, shape, variant, asChild, startIcon, endIcon, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/src/components/Button/Button/Button.stories.d.ts

@@ -148,7 +148,7 @@ declare const meta: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "disabled" | "light-gray" | undefined;
+        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -393,7 +393,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
-        shape?: "rounded-full" | "rounded-sm" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
@@ -448,7 +448,7 @@ declare const meta: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "disabled" | "light-gray" | undefined;
+        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -693,7 +693,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "link" | "outline" | "ghost" | undefined;
-        shape?: "rounded-full" | "rounded-sm" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | null | undefined;
         asChild?: boolean | undefined;
         startIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;
         endIcon?: keyof typeof import("../../../utils/iconList").iconList | undefined;

package/dist/src/components/Button/IconButton/IconButton.d.ts

@@ -7,9 +7,9 @@ export declare const variant: {
     ghost: string;
 };
 declare const buttonVariants: (props?: ({
-    color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "disabled" | "light-gray" | null | undefined;
+    color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    shape?: "rounded-full" | "rounded-sm" | null | undefined;
+    shape?: "rounded-sm" | "rounded-full" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function IconButton({ className, color, size, shape, variant, asChild, icon, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/src/components/Button/IconButton/IconButton.stories.d.ts

@@ -159,7 +159,7 @@ declare const meta: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "disabled" | "light-gray" | undefined;
+        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -404,7 +404,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "outline" | "ghost" | undefined;
-        shape?: "rounded-full" | "rounded-sm" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | null | undefined;
         asChild?: boolean | undefined;
         icon?: keyof typeof iconList | undefined;
     }>, context: import("@storybook/core/csf").StoryContext<import("@storybook/react").ReactRenderer, {
@@ -458,7 +458,7 @@ declare const meta: {
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "disabled" | "light-gray" | undefined;
+        color?: "blue" | "light-blue" | "green" | "light-green" | "yellow" | "light-yellow" | "red" | "light-red" | "indigo" | "light-indigo" | "gray" | "light-gray" | "disabled" | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -703,7 +703,7 @@ declare const meta: {
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         size?: "sm" | "md" | "lg" | "xl" | null | undefined;
         variant?: "fill" | "outline" | "ghost" | undefined;
-        shape?: "rounded-full" | "rounded-sm" | null | undefined;
+        shape?: "rounded-sm" | "rounded-full" | null | undefined;
         asChild?: boolean | undefined;
         icon?: keyof typeof iconList | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

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

@@ -0,0 +1,3 @@
+import { ComboboxProps } from "./type";
+declare const Combobox: (props: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Combobox;

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

@@ -0,0 +1,160 @@
+"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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsx("div", { className: "flex flex-wrap gap-1", children: selectedOptions.map(function (option) {
+                        return renderBadge(typeof option === "string"
+                            ? { key: option, value: option }
+                            : option, handleRemove);
+                    }) }));
+            }
+            var remainingCount = selectedOptions.length - maxVisibleBadges;
+            var remainingOptions = selectedOptions.slice(maxVisibleBadges);
+            return (_jsxs("div", { className: "flex flex-wrap gap-1", children: [selectedOptions
+                        .slice(0, maxVisibleBadges)
+                        .map(function (option) {
+                        return renderBadge(typeof option === "string"
+                            ? { key: option, value: option }
+                            : option, handleRemove);
+                    }), _jsx(Tooltip, { title: remainingOptions
+                            .map(function (option) {
+                            return typeof option === "string" ? option : option.key;
+                        })
+                            .join(", "), children: _jsxs(Badge, { color: "light-blue", className: "cursor-help", children: ["+", remainingCount] }) })] }));
+        }
+        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 (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(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, children: [_jsx("div", { className: "flex-grow flex items-center", children: getDisplay }), _jsx(LUIcon, { icon: "angle-down", size: iconSizeMap[size], color: "light-gray" })] }) }), _jsx(PopoverContent, { className: "p-0", style: popoverWidth ? { width: popoverWidth } : {}, children: _jsxs(Command, { children: [isSearch && (_jsx(CommandInput, { placeholder: "Search", className: comboboxSizes[size] })), isMulti && normalizedOptions.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 !px-4 !py-3 rounded-sm bg-gray-50 text-gray-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "select-all", checked: multiValue.length === normalizedOptions.length, onCheckedChange: handleSelectAll, size: size }), _jsx(Label, { variant: getLabelVariant(size), children: "Select All" })] }), _jsxs(Caption, { variant: "sm", className: "text-gray-500", children: ["Selected (", multiValue.length, ")"] })] })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: empty_message }), _jsx(CommandGroup, { children: 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 (_jsx(CommandItem, { value: normalizedOption.value, onSelect: function () { return handleSelect(normalizedOption.value); }, size: size, className: cn(selected &&
+                                                "bg-blue-50 text-blue-600 hover:text-blue-600"), children: renderOption
+                                                ? renderOption(normalizedOption)
+                                                : normalizedOption.key }, normalizedOption.value));
+                                    }) })] })] }) })] }));
+};
+export default Combobox;

package/dist/src/components/Dropdown/Combobox/Combobox.stories.d.ts

@@ -0,0 +1,13 @@
+import type { ComboboxProps } from "./type";
+import { Meta } from "@storybook/react";
+declare const _default: Meta<ComboboxProps>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ComboboxProps>;
+export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxSize: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxType: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxWithCheckbox: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxWithUserIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxWithDefaultValue: () => import("react/jsx-runtime").JSX.Element;
+export declare const ListOfArray: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxValidation: () => import("react/jsx-runtime").JSX.Element;