linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Separator/Separator.stories.jsx

@@ -0,0 +1,94 @@
+import { Separator } from "../../components/Separator/separator";
+var meta = {
+    title: "UI/Separator",
+    component: Separator,
+    tags: ["autodocs"],
+    argTypes: {
+        orientation: {
+            control: { type: "radio" },
+            options: ["horizontal", "vertical"],
+            description: "Separator orientation",
+            table: { type: { summary: '"horizontal" | "vertical"' } },
+        },
+        decorative: {
+            control: { type: "boolean" },
+            description: "Accessibility: purely visual separator",
+            table: { type: { summary: "boolean" } },
+        },
+        className: {
+            control: { type: "text" },
+            description: "Custom CSS classes",
+            table: { type: { summary: "string" } },
+        },
+    },
+};
+export default meta;
+export function SeparatorDemo(_a) {
+    var _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.decorative, decorative = _c === void 0 ? true : _c, _d = _a.className, className = _d === void 0 ? "my-4" : _d;
+    return (<div>
+      <div className="space-y-1">
+        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
+        <p className="text-muted-foreground text-sm">
+          An open-source UI component library.
+        </p>
+      </div>
+      <div className="h-20 flex items-center">
+        <Separator className={className} orientation={orientation} decorative={decorative}/>
+      </div>
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" decorative={decorative} className={className}/>
+        <div>Docs</div>
+        <Separator orientation="vertical" decorative={decorative} className={className}/>
+        <div>Source</div>
+      </div>
+    </div>);
+}
+export var Horizontal = {
+    args: {
+        orientation: "horizontal",
+        decorative: true,
+        className: "my-4",
+    },
+    render: function (args) { return (<div style={{ width: 300 }}>
+      <Separator {...args}/>
+    </div>); },
+};
+export var Vertical = {
+    args: {
+        orientation: "vertical",
+        decorative: true,
+        className: "mx-4 h-20",
+    },
+    render: function (args) { return <Separator {...args}/>; },
+};
+export var Demo = {
+    args: {
+        orientation: "horizontal",
+        decorative: true,
+        className: "my-4",
+    },
+    render: function (args) { return <SeparatorDemo {...args}/>; },
+};
+export var DecorativeTrue = {
+    args: {
+        decorative: true,
+        className: "my-4",
+    },
+    render: function (args) { return (<div>
+      <p>Above separator </p>
+      <Separator {...args}/>
+      <p>Below separator</p>
+    </div>); },
+};
+export var DecorativeFalse = {
+    args: {
+        decorative: false,
+        className: "my-4",
+    },
+    render: function (args) { return (<div>
+      <p>Above separator (decorative=false)</p>
+      <Separator {...args}/>
+      <p>Below separator</p>
+    </div>); },
+};

package/dist/src/components/Separator/index.d.ts

@@ -0,0 +1 @@
+export { Separator } from "./separator";

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

@@ -0,0 +1 @@
+export { Separator } from "./separator";

package/dist/src/components/Separator/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/src/components/Separator/separator.jsx

@@ -0,0 +1,20 @@
+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 * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../../lib/utils";
+var Separator = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.decorative, decorative = _c === void 0 ? true : _c, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (<SeparatorPrimitive.Root ref={ref} decorative={decorative} orientation={orientation} className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)} {...props}/>);
+});
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/dist/src/components/Sheet/index.d.ts

@@ -0,0 +1 @@
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from "./sheet";

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

@@ -0,0 +1 @@
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from "./sheet";

package/dist/src/components/Sheet/sheet.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "class-variance-authority";
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/src/components/Sheet/sheet.jsx

@@ -0,0 +1,73 @@
+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 * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<SheetPrimitive.Overlay className={cn("fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)} {...props} ref={ref}/>);
+});
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", {
+    variants: {
+        side: {
+            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+var SheetContent = React.forwardRef(function (_a, ref) {
+    var _b = _a.side, side = _b === void 0 ? "right" : _b, className = _a.className, children = _a.children, props = __rest(_a, ["side", "className", "children"]);
+    return (<SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side: side }), className)} {...props}>
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4"/>
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>);
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props}/>);
+};
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props}/>);
+};
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props}/>);
+});
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props}/>);
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/src/components/Sheet/sheet.stories.d.ts

