@choice-ui/react 1.5.2 → 1.5.4

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

@@ -1,4 +1,4 @@
-import { MenuButton, MenuContextContent, MenuDivider, MenuInput, MenuContextItem, MenuContextLabel, MenuValue } from '../../menus/src';
+import { MenuButton, MenuContextContent, MenuDivider, MenuEmpty, MenuInput, MenuContextItem, MenuContextLabel, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React, HTMLProps, ReactNode } from 'react';
 interface ComboboxTriggerProps extends Omit<HTMLProps<HTMLInputElement>, "size" | "onChange"> {
@@ -69,6 +69,7 @@ interface ComboboxComponentType extends React.ForwardRefExoticComponent<Combobox
     Button: typeof MenuButton;
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Input: typeof MenuInput;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;

package/dist/components/combobox/dist/index.js

@@ -1,4 +1,4 @@
-import { MenuValue, MenuContextContent, MenuInput, MenuButton, MenuContextLabel, MenuDivider, MenuContextItem, useMenuBaseRefs, useMenuScrollHeight, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuContextLabel, MenuContextItem, MenuInput, MenuEmpty, MenuDivider, MenuContextContent, MenuButton, useMenuBaseRefs, useMenuScrollHeight, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useInteractions, FloatingNode, FloatingList, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
 import { memo, forwardRef, useState, useRef, useId, useEffect, useMemo, Children, isValidElement, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -620,13 +620,14 @@ var BaseCombobox = memo(function Combobox(props) {
 });
 var Combobox2 = Object.assign(BaseCombobox, {
   displayName: "Combobox",
-  Trigger: ComboboxTrigger,
-  Item: MenuContextItem,
-  Divider: MenuDivider,
-  Label: MenuContextLabel,
   Button: MenuButton,
-  Input: MenuInput,
   Content: MenuContextContent,
+  Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Input: MenuInput,
+  Item: MenuContextItem,
+  Label: MenuContextLabel,
+  Trigger: ComboboxTrigger,
   Value: MenuValue
 });
 export {

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

@@ -1,4 +1,4 @@
-import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuInput, MenuValue } from '../../menus/src';
+import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuEmpty, MenuInput, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 import { ComboboxTrigger } from './combobox-trigger';
@@ -50,6 +50,7 @@ interface ComboboxComponentType extends React.ForwardRefExoticComponent<Combobox
     Button: typeof MenuButton;
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Input: typeof MenuInput;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;

package/dist/components/combobox/src/combobox.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MenuValue, MenuContextContent, MenuInput, MenuButton, MenuContextLabel, MenuDivider, MenuContextItem, useMenuBaseRefs, useMenuScrollHeight, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuContextLabel, MenuContextItem, MenuInput, MenuEmpty, MenuDivider, MenuContextContent, MenuButton, useMenuBaseRefs, useMenuScrollHeight, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, size, autoUpdate, useRole, useDismiss, useListNavigation, useInteractions, FloatingNode, FloatingList, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
 import { memo, useRef, useState, useId, useEffect, useMemo, Children, isValidElement, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -411,13 +411,14 @@ const BaseCombobox = memo(function Combobox2(props) {
 });
 const Combobox = Object.assign(BaseCombobox, {
   displayName: "Combobox",
-  Trigger: ComboboxTrigger,
-  Item: MenuContextItem,
-  Divider: MenuDivider,
-  Label: MenuContextLabel,
   Button: MenuButton,
-  Input: MenuInput,
   Content: MenuContextContent,
+  Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Input: MenuInput,
+  Item: MenuContextItem,
+  Label: MenuContextLabel,
+  Trigger: ComboboxTrigger,
   Value: MenuValue
 });
 export {

package/dist/components/context-menu/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { MenuButton, MenuContextContent, MenuDivider, MenuInput, MenuContextItem, MenuContextLabel, MenuSearch, MenuContextSubTrigger, MenuValue } from '../../menus/src';
+import { MenuButton, MenuContextContent, MenuDivider, MenuEmpty, MenuInput, MenuContextItem, MenuContextLabel, MenuSearch, MenuContextSubTrigger, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React, HTMLProps, ReactNode } from 'react';
 interface ContextMenuProps extends HTMLProps<HTMLDivElement> {
@@ -25,6 +25,7 @@ interface ContextMenuComponentProps extends React.ForwardRefExoticComponent<Cont
     Button: typeof MenuButton;
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Input: typeof MenuInput;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;

package/dist/components/context-menu/src/context-menu.d.ts

@@ -1,4 +1,4 @@
-import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, MenuContextSubTrigger, MenuDivider, MenuInput, MenuSearch, MenuValue } from '../../menus/src';
+import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, MenuContextSubTrigger, MenuDivider, MenuEmpty, MenuInput, MenuSearch, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React, HTMLProps, ReactNode } from 'react';
 export interface ContextMenuProps extends HTMLProps<HTMLDivElement> {
@@ -25,6 +25,7 @@ interface ContextMenuComponentProps extends React.ForwardRefExoticComponent<Cont
     Button: typeof MenuButton;
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Input: typeof MenuInput;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;

package/dist/components/context-menu/src/context-menu.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MenuValue, MenuContextContent, MenuInput, MenuButton, MenuSearch, MenuContextLabel, MenuDivider, MenuContextSubTrigger, MenuContextItem, useMenuBaseRefs, useMenuTree, useMenuScrollHeight, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuContextSubTrigger, MenuSearch, MenuContextLabel, MenuContextItem, MenuInput, MenuEmpty, MenuDivider, MenuContextContent, MenuButton, useMenuBaseRefs, useMenuTree, useMenuScrollHeight, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, offset, flip, shift, size, useFloating, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
 import React, { memo, useContext, useCallback, useRef, useState, useId, useMemo, useEffect, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -382,15 +382,16 @@ const BaseContextMenu = memo(function ContextMenu2(props) {
 });
 const ContextMenu = Object.assign(BaseContextMenu, {
   displayName: "ContextMenu",
-  Trigger: ContextMenuTrigger,
-  Item: MenuContextItem,
-  SubTrigger: MenuContextSubTrigger,
+  Button: MenuButton,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Input: MenuInput,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
   Search: MenuSearch,
-  Button: MenuButton,
-  Input: MenuInput,
-  Content: MenuContextContent,
+  SubTrigger: MenuContextSubTrigger,
+  Trigger: ContextMenuTrigger,
   Value: MenuValue
 });
 export {

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

@@ -1,4 +1,4 @@
-import { MenuButton, MenuContextContent, MenuDivider, MenuInput, MenuContextItem, MenuContextLabel, MenuSearch, MenuContextSubTrigger, MenuTrigger, MenuValue } from '../../menus/src';
+import { MenuButton, MenuContextContent, MenuDivider, MenuEmpty, MenuInput, MenuContextItem, MenuContextLabel, MenuSearch, MenuContextSubTrigger, MenuTrigger, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 interface DropdownProps {
@@ -31,6 +31,7 @@ interface DropdownComponentType extends React.ForwardRefExoticComponent<Dropdown
     Button: typeof MenuButton;
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Input: typeof MenuInput;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;

package/dist/components/dropdown/dist/index.js

@@ -1,5 +1,5 @@
 import { Slot } from "../../slot/dist/index.js";
-import { MenuValue, MenuContextContent, MenuInput, MenuButton, MenuSearch, MenuContextLabel, MenuDivider, MenuContextSubTrigger, MenuContextItem, MenuTrigger, useMenuBaseRefs, MenuContext, useMenuTree, useMenuScrollHeight, useMenuScroll, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuTrigger, MenuContextSubTrigger, MenuSearch, MenuContextLabel, MenuContextItem, MenuInput, MenuEmpty, MenuDivider, MenuContextContent, MenuButton, useMenuBaseRefs, MenuContext, useMenuTree, useMenuScrollHeight, useMenuScroll, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloating, offset, flip, shift, size, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
 import { memo, useState, useId, useContext, useRef, useMemo, useEffect, Children, isValidElement, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -383,15 +383,16 @@ var BaseDropdown = memo(function Dropdown(props) {
 });
 var Dropdown2 = Object.assign(BaseDropdown, {
   displayName: "Dropdown",
-  Trigger: MenuTrigger,
-  Item: MenuContextItem,
-  SubTrigger: MenuContextSubTrigger,
+  Button: MenuButton,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Input: MenuInput,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
   Search: MenuSearch,
-  Button: MenuButton,
-  Input: MenuInput,
-  Content: MenuContextContent,
+  SubTrigger: MenuContextSubTrigger,
+  Trigger: MenuTrigger,
   Value: MenuValue
 });
 export {

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

@@ -1,4 +1,4 @@
-import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, MenuContextSubTrigger, MenuDivider, MenuInput, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
+import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, MenuContextSubTrigger, MenuDivider, MenuEmpty, MenuInput, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 export interface DropdownProps {
@@ -31,6 +31,7 @@ interface DropdownComponentType extends React.ForwardRefExoticComponent<Dropdown
     Button: typeof MenuButton;
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Input: typeof MenuInput;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;

package/dist/components/dropdown/src/dropdown.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "../../slot/dist/index.js";
-import { MenuValue, MenuContextContent, MenuInput, MenuButton, MenuSearch, MenuContextLabel, MenuDivider, MenuContextSubTrigger, MenuContextItem, MenuTrigger, useMenuBaseRefs, MenuContext, useMenuTree, useMenuScrollHeight, useMenuScroll, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuTrigger, MenuContextSubTrigger, MenuSearch, MenuContextLabel, MenuContextItem, MenuInput, MenuEmpty, MenuDivider, MenuContextContent, MenuButton, useMenuBaseRefs, MenuContext, useMenuTree, useMenuScrollHeight, useMenuScroll, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloating, offset, flip, shift, size, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
 import { memo, useState, useId, useContext, useRef, useMemo, useEffect, Children, isValidElement, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -383,15 +383,16 @@ const BaseDropdown = memo(function Dropdown2(props) {
 });
 const Dropdown = Object.assign(BaseDropdown, {
   displayName: "Dropdown",
-  Trigger: MenuTrigger,
-  Item: MenuContextItem,
-  SubTrigger: MenuContextSubTrigger,
+  Button: MenuButton,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Input: MenuInput,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
   Search: MenuSearch,
-  Button: MenuButton,
-  Input: MenuInput,
-  Content: MenuContextContent,
+  SubTrigger: MenuContextSubTrigger,
+  Trigger: MenuTrigger,
   Value: MenuValue
 });
 export {

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

@@ -19,6 +19,11 @@ declare const MenuCheckbox: react.NamedExoticComponent<MenuCheckboxProps>;
 
 declare const MenuDivider: react.ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+interface MenuEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+declare const MenuEmpty: react.NamedExoticComponent<MenuEmptyProps>;
+
 interface MenuItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     active?: boolean;
     children?: ReactNode;
@@ -480,4 +485,4 @@ declare const MenuContextLabel: react.NamedExoticComponent<MenuLabelProps>;
 
 declare const MenuContextSubTrigger: react.MemoExoticComponent<react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLButtonElement>>>;
 
-export { MenuButton, MenuCheckbox, type MenuCheckboxProps, MenuContext, MenuContextContent, MenuContextItem, type MenuContextItemProps, MenuContextLabel, MenuContextSubTrigger, type MenuContextType, MenuDivider, MenuInput, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, MenuScrollArrow, type MenuScrollArrowProps, MenuSearch, MenuSearchEmpty, MenuTrigger, type MenuTriggerProps, MenuValue, Menus, type MenusProps, useMenuBaseRefs, useMenuChildren, useMenuFloating, useMenuRefs, useMenuScroll, useMenuScrollHeight, useMenuSelection, useMenuState, useMenuTree };
+export { MenuButton, MenuCheckbox, type MenuCheckboxProps, MenuContext, MenuContextContent, MenuContextItem, type MenuContextItemProps, MenuContextLabel, MenuContextSubTrigger, type MenuContextType, MenuDivider, MenuEmpty, MenuInput, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, MenuScrollArrow, type MenuScrollArrowProps, MenuSearch, MenuSearchEmpty, MenuTrigger, type MenuTriggerProps, MenuValue, Menus, type MenusProps, useMenuBaseRefs, useMenuChildren, useMenuFloating, useMenuRefs, useMenuScroll, useMenuScrollHeight, useMenuSelection, useMenuState, useMenuTree };

package/dist/components/menus/dist/index.js

@@ -1,5 +1,5 @@
 import { Button } from "../../button/dist/index.js";
-import React, { forwardRef, memo, useCallback, useContext, createContext, useMemo, startTransition, useRef, Children, isValidElement, Fragment as Fragment$1, useState, useEffect } from "react";
+import React, { forwardRef, memo, useContext, createContext, useMemo, startTransition, useCallback, useRef, Children, isValidElement, Fragment as Fragment$1, useState, useEffect } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRightSmall, ChevronDownSmall, ChevronUpSmall } from "@choiceform/icons-react";
 import { Kbd } from "../../kbd/dist/index.js";
@@ -192,6 +192,16 @@ var MenuSearchEmptyTv = tcv({
     text: "text-white/50"
   }
 });
+var MenuEmptyTv = tcv({
+  slots: {
+    root: [
+      "flex items-center justify-center py-3 px-2",
+      "text-body-medium text-secondary-foreground",
+      "group-data-[variant=light]/menus:text-gray-500",
+      "group-data-[variant=default]/menus:text-white/50"
+    ]
+  }
+});
 var MenuLabelTv = tcv({
   base: "flex h-6 w-full flex-none items-center gap-2 opacity-50",
   variants: {
@@ -322,6 +332,19 @@ var MenuDivider = forwardRef((props, ref) => {
   );
 });
 MenuDivider.displayName = "MenuDivider";
+var MenuEmpty = memo(function MenuEmpty2(props) {
+  const { children, className, ...rest } = props;
+  const tv = MenuEmptyTv();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: tcx(tv.root(), className),
+      children
+    }
+  );
+});
+MenuEmpty.displayName = "MenuEmpty";
 var MenuItem = memo(
   forwardRef((props, ref) => {
     const {
@@ -1125,6 +1148,7 @@ export {
   MenuContextLabel,
   MenuContextSubTrigger,
   MenuDivider,
+  MenuEmpty,
   MenuInput,
   MenuItem,
   MenuLabel,

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

@@ -1,6 +1,7 @@
 export * from './menu-button';
 export * from './menu-checkbox';
 export * from './menu-divider';
+export * from './menu-empty';
 export * from './menu-item';
 export * from './menu-label';
 export * from './menu-scroll-arrow';

package/dist/components/menus/src/components/menu-empty.d.ts

@@ -0,0 +1,4 @@
+export interface MenuEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const MenuEmpty: import('react').NamedExoticComponent<MenuEmptyProps>;

package/dist/components/menus/src/components/menu-empty.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { MenuEmptyTv } from "../tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const MenuEmpty = memo(function MenuEmpty2(props) {
+  const { children, className, ...rest } = props;
+  const tv = MenuEmptyTv();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: tcx(tv.root(), className),
+      children
+    }
+  );
+});
+MenuEmpty.displayName = "MenuEmpty";
+export {
+  MenuEmpty
+};

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

@@ -1,4 +1,4 @@
-export { MenuButton, MenuCheckbox, MenuDivider, MenuInput, MenuItem, MenuLabel, MenuSearch, MenuSearchEmpty, MenuValue, MenuTrigger, MenuScrollArrow, } from './components';
+export { MenuButton, MenuCheckbox, MenuDivider, MenuEmpty, MenuInput, MenuItem, MenuLabel, MenuSearch, MenuSearchEmpty, MenuValue, MenuTrigger, MenuScrollArrow, } from './components';
 export { Menus } from './menus';
 export { useMenuBaseRefs, useMenuChildren, useMenuFloating, useMenuRefs, useMenuScroll, useMenuScrollHeight, useMenuSelection, useMenuState, useMenuTree, } from './hooks';
 export { MenuContext, MenuContextSubTrigger, MenuContextContent, MenuContextItem, MenuContextLabel, } from './context';

package/dist/components/menus/src/tv.d.ts

@@ -339,6 +339,31 @@ export declare const MenuSearchEmptyTv: import('tailwind-variants').TVReturnType
     root: string;
     text: string;
 }, undefined, unknown, unknown, undefined>>;
+export declare const MenuEmptyTv: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string[];
+}, undefined, unknown, unknown, undefined>>;
 export declare const MenuLabelTv: import('tailwind-variants').TVReturnType<{
     selection: {
         true: string;

package/dist/components/menus/src/tv.js

@@ -180,6 +180,16 @@ const MenuSearchEmptyTv = tcv({
     text: "text-white/50"
   }
 });
+const MenuEmptyTv = tcv({
+  slots: {
+    root: [
+      "flex items-center justify-center py-3 px-2",
+      "text-body-medium text-secondary-foreground",
+      "group-data-[variant=light]/menus:text-gray-500",
+      "group-data-[variant=default]/menus:text-white/50"
+    ]
+  }
+});
 const MenuLabelTv = tcv({
   base: "flex h-6 w-full flex-none items-center gap-2 opacity-50",
   variants: {
@@ -278,6 +288,7 @@ export {
   MenuButtonTv,
   MenuCheckboxTv,
   MenuDividerTv,
+  MenuEmptyTv,
   MenuItemTv,
   MenuLabelTv,
   MenuScrollArrowTv,

package/dist/components/multi-select/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ChipProps } from '../../chip/src';
-import { MenuContextContent, MenuDivider, MenuContextItem, MenuContextLabel, MenuValue } from '../../menus/src';
+import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuContextLabel, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React__default, HTMLProps, ReactNode } from 'react';
 import * as React$1 from 'react';
@@ -67,6 +67,7 @@ interface MultiSelectProps {
 interface MultiSelectComponentType extends React__default.ForwardRefExoticComponent<MultiSelectProps & React__default.RefAttributes<HTMLDivElement>> {
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;
     Trigger: typeof MultiSelectTrigger;

package/dist/components/multi-select/dist/index.js

@@ -1,5 +1,5 @@
 import { Slot } from "../../slot/dist/index.js";
-import { MenuValue, MenuContextContent, MenuContextLabel, MenuDivider, MenuContextItem, useMenuBaseRefs, useMenuScroll, useMenuScrollHeight, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuContextLabel, MenuContextItem, MenuEmpty, MenuDivider, MenuContextContent, useMenuBaseRefs, useMenuScroll, useMenuScrollHeight, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, useFloatingTree, offset, flip, shift, size, useFloating, autoUpdate, useClick, useDismiss, useRole, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList } from "@floating-ui/react";
 import React, { memo, forwardRef, useRef, useCallback, useMemo, Children, isValidElement, useId, useEffect, useState, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -354,7 +354,7 @@ function extractItemElements(children) {
     const result = [];
     children2.forEach((child) => {
       if (!isValidElement(child)) return;
-      if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel) {
+      if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel || child.type === MenuEmpty) {
         result.push(child);
       } else if (child.type === React.Fragment && child.props.children) {
         const fragmentChildren = Children.toArray(child.props.children);
@@ -375,6 +375,9 @@ function processOptions(itemElements) {
     if (child.type === MenuContextLabel) {
       return { label: true, children: child.props.children };
     }
+    if (child.type === MenuEmpty) {
+      return { empty: true, children: child.props.children, element: child };
+    }
     const {
       value: itemValue,
       children: itemChildren,
@@ -390,7 +393,7 @@ function processOptions(itemElements) {
   });
 }
 function filterSelectableOptions(options) {
-  return options.filter((option) => !option.divider && !option.label);
+  return options.filter((option) => !option.divider && !option.label && !option.empty);
 }
 var PORTAL_ROOT_ID = "floating-menu-root";
 var MultiSelectComponent = memo(
@@ -654,6 +657,9 @@ var MultiSelectComponent = memo(
         if (option.label) {
           return /* @__PURE__ */ jsx(MenuContextLabel, { children: option.children }, `label-${index}`);
         }
+        if (option.empty) {
+          return /* @__PURE__ */ jsx(MenuEmpty, { children: option.children }, `empty-${index}`);
+        }
         const currentSelectableIndex = selectableIndex;
         selectableIndex++;
         const isSelected = values.includes(option.value || "");
@@ -844,11 +850,12 @@ var BaseMultiSelect = memo(function MultiSelect(props) {
   return /* @__PURE__ */ jsx(MultiSelectComponent, { ...props, children });
 });
 var MultiSelect2 = Object.assign(BaseMultiSelect, {
-  Item: MenuContextItem,
-  Trigger: MultiSelectTrigger,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
-  Content: MenuContextContent,
+  Trigger: MultiSelectTrigger,
   Value: MenuValue
 });
 MultiSelect2.displayName = "MultiSelect";

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

@@ -1,5 +1,5 @@
 import { ChipProps } from '../../chip/src';
-import { MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuValue } from '../../menus/src';
+import { MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuEmpty, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 import { MultiSelectTrigger } from './components';
@@ -42,6 +42,7 @@ export interface MultiSelectProps {
 interface MultiSelectComponentType extends React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;
     Trigger: typeof MultiSelectTrigger;

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "../../slot/dist/index.js";
-import { MenuValue, MenuContextContent, MenuContextLabel, MenuDivider, MenuContextItem, useMenuBaseRefs, useMenuScroll, useMenuScrollHeight, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuContextLabel, MenuContextItem, MenuEmpty, MenuDivider, MenuContextContent, useMenuBaseRefs, useMenuScroll, useMenuScrollHeight, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, useFloatingTree, offset, flip, shift, size, useFloating, autoUpdate, useClick, useDismiss, useRole, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList } from "@floating-ui/react";
 import { memo, forwardRef, useMemo, Children, isValidElement, useRef, useId, useEffect, useState, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -272,6 +272,9 @@ const MultiSelectComponent = memo(
         if (option.label) {
           return /* @__PURE__ */ jsx(MenuContextLabel, { children: option.children }, `label-${index}`);
         }
+        if (option.empty) {
+          return /* @__PURE__ */ jsx(MenuEmpty, { children: option.children }, `empty-${index}`);
+        }
         const currentSelectableIndex = selectableIndex;
         selectableIndex++;
         const isSelected = values.includes(option.value || "");
@@ -462,11 +465,12 @@ const BaseMultiSelect = memo(function MultiSelect2(props) {
   return /* @__PURE__ */ jsx(MultiSelectComponent, { ...props, children });
 });
 const MultiSelect = Object.assign(BaseMultiSelect, {
-  Item: MenuContextItem,
-  Trigger: MultiSelectTrigger,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
-  Content: MenuContextContent,
+  Trigger: MultiSelectTrigger,
   Value: MenuValue
 });
 MultiSelect.displayName = "MultiSelect";

package/dist/components/multi-select/src/utils/extract-options.d.ts

@@ -4,18 +4,29 @@ export declare function processOptions(itemElements: React.ReactNode[]): ({
     divider: boolean;
     label?: undefined;
     children?: undefined;
+    empty?: undefined;
+    element?: undefined;
     value?: undefined;
     disabled?: undefined;
     _originalIndex?: undefined;
-    element?: undefined;
 } | {
     label: boolean;
     children: any;
     divider?: undefined;
+    empty?: undefined;
+    element?: undefined;
+    value?: undefined;
+    disabled?: undefined;
+    _originalIndex?: undefined;
+} | {
+    empty: boolean;
+    children: any;
+    element: React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    divider?: undefined;
+    label?: undefined;
     value?: undefined;
     disabled?: undefined;
     _originalIndex?: undefined;
-    element?: undefined;
 } | {
     value: string | undefined;
     disabled: boolean | undefined;
@@ -24,17 +35,20 @@ export declare function processOptions(itemElements: React.ReactNode[]): ({
     children: React.ReactNode;
     divider?: undefined;
     label?: undefined;
+    empty?: undefined;
 })[];
 export declare function filterSelectableOptions(options: Array<{
     disabled?: boolean;
     divider?: boolean;
     element?: React.ReactElement;
+    empty?: boolean;
     label?: boolean;
     value?: string;
 }>): {
     disabled?: boolean;
     divider?: boolean;
     element?: React.ReactElement;
+    empty?: boolean;
     label?: boolean;
     value?: string;
 }[];

package/dist/components/multi-select/src/utils/extract-options.js

@@ -1,4 +1,4 @@
-import { MenuDivider, MenuContextLabel, MenuContextItem } from "../../../menus/dist/index.js";
+import { MenuDivider, MenuContextLabel, MenuEmpty, MenuContextItem } from "../../../menus/dist/index.js";
 import React, { Children, isValidElement } from "react";
 function extractItemElements(children) {
   if (!children) return [];
@@ -7,7 +7,7 @@ function extractItemElements(children) {
     const result = [];
     children2.forEach((child) => {
       if (!isValidElement(child)) return;
-      if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel) {
+      if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel || child.type === MenuEmpty) {
         result.push(child);
       } else if (child.type === React.Fragment && child.props.children) {
         const fragmentChildren = Children.toArray(child.props.children);
@@ -28,6 +28,9 @@ function processOptions(itemElements) {
     if (child.type === MenuContextLabel) {
       return { label: true, children: child.props.children };
     }
+    if (child.type === MenuEmpty) {
+      return { empty: true, children: child.props.children, element: child };
+    }
     const {
       value: itemValue,
       children: itemChildren,
@@ -43,7 +46,7 @@ function processOptions(itemElements) {
   });
 }
 function filterSelectableOptions(options) {
-  return options.filter((option) => !option.divider && !option.label);
+  return options.filter((option) => !option.divider && !option.label && !option.empty);
 }
 export {
   extractItemElements,

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

@@ -1,4 +1,4 @@
-import { MenuContextContent, MenuDivider, MenuContextItem, MenuContextLabel, MenuTrigger, MenuValue } from '../../menus/src';
+import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuContextLabel, MenuTrigger, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps } from '@floating-ui/react';
 import { default as React } from 'react';
 interface SelectProps {
@@ -22,6 +22,7 @@ interface SelectProps {
 interface SelectComponentType extends React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>> {
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;
     Trigger: typeof MenuTrigger;

package/dist/components/select/dist/index.js

@@ -1,5 +1,5 @@
 import { Slot } from "../../slot/dist/index.js";
-import { MenuValue, MenuContextContent, MenuContextLabel, MenuDivider, MenuTrigger, MenuContextItem, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuTrigger, MenuContextLabel, MenuContextItem, MenuEmpty, MenuDivider, MenuContextContent, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, useFloating, offset, shift, flip, size, inner, autoUpdate, useClick, useDismiss, useRole, useInnerOffset, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList } from "@floating-ui/react";
 import React, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -45,7 +45,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
       const result = [];
       children2.forEach((child) => {
         if (!isValidElement(child)) return;
-        if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel) {
+        if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel || child.type === MenuEmpty) {
           result.push(child);
         } else if (child.type === React.Fragment && child.props.children) {
           const fragmentChildren = Children.toArray(child.props.children);
@@ -67,6 +67,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
       if (child.type === MenuContextLabel) {
         return { label: true, children: child.props.children };
       }
+      if (child.type === MenuEmpty) {
+        return { empty: true, children: child.props.children, element: child };
+      }
       const {
         value: itemValue,
         children: itemChildren,
@@ -82,7 +85,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
     });
   }, [itemElements]);
   const selectableOptions = useMemo(() => {
-    return options.filter((option) => !option.divider && !option.label);
+    return options.filter((option) => !option.divider && !option.label && !option.empty);
   }, [options]);
   const listRef = useRef([]);
   const listContentRef = useRef([]);
@@ -287,6 +290,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
       if (option.label) {
         return /* @__PURE__ */ jsx(MenuContextLabel, { children: option.children }, `label-${index}`);
       }
+      if (option.empty) {
+        return /* @__PURE__ */ jsx(MenuEmpty, { children: option.children }, `empty-${index}`);
+      }
       const currentSelectableIndex = selectableIndex;
       selectableIndex++;
       const isSelected = currentSelectedIndex === currentSelectableIndex;
@@ -467,11 +473,12 @@ var BaseSelect = memo(function Select(props) {
   return /* @__PURE__ */ jsx(SelectComponent, { ...props, children });
 });
 var Select2 = Object.assign(BaseSelect, {
-  Item: MenuContextItem,
-  Trigger: MenuTrigger,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
-  Content: MenuContextContent,
+  Trigger: MenuTrigger,
   Value: MenuValue
 });
 Select2.displayName = "Select";

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

@@ -1,4 +1,4 @@
-import { MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuTrigger, MenuValue } from '../../menus/src';
+import { MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuEmpty, MenuTrigger, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps } from '@floating-ui/react';
 import { default as React } from 'react';
 export interface SelectProps {
@@ -22,6 +22,7 @@ export interface SelectProps {
 interface SelectComponentType extends React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>> {
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;
     Trigger: typeof MenuTrigger;

package/dist/components/select/src/select.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "../../slot/dist/index.js";
-import { MenuValue, MenuContextContent, MenuContextLabel, MenuDivider, MenuTrigger, MenuContextItem, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuTrigger, MenuContextLabel, MenuContextItem, MenuEmpty, MenuDivider, MenuContextContent, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, useFloating, offset, shift, flip, size, inner, autoUpdate, useClick, useDismiss, useRole, useInnerOffset, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList } from "@floating-ui/react";
 import React, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
@@ -45,7 +45,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
       const result = [];
       children2.forEach((child) => {
         if (!isValidElement(child)) return;
-        if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel) {
+        if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel || child.type === MenuEmpty) {
           result.push(child);
         } else if (child.type === React.Fragment && child.props.children) {
           const fragmentChildren = Children.toArray(child.props.children);
@@ -67,6 +67,9 @@ const SelectComponent = memo(function SelectComponent2(props) {
       if (child.type === MenuContextLabel) {
         return { label: true, children: child.props.children };
       }
+      if (child.type === MenuEmpty) {
+        return { empty: true, children: child.props.children, element: child };
+      }
       const {
         value: itemValue,
         children: itemChildren,
@@ -82,7 +85,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
     });
   }, [itemElements]);
   const selectableOptions = useMemo(() => {
-    return options.filter((option) => !option.divider && !option.label);
+    return options.filter((option) => !option.divider && !option.label && !option.empty);
   }, [options]);
   const listRef = useRef([]);
   const listContentRef = useRef([]);
@@ -287,6 +290,9 @@ const SelectComponent = memo(function SelectComponent2(props) {
       if (option.label) {
         return /* @__PURE__ */ jsx(MenuContextLabel, { children: option.children }, `label-${index}`);
       }
+      if (option.empty) {
+        return /* @__PURE__ */ jsx(MenuEmpty, { children: option.children }, `empty-${index}`);
+      }
       const currentSelectableIndex = selectableIndex;
       selectableIndex++;
       const isSelected = currentSelectedIndex === currentSelectableIndex;
@@ -467,11 +473,12 @@ const BaseSelect = memo(function Select2(props) {
   return /* @__PURE__ */ jsx(SelectComponent, { ...props, children });
 });
 const Select = Object.assign(BaseSelect, {
-  Item: MenuContextItem,
-  Trigger: MenuTrigger,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
-  Content: MenuContextContent,
+  Trigger: MenuTrigger,
   Value: MenuValue
 });
 Select.displayName = "Select";

package/dist/components/slot/dist/index.js

@@ -1,13 +1,20 @@
 import React, { forwardRef, useMemo } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
+var REACT_MAJOR = parseInt(React.version.split(".")[0], 10);
+var IS_REACT_19 = REACT_MAJOR >= 19;
+function getChildRef(children) {
+  if (IS_REACT_19) {
+    return children.props.ref;
+  }
+  return void 0;
+}
 var Slot = forwardRef(
   ({ children, ...slotProps }, forwardedRef) => {
     const slottedChild = useMemo(() => {
       if (!React.isValidElement(children)) {
         return children;
       }
-      const childProps = children.props;
-      const childRef = childProps.ref;
+      const childRef = getChildRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
       return React.cloneElement(children, {
         ...mergedProps,
@@ -24,8 +31,7 @@ var SlotClone = forwardRef(
       if (!React.isValidElement(children)) {
         return children;
       }
-      const childProps = children.props;
-      const childRef = childProps.ref;
+      const childRef = getChildRef(children);
       const mergedProps = mergeProps(slotProps, children.props);
       return React.cloneElement(children, {
         ...mergedProps,

package/dist/index.js

@@ -136,6 +136,7 @@ import { Menubar } from "./components/menubar/src/menubar.js";
 import { MenuButton } from "./components/menus/src/components/menu-button.js";
 import { MenuCheckbox } from "./components/menus/src/components/menu-checkbox.js";
 import { MenuDivider } from "./components/menus/src/components/menu-divider.js";
+import { MenuEmpty } from "./components/menus/src/components/menu-empty.js";
 import { MenuInput } from "./components/menus/src/components/menu-input.js";
 import { MenuItem } from "./components/menus/src/components/menu-item.js";
 import { MenuLabel } from "./components/menus/src/components/menu-label.js";
@@ -346,6 +347,7 @@ export {
   MenuContextLabel,
   MenuContextSubTrigger,
   MenuDivider,
+  MenuEmpty,
   MenuInput,
   MenuItem,
   MenuLabel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",