@ifhover/leaf-ui 0.0.0-stage → 0.5.0

package/dist/esm/floatbutton/floatbutton.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { classes } from "../shared/classes.js";
+import { inertProps } from "../shared/inert.js";
+import { useText } from "../shared/use-text.js";
+import { Tooltip } from "../tooltip/index.js";
+function FloatButton({ tooltip, fixed = true, className, ...props }) {
+    const button = /*#__PURE__*/ jsx(Button, {
+        ...props,
+        className: classes('leaf-float-button', fixed && 'leaf-float-button--fixed', className)
+    });
+    return tooltip ? /*#__PURE__*/ jsx(Tooltip, {
+        content: tooltip,
+        children: button
+    }) : button;
+}
+function FloatButtonGroup({ actions, expandable = true, icon, open: controlled, defaultOpen = false, onOpenChange, className }) {
+    const t = useText();
+    const [internal, setInternal] = useState(defaultOpen), open = controlled ?? internal;
+    const expanded = !expandable || open;
+    const [visited, setVisited] = useState(expanded);
+    if (expanded && !visited) setVisited(true);
+    const root = useRef(null);
+    const setOpen = useCallback((next)=>{
+        if (void 0 === controlled) setInternal(next);
+        onOpenChange?.(next);
+    }, [
+        controlled,
+        onOpenChange
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const outside = (event)=>{
+            if (!root.current?.contains(event.target)) setOpen(false);
+        };
+        document.addEventListener('pointerdown', outside);
+        return ()=>document.removeEventListener('pointerdown', outside);
+    }, [
+        open,
+        setOpen
+    ]);
+    return /*#__PURE__*/ jsxs("fieldset", {
+        ref: root,
+        "aria-label": t('快捷操作', 'Quick actions'),
+        className: classes('leaf-float-group', className),
+        onKeyDown: (event)=>{
+            if ('Escape' === event.key) {
+                event.preventDefault();
+                setOpen(false);
+                root.current?.querySelector('[aria-expanded]')?.focus();
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "leaf-float-group__actions",
+                "data-open": expanded || void 0,
+                "aria-hidden": !expanded || void 0,
+                ...inertProps(!expanded),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "leaf-float-group__actions-inner",
+                    children: /*#__PURE__*/ jsx("div", {
+                        className: "leaf-float-group__actions-content",
+                        children: visited && actions.map((action, index)=>/*#__PURE__*/ jsx("div", {
+                                className: "leaf-float-group__action",
+                                style: {
+                                    '--leaf-float-order': actions.length - index - 1
+                                },
+                                children: /*#__PURE__*/ jsx(FloatButton, {
+                                    fixed: false,
+                                    tooltip: action.label,
+                                    "aria-label": 'string' == typeof action.label ? action.label : action.key,
+                                    startIcon: action.icon,
+                                    disabled: action.disabled,
+                                    variant: "outline",
+                                    onClick: ()=>{
+                                        action.onClick?.();
+                                        if (expandable) setOpen(false);
+                                    }
+                                })
+                            }, action.key))
+                    })
+                })
+            }),
+            expandable && /*#__PURE__*/ jsx(FloatButton, {
+                fixed: false,
+                "aria-label": t('快捷操作', 'Quick actions'),
+                "aria-expanded": open,
+                startIcon: /*#__PURE__*/ jsx("span", {
+                    className: "leaf-float-group__trigger-icon",
+                    "data-open": open || void 0,
+                    children: icon ?? /*#__PURE__*/ jsx(Plus, {
+                        size: 20
+                    })
+                }),
+                onClick: ()=>setOpen(!open)
+            })
+        ]
+    });
+}
+const FAB = FloatButton;
+export { FAB, FloatButton, FloatButtonGroup };
+
+//# sourceMappingURL=floatbutton.js.map

