linkedunion-design-kit 1.11.11 → 1.11.13

package/dist/index.d.ts

@@ -41,3 +41,4 @@ export * from "./src/components/Sheet";
 export * from "./src/components/Separator";
 export { SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, } from "./src/components/SweetAlert/SweetAlert";
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./src/components/Popover/popover";
+export { Spinner } from "./src/components/Spinner/Spinner";

package/dist/index.js

@@ -40,3 +40,4 @@ export * from "./src/components/Sheet";
 export * from "./src/components/Separator";
 export { SweetAlert, SweetAlertTrigger, SweetAlertContent, SweetAlertFooter, SweetAlertTitle, SweetAlertDescription, SweetAlertAction, SweetAlertCancel, SweetAlertIcon, } from "./src/components/SweetAlert/SweetAlert";
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, } from "./src/components/Popover/popover";
+export { Spinner } from "./src/components/Spinner/Spinner";

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/src/components/Spinner/Spinner.d.ts

@@ -0,0 +1,2 @@
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
+export { Spinner };

package/dist/src/components/Spinner/Spinner.js

@@ -0,0 +1,30 @@
+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 } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "../../lib/utils";
+function Spinner(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(Loader2Icon, __assign({ role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className) }, props)));
+}
+export { Spinner };

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

@@ -0,0 +1,10 @@
+import { Meta, StoryFn } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;
+export declare const Sizes: StoryFn;
+export declare const InButtons: StoryFn;
+export declare const InBadges: StoryFn;
+export declare const InInputGroup: StoryFn;
+export declare const EmptyState: StoryFn;
+export declare const Colors: StoryFn;

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

@@ -0,0 +1,64 @@
+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 { Spinner } from "./Spinner";
+import { Button } from "../Button/Button/Button";
+import { Badge } from "../Badge/Badge";
+import { Input } from "../Input/input";
+import { Label } from "../Label/Label";
+export default {
+    title: "Components/Spinner",
+    component: Spinner,
+    tags: ["autodocs"],
+};
+// ============================================================================
+// DEFAULT
+// ============================================================================
+var Template = function (args) { return _jsx(Spinner, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    className: "size-4",
+};
+Default.argTypes = {
+    className: {
+        control: "text",
+        description: "Additional CSS classes for custom sizing or color",
+        table: {
+            defaultValue: { summary: "size-4" },
+            type: { summary: "string" },
+        },
+    },
+};
+// ============================================================================
+// SIZES
+// ============================================================================
+export var Sizes = function () { return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, { className: "size-3" }), _jsx("span", { className: "text-xs text-gray-500", children: "Small" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, { className: "size-4" }), _jsx("span", { className: "text-xs text-gray-500", children: "Default" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, { className: "size-6" }), _jsx("span", { className: "text-xs text-gray-500", children: "Medium" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, { className: "size-8" }), _jsx("span", { className: "text-xs text-gray-500", children: "Large" })] })] })); };
+// ============================================================================
+// IN BUTTONS
+// ============================================================================
+export var InButtons = function () { return (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs(Button, { disabled: true, children: [_jsx(Spinner, {}), "Submit"] }), _jsxs(Button, { variant: "outline", disabled: true, children: [_jsx(Spinner, {}), "Outline"] }), _jsxs(Button, { variant: "ghost", disabled: true, children: [_jsx(Spinner, {}), "Ghost"] }), _jsx(Button, { disabled: true, size: "sm", children: _jsx(Spinner, { className: "size-3" }) })] })); };
+// ============================================================================
+// IN BADGES
+// ============================================================================
+export var InBadges = function () { return (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs(Badge, { color: "blue", children: [_jsx(Spinner, { className: "size-3" }), "Default"] }), _jsxs(Badge, { color: "gray", type: "outline", children: [_jsx(Spinner, { className: "size-3" }), "Outline"] }), _jsxs(Badge, { color: "red", children: [_jsx(Spinner, { className: "size-3" }), "Destructive"] }), _jsxs(Badge, { color: "green", children: [_jsx(Spinner, { className: "size-3" }), "Success"] })] })); };
+// ============================================================================
+// IN INPUT GROUP
+// ============================================================================
+export var InInputGroup = function () { return (_jsxs("div", { className: "grid w-72 gap-2", children: [_jsx(Label, { children: "Input Group" }), _jsxs("div", { className: "relative", children: [_jsx(Input, { placeholder: "Loading...", className: "pr-10", disabled: true }), _jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: _jsx(Spinner, { className: "size-4 text-gray-400" }) })] })] })); };
+// ============================================================================
+// EMPTY STATE
+// ============================================================================
+export var EmptyState = function () { return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed border-gray-300 p-10", children: [_jsx(Spinner, { className: "size-8 text-gray-400" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm font-medium text-gray-900", children: "Loading projects" }), _jsx("p", { className: "text-sm text-gray-500", children: "Please wait while we fetch your data." })] })] })); };
+// ============================================================================
+// COLORS
+// ============================================================================
+export var Colors = function () { return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Spinner, { className: "size-6 text-blue-600" }), _jsx(Spinner, { className: "size-6 text-red-600" }), _jsx(Spinner, { className: "size-6 text-green-600" }), _jsx(Spinner, { className: "size-6 text-yellow-500" }), _jsx(Spinner, { className: "size-6 text-gray-400" })] })); };

package/dist/styles/global.css

@@ -55,6 +55,7 @@
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
@@ -298,6 +299,9 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -1055,6 +1059,9 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-default {
     cursor: default;
   }
@@ -1833,6 +1840,9 @@
   .p-9 {
     padding: calc(var(--spacing) * 9);
   }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
   .p-24 {
     padding: calc(var(--spacing) * 24);
   }
@@ -1959,6 +1969,9 @@
   .pr-9\.5 {
     padding-right: calc(var(--spacing) * 9.5);
   }
+  .pr-10 {
+    padding-right: calc(var(--spacing) * 10);
+  }
   .pr-11 {
     padding-right: calc(var(--spacing) * 11);
   }
@@ -5773,6 +5786,11 @@
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;

package/package.json

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