@kala-ui/react 0.0.1-beta.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-skeleton.js","sourceRoot":"","sources":["../../../../src/components/sidebar/sidebar-skeleton.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAyChD;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC/B,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,IAAI,EACjB,YAAY,GAAG,CAAC,EAChB,eAAe,GAAG,CAAC,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACH;IACtB,OAAO,CACN,gCACc,UAAU,IAAI,kBAAkB,EAC7C,SAAS,EAAE,EAAE,CACZ,0CAA0C,EAC1C,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC3B,SAAS,CACT,gBACU,iBAAiB,eAClB,MAAM,aAGf,UAAU,IAAI,CACd,cAAK,SAAS,EAAC,sCAAsC,YACnD,SAAS,CAAC,CAAC,CAAC,CACZ,KAAC,QAAQ,IAAC,SAAS,EAAC,iBAAiB,GAAG,CACxC,CAAC,CAAC,CAAC,CACH,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,CACjC,GACI,CACN,EAGD,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,CAAC,CAC9D,eAAwB,SAAS,EAAC,gBAAgB,aAEhD,CAAC,SAAS,IAAI,CACd,KAAC,QAAQ,IAAC,SAAS,EAAC,oBAAoB,GAAG,CAC3C,EAGD,cAAK,SAAS,EAAC,WAAW,YACxB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,CAC9D,eAEC,SAAS,EAAE,EAAE,CACZ,6BAA6B,EAC7B,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CACtC,aAGD,KAAC,QAAQ,IAAC,SAAS,EAAC,uBAAuB,GAAG,EAG7C,CAAC,SAAS,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,YAAY,GAAG,EAGjD,CAAC,SAAS,IAAI,SAAS,KAAK,CAAC,IAAI,CACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,oCAAoC,GAAG,CAC3D,KAfI,SAAS,CAgBT,CACN,CAAC,GACG,KA5BG,YAAY,CA6BhB,CACN,CAAC,GACG,EAGL,UAAU,IAAI,CACd,cAAK,SAAS,EAAC,cAAc,YAC5B,eACC,SAAS,EAAE,EAAE,CACZ,mBAAmB,EACnB,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CACtC,aAGD,KAAC,QAAQ,IAAC,SAAS,EAAC,sCAAsC,GAAG,EAG5D,CAAC,SAAS,IAAI,CACd,eAAK,SAAS,EAAC,gBAAgB,aAC9B,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,EACtC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC5B,CACN,IACI,GACD,CACN,IACM,CACR,CAAC;AACH,CAAC"}

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

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

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

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

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SidebarSkeleton } from "./sidebar-skeleton";
+describe("SidebarSkeleton", () => {
+    it("should render with default props", () => {
+        render(_jsx(SidebarSkeleton, {}));
+        const sidebar = screen.getByTestId("sidebar-skeleton");
+        expect(sidebar).toBeInTheDocument();
+        expect(sidebar).toHaveAttribute("aria-busy", "true");
+        expect(sidebar).toHaveAttribute("aria-label", "Loading sidebar");
+    });
+    it("should render expanded sidebar by default", () => {
+        render(_jsx(SidebarSkeleton, {}));
+        const sidebar = screen.getByTestId("sidebar-skeleton");
+        expect(sidebar.className).toContain("w-64");
+    });
+    it("should render collapsed sidebar when collapsed is true", () => {
+        render(_jsx(SidebarSkeleton, { collapsed: true }));
+        const sidebar = screen.getByTestId("sidebar-skeleton");
+        expect(sidebar.className).toContain("w-16");
+    });
+    it("should show header by default", () => {
+        const { container } = render(_jsx(SidebarSkeleton, {}));
+        const header = container.querySelector(".h-16.border-b");
+        expect(header).toBeInTheDocument();
+    });
+    it("should hide header when showHeader is false", () => {
+        const { container } = render(_jsx(SidebarSkeleton, { showHeader: false }));
+        const header = container.querySelector(".h-16.border-b");
+        expect(header).not.toBeInTheDocument();
+    });
+    it("should show footer by default", () => {
+        const { container } = render(_jsx(SidebarSkeleton, {}));
+        const footer = container.querySelector(".border-t");
+        expect(footer).toBeInTheDocument();
+    });
+    it("should hide footer when showFooter is false", () => {
+        const { container } = render(_jsx(SidebarSkeleton, { showFooter: false }));
+        const footer = container.querySelector(".border-t");
+        expect(footer).not.toBeInTheDocument();
+    });
+    it("should render correct number of sections", () => {
+        const { container } = render(_jsx(SidebarSkeleton, { sectionCount: 2 }));
+        const sections = container.querySelectorAll(".overflow-y-auto > div");
+        expect(sections).toHaveLength(2);
+    });
+    it("should render default 3 sections", () => {
+        const { container } = render(_jsx(SidebarSkeleton, {}));
+        const sections = container.querySelectorAll(".overflow-y-auto > div");
+        expect(sections).toHaveLength(3);
+    });
+    it("should render correct items per section", () => {
+        const { container } = render(_jsx(SidebarSkeleton, { sectionCount: 1, itemsPerSection: 2 }));
+        const items = container.querySelectorAll(".space-y-2 > div");
+        expect(items).toHaveLength(2);
+    });
+    it("should hide labels when collapsed", () => {
+        const { container } = render(_jsx(SidebarSkeleton, { collapsed: true }));
+        // In collapsed state, item labels should not be visible (they use flex-1 inside items)
+        const itemContainers = container.querySelectorAll(".space-y-2 > div");
+        itemContainers.forEach((item) => {
+            const label = item.querySelector(".flex-1");
+            expect(label).not.toBeInTheDocument();
+        });
+    });
+    it("should show user profile avatar in footer", () => {
+        const { container } = render(_jsx(SidebarSkeleton, {}));
+        const avatar = container.querySelector(".h-10.w-10.rounded-full");
+        expect(avatar).toBeInTheDocument();
+    });
+    it("should apply custom className", () => {
+        render(_jsx(SidebarSkeleton, { className: "custom-class" }));
+        const sidebar = screen.getByTestId("sidebar-skeleton");
+        expect(sidebar).toHaveClass("custom-class");
+    });
+    it("should accept custom data-testid", () => {
+        render(_jsx(SidebarSkeleton, { "data-testid": "custom-sidebar-skeleton" }));
+        const sidebar = screen.getByTestId("custom-sidebar-skeleton");
+        expect(sidebar).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=sidebar-skeleton.test.js.map

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

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

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

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+export interface SidebarLink {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+    badge?: string | number;
+}
+export interface SidebarSection {
+    title?: string;
+    links: SidebarLink[];
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+}
+export interface SidebarProps {
+    /**
+     * Logo or brand element to display at the top
+     */
+    logo?: ReactNode;
+    /**
+     * Navigation sections with links
+     */
+    navSections?: SidebarSection[];
+    /**
+     * Current pathname for active link detection
+     */
+    pathname?: string;
+    /**
+     * Whether sidebar is open (for mobile)
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when sidebar should close (mobile)
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Footer content
+     */
+    footer?: ReactNode;
+}
+export declare function Sidebar({ logo, navSections, pathname, isOpen, onClose, className, footer, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wBAAgB,OAAO,CAAC,EACvB,IAAI,EACJ,WAAgB,EAChB,QAAa,EACb,MAAa,EACb,OAAO,EACP,SAAS,EACT,MAAM,GACN,EAAE,YAAY,2CAiJd"}

package/dist/src/components/sidebar/sidebar.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+export function Sidebar({ logo, navSections = [], pathname = "", isOpen = true, onClose, className, footer, }) {
+    // Track which sections are expanded
+    const [expandedSections, setExpandedSections] = useState(new Set(navSections
+        .map((section, index) => (section.defaultOpen !== false ? index : -1))
+        .filter((index) => index !== -1)));
+    const toggleSection = (index) => {
+        setExpandedSections((prev) => {
+            const next = new Set(prev);
+            if (next.has(index)) {
+                next.delete(index);
+            }
+            else {
+                next.add(index);
+            }
+            return next;
+        });
+    };
+    const isLinkActive = (href) => {
+        if (href === "/") {
+            return pathname === "/";
+        }
+        return pathname.startsWith(href);
+    };
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx("div", { className: "fixed inset-0 bg-black/50 z-30 md:hidden animate-fade-in transition-opacity duration-200 ease-out", onClick: onClose, "aria-hidden": "true" })), _jsxs("aside", { "data-comp": "sidebar", className: cn("fixed left-0 top-0 z-30 h-full w-64 bg-popover border-r text-foreground transition-transform duration-300 ease-out flex flex-col theme-card", "md:translate-x-0 md:z-10", isOpen ? "animate-slide-in-from-left" : "-translate-x-full", className), children: [logo && (_jsx("div", { className: "flex items-center h-16 px-6 border-b", children: logo })), _jsx("nav", { className: "flex-1 overflow-y-auto py-4 px-3", children: navSections.map((section, sectionIndex) => {
+                            const isExpanded = expandedSections.has(sectionIndex);
+                            const hasTitle = section.title;
+                            const isCollapsible = section.collapsible && hasTitle;
+                            return (_jsxs("div", { className: "mb-6 last:mb-0", children: [hasTitle && (_jsxs(Button, { variant: "ghost", className: cn("w-full flex items-center justify-between px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider h-auto py-0 hover:bg-transparent", isCollapsible && "cursor-pointer hover:text-foreground", !isCollapsible && "cursor-default opacity-100"), onClick: isCollapsible
+                                            ? () => toggleSection(sectionIndex)
+                                            : undefined, disabled: !isCollapsible, "aria-expanded": isCollapsible ? isExpanded : undefined, children: [_jsx("span", { children: section.title }), isCollapsible && (_jsx(ChevronDown, { className: cn("size-4 transition-transform", isExpanded && "rotate-180") }))] })), (!isCollapsible || isExpanded) && (_jsx("div", { className: "space-y-1", children: section.links.map((link) => {
+                                            const active = isLinkActive(link.href);
+                                            return (_jsxs("a", { href: link.href, onClick: onClose, className: cn("flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors", active
+                                                    ? "bg-primary text-primary-foreground"
+                                                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"), children: [link.icon && (_jsx("span", { className: "shrink-0", children: link.icon })), _jsx("span", { className: "flex-1 truncate", children: link.label }), link.badge !== undefined && (_jsx("span", { className: cn("shrink-0 px-2 py-0.5 text-xs font-semibold rounded-full", active
+                                                            ? "bg-primary-foreground/20 text-primary-foreground"
+                                                            : "bg-muted text-muted-foreground"), children: link.badge }))] }, link.href));
+                                        }) }))] }, section.title ?? `section-${sectionIndex}`));
+                        }) }), footer && _jsx("div", { className: "border-t p-4", children: footer })] })] }));
+}
+//# sourceMappingURL=sidebar.js.map

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

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

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

