@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/layout/stack/stack.d.mts

@@ -2,7 +2,7 @@ import { GapSize } from "../_shared/gap.mjs";
 import { PaddingSize } from "../_shared/padding.mjs";
 import { FC, HTMLAttributes, PropsWithChildren } from "react";
 //#region src/components/layout/stack/stack.d.ts
-type StackProps = PropsWithChildren<{
+export type StackProps = PropsWithChildren<{
   direction?: 'row' | 'column';
   gap?: GapSize;
   /** Inner padding on all sides. Stack has no padding by default. */
@@ -10,6 +10,5 @@ type StackProps = PropsWithChildren<{
   align?: 'start' | 'center' | 'end' | 'stretch';
   justify?: 'start' | 'center' | 'end' | 'between';
 } & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>>;
-declare const Stack: FC<StackProps>;
-//#endregion
-export { Stack, StackProps };
+export declare const Stack: FC<StackProps>;
+//#endregion

package/dist/components/layout/stack/stack.mjs

@@ -1,23 +1,24 @@
-import { cn } from "../../../helpers/cn.mjs";
 import { GAP_CLASS } from "../_shared/gap.mjs";
 import { PADDING_CLASS } from "../_shared/padding.mjs";
+import stack_module_default from "./stack.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/layout/stack/stack.tsx
 const ALIGN_CLASS = {
-	start: "items-start",
-	center: "items-center",
-	end: "items-end",
-	stretch: "items-stretch"
+	start: stack_module_default.alignStart,
+	center: stack_module_default.alignCenter,
+	end: stack_module_default.alignEnd,
+	stretch: stack_module_default.alignStretch
 };
 const JUSTIFY_CLASS = {
-	start: "justify-start",
-	center: "justify-center",
-	end: "justify-end",
-	between: "justify-between"
+	start: stack_module_default.justifyStart,
+	center: stack_module_default.justifyCenter,
+	end: stack_module_default.justifyEnd,
+	between: stack_module_default.justifyBetween
 };
 const Stack = ({ direction = "column", gap = "md", padding, align, justify, children, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("flex", direction === "row" ? "flex-row" : "flex-col", GAP_CLASS[gap], padding && PADDING_CLASS[padding], align && ALIGN_CLASS[align], justify && JUSTIFY_CLASS[justify]),
+	className: clsx(stack_module_default.root, direction === "row" ? stack_module_default.row : stack_module_default.column, GAP_CLASS[gap], padding && PADDING_CLASS[padding], align && ALIGN_CLASS[align], justify && JUSTIFY_CLASS[justify]),
 	children
 });
 //#endregion

package/dist/components/layout/stack/stack.module.mjs

@@ -0,0 +1,17 @@
+import './stack.css';
+//#region src/components/layout/stack/stack.module.css
+var stack_module_default = {
+	"alignCenter": "xGsfrG_alignCenter",
+	"alignEnd": "xGsfrG_alignEnd",
+	"alignStart": "xGsfrG_alignStart",
+	"alignStretch": "xGsfrG_alignStretch",
+	"column": "xGsfrG_column",
+	"justifyBetween": "xGsfrG_justifyBetween",
+	"justifyCenter": "xGsfrG_justifyCenter",
+	"justifyEnd": "xGsfrG_justifyEnd",
+	"justifyStart": "xGsfrG_justifyStart",
+	"root": "xGsfrG_root",
+	"row": "xGsfrG_row"
+};
+//#endregion
+export { stack_module_default as default };

package/dist/components/navigation/anchor/anchor.css

@@ -0,0 +1,29 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._7nx_2W_root {
+    color: var(--color-fg-info);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    text-decoration-line: underline;
+  }
+
+  @media (hover: hover) {
+    ._7nx_2W_root:hover {
+      color: var(--color-fg-base);
+    }
+  }
+
+  ._7nx_2W_root:focus-visible {
+    border-radius: var(--radius-sm);
+  }
+
+  ._7nx_2W_external {
+    align-items: center;
+    gap: calc(var(--spacing) * .5);
+    display: inline-flex;
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/anchor/anchor.d.mts

@@ -15,6 +15,6 @@ type Props<T extends string> = {
   openInNewTab?: boolean;
   renderAnchor?: (props: RenderAnchorProps<T>) => ReactNode;
 } & RestProps;
-declare const Anchor: <T extends string>({ href, children, openInNewTab, renderAnchor, ...rest }: Props<T>) => ReactNode;
+export declare const Anchor: <T extends string>({ href, children, openInNewTab, renderAnchor, ...rest }: Props<T>) => ReactNode;
 //#endregion
-export { Anchor };
+export {};

package/dist/components/navigation/anchor/anchor.mjs

@@ -1,4 +1,7 @@
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ExternalLinkIcon } from "../../icons/lucide.mjs";
+import anchor_module_default from "./anchor.module.mjs";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/anchor/anchor.tsx
 const defaultRenderAnchor = ({ children: anchorChildren, ...rest }) => /* @__PURE__ */ jsx("a", {
@@ -7,12 +10,12 @@ const defaultRenderAnchor = ({ children: anchorChildren, ...rest }) => /* @__PUR
 });
 const Anchor = ({ href, children, openInNewTab = false, renderAnchor = defaultRenderAnchor, ...rest }) => {
 	const kind = !href.startsWith("http") && !openInNewTab ? "internal" : "external";
-	const baseClassName = "text-fg-info underline transition-colors hover:text-fg-base focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info focus-visible:rounded-sm";
+	const baseClassName = clsx(anchor_module_default.root, focus_ring_module_default.ringNoBorder);
 	const props = kind === "internal" ? {
 		className: baseClassName,
 		children
 	} : {
-		className: `${baseClassName} inline-flex items-center gap-0.5`,
+		className: clsx(baseClassName, anchor_module_default.external),
 		target: "_blank",
 		rel: "noopener noreferrer",
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(ExternalLinkIcon, { size: "sm" })] })

package/dist/components/navigation/anchor/anchor.module.mjs

@@ -0,0 +1,8 @@
+import './anchor.css';
+//#region src/components/navigation/anchor/anchor.module.css
+var anchor_module_default = {
+	"external": "_7nx_2W_external",
+	"root": "_7nx_2W_root"
+};
+//#endregion
+export { anchor_module_default as default };

package/dist/components/navigation/anchor/index.mjs

@@ -1,2 +1 @@
-import { Anchor } from "./anchor.mjs";
-export { Anchor };
+export { Anchor } from "./anchor.mjs";

package/dist/components/navigation/breadcrumb/breadcrumb.css

@@ -0,0 +1,72 @@
+@layer properties, theme, base;
+
+@layer components {
+  .pX7MyW_list {
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    color: var(--color-fg-mute);
+    list-style-type: none;
+    display: flex;
+  }
+
+  .pX7MyW_sm {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+  }
+
+  .pX7MyW_md {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-md);
+      line-height: var(--line-height-md);
+    }
+  }
+
+  .pX7MyW_lg {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+
+    @media (width >= 48rem) {
+      font-size: var(--font-size-2xl);
+      line-height: var(--line-height-2xl);
+    }
+  }
+
+  .pX7MyW_item {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .pX7MyW_separator {
+    color: var(--color-fg-mute);
+
+    @container style(--writing: vertical) {
+      rotate: 90deg;
+    }
+  }
+
+  .pX7MyW_current {
+    color: var(--color-fg-base);
+  }
+
+  .pX7MyW_link {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    text-decoration-line: underline;
+  }
+
+  @media (hover: hover) {
+    .pX7MyW_link:hover {
+      color: var(--color-fg-base);
+    }
+  }
+
+  .pX7MyW_link:focus-visible {
+    border-radius: var(--radius-sm);
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/breadcrumb/breadcrumb.d.mts

@@ -1,19 +1,19 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/navigation/breadcrumb/breadcrumb.d.ts
-declare const List: FC<PropsWithChildren<{
+export declare const List: FC<PropsWithChildren<{
   size?: 'sm' | 'md' | 'lg';
 }>>;
-declare const Item: FC<PropsWithChildren>;
-declare const Separator: FC;
+export declare const Item: FC<PropsWithChildren>;
+export declare const Separator: FC;
 type RenderBreadcrumbAnchorProps<T extends string> = {
   href: NoInfer<T>;
   className: string;
   children: ReactNode;
 };
-declare const Link: <T extends string>({ href, current, children, renderAnchor }: PropsWithChildren<{
+export declare const Link: <T extends string>({ href, current, children, renderAnchor }: PropsWithChildren<{
   href: T;
   current?: boolean;
   renderAnchor?: (props: RenderBreadcrumbAnchorProps<T>) => ReactNode;
 }>) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 //#endregion
-export { Item, Link, List, Separator };
+export {};

package/dist/components/navigation/breadcrumb/breadcrumb.mjs

@@ -1,26 +1,32 @@
-"use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import breadcrumb_module_default from "./breadcrumb.module.mjs";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/breadcrumb/breadcrumb.tsx
+const SIZE = {
+	sm: breadcrumb_module_default.sm,
+	md: breadcrumb_module_default.md,
+	lg: breadcrumb_module_default.lg
+};
 const List = ({ children, size = "md" }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": messages.breadcrumb,
 		children: /* @__PURE__ */ jsx("ol", {
-			className: cn("flex list-none items-center gap-1 text-fg-mute", size === "sm" && "text-xs", size === "md" && "text-xs md:text-md", size === "lg" && "text-xl md:text-2xl"),
+			className: clsx(breadcrumb_module_default.list, SIZE[size]),
 			children
 		})
 	});
 };
 const Item = ({ children }) => /* @__PURE__ */ jsx("li", {
-	className: "inline-flex items-center",
+	className: breadcrumb_module_default.item,
 	children
 });
 const Separator = () => /* @__PURE__ */ jsx("li", {
 	"aria-hidden": "true",
-	className: "text-fg-mute vertical:rotate-90",
+	className: breadcrumb_module_default.separator,
 	children: /* @__PURE__ */ jsx(ChevronIcon, {
 		direction: "right",
 		size: "sm"
@@ -32,11 +38,11 @@ const defaultRenderBreadcrumbAnchor = ({ children, ...rest }) => /* @__PURE__ */
 });
 const Link = ({ href, current = false, children, renderAnchor = defaultRenderBreadcrumbAnchor }) => current ? /* @__PURE__ */ jsx("span", {
 	"aria-current": "page",
-	className: "text-fg-base",
+	className: breadcrumb_module_default.current,
 	children
 }) : renderAnchor({
 	href,
-	className: "hover:text-fg-base focus-visible:ring-border-info underline transition-colors focus-visible:rounded-sm focus-visible:ring-2 focus-visible:outline-hidden",
+	className: clsx(breadcrumb_module_default.link, focus_ring_module_default.ringNoBorder),
 	children
 });
 //#endregion

package/dist/components/navigation/breadcrumb/breadcrumb.module.mjs

@@ -0,0 +1,14 @@
+import './breadcrumb.css';
+//#region src/components/navigation/breadcrumb/breadcrumb.module.css
+var breadcrumb_module_default = {
+	"current": "pX7MyW_current",
+	"item": "pX7MyW_item",
+	"lg": "pX7MyW_lg",
+	"link": "pX7MyW_link",
+	"list": "pX7MyW_list",
+	"md": "pX7MyW_md",
+	"separator": "pX7MyW_separator",
+	"sm": "pX7MyW_sm"
+};
+//#endregion
+export { breadcrumb_module_default as default };

package/dist/components/navigation/breadcrumb/index.d.mts

@@ -1,6 +1,6 @@
 import { Link } from "./breadcrumb.mjs";
 //#region src/components/navigation/breadcrumb/index.d.ts
-declare const Breadcrumb: {
+export declare const Breadcrumb: {
   readonly List: import("react").FC<import("react").PropsWithChildren<{
     size?: 'sm' | 'md' | 'lg';
   }>>;
@@ -10,5 +10,4 @@ declare const Breadcrumb: {
   readonly Separator: import("react").FC;
   readonly Link: typeof Link;
 };
-//#endregion
-export { Breadcrumb };
+//#endregion

package/dist/components/navigation/pagination/index.mjs

@@ -1,2 +1 @@
-import { Pagination } from "./pagination.mjs";
-export { Pagination };
+export { Pagination } from "./pagination.mjs";

package/dist/components/navigation/pagination/pagination.css

@@ -0,0 +1,36 @@
+@layer properties, theme, base;
+
+@layer components {
+  .LBG7cW_row {
+    justify-content: center;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  .LBG7cW_chevron {
+    display: inline-flex;
+
+    @container style(--writing: vertical) {
+      rotate: 90deg;
+    }
+  }
+
+  .LBG7cW_status {
+    padding-inline: calc(var(--spacing) * 3);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--color-fg-mute);
+  }
+
+  .LBG7cW_current {
+    color: var(--color-fg-base);
+  }
+
+  .LBG7cW_slash {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/pagination/pagination.d.mts

@@ -10,6 +10,6 @@ type Props = {
   'aria-label'?: string;
   ref?: Ref<HTMLElement>;
 } & Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'onChange' | 'children'>;
-declare const Pagination: FC<Props>;
+export declare const Pagination: FC<Props>;
 //#endregion
-export { Pagination };
+export {};

package/dist/components/navigation/pagination/pagination.mjs

@@ -1,11 +1,12 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { Button } from "../../buttons/button/button.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import pagination_module_default from "./pagination.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/pagination/pagination.tsx
 const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevLabel, nextLabel, "aria-label": ariaLabel, ref, ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const safeTotal = Math.max(1, totalPages);
 	const safeCurrent = Math.min(Math.max(1, currentPage), safeTotal);
 	const isFirst = safeCurrent <= 1;
@@ -15,7 +16,7 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 		"aria-label": ariaLabel ?? messages.paginationLabel,
 		ref,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-center gap-2",
+			className: pagination_module_default.row,
 			children: [
 				/* @__PURE__ */ jsx(Button, {
 					color: "base",
@@ -25,7 +26,7 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 					},
 					size: "sm",
 					startIcon: /* @__PURE__ */ jsx("span", {
-						className: "vertical:rotate-90 inline-flex",
+						className: pagination_module_default.chevron,
 						children: /* @__PURE__ */ jsx(ChevronIcon, {
 							direction: "left",
 							size: "sm"
@@ -36,14 +37,14 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 				}),
 				/* @__PURE__ */ jsxs("p", {
 					"aria-live": "polite",
-					className: "text-fg-mute px-3 text-sm tabular-nums",
+					className: pagination_module_default.status,
 					children: [
 						/* @__PURE__ */ jsx("span", {
-							className: "text-fg-base",
+							className: pagination_module_default.current,
 							children: safeCurrent
 						}),
 						/* @__PURE__ */ jsx("span", {
-							className: "mx-1",
+							className: pagination_module_default.slash,
 							children: "/"
 						}),
 						/* @__PURE__ */ jsx("span", { children: safeTotal })
@@ -53,7 +54,7 @@ const Pagination = ({ totalPages, currentPage, onChange, disabled = false, prevL
 					color: "base",
 					disabled: disabled || isLast,
 					endIcon: /* @__PURE__ */ jsx("span", {
-						className: "vertical:rotate-90 inline-flex",
+						className: pagination_module_default.chevron,
 						children: /* @__PURE__ */ jsx(ChevronIcon, {
 							direction: "right",
 							size: "sm"

package/dist/components/navigation/pagination/pagination.module.mjs

@@ -0,0 +1,11 @@
+import './pagination.css';
+//#region src/components/navigation/pagination/pagination.module.css
+var pagination_module_default = {
+	"chevron": "LBG7cW_chevron",
+	"current": "LBG7cW_current",
+	"row": "LBG7cW_row",
+	"slash": "LBG7cW_slash",
+	"status": "LBG7cW_status"
+};
+//#endregion
+export { pagination_module_default as default };

package/dist/components/navigation/side-nav/index.d.mts

@@ -0,0 +1,16 @@
+import { Link } from "./side-nav.mjs";
+//#region src/components/navigation/side-nav/index.d.ts
+export declare const SideNav: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    label: string;
+  } & Omit<import("react").HTMLAttributes<HTMLElement>, "aria-label" | "children" | "className" | "style">>>;
+  readonly Group: import("react").FC<import("react").PropsWithChildren<{
+    title: string;
+  }>>;
+  readonly Sub: import("react").FC<import("react").PropsWithChildren<{
+    title: string;
+    defaultOpen?: boolean;
+  }>>;
+  readonly Link: typeof Link;
+};
+//#endregion

package/dist/components/navigation/side-nav/index.mjs

@@ -0,0 +1,10 @@
+import { Group, Link, Root, Sub } from "./side-nav.mjs";
+//#region src/components/navigation/side-nav/index.ts
+const SideNav = {
+	Root,
+	Group,
+	Sub,
+	Link
+};
+//#endregion
+export { SideNav };

package/dist/components/navigation/side-nav/side-nav.css

@@ -0,0 +1,73 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._2RqvcG_root {
+    gap: calc(var(--spacing) * 6);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._2RqvcG_group {
+    gap: calc(var(--spacing) * 1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  ._2RqvcG_summary {
+    cursor: pointer;
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+    border-inline-start-width: 2px;
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-fg-mute);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    border-color: #0000;
+    margin-inline-start: -1px;
+    padding-inline-start: calc(var(--spacing) * 4);
+    padding-inline-end: calc(var(--spacing) * 3);
+    list-style-type: none;
+    display: flex;
+  }
+
+  ._2RqvcG_summary::-webkit-details-marker {
+    display: none;
+  }
+
+  @media (hover: hover) {
+    ._2RqvcG_summary:hover {
+      border-color: var(--color-border-emphasize);
+      color: var(--color-fg-base);
+    }
+  }
+
+  ._2RqvcG_summary:focus-visible {
+    box-shadow: var(--shadow-ring-inset-info);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._2RqvcG_chevron {
+    transition-property: transform, translate, scale, rotate;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    display: flex;
+  }
+
+  ._2RqvcG_chevron:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    scale: -1 1;
+  }
+
+  ._2RqvcG_sub[open] ._2RqvcG_chevron {
+    rotate: 90deg;
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/side-nav/side-nav.d.mts

@@ -0,0 +1,32 @@
+import { AnchorHTMLAttributes, FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+//#region src/components/navigation/side-nav/side-nav.d.ts
+type RestProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children' | 'className' | 'style' | 'aria-current'>;
+type RenderSideNavAnchorProps<T extends string> = {
+  href: NoInfer<T>;
+  className: string;
+  children: ReactNode;
+  'aria-current': 'page' | undefined;
+} & RestProps;
+export declare const Root: FC<PropsWithChildren<{
+  label: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'aria-label' | 'children'>>>;
+export declare const Group: FC<PropsWithChildren<{
+  title: string;
+}>>;
+export declare const Link: <T extends string>({ href, current, children, renderAnchor, ...rest }: {
+  href: T;
+  current?: boolean;
+  children: ReactNode;
+  renderAnchor?: (props: RenderSideNavAnchorProps<T>) => ReactNode;
+} & RestProps) => import("react").JSX.Element;
+/**
+ * A group inside a group that opens and closes — a level of the tree. It is a
+ * `<details>`, so it works before hydration and without JavaScript; open the
+ * one holding the current page with `defaultOpen`.
+ */
+export declare const Sub: FC<PropsWithChildren<{
+  title: string;
+  defaultOpen?: boolean;
+}>>;
+//#endregion
+export {};

package/dist/components/navigation/side-nav/side-nav.mjs

@@ -0,0 +1,62 @@
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { NAV_LIST_CLASS_NAME, NAV_TITLE_CLASS_NAME, navLinkClassName } from "../../_internal/nav-link.mjs";
+import side_nav_module_default from "./side-nav.module.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/side-nav/side-nav.tsx
+const defaultRenderAnchor = ({ children, ...rest }) => /* @__PURE__ */ jsx("a", {
+	...rest,
+	children
+});
+const Root = ({ label, children, ...rest }) => /* @__PURE__ */ jsx("nav", {
+	...rest,
+	"aria-label": label,
+	className: side_nav_module_default.root,
+	children
+});
+const Group = ({ title, children }) => {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: side_nav_module_default.group,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: NAV_TITLE_CLASS_NAME,
+			id: titleId,
+			children: title
+		}), /* @__PURE__ */ jsx("ul", {
+			"aria-labelledby": titleId,
+			className: NAV_LIST_CLASS_NAME,
+			children
+		})]
+	});
+};
+const Link = ({ href, current = false, children, renderAnchor = defaultRenderAnchor, ...rest }) => /* @__PURE__ */ jsx("li", { children: renderAnchor({
+	...rest,
+	href,
+	children,
+	"aria-current": current ? "page" : void 0,
+	className: navLinkClassName(current)
+}) });
+/**
+* A group inside a group that opens and closes — a level of the tree. It is a
+* `<details>`, so it works before hydration and without JavaScript; open the
+* one holding the current page with `defaultOpen`.
+*/
+const Sub = ({ title, defaultOpen = false, children }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("details", {
+	className: side_nav_module_default.sub,
+	open: defaultOpen,
+	children: [/* @__PURE__ */ jsxs("summary", {
+		className: side_nav_module_default.summary,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: side_nav_module_default.chevron,
+			children: /* @__PURE__ */ jsx(ChevronIcon, {
+				direction: "right",
+				size: "sm"
+			})
+		}), title]
+	}), /* @__PURE__ */ jsx("ul", {
+		className: NAV_LIST_CLASS_NAME,
+		children
+	})]
+}) });
+//#endregion
+export { Group, Link, Root, Sub };