@vef-framework/components 1.0.100 → 1.0.101

package/es/vef-grid/index.js

@@ -1,14 +1,90 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as r}from"@emotion/react/jsx-runtime";import{css as n}from"@emotion/react";import{useGapSizeNormalizer as i,useElementSize as t}from"@vef-framework/hooks";import{breakpoints as e,isArray as o}from"@vef-framework/shared";import m from"clsx";import{useMemo as a,useRef as f,useEffect as d}from"react";import{useContainerQuery as c}from"react-container-query";const p=24,s=n`
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useGapSizeNormalizer, useElementSize } from '@vef-framework/hooks';
+import { breakpoints, isArray } from '@vef-framework/shared';
+import clsx from 'clsx';
+import { useMemo, useRef, useEffect } from 'react';
+import { useContainerQuery } from 'react-container-query';
+
+const GRID_COLUMNS = 24;
+const gridStyle = css`
   display: grid;
-  grid: auto-flow / repeat(${p}, minmax(0, 1fr));
+  grid: auto-flow / repeat(${GRID_COLUMNS}, minmax(0, 1fr));
   
   > * {
-    grid-column: span ${p};
+    grid-column: span ${GRID_COLUMNS};
   }
 
-  ${Array.from({length:p}).map(((r,n)=>`\n    > .vef-grid-item-${n+1} {\n      grid-column: span ${n+1};\n    }\n  `))}
+  ${Array.from({ length: GRID_COLUMNS }).map((_, index) => `
+    > .vef-grid-item-${index + 1} {
+      grid-column: span ${index + 1};
+    }
+  `)}
+
+  ${breakpoints.map((breakpoint) => `
+    &.vef-container-${breakpoint} {
+      ${Array.from({ length: GRID_COLUMNS }).map((_, index) => `
+        > .vef-grid-item-${breakpoint}-${index + 1} {
+          grid-column: span ${index + 1};
+        }
+      `)}
+    }
+  `)}
+`;
+function VefGrid({
+  baseWidth = 240,
+  gap,
+  children
+}) {
+  const query = useMemo(() => ({
+    "vef-container-xs": { minWidth: 0 },
+    "vef-container-sm": { minWidth: baseWidth * 2 },
+    "vef-container-md": { minWidth: baseWidth * 3 },
+    "vef-container-lg": { minWidth: baseWidth * 4 },
+    "vef-container-xl": { minWidth: baseWidth * 5 },
+    "vef-container-xxl": { minWidth: baseWidth * 6 }
+  }), [baseWidth]);
+  const containerRef = useRef(null);
+  const [classNames, setRef] = useContainerQuery(query, {
+    width: baseWidth * 2
+  });
+  const normalizeGapSize = useGapSizeNormalizer();
+  const [rowGap, columnGap] = useMemo(() => {
+    if (isArray(gap)) {
+      return [normalizeGapSize(gap[0]), normalizeGapSize(gap[1])];
+    }
+    if (gap) {
+      const normalizedGap = normalizeGapSize(gap);
+      return [normalizedGap, normalizedGap];
+    }
+    return [0, 0];
+  }, [gap, normalizeGapSize]);
+  useEffect(() => {
+    setRef(containerRef.current);
+  }, [containerRef, setRef]);
+  const containerSize = useElementSize(containerRef);
+  const gapStyle = useMemo(() => {
+    if ((containerSize?.width ?? baseWidth * 2) > GRID_COLUMNS * columnGap) {
+      return {
+        gap: `${rowGap}px ${columnGap}px`
+      };
+    }
+    return {
+      gap: `${rowGap}px ${Math.floor((containerSize?.width ?? baseWidth * 2) / GRID_COLUMNS)}px`
+    };
+  }, [containerSize?.width, baseWidth, columnGap, rowGap]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx(classNames),
+      css: gridStyle,
+      style: gapStyle,
+      children
+    }
+  );
+}
 
-  ${e.map((r=>`\n    &.vef-container-${r} {\n      ${Array.from({length:p}).map(((n,i)=>`\n        > .vef-grid-item-${r}-${i+1} {\n          grid-column: span ${i+1};\n        }\n      `))}\n    }\n  `))}
-`;function VefGrid({baseWidth:n=240,gap:e,children:l}){const h=a((()=>({"vef-container-xs":{minWidth:0},"vef-container-sm":{minWidth:2*n},"vef-container-md":{minWidth:3*n},"vef-container-lg":{minWidth:4*n},"vef-container-xl":{minWidth:5*n},"vef-container-xxl":{minWidth:6*n}})),[n]),$=f(null),[u,g]=c(h,{width:2*n}),v=i(),[x,w]=a((()=>{if(o(e))return[v(e[0]),v(e[1])];if(e){const r=v(e);return[r,r]}return[0,0]}),[e,v]);d((()=>{g($.current)}),[$,g]);const W=t($),y=a((()=>(W?.width??2*n)>p*w?{gap:`${x}px ${w}px`}:{gap:`${x}px ${Math.floor((W?.width??2*n)/p)}px`}),[W?.width,n,w,x]);return r("div",{ref:$,className:m(u),css:s,style:y,children:l})}export{VefGrid as default};
+export { VefGrid as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-grid/props.js

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-const x=["xs","sm","md","lg","xl","xxl"];export{x as BREAKPOINTS};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl", "xxl"];
+
+export { BREAKPOINTS };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-grid-item/index.js

@@ -1,3 +1,53 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import i from"clsx";import{useMemo as r}from"react";function VefGridItem({span:t,xs:m,sm:s,md:d,lg:f,xl:o,xxl:p,children:u}){const l=r((()=>{const e=[];return t&&e.push(`vef-grid-item-${t}`),m&&e.push(`vef-grid-item-xs-${m}`),s&&e.push(`vef-grid-item-sm-${s}`),d&&e.push(`vef-grid-item-md-${d}`),f&&e.push(`vef-grid-item-lg-${f}`),o&&e.push(`vef-grid-item-xl-${o}`),p&&e.push(`vef-grid-item-xxl-${p}`),e}),[t,m,s,d,f,o,p]);return e("div",{className:i(l),children:u})}export{VefGridItem as default};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+function VefGridItem({
+  span,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  xxl,
+  children
+}) {
+  const classNames = useMemo(() => {
+    const classNames2 = [];
+    if (span) {
+      classNames2.push(`vef-grid-item-${span}`);
+    }
+    if (xs) {
+      classNames2.push(`vef-grid-item-xs-${xs}`);
+    }
+    if (sm) {
+      classNames2.push(`vef-grid-item-sm-${sm}`);
+    }
+    if (md) {
+      classNames2.push(`vef-grid-item-md-${md}`);
+    }
+    if (lg) {
+      classNames2.push(`vef-grid-item-lg-${lg}`);
+    }
+    if (xl) {
+      classNames2.push(`vef-grid-item-xl-${xl}`);
+    }
+    if (xxl) {
+      classNames2.push(`vef-grid-item-xxl-${xxl}`);
+    }
+    return classNames2;
+  }, [
+    span,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: clsx(classNames), children });
+}
+
+export { VefGridItem as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-icon/index.js

@@ -1,3 +1,51 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as o}from"@emotion/react/jsx-runtime";import e from"@ant-design/icons";import{useColorTokens as r}from"@vef-framework/hooks";import{themeVariables as t,omit as n}from"@vef-framework/shared";import{forwardRef as i,useMemo as m,Suspense as f,cloneElement as s,memo as c}from"react";const l=c(i((({size:i,color:c,children:l,...a},p)=>{const d=r(),u=m((()=>{const o={},e="small"===i?t.fontSizeSm:"medium"===i?t.fontSize:"large"===i?t.fontSizeLg:"huge"===i?t.fontSizeXl:void 0;return e&&(o.fontSize=e),c&&(o.color=d.get(c)),o}),[i,c,d]);return o(e,{ref:p,style:u,component:o=>{const e=n(o,["fill"]);if(l.type===f){const{children:o}=l.props;return s(l,{children:s(o,e)})}return s(l,e)},...a})})));l.displayName="VefIcon";export{l as default};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import Icon from '@ant-design/icons';
+import { useColorTokens } from '@vef-framework/hooks';
+import { themeVariables, omit } from '@vef-framework/shared';
+import { forwardRef, useMemo, Suspense, cloneElement, memo } from 'react';
+
+const VefIconBase = forwardRef(
+  ({
+    size,
+    color,
+    children,
+    ...restProps
+  }, ref) => {
+    const colorTokens = useColorTokens();
+    const style = useMemo(() => {
+      const style2 = {};
+      const fontSize = size === "small" ? themeVariables.fontSizeSm : size === "medium" ? themeVariables.fontSize : size === "large" ? themeVariables.fontSizeLg : size === "huge" ? themeVariables.fontSizeXl : void 0;
+      if (fontSize) {
+        style2.fontSize = fontSize;
+      }
+      if (color) {
+        style2.color = colorTokens.get(color);
+      }
+      return style2;
+    }, [size, color, colorTokens]);
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ref,
+        style,
+        component: (props) => {
+          const svgProps = omit(props, ["fill"]);
+          if (children.type === Suspense) {
+            const { children: icon } = children.props;
+            return cloneElement(children, {
+              children: cloneElement(icon, svgProps)
+            });
+          }
+          return cloneElement(children, svgProps);
+        },
+        ...restProps
+      }
+    );
+  }
+);
+const VefIcon = memo(VefIconBase);
+VefIcon.displayName = "VefIcon";
+
+export { VefIcon as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-icon-select/index.js

@@ -1,31 +1,113 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as e,jsxs as r}from"@emotion/react/jsx-runtime";import{css as o}from"@emotion/react";import{useThemeTokens as i}from"@vef-framework/hooks";import{themeVariables as n,trim as t,cluster as c,isUndefined as l}from"@vef-framework/shared";import{useMemo as a,useCallback as s,memo as d,useState as m}from"react";import f from"../vef-dynamic-icon/index.js";import{dynamicIconNames as p}from"../vef-dynamic-icon/props.js";import h from"../vef-empty-placeholder/index.js";import u from"../vef-generic-select/index.js";import v from"../vef-space/index.js";import g from"../vef-text/index.js";import x from"../vef-virtual-grid/index.js";const y=o`
-  color: ${n.colorTextSlate};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useThemeTokens } from '@vef-framework/hooks';
+import { themeVariables, trim, cluster, isUndefined } from '@vef-framework/shared';
+import { useMemo, useCallback, memo, useState } from 'react';
+import VefDynamicIcon from '../vef-dynamic-icon/index.js';
+import { dynamicIconNames } from '../vef-dynamic-icon/props.js';
+import VefEmptyPlaceholder from '../vef-empty-placeholder/index.js';
+import VefGenericSelect from '../vef-generic-select/index.js';
+import VefSpace from '../vef-space/index.js';
+import VefText from '../vef-text/index.js';
+import VefVirtualGrid from '../vef-virtual-grid/index.js';
+
+const iconsStyle = css`
+  color: ${themeVariables.colorTextSlate};
 
   .vef-icon-select-wrapper {
-    padding: calc(${n.paddingXxs} + 2px) ${n.paddingXs};
+    padding: calc(${themeVariables.paddingXxs} + 2px) ${themeVariables.paddingXs};
   }
