@douglasneuroinformatics/libui 4.0.2 → 4.1.0

package/dist/components.d.ts

@@ -25,7 +25,7 @@ import { FormDataType, FormContent, PartialNullableFormDataType } from '@douglas
 import { z } from 'zod';
 import * as _radix_ui_react_hover_card from '@radix-ui/react-hover-card';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { L as Language } from './types-CMuti1SJ.js';
+import { L as Language } from './types-Dm7os_cB.js';
 import * as _radix_ui_react_menubar from '@radix-ui/react-menubar';
 import { MenubarMenuProps } from '@radix-ui/react-menubar';
 import * as _radix_ui_react_popover from '@radix-ui/react-popover';
@@ -1283,8 +1283,18 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
         left?: React.ReactNode;
         right?: React.ReactNode;
     };
+    beforeSubmit?: (data: NoInfer<TData>) => Promisable<{
+        errorMessage: string;
+        success: false;
+    } | {
+        success: true;
+    }>;
     className?: string;
     content: FormContent<TData>;
+    customStyles?: {
+        resetBtn?: string;
+        submitBtn?: string;
+    };
     fieldsFooter?: React.ReactNode;
     id?: string;
     initialValues?: PartialNullableFormDataType<NoInfer<TData>>;
@@ -1298,7 +1308,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
     suspendWhileSubmitting?: boolean;
     validationSchema: z.ZodType<TData>;
 };
