linkedunion-design-kit 1.9.6 → 1.9.8

package/dist/index.d.ts

@@ -29,3 +29,5 @@ export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";

package/dist/index.js

@@ -29,3 +29,5 @@ export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 export { Badge } from "./src/components/Badge/Badge";
 export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
+export { Skeleton } from "./src/components/Skeleton/skeleton";
+export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";

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

@@ -56,8 +56,8 @@ declare const meta: {
         shape: {
             control: {
                 type: "select";
-                options: string[];
             };
+            options: string[];
             description: string;
             table: {
                 type: {

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

@@ -54,8 +54,8 @@ var meta = {
         shape: {
             control: {
                 type: "select",
-                options: Object.keys(badgeStyles.shape),
             },
+            options: Object.keys(badgeStyles.shape),
             description: "The shape of the badge.",
             table: {
                 type: { summary: "string" },

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

@@ -37,9 +37,9 @@ import LUIcon from "../../Icons/LUIcon";
 import { buttonStyles } from "..";
 export var variant = {
     fill: "",
-    link: "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent !p-0 underline-offset-4 hover:underline border-none",
-    outline: "border bg-transparent",
-    ghost: "bg-transparent border-none",
+    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",
+    outline: "border lu-bg-transparent",
+    ghost: "lu-bg-transparent border-none",
 };
 var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-blue-200 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer", {
     variants: {

package/dist/src/components/Pagination/pagination.js

@@ -32,7 +32,7 @@ var Pagination = function (_a) {
 Pagination.displayName = "Pagination";
 var PaginationContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("ul", __assign({ ref: ref, className: cn("flex flex-row items-center gap-1", className) }, props)));
+    return (_jsx("ul", __assign({ "data-slot": "reset-bs-ul", ref: ref, className: cn("flex flex-row items-center gap-1", className) }, props)));
 });
 PaginationContent.displayName = "PaginationContent";
 var PaginationItem = React.forwardRef(function (_a, ref) {
@@ -42,7 +42,7 @@ var PaginationItem = React.forwardRef(function (_a, ref) {
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = function (_a) {
     var className = _a.className, isActive = _a.isActive, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.color, color = _c === void 0 ? "gray" : _c, _d = _a.variant, variant = _d === void 0 ? "ghost" : _d, props = __rest(_a, ["className", "isActive", "size", "color", "variant"]);
-    return (_jsx("a", __assign({ "aria-current": isActive ? "page" : undefined, className: cn(buttonVariants({
+    return (_jsx("a", __assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "reset-bs-link", className: cn(buttonVariants({
             variant: isActive ? (variant === "link" ? variant : "fill") : variant,
             size: size,
             color: color,
@@ -51,7 +51,7 @@ var PaginationLink = function (_a) {
 PaginationLink.displayName = "PaginationLink";
 var PaginationPrevious = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to previous page", size: "md", className: cn("gap-1 pl-2.5", className) }, props, { children: [_jsx(LUIcon, { icon: "arrow-left" }), _jsx("span", { children: "Previous" })] })));
+    return (_jsxs(PaginationLink, __assign({ "aria-label": "Go to previous page", size: "md", className: cn("gap-1 pl-2.5", className) }, props, { children: [_jsx(LUIcon, { icon: "arrow-left" }), "Previous"] })));
 };
 PaginationPrevious.displayName = "PaginationPrevious";
 var PaginationNext = function (_a) {

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

@@ -0,0 +1,117 @@
+import { avatarSize } from "../Avatar/Avatar";
+import { buttonStyles } from "../Button";
+import { badgeStyles } from "../Badge";
+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";
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace Skeleton {
+    var Button: typeof ButtonSkeleton;
+    var Input: typeof InputSkeleton;
+    var Avatar: typeof AvatarSkeleton;
+    var Badge: typeof BadgeSkeleton;
+    var Card: typeof CardSkeleton;
+    var TableRow: typeof TableRowSkeleton;
+    var Checkbox: typeof CheckboxSkeleton;
+    var Switch: typeof SwitchSkeleton;
+    var Select: typeof SelectSkeleton;
+    var Icon: typeof IconSkeleton;
+    var Text: typeof TextSkeleton;
+    var Heading: typeof HeadingSkeleton;
+    var Image: typeof ImageSkeleton;
+}
+type ButtonSkeletonProps = {
+    size?: keyof typeof buttonStyles.size;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function ButtonSkeleton({ size, className, ...props }: ButtonSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const InputSkeletonSize: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+type InputSkeletonProps = {
+    size?: keyof typeof InputSkeletonSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function InputSkeleton({ size, className, ...props }: InputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type AvatarSkeletonProps = {
+    size?: keyof typeof avatarSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function AvatarSkeleton({ size, className, ...props }: AvatarSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type BadgeSkeletonProps = {
+    size?: keyof typeof badgeStyles.size;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const BadgeSkeletonSize: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+declare function BadgeSkeleton({ size, className, ...props }: BadgeSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type CardSkeletonProps = {
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function CardSkeleton({ className, ...props }: CardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type TableRowSkeletonProps = {
+    columns?: number;
+    size?: keyof typeof tableBodySize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function TableRowSkeleton({ columns, size, className, ...props }: TableRowSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type CheckboxSkeletonProps = {
+    className?: string;
+    size?: keyof typeof checkboxSize;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function CheckboxSkeleton({ className, size, ...props }: CheckboxSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type SwitchSkeletonProps = {
+    className?: string;
+    size?: keyof typeof SwitchSizes;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function SwitchSkeleton({ className, size, ...props }: SwitchSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type SelectSkeletonProps = {
+    size?: keyof typeof comboboxSizes;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function SelectSkeleton({ size, className, ...props }: SelectSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type IconSkeletonProps = {
+    size?: keyof typeof LUIconSizes;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function IconSkeleton({ size, className, ...props }: IconSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const TextSkeletonSize: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+type TextSkeletonProps = {
+    lines?: number;
+    size?: keyof typeof TextSkeletonSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function TextSkeleton({ lines, size, className, ...props }: TextSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const HeadingSkeletonSize: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+};
+type HeadingSkeletonProps = {
+    size?: keyof typeof HeadingSkeletonSize;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function HeadingSkeleton({ size, className, ...props }: HeadingSkeletonProps): import("react/jsx-runtime").JSX.Element;
+type ImageSkeletonProps = {
+    aspectRatio?: "square" | "video" | "portrait";
+    className?: string;
+    isIcon?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function ImageSkeleton({ aspectRatio, className, isIcon, ...props }: ImageSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

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,155 @@
+import { Meta } from "@storybook/react";
+declare const SKELETON_VARIANTS: string[];
+type SkeletonVariant = (typeof SKELETON_VARIANTS)[number];
+interface SkeletonStoryArgs {
+    className?: string;
+    variant?: SkeletonVariant;
+    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;
+            };
+        };
+    };
+};