linkedunion-design-kit 1.11.12 → 1.11.15

package/dist/src/components/Button/Button/Button.js

@@ -38,7 +38,7 @@ import { buttonStyles } from "..";
 export var variant = {
     fill: "",
     link: "lu-bg-transparent hover:lu-bg-transparent focus:lu-bg-transparent active:lu-bg-transparent !p-0 underline-offset-4 hover:underline border-none font-normal leading-normal",
-    outline: "lu-border lu-bg-transparent",
+    outline: "lu-border",
     ghost: "lu-bg-transparent border-none",
 };
 var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {

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

@@ -48,19 +48,19 @@ export var buttonStyles = {
         sm: "!text-sm",
     },
     outlineColor: {
-        blue: "text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",
+        blue: "bg-transparent text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",
         "light-blue": "bg-blue-100 text-blue-600 hover:bg-blue-700 hover:text-blue-50 active:bg-blue-800 active:text-blue-50",
-        green: "text-green-600 hover:bg-green-700 hover:text-green-50 active:bg-green-800 active:text-green-50",
+        green: "bg-transparent text-green-600 hover:bg-green-700 hover:text-green-50 active:bg-green-800 active:text-green-50",
         "light-green": "bg-green-100 text-green-600 hover:bg-green-700 hover:text-green-50 active:bg-green-800 active:text-green-50",
-        yellow: "text-yellow-500 hover:bg-yellow-600 hover:text-yellow-950 active:bg-yellow-700 active:text-yellow-950",
-        "light-yellow": "bg-yellow-100 text-yellow-950 hover:bg-yellow-600 active:bg-yellow-700",
-        red: "text-red-600 hover:bg-red-700 hover:text-red-50 active:bg-red-800 active:text-red-50",
+        yellow: "bg-yellow-50 text-yellow-950 border-yellow-500 hover:bg-yellow-600 hover:text-yellow-950 focus-visible:bg-yellow-600 focus-visible:text-yellow-950 focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 active:bg-yellow-700 active:text-yellow-950",
+        "light-yellow": "bg-yellow-100 text-yellow-950 border-yellow-500 hover:bg-yellow-600 focus-visible:bg-yellow-600 focus-visible:text-yellow-950 focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 active:bg-yellow-700",
+        red: "bg-transparent text-red-600 hover:bg-red-700 hover:text-red-50 active:bg-red-800 active:text-red-50",
         "light-red": "bg-red-100 text-red-600 hover:bg-red-700 hover:text-red-50 active:bg-red-800 active:text-red-50",
-        indigo: "text-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
+        indigo: "bg-transparent text-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
         "light-indigo": "bg-indigo-100 text-indigo-600 hover:bg-indigo-700 hover:text-indigo-50 active:bg-indigo-800 active:text-indigo-50",
         gray: "bg-gray-50 border-gray-200 text-gray-950 hover:bg-gray-100 hover:text-gray-950 active:bg-gray-300 active:text-gray-950",
         "light-gray": "text-gray-900 border-gray-900 bg-gray-100 hover:text-gray-950 active:bg-gray-300 active:text-gray-950",
-        disabled: "text-gray-300",
+        disabled: "bg-transparent text-gray-300",
     },
     ghostColor: {
         blue: "text-blue-600 hover:bg-blue-100 active:bg-blue-600 active:text-blue-50",

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

@@ -25,7 +25,7 @@ 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 { checkBoxSize, dropdownMenuIconSize, dropDownMenuItemSize, dropdownMenuSize, dropDownSubMenuItemSize, } from ".";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
 import { Reset_BS } from "../../../utils/constants";
 // Provide size from Content to all items
@@ -38,7 +38,7 @@ 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 (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ 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: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm !p-2 outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
 });
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
@@ -47,7 +47,7 @@ var DropdownMenuSubContent = React.forwardRef(function (_a, ref) {
     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 (_jsx(DropdownMenuPrimitive.SubContent, __assign({ 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)));
+    return (_jsx(DropdownMenuPrimitive.SubContent, __assign({ ref: ref, className: cn("z-50 h-auto min-w-[8rem] overflow-hidden shadow-backdrop-shadow-lg 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, dropDownSubMenuItemSize[effectiveSize]) }, props)));
 });
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.stories.js

@@ -268,15 +268,32 @@ export var MasterDropdownMenu = function () {
     var menuItems = [
         { type: "item", label: "Text Label 1" },
         { type: "item", label: "Text Label 2" },
-        { type: "submenu", label: "Text Label 3", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
-        { type: "submenu", label: "Text Label 4", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        {
+            type: "submenu",
+            label: "Text Label 3",
+            subItems: [
+                "Submenu Item 1",
+                "Submenu Item 2",
+                "Submenu Item 3",
+                "Submenu Item 4",
+            ],
+        },
+        {
+            type: "submenu",
+            label: "Text Label 4",
+            subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"],
+        },
         { type: "item", label: "Text Label 5" },
         { type: "badge", label: "Text Label 6", badge: "09" },
         { type: "avatar", label: "Text Label 7" },
         { type: "item", label: "Text Label 8" },
         // Second column starts after 8 items
         { type: "item", label: "Text Label 9" },
-        { type: "submenu", label: "Text Label 10", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        {
+            type: "submenu",
+            label: "Text Label 10",
+            subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"],
+        },
         { type: "item", label: "Text Label 11" },
         { type: "badge", label: "Text Label 12", badge: "09" },
         { type: "avatar", label: "Text Label 13" },
@@ -294,5 +311,9 @@ export var MasterDropdownMenu = function () {
                 return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index));
         }
     };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { shape: "rounded-full", children: "Text Label" }) }), _jsx(DropdownMenuContent, { className: "w-auto", size: "lg", children: _jsxs("div", { className: "grid gap-0 ".concat(menuItems.length > 8 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(0, 8).map(function (item, index) { return renderMenuItem(item, index); })] }), menuItems.length > 8 && (_jsxs("div", { className: "flex flex-col md:pl-2", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(8).map(function (item, index) { return renderMenuItem(item, index + 8); })] }))] }) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { shape: "rounded-full", children: "Text Label" }) }), _jsx(DropdownMenuContent, { className: "w-auto", size: "lg", children: _jsxs("div", { className: "grid gap-0 ".concat(menuItems.length > 8 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1"), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems
+                                    .slice(0, 8)
+                                    .map(function (item, index) { return renderMenuItem(item, index); })] }), menuItems.length > 8 && (_jsxs("div", { className: "flex flex-col md:pl-2", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems
+                                    .slice(8)
+                                    .map(function (item, index) { return renderMenuItem(item, index + 8); })] }))] }) })] }));
 };