-`,b=o`
+`;
+const iconItemStyle = css`
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${n.colorFillContent};
-  border-radius: ${n.borderRadius};
-  transition: background-color ${n.motionDurationMid} ${n.motionEaseInOut};
+  background-color: ${themeVariables.colorFillContent};
+  border-radius: ${themeVariables.borderRadius};
+  transition: background-color ${themeVariables.motionDurationMid} ${themeVariables.motionEaseInOut};
   &:hover {
     cursor: pointer;
-    background-color: ${n.colorFillContentHover};
+    background-color: ${themeVariables.colorFillContentHover};
   }
 
   &.vef-icon-select-item-selected {
-    background-color: ${n.colorPrimaryBg};
+    background-color: ${themeVariables.colorPrimaryBg};
   }
 
   .vef-icon {
     font-size: 28px;
   }
-`,w=Array.from(p);const C=d((function VefIconsContentBase({value:r,onChange:o,keyword:n,onConfirm:l}){const{paddingXS:d,paddingXXS:m}=i(),p=a((()=>{const e=t(n);return c(e?w.filter((r=>r.includes(e))):w,6)}),[n]),[u,v]=a((()=>[420+2*d,348+2*(m+2)]),[m,d]),g=s((({item:i})=>{const n=i===r;return e("div",{className:n?"vef-icon-select-item-selected":void 0,css:b,title:i,onClick:()=>{n||o(i),l?.()},children:e(f,{name:i})})}),[o,l,r]),C=a((()=>({width:u,height:v})),[u,v]);return 0===p.length?e("div",{css:y,children:e("div",{className:"vef-icon-select-wrapper",style:C,children:e(h,{description:"暂无图标",presetIcon:"simple"})})}):e("div",{css:y,children:e(x,{className:"vef-icon-select-wrapper",columnWidth:60,gap:"small",height:v,items:p,renderItem:g,rowHeight:60,width:u})})}));C.displayName="VefIconsContent";const j=o`
+`;
+const iconItemSize = 60;
+const iconNames = Array.from(dynamicIconNames);
+function VefIconsContentBase({
+  value,
+  onChange,
+  keyword,
+  onConfirm
+}) {
+  const { paddingXS, paddingXXS } = useThemeTokens();
+  const filteredIcons = useMemo(() => {
+    const trimmedKeyword = trim(keyword);
+    if (!trimmedKeyword) {
+      return cluster(iconNames, 6);
+    }
+    return cluster(
+      iconNames.filter((name) => name.includes(trimmedKeyword)),
+      6
+    );
+  }, [keyword]);
+  const [width, height] = useMemo(() => [
+    6 * iconItemSize + 12 * 5 + paddingXS * 2,
+    5 * iconItemSize + 12 * 4 + (paddingXXS + 2) * 2
+  ], [paddingXXS, paddingXS]);
+  const renderItem = useCallback(({ item }) => {
+    const isSelected = item === value;
+    const handleClick = () => {
+      if (isSelected) {
+        onConfirm?.();
+        return;
+      }
+      onChange(item);
+      onConfirm?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isSelected ? "vef-icon-select-item-selected" : void 0,
+        css: iconItemStyle,
+        title: item,
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsx(VefDynamicIcon, { name: item })
+      }
+    );
+  }, [onChange, onConfirm, value]);
+  const emptyPlaceholderStyle = useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
+  if (filteredIcons.length === 0) {
+    return /* @__PURE__ */ jsx("div", { css: iconsStyle, children: /* @__PURE__ */ jsx("div", { className: "vef-icon-select-wrapper", style: emptyPlaceholderStyle, children: /* @__PURE__ */ jsx(VefEmptyPlaceholder, { description: "暂无图标", presetIcon: "simple" }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { css: iconsStyle, children: /* @__PURE__ */ jsx(
+    VefVirtualGrid,
+    {
+      className: "vef-icon-select-wrapper",
+      columnWidth: iconItemSize,
+      gap: "small",
+      height,
+      items: filteredIcons,
+      renderItem,
+      rowHeight: iconItemSize,
+      width
+    }
+  ) });
+}
+const VefIconsContent = memo(VefIconsContentBase);
+VefIconsContent.displayName = "VefIconsContent";
+const labelStyle = css`
   width: 100%;
 
   .vef-space-item:last-of-type {
@@ -38,5 +120,57 @@ import{jsx as e,jsxs as r}from"@emotion/react/jsx-runtime";import{css as o}from"
     font-family: inherit;
     color: inherit;
   }
