@kala-ui/react 0.0.1-beta.1

package/dist/src/components/navigation-menu/navigation-menu.test.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "../button";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from "./navigation-menu";
+afterEach(() => {
+    vi.clearAllMocks();
+});
+describe("NavigationMenu", () => {
+    it("should render navigation menu", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        expect(screen.getByText("Home")).toBeInTheDocument();
+    });
+    it("should render multiple navigation items", () => {
+        render(_jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/about", children: "About" }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/contact", children: "Contact" }) })] }) }));
+        expect(screen.getByText("Home")).toBeInTheDocument();
+        expect(screen.getByText("About")).toBeInTheDocument();
+        expect(screen.getByText("Contact")).toBeInTheDocument();
+    });
+    it("should render navigation menu with trigger", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }) })] }) }) }));
+        expect(screen.getByText("Products")).toBeInTheDocument();
+        expect(screen.queryByText("Product 1")).not.toBeInTheDocument();
+    });
+    it("should open content when trigger is clicked", async () => {
+        const user = userEvent.setup();
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsxs(NavigationMenuContent, { children: [_jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }), _jsx(NavigationMenuLink, { href: "/product-2", children: "Product 2" })] })] }) }) }));
+        const trigger = screen.getByText("Products");
+        await user.click(trigger);
+        // Content should be in viewport
+        expect(screen.getByText("Product 1")).toBeInTheDocument();
+        expect(screen.getByText("Product 2")).toBeInTheDocument();
+    });
+    it("should render navigation menu link with active state", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { active: true, href: "/about", children: "About" }) }) }) }));
+        const link = screen.getByText("About");
+        expect(link.closest('[data-slot="navigation-menu-link"]')).toHaveAttribute("data-active");
+    });
+    it("should render navigation menu with indicator", () => {
+        const { container } = render(_jsxs(NavigationMenu, { children: [_jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }), _jsx(NavigationMenuIndicator, {})] }));
+        const navigationMenu = container.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toBeInTheDocument();
+    });
+    it("should apply custom className to navigation menu", () => {
+        render(_jsx(NavigationMenu, { className: "custom-class", children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        const navigationMenu = document.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toHaveClass("custom-class");
+    });
+    it("should apply custom className correctly", () => {
+        const { container } = render(_jsx(NavigationMenu, { className: "custom-class", children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        const navigationMenu = container.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toHaveClass("custom-class");
+    });
+    it("should render disabled trigger", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuTrigger, { disabled: true, children: "Disabled" }) }) }) }));
+        const trigger = screen.getByText("Disabled");
+        expect(trigger).toBeDisabled();
+    });
+    it("should render navigation menu with viewport", () => {
+        const { container } = render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }) })] }) }) }));
+        const navigationMenu = container.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toBeInTheDocument();
+    });
+    it("should handle controlled value", () => {
+        render(_jsx(NavigationMenu, { value: "item-1", children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { value: "item-1", children: [_jsx(NavigationMenuTrigger, { children: "Item 1" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/link-1", children: "Link 1" }) })] }) }) }));
+        expect(screen.getByText("Item 1")).toBeInTheDocument();
+    });
+    it("should handle orientation vertical", () => {
+        render(_jsx(NavigationMenu, { orientation: "vertical", children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }) })] }) }) }));
+        expect(screen.getByText("Products")).toBeInTheDocument();
+    });
+    it("should render navigation links with correct attributes", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "https://example.com", target: "_blank", rel: "noopener noreferrer", children: "External Link" }) }) }) }));
+        const linkWrapper = screen.getByText("External Link");
+        const link = linkWrapper.closest('[data-slot="navigation-menu-link"]');
+        expect(link).toHaveAttribute("href", "https://example.com");
+        expect(link).toHaveAttribute("target", "_blank");
+        expect(link).toHaveAttribute("rel", "noopener noreferrer");
+    });
+    it("should render navigation menu with multiple triggers and content", async () => {
+        const user = userEvent.setup();
+        render(_jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }) })] }), _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Solutions" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/solution-1", children: "Solution 1" }) })] })] }) }));
+        const productTrigger = screen.getByText("Products");
+        await user.click(productTrigger);
+        expect(screen.getByText("Product 1")).toBeInTheDocument();
+    });
+    it("should render navigation menu with custom className on trigger", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuTrigger, { className: "custom-trigger", children: "Products" }) }) }) }));
+        const trigger = screen.getByText("Products");
+        expect(trigger).toHaveClass("custom-trigger");
+    });
+    it("should render navigation menu with custom className on link", () => {
+        const { container } = render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { className: "custom-link", href: "/", children: "Home" }) }) }) }));
+        const link = container.querySelector('[data-slot="navigation-menu-link"]');
+        expect(link).toHaveClass("custom-link");
+    });
+    it("should render navigation menu with custom className on list", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { className: "custom-list", children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        const list = document.querySelector('[data-slot="navigation-menu-list"]');
+        expect(list).toHaveClass("custom-list");
+    });
+    it("should handle delayDuration prop", () => {
+        render(_jsx(NavigationMenu, { delayDuration: 500, children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        const navigationMenu = document.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toBeInTheDocument();
+    });
+    it("should handle skipDelayDuration prop", () => {
+        render(_jsx(NavigationMenu, { skipDelayDuration: 400, children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        const navigationMenu = document.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toBeInTheDocument();
+    });
+    it("should render viewport wrapper correctly", () => {
+        const { container } = render(_jsx(NavigationMenu, { viewport: true, children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Menu" }), _jsx(NavigationMenuContent, { children: _jsx("div", { children: "Content" }) })] }) }) }));
+        // The viewport is rendered directly as a child of NavigationMenu Root
+        const viewportWrapper = container.querySelector('div[class*="absolute"]');
+        expect(viewportWrapper).toBeInTheDocument();
+    });
+    it("should render without viewport when viewport=false", () => {
+        const { container } = render(_jsx(NavigationMenu, { viewport: false, children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        const viewport = container.querySelector('[data-slot="navigation-menu-viewport"]');
+        expect(viewport).not.toBeInTheDocument();
+    });
+    it("should handle onValueChange callback", async () => {
+        const user = userEvent.setup();
+        const onValueChange = vi.fn();
+        render(_jsx(NavigationMenu, { onValueChange: onValueChange, children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { value: "item-1", children: [_jsx(NavigationMenuTrigger, { children: "Item 1" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/link-1", children: "Link 1" }) })] }) }) }));
+        const trigger = screen.getByText("Item 1");
+        await user.click(trigger);
+        // onValueChange should be called when a trigger is activated
+        expect(onValueChange).toHaveBeenCalled();
+    });
+    it("should render navigation menu content with custom className", async () => {
+        const user = userEvent.setup();
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsx(NavigationMenuContent, { className: "custom-content", children: _jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }) })] }) }) }));
+        const trigger = screen.getByText("Products");
+        await user.click(trigger);
+        const content = document.querySelector('[data-slot="navigation-menu-content"]');
+        expect(content).toHaveClass("custom-content");
+    });
+    it("should render navigation menu viewport with custom className", () => {
+        const { container } = render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }) })] }) }) }));
+        const navigationMenu = container.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toBeInTheDocument();
+    });
+    it("should handle disabled links", () => {
+        const { container } = render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/disabled", className: "opacity-50 cursor-not-allowed", children: "Disabled Link" }) }) }) }));
+        const link = container.querySelector('[data-slot="navigation-menu-link"]');
+        expect(link).toBeInTheDocument();
+    });
+    it("should render navigation menu indicator with custom className", () => {
+        const { container } = render(_jsxs(NavigationMenu, { children: [_jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }), _jsx(NavigationMenuIndicator, { className: "custom-indicator" })] }));
+        const navigationMenu = container.querySelector('[data-slot="navigation-menu"]');
+        expect(navigationMenu).toBeInTheDocument();
+    });
+    it("should handle orientation prop on root", () => {
+        render(_jsx(NavigationMenu, { orientation: "vertical", children: _jsx(NavigationMenuList, { children: _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Products" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuLink, { href: "/product-1", children: "Product 1" }) })] }) }) }));
+        const list = document.querySelector('[data-slot="navigation-menu-list"]');
+        expect(list).toHaveAttribute("data-orientation", "vertical");
+    });
+    it("should render navigation menu item with custom className", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { className: "custom-item", children: _jsx(NavigationMenuLink, { href: "/", children: "Home" }) }) }) }));
+        const item = document.querySelector('[data-slot="navigation-menu-item"]');
+        expect(item).toHaveClass("custom-item");
+    });
+    it("should handle asChild prop on navigation menu link", () => {
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, href: "/", children: _jsx(Button, { children: "Home Button" }) }) }) }) }));
+        expect(screen.getByText("Home Button")).toBeInTheDocument();
+    });
+    it("should render navigation menu with onSelect callback on link", async () => {
+        const user = userEvent.setup();
+        const onSelect = vi.fn();
+        render(_jsx(NavigationMenu, { children: _jsx(NavigationMenuList, { children: _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { href: "/link", onSelect: onSelect, children: "Clickable Link" }) }) }) }));
+        const link = screen.getByText("Clickable Link");
+        await user.click(link);
+        expect(onSelect).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=navigation-menu.test.js.map

