@techsio/ui-kit 0.47.0 → 0.48.0

package/dist/internal/molecules/vertical-navigation.context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+const VerticalNavigationContext = createContext(null);
+const VerticalNavigationDepthContext = createContext(0);
+const VerticalNavigationBranchContext = createContext(null);
+function useVerticalNavigationContext() {
+    const context = useContext(VerticalNavigationContext);
+    if (!context) throw new Error("VerticalNavigation parts must be used within VerticalNavigation.Root");
+    return context;
+}
+function useVerticalNavigationBranchContext() {
+    const context = useContext(VerticalNavigationBranchContext);
+    if (!context) throw new Error("VerticalNavigation branch parts must be used within VerticalNavigation.Branch");
+    return context;
+}
+export { VerticalNavigationBranchContext, VerticalNavigationContext, VerticalNavigationDepthContext, useVerticalNavigationBranchContext, useVerticalNavigationContext };

package/dist/internal/molecules/vertical-navigation.styles.js

@@ -0,0 +1,68 @@
+import { tv } from "../../utils.js";
+const verticalNavigationStyles = tv({
+    slots: {
+        root: "min-w-0 text-vertical-navigation-fg",
+        list: "flex min-w-0 list-none flex-col gap-vertical-navigation-list",
+        item: "min-w-0",
+        row: "vertical-navigation-row flex min-w-0 items-start gap-vertical-navigation-row rounded-vertical-navigation-item bg-vertical-navigation-item-bg data-current-path:font-vertical-navigation-path",
+        link: "vertical-navigation-control focus-visible:vertical-navigation-focus flex min-w-0 flex-1 items-center justify-start gap-vertical-navigation-row whitespace-normal rounded-vertical-navigation-item bg-vertical-navigation-item-bg text-start text-inherit hover:bg-vertical-navigation-item-bg-hover data-current:bg-vertical-navigation-item-bg-current data-current-path:font-vertical-navigation-path data-current:font-vertical-navigation-current data-current:text-vertical-navigation-item-fg-current data-disabled:text-vertical-navigation-item-fg-disabled data-disabled:hover:bg-vertical-navigation-item-bg",
+        trigger: "vertical-navigation-control focus-visible:vertical-navigation-focus flex w-full min-w-0 items-center justify-between whitespace-normal rounded-vertical-navigation-item bg-vertical-navigation-item-bg text-start text-inherit hover:bg-vertical-navigation-item-bg-hover disabled:text-vertical-navigation-item-fg-disabled disabled:hover:bg-vertical-navigation-item-bg",
+        indicator: "inline-flex shrink-0 data-[state=open]:rotate-180",
+        content: "data-guide:vertical-navigation-guide min-w-0 rounded-vertical-navigation-group py-vertical-navigation-group data-indented:ms-vertical-navigation-indent",
+        group: "flex min-w-0 flex-col gap-vertical-navigation-group rounded-vertical-navigation-group p-vertical-navigation-group",
+        groupLabel: "mb-vertical-navigation-label font-vertical-navigation-label text-vertical-navigation-label-fg text-vertical-navigation-label-sm",
+        separator: "my-vertical-navigation-group h-vertical-navigation-separator border-0 bg-vertical-navigation-separator-bg"
+    },
+    variants: {
+        variant: {
+            primary: {},
+            secondary: {}
+        },
+        size: {
+            sm: {
+                root: "text-vertical-navigation-sm",
+                link: "min-h-vertical-navigation-item-sm px-vertical-navigation-item-x-sm py-vertical-navigation-item-y-sm",
+                trigger: "min-h-vertical-navigation-item-sm px-vertical-navigation-item-x-sm py-vertical-navigation-item-y-sm",
+                indicator: "text-vertical-navigation-icon-sm",
+                groupLabel: "px-vertical-navigation-item-x-sm"
+            },
+            md: {
+                root: "text-vertical-navigation-md",
+                link: "min-h-vertical-navigation-item-md px-vertical-navigation-item-x-md py-vertical-navigation-item-y-md",
+                trigger: "min-h-vertical-navigation-item-md px-vertical-navigation-item-x-md py-vertical-navigation-item-y-md",
+                indicator: "text-vertical-navigation-icon-md",
+                groupLabel: "px-vertical-navigation-item-x-md"
+            }
+        },
+        tone: {
+            plain: {
+                content: "bg-vertical-navigation-group-bg-plain text-vertical-navigation-group-fg-plain",
+                group: "bg-vertical-navigation-group-bg-plain text-vertical-navigation-group-fg-plain"
+            },
+            subtle: {
+                content: "bg-vertical-navigation-group-bg-subtle text-vertical-navigation-group-fg-subtle",
+                group: "bg-vertical-navigation-group-bg-subtle text-vertical-navigation-group-fg-subtle"
+            },
+            accent: {
+                content: "bg-vertical-navigation-group-bg-accent text-vertical-navigation-group-fg-accent",
+                group: "bg-vertical-navigation-group-bg-accent text-vertical-navigation-group-fg-accent"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            tone: "accent",
+            variant: "secondary",
+            class: {
+                content: "bg-vertical-navigation-group-bg-secondary text-vertical-navigation-group-fg-secondary",
+                group: "bg-vertical-navigation-group-bg-secondary text-vertical-navigation-group-fg-secondary"
+            }
+        }
+    ],
+    defaultVariants: {
+        size: "md",
+        tone: "plain",
+        variant: "primary"
+    }
+});
+export { verticalNavigationStyles };

package/dist/molecules/vertical-navigation.js

@@ -0,0 +1,228 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { useContext, useId } from "react";
+import { Button } from "../atoms/button.js";
+import { Icon } from "../atoms/icon.js";
+import { LinkButton } from "../atoms/link-button.js";
+import { VerticalNavigationBranchContext, VerticalNavigationContext, VerticalNavigationDepthContext, useVerticalNavigationBranchContext, useVerticalNavigationContext } from "../internal/molecules/vertical-navigation.context.js";
+import { verticalNavigationStyles } from "../internal/molecules/vertical-navigation.styles.js";
+import * as __rspack_external__zag_js_collapsible_508ff486 from "@zag-js/collapsible";
+function VerticalNavigation({ size = "md", maxIndentDepth = 3, dir, className, children, ...props }) {
+    return /*#__PURE__*/ jsx(VerticalNavigationContext.Provider, {
+        value: {
+            size,
+            maxIndentDepth,
+            dir
+        },
+        children: /*#__PURE__*/ jsx(VerticalNavigationDepthContext.Provider, {
+            value: 0,
+            children: /*#__PURE__*/ jsx(VerticalNavigationBranchContext.Provider, {
+                value: null,
+                children: /*#__PURE__*/ jsx("nav", {
+                    ...props,
+                    className: verticalNavigationStyles({
+                        size
+                    }).root({
+                        className
+                    }),
+                    "data-part": "root",
+                    "data-scope": "vertical-navigation",
+                    dir: dir,
+                    children: children
+                })
+            })
+        })
+    });
+}
+VerticalNavigation.Root = VerticalNavigation;
+VerticalNavigation.List = function({ children, className, ...props }) {
+    useVerticalNavigationContext();
+    const depth = useContext(VerticalNavigationDepthContext);
+    return /*#__PURE__*/ jsx(VerticalNavigationDepthContext.Provider, {
+        value: depth + 1,
+        children: /*#__PURE__*/ jsx("ul", {
+            ...props,
+            className: verticalNavigationStyles().list({
+                className
+            }),
+            "data-depth": depth,
+            "data-part": "list",
+            "data-scope": "vertical-navigation",
+            children: children
+        })
+    });
+};
+VerticalNavigation.Item = function({ className, ...props }) {
+    useVerticalNavigationContext();
+    return /*#__PURE__*/ jsx(VerticalNavigationBranchContext.Provider, {
+        value: null,
+        children: /*#__PURE__*/ jsx("li", {
+            ...props,
+            className: verticalNavigationStyles().item({
+                className
+            }),
+            "data-part": "item",
+            "data-scope": "vertical-navigation"
+        })
+    });
+};
+VerticalNavigation.Row = function({ className, ...props }) {
+    useVerticalNavigationContext();
+    const branch = useContext(VerticalNavigationBranchContext);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: verticalNavigationStyles().row({
+            className
+        }),
+        "data-current-path": branch?.containsCurrent || void 0,
+        "data-part": "row",
+        "data-scope": "vertical-navigation"
+    });
+};
+VerticalNavigation.Link = function({ current = false, className, ...props }) {
+    const { size } = useVerticalNavigationContext();
+    const branch = useContext(VerticalNavigationBranchContext);
+    return /*#__PURE__*/ jsx(LinkButton, {
+        ...props,
+        "aria-current": current ? "page" : void 0,
+        className: verticalNavigationStyles({
+            size
+        }).link({
+            className
+        }),
+        "data-current": current || void 0,
+        "data-current-path": branch?.containsCurrent || void 0,
+        "data-part": "link",
+        "data-scope": "vertical-navigation",
+        size: "current",
+        theme: "unstyled"
+    });
+};
+VerticalNavigation.Branch = function({ id, open, defaultOpen, onOpenChange, disabled, getRootNode, containsCurrent = false, children, className, ...props }) {
+    const { dir } = useVerticalNavigationContext();
+    const generatedId = useId();
+    const service = useMachine(__rspack_external__zag_js_collapsible_508ff486.machine, {
+        id: id ?? generatedId,
+        dir,
+        open,
+        defaultOpen,
+        onOpenChange,
+        disabled,
+        getRootNode
+    });
+    const api = __rspack_external__zag_js_collapsible_508ff486.connect(service, normalizeProps);
+    return /*#__PURE__*/ jsx(VerticalNavigationBranchContext.Provider, {
+        value: {
+            api,
+            containsCurrent
+        },
+        children: /*#__PURE__*/ jsx("li", {
+            ...mergeProps(props, api.getRootProps()),
+            className: verticalNavigationStyles().item({
+                className
+            }),
+            "data-current-path": containsCurrent || void 0,
+            "data-part": "branch",
+            "data-scope": "vertical-navigation",
+            children: children
+        })
+    });
+};
+VerticalNavigation.BranchTrigger = function({ className, disabled, ...props }) {
+    const { size } = useVerticalNavigationContext();
+    const { api } = useVerticalNavigationBranchContext();
+    return /*#__PURE__*/ jsx(Button, {
+        ...mergeProps(props, api.getTriggerProps()),
+        className: verticalNavigationStyles({
+            size
+        }).trigger({
+            className
+        }),
+        "data-part": "branch-trigger",
+        "data-scope": "vertical-navigation",
+        disabled: disabled || api.disabled,
+        size: "current",
+        theme: "unstyled"
+    });
+};
+VerticalNavigation.BranchIndicator = function({ className, ...props }) {
+    const { size } = useVerticalNavigationContext();
+    const { api } = useVerticalNavigationBranchContext();
+    return /*#__PURE__*/ jsx("span", {
+        ...mergeProps(props, api.getIndicatorProps()),
+        "aria-hidden": "true",
+        className: verticalNavigationStyles({
+            size
+        }).indicator({
+            className
+        }),
+        "data-part": "branch-indicator",
+        "data-scope": "vertical-navigation",
+        children: /*#__PURE__*/ jsx(Icon, {
+            icon: "token-icon-vertical-navigation-chevron",
+            size: "current"
+        })
+    });
+};
+VerticalNavigation.BranchContent = function({ tone = "plain", variant = "primary", indent = true, showGuide = false, className, ...props }) {
+    const { maxIndentDepth } = useVerticalNavigationContext();
+    const { api } = useVerticalNavigationBranchContext();
+    const depth = useContext(VerticalNavigationDepthContext);
+    return /*#__PURE__*/ jsx("div", {
+        ...mergeProps(props, api.getContentProps()),
+        className: verticalNavigationStyles({
+            tone,
+            variant
+        }).content({
+            className
+        }),
+        "data-guide": showGuide || void 0,
+        "data-indented": indent && depth <= maxIndentDepth || void 0,
+        "data-part": "branch-content",
+        "data-scope": "vertical-navigation",
+        "data-tone": tone,
+        "data-variant": variant
+    });
+};
+VerticalNavigation.Group = function({ tone = "plain", variant = "primary", className, ...props }) {
+    useVerticalNavigationContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: verticalNavigationStyles({
+            tone,
+            variant
+        }).group({
+            className
+        }),
+        "data-part": "group",
+        "data-scope": "vertical-navigation",
+        "data-tone": tone,
+        "data-variant": variant
+    });
+};
+VerticalNavigation.GroupLabel = function({ className, ...props }) {
+    const { size } = useVerticalNavigationContext();
+    return /*#__PURE__*/ jsx("h2", {
+        ...props,
+        className: verticalNavigationStyles({
+            size
+        }).groupLabel({
+            className
+        }),
+        "data-part": "group-label",
+        "data-scope": "vertical-navigation"
+    });
+};
+VerticalNavigation.Separator = function({ className, ...props }) {
+    useVerticalNavigationContext();
+    return /*#__PURE__*/ jsx("hr", {
+        ...props,
+        className: verticalNavigationStyles().separator({
+            className
+        }),
+        "data-part": "separator",
+        "data-scope": "vertical-navigation"
+    });
+};
+export { VerticalNavigation };

