@kala-ui/react 0.0.1-beta.1

package/dist/src/components/multi-select/multi-select.test.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { MultiSelect } from "./multi-select";
+const mockOptions = [
+    { value: "option1", label: "Option 1" },
+    { value: "option2", label: "Option 2" },
+    { value: "option3", label: "Option 3" },
+];
+describe("MultiSelect", () => {
+    it("renders with placeholder", () => {
+        render(_jsx(MultiSelect, { options: mockOptions, placeholder: "Select options..." }));
+        const button = screen.getByRole("combobox");
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveTextContent("Select options...");
+    });
+    it("shows selected values as chips", () => {
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option1", "option2"] }));
+        const button = screen.getByRole("combobox");
+        expect(button).toHaveTextContent("Option 1");
+        expect(button).toHaveTextContent("Option 2");
+    });
+    it("opens popover on click", async () => {
+        const user = userEvent.setup();
+        render(_jsx(MultiSelect, { options: mockOptions }));
+        const button = screen.getByRole("combobox");
+        await user.click(button);
+        await waitFor(() => {
+            expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+        });
+    });
+    it("selects multiple options", async () => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+        render(_jsx(MultiSelect, { options: mockOptions, value: [], onValueChange: handleChange }));
+        const button = screen.getByRole("combobox");
+        await user.click(button);
+        const listbox = await screen.findByRole("listbox");
+        const option1 = within(listbox).getByRole("option", { name: "Option 1" });
+        await user.click(option1);
+        expect(handleChange).toHaveBeenCalledWith(["option1"]);
+    });
+    it("deselects option when clicked again", async () => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option1"], onValueChange: handleChange }));
+        const button = screen.getByRole("combobox");
+        await user.click(button);
+        const listbox = await screen.findByRole("listbox");
+        const option1 = within(listbox).getByRole("option", { name: "Option 1" });
+        await user.click(option1);
+        expect(handleChange).toHaveBeenCalledWith([]);
+    });
+    it("removes option via chip remove button", async () => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option1"], onValueChange: handleChange }));
+        const removeButton = screen.getByLabelText("Remove Option 1");
+        await user.click(removeButton);
+        expect(handleChange).toHaveBeenCalledWith([]);
+    });
+    it("selects all options", async () => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+        render(_jsx(MultiSelect, { options: mockOptions, value: [], onValueChange: handleChange }));
+        const button = screen.getByRole("combobox");
+        await user.click(button);
+        const listbox = await screen.findByRole("listbox");
+        const selectAll = within(listbox).getByRole("option", {
+            name: "Select All",
+        });
+        await user.click(selectAll);
+        expect(handleChange).toHaveBeenCalledWith([
+            "option1",
+            "option2",
+            "option3",
+        ]);
+    });
+    it("clears all options via trigger button", async () => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option1", "option2"], onValueChange: handleChange }));
+        const clearAll = screen.getByLabelText("Clear all");
+        await user.click(clearAll);
+        expect(handleChange).toHaveBeenCalledWith([]);
+    });
+    it("respects maxSelected limit", async () => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option1", "option2"], maxSelected: 2, onValueChange: handleChange }));
+        const button = screen.getByRole("combobox");
+        await user.click(button);
+        const listbox = await screen.findByRole("listbox");
+        const option3 = within(listbox).getByRole("option", { name: "Option 3" });
+        // Option 3 should be disabled because max selected reached
+        expect(option3).toHaveAttribute("aria-disabled", "true");
+        await user.click(option3);
+        expect(handleChange).not.toHaveBeenCalled();
+    });
+    it("renders disabled state", () => {
+        render(_jsx(MultiSelect, { options: mockOptions, disabled: true }));
+        const button = screen.getByRole("combobox");
+        expect(button).toBeDisabled();
+    });
+    it("renders chips in selection order when preserveSelectionOrder is true", () => {
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option3", "option1"], preserveSelectionOrder: true }));
+        const button = screen.getByRole("combobox");
+        const chips = within(button).getAllByText(/Option \d/);
+        expect(chips[0]).toHaveTextContent("Option 3");
+        expect(chips[1]).toHaveTextContent("Option 1");
+    });
+    it("renders chips in option order when preserveSelectionOrder is false", () => {
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option3", "option1"], preserveSelectionOrder: false }));
+        const button = screen.getByRole("combobox");
+        const chips = within(button).getAllByText(/Option \d/);
+        expect(chips[0]).toHaveTextContent("Option 1");
+        expect(chips[1]).toHaveTextContent("Option 3");
+    });
+    it("hides select all action when showActions is false", async () => {
+        const user = userEvent.setup();
+        render(_jsx(MultiSelect, { options: mockOptions, showActions: false }));
+        const button = screen.getByRole("combobox");
+        await user.click(button);
+        await waitFor(() => {
+            const listbox = screen.getByRole("listbox");
+            expect(within(listbox).queryByText("Select All")).not.toBeInTheDocument();
+        });
+    });
+    it("respects maxVisibleSelections prop", () => {
+        render(_jsx(MultiSelect, { options: mockOptions, value: ["option1", "option2", "option3"], maxVisibleSelections: 2 }));
+        const button = screen.getByRole("combobox");
+        expect(within(button).getByText("Option 1")).toBeInTheDocument();
+        expect(within(button).getByText("Option 2")).toBeInTheDocument();
+        expect(within(button).queryByText("Option 3")).not.toBeInTheDocument();
+        expect(within(button).getByText("+1 more")).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=multi-select.test.js.map

package/dist/src/components/multi-select/multi-select.test.js.map

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

package/dist/src/components/multi-select/multi-select.types.d.ts

@@ -0,0 +1,75 @@
+import type * as React from "react";
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    group?: string;
+}
+export interface MultiSelectProps {
+    /**
+     * Options to display
+     */
+    options: MultiSelectOption[];
+    /**
+     * Selected values (array)
+     */
+    value?: string[];
+    /**
+     * Callback when values change
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Placeholder text when no values selected
+     * @default "Select options..."
+     */
+    placeholder?: string;
+    /**
+     * Placeholder for search input
+     * @default "Search..."
+     */
+    searchPlaceholder?: string;
+    /**
+     * Text when no results found
+     * @default "No results found."
+     */
+    emptyText?: string;
+    /**
+     * Maximum number of selections allowed
+     */
+    maxSelections?: number;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes for trigger button
+     */
+    className?: string;
+    /**
+     * Size variant
+     * @default "default"
+     */
+    size?: "sm" | "default";
+    /**
+     * Match dropdown width to trigger width
+     * @default true
+     */
+    matchTriggerWidth?: boolean;
+    /**
+     * Show clear button when selections exist
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Show counter badge with selection count
+     * @default false
+     */
+    showCounter?: boolean;
+    /**
+     * Group options by group property
+     * @default false
+     */
+    grouped?: boolean;
+}
+//# sourceMappingURL=multi-select.types.d.ts.map

package/dist/src/components/multi-select/multi-select.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.types.d.ts","sourceRoot":"","sources":["../../../../src/components/multi-select/multi-select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/dist/src/components/multi-select/multi-select.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=multi-select.types.js.map

package/dist/src/components/multi-select/multi-select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.types.js","sourceRoot":"","sources":["../../../../src/components/multi-select/multi-select.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+export type { NavigationLink, NavigationProps } from "./navigation";
+export { Navigation } from "./navigation";
+export type { NavigationSkeletonConfig, NavigationSkeletonProps, } from "./navigation-skeleton";
+export { NavigationSkeleton } from "./navigation-skeleton";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACX,wBAAwB,EACxB,uBAAuB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Navigation } from "./navigation";
+export { NavigationSkeleton } from "./navigation-skeleton";
+//# sourceMappingURL=index.js.map

