linkedunion-design-kit 1.9.6-beta.0 → 1.9.6-beta.1

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

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

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

@@ -1,102 +0,0 @@
-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, };