@ifhover/leaf-ui 0.0.0-stage → 0.5.0

package/dist/esm/browser/modules/form/form.js

@@ -0,0 +1,275 @@
+"use client";
+import '../../../styles/components/form.css';
+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/browser/modules/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/browser/modules/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/browser/modules/form/list.js

@@ -0,0 +1,92 @@
+"use client";
+import '../../../styles/components/form.css';
+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

package/dist/esm/browser/modules/form/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form/list.js","sources":["../../../../../src/form/list.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useId, useRef, useState } from 'react';\nimport { classes } from '../shared/classes';\nimport { useListMotion } from '../shared/motion';\nexport interface FormListField<T> {\n  key: string;\n  index: number;\n  name: string;\n  value: T;\n}\nexport interface FormListOperations<T> {\n  add: (value: T, index?: number) => void;\n  remove: (index: number | readonly number[]) => void;\n  move: (from: number, to: number) => void;\n  update: (index: number, value: T) => void;\n}\nexport interface FormListProps<T>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue'> {\n  name: string;\n  value?: readonly T[];\n  defaultValue?: readonly T[];\n  onChange?: (values: T[]) => void;\n  itemKey?: (value: T) => string;\n  children: (fields: readonly FormListField<T>[], operations: FormListOperations<T>) => ReactNode;\n}\nexport function FormList<T>({\n  name,\n  value,\n  defaultValue = [],\n  onChange,\n  itemKey,\n  children,\n  className,\n  ...props\n}: FormListProps<T>) {\n  const id = useId();\n  const sequence = useRef(0);\n  const [internal, setInternal] = useState<readonly T[]>(defaultValue);\n  const current = value ?? internal;\n  const root = useRef<HTMLDivElement>(null);\n  const records = useRef<{ key: string; value: T }[]>([]);\n  if (\n    records.current.length !== current.length ||\n    records.current.some((record, index) => !Object.is(record.value, current[index]))\n  ) {\n    const used = new Set<string>();\n    records.current = current.map((item) => {\n      const match = records.current.find(\n        (record) => !used.has(record.key) && Object.is(record.value, item),\n      );\n      const key = itemKey?.(item) ?? match?.key ?? `${id}-${++sequence.current}`;\n      used.add(key);\n      return { value: item, key };\n    });\n  }\n  const update = (next: { key: string; value: T }[]) => {\n    records.current = next;\n    const values = next.map((row) => row.value);\n    if (value === undefined) setInternal(values);\n    onChange?.(values);\n  };\n  useListMotion(root, records.current.map((row) => row.key).join('|'), ':scope > *');\n  const operations: FormListOperations<T> = {\n    add: (item, position = current.length) => {\n      const next = [...records.current];\n      next.splice(Math.max(0, Math.min(next.length, position)), 0, {\n        key: itemKey?.(item) ?? `${id}-${++sequence.current}`,\n        value: item,\n      });\n      update(next);\n    },\n    remove: (index) => {\n      const positions = typeof index === 'number' ? [index] : index;\n      update(records.current.filter((_, position) => !positions.includes(position)));\n    },\n    move: (from, to) => {\n      if (from < 0 || from >= current.length || to < 0 || to >= current.length || from === to)\n        return;\n      const next = [...records.current];\n      const [row] = next.splice(from, 1);\n      if (row) next.splice(to, 0, row);\n      update(next);\n    },\n    update: (index, item) => {\n      if (index < 0 || index >= current.length) return;\n      update(\n        records.current.map((row, position) =>\n          position === index ? { ...row, value: item } : row,\n        ),\n      );\n    },\n  };\n  useEffect(() => {\n    const form = root.current?.closest('form');\n    const reset = (event: Event) =>\n      queueMicrotask(() => {\n        if (!event.defaultPrevented && value === undefined) setInternal(defaultValue);\n      });\n    form?.addEventListener('reset', reset);\n    return () => form?.removeEventListener('reset', reset);\n  }, [value, defaultValue]);\n  return (\n    <div {...props} ref={root} className={classes('leaf-form-list', className)}>\n      {children(\n        records.current.map((row, index) => ({\n          key: row.key,\n          index,\n          name: `${name}.${index}`,\n          value: row.value,\n        })),\n        operations,\n      )}\n    </div>\n  );\n}\n"],"names":["FormList","name","value","defaultValue","onChange","itemKey","children","className","props","id","useId","sequence","useRef","internal","setInternal","useState","current","root","records","record","index","Object","used","Set","item","match","key","update","next","values","row","undefined","useListMotion","operations","position","Math","positions","_","from","to","useEffect","form","reset","event","queueMicrotask","classes"],"mappings":"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"}

