@douglasneuroinformatics/libui 3.2.0 → 3.4.0

package/dist/components.d.ts

@@ -1166,6 +1166,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
     [key: `data-${string}`]: unknown;
     className?: string;
     content: FormContent<TData>;
+    fieldsFooter?: React$1.ReactNode;
     id?: string;
     initialValues?: PartialNullableFormDataType<TData>;
     onError?: (error: z.ZodError<TData>) => void;
@@ -1177,7 +1178,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
     submitBtnLabel?: string;
     validationSchema: z.ZodType<TData>;
 };
-declare const Form: <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ className, content, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, 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>>({ className, content, fieldsFooter, id, initialValues, onError, onSubmit, preventResetValuesOnReset, readOnly, resetBtn, revalidateOnBlur, submitBtnLabel, validationSchema, ...props }: FormProps<TSchema, TData>) => react_jsx_runtime.JSX.Element;
 
 type HeadingProps = {
     children: string;
@@ -1344,8 +1345,11 @@ declare const Resizable: ResizableType;
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_scroll_area.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 type BaseSearchBarProps = {
+    [key: `data-${string}`]: unknown;
     /** Additional CSS classes to add to the wrapper form component, potentially overriding default styling */
     className?: string;
+    /** The ID to pass to the HTMLFormElement  */
+    id?: string;
     /** An optional callback invoked when the user clicks the search bar */
     onClick?: () => void;
     /** Custom placeholder to use instead of the default */
@@ -1364,7 +1368,7 @@ type UncontrolledSearchBarProps = {
     value?: never;
 } & BaseSearchBarProps;
 type SearchBarProps = ControlledSearchBarProps | UncontrolledSearchBarProps;
-declare const SearchBar: ({ className, onClick, onValueChange, placeholder, readOnly, value }: SearchBarProps) => react_jsx_runtime.JSX.Element;
+declare const SearchBar: ({ className, onClick, onValueChange, placeholder, readOnly, value, ...props }: SearchBarProps) => react_jsx_runtime.JSX.Element;
 
 declare const Select: React$1.FC<SelectPrimitive.SelectProps> & {
     Content: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -1402,12 +1406,13 @@ declare const Spinner: ({ className, ...props }: HTMLProps<HTMLDivElement>) => r
 declare const SpinnerIcon: ({ className, ...props }: React$1.HTMLAttributes<SVGElement>) => react_jsx_runtime.JSX.Element;
 
 type StatisticCardProps = {
+    [key: `data-${string}`]: unknown;
     className?: string;
     icon?: JSX.Element;
     label: string;
     value: number;
 };
-declare const StatisticCard: ({ className, icon, label, value }: StatisticCardProps) => react_jsx_runtime.JSX.Element;
+declare const StatisticCard: ({ className, icon, label, value, ...props }: StatisticCardProps) => react_jsx_runtime.JSX.Element;
 
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 

package/dist/components.js

@@ -1921,7 +1921,7 @@ var FieldGroupDescription = ({ description }) => description ? /* @__PURE__ */ j
 // src/components/Form/FieldGroup/FieldGroupRoot.tsx
 import "react";
 import { jsx as jsx94 } from "react/jsx-runtime";
-var FieldGroupRoot = ({ children }) => /* @__PURE__ */ jsx94("div", { className: "flex flex-col gap-3 @container", children });
+var FieldGroupRoot = ({ children, name }) => /* @__PURE__ */ jsx94("div", { className: "flex flex-col gap-3 @container", "data-field-group": name, children });
 
 // src/components/Form/FieldGroup/FieldGroupRow.tsx
 import "react";
@@ -1969,7 +1969,7 @@ var NumberFieldInput = ({
       setValue(newValue);
     }
   };
-  return /* @__PURE__ */ jsxs24(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs24(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs24(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx96(Label3, { children: label }),
       /* @__PURE__ */ jsx96(FieldGroup.Description, { description })
@@ -2044,7 +2044,7 @@ var NumberFieldRadio = ({
   value
 }) => {
   const optionsCount = Object.keys(options).length;
-  return /* @__PURE__ */ jsxs25(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs25(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs25(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx99(Label3, { children: label }),
       /* @__PURE__ */ jsx99(FieldGroup.Description, { description })
@@ -2227,7 +2227,7 @@ var NumberFieldSelect = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs28(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs28(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs28(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx107(Label3, { children: label }),
       /* @__PURE__ */ jsx107(FieldGroup.Description, { description })
@@ -2294,7 +2294,7 @@ var NumberFieldSlider = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs30(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs30(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs30(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx109(Label3, { children: label }),
       /* @__PURE__ */ jsx109(FieldGroup.Description, { description })
@@ -2384,7 +2384,7 @@ var BooleanFieldCheckbox = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs32(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs32(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs32(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx112(
         Checkbox,
@@ -2428,7 +2428,7 @@ var BooleanFieldRadio = ({
     },
     [match3, setValue]
   );
-  return /* @__PURE__ */ jsxs33(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs33(FieldGroup, { name, children: [
     /* @__PURE__ */ jsx113(Label3, { children: label }),
     /* @__PURE__ */ jsxs33(
       RadioGroup4,
@@ -2497,7 +2497,7 @@ var DateField = ({ disabled, error, label, name, readOnly, setValue, value }) =>
   useEffect4(() => {
     setInputValue(value ? toBasicISOString2(value) : "");
   }, [value]);
-  return /* @__PURE__ */ jsxs34(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs34(FieldGroup, { name, children: [
     /* @__PURE__ */ jsx115(Label3, { htmlFor: name, children: label }),
     /* @__PURE__ */ jsxs34(Popover, { open: isDatePickerOpen, onOpenChange: setIsDatePickerOpen, children: [
       /* @__PURE__ */ jsx115(Popover.Trigger, { children: /* @__PURE__ */ jsx115(
@@ -2546,7 +2546,7 @@ var SetFieldListbox = ({
   readOnly,
   value
 }) => {
-  return /* @__PURE__ */ jsxs35(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs35(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs35(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx116(Label3, { children: label }),
       /* @__PURE__ */ jsx116(FieldGroup.Description, { description })
@@ -2576,12 +2576,13 @@ var SetFieldSelect = ({
   disabled,
   error,
   label,
+  name,
   onCheckedChange,
   options,
   readOnly,
   value
 }) => {
-  return value ? /* @__PURE__ */ jsxs36(FieldGroup, { children: [
+  return value ? /* @__PURE__ */ jsxs36(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs36(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx117(Label3, { children: label }),
       /* @__PURE__ */ jsx117(FieldGroup.Description, { description })
@@ -2646,7 +2647,7 @@ var StringFieldInput = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs37(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs37(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs37(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx119(Label3, { htmlFor: name, children: label }),
       /* @__PURE__ */ jsx119(FieldGroup.Description, { description })
@@ -2690,7 +2691,7 @@ var StringFieldPassword = ({
       setStrength(value ? calculateStrength(value) : 0);
     }
   }, [value]);
-  return /* @__PURE__ */ jsxs38(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs38(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs38(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx120(Label3, { htmlFor: name, children: label }),
       /* @__PURE__ */ jsx120(FieldGroup.Description, { description })
@@ -2773,7 +2774,7 @@ var BaseRadioField = ({
   value
 }) => {
   const optionsCount = Object.keys(options).length;
-  return /* @__PURE__ */ jsxs39(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs39(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs39(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx121(Label3, { children: label }),
       /* @__PURE__ */ jsx121(FieldGroup.Description, { description })
@@ -2822,7 +2823,7 @@ var StringFieldSelect = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs40(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs40(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs40(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx123(Label3, { children: label }),
       /* @__PURE__ */ jsx123(FieldGroup.Description, { description })
@@ -2867,7 +2868,7 @@ var StringFieldTextArea = ({
   setValue,
   value
 }) => {
-  return /* @__PURE__ */ jsxs41(FieldGroup, { children: [
+  return /* @__PURE__ */ jsxs41(FieldGroup, { name, children: [
     /* @__PURE__ */ jsxs41(FieldGroup.Row, { children: [
       /* @__PURE__ */ jsx125(Label3, { htmlFor: name, children: label }),
       /* @__PURE__ */ jsx125(FieldGroup.Description, { description })
@@ -3118,6 +3119,7 @@ import { jsx as jsx131, jsxs as jsxs43 } from "react/jsx-runtime";
 var Form = ({
   className,
   content,
+  fieldsFooter,
   id,
   initialValues,
   onError,
@@ -3226,6 +3228,7 @@ var Form = ({
             values
           }
         ),
+        fieldsFooter,
         /* @__PURE__ */ jsxs43("div", { className: "flex w-full gap-3", children: [
           /* @__PURE__ */ jsx131(Button, { "aria-label": "Submit", className: "block w-full", disabled: readOnly, type: "submit", variant: "primary", children: submitBtnLabel ?? t("form.submit") }),
           resetBtn && /* @__PURE__ */ jsx131(
@@ -3879,9 +3882,17 @@ var Resizable = Object.assign(ResizableRoot, {
 // src/components/SearchBar/SearchBar.tsx
 import { SearchIcon as SearchIcon2 } from "lucide-react";
 import { jsx as jsx160, jsxs as jsxs54 } from "react/jsx-runtime";
-var SearchBar = ({ className, onClick, onValueChange, placeholder, readOnly, value }) => {
+var SearchBar = ({
+  className,
+  onClick,
+  onValueChange,
+  placeholder,
+  readOnly,
+  value,
+  ...props
+}) => {
   const { t } = useTranslation("libui");
-  return /* @__PURE__ */ jsxs54("form", { className: cn("relative", className), children: [
+  return /* @__PURE__ */ jsxs54("form", { className: cn("relative", className), ...props, children: [
     /* @__PURE__ */ jsx160(SearchIcon2, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
     /* @__PURE__ */ jsx160(
       Input,
@@ -4075,13 +4086,13 @@ var SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsx170(
 import { useEffect as useEffect10 } from "react";
 import { motion as motion6, useSpring, useTransform } from "framer-motion";
 import { jsx as jsx171, jsxs as jsxs56 } from "react/jsx-runtime";
-var StatisticCard = ({ className, icon, label, value }) => {
+var StatisticCard = ({ className, icon, label, value, ...props }) => {
   const spring = useSpring(0, { bounce: 0 });
   const rounded = useTransform(spring, (latest) => Math.floor(latest));
   useEffect10(() => {
     spring.set(value);
   }, [spring, value]);
-  return /* @__PURE__ */ jsxs56(Card, { className: cn("flex w-full rounded-lg p-4", className), children: [
+  return /* @__PURE__ */ jsxs56(Card, { className: cn("flex w-full rounded-lg p-4", className), ...props, children: [
     icon && /* @__PURE__ */ jsx171("div", { className: "mr-2 flex items-center justify-center text-4xl", children: icon }),
     /* @__PURE__ */ jsxs56("div", { className: "w-full text-center", children: [
       /* @__PURE__ */ jsx171(motion6.h3, { className: "title-font text-2xl font-semibold text-slate-900 dark:text-slate-100 sm:text-3xl", children: rounded }),