musae 0.1.32 → 0.1.33

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,13 @@
+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);
+    return (React.createElement(motion.div, { className: clsx(classNames[FormClassToken.FieldError], className), style: style, initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 } }, 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,30 +1,22 @@
 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';
 
 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"
@@ -40,6 +32,7 @@ const Field = ({
   ...props$1
 }) => {
   const classNames = useClassNames(ComponentToken.Form);
+  const theme = useTheme();
   const {
     field: {
       onBlur,
@@ -61,21 +54,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 +75,27 @@ 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]);
+    })),
+    description: {
+      className: "musae-jbwyga"
+    }
+  };
+  const descriptions = [invalid && React.createElement(Error, {
+    error: error,
+    className: styled.error.className,
+    style: styled.error.style
+  })];
   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)));
+    required: required,
+    space: descriptions.length === 0
+  }, React.createElement("div", null, children), descriptions.length > 0 && React.createElement(AnimatePresence, null, React.createElement("div", {
+    ...styled.description
+  }, descriptions))));
 };
 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 = {
+  item: {
+    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.item),
     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/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 }, props.children));
 };
 var Item$1 = Item;
 

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/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/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)}
@@ -260,7 +257,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,8 @@ export declare enum PopperClassToken {
 }
 export declare enum FormClassToken {
     Item = 0,
-    ItemExplain = 1,
-    ItemExplainError = 2
+    Field = 1,
+    FieldError = 2
 }
 export declare enum GridClassToken {
     Row = 0,

package/dist/utils/class-name.mjs

@@ -79,8 +79,8 @@ 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["FieldError"] = 2] = "FieldError";
 })(FormClassToken || (FormClassToken = {}));
 var GridClassToken;
 (function (GridClassToken) {
@@ -231,8 +231,8 @@ 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.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.33",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",

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;