@k8ordo/ui 1.0.0

package/dist/components/overlays/_internal/use-hover-intent.d.mts

@@ -0,0 +1,25 @@
+//#region src/components/overlays/_internal/use-hover-intent.d.ts
+type HoverIntent = {
+  hoverStart: () => void;
+  hoverEnd: () => void;
+  cancel: () => void;
+};
+/**
+ * hover の出入りに開閉の猶予（delay）を与えるタイマー制御。
+ *
+ * trigger と content が同じインスタンスを共有することで、trigger を離れて
+ * content へポインタを移す間に予約された close をキャンセルできる。
+ * open と close の意図は同時に成立しないため、タイマーは 1 本を使い回す。
+ *
+ * タッチデバイス（hover 不能環境）では enabled=false を渡すとハンドラが
+ * 何もしなくなるため、呼び出し側で handler を差し替える必要はない。
+ */
+declare const useHoverIntent: ({ onOpen, onClose, openDelay, closeDelay, enabled }: {
+  onOpen: () => void;
+  onClose: () => void;
+  openDelay?: number;
+  closeDelay?: number;
+  enabled?: boolean;
+}) => HoverIntent;
+//#endregion
+export { HoverIntent, useHoverIntent };

package/dist/components/overlays/_internal/use-hover-intent.mjs