package/dist/esm/browser/modules/form/validation.js

@@ -0,0 +1,77 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+function useFormValidation(options) {
+    const [errors, setErrors] = useState({}), [pending, setPending] = useState(false);
+    const controller = useRef(void 0);
+    const latest = useRef(options);
+    latest.current = options;
+    useEffect(()=>()=>controller.current?.abort(), []);
+    const cancel = ()=>{
+        controller.current?.abort();
+        controller.current = void 0;
+        setPending(false);
+    };
+    const handleSubmit = async (event)=>{
+        event.preventDefault();
+        controller.current?.abort();
+        controller.current = void 0;
+        setPending(false);
+        const form = event.currentTarget;
+        if (!form.noValidate && !form.reportValidity()) return;
+        const request = new AbortController();
+        controller.current = request;
+        setPending(true);
+        const data = new FormData(form);
+        try {
+            const result = await latest.current.validate(data, request.signal);
+            if (request.signal.aborted) return;
+            setErrors(result);
+            const first = Object.keys(result)[0];
+            if (first) {
+                if (false !== latest.current.focusError) {
+                    const element = form.elements.namedItem(first);
+                    if (element instanceof HTMLElement) element.focus();
+                    else if (element instanceof RadioNodeList && element[0] instanceof HTMLElement) element[0].focus();
+                }
+                return;
+            }
+            await latest.current.onSubmit?.(data, request.signal);
+        } catch (error) {
+            if (!request.signal.aborted) latest.current.onError?.(error);
+        } finally{
+            if (controller.current === request && !request.signal.aborted) {
+                setPending(false);
+                controller.current = void 0;
+            }
+        }
+    };
+    return {
+        errors,
+        pending,
+        setErrors,
+        handleSubmit,
+        cancel,
+        handleReset: (event)=>{
+            queueMicrotask(()=>{
+                if (!event.defaultPrevented) {
+                    cancel();
+                    setErrors({});
+                }
+            });
+        },
+        clearErrors: (name)=>{
+            cancel();
+            setErrors((previous)=>{
+                if (!name) return {};
+                const next = {
+                    ...previous
+                };
+                delete next[name];
+                return next;
+            });
+        }
+    };
+}
+export { useFormValidation };
+
+//# sourceMappingURL=validation.js.map

