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

package/dist/src/components/ColorPicker/ColorPicker.stories.jsx

@@ -1,138 +0,0 @@
-import ColorPicker from "./ColorPicker";
-import { Label } from "../Label/Label";
-import { inputVariantConfig } from "../Input/input";
-export default {
-    title: "Components/ColorPicker",
-    component: ColorPicker,
-    tags: ["autodocs"],
-    argTypes: {
-        size: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.size),
-        },
-        variant: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.variant),
-        },
-        color: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.color),
-        },
-        shape: {
-            control: "select",
-            options: Object.keys(inputVariantConfig.shape),
-        },
-        value: {
-            control: "color",
-        },
-    },
-};
-var Template = function (args) { return <ColorPicker {...args}/>; };
-export var Default = Template.bind({});
-Default.args = {
-    // Blue color
-    onChange: function (color) {
-        console.log("Selected color:", color);
-    },
-};
-export var Sizes = function () { return (<div className="space-y-4">
-    <div>
-      <Label variant="label-sm">Small</Label>
-      <ColorPicker size="sm" value="#ef4444" onChange={function (color) { return console.log("Small:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Medium</Label>
-      <ColorPicker size="md" value="#10b981" onChange={function (color) { return console.log("Medium:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Large</Label>
-      <ColorPicker size="lg" value="#8b5cf6" onChange={function (color) { return console.log("Large:", color); }}/>
-    </div>
-  </div>); };
-export var Variants = function () { return (<div className="space-y-4">
-    <div>
-      <Label variant="label-sm">Filled</Label>
-      <ColorPicker variant="filled" value="#f59e0b" onChange={function (color) { return console.log("Filled:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Outlined</Label>
-      <ColorPicker variant="outlined" value="#06b6d4" onChange={function (color) { return console.log("Outlined:", color); }}/>
-    </div>
-  </div>); };
-export var Colors = function () { return (<div className="space-y-4">
-    <div>
-      <Label variant="label-sm">Default</Label>
-      <ColorPicker color="default" value="#6366f1" onChange={function (color) { return console.log("Default:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Danger</Label>
-      <ColorPicker color="danger" value="#dc2626" onChange={function (color) { return console.log("Danger:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Warning</Label>
-      <ColorPicker color="warning" value="#d97706" onChange={function (color) { return console.log("Warning:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Success</Label>
-      <ColorPicker color="success" value="#059669" onChange={function (color) { return console.log("Success:", color); }}/>
-    </div>
-  </div>); };
-export var Shapes = function () { return (<div className="space-y-4">
-    <div>
-      <Label variant="label-sm">Square</Label>
-      <ColorPicker shape="square" value="#ec4899" onChange={function (color) { return console.log("Square:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Rounded</Label>
-      <ColorPicker shape="rounded" value="#14b8a6" onChange={function (color) { return console.log("Rounded:", color); }}/>
-    </div>
-  </div>); };
-export var AllCombinations = function () { return (<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    <div>
-      <Label variant="label-sm">Small + Filled + Danger + Rounded</Label>
-      <ColorPicker size="sm" variant="filled" color="danger" shape="rounded" value="#ef4444" onChange={function (color) { return console.log("Combo 1:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Medium + Outlined + Success + Square</Label>
-      <ColorPicker size="md" variant="outlined" color="success" shape="square" value="#10b981" onChange={function (color) { return console.log("Combo 2:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Large + Filled + Warning + Rounded</Label>
-      <ColorPicker size="lg" variant="filled" color="warning" shape="rounded" value="#f59e0b" onChange={function (color) { return console.log("Combo 3:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Small + Outlined + Default + Square</Label>
-      <ColorPicker size="sm" variant="outlined" color="default" shape="square" value="#6366f1" onChange={function (color) { return console.log("Combo 4:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Large + Outlined + Danger + Rounded</Label>
-      <ColorPicker size="lg" variant="outlined" color="danger" shape="rounded" value="#dc2626" onChange={function (color) { return console.log("Combo 5:", color); }}/>
-    </div>
-    <div>
-      <Label variant="label-sm">Medium + Filled + Success + Square</Label>
-      <ColorPicker size="md" variant="filled" color="success" shape="square" value="#059669" onChange={function (color) { return console.log("Combo 6:", color); }}/>
-    </div>
-  </div>); };
-export var WithCustomClassName = Template.bind({});
-WithCustomClassName.args = {
-    value: "#8b5cf6",
-    className: "border-2 border-purple-500 shadow-lg",
-    onChange: function (color) { return console.log("Custom styled:", color); },
-};
-export var Disabled = Template.bind({});
-Disabled.args = {
-    value: "#6b7280",
-    disabled: true,
-    onChange: function (color) { return console.log("Disabled:", color); },
-};
-export var Playground = Template.bind({});
-Playground.args = {
-    value: "#3b82f6",
-    size: "md",
-    variant: "filled",
-    color: "default",
-    shape: "square",
-    onChange: function (color) {
-        alert("onChange: ".concat(color));
-    },
-};

package/dist/src/components/Colors/color.jsx

@@ -1,5 +0,0 @@
-import { colors } from "../../utils/colors";
-export var Color = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "black" : _b;
-    return <div style={{ color: colors[color] || colors.black }}>{color}</div>;
-};

package/dist/src/components/Colors/color.stories.jsx

@@ -1,20 +0,0 @@
-import { colors } from "../../utils/colors";
-import { Color } from "./color";
-export default {
-    title: "Components/Color",
-    component: Color,
-};
-var Template = function (args) { return (<Color {...args}/>); };
-export var _Color = Template.bind({});
-_Color.args = {
-    color: "black", // Default color
-};
-_Color.argTypes = {
-    color: {
-        control: {
-            type: "select",
-            labels: Object.keys(colors),
-        },
-        options: Object.keys(colors),
-    },
-};

package/dist/src/components/Colors/color.test.jsx

@@ -1,23 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { colors } from "../../utils/colors";
-import { Color } from "./color";
-describe("TextColor Component", function () {
-    it("renders with default color (black)", function () {
-        render(<Color />);
-        var textElement = screen.getByText("black");
-        expect(textElement).toBeInTheDocument();
-        expect(textElement).toHaveStyle({ color: colors.black });
-    });
-    it("renders with a specified color", function () {
-        render(<Color color="blue-500"/>);
-        var textElement = screen.getByText("blue-500");
-        expect(textElement).toBeInTheDocument();
-        expect(textElement).toHaveStyle({ color: colors["blue-500"] });
-    });
-    it("handles invalid color gracefully", function () {
-        render(<Color color={"invalid-color"}/>);
-        var textElement = screen.getByText("invalid-color");
-        expect(textElement).toBeInTheDocument();
-        expect(textElement).toHaveStyle({ color: colors.black }); // It should default to black
-    });
-});

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

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