devnonla-ui 0.2.0 → 0.4.0

package/src/index.ts

@@ -1,228 +1,199 @@
-export { App, useApp, useAppConfig, usePopupContainer, useToken } from "./app/App";
 export type { AppProps, NonlaAppConfig } from "./app/App";
-
+export { App, useApp, useAppConfig, usePopupContainer, useToken } from "./app/App";
+export type { ButtonColor, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant } from "./button/Button";
 export { Button } from "./button/Button";
-export type { ButtonProps, ButtonGroupProps, ButtonType, ButtonSize, ButtonColor, ButtonVariant } from "./button/Button";
-export { ButtonCopy } from "./button/ButtonCopy";
 export type { ButtonCopyProps } from "./button/ButtonCopy";
-
-export { Input, TextArea, InputNumber } from "./input/Input";
-export type { InputProps, TextAreaProps, InputNumberProps, InputSize, TextAreaRef, PasswordProps } from "./input/Input";
-export { SearchInput } from "./input/SearchInput";
+export { ButtonCopy } from "./button/ButtonCopy";
+export type { InputNumberProps, InputProps, InputSize, PasswordProps, TextAreaProps, TextAreaRef } from "./input/Input";
+export { Input, InputNumber, TextArea } from "./input/Input";
 export type { SearchInputProps } from "./input/SearchInput";
+export { SearchInput } from "./input/SearchInput";
 /** Native input element ref. */
 export type InputRef = HTMLInputElement;
 
-export { Select, SelectOption } from "./select/Select";
-export type { SelectProps, SelectOptionConfig, SelectValue } from "./select/Select";
-
-export { Switch } from "./switch/Switch";
-export type { SwitchProps, SwitchVariant } from "./switch/Switch";
-
-export { Checkbox } from "./checkbox/Checkbox";
-export type { CheckboxProps } from "./checkbox/Checkbox";
-
-export { ColorPicker } from "./colorpicker/ColorPicker";
-export type { ColorPickerProps } from "./colorpicker/ColorPicker";
-
-export { Tooltip } from "./tooltip/Tooltip";
-export type { TooltipProps, TooltipPlacement } from "./tooltip/Tooltip";
-
-export { Modal } from "./modal/Modal";
-export type { ModalProps, ModalConfirmProps } from "./modal/Modal";
-
-export { message } from "./message/message";
-export type { MessageType, MessageConfig } from "./message/message";
-
-export {
-  SchemaForm,
-  FormSchema,
-  FormItem,
-  EFormItemType,
-  hydrateRules,
-  fieldNameOf,
-  isRuleRequired,
-} from "./form";
-export type {
-  SchemaFormProps,
-  FormItemProps,
-  FormFetcher,
-  TForm,
-  TFormItemProps,
-  TFormRule,
-  TRuleValueMessage,
-  ISelectItemProps,
-  IFormItemHelpProps,
-} from "./form";
-
-/** Layout-only Form + Form.Item for labeled fields. */
-export { Form } from "./form-layout/FormLayout";
-export type { FormLayoutProps, FormLayoutItemProps } from "./form-layout/FormLayout";
-
-export { Alert } from "./alert/Alert";
 export type { AlertProps, AlertType } from "./alert/Alert";
