linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Skeleton/skeleton.js

@@ -0,0 +1,140 @@
+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 { cn } from "../../lib/utils";
+import { avatarSize } from "../Avatar/Avatar";
+import { buttonStyles } from "../Button";
+import { tableBodySize } from "../Table";
+import { comboboxSizes } from "../Dropdown/Combobox";
+import { iconSize as LUIconSizes } from "../Icons";
+import { checkboxSize } from "../Checkbox/checkbox";
+import { size as SwitchSizes } from "../Switch/switch";
+import LUIcon from "../Icons/LUIcon";
+// Base Skeleton Component
+function Skeleton(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", __assign({ className: cn("animate-pulse rounded-md bg-gray-100", className) }, props)));
+}
+function ButtonSkeleton(_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, className = _a.className, props = __rest(_a, ["size", "className"]);
+    return (_jsx(Skeleton, __assign({ className: cn(buttonStyles.size[size], "inline-block min-w-32", className) }, props)));
+}
+export var InputSkeletonSize = {
+    sm: "h-9",
+    md: "h-11",
+    lg: "h-12",
+};
+function InputSkeleton(_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, className = _a.className, props = __rest(_a, ["size", "className"]);
+    return (_jsx(Skeleton, __assign({ className: cn(InputSkeletonSize[size], "w-full rounded-md", className) }, props)));
+}
+function AvatarSkeleton(_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, className = _a.className, props = __rest(_a, ["size", "className"]);
+    return (_jsx(Skeleton, __assign({ className: cn(avatarSize[size], "rounded-full", className) }, props)));
+}
+export var BadgeSkeletonSize = {
+    sm: "h-5 w-12",
+    md: "h-6 w-16",
+    lg: "h-7 w-28",
+};
+function BadgeSkeleton(_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, className = _a.className, props = __rest(_a, ["size", "className"]);
+    return (_jsx(Skeleton, __assign({ className: cn(BadgeSkeletonSize[size], "rounded-full", className) }, props)));
+}
+function CardSkeleton(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(Skeleton, __assign({ className: cn("h-48 w-full rounded-lg", className) }, props)));
+}
+function TableRowSkeleton(_a) {
+    var _b = _a.columns, columns = _b === void 0 ? 4 : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, props = __rest(_a, ["columns", "size", "className"]);
+    return (_jsx("div", __assign({ className: cn("flex gap-4", className) }, props, { children: Array.from({ length: columns }).map(function (_, i) { return (_jsx(Skeleton, { className: cn(tableBodySize[size], "flex-1") }, i)); }) })));
+}
+function CheckboxSkeleton(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    return _jsx(Skeleton, __assign({ className: cn(checkboxSize[size], className) }, props));
+}
+function SwitchSkeleton(_a) {
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
+    return _jsx(Skeleton, __assign({ className: cn(SwitchSizes[size], className) }, props));
+}
+function SelectSkeleton(_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, className = _a.className, props = __rest(_a, ["size", "className"]);
+    return (_jsx(Skeleton, __assign({ className: cn(comboboxSizes[size], "w-full rounded-md", className) }, props)));
+}
+function IconSkeleton(_a) {
+    var _b = _a.size, size = _b === void 0 ? "md" : _b, className = _a.className, props = __rest(_a, ["size", "className"]);
+    return (_jsx(Skeleton, __assign({ className: cn(LUIconSizes[size], "rounded", className) }, props)));
+}
+// Text/Typography Skeleton
+export var TextSkeletonSize = {
+    xs: "h-3",
+    sm: "h-3.5",
+    md: "h-4",
+    lg: "h-[1.125rem]",
+    xl: "h-5",
+};
+function TextSkeleton(_a) {
+    var _b = _a.lines, lines = _b === void 0 ? 1 : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, props = __rest(_a, ["lines", "size", "className"]);
+    if (lines === 1) {
+        return (_jsx(Skeleton, __assign({ className: cn(TextSkeletonSize[size], "w-full", className) }, props)));
+    }
+    return (_jsx("div", __assign({ className: cn("space-y-2", className) }, props, { children: Array.from({ length: lines }).map(function (_, i) { return (_jsx(Skeleton, { className: cn(TextSkeletonSize[size], i === lines - 1 ? "w-3/4" : "w-full") }, i)); }) })));
+}
+// Heading Skeleton
+// Matches Heading component sizes: h1=text-5xl, h2=text-4xl, h3=text-3xl, h4=text-2xl, h5=text-xl, h6=text-lg
+export var HeadingSkeletonSize = {
+    h1: "h-12", // text-5xl = 48px
+    h2: "h-10", // text-4xl = 36px
+    h3: "h-8", // text-3xl = 30px
+    h4: "h-7", // text-2xl = 24px
+    h5: "h-6", // text-xl = 20px
+    h6: "h-[1.125rem]", // text-lg = 18px
+};
+function HeadingSkeleton(_a) {
+    var _b = _a.size, size = _b === void 0 ? "h2" : _b, className = _a.className, props = __rest(_a, ["size", "className"]);
+    return (_jsx(Skeleton, __assign({ className: cn(HeadingSkeletonSize[size], "w-3/4", className) }, props)));
+}
+function ImageSkeleton(_a) {
+    var _b = _a.aspectRatio, aspectRatio = _b === void 0 ? "square" : _b, className = _a.className, _c = _a.isIcon, isIcon = _c === void 0 ? true : _c, props = __rest(_a, ["aspectRatio", "className", "isIcon"]);
+    var aspectClasses = {
+        square: "aspect-square",
+        video: "aspect-video",
+        portrait: "aspect-[3/4]",
+    };
+    return (_jsx(Skeleton, __assign({ className: cn("relative w-full overflow-hidden", aspectClasses[aspectRatio], className) }, props, { children: isIcon && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(LUIcon, { icon: "image", className: cn("text-gray-400 opacity-60 w-1/3 h-1/3 ") }) })) })));
+}
+// Attach all variants as properties
+Skeleton.Button = ButtonSkeleton;
+Skeleton.Input = InputSkeleton;
+Skeleton.Avatar = AvatarSkeleton;
+Skeleton.Badge = BadgeSkeleton;
+Skeleton.Card = CardSkeleton;
+Skeleton.TableRow = TableRowSkeleton;
+Skeleton.Checkbox = CheckboxSkeleton;
+Skeleton.Switch = SwitchSkeleton;
+Skeleton.Select = SelectSkeleton;
+Skeleton.Icon = IconSkeleton;
+Skeleton.Text = TextSkeleton;
+Skeleton.Heading = HeadingSkeleton;
+Skeleton.Image = ImageSkeleton;
+export { Skeleton };

package/dist/src/components/Skeleton/skeleton.stories.d.ts

@@ -0,0 +1,153 @@
+import { Meta } from "@storybook/react";
+interface SkeletonStoryArgs {
+    className?: string;
+    variant?: "default" | "button" | "input" | "avatar" | "badge" | "card" | "tableRow" | "checkbox" | "switch" | "select" | "icon" | "text" | "heading" | "image";
+    size?: string;
+    columns?: number;
+    lines?: number;
+    aspectRatio?: "square" | "video" | "portrait";
+    isIcon?: boolean;
+}
+declare const meta: Meta<SkeletonStoryArgs>;
+export default meta;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SkeletonStoryArgs>;
+export declare const ButtonSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const InputSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AvatarSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const BadgeSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const CardSkeleton: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const TableRowSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const FormElementsSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const IconSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const TextSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const HeadingSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const ImageSkeletons: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const CompleteCardExample: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const CompleteFormExample: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AllVariants: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};