linkedunion-design-kit 1.9.0 → 1.9.2

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

@@ -0,0 +1,32 @@
+export var selectShape = {
+    rectangular: "!rounded-sm",
+    rounded: "rounded-full",
+};
+export var selectSize = {
+    sm: "h-9 !text-xs font-normal !leading-normal",
+    md: "h-10 !text-sm font-normal !leading-normal",
+    lg: "h-12 !text-base font-normal !leading-normal",
+};
+export var itemSize = {
+    lg: "!text-base font-normal !leading-normal",
+    md: "!text-sm font-normal !leading-normal",
+    sm: "!text-xs font-normal !leading-normal",
+};
+export var selectType = {
+    fill: "bg-white",
+    outline: "bg-transparent",
+};
+export var selectColor = {
+    fill: {
+        default: "border-gray-200 bg-white",
+        red: "bg-red-50 border-red-600",
+        blue: "bg-white border-blue-600",
+        disabled: "bg-gray-100 border-gray-300",
+    },
+    outline: {
+        default: "border-gray-200",
+        red: "border-red-600",
+        blue: "border-blue-600",
+        disabled: "border-gray-300",
+    },
+};

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { SelectSize, SelectShape, SelectType, SelectColor, ItemSize } from ".";
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
+    defaultValue?: string;
+};
+declare function Select({ onValueChange, defaultValue, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: SelectSize;
+    shape?: SelectShape;
+    variant?: SelectType;
+    color?: SelectColor;
+};
+declare function SelectTrigger({ className, size, shape, variant, color, children, disabled, ...props }: SelectTriggerProps & {
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+type SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content> & {
+    hidePortal?: boolean;
+};
+declare function SelectContent({ className, children, position, hidePortal, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+type SelectLabelProps = React.ComponentProps<typeof SelectPrimitive.Label> & {
+    size?: ItemSize;
+};
+declare function SelectLabel({ className, size, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item> & {
+    size?: ItemSize;
+};
+declare function SelectItem({ className, children, size, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, size, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton> & {
+    size?: SelectSize;
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, size, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton> & {
+    size?: SelectSize;
+}): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

@@ -0,0 +1,87 @@
+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);
+};
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "../../lib/utils";
+import { selectSize, selectShape, selectType, selectColor, itemSize, } from ".";
+import LUIcon from "../Icons/LUIcon";
+// Map select size to icon size
+var iconSizeMap = {
+    lg: "md",
+    md: "sm",
+    sm: "xs",
+};
+function Select(_a) {
+    var onValueChange = _a.onValueChange, defaultValue = _a.defaultValue, props = __rest(_a, ["onValueChange", "defaultValue"]);
+    return (_jsx(SelectPrimitive.Root, __assign({ "data-slot": "select", onValueChange: onValueChange, defaultValue: defaultValue }, props)));
+}
+function SelectGroup(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Group, __assign({ "data-slot": "select-group" }, props));
+}
+function SelectValue(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Value, __assign({ "data-slot": "select-value" }, props));
+}
+function SelectTrigger(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.shape, shape = _c === void 0 ? "rectangular" : _c, _d = _a.variant, variant = _d === void 0 ? "fill" : _d, _e = _a.color, color = _e === void 0 ? "default" : _e, children = _a.children, disabled = _a.disabled, props = __rest(_a, ["className", "size", "shape", "variant", "color", "children", "disabled"]);
+    var iconSize = iconSizeMap[size] || "md";
+    var shapeClass = selectShape[shape];
+    var typeClass = selectType[variant];
+    // Use disabled color if disabled prop is true
+    var isDisabled = !!disabled;
+    var colorClass = isDisabled
+        ? selectColor[variant]["disabled"]
+        : selectColor[variant][color];
+    return (_jsxs(SelectPrimitive.Trigger, __assign({ "data-slot": "select-trigger", "data-size": size, "data-shape": shape, "data-type": variant, "data-color": isDisabled ? "disabled" : color, className: cn("data-[placeholder]:text-gray-400 w-full !px-4 !py-3 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center justify-between gap-2 !border border-gray-200 whitespace-nowrap !shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeClass, shapeClass, selectSize[size], colorClass, className), disabled: isDisabled }, props, { children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(LUIcon, { icon: "angle-down", size: iconSize, color: "light-gray" }) })] })));
+}
+function SelectContent(_a) {
+    var className = _a.className, children = _a.children, _b = _a.position, position = _b === void 0 ? "popper" : _b, _c = _a.hidePortal, hidePortal = _c === void 0 ? false : _c, props = __rest(_a, ["className", "children", "position", "hidePortal"]);
+    var content = (_jsxs(SelectPrimitive.Content, __assign({ "data-slot": "select-content", className: cn("!bg-white text-gray-900 !py-2 !px-2 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 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto !rounded-sm shadow-lg", position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position }, props, { children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] })));
+    return hidePortal ? (content) : (_jsx(SelectPrimitive.Portal, { children: content }));
+}
+function SelectLabel(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    return (_jsx(SelectPrimitive.Label, __assign({ "data-slot": "select-label", className: cn("text-muted-foreground !px-2 !py-1.5", itemSize[size], className) }, props)));
+}
+function SelectItem(_a) {
+    var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "size"]);
+    return (_jsx(SelectPrimitive.Item, __assign({ "data-slot": "select-item", className: cn("text-gray-900 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-300 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 !rounded-sm py-1.5 pr-8 pl-2 outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[state=checked]:bg-gray-50 hover:bg-gray-50", itemSize[size], className) }, props, { children: _jsx(SelectPrimitive.ItemText, { children: children }) })));
+}
+function SelectSeparator(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.Separator, __assign({ "data-slot": "select-separator", className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className) }, props)));
+}
+function SelectScrollUpButton(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    var iconSize = iconSizeMap[size] || "md";
+    return (_jsx(SelectPrimitive.ScrollUpButton, __assign({ "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(LUIcon, { icon: "angle-up", size: iconSize, color: "light-gray" }) })));
+}
+function SelectScrollDownButton(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    var iconSize = iconSizeMap[size] || "md";
+    return (_jsx(SelectPrimitive.ScrollDownButton, __assign({ "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: _jsx(LUIcon, { icon: "angle-down", size: iconSize, color: "light-gray" }) })));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/src/components/Icons/LUIcon.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from "./type";
-declare const LUIcon: ({ size, icon, variant, shape, className, color, "data-testid": testId, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const LUIcon: ({ size, icon, variant, shape, className, color, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default LUIcon;

package/dist/src/components/Icons/LUIcon.js

@@ -23,15 +23,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconList } from "../../utils/iconList";
 import { getAppliedColor, iconBackground, IconShape, iconSize } from ".";
+import { cn } from "../../lib/utils";
 var LUIcon = function (_a) {
     var _b;
-    var _c = _a.size, size = _c === void 0 ? "md" : _c, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? "default" : _d, _e = _a.shape, shape = _e === void 0 ? "square" : _e, className = _a.className, color = _a.color, testId = _a["data-testid"], props = __rest(_a, ["size", "icon", "variant", "shape", "className", "color", "data-testid"]);
-    var paddingIcon = iconBackground[size];
-    var colorClass = variant === "default" ? getAppliedColor(variant, color) : "";
-    var svg = (_jsxs("svg", __assign({ role: "img", "data-testid": testId || "lu-icon", className: "".concat(iconSize[size], " ").concat(variant !== "padded" ? className : "", " ").concat(colorClass), viewBox: "0 0 32 32", fill: "currentColor" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "lu-path", d: (_b = iconList[icon]) !== null && _b !== void 0 ? _b : "" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32" }) }) })] })));
-    if (variant === "padded") {
-        return (_jsx("div", { "data-testid": testId ? "".concat(testId, "-wrapper") : "lu-icon-wrapper", className: "inline-flex items-center justify-center ".concat(paddingIcon, " ").concat(shape === "rounded" ? IconShape.rounded : IconShape.square[size], " ").concat(className, " ").concat(getAppliedColor(variant, color)), children: svg }));
-    }
-    return svg;
+    var _c = _a.size, size = _c === void 0 ? "md" : _c, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? "default" : _d, _e = _a.shape, shape = _e === void 0 ? "square" : _e, className = _a.className, color = _a.color, props = __rest(_a, ["size", "icon", "variant", "shape", "className", "color"]);
+    var isPadded = variant === "padded";
+    var sizeClass = iconSize[size];
+    var shapeClass = shape === "rounded" ? IconShape.rounded : IconShape.square[size];
+    var paddingClass = iconBackground[size];
+    // Helper function to build the className string
+    var getClassNames = function () {
+        var baseClasses = "".concat(cn("overflow-visible", sizeClass, getAppliedColor(variant, color)));
+        if (isPadded) {
+            baseClasses = cn(baseClasses, paddingClass, shapeClass);
+        }
+        return cn(baseClasses, className);
+    };
+    return (_jsxs("svg", __assign({ role: "img", "data-testid": "lu-icon", className: getClassNames(), viewBox: "0 0 32 32", fill: "currentColor" }, props, { children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "lu-path", d: (_b = iconList[icon]) !== null && _b !== void 0 ? _b : "" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32" }) }) })] })));
 };
 export default LUIcon;

package/dist/src/components/Icons/LUIcon.test.d.ts

@@ -1 +0,0 @@
-export {};