@@ -0,0 +1,56 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+//#region src/components/overlays/_internal/use-hover-intent.ts
+/**
+* hover の出入りに開閉の猶予（delay）を与えるタイマー制御。
+*
+* trigger と content が同じインスタンスを共有することで、trigger を離れて
+* content へポインタを移す間に予約された close をキャンセルできる。
+* open と close の意図は同時に成立しないため、タイマーは 1 本を使い回す。
+*
+* タッチデバイス（hover 不能環境）では enabled=false を渡すとハンドラが
+* 何もしなくなるため、呼び出し側で handler を差し替える必要はない。
+*/
+const useHoverIntent = ({ onOpen, onClose, openDelay = 0, closeDelay = 0, enabled = true }) => {
+	const timerRef = useRef(null);
+	const cancel = useCallback(() => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+	useEffect(() => cancel, [cancel]);
+	const hoverStart = useCallback(() => {
+		if (!enabled) return;
+		cancel();
+		if (openDelay > 0) timerRef.current = setTimeout(onOpen, openDelay);
+		else onOpen();
+	}, [
+		cancel,
+		onOpen,
+		openDelay,
+		enabled
+	]);
+	const hoverEnd = useCallback(() => {
+		if (!enabled) return;
+		cancel();
+		if (closeDelay > 0) timerRef.current = setTimeout(onClose, closeDelay);
+		else onClose();
+	}, [
+		cancel,
+		onClose,
+		closeDelay,
+		enabled
+	]);
+	return useMemo(() => ({
+		hoverStart,
+		hoverEnd,
+		cancel
+	}), [
+		hoverStart,
+		hoverEnd,
+		cancel
+	]);
+};
+//#endregion
+export { useHoverIntent };

package/dist/components/overlays/_internal/use-list-navigation.d.mts

@@ -0,0 +1,36 @@
+import { Dispatch, KeyboardEvent, SetStateAction } from "react";
+//#region src/components/overlays/_internal/use-list-navigation.d.ts
+type ListItemProps = {
+  ref: (node: HTMLElement | null) => void;
+  tabIndex: number;
+  onFocus: () => void;
+};
+type ListNavigation = {
+  getContentProps: () => {
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+  };
+  getItemProps: (index: number) => ListItemProps;
+};
+/**
+ * 矢印キーによる roving-tabindex のリストナビゲーション。
+ * floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
+ *
+ * コンテンツの書字方向に追従してキーを割り当てる:
+ * - 横書き: ↑=前 / ↓=次
+ * - 縦書き(vertical-rl, 項目は右→左に並ぶ): ←=次 / →=前（↑/↓ も保険として有効）
+ *
+ * roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
+ * その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
+ * hover で開くサブメニューのようにフォーカスを奪ってはいけない場合は
+ * autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が setActiveIndex する。
+ */
+declare const useListNavigation: ({ open, activeIndex, setActiveIndex, selectedIndex, loop, autoActivateOnOpen }: {
+  open: boolean;
+  activeIndex: number | null;
+  setActiveIndex: Dispatch<SetStateAction<number | null>>;
+  selectedIndex?: number | null;
+  loop?: boolean;
+  autoActivateOnOpen?: boolean;
+}) => ListNavigation;
+//#endregion
+export { ListItemProps, ListNavigation, useListNavigation };

package/dist/components/overlays/_internal/use-list-navigation.mjs

@@ -0,0 +1,98 @@
+"use client";
+import { useEffect, useRef } from "react";
+//#region src/components/overlays/_internal/use-list-navigation.ts
+const isVerticalWritingMode = (el) => {
+	const wm = getComputedStyle(el).writingMode;
+	return wm.startsWith("vertical") || wm.startsWith("sideways");
+};
+/**
+* 矢印キーによる roving-tabindex のリストナビゲーション。
+* floating-ui の useListNavigation / useInteractions / FloatingList / useListItem を置換する。
+*
+* コンテンツの書字方向に追従してキーを割り当てる:
+* - 横書き: ↑=前 / ↓=次
+* - 縦書き(vertical-rl, 項目は右→左に並ぶ): ←=次 / →=前（↑/↓ も保険として有効）
+*
+* roving-tabindex: アクティブな項目だけ tabIndex=0、他は -1。アクティブ変更時に
+* その項目へフォーカスを移す。開いたら先頭（選択済みがあればそれ）をアクティブにする。
+* hover で開くサブメニューのようにフォーカスを奪ってはいけない場合は
+* autoActivateOnOpen=false にし、キーボード開時だけ呼び出し側が setActiveIndex する。
+*/
+const useListNavigation = ({ open, activeIndex, setActiveIndex, selectedIndex = null, loop = true, autoActivateOnOpen = true }) => {
+	const itemElementsRef = useRef([]);
+	useEffect(() => {
+		if (!open) {
+			setActiveIndex(null);
+			return;
+		}
+		if (!autoActivateOnOpen) return;
+		setActiveIndex((prev) => prev ?? (selectedIndex !== null && selectedIndex >= 0 ? selectedIndex : 0));
+	}, [
+		open,
+		selectedIndex,
+		setActiveIndex,
+		autoActivateOnOpen
+	]);
+	useEffect(() => {
+		if (open && activeIndex !== null) itemElementsRef.current[activeIndex]?.focus();
+	}, [open, activeIndex]);
+	const count = () => itemElementsRef.current.filter(Boolean).length;
+	const move = (delta) => {
+		const total = count();
+		if (total === 0) return;
+		setActiveIndex((prev) => {
+			const next = (prev ?? (delta === 1 ? -1 : total)) + delta;
+			if (loop) return (next + total) % total;
+			return Math.max(0, Math.min(total - 1, next));
+		});
+	};
+	const onKeyDown = (event) => {
+		const vertical = isVerticalWritingMode(event.currentTarget);
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				move(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				move(-1);
+				break;
+			case "ArrowLeft":
+				if (vertical) {
+					event.preventDefault();
+					move(1);
+				}
+				break;
+			case "ArrowRight":
+				if (vertical) {
+					event.preventDefault();
+					move(-1);
+				}
+				break;
+			case "Home":
+				event.preventDefault();
+				setActiveIndex(count() > 0 ? 0 : null);
+				break;
+			case "End": {
+				const total = count();
+				event.preventDefault();
+				setActiveIndex(total > 0 ? total - 1 : null);
+				break;
+			}
+		}
+	};
+	return {
+		getContentProps: () => ({ onKeyDown }),
+		getItemProps: (index) => ({
+			ref: (node) => {
+				itemElementsRef.current[index] = node;
+			},
+			tabIndex: activeIndex === index ? 0 : -1,
+			onFocus: () => {
+				setActiveIndex(index);
+			}
+		})
+	};
+};
+//#endregion
+export { useListNavigation };

package/dist/components/overlays/dialog/dialog.d.mts

@@ -0,0 +1,19 @@
+import { FC, PropsWithChildren, ReactNode, Ref } from "react";
+//#region src/components/overlays/dialog/dialog.d.ts
+declare const Dialog: {
+  readonly Root: FC<PropsWithChildren<{
+    ref?: Ref<HTMLElement> | undefined;
+    id?: string | undefined;
+    tabIndex?: number | undefined;
+    role?: 'dialog' | 'alertdialog' | undefined;
+  }>>;
+  readonly Header: FC<{
+    title: ReactNode;
+    onClose: () => void;
+  }>;
+  readonly Content: FC<{
+    children?: ReactNode | undefined;
+  }>;
+};
+//#endregion
+export { Dialog };

package/dist/components/overlays/dialog/dialog.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { useMessages } from "../../../i18n/context.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
+import { Heading } from "../../data-display/heading/heading.mjs";
+import { useModalDialogContext } from "../_internal/modal-dialog-context.mjs";
+import { useEffect, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/dialog/dialog.tsx
+const [DialogContext, useDialogContext] = createSafeContext("useDialogContext must be used within a DialogProvider");
+const Root = ({ ref, id, children, tabIndex, role }) => {
+	const fallbackId = useId();
+	const rootId = id ?? fallbackId;
+	const contextValue = useMemo(() => ({ rootId }), [rootId]);
+	const modal = useModalDialogContext();
+	const resolvedRole = role ?? (modal === null ? "dialog" : void 0);
+	const labelledBy = resolvedRole === void 0 ? void 0 : `${rootId}-title`;
+	const describedBy = resolvedRole === void 0 ? void 0 : `${rootId}-content`;
+	useEffect(() => {
+		if (modal === null || resolvedRole !== void 0) return;
+		modal.registerLabelledBy(`${rootId}-title`);
+		modal.registerDescribedBy(`${rootId}-content`);
+		return () => {
+			modal.registerLabelledBy(void 0);
+			modal.registerDescribedBy(void 0);
+		};
+	}, [
+		modal,
+		resolvedRole,
+		rootId
+	]);
+	return /* @__PURE__ */ jsx("section", {
+		"aria-describedby": describedBy,
+		"aria-labelledby": labelledBy,
+		className: "bg-bg-raised relative w-full rounded-lg shadow-md",
+		id,
+		ref,
+		role: resolvedRole,
+		tabIndex,
+		children: /* @__PURE__ */ jsx(DialogContext, {
+			value: contextValue,
+			children
+		})
+	});
+};
+const Header = ({ title, onClose }) => {
+	const messages = useMessages();
+	const { rootId } = useDialogContext();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-center p-4 pb-2",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			id: `${rootId}-title`,
+			level: "h3",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute top-2 right-2",
+			children: /* @__PURE__ */ jsx(IconButton, {
+				label: messages.close,
+				onClick: (e) => {
+					e.stopPropagation();
+					onClose();
+				},
+				tooltipDisabled: true,
+				children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+			})
+		})]
+	});
+};
+const Content = ({ children }) => {
+	const { rootId } = useDialogContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: "p-4",
+		id: `${rootId}-content`,
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		children
+	});
+};
+const Dialog = {
+	Root,
+	Header,
+	Content
+};
+//#endregion
+export { Dialog };