-declare const Form: <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ additionalButtons, className, content, fieldsFooter, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, suspendWhileSubmitting, validationSchema, ...props }: FormProps<TSchema, TData>) => react_jsx_runtime.JSX.Element;
+declare const Form: <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ additionalButtons, beforeSubmit, className, content, customStyles, fieldsFooter, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, suspendWhileSubmitting, validationSchema, ...props }: FormProps<TSchema, TData>) => react_jsx_runtime.JSX.Element;
 
 type HeadingProps = {
     children: string;

package/dist/components.js

@@ -327,7 +327,7 @@ var BUTTON_ICON_SIZE = {
   sm: 14
 };
 var buttonVariants = cva(
-  "flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "flex items-center justify-center whitespace-nowrap cursor-pointer rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     defaultVariants: {
       size: "md",
@@ -1861,7 +1861,7 @@ var DialogOverlay = forwardRef63(function DialogOverlay2({ className, ...props }
     Overlay2,
     {
       className: cn(
-        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-200",
         className
       ),
       ref,
@@ -1879,7 +1879,7 @@ var DialogContent = forwardRef64(function DialogContent2({ children, className,
       Content6,
       {
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
           className
         ),
         ref,
@@ -2018,25 +2018,32 @@ var ErrorFallback = ({ error }) => {
   useEffect2(() => {
     console.error(error);
   }, [error]);
-  return /* @__PURE__ */ jsxs24("div", { className: "flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center", children: [
-    /* @__PURE__ */ jsx90("h1", { className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Unexpected Error" }),
-    /* @__PURE__ */ jsx90("h3", { className: "text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl", children: "Something Went Wrong" }),
-    /* @__PURE__ */ jsx90("p", { className: "mt-2 max-w-prose text-sm text-muted-foreground sm:text-base", children: "We apologize for the inconvenience. Please contact us for further assistance." }),
-    /* @__PURE__ */ jsx90("div", { className: "mt-6", children: /* @__PURE__ */ jsxs24(
-      "button",
-      {
-        className: "text-sky-800 underline-offset-4 hover:text-sky-700 hover:underline dark:text-sky-200 dark:hover:text-sky-300",
-        type: "button",
-        onClick: () => {
-          window.location.assign(window.location.origin);
-        },
-        children: [
-          "Reload Page",
-          /* @__PURE__ */ jsx90("span", { "aria-hidden": "true", children: " \u2192" })
-        ]
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      className: "flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center",
+      "data-testid": "error-fallback",
+      children: [
+        /* @__PURE__ */ jsx90("h1", { className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase", children: "Unexpected Error" }),
+        /* @__PURE__ */ jsx90("h3", { className: "text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl", children: "Something Went Wrong" }),
+        /* @__PURE__ */ jsx90("p", { className: "text-muted-foreground mt-2 max-w-prose text-sm sm:text-base", children: "We apologize for the inconvenience. Please contact us for further assistance." }),
+        /* @__PURE__ */ jsx90("div", { className: "mt-6", children: /* @__PURE__ */ jsxs24(
+          "button",
+          {
+            className: "text-sky-800 underline-offset-4 hover:text-sky-700 hover:underline dark:text-sky-200 dark:hover:text-sky-300",
+            type: "button",
+            onClick: () => {
+              window.location.assign(window.location.origin);
+            },
+            children: [
+              "Reload Page",
+              /* @__PURE__ */ jsx90("span", { "aria-hidden": "true", children: " \u2192" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 };
 
 // src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -2133,10 +2140,10 @@ var Heading = ({ children, className, variant }) => {
 import "react";
 import { CircleAlertIcon } from "lucide-react";
 import { jsx as jsx94, jsxs as jsxs26 } from "react/jsx-runtime";
-var ErrorMessage = ({ error }) => {
-  return error ? /* @__PURE__ */ jsx94("div", { className: "space-y-1.5", children: error.map((message) => /* @__PURE__ */ jsxs26("div", { className: "flex w-full items-center text-sm font-medium text-destructive", children: [
+var ErrorMessage = ({ className, error }) => {
+  return error ? /* @__PURE__ */ jsx94("div", { className: "space-y-1.5", children: error.map((message) => /* @__PURE__ */ jsxs26("div", { className: cn("text-destructive flex w-full items-center text-sm font-medium", className), children: [
     /* @__PURE__ */ jsx94(CircleAlertIcon, { className: "mr-1", style: { strokeWidth: "2px" } }),
-    /* @__PURE__ */ jsx94("span", { children: message })
+    /* @__PURE__ */ jsx94("span", { "data-testid": "error-message-text", children: message })
   ] }, message)) ?? null }) : null;
 };
 
@@ -2160,7 +2167,7 @@ import { useEffect as useEffect4, useRef as useRef3 } from "react";
 import { match as match2 } from "ts-pattern";
 
 // src/components/Form/NumberField/NumberFieldInput.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect3, useId as useId2, useRef as useRef2, useState as useState4 } from "react";
 import { parseNumber } from "@douglasneuroinformatics/libjs";
 
 // src/components/Input/Input.tsx
@@ -2271,6 +2278,7 @@ var NumberFieldInput = ({
   setValue,
   value
 }) => {
+  const id = useId2();
   const [inputValue, setInputValue] = useState4(value?.toString() ?? "");
   const valueRef = useRef2(value);
   const parseInputValue = (value2) => {
@@ -2304,13 +2312,14 @@ var NumberFieldInput = ({
   }, [value]);
   return /* @__PURE__ */ jsxs28(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs28(FieldGroup.Row, { children: [
-      /* @__PURE__ */ jsx101(Label3, { children: label }),
+      /* @__PURE__ */ jsx101(Label3, { htmlFor: id, children: label }),
       /* @__PURE__ */ jsx101(FieldGroup.Description, { description })
     ] }),
     /* @__PURE__ */ jsx101(
       Input,
       {
         disabled: disabled || readOnly,
+        id,
         max,
         min,
         name,
@@ -3467,8 +3476,10 @@ function getInitialValues(values) {
 import { jsx as jsx136, jsxs as jsxs47 } from "react/jsx-runtime";
 var Form = ({
   additionalButtons,
+  beforeSubmit,
   className,
   content,
+  customStyles,
   fieldsFooter,
   id,
   initialValues,
@@ -3492,6 +3503,7 @@ var Form = ({
   const [isSubmitting, setIsSubmitting] = useState8(false);
   const handleError = (error) => {
     const fieldErrors = {};
+    const rootErrors2 = [];
     for (const issue of error.issues) {
       if (issue.path.length > 0) {
         const current = get(fieldErrors, issue.path);
@@ -3501,10 +3513,11 @@ var Form = ({
           set(fieldErrors, issue.path, [issue.message]);
         }
       } else {
-        setRootErrors((prevErrors) => [...prevErrors, issue.message]);
+        rootErrors2.push(issue.message);
       }
     }
     setErrors(fieldErrors);
+    setRootErrors(rootErrors2);
     if (onError) {
       onError(error);
     }
@@ -3524,6 +3537,14 @@ var Form = ({
       handleError(result.error);
       return;
     }
+    if (beforeSubmit) {
+      const beforeSubmitResult = await beforeSubmit(result.data);
+      if (!beforeSubmitResult.success) {
+        setErrors({});
+        setRootErrors([beforeSubmitResult.errorMessage]);
+        return;
+      }
+    }
     try {
       setIsSubmitting(true);
       await Promise.all([
@@ -3567,7 +3588,7 @@ var Form = ({
           return /* @__PURE__ */ jsxs47("div", { className: "flex flex-col space-y-6 [&:not(:first-child)]:pt-8", children: [
             /* @__PURE__ */ jsxs47("div", { className: "space-y-1", children: [
               fieldGroup.title && /* @__PURE__ */ jsx136(Heading, { className: "text-base", variant: "h4", children: fieldGroup.title }),
-              fieldGroup.description && /* @__PURE__ */ jsx136("p", { className: "text-sm italic leading-tight text-muted-foreground", children: fieldGroup.description })
+              fieldGroup.description && /* @__PURE__ */ jsx136("p", { className: "text-muted-foreground text-sm leading-tight italic", children: fieldGroup.description })
             ] }),
             /* @__PURE__ */ jsx136(
               FieldsComponent,
@@ -3592,6 +3613,7 @@ var Form = ({
             values
           }
         ),
+        Boolean(rootErrors.length) && /* @__PURE__ */ jsx136(ErrorMessage, { className: "-mt-3", error: rootErrors }),
         fieldsFooter,
         /* @__PURE__ */ jsxs47("div", { className: "flex w-full gap-3", children: [
           additionalButtons?.left,
@@ -3599,7 +3621,7 @@ var Form = ({
             Button,
             {
               "aria-label": "Submit",
-              className: "flex w-full items-center justify-center gap-2",
+              className: cn("flex w-full items-center justify-center gap-2", customStyles?.submitBtn),
               disabled: readOnly || isSuspended,
               type: "submit",
               variant: "primary",
@@ -3628,7 +3650,7 @@ var Form = ({
             Button,
             {
               "aria-label": "Reset",
-              className: "block w-full",
+              className: cn("block w-full", customStyles?.resetBtn),
               disabled: readOnly,
               type: "button",
               variant: "secondary",
@@ -3637,8 +3659,7 @@ var Form = ({
             }
           ),
           additionalButtons?.right
-        ] }),
-        Boolean(rootErrors.length) && /* @__PURE__ */ jsx136(ErrorMessage, { error: rootErrors })
+        ] })
       ]
     }
   );