-`;function renderLabel(o){return r(v,{css:j,children:[e(f,{name:o}),e(g,{ellipsis:!0,children:o})]})}function VefIconSelect({defaultValue:r,value:o,size:i,placeholder:n,disabled:t,clearable:c,variant:a,onChange:d,onClear:f}){const[p,h]=m(r??null),v=s((e=>{l(o)?h(e):d?.(e)}),[d,o]),g=s((()=>{v(null),f?.()}),[v,f]);return e(u,{clearable:c,disabled:t,placeholder:n,renderLabel:renderLabel,size:i,value:o??p,variant:a,onClear:g,children:e(C,{value:l(o)?p:o,onChange:v})})}export{VefIconSelect as default};
+`;
+function renderLabel(name) {
+  return /* @__PURE__ */ jsxs(VefSpace, { css: labelStyle, children: [
+    /* @__PURE__ */ jsx(VefDynamicIcon, { name }),
+    /* @__PURE__ */ jsx(VefText, { ellipsis: true, children: name })
+  ] });
+}
+function VefIconSelect({
+  defaultValue,
+  value,
+  size,
+  placeholder,
+  disabled,
+  clearable,
+  variant,
+  onChange,
+  onClear
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+  const handleChange = useCallback((changedValue) => {
+    if (isUndefined(value)) {
+      setInternalValue(changedValue);
+      return;
+    }
+    onChange?.(changedValue);
+  }, [onChange, value]);
+  const handleClear = useCallback(() => {
+    handleChange(null);
+    onClear?.();
+  }, [handleChange, onClear]);
+  return /* @__PURE__ */ jsx(
+    VefGenericSelect,
+    {
+      clearable,
+      disabled,
+      placeholder,
+      renderLabel,
+      size,
+      value: value ?? internalValue,
+      variant,
+      onClear: handleClear,
+      children: /* @__PURE__ */ jsx(
+        VefIconsContent,
+        {
+          value: isUndefined(value) ? internalValue : value,
+          onChange: handleChange
+        }
+      )
+    }
+  );
+}
+
+export { VefIconSelect as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-input/hooks/use-input-instance.js

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{useRef as n,useImperativeHandle as t}from"react";function useInputInstance(e){const u=n(null);return t(e,(()=>({blur:()=>u.current?.blur(),focus:()=>u.current?.focus({preventScroll:!0}),input:u.current?.input??null,nativeElement:u.current?.nativeElement??null}))),u}export{useInputInstance};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { useRef, useImperativeHandle } from 'react';
+
+function useInputInstance(ref) {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => inputRef.current?.blur(),
+    focus: () => inputRef.current?.focus({ preventScroll: true }),
+    input: inputRef.current?.input ?? null,
+    nativeElement: inputRef.current?.nativeElement ?? null
+  }));
+  return inputRef;
+}
+
+export { useInputInstance };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-input/index.js