-
-export { Popover } from "./popover/Popover";
-export type { PopoverProps } from "./popover/Popover";
-
-export { Dropdown } from "./dropdown/Dropdown";
-export type { DropdownProps, MenuItemType, MenuProps } from "./dropdown/Dropdown";
-
-export { ContextMenu } from "./dropdown/ContextMenu";
-export type { ContextMenuProps } from "./dropdown/ContextMenu";
-
-export { Popconfirm } from "./popconfirm/Popconfirm";
-export type { PopconfirmProps } from "./popconfirm/Popconfirm";
-
-export { Drawer } from "./drawer/Drawer";
-export type { DrawerProps, DrawerPlacement } from "./drawer/Drawer";
-
-export { Table } from "./table/Table";
-export type {
-  TableProps,
-  ColumnType,
-  ColumnsType,
-  TablePaginationConfig,
-  TableRowSelection,
-  SortOrder,
-} from "./table/Table";
-
-export { Tag } from "./tag/Tag";
-export type { TagProps, TagVariant } from "./tag/Tag";
-
-export { Pagination } from "./pagination/Pagination";
-export type { PaginationProps, PaginationItemType } from "./pagination/Pagination";
-
-export { Empty } from "./empty/Empty";
-export type { EmptyProps } from "./empty/Empty";
-
-export { Spin } from "./spin/Spin";
-export type { SpinProps, SpinVariant } from "./spin/Spin";
-
-export { Skeleton } from "./skeleton/Skeleton";
-export type { SkeletonProps } from "./skeleton/Skeleton";
-
-export { Shimmer } from "./shimmer/Shimmer";
-export type { ShimmerProps } from "./shimmer/Shimmer";
-
-export { Segmented } from "./segmented/Segmented";
-export type { SegmentedProps, SegmentedOption } from "./segmented/Segmented";
-
-export { DatePicker, RangePicker } from "./datepicker/DatePicker";
-export type { DatePickerProps, RangePickerProps, RangeValue } from "./datepicker/DatePicker";
-
-export { TimePicker } from "./timepicker/TimePicker";
-export type { TimePickerProps, TimeValue } from "./timepicker/TimePicker";
-
-export { Calendar } from "./calendar/Calendar";
+export { Alert } from "./alert/Alert";
 export type { CalendarProps } from "./calendar/Calendar";
-
-export { CodeBlock, CodeBlockCopyButton } from "./codeblock/CodeBlock";
-export type { CodeBlockProps, CodeBlockCopyButtonProps } from "./codeblock/CodeBlock";
-
-export { OverlayScroll } from "./scroll/OverlayScroll";
-export type { OverlayScrollProps, OverlayScrollVisibility } from "./scroll/OverlayScroll";
-
+export { Calendar } from "./calendar/Calendar";
+export type {
+  AgentHistoryMessage,
+  AgentMessage,
+  AgentMessageRole,
+  AgentPanelEndpoint,
+  AgentPanelProps,
+  AgentStreamRequest,
+  AgentToolAction,
+  AgentToolCallEvent,
+  AgentToolHook,
+  AgentToolNameMatch,
+  AgentToolResultEvent,
+  AgentToolUI,
+  AgentToolUIName,
+  BackgroundTasksBarProps,
+  ChatAgentMessageProps,
+  ChatBgTask,
+  ChatErrorProps,
+  ChatInputProps,
+  ChatMarkdownProps,
+  ChatMarkdownStreamState,
+  ChatThinkingProps,
+  ChatToolCallProps,
+  ChatToolMessage,
+  ChatUserMessageProps,
+  ChatWelcomeProps,
+  MermaidBlockProps,
+  ToolUIProps,
+} from "./chat";
 export {
-  ChatThinking,
-  ChatUserMessage,
+  AgentPanel,
+  BackgroundTasksBar,
+  BackgroundTaskToolUI,
+  buildAgentHistory,
+  builtinToolUis,
+  CallAgentToolUI,
   ChatAgentMessage,
   ChatError,
-  ChatToolCall,
   ChatInput,
-  ChatWelcome,
-  ChatSpinner,
   ChatMarkdown,
-  createChatMarkdownComponents,
-  chatMarkdownComponents,
-  chatMarkdownClass,
+  ChatSpinner,
+  ChatThinking,
+  ChatToolCall,
+  ChatUserMessage,
+  ChatWelcome,
   chatBodyClass,
-  MermaidBlock,
-  AgentPanel,
-  useAgentStream,
-  buildAgentHistory,
-  parseSseStream,
+  chatMarkdownClass,
+  chatMarkdownComponents,
+  createChatMarkdownComponents,
+  formatBgElapsed,
   formatToolName,
-  prettyJson,
+  GetCurrentTimeToolUI,
   isCallAgentToolName,
-  parseCallAgentToolTargetId,
-  matchesToolName,
+  isToolRunning,
+  MermaidBlock,
   matchesToolHook,
-  parseBgTaskRef,
-  formatBgElapsed,
-  resolveToolUI,
-  builtinToolUis,
+  matchesToolName,
   matchesToolUIName,
-  isToolRunning,
-  CallAgentToolUI,
-  WebFetchToolUI,
-  GetCurrentTimeToolUI,
+  parseBgTaskRef,
+  parseCallAgentToolTargetId,
+  parseSseStream,
+  prettyJson,
   ReadSkillToolUI,
   RunJsToolUI,
-  BackgroundTaskToolUI,
-  BackgroundTasksBar,
+  resolveToolUI,
   ToolUiTrailing,
+  useAgentStream,
+  WebFetchToolUI,
 } from "./chat";