package/dist/esm/floatbutton/floatbutton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatbutton/floatbutton.js","sources":["../../../src/floatbutton/floatbutton.tsx"],"sourcesContent":["import { Plus } from 'lucide-react';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { Button, type ButtonProps } from '../button';\nimport { classes } from '../shared/classes';\nimport { inertProps } from '../shared/inert';\nimport { useText } from '../shared/use-text';\nimport { Tooltip } from '../tooltip';\nexport interface FloatButtonProps extends ButtonProps {\n  tooltip?: ReactNode;\n  fixed?: boolean;\n}\nexport function FloatButton({ tooltip, fixed = true, className, ...props }: FloatButtonProps) {\n  const button = (\n    <Button\n      {...props}\n      className={classes('leaf-float-button', fixed && 'leaf-float-button--fixed', className)}\n    />\n  );\n  return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button;\n}\nexport interface FloatButtonAction {\n  key: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n}\nexport interface FloatButtonGroupProps {\n  actions: readonly FloatButtonAction[];\n  expandable?: boolean;\n  icon?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n}\nexport function FloatButtonGroup({\n  actions,\n  expandable = true,\n  icon,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  className,\n}: FloatButtonGroupProps) {\n  const t = useText();\n  const [internal, setInternal] = useState(defaultOpen),\n    open = controlled ?? internal;\n  const expanded = !expandable || open;\n  const [visited, setVisited] = useState(expanded);\n  if (expanded && !visited) setVisited(true);\n  const root = useRef<HTMLFieldSetElement>(null);\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (controlled === undefined) setInternal(next);\n      onOpenChange?.(next);\n    },\n    [controlled, onOpenChange],\n  );\n  useEffect(() => {\n    if (!open) return;\n    const outside = (event: PointerEvent) => {\n      if (!root.current?.contains(event.target as Node)) setOpen(false);\n    };\n    document.addEventListener('pointerdown', outside);\n    return () => document.removeEventListener('pointerdown', outside);\n  }, [open, setOpen]);\n  return (\n    <fieldset\n      ref={root}\n      aria-label={t('快捷操作', 'Quick actions')}\n      className={classes('leaf-float-group', className)}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          setOpen(false);\n          root.current?.querySelector<HTMLButtonElement>('[aria-expanded]')?.focus();\n        }\n      }}\n    >\n      <div\n        className=\"leaf-float-group__actions\"\n        data-open={expanded || undefined}\n        aria-hidden={!expanded || undefined}\n        {...inertProps(!expanded)}\n      >\n        <div className=\"leaf-float-group__actions-inner\">\n          <div className=\"leaf-float-group__actions-content\">\n            {visited &&\n              actions.map((action, index) => (\n                <div\n                  key={action.key}\n                  className=\"leaf-float-group__action\"\n                  style={\n                    { '--leaf-float-order': actions.length - index - 1 } as React.CSSProperties\n                  }\n                >\n                  <FloatButton\n                    fixed={false}\n                    tooltip={action.label}\n                    aria-label={typeof action.label === 'string' ? action.label : action.key}\n                    startIcon={action.icon}\n                    disabled={action.disabled}\n                    variant=\"outline\"\n                    onClick={() => {\n                      action.onClick?.();\n                      if (expandable) setOpen(false);\n                    }}\n                  />\n                </div>\n              ))}\n          </div>\n        </div>\n      </div>\n      {expandable && (\n        <FloatButton\n          fixed={false}\n          aria-label={t('快捷操作', 'Quick actions')}\n          aria-expanded={open}\n          startIcon={\n            <span className=\"leaf-float-group__trigger-icon\" data-open={open || undefined}>\n              {icon ?? <Plus size={20} />}\n            </span>\n          }\n          onClick={() => setOpen(!open)}\n        />\n      )}\n    </fieldset>\n  );\n}\nexport const FAB = FloatButton;\n"],"names":["FloatButton","tooltip","fixed","className","props","button","Button","classes","Tooltip","FloatButtonGroup","actions","expandable","icon","controlled","defaultOpen","onOpenChange","t","useText","internal","setInternal","useState","open","expanded","visited","setVisited","root","useRef","setOpen","useCallback","next","undefined","useEffect","outside","event","document","inertProps","action","index","Plus","FAB"],"mappings":";;;;;;;;;AAWO,SAASA,YAAY,EAAEC,OAAO,EAAEC,QAAQ,IAAI,EAAEC,SAAS,EAAE,GAAGC,OAAyB;IAC1F,MAAMC,SAAS,WAATA,GACJ,IAACC,QAAMA;QACJ,GAAGF,KAAK;QACT,WAAWG,QAAQ,qBAAqBL,SAAS,4BAA4BC;;IAGjF,OAAOF,UAAU,WAAVA,GAAU,IAACO,SAAOA;QAAC,SAASP;kBAAUI;SAAoBA;AACnE;AAiBO,SAASI,iBAAiB,EAC/BC,OAAO,EACPC,aAAa,IAAI,EACjBC,IAAI,EACJ,MAAMC,UAAU,EAChBC,cAAc,KAAK,EACnBC,YAAY,EACZZ,SAAS,EACa;IACtB,MAAMa,IAAIC;IACV,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAASN,cACvCO,OAAOR,cAAcK;IACvB,MAAMI,WAAW,CAACX,cAAcU;IAChC,MAAM,CAACE,SAASC,WAAW,GAAGJ,SAASE;IACvC,IAAIA,YAAY,CAACC,SAASC,WAAW;IACrC,MAAMC,OAAOC,OAA4B;IACzC,MAAMC,UAAUC,YACd,CAACC;QACC,IAAIhB,AAAeiB,WAAfjB,YAA0BM,YAAYU;QAC1Cd,eAAec;IACjB,GACA;QAAChB;QAAYE;KAAa;IAE5BgB,UAAU;QACR,IAAI,CAACV,MAAM;QACX,MAAMW,UAAU,CAACC;YACf,IAAI,CAACR,KAAK,OAAO,EAAE,SAASQ,MAAM,MAAM,GAAWN,QAAQ;QAC7D;QACAO,SAAS,gBAAgB,CAAC,eAAeF;QACzC,OAAO,IAAME,SAAS,mBAAmB,CAAC,eAAeF;IAC3D,GAAG;QAACX;QAAMM;KAAQ;IAClB,OAAO,WAAP,GACE,KAAC;QACC,KAAKF;QACL,cAAYT,EAAE,QAAQ;QACtB,WAAWT,QAAQ,oBAAoBJ;QACvC,WAAW,CAAC8B;YACV,IAAIA,AAAc,aAAdA,MAAM,GAAG,EAAe;gBAC1BA,MAAM,cAAc;gBACpBN,QAAQ;gBACRF,KAAK,OAAO,EAAE,cAAiC,oBAAoB;YACrE;QACF;;0BAEA,IAAC;gBACC,WAAU;gBACV,aAAWH,YAAYQ;gBACvB,eAAa,CAACR,YAAYQ;gBACzB,GAAGK,WAAW,CAACb,SAAS;0BAEzB,kBAAC;oBAAI,WAAU;8BACb,kBAAC;wBAAI,WAAU;kCACZC,WACCb,QAAQ,GAAG,CAAC,CAAC0B,QAAQC,QAAAA,WAAAA,GACnB,IAAC;gCAEC,WAAU;gCACV,OACE;oCAAE,sBAAsB3B,QAAQ,MAAM,GAAG2B,QAAQ;gCAAE;0CAGrD,kBAACrC,aAAWA;oCACV,OAAO;oCACP,SAASoC,OAAO,KAAK;oCACrB,cAAY,AAAwB,YAAxB,OAAOA,OAAO,KAAK,GAAgBA,OAAO,KAAK,GAAGA,OAAO,GAAG;oCACxE,WAAWA,OAAO,IAAI;oCACtB,UAAUA,OAAO,QAAQ;oCACzB,SAAQ;oCACR,SAAS;wCACPA,OAAO,OAAO;wCACd,IAAIzB,YAAYgB,QAAQ;oCAC1B;;+BAhBGS,OAAO,GAAG;;;;YAuB1BzB,cAAc,WAAdA,GACC,IAACX,aAAWA;gBACV,OAAO;gBACP,cAAYgB,EAAE,QAAQ;gBACtB,iBAAeK;gBACf,yBACE,IAAC;oBAAK,WAAU;oBAAiC,aAAWA,QAAQS;8BACjElB,QAAQ,WAARA,GAAQ,IAAC0B,MAAIA;wBAAC,MAAM;;;gBAGzB,SAAS,IAAMX,QAAQ,CAACN;;;;AAKlC;AACO,MAAMkB,MAAMvC"}

