@koobiq/react-components 0.0.1-beta.9 → 0.1.0

package/dist/components/Link/Link.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsxs } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import { Link as Link$1 } from "@koobiq/react-primitives";
 import s from "./Link.module.css.js";
 const Link = polymorphicForwardRef((props, ref) => {
   const {
     variant = "text-normal",
-    visitable = false,
-    pseudo = false,
+    isPseudo: isPseudoProp,
+    isDisabled: isDisabledProp,
+    allowVisited: allowVisitedProp,
+    visitable,
+    pseudo,
     disabled,
     as = "a",
     startIcon,
@@ -16,24 +20,42 @@ const Link = polymorphicForwardRef((props, ref) => {
     className,
     ...other
   } = props;
+  const allowVisited = allowVisitedProp ?? visitable ?? false;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  const isPseudo = isPseudoProp ?? pseudo ?? false;
   const hasIcon = Boolean(startIcon || endIcon);
+  if (process.env.NODE_ENV !== "production" && "visitable" in props) {
+    deprecate(
+      'Link: the "visitable" prop is deprecated. Use "allowVisited" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "pseudo" in props) {
+    deprecate(
+      'Link: the "pseudo" prop is deprecated. Use "isPseudo" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Link: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
   const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
   return /* @__PURE__ */ jsxs(
     Link$1,
     {
       as,
-      disabled,
+      isDisabled,
       elementType,
-      ...disabled && { tabIndex: -1 },
-      className: ({ hovered, pressed, focusVisible }) => clsx(
+      ...isDisabled && { tabIndex: -1 },
+      className: ({ isHovered, isPressed, isFocusVisible }) => clsx(
         s.base,
         s[variant],
-        pseudo && s.pseudo,
-        hovered && s.hovered,
-        pressed && s.pressed,
+        isPseudo && s.pseudo,
+        isHovered && s.hovered,
+        isPressed && s.pressed,
         hasIcon && s.hasIcon,
-        visitable && s.visitable,
-        focusVisible && s.focusVisible,
+        allowVisited && s.allowVisited,
+        isFocusVisible && s.focusVisible,
         className
       ),
       ...other,

package/dist/components/Link/Link.module.css.js

@@ -2,7 +2,7 @@ const base = "kbq-link-093ccd";
 const hovered = "kbq-link-hovered-1916bc";
 const pressed = "kbq-link-pressed-0b493d";
 const focusVisible = "kbq-link-focusVisible-a98307";
-const visitable = "kbq-link-visitable-c8175e";
+const allowVisited = "kbq-link-allowVisited-cb5a56";
 const pseudo = "kbq-link-pseudo-5f21eb";
 const hasIcon = "kbq-link-hasIcon-ea84d7";
 const inherit = "kbq-link-inherit-aa3736";
@@ -11,7 +11,7 @@ const s = {
   hovered,
   pressed,
   focusVisible,
-  visitable,
+  allowVisited,
   pseudo,
   hasIcon,
   "text-normal": "kbq-link-text-normal-814a6c",
@@ -20,6 +20,7 @@ const s = {
   inherit
 };
 export {
+  allowVisited,
   base,
   s as default,
   focusVisible,
@@ -27,6 +28,5 @@ export {
   hovered,
   inherit,
   pressed,
-  pseudo,
-  visitable
+  pseudo
 };

package/dist/components/Link/types.d.ts

@@ -1,8 +1,32 @@
 import type { CSSProperties, ReactNode } from 'react';
-import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { LinkBaseProps as LinkBasePrimitiveProps } from '@koobiq/react-primitives';
 import type { TypographyPropVariant } from '../Typography';
 export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 'text-normal' | 'text-big' | 'inherit'>;
-export type LinkBaseProps = {
+type LinkDeprecatedProps = {
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, displays :visited CSS-state.
+     * @default false
+     * @deprecated
+     * The "visitable" prop is deprecated. Use "isVisitable" prop to replace it.
+     */
+    visitable?: boolean;
+    /**
+     * If `true`, displays the link as a pseudo-link.
+     * @default false
+     * @deprecated
+     * The "pseudo" prop is deprecated. Use "isPseudo" prop to replace it.
+     */
+    pseudo?: boolean;
+};
+export type LinkBaseProps = ExtendableProps<{
     /** The content of the component. */
     children?: ReactNode;
     /** The variant of the component. */
@@ -11,15 +35,19 @@ export type LinkBaseProps = {
     startIcon?: ReactNode;
     /** Icon placed after the children. */
     endIcon?: ReactNode;
-    /** If `true`, the component is disabled. */
-    disabled?: boolean;
-    /** If `true`, displays :visited CSS-state. */
-    visitable?: boolean;
-    /** If `true`, displays the link as a pseudo-link. */
-    pseudo?: boolean;
+    /**
+     * If `true`, displays :visited CSS-state.
+     * @default false
+     */
+    allowVisited?: boolean;
+    /**
+     * If `true`, displays the link as a pseudo-link.
+     * @default false
+     */
+    isPseudo?: boolean;
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles */
     style?: CSSProperties;
-    onClick?: ButtonOptions['onPress'];
-};
+} & LinkDeprecatedProps, Omit<LinkBasePrimitiveProps, 'elementType'>>;
+export {};

package/dist/components/List/List.d.ts

@@ -1,4 +1,18 @@
 import type { Ref } from 'react';
-import type { ListComponent, ListProps, ListRef } from './types';
-export declare function ListRender<T extends object>(props: ListProps<T>, ref: Ref<ListRef>): import("react/jsx-runtime").JSX.Element;
-export declare const List: ListComponent;
+import { type ListState } from '@koobiq/react-primitives';
+import { Item, Section } from '../Collections';
+import { ListItemText } from './components';
+import type { ListComponent, ListProps } from './types';
+export type ListInnerProps<T extends object> = {
+    state: ListState<T>;
+    listRef?: Ref<HTMLUListElement>;
+} & Omit<ListProps<T>, 'ref'>;
+export declare function ListInner<T extends object>(props: ListInnerProps<T>): import("react/jsx-runtime").JSX.Element;
+declare const ListComponent: ListComponent;
+type CompoundedComponent = typeof ListComponent & {
+    Item: typeof Item;
+    Section: typeof Section;
+    ItemText: typeof ListItemText;
+};
+export declare const List: CompoundedComponent;
+export {};

package/dist/components/List/List.js

@@ -2,15 +2,19 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
-import { useListState, useListBox } from "@koobiq/react-primitives";
+import { useListBox, useListState } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
 import s from "./List.module.css.js";
 import { ListSection } from "./components/ListSection/ListSection.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "./components/ListItemText/ListItemText.js";
 import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
-function ListRender(props, ref) {
-  const { label, className, style, slotProps } = props;
-  const domRef = useDOMRef(ref);
-  const state = useListState(props);
+const { list } = utilClasses;
+function ListInner(props) {
+  const { label, className, style, slotProps, state, listRef } = props;
+  const domRef = useDOMRef(listRef);
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
   const titleProps = mergeProps(
     {
@@ -24,7 +28,7 @@ function ListRender(props, ref) {
     {
       style,
       ref: domRef,
-      className: clsx(s.base, className)
+      className: clsx(list, className)
     },
     slotProps?.list,
     listBoxProps
@@ -36,8 +40,16 @@ function ListRender(props, ref) {
     ) })
   ] });
 }
-const List = forwardRef(ListRender);
+function ListRender(props, ref) {
+  const state = useListState(props);
+  return /* @__PURE__ */ jsx(ListInner, { listRef: ref, ...props, state });
+}
+const ListComponent = forwardRef(ListRender);
+const List = ListComponent;
+List.Item = Item;
+List.Section = Section;
+List.ItemText = ListItemText;
 export {
   List,
-  ListRender
+  ListInner
 };

package/dist/components/List/List.module.css.js

@@ -1,11 +1,8 @@
-const base = "kbq-list-928929";
 const label = "kbq-list-label-e4431c";
 const s = {
-  base,
   label
 };
 export {
-  base,
   s as default,
   label
 };

package/dist/components/List/components/ListItemText/ListItemText.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNotNil, clsx } from "@koobiq/react-core";
+import s from "./ListItemText.module.css.js";
+import { Typography } from "../../../Typography/Typography.js";
+const ListItemText = forwardRef(
+  ({ className, children, caption, slotProps, ...other }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(s.base, className), ...other, ref, children: [
+    /* @__PURE__ */ jsx(Typography, { as: "span", ...slotProps?.text, children }),
+    isNotNil(caption) && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        color: "contrast-secondary",
+        className: s.caption,
+        variant: "text-compact",
+        ...slotProps?.caption,
+        children: caption
+      }
+    )
+  ] })
+);
+ListItemText.displayName = "ListItemText";
+export {
+  ListItemText
+};

package/dist/components/List/components/ListItemText/ListItemText.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-listitemtext-27bac6";
+const caption = "kbq-listitemtext-caption-ae96af";
+const s = {
+  base,
+  caption
+};
+export {
+  base,
+  caption,
+  s as default
+};

package/dist/components/List/components/ListOption/ListOption.d.ts

@@ -1,5 +1,7 @@
-import type { ListState, Node } from '@koobiq/react-primitives';
-export declare function ListOption<T>({ item, state, }: {
+import type { Node } from '@koobiq/react-core';
+import type { ListState } from '@koobiq/react-primitives';
+export type ListOptionProps<T> = {
     item: Node<T>;
     state: ListState<T>;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ListOption<T>({ item, state }: ListOptionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/List/components/ListOption/ListOption.js

@@ -4,12 +4,10 @@ import { useRef } from "react";
 import { useHover, usePress, clsx, mergeProps } from "@koobiq/react-core";
 import { useOption } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
-import s from "./ListOption.module.css.js";
 const textVariant = utilClasses.typography;
-function ListOption({
-  item,
-  state
-}) {
+const { listItem } = utilClasses;
+function ListOption({ item, state }) {
+  const { href, className, style } = item.props;
   const ref = useRef(null);
   const {
     optionProps,
@@ -19,21 +17,18 @@ function ListOption({
   } = useOption({ key: item.key }, state, ref);
   const { hoverProps, isHovered: hovered } = useHover({ isDisabled: disabled });
   const { isPressed: pressed, pressProps } = usePress({ isDisabled: disabled });
-  const Tag = item.props.href ? "a" : "li";
+  const Tag = href ? "a" : "li";
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ...mergeProps(optionProps, hoverProps, pressProps),
-      className: clsx(
-        s.base,
-        hovered && s.hovered,
-        pressed && s.pressed,
-        selected && s.selected,
-        textVariant["text-normal"],
-        disabled && s.disabled,
-        focusVisible && s.focusVisible
-      ),
+      className: clsx(listItem, textVariant["text-normal"], className),
+      style,
       ref,
+      "data-hovered": hovered,
+      "data-pressed": pressed,
+      "data-disabled": disabled,
+      "data-selected": selected,
       "data-focus-visible": focusVisible,
       children: item.rendered
     }

package/dist/components/List/components/ListSection/ListSection.d.ts

@@ -1,5 +1,7 @@
-import type { ListState, Node } from '@koobiq/react-primitives';
-export declare function ListSection<T>({ section, state, }: {
+import type { Node } from '@koobiq/react-core';
+import type { ListState } from '@koobiq/react-primitives';
+export type ListSectionProps<T> = {
     section: Node<T>;
     state: ListState<T>;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ListSection<T>({ section, state }: ListSectionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/List/components/ListSection/ListSection.js

@@ -4,10 +4,7 @@ import { useListBoxSection } from "@koobiq/react-primitives";
 import s from "./ListSection.module.css.js";
 import { ListOption } from "../ListOption/ListOption.js";
 import { Typography } from "../../../Typography/Typography.js";
-function ListSection({
-  section,
-  state
-}) {
+function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]

package/dist/components/List/index.d.ts

@@ -1,4 +1,4 @@
 export * from './List';
+export * from './components/ListItemText';
 export * from './types';
-export * from './ListItem';
-export * from './ListSection';
+export { Item as ListItem, Section as ListSection } from '../Collections';

package/dist/components/List/types.d.ts

@@ -1,53 +1,19 @@
-import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { Ref, ComponentRef, ReactElement, CSSProperties, ComponentPropsWithRef } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaListBoxProps } from '@koobiq/react-primitives';
 import type { TypographyProps } from '../Typography';
-export declare const listPropSelectionMode: readonly ["none", "single", "multiple"];
-export type ListPropSelectionMode = (typeof listPropSelectionMode)[number];
-export type ListPropItems<T extends object> = AriaListBoxProps<T>['items'];
-export type ListPropChildren<T extends object> = AriaListBoxProps<T>['children'];
-export type ListPropSelectedKeys<T extends object> = AriaListBoxProps<T>['selectedKeys'];
-export type ListPropDefaultSelectedKeys<T extends object> = AriaListBoxProps<T>['defaultSelectedKeys'];
-export type ListPropDisabledKeys<T extends object> = AriaListBoxProps<T>['disabledKeys'];
-export type ListPropOnSelectionChange<T extends object> = AriaListBoxProps<T>['onSelectionChange'];
-export type ListPropOnAction<T extends object> = AriaListBoxProps<T>['onAction'];
-export type ListPropSelectionBehavior<T extends object> = AriaListBoxProps<T>['selectionBehavior'];
-export type ListBaseProps<T extends object> = {
-    label?: ReactNode;
+export type ListProps<T> = ExtendableProps<{
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles. */
     style?: CSSProperties;
-    /** The type of selection that is allowed in the collection. */
-    selectionMode?: ListPropSelectionMode;
     /** Ref to the HTML ul-element. */
     ref?: Ref<HTMLElement>;
-    /** The contents of the collection. */
-    children?: ListPropChildren<T>;
-    /** Item objects in the collection. */
-    items?: ListPropItems<T>;
-    /** The currently selected keys in the collection (controlled). */
-    selectedKeys?: ListPropSelectedKeys<T>;
-    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-    disabledKeys?: ListPropDisabledKeys<T>;
-    /** The initial selected keys in the collection (uncontrolled). */
-    defaultSelectedKeys?: ListPropDefaultSelectedKeys<T>;
-    /** Handler that is called when the selection changes. */
-    onSelectionChange?: ListPropOnSelectionChange<T>;
-    /**
-     * Handler that is called when a user performs an action on an item. The exact user event depends on
-     * the collection's `selectionBehavior` prop and the interaction modality.
-     */
-    onAction?: ListPropOnAction<T>;
-    /** How multiple selection should behave in the collection. */
-    selectionBehavior?: ListPropSelectionBehavior<T>;
-    /** Whether to autofocus the list or an option. */
-    autoFocus?: boolean | 'first' | 'last';
     /** The props used for each slot inside. */
     slotProps?: {
         label?: TypographyProps;
         list?: ComponentPropsWithRef<'div'>;
     };
-};
-export type ListProps<T extends object> = ListBaseProps<T>;
+}, AriaListBoxProps<T>>;
 export type ListRef = ComponentRef<'ul'>;
-export type ListComponent = <T extends object>(props: ListProps<T>) => ReactElement | null;
+export type ListComponent = <T>(props: ListProps<T>) => ReactElement | null;

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,15 @@
+import { Pressable } from '@koobiq/react-core';
+import { Divider, Item, Section, Header } from '../Collections';
+import { ListItemText } from '../List';
+import type { MenuComponent } from './index';
+declare const MenuComponent: MenuComponent;
+type CompoundedComponent = typeof MenuComponent & {
+    Item: typeof Item;
+    Header: typeof Header;
+    Section: typeof Section;
+    Divider: typeof Divider;
+    ItemText: typeof ListItemText;
+    Control: typeof Pressable;
+};
+export declare const Menu: CompoundedComponent;
+export {};

package/dist/components/Menu/Menu.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { deprecate } from "@koobiq/logger";
+import { useDOMRef, mergeProps, clsx, Pressable } from "@koobiq/react-core";
+import { useMenuTriggerState, useMenuTrigger } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./Menu.module.css.js";
+import { MenuInner } from "./components/MenuInner/MenuInner.js";
+import { Header } from "../Collections/Header.js";
+import { Divider } from "../Collections/Divider.js";
+import { Item } from "../Collections/Item.js";
+import { Section } from "../Collections/Section.js";
+import { ListItemText } from "../List/components/ListItemText/ListItemText.js";
+function MenuRender(props, ref) {
+  const {
+    placement = "bottom start",
+    "data-testid": testId,
+    control,
+    style,
+    open,
+    isOpen: isOpenProp,
+    anchorRef,
+    className,
+    slotProps,
+    ...other
+  } = props;
+  const isOpen = isOpenProp ?? open;
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Menu: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  const state = useMenuTriggerState({ ...props, isOpen });
+  const domRef = useDOMRef(ref);
+  const controlRef = useRef(null);
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    {},
+    state,
+    controlRef
+  );
+  const popoverProps = mergeProps(
+    {
+      style,
+      state,
+      offset: 4,
+      size: "auto",
+      hideArrow: true,
+      popoverRef: domRef,
+      "data-testid": testId,
+      anchorRef: anchorRef || controlRef,
+      className: clsx(s.popover, className)
+    },
+    slotProps?.popover
+  );
+  const listProps = mergeProps(menuProps, other, slotProps?.list);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    control?.({
+      ref: controlRef,
+      ...menuTriggerProps
+    }),
+    /* @__PURE__ */ jsx(PopoverInner, { type: "menu", placement, ...popoverProps, children: /* @__PURE__ */ jsx(MenuInner, { ...listProps }) })
+  ] });
+}
+const MenuComponent = forwardRef(MenuRender);
+const Menu = MenuComponent;
+Menu.Item = Item;
+Menu.Section = Section;
+Menu.Header = Header;
+Menu.Divider = Divider;
+Menu.ItemText = ListItemText;
+Menu.Control = Pressable;
+export {
+  Menu
+};

package/dist/components/Menu/Menu.module.css.js

@@ -0,0 +1,8 @@
+const popover = "kbq-menu-popover-e1857c";
+const s = {
+  popover
+};
+export {
+  s as default,
+  popover
+};

package/dist/components/Menu/components/MenuHeader/MenuHeader.d.ts

@@ -0,0 +1,5 @@
+import type { Node } from '@koobiq/react-core';
+export type MenuHeaderProps<T> = {
+    item: Node<T>;
+};
+export declare function MenuHeader<T>({ item }: MenuHeaderProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuHeader/MenuHeader.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function MenuHeader({ item }) {
+  const { key, rendered, props } = item;
+  return /* @__PURE__ */ jsx("header", { role: "presentation", ...props, children: rendered }, key);
+}
+export {
+  MenuHeader
+};

package/dist/components/Menu/components/MenuHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuHeader';

package/dist/components/Menu/components/MenuInner/MenuInner.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentRef, ReactElement } from 'react';
+import type { AriaMenuOptions } from '@koobiq/react-primitives';
+export type MenuInnerProps<T> = AriaMenuOptions<T>;
+export type MenuInnerComponent = <T>(props: MenuInnerProps<T>) => ReactElement | null;
+export type MenuInnerRef = ComponentRef<'ul'>;
+export declare const MenuInner: MenuInnerComponent;

package/dist/components/Menu/components/MenuInner/MenuInner.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, clsx } from "@koobiq/react-core";
+import { useTreeState, useMenu } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./MenuInner.module.css.js";
+import { MenuSection } from "../MenuSection/MenuSection.js";
+import { Divider } from "../../../Divider/Divider.js";
+import { MenuHeader } from "../MenuHeader/MenuHeader.js";
+import { MenuItem } from "../MenuItem/MenuItem.js";
+const { list } = utilClasses;
+function MenuInnerRender(props, ref) {
+  const state = useTreeState(props);
+  const domRef = useDOMRef(ref);
+  const { menuProps } = useMenu(props, state, domRef);
+  const multiple = props.selectionMode === "multiple";
+  const renderItems = (treeState) => [...treeState.collection].map((item) => {
+    switch (item.type) {
+      case "header":
+        return /* @__PURE__ */ jsx(MenuHeader, { item }, item.key);
+      case "divider":
+        return /* @__PURE__ */ jsx(Divider, { className: s.divider }, item.key);
+      case "item":
+        return /* @__PURE__ */ jsx(MenuItem, { item, state }, item.key);
+      case "section":
+        return /* @__PURE__ */ jsx(MenuSection, { section: item, state }, item.key);
+      default:
+        return null;
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...menuProps,
+      className: clsx(s.base, list),
+      ...multiple && { "aria-multiselectable": true },
+      ref: domRef,
+      children: renderItems(state)
+    }
+  );
+}
+const MenuInner = forwardRef(MenuInnerRender);
+export {
+  MenuInner
+};

package/dist/components/Menu/components/MenuInner/MenuInner.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-menuinner-0117f8";
+const divider = "kbq-menuinner-divider-acbe04";
+const s = {
+  base,
+  divider
+};
+export {
+  base,
+  s as default,
+  divider
+};

package/dist/components/Menu/components/MenuInner/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuInner';

package/dist/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -0,0 +1,7 @@
+import type { Node } from '@koobiq/react-core';
+import type { TreeState } from '@koobiq/react-primitives';
+export type MenuItemProps<T> = {
+    item: Node<T>;
+    state: TreeState<T>;
+};
+export declare function MenuItem<T>({ item, state }: MenuItemProps<T>): import("react/jsx-runtime").JSX.Element;