@choice-ui/react 1.4.2 → 1.4.5

package/dist/components/list/src/list.js

@@ -46,7 +46,7 @@ const ListRoot = forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
   const handleKeyDown = useListKeyboard();
   const { setActiveItem } = useActiveItemContext();
-  const styles = ListTv();
+  const tv = ListTv();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -56,7 +56,7 @@ const ListRoot = forwardRef((props, ref) => {
       onKeyDown: handleKeyDown,
       onMouseLeave: () => setActiveItem(null),
       ...rest,
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       children
     }
   );

package/dist/components/md-input/dist/index.d.ts

@@ -42,74 +42,32 @@ interface MdInputTabsProps {
 }
 declare const MdInputTabs: react.MemoExoticComponent<react.ForwardRefExoticComponent<MdInputTabsProps & react.RefAttributes<HTMLDivElement>>>;
 
-declare function useMarkdownFormatting(textareaRef: React.RefObject<HTMLTextAreaElement>): {
-    insertText: (text: string, onChange?: ((value: string) => void) | undefined) => void;
-    wrapText: (before: string, after: string, onChange?: ((value: string) => void) | undefined) => void;
-    insertListPrefix: (prefix: string, onChange?: ((value: string) => void) | undefined) => void;
-};
-
-interface MentionItemProps {
+interface MdInputMentionItemProps {
     [key: string]: unknown;
     id: string;
     label: string;
 }
-interface UseMentionsOptions {
-    disabled?: boolean;
-    items?: MentionItemProps[];
-    onChange?: (value: string) => void;
-    onSelect?: (item: MentionItemProps, query: string) => string;
-    readOnly?: boolean;
-}
 interface MdInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
     children: React.ReactNode;
     disabled?: boolean;
-    mentionItems?: MentionItemProps[];
-    mentionOnSelect?: (item: MentionItemProps, query: string) => string;
+    mentionItems?: MdInputMentionItemProps[];
+    mentionOnSelect?: (item: MdInputMentionItemProps, query: string) => string;
     onChange?: (value: string) => void;
     readOnly?: boolean;
     value?: string;
 }