package/dist/esm/floatbutton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './floatbutton.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/floatbutton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/floatbutton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/esm/floatbutton/index.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "./floatbutton.js";

package/dist/esm/form/form.d.ts

@@ -0,0 +1,47 @@
+import { type FieldsetHTMLAttributes, type FormHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    layout?: 'horizontal' | 'vertical';
+    labelWidth?: number | 'auto';
+    labelAlign?: 'left' | 'right';
+    disabled?: boolean;
+}
+export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+    htmlFor?: string;
+    required?: boolean;
+    help?: ReactNode;
+    error?: ReactNode;
+    labelWidth?: number;
+}
+export interface FormError {
+    fieldId: string;
+    message: ReactNode;
+    label?: ReactNode;
+}
+interface FieldContextValue {
+    id?: string;
+    labelId?: string;
+    descriptionId?: string;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+}
+export declare function useFormField(): FieldContextValue | undefined;
+/** Internal controls belong to the composite value, not to the outer field. */
+export declare function FieldScope({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export declare function FormField({ label, htmlFor, required, help, error, labelWidth, children, className, style, ...props }: FormFieldProps): import("react").JSX.Element;
+export interface FormGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    legend?: ReactNode;
+    description?: ReactNode;
+}
+export declare function FormGroup({ legend, description, disabled, children, className, ...props }: FormGroupProps): import("react").JSX.Element;
+export interface FormErrorSummaryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    errors?: readonly FormError[];
+    title?: ReactNode;
+}
+export declare function FormErrorSummary({ errors: suppliedErrors, title, className, ...props }: FormErrorSummaryProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=form.d.ts.map

package/dist/esm/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EAEvB,KAAK,cAAc,EACnB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,SAAU,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IACpE,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AASD,UAAU,iBAAiB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,YAAY,kCAI3B;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAE/D;AAED,eAAO,MAAM,IAAI,uGAoEf,CAAC;AAGH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,+BA6GhB;AAED,MAAM,WAAW,cAAe,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AACD,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,+BAmBhB;AACD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AACD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EAAE,cAAc,EACtB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,sCA6BvB"}

package/dist/esm/form/form.js

@@ -0,0 +1,274 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useLeafConfig } from "../config-provider/context.js";
+import { classes } from "../shared/classes.js";
+const FormContext = /*#__PURE__*/ createContext({
+    layout: 'horizontal',
+    labelAlign: 'right',
+    disabled: false,
+    measure: (_id, _width)=>{},
+    errors: [],
+    registerError: (_id, _error)=>{}
+});
+const FieldContext = /*#__PURE__*/ createContext(void 0);
+function useFormField() {
+    const field = useContext(FieldContext);
+    const form = useContext(FormContext);
+    return form.disabled ? {
+        ...field,
+        disabled: true
+    } : field;
+}
+function FieldScope({ children }) {
+    return /*#__PURE__*/ jsx(FieldContext.Provider, {
+        value: void 0,
+        children: children
+    });
+}
+const form_Form = /*#__PURE__*/ forwardRef(function({ layout = 'horizontal', labelWidth = 'auto', labelAlign = 'right', disabled = false, className, style, children, ...props }, ref) {
+    const widths = useRef(new Map());
+    const invalidFocusTimer = useRef(void 0);
+    useEffect(()=>()=>clearTimeout(invalidFocusTimer.current), []);
+    const [maximum, setMaximum] = useState(0);
+    const [errors, setErrors] = useState([]);
+    const registerError = useCallback((id, error)=>{
+        setErrors((previous)=>error ? [
+                ...previous.filter((entry)=>entry.fieldId !== id),
+                error
+            ] : previous.some((entry)=>entry.fieldId === id) ? previous.filter((entry)=>entry.fieldId !== id) : previous);
+    }, []);
+    const measure = useCallback((id, width)=>{
+        if (null === width) widths.current.delete(id);
+        else widths.current.set(id, Math.ceil(width));
+        setMaximum(Math.max(0, ...widths.current.values()));
+    }, []);
+    const context = useMemo(()=>({
+            layout,
+            labelAlign,
+            disabled,
+            measure,
+            errors,
+            registerError
+        }), [
+        layout,
+        labelAlign,
+        disabled,
+        measure,
+        errors,
+        registerError
+    ]);
+    const variables = {
+        '--leaf-form-label-width': `${'auto' === labelWidth ? maximum : Math.max(0, labelWidth)}px`,
+        ...style
+    };
+    return /*#__PURE__*/ jsx(FormContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx("form", {
+            ...props,
+            ref: ref,
+            className: classes('leaf-form', `leaf-form--${layout}`, className),
+            style: variables,
+            onInvalidCapture: (event)=>{
+                props.onInvalidCapture?.(event);
+                if (event.defaultPrevented || void 0 !== invalidFocusTimer.current) return;
+                const target = event.target;
+                invalidFocusTimer.current = setTimeout(()=>{
+                    invalidFocusTimer.current = void 0;
+                    if (!target.isConnected) return;
+                    const control = target.closest('.leaf-form-field')?.querySelector('input:not([aria-hidden="true"]), textarea, [role="combobox"], button');
+                    (control ?? target).focus();
+                });
+            },
+            children: children
+        })
+    });
+});
+form_Form.displayName = 'Form';
+function FormField({ label, htmlFor, required, help, error, labelWidth, children, className, style, ...props }) {
+    const form = useContext(FormContext);
+    const { messages } = useLeafConfig();
+    const generated = useId();
+    const inputId = htmlFor ?? `${generated}-control`;
+    const descriptionId = `${generated}-description`;
+    const labelRef = useRef(null);
+    const [validationError, setValidationError] = useState();
+    const displayedError = error ?? validationError;
+    useEffect(()=>{
+        form.registerError(inputId, displayedError ? {
+            fieldId: inputId,
+            message: displayedError,
+            label
+        } : null);
+        return ()=>form.registerError(inputId, null);
+    }, [
+        form.registerError,
+        inputId,
+        displayedError,
+        label
+    ]);
+    useEffect(()=>{
+        if (null == label) return;
+        const element = labelRef.current;
+        if (!element) return;
+        const measure = ()=>form.measure(generated, element.getBoundingClientRect().width);
+        measure();
+        const observer = "u" < typeof ResizeObserver ? null : new ResizeObserver(measure);
+        observer?.observe(element);
+        return ()=>{
+            observer?.disconnect();
+            form.measure(generated, null);
+        };
+    }, [
+        form.measure,
+        generated,
+        label
+    ]);
+    const root = useRef(null);
+    useEffect(()=>{
+        const owner = root.current?.closest('form');
+        const reset = (event)=>{
+            queueMicrotask(()=>{
+                if (!event.defaultPrevented) setValidationError(void 0);
+            });
+        };
+        owner?.addEventListener('reset', reset);
+        return ()=>owner?.removeEventListener('reset', reset);
+    }, []);
+    const context = {
+        id: inputId,
+        labelId: null != label ? `${generated}-label` : void 0,
+        required,
+        disabled: form.disabled,
+        error: displayedError,
+        descriptionId: displayedError || help ? descriptionId : void 0
+    };
+    const variables = {
+        ...void 0 !== labelWidth ? {
+            '--leaf-form-label-width': `${Math.max(0, labelWidth)}px`
+        } : {},
+        ...style
+    };
+    return /*#__PURE__*/ jsx(FieldContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: root,
+            className: classes('leaf-form-field', `leaf-form-field--${form.layout}`, `leaf-form-field--${form.labelAlign}`, className),
+            style: variables,
+            onInvalidCapture: (event)=>{
+                props.onInvalidCapture?.(event);
+                if (event.defaultPrevented) return;
+                event.preventDefault();
+                const target = event.target;
+                setValidationError(target.validity?.valueMissing ? messages.required : messages.invalid);
+                document.getElementById(inputId)?.focus();
+            },
+            onInputCapture: (event)=>{
+                props.onInputCapture?.(event);
+                setValidationError(void 0);
+            },
+            children: [
+                null != label && /*#__PURE__*/ jsx("label", {
+                    id: `${generated}-label`,
+                    className: "leaf-form-field__label",
+                    htmlFor: inputId,
+                    children: /*#__PURE__*/ jsxs("span", {
+                        ref: labelRef,
+                        children: [
+                            required && /*#__PURE__*/ jsx("span", {
+                                className: "leaf-form-field__required",
+                                "aria-hidden": "true",
+                                children: "*"
+                            }),
+                            label
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "leaf-form-field__body",
+                    children: [
+                        children,
+                        (displayedError || help) && /*#__PURE__*/ jsx("div", {
+                            id: descriptionId,
+                            className: classes("leaf-form-field__description", Boolean(displayedError) && 'leaf-form-field__error'),
+                            role: displayedError ? 'alert' : void 0,
+                            children: displayedError || help
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function FormGroup({ legend, description, disabled, children, className, ...props }) {
+    const inherited = useContext(FormContext);
+    const context = useMemo(()=>({
+            ...inherited,
+            disabled: inherited.disabled || Boolean(disabled)
+        }), [
+        inherited,
+        disabled
+    ]);
+    return /*#__PURE__*/ jsx(FormContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsxs("fieldset", {
+            ...props,
+            disabled: context.disabled,
+            className: classes('leaf-form-group', className),
+            children: [
+                legend && /*#__PURE__*/ jsx("legend", {
+                    children: legend
+                }),
+                description && /*#__PURE__*/ jsx("p", {
+                    className: "leaf-form-group__description",
+                    children: description
+                }),
+                children
+            ]
+        })
+    });
+}
+function FormErrorSummary({ errors: suppliedErrors, title, className, ...props }) {
+    const context = useContext(FormContext);
+    const { locale } = useLeafConfig();
+    const errors = suppliedErrors ?? context.errors;
+    if (!errors.length) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        role: "alert",
+        className: classes('leaf-form-error-summary', className),
+        children: [
+            /*#__PURE__*/ jsx("strong", {
+                children: title ?? ('en-US' === locale ? 'Please check the following fields' : '请检查以下字段')
+            }),
+            /*#__PURE__*/ jsx("ul", {
+                children: errors.map((error)=>/*#__PURE__*/ jsx("li", {
+                        children: /*#__PURE__*/ jsxs("button", {
+                            type: "button",
+                            onClick: ()=>{
+                                const control = document.getElementById(error.fieldId);
+                                control?.scrollIntoView?.({
+                                    block: 'center',
+                                    behavior: 'auto'
+                                });
+                                control?.focus();
+                            },
+                            children: [
+                                error.label ? /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        error.label,
+                                        ": "
+                                    ]
+                                }) : null,
+                                error.message
+                            ]
+                        })
+                    }, error.fieldId))
+            })
+        ]
+    });
+}
+export { FieldScope, FormErrorSummary, FormField, FormGroup, form_Form as Form, useFormField };
+
+//# sourceMappingURL=form.js.map

package/dist/esm/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form/form.js","sources":["../../../src/form/form.tsx"],"sourcesContent":["import {\n  createContext,\n  type FieldsetHTMLAttributes,\n  type FormHTMLAttributes,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport type { LeafThemeStyle } from '../theme';\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  layout?: 'horizontal' | 'vertical';\n  labelWidth?: number | 'auto';\n  labelAlign?: 'left' | 'right';\n  disabled?: boolean;\n}\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  label?: ReactNode;\n  htmlFor?: string;\n  required?: boolean;\n  help?: ReactNode;\n  error?: ReactNode;\n  labelWidth?: number;\n}\nexport interface FormError {\n  fieldId: string;\n  message: ReactNode;\n  label?: ReactNode;\n}\nconst FormContext = createContext({\n  layout: 'horizontal' as 'horizontal' | 'vertical',\n  labelAlign: 'right' as 'left' | 'right',\n  disabled: false,\n  measure: (_id: string, _width: number | null) => {},\n  errors: [] as readonly FormError[],\n  registerError: (_id: string, _error: FormError | null) => {},\n});\ninterface FieldContextValue {\n  id?: string;\n  labelId?: string;\n  descriptionId?: string;\n  error?: ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n}\nconst FieldContext = createContext<FieldContextValue | undefined>(undefined);\nexport function useFormField() {\n  const field = useContext(FieldContext);\n  const form = useContext(FormContext);\n  return form.disabled ? { ...field, disabled: true } : field;\n}\n\n/** Internal controls belong to the composite value, not to the outer field. */\nexport function FieldScope({ children }: { children: ReactNode }) {\n  return <FieldContext.Provider value={undefined}>{children}</FieldContext.Provider>;\n}\n\nexport const Form = forwardRef<HTMLFormElement, FormProps>(function Form(\n  {\n    layout = 'horizontal',\n    labelWidth = 'auto',\n    labelAlign = 'right',\n    disabled = false,\n    className,\n    style,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const widths = useRef(new Map<string, number>());\n  const invalidFocusTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  useEffect(() => () => clearTimeout(invalidFocusTimer.current), []);\n  const [maximum, setMaximum] = useState(0);\n  const [errors, setErrors] = useState<readonly FormError[]>([]);\n  const registerError = useCallback((id: string, error: FormError | null) => {\n    setErrors((previous) =>\n      error\n        ? [...previous.filter((entry) => entry.fieldId !== id), error]\n        : previous.some((entry) => entry.fieldId === id)\n          ? previous.filter((entry) => entry.fieldId !== id)\n          : previous,\n    );\n  }, []);\n  const measure = useCallback((id: string, width: number | null) => {\n    if (width === null) widths.current.delete(id);\n    else widths.current.set(id, Math.ceil(width));\n    setMaximum(Math.max(0, ...widths.current.values()));\n  }, []);\n  const context = useMemo(\n    () => ({ layout, labelAlign, disabled, measure, errors, registerError }),\n    [layout, labelAlign, disabled, measure, errors, registerError],\n  );\n  const variables: LeafThemeStyle = {\n    '--leaf-form-label-width': `${labelWidth === 'auto' ? maximum : Math.max(0, labelWidth)}px`,\n    ...style,\n  };\n  return (\n    <FormContext.Provider value={context}>\n      <form\n        {...props}\n        ref={ref}\n        className={classes('leaf-form', `leaf-form--${layout}`, className)}\n        style={variables}\n        onInvalidCapture={(event) => {\n          props.onInvalidCapture?.(event);\n          if (event.defaultPrevented || invalidFocusTimer.current !== undefined) return;\n          const target = event.target as HTMLElement;\n          // Native validation can run microtasks between invalid events; wait for the full batch.\n          invalidFocusTimer.current = setTimeout(() => {\n            invalidFocusTimer.current = undefined;\n            if (!target.isConnected) return;\n            const control = target\n              .closest('.leaf-form-field')\n              ?.querySelector<HTMLElement>(\n                'input:not([aria-hidden=\"true\"]), textarea, [role=\"combobox\"], button',\n              );\n            (control ?? target).focus();\n          });\n        }}\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n});\nForm.displayName = 'Form';\n\nexport function FormField({\n  label,\n  htmlFor,\n  required,\n  help,\n  error,\n  labelWidth,\n  children,\n  className,\n  style,\n  ...props\n}: FormFieldProps) {\n  const form = useContext(FormContext);\n  const { messages } = useLeafConfig();\n  const generated = useId();\n  const inputId = htmlFor ?? `${generated}-control`;\n  const descriptionId = `${generated}-description`;\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const [validationError, setValidationError] = useState<string>();\n  const displayedError = error ?? validationError;\n  useEffect(() => {\n    form.registerError(\n      inputId,\n      displayedError ? { fieldId: inputId, message: displayedError, label } : null,\n    );\n    return () => form.registerError(inputId, null);\n  }, [form.registerError, inputId, displayedError, label]);\n  useEffect(() => {\n    if (label == null) return;\n    const element = labelRef.current;\n    if (!element) return;\n    const measure = () => form.measure(generated, element.getBoundingClientRect().width);\n    measure();\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(element);\n    return () => {\n      observer?.disconnect();\n      form.measure(generated, null);\n    };\n  }, [form.measure, generated, label]);\n  const root = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const owner = root.current?.closest('form');\n    const reset = (event: Event) => {\n      queueMicrotask(() => {\n        if (!event.defaultPrevented) setValidationError(undefined);\n      });\n    };\n    owner?.addEventListener('reset', reset);\n    return () => owner?.removeEventListener('reset', reset);\n  }, []);\n  const context: FieldContextValue = {\n    id: inputId,\n    labelId: label != null ? `${generated}-label` : undefined,\n    required,\n    disabled: form.disabled,\n    error: displayedError,\n    descriptionId: displayedError || help ? descriptionId : undefined,\n  };\n  const variables: LeafThemeStyle = {\n    ...(labelWidth !== undefined\n      ? { '--leaf-form-label-width': `${Math.max(0, labelWidth)}px` }\n      : {}),\n    ...style,\n  };\n  return (\n    <FieldContext.Provider value={context}>\n      <div\n        {...props}\n        ref={root}\n        className={classes(\n          'leaf-form-field',\n          `leaf-form-field--${form.layout}`,\n          `leaf-form-field--${form.labelAlign}`,\n          className,\n        )}\n        style={variables}\n        onInvalidCapture={(event) => {\n          props.onInvalidCapture?.(event);\n          if (event.defaultPrevented) return;\n          event.preventDefault();\n          const target = event.target as HTMLInputElement;\n          setValidationError(target.validity?.valueMissing ? messages.required : messages.invalid);\n          document.getElementById(inputId)?.focus();\n        }}\n        onInputCapture={(event) => {\n          props.onInputCapture?.(event);\n          setValidationError(undefined);\n        }}\n      >\n        {label != null && (\n          <label id={`${generated}-label`} className=\"leaf-form-field__label\" htmlFor={inputId}>\n            <span ref={labelRef}>\n              {required && (\n                <span className=\"leaf-form-field__required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n              {label}\n            </span>\n          </label>\n        )}\n        <div className=\"leaf-form-field__body\">\n          {children}\n          {(displayedError || help) && (\n            <div\n              id={descriptionId}\n              className={classes(\n                'leaf-form-field__description',\n                Boolean(displayedError) && 'leaf-form-field__error',\n              )}\n              role={displayedError ? 'alert' : undefined}\n            >\n              {displayedError || help}\n            </div>\n          )}\n        </div>\n      </div>\n    </FieldContext.Provider>\n  );\n}\n\nexport interface FormGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  legend?: ReactNode;\n  description?: ReactNode;\n}\nexport function FormGroup({\n  legend,\n  description,\n  disabled,\n  children,\n  className,\n  ...props\n}: FormGroupProps) {\n  const inherited = useContext(FormContext);\n  const context = useMemo(\n    () => ({ ...inherited, disabled: inherited.disabled || Boolean(disabled) }),\n    [inherited, disabled],\n  );\n  return (\n    <FormContext.Provider value={context}>\n      <fieldset\n        {...props}\n        disabled={context.disabled}\n        className={classes('leaf-form-group', className)}\n      >\n        {legend && <legend>{legend}</legend>}\n        {description && <p className=\"leaf-form-group__description\">{description}</p>}\n        {children}\n      </fieldset>\n    </FormContext.Provider>\n  );\n}\nexport interface FormErrorSummaryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  errors?: readonly FormError[];\n  title?: ReactNode;\n}\nexport function FormErrorSummary({\n  errors: suppliedErrors,\n  title,\n  className,\n  ...props\n}: FormErrorSummaryProps) {\n  const context = useContext(FormContext);\n  const { locale } = useLeafConfig();\n  const errors = suppliedErrors ?? context.errors;\n  if (!errors.length) return null;\n  return (\n    <div {...props} role=\"alert\" className={classes('leaf-form-error-summary', className)}>\n      <strong>\n        {title ?? (locale === 'en-US' ? 'Please check the following fields' : '请检查以下字段')}\n      </strong>\n      <ul>\n        {errors.map((error) => (\n          <li key={error.fieldId}>\n            <button\n              type=\"button\"\n              onClick={() => {\n                const control = document.getElementById(error.fieldId);\n                control?.scrollIntoView?.({ block: 'center', behavior: 'auto' });\n                control?.focus();\n              }}\n            >\n              {error.label ? <>{error.label}: </> : null}\n              {error.message}\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"names":["FormContext","createContext","_id","_width","_error","FieldContext","undefined","useFormField","field","useContext","form","FieldScope","children","Form","forwardRef","layout","labelWidth","labelAlign","disabled","className","style","props","ref","widths","useRef","Map","invalidFocusTimer","useEffect","clearTimeout","maximum","setMaximum","useState","errors","setErrors","registerError","useCallback","id","error","previous","entry","measure","width","Math","context","useMemo","variables","classes","event","target","setTimeout","control","FormField","label","htmlFor","required","help","messages","useLeafConfig","generated","useId","inputId","descriptionId","labelRef","validationError","setValidationError","displayedError","element","observer","ResizeObserver","root","owner","reset","queueMicrotask","document","Boolean","FormGroup","legend","description","inherited","FormErrorSummary","suppliedErrors","title","locale"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+export type { FormError, FormErrorSummaryProps, FormFieldProps, FormGroupProps, FormProps, } from './form.js';
+export { Form, FormErrorSummary, FormField, FormGroup } from './form.js';
+export type { FormListField, FormListOperations, FormListProps } from './list.js';
+export { FormList } from './list.js';
+export * from './validation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,SAAS,EACT,qBAAqB,EACrB,cAAc,EACd,cAAc,EACd,SAAS,GACV,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACtE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,cAAc,cAAc,CAAC"}

package/dist/esm/form/index.js

@@ -0,0 +1,4 @@
+"use client";
+export * from "./validation.js";
+export { Form, FormErrorSummary, FormField, FormGroup } from "./form.js";
+export { FormList } from "./list.js";

package/dist/esm/form/list.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface FormListField<T> {
+    key: string;
+    index: number;
+    name: string;
+    value: T;
+}
+export interface FormListOperations<T> {
+    add: (value: T, index?: number) => void;
+    remove: (index: number | readonly number[]) => void;
+    move: (from: number, to: number) => void;
+    update: (index: number, value: T) => void;
+}
+export interface FormListProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue'> {
+    name: string;
+    value?: readonly T[];
+    defaultValue?: readonly T[];
+    onChange?: (values: T[]) => void;
+    itemKey?: (value: T) => string;
+    children: (fields: readonly FormListField<T>[], operations: FormListOperations<T>) => ReactNode;
+}
+export declare function FormList<T>({ name, value, defaultValue, onChange, itemKey, children, className, ...props }: FormListProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=list.d.ts.map

package/dist/esm/form/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/form/list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAGhG,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,CAAC,CAAC;CACV;AACD,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IACpD,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3C;AACD,MAAM,WAAW,aAAa,CAAC,CAAC,CAC9B,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,cAAc,CAAC;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CACjG;AACD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,CAAC,CAAC,+BAgFlB"}

package/dist/esm/form/list.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { classes } from "../shared/classes.js";
+import { useListMotion } from "../shared/motion.js";
+function FormList({ name, value, defaultValue = [], onChange, itemKey, children, className, ...props }) {
+    const id = useId();
+    const sequence = useRef(0);
+    const [internal, setInternal] = useState(defaultValue);
+    const current = value ?? internal;
+    const root = useRef(null);
+    const records = useRef([]);
+    if (records.current.length !== current.length || records.current.some((record, index)=>!Object.is(record.value, current[index]))) {
+        const used = new Set();
+        records.current = current.map((item)=>{
+            const match = records.current.find((record)=>!used.has(record.key) && Object.is(record.value, item));
+            const key = itemKey?.(item) ?? match?.key ?? `${id}-${++sequence.current}`;
+            used.add(key);
+            return {
+                value: item,
+                key
+            };
+        });
+    }
+    const update = (next)=>{
+        records.current = next;
+        const values = next.map((row)=>row.value);
+        if (void 0 === value) setInternal(values);
+        onChange?.(values);
+    };
+    useListMotion(root, records.current.map((row)=>row.key).join('|'), ':scope > *');
+    const operations = {
+        add: (item, position = current.length)=>{
+            const next = [
+                ...records.current
+            ];
+            next.splice(Math.max(0, Math.min(next.length, position)), 0, {
+                key: itemKey?.(item) ?? `${id}-${++sequence.current}`,
+                value: item
+            });
+            update(next);
+        },
+        remove: (index)=>{
+            const positions = 'number' == typeof index ? [
+                index
+            ] : index;
+            update(records.current.filter((_, position)=>!positions.includes(position)));
+        },
+        move: (from, to)=>{
+            if (from < 0 || from >= current.length || to < 0 || to >= current.length || from === to) return;
+            const next = [
+                ...records.current
+            ];
+            const [row] = next.splice(from, 1);
+            if (row) next.splice(to, 0, row);
+            update(next);
+        },
+        update: (index, item)=>{
+            if (index < 0 || index >= current.length) return;
+            update(records.current.map((row, position)=>position === index ? {
+                    ...row,
+                    value: item
+                } : row));
+        }
+    };
+    useEffect(()=>{
+        const form = root.current?.closest('form');
+        const reset = (event)=>queueMicrotask(()=>{
+                if (!event.defaultPrevented && void 0 === value) setInternal(defaultValue);
+            });
+        form?.addEventListener('reset', reset);
+        return ()=>form?.removeEventListener('reset', reset);
+    }, [
+        value,
+        defaultValue
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: root,
+        className: classes('leaf-form-list', className),
+        children: children(records.current.map((row, index)=>({
+                key: row.key,
+                index,
+                name: `${name}.${index}`,
+                value: row.value
+            })), operations)
+    });
+}
+export { FormList };
+
+//# sourceMappingURL=list.js.map