@choice-ui/react 1.5.3 → 1.5.5

package/dist/components/dialog/src/dialog.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "../../slot/dist/index.js";
 import { ModalFooter, ModalBackdrop, ModalContent, Modal } from "../../modal/dist/index.js";
 import { FloatingPortal, FloatingOverlay, FloatingFocusManager } from "@floating-ui/react";
-import React, { memo, useRef, useId, useMemo } from "react";
+import React__default, { memo, useRef, useId, useMemo } from "react";
 import { DialogContext } from "./dialog-context.js";
 import { dragDialogTv } from "./tv.js";
 import { DialogHeader } from "./components/dialog-header.js";
@@ -134,7 +134,7 @@ const DialogComponent = memo(function DialogComponent2({
   const backdropContent = useMemo(() => {
     const backdropChild = findChildByType(children, ModalBackdrop);
     if (!backdropChild) return null;
-    return React.cloneElement(backdropChild, {
+    return React__default.cloneElement(backdropChild, {
       isOpen: floating.innerOpen,
       onClose: floating.handleClose,
       ...backdropChild.props

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/index.d.ts

@@ -36,6 +36,7 @@ export * from './modal/src';
 export * from './multi-select/src';
 export * from './notifications/src';
 export * from './numeric-input/src';
+export * from './otp-input/src';
 export * from './pagination/src';
 export * from './panel/src';
 export * from './picture-preview/src';

package/dist/components/md-input/src/components/toolbar/toolbar.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { memo, forwardRef, useContext, useMemo } from "react";
+import React__default, { memo, forwardRef, useContext, useMemo } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { DEFAULT_TOOLBAR_GROUPS } from "./default-actions.js";
 import { ToolbarButton } from "./toolbar-button.js";
@@ -66,7 +66,7 @@ const Toolbar = memo(
         ...rest,
         children: [
           beforeElement,
-          filteredGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          filteredGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             groupIndex > 0 && /* @__PURE__ */ jsx("div", { className: tcx(tv.divider()) }),
             group.map((action) => /* @__PURE__ */ jsx(
               ToolbarButton,

package/dist/components/md-input/src/md-input.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { memo, forwardRef, useState, useRef, useMemo } from "react";
+import React__default, { memo, forwardRef, useState, useRef, useMemo } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { MdInputContainer } from "./components/md-input-container.js";
 import { MdInputEditor } from "./components/md-input-editor.js";
@@ -37,10 +37,10 @@ const MdInputRoot = memo(
     const hasTabs = useMemo(() => {
       const checkForTabs = (node) => {
         let found = false;
-        React.Children.forEach(node, (child) => {
+        React__default.Children.forEach(node, (child) => {
           var _a;
           if (found) return;
-          if (React.isValidElement(child)) {
+          if (React__default.isValidElement(child)) {
             const type = child.type;
             if (type.displayName === "MdInputTabs" || type === MdInputTabs) {
               found = true;

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__default, { 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 {
@@ -703,7 +726,7 @@ var MenusBase = forwardRef((props, ref) => {
           return processChildren(child.props.children);
         }
         if (child.props.children) {
-          return React.cloneElement(child, {
+          return React__default.cloneElement(child, {
             ...child.props,
             children: processChildren(child.props.children)
           });
@@ -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/menus.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { forwardRef, Children, isValidElement, Fragment } from "react";
+import React__default, { forwardRef, Children, isValidElement, Fragment } from "react";
 import { MenuButton } from "./components/menu-button.js";
 import { MenuCheckbox } from "./components/menu-checkbox.js";
 import { MenuDivider } from "./components/menu-divider.js";
@@ -20,7 +20,7 @@ const MenusBase = forwardRef((props, ref) => {
           return processChildren(child.props.children);
         }
         if (child.props.children) {
-          return React.cloneElement(child, {
+          return React__default.cloneElement(child, {
             ...child.props,
             children: processChildren(child.props.children)
           });

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,7 +1,7 @@
 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 React__default, { memo, forwardRef, useRef, useCallback, useMemo, Children, isValidElement, useId, useEffect, useState, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { Chip } from "../../chip/dist/index.js";
 import { ChevronDownSmall } from "@choiceform/icons-react";
@@ -354,9 +354,9 @@ 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) {
+      } else if (child.type === React__default.Fragment && child.props.children) {
         const fragmentChildren = Children.toArray(child.props.children);
         result.push(...extractItems(fragmentChildren));
       }
@@ -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,5 +1,5 @@
-import { MenuDivider, MenuContextLabel, MenuContextItem } from "../../../menus/dist/index.js";
-import React, { Children, isValidElement } from "react";
+import { MenuDivider, MenuContextLabel, MenuEmpty, MenuContextItem } from "../../../menus/dist/index.js";
+import React__default, { Children, isValidElement } from "react";
 function extractItemElements(children) {
   if (!children) return [];
   const childrenArray = Children.toArray(children);
@@ -7,9 +7,9 @@ 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) {
+      } else if (child.type === React__default.Fragment && child.props.children) {
         const fragmentChildren = Children.toArray(child.props.children);
         result.push(...extractItems(fragmentChildren));
       }
@@ -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/otp-input/dist/index.d.ts

@@ -0,0 +1,30 @@
+import { OTPInput } from 'input-otp';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type OTPInputVariant = "default" | "light" | "dark";
+interface OTPInputRootProps extends Omit<ComponentProps<typeof OTPInput>, "disabled" | "containerClassName" | "render"> {
+    variant?: OTPInputVariant;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    inputClassName?: string;
+    children: ReactNode;
+}
+declare function OTPInputRoot({ className, inputClassName, variant, disabled, isInvalid, children, ...props }: OTPInputRootProps): react_jsx_runtime.JSX.Element;
+interface OTPInputGroupProps extends ComponentProps<"div"> {
+}
+declare function OTPInputGroup({ className, ...props }: OTPInputGroupProps): react_jsx_runtime.JSX.Element;
+interface OTPInputSlotProps extends ComponentProps<"div"> {
+    index: number;
+}
+declare function OTPInputSlot({ className, index, ...props }: OTPInputSlotProps): react_jsx_runtime.JSX.Element;
+interface OTPInputSeparatorProps extends ComponentProps<"div"> {
+}
+declare function OTPInputSeparator({ className, children, ...props }: OTPInputSeparatorProps): react_jsx_runtime.JSX.Element;
+declare const OtpInput: typeof OTPInputRoot & {
+    Group: typeof OTPInputGroup;
+    Slot: typeof OTPInputSlot;
+    Separator: typeof OTPInputSeparator;
+};
+
+export { type OTPInputGroupProps, type OTPInputRootProps, type OTPInputSeparatorProps, type OTPInputSlotProps, OtpInput };

package/dist/components/otp-input/src/index.d.ts

@@ -0,0 +1,2 @@
+export { OtpInput } from './otp-input';
+export type { OTPInputRootProps, OTPInputGroupProps, OTPInputSlotProps, OTPInputSeparatorProps, } from './otp-input';

package/dist/components/otp-input/src/otp-input.d.ts

@@ -0,0 +1,27 @@
+import { OTPInput } from 'input-otp';
+import { ComponentProps, ReactNode } from 'react';
+type OTPInputVariant = "default" | "light" | "dark";
+export interface OTPInputRootProps extends Omit<ComponentProps<typeof OTPInput>, "disabled" | "containerClassName" | "render"> {
+    variant?: OTPInputVariant;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    inputClassName?: string;
+    children: ReactNode;
+}
+declare function OTPInputRoot({ className, inputClassName, variant, disabled, isInvalid, children, ...props }: OTPInputRootProps): import("react/jsx-runtime").JSX.Element;
+export interface OTPInputGroupProps extends ComponentProps<"div"> {
+}
+declare function OTPInputGroup({ className, ...props }: OTPInputGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface OTPInputSlotProps extends ComponentProps<"div"> {
+    index: number;
+}
+declare function OTPInputSlot({ className, index, ...props }: OTPInputSlotProps): import("react/jsx-runtime").JSX.Element;
+export interface OTPInputSeparatorProps extends ComponentProps<"div"> {
+}
+declare function OTPInputSeparator({ className, children, ...props }: OTPInputSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const OtpInput: typeof OTPInputRoot & {
+    Group: typeof OTPInputGroup;
+    Slot: typeof OTPInputSlot;
+    Separator: typeof OTPInputSeparator;
+};
+export {};