-interface MentionState {
-    closeMentionSearch: () => void;
-    filteredItems: MentionItemProps[];
-    handleSelect: (item: MentionItemProps) => void;
-    isOpen: boolean;
-    position: {
-        x: number;
-        y: number;
-    } | null;
-    query: string;
-}
-interface MdInputContextValue {
-    activeTab: "write" | "preview";
-    disabled?: boolean;
-    handleToolbarAction: (action: string) => void;
-    hasTabs: boolean;
-    insertListPrefix: ReturnType<typeof useMarkdownFormatting>["insertListPrefix"];
-    insertText: ReturnType<typeof useMarkdownFormatting>["insertText"];
-    mentionItems?: MentionItemProps[];
-    mentionOnSelect?: (item: MentionItemProps, query: string) => string;
-    mentionState?: MentionState;
-    onChange?: (value: string) => void;
-    readOnly?: boolean;
-    setActiveTab: (tab: "write" | "preview") => void;
-    setMentionState?: (state: MentionState) => void;
-    textareaRef: React.RefObject<HTMLTextAreaElement>;
-    value: string;
-    wrapText: ReturnType<typeof useMarkdownFormatting>["wrapText"];
-}
-interface ToolbarAction {
+interface MdInputToolbarAction {
     icon?: React.ReactNode;
     id: string;
     label?: string;
 }
-interface ToolbarProps {
+interface MdInputToolbarProps {
     afterElement?: React.ReactNode;
     beforeElement?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    groups?: ToolbarAction[][];
+    groups?: MdInputToolbarAction[][];
     i18n?: {
         bold: string;
         code: string;
@@ -126,17 +84,7 @@ interface ToolbarProps {
     visibleActions?: string[];
 }
 
-declare const Toolbar: react__default.MemoExoticComponent<react__default.ForwardRefExoticComponent<ToolbarProps & react__default.RefAttributes<HTMLDivElement>>>;
-
-interface ToolbarButtonProps {
-    disabled?: boolean;
-    icon?: React.ReactNode;
-    label?: string;
-    onClick?: () => void;
-}
-declare const ToolbarButton: react.NamedExoticComponent<ToolbarButtonProps>;
-
-declare const DEFAULT_TOOLBAR_GROUPS: ToolbarAction[][];
+declare const Toolbar: react__default.MemoExoticComponent<react__default.ForwardRefExoticComponent<MdInputToolbarProps & react__default.RefAttributes<HTMLDivElement>>>;
 
 interface MdInputComponent extends react__default.ForwardRefExoticComponent<MdInputProps & react__default.RefAttributes<HTMLDivElement>> {
     Container: typeof MdInputContainer;
@@ -149,48 +97,4 @@ interface MdInputComponent extends react__default.ForwardRefExoticComponent<MdIn
 }
 declare const MdInput: MdInputComponent;
 
-interface MdInputMentionProps {
-    filteredItems: MentionItemProps[];
-    isOpen: boolean;
-    onClose: () => void;
-    onSelect: (item: MentionItemProps) => void;
-    position: {
-        x: number;
-        y: number;
-    } | null;
-    query: string;
-    renderItem?: (item: MentionItemProps) => React.ReactNode;
-}
-declare const MdInputMention: react.NamedExoticComponent<MdInputMentionProps>;
-
-interface UseMarkdownShortcutsProps {
-    disabled?: boolean;
-    insertText: ReturnType<typeof useMarkdownFormatting>["insertText"];
-    onChange?: (value: string) => void;
-    readOnly?: boolean;
-    textareaRef: React.RefObject<HTMLTextAreaElement>;
-    wrapText: ReturnType<typeof useMarkdownFormatting>["wrapText"];
-}
-declare function useMarkdownShortcuts(props: UseMarkdownShortcutsProps): {
-    handleKeyDown: (event: react.KeyboardEvent<HTMLTextAreaElement>) => void;
-};
-
-declare function useMarkdownMentions({ items, onSelect, onChange, disabled, readOnly, }: UseMentionsOptions): {
-    isOpen: boolean;
-    position: {
-        x: number;
-        y: number;
-    } | null;
-    query: string;
-    filteredItems: MentionItemProps[];
-    handleInputChange: (value: string, textarea: HTMLTextAreaElement, onChange?: ((value: string) => void) | undefined) => void;
-    handleSelect: (item: MentionItemProps) => void;
-    handleKeyDown: (event: react.KeyboardEvent<HTMLTextAreaElement>) => void;
-    closeMentionSearch: () => void;
-    setTextareaRef: (ref: HTMLTextAreaElement | null) => void;
-};
-
-declare const MdInputContext: react.Context<MdInputContextValue | null>;
-declare const useMdInputContext: () => MdInputContextValue;
-
-export { DEFAULT_TOOLBAR_GROUPS, MdInput, MdInputContainer, type MdInputContainerProps, MdInputContext, type MdInputContextValue, MdInputEditor, type MdInputEditorProps, MdInputFooter, type MdInputFooterProps, MdInputHeader, type MdInputHeaderProps, MdInputMention, type MdInputProps, MdInputTabs, type MdInputTabsProps, type MentionItemProps, type MentionState, Toolbar, type ToolbarAction, ToolbarButton, type ToolbarProps, type UseMentionsOptions, useMarkdownFormatting, useMarkdownMentions, useMarkdownShortcuts, useMdInputContext };
+export { MdInput, type MdInputMentionItemProps, type MdInputProps, type MdInputToolbarAction, type MdInputToolbarProps };

package/dist/components/md-input/src/components/extensions/md-input-mention.d.ts

@@ -1,14 +1,16 @@
-import { MentionItemProps } from '../../types';
+import { MdInputMentionItemProps } from '../../types';
 export interface MdInputMentionProps {
-    filteredItems: MentionItemProps[];
+    filteredItems: MdInputMentionItemProps[];
     isOpen: boolean;
     onClose: () => void;
-    onSelect: (item: MentionItemProps) => void;
+    onSelect: (item: MdInputMentionItemProps) => void;
     position: {
         x: number;
         y: number;
     } | null;
     query: string;
-    renderItem?: (item: MentionItemProps) => React.ReactNode;
+    /** Virtual selection index for keyboard navigation (managed by hook) */
+    selectedIndex: number;
+    renderItem?: (item: MdInputMentionItemProps) => React.ReactNode;
 }
 export declare const MdInputMention: import('react').NamedExoticComponent<MdInputMentionProps>;

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

@@ -1,16 +1,30 @@
 import { jsx } from "react/jsx-runtime";
 import { Combobox as Combobox2 } from "../../../../combobox/dist/index.js";
-import { memo } from "react";
+import { memo, useRef, useEffect } from "react";
+const FOCUS_MANAGER_PROPS = {
+  modal: false,
+  initialFocus: -1,
+  returnFocus: false
+};
+const defaultRenderItem = (item) => /* @__PURE__ */ jsx(Combobox2.Value, { children: item.label });
 const MdInputMention = memo(function MdInputMention2({
   isOpen,
   position,
   query,
   filteredItems,
+  selectedIndex,
   onSelect,
   onClose,
-  renderItem
+  renderItem = defaultRenderItem
 }) {
-  const defaultRenderItem = (item) => /* @__PURE__ */ jsx(Combobox2.Value, { children: item.label });
+  const listRef = useRef(null);
+  useEffect(() => {
+    if (!listRef.current || filteredItems.length === 0) return;
+    const selectedElement = listRef.current.querySelector(`[data-index="${selectedIndex}"]`);
+    if (selectedElement) {
+      selectedElement.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex, filteredItems.length]);
   if (!isOpen || !position) {
     return null;
   }
@@ -23,12 +37,15 @@ const MdInputMention = memo(function MdInputMention2({
       open: isOpen,
       onOpenChange: (open) => !open && onClose(),
       placement: "bottom-start",
-      autoSelection: true,
-      children: /* @__PURE__ */ jsx(Combobox2.Content, { children: filteredItems.length > 0 ? filteredItems.map((item) => /* @__PURE__ */ jsx(
+      autoSelection: false,
+      focusManagerProps: FOCUS_MANAGER_PROPS,
+      children: /* @__PURE__ */ jsx(Combobox2.Content, { ref: listRef, children: filteredItems.length > 0 ? filteredItems.map((item, index) => /* @__PURE__ */ jsx(
         Combobox2.Item,
         {
+          "data-index": index,
+          customActive: index === selectedIndex,
           onClick: () => onSelect(item),
-          children: renderItem ? renderItem(item) : defaultRenderItem(item)
+          children: renderItem(item)
         },
         item.id
       )) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-4 text-center text-sm", children: "No results found" }) })

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

@@ -23,6 +23,7 @@ const MdInputContainer = memo(
               position: mentionState.position,
               query: mentionState.query,
               filteredItems: mentionState.filteredItems,
+              selectedIndex: mentionState.selectedIndex,
               onSelect: mentionState.handleSelect,
               onClose: mentionState.closeMentionSearch
             }

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

@@ -40,6 +40,7 @@ const MdInputEditor = memo(
       position,
       query,
       filteredItems,
+      selectedIndex,
       handleSelect
     } = mentionHook;
     const prevMentionStateRef = useRef(null);
@@ -57,11 +58,12 @@ const MdInputEditor = memo(
         position,
         query,
         filteredItems,
+        selectedIndex,
         handleSelect,
         closeMentionSearch: mentionHook.closeMentionSearch
       };
       const prev = prevMentionStateRef.current;
-      if (prev && prev.isOpen === newState.isOpen && prev.position === newState.position && prev.query === newState.query && prev.filteredItems === newState.filteredItems) {
+      if (prev && prev.isOpen === newState.isOpen && prev.position === newState.position && prev.query === newState.query && prev.filteredItems === newState.filteredItems && prev.selectedIndex === newState.selectedIndex) {
         return;
       }
       prevMentionStateRef.current = newState;
@@ -71,6 +73,7 @@ const MdInputEditor = memo(
       position,
       query,
       filteredItems,
+      selectedIndex,
       handleSelect,
       mentionHook.closeMentionSearch,
       setMentionState,

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

@@ -1,14 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, forwardRef } from "react";
+import { mdInputTv } from "../tv.js";
+import { useMdInputContext } from "../context/md-input-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const MdInputFooter = memo(
   forwardRef((props, ref) => {
     const { children, className } = props;
+    const { disabled, readOnly } = useMdInputContext();
+    const tv = mdInputTv({ disabled, readOnly });
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: tcx("border-t p-2", className),
+        className: tcx(tv.footer(), className),
         children
       }
     );

package/dist/components/md-input/src/components/toolbar/default-actions.d.ts

@@ -1,2 +1,2 @@
-import { ToolbarAction } from '../../types';
-export declare const DEFAULT_TOOLBAR_GROUPS: ToolbarAction[][];
+import { MdInputToolbarAction } from '../../types';
+export declare const DEFAULT_TOOLBAR_GROUPS: MdInputToolbarAction[][];

package/dist/components/md-input/src/components/toolbar/toolbar-button.d.ts

@@ -4,5 +4,6 @@ interface ToolbarButtonProps {
     label?: string;
     onClick?: () => void;
 }
+/** Toolbar button with icon and tooltip (IconButton handles disabled state internally) */
 export declare const ToolbarButton: import('react').NamedExoticComponent<ToolbarButtonProps>;
 export {};

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

@@ -1,22 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { IconButton } from "../../../../icon-button/dist/index.js";
 import { memo } from "react";
-import { useEventCallback } from "usehooks-ts";
 const ToolbarButton = memo(function ToolbarButton2({
   label,
   icon,
   onClick,
   disabled
 }) {
-  const handleClick = useEventCallback(() => {
-    if (!disabled) {
-      onClick == null ? void 0 : onClick();
-    }
-  });
   return /* @__PURE__ */ jsx(
     IconButton,
     {
-      onClick: handleClick,
+      onClick,
       disabled,
       "aria-label": label,
       tooltip: { content: label },

package/dist/components/md-input/src/components/toolbar/toolbar.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
-import { ToolbarProps } from '../../types';
-export declare const Toolbar: React.MemoExoticComponent<React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>>;
+import { MdInputToolbarProps } from '../../types';
+export declare const Toolbar: React.MemoExoticComponent<React.ForwardRefExoticComponent<MdInputToolbarProps & React.RefAttributes<HTMLDivElement>>>;

package/dist/components/md-input/src/hooks/use-markdown-mentions.d.ts

@@ -1,14 +1,15 @@
-import { MentionItemProps, UseMentionsOptions } from '../types';
-export declare function useMarkdownMentions({ items, onSelect, onChange, disabled, readOnly, }: UseMentionsOptions): {
+import { MdInputMentionItemProps, UseMdInputMentionsOptions } from '../types';
+export declare function useMarkdownMentions({ items, onSelect, onChange, disabled, readOnly, }: UseMdInputMentionsOptions): {
     isOpen: boolean;
     position: {
         x: number;
         y: number;
     } | null;
     query: string;
-    filteredItems: MentionItemProps[];
+    filteredItems: MdInputMentionItemProps[];
+    selectedIndex: number;
     handleInputChange: (value: string, textarea: HTMLTextAreaElement, onChange?: ((value: string) => void) | undefined) => void;
-    handleSelect: (item: MentionItemProps) => void;
+    handleSelect: (item: MdInputMentionItemProps) => void;
     handleKeyDown: (event: import('react').KeyboardEvent<HTMLTextAreaElement>) => void;
     closeMentionSearch: () => void;
     setTextareaRef: (ref: HTMLTextAreaElement | null) => void;

package/dist/components/md-input/src/hooks/use-markdown-mentions.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useMemo } from "react";
+import { useState, useRef, useMemo, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
 const EMPTY_ITEMS = [];
 function useMarkdownMentions({
@@ -12,6 +12,7 @@ function useMarkdownMentions({
   const [position, setPosition] = useState(null);
   const [query, setQuery] = useState("");
   const [mentionStart, setMentionStart] = useState(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const textareaRef = useRef(null);
   const filteredItems = useMemo(() => {
     if (!items || items.length === 0) {
@@ -25,6 +26,9 @@ function useMarkdownMentions({
       (item) => item.label.toLowerCase().includes(lowerQuery) || item.id.toLowerCase().includes(lowerQuery)
     );
   }, [items, query]);
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredItems]);
   const getCaretCoordinates = useEventCallback(
     (textarea, position2) => {
       const div = document.createElement("div");
@@ -91,9 +95,9 @@ function useMarkdownMentions({
       const divRect = div.getBoundingClientRect();
       const coordinates = {
         x: textareaRect.left + (markerRect.left - divRect.left) + 8,
-        // 右侧偏移 8px，露出 @ 符号
-        y: textareaRect.top + (markerRect.top - divRect.top) + markerRect.height + window.scrollY + 8
-        // 添加8px间距（4px + 4px）和scrollY
+        // 8px right offset to show @ symbol
+        y: textareaRect.top + (markerRect.top - divRect.top) + markerRect.height + 8
+        // 8px gap
       };
       document.body.removeChild(div);
       return coordinates;
@@ -159,6 +163,28 @@ function useMarkdownMentions({
     if (event.key === "Escape") {
       event.preventDefault();
       closeMentionSearch();
+      return;
+    }
+    if (filteredItems.length === 0) {
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setSelectedIndex((prev) => (prev + 1) % filteredItems.length);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setSelectedIndex((prev) => (prev - 1 + filteredItems.length) % filteredItems.length);
+      return;
+    }
+    if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault();
+      const safeIndex = Math.min(selectedIndex, filteredItems.length - 1);
+      const selectedItem = filteredItems[safeIndex];
+      if (selectedItem) {
+        handleSelect(selectedItem);
+      }
     }
   });
   const closeMentionSearch = useEventCallback(() => {
@@ -172,6 +198,7 @@ function useMarkdownMentions({
     position,
     query,
     filteredItems,
+    selectedIndex,
     handleInputChange,
     handleSelect,
     handleKeyDown,

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

@@ -1,5 +1,2 @@
 export { MdInput } from './md-input';
-export * from './types';
-export * from './components';
-export * from './hooks';
-export * from './context';
+export type { MdInputProps, MdInputMentionItemProps, MdInputToolbarAction, MdInputToolbarProps, } from './types';

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

@@ -35,21 +35,25 @@ const MdInputRoot = memo(
     const textareaRef = useRef(null);
     const { insertText, wrapText, insertListPrefix } = useMarkdownFormatting(textareaRef);
     const hasTabs = useMemo(() => {
-      let foundTabs = false;
-      React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child)) {
-          if (child.type === MdInputTabs) {
-            foundTabs = true;
-          } else if (child.type === MdInputHeader) {
-            React.Children.forEach(child.props.children, (headerChild) => {
-              if (React.isValidElement(headerChild) && headerChild.type === MdInputTabs) {
-                foundTabs = true;
-              }
-            });
+      const checkForTabs = (node) => {
+        let found = false;
+        React.Children.forEach(node, (child) => {
+          var _a;
+          if (found) return;
+          if (React.isValidElement(child)) {
+            const type = child.type;
+            if (type.displayName === "MdInputTabs" || type === MdInputTabs) {
+              found = true;
+              return;
+            }
+            if ((_a = child.props) == null ? void 0 : _a.children) {
+              found = checkForTabs(child.props.children);
+            }
           }
-        }
-      });
-      return foundTabs;
+        });
+        return found;
+      };
+      return checkForTabs(children);
     }, [children]);
     const handleChange = useEventCallback((newValue) => {
       onChange == null ? void 0 : onChange(newValue);

package/dist/components/md-input/src/tv.d.ts

@@ -33,6 +33,7 @@ export declare const mdInputTv: import('tailwind-variants').TVReturnType<{
     content: string;
     textarea: string;
     render: string;
+    footer: string;
 }, undefined, {
     visible: {
         true: {
@@ -68,6 +69,7 @@ export declare const mdInputTv: import('tailwind-variants').TVReturnType<{
     content: string;
     textarea: string;
     render: string;
+    footer: string;
 }, import('tailwind-variants').TVReturnType<{
     visible: {
         true: {
@@ -103,4 +105,5 @@ export declare const mdInputTv: import('tailwind-variants').TVReturnType<{
     content: string;
     textarea: string;
     render: string;
+    footer: string;
 }, undefined, unknown, unknown, undefined>>;

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

@@ -5,7 +5,8 @@ const mdInputTv = tcv({
     header: "flex items-center justify-between gap-4 px-2 py-2 border-b border-default-border bg-default-background",
     content: "flex-1 relative",
     textarea: "border-none rounded-none",
-    render: ""
+    render: "",
+    footer: "border-t border-default-border p-2"
   },
   variants: {
     visible: {

package/dist/components/md-input/src/types.d.ts

@@ -1,36 +1,38 @@
 import { HTMLAttributes } from 'react';
 import { useMarkdownFormatting } from './hooks/use-markdown-formatting';
-export interface MentionItemProps {
+export interface MdInputMentionItemProps {
     [key: string]: unknown;
     id: string;
     label: string;
 }
-export interface UseMentionsOptions {
+export interface UseMdInputMentionsOptions {
     disabled?: boolean;
-    items?: MentionItemProps[];
+    items?: MdInputMentionItemProps[];
     onChange?: (value: string) => void;
-    onSelect?: (item: MentionItemProps, query: string) => string;
+    onSelect?: (item: MdInputMentionItemProps, query: string) => string;
     readOnly?: boolean;
 }
 export interface MdInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
     children: React.ReactNode;
     disabled?: boolean;
-    mentionItems?: MentionItemProps[];
-    mentionOnSelect?: (item: MentionItemProps, query: string) => string;
+    mentionItems?: MdInputMentionItemProps[];
+    mentionOnSelect?: (item: MdInputMentionItemProps, query: string) => string;
     onChange?: (value: string) => void;
     readOnly?: boolean;
     value?: string;
 }
-export interface MentionState {
+export interface MdInputMentionState {
     closeMentionSearch: () => void;
-    filteredItems: MentionItemProps[];
-    handleSelect: (item: MentionItemProps) => void;
+    filteredItems: MdInputMentionItemProps[];
+    handleSelect: (item: MdInputMentionItemProps) => void;
     isOpen: boolean;
     position: {
         x: number;
         y: number;
     } | null;
     query: string;
+    /** Virtual selection index for keyboard navigation */
+    selectedIndex: number;
 }
 export interface MdInputContextValue {
     activeTab: "write" | "preview";
@@ -39,29 +41,29 @@ export interface MdInputContextValue {
     hasTabs: boolean;
     insertListPrefix: ReturnType<typeof useMarkdownFormatting>["insertListPrefix"];
     insertText: ReturnType<typeof useMarkdownFormatting>["insertText"];
-    mentionItems?: MentionItemProps[];
-    mentionOnSelect?: (item: MentionItemProps, query: string) => string;
-    mentionState?: MentionState;
+    mentionItems?: MdInputMentionItemProps[];
+    mentionOnSelect?: (item: MdInputMentionItemProps, query: string) => string;
+    mentionState?: MdInputMentionState;
     onChange?: (value: string) => void;
     readOnly?: boolean;
     setActiveTab: (tab: "write" | "preview") => void;
-    setMentionState?: (state: MentionState) => void;
+    setMentionState?: (state: MdInputMentionState) => void;
     textareaRef: React.RefObject<HTMLTextAreaElement>;
     value: string;
     wrapText: ReturnType<typeof useMarkdownFormatting>["wrapText"];
 }
-export interface ToolbarAction {
+export interface MdInputToolbarAction {
     icon?: React.ReactNode;
     id: string;
     label?: string;
 }
-export interface ToolbarProps {
+export interface MdInputToolbarProps {
     afterElement?: React.ReactNode;
     beforeElement?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    groups?: ToolbarAction[][];
+    groups?: MdInputToolbarAction[][];
     i18n?: {
         bold: string;
         code: string;

package/dist/components/md-render/dist/index.d.ts

@@ -32,7 +32,4 @@ interface MentionRenderProps {
 
 declare const MdRender: react.MemoExoticComponent<react.ForwardRefExoticComponent<MdRenderProps & react.RefAttributes<HTMLDivElement>>>;
 
-declare const MD_BLOCK_DEFAULT_ALLOWED_IMAGE_PREFIXES: string[];
-declare const MD_BLOCK_DEFAULT_ALLOWED_LINK_PREFIXES: string[];
-
-export { MD_BLOCK_DEFAULT_ALLOWED_IMAGE_PREFIXES, MD_BLOCK_DEFAULT_ALLOWED_LINK_PREFIXES, MdRender, type MdRenderProps, type MentionRenderProps };
+export { MdRender, type MdRenderProps, type MentionRenderProps };