@vef-framework/components 1.0.63 → 1.0.64

package/lib/vef-select/hooks/use-data-options.cjs

@@ -1,3 +1,52 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),i=require("react");exports.useDataOptions=function({value:t,grouped:a=!1,multiple:n=!1,onChange:r,...s}){const{onFilterKeywordChange:l,normalizedOptions:u,defaultOption:p,isLoading:d,fallbackOptions:c,isFallbackOptionsLoading:f}=e.useComputedOptions({...s,isGrouped:a,selectedOptionValues:o.isArray(t)?t:t?[t]:[]});return i.useLayoutEffect((()=>{p&&o.isFunction(r)&&o.isNullish(t)&&r(n?[p.value]:p.value,n?[p]:p)}),[p,n,r,t]),{onFilterKeywordChange:l,normalizedOptions:u,isLoading:d,fallbackOptions:c,isFallbackOptionsLoading:f}};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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,
+  grouped = false,
+  multiple = false,
+  onChange,
+  ...rest
+}) {
+  const {
+    onFilterKeywordChange,
+    normalizedOptions,
+    defaultOption,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  } = hooks.useComputedOptions({
+    ...rest,
+    isGrouped: grouped,
+    selectedOptionValues: shared.isArray(value) ? value : value ? [value] : []
+  });
+  react.useLayoutEffect(() => {
+    if (defaultOption && shared.isFunction(onChange) && shared.isNullish(value)) {
+      onChange(
+        multiple ? [defaultOption.value] : defaultOption.value,
+        multiple ? [defaultOption] : defaultOption
+      );
+    }
+  }, [
+    defaultOption,
+    multiple,
+    onChange,
+    value
+  ]);
+  return {
+    onFilterKeywordChange,
+    normalizedOptions,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  };
+}
+
+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-select/hooks/use-field-names.cjs