@@ -0,0 +1,19 @@
+import type { StoryObj } from "@storybook/react";
+import { Sidebar } from "./sidebar";
+declare const meta: {
+    title: string;
+    component: typeof Sidebar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithFooter: Story;
+export declare const ActiveLink: Story;
+export declare const CollapsedSections: Story;
+export declare const WithBadges: Story;
+export declare const MobileClosed: Story;
+//# sourceMappingURL=sidebar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAiBvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI;;;;;;;CAOsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6GnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA+BxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC"}

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

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BarChart3, Bell, CheckSquare, FileText, Home, Image, Key, LayoutDashboard, Lock, Mail, MessageSquare, Settings, Shield, Users, } from "lucide-react";
+import { Sidebar } from "./sidebar";
+const meta = {
+    title: "Application/Sidebar",
+    component: Sidebar,
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+const mockLogo = (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-8 h-8 bg-primary rounded-lg flex items-center justify-center", children: _jsx(LayoutDashboard, { className: "text-white size-5" }) }), _jsx("span", { className: "font-bold text-lg", children: "Admin" })] }));
+const mockNavSections = [
+    {
+        links: [
+            {
+                label: "Dashboard",
+                href: "/dashboard",
+                icon: _jsx(Home, { className: "size-5" }),
+            },
+            {
+                label: "Analytics",
+                href: "/analytics",
+                icon: _jsx(BarChart3, { className: "size-5" }),
+                badge: "New",
+            },
+        ],
+    },
+    {
+        title: "Management",
+        links: [
+            {
+                label: "Users",
+                href: "/users",
+                icon: _jsx(Users, { className: "size-5" }),
+                badge: 24,
+            },
+            {
+                label: "Roles",
+                href: "/roles",
+                icon: _jsx(Shield, { className: "size-5" }),
+            },
+            {
+                label: "Permissions",
+                href: "/permissions",
+                icon: _jsx(Key, { className: "size-5" }),
+            },
+        ],
+    },
+    {
+        title: "Content",
+        collapsible: true,
+        defaultOpen: true,
+        links: [
+            {
+                label: "Posts",
+                href: "/posts",
+                icon: _jsx(FileText, { className: "size-5" }),
+            },
+            {
+                label: "Media",
+                href: "/media",
+                icon: _jsx(Image, { className: "size-5" }),
+            },
+            {
+                label: "Comments",
+                href: "/comments",
+                icon: _jsx(MessageSquare, { className: "size-5" }),
+                badge: 5,
+            },
+        ],
+    },
+    {
+        title: "Settings",
+        collapsible: true,
+        defaultOpen: false,
+        links: [
+            {
+                label: "General",
+                href: "/settings/general",
+                icon: _jsx(Settings, { className: "size-5" }),
+            },
+            {
+                label: "Security",
+                href: "/settings/security",
+                icon: _jsx(Lock, { className: "size-5" }),
+            },
+            {
+                label: "Integrations",
+                href: "/settings/integrations",
+                icon: _jsx("div", { className: "i-lucide-plug text-lg" }),
+            },
+        ],
+    },
+];
+const mockFooter = (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-8 h-8 bg-muted rounded-full flex items-center justify-center", children: _jsx("div", { className: "i-lucide-user text-muted-foreground text-sm" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium truncate", children: "John Doe" }), _jsx("div", { className: "text-xs text-muted-foreground truncate", children: "john@example.com" })] })] }));
+export const Default = {
+    args: {
+        logo: mockLogo,
+        navSections: mockNavSections,
+        pathname: "/dashboard",
+        isOpen: true,
+    },
+};
+export const WithFooter = {
+    args: {
+        logo: mockLogo,
+        navSections: mockNavSections,
+        pathname: "/users",
+        isOpen: true,
+        footer: mockFooter,
+    },
+};
+export const ActiveLink = {
+    args: {
+        logo: mockLogo,
+        navSections: mockNavSections,
+        pathname: "/users",
+        isOpen: true,
+        footer: mockFooter,
+    },
+};
+export const CollapsedSections = {
+    args: {
+        logo: mockLogo,
+        navSections: mockNavSections.map((section) => ({
+            ...section,
+            defaultOpen: false,
+        })),
+        pathname: "/dashboard",
+        isOpen: true,
+    },
+};
+export const WithBadges = {
+    args: {
+        logo: mockLogo,
+        navSections: [
+            {
+                title: "Notifications",
+                links: [
+                    {
+                        label: "Messages",
+                        href: "/messages",
+                        icon: _jsx(Mail, { className: "size-5" }),
+                        badge: 12,
+                    },
+                    {
+                        label: "Alerts",
+                        href: "/alerts",
+                        icon: _jsx(Bell, { className: "size-5" }),
+                        badge: 3,
+                    },
+                    {
+                        label: "Tasks",
+                        href: "/tasks",
+                        icon: _jsx(CheckSquare, { className: "size-5" }),
+                        badge: "Hot",
+                    },
+                ],
+            },
+        ],
+        pathname: "/messages",
+        isOpen: true,
+    },
+};
+export const MobileClosed = {
+    args: {
+        logo: mockLogo,
+        navSections: mockNavSections,
+        pathname: "/dashboard",
+        isOpen: false,
+    },
+};
+//# sourceMappingURL=sidebar.stories.js.map

