@vef-framework/components 2.0.4 → 2.0.5

package/dist/es/form/helpers/with-form-item.js

@@ -1,46 +1,42 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Form } from 'antd';
-import '../contexts/index.js';
-import { useFormItemProps } from '../hooks/use-form-item-props.js';
-import { useFieldContext } from '../contexts/form-context.js';
-
-function withFormItem(displayName, PureField) {
-  const FieldComponent = ({
+import { jsx as o } from "@emotion/react/jsx-runtime";
+import { Form as h } from "antd";
+import "../contexts/index.js";
+import { useFormItemProps as I } from "../hooks/use-form-item-props.js";
+import { useFieldContext as v } from "../contexts/form-context.js";
+function j(m, i) {
+  const r = ({
     // form item props
-    layout,
-    label,
-    labelAlign,
-    labelWidth,
-    extra,
-    noWrapper,
-    required,
+    layout: s,
+    label: a,
+    labelAlign: n,
+    labelWidth: l,
+    extra: p,
+    noWrapper: d,
+    required: c,
     // field props
-    ...fieldProps
+    ...u
   }) => {
-    const formItemProps = useFormItemProps({
-      layout,
-      label,
-      labelAlign,
-      labelWidth,
-      extra,
-      required,
-      noWrapper
-    });
-    const {
+    const f = I({
+      layout: s,
+      label: a,
+      labelAlign: n,
+      labelWidth: l,
+      extra: p,
+      required: c,
+      noWrapper: d
+    }), {
       state: {
         meta: {
-          errors,
-          isValid,
-          isValidating
+          errors: t,
+          isValid: F,
+          isValidating: e
         }
       }
-    } = useFieldContext();
-    const errorMessage = errors.length > 0 ? errors[0].message : null;
-    return /* @__PURE__ */ jsx(Form.Item, { ...formItemProps, hasFeedback: isValidating, help: errorMessage, validateStatus: isValidating ? "validating" : isValid ? void 0 : "error", children: /* @__PURE__ */ jsx(PureField, { ...fieldProps }) });
+    } = v(), g = t.length > 0 ? t[0].message : null;
+    return /* @__PURE__ */ o(h.Item, { ...f, hasFeedback: e, help: g, validateStatus: e ? "validating" : F ? void 0 : "error", children: /* @__PURE__ */ o(i, { ...u }) });
   };
-  FieldComponent.displayName = displayName;
-  return FieldComponent;
+  return r.displayName = m, r;
 }
-
-export { withFormItem };
+export {
+  j as withFormItem
+};

package/dist/es/form/hooks/use-form-item-props.js

@@ -1,43 +1,36 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { useMemo } from 'react';
-import '../contexts/index.js';
-import { useLabelWidth } from './use-label-width.js';
-import { useFormLayout } from '../contexts/form-layout.js';
-
-function useFormItemProps(props) {
+import { useMemo as c } from "react";
+import "../contexts/index.js";
+import { useLabelWidth as y } from "./use-label-width.js";
+import { useFormLayout as d } from "../contexts/form-layout.js";
+function x(t) {
   const {
-    layout,
-    label,
-    labelAlign,
-    labelWidth,
-    extra,
-    noWrapper,
-    required
-  } = props;
-  const {
-    layout: formLayout,
-    labelAlign: formLabelAlign,
-    labelWidth: formLabelWidth
-  } = useFormLayout();
-  const labelWidthToUse = useLabelWidth(layout, labelWidth ?? formLabelWidth);
-  const layoutToUse = layout ?? formLayout;
-  const labelCol = useMemo(() => {
-    if (layoutToUse === "vertical" || !labelWidthToUse) {
-      return;
-    }
-    return {
-      flex: `0 0 ${labelWidthToUse}px`
-    };
-  }, [labelWidthToUse, layoutToUse]);
+    layout: e,
+    label: r,
+    labelAlign: a,
+    labelWidth: i,
+    extra: n,
+    noWrapper: u,
+    required: m
+  } = t, {
+    layout: s,
+    labelAlign: b,
+    labelWidth: f
+  } = d(), o = y(e, i ?? f), l = e ?? s, p = c(() => {
+    if (!(l === "vertical" || !o))
+      return {
+        flex: `0 0 ${o}px`
+      };
+  }, [o, l]);
   return {
-    layout: layoutToUse,
-    label,
-    labelAlign: labelAlign ?? formLabelAlign,
-    labelCol,
-    extra,
-    noStyle: noWrapper,
-    required
+    layout: l,
+    label: r,
+    labelAlign: a ?? b,
+    labelCol: p,
+    extra: n,
+    noStyle: u,
+    required: m
   };
 }
-
-export { useFormItemProps };
+export {
+  x as useFormItemProps
+};

package/dist/es/form/hooks/use-label-width.js

@@ -1,19 +1,12 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { useMemo } from 'react';
-import '../../_base/index.js';
-import { showWarningMessage } from '../../_base/helpers/message.js';
-
-function useLabelWidth(layout, labelWidth) {
-  const labelWidthToUse = useMemo(() => {
-    if (layout === "vertical" || !labelWidth) {
-      return;
-    }
-    if (labelWidth < 60 || labelWidth > 120) {
-      showWarningMessage("The labelWidth of Form component must be between 60 and 120, otherwise it will be 60 or 120.");
-    }
-    return Math.min(Math.max(labelWidth, 60), 120);
-  }, [layout, labelWidth]);
-  return labelWidthToUse;
+import { useMemo as r } from "react";
+import "../../_base/index.js";
+import { showWarningMessage as t } from "../../_base/helpers/message.js";
+function a(o, e) {
+  return r(() => {
+    if (!(o === "vertical" || !e))
+      return (e < 60 || e > 120) && t("The labelWidth of Form component must be between 60 and 120, otherwise it will be 60 or 120."), Math.min(Math.max(e, 60), 120);
+  }, [o, e]);
 }
-
-export { useLabelWidth };
+export {
+  a as useLabelWidth
+};

package/dist/es/form/index.js

@@ -1,3 +1,8 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-export { useFormContext, withFieldGroup, withForm } from './form.js';
-export { useForm } from './use-form.js';
+import { useFormContext as e, withFieldGroup as t, withForm as m } from "./form.js";
+import { useForm as i } from "./use-form.js";
+export {
+  i as useForm,
+  e as useFormContext,
+  t as withFieldGroup,
+  m as withForm
+};

package/dist/es/form/use-form.js

@@ -1,25 +1,20 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useMemo } from 'react';
-import { useAppForm } from './form.js';
-
-function useForm(options) {
-  const formApi = useAppForm(options);
-  return useMemo(() => {
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import { useMemo as i } from "react";
+import { useAppForm as s } from "./form.js";
+function A(m) {
+  const r = s(m);
+  return i(() => {
     const {
-      AppForm,
-      Form
-    } = formApi;
-    const FormComponent = (props) => /* @__PURE__ */ jsx(AppForm, { children: /* @__PURE__ */ jsx(Form, { ...props }) });
-    return new Proxy(formApi, {
-      get(target, prop, receiver) {
-        if (prop === "Form") {
-          return FormComponent;
-        }
-        return Reflect.get(target, prop, receiver);
+      AppForm: n,
+      Form: p
+    } = r, u = (o) => /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(p, { ...o }) });
+    return new Proxy(r, {
+      get(o, e, f) {
+        return e === "Form" ? u : Reflect.get(o, e, f);
       }
     });
-  }, [formApi]);
+  }, [r]);
 }
-
-export { useForm };
+export {
+  A as useForm
+};

package/dist/es/grid/context.js

@@ -1,14 +1,12 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { createContext, use } from 'react';
-
-const Context = createContext(null);
-const GridContextProvider = Context.Provider;
-function useGridContext() {
-  const context = use(Context);
-  if (!context) {
+import { createContext as e, use as o } from "react";
+const r = e(null), i = r.Provider;
+function d() {
+  const t = o(r);
+  if (!t)
     throw new Error("GridItem must be used as direct child of Grid");
-  }
-  return context;
+  return t;
 }
-
-export { GridContextProvider, useGridContext };
+export {
+  i as GridContextProvider,
+  d as useGridContext
+};

package/dist/es/grid/grid-item.js

@@ -1,37 +1,34 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useMemo } from 'react';
-import { useGridContext } from './context.js';
-import { gridItem } from './styles.js';
-import './props.js';
-
-const defaultSpan = 1;
-const defaultOffset = 0;
-function GridItem({
-  span = defaultSpan,
-  offset = defaultOffset,
-  suffix = false,
-  style,
-  ...props
+import { jsx as l } from "@emotion/react/jsx-runtime";
+import { useMemo as d } from "react";
+import { useGridContext as a } from "./context.js";
+import { gridItem as f } from "./styles.js";
+import "./props.js";
+const p = 1, u = 0;
+function h({
+  span: o = p,
+  offset: r = u,
+  suffix: e = !1,
+  style: m,
+  ...s
 }) {
   const {
-    gridColumns
-  } = useGridContext();
-  const itemStyle = useMemo(() => {
-    const childSpan = span;
-    const childOffset = offset;
-    const baseStyle = {
-      "--vef-grid-item-column": suffix ? `${gridColumns + 1 - childSpan} / span ${childSpan}` : `span ${childSpan}`,
-      ...childOffset > 0 && !suffix ? {
-        "--vef-grid-item-margin-left": `calc(100% * ${childOffset} / ${childSpan})`
-      } : {}
-    };
+    gridColumns: n
+  } = a(), c = d(() => {
+    const t = o, i = r;
     return {
-      ...baseStyle,
-      ...style
+      ...{
+        "--vef-grid-item-column": e ? `${n + 1 - t} / span ${t}` : `span ${t}`,
+        ...i > 0 && !e ? {
+          "--vef-grid-item-margin-left": `calc(100% * ${i} / ${t})`
+        } : {}
+      },
+      ...m
     };
-  }, [span, offset, suffix, gridColumns, style]);
-  return /* @__PURE__ */ jsx("div", { ...props, css: gridItem, style: itemStyle });
+  }, [o, r, e, n, m]);
+  return /* @__PURE__ */ l("div", { ...s, css: f, style: c });
 }
-
-export { GridItem, defaultOffset, defaultSpan };
+export {
+  h as GridItem,
+  u as defaultOffset,
+  p as defaultSpan
+};

package/dist/es/grid/hooks/index.js

@@ -1,7 +1,15 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-export { useContainerBreakpoints } from './use-container-breakpoints.js';
-export { useContainerWidth } from './use-container-width.js';
-export { useGridCollapsed } from './use-grid-collapsed.js';
-export { useNormalizedGap } from './use-normalized-gap.js';
-export { useResponsiveBreakpoint } from './use-responsive-breakpoint.js';
-export { getResponsiveValue, useResponsiveValue } from './use-responsive-value.js';
+import { useContainerBreakpoints as r } from "./use-container-breakpoints.js";
+import { useContainerWidth as p } from "./use-container-width.js";
+import { useGridCollapsed as i } from "./use-grid-collapsed.js";
+import { useNormalizedGap as n } from "./use-normalized-gap.js";
+import { useResponsiveBreakpoint as m } from "./use-responsive-breakpoint.js";
+import { getResponsiveValue as x, useResponsiveValue as l } from "./use-responsive-value.js";
+export {
+  x as getResponsiveValue,
+  r as useContainerBreakpoints,
+  p as useContainerWidth,
+  i as useGridCollapsed,
+  n as useNormalizedGap,
+  m as useResponsiveBreakpoint,
+  l as useResponsiveValue
+};

package/dist/es/grid/hooks/use-container-breakpoints.js

@@ -1,19 +1,15 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { useMemo } from 'react';
-
-function useContainerBreakpoints(baseWidth) {
-  return useMemo(() => {
-    const breakpoints = {
-      xxs: baseWidth,
-      xs: baseWidth * 2,
-      sm: baseWidth * 3,
-      md: baseWidth * 4,
-      lg: baseWidth * 5,
-      xl: baseWidth * 6,
-      xxl: baseWidth * 7
-    };
-    return breakpoints;
-  }, [baseWidth]);
+import { useMemo as n } from "react";
+function m(r) {
+  return n(() => ({
+    xxs: r,
+    xs: r * 2,
+    sm: r * 3,
+    md: r * 4,
+    lg: r * 5,
+    xl: r * 6,
+    xxl: r * 7
+  }), [r]);
 }
-
-export { useContainerBreakpoints };
+export {
+  m as useContainerBreakpoints
+};

package/dist/es/grid/hooks/use-container-width.js

@@ -1,44 +1,28 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { useIsomorphicEffect } from '@vef-framework/hooks';
-import { useRef, useState, useEffect } from 'react';
-
-function useContainerWidth() {
-  const rafIdRef = useRef(0);
-  const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  useIsomorphicEffect(() => {
-    if (containerRef.current) {
-      setContainerWidth(containerRef.current.getBoundingClientRect().width);
-    }
-  }, []);
-  useEffect(() => {
-    if (containerRef.current) {
-      const observer = new ResizeObserver(([entry]) => {
-        if (entry) {
-          if (rafIdRef.current) {
-            cancelAnimationFrame(rafIdRef.current);
-          }
-          rafIdRef.current = requestAnimationFrame(() => {
-            const width = entry.contentBoxSize.at(0)?.inlineSize ?? entry.contentRect.width;
-            setContainerWidth(width);
-          });
-        }
+import { useIsomorphicEffect as s } from "@vef-framework/hooks";
+import { useRef as c, useState as f, useEffect as a } from "react";
+function h() {
+  const e = c(0), t = c(null), [o, r] = f(0);
+  return s(() => {
+    t.current && r(t.current.getBoundingClientRect().width);
+  }, []), a(() => {
+    if (t.current) {
+      const i = new ResizeObserver(([n]) => {
+        n && (e.current && cancelAnimationFrame(e.current), e.current = requestAnimationFrame(() => {
+          const u = n.contentBoxSize.at(0)?.inlineSize ?? n.contentRect.width;
+          r(u);
+        }));
       });
-      observer.observe(containerRef.current, {
+      return i.observe(t.current, {
         box: "content-box"
-      });
-      return () => {
-        observer.disconnect();
-        if (rafIdRef.current) {
-          cancelAnimationFrame(rafIdRef.current);
-        }
+      }), () => {
+        i.disconnect(), e.current && cancelAnimationFrame(e.current);
       };
     }
-  }, []);
-  return {
-    containerWidth,
-    containerRef
+  }, []), {
+    containerWidth: o,
+    containerRef: t
   };
 }
-
-export { useContainerWidth };
+export {
+  h as useContainerWidth
+};

package/dist/es/grid/hooks/use-grid-collapsed.js

@@ -1,15 +1,14 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { useGridContext } from '../context.js';
-
-function useGridCollapsed() {
+import { useGridContext as s } from "../context.js";
+function r() {
   const {
-    isCollapsed,
-    setCollapsed
-  } = useGridContext();
+    isCollapsed: e,
+    setCollapsed: o
+  } = s();
   return {
-    isCollapsed,
-    setCollapsed
+    isCollapsed: e,
+    setCollapsed: o
   };
 }
-
-export { useGridCollapsed };
+export {
+  r as useGridCollapsed
+};

package/dist/es/grid/hooks/use-normalized-gap.js

@@ -1,43 +1,35 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { isNumber, isString } from '@vef-framework/shared';
-import { useMemo } from 'react';
-import '../../_base/index.js';
-import { useThemeTokens } from '../../_base/hooks/use-theme-tokens.js';
-
-function useNormalizedGap([rowGap, columnGap]) {
-  const tokens = useThemeTokens();
-  return useMemo(() => [normalizeGap(rowGap, tokens), normalizeGap(columnGap, tokens)], [columnGap, rowGap, tokens]);
+import { isNumber as o, isString as u } from "@vef-framework/shared";
+import { useMemo as a } from "react";
+import "../../_base/index.js";
+import { useThemeTokens as c } from "../../_base/hooks/use-theme-tokens.js";
+function h([r, t]) {
+  const e = c();
+  return a(() => [n(r, e), n(t, e)], [t, r, e]);
 }
-function normalizeGap(gap, {
-  margin,
-  marginSM,
-  marginXS,
-  marginMD,
-  marginLG
+function n(r, {
+  margin: t,
+  marginSM: e,
+  marginXS: s,
+  marginMD: i,
+  marginLG: m
 }) {
-  if (isNumber(gap)) {
-    return gap;
-  }
-  if (isString(gap)) {
-    switch (gap) {
-      case "extra-small": {
-        return marginXS;
-      }
-      case "small": {
-        return marginSM;
-      }
-      case "medium": {
-        return margin;
-      }
-      case "large": {
-        return marginMD;
-      }
-      case "extra-large": {
-        return marginLG;
-      }
+  if (o(r))
+    return r;
+  if (u(r))
+    switch (r) {
+      case "extra-small":
+        return s;
+      case "small":
+        return e;
+      case "medium":
+        return t;
+      case "large":
+        return i;
+      case "extra-large":
+        return m;
     }
-  }
   return 0;
 }
-
-export { useNormalizedGap };
+export {
+  h as useNormalizedGap
+};

package/dist/es/grid/hooks/use-responsive-breakpoint.js

@@ -1,15 +1,12 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { useMemo } from 'react';
-
-function useResponsiveBreakpoint(breakpoints, width) {
-  return useMemo(() => {
-    for (const [breakpoint, breakpointWidth] of Object.entries(breakpoints)) {
-      if (width <= breakpointWidth) {
-        return breakpoint;
-      }
-    }
+import { useMemo as n } from "react";
+function u(e, r) {
+  return n(() => {
+    for (const [o, t] of Object.entries(e))
+      if (r <= t)
+        return o;
     return "xxl";
-  }, [width, breakpoints]);
+  }, [r, e]);
 }
-
-export { useResponsiveBreakpoint };
+export {
+  u as useResponsiveBreakpoint
+};

package/dist/es/grid/hooks/use-responsive-value.js

@@ -1,30 +1,27 @@
-/*! @vef-framework/components v2.0.2 made with ❤️ by Venus | 2025-11-25T15:03:17.303Z */
-import { isPlainObject } from '@vef-framework/shared';
-import { useMemo } from 'react';
-import '../../_base/index.js';
-import { breakpoints } from '../../_base/constants/breakpoints.js';
-
-function useResponsiveValue(value, breakpoint) {
-  const resolvedValue = useMemo(() => getResponsiveValue(value, breakpoint), [value, breakpoint]);
-  return resolvedValue;
+import { isPlainObject as s } from "@vef-framework/shared";
+import { useMemo as u } from "react";
+import "../../_base/index.js";
+import { breakpoints as f } from "../../_base/constants/breakpoints.js";
+function V(e, r) {
+  return u(() => l(e, r), [e, r]);
 }
-function getResponsiveValue(value, breakpoint) {
-  if (isPlainObject(value)) {
-    const resolvedValue = value[breakpoint];
-    if (resolvedValue) {
-      return resolvedValue;
-    }
-    const breakpointArr = Object.keys(breakpoints);
-    let breakpointIndex = breakpointArr.indexOf(breakpoint);
-    while (breakpointIndex--) {
-      const fallbackValue = value[breakpointArr[breakpointIndex]];
-      if (fallbackValue) {
-        return fallbackValue;
-      }
+function l(e, r) {
+  if (s(e)) {
+    const o = e[r];
+    if (o)
+      return o;
+    const t = Object.keys(f);
+    let n = t.indexOf(r);
+    for (; n--; ) {
+      const i = e[t[n]];
+      if (i)
+        return i;
     }
     return;
   }
-  return value;
+  return e;
 }
-
-export { getResponsiveValue, useResponsiveValue };
+export {
+  l as getResponsiveValue,
+  V as useResponsiveValue
+};