@@ -1,3 +1,65 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{isFunction as o}from"@vef-framework/shared";import{Input as r}from"antd";import{forwardRef as a,useMemo as t}from"react";import"../internal/index.js";import{useInputInstance as n}from"./hooks/use-input-instance.js";import{convertBasicSizeToUiSize as l}from"../internal/utils.js";function normalizeValue(e){return""===e?null:e}const u=a((({defaultValue:a,value:u,clearable:i,size:s,showCount:m,prepend:d,append:f,onChange:p,onEnterKeyPress:v,onBlur:c,onFocus:V,...z},g)=>{const h=t((()=>({onChange:o(p)?e=>p(normalizeValue(e.target.value)):void 0,onPressEnter:o(v)?e=>v(normalizeValue(e.target.value)):void 0,onBlur:o(c)?e=>c(normalizeValue(e.target.value)):void 0,onFocus:o(V)?e=>V(normalizeValue(e.target.value)):void 0})),[p,v,c,V]),C=n(g);return e(r,{ref:C,addonAfter:f,addonBefore:d,allowClear:i,defaultValue:a,showCount:m,size:l(s),type:"text",value:u,...z,...h})}));u.displayName="VefInput";export{u as default};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isFunction } from '@vef-framework/shared';
+import { Input } from 'antd';
+import { forwardRef, useMemo } from 'react';
+import '../internal/index.js';
+import { useInputInstance } from './hooks/use-input-instance.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+function normalizeValue(value) {
+  if (value === "") {
+    return null;
+  }
+  return value;
+}
+const VefInput = forwardRef(({
+  defaultValue,
+  value,
+  clearable,
+  size,
+  showCount,
+  prepend,
+  append,
+  onChange,
+  onEnterKeyPress,
+  onBlur,
+  onFocus,
+  ...restProps
+}, ref) => {
+  const eventHandlers = useMemo(() => ({
+    onChange: isFunction(onChange) ? (event) => onChange(
+      normalizeValue(event.target.value)
+    ) : void 0,
+    onPressEnter: isFunction(onEnterKeyPress) ? (event) => onEnterKeyPress(
+      normalizeValue(event.target.value)
+    ) : void 0,
+    onBlur: isFunction(onBlur) ? (event) => onBlur(
+      normalizeValue(event.target.value)
+    ) : void 0,
+    onFocus: isFunction(onFocus) ? (event) => onFocus(
+      normalizeValue(event.target.value)
+    ) : void 0
+  }), [onChange, onEnterKeyPress, onBlur, onFocus]);
+  const inputRef = useInputInstance(ref);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: inputRef,
+      addonAfter: append,
+      addonBefore: prepend,
+      allowClear: clearable,
+      defaultValue,
+      showCount,
+      size: convertBasicSizeToUiSize(size),
+      type: "text",
+      value,
+      ...restProps,
+      ...eventHandlers
+    }
+  );
+});
+VefInput.displayName = "VefInput";
+
+export { VefInput as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-input-number/hooks/use-input-number-instance.js

@@ -1,3 +1,14 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{useRef as r,useImperativeHandle as u}from"react";function useInputNumberInstance(n){const e=r(null);return u(n,(()=>({blur:()=>e.current?.blur(),focus:()=>e.current?.focus({preventScroll:!0})}))),e}export{useInputNumberInstance};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { useRef, useImperativeHandle } from 'react';
+
+function useInputNumberInstance(ref) {
+  const inputNumberRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => inputNumberRef.current?.blur(),
+    focus: () => inputNumberRef.current?.focus({ preventScroll: true })
+  }));
+  return inputNumberRef;
+}
+
+export { useInputNumberInstance };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-input-number/index.js