package/dist/src/components/navigation-menu/navigation-menu.test.js.map

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

package/dist/src/components/page-transition/index.d.ts

@@ -0,0 +1,3 @@
+export type { PageTransitionProps } from "./page-transition";
+export { PageTransition } from "./page-transition";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/page-transition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page-transition/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/components/page-transition/index.js

@@ -0,0 +1,2 @@
+export { PageTransition } from "./page-transition";
+//# sourceMappingURL=index.js.map

package/dist/src/components/page-transition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/page-transition/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/components/page-transition/page-transition.d.ts

@@ -0,0 +1,39 @@
+/**
+ * PageTransition Component
+ *
+ * Provides smooth fade-in transitions for page route changes in Next.js.
+ * Automatically handles page transitions with proper timing.
+ */
+import * as React from "react";
+export interface PageTransitionProps {
+    /**
+     * Children to render with transition
+     */
+    children: React.ReactNode;
+    /**
+     * Additional className for the transition wrapper
+     */
+    className?: string;
+    /**
+     * Transition duration in milliseconds (default: 300)
+     */
+    duration?: number;
+    /**
+     * Unique key for the current page (e.g., pathname)
+     * When this changes, the transition will re-trigger
+     */
+    pageKey?: string;
+}
+/**
+ * Wraps page content with fade-in transition on route changes.
+ *
+ * @example
+ * ```tsx
+ * // In your layout
+ * <PageTransition pageKey={pathname}>
+ *   {children}
+ * </PageTransition>
+ * ```
+ */
+export declare function PageTransition({ children, className, duration, pageKey, }: PageTransitionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-transition.d.ts.map

package/dist/src/components/page-transition/page-transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-transition.d.ts","sourceRoot":"","sources":["../../../../src/components/page-transition/page-transition.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IACnC;;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;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,QAAc,EACd,OAAO,GACP,EAAE,mBAAmB,2CA2BrB"}

package/dist/src/components/page-transition/page-transition.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PageTransition Component
+ *
+ * Provides smooth fade-in transitions for page route changes in Next.js.
+ * Automatically handles page transitions with proper timing.
+ */
+import * as React from "react";
+import { cn } from "../../lib/utils";
+/**
+ * Wraps page content with fade-in transition on route changes.
+ *
+ * @example
+ * ```tsx
+ * // In your layout
+ * <PageTransition pageKey={pathname}>
+ *   {children}
+ * </PageTransition>
+ * ```
+ */
+export function PageTransition({ children, className, duration = 300, pageKey, }) {
+    const [isVisible, setIsVisible] = React.useState(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: pageKey is intentionally used to trigger transition on page change
+    React.useEffect(() => {
+        // Reset visibility on route change
+        setIsVisible(false);
+        const timeout = setTimeout(() => {
+            setIsVisible(true);
+        }, 10); // Small delay to ensure CSS transition triggers
+        return () => clearTimeout(timeout);
+    }, [pageKey]);
+    return (_jsx("div", { "data-slot": "page-transition", className: cn("transition-opacity ease-in-out", isVisible ? "opacity-100" : "opacity-0", className), style: { transitionDuration: `${duration}ms` }, children: children }));
+}
+//# sourceMappingURL=page-transition.js.map

package/dist/src/components/page-transition/page-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-transition.js","sourceRoot":"","sources":["../../../../src/components/page-transition/page-transition.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAsBrC;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,GAAG,EACd,OAAO,GACc;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,8HAA8H;IAC9H,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,mCAAmC;QACnC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC/B,YAAY,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gDAAgD;QAExD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACN,2BACW,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACZ,gCAAgC,EAChC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACvC,SAAS,CACT,EACD,KAAK,EAAE,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,EAAE,YAE7C,QAAQ,GACJ,CACN,CAAC;AACH,CAAC"}

package/dist/src/components/page-transition/page-transition.stories.d.ts

@@ -0,0 +1,39 @@
+import type { StoryObj } from "@storybook/react";
+import { PageTransition } from "./page-transition";
+declare const meta: {
+    title: string;
+    component: typeof PageTransition;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        duration: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        pageKey: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPageChange: Story;
+export declare const CustomDuration: Story;
+export declare const WithComplexContent: Story;
+export declare const WithoutPageKey: Story;
+export declare const CustomClassName: Story;
+//# sourceMappingURL=page-transition.stories.d.ts.map

package/dist/src/components/page-transition/page-transition.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-transition.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/page-transition/page-transition.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwB6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyD5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsD5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAwDhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAc5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAiC7B,CAAC"}

package/dist/src/components/page-transition/page-transition.stories.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../button/button";
+import { PageTransition } from "./page-transition";
+const meta = {
+    title: "Components/PageTransition",
+    component: PageTransition,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: "A page transition component that provides smooth fade-in animations when navigating between pages. Automatically handles transitions with configurable timing.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        duration: {
+            control: { type: "number", min: 100, max: 1000, step: 50 },
+            description: "Transition duration in milliseconds",
+        },
+        pageKey: {
+            control: "text",
+            description: "Unique key for the current page - changes trigger transition",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: { children: _jsx("div", {}) },
+    parameters: { controls: { disable: true } },
+    render: () => (_jsx(PageTransition, { pageKey: "default-page", children: _jsxs("div", { className: "p-8", children: [_jsx("h1", { className: "text-3xl font-bold mb-4", children: "Welcome" }), _jsx("p", { className: "text-muted-foreground", children: "This content fades in smoothly when the page loads." })] }) })),
+};
+export const WithPageChange = {
+    args: { children: _jsx("div", {}) },
+    parameters: { controls: { disable: true } },
+    render: () => {
+        const [page, setPage] = useState("home");
+        const pages = {
+            home: {
+                title: "Home Page",
+                content: "Welcome to the home page. Click the buttons below to navigate.",
+            },
+            about: {
+                title: "About Page",
+                content: "Learn more about us on this page.",
+            },
+            contact: {
+                title: "Contact Page",
+                content: "Get in touch with us through this page.",
+            },
+        };
+        return (_jsxs("div", { children: [_jsxs("nav", { className: "border-b p-4 flex gap-2", children: [_jsx(Button, { variant: page === "home" ? "default" : "outline", onClick: () => setPage("home"), children: "Home" }), _jsx(Button, { variant: page === "about" ? "default" : "outline", onClick: () => setPage("about"), children: "About" }), _jsx(Button, { variant: page === "contact" ? "default" : "outline", onClick: () => setPage("contact"), children: "Contact" })] }), _jsx(PageTransition, { pageKey: page, children: _jsxs("div", { className: "p-8", children: [_jsx("h1", { className: "text-3xl font-bold mb-4", children: pages[page].title }), _jsx("p", { className: "text-muted-foreground", children: pages[page].content })] }) })] }));
+    },
+};
+export const CustomDuration = {
+    args: { children: _jsx("div", {}) },
+    parameters: { controls: { disable: true } },
+    render: () => {
+        const [page, setPage] = useState("fast");
+        const [duration, setDuration] = useState(150);
+        return (_jsxs("div", { children: [_jsxs("nav", { className: "border-b p-4", children: [_jsxs("div", { className: "flex gap-2 mb-4", children: [_jsx(Button, { variant: page === "fast" ? "default" : "outline", onClick: () => {
+                                        setPage("fast");
+                                        setDuration(150);
+                                    }, children: "Fast (150ms)" }), _jsx(Button, { variant: page === "normal" ? "default" : "outline", onClick: () => {
+                                        setPage("normal");
+                                        setDuration(300);
+                                    }, children: "Normal (300ms)" }), _jsx(Button, { variant: page === "slow" ? "default" : "outline", onClick: () => {
+                                        setPage("slow");
+                                        setDuration(600);
+                                    }, children: "Slow (600ms)" })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Current duration: ", duration, "ms"] })] }), _jsx(PageTransition, { pageKey: page, duration: duration, children: _jsxs("div", { className: "p-8", children: [_jsx("h1", { className: "text-3xl font-bold mb-4", children: "Transition Speed Demo" }), _jsxs("p", { className: "text-muted-foreground", children: ["This page uses a ", duration, "ms transition duration."] })] }) })] }));
+    },
+};
+export const WithComplexContent = {
+    args: { children: _jsx("div", {}) },
+    parameters: { controls: { disable: true } },
+    render: () => {
+        const [page, setPage] = useState(1);
+        return (_jsxs("div", { children: [_jsxs("nav", { className: "border-b p-4 flex gap-2", children: [_jsx(Button, { variant: page === 1 ? "default" : "outline", onClick: () => setPage(1), children: "Page 1" }), _jsx(Button, { variant: page === 2 ? "default" : "outline", onClick: () => setPage(2), children: "Page 2" }), _jsx(Button, { variant: page === 3 ? "default" : "outline", onClick: () => setPage(3), children: "Page 3" })] }), _jsx(PageTransition, { pageKey: `page-${page}`, children: _jsxs("div", { className: "p-8", children: [_jsxs("h1", { className: "text-3xl font-bold mb-6", children: ["Content Page ", page] }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "rounded-lg border p-4", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Card 1" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["This is some content in card 1 of page ", page, "."] })] }), _jsxs("div", { className: "rounded-lg border p-4", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Card 2" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["This is some content in card 2 of page ", page, "."] })] }), _jsxs("div", { className: "rounded-lg border p-4", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Card 3" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["This is some content in card 3 of page ", page, "."] })] })] })] }) })] }));
+    },
+};
+export const WithoutPageKey = {
+    args: { children: _jsx("div", {}) },
+    parameters: { controls: { disable: true } },
+    render: () => (_jsx(PageTransition, { children: _jsxs("div", { className: "p-8", children: [_jsx("h1", { className: "text-3xl font-bold mb-4", children: "Static Page" }), _jsx("p", { className: "text-muted-foreground", children: "This page does not use a pageKey prop, so it won't re-transition on updates." })] }) })),
+};
+export const CustomClassName = {
+    args: { children: _jsx("div", {}) },
+    parameters: { controls: { disable: true } },
+    render: () => {
+        const [page, setPage] = useState("page1");
+        return (_jsxs("div", { children: [_jsxs("nav", { className: "border-b p-4 flex gap-2", children: [_jsx(Button, { variant: page === "page1" ? "default" : "outline", onClick: () => setPage("page1"), children: "Page 1" }), _jsx(Button, { variant: page === "page2" ? "default" : "outline", onClick: () => setPage("page2"), children: "Page 2" })] }), _jsx(PageTransition, { pageKey: page, className: "bg-muted", children: _jsxs("div", { className: "p-8", children: [_jsx("h1", { className: "text-3xl font-bold mb-4", children: "Custom Styled Page" }), _jsx("p", { className: "text-muted-foreground", children: "This page transition wrapper has a custom background color." })] }) })] }));
+    },
+};
+//# sourceMappingURL=page-transition.stories.js.map

package/dist/src/components/page-transition/page-transition.stories.js.map

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

package/dist/src/components/page-transition/page-transition.test.d.ts

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

package/dist/src/components/page-transition/page-transition.test.d.ts.map

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

package/dist/src/components/page-transition/page-transition.test.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PageTransition } from "./page-transition";
+describe("PageTransition", () => {
+    it("renders children", () => {
+        render(_jsx(PageTransition, { children: _jsx("div", { children: "Test Content" }) }));
+        expect(screen.getByText("Test Content")).toBeInTheDocument();
+    });
+    it("applies default duration", () => {
+        const { container } = render(_jsx(PageTransition, { children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveStyle({ transitionDuration: "300ms" });
+    });
+    it("applies custom duration", () => {
+        const { container } = render(_jsx(PageTransition, { duration: 500, children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveStyle({ transitionDuration: "500ms" });
+    });
+    it("applies custom className", () => {
+        const { container } = render(_jsx(PageTransition, { className: "custom-class", children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveClass("custom-class");
+    });
+    it("has transition-opacity class", () => {
+        const { container } = render(_jsx(PageTransition, { children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveClass("transition-opacity");
+    });
+    it("has ease-in-out timing function", () => {
+        const { container } = render(_jsx(PageTransition, { children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveClass("ease-in-out");
+    });
+    it("starts with opacity-0", () => {
+        const { container } = render(_jsx(PageTransition, { pageKey: "test-key", children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveClass("opacity-0");
+    });
+    it("transitions to opacity-100", async () => {
+        const { container } = render(_jsx(PageTransition, { pageKey: "test-key", children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        // Wait for the transition to start
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(wrapper).toHaveClass("opacity-100");
+    });
+    it("re-triggers transition when pageKey changes", async () => {
+        const { container, rerender } = render(_jsx(PageTransition, { pageKey: "page-1", children: _jsx("div", { children: "Content 1" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        // Wait for initial transition
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(wrapper).toHaveClass("opacity-100");
+        // Change pageKey
+        rerender(_jsx(PageTransition, { pageKey: "page-2", children: _jsx("div", { children: "Content 2" }) }));
+        // Should reset to opacity-0
+        expect(wrapper).toHaveClass("opacity-0");
+        // Then transition back to opacity-100
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(wrapper).toHaveClass("opacity-100");
+    });
+    it("does not re-trigger when pageKey is unchanged", async () => {
+        const { container, rerender } = render(_jsx(PageTransition, { pageKey: "same-key", children: _jsx("div", { children: "Content 1" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(wrapper).toHaveClass("opacity-100");
+        // Rerender with same pageKey
+        rerender(_jsx(PageTransition, { pageKey: "same-key", children: _jsx("div", { children: "Content 2" }) }));
+        // Should still be opacity-100 (no transition reset)
+        expect(wrapper).toHaveClass("opacity-100");
+    });
+    it("works without pageKey prop", async () => {
+        const { container } = render(_jsx(PageTransition, { children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        // Should still transition even without pageKey
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        expect(wrapper).toHaveClass("opacity-100");
+    });
+    it("renders multiple children", () => {
+        render(_jsxs(PageTransition, { children: [_jsx("div", { children: "Child 1" }), _jsx("div", { children: "Child 2" }), _jsx("div", { children: "Child 3" })] }));
+        expect(screen.getByText("Child 1")).toBeInTheDocument();
+        expect(screen.getByText("Child 2")).toBeInTheDocument();
+        expect(screen.getByText("Child 3")).toBeInTheDocument();
+    });
+    it("cleans up timeout on unmount", () => {
+        const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+        const { unmount } = render(_jsx(PageTransition, { pageKey: "test", children: _jsx("div", { children: "Content" }) }));
+        unmount();
+        expect(clearTimeoutSpy).toHaveBeenCalled();
+        clearTimeoutSpy.mockRestore();
+    });
+    it("handles rapid pageKey changes", async () => {
+        const { container, rerender } = render(_jsx(PageTransition, { pageKey: "page-1", children: _jsx("div", { children: "Content 1" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        // Rapid changes
+        rerender(_jsx(PageTransition, { pageKey: "page-2", children: _jsx("div", { children: "Content 2" }) }));
+        rerender(_jsx(PageTransition, { pageKey: "page-3", children: _jsx("div", { children: "Content 3" }) }));
+        // Should handle gracefully and eventually settle
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        expect(wrapper).toBeInTheDocument();
+    });
+    it("preserves children during transition", () => {
+        const { rerender } = render(_jsx(PageTransition, { pageKey: "page-1", children: _jsx("div", { "data-testid": "content", children: "Content 1" }) }));
+        expect(screen.getByTestId("content")).toHaveTextContent("Content 1");
+        rerender(_jsx(PageTransition, { pageKey: "page-2", children: _jsx("div", { "data-testid": "content", children: "Content 2" }) }));
+        // New content should be rendered
+        expect(screen.getByTestId("content")).toHaveTextContent("Content 2");
+    });
+    it("uses custom duration value", () => {
+        const { container } = render(_jsx(PageTransition, { duration: 750, children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveStyle({ transitionDuration: "750ms" });
+    });
+    it("combines custom className with default classes", () => {
+        const { container } = render(_jsx(PageTransition, { className: "custom-bg", children: _jsx("div", { children: "Content" }) }));
+        const wrapper = container.querySelector('[data-slot="page-transition"]');
+        expect(wrapper).toHaveClass("transition-opacity");
+        expect(wrapper).toHaveClass("ease-in-out");
+        expect(wrapper).toHaveClass("custom-bg");
+    });
+});
+//# sourceMappingURL=page-transition.test.js.map

package/dist/src/components/page-transition/page-transition.test.js.map

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