package/dist/src/components/sidebar/sidebar.stories.js.map

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

package/dist/src/components/sidebar/sidebar.test.d.ts

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

package/dist/src/components/sidebar/sidebar.test.d.ts.map

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

package/dist/src/components/sidebar/sidebar.test.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Sidebar } from "./sidebar";
+describe("Sidebar", () => {
+    const mockNavSections = [
+        {
+            title: "Main",
+            links: [
+                { label: "Dashboard", href: "/dashboard", icon: _jsx("span", { children: "\uD83D\uDCCA" }) },
+                { label: "Analytics", href: "/analytics", badge: 3 },
+            ],
+        },
+        {
+            title: "Settings",
+            links: [
+                { label: "Profile", href: "/profile" },
+                { label: "Preferences", href: "/preferences" },
+            ],
+        },
+    ];
+    it("should render sidebar", () => {
+        render(_jsx(Sidebar, { navSections: mockNavSections }));
+        expect(screen.getByText("Dashboard")).toBeInTheDocument();
+        expect(screen.getByText("Analytics")).toBeInTheDocument();
+    });
+    it("should render logo when provided", () => {
+        render(_jsx(Sidebar, { logo: _jsx("div", { "data-testid": "logo", children: "My App" }), navSections: mockNavSections }));
+        expect(screen.getByTestId("logo")).toBeInTheDocument();
+    });
+    it("should render section titles", () => {
+        render(_jsx(Sidebar, { navSections: mockNavSections }));
+        expect(screen.getByText("Main")).toBeInTheDocument();
+        expect(screen.getByText("Settings")).toBeInTheDocument();
+    });
+    it("should render link icons", () => {
+        render(_jsx(Sidebar, { navSections: mockNavSections }));
+        expect(screen.getByText("📊")).toBeInTheDocument();
+    });
+    it("should render link badges", () => {
+        render(_jsx(Sidebar, { navSections: mockNavSections }));
+        expect(screen.getByText("3")).toBeInTheDocument();
+    });
+    it("should mark active link based on pathname", () => {
+        render(_jsx(Sidebar, { navSections: mockNavSections, pathname: "/dashboard" }));
+        const dashboardLink = screen.getByRole("link", { name: /Dashboard/i });
+        expect(dashboardLink).toHaveClass("bg-primary", "text-primary-foreground");
+    });
+    it("should mark link as active for nested paths", () => {
+        render(_jsx(Sidebar, { navSections: mockNavSections, pathname: "/dashboard/settings" }));
+        const dashboardLink = screen.getByRole("link", { name: /Dashboard/i });
+        expect(dashboardLink).toHaveClass("bg-primary", "text-primary-foreground");
+    });
+    it("should only mark root path as active for exact match", () => {
+        const sectionsWithRoot = [
+            {
+                links: [
+                    { label: "Home", href: "/" },
+                    { label: "Dashboard", href: "/dashboard" },
+                ],
+            },
+        ];
+        render(_jsx(Sidebar, { navSections: sectionsWithRoot, pathname: "/" }));
+        const homeLink = screen.getByRole("link", { name: "Home" });
+        const dashboardLink = screen.getByRole("link", { name: "Dashboard" });
+        expect(homeLink).toHaveClass("bg-primary");
+        expect(dashboardLink).not.toHaveClass("bg-primary");
+    });
+    it("should render collapsible section", async () => {
+        const user = userEvent.setup();
+        const collapsibleSection = [
+            {
+                title: "Collapsible",
+                collapsible: true,
+                links: [{ label: "Link 1", href: "/link1" }],
+            },
+        ];
+        render(_jsx(Sidebar, { navSections: collapsibleSection }));
+        const sectionButton = screen.getByRole("button", { name: "Collapsible" });
+        expect(sectionButton).toHaveAttribute("aria-expanded", "true");
+        // Collapse section
+        await user.click(sectionButton);
+        expect(sectionButton).toHaveAttribute("aria-expanded", "false");
+    });
+    it("should start collapsible section as closed when defaultOpen is false", () => {
+        const collapsibleSection = [
+            {
+                title: "Closed",
+                collapsible: true,
+                defaultOpen: false,
+                links: [{ label: "Hidden Link", href: "/hidden" }],
+            },
+        ];
+        render(_jsx(Sidebar, { navSections: collapsibleSection }));
+        const sectionButton = screen.getByRole("button", { name: "Closed" });
+        expect(sectionButton).toHaveAttribute("aria-expanded", "false");
+    });
+    it("should toggle section on click", async () => {
+        const user = userEvent.setup();
+        const collapsibleSection = [
+            {
+                title: "Toggle",
+                collapsible: true,
+                links: [{ label: "Link", href: "/link" }],
+            },
+        ];
+        render(_jsx(Sidebar, { navSections: collapsibleSection }));
+        const link = screen.getByText("Link");
+        expect(link).toBeVisible();
+        const sectionButton = screen.getByRole("button", { name: "Toggle" });
+        await user.click(sectionButton);
+        expect(link).not.toBeVisible();
+    });
+    it("should render footer when provided", () => {
+        render(_jsx(Sidebar, { navSections: mockNavSections, footer: _jsx("div", { "data-testid": "footer", children: "Footer content" }) }));
+        expect(screen.getByTestId("footer")).toBeInTheDocument();
+    });
+    it("should call onClose when link is clicked", async () => {
+        const user = userEvent.setup();
+        const onClose = vi.fn();
+        render(_jsx(Sidebar, { navSections: mockNavSections, onClose: onClose }));
+        const link = screen.getByRole("link", { name: /Dashboard/i });
+        await user.click(link);
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    it("should apply custom className", () => {
+        const { container } = render(_jsx(Sidebar, { navSections: mockNavSections, className: "custom-sidebar" }));
+        const sidebar = container.querySelector('[data-comp="sidebar"]');
+        expect(sidebar).toHaveClass("custom-sidebar");
+    });
+    it("should be open by default", () => {
+        const { container } = render(_jsx(Sidebar, { navSections: mockNavSections }));
+        const sidebar = container.querySelector('[data-comp="sidebar"]');
+        expect(sidebar).not.toHaveClass("-translate-x-full");
+    });
+    it("should be closed when isOpen is false", () => {
+        const { container } = render(_jsx(Sidebar, { navSections: mockNavSections, isOpen: false }));
+        const sidebar = container.querySelector('[data-comp="sidebar"]');
+        expect(sidebar).toHaveClass("-translate-x-full");
+    });
+    it("should render mobile overlay when open", () => {
+        const { container } = render(_jsx(Sidebar, { navSections: mockNavSections, isOpen: true }));
+        const overlay = container.querySelector(".fixed.inset-0.bg-black\\/50");
+        expect(overlay).toBeInTheDocument();
+    });
+    it("should not render mobile overlay when closed", () => {
+        const { container } = render(_jsx(Sidebar, { navSections: mockNavSections, isOpen: false }));
+        const overlay = container.querySelector(".fixed.inset-0.bg-black\\/50");
+        expect(overlay).not.toBeInTheDocument();
+    });
+    it("should call onClose when overlay is clicked", async () => {
+        const user = userEvent.setup();
+        const onClose = vi.fn();
+        const { container } = render(_jsx(Sidebar, { navSections: mockNavSections, isOpen: true, onClose: onClose }));
+        const overlay = container.querySelector(".fixed.inset-0.bg-black\\/50");
+        if (overlay) {
+            await user.click(overlay);
+            expect(onClose).toHaveBeenCalledTimes(1);
+        }
+    });
+    it("should render sections without titles", () => {
+        const sectionsWithoutTitles = [
+            {
+                links: [{ label: "Link 1", href: "/link1" }],
+            },
+        ];
+        render(_jsx(Sidebar, { navSections: sectionsWithoutTitles }));
+        expect(screen.getByText("Link 1")).toBeInTheDocument();
+    });
+    it("should not make non-collapsible sections clickable", () => {
+        const nonCollapsibleSection = [
+            {
+                title: "Non-Collapsible",
+                collapsible: false,
+                links: [{ label: "Link", href: "/link" }],
+            },
+        ];
+        render(_jsx(Sidebar, { navSections: nonCollapsibleSection }));
+        const sectionButton = screen.getByRole("button", {
+            name: "Non-Collapsible",
+        });
+        expect(sectionButton).toBeDisabled();
+        expect(sectionButton).not.toHaveAttribute("aria-expanded");
+    });
+    it("should rotate chevron icon when section is expanded", () => {
+        const collapsibleSection = [
+            {
+                title: "Section",
+                collapsible: true,
+                links: [{ label: "Link", href: "/link" }],
+            },
+        ];
+        const { container } = render(_jsx(Sidebar, { navSections: collapsibleSection }));
+        const chevron = container.querySelector(".rotate-180");
+        expect(chevron).toBeInTheDocument();
+    });
+    it("should handle multiple collapsible sections independently", async () => {
+        const user = userEvent.setup();
+        const sections = [
+            {
+                title: "Section 1",
+                collapsible: true,
+                links: [{ label: "Link 1", href: "/link1" }],
+            },
+            {
+                title: "Section 2",
+                collapsible: true,
+                links: [{ label: "Link 2", href: "/link2" }],
+            },
+        ];
+        render(_jsx(Sidebar, { navSections: sections }));
+        const section1Button = screen.getByRole("button", { name: "Section 1" });
+        const section2Button = screen.getByRole("button", { name: "Section 2" });
+        // Collapse section 1
+        await user.click(section1Button);
+        expect(section1Button).toHaveAttribute("aria-expanded", "false");
+        expect(section2Button).toHaveAttribute("aria-expanded", "true");
+    });
+});
+//# sourceMappingURL=sidebar.test.js.map