-export type {
-  ChatThinkingProps,
-  ChatUserMessageProps,
-  ChatAgentMessageProps,
-  ChatErrorProps,
-  ChatToolCallProps,
-  ChatInputProps,
-  ChatWelcomeProps,
-  ChatMarkdownProps,
-  ChatMarkdownStreamState,
-  MermaidBlockProps,
-  AgentPanelProps,
-  AgentMessage,
-  AgentMessageRole,
-  AgentHistoryMessage,
-  AgentStreamRequest,
-  AgentPanelEndpoint,
-  AgentToolAction,
-  AgentToolHook,
-  AgentToolCallEvent,
-  AgentToolResultEvent,
-  AgentToolNameMatch,
-  ToolUIProps,
-  ChatToolMessage,
-  AgentToolUI,
-  AgentToolUIName,
-  ChatBgTask,
-  BackgroundTasksBarProps,
-} from "./chat";
-
-export { cn } from "./lib/cn";
-export { glassSurfaceClass, glassOverlayClass, meadowSurfaceClass } from "./lib/surface";
-export { CONTROL_SIZES, normalizeSize, getSizeTokens, controlHeightVar, controlRadiusVar, controlStatusClass, useControlSize } from "./lib/sizes";
-export type { ControlSize, CanonicalSize, ControlSizeTokens } from "./lib/sizes";
-export { placementToRadix } from "./lib/placement";
-export type { PopperPlacement } from "./lib/placement";
-export { NONLA_THEME_KNOBS, NONLA_THEME_KEYS, applyNonlaTheme, getDesignToken } from "./theme";
-export type { NonlaThemeKnob, NonlaThemeKnobName, NonlaThemeColorName, NonlaThemeColors, NonlaThemeConfig, NonlaTokenSnapshot } from "./theme";
+export type { CheckboxProps } from "./checkbox/Checkbox";
+export { Checkbox } from "./checkbox/Checkbox";
+export type { CodeBlockCopyButtonProps, CodeBlockProps } from "./codeblock/CodeBlock";
+export { CodeBlock, CodeBlockCopyButton } from "./codeblock/CodeBlock";
+export type { ColorFormat, ColorPickerProps, ColorPickerSemanticSlot, ColorType, PresetColorType } from "./colorpicker/ColorPicker";
+export { Color, ColorPicker } from "./colorpicker/ColorPicker";
+export type { DatePickerProps, RangePickerProps, RangeValue } from "./datepicker/DatePicker";
+export { DatePicker, RangePicker } from "./datepicker/DatePicker";
+export type { DesktopHeaderProps } from "./desktop/DesktopHeader";
+export { DesktopBarButton, DesktopBarDivider, DesktopBarItem, DesktopHeader } from "./desktop/DesktopHeader";
+export { DesktopIcon } from "./desktop/DesktopIcon";
+export { DesktopStage } from "./desktop/DesktopStage";
+export type { DesktopWindowProps, WindowHeaderProps } from "./desktop/DesktopWindow";
+export { DesktopWindow, WindowHeader } from "./desktop/DesktopWindow";
+export { MeadowDesktop } from "./desktop/MeadowDesktop";
+export { MeadowShell } from "./desktop/MeadowShell";
+export { MeadowWallpaper } from "./desktop/MeadowWallpaper";
+export type { DrawerPlacement, DrawerProps } from "./drawer/Drawer";
+export { Drawer } from "./drawer/Drawer";
+export type { ContextMenuProps } from "./dropdown/ContextMenu";
 
