@vef-framework/components 1.0.98 → 1.0.99

package/lib/vef-popover/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-radio/hooks/use-data-options.cjs

@@ -1,3 +1,45 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),t=require("react");exports.useDataOptions=function useDataOptions({value:s,onChange:i,...r}){const{normalizedOptions:a,defaultOption:n,isLoading:u}=e.useComputedOptions({...r,isGrouped:!1,filterable:!1,selectedOptionValues:s?[s]:[]}),l=t.useMemo((()=>a.reduce(((e,o)=>(e.set(o.value,o),e)),new Map)),[a]);return t.useLayoutEffect((()=>{n&&o.isFunction(i)&&o.isNullish(s)&&i(n.value,n)}),[n,i,s]),{optionsMap:l,normalizedOptions:a,isLoading:u}};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useDataOptions({
+  value,
+  onChange,
+  ...rest
+}) {
+  const {
+    normalizedOptions,
+    defaultOption,
+    isLoading
+  } = hooks.useComputedOptions({
+    ...rest,
+    isGrouped: false,
+    filterable: false,
+    selectedOptionValues: value ? [value] : []
+  });
+  const optionsMap = react.useMemo(() => normalizedOptions.reduce((map, option) => {
+    map.set(option.value, option);
+    return map;
+  }, /* @__PURE__ */ new Map()), [normalizedOptions]);
+  react.useLayoutEffect(() => {
+    if (defaultOption && shared.isFunction(onChange) && shared.isNullish(value)) {
+      onChange(
+        defaultOption.value,
+        defaultOption
+      );
+    }
+  }, [defaultOption, onChange, value]);
+  return {
+    optionsMap,
+    normalizedOptions,
+    isLoading
+  };
+}
+
+exports.useDataOptions = useDataOptions;
 /*! 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/lib/vef-radio/hooks/use-radio-instance.cjs

@@ -1,3 +1,25 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useRadioInstance=function useRadioInstance(t,r){const n=e.useRef(null);return e.useImperativeHandle(t,(()=>({blur:()=>{n.current?.blur()},focus:()=>{n.current?.focus({preventScroll:!0})},getDataOptions:()=>r}))),n};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useRadioInstance(ref, dataOptions) {
+  const radioRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => {
+      radioRef.current?.blur();
+    },
+    focus: () => {
+      radioRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    getDataOptions: () => dataOptions
+  }));
+  return radioRef;
+}
+
+exports.useRadioInstance = useRadioInstance;
 /*! 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/lib/vef-radio/index.cjs

@@ -1,5 +1,93 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),i=require("@emotion/react"),t=require("@vef-framework/shared"),a=require("antd"),o=require("react");require("../internal/index.cjs");const r=require("../vef-loading-placeholder/index.cjs"),n=require("../vef-tooltip/index.cjs"),s=require("./hooks/use-data-options.cjs"),u=require("./hooks/use-radio-instance.cjs"),d=require("../internal/utils.cjs"),{Group:l}=a.Radio,c=e.jsx("div",{css:i.css`
-      height: ${t.themeVariables.controlHeight}
-    `,children:e.jsx(r.default,{})});const f=o.memo(o.forwardRef((function VefRadioBase({defaultValue:i,value:r,disabled:f,block:h,variant:p,buttonVariant:v,buttonSize:b,onChange:j,...m},x){const{optionsMap:g,normalizedOptions:q,isLoading:R}=s.useDataOptions({value:r,onChange:j,...m}),S=u.useRadioInstance(x,q),V=o.useMemo((()=>{if(t.isFunction(j))return({target:{value:e}})=>{j(e,g.get(e))}}),[j,g]);if(R)return c;const k=q.map((i=>{const{value:t,label:o,disabled:r,description:s}=i;return s?e.jsx(n.default,{content:s,children:e.jsx(a.Radio,{disabled:r,value:t,children:o})},t):e.jsx(a.Radio,{disabled:r,value:t,children:o},t)}));return e.jsx(l,{ref:S,block:h,buttonStyle:v,defaultValue:i,disabled:f,optionType:p,size:d.convertBasicSizeToUiSize(b),onChange:V,...void 0===r?{}:{value:r},children:k})})));f.displayName="VefRadio",exports.default=f;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$1 = require('react');
+require('../internal/index.cjs');
+const index = require('../vef-loading-placeholder/index.cjs');
+const index$1 = require('../vef-tooltip/index.cjs');
+const useDataOptions = require('./hooks/use-data-options.cjs');
+const useRadioInstance = require('./hooks/use-radio-instance.cjs');
+const utils = require('../internal/utils.cjs');
+
+const { Group } = antd.Radio;
+const loadingPlaceholder = /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    css: react.css`
+      height: ${shared.themeVariables.controlHeight}
+    `,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.default, {})
+  }
+);
+function VefRadioBase({
+  defaultValue,
+  value,
+  disabled,
+  block,
+  variant,
+  buttonVariant,
+  buttonSize,
+  onChange,
+  ...restProps
+}, ref) {
+  const {
+    optionsMap,
+    normalizedOptions,
+    isLoading
+  } = useDataOptions.useDataOptions({
+    value,
+    onChange,
+    ...restProps
+  });
+  const radioRef = useRadioInstance.useRadioInstance(ref, normalizedOptions);
+  const handleChange = react$1.useMemo(() => {
+    if (shared.isFunction(onChange)) {
+      return ({ target: { value: value2 } }) => {
+        onChange(value2, optionsMap.get(value2));
+      };
+    }
+  }, [onChange, optionsMap]);
+  if (isLoading) {
+    return loadingPlaceholder;
+  }
+  const radios = normalizedOptions.map((option) => {
+    const {
+      value: value2,
+      label,
+      disabled: disabled2,
+      description
+    } = option;
+    if (description) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { content: description, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Radio, { disabled: disabled2, value: value2, children: label }) }, value2);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(antd.Radio, { disabled: disabled2, value: value2, children: label }, value2);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Group,
+    {
+      ref: radioRef,
+      block,
+      buttonStyle: buttonVariant,
+      defaultValue,
+      disabled,
+      optionType: variant,
+      size: utils.convertBasicSizeToUiSize(buttonSize),
+      onChange: handleChange,
+      ...value === void 0 ? {} : { value },
+      children: radios
+    }
+  );
+}
+const VefRadio = react$1.memo(
+  react$1.forwardRef(VefRadioBase)
+);
+VefRadio.displayName = "VefRadio";
+
+exports.default = VefRadio;
 /*! 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/lib/vef-radio/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-rate/hooks/use-rate-instance.cjs

@@ -1,3 +1,18 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useRateInstance=function useRateInstance(t){const r=e.useRef(null);return e.useImperativeHandle(t,(()=>({blur:()=>r.current?.blur(),focus:()=>r.current?.focus()}))),r};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useRateInstance(ref) {
+  const rateRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => rateRef.current?.blur(),
+    focus: () => rateRef.current?.focus()
+  }));
+  return rateRef;
+}
+
+exports.useRateInstance = useRateInstance;
 /*! 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/lib/vef-rate/index.cjs

@@ -1,3 +1,35 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/shared"),t=require("antd"),a=require("react"),s=require("./hooks/use-rate-instance.cjs"),o=a.forwardRef((({character:o,...u},i)=>{const n=a.useMemo((()=>r.isFunction(o)?({index:e})=>o(e):o),[o]),c=s.useRateInstance(i);return e.jsx(t.Rate,{ref:c,character:n,...u})}));o.displayName="VefRate",exports.default=o;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react = require('react');
+const useRateInstance = require('./hooks/use-rate-instance.cjs');
+
+const VefRate = react.forwardRef(({
+  character,
+  ...restProps
+}, ref) => {
+  const characterValue = react.useMemo(() => {
+    if (shared.isFunction(character)) {
+      return ({ index }) => character(index);
+    }
+    return character;
+  }, [character]);
+  const rateRef = useRateInstance.useRateInstance(ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Rate,
+    {
+      ref: rateRef,
+      character: characterValue,
+      ...restProps
+    }
+  );
+});
+VefRate.displayName = "VefRate";
+
+exports.default = VefRate;
 /*! 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/lib/vef-rate/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-responsive-container/index.cjs

@@ -1,7 +1,62 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),i=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),t=require("motion/react"),n=require("react"),s=require("../vef-responsive-item/index.cjs"),a=r.css`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react$2 = require('motion/react');
+const react$1 = require('react');
+const index = require('../vef-responsive-item/index.cjs');
+
+const containerStyle = react.css`
   display: grid;
   grid-template-columns: repeat(var(--vef-responsive-container-auto-mode), minmax(var(--vef-responsive-container-base-width), 1fr));
   gap: var(--vef-responsive-container-gap);
-`,m=n.forwardRef((({style:r,baseItemWidth:m=320,autoExpand:u=!0,gap:f=0,children:p,...v},d)=>{if(m%2!=0)throw new Error("VefResponsiveContainer: baseItemWidth must be an even number.");n.Children.forEach(p,(e=>{if(!n.isValidElement(e)||e.type!==s.default)throw new Error("VefResponsiveContainer: children must be a VefResponsiveItem element.")}));const c=i.useGapSizeNormalizer(),l=n.useMemo((()=>o.isArray(f)?f.map((e=>c(e))).join(" "):c(f)),[f,c]),h=n.useMemo((()=>{const e=u?"auto-fit":"auto-fill";return{...r,"--vef-responsive-container-auto-mode":e,"--vef-responsive-container-base-width":m/2+"px","--vef-responsive-container-gap":l}}),[u,m,l,r]);return e.jsx(t.motion.div,{ref:d,css:a,style:h,...v,children:p})})),u=n.memo(m);u.displayName="VefResponsiveContainer",exports.default=u;
+`;
+const VefResponsiveContainerBase = react$1.forwardRef(({
+  style,
+  baseItemWidth = 320,
+  autoExpand = true,
+  gap = 0,
+  children,
+  ...restProps
+}, ref) => {
+  if (baseItemWidth % 2 !== 0) {
+    throw new Error("VefResponsiveContainer: baseItemWidth must be an even number.");
+  }
+  react$1.Children.forEach(children, (child) => {
+    if (!react$1.isValidElement(child) || child.type !== index.default) {
+      throw new Error("VefResponsiveContainer: children must be a VefResponsiveItem element.");
+    }
+  });
+  const normalizeGapSize = hooks.useGapSizeNormalizer();
+  const normalizedGap = react$1.useMemo(() => {
+    if (shared.isArray(gap)) {
+      return gap.map((it) => normalizeGapSize(it)).join(" ");
+    }
+    return normalizeGapSize(gap);
+  }, [gap, normalizeGapSize]);
+  const mergedStyle = react$1.useMemo(() => {
+    const autoMode = autoExpand ? "auto-fit" : "auto-fill";
+    return {
+      ...style,
+      "--vef-responsive-container-auto-mode": autoMode,
+      "--vef-responsive-container-base-width": `${baseItemWidth / 2}px`,
+      "--vef-responsive-container-gap": normalizedGap
+    };
+  }, [
+    autoExpand,
+    baseItemWidth,
+    normalizedGap,
+    style
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react$2.motion.div, { ref, css: containerStyle, style: mergedStyle, ...restProps, children });
+});
+const VefResponsiveContainer = react$1.memo(VefResponsiveContainerBase);
+VefResponsiveContainer.displayName = "VefResponsiveContainer";
+
+exports.default = VefResponsiveContainer;
 /*! 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/lib/vef-responsive-container/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-responsive-item/index.cjs

@@ -1,5 +1,29 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),s=require("motion/react"),t=require("react"),i=r.css`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const react$2 = require('motion/react');
+const react$1 = require('react');
+
+const itemStyle = react.css`
   grid-column: span var(--vef-responsive-item-span);
-`,o=t.forwardRef((({style:r,span:o=1,children:n,...a},u)=>{const c=t.useMemo((()=>({...r,"--vef-responsive-item-span":2*o})),[o,r]);return e.jsx(s.motion.div,{ref:u,css:i,style:c,...a,children:n})}));o.displayName="VefResponsiveItem",exports.default=o;
+`;
+const VefResponsiveItem = react$1.forwardRef(({
+  style,
+  span = 1,
+  children,
+  ...restProps
+}, ref) => {
+  const mergedStyle = react$1.useMemo(() => ({
+    ...style,
+    "--vef-responsive-item-span": span * 2
+  }), [span, style]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react$2.motion.div, { ref, css: itemStyle, style: mergedStyle, ...restProps, children });
+});
+VefResponsiveItem.displayName = "VefResponsiveItem";
+
+exports.default = VefResponsiveItem;
 /*! 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/lib/vef-responsive-item/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-ribbon/index.cjs

@@ -1,3 +1,43 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),o=require("@vef-framework/hooks"),r=require("antd"),t=require("react"),{Ribbon:n}=r.Badge;exports.default=function VefRibbon({color:r,position:i="right",children:s}){const u=o.useColorTokens(),a=t.useMemo((()=>{if(!r)return{placement:"right"===i?"end":"start",text:s};if(u.has(r))return{color:r?u.get(r):void 0,placement:"right"===i?"end":"start",text:s};throw new Error(`Invalid color value "${r}" of VefRibbon component. Color must be a valid color token.`)}),[s,r,u,i]);return e.jsx(n,{...a})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const hooks = require('@vef-framework/hooks');
+const antd = require('antd');
+const react = require('react');
+
+const { Ribbon } = antd.Badge;
+function VefRibbon({
+  color,
+  position = "right",
+  children
+}) {
+  const colorTokens = hooks.useColorTokens();
+  const ribbonProps = react.useMemo(() => {
+    if (!color) {
+      return {
+        placement: position === "right" ? "end" : "start",
+        text: children
+      };
+    }
+    if (colorTokens.has(color)) {
+      return {
+        color: color ? colorTokens.get(color) : void 0,
+        placement: position === "right" ? "end" : "start",
+        text: children
+      };
+    }
+    throw new Error(`Invalid color value "${color}" of VefRibbon component. Color must be a valid color token.`);
+  }, [
+    children,
+    color,
+    colorTokens,
+    position
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Ribbon, { ...ribbonProps });
+}
+
+exports.default = VefRibbon;
 /*! 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/lib/vef-ribbon/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-row/index.cjs

@@ -1,3 +1,17 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),o=require("antd");function VefRow({...t}){return e.jsx(o.Row,{...t})}VefRow.displayName="VefRow",exports.default=VefRow;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+
+function VefRow({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { ...props });
+}
+VefRow.displayName = "VefRow";
+
+exports.default = VefRow;
 /*! 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/lib/vef-row/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-scroll-area/components/scrollbar.cjs

@@ -1,34 +1,64 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@emotion/react/jsx-runtime"),e=require("@emotion/react"),a=require("@radix-ui/react-scroll-area"),o=require("@vef-framework/shared"),l=require("react"),i=e.css`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const reactScrollArea = require('@radix-ui/react-scroll-area');
+const shared = require('@vef-framework/shared');
+const react$1 = require('react');
+
+const scrollbarStyle = react.css`
   --vef-scroll-area-scrollbar-padding: 2px;
 
   display: flex;
   touch-action: none;
   user-select: none;
-`,t=e.css`
+`;
+const verticalScrollbarStyle = react.css`
   height: 100%;
   width: var(--vef-scroll-area-scrollbar-size);
   border-left-width: 1px;
   border-left-color: transparent;
   padding: var(--vef-scroll-area-scrollbar-padding);
-`,s=e.css`
+`;
+const horizontalScrollbarStyle = react.css`
   flex-direction: column;
   height: var(--vef-scroll-area-scrollbar-size);
   border-top-width: 1px;
   border-top-color: transparent;
   padding: var(--vef-scroll-area-scrollbar-padding);
-`,c=e.css`
+`;
+const thumbStyle = react.css`
   position: relative;
   z-index: 2;
   flex: 1;
   border-radius: calc(var(--vef-scroll-area-scrollbar-size) - var(--vef-scroll-area-scrollbar-padding) * 2);
   background-color: hsl(240 5.9% 90%);
   transition-property: background-color;
-  transition-timing-function: ${o.themeVariables.motionEaseInOutCirc};
-  transition-duration: ${o.themeVariables.motionDurationMid};
+  transition-timing-function: ${shared.themeVariables.motionEaseInOutCirc};
+  transition-duration: ${shared.themeVariables.motionDurationMid};
 
   &:hover {
     background-color: hsl(240 5.9% 84%);
   }
-`,n=l.forwardRef((({orientation:e="vertical",...o},l)=>r.jsx(a.ScrollAreaScrollbar,{ref:l,orientation:e,css:[i,"vertical"===e&&t,"horizontal"===e&&s],...o,children:r.jsx(a.ScrollAreaThumb,{css:c})})));n.displayName="VefScrollbar",exports.default=n;
+`;
+const VefScrollbar = react$1.forwardRef(({ orientation = "vertical", ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  reactScrollArea.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    css: [
+      scrollbarStyle,
+      orientation === "vertical" && verticalScrollbarStyle,
+      orientation === "horizontal" && horizontalScrollbarStyle
+    ],
+    ...restProps,
+    children: /* @__PURE__ */ jsxRuntime.jsx(reactScrollArea.ScrollAreaThumb, { css: thumbStyle })
+  }
+));
+VefScrollbar.displayName = "VefScrollbar";
+
+exports.default = VefScrollbar;
 /*! 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/lib/vef-scroll-area/index.cjs

@@ -1,13 +1,82 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),o=require("@radix-ui/react-scroll-area"),t=require("@vef-framework/shared"),l=require("react"),i=require("./components/scrollbar.cjs"),s=r.css`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const reactScrollArea = require('@radix-ui/react-scroll-area');
+const shared = require('@vef-framework/shared');
+const react$1 = require('react');
+const scrollbar = require('./components/scrollbar.cjs');
+
+const scrollAreaStyle = react.css`
   position: relative;
   overflow: hidden;
   height: var(--vef-scroll-area-height, 100%);
   width: var(--vef-scroll-area-width, auto);
-`,a=r.css`
+`;
+const viewportStyle = react.css`
   height: 100%;
   width: 100%;
   border-radius: inherit;
   -webkit-overflow-scrolling: touch;
-`,c=l.forwardRef((({style:r,height:c,width:h,scrollDirection:u="y",scrollbarSize:d="medium",autoHideScrollbar:n=!0,viewportClassName:f,viewportStyle:v,viewportRef:m,onScroll:p,children:w,...x},b)=>{const y=l.useMemo((()=>({...r,"--vef-scroll-area-height":(t.isNumber(c)?`${c}px`:c)??"100%","--vef-scroll-area-width":(t.isNumber(h)?`${h}px`:h)??"auto"})),[c,r,h]),g=l.useMemo((()=>({"--vef-scroll-area-scrollbar-size":"small"===d?"10px":"medium"===d?"12px":"14px"})),[d]),j=l.useMemo((()=>({...v,overflowX:""+("x"===u||"both"===u?"scroll":"hidden"),overflowY:""+("y"===u||"both"===u?"scroll":"hidden")})),[u,v]);return e.jsxs(o.Root,{ref:b,css:s,style:y,type:n?"hover":"auto",...x,children:[e.jsx(o.Viewport,{ref:m,className:f,css:a,style:j,onScroll:p,children:w}),("y"===u||"both"===u)&&e.jsx(i.default,{orientation:"vertical",style:g}),("x"===u||"both"===u)&&e.jsx(i.default,{orientation:"horizontal",style:g}),e.jsx(o.Corner,{})]})}));c.displayName="VefScrollArea",exports.default=c;
+`;
+const VefScrollArea = react$1.forwardRef(({
+  style,
+  height,
+  width,
+  scrollDirection = "y",
+  scrollbarSize = "medium",
+  autoHideScrollbar = true,
+  viewportClassName,
+  viewportStyle: externalViewportStyle,
+  viewportRef,
+  onScroll,
+  children,
+  ...restProps
+}, ref) => {
+  const scrollAreaDynamicStyle = react$1.useMemo(() => ({
+    ...style,
+    "--vef-scroll-area-height": (shared.isNumber(height) ? `${height}px` : height) ?? "100%",
+    "--vef-scroll-area-width": (shared.isNumber(width) ? `${width}px` : width) ?? "auto"
+  }), [height, style, width]);
+  const scrollbarSizeStyle = react$1.useMemo(() => ({
+    "--vef-scroll-area-scrollbar-size": scrollbarSize === "small" ? "10px" : scrollbarSize === "medium" ? "12px" : "14px"
+  }), [scrollbarSize]);
+  const viewportInlineStyle = react$1.useMemo(() => ({
+    ...externalViewportStyle,
+    overflowX: `${scrollDirection === "x" || scrollDirection === "both" ? "scroll" : "hidden"}`,
+    overflowY: `${scrollDirection === "y" || scrollDirection === "both" ? "scroll" : "hidden"}`
+  }), [scrollDirection, externalViewportStyle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactScrollArea.Root,
+    {
+      ref,
+      css: scrollAreaStyle,
+      style: scrollAreaDynamicStyle,
+      type: autoHideScrollbar ? "hover" : "auto",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactScrollArea.Viewport,
+          {
+            ref: viewportRef,
+            className: viewportClassName,
+            css: viewportStyle,
+            style: viewportInlineStyle,
+            onScroll,
+            children
+          }
+        ),
+        (scrollDirection === "y" || scrollDirection === "both") && /* @__PURE__ */ jsxRuntime.jsx(scrollbar.default, { orientation: "vertical", style: scrollbarSizeStyle }),
+        (scrollDirection === "x" || scrollDirection === "both") && /* @__PURE__ */ jsxRuntime.jsx(scrollbar.default, { orientation: "horizontal", style: scrollbarSizeStyle }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactScrollArea.Corner, {})
+      ]
+    }
+  );
+});
+VefScrollArea.displayName = "VefScrollArea";
+
+exports.default = VefScrollArea;
 /*! 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/lib/vef-scroll-area/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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 */