@@ -1,3 +1,149 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{isFunction as r,styles as o}from"@vef-framework/shared";import{InputNumber as n}from"antd";import{forwardRef as t,useMemo as a}from"react";import"../internal/index.js";import{useInputNumberInstance as s}from"./hooks/use-input-number-instance.js";import{convertBasicSizeToUiSize as u}from"../internal/utils.js";function normalizeValue(e,r){const o=Number.parseFloat(e);return Number.isNaN(o)?null:r?`${o}`:o}const i=t((({size:t,showControls:i,step:l,min:m,max:d,prepend:f,append:c,...g},p)=>{const v=a((()=>{const{useStringFormat:e}=g;if(e){const{onChange:e,onEnterKeyPress:o,onBlur:n,onFocus:t}=g;return{stringFormat:!0,onChange:r(e)?r=>e(r):void 0,onPressEnter:r(o)?e=>o(normalizeValue(e.target.value,!0)):void 0,onBlur:r(n)?e=>n(normalizeValue(e.target.value,!0)):void 0,onFocus:r(t)?e=>t(normalizeValue(e.target.value,!0)):void 0}}const{onChange:o,onEnterKeyPress:n,onBlur:t,onFocus:a}=g;return{stringFormat:!1,onChange:r(o)?e=>o(e):void 0,onPressEnter:r(n)?e=>n(normalizeValue(e.target.value,!1)):void 0,onBlur:r(t)?e=>t(normalizeValue(e.target.value,!1)):void 0,onFocus:r(a)?e=>a(normalizeValue(e.target.value,!1)):void 0}}),[g]),F=s(p),{useStringFormat:V}=g;if(V){const{useStringFormat:r,defaultValue:a,value:s,onChange:p,onEnterKeyPress:V,onBlur:h,onFocus:z,...B}=g,{stringFormat:C}=v;if(C){const{stringFormat:r,...g}=v;return e(n,{ref:F,stringMode:!0,addonAfter:c,addonBefore:f,controls:i,css:o.fullWidth,defaultValue:a,max:`${d}`,min:`${m}`,size:u(t),step:`${l}`,value:s,...B,...g})}return}const{useStringFormat:h,defaultValue:z,value:B,onChange:C,onEnterKeyPress:x,onBlur:E,onFocus:N,...P}=g,{stringFormat:y}=v;if(!y){const{stringFormat:r,...t}=v;return e(n,{ref:F,addonAfter:c,addonBefore:f,controls:i,css:o.fullWidth,defaultValue:z,max:d,min:m,step:l,value:B,...P,...t})}}));i.displayName="VefInputNumber";export{i as default};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isFunction, styles } from '@vef-framework/shared';
+import { InputNumber } from 'antd';
+import { forwardRef, useMemo } from 'react';
+import '../internal/index.js';
+import { useInputNumberInstance } from './hooks/use-input-number-instance.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+function normalizeValue(value, useStringFormat) {
+  const number = Number.parseFloat(value);
+  if (Number.isNaN(number)) {
+    return null;
+  }
+  return useStringFormat ? `${number}` : number;
+}
+const VefInputNumber = forwardRef(({
+  size,
+  showControls,
+  step,
+  min,
+  max,
+  prepend,
+  append,
+  ...restProps
+}, ref) => {
+  const eventHandlerGroup = useMemo(() => {
+    const { useStringFormat: useStringFormat2 } = restProps;
+    if (useStringFormat2) {
+      const {
+        onChange: onChange3,
+        onEnterKeyPress: onEnterKeyPress3,
+        onBlur: onBlur3,
+        onFocus: onFocus3
+      } = restProps;
+      return {
+        stringFormat: true,
+        onChange: isFunction(onChange3) ? (value2) => onChange3(value2) : void 0,
+        onPressEnter: isFunction(onEnterKeyPress3) ? (event) => onEnterKeyPress3(
+          normalizeValue(
+            event.target.value,
+            true
+          )
+        ) : void 0,
+        onBlur: isFunction(onBlur3) ? (event) => onBlur3(
+          normalizeValue(event.target.value, true)
+        ) : void 0,
+        onFocus: isFunction(onFocus3) ? (event) => onFocus3(
+          normalizeValue(event.target.value, true)
+        ) : void 0
+      };
+    }
+    const {
+      onChange: onChange2,
+      onEnterKeyPress: onEnterKeyPress2,
+      onBlur: onBlur2,
+      onFocus: onFocus2
+    } = restProps;
+    return {
+      stringFormat: false,
+      onChange: isFunction(onChange2) ? (value2) => onChange2(value2) : void 0,
+      onPressEnter: isFunction(onEnterKeyPress2) ? (event) => onEnterKeyPress2(
+        normalizeValue(
+          event.target.value,
+          false
+        )
+      ) : void 0,
+      onBlur: isFunction(onBlur2) ? (event) => onBlur2(
+        normalizeValue(event.target.value, false)
+      ) : void 0,
+      onFocus: isFunction(onFocus2) ? (event) => onFocus2(
+        normalizeValue(event.target.value, false)
+      ) : void 0
+    };
+  }, [restProps]);
+  const inputNumberRef = useInputNumberInstance(ref);
+  const { useStringFormat } = restProps;
+  if (useStringFormat) {
+    const {
+      useStringFormat: useStringFormat2,
+      defaultValue: defaultValue2,
+      value: value2,
+      onChange: onChange2,
+      onEnterKeyPress: onEnterKeyPress2,
+      onBlur: onBlur2,
+      onFocus: onFocus2,
+      ...commonProps2
+    } = restProps;
+    const { stringFormat: stringFormat2 } = eventHandlerGroup;
+    if (stringFormat2) {
+      const { stringFormat: stringFormat3, ...eventHandlers } = eventHandlerGroup;
+      return /* @__PURE__ */ jsx(
+        InputNumber,
+        {
+          ref: inputNumberRef,
+          stringMode: true,
+          addonAfter: append,
+          addonBefore: prepend,
+          controls: showControls,
+          css: styles.fullWidth,
+          defaultValue: defaultValue2,
+          max: `${max}`,
+          min: `${min}`,
+          size: convertBasicSizeToUiSize(size),
+          step: `${step}`,
+          value: value2,
+          ...commonProps2,
+          ...eventHandlers
+        }
+      );
+    }
+    return;
+  }
+  const {
+    useStringFormat: _,
+    defaultValue,
+    value,
+    onChange,
+    onEnterKeyPress,
+    onBlur,
+    onFocus,
+    ...commonProps
+  } = restProps;
+  const { stringFormat } = eventHandlerGroup;
+  if (!stringFormat) {
+    const { stringFormat: stringFormat2, ...eventHandlers } = eventHandlerGroup;
+    return /* @__PURE__ */ jsx(
+      InputNumber,
+      {
+        ref: inputNumberRef,
+        addonAfter: append,
+        addonBefore: prepend,
+        controls: showControls,
+        css: styles.fullWidth,
+        defaultValue,
+        max,
+        min,
+        step,
+        value,
+        ...commonProps,
+        ...eventHandlers
+      }
+    );
+  }
+});
+VefInputNumber.displayName = "VefInputNumber";
+
+export { VefInputNumber as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */