musae 0.1.32 → 0.1.34

package/dist/components/button/button.d.ts

@@ -5,6 +5,7 @@ import React from "react";
  *
  * @description
  * button
+ * 1. diff from normal html button, this button is default type `button`, not `submit`
  */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/components/button/button.mjs

@@ -16,7 +16,7 @@ const styles = {
     overflow: "musae-b3r6kr",
     overflowX: null,
     overflowY: null,
-    display: "musae-78zum5",
+    display: "musae-3nfvp2",
     alignItems: "musae-6s0dn4",
     gap: "musae-vbka3v",
     rowGap: null,
@@ -219,6 +219,7 @@ const styles = {
  *
  * @description
  * button
+ * 1. diff from normal html button, this button is default type `button`, not `submit`
  */
 const Button = forwardRef(({
   children,
@@ -232,6 +233,7 @@ const Button = forwardRef(({
   ripple = true,
   onPointerEnter,
   onPointerLeave,
+  type = "button",
   ...props$1
 }, ref) => {
   const classNames = useClassNames(ComponentToken.Button);
@@ -278,7 +280,8 @@ const Button = forwardRef(({
       ...style
     },
     onPointerEnter: onPointerEnter,
-    onPointerLeave: onPointerLeave
+    onPointerLeave: onPointerLeave,
+    type: type
   }, props$1.prefix, children, props$1.suffix, ripple && React.createElement(Ripple, {
     ripples: ripples,
     onClear: clear

package/dist/components/config/hooks.d.ts

@@ -26,6 +26,7 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         0: string;
         1: string;
         2: string;
+        3: string;
     };
     5: {
         0: string;

package/dist/components/form/field/error.d.ts

@@ -0,0 +1,12 @@
+import { FieldError } from "react-hook-form";
+import { ComponentProps } from "../../../types/element";
+import React from "react";
+type Props = ComponentProps & {
+    /**
+     * @description
+     * error
+     */
+    error?: FieldError;
+};
+declare const Error: ({ error, className, style }: Props) => React.JSX.Element;
+export default Error;

package/dist/components/form/field/error.mjs

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useClassNames } from '../../config/hooks.mjs';
+import { ComponentToken, FormClassToken } from '../../../utils/class-name.mjs';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+
+const Error = ({
+  error,
+  className,
+  style
+}) => {
+  const classNames = useClassNames(ComponentToken.Form);
+  const styled = {
+    className: "musae-1xkwav8 musae-1p848mt"
+  };
+  return React.createElement(motion.div, {
+    className: clsx(classNames[FormClassToken.FieldError], className, styled.className),
+    style: {
+      ...style,
+      ...styled.style
+    },
+    initial: {
+      height: 0
+    },
+    animate: {
+      height: "auto"
+    },
+    exit: {
+      height: 0
+    },
+    transition: {
+      duration: 0.1
+    }
+  }, error?.message);
+};
+var Error$1 = Error;
+
+export { Error$1 as default };

package/dist/components/form/{field.d.ts → field/field.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FormItemProps } from "./types";
+import type { FormItemProps } from "../types";
 import type { RequiredIn } from "@aiszlab/relax/types";
 /**
  * @description

package/dist/components/form/{field.mjs → field/field.mjs}

@@ -1,34 +1,32 @@
 import React, { useMemo, isValidElement, cloneElement } from 'react';
 import { useController } from 'react-hook-form';
-import { isRefable } from '@aiszlab/relax';
-import { useClassNames } from '../config/hooks.mjs';
-import { ComponentToken, FormClassToken } from '../../utils/class-name.mjs';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { chain, isRefable } from '@aiszlab/relax';
+import { useClassNames } from '../../config/hooks.mjs';
+import { ComponentToken, FormClassToken } from '../../../utils/class-name.mjs';
+import { props } from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import clsx from 'clsx';
-import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
-import Gridded from './gridded.mjs';
-import { typography } from '../theme/theme.mjs';
+import { useTheme } from '../../theme/hooks.mjs';
+import { ColorToken } from '../../../utils/colors.mjs';
+import Layout from './layout.mjs';
+import Error from './error.mjs';
+import { AnimatePresence } from 'framer-motion';
+import { typography } from '../../theme/theme.mjs';
 
 const styles = {
-  explain: {
-    paddingInline: "musae-1xkwav8",
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: "musae-24n1ab",
-    paddingTop: null,
-    paddingBottom: null,
-    marginBottom: "musae-uwzj2e",
-    $$css: true
-  },
   error: props => [{
     color: "musae-19dipnz",
+    overflow: "musae-b3r6kr",
+    overflowX: null,
+    overflowY: null,
     $$css: true
   }, {
     "--color": props.color != null ? props.color : "initial"
-  }]
+  }],
+  supporting: {
+    minHeight: "musae-jbwyga",
+    paddingBottom: "musae-78w2x6",
+    $$css: true
+  }
 };
 /**
  * @description
@@ -40,6 +38,7 @@ const Field = ({
   ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Form);
+  const theme = useTheme();
   const {
     field: {
       onBlur,
@@ -61,21 +60,14 @@ const Field = ({
       }
     }
   });
-  const theme = useTheme();
   const children = useMemo(() => {
     const _isValidElement = isValidElement(props$1.children);
     if (!_isValidElement) return props$1.children;
     const _child = props$1.children;
     /// rewrite change and blur handler
     const handlers = {
-      onChange: (...args) => {
-        _child.props.onChange?.(...args);
-        onChange(...args);
-      },
-      onBlur: (...args) => {
-        _child.props.onBlur?.(...args);
-        onBlur();
-      }
+      onChange: chain(_child.props.onChange, onChange),
+      onBlur: chain(_child.props.onBlur, onBlur)
     };
     /// registe react hook form
     return cloneElement(props$1.children, {
@@ -89,30 +81,24 @@ const Field = ({
     });
   }, [props$1.children, name, value, invalid, ref, onChange, onBlur]);
   const styled = {
-    explain: props(typography.body.medium, styles.explain)
-  };
-  const _error = useMemo(() => {
-    if (!invalid) return null;
-    const {
-      className,
-      style
-    } = props(styles.error({
+    error: props(styles.error({
       color: theme.colors[ColorToken.Error]
-    }));
-    return React.createElement("span", {
-      className: clsx(classNames[FormClassToken.ItemExplainError], className),
-      style: style
-    }, error?.message);
-  }, [classNames, error?.message, invalid, theme.colors]);
+    })),
+    supporting: props(styles.supporting, typography.body.small)
+  };
   return React.createElement("div", {
     className: clsx(classNames[FormClassToken.Item])
-  }, React.createElement(Gridded, {
+  }, React.createElement(Layout, {
     label: props$1.label,
     required: required
-  }, React.createElement("div", null, children), _error && React.createElement("div", {
-    className: clsx(classNames[FormClassToken.ItemExplain], styled.explain.className),
-    style: styled.explain.style
-  }, _error)));
+  }, React.createElement("div", null, children), React.createElement("div", {
+    className: clsx(classNames[FormClassToken.FieldSupporting], styled.supporting.className),
+    style: styled.supporting.style
+  }, React.createElement(AnimatePresence, null, invalid && React.createElement(Error, {
+    error: error,
+    className: styled.error.className,
+    style: styled.error.style
+  })))));
 };
 var Field$1 = Field;
 

package/dist/components/form/field/index.d.ts

@@ -0,0 +1,3 @@
+import Field from "./field";
+import Layout from "./layout";
+export { Field, Layout };

package/dist/components/form/field/layout.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { type ReactNode } from "react";
+import type { ContextValue } from "../types";
+/**
+ * @description
+ * layout props
+ */
+type Props = {
+    /**
+     * @description
+     * children
+     */
+    children: ReactNode;
+    /**
+     * @description
+     * label for current input
+     */
+    label?: string;
+    /**
+     * @description
+     * how many columns should the label take
+     */
+    labelCol?: ContextValue["labelCol"];
+    /**
+     * @description
+     * how many columns should the input take
+     */
+    wrapperCol?: ContextValue["wrapperCol"];
+    /**
+     * @description
+     * display required
+     */
+    required: boolean;
+    /**
+     * @description
+     * if this item has margin space
+     */
+    space?: boolean;
+};
+/**
+ * @description
+ * item layout
+ */
+declare const Layout: ({ required, space, ...props }: Props) => React.JSX.Element;
+export default Layout;

package/dist/components/form/{gridded.mjs → field/layout.mjs}

@@ -1,13 +1,21 @@
 import React, { useContext } from 'react';
-import Context from './context.mjs';
-import { Grid } from '../grid/index.mjs';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { typography } from '../theme/theme.mjs';
-import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
+import Context from '../context.mjs';
+import { Grid } from '../../grid/index.mjs';
+import { props } from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { typography } from '../../theme/theme.mjs';
+import { useTheme } from '../../theme/hooks.mjs';
+import { ColorToken } from '../../../utils/colors.mjs';
 import clsx from 'clsx';
 
+const {
+  Row,
+  Col
+} = Grid;
 const styles = {
+  space: {
+    marginBottom: "musae-a4cli4",
+    $$css: true
+  },
   required: props => [{
     "::before_content": "musae-ilz4u6",
     "::before_color": "musae-gyfpa5",
@@ -19,16 +27,13 @@ const styles = {
     "--1g451k2": props.color != null ? props.color : "initial"
   }]
 };
-const {
-  Row,
-  Col
-} = Grid;
 /**
  * @description
- * item grid
+ * item layout
  */
-const Gridded = ({
+const Layout = ({
   required,
+  space,
   ...props$1
 }) => {
   const contextValue = useContext(Context);
@@ -36,9 +41,7 @@ const Gridded = ({
   const wrapperCol = props$1.wrapperCol ?? contextValue.wrapperCol;
   const theme = useTheme();
   const styled = {
-    item: {
-      className: "musae-a4cli4"
-    },
+    item: props(!!space && styles.space),
     label: props(required && styles.required({
       color: theme.colors[ColorToken.Error]
     }), typography.label.small)
@@ -56,6 +59,6 @@ const Gridded = ({
     span: wrapperCol
   }, props$1.children));
 };
-var Gridded$1 = Gridded;
+var Layout$1 = Layout;
 
-export { Gridded$1 as default };
+export { Layout$1 as default };

package/dist/components/form/form.mjs

@@ -1,6 +1,6 @@
-import React, { forwardRef, useImperativeHandle, useMemo, useEffect } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
-import { isUndefined } from '@aiszlab/relax';
+import { useEvent, useMounted, isUndefined } from '@aiszlab/relax';
 import Context, { CONTEXT_VALUE } from './context.mjs';
 
 const Form = forwardRef(({ onSubmit, onChange, labelCol, wrapperCol, children }, ref) => {
@@ -27,21 +27,22 @@ const Form = forwardRef(({ onSubmit, onChange, labelCol, wrapperCol, children },
             getFieldsError,
             getFieldError,
             getValues: methods.getValues,
+            reset: methods.reset,
         };
     });
-    const _submit = useMemo(() => {
+    const submit = useEvent(() => {
         return handleSubmit((values) => {
             onSubmit?.(values);
         });
-    }, [onSubmit, handleSubmit]);
-    useEffect(() => {
-        const subscription = watch((values, { type }) => {
+    });
+    useMounted(() => {
+        const watched = watch((values, { type }) => {
             type === "change" && onChange?.(values);
         });
         return () => {
-            subscription.unsubscribe();
+            watched.unsubscribe();
         };
-    }, [onChange, watch]);
+    });
     /// context value
     const contextValue = useMemo(() => {
         return {
@@ -56,7 +57,7 @@ const Form = forwardRef(({ onSubmit, onChange, labelCol, wrapperCol, children },
     }, [labelCol, wrapperCol]);
     return (React.createElement(Context.Provider, { value: contextValue },
         React.createElement(FormProvider, { handleSubmit: handleSubmit, watch: watch, ...methods },
-            React.createElement("form", { onSubmit: _submit }, children))));
+            React.createElement("form", { onSubmit: submit }, children))));
 });
 var _Form = Form;
 

package/dist/components/form/index.d.ts

@@ -1,2 +1,3 @@
-import type { TypedForm } from "./types";
+import type { TypedForm, FormRef } from "./types";
 export declare const Form: TypedForm;
+export { FormRef };

package/dist/components/form/item.mjs

@@ -1,6 +1,6 @@
 import React from 'react';
-import Field from './field.mjs';
-import Gridded from './gridded.mjs';
+import Field from './field/field.mjs';
+import Layout from './field/layout.mjs';
 
 /**
  * @description
@@ -10,7 +10,7 @@ const Item = ({ required = false, ...props }) => {
     if (props.name) {
         return React.createElement(Field, { ...props, name: props.name, required: required });
     }
-    return (React.createElement(Gridded, { label: props.label, labelCol: props.labelCol, wrapperCol: props.wrapperCol, required: required }, props.children));
+    return (React.createElement(Layout, { label: props.label, labelCol: props.labelCol, wrapperCol: props.wrapperCol, required: required, space: true }, props.children));
 };
 var Item$1 = Item;
 

package/dist/components/form/types.d.ts

@@ -1,12 +1,12 @@
-import type { ExoticComponent, ReactNode } from "react";
-import type { DeepPartial, FieldError, FieldErrors, FieldPath, FieldValues, UseFormGetValues, UseFormTrigger } from "react-hook-form";
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from "react";
+import type { DeepPartial, FieldError, FieldErrors, FieldPath, FieldValues, UseFormGetValues, UseFormReset, UseFormTrigger } from "react-hook-form";
 import type { Nullable, Partialable } from "@aiszlab/relax/types";
 /**
  * @author murukal
  * @description
  * form ref
  */
-export interface FormRef<T extends FieldValues> {
+export interface FormRef<T extends FieldValues = FieldValues> {
     /**
      * @description
      * validate
@@ -30,6 +30,11 @@ export interface FormRef<T extends FieldValues> {
      * get single field error
      */
     getValues: UseFormGetValues<T>;
+    /**
+     * @description
+     * reset form to default values, and clear all validation errors
+     */
+    reset: UseFormReset<T>;
 }
 /**
  * @author murukal
@@ -103,7 +108,7 @@ export interface FormItemProps extends Pick<FormProps<unknown>, "labelCol" | "wr
  * @description
  * typed form
  */
-export interface TypedForm<T extends FieldValues = FieldValues> extends ExoticComponent<FormProps<T>> {
+export interface TypedForm<T extends FieldValues = FieldValues> extends ForwardRefExoticComponent<PropsWithoutRef<FormProps<T>> & RefAttributes<FormRef<T>>> {
     Item: (props: FormItemProps) => ReactNode;
 }
 /**

package/dist/components/grid/col.mjs

@@ -25,7 +25,7 @@ const Col = ({
   }));
   const classNames = useClassNames(ComponentToken.Grid);
   return React.createElement(As, {
-    className: clsx(styled.className, classNames[GridClassToken.Col], className),
+    className: clsx(classNames[GridClassToken.Col], className, styled.className),
     style: {
       ...styled.style,
       ...props$1.style

package/dist/components/grid/row.mjs

@@ -41,7 +41,7 @@ const Row = ({
     align
   }));
   return React.createElement(As, {
-    className: clsx(styled.className, classNames[GridClassToken.Row], className),
+    className: clsx(classNames[GridClassToken.Row], className, styled.className),
     style: {
       ...styled.style,
       ...props$1.style

package/dist/components/input/hooks.d.ts

@@ -13,7 +13,7 @@ export declare const useStyles: ([className, isFocused, isInvalid]: [className:
  * use events for input
  */
 export declare const useInputEvents: ({ setValue, onBlur, onChange, onClick, onFocus, }: Pick<InputProps, "onClick" | "onFocus" | "onBlur" | "onChange"> & {
-    setValue: Dispatch<SetStateAction<Partialable<string>>>;
+    setValue: Dispatch<SetStateAction<string>>;
 }) => {
     focus: FocusEventHandler<HTMLInputElement>;
     blur: FocusEventHandler<HTMLInputElement>;

package/dist/components/input/input.mjs

@@ -127,9 +127,7 @@ const Input = forwardRef((props$1, ref) => {
     }
   }), []);
   /// controlled value
-  const [_value, _setValue] = useControlledState(props$1.value, {
-    defaultState: ""
-  });
+  const [_value, _setValue] = useControlledState(props$1.value ?? "");
   /// events
   const inputEvents = useInputEvents({
     setValue: _setValue,

package/dist/components/message/holder.mjs

@@ -19,7 +19,7 @@ const Holder = forwardRef((props, ref) => {
   if (messages.size === 0) return null;
   return React.createElement("div", {
     ...{
-      className: "musae-ixxii4 musae-78zum5 musae-dt5ytf musae-6s0dn4 musae-n9wirt musae-47corl musae-11uqc5h musae-12vixxq musae-utp9vd"
+      className: "musae-ixxii4 musae-13vifvy musae-u96u03 musae-3m8u43 musae-11uqc5h musae-78zum5 musae-dt5ytf musae-6s0dn4 musae-47corl musae-12vixxq musae-utp9vd"
     }
   }, React.createElement(AnimatePresence, null, Array.from(messages.values()).map(({
     content,

package/dist/components/message/message.mjs

@@ -1,4 +1,4 @@
-import React, { createElement } from 'react';
+import React, { useMemo, createElement } from 'react';
 import { useTimeout } from '@aiszlab/relax';
 import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -22,7 +22,7 @@ const styles = {
     paddingLeft: null,
     paddingEnd: null,
     paddingRight: null,
-    borderRadius: "musae-1kogg8i",
+    borderRadius: "musae-1gg5qfe",
     borderStartStartRadius: null,
     borderStartEndRadius: null,
     borderEndStartRadius: null,
@@ -31,16 +31,18 @@ const styles = {
     borderTopRightRadius: null,
     borderBottomLeftRadius: null,
     borderBottomRightRadius: null,
-    backgroundColor: "musae-q1mx2j",
     boxShadow: "musae-jdr3co",
     display: "musae-78zum5",
     alignItems: "musae-1cy8zhl",
     columnGap: "musae-1om1yv4",
     maxWidth: "musae-kfv0gj",
     pointerEvents: "musae-67bb7w",
+    backgroundColor: "musae-q1mx2j",
+    color: "musae-19dipnz",
     $$css: true
   }, {
-    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+    "--color": props.color != null ? props.color : "initial"
   }],
   content: {
     display: "musae-1rg5ohu",
@@ -58,15 +60,20 @@ const Message = ({
   useTimeout(() => {
     onClose?.();
   }, duration);
-  const color = type === "success" ? theme.colors[ColorToken.Primary] : theme.colors[ColorToken.Error] ;
+  const colors = useMemo(() => ({
+    success: theme.colors[ColorToken.Primary],
+    error: theme.colors[ColorToken.Error]
+  }), [theme]);
   const styled = {
     message: props(styles.message({
-      backgroundColor: theme.colors[ColorToken.OnPrimary]
+      backgroundColor: theme.colors[ColorToken.OnPrimary],
+      color: theme.colors[ColorToken.OnPrimaryContainer]
     })),
     content: props(typography.body.medium, styles.content)
   };
   return React.createElement(motion.div, {
-    ...styled.message,
+    className: styled.message.className,
+    style: styled.message.style,
     initial: {
       y: "-100%",
       opacity: 0
@@ -80,7 +87,7 @@ const Message = ({
       opacity: 0
     }
   }, SIGNALS.get(type) && createElement(SIGNALS.get(type), {
-    color
+    color: colors[type]
   }), React.createElement("span", {
     ...styled.content
   }, children));

package/dist/components/picker/hooks.mjs

@@ -24,10 +24,10 @@ const useEvents = ({ onBlur, onClick, }) => {
 const useFadeAnimate = () => {
     const [scope, animate] = useAnimate();
     const fadeIn = useEvent(async () => {
-        await animate(scope.current, { opacity: 1 }, { duration: 0.05 });
+        await animate(scope.current, { opacity: 1 }, { duration: 0.2 });
     });
     const fadeOut = useEvent(async () => {
-        await animate(scope.current, { opacity: 0 }, { duration: 0.05 });
+        await animate(scope.current, { opacity: 0 }, { duration: 0.2 });
     });
     return {
         scope,

package/dist/components/popper/dropdown.mjs

@@ -1,9 +1,10 @@
 import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { createPopper } from '@popperjs/core';
 import { ComponentToken, PopperClassToken } from '../../utils/class-name.mjs';
-import { useMounted } from '@aiszlab/relax';
+import { useMount } from '@aiszlab/relax';
 import { useClassNames } from '../config/hooks.mjs';
 import clsx from 'clsx';
+import { toClassList } from '../../utils/styles.mjs';
 
 const Dropdown = forwardRef(({
   open,
@@ -24,18 +25,20 @@ const Dropdown = forwardRef(({
       popper.current?.update();
     }
   }));
-  useMounted(() => {
+  /// fix: why use mount instead of use mounted?
+  /// when mounted, this div display a normal block, must sync to popper.
+  useMount(() => {
     if (!trigger) return;
     if (!container.current) return;
-    const popped = createPopper(trigger, container.current, {
+    const _popper = createPopper(trigger, container.current, {
       placement,
       modifiers: [{
         name: "flip"
       }]
     });
-    popper.current = popped;
+    popper.current = _popper;
     return () => {
-      popped.destroy();
+      _popper.destroy();
     };
   });
   const styled = {
@@ -48,14 +51,13 @@ const Dropdown = forwardRef(({
   };
   useEffect(() => {
     (async () => {
-      const toggleBy = styled.hidden.className?.split(" ") ?? [];
       if (open) {
-        container.current?.classList.remove(...toggleBy);
+        container.current?.classList.remove(...toClassList(styled.hidden.className));
         await onEntered?.();
         return;
       }
       await onExit?.();
-      container.current?.classList.add(...toggleBy);
+      container.current?.classList.add(...toClassList(styled.hidden.className));
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
@@ -65,7 +67,6 @@ const Dropdown = forwardRef(({
     className: clsx(classNames[PopperClassToken.Dropdown], className, styled.dropdown.className),
     style: {
       ...styled.dropdown.style,
-      ...styled.hidden.style,
       ...style
     }
   }, children);

package/dist/components/waterfall/hooks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @description
  * repaint child
@@ -7,7 +6,7 @@ export declare const useRepaint: ({ columns, rowGap }: {
     columns: number;
     rowGap: number;
 }) => {
-    maxHeight: import("react").MutableRefObject<number>;
+    maxHeight: number;
     collect: (index: number, ref: HTMLDivElement | null) => void;
     getOrder: (index: number) => number | null;
 };

package/dist/components/waterfall/hooks.mjs

@@ -1,4 +1,4 @@
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useState, useCallback, useEffect } from 'react';
 
 /**
  * @description
@@ -6,32 +6,30 @@ import { useRef, useCallback, useEffect } from 'react';
  */
 const useRepaint = ({ columns, rowGap }) => {
     const items = useRef(new Map());
-    const orders = useRef(new Map());
-    const maxHeight = useRef(0);
+    const [maxHeight, setMaxHeight] = useState(0);
+    const [orders, setOrders] = useState(new Map());
     const collect = useCallback((index, ref) => {
         items.current.set(index, ref);
     }, []);
     useEffect(() => {
-        const columnHeights = new Array(columns).fill(0);
-        // reset
-        orders.current.clear();
-        maxHeight.current = 0;
-        Array.from(items.current.entries()).forEach(([index, child]) => {
+        const [columnHeights, _orders] = Array.from(items.current.entries()).reduce((prev, [index, child]) => {
             if (!child)
-                return;
+                return prev;
             const childHeight = child.getBoundingClientRect().height;
-            const order = columnHeights.indexOf(Math.min(...columnHeights));
+            const order = prev[0].indexOf(Math.min(...prev[0]));
             // count
-            columnHeights[order] = columnHeights[order] + (columnHeights[order] && rowGap) + childHeight;
+            prev[0][order] = prev[0][order] + (prev[0][order] && rowGap) + childHeight;
             // set order for render
-            orders.current.set(index, order + 1);
-        });
-        maxHeight.current = Math.max(...columnHeights);
+            prev[1].set(index, order + 1);
+            return prev;
+        }, [new Array(columns).fill(0), new Map()]);
+        setMaxHeight(Math.max(...columnHeights));
+        setOrders(_orders);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rowGap]);
     const getOrder = useCallback((index) => {
-        return orders.current.get(index) ?? null;
-    }, []);
+        return orders.get(index) ?? null;
+    }, [orders]);
     return {
         maxHeight,
         collect,

package/dist/components/waterfall/waterfall.mjs

@@ -59,8 +59,8 @@ const Waterfall = ({
   const styled = props(styles.waterfall({
     rowGap,
     columnGap
-  }), maxHeight.current > 0 && styles.repainted({
-    maxHeight: maxHeight.current
+  }), maxHeight > 0 && styles.repainted({
+    maxHeight: maxHeight
   }));
   if (children.length === 0) return null;
   return React.createElement("div", {

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export { Breadcrumb } from "./components/breadcrumb";
 export { Tabs } from "./components/tabs";
 export { ThemeProvider } from "./components/theme";
 export { ConfigProvider } from "./components/config";
-export { Form } from "./components/form";
+export { Form, FormRef } from "./components/form";
 export { Empty } from "./components/empty";
 export { Drawer } from "./components/drawer";
 export { Dialog } from "./components/dialog";

package/dist/stylex.css

@@ -24,7 +24,6 @@
 .musae-9r1u3d:not(#\#):not(#\#){border-color:transparent}
 .musae-eqt46j:not(#\#):not(#\#){border-color:var(--borderColor,revert)}
 .musae-12oqio5:not(#\#):not(#\#){border-radius:4px}
-.musae-1kogg8i:not(#\#):not(#\#){border-radius:6px}
 .musae-ur7f20:not(#\#):not(#\#){border-radius:8px}
 .musae-1pjcqnp:not(#\#):not(#\#){border-radius:inherit}
 .musae-1gg5qfe:not(#\#):not(#\#){border-radius:var(--musae-1l9c3uf)}
@@ -53,7 +52,6 @@
 .musae-ohadnq:not(#\#):not(#\#){outline:var(--musae-1aj7t22)}
 .musae-ysyzu8:not(#\#):not(#\#){overflow:auto}
 .musae-b3r6kr:not(#\#):not(#\#){overflow:hidden}
-.musae-24n1ab:not(#\#):not(#\#){padding-block:var(--musae-1h5s2h0)}
 .musae-avjae4:not(#\#):not(#\#){padding-block:var(--musae-1ncxh3n)}
 .musae-1c9czsq:not(#\#):not(#\#){padding-block:var(--musae-1tzp6vk)}
 .musae-hwhe2e:not(#\#):not(#\#){padding-block:var(--musae-1wblvyz)}
@@ -219,7 +217,6 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-12cinw4:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-wll1cf)}
 .musae-u96u03:not(#\#):not(#\#):not(#\#):not(#\#){left:0}
 .musae-101gtxs:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--left,revert)}
-.musae-uwzj2e:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(var(--musae-1tzp6vk) * -1)}
 .musae-hq7bbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-15cw4i4)}
 .musae-a4cli4:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-1tzp6vk)}
 .musae-rsi211:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-qk2ac7)}
@@ -247,11 +244,13 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-6ikm8r:not(#\#):not(#\#):not(#\#):not(#\#){overflow-x:hidden}
 .musae-10wlt62:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:hidden}
 .musae-1244622:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--musae-1tzp6vk)}
+.musae-78w2x6:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--musae-qk2ac7)}
 .musae-1k3zc6d:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--paddingLeft,revert)}
 .musae-sgdd5s:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--musae-1ncxh3n)}
 .musae-1y1aa1q:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--musae-oohzsl)}
 .musae-1teihh3:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--musae-vk5id6)}
 .musae-522f2k:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-oohzsl)}
+.musae-1p848mt:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-qk2ac7)}
 .musae-utp9vd:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-vk5id6)}
 .musae-3m8u43:not(#\#):not(#\#):not(#\#):not(#\#){right:0}
 .musae-6al1c1:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--musae-oohzsl)}
@@ -260,7 +259,6 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-9c655z:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--musae-oohzsl)}
 .musae-rzbxsz:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--top,revert)}
 .musae-h8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
-.musae-n9wirt:not(#\#):not(#\#):not(#\#):not(#\#){width:100vw}
 .musae-1i1rx1s:not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
 .musae-afpxmx:not(#\#):not(#\#):not(#\#):not(#\#){width:240px}
 .musae-vy4d1p:not(#\#):not(#\#):not(#\#):not(#\#){width:24px}

package/dist/utils/class-name.d.ts

@@ -64,8 +64,9 @@ export declare enum PopperClassToken {
 }
 export declare enum FormClassToken {
     Item = 0,
-    ItemExplain = 1,
-    ItemExplainError = 2
+    Field = 1,
+    FieldSupporting = 2,
+    FieldError = 3
 }
 export declare enum GridClassToken {
     Row = 0,
@@ -198,6 +199,7 @@ export declare const CLASS_NAMES: {
         0: string;
         1: string;
         2: string;
+        3: string;
     };
     5: {
         0: string;
@@ -328,6 +330,7 @@ export declare const addPrefix: (classNames: ClassNames, prefix: string) => {
         0: string;
         1: string;
         2: string;
+        3: string;
     };
     5: {
         0: string;
@@ -458,6 +461,7 @@ export declare const DEFAULT_CLASS_NAMES: {
         0: string;
         1: string;
         2: string;
+        3: string;
     };
     5: {
         0: string;

package/dist/utils/class-name.mjs

@@ -79,8 +79,9 @@ var PopperClassToken;
 var FormClassToken;
 (function (FormClassToken) {
     FormClassToken[FormClassToken["Item"] = 0] = "Item";
-    FormClassToken[FormClassToken["ItemExplain"] = 1] = "ItemExplain";
-    FormClassToken[FormClassToken["ItemExplainError"] = 2] = "ItemExplainError";
+    FormClassToken[FormClassToken["Field"] = 1] = "Field";
+    FormClassToken[FormClassToken["FieldSupporting"] = 2] = "FieldSupporting";
+    FormClassToken[FormClassToken["FieldError"] = 3] = "FieldError";
 })(FormClassToken || (FormClassToken = {}));
 var GridClassToken;
 (function (GridClassToken) {
@@ -231,8 +232,9 @@ const CLASS_NAMES = {
     },
     [ComponentToken.Form]: {
         [FormClassToken.Item]: "form__item",
-        [FormClassToken.ItemExplain]: "form__item-explain",
-        [FormClassToken.ItemExplainError]: "form__item-explain--error",
+        [FormClassToken.Field]: "form__item-field",
+        [FormClassToken.FieldSupporting]: "form__item-supporting",
+        [FormClassToken.FieldError]: "form__item-field-error",
     },
     [ComponentToken.Grid]: {
         [GridClassToken.Row]: "grid__row",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@aiszlab/relax": "1.2.29",
+    "@aiszlab/relax": "^1.2.30",
     "@popperjs/core": "^2.11.8",
     "@tanstack/react-table": "^8.11.3",
     "clsx": "^2.1.0",

package/dist/components/form/gridded.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import { type ReactNode } from "react";
-import type { ContextValue } from "./types";
-/**
- * @description
- * item grid
- */
-declare const Gridded: ({ required, ...props }: {
-    children: ReactNode;
-    label?: string | undefined;
-    labelCol?: number | undefined;
-    wrapperCol?: number | undefined;
-    required: boolean;
-}) => React.JSX.Element;
-export default Gridded;