package/dist/esm/browser/modules/form/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form/validation.js","sources":["../../../../../src/form/validation.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type FormEvent,\n  type SetStateAction,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nexport interface FormValidationApi {\n  errors: Record<string, string>;\n  pending: boolean;\n  setErrors: Dispatch<SetStateAction<Record<string, string>>>;\n  handleSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;\n  handleReset: (event: FormEvent<HTMLFormElement>) => void;\n  cancel: () => void;\n  clearErrors: (name?: string) => void;\n}\nexport interface FormValidationOptions {\n  validate: (\n    data: FormData,\n    signal: AbortSignal,\n  ) => Record<string, string> | Promise<Record<string, string>>;\n  onSubmit?: (data: FormData, signal: AbortSignal) => void | Promise<void>;\n  onError?: (error: unknown) => void;\n  focusError?: boolean;\n}\n/** Schema, asynchronous and server errors, keeping native FormData as the source. */\nexport function useFormValidation(options: FormValidationOptions): FormValidationApi {\n  const [errors, setErrors] = useState<Record<string, string>>({}),\n    [pending, setPending] = useState(false);\n  const controller = useRef<AbortController | undefined>(undefined);\n  const latest = useRef(options);\n  latest.current = options;\n  useEffect(() => () => controller.current?.abort(), []);\n  const cancel = () => {\n    controller.current?.abort();\n    controller.current = undefined;\n    setPending(false);\n  };\n  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    controller.current?.abort();\n    controller.current = undefined;\n    setPending(false);\n    const form = event.currentTarget;\n    if (!form.noValidate && !form.reportValidity()) return;\n    const request = new AbortController();\n    controller.current = request;\n    setPending(true);\n    const data = new FormData(form);\n    try {\n      const result = await latest.current.validate(data, request.signal);\n      if (request.signal.aborted) return;\n      setErrors(result);\n      const first = Object.keys(result)[0];\n      if (first) {\n        if (latest.current.focusError !== false) {\n          const element = form.elements.namedItem(first);\n          if (element instanceof HTMLElement) element.focus();\n          else if (element instanceof RadioNodeList && element[0] instanceof HTMLElement)\n            element[0].focus();\n        }\n        return;\n      }\n      await latest.current.onSubmit?.(data, request.signal);\n    } catch (error) {\n      if (!request.signal.aborted) latest.current.onError?.(error);\n    } finally {\n      if (controller.current === request && !request.signal.aborted) {\n        setPending(false);\n        controller.current = undefined;\n      }\n    }\n  };\n  return {\n    errors,\n    pending,\n    setErrors,\n    handleSubmit,\n    cancel,\n    handleReset: (event: FormEvent<HTMLFormElement>) => {\n      queueMicrotask(() => {\n        if (!event.defaultPrevented) {\n          cancel();\n          setErrors({});\n        }\n      });\n    },\n    clearErrors: (name?: string) => {\n      cancel();\n      setErrors((previous) => {\n        if (!name) return {};\n        const next = { ...previous };\n        delete next[name];\n        return next;\n      });\n    },\n  };\n}\n"],"names":["useFormValidation","options","errors","setErrors","useState","pending","setPending","controller","useRef","undefined","latest","useEffect","cancel","handleSubmit","event","form","request","AbortController","data","FormData","result","first","Object","element","HTMLElement","RadioNodeList","error","queueMicrotask","name","previous","next"],"mappings":";;AA2BO,SAASA,kBAAkBC,OAA8B;IAC9D,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAiC,CAAC,IAC5D,CAACC,SAASC,WAAW,GAAGF,SAAS;IACnC,MAAMG,aAAaC,OAAoCC;IACvD,MAAMC,SAASF,OAAOP;IACtBS,OAAO,OAAO,GAAGT;IACjBU,UAAU,IAAM,IAAMJ,WAAW,OAAO,EAAE,SAAS,EAAE;IACrD,MAAMK,SAAS;QACbL,WAAW,OAAO,EAAE;QACpBA,WAAW,OAAO,GAAGE;QACrBH,WAAW;IACb;IACA,MAAMO,eAAe,OAAOC;QAC1BA,MAAM,cAAc;QACpBP,WAAW,OAAO,EAAE;QACpBA,WAAW,OAAO,GAAGE;QACrBH,WAAW;QACX,MAAMS,OAAOD,MAAM,aAAa;QAChC,IAAI,CAACC,KAAK,UAAU,IAAI,CAACA,KAAK,cAAc,IAAI;QAChD,MAAMC,UAAU,IAAIC;QACpBV,WAAW,OAAO,GAAGS;QACrBV,WAAW;QACX,MAAMY,OAAO,IAAIC,SAASJ;QAC1B,IAAI;YACF,MAAMK,SAAS,MAAMV,OAAO,OAAO,CAAC,QAAQ,CAACQ,MAAMF,QAAQ,MAAM;YACjE,IAAIA,QAAQ,MAAM,CAAC,OAAO,EAAE;YAC5Bb,UAAUiB;YACV,MAAMC,QAAQC,OAAO,IAAI,CAACF,OAAO,CAAC,EAAE;YACpC,IAAIC,OAAO;gBACT,IAAIX,AAA8B,UAA9BA,OAAO,OAAO,CAAC,UAAU,EAAY;oBACvC,MAAMa,UAAUR,KAAK,QAAQ,CAAC,SAAS,CAACM;oBACxC,IAAIE,mBAAmBC,aAAaD,QAAQ,KAAK;yBAC5C,IAAIA,mBAAmBE,iBAAiBF,OAAO,CAAC,EAAE,YAAYC,aACjED,OAAO,CAAC,EAAE,CAAC,KAAK;gBACpB;gBACA;YACF;YACA,MAAMb,OAAO,OAAO,CAAC,QAAQ,GAAGQ,MAAMF,QAAQ,MAAM;QACtD,EAAE,OAAOU,OAAO;YACd,IAAI,CAACV,QAAQ,MAAM,CAAC,OAAO,EAAEN,OAAO,OAAO,CAAC,OAAO,GAAGgB;QACxD,SAAU;YACR,IAAInB,WAAW,OAAO,KAAKS,WAAW,CAACA,QAAQ,MAAM,CAAC,OAAO,EAAE;gBAC7DV,WAAW;gBACXC,WAAW,OAAO,GAAGE;YACvB;QACF;IACF;IACA,OAAO;QACLP;QACAG;QACAF;QACAU;QACAD;QACA,aAAa,CAACE;YACZa,eAAe;gBACb,IAAI,CAACb,MAAM,gBAAgB,EAAE;oBAC3BF;oBACAT,UAAU,CAAC;gBACb;YACF;QACF;QACA,aAAa,CAACyB;YACZhB;YACAT,UAAU,CAAC0B;gBACT,IAAI,CAACD,MAAM,OAAO,CAAC;gBACnB,MAAME,OAAO;oBAAE,GAAGD,QAAQ;gBAAC;gBAC3B,OAAOC,IAAI,CAACF,KAAK;gBACjB,OAAOE;YACT;QACF;IACF;AACF"}

