@lobehub/ui 5.51.1 → 5.52.0

package/es/base-ui/DropdownMenu/renderItems.d.mts

@@ -1,5 +1,4 @@
 import { IconAlign, IconSpaceMode, RenderOptions } from "../../Menu/renderUtils.mjs";
-import "../../Menu/index.mjs";
 import { DropdownItem } from "./type.mjs";
 import { ReactNode } from "react";
 //#region src/base-ui/DropdownMenu/renderItems.d.ts

package/es/base-ui/DropdownMenu/renderItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderItems.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport { type MenuInfo } from 'rc-menu/es/interface';\nimport {\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\n\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport {\n  type BaseMenuItemGroupType,\n  type BaseSubMenuType,\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  type MenuDividerType,\n  type MenuItemType,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/Menu';\n\nimport {\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuFooter,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuHeader,\n  DropdownMenuItem,\n  DropdownMenuItemContent,\n  DropdownMenuItemDesc,\n  DropdownMenuItemExtra,\n  DropdownMenuItemIcon,\n  DropdownMenuItemLabel,\n  DropdownMenuItemLabelGroup,\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuScrollViewport,\n  DropdownMenuSeparator,\n  DropdownMenuSubmenuArrow,\n  DropdownMenuSubmenuRoot,\n  DropdownMenuSubmenuTrigger,\n  DropdownMenuSwitchItem,\n} from './atoms';\nimport { styles } from './sharedStyle';\nimport {\n  type DropdownItem,\n  type DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n  type DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu';\n\nconst renderItemContent = (\n  item: MenuItemType | BaseSubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\n  options?: RenderItemContentOptions,\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const desc = 'desc' in item ? item.desc : undefined;\n  const extra = 'extra' in item ? item.extra : undefined;\n  const indicatorOnRight = options?.indicatorOnRight;\n  const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n\n  const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  const labelNode = desc ? (\n    <DropdownMenuItemLabelGroup>\n      <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n      <DropdownMenuItemDesc>{desc}</DropdownMenuItemDesc>\n    </DropdownMenuItemLabelGroup>\n  ) : (\n    <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n  );\n\n  return (\n    <DropdownMenuItemContent className={alignStart ? styles.itemContentAlignStart : undefined}>\n      {shouldRenderIcon ? (\n        <DropdownMenuItemIcon\n          aria-hidden={!hasIcon}\n          className={alignStart ? styles.iconAlignStart : undefined}\n        >\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n        </DropdownMenuItemIcon>\n      ) : null}\n      {labelNode}\n      {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <DropdownMenuSubmenuArrow>\n          <SubmenuArrowIcon />\n        </DropdownMenuSubmenuArrow>\n      ) : null}\n    </DropdownMenuItemContent>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderDropdownMenuItems = (\n  items: DropdownItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconAlign = options?.iconAlign;\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as DropdownMenuCheckboxItemType).type === 'checkbox') {\n      const checkboxItem = item as DropdownMenuCheckboxItemType;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n      );\n\n      return (\n        <DropdownMenuCheckboxItemPrimitive\n          checked={checkboxItem.checked}\n          closeOnClick={checkboxItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(\n            checkboxItem,\n            { iconAlign, indicatorOnRight, reserveIconSpace },\n            indicator,\n          )}\n        </DropdownMenuCheckboxItemPrimitive>\n      );\n    }\n\n    if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n      const switchItem = item as DropdownMenuSwitchItemType;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <DropdownMenuSwitchItem\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => switchItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n        </DropdownMenuSwitchItem>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <DropdownMenuSeparator key={itemKey} />;\n    }\n\n    if ((item as BaseMenuItemGroupType).type === 'group') {\n      const group = item as BaseMenuItemGroupType;\n      const groupReserveIconSpace =\n        iconSpaceMode === 'group'\n          ? group.children\n            ? hasAnyIcon(group.children)\n            : false\n          : reserveIconSpace;\n      const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n      return (\n        <DropdownMenuGroup key={itemKey}>\n          {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n          {group.children\n            ? renderDropdownMenuItems(group.children, nextKeyPath, {\n                iconAlign,\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </DropdownMenuGroup>\n      );\n    }\n\n    if ((item as BaseSubMenuType).type === 'submenu' || 'children' in item) {\n      const submenu = item as BaseSubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n      const submenuHasSlots = submenu.header != null || submenu.footer != null;\n      const submenuItems = submenu.children\n        ? renderDropdownMenuItems(submenu.children, nextKeyPath, {\n            iconAlign,\n            iconSpaceMode,\n          })\n        : null;\n\n      return (\n        <DropdownMenuSubmenuRoot\n          defaultOpen={submenu.defaultOpen}\n          key={itemKey}\n          open={submenu.open}\n          onOpenChange={submenu.onOpenChange}\n        >\n          <DropdownMenuSubmenuTrigger\n            {...submenu.triggerProps}\n            closeDelay={submenu.closeDelay}\n            danger={isDanger}\n            delay={submenu.delay}\n            disabled={submenu.disabled}\n            label={labelText}\n            openOnHover={submenu.openOnHover}\n            onClick={submenu.onClick}\n          >\n            {renderItemContent(submenu, {\n              iconAlign,\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </DropdownMenuSubmenuTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n              <DropdownMenuPopup className={submenuHasSlots ? styles.popupWithSlots : undefined}>\n                {submenu.header == null ? null : (\n                  <DropdownMenuHeader>{submenu.header}</DropdownMenuHeader>\n                )}\n                {submenuHasSlots ? (\n                  <DropdownMenuScrollViewport>{submenuItems}</DropdownMenuScrollViewport>\n                ) : (\n                  submenuItems\n                )}\n                {submenu.footer == null ? null : (\n                  <DropdownMenuFooter>{submenu.footer}</DropdownMenuFooter>\n                )}\n              </DropdownMenuPopup>\n            </DropdownMenuPositioner>\n          </DropdownMenuPortal>\n        </DropdownMenuSubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <DropdownMenuItem\n        closeOnClick={menuItem.closeOnClick}\n        danger={isDanger}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n      </DropdownMenuItem>\n    );\n  });\n};\n"],"mappings":"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"}
+{"version":3,"file":"renderItems.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/renderItems.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport {\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\n\nimport { SubmenuArrowIcon } from '@/base-ui/SubmenuArrowIcon';\nimport type { BaseMenuItemGroupType, BaseSubMenuType } from '@/Menu/baseItem';\nimport {\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  renderIcon,\n  type RenderItemContentOptions,\n  type RenderOptions,\n} from '@/Menu/renderUtils';\nimport type { MenuDividerType, MenuInfo, MenuItemType } from '@/Menu/type';\n\nimport {\n  DropdownMenuCheckboxItemIndicator,\n  DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuFooter,\n  DropdownMenuGroup,\n  DropdownMenuGroupLabel,\n  DropdownMenuHeader,\n  DropdownMenuItem,\n  DropdownMenuItemContent,\n  DropdownMenuItemDesc,\n  DropdownMenuItemExtra,\n  DropdownMenuItemIcon,\n  DropdownMenuItemLabel,\n  DropdownMenuItemLabelGroup,\n  DropdownMenuPopup,\n  DropdownMenuPortal,\n  DropdownMenuPositioner,\n  DropdownMenuScrollViewport,\n  DropdownMenuSeparator,\n  DropdownMenuSubmenuArrow,\n  DropdownMenuSubmenuRoot,\n  DropdownMenuSubmenuTrigger,\n  DropdownMenuSwitchItem,\n} from './atoms';\nimport { styles } from './sharedStyle';\nimport {\n  type DropdownItem,\n  type DropdownMenuCheckboxItem as DropdownMenuCheckboxItemType,\n  type DropdownMenuSwitchItem as DropdownMenuSwitchItemType,\n} from './type';\n\nexport type { IconAlign, IconSpaceMode } from '@/Menu/renderUtils';\n\nconst renderItemContent = (\n  item: MenuItemType | BaseSubMenuType | DropdownMenuCheckboxItemType | DropdownMenuSwitchItemType,\n  options?: RenderItemContentOptions,\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const desc = 'desc' in item ? item.desc : undefined;\n  const extra = 'extra' in item ? item.extra : undefined;\n  const indicatorOnRight = options?.indicatorOnRight;\n  const alignStart = Boolean(desc) && options?.iconAlign === 'start';\n\n  const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  const labelNode = desc ? (\n    <DropdownMenuItemLabelGroup>\n      <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n      <DropdownMenuItemDesc>{desc}</DropdownMenuItemDesc>\n    </DropdownMenuItemLabelGroup>\n  ) : (\n    <DropdownMenuItemLabel>{label}</DropdownMenuItemLabel>\n  );\n\n  return (\n    <DropdownMenuItemContent className={alignStart ? styles.itemContentAlignStart : undefined}>\n      {shouldRenderIcon ? (\n        <DropdownMenuItemIcon\n          aria-hidden={!hasIcon}\n          className={alignStart ? styles.iconAlignStart : undefined}\n        >\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n        </DropdownMenuItemIcon>\n      ) : null}\n      {labelNode}\n      {extra ? <DropdownMenuItemExtra>{extra}</DropdownMenuItemExtra> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <DropdownMenuSubmenuArrow>\n          <SubmenuArrowIcon />\n        </DropdownMenuSubmenuArrow>\n      ) : null}\n    </DropdownMenuItemContent>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderDropdownMenuItems = (\n  items: DropdownItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconAlign = options?.iconAlign;\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as DropdownMenuCheckboxItemType).type === 'checkbox') {\n      const checkboxItem = item as DropdownMenuCheckboxItemType;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <DropdownMenuCheckboxItemIndicator>{renderIcon(Check)}</DropdownMenuCheckboxItemIndicator>\n      );\n\n      return (\n        <DropdownMenuCheckboxItemPrimitive\n          checked={checkboxItem.checked}\n          closeOnClick={checkboxItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(\n            checkboxItem,\n            { iconAlign, indicatorOnRight, reserveIconSpace },\n            indicator,\n          )}\n        </DropdownMenuCheckboxItemPrimitive>\n      );\n    }\n\n    if ((item as DropdownMenuSwitchItemType).type === 'switch') {\n      const switchItem = item as DropdownMenuSwitchItemType;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <DropdownMenuSwitchItem\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => switchItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(switchItem, { iconAlign, reserveIconSpace })}\n        </DropdownMenuSwitchItem>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <DropdownMenuSeparator key={itemKey} />;\n    }\n\n    if ((item as BaseMenuItemGroupType).type === 'group') {\n      const group = item as BaseMenuItemGroupType;\n      const groupReserveIconSpace =\n        iconSpaceMode === 'group'\n          ? group.children\n            ? hasAnyIcon(group.children)\n            : false\n          : reserveIconSpace;\n      const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n      return (\n        <DropdownMenuGroup key={itemKey}>\n          {group.label ? <DropdownMenuGroupLabel>{group.label}</DropdownMenuGroupLabel> : null}\n          {group.children\n            ? renderDropdownMenuItems(group.children, nextKeyPath, {\n                iconAlign,\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </DropdownMenuGroup>\n      );\n    }\n\n    if ((item as BaseSubMenuType).type === 'submenu' || 'children' in item) {\n      const submenu = item as BaseSubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n      const submenuHasSlots = submenu.header != null || submenu.footer != null;\n      const submenuItems = submenu.children\n        ? renderDropdownMenuItems(submenu.children, nextKeyPath, {\n            iconAlign,\n            iconSpaceMode,\n          })\n        : null;\n\n      return (\n        <DropdownMenuSubmenuRoot\n          defaultOpen={submenu.defaultOpen}\n          key={itemKey}\n          open={submenu.open}\n          onOpenChange={submenu.onOpenChange}\n        >\n          <DropdownMenuSubmenuTrigger\n            {...submenu.triggerProps}\n            closeDelay={submenu.closeDelay}\n            danger={isDanger}\n            delay={submenu.delay}\n            disabled={submenu.disabled}\n            label={labelText}\n            openOnHover={submenu.openOnHover}\n            onClick={submenu.onClick}\n          >\n            {renderItemContent(submenu, {\n              iconAlign,\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </DropdownMenuSubmenuTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuPositioner alignOffset={-4} data-submenu=\"\" sideOffset={-1}>\n              <DropdownMenuPopup className={submenuHasSlots ? styles.popupWithSlots : undefined}>\n                {submenu.header == null ? null : (\n                  <DropdownMenuHeader>{submenu.header}</DropdownMenuHeader>\n                )}\n                {submenuHasSlots ? (\n                  <DropdownMenuScrollViewport>{submenuItems}</DropdownMenuScrollViewport>\n                ) : (\n                  submenuItems\n                )}\n                {submenu.footer == null ? null : (\n                  <DropdownMenuFooter>{submenu.footer}</DropdownMenuFooter>\n                )}\n              </DropdownMenuPopup>\n            </DropdownMenuPositioner>\n          </DropdownMenuPortal>\n        </DropdownMenuSubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <DropdownMenuItem\n        closeOnClick={menuItem.closeOnClick}\n        danger={isDanger}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { iconAlign, reserveIconSpace })}\n      </DropdownMenuItem>\n    );\n  });\n};\n"],"mappings":"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"}

package/es/base-ui/Form/components/FormTitle.mjs

@@ -1,6 +1,6 @@
 "use client";
 import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
-import Tag from "../../../Tag/Tag.mjs";
+import Tag from "../../Tag/Tag.mjs";
 import { titleStyles } from "../style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";

package/es/base-ui/Form/components/FormTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormTitle.mjs","names":["Flexbox","styles"],"sources":["../../../../src/base-ui/Form/components/FormTitle.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Tag from '@/Tag';\n\nimport { titleStyles as styles } from '../style';\nimport type { FormTitleProps } from '../type';\n\nconst FormTitle: FC<FormTitleProps> = ({\n  tag,\n  title,\n  desc,\n  avatar,\n  classNames,\n  styles: customStyles,\n  tagProps,\n  ...rest\n}) => {\n  return (\n    <Flexbox horizontal align={'center'} gap={8} {...rest}>\n      {avatar}\n      <Flexbox\n        className={cx(styles.content, classNames?.content)}\n        gap={8}\n        style={customStyles?.content}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.title, classNames?.title)}\n          gap={8}\n          style={customStyles?.title}\n        >\n          {title}\n          {tag && (\n            <Tag className={classNames?.tag} style={customStyles?.tag} {...tagProps}>\n              {tag}\n            </Tag>\n          )}\n        </Flexbox>\n        {desc && (\n          <small className={cx(styles.desc, classNames?.desc)} style={customStyles?.desc}>\n            {desc}\n          </small>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nFormTitle.displayName = 'FormTitle';\n\nexport default FormTitle;\n"],"mappings":";;;;;;;AAWA,MAAM,aAAiC,EACrC,KACA,OACA,MACA,QACA,YACA,QAAQ,cACR,UACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAG,GAAI;EAAjD,UAAA,CACG,QACD,qBAACA,mBAAD;GACE,WAAW,GAAGC,YAAO,SAAS,YAAY,OAAO;GACjD,KAAK;GACL,OAAO,cAAc;GAHvB,UAAA,CAKE,qBAACD,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,GAAGC,YAAO,OAAO,YAAY,KAAK;IAC7C,KAAK;IACL,OAAO,cAAc;IALvB,UAAA,CAOG,OACA,OACC,oBAAC,KAAD;KAAK,WAAW,YAAY;KAAK,OAAO,cAAc;KAAK,GAAI;KAC5D,UAAA;IACE,CAAA,CAEA;GACR,CAAA,GAAA,QACC,oBAAC,SAAD;IAAO,WAAW,GAAGA,YAAO,MAAM,YAAY,IAAI;IAAG,OAAO,cAAc;IACvE,UAAA;GACI,CAAA,CAEF;EACF,CAAA,CAAA;;AAEb;AAEA,UAAU,cAAc"}
+{"version":3,"file":"FormTitle.mjs","names":["Flexbox","styles"],"sources":["../../../../src/base-ui/Form/components/FormTitle.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport Tag from '@/base-ui/Tag';\nimport { Flexbox } from '@/Flex';\n\nimport { titleStyles as styles } from '../style';\nimport type { FormTitleProps } from '../type';\n\nconst FormTitle: FC<FormTitleProps> = ({\n  tag,\n  title,\n  desc,\n  avatar,\n  classNames,\n  styles: customStyles,\n  tagProps,\n  ...rest\n}) => {\n  return (\n    <Flexbox horizontal align={'center'} gap={8} {...rest}>\n      {avatar}\n      <Flexbox\n        className={cx(styles.content, classNames?.content)}\n        gap={8}\n        style={customStyles?.content}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.title, classNames?.title)}\n          gap={8}\n          style={customStyles?.title}\n        >\n          {title}\n          {tag && (\n            <Tag className={classNames?.tag} style={customStyles?.tag} {...tagProps}>\n              {tag}\n            </Tag>\n          )}\n        </Flexbox>\n        {desc && (\n          <small className={cx(styles.desc, classNames?.desc)} style={customStyles?.desc}>\n            {desc}\n          </small>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nFormTitle.displayName = 'FormTitle';\n\nexport default FormTitle;\n"],"mappings":";;;;;;;AAWA,MAAM,aAAiC,EACrC,KACA,OACA,MACA,QACA,YACA,QAAQ,cACR,UACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAG,GAAI;EAAjD,UAAA,CACG,QACD,qBAACA,mBAAD;GACE,WAAW,GAAGC,YAAO,SAAS,YAAY,OAAO;GACjD,KAAK;GACL,OAAO,cAAc;GAHvB,UAAA,CAKE,qBAACD,mBAAD;IACE,YAAA;IACA,OAAO;IACP,WAAW,GAAGC,YAAO,OAAO,YAAY,KAAK;IAC7C,KAAK;IACL,OAAO,cAAc;IALvB,UAAA,CAOG,OACA,OACC,oBAAC,KAAD;KAAK,WAAW,YAAY;KAAK,OAAO,cAAc;KAAK,GAAI;KAC5D,UAAA;IACE,CAAA,CAEA;GACR,CAAA,GAAA,QACC,oBAAC,SAAD;IAAO,WAAW,GAAGA,YAAO,MAAM,YAAY,IAAI;IAAG,OAAO,cAAc;IACvE,UAAA;GACI,CAAA,CAEF;EACF,CAAA,CAAA;;AAEb;AAEA,UAAU,cAAc"}

package/es/base-ui/Form/type.d.mts

@@ -3,8 +3,8 @@ import "../../Flex/index.mjs";
 import { DivProps } from "../../types/index.mjs";
 import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
-import { TagProps } from "../../Tag/type.mjs";
-import "../../Tag/index.mjs";
+import { TagProps } from "../Tag/type.mjs";
+import "../Tag/index.mjs";
 import { ButtonProps } from "../Button/type.mjs";
 import "../Button/index.mjs";
 import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";

package/es/base-ui/Input/ClearButton.mjs

@@ -0,0 +1,32 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import common_default from "../../i18n/resources/en/common.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { X } from "lucide-react";
+//#region src/base-ui/Input/ClearButton.tsx
+const ClearButton = memo(({ className, onClear }) => {
+	const { t } = useTranslation(common_default);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": t("common.clear"),
+		className: cx(styles.clear, className),
+		"data-lobe-input-clear": "",
+		tabIndex: -1,
+		type: "button",
+		onClick: onClear,
+		onMouseDown: (event) => event.preventDefault(),
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: X,
+			size: 10,
+			style: { strokeWidth: 3 }
+		})
+	});
+});
+ClearButton.displayName = "InputClearButton";
+//#endregion
+export { ClearButton as default };
+
+//# sourceMappingURL=ClearButton.mjs.map

package/es/base-ui/Input/ClearButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearButton.mjs","names":["common"],"sources":["../../../src/base-ui/Input/ClearButton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { memo } from 'react';\n\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\n\ninterface ClearButtonProps {\n  className?: string;\n  onClear: () => void;\n}\n\nconst ClearButton = memo<ClearButtonProps>(({ className, onClear }) => {\n  const { t } = useTranslation(common);\n\n  return (\n    <button\n      aria-label={t('common.clear')}\n      className={cx(styles.clear, className)}\n      data-lobe-input-clear=\"\"\n      tabIndex={-1}\n      type=\"button\"\n      onClick={onClear}\n      onMouseDown={(event) => event.preventDefault()}\n    >\n      <Icon icon={X} size={10} style={{ strokeWidth: 3 }} />\n    </button>\n  );\n});\n\nClearButton.displayName = 'InputClearButton';\n\nexport default ClearButton;\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,cAAc,MAAwB,EAAE,WAAW,cAAc;CACrE,MAAM,EAAE,MAAM,eAAeA,cAAM;CAEnC,OACE,oBAAC,UAAD;EACE,cAAY,EAAE,cAAc;EAC5B,WAAW,GAAG,OAAO,OAAO,SAAS;EACrC,yBAAsB;EACtB,UAAU;EACV,MAAK;EACL,SAAS;EACT,cAAc,UAAU,MAAM,eAAe;EAE7C,UAAA,oBAAC,MAAD;GAAM,MAAM;GAAG,MAAM;GAAI,OAAO,EAAE,aAAa,EAAE;EAAI,CAAA;CAC/C,CAAA;AAEZ,CAAC;AAED,YAAY,cAAc"}

package/es/base-ui/Input/Input.mjs

@@ -1,17 +1,28 @@
 "use client";
 import { rootVariants, styles } from "./style.mjs";
-import { memo } from "react";
+import ClearButton from "./ClearButton.mjs";
+import { clearNativeValue } from "./clearNativeValue.mjs";
+import { isPressEnter } from "./pressEnter.mjs";
+import { memo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
+import { useMergeRefs } from "react-merge-refs";
 import { Input } from "@base-ui/react/input";
 //#region src/base-ui/Input/Input.tsx
-const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", prefix, suffix, disabled, ...rest }) => {
+const hasText = (value) => value !== void 0 && value !== null && String(value).length > 0;
+const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", prefix, suffix, disabled, readOnly, allowClear, onClear, onPressEnter, onKeyDown, onChange, value, defaultValue, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const inputRef = useRef(null);
+	const mergedRef = useMergeRefs([ref, inputRef]);
+	const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));
+	const isFilled = value === void 0 ? filled : hasText(value);
+	const showClear = allowClear && isFilled && !disabled && !readOnly;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx(rootVariants({
 			shadow,
 			size,
-			variant: variant || (isDarkMode ? "filled" : "outlined")
+			variant: mergedVariant
 		}), className),
 		"data-disabled": disabled ? "" : void 0,
 		style,
@@ -23,11 +34,26 @@ const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style,
 			}),
 			/* @__PURE__ */ jsx(Input, {
 				className: cx(styles.input, classNames?.input),
+				defaultValue,
 				disabled,
-				ref,
+				readOnly,
+				ref: mergedRef,
 				style: customStyles?.input,
+				value,
+				onChange: (event) => {
+					setFilled(event.currentTarget.value.length > 0);
+					onChange?.(event);
+				},
+				onKeyDown: (event) => {
+					if (isPressEnter(event)) onPressEnter?.(event);
+					onKeyDown?.(event);
+				},
 				...rest
 			}),
+			showClear && /* @__PURE__ */ jsx(ClearButton, { onClear: () => {
+				clearNativeValue(inputRef.current);
+				onClear?.();
+			} }),
 			suffix && /* @__PURE__ */ jsx("span", {
 				className: cx(styles.slot, classNames?.suffix),
 				style: customStyles?.suffix,

package/es/base-ui/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../../src/base-ui/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { rootVariants, styles } from './style';\nimport type { InputProps } from './type';\n\nconst Input = memo<InputProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    prefix,\n    suffix,\n    disabled,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    return (\n      <div\n        className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n        data-disabled={disabled ? '' : undefined}\n        style={style}\n      >\n        {prefix && (\n          <span className={cx(styles.slot, classNames?.prefix)} style={customStyles?.prefix}>\n            {prefix}\n          </span>\n        )}\n        <BaseInput\n          className={cx(styles.input, classNames?.input)}\n          disabled={disabled}\n          ref={ref}\n          style={customStyles?.input}\n          {...rest}\n        />\n        {suffix && (\n          <span className={cx(styles.slot, classNames?.suffix)} style={customStyles?.suffix}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AASA,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAGpC,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAJzB,YAAY,aAAa,WAAW;EAIY,CAAC,GAAG,SAAS;EAC/E,iBAAe,WAAW,KAAK,KAAA;EACxB;EAHT,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IACnC;IACL;IACL,OAAO,cAAc;IACrB,GAAI;GACL,CAAA;GACA,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc"}
+{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../../src/base-ui/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { InputProps } from './type';\n\nconst hasText = (value: unknown) =>\n  value !== undefined && value !== null && String(value).length > 0;\n\nconst Input = memo<InputProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    prefix,\n    suffix,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRefs([ref, inputRef]);\n    const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));\n    const isFilled = value === undefined ? filled : hasText(value);\n    const showClear = allowClear && isFilled && !disabled && !readOnly;\n\n    return (\n      <div\n        className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n        data-disabled={disabled ? '' : undefined}\n        style={style}\n      >\n        {prefix && (\n          <span className={cx(styles.slot, classNames?.prefix)} style={customStyles?.prefix}>\n            {prefix}\n          </span>\n        )}\n        <BaseInput\n          className={cx(styles.input, classNames?.input)}\n          defaultValue={defaultValue}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={mergedRef}\n          style={customStyles?.input}\n          value={value}\n          onChange={(event) => {\n            setFilled(event.currentTarget.value.length > 0);\n            onChange?.(event);\n          }}\n          onKeyDown={(event) => {\n            if (isPressEnter(event)) onPressEnter?.(event);\n            onKeyDown?.(event);\n          }}\n          {...rest}\n        />\n        {showClear && (\n          <ClearButton\n            onClear={() => {\n              clearNativeValue(inputRef.current);\n              onClear?.();\n            }}\n          />\n        )}\n        {suffix && (\n          <span className={cx(styles.slot, classNames?.suffix)} style={customStyles?.suffix}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,KAAK,CAAC,CAAC,SAAS;AAElE,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,UACA,YACA,SACA,cACA,WACA,UACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,CAAC;CAC9C,MAAM,CAAC,QAAQ,aAAa,eAAe,QAAQ,SAAS,YAAY,CAAC;CACzE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,QAAQ,KAAK;CAC7D,MAAM,YAAY,cAAc,YAAY,CAAC,YAAY,CAAC;CAE1D,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,SAAS;EAC/E,iBAAe,WAAW,KAAK,KAAA;EACxB;EAHT,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IAC/B;IACJ;IACA;IACV,KAAK;IACL,OAAO,cAAc;IACd;IACP,WAAW,UAAU;KACnB,UAAU,MAAM,cAAc,MAAM,SAAS,CAAC;KAC9C,WAAW,KAAK;IAClB;IACA,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;KAC7C,YAAY,KAAK;IACnB;IACA,GAAI;GACL,CAAA;GACA,aACC,oBAAC,aAAD,EACE,eAAe;IACb,iBAAiB,SAAS,OAAO;IACjC,UAAU;GACZ,EACD,CAAA;GAEF,UACC,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM;IAAG,OAAO,cAAc;IACxE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc"}

package/es/base-ui/Input/InputNumber.mjs

@@ -1,15 +1,21 @@
 "use client";
 import Icon from "../../Icon/Icon.mjs";
 import { rootVariants, styles } from "./style.mjs";
+import { isPressEnter } from "./pressEnter.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { NumberField } from "@base-ui/react/number-field";
 //#region src/base-ui/Input/InputNumber.tsx
-const InputNumber = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", controls = true, changeOnWheel, onChange, placeholder, ...rest }) => {
+const InputNumber = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", controls = true, changeOnWheel, onChange, placeholder, format, precision, prefix, suffix, onPressEnter, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
 	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const mergedFormat = precision === void 0 ? format : {
+		...format,
+		maximumFractionDigits: precision,
+		minimumFractionDigits: precision
+	};
 	return /* @__PURE__ */ jsxs(NumberField.Root, {
 		allowWheelScrub: changeOnWheel,
 		className: cx(rootVariants({
@@ -17,30 +23,45 @@ const InputNumber = memo(({ ref, className, classNames, styles: customStyles, st
 			size,
 			variant: mergedVariant
 		}), className),
+		format: mergedFormat,
 		style,
 		onValueChange: onChange,
 		...rest,
-		children: [/* @__PURE__ */ jsx(NumberField.Input, {
-			className: cx(styles.input, styles.numberInput, classNames?.input),
-			placeholder,
-			ref,
-			style: customStyles?.input
-		}), controls && /* @__PURE__ */ jsxs("div", {
-			className: styles.numberControls,
-			children: [/* @__PURE__ */ jsx(NumberField.Increment, {
-				className: styles.numberControl,
-				children: /* @__PURE__ */ jsx(Icon, {
-					icon: ChevronUp,
-					size: 12
-				})
-			}), /* @__PURE__ */ jsx(NumberField.Decrement, {
-				className: styles.numberControl,
-				children: /* @__PURE__ */ jsx(Icon, {
-					icon: ChevronDown,
-					size: 12
-				})
-			})]
-		})]
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				className: styles.slot,
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx(NumberField.Input, {
+				className: cx(styles.input, styles.numberInput, classNames?.input),
+				placeholder,
+				ref,
+				style: customStyles?.input,
+				onKeyDown: (event) => {
+					if (isPressEnter(event)) onPressEnter?.(event);
+				}
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: styles.slot,
+				children: suffix
+			}),
+			controls && /* @__PURE__ */ jsxs("div", {
+				className: styles.numberControls,
+				children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+					className: styles.numberControl,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: ChevronUp,
+						size: 12
+					})
+				}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+					className: styles.numberControl,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: ChevronDown,
+						size: 12
+					})
+				})]
+			})
+		]
 	});
 });
 InputNumber.displayName = "InputNumber";