package/dist/src/components/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/navigation/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,55 @@
+/**
+ * Navigation Skeleton Component
+ *
+ * Loading placeholder for the Navigation component.
+ * Supports horizontal and vertical layouts with configurable items.
+ */
+export interface NavigationSkeletonConfig {
+    /**
+     * Orientation of the navigation
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Number of navigation items
+     * @default 5
+     */
+    itemCount?: number;
+    /**
+     * Show icon skeletons
+     * @default false
+     */
+    showIcons?: boolean;
+    /**
+     * Show badge skeletons
+     * @default false
+     */
+    showBadges?: boolean;
+    /**
+     * Show nested navigation items
+     * @default false
+     */
+    nested?: boolean;
+}
+export interface NavigationSkeletonProps extends NavigationSkeletonConfig {
+    /**
+     * Additional className for the skeleton container
+     */
+    className?: string;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Navigation skeleton component
+ *
+ * @example
+ * ```tsx
+ * <NavigationSkeleton orientation="horizontal" itemCount={5} />
+ *
+ * <NavigationSkeleton orientation="vertical" showIcons showBadges />
+ * ```
+ */
+export declare function NavigationSkeleton({ orientation, itemCount, showIcons, showBadges, nested, className, "data-testid": dataTestId, }: NavigationSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=navigation-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navigation-skeleton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,MAAM,WAAW,wBAAwB;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACxE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EAClC,WAA0B,EAC1B,SAAa,EACb,SAAiB,EACjB,UAAkB,EAClB,MAAc,EACd,SAAS,EACT,aAAa,EAAE,UAAU,GACzB,EAAE,uBAAuB,2CAqDzB"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Navigation Skeleton Component
+ *
+ * Loading placeholder for the Navigation component.
+ * Supports horizontal and vertical layouts with configurable items.
+ */
+import { cn } from "../../lib/utils";
+import { Skeleton } from "../skeleton/skeleton";
+/**
+ * Navigation skeleton component
+ *
+ * @example
+ * ```tsx
+ * <NavigationSkeleton orientation="horizontal" itemCount={5} />
+ *
+ * <NavigationSkeleton orientation="vertical" showIcons showBadges />
+ * ```
+ */
+export function NavigationSkeleton({ orientation = "horizontal", itemCount = 5, showIcons = false, showBadges = false, nested = false, className, "data-testid": dataTestId, }) {
+    return (_jsxs("nav", { "data-testid": dataTestId || "navigation-skeleton", className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-6", className), "aria-label": "Loading navigation", "aria-busy": "true", children: [Array.from({ length: itemCount }).map((_, i) => (_jsxs("div", { className: cn("flex items-center", orientation === "vertical" ? "gap-3 px-3 py-2" : "gap-2"), children: [showIcons && (_jsx(Skeleton, { className: cn("flex-shrink-0", orientation === "vertical" ? "h-5 w-5" : "h-4 w-4") })), _jsx(Skeleton, { className: cn("h-4", orientation === "vertical" ? "w-24 flex-1" : "w-20") }), showBadges && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full ml-auto flex-shrink-0" }))] }, `nav-${i}`))), nested && orientation === "vertical" && (_jsx("div", { className: "ml-8 space-y-2", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [showIcons && _jsx(Skeleton, { className: "h-4 w-4 flex-shrink-0" }), _jsx(Skeleton, { className: "h-4 w-20" })] }, `nested-${i}`))) }))] }));
+}
+//# sourceMappingURL=navigation-skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-skeleton.js","sourceRoot":"","sources":["../../../../src/components/navigation/navigation-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,kBAAkB,CAAC,EAClC,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,CAAC,EACb,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,KAAK,EACd,SAAS,EACT,aAAa,EAAE,UAAU,GACA;IACzB,OAAO,CACN,8BACc,UAAU,IAAI,qBAAqB,EAChD,SAAS,EAAE,EAAE,CACZ,MAAM,EACN,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,EAChE,SAAS,CACT,gBACU,oBAAoB,eACrB,MAAM,aAEf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAChD,eAEC,SAAS,EAAE,EAAE,CACZ,mBAAmB,EACnB,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CACxD,aAEA,SAAS,IAAI,CACb,KAAC,QAAQ,IACR,SAAS,EAAE,EAAE,CACZ,eAAe,EACf,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAClD,GACA,CACF,EACD,KAAC,QAAQ,IACR,SAAS,EAAE,EAAE,CACZ,KAAK,EACL,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CACnD,GACA,EACD,UAAU,IAAI,CACd,KAAC,QAAQ,IAAC,SAAS,EAAC,4CAA4C,GAAG,CACnE,KAtBI,OAAO,CAAC,EAAE,CAuBV,CACN,CAAC,EAGD,MAAM,IAAI,WAAW,KAAK,UAAU,IAAI,CACxC,cAAK,SAAS,EAAC,gBAAgB,YAC7B,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxC,eAAyB,SAAS,EAAC,mCAAmC,aACpE,SAAS,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,uBAAuB,GAAG,EAC5D,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,KAFxB,UAAU,CAAC,EAAE,CAGjB,CACN,CAAC,GACG,CACN,IACI,CACN,CAAC;AACH,CAAC"}

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

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

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

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

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { NavigationSkeleton } from "./navigation-skeleton";
+describe("NavigationSkeleton", () => {
+    it("should render with default props", () => {
+        render(_jsx(NavigationSkeleton, {}));
+        const nav = screen.getByTestId("navigation-skeleton");
+        expect(nav).toBeInTheDocument();
+        expect(nav).toHaveAttribute("aria-busy", "true");
+        expect(nav).toHaveAttribute("aria-label", "Loading navigation");
+    });
+    it("should render horizontal orientation by default", () => {
+        render(_jsx(NavigationSkeleton, {}));
+        const nav = screen.getByTestId("navigation-skeleton");
+        expect(nav.className).toContain("flex-row");
+    });
+    it("should render vertical orientation when specified", () => {
+        render(_jsx(NavigationSkeleton, { orientation: "vertical" }));
+        const nav = screen.getByTestId("navigation-skeleton");
+        expect(nav.className).toContain("flex-col");
+    });
+    it("should render correct number of items", () => {
+        const { container } = render(_jsx(NavigationSkeleton, { itemCount: 3 }));
+        const items = container.querySelectorAll("[data-testid='navigation-skeleton'] > div");
+        expect(items).toHaveLength(3);
+    });
+    it("should render default 5 items", () => {
+        const { container } = render(_jsx(NavigationSkeleton, {}));
+        const items = container.querySelectorAll("[data-testid='navigation-skeleton'] > div");
+        expect(items).toHaveLength(5);
+    });
+    it("should show icons when showIcons is true", () => {
+        const { container } = render(_jsx(NavigationSkeleton, { showIcons: true }));
+        const icons = container.querySelectorAll(".h-4.w-4, .h-5.w-5");
+        expect(icons.length).toBeGreaterThan(0);
+    });
+    it("should show badges when showBadges is true", () => {
+        const { container } = render(_jsx(NavigationSkeleton, { showBadges: true }));
+        const badges = container.querySelectorAll(".rounded-full.h-4.w-4");
+        expect(badges.length).toBeGreaterThan(0);
+    });
+    it("should render nested items when nested is true and orientation is vertical", () => {
+        const { container } = render(_jsx(NavigationSkeleton, { orientation: "vertical", nested: true }));
+        const nestedSection = container.querySelector(".ml-8");
+        expect(nestedSection).toBeInTheDocument();
+    });
+    it("should not render nested items when orientation is horizontal", () => {
+        const { container } = render(_jsx(NavigationSkeleton, { orientation: "horizontal", nested: true }));
+        const nestedSection = container.querySelector(".ml-8");
+        expect(nestedSection).not.toBeInTheDocument();
+    });
+    it("should apply custom className", () => {
+        render(_jsx(NavigationSkeleton, { className: "custom-class" }));
+        const nav = screen.getByTestId("navigation-skeleton");
+        expect(nav).toHaveClass("custom-class");
+    });
+    it("should accept custom data-testid", () => {
+        render(_jsx(NavigationSkeleton, { "data-testid": "custom-nav-skeleton" }));
+        const nav = screen.getByTestId("custom-nav-skeleton");
+        expect(nav).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=navigation-skeleton.test.js.map

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

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

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface NavigationLink {
+    label: string;
+    href: string;
+}
+export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Array of navigation links
+     */
+    links: NavigationLink[];
+    /**
+     * Orientation of the navigation
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Mobile layout style
+     * @default 'dropdown'
+     */
+    mobileLayout?: "dropdown" | "vertical";
+    /**
+     * Current pathname for active link detection
+     */
+    pathname?: string;
+}
+export declare const Navigation: React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=navigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navigation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE;;OAEG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,qFAqJtB,CAAC"}

package/dist/src/components/navigation/navigation.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 * as React from "react";
+import { cn } from "../../lib/utils";
+export const Navigation = React.forwardRef(({ className, links, orientation = "horizontal", mobileLayout = "dropdown", pathname = "", ...props }, ref) => {
+    const [isMobileOpen, setIsMobileOpen] = React.useState(false);
+    const isActive = (href) => {
+        if (href === "/") {
+            return pathname === "/";
+        }
+        return pathname.startsWith(href);
+    };
+    // Close mobile menu when clicking outside
+    React.useEffect(() => {
+        if (!isMobileOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (!target.closest("[data-mobile-nav]")) {
+                setIsMobileOpen(false);
+            }
+        };
+        document.addEventListener("click", handleClickOutside);
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [isMobileOpen]);
+    // Desktop Navigation (horizontal or vertical)
+    if (orientation === "vertical" || mobileLayout === "vertical") {
+        return (_jsx("nav", { "data-comp": "navigation", className: cn(orientation === "vertical"
+                ? "hidden md:flex md:flex-col gap-2"
+                : "flex md:hidden flex-col gap-2", className), "aria-label": "Navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors", isActive(link.href)
+                    ? "bg-accent text-accent-foreground"
+                    : "text-foreground hover:bg-accent hover:text-accent-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }));
+    }
+    // Horizontal desktop + dropdown mobile
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-comp": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsxs("div", { className: "md:hidden", "data-mobile-nav": true, children: [_jsxs("button", { type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            setIsMobileOpen(!isMobileOpen);
+                        }, className: "flex items-center gap-2 text-sm font-medium text-foreground hover:text-primary transition-colors", "aria-label": "Toggle mobile navigation", "aria-expanded": isMobileOpen, children: ["Menu", _jsx(ChevronDown, { className: cn("size-4 transition-transform", isMobileOpen && "rotate-180") })] }), isMobileOpen && (
+                    // biome-ignore lint/a11y/useKeyWithClickEvents: Stop propagation is not an interactive action
+                    _jsx("nav", { "data-comp": "navigation", className: "mt-2 flex flex-col gap-2 bg-popover border rounded-md p-3 text-popover-foreground theme-popover", "aria-label": "Mobile navigation", onClick: (e) => e.stopPropagation(), children: links.map((link) => (_jsx("a", { href: link.href, onClick: () => setIsMobileOpen(false), className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors", isActive(link.href)
+                                ? "bg-accent text-accent-foreground"
+                                : "text-foreground hover:bg-accent hover:text-accent-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }))] })] }));
+});
+Navigation.displayName = "Navigation";
+//# sourceMappingURL=navigation.js.map

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

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

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Navigation } from "./navigation";
+declare const meta: Meta<typeof Navigation>;
+export default meta;
+type Story = StoryObj<typeof Navigation>;
+export declare const HorizontalDefault: Story;
+export declare const HorizontalWithActiveLink: Story;
+export declare const VerticalSidebar: Story;
+export declare const MobileVerticalLayout: Story;
+export declare const ManyLinks: Story;
+export declare const CustomStyling: Story;
+//# sourceMappingURL=navigation.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAoBjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAgBzC,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAOtC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC"}

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

@@ -0,0 +1,89 @@
+import { Navigation } from "./navigation";
+const meta = {
+    title: "Application/Navigation",
+    component: Navigation,
+    tags: ["autodocs"],
+    argTypes: {
+        orientation: {
+            control: "select",
+            options: ["horizontal", "vertical"],
+            description: "Orientation of the navigation",
+        },
+        mobileLayout: {
+            control: "select",
+            options: ["dropdown", "vertical"],
+            description: "Mobile layout style",
+        },
+        pathname: {
+            control: "text",
+            description: "Current pathname for active link detection",
+        },
+    },
+};
+export default meta;
+const publicLinks = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Services", href: "/services" },
+    { label: "Contact", href: "/contact" },
+];
+const adminLinks = [
+    { label: "Dashboard", href: "/dashboard" },
+    { label: "Users", href: "/users" },
+    { label: "Roles", href: "/roles" },
+    { label: "Settings", href: "/settings" },
+];
+export const HorizontalDefault = {
+    args: {
+        links: publicLinks,
+        pathname: "/",
+        orientation: "horizontal",
+        mobileLayout: "dropdown",
+    },
+};
+export const HorizontalWithActiveLink = {
+    args: {
+        links: publicLinks,
+        pathname: "/about",
+        orientation: "horizontal",
+        mobileLayout: "dropdown",
+    },
+};
+export const VerticalSidebar = {
+    args: {
+        links: adminLinks,
+        pathname: "/dashboard",
+        orientation: "vertical",
+    },
+};
+export const MobileVerticalLayout = {
+    args: {
+        links: publicLinks,
+        pathname: "/services",
+        mobileLayout: "vertical",
+    },
+};
+export const ManyLinks = {
+    args: {
+        links: [
+            { label: "Home", href: "/" },
+            { label: "About", href: "/about" },
+            { label: "Services", href: "/services" },
+            { label: "Portfolio", href: "/portfolio" },
+            { label: "Blog", href: "/blog" },
+            { label: "Contact", href: "/contact" },
+            { label: "FAQ", href: "/faq" },
+            { label: "Support", href: "/support" },
+        ],
+        pathname: "/portfolio",
+        orientation: "horizontal",
+    },
+};
+export const CustomStyling = {
+    args: {
+        links: publicLinks,
+        pathname: "/",
+        className: "bg-muted p-4 rounded-lg",
+    },
+};
+//# sourceMappingURL=navigation.stories.js.map