package/dist/esm/browser/modules/grid/grid.js

@@ -0,0 +1,92 @@
+"use client";
+import '../../../styles/components/grid.css';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { classes } from "../shared/classes.js";
+const grid_Grid = /*#__PURE__*/ forwardRef(function({ columns = 3, gap = 16, align = 'stretch', className, style, ...props }, ref) {
+    const variables = {
+        alignItems: align,
+        gap: 'object' == typeof gap ? gap.map((v)=>'number' == typeof v ? `${v}px` : v).join(' ') : gap,
+        ...style
+    };
+    if ('number' == typeof columns) variables['--leaf-grid-columns'] = Math.max(1, Math.trunc(columns));
+    else {
+        let last = 1;
+        for (const point of [
+            'xs',
+            'sm',
+            'md',
+            'lg',
+            'xl'
+        ]){
+            last = columns[point] ?? last;
+            variables[`--leaf-grid-columns-${point}`] = Math.max(1, Math.trunc(last));
+        }
+    }
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        className: classes('leaf-grid', className),
+        style: variables
+    });
+});
+const grid_Row = /*#__PURE__*/ forwardRef(function({ gutter = 16, className, style, ...props }, ref) {
+    const [vertical, horizontal] = 'object' == typeof gutter ? gutter : [
+        gutter,
+        gutter
+    ];
+    const unit = (value)=>'number' == typeof value ? `${value}px` : value;
+    const variables = {
+        '--leaf-row-gutter': unit(horizontal),
+        columnGap: 0,
+        rowGap: unit(vertical),
+        ...style
+    };
+    return /*#__PURE__*/ jsx(grid_Grid, {
+        ...props,
+        ref: ref,
+        columns: 24,
+        gap: gutter,
+        style: variables,
+        className: classes('leaf-row', className)
+    });
+});
+const grid_Col = /*#__PURE__*/ forwardRef(function({ span = 24, offset = 0, xs, sm, md, lg, xl, className, style, ...props }, ref) {
+    const variables = {
+        ...style
+    };
+    let last = span;
+    for (const [point, value] of Object.entries({
+        xs,
+        sm,
+        md,
+        lg,
+        xl
+    })){
+        last = value ?? last;
+        variables[`--leaf-col-span-${point}`] = Math.min(24, Math.max(1, Math.trunc(last)));
+        variables[`--leaf-col-display-${point}`] = last <= 0 ? 'none' : 'block';
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            offset > 0 && /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                className: "leaf-col leaf-col--offset",
+                style: {
+                    ...variables,
+                    gridColumnEnd: `span ${Math.min(23, Math.max(1, Math.trunc(offset)))}`,
+                    flexBasis: `${Math.min(23, Math.max(1, Math.trunc(offset))) / 24 * 100}%`
+                }
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ...props,
+                ref: ref,
+                className: classes('leaf-col', className),
+                style: variables
+            })
+        ]
+    });
+});
+export { grid_Col as Col, grid_Grid as Grid, grid_Row as Row };
+
+//# sourceMappingURL=grid.js.map