package/dist/src/internal/molecules/vertical-navigation.context.d.ts

@@ -0,0 +1,25 @@
+import type { Api } from "@zag-js/collapsible";
+import type { PropTypes } from "@zag-js/react";
+export type VerticalNavigationSize = "sm" | "md";
+export type VerticalNavigationTone = "plain" | "subtle" | "accent";
+export type VerticalNavigationVariant = "primary" | "secondary";
+export declare const VerticalNavigationContext: import("react").Context<{
+    size: VerticalNavigationSize;
+    maxIndentDepth: number;
+    dir?: "ltr" | "rtl";
+} | null>;
+export declare const VerticalNavigationDepthContext: import("react").Context<number>;
+export declare const VerticalNavigationBranchContext: import("react").Context<{
+    api: Api<PropTypes>;
+    containsCurrent: boolean;
+} | null>;
+export declare function useVerticalNavigationContext(): {
+    size: VerticalNavigationSize;
+    maxIndentDepth: number;
+    dir?: "ltr" | "rtl";
+};
+export declare function useVerticalNavigationBranchContext(): {
+    api: Api<PropTypes>;
+    containsCurrent: boolean;
+};
+//# sourceMappingURL=vertical-navigation.context.d.ts.map

package/dist/src/internal/molecules/vertical-navigation.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-navigation.context.d.ts","sourceRoot":"","sources":["../../../../src/internal/molecules/vertical-navigation.context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAG9C,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,CAAA;AAChD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAClE,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,WAAW,CAAA;AAE/D,eAAO,MAAM,yBAAyB;UAC9B,sBAAsB;oBACZ,MAAM;UAChB,KAAK,GAAG,KAAK;SACN,CAAA;AACf,eAAO,MAAM,8BAA8B,iCAAmB,CAAA;AAC9D,eAAO,MAAM,+BAA+B;SACrC,GAAG,CAAC,SAAS,CAAC;qBACF,OAAO;SACX,CAAA;AAEf,wBAAgB,4BAA4B;UAVpC,sBAAsB;oBACZ,MAAM;UAChB,KAAK,GAAG,KAAK;EAgBpB;AAED,wBAAgB,kCAAkC;SAd3C,GAAG,CAAC,SAAS,CAAC;qBACF,OAAO;EAqBzB"}