@@ -0,0 +1,4 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

package/dist/src/components/Sheet/sheet.stories.jsx

@@ -0,0 +1,34 @@
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose, } from "../../components/Sheet/sheet";
+import { Button } from "../../components/Button/Button/Button";
+var meta = {
+    title: "Components/Sheet",
+    component: Sheet,
+    tags: ["autodocs"],
+};
+export default meta;
+var SIDES = ["top", "right", "bottom", "left"];
+export var Default = {
+    render: function () { return (<div className="flex flex-wrap gap-2">
+      {SIDES.map(function (side) { return (<Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button>{side.charAt(0).toUpperCase() + side.slice(1)}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>
+                {side.charAt(0).toUpperCase() + side.slice(1)} Sheet
+              </SheetTitle>
+              <SheetDescription>
+                This sheet slides in from the {side}.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="my-4">Sheet content goes here.</div>
+            <SheetFooter>
+              <SheetClose asChild>
+                <Button variant="outline">Close</Button>
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>); })}
+    </div>); },
+};

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

@@ -6,7 +6,7 @@ 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 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare namespace Skeleton {
     var Button: typeof ButtonSkeleton;
     var Input: typeof InputSkeleton;
@@ -26,7 +26,7 @@ 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;
+declare function ButtonSkeleton({ size, className, ...props }: ButtonSkeletonProps): import("react").JSX.Element;
 export declare const InputSkeletonSize: {
     sm: string;
     md: string;
@@ -36,12 +36,12 @@ type InputSkeletonProps = {
     size?: keyof typeof InputSkeletonSize;
     className?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
-declare function InputSkeleton({ size, className, ...props }: InputSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function InputSkeleton({ size, className, ...props }: InputSkeletonProps): import("react").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;
+declare function AvatarSkeleton({ size, className, ...props }: AvatarSkeletonProps): import("react").JSX.Element;
 type BadgeSkeletonProps = {
     size?: keyof typeof badgeStyles.size;
     className?: string;
@@ -51,37 +51,37 @@ export declare const BadgeSkeletonSize: {
     md: string;
     lg: string;
 };
-declare function BadgeSkeleton({ size, className, ...props }: BadgeSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeSkeleton({ size, className, ...props }: BadgeSkeletonProps): import("react").JSX.Element;
 type CardSkeletonProps = {
     className?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
-declare function CardSkeleton({ className, ...props }: CardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function CardSkeleton({ className, ...props }: CardSkeletonProps): import("react").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;
+declare function TableRowSkeleton({ columns, size, className, ...props }: TableRowSkeletonProps): import("react").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;
+declare function CheckboxSkeleton({ className, size, ...props }: CheckboxSkeletonProps): import("react").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;
+declare function SwitchSkeleton({ className, size, ...props }: SwitchSkeletonProps): import("react").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;
+declare function SelectSkeleton({ size, className, ...props }: SelectSkeletonProps): import("react").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;
+declare function IconSkeleton({ size, className, ...props }: IconSkeletonProps): import("react").JSX.Element;
 export declare const TextSkeletonSize: {
     xs: string;
     sm: string;
@@ -94,7 +94,7 @@ type TextSkeletonProps = {
     size?: keyof typeof TextSkeletonSize;
     className?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
-declare function TextSkeleton({ lines, size, className, ...props }: TextSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function TextSkeleton({ lines, size, className, ...props }: TextSkeletonProps): import("react").JSX.Element;
 export declare const HeadingSkeletonSize: {
     h1: string;
     h2: string;
@@ -107,11 +107,11 @@ type HeadingSkeletonProps = {
     size?: keyof typeof HeadingSkeletonSize;
     className?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
-declare function HeadingSkeleton({ size, className, ...props }: HeadingSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function HeadingSkeleton({ size, className, ...props }: HeadingSkeletonProps): import("react").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;
+declare function ImageSkeleton({ aspectRatio, className, isIcon, ...props }: ImageSkeletonProps): import("react").JSX.Element;
 export { Skeleton };

package/dist/src/components/Skeleton/{skeleton.js → skeleton.jsx}

@@ -1,14 +1,3 @@
-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)
@@ -20,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
 import { avatarSize } from "../Avatar/Avatar";
 import { buttonStyles } from "../Button";
@@ -33,11 +21,11 @@ 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)));
+    return (<div 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)));
+    return (<Skeleton className={cn(buttonStyles.size[size], "inline-block min-w-32", className)} {...props}/>);
 }
 export var InputSkeletonSize = {
     sm: "h-9",
@@ -46,11 +34,11 @@ export var InputSkeletonSize = {
 };
 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)));
+    return (<Skeleton 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)));
+    return (<Skeleton className={cn(avatarSize[size], "rounded-full", className)} {...props}/>);
 }
 export var BadgeSkeletonSize = {
     sm: "h-5 w-12",
@@ -59,31 +47,33 @@ export var BadgeSkeletonSize = {
 };
 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)));