@@ -1,3 +1,26 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useFieldNames=function(l){return e.useMemo((()=>l?{label:"label",value:"value",options:"children",groupLabel:"label"}:{label:"label",value:"value"}),[l])};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useFieldNames(grouped) {
+  return react.useMemo(() => {
+    if (grouped) {
+      return {
+        label: "label",
+        value: "value",
+        options: "children",
+        groupLabel: "label"
+      };
+    }
+    return {
+      label: "label",
+      value: "value"
+    };
+  }, [grouped]);
+}
+
+exports.useFieldNames = useFieldNames;
 /*! 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-select/hooks/use-render-label.cjs

@@ -1,10 +1,34 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),r=require("@ant-design/icons"),i=require("@emotion/react"),n=require("react"),t=require("../../vef-spin/index.cjs"),s=i.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const Icon = require('@ant-design/icons');
+const react = require('@emotion/react');
+const react$1 = require('react');
+const index = require('../../vef-spin/index.cjs');
+
+const loadingPlaceholderStyle = react.css`
   display: inline-flex;
   align-items: center;
 
   .vef-spin {
     color: inherit;
   }
-`;exports.useRenderLabel=function(i,l){return n.useCallback((({label:n,value:a})=>{if(n)return n;if(i)return e.jsx("span",{css:s,children:e.jsx(t.default,{indicator:e.jsx(r.LoadingOutlined,{}),size:"small"})});const u=l?.find((e=>e.value===a));return u?.label??a}),[i,l])};
+`;
+function useRenderLabel(isFallbackOptionsLoading, fallbackOptions) {
+  return react$1.useCallback(({ label, value }) => {
+    if (label) {
+      return label;
+    }
+    if (isFallbackOptionsLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { css: loadingPlaceholderStyle, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { indicator: /* @__PURE__ */ jsxRuntime.jsx(Icon.LoadingOutlined, {}), size: "small" }) });
+    }
+    const fallbackOption = fallbackOptions?.find((option) => option.value === value);
+    return fallbackOption?.label ?? value;
+  }, [isFallbackOptionsLoading, fallbackOptions]);
+}
+
+exports.useRenderLabel = useRenderLabel;
 /*! 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-select/hooks/use-render-option.cjs

@@ -1,3 +1,24 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/shared"),t=require("react"),i=require("../components/option.cjs");exports.useRenderOption=function(n){return t.useMemo((()=>r.isFunction(n)?({data:e},{index:r})=>n({...e,index:r}):({data:{label:r,description:t}})=>e.jsx(i.default,{description:t,label:r??"Missing Label"})),[n])};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const option = require('../components/option.cjs');
+
+function useRenderOption(renderOption) {
+  return react.useMemo(() => {
+    if (shared.isFunction(renderOption)) {
+      return ({ data }, { index }) => renderOption({
+        ...data,
+        index
+      });
+    }
+    return ({ data: { label, description } }) => /* @__PURE__ */ jsxRuntime.jsx(option.default, { description, label: label ?? "Missing Label" });
+  }, [renderOption]);
+}
+
+exports.useRenderOption = useRenderOption;
 /*! 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-select/hooks/use-select-instance.cjs

@@ -1,3 +1,25 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useSelectInstance=function(t,r){const u=e.useRef(null);return e.useImperativeHandle(t,(()=>({blur:()=>{u.current?.blur()},focus:()=>{u.current?.focus({preventScroll:!0})},getDataOptions:()=>r}))),u};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useSelectInstance(ref, dataOptions) {
+  const selectRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => {
+      selectRef.current?.blur();
+    },
+    focus: () => {
+      selectRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    getDataOptions: () => dataOptions
+  }));
+  return selectRef;
+}
+
+exports.useSelectInstance = useSelectInstance;
 /*! 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-select/index.cjs

@@ -1,3 +1,105 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, 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("@vef-framework/shared"),i=require("antd"),t=require("react");require("../internal/index.cjs");const l=require("../vef-loading-placeholder/index.cjs"),n=require("./hooks/use-data-options.cjs"),s=require("./hooks/use-field-names.cjs"),a=require("./hooks/use-render-label.cjs"),u=require("./hooks/use-render-option.cjs"),d=require("./hooks/use-select-instance.cjs"),c=require("../internal/utils.cjs"),p=e.jsx("div",{css:{height:140},children:e.jsx(l.default,{})});const f=t.memo(t.forwardRef((function({defaultValue:t,value:l,size:f,clearable:m,disabled:h,placeholder:v,variant:g,onClear:j,onBlur:q,onFocus:b,onChange:x,onSelect:C,onDeselect:S,multiple:k=!1,grouped:F=!1,maxCount:O,renderOption:R,filterable:w=!0,filterFromRemote:z=!1,...y},B){const{onFilterKeywordChange:D,normalizedOptions:L,isLoading:N,fallbackOptions:T,isFallbackOptionsLoading:V}=n.useDataOptions({value:l,grouped:F,multiple:k,onChange:x,filterable:w,filterFromRemote:z,...y}),M=u.useRenderOption(R),_=o.useOptionFilter(w,z),A=s.useFieldNames(F),H=a.useRenderLabel(V,T),I=d.useSelectInstance(B,L);return e.jsx(i.Select,{ref:I,defaultActiveFirstOption:!0,allowClear:m,css:r.styles.fullWidth,defaultValue:t,disabled:h,fieldNames:A,filterOption:_,labelRender:H,listHeight:280,loading:N,maxCount:k?O:void 0,maxTagCount:k?"responsive":void 0,mode:k?"multiple":void 0,notFoundContent:N?p:void 0,optionRender:M,options:L,placeholder:v,showSearch:w,size:c.convertBasicSizeToUiSize(f),value:l,variant:g,onBlur:q,onChange:x,onClear:j,onDeselect:S,onFocus:b,onSearch:D,onSelect:C})})));f.displayName="VefSelect",exports.default=f;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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 shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react = require('react');
+require('../internal/index.cjs');
+const index = require('../vef-loading-placeholder/index.cjs');
+const useDataOptions = require('./hooks/use-data-options.cjs');
+const useFieldNames = require('./hooks/use-field-names.cjs');
+const useRenderLabel = require('./hooks/use-render-label.cjs');
+const useRenderOption = require('./hooks/use-render-option.cjs');
+const useSelectInstance = require('./hooks/use-select-instance.cjs');
+const utils = require('../internal/utils.cjs');
+
+const listHeight = 280;
+const loadingPlaceholder = /* @__PURE__ */ jsxRuntime.jsx("div", { css: { height: listHeight / 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, {}) });
+function VefSelectBase({
+  defaultValue,
+  value,
+  size,
+  clearable,
+  disabled,
+  placeholder,
+  variant,
+  onClear,
+  onBlur,
+  onFocus,
+  onChange,
+  onSelect,
+  onDeselect,
+  multiple = false,
+  grouped = false,
+  maxCount,
+  renderOption,
+  filterable = true,
+  filterFromRemote = false,
+  ...restProps
+}, ref) {
+  const {
+    onFilterKeywordChange,
+    normalizedOptions,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  } = useDataOptions.useDataOptions({
+    value,
+    grouped,
+    multiple,
+    onChange,
+    filterable,
+    filterFromRemote,
+    ...restProps
+  });
+  const renderOptionToUse = useRenderOption.useRenderOption(renderOption);
+  const filterOption = hooks.useOptionFilter(filterable, filterFromRemote);
+  const fieldNames = useFieldNames.useFieldNames(grouped);
+  const renderLabel = useRenderLabel.useRenderLabel(isFallbackOptionsLoading, fallbackOptions);
+  const selectRef = useSelectInstance.useSelectInstance(ref, normalizedOptions);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Select,
+    {
+      ref: selectRef,
+      defaultActiveFirstOption: true,
+      allowClear: clearable,
+      css: shared.styles.fullWidth,
+      defaultValue,
+      disabled,
+      fieldNames,
+      filterOption,
+      labelRender: renderLabel,
+      listHeight,
+      loading: isLoading,
+      maxCount: multiple ? maxCount : void 0,
+      maxTagCount: multiple ? "responsive" : void 0,
+      mode: multiple ? "multiple" : void 0,
+      notFoundContent: isLoading ? loadingPlaceholder : void 0,
+      optionRender: renderOptionToUse,
+      options: normalizedOptions,
+      placeholder,
+      showSearch: filterable,
+      size: utils.convertBasicSizeToUiSize(size),
+      value,
+      variant,
+      onBlur,
+      onChange,
+      onClear,
+      onDeselect,
+      onFocus,
+      onSearch: onFilterKeywordChange,
+      onSelect
+    }
+  );
+}
+const VefSelect = react.memo(
+  react.forwardRef(VefSelectBase)
+);
+VefSelect.displayName = "VefSelect";
+
+exports.default = VefSelect;
 /*! 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-select/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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-slider/hooks/use-slider-instance.cjs

@@ -1,3 +1,18 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useSliderInstance=function(r){const t=e.useRef(null);return e.useImperativeHandle(r,(()=>({blur:()=>t.current?.blur(),focus:()=>t.current?.focus()}))),t};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useSliderInstance(ref) {
+  const sliderRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => sliderRef.current?.blur(),
+    focus: () => sliderRef.current?.focus()
+  }));
+  return sliderRef;
+}
+
+exports.useSliderInstance = useSliderInstance;
 /*! 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-slider/index.cjs

@@ -1,3 +1,39 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("antd"),t=require("react"),o=require("./hooks/use-slider-instance.cjs"),s=t.forwardRef((({step:s,tipFormatter:i,onChange:n,...a},u)=>{const l=t.useMemo((()=>{if(i)return{formatter:e=>i(e)}}),[i]),d=o.useSliderInstance(u);return e.jsx(r.Slider,{ref:d,step:"mark"===s?null:s,tooltip:l,onChange:n,...a})}));s.displayName="VefSlider",exports.default=s;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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');
+const react = require('react');
+const useSliderInstance = require('./hooks/use-slider-instance.cjs');
+
+const VefSlider = react.forwardRef(({
+  step,
+  tipFormatter,
+  onChange,
+  ...restProps
+}, ref) => {
+  const tooltipProps = react.useMemo(() => {
+    if (tipFormatter) {
+      return {
+        formatter: (value) => tipFormatter(value)
+      };
+    }
+  }, [tipFormatter]);
+  const sliderRef = useSliderInstance.useSliderInstance(ref);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Slider,
+    {
+      ref: sliderRef,
+      step: step === "mark" ? null : step,
+      tooltip: tooltipProps,
+      onChange,
+      ...restProps
+    }
+  );
+});
+VefSlider.displayName = "VefSlider";
+
+exports.default = VefSlider;
 /*! 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-slider/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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-sortable-list/components/overlay-item.cjs

@@ -1,7 +1,39 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),n=require("@ant-design/icons"),s=require("@emotion/react"),t=e.jsx(n.HolderOutlined,{}),r=s.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const Icon = require('@ant-design/icons');
+const react = require('@emotion/react');
+
+const defaultHandleIcon = /* @__PURE__ */ jsxRuntime.jsx(Icon.HolderOutlined, {});
+const handlePresetStyle = react.css`
   cursor: move;
   user-select: none;
   touch-action: none;
-`;exports.default=function({item:n,renderItem:s,useHandle:o,handleClassName:i,handleStyle:l,handleIcon:a}){return e.jsxs(e.Fragment,{children:[o&&e.jsx("div",{className:i,css:r,style:l,children:a??t}),s(n,!0)]})};
+`;
+function VefOverlayItem({
+  item,
+  renderItem,
+  useHandle,
+  handleClassName,
+  handleStyle,
+  handleIcon
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    useHandle && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: handleClassName,
+        css: handlePresetStyle,
+        style: handleStyle,
+        children: handleIcon ?? defaultHandleIcon
+      }
+    ),
+    renderItem(item, true)
+  ] });
+}
+
+exports.default = VefOverlayItem;
 /*! 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-sortable-list/components/sortable-item.cjs

@@ -1,7 +1,83 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@ant-design/icons"),s=require("@dnd-kit/sortable"),i=require("@dnd-kit/utilities"),r=require("@emotion/react"),n=e.jsx(t.HolderOutlined,{}),a=r.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const Icon = require('@ant-design/icons');
+const sortable = require('@dnd-kit/sortable');
+const utilities = require('@dnd-kit/utilities');
+const react = require('@emotion/react');
+
+const defaultHandleIcon = /* @__PURE__ */ jsxRuntime.jsx(Icon.HolderOutlined, {});
+const handlePresetStyle = react.css`
   cursor: move;
   user-select: none;
   touch-action: none;
-`;exports.default=function({item:t,itemKey:r,itemIndex:o,itemClassName:d,itemStyle:l,renderItem:u,useHandle:c,useOverlay:m,handleClassName:f,handleStyle:x,handleIcon:v,disabled:S}){const{isDragging:b,attributes:g,listeners:y,setNodeRef:h,setActivatorNodeRef:N,transition:j,transform:q}=s.useSortable({id:r,disabled:S,data:{index:o}}),p={...l,transition:j,transform:i.CSS.Transform.toString(q),...!m&&b?{position:"relative",zIndex:999}:{}};return e.jsxs("div",{ref:h,className:d,style:p,...g,...c?{}:y,children:[c&&e.jsx("div",{ref:N,className:f,css:a,style:x,...y,children:v??n}),u(t,!1)]})};
+`;
+function VefSortableItem({
+  item,
+  itemKey,
+  itemIndex,
+  itemClassName,
+  itemStyle,
+  renderItem,
+  useHandle,
+  useOverlay,
+  handleClassName,
+  handleStyle,
+  handleIcon,
+  disabled
+}) {
+  const {
+    isDragging,
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transition,
+    transform
+  } = sortable.useSortable({
+    id: itemKey,
+    disabled,
+    data: {
+      index: itemIndex
+    }
+  });
+  const style = {
+    ...itemStyle,
+    transition,
+    transform: utilities.CSS.Transform.toString(transform),
+    ...!useOverlay && isDragging ? {
+      position: "relative",
+      zIndex: 999
+    } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: itemClassName,
+      style,
+      ...attributes,
+      ...useHandle ? {} : listeners,
+      children: [
+        useHandle && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            className: handleClassName,
+            css: handlePresetStyle,
+            style: handleStyle,
+            ...listeners,
+            children: handleIcon ?? defaultHandleIcon
+          }
+        ),
+        renderItem(item, false)
+      ]
+    }
+  );
+}
+
+exports.default = VefSortableItem;
 /*! 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-sortable-list/hooks/use-merged-items.cjs

@@ -1,3 +1,26 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),t=require("react");exports.useMergedItems=function(r,s,o){if(e.isNullish(r)&&e.isNullish(s))throw new Error("At least one of `defaultItems` and `items` must be provided for VefSortableList component.");const[i,u]=t.useState(r??[]);return[s??i,t.useCallback((e=>{s?o?.(e(s)):u(e)}),[s,o])]};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useMergedItems(defaultItems, items, onChange) {
+  if (shared.isNullish(defaultItems) && shared.isNullish(items)) {
+    throw new Error("At least one of `defaultItems` and `items` must be provided for VefSortableList component.");
+  }
+  const [internalItems, setInternalItems] = react.useState(defaultItems ?? []);
+  const mergedItems = items ?? internalItems;
+  const mergedOnChange = react.useCallback((moveItems) => {
+    if (items) {
+      onChange?.(moveItems(items));
+    } else {
+      setInternalItems(moveItems);
+    }
+  }, [items, onChange]);
+  return [mergedItems, mergedOnChange];
+}
+
+exports.useMergedItems = useMergedItems;
 /*! 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-sortable-list/index.cjs

@@ -1,3 +1,119 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@dnd-kit/core"),r=require("@dnd-kit/modifiers"),s=require("@dnd-kit/sortable"),i=require("@vef-framework/shared"),a=require("react"),n=require("./components/overlay-item.cjs"),o=require("./components/sortable-item.cjs"),d=require("./hooks/use-merged-items.cjs");const l=a.memo((function({defaultItems:l,items:c,itemKey:m="id",className:u,style:g,orientation:y="vertical",useOverlay:v=!0,restrictStrategy:x="parent",onChange:S,...p}){const[f,j]=d.useMergedItems(l,c,S),b=t.useSensors(t.useSensor(t.PointerSensor)),q=a.useMemo((()=>i.isFunction(m)?m:e=>e[m]),[m]),[h,k]=a.useState(),C=a.useCallback((({active:e})=>{k(f[e.data.current.index])}),[f]),E=a.useCallback((({active:e,over:t})=>{t&&e.id!==t.id&&j((r=>s.arrayMove(r,e.data.current.index,t.data.current.index)))}),[j]),D=f.map((e=>q(e))),{itemClassName:M,itemStyle:N,disabled:T,...w}=p;return e.jsx(t.DndContext,{collisionDetection:t.closestCenter,sensors:b,modifiers:["parent"===x?r.restrictToParentElement:r.restrictToWindowEdges],onDragEnd:E,onDragStart:C,children:e.jsx(s.SortableContext,{items:D,strategy:"vertical"===y?s.verticalListSortingStrategy:s.horizontalListSortingStrategy,children:e.jsxs("div",{className:u,style:g,children:[f.map(((t,r)=>{const s=q(t);return e.jsx(o.default,{item:t,itemIndex:r,itemKey:s,...p},s)})),v&&e.jsx(t.DragOverlay,{className:M,style:N,wrapperElement:"div",modifiers:["parent"===x?r.restrictToParentElement:r.restrictToWindowEdges],children:h&&e.jsx(n.default,{item:h,...w})})]})})})}));l.displayName="VefSortableList",exports.default=l;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const core = require('@dnd-kit/core');
+const modifiers = require('@dnd-kit/modifiers');
+const sortable = require('@dnd-kit/sortable');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const overlayItem = require('./components/overlay-item.cjs');
+const sortableItem = require('./components/sortable-item.cjs');
+const useMergedItems = require('./hooks/use-merged-items.cjs');
+
+const defaultItemKey = "id";
+function VefSortableListBase({
+  defaultItems,
+  items,
+  itemKey = defaultItemKey,
+  className,
+  style,
+  orientation = "vertical",
+  useOverlay = true,
+  restrictStrategy = "parent",
+  onChange,
+  ...restProps
+}) {
+  const [mergedItems, mergedOnChange] = useMergedItems.useMergedItems(defaultItems, items, onChange);
+  const sensors = core.useSensors(core.useSensor(core.PointerSensor));
+  const itemKeyFn = react.useMemo(() => {
+    if (shared.isFunction(itemKey)) {
+      return itemKey;
+    }
+    return (item) => item[itemKey];
+  }, [itemKey]);
+  const [activeItem, setActiveItem] = react.useState();
+  const handleDragStart = react.useCallback(({ active }) => {
+    setActiveItem(mergedItems[active.data.current.index]);
+  }, [mergedItems]);
+  const handleDragEnd = react.useCallback(({ active, over }) => {
+    if (!over) {
+      return;
+    }
+    if (active.id !== over.id) {
+      mergedOnChange(
+        (items2) => sortable.arrayMove(
+          items2,
+          active.data.current.index,
+          over.data.current.index
+        )
+      );
+    }
+  }, [mergedOnChange]);
+  const itemKeys = mergedItems.map((item) => itemKeyFn(item));
+  const {
+    itemClassName,
+    itemStyle,
+    disabled,
+    ...overlayItemProps
+  } = restProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.DndContext,
+    {
+      collisionDetection: core.closestCenter,
+      sensors,
+      modifiers: [
+        restrictStrategy === "parent" ? modifiers.restrictToParentElement : modifiers.restrictToWindowEdges
+      ],
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        sortable.SortableContext,
+        {
+          items: itemKeys,
+          strategy: orientation === "vertical" ? sortable.verticalListSortingStrategy : sortable.horizontalListSortingStrategy,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style, children: [
+            mergedItems.map((item, index) => {
+              const key = itemKeyFn(item);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                sortableItem.default,
+                {
+                  item,
+                  itemIndex: index,
+                  itemKey: key,
+                  ...restProps
+                },
+                key
+              );
+            }),
+            useOverlay && /* @__PURE__ */ jsxRuntime.jsx(
+              core.DragOverlay,
+              {
+                className: itemClassName,
+                style: itemStyle,
+                wrapperElement: "div",
+                modifiers: [
+                  restrictStrategy === "parent" ? modifiers.restrictToParentElement : modifiers.restrictToWindowEdges
+                ],
+                children: activeItem && /* @__PURE__ */ jsxRuntime.jsx(
+                  overlayItem.default,
+                  {
+                    item: activeItem,
+                    ...overlayItemProps
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+const VefSortableList = react.memo(VefSortableListBase);
+VefSortableList.displayName = "VefSortableList";
+
+exports.default = VefSortableList;
 /*! 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 */