package/es/base-ui/Input/InputNumber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.mjs","names":[],"sources":["../../../src/base-ui/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@base-ui/react/number-field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { rootVariants, styles } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    controls = true,\n    changeOnWheel,\n    onChange,\n    placeholder,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    return (\n      <NumberField.Root\n        allowWheelScrub={changeOnWheel}\n        className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n        style={style}\n        onValueChange={onChange}\n        {...rest}\n      >\n        <NumberField.Input\n          className={cx(styles.input, styles.numberInput, classNames?.input)}\n          placeholder={placeholder}\n          ref={ref}\n          style={customStyles?.input}\n        />\n        {controls && (\n          <div className={styles.numberControls}>\n            <NumberField.Increment className={styles.numberControl}>\n              <Icon icon={ChevronUp} size={12} />\n            </NumberField.Increment>\n            <NumberField.Decrement className={styles.numberControl}>\n              <Icon icon={ChevronDown} size={12} />\n            </NumberField.Decrement>\n          </div>\n        )}\n      </NumberField.Root>\n    );\n  },\n);\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;;;AAYA,MAAM,cAAc,MACjB,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,WAAW,MACX,eACA,UACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,OACE,qBAAC,YAAY,MAAb;EACE,iBAAiB;EACjB,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,SAAS;EACxE;EACP,eAAe;EACf,GAAI;EALN,UAAA,CAOE,oBAAC,YAAY,OAAb;GACE,WAAW,GAAG,OAAO,OAAO,OAAO,aAAa,YAAY,KAAK;GACpD;GACR;GACL,OAAO,cAAc;EACtB,CAAA,GACA,YACC,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,YAAY,WAAb;IAAuB,WAAW,OAAO;IACvC,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAW,MAAM;IAAK,CAAA;GACb,CAAA,GACvB,oBAAC,YAAY,WAAb;IAAuB,WAAW,OAAO;IACvC,UAAA,oBAAC,MAAD;KAAM,MAAM;KAAa,MAAM;IAAK,CAAA;GACf,CAAA,CACpB;EAES,CAAA,CAAA;;AAEtB,CACF;AAEA,YAAY,cAAc"}
+{"version":3,"file":"InputNumber.mjs","names":[],"sources":["../../../src/base-ui/Input/InputNumber.tsx"],"sourcesContent":["'use client';\n\nimport { NumberField } from '@base-ui/react/number-field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { InputNumberProps } from './type';\n\nconst InputNumber = memo<InputNumberProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    controls = true,\n    changeOnWheel,\n    onChange,\n    placeholder,\n    format,\n    precision,\n    prefix,\n    suffix,\n    onPressEnter,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const mergedFormat =\n      precision === undefined\n        ? format\n        : { ...format, maximumFractionDigits: precision, minimumFractionDigits: precision };\n\n    return (\n      <NumberField.Root\n        allowWheelScrub={changeOnWheel}\n        className={cx(rootVariants({ shadow, size, variant: mergedVariant }), className)}\n        format={mergedFormat}\n        style={style}\n        onValueChange={onChange}\n        {...rest}\n      >\n        {prefix && <span className={styles.slot}>{prefix}</span>}\n        <NumberField.Input\n          className={cx(styles.input, styles.numberInput, classNames?.input)}\n          placeholder={placeholder}\n          ref={ref}\n          style={customStyles?.input}\n          onKeyDown={(event) => {\n            if (isPressEnter(event)) onPressEnter?.(event);\n          }}\n        />\n        {suffix && <span className={styles.slot}>{suffix}</span>}\n        {controls && (\n          <div className={styles.numberControls}>\n            <NumberField.Increment className={styles.numberControl}>\n              <Icon icon={ChevronUp} size={12} />\n            </NumberField.Increment>\n            <NumberField.Decrement className={styles.numberControl}>\n              <Icon icon={ChevronDown} size={12} />\n            </NumberField.Decrement>\n          </div>\n        )}\n      </NumberField.Root>\n    );\n  },\n);\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,cAAc,MACjB,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,WAAW,MACX,eACA,UACA,aACA,QACA,WACA,QACA,QACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,eACJ,cAAc,KAAA,IACV,SACA;EAAE,GAAG;EAAQ,uBAAuB;EAAW,uBAAuB;CAAU;CAEtF,OACE,qBAAC,YAAY,MAAb;EACE,iBAAiB;EACjB,WAAW,GAAG,aAAa;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,SAAS;EAC/E,QAAQ;EACD;EACP,eAAe;EACf,GAAI;EANN,UAAA;GAQG,UAAU,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,UAAA;GAAa,CAAA;GACvD,oBAAC,YAAY,OAAb;IACE,WAAW,GAAG,OAAO,OAAO,OAAO,aAAa,YAAY,KAAK;IACpD;IACR;IACL,OAAO,cAAc;IACrB,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;IAC/C;GACD,CAAA;GACA,UAAU,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,UAAA;GAAa,CAAA;GACtD,YACC,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACE,oBAAC,YAAY,WAAb;KAAuB,WAAW,OAAO;KACvC,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAW,MAAM;KAAK,CAAA;IACb,CAAA,GACvB,oBAAC,YAAY,WAAb;KAAuB,WAAW,OAAO;KACvC,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAa,MAAM;KAAK,CAAA;IACf,CAAA,CACpB;;EAES;;AAEtB,CACF;AAEA,YAAY,cAAc"}

package/es/base-ui/Input/TextArea.mjs

@@ -1,13 +1,24 @@
 "use client";
 import { rootVariants, styles } from "./style.mjs";
-import { memo, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import ClearButton from "./ClearButton.mjs";
+import { clearNativeValue } from "./clearNativeValue.mjs";
+import { isPressEnter } from "./pressEnter.mjs";
+import { memo, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
+import { useMergeRefs } from "react-merge-refs";
 import { Field } from "@base-ui/react/field";
 //#region src/base-ui/Input/TextArea.tsx
-const TextArea = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, autoSize, resize = false, disabled, ...rest }) => {
+const textLength = (value) => value === void 0 || value === null ? 0 : Array.from(String(value)).length;
+const TextArea = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, autoSize, resize = false, disabled, readOnly, allowClear, onClear, onPressEnter, onKeyDown, onChange, showCount, maxLength, value, defaultValue, ...rest }) => {
 	const { isDarkMode } = useThemeMode();
 	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const textareaRef = useRef(null);
+	const mergedRef = useMergeRefs([ref, textareaRef]);
+	const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));
+	const length = value === void 0 ? innerLength : textLength(value);
+	const showClear = allowClear && length > 0 && !disabled && !readOnly;
+	const over = maxLength !== void 0 && length > maxLength;
 	const cssVariables = useMemo(() => {
 		if (typeof autoSize !== "object") return {};
 		return {
@@ -15,7 +26,7 @@ const TextArea = memo(({ ref, className, classNames, styles: customStyles, style
 			"--textarea-min-rows": autoSize.minRows
 		};
 	}, [autoSize]);
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		"data-disabled": disabled ? "" : void 0,
 		style: {
 			...cssVariables,
@@ -24,16 +35,42 @@ const TextArea = memo(({ ref, className, classNames, styles: customStyles, style
 		className: cx(rootVariants({
 			shadow,
 			variant: mergedVariant
-		}), styles.textarea, autoSize && styles.textareaAutoSize, resize && styles.textareaResize, className),
-		children: /* @__PURE__ */ jsx(Field.Control, {
-			className: cx(styles.input, classNames?.input),
-			disabled,
-			render: /* @__PURE__ */ jsx("textarea", {
-				ref,
-				...rest
+		}), styles.textarea, autoSize && styles.textareaAutoSize, resize && styles.textareaResize, showCount && styles.textareaWithCount, className),
+		children: [
+			/* @__PURE__ */ jsx(Field.Control, {
+				className: cx(styles.input, classNames?.input),
+				disabled,
+				style: customStyles?.input,
+				render: /* @__PURE__ */ jsx("textarea", {
+					defaultValue,
+					maxLength,
+					readOnly,
+					ref: mergedRef,
+					value,
+					onChange: (event) => {
+						setInnerLength(textLength(event.currentTarget.value));
+						onChange?.(event);
+					},
+					onKeyDown: (event) => {
+						if (isPressEnter(event)) onPressEnter?.(event);
+						onKeyDown?.(event);
+					},
+					...rest
+				})
 			}),
-			style: customStyles?.input
-		})
+			showClear && /* @__PURE__ */ jsx(ClearButton, {
+				className: styles.textareaClear,
+				onClear: () => {
+					clearNativeValue(textareaRef.current);
+					onClear?.();
+				}
+			}),
+			showCount && /* @__PURE__ */ jsx("span", {
+				className: styles.count,
+				"data-over": over ? "" : void 0,
+				children: maxLength === void 0 ? length : `${length} / ${maxLength}`
+			})
+		]
 	});
 });
 TextArea.displayName = "TextArea";

package/es/base-ui/Input/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../src/base-ui/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport { rootVariants, styles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst TextArea = memo<TextAreaProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    autoSize,\n    resize = false,\n    disabled,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    const cssVariables = useMemo<CSSProperties>(() => {\n      if (typeof autoSize !== 'object') return {};\n      return {\n        '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\n        '--textarea-min-rows': autoSize.minRows,\n      } as CSSProperties;\n    }, [autoSize]);\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        style={{ ...cssVariables, ...style }}\n        className={cx(\n          rootVariants({ shadow, variant: mergedVariant }),\n          styles.textarea,\n          autoSize && styles.textareaAutoSize,\n          resize && styles.textareaResize,\n          className,\n        )}\n      >\n        <Field.Control\n          className={cx(styles.input, classNames?.input)}\n          disabled={disabled}\n          render={<textarea ref={ref} {...rest} />}\n          style={customStyles?.input}\n        />\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MACd,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,eAAe,cAA6B;EAChD,IAAI,OAAO,aAAa,UAAU,OAAO,CAAC;EAC1C,OAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;EAClC;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,oBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EACnC,WAAW,GACT,aAAa;GAAE;GAAQ,SAAS;EAAc,CAAC,GAC/C,OAAO,UACP,YAAY,OAAO,kBACnB,UAAU,OAAO,gBACjB,SACF;EAEA,UAAA,oBAAC,MAAM,SAAP;GACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GACnC;GACV,QAAQ,oBAAC,YAAD;IAAe;IAAK,GAAI;GAAO,CAAA;GACvC,OAAO,cAAc;EACtB,CAAA;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../src/base-ui/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { type CSSProperties, memo, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { rootVariants, styles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst textLength = (value: unknown) =>\n  value === undefined || value === null ? 0 : Array.from(String(value)).length;\n\nconst TextArea = memo<TextAreaProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    autoSize,\n    resize = false,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    showCount,\n    maxLength,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const mergedRef = useMergeRefs([ref, textareaRef]);\n    const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));\n    const length = value === undefined ? innerLength : textLength(value);\n    const showClear = allowClear && length > 0 && !disabled && !readOnly;\n    const over = maxLength !== undefined && length > maxLength;\n\n    const cssVariables = useMemo<CSSProperties>(() => {\n      if (typeof autoSize !== 'object') return {};\n      return {\n        '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\n        '--textarea-min-rows': autoSize.minRows,\n      } as CSSProperties;\n    }, [autoSize]);\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        style={{ ...cssVariables, ...style }}\n        className={cx(\n          rootVariants({ shadow, variant: mergedVariant }),\n          styles.textarea,\n          autoSize && styles.textareaAutoSize,\n          resize && styles.textareaResize,\n          showCount && styles.textareaWithCount,\n          className,\n        )}\n      >\n        <Field.Control\n          className={cx(styles.input, classNames?.input)}\n          disabled={disabled}\n          style={customStyles?.input}\n          render={\n            <textarea\n              defaultValue={defaultValue}\n              maxLength={maxLength}\n              readOnly={readOnly}\n              ref={mergedRef}\n              value={value}\n              onChange={(event) => {\n                setInnerLength(textLength(event.currentTarget.value));\n                onChange?.(event);\n              }}\n              onKeyDown={(event) => {\n                if (isPressEnter(event)) onPressEnter?.(event);\n                onKeyDown?.(event);\n              }}\n              {...rest}\n            />\n          }\n        />\n        {showClear && (\n          <ClearButton\n            className={styles.textareaClear}\n            onClear={() => {\n              clearNativeValue(textareaRef.current);\n              onClear?.();\n            }}\n          />\n        )}\n        {showCount && (\n          <span className={styles.count} data-over={over ? '' : undefined}>\n            {maxLength === undefined ? length : `${length} / ${maxLength}`}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,cAAc,UAClB,UAAU,KAAA,KAAa,UAAU,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AAExE,MAAM,WAAW,MACd,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,UACA,YACA,SACA,cACA,WACA,UACA,WACA,WACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,YAAY,aAAa,CAAC,KAAK,WAAW,CAAC;CACjD,MAAM,CAAC,aAAa,kBAAkB,eAAe,WAAW,SAAS,YAAY,CAAC;CACtF,MAAM,SAAS,UAAU,KAAA,IAAY,cAAc,WAAW,KAAK;CACnE,MAAM,YAAY,cAAc,SAAS,KAAK,CAAC,YAAY,CAAC;CAC5D,MAAM,OAAO,cAAc,KAAA,KAAa,SAAS;CAEjD,MAAM,eAAe,cAA6B;EAChD,IAAI,OAAO,aAAa,UAAU,OAAO,CAAC;EAC1C,OAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;EAClC;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EACnC,WAAW,GACT,aAAa;GAAE;GAAQ,SAAS;EAAc,CAAC,GAC/C,OAAO,UACP,YAAY,OAAO,kBACnB,UAAU,OAAO,gBACjB,aAAa,OAAO,mBACpB,SACF;EAVF,UAAA;GAYE,oBAAC,MAAM,SAAP;IACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;IACnC;IACV,OAAO,cAAc;IACrB,QACE,oBAAC,YAAD;KACgB;KACH;KACD;KACV,KAAK;KACE;KACP,WAAW,UAAU;MACnB,eAAe,WAAW,MAAM,cAAc,KAAK,CAAC;MACpD,WAAW,KAAK;KAClB;KACA,YAAY,UAAU;MACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;MAC7C,YAAY,KAAK;KACnB;KACA,GAAI;IACL,CAAA;GAEJ,CAAA;GACA,aACC,oBAAC,aAAD;IACE,WAAW,OAAO;IAClB,eAAe;KACb,iBAAiB,YAAY,OAAO;KACpC,UAAU;IACZ;GACD,CAAA;GAEF,aACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAW,OAAO,KAAK,KAAA;IACnD,UAAA,cAAc,KAAA,IAAY,SAAS,GAAG,OAAO,KAAK;GAC/C,CAAA;EAEL;;AAET,CACF;AAEA,SAAS,cAAc"}

package/es/base-ui/Input/clearNativeValue.mjs

@@ -0,0 +1,12 @@
+//#region src/base-ui/Input/clearNativeValue.ts
+const clearNativeValue = (element) => {
+	if (!element) return;
+	const prototype = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+	Object.getOwnPropertyDescriptor(prototype, "value")?.set?.call(element, "");
+	element.dispatchEvent(new Event("input", { bubbles: true }));
+	element.focus();
+};
+//#endregion
+export { clearNativeValue };
+
+//# sourceMappingURL=clearNativeValue.mjs.map

package/es/base-ui/Input/clearNativeValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearNativeValue.mjs","names":[],"sources":["../../../src/base-ui/Input/clearNativeValue.ts"],"sourcesContent":["export const clearNativeValue = (element: HTMLInputElement | HTMLTextAreaElement | null) => {\n  if (!element) return;\n  const prototype =\n    element instanceof HTMLTextAreaElement\n      ? HTMLTextAreaElement.prototype\n      : HTMLInputElement.prototype;\n  Object.getOwnPropertyDescriptor(prototype, 'value')?.set?.call(element, '');\n  element.dispatchEvent(new Event('input', { bubbles: true }));\n  element.focus();\n};\n"],"mappings":";AAAA,MAAa,oBAAoB,YAA2D;CAC1F,IAAI,CAAC,SAAS;CACd,MAAM,YACJ,mBAAmB,sBACf,oBAAoB,YACpB,iBAAiB;CACvB,OAAO,yBAAyB,WAAW,OAAO,CAAC,EAAE,KAAK,KAAK,SAAS,EAAE;CAC1E,QAAQ,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;CAC3D,QAAQ,MAAM;AAChB"}

package/es/base-ui/Input/pressEnter.mjs

@@ -0,0 +1,6 @@
+//#region src/base-ui/Input/pressEnter.ts
+const isPressEnter = (event) => event.key === "Enter" && !event.nativeEvent.isComposing && event.keyCode !== 229;
+//#endregion
+export { isPressEnter };
+
+//# sourceMappingURL=pressEnter.mjs.map

package/es/base-ui/Input/pressEnter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressEnter.mjs","names":[],"sources":["../../../src/base-ui/Input/pressEnter.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\n\nexport const isPressEnter = (event: KeyboardEvent) =>\n  event.key === 'Enter' && !event.nativeEvent.isComposing && event.keyCode !== 229;\n"],"mappings":";AAEA,MAAa,gBAAgB,UAC3B,MAAM,QAAQ,WAAW,CAAC,MAAM,YAAY,eAAe,MAAM,YAAY"}

package/es/base-ui/Input/style.d.mts

@@ -1,5 +1,9 @@
 //#region src/base-ui/Input/style.d.ts
 declare const styles: {
+  clear: string;
+  count: string;
+  textareaClear: string;
+  textareaWithCount: string;
   borderless: string;
   filled: string;
   input: string;
@@ -23,8 +27,8 @@ declare const styles: {
 };
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
-  size?: "large" | "middle" | "small" | null | undefined;
-  variant?: "filled" | "borderless" | "outlined" | null | undefined;
+  size?: "small" | "middle" | "large" | null | undefined;
+  variant?: "borderless" | "filled" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { rootVariants, styles };

package/es/base-ui/Input/style.mjs

@@ -4,6 +4,63 @@ import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Input/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
+	clear: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+
+    color: ${cssVar.colorBgContainer};
+
+    visibility: hidden;
+    background: ${cssVar.colorTextQuaternary};
+
+    &:hover {
+      background: ${cssVar.colorTextTertiary};
+    }
+  `,
+	count: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block-end: 6px;
+    inset-inline-end: 8px;
+
+    display: inline-flex;
+    align-items: center;
+
+    height: 20px;
+    padding-inline: 8px;
+    border-radius: 999px;
+
+    font-size: 11px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorTextSecondary};
+
+    background: ${cssVar.colorFillTertiary};
+
+    &[data-over] {
+      color: ${cssVar.colorWhite};
+      background: ${cssVar.colorError};
+    }
+  `,
+	textareaClear: css`
+    position: absolute;
+    inset-block-start: 10px;
+    inset-inline-end: 10px;
+  `,
+	textareaWithCount: css`
+    padding-block-end: 30px;
+  `,
 	borderless: css`
     border: 1px solid transparent;
     background: none;
@@ -35,7 +92,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	invalid: css`
-    &:has([data-invalid]) {
+    &:has([data-invalid], [aria-invalid='true']) {
       border-color: ${cssVar.colorError};
 
       &:focus-within {
@@ -83,18 +140,23 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       color: ${cssVar.colorTextQuaternary};
       opacity: 0.66;
     }
+
+    &:hover [data-lobe-input-clear],
+    &:focus-within [data-lobe-input-clear] {
+      visibility: visible;
+    }
   `,
 	shadow: staticStylish.shadow,
 	sizeLarge: css`
-    height: ${controlHeight.large}px;
+    min-height: ${controlHeight.large}px;
     border-radius: ${cssVar.borderRadiusLG};
     font-size: 16px;
   `,
 	sizeMiddle: css`
-    height: ${controlHeight.middle}px;
+    min-height: ${controlHeight.middle}px;
   `,
 	sizeSmall: css`
-    height: ${controlHeight.small}px;
+    min-height: ${controlHeight.small}px;
     padding-inline: 8px;
     border-radius: ${cssVar.borderRadiusSM};
     font-size: 12px;
@@ -180,6 +242,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorTextTertiary};
   `,
 	textarea: css`
+    position: relative;
     height: auto;
     padding-block: 8px;