@kala-ui/react 0.0.1-beta.1

package/dist/src/components/skeleton/skeleton-patterns.test.js

@@ -0,0 +1,248 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SkeletonAvatar, SkeletonButton, SkeletonCardContent, SkeletonCircle, SkeletonHeader, SkeletonParagraph, SkeletonRectangle, SkeletonText, } from "./skeleton-patterns";
+describe("Skeleton Patterns", () => {
+    describe("SkeletonText", () => {
+        it("renders with default 3 lines", () => {
+            const { container } = render(_jsx(SkeletonText, {}));
+            const skeletons = container.querySelectorAll('[data-testid^="skeleton-text-line-"]');
+            expect(skeletons).toHaveLength(3);
+        });
+        it("renders with custom line count", () => {
+            const { container } = render(_jsx(SkeletonText, { lines: 5 }));
+            const skeletons = container.querySelectorAll('[data-testid^="skeleton-text-line-"]');
+            expect(skeletons).toHaveLength(5);
+        });
+        it("applies custom last line width", () => {
+            const { container } = render(_jsx(SkeletonText, { lastLineWidth: "40%" }));
+            const skeletons = container.querySelectorAll('[style*="width: 40%"]');
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonText, { className: "custom-class" }));
+            const wrapper = container.querySelector(".custom-class");
+            expect(wrapper).toBeInTheDocument();
+        });
+        it("uses default last line width of 75%", () => {
+            const { container } = render(_jsx(SkeletonText, {}));
+            const skeletons = container.querySelectorAll('[style*="width: 75%"]');
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+    });
+    describe("SkeletonCircle", () => {
+        it("renders circular skeleton", () => {
+            const { container } = render(_jsx(SkeletonCircle, {}));
+            const circle = container.querySelector(".rounded-full");
+            expect(circle).toBeInTheDocument();
+        });
+        it("applies custom size", () => {
+            const { container } = render(_jsx(SkeletonCircle, { size: "5rem" }));
+            const circle = container.querySelector('[style*="width: 5rem"]');
+            expect(circle).toBeInTheDocument();
+        });
+        it("uses default size of 3rem", () => {
+            const { container } = render(_jsx(SkeletonCircle, {}));
+            const circle = container.querySelector('[style*="width: 3rem"]');
+            expect(circle).toBeInTheDocument();
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonCircle, { className: "custom-class" }));
+            const circle = container.querySelector(".custom-class");
+            expect(circle).toBeInTheDocument();
+        });
+        it("has equal width and height", () => {
+            const { container } = render(_jsx(SkeletonCircle, { size: "4rem" }));
+            const circle = container.querySelector(".rounded-full");
+            expect(circle).toHaveStyle({ width: "4rem", height: "4rem" });
+        });
+    });
+    describe("SkeletonRectangle", () => {
+        it("renders rectangular skeleton", () => {
+            const { container } = render(_jsx(SkeletonRectangle, {}));
+            const rect = container.querySelector('[style*="width: 100%"]');
+            expect(rect).toBeInTheDocument();
+        });
+        it("applies custom width", () => {
+            const { container } = render(_jsx(SkeletonRectangle, { width: "200px" }));
+            const rect = container.querySelector('[style*="width: 200px"]');
+            expect(rect).toBeInTheDocument();
+        });
+        it("applies custom height", () => {
+            const { container } = render(_jsx(SkeletonRectangle, { height: "150px" }));
+            const rect = container.querySelector('[style*="height: 150px"]');
+            expect(rect).toBeInTheDocument();
+        });
+        it("applies rounded-md by default", () => {
+            const { container } = render(_jsx(SkeletonRectangle, {}));
+            const rect = container.querySelector(".rounded-md");
+            expect(rect).toBeInTheDocument();
+        });
+        it("applies custom rounded variant", () => {
+            const { container } = render(_jsx(SkeletonRectangle, { rounded: "lg" }));
+            const rect = container.querySelector(".rounded-lg");
+            expect(rect).toBeInTheDocument();
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonRectangle, { className: "custom-class" }));
+            const rect = container.querySelector(".custom-class");
+            expect(rect).toBeInTheDocument();
+        });
+    });
+    describe("SkeletonAvatar", () => {
+        it("renders avatar skeleton", () => {
+            const { container } = render(_jsx(SkeletonAvatar, {}));
+            const avatar = container.querySelector(".rounded-full");
+            expect(avatar).toBeInTheDocument();
+        });
+        it("renders with sm size", () => {
+            const { container } = render(_jsx(SkeletonAvatar, { size: "sm" }));
+            const avatar = container.querySelector('[style*="width: 2rem"]');
+            expect(avatar).toBeInTheDocument();
+        });
+        it("renders with md size (default)", () => {
+            const { container } = render(_jsx(SkeletonAvatar, { size: "md" }));
+            const avatar = container.querySelector('[style*="width: 3rem"]');
+            expect(avatar).toBeInTheDocument();
+        });
+        it("renders with lg size", () => {
+            const { container } = render(_jsx(SkeletonAvatar, { size: "lg" }));
+            const avatar = container.querySelector('[style*="width: 4rem"]');
+            expect(avatar).toBeInTheDocument();
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonAvatar, { className: "custom-class" }));
+            const avatar = container.querySelector(".custom-class");
+            expect(avatar).toBeInTheDocument();
+        });
+    });
+    describe("SkeletonParagraph", () => {
+        it("renders with default 2 paragraphs", () => {
+            const { container } = render(_jsx(SkeletonParagraph, {}));
+            // Each paragraph should have a data-testid pattern
+            const skeletons = container.querySelectorAll('[data-testid^="skeleton-text-line-"]');
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("renders with custom paragraph count", () => {
+            const { container } = render(_jsx(SkeletonParagraph, { paragraphs: 3 }));
+            const skeletons = container.querySelectorAll('[data-testid^="skeleton-text-line-"]');
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("renders with custom line counts per paragraph", () => {
+            const { container } = render(_jsx(SkeletonParagraph, { lines: [2, 4, 3] }));
+            const skeletons = container.querySelectorAll('[data-testid^="skeleton-text-line-"]');
+            // Should have 2 + 4 + 3 = 9 lines total
+            expect(skeletons.length).toBe(9);
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonParagraph, { className: "custom-class" }));
+            const wrapper = container.querySelector(".custom-class");
+            expect(wrapper).toBeInTheDocument();
+        });
+    });
+    describe("SkeletonHeader", () => {
+        it("renders header with title and subtitle", () => {
+            const { container } = render(_jsx(SkeletonHeader, {}));
+            const skeletons = container.querySelectorAll('[data-testid^="skeleton-text-line-"]');
+            // Should have title and subtitle (2 lines)
+            expect(skeletons.length).toBe(2);
+        });
+        it("renders header with only title", () => {
+            const { container } = render(_jsx(SkeletonHeader, { showSubtitle: false }));
+            const skeletons = container.querySelectorAll('[data-testid^="skeleton-text-line-"]');
+            // Should have only title (1 line)
+            expect(skeletons.length).toBe(1);
+        });
+        it("applies custom title width", () => {
+            const { container } = render(_jsx(SkeletonHeader, { titleWidth: "80%" }));
+            const skeletons = container.querySelectorAll('[style*="width: 80%"]');
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("applies custom subtitle width", () => {
+            const { container } = render(_jsx(SkeletonHeader, { subtitleWidth: "50%" }));
+            const skeletons = container.querySelectorAll('[style*="width: 50%"]');
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonHeader, { className: "custom-class" }));
+            const wrapper = container.querySelector(".custom-class");
+            expect(wrapper).toBeInTheDocument();
+        });
+    });
+    describe("SkeletonButton", () => {
+        it("renders button skeleton", () => {
+            const { container } = render(_jsx(SkeletonButton, {}));
+            const button = container.querySelector('[style*="width: auto"]');
+            expect(button).toBeInTheDocument();
+        });
+        it("renders with sm size", () => {
+            const { container } = render(_jsx(SkeletonButton, { size: "sm" }));
+            const button = container.querySelector(".h-8");
+            expect(button).toBeInTheDocument();
+        });
+        it("renders with md size (default)", () => {
+            const { container } = render(_jsx(SkeletonButton, { size: "md" }));
+            const button = container.querySelector(".h-10");
+            expect(button).toBeInTheDocument();
+        });
+        it("renders with lg size", () => {
+            const { container } = render(_jsx(SkeletonButton, { size: "lg" }));
+            const button = container.querySelector(".h-12");
+            expect(button).toBeInTheDocument();
+        });
+        it("applies custom width", () => {
+            const { container } = render(_jsx(SkeletonButton, { width: "10rem" }));
+            const button = container.querySelector('[style*="width: 10rem"]');
+            expect(button).toBeInTheDocument();
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonButton, { className: "custom-class" }));
+            const button = container.querySelector(".custom-class");
+            expect(button).toBeInTheDocument();
+        });
+    });
+    describe("SkeletonCardContent", () => {
+        it("renders card content with header, content, and footer", () => {
+            render(_jsx(SkeletonCardContent, {}));
+            const skeletons = screen.getAllByTestId(/skeleton/);
+            // Should have header (2 lines), content (3 lines), footer (2 buttons)
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("renders without header", () => {
+            render(_jsx(SkeletonCardContent, { showHeader: false }));
+            const skeletons = screen.getAllByTestId(/skeleton/);
+            // Should have content and footer only
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("renders without footer", () => {
+            render(_jsx(SkeletonCardContent, { showFooter: false }));
+            const skeletons = screen.getAllByTestId(/skeleton/);
+            // Should have header and content only
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("renders with custom content lines", () => {
+            render(_jsx(SkeletonCardContent, { contentLines: 5 }));
+            const skeletons = screen.getAllByTestId(/skeleton-text-line/);
+            // Should have header (2 lines) + content (5 lines) = 7 lines
+            expect(skeletons.length).toBe(7);
+        });
+        it("applies custom className", () => {
+            const { container } = render(_jsx(SkeletonCardContent, { className: "custom-class" }));
+            const wrapper = container.querySelector(".custom-class");
+            expect(wrapper).toBeInTheDocument();
+        });
+    });
+    describe("Pattern Composition", () => {
+        it("allows combining multiple patterns", () => {
+            render(_jsxs("div", { className: "space-y-4", children: [_jsx(SkeletonHeader, { showSubtitle: false }), _jsx(SkeletonText, { lines: 3 }), _jsx(SkeletonButton, { width: "8rem" })] }));
+            const skeletons = screen.getAllByTestId(/skeleton/);
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+        it("allows nesting patterns", () => {
+            render(_jsxs("div", { className: "flex gap-4", children: [_jsx(SkeletonAvatar, { size: "lg" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(SkeletonHeader, {}), _jsx(SkeletonText, { lines: 2 })] })] }));
+            const skeletons = screen.getAllByTestId(/skeleton/);
+            expect(skeletons.length).toBeGreaterThan(0);
+        });
+    });
+});
+//# sourceMappingURL=skeleton-patterns.test.js.map

package/dist/src/components/skeleton/skeleton-patterns.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-patterns.test.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton-patterns.test.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/skeleton/skeleton-wrapper.d.ts

@@ -0,0 +1,48 @@
+/**
+ * SkeletonWrapper Component
+ *
+ * Provides smooth fade transition from skeleton loading state to actual content.
+ * Automatically handles the transition with proper timing and reduced-motion support.
+ */
+import * as React from "react";
+export interface SkeletonWrapperProps {
+    /**
+     * Whether content is still loading
+     */
+    isLoading: boolean;
+    /**
+     * Skeleton component to show while loading
+     */
+    skeleton: React.ReactNode;
+    /**
+     * Actual content to show when loaded
+     */
+    children: React.ReactNode;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Transition duration in milliseconds (default: 300)
+     */
+    duration?: number;
+    /**
+     * Enable/disable transition (default: true)
+     */
+    transition?: boolean;
+}
+/**
+ * Component that handles smooth fade transition from skeleton to content.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonWrapper
+ *   isLoading={!data}
+ *   skeleton={<SkeletonCard />}
+ * >
+ *   <DataCard data={data} />
+ * </SkeletonWrapper>
+ * ```
+ */
+export declare function SkeletonWrapper({ isLoading, skeleton, children, className, duration, transition, }: SkeletonWrapperProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton-wrapper.d.ts.map

package/dist/src/components/skeleton/skeleton-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton-wrapper.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,oBAAoB;IACpC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAc,EACd,UAAiB,GACjB,EAAE,oBAAoB,2CAmDtB"}

package/dist/src/components/skeleton/skeleton-wrapper.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SkeletonWrapper Component
+ *
+ * Provides smooth fade transition from skeleton loading state to actual content.
+ * Automatically handles the transition with proper timing and reduced-motion support.
+ */
+import * as React from "react";
+import { cn } from "../../lib/utils";
+/**
+ * Component that handles smooth fade transition from skeleton to content.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonWrapper
+ *   isLoading={!data}
+ *   skeleton={<SkeletonCard />}
+ * >
+ *   <DataCard data={data} />
+ * </SkeletonWrapper>
+ * ```
+ */
+export function SkeletonWrapper({ isLoading, skeleton, children, className, duration = 300, transition = true, }) {
+    const [showSkeleton, setShowSkeleton] = React.useState(isLoading);
+    React.useEffect(() => {
+        if (!isLoading && showSkeleton && transition) {
+            // Delay hiding skeleton to allow fade-out animation
+            const timeout = setTimeout(() => {
+                setShowSkeleton(false);
+            }, duration);
+            return () => clearTimeout(timeout);
+        }
+        if (isLoading && !showSkeleton) {
+            setShowSkeleton(true);
+        }
+        if (!transition) {
+            setShowSkeleton(isLoading);
+        }
+        return undefined;
+    }, [isLoading, showSkeleton, duration, transition]);
+    return (_jsxs("div", { "data-slot": "skeleton-wrapper", className: cn("relative", className), children: [showSkeleton && (_jsx("div", { className: cn("transition-opacity ease-out", isLoading ? "opacity-100" : "opacity-0 animate-fade-out"), style: transition ? { transitionDuration: `${duration}ms` } : undefined, "aria-hidden": !isLoading, children: skeleton })), !showSkeleton && (_jsx("div", { className: "animate-fade-in transition-opacity ease-in", style: transition ? { transitionDuration: `${duration}ms` } : undefined, children: children }))] }));
+}
+//# sourceMappingURL=skeleton-wrapper.js.map

package/dist/src/components/skeleton/skeleton-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-wrapper.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton-wrapper.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AA6BrC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,eAAe,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,UAAU,GAAG,IAAI,GACK;IACtB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAElE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,SAAS,IAAI,YAAY,IAAI,UAAU,EAAE,CAAC;YAC9C,oDAAoD;YACpD,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC/B,eAAe,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC,EAAE,QAAQ,CAAC,CAAC;YACb,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;QACD,IAAI,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC;YAChC,eAAe,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,CAAC;YACjB,eAAe,CAAC,SAAS,CAAC,CAAC;QAC5B,CAAC;QACD,OAAO,SAAS,CAAC;IAClB,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAEpD,OAAO,CACN,4BAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,aAEpE,YAAY,IAAI,CAChB,cACC,SAAS,EAAE,EAAE,CACZ,6BAA6B,EAC7B,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,4BAA4B,CACxD,EACD,KAAK,EACJ,UAAU,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,iBAEpD,CAAC,SAAS,YAEtB,QAAQ,GACJ,CACN,EAGA,CAAC,YAAY,IAAI,CACjB,cACC,SAAS,EAAC,4CAA4C,EACtD,KAAK,EACJ,UAAU,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,YAGhE,QAAQ,GACJ,CACN,IACI,CACN,CAAC;AACH,CAAC"}

package/dist/src/components/skeleton/skeleton-wrapper.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=skeleton-wrapper.test.d.ts.map

package/dist/src/components/skeleton/skeleton-wrapper.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-wrapper.test.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton-wrapper.test.tsx"],"names":[],"mappings":""}

package/dist/src/components/skeleton/skeleton-wrapper.test.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Skeleton } from "./skeleton";
+import { SkeletonWrapper } from "./skeleton-wrapper";
+describe("SkeletonWrapper", () => {
+    it("renders skeleton when loading", () => {
+        render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        expect(screen.getByTestId("skeleton")).toBeInTheDocument();
+        expect(screen.queryByText("Content")).not.toBeInTheDocument();
+    });
+    it("renders content when not loading", async () => {
+        render(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        await waitFor(() => {
+            expect(screen.getByTestId("content")).toBeInTheDocument();
+        });
+    });
+    it("applies default duration of 300ms", () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const skeletonWrapper = container.querySelector('[class*="transition-opacity"]');
+        expect(skeletonWrapper).toHaveStyle({ transitionDuration: "300ms" });
+    });
+    it("applies custom duration", () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), duration: 500, children: _jsx("div", { children: "Content" }) }));
+        const skeletonWrapper = container.querySelector('[class*="transition-opacity"]');
+        expect(skeletonWrapper).toHaveStyle({ transitionDuration: "500ms" });
+    });
+    it("applies custom className to container", () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), className: "custom-class", children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="skeleton-wrapper"]');
+        expect(wrapper).toHaveClass("custom-class");
+    });
+    it("has relative positioning on container", () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="skeleton-wrapper"]');
+        expect(wrapper).toHaveClass("relative");
+    });
+    it("skeleton has aria-hidden when not loading during transition", () => {
+        const { container, rerender } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        rerender(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const skeleton = container.querySelector('[aria-hidden="true"]');
+        expect(skeleton).toBeInTheDocument();
+    });
+    it("skeleton is visible when loading", () => {
+        render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const skeleton = screen.getByText("Loading...");
+        expect(skeleton).toBeInTheDocument();
+        expect(skeleton.parentElement).toHaveAttribute("aria-hidden", "false");
+    });
+    it("transitions from loading to loaded state", async () => {
+        const { rerender } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        expect(screen.getByTestId("skeleton")).toBeInTheDocument();
+        rerender(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        // Skeleton should still be visible initially for fade-out
+        expect(screen.getByTestId("skeleton")).toBeInTheDocument();
+        // After duration, content should appear
+        await waitFor(() => {
+            expect(screen.getByTestId("content")).toBeInTheDocument();
+        }, { timeout: 500 });
+    });
+    it("transitions from loaded to loading state", () => {
+        const { rerender } = render(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        rerender(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        expect(screen.getByTestId("skeleton")).toBeInTheDocument();
+    });
+    it("cleans up timeout on unmount", () => {
+        const { unmount, rerender } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        // Trigger state change that sets timeout
+        rerender(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        // Unmount should not throw errors
+        expect(() => unmount()).not.toThrow();
+    });
+    it("handles rapid state changes", async () => {
+        const { rerender } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), duration: 100, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        // Rapid toggle
+        rerender(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), duration: 100, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        rerender(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), duration: 100, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        // Should show skeleton
+        expect(screen.getByTestId("skeleton")).toBeInTheDocument();
+    });
+    it("skeleton has opacity-100 when loading", () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const skeleton = container.querySelector('[class*="opacity-100"]');
+        expect(skeleton).toBeInTheDocument();
+    });
+    it("skeleton has opacity-0 when transitioning out", () => {
+        const { container, rerender } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        rerender(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const skeleton = container.querySelector('[class*="opacity-0"]');
+        expect(skeleton).toBeInTheDocument();
+    });
+    it("content has fade-in animation class", async () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        await waitFor(() => {
+            const content = container.querySelector('[class*="animate-fade-in"]');
+            expect(content).toBeInTheDocument();
+        });
+    });
+    it("skeleton has fade-out animation class when transitioning", () => {
+        const { container, rerender } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        rerender(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const skeleton = container.querySelector('[class*="animate-fade-out"]');
+        expect(skeleton).toBeInTheDocument();
+    });
+    it("renders multiple children in content", async () => {
+        render(_jsxs(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: [_jsx("div", { children: "Child 1" }), _jsx("div", { children: "Child 2" }), _jsx("div", { children: "Child 3" })] }));
+        await waitFor(() => {
+            expect(screen.getByText("Child 1")).toBeInTheDocument();
+            expect(screen.getByText("Child 2")).toBeInTheDocument();
+            expect(screen.getByText("Child 3")).toBeInTheDocument();
+        });
+    });
+    it("uses ease-out timing for skeleton", () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        const skeleton = container.querySelector('[class*="ease-out"]');
+        expect(skeleton).toBeInTheDocument();
+    });
+    it("uses ease-in timing for content", async () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { children: "Loading..." }), children: _jsx("div", { children: "Content" }) }));
+        await waitFor(() => {
+            const content = container.querySelector('[class*="ease-in"]');
+            expect(content).toBeInTheDocument();
+        });
+    });
+    it("disables transition when transition prop is false", async () => {
+        const { rerender } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), transition: false, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        expect(screen.getByTestId("skeleton")).toBeInTheDocument();
+        rerender(_jsx(SkeletonWrapper, { isLoading: false, skeleton: _jsx("div", { "data-testid": "skeleton", children: "Loading..." }), transition: false, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        // Content should appear immediately without delay
+        await waitFor(() => {
+            expect(screen.getByTestId("content")).toBeInTheDocument();
+        });
+    });
+    it("works with Skeleton component", () => {
+        const { container } = render(_jsx(SkeletonWrapper, { isLoading: true, skeleton: _jsx(Skeleton, { className: "w-full h-4" }), children: _jsx("div", { children: "Content" }) }));
+        const skeleton = container.querySelector('[data-slot="skeleton"]');
+        // Should render skeleton
+        expect(skeleton).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=skeleton-wrapper.test.js.map

package/dist/src/components/skeleton/skeleton-wrapper.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-wrapper.test.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton-wrapper.test.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface SkeletonProps extends React.ComponentProps<"div"> {
+    /**
+     * Enable fade transition instead of pulse animation
+     */
+    fade?: boolean;
+    /**
+     * Fade duration in milliseconds (default: 300)
+     */
+    fadeDuration?: number;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Skeleton component for loading placeholder
+ *
+ * Supports both pulse and fade modes for different loading states.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,QAAA,MAAM,QAAQ,mGAgCb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+/**
+ * Skeleton component for loading placeholder
+ *
+ * Supports both pulse and fade modes for different loading states.
+ */
+const Skeleton = React.forwardRef(({ className, fade = false, fadeDuration = 300, style, "data-testid": dataTestId, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, "data-slot": "skeleton", "data-testid": dataTestId, className: cn("bg-muted dark:bg-muted/70 rounded-md", fade ? "animate-fade-in" : "animate-pulse", className), style: {
+            ...style,
+            transitionDuration: fade
+                ? `${fadeDuration}ms`
+                : style?.transitionDuration,
+        }, ...props }));
+});
+Skeleton.displayName = "Skeleton";
+export { Skeleton };
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAiBrC;;;;GAIG;AACH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAChC,CACC,EACC,SAAS,EACT,IAAI,GAAG,KAAK,EACZ,YAAY,GAAG,GAAG,EAClB,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,OAAO,CACN,cACC,GAAG,EAAE,GAAG,eACE,UAAU,iBACP,UAAU,EACvB,SAAS,EAAE,EAAE,CACZ,sCAAsC,EACtC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,EAC1C,SAAS,CACT,EACD,KAAK,EAAE;YACN,GAAG,KAAK;YACR,kBAAkB,EAAE,IAAI;gBACvB,CAAC,CAAC,GAAG,YAAY,IAAI;gBACrB,CAAC,CAAC,KAAK,EAAE,kBAAkB;SAC5B,KACG,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FadeMode: Story;
+export declare const CustomSizes: Story;
+export declare const PatternsLibrary: Story;
+export declare const Card: Story;
+export declare const List: Story;
+export declare const UserProfile: Story;
+export declare const DataGrid: Story;
+export declare const Article: Story;
+export declare const WithWrapper: Story;
+export declare const WrapperCustomDuration: Story;
+export declare const WrapperMultipleCards: Story;
+//# sourceMappingURL=skeleton.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAiBvD,QAAA,MAAM,IAAI,EAAE,IAYX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAMnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KA2E7B,CAAC;AAMF,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,KAiCzB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAmCnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAqClC,CAAC"}