+    return (<Skeleton 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)));
+    return (<Skeleton 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)); }) })));
+    return (<div className={cn("flex gap-4", className)} {...props}>
+      {Array.from({ length: columns }).map(function (_, i) { return (<Skeleton key={i} className={cn(tableBodySize[size], "flex-1")}/>); })}
+    </div>);
 }
 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));
+    return <Skeleton 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));
+    return <Skeleton 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)));
+    return (<Skeleton 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)));
+    return (<Skeleton className={cn(LUIconSizes[size], "rounded", className)} {...props}/>);
 }
 // Text/Typography Skeleton
 export var TextSkeletonSize = {
@@ -96,9 +86,11 @@ export var TextSkeletonSize = {
 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 (<Skeleton 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)); }) })));
+    return (<div className={cn("space-y-2", className)} {...props}>
+      {Array.from({ length: lines }).map(function (_, i) { return (<Skeleton key={i} className={cn(TextSkeletonSize[size], i === lines - 1 ? "w-3/4" : "w-full")}/>); })}
+    </div>);
 }
 // Heading Skeleton
 // Matches Heading component sizes: h1=text-5xl, h2=text-4xl, h3=text-3xl, h4=text-2xl, h5=text-xl, h6=text-lg
@@ -112,7 +104,7 @@ export var HeadingSkeletonSize = {
 };
 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)));
+    return (<Skeleton 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"]);
@@ -121,7 +113,11 @@ function ImageSkeleton(_a) {
         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 ") }) })) })));
+    return (<Skeleton className={cn("relative w-full overflow-hidden", aspectClasses[aspectRatio], className)} {...props}>
+      {isIcon && (<div className="absolute inset-0 flex items-center justify-center">
+          <LUIcon icon="image" className={cn("text-gray-400 opacity-60 w-1/3 h-1/3 ")}/>
+        </div>)}
+    </Skeleton>);
 }
 // Attach all variants as properties
 Skeleton.Button = ButtonSkeleton;

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

@@ -14,7 +14,7 @@ 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;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -24,7 +24,7 @@ export declare const ButtonSkeletons: {
     };
 };
 export declare const InputSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -34,7 +34,7 @@ export declare const InputSkeletons: {
     };
 };
 export declare const AvatarSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -44,7 +44,7 @@ export declare const AvatarSkeletons: {
     };
 };
 export declare const BadgeSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -54,7 +54,7 @@ export declare const BadgeSkeletons: {
     };
 };
 export declare const CardSkeleton: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -64,7 +64,7 @@ export declare const CardSkeleton: {
     };
 };
 export declare const TableRowSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -74,7 +74,7 @@ export declare const TableRowSkeletons: {
     };
 };
 export declare const FormElementsSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -84,7 +84,7 @@ export declare const FormElementsSkeletons: {
     };
 };
 export declare const IconSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -94,7 +94,7 @@ export declare const IconSkeletons: {
     };
 };
 export declare const TextSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -104,7 +104,7 @@ export declare const TextSkeletons: {
     };
 };
 export declare const HeadingSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -114,7 +114,7 @@ export declare const HeadingSkeletons: {
     };
 };
 export declare const ImageSkeletons: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -124,7 +124,7 @@ export declare const ImageSkeletons: {
     };
 };
 export declare const CompleteCardExample: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -134,7 +134,7 @@ export declare const CompleteCardExample: {
     };
 };
 export declare const CompleteFormExample: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {
@@ -144,7 +144,7 @@ export declare const CompleteFormExample: {
     };
 };
 export declare const AllVariants: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): import("react").JSX.Element;
     parameters: {
         docs: {
             description: {