package/dist/src/internal/molecules/vertical-navigation.styles.d.ts

@@ -0,0 +1,143 @@
+export declare const verticalNavigationStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            link: string;
+            trigger: string;
+            indicator: string;
+            groupLabel: string;
+        };
+        md: {
+            root: string;
+            link: string;
+            trigger: string;
+            indicator: string;
+            groupLabel: string;
+        };
+    };
+    tone: {
+        plain: {
+            content: string;
+            group: string;
+        };
+        subtle: {
+            content: string;
+            group: string;
+        };
+        accent: {
+            content: string;
+            group: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    row: string;
+    link: string;
+    trigger: string;
+    indicator: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    separator: string;
+}, undefined, {
+    variant: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            link: string;
+            trigger: string;
+            indicator: string;
+            groupLabel: string;
+        };
+        md: {
+            root: string;
+            link: string;
+            trigger: string;
+            indicator: string;
+            groupLabel: string;
+        };
+    };
+    tone: {
+        plain: {
+            content: string;
+            group: string;
+        };
+        subtle: {
+            content: string;
+            group: string;
+        };
+        accent: {
+            content: string;
+            group: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    row: string;
+    link: string;
+    trigger: string;
+    indicator: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        secondary: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            link: string;
+            trigger: string;
+            indicator: string;
+            groupLabel: string;
+        };
+        md: {
+            root: string;
+            link: string;
+            trigger: string;
+            indicator: string;
+            groupLabel: string;
+        };
+    };
+    tone: {
+        plain: {
+            content: string;
+            group: string;
+        };
+        subtle: {
+            content: string;
+            group: string;
+        };
+        accent: {
+            content: string;
+            group: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    item: string;
+    row: string;
+    link: string;
+    trigger: string;
+    indicator: string;
+    content: string;
+    group: string;
+    groupLabel: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+//# sourceMappingURL=vertical-navigation.styles.d.ts.map

package/dist/src/internal/molecules/vertical-navigation.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-navigation.styles.d.ts","sourceRoot":"","sources":["../../../../src/internal/molecules/vertical-navigation.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAyEnC,CAAA"}

package/dist/src/molecules/vertical-navigation.d.ts

@@ -0,0 +1,44 @@
+import * as collapsible from "@zag-js/collapsible";
+import { type ComponentProps, type ElementType } from "react";
+import { Button } from "../atoms/button.js";
+import { type LinkButtonProps } from "../atoms/link-button.js";
+import { type VerticalNavigationSize, type VerticalNavigationTone, type VerticalNavigationVariant } from "../internal/molecules/vertical-navigation.context.js";
+export type { VerticalNavigationSize, VerticalNavigationTone, VerticalNavigationVariant, } from "../internal/molecules/vertical-navigation.context.js";
+export type VerticalNavigationProps = Omit<ComponentProps<"nav">, "dir"> & {
+    size?: VerticalNavigationSize;
+    dir?: "ltr" | "rtl";
+    /** Maximum cumulative indent; the semantic nesting is never flattened. */
+    maxIndentDepth?: number;
+};
+export declare function VerticalNavigation({ size, maxIndentDepth, dir, className, children, ...props }: VerticalNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace VerticalNavigation {
+    var Root: typeof VerticalNavigation;
+    var List: ({ children, className, ...props }: ComponentProps<"ul">) => import("react/jsx-runtime").JSX.Element;
+    var Item: ({ className, ...props }: ComponentProps<"li">) => import("react/jsx-runtime").JSX.Element;
+    var Row: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+    var Link: <T extends ElementType = "a">({ current, className, ...props }: VerticalNavigationLinkProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Branch: ({ id, open, defaultOpen, onOpenChange, disabled, getRootNode, containsCurrent, children, className, ...props }: VerticalNavigationBranchProps) => import("react/jsx-runtime").JSX.Element;
+    var BranchTrigger: ({ className, disabled, ...props }: VerticalNavigationBranchTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    var BranchIndicator: ({ className, ...props }: ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+    var BranchContent: ({ tone, variant, indent, showGuide, className, ...props }: VerticalNavigationBranchContentProps) => import("react/jsx-runtime").JSX.Element;
+    var Group: ({ tone, variant, className, ...props }: ComponentProps<"div"> & {
+        tone?: VerticalNavigationTone;
+        variant?: VerticalNavigationVariant;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var GroupLabel: ({ className, ...props }: ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+    var Separator: ({ className, ...props }: ComponentProps<"hr">) => import("react/jsx-runtime").JSX.Element;
+}
+export type VerticalNavigationLinkProps<T extends ElementType = "a"> = Omit<LinkButtonProps<T>, "size" | "theme" | "variant" | "block" | "uppercase"> & {
+    current?: boolean;
+};
+export type VerticalNavigationBranchProps = Omit<ComponentProps<"li">, "onChange" | "dir"> & Pick<collapsible.Props, "open" | "defaultOpen" | "onOpenChange" | "disabled" | "getRootNode"> & {
+    containsCurrent?: boolean;
+};
+export type VerticalNavigationBranchTriggerProps = Omit<ComponentProps<typeof Button>, "size" | "theme" | "variant" | "block" | "uppercase">;
+export type VerticalNavigationBranchContentProps = ComponentProps<"div"> & {
+    tone?: VerticalNavigationTone;
+    variant?: VerticalNavigationVariant;
+    indent?: boolean;
+    showGuide?: boolean;
+};
+//# sourceMappingURL=vertical-navigation.d.ts.map

package/dist/src/molecules/vertical-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-navigation.d.ts","sourceRoot":"","sources":["../../../src/molecules/vertical-navigation.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,WAAW,MAAM,qBAAqB,CAAA;AAElD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAqB,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACvE,OAAO,EAML,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC/B,MAAM,mDAAmD,CAAA;AAG1D,YAAY,EACV,sBAAsB,EACtB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,mDAAmD,CAAA;AAE1D,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAW,EACX,cAAkB,EAClB,GAAG,EACH,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAkBzB;yBAzBe,kBAAkB;;kDAiC/B,cAAc,CAAC,IAAI,CAAC;wCAqBpB,cAAc,CAAC,IAAI,CAAC;uCAiBpB,cAAc,CAAC,KAAK,CAAC;eAoBtB,CAAC,SAAS,WAAW,0CACqB,2BAA2B,CAAC,CAAC,CAAC;iIAuCvE,6BAA6B;2DAqC7B,oCAAoC;mDAoBlC,cAAc,CAAC,MAAM,CAAC;mFA8BxB,oCAAoC;wDAyBpC,cAAc,CAAC,KAAK,CAAC,GAAG;QACzB,IAAI,CAAC,EAAE,sBAAsB,CAAA;QAC7B,OAAO,CAAC,EAAE,yBAAyB,CAAA;KACpC;8CAmBE,cAAc,CAAC,IAAI,CAAC;6CAepB,cAAc,CAAC,IAAI,CAAC;;AAnMvB,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,IAAI,CACzE,eAAe,CAAC,CAAC,CAAC,EAClB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CACrD,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAuBzB,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC9C,cAAc,CAAC,IAAI,CAAC,EACpB,UAAU,GAAG,KAAK,CACnB,GACC,IAAI,CACF,WAAW,CAAC,KAAK,EACjB,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,aAAa,CACrE,GAAG;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAyCnC,MAAM,MAAM,oCAAoC,GAAG,IAAI,CACrD,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CACrD,CAAA;AA0CD,MAAM,MAAM,oCAAoC,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,OAAO,CAAC,EAAE,yBAAyB,CAAA;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}

package/dist/src/types/zag.d.ts

@@ -2,6 +2,7 @@ export type * as Accordion from "@zag-js/accordion";
 export type * as Carousel from "@zag-js/carousel";
 export type * as CascadeSelect from "@zag-js/cascade-select";
 export type * as Checkbox from "@zag-js/checkbox";
+export type * as Collapsible from "@zag-js/collapsible";
 export type * as Combobox from "@zag-js/combobox";
 export type * as Dialog from "@zag-js/dialog";
 export type * as Drawer from "@zag-js/drawer";

package/dist/src/types/zag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zag.d.ts","sourceRoot":"","sources":["../../../src/types/zag.ts"],"names":[],"mappings":"AAAA,YAAY,KAAK,SAAS,MAAM,mBAAmB,CAAA;AACnD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,aAAa,MAAM,wBAAwB,CAAA;AAC5D,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,UAAU,MAAM,oBAAoB,CAAA;AACrD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,QAAQ,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"zag.d.ts","sourceRoot":"","sources":["../../../src/types/zag.ts"],"names":[],"mappings":"AAAA,YAAY,KAAK,SAAS,MAAM,mBAAmB,CAAA;AACnD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,aAAa,MAAM,wBAAwB,CAAA;AAC5D,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,WAAW,MAAM,qBAAqB,CAAA;AACvD,YAAY,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AACjD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,UAAU,MAAM,oBAAoB,CAAA;AACrD,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACtD,YAAY,KAAK,WAAW,MAAM,sBAAsB,CAAA;AACxD,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAC7C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,KAAK,MAAM,eAAe,CAAA;AAC3C,YAAY,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC/C,YAAY,KAAK,IAAI,MAAM,cAAc,CAAA;AACzC,YAAY,KAAK,QAAQ,MAAM,mBAAmB,CAAA"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiOtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAyOtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/stories/molecules/vertical-navigation.stories.d.ts

@@ -0,0 +1,75 @@
+import type { StoryObj } from "@storybook/react";
+import "./vertical-navigation.stories.css";
+type NavigationStoryProps = {
+    size: "sm" | "md";
+    tone: "plain" | "subtle" | "accent";
+    variant: "primary" | "secondary";
+    indent: boolean;
+    showGuide: boolean;
+    dir: "ltr" | "rtl";
+};
+declare function NavigationStory(args: NavigationStoryProps): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof NavigationStory;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+            if: {
+                arg: string;
+                eq: string;
+            };
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        tone: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        indent: {
+            control: "boolean";
+        };
+        showGuide: {
+            control: "boolean";
+        };
+        dir: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        size: "md";
+        tone: "subtle";
+        variant: "primary";
+        indent: true;
+        showGuide: false;
+        dir: "ltr";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const SevenLevels: Story;
+export declare const Controlled: Story;
+export declare const WithinDrawer: Story;
+export declare const WithinSidebar: Story;
+export declare const RTL: Story;
+export declare const AkrosCatalog: Story;
+//# sourceMappingURL=vertical-navigation.stories.d.ts.map

package/dist/stories/molecules/vertical-navigation.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-navigation.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/vertical-navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAQtD,OAAO,mCAAmC,CAAA;AAE1C,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAA;IACjB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACnC,OAAO,EAAE,SAAS,GAAG,WAAW,CAAA;IAChC,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,GAAG,EAAE,KAAK,GAAG,KAAK,CAAA;CACnB,CAAA;AAoGD,iBAAS,eAAe,CAAC,IAAI,EAAE,oBAAoB,2CAMlD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC8B,CAAA;AAExC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAA;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAyBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAanB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAuEpB,CAAA;AA+ID,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAA;AA2DD,eAAO,MAAM,UAAU,EAAE,KAGxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAyB1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAA;AAED,eAAO,MAAM,GAAG,EAAE,KAAgC,CAAA;AAwGlD,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAA"}

package/dist/test/vertical-navigation.behavior.spec.d.ts

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

package/dist/test/vertical-navigation.behavior.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-navigation.behavior.spec.d.ts","sourceRoot":"","sources":["../../test/vertical-navigation.behavior.spec.ts"],"names":[],"mappings":""}

package/dist/test/vertical-navigation.playwright.config.d.ts

@@ -0,0 +1,4 @@
+/** Focused behavior checks against an already running Storybook. */
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;
+//# sourceMappingURL=vertical-navigation.playwright.config.d.ts.map

package/dist/test/vertical-navigation.playwright.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-navigation.playwright.config.d.ts","sourceRoot":"","sources":["../../test/vertical-navigation.playwright.config.ts"],"names":[],"mappings":"AAEA,oEAAoE;;AACpE,wBAeE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -109,6 +109,7 @@
     "@zag-js/carousel": "1.43.3",
     "@zag-js/cascade-select": "1.43.3",
     "@zag-js/checkbox": "1.43.3",
+    "@zag-js/collapsible": "1.43.3",
     "@zag-js/combobox": "1.43.3",
     "@zag-js/date-input": "1.43.3",
     "@zag-js/date-picker": "1.43.3",

package/src/tokens/components/components.css

@@ -44,6 +44,7 @@
 @import "./molecules/_toast.css";
 @import "./molecules/_tour.css";
 @import "./molecules/_tree-view.css";
+@import "./molecules/_vertical-navigation.css";
 
 @import "./organisms/_table.css";
 @import "./organisms/_data-table.css";

package/src/tokens/components/molecules/_vertical-navigation.css

@@ -0,0 +1,155 @@
+@theme static {
+  /* BASE COLOR MAPPING */
+  --color-vertical-navigation-surface: var(--color-fill-surface);
+  --color-vertical-navigation-foreground: var(--color-fg-primary);
+  --color-vertical-navigation-accent: var(--color-bg-primary-base);
+  --color-vertical-navigation-secondary: var(--color-bg-secondary-base);
+  --color-vertical-navigation-accent-light: color-mix(
+    in oklab,
+    var(--color-vertical-navigation-accent) 15%,
+    var(--color-vertical-navigation-surface)
+  );
+
+  /* DERIVED COLORS */
+  --color-vertical-navigation-fg: var(--color-vertical-navigation-foreground);
+  --color-vertical-navigation-item-bg: transparent;
+  --color-vertical-navigation-label-fg: var(
+    --color-vertical-navigation-foreground
+  );
+  --color-vertical-navigation-guide-border: var(--color-border-primary);
+  --color-vertical-navigation-separator-bg: var(--color-border-primary);
+
+  /* STATE VARIATIONS */
+  --color-vertical-navigation-item-bg-hover: var(--color-fill-hover);
+  --color-vertical-navigation-indicator-fg-hover: color-mix(
+    in oklab,
+    var(--color-fg-accent-primary) 60%,
+    var(--color-vertical-navigation-foreground)
+  );
+  --color-vertical-navigation-item-bg-current: color-mix(
+    in oklab,
+    var(--color-vertical-navigation-accent) 30%,
+    var(--color-vertical-navigation-surface)
+  );
+  --color-vertical-navigation-item-fg-current: var(
+    --color-vertical-navigation-foreground
+  );
+
+  /* COMPONENT VARIANTS */
+  --color-vertical-navigation-group-bg-plain: transparent;
+  --color-vertical-navigation-group-fg-plain: var(
+    --color-vertical-navigation-foreground
+  );
+  --color-vertical-navigation-group-bg-subtle: var(
+    --color-vertical-navigation-surface
+  );
+  --color-vertical-navigation-group-fg-subtle: var(
+    --color-vertical-navigation-foreground
+  );
+  --color-vertical-navigation-group-bg-accent: var(
+    --color-vertical-navigation-accent-light
+  );
+  --color-vertical-navigation-group-fg-accent: var(
+    --color-vertical-navigation-foreground
+  );
+
+  --color-vertical-navigation-group-bg-secondary: color-mix(
+    in oklab,
+    var(--color-vertical-navigation-secondary) 15%,
+    var(--color-vertical-navigation-surface)
+  );
+  --color-vertical-navigation-group-fg-secondary: var(
+    --color-vertical-navigation-foreground
+  );
+
+  /* DISABLED STATES */
+  --color-vertical-navigation-item-fg-disabled: var(--color-fg-disabled);
+
+  /* SPACING */
+  --spacing-vertical-navigation-list: var(--dimension-2);
+  --spacing-vertical-navigation-row: var(--spacing-50);
+  --spacing-vertical-navigation-group: var(--spacing-100);
+  --spacing-vertical-navigation-indent: var(--dimension-12);
+  --spacing-vertical-navigation-label: var(--dimension-8);
+  --spacing-vertical-navigation-item-sm: var(--height-form-control-sm);
+  --spacing-vertical-navigation-item-md: var(--dimension-36);
+  --spacing-vertical-navigation-separator: var(--border-width-sm);
+  --padding-vertical-navigation-item-x-sm: var(--padding-popup-item-x-sm);
+  --padding-vertical-navigation-item-x-md: var(--padding-popup-item-x-md);
+  --padding-vertical-navigation-item-y-sm: var(--padding-popup-item-y-sm);
+  --padding-vertical-navigation-item-y-md: var(--padding-popup-item-y-md);
+  --padding-vertical-navigation-group: var(--dimension-0);
+
+  /* TYPOGRAPHY */
+  --text-vertical-navigation-sm: var(--text-sm);
+  --text-vertical-navigation-md: var(--text-base);
+  --text-vertical-navigation-label-sm: var(--text-xs);
+  --text-vertical-navigation-icon-sm: var(--text-icon-control-sm);
+  --text-vertical-navigation-icon-md: var(--text-icon-control-md);
+  --font-weight-vertical-navigation-current: var(--font-weight-semibold);
+  --font-weight-vertical-navigation-label: var(--font-weight-semibold);
+  --font-weight-vertical-navigation-path: var(--font-weight-medium);
+
+  /* BORDERS & RADIUS */
+  --border-width-vertical-navigation: var(--border-width-sm);
+  --radius-vertical-navigation-item: var(--radius-sm);
+  --radius-vertical-navigation-group: var(--radius-none);
+
+  /* FOCUS RINGS */
+  --color-vertical-navigation-focus-border: var(--color-ring);
+}
+
+@utility vertical-navigation-focus {
+  outline-style: var(--default-ring-style);
+  outline-width: var(--default-ring-width);
+  outline-color: var(--color-vertical-navigation-focus-border);
+  outline-offset: var(--default-ring-offset);
+}
+
+@utility vertical-navigation-guide {
+  border-inline-start: var(--border-width-vertical-navigation) solid
+    var(--color-vertical-navigation-guide-border);
+}
+
+@utility vertical-navigation-row {
+  & > [data-part="link"],
+  & > [data-part="branch-trigger"] {
+    &,
+    &:hover,
+    &[data-current] {
+      background-color: transparent;
+    }
+  }
+
+  & > [data-part="branch-trigger"] {
+    width: auto;
+    flex-shrink: 0;
+  }
+
+  @media (hover: hover) {
+    &:hover:not(:has(> [data-part="link"][data-current])):has(
+        > [data-part="link"]:not([data-disabled]),
+        > [data-part="branch-trigger"]:not(:disabled)
+      ) {
+      background-color: var(--color-vertical-navigation-item-bg-hover);
+    }
+
+    &
+      > [data-part="branch-trigger"]:not(:disabled):hover
+      > [data-part="branch-indicator"] {
+      color: var(--color-vertical-navigation-indicator-fg-hover);
+    }
+  }
+
+  &:has(> [data-part="link"][data-current]) {
+    background-color: var(--color-vertical-navigation-item-bg-current);
+  }
+}
+
+@utility vertical-navigation-control {
+  overflow-wrap: anywhere;
+}
+
+@utility token-icon-vertical-navigation-chevron {
+  @apply token-icon-chevron-down;
+}