package/dist/src/components/Dropdown/DropdownMenu/index.d.ts

@@ -8,6 +8,11 @@ export declare const dropDownMenuItemSize: {
     md: string;
     lg: string;
 };
+export declare const dropDownSubMenuItemSize: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export declare const dropdownMenuIconSize: {
     sm: string;
     md: string;

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

@@ -8,6 +8,11 @@ export var dropDownMenuItemSize = {
     md: "h-10 !py-3 !px-4",
     lg: "h-12 !py-3 !px-4",
 };
+export var dropDownSubMenuItemSize = {
+    sm: "!p-3",
+    md: "!py-3 !px-4",
+    lg: "!py-3 !px-4",
+};
 // Map dropdown menu size to icon size
 export var dropdownMenuIconSize = {
     sm: "sm",

package/dist/styles/global.css

@@ -1360,6 +1360,11 @@
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
   }
+  .lu-border {
+    border-width: 1px;
+    border-style: solid;
+    border-color: currentColor;
+  }
   .\!border {
     border-style: var(--tw-border-style) !important;
     border-width: 1px !important;
@@ -2595,9 +2600,6 @@
   .\[--cell-size\:--spacing\(6\)\] {
     --cell-size: calc(var(--spacing) * 6);
   }
-  .lu-border {
-    border: 1px solid currentColor;
-  }
   .running {
     animation-play-state: running;
   }
@@ -3962,6 +3964,16 @@
       background-color: #fffdf5;
     }
   }
+  .focus-visible\:bg-yellow-600 {
+    &:focus-visible {
+      background-color: #ffc700;
+    }
+  }
+  .focus-visible\:text-yellow-950 {
+    &:focus-visible {
+      color: #473800;
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.11.12",
+  "version": "1.11.15",
   "private": false,
   "files": [
     "dist",