package/dist/components/overlays/dialog/index.d.mts

@@ -0,0 +1,2 @@
+import { Dialog } from "./dialog.mjs";
+export { Dialog };

package/dist/components/overlays/dialog/index.mjs

@@ -0,0 +1,2 @@
+import { Dialog } from "./dialog.mjs";
+export { Dialog };

package/dist/components/overlays/drawer/drawer.d.mts

@@ -0,0 +1,12 @@
+import { DrawerSide } from "../../../types/variables.mjs";
+import { FC, PropsWithChildren, ReactNode } from "react";
+//#region src/components/overlays/drawer/drawer.d.ts
+declare const Drawer: FC<PropsWithChildren<{
+  title: ReactNode;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onClose?: () => void;
+  side?: DrawerSide;
+}>>;
+//#endregion
+export { Drawer };

package/dist/components/overlays/drawer/drawer.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
+import { Heading } from "../../data-display/heading/heading.mjs";
+import { Modal } from "../modal/modal.mjs";
+import { useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/drawer/drawer.tsx
+const Drawer = ({ title, isOpen, defaultOpen, onClose, side = "right", children }) => {
+	const messages = useMessages();
+	const rootId = useId();
+	const dialogRef = useRef(null);
+	return /* @__PURE__ */ jsx(Modal, {
+		"aria-describedby": `${rootId}-content`,
+		"aria-labelledby": `${rootId}-title`,
+		defaultOpen,
+		isOpen,
+		onClose,
+		ref: dialogRef,
+		side,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "vertical:flex-row flex h-full flex-col",
+			id: rootId,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-center p-4 pb-2",
+				children: [typeof title === "string" ? /* @__PURE__ */ jsx(Heading, {
+					id: `${rootId}-title`,
+					level: "h3",
+					children: title
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "contents",
+					id: `${rootId}-title`,
+					children: title
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("absolute top-2", side === "left" ? "left-2" : "right-2"),
+					children: /* @__PURE__ */ jsx(IconButton, {
+						label: messages.close,
+						onClick: (e) => {
+							e.stopPropagation();
+							dialogRef.current?.close();
+						},
+						tooltipDisabled: true,
+						children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto overscroll-contain p-4",
+				id: `${rootId}-content`,
+				onClick: (e) => {
+					e.stopPropagation();
+				},
+				children
+			})]
+		})
+	});
+};
+//#endregion
+export { Drawer };

package/dist/components/overlays/drawer/index.d.mts

@@ -0,0 +1,2 @@
+import { Drawer } from "./drawer.mjs";
+export { Drawer };

package/dist/components/overlays/drawer/index.mjs

@@ -0,0 +1,2 @@
+import { Drawer } from "./drawer.mjs";
+export { Drawer };

package/dist/components/overlays/dropdown-menu/dropdown-menu.d.mts

@@ -0,0 +1,34 @@
+import { Button } from "../../buttons/button/button.mjs";
+import "../../buttons/button/index.mjs";
+import { Placement } from "../../../types/variables.mjs";
+import { SubMenuProps } from "./sub-menu.mjs";
+import { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
+//#region src/components/overlays/dropdown-menu/dropdown-menu.d.ts
+type ItemProps = {
+  onAction: () => void;
+  label: string;
+};
+declare const DropdownMenu: {
+  readonly Root: FC<PropsWithChildren<{
+    placement?: Placement;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+  }>>;
+  readonly Content: FC<{
+    children?: ReactNode | undefined;
+  }>;
+  readonly Item: FC<ItemProps>;
+  readonly SubMenu: FC<SubMenuProps>;
+  readonly Trigger: FC<{
+    label: string;
+    size?: ComponentProps<typeof Button>['size'];
+    variant?: ComponentProps<typeof Button>['variant'];
+  }>;
+  readonly IconTrigger: FC<{
+    icon: ReactNode;
+    label: string;
+  }>;
+};
+//#endregion
+export { DropdownMenu };

package/dist/components/overlays/dropdown-menu/dropdown-menu.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { Button } from "../../buttons/button/button.mjs";
+import { useListNavigation } from "../_internal/use-list-navigation.mjs";
+import { useOpenContext } from "../popover/hooks.mjs";
+import { Popover } from "../popover/popover.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { MenuContextProvider, useMenuContent, useMenuItem } from "./hooks.mjs";
+import { cloneWithIndex, itemClass, panelClass } from "./shared.mjs";
+import { SubMenu } from "./sub-menu.mjs";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/overlays/dropdown-menu/dropdown-menu.tsx
+const Root = ({ children, placement = "bottom-start", isOpen, defaultOpen, onChange }) => /* @__PURE__ */ jsx(Popover.Root, {
+	defaultOpen,
+	isOpen,
+	onChange,
+	placement,
+	role: "menu",
+	children: /* @__PURE__ */ jsx(MenuProvider, { children })
+});
+const MenuProvider = ({ children }) => {
+	const { isOpen, onClose } = useOpenContext();
+	const [activeIndex, setActiveIndex] = useState(null);
+	const nav = useListNavigation({
+		open: isOpen,
+		activeIndex,
+		setActiveIndex,
+		loop: true
+	});
+	return /* @__PURE__ */ jsx(MenuContextProvider, {
+		value: {
+			...nav,
+			closeRoot: onClose
+		},
+		children
+	});
+};
+const Content = ({ children }) => {
+	const { contentProps } = useMenuContent();
+	return /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsx("div", {
+		...props,
+		...contentProps,
+		className: panelClass,
+		children: cloneWithIndex(children)
+	}) });
+};
+const Item = ({ label, onAction, index = 0 }) => {
+	const props = useMenuItem({
+		onAction,
+		index
+	});
+	return /* @__PURE__ */ jsx("button", {
+		className: itemClass,
+		type: "button",
+		...props,
+		children: label
+	});
+};
+const Trigger = ({ label, size = "md", variant = "solid" }) => /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	color: "base",
+	endIcon: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" }),
+	size,
+	type: "button",
+	variant,
+	children: label
+}) });
+const IconTrigger = ({ icon, label }) => /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx(IconButton, {
+	color: "base",
+	label,
+	tooltipDisabled: true,
+	...props,
+	children: icon
+}) });
+const DropdownMenu = {
+	Root,
+	Content,
+	Item,
+	SubMenu,
+	Trigger,
+	IconTrigger
+};
+//#endregion
+export { DropdownMenu };

