linkedunion-design-kit 1.11.11 → 1.11.12

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/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.12",
   "private": false,
   "files": [
     "dist",