+export { ContextMenu } from "./dropdown/ContextMenu";
+export type { DropdownProps, MenuItemType, MenuProps } from "./dropdown/Dropdown";
+export { Dropdown } from "./dropdown/Dropdown";
+export type { EmptyProps } from "./empty/Empty";
+export { Empty } from "./empty/Empty";
+export type {
+  FormFetcher,
+  FormItemProps,
+  IFormItemHelpProps,
+  ISelectItemProps,
+  SchemaFormProps,
+  TForm,
+  TFormItemProps,
+  TFormRule,
+  TRuleValueMessage,
+} from "./form";
+export {
+  EFormItemType,
+  FormItem,
+  FormSchema,
+  fieldNameOf,
+  hydrateRules,
+  isRuleRequired,
+  SchemaForm,
+} from "./form";
+export type { FormLayoutItemProps, FormLayoutProps } from "./form-layout/FormLayout";
+/** Layout-only Form + Form.Item for labeled fields. */
+export { Form } from "./form-layout/FormLayout";
 export { FluentIcon } from "./icon/FluentIcon";
 export {
-  ICON_PREFIX,
   DEFAULT_ICON_NAME,
   DEFAULT_TOOL_ICON,
   ensureFluentIcons,
-  getIconNames,
-  getFluentImgSrc,
-  isSvgIcon,
-  isFluentIcon,
   fluentIconName,
   fluentIconRef,
+  getFluentImgSrc,
+  getIconNames,
+  ICON_PREFIX,
+  isFluentIcon,
+  isSvgIcon,
 } from "./icon/fluent";
-
-export { DesktopStage } from "./desktop/DesktopStage";
-export { MeadowWallpaper } from "./desktop/MeadowWallpaper";
-export { MeadowDesktop } from "./desktop/MeadowDesktop";
-export { MeadowShell } from "./desktop/MeadowShell";
-export { DesktopHeader, DesktopBarButton, DesktopBarItem, DesktopBarDivider } from "./desktop/DesktopHeader";
-export { DesktopIcon } from "./desktop/DesktopIcon";
-export { DesktopWindow, WindowHeader } from "./desktop/DesktopWindow";
-
-export { Menu, MenuTrigger, MenuItem, MenuAction, MenuDivider } from "./menu/Menu";
-export type { MenuRootProps, MenuTriggerProps, MenuItemProps } from "./menu/Menu";
+export { cn } from "./lib/cn";
+export type { PopperPlacement } from "./lib/placement";
+export { placementToRadix } from "./lib/placement";
+export type { CanonicalSize, ControlSize, ControlSizeTokens } from "./lib/sizes";
+export { CONTROL_SIZES, controlHeightVar, controlRadiusVar, controlStatusClass, getSizeTokens, normalizeSize, useControlSize } from "./lib/sizes";
+export { glassOverlayClass, glassSurfaceClass, meadowSurfaceClass } from "./lib/surface";
+export type { MenuItemProps, MenuRootProps, MenuTriggerProps } from "./menu/Menu";
+export { Menu, MenuAction, MenuDivider, MenuItem, MenuTrigger } from "./menu/Menu";
+export type { MessageConfig, MessageType } from "./message/message";
+export { message } from "./message/message";
+export type { ModalConfirmProps, ModalProps } from "./modal/Modal";
+export { Modal } from "./modal/Modal";
+export type { PaginationAlign, PaginationItemType, PaginationProps, PaginationSemanticSlot, PaginationSizeChangerProps } from "./pagination/Pagination";
+export { Pagination } from "./pagination/Pagination";
+export type { PopconfirmProps } from "./popconfirm/Popconfirm";
+export { Popconfirm } from "./popconfirm/Popconfirm";
+export type { PopoverProps } from "./popover/Popover";
+export { Popover } from "./popover/Popover";
+export type { OverlayScrollProps, OverlayScrollVisibility } from "./scroll/OverlayScroll";
+export { OverlayScroll } from "./scroll/OverlayScroll";
+export type { SegmentedOption, SegmentedProps } from "./segmented/Segmented";
+export { Segmented } from "./segmented/Segmented";
+export type { SelectOptionConfig, SelectProps, SelectValue } from "./select/Select";
+export { Select, SelectOption } from "./select/Select";
+export type { ShimmerProps } from "./shimmer/Shimmer";
+export { Shimmer } from "./shimmer/Shimmer";
+export type { SkeletonProps } from "./skeleton/Skeleton";
+export { Skeleton } from "./skeleton/Skeleton";
+export type { SpinProps, SpinVariant } from "./spin/Spin";
+export { Spin } from "./spin/Spin";
+export type { SplitterOrientation, SplitterPanelProps, SplitterProps, SplitterSemanticSlot, SplitterSize } from "./splitter/Splitter";
+export { Splitter, SplitterPanel } from "./splitter/Splitter";
+export type { SwitchProps, SwitchVariant } from "./switch/Switch";
+export { Switch } from "./switch/Switch";
+export type {
+  ColumnsType,
+  ColumnType,
+  SortOrder,
+  TablePaginationConfig,
+  TableProps,
+  TableRowSelection,
+} from "./table/Table";
+export { Table } from "./table/Table";
+export type { TagProps, TagVariant } from "./tag/Tag";
+export { Tag } from "./tag/Tag";
+export type { NonlaThemeColorName, NonlaThemeColors, NonlaThemeConfig, NonlaThemeKnob, NonlaThemeKnobName, NonlaTokenSnapshot } from "./theme";
+export { applyNonlaTheme, getDesignToken, NONLA_THEME_KEYS, NONLA_THEME_KNOBS } from "./theme";
+export type { TimePickerProps, TimeValue } from "./timepicker/TimePicker";
+export { TimePicker } from "./timepicker/TimePicker";
+export type { TooltipPlacement, TooltipProps } from "./tooltip/Tooltip";
+export { Tooltip } from "./tooltip/Tooltip";

package/src/input/Input.tsx

@@ -1,4 +1,4 @@
-import { type CSSProperties, type InputHTMLAttributes, type KeyboardEvent, type ReactNode, type TextareaHTMLAttributes, forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { type CSSProperties, forwardRef, type InputHTMLAttributes, type KeyboardEvent, type ReactNode, type TextareaHTMLAttributes, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlHeightVar, controlRadiusVar, controlStatusClass, getSizeTokens, useControlSize } from "../lib/sizes";
 
@@ -160,9 +160,9 @@ function roundTo(n: number, precision?: number) {
   return Math.round(n * f) / f;
 }
 
-function HandlerChevron({ dir }: { dir: "up" | "down" }) {
+function HandlerChevron({ dir, size }: { dir: "up" | "down"; size: number }) {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden className="opacity-70">
+    <svg width={size} height={size} viewBox="0 0 10 10" fill="none" aria-hidden className="opacity-70">
       {dir === "up" ? <path d="M2.5 6.25L5 3.75L7.5 6.25" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /> : <path d="M2.5 3.75L5 6.25L7.5 3.75" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />}
     </svg>
   );
@@ -216,7 +216,8 @@ const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function Inpu
 
   const atMin = numeric != null && min != null && numeric <= min;
   const atMax = numeric != null && max != null && numeric >= max;
-  const handlerW = resolvedSize === "small" ? 18 : 22;
+  const handlerW = resolvedSize === "small" ? 18 : resolvedSize === "large" ? 26 : 22;
+  const chevronSize = Math.max(8, tok.icon - 4);
 
   const setRefs = (node: HTMLInputElement | null) => {
     inputRef.current = node;
@@ -302,7 +303,7 @@ const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function Inpu
             onMouseDown={(e) => e.preventDefault()}
             onClick={() => stepBy(1)}
           >
-            <HandlerChevron dir="up" />
+            <HandlerChevron dir="up" size={chevronSize} />
           </button>
           <button
             type="button"
@@ -313,7 +314,7 @@ const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(function Inpu
             onMouseDown={(e) => e.preventDefault()}
             onClick={() => stepBy(-1)}
           >
-            <HandlerChevron dir="down" />
+            <HandlerChevron dir="down" size={chevronSize} />
           </button>
         </div>
       ) : null}
@@ -325,9 +326,9 @@ export type PasswordProps = InputProps & {
   visibilityToggle?: boolean | { visible?: boolean; onVisibleChange?: (visible: boolean) => void };
 };
 
-function EyeIcon({ off }: { off?: boolean }) {
+function EyeIcon({ off, size }: { off?: boolean; size: number }) {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden>
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
       <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z" stroke="currentColor" strokeWidth="1.75" />
       <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.75" />
       {off ? <path d="M4 4L20 20" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" /> : null}
@@ -335,12 +336,13 @@ function EyeIcon({ off }: { off?: boolean }) {
   );
 }
 
-const Password = forwardRef<HTMLInputElement, PasswordProps>(function Password({ visibilityToggle = true, suffix, ...props }, ref) {
+const Password = forwardRef<HTMLInputElement, PasswordProps>(function Password({ visibilityToggle = true, suffix, size, ...props }, ref) {
   const toggle = visibilityToggle;
   const enabled = toggle !== false;
   const controlled = typeof toggle === "object" && toggle.visible !== undefined;
   const [inner, setInner] = useState(false);
   const visible = enabled && (controlled ? Boolean((toggle as { visible?: boolean }).visible) : inner);
+  const iconSize = getSizeTokens(useControlSize(size)).icon;
 
   const setVisible = (v: boolean) => {
     if (!controlled) setInner(v);
@@ -349,7 +351,7 @@ const Password = forwardRef<HTMLInputElement, PasswordProps>(function Password({
 
   const eye = enabled ? (
     <button type="button" tabIndex={-1} aria-label={visible ? "Hide password" : "Show password"} className="inline-flex items-center text-muted-foreground hover:text-foreground" onClick={() => setVisible(!visible)}>
-      <EyeIcon off={!visible} />
+      <EyeIcon size={iconSize} off={!visible} />
     </button>
   ) : null;
 
@@ -361,7 +363,7 @@ const Password = forwardRef<HTMLInputElement, PasswordProps>(function Password({
       </>
     ) : undefined;
 
-  return <InputRoot ref={ref} type={visible ? "text" : "password"} suffix={mergedSuffix} {...props} />;
+  return <InputRoot ref={ref} type={visible ? "text" : "password"} size={size} suffix={mergedSuffix} {...props} />;
 });
 
 export const Input = Object.assign(InputRoot, {
@@ -369,4 +371,4 @@ export const Input = Object.assign(InputRoot, {
   Password,
 });
 
-export { TextArea, InputNumber };
+export { InputNumber, TextArea };

package/src/input/SearchInput.tsx

@@ -1,4 +1,5 @@
 import { type ChangeEvent, useEffect, useRef, useState } from "react";
+import { getSizeTokens, useControlSize } from "../lib/sizes";
 import { Input, type InputProps } from "./Input";
 
 const DEFAULT_WAIT = 300;
@@ -20,8 +21,9 @@ function SearchIcon({ size = 14 }: { size?: number }) {
   );
 }
 
-export function SearchInput({ defaultValue = "", onChange, wait = DEFAULT_WAIT, allowClear = true, className, placeholder = "Search…", onPressEnter, ...rest }: SearchInputProps) {
+export function SearchInput({ defaultValue = "", onChange, wait = DEFAULT_WAIT, allowClear = true, className, placeholder = "Search…", onPressEnter, size, ...rest }: SearchInputProps) {
   const [value, setValue] = useState(defaultValue);
+  const iconSize = getSizeTokens(useControlSize(size)).icon;
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -63,7 +65,8 @@ export function SearchInput({ defaultValue = "", onChange, wait = DEFAULT_WAIT,
       placeholder={placeholder}
       value={value}
       onChange={handleChange}
-      prefix={<SearchIcon />}
+      prefix={<SearchIcon size={iconSize} />}
+      size={size}
       onPressEnter={(e) => {
         flush(value);
         onPressEnter?.(e);

package/src/lib/sizes.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, type CSSProperties } from "react";
+import { type CSSProperties, createContext, useContext } from "react";
 
 /**
  * Canonical control sizes for NonlaUI.

package/src/modal/Modal.tsx

@@ -177,6 +177,9 @@ function ModalView({
             data-centered={centered ? "true" : undefined}
             style={{ width, ...style, ...styles?.container, ...styles?.content }}
             onAnimationEnd={onContentAnimationEnd}
+            onEscapeKeyDown={(e) => {
+              e.stopPropagation();
+            }}
             onPointerDownOutside={(e) => {
               if (!maskClosable) e.preventDefault();
             }}