package/dist/components/overlays/dropdown-menu/hooks.d.mts

@@ -0,0 +1,24 @@
+import { ListNavigation } from "../_internal/use-list-navigation.mjs";
+import "../_internal/index.mjs";
+//#region src/components/overlays/dropdown-menu/hooks.d.ts
+type MenuContext = ListNavigation & {
+  closeRoot: () => void;
+};
+declare const MenuContextProvider: import("react").Context<MenuContext | null>, useMenuContext: () => MenuContext;
+declare const useMenuContent: () => {
+  contentProps: {
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+  };
+};
+declare const useMenuItem: ({ onAction, index }: {
+  onAction: () => void;
+  index: number;
+}) => {
+  ref: (node: HTMLElement | null) => void;
+  tabIndex: number;
+  onFocus: () => void;
+  role: 'menuitem';
+  onClick: () => void;
+};
+//#endregion
+export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem };

package/dist/components/overlays/dropdown-menu/hooks.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useMemo } from "react";
+//#region src/components/overlays/dropdown-menu/hooks.ts
+const [MenuContextProvider, useMenuContext] = createSafeContext("useMenuContext must be used within a DropdownMenu.Root");
+const useMenuContent = () => {
+	const menu = useMenuContext();
+	return useMemo(() => ({ contentProps: menu.getContentProps() }), [menu]);
+};
+const useMenuItem = ({ onAction, index }) => {
+	const menu = useMenuContext();
+	return useMemo(() => ({
+		role: "menuitem",
+		...menu.getItemProps(index),
+		onClick: () => {
+			onAction();
+			menu.closeRoot();
+		}
+	}), [
+		index,
+		menu,
+		onAction
+	]);
+};
+//#endregion
+export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem };

package/dist/components/overlays/dropdown-menu/index.d.mts

@@ -0,0 +1,2 @@
+import { DropdownMenu } from "./dropdown-menu.mjs";
+export { DropdownMenu };

package/dist/components/overlays/dropdown-menu/index.mjs

@@ -0,0 +1,2 @@
+import { DropdownMenu } from "./dropdown-menu.mjs";
+export { DropdownMenu };

package/dist/components/overlays/dropdown-menu/shared.d.mts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+//#region src/components/overlays/dropdown-menu/shared.d.ts
+declare const panelClass = "bg-bg-raised border-border-subtle vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg border py-2 shadow-md";
+declare const itemClass: string;
+declare const cloneWithIndex: (children: ReactNode) => ReactNode;
+//#endregion
+export { cloneWithIndex, itemClass, panelClass };

package/dist/components/overlays/dropdown-menu/shared.mjs

@@ -0,0 +1,8 @@
+import { cn } from "../../../helpers/cn.mjs";
+import { Children, cloneElement, isValidElement } from "react";
+//#region src/components/overlays/dropdown-menu/shared.ts
+const panelClass = "bg-bg-raised border-border-subtle vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg border py-2 shadow-md";
+const itemClass = cn("w-full px-2 py-1 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:bg-bg-subtle focus-visible:outline-hidden");
+const cloneWithIndex = (children) => Children.toArray(children).map((child, index) => isValidElement(child) ? cloneElement(child, { index }) : child);
+//#endregion
+export { cloneWithIndex, itemClass, panelClass };

package/dist/components/overlays/dropdown-menu/sub-menu.d.mts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+//#region src/components/overlays/dropdown-menu/sub-menu.d.ts
+type SubMenuProps = PropsWithChildren<{
+  label: string;
+}>;
+declare const SubMenu: FC<SubMenuProps & {
+  index?: number;
+}>;
+//#endregion
+export { SubMenu, SubMenuProps };