@vef-framework/components 1.0.98 → 1.0.99

package/lib/vef-chart-container/index.cjs

@@ -1,18 +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"),t=require("@vef-framework/shared"),o=require("react"),a=require("recharts"),s=require("./hooks/use-chart-container-context.cjs"),c=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 shared = require('@vef-framework/shared');
+const react$1 = require('react');
+const recharts = require('recharts');
+const useChartContainerContext = require('./hooks/use-chart-container-context.cjs');
+
+const chartContainerStyle = react.css`
   display: flex;
   justify-content: center;
   
   & .recharts-cartesian-axis-tick text {
-    fill: ${t.themeVariables.colorTextDescription};
+    fill: ${shared.themeVariables.colorTextDescription};
   }
   
   & .recharts-cartesian-grid line[stroke='#ccc'] {
-    stroke: color-mix(in srgb, ${t.themeVariables.colorBorder} 50%, transparent);
+    stroke: color-mix(in srgb, ${shared.themeVariables.colorBorder} 50%, transparent);
   }
   
   & .recharts-curve.recharts-tooltip-cursor {
-    stroke: ${t.themeVariables.colorBorderSecondary};
+    stroke: ${shared.themeVariables.colorBorderSecondary};
   }
   
   & .recharts-dot[stroke='#fff'] {
@@ -24,19 +35,19 @@
   }
   
   & .recharts-polar-grid[stroke='#ccc'] {
-    stroke: ${t.themeVariables.colorBorderSecondary};
+    stroke: ${shared.themeVariables.colorBorderSecondary};
   }
   
   & .recharts-radial-bar-background-sector {
-    fill: ${t.themeVariables.colorFillContent};
+    fill: ${shared.themeVariables.colorFillContent};
   }
   
   & .recharts-rectangle.recharts-tooltip-cursor {
-    fill: ${t.themeVariables.colorFillContent};
+    fill: ${shared.themeVariables.colorFillContent};
   }
   
   & .recharts-reference-line[stroke='#ccc'] {
-    stroke: ${t.themeVariables.colorBorderSecondary};
+    stroke: ${shared.themeVariables.colorBorderSecondary};
   }
   
   & .recharts-sector[stroke='#fff'] {
@@ -50,5 +61,68 @@
   & .recharts-surface {
     outline: none;
   }
-`;function ChartStyle({id:r,config:o}){const a=Object.entries(o).map((([e,{color:r}])=>[e,r])).filter((([,e])=>t.isString(e)));return a.length?e.jsx("style",{dangerouslySetInnerHTML:{__html:`\n          [data-chart="${r}"] {\n            ${a.map((([e,r])=>`--vef-color-${e}: ${r};`)).join("\n")}\n          }\n        `}}):null}const n=o.forwardRef((({id:r,className:t,children:n,config:i,aspect:l=16/9,width:h="100%",height:d,minWidth:u,minHeight:f,...m},g)=>{const p=o.useId(),k=`${r||p.replace(/:/g,"")}-chart`;return e.jsx(s.ChartContainerContextProvider,{value:{config:i},children:e.jsxs("div",{ref:g,className:t,css:c,"data-chart":k,...m,children:[e.jsx(ChartStyle,{config:i,id:k}),e.jsx(a.ResponsiveContainer,{aspect:l,height:d,minHeight:f,minWidth:u,width:h,children:n})]})})}));n.displayName="VefChartContainer",exports.default=n;
+`;
+function ChartStyle({
+  id,
+  config
+}) {
+  const colors = Object.entries(config).map(([key, { color }]) => [key, color]).filter(([, color]) => shared.isString(color));
+  if (!colors.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `
+          [data-chart="${id}"] {
+            ${colors.map(([key, color]) => `--vef-color-${key}: ${color};`).join("\n")}
+          }
+        `
+      }
+    }
+  );
+}
+const VefChartContainer = react$1.forwardRef(({
+  id,
+  className,
+  children,
+  config,
+  aspect = 16 / 9,
+  width = "100%",
+  height,
+  minWidth,
+  minHeight,
+  ...restProps
+}, ref) => {
+  const uniqueId = react$1.useId();
+  const chartId = `${id || uniqueId.replace(/:/g, "")}-chart`;
+  return /* @__PURE__ */ jsxRuntime.jsx(useChartContainerContext.ChartContainerContextProvider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className,
+      css: chartContainerStyle,
+      "data-chart": chartId,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChartStyle, { config, id: chartId }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.ResponsiveContainer,
+          {
+            aspect,
+            height,
+            minHeight,
+            minWidth,
+            width,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+});
+VefChartContainer.displayName = "VefChartContainer";
+
+exports.default = VefChartContainer;
 /*! 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-chart-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-chart-legend-content/index.cjs

@@ -1,18 +1,55 @@
-/*! 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"),a=require("@vef-framework/shared"),t=require("react");require("../internal/index.cjs");const s=require("../vef-chart-container/hooks/use-chart-container-context.cjs"),o=require("../internal/chart.cjs"),i=r.css`
-  ${a.styles.flexCenter}
-  gap: ${a.themeVariables.margin};
-  padding-top: ${a.themeVariables.marginSm};
-`,n=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 shared = require('@vef-framework/shared');
+const react$1 = require('react');
+require('../internal/index.cjs');
+const useChartContainerContext = require('../vef-chart-container/hooks/use-chart-container-context.cjs');
+const chart = require('../internal/chart.cjs');
+
+const chartLegendContentStyle = react.css`
+  ${shared.styles.flexCenter}
+  gap: ${shared.themeVariables.margin};
+  padding-top: ${shared.themeVariables.marginSm};
+`;
+const itemStyle = react.css`
   display: flex;
   align-items: center;