package/dist/esm/browser/modules/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid/grid.js","sources":["../../../../../src/grid/grid.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { classes } from '../shared/classes';\nimport type { LeafThemeStyle } from '../theme';\n\nexport type GridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: number | Partial<Record<GridBreakpoint, number>>;\n  gap?: number | string | readonly [number | string, number | string];\n  align?: 'start' | 'center' | 'end' | 'stretch';\n}\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(\n  { columns = 3, gap = 16, align = 'stretch', className, style, ...props },\n  ref,\n) {\n  const variables: LeafThemeStyle = {\n    alignItems: align,\n    gap:\n      typeof gap === 'object'\n        ? gap.map((v) => (typeof v === 'number' ? `${v}px` : v)).join(' ')\n        : gap,\n    ...style,\n  };\n  if (typeof columns === 'number')\n    variables['--leaf-grid-columns'] = Math.max(1, Math.trunc(columns));\n  else {\n    let last = 1;\n    for (const point of ['xs', 'sm', 'md', 'lg', 'xl'] as const) {\n      last = columns[point] ?? last;\n      variables[`--leaf-grid-columns-${point}`] = Math.max(1, Math.trunc(last));\n    }\n  }\n  return <div {...props} ref={ref} className={classes('leaf-grid', className)} style={variables} />;\n});\nexport interface RowProps extends Omit<GridProps, 'columns' | 'gap'> {\n  gutter?: GridProps['gap'];\n}\nexport const Row = forwardRef<HTMLDivElement, RowProps>(function Row(\n  { gutter = 16, className, style, ...props },\n  ref,\n) {\n  const [vertical, horizontal] = typeof gutter === 'object' ? gutter : [gutter, gutter];\n  const unit = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const variables: LeafThemeStyle = {\n    '--leaf-row-gutter': unit(horizontal),\n    columnGap: 0,\n    rowGap: unit(vertical),\n    ...style,\n  };\n  return (\n    <Grid\n      {...props}\n      ref={ref}\n      columns={24}\n      gap={gutter}\n      style={variables}\n      className={classes('leaf-row', className)}\n    />\n  );\n});\nexport interface ColProps extends HTMLAttributes<HTMLDivElement> {\n  span?: number;\n  offset?: number;\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n}\nexport const Col = forwardRef<HTMLDivElement, ColProps>(function Col(\n  { span = 24, offset = 0, xs, sm, md, lg, xl, className, style, ...props },\n  ref,\n) {\n  const variables: LeafThemeStyle = { ...style };\n  let last = span;\n  for (const [point, value] of Object.entries({ xs, sm, md, lg, xl })) {\n    last = value ?? last;\n    variables[`--leaf-col-span-${point}`] = Math.min(24, Math.max(1, Math.trunc(last)));\n    variables[`--leaf-col-display-${point}`] = last <= 0 ? 'none' : 'block';\n  }\n  return (\n    <>\n      {offset > 0 && (\n        <div\n          aria-hidden=\"true\"\n          className=\"leaf-col leaf-col--offset\"\n          style={{\n            ...variables,\n            gridColumnEnd: `span ${Math.min(23, Math.max(1, Math.trunc(offset)))}`,\n            flexBasis: `${(Math.min(23, Math.max(1, Math.trunc(offset))) / 24) * 100}%`,\n          }}\n        />\n      )}\n      <div {...props} ref={ref} className={classes('leaf-col', className)} style={variables} />\n    </>\n  );\n});\n"],"names":["Grid","forwardRef","columns","gap","align","className","style","props","ref","variables","v","Math","last","point","classes","Row","gutter","vertical","horizontal","unit","value","Col","span","offset","xs","sm","md","lg","xl","Object"],"mappings":"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"}

package/dist/esm/browser/modules/grid/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Col, Grid, Row } from "./grid.js";