-  gap: ${a.themeVariables.marginXs};
-  color: ${a.themeVariables.colorTextLabel};
-`,l=r.css`
+  gap: ${shared.themeVariables.marginXs};
+  color: ${shared.themeVariables.colorTextLabel};
+`;
+const indicatorStyle = react.css`
   flex: none;
   width: 0.75rem;
   height: 0.75rem;
-  border-radius: ${a.themeVariables.borderRadiusXs};
+  border-radius: ${shared.themeVariables.borderRadiusXs};
   background-color: var(--vef-indicator-color);
-`,c=t.forwardRef((({className:r,payload:a},t)=>{const c=s.useChartContainerContextSelector((e=>e.config));return a?.length?e.jsx("div",{ref:t,className:r,css:i,children:a.map((r=>{const a=`${r.dataKey||"value"}`,t=o.getPayloadConfigFromPayload(r,a,c);return e.jsxs("div",{css:n,children:[e.jsx("div",{css:l,style:{"--vef-indicator-color":r.color}}),t?.label]},r.value)}))}):null}));c.displayName="VefChartLegendContent",exports.VefChartLegendContent=c,exports.default=c;
+`;
+const VefChartLegendContent = react$1.forwardRef(({
+  className,
+  payload
+}, ref) => {
+  const config = useChartContainerContext.useChartContainerContextSelector((ctx) => ctx.config);
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, css: chartLegendContentStyle, children: payload.map(
+    (item) => {
+      const key = `${item.dataKey || "value"}`;
+      const itemConfig = chart.getPayloadConfigFromPayload(item, key, config);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: itemStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: indicatorStyle, style: { "--vef-indicator-color": item.color } }),
+        itemConfig?.label
+      ] }, item.value);
+    }
+  ) });
+});
+VefChartLegendContent.displayName = "VefChartLegendContent";
+
+exports.VefChartLegendContent = VefChartLegendContent;
+exports.default = VefChartLegendContent;
 /*! 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-chart-legend-content/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-chart-tooltip-content/index.cjs

@@ -1,44 +1,110 @@
-/*! 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"),a=require("@emotion/react"),r=require("@vef-framework/shared"),s=require("react");require("../internal/index.cjs");const i=require("../vef-chart-container/hooks/use-chart-container-context.cjs"),l=require("../internal/chart.cjs"),t=a.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 shared = require('@vef-framework/shared');
+const react$1 = require('react');
+require('../internal/index.cjs');
+const useChartContainerContext = require('../vef-chart-container/hooks/use-chart-container-context.cjs');
+const chart = require('../internal/chart.cjs');
+
+const wrapperStyle = react.css`
   display: grid;
   min-width: 10rem;
   align-items: start;
-  gap: ${r.themeVariables.marginXs};
-  border-radius: ${r.themeVariables.borderRadius};
-  border: ${r.themeVariables.lineWidth} ${r.themeVariables.lineType} ${r.themeVariables.colorBorderSecondary};
-  background: ${r.themeVariables.colorBgContainer};
-  padding: ${r.themeVariables.paddingXs} ${r.themeVariables.paddingSm};
-  box-shadow: ${r.themeVariables.boxShadowSecondary};
-  color: ${r.themeVariables.colorTextLabel}
-`,o=a.css`
+  gap: ${shared.themeVariables.marginXs};
+  border-radius: ${shared.themeVariables.borderRadius};
+  border: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorBorderSecondary};
+  background: ${shared.themeVariables.colorBgContainer};
+  padding: ${shared.themeVariables.paddingXs} ${shared.themeVariables.paddingSm};
+  box-shadow: ${shared.themeVariables.boxShadowSecondary};
+  color: ${shared.themeVariables.colorTextLabel}
+`;
+const itemsWrapperStyle = react.css`
   display: grid;
-  gap: ${r.themeVariables.marginXs};
-`,n=a.css`
+  gap: ${shared.themeVariables.marginXs};
+`;
+const labelStyle = react.css`
   font-weight: 500;
-`,c=a.css`
+`;
+const itemStyle = react.css`
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   align-items: center;
-  gap: ${r.themeVariables.marginXs};
-`,d=a.css`
+  gap: ${shared.themeVariables.marginXs};
+`;
+const indicatorStyle = react.css`
   height: 0.75rem;
   width: 0.75rem;
   flex: none;
-  border-radius: ${r.themeVariables.borderRadiusXs};
+  border-radius: ${shared.themeVariables.borderRadiusXs};
   border-color: var(--vef-indicator-color);
   background-color: var(--vef-indicator-color);
-`,m=a.css`
+`;
+const itemContentStyle = react.css`
   display: flex;
   flex: 1;
   justify-content: space-between;
   align-items: center;
-  gap: ${r.themeVariables.marginXs};
+  gap: ${shared.themeVariables.marginXs};
   line-height: 1;
-`,h=a.css`
-  color: ${r.themeVariables.colorTextDescription};
-`,u=a.css`
+`;
+const itemLabelStyle = react.css`
+  color: ${shared.themeVariables.colorTextDescription};
+`;
+const itemValueStyle = react.css`
   font-weight: 500;
-  font-family: ${r.themeVariables.fontFamilyCode};
-`,b=s.forwardRef((({active:a,payload:b,className:g,label:f,labelFormatter:p,labelClassName:v,formatter:x,valueFormatter:y,color:$,hideLabel:V=!1},j)=>{const w=i.useChartContainerContextSelector((e=>e.config)),S=s.useMemo((()=>{if(V||!b?.length)return null;const[a]=b,s=`${a.dataKey||a.name||"value"}`,i=l.getPayloadConfigFromPayload(a,s,w),t=r.isString(f)?f:i?.label;return t?e.jsx("div",{className:v,css:n,children:r.isFunction(p)?p(t,b):t}):null}),[V,b,w,f,v,p]);return a&&b?.length?e.jsxs("div",{ref:j,className:g,css:t,children:[S,e.jsx("div",{css:o,children:b.map(((a,s)=>{const i=`${a.name||a.dataKey||"value"}`,t=l.getPayloadConfigFromPayload(a,i,w),o=$||a.payload.fill||a.color;return e.jsx("div",{css:c,children:x&&!r.isNullish(a?.value)&&a.name?x(a.value,a.name,a,s,a.payload):e.jsxs(e.Fragment,{children:[e.jsx("div",{css:d,style:{"--vef-indicator-color":o}}),e.jsxs("div",{css:m,children:[e.jsx("span",{css:h,children:t?.label||a.name}),a.value&&e.jsx("span",{css:u,children:r.isFunction(y)?y(a.value):a.value.toLocaleString()})]})]})},a.dataKey)}))})]}):null}));exports.default=b;
+  font-family: ${shared.themeVariables.fontFamilyCode};
+`;
+const VefChartTooltipContent = react$1.forwardRef(({
+  active,
+  payload,
+  className,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  valueFormatter,
+  color,
+  hideLabel = false
+}, ref) => {
+  const config = useChartContainerContext.useChartContainerContextSelector((ctx) => ctx.config);
+  const tooltipLabel = react$1.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${item.dataKey || item.name || "value"}`;
+    const itemConfig = chart.getPayloadConfigFromPayload(item, key, config);
+    const labelValue = shared.isString(label) ? label : itemConfig?.label;
+    if (!labelValue) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, css: labelStyle, children: shared.isFunction(labelFormatter) ? labelFormatter(labelValue, payload) : labelValue });
+  }, [hideLabel, payload, config, label, labelClassName, labelFormatter]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className, css: wrapperStyle, children: [
+    tooltipLabel,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: itemsWrapperStyle, children: payload.map((item, index) => {
+      const key = `${item.name || item.dataKey || "value"}`;
+      const itemConfig = chart.getPayloadConfigFromPayload(item, key, config);
+      const indicatorColor = color || item.payload.fill || item.color;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { css: itemStyle, children: formatter && !shared.isNullish(item?.value) && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: indicatorStyle, style: { "--vef-indicator-color": indicatorColor } }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { css: itemContentStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { css: itemLabelStyle, children: itemConfig?.label || item.name }),
+          item.value && /* @__PURE__ */ jsxRuntime.jsx("span", { css: itemValueStyle, children: shared.isFunction(valueFormatter) ? valueFormatter(item.value) : item.value.toLocaleString() })
+        ] })
+      ] }) }, item.dataKey);
+    }) })
+  ] });
+});
+
+exports.default = VefChartTooltipContent;
 /*! 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-chart-tooltip-content/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-checkbox/hooks/use-checkbox-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.useCheckboxInstance=function useCheckboxInstance(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 useCheckboxInstance(ref, dataOptions) {
+  const checkboxRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => {
+      checkboxRef.current?.blur();
+    },
+    focus: () => {
+      checkboxRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    getDataOptions: () => dataOptions
+  }));
+  return checkboxRef;
+}
+
+exports.useCheckboxInstance = useCheckboxInstance;
 /*! 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-checkbox/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}),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
+  });
+  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-checkbox/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"),o=require("@emotion/react"),r=require("@vef-framework/shared"),s=require("antd"),i=require("react"),n=require("../vef-loading-placeholder/index.cjs"),t=require("../vef-tooltip/index.cjs"),a=require("./hooks/use-checkbox-instance.cjs"),u=require("./hooks/use-data-options.cjs"),{Group:c}=s.Checkbox,d=e.jsx("div",{css:o.css`
-      height: ${r.themeVariables.controlHeight}
-    `,children:e.jsx(n.default,{})});const l=i.memo(i.forwardRef((function VefCheckboxBase({defaultValue:o,value:n,disabled:l,renderCheckboxes:h,onChange:x,...f},b){const{optionsMap:p,normalizedOptions:m,isLoading:v}=u.useDataOptions({value:n,onChange:x,...f}),j=a.useCheckboxInstance(b,m),k=i.useMemo((()=>{if(r.isFunction(x))return e=>{x(e,e.map((e=>p.get(e))))}}),[x,p]),g=i.useMemo((()=>{if(v)return;const o=m.map((o=>{const{value:r,label:i,disabled:n,description:a}=o;return a?e.jsx(t.default,{content:a,children:e.jsx(s.Checkbox,{disabled:n,value:r,children:i})},r):e.jsx(s.Checkbox,{disabled:n,value:r,children:i},r)}));return r.isFunction(h)?h(o):o}),[v,m,h]);return v?d:e.jsx(c,{ref:j,defaultValue:o,disabled:l,onChange:k,...void 0===n?{}:{value:n},children:g})})));l.displayName="VefCheckbox",exports.default=l;
+/*! 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');
+const index = require('../vef-loading-placeholder/index.cjs');
+const index$1 = require('../vef-tooltip/index.cjs');
+const useCheckboxInstance = require('./hooks/use-checkbox-instance.cjs');
+const useDataOptions = require('./hooks/use-data-options.cjs');
+
+const { Group } = antd.Checkbox;
+const loadingPlaceholder = /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    css: react.css`
+      height: ${shared.themeVariables.controlHeight}
+    `,
+    children: /* @__PURE__ */ jsxRuntime.jsx(index.default, {})
+  }
+);
+function VefCheckboxBase({
+  defaultValue,
+  value,
+  disabled,
+  renderCheckboxes,
+  onChange,
+  ...restProps
+}, ref) {
+  const {
+    optionsMap,
+    normalizedOptions,
+    isLoading
+  } = useDataOptions.useDataOptions({
+    value,
+    onChange,
+    ...restProps
+  });
+  const checkboxRef = useCheckboxInstance.useCheckboxInstance(ref, normalizedOptions);
+  const handleChange = react$1.useMemo(() => {
+    if (shared.isFunction(onChange)) {
+      return (value2) => {
+        onChange(value2, value2.map((option) => optionsMap.get(option)));
+      };
+    }
+  }, [onChange, optionsMap]);
+  const content = react$1.useMemo(() => {
+    if (isLoading) {
+      return;
+    }
+    const checkboxes = 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.Checkbox, { disabled: disabled2, value: value2, children: label }) }, value2);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(antd.Checkbox, { disabled: disabled2, value: value2, children: label }, value2);
+    });
+    if (shared.isFunction(renderCheckboxes)) {
+      return renderCheckboxes(checkboxes);
+    }
+    return checkboxes;
+  }, [isLoading, normalizedOptions, renderCheckboxes]);
+  if (isLoading) {
+    return loadingPlaceholder;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Group,
+    {
+      ref: checkboxRef,
+      defaultValue,
+      disabled,
+      onChange: handleChange,
+      ...value === void 0 ? {} : { value },
+      children: content
+    }
+  );
+}
+const VefCheckbox = react$1.memo(
+  react$1.forwardRef(VefCheckboxBase)
+);
+VefCheckbox.displayName = "VefCheckbox";
+
+exports.default = VefCheckbox;
 /*! 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-checkbox/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-col/index.cjs

@@ -1,3 +1,16 @@
-/*! 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"),t=require("antd");exports.default=function VefCol({...r}){return e.jsx(t.Col,{...r})};
+/*! 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 VefCol({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { ...props });
+}
+
+exports.default = VefCol;
 /*! 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-col/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-color-picker/index.cjs

@@ -1,3 +1,51 @@
-/*! 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"),i=require("react");require("../internal/index.cjs");const o=require("../internal/utils.cjs"),a=["single","gradient"];exports.default=function VefColorPicker({clearable:n,disabled:s,format:l,size:u,showText:c,trigger:d,defaultValue:f,value:g,onChange:m}){const x=i.useMemo((()=>{if(r.isFunction(m))return e=>{m(e.toCssString(),e)}}),[m]);return e.jsx(t.ColorPicker,{allowClear:n,arrow:!1,defaultValue:f,disabled:s,format:l,mode:a,showText:c,size:o.convertBasicSizeToUiSize(u),trigger:d,value:g,onChangeComplete:x})};
+/*! 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');
+require('../internal/index.cjs');
+const utils = require('../internal/utils.cjs');
+
+const mode = ["single", "gradient"];
+function VefColorPicker({
+  clearable,
+  disabled,
+  format,
+  size,
+  showText,
+  trigger,
+  defaultValue,
+  value,
+  onChange
+}) {
+  const handleChange = react.useMemo(() => {
+    if (shared.isFunction(onChange)) {
+      return (color) => {
+        onChange(color.toCssString(), color);
+      };
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.ColorPicker,
+    {
+      allowClear: clearable,
+      arrow: false,
+      defaultValue,
+      disabled,
+      format,
+      mode,
+      showText,
+      size: utils.convertBasicSizeToUiSize(size),
+      trigger,
+      value,
+      onChangeComplete: handleChange
+    }
+  );
+}
+
+exports.default = VefColorPicker;
 /*! 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-color-picker/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 */