@powerhousedao/design-system 6.0.0-dev.153 → 6.0.0-dev.155

package/dist/ui/components/decorators.js

@@ -0,0 +1,113 @@
+import { Button } from "./button/button.js";
+import { Checkbox } from "./checkbox/checkbox.js";
+import { Form } from "./form/form.js";
+import { useCallback, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+//#region src/ui/components/decorators.tsx
+function _isValidRegex(pattern) {
+	try {
+		new RegExp(pattern);
+		return true;
+	} catch {
+		return false;
+	}
+}
+const withForm = (Story, context) => {
+	const formRef = useRef(null);
+	const [showFormButtons, setShowFormButtons] = useState(false);
+	const [resetKey, setResetKey] = useState(0);
+	const checkboxId = useId();
+	const { viewMode, parameters } = context;
+	const isDocs = viewMode === "docs";
+	const formParameters = parameters.form;
+	const resetBehavior = formParameters?.resetBehavior ?? "reset";
+	const onReset = useCallback(() => {
+		if (resetBehavior === "unmount") setResetKey((prev) => prev + 1);
+		else {
+			const defaultValues = Object.fromEntries(Object.keys(formRef.current?.control._fields ?? {}).map((fieldName) => [fieldName, formParameters?.defaultValues?.[fieldName] ?? ""]));
+			formRef.current?.reset(defaultValues);
+		}
+	}, [formParameters, resetBehavior]);
+	const onSubmit = useCallback((data) => {
+		const serializedData = JSON.stringify(data, (key, value) => typeof value === "bigint" ? `BigInt(${value.toString()})` : value, 2);
+		setTimeout(() => {
+			alert(serializedData);
+		}, 300);
+	}, []);
+	const onShowFormButtonsChange = useCallback((checked) => {
+		setShowFormButtons(checked);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Form, {
+		ref: formRef,
+		onSubmit,
+		children: [/* @__PURE__ */ jsx(Story, { args: {
+			...context.args,
+			...Array.isArray(context.args.warnings) ? { warnings: context.args.warnings } : { warnings: void 0 },
+			...context.args.pattern !== void 0 ? _isValidRegex(context.args.pattern) ? { pattern: context.args.pattern } : { pattern: "" } : {}
+		} }), showFormButtons || isDocs ? /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				className: "mt-4 w-full",
+				color: "light",
+				type: "reset",
+				onClick: onReset,
+				children: "Reset"
+			}), /* @__PURE__ */ jsx(Button, {
+				className: "mt-4 w-full",
+				color: "dark",
+				type: "submit",
+				children: "Submit"
+			})]
+		}) : /* @__PURE__ */ jsx("input", {
+			type: "submit",
+			className: "hidden"
+		})]
+	}, resetKey), !isDocs && /* @__PURE__ */ jsx("div", {
+		className: "absolute bottom-5 right-5 z-50",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				id: checkboxId,
+				value: showFormButtons,
+				onChange: onShowFormButtonsChange
+			}), /* @__PURE__ */ jsx("label", {
+				className: "cursor-pointer dark:text-gray-400",
+				htmlFor: checkboxId,
+				children: "Show form buttons"
+			})]
+		})
+	})] });
+};
+const withTimestampsAsISOStrings = (Story, context) => {
+	const { args } = context;
+	const convertTimestampsToDates = (args) => {
+		const newArgs = { ...args };
+		Object.keys(newArgs).forEach((key) => {
+			const value = newArgs[key];
+			if ((key === "minDate" || key === "maxDate") && typeof value === "string") {
+				const timestamp = new Date(value).getTime();
+				if (!isNaN(timestamp)) {
+					const date = new Date(timestamp);
+					date.setHours(12, 0, 0, 0);
+					newArgs[key] = format(date, "dd-MMM-yyyy");
+				}
+			}
+			if (typeof value === "number" && value > 16094592e5) {
+				const date = new Date(value);
+				date.setHours(12, 0, 0, 0);
+				newArgs[key] = format(date, "dd-MMM-yyyy");
+			}
+		});
+		return newArgs;
+	};
+	const convertedArgs = convertTimestampsToDates(args);
+	return /* @__PURE__ */ jsx(Story, {
+		...context,
+		args: convertedArgs
+	});
+};
+//#endregion
+export { withForm, withTimestampsAsISOStrings };
+
+//# sourceMappingURL=decorators.js.map

package/dist/ui/components/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","names":[],"sources":["../../../src/ui/components/decorators.tsx"],"sourcesContent":["import type { Decorator } from \"@storybook/react\";\nimport type { Args, DecoratorFunction } from \"@storybook/types\";\nimport { format } from \"date-fns\";\nimport { useCallback, useId, useRef, useState } from \"react\";\nimport type { UseFormReturn } from \"react-hook-form\";\nimport { Button } from \"../components/button/button.js\";\nimport { Checkbox } from \"../components/checkbox/checkbox.js\";\nimport { Form } from \"../components/form/form.js\";\n\nfunction _isValidRegex(pattern: unknown): boolean {\n  try {\n    new RegExp(pattern as string);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\ninterface StoryFormParameters {\n  form?: {\n    defaultValues?: Record<string, any>;\n    resetBehavior?: \"unmount\" | \"reset\";\n  };\n}\n\nexport const withForm: Decorator = (Story, context) => {\n  const formRef = useRef<UseFormReturn>(null);\n  const [showFormButtons, setShowFormButtons] = useState<boolean>(false);\n  const [resetKey, setResetKey] = useState(0);\n  const checkboxId = useId();\n  const { viewMode, parameters } = context;\n  const isDocs = viewMode === \"docs\";\n\n  // Ensure we're properly accessing the parameters\n  const formParameters = (parameters as StoryFormParameters).form;\n  const resetBehavior = formParameters?.resetBehavior ?? \"reset\";\n\n  const onReset = useCallback(() => {\n    if (resetBehavior === \"unmount\") {\n      setResetKey((prev) => prev + 1);\n    } else {\n      const defaultValues = Object.fromEntries(\n        Object.keys(formRef.current?.control._fields ?? {}).map((fieldName) => [\n          fieldName,\n          formParameters?.defaultValues?.[fieldName] ?? \"\",\n        ]),\n      );\n      formRef.current?.reset(defaultValues);\n    }\n  }, [formParameters, resetBehavior]);\n\n  const onSubmit = useCallback((data: any) => {\n    // Allow to show bigInt values in the alert\n    const serializedData = JSON.stringify(\n      data,\n      (key, value): any =>\n        typeof value === \"bigint\" ? `BigInt(${value.toString()})` : value,\n      2,\n    );\n\n    // delay the alert to allow component JS to finish the execution\n    setTimeout(() => {\n      alert(serializedData);\n    }, 300);\n  }, []);\n\n  const onShowFormButtonsChange = useCallback((checked: boolean) => {\n    setShowFormButtons(checked);\n  }, []);\n\n  // override the warnings in the args to avoid breaking the storybook\n  // as storybook set by default an object instead of an array\n  const overrideArgs = {\n    ...context.args,\n    ...(Array.isArray(context.args.warnings)\n      ? { warnings: context.args.warnings }\n      : { warnings: undefined }),\n    ...(context.args.pattern !== undefined\n      ? _isValidRegex(context.args.pattern)\n        ? { pattern: context.args.pattern }\n        : { pattern: \"\" }\n      : {}),\n  };\n\n  return (\n    <div>\n      <Form ref={formRef} onSubmit={onSubmit} key={resetKey}>\n        <Story args={overrideArgs} />\n\n        {showFormButtons || isDocs ? (\n          <div className=\"flex gap-2\">\n            <Button\n              className=\"mt-4 w-full\"\n              color=\"light\"\n              type=\"reset\"\n              onClick={onReset}\n            >\n              Reset\n            </Button>\n            <Button className=\"mt-4 w-full\" color=\"dark\" type=\"submit\">\n              Submit\n            </Button>\n          </div>\n        ) : (\n          // allow to \"submit\" the form from the story\n          // it is needed as some browsers do not submit on Enter key press when there're several inputs and no submit button\n          <input type=\"submit\" className=\"hidden\" />\n        )}\n      </Form>\n\n      {!isDocs && (\n        <div className=\"absolute bottom-5 right-5 z-50\">\n          <div className=\"flex items-center gap-2\">\n            <Checkbox\n              id={checkboxId}\n              value={showFormButtons}\n              onChange={onShowFormButtonsChange}\n            />\n            <label\n              className=\"cursor-pointer dark:text-gray-400\"\n              htmlFor={checkboxId}\n            >\n              Show form buttons\n            </label>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const withTimestampsAsISOStrings: DecoratorFunction<any> = (\n  Story,\n  context,\n) => {\n  const { args } = context;\n\n  // Function to convert timestamps to Date objects\n  const convertTimestampsToDates = (args: Args) => {\n    const newArgs = { ...args };\n\n    // Iterate through all args properties\n    Object.keys(newArgs).forEach((key) => {\n      const value = newArgs[key] as unknown;\n      if (\n        (key === \"minDate\" || key === \"maxDate\") &&\n        typeof value === \"string\"\n      ) {\n        const timestamp = new Date(value).getTime();\n        if (!isNaN(timestamp)) {\n          const date = new Date(timestamp);\n          date.setHours(12, 0, 0, 0);\n          // Format that Storybook accepts: \"22-Mar-2025\"\n          newArgs[key] = format(date, \"dd-MMM-yyyy\");\n        }\n      }\n      if (typeof value === \"number\" && value > 1609459200000) {\n        const date = new Date(value);\n        date.setHours(12, 0, 0, 0);\n        newArgs[key] = format(date, \"dd-MMM-yyyy\");\n      }\n    });\n\n    return newArgs;\n  };\n  const convertedArgs = convertTimestampsToDates(args);\n  return <Story {...context} args={convertedArgs} />;\n};\n"],"mappings":"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"}

package/dist/ui/components/enum-field/enum-field.d.ts

@@ -0,0 +1,2 @@
+import { n as EnumFieldProps, t as EnumField } from "../../../enum-field-Bkt4nc0f.js";
+export { EnumField, EnumFieldProps };

package/dist/ui/components/enum-field/enum-field.js

@@ -0,0 +1,27 @@
+import { RadioGroupField } from "../radio-group-field/radio-group-field.js";
+import { SelectField } from "../select-field/select-field.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/components/enum-field/enum-field.tsx
+const EnumField = React.forwardRef(({ variant = "auto", options = [], ...props }, ref) => {
+	const radio = /* @__PURE__ */ jsx(RadioGroupField, {
+		options,
+		...props,
+		ref
+	});
+	const select = /* @__PURE__ */ jsx(SelectField, {
+		options,
+		...props,
+		ref
+	});
+	switch (variant) {
+		case "RadioGroup": return radio;
+		case "Select": return select;
+		case "auto": return options.length < 6 ? radio : select;
+	}
+});
+EnumField.displayName = "EnumField";
+//#endregion
+export { EnumField };
+
+//# sourceMappingURL=enum-field.js.map

package/dist/ui/components/enum-field/enum-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enum-field.js","names":[],"sources":["../../../../src/ui/components/enum-field/enum-field.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  RadioGroupField,\n  type RadioGroupFieldProps,\n} from \"../radio-group-field/radio-group-field.js\";\nimport {\n  SelectField,\n  type SelectFieldProps,\n} from \"../select-field/select-field.js\";\n\nexport type EnumFieldProps =\n  | ({\n      variant?: \"auto\";\n    } & (RadioGroupFieldProps | SelectFieldProps))\n  | ({\n      variant: \"RadioGroup\";\n    } & RadioGroupFieldProps)\n  | ({\n      variant: \"Select\";\n    } & SelectFieldProps);\n\nexport const EnumField = React.forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  EnumFieldProps\n>(({ variant = \"auto\", options = [], ...props }, ref) => {\n  const radio = (\n    <RadioGroupField\n      options={options}\n      {...(props as RadioGroupFieldProps)}\n      ref={ref as React.ForwardedRef<HTMLDivElement>}\n    />\n  );\n  const select = (\n    <SelectField\n      options={options}\n      {...(props as SelectFieldProps)}\n      ref={ref as React.ForwardedRef<HTMLButtonElement>}\n    />\n  );\n\n  switch (variant) {\n    case \"RadioGroup\":\n      return radio;\n    case \"Select\":\n      return select;\n    case \"auto\":\n      return options.length < 6 ? radio : select;\n  }\n});\n\nEnumField.displayName = \"EnumField\";\n"],"mappings":";;;;;AAqBA,MAAa,YAAY,MAAM,YAG5B,EAAE,UAAU,QAAQ,UAAU,EAAE,EAAE,GAAG,SAAS,QAAQ;CACvD,MAAM,QACJ,oBAAC,iBAAD;EACW;EACT,GAAK;EACA;EACL,CAAA;CAEJ,MAAM,SACJ,oBAAC,aAAD;EACW;EACT,GAAK;EACA;EACL,CAAA;AAGJ,SAAQ,SAAR;EACE,KAAK,aACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,KAAK,OACH,QAAO,QAAQ,SAAS,IAAI,QAAQ;;EAExC;AAEF,UAAU,cAAc"}

package/dist/ui/components/enum-field/types.d.ts

@@ -0,0 +1,2 @@
+import { i as SelectProps, n as SelectBaseProps, r as SelectOption, t as RadioGroupProps } from "../../../types-RcuuLIj7.js";
+export { RadioGroupProps, SelectBaseProps, SelectOption, SelectProps };

package/dist/ui/components/form/form.d.ts

@@ -0,0 +1,2 @@
+import { t as Form } from "../../../form-Cmjy6Yl-.js";
+export { Form };

package/dist/ui/components/form/form.js

@@ -0,0 +1,122 @@
+import { FormServerErrorMessage } from "../form-message/form-server-error-message.js";
+import { defaultOnError } from "./utils.js";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormProvider, useForm } from "react-hook-form";
+import { castValue, deepEqual, isEmpty } from "@powerhousedao/design-system/ui/lib";
+//#region src/ui/components/form/form.tsx
+/**
+* A form component that integrates with react-hook-form for form state management and validation.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Form onSubmit={handleSubmit}>
+*   <StringField name="email" label="Email" />
+*   <Button type="submit">Submit</Button>
+* </Form>
+*
+* // With form methods access
+* <Form onSubmit={handleSubmit}>
+*   {({ formState: { isSubmitting } }) => (
+*     <>
+*       <StringField name="email" label="Email" />
+*       <Button type="submit" disabled={isSubmitting}>
+*         {isSubmitting ? 'Submitting...' : 'Submit'}
+*       </Button>
+*     </>
+*   )}
+* </Form>
+*
+* // With default values
+* <Form
+*   onSubmit={handleSubmit}
+*   defaultValues={{
+*     email: 'user@example.com'
+*   }}
+* >
+*   <StringField name="email" label="Email" />
+* </Form>
+* ```
+*/
+const Form = forwardRef(({ children, onSubmit, resetOnSuccessfulSubmit = false, submitChangesOnly = false, defaultValues, renderSubmitErrorsManually = false, submissionErrorMatcher = defaultOnError, className, extraFormProps }, ref) => {
+	const formId = useId();
+	const methods = useForm({
+		defaultValues,
+		criteriaMode: "all",
+		...extraFormProps
+	});
+	useImperativeHandle(ref, () => methods, [methods]);
+	useEffect(() => {
+		if (resetOnSuccessfulSubmit && methods.formState.isSubmitSuccessful) methods.reset({ ...defaultValues ?? {} });
+	}, [
+		resetOnSuccessfulSubmit,
+		methods,
+		methods.formState.isSubmitSuccessful,
+		defaultValues
+	]);
+	const wrappedOnSubmit = useCallback(async (rawData) => {
+		try {
+			let data = rawData;
+			Object.keys(methods.control._fields).forEach((fieldName) => {
+				if (!Object.keys(data).includes(fieldName)) data[fieldName] = null;
+			});
+			if (submitChangesOnly && !!defaultValues) data = Object.fromEntries(Object.entries(rawData).filter(([fieldName, value]) => !deepEqual(value, defaultValues[fieldName])));
+			data = Object.fromEntries(Object.entries(data).map(([fieldName, value]) => [fieldName, isEmpty(value) ? null : value]));
+			const form = document.getElementById(formId);
+			Object.keys(data).map((key) => {
+				try {
+					const value = data[key];
+					if (value !== null) {
+						const dataCast = (form?.querySelector(`[name="${key}"]`))?.getAttribute("data-cast");
+						if (dataCast) data[key] = castValue(value, dataCast);
+					}
+				} catch (error) {
+					console.error(error);
+				}
+			});
+			return await onSubmit(data);
+		} catch (error) {
+			const errors = submissionErrorMatcher(error, Object.keys(methods.control._fields));
+			Object.entries(errors).forEach(([key, value]) => {
+				methods.setError(key, {
+					type: "serverError",
+					message: value,
+					types: { serverError: value }
+				});
+			});
+		}
+	}, [
+		methods,
+		submitChangesOnly,
+		defaultValues,
+		formId,
+		onSubmit,
+		submissionErrorMatcher
+	]);
+	const triggerSubmit = useCallback(() => {
+		const form = document.getElementById(formId);
+		if (form) form.dispatchEvent(new Event("submit", { bubbles: true }));
+	}, [formId]);
+	return /* @__PURE__ */ jsxs(FormProvider, {
+		...methods,
+		children: [!renderSubmitErrorsManually && methods.formState.errors.root?.serverError.message && /* @__PURE__ */ jsx("div", {
+			className: "mb-2",
+			children: /* @__PURE__ */ jsx(FormServerErrorMessage, {})
+		}), /* @__PURE__ */ jsx("form", {
+			id: formId,
+			onSubmit: methods.handleSubmit(wrappedOnSubmit),
+			className,
+			noValidate: true,
+			children: typeof children === "function" ? children({
+				...methods,
+				triggerSubmit,
+				formId
+			}) : children
+		})]
+	});
+});
+//#endregion
+export { Form };
+
+//# sourceMappingURL=form.js.map

package/dist/ui/components/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":[],"sources":["../../../../src/ui/components/form/form.tsx"],"sourcesContent":["import type { ValueCast } from \"@powerhousedao/design-system/ui/lib\";\nimport {\n  castValue,\n  deepEqual,\n  isEmpty,\n} from \"@powerhousedao/design-system/ui/lib\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n} from \"react\";\nimport type { UseFormProps, UseFormReturn } from \"react-hook-form\";\nimport { FormProvider, useForm } from \"react-hook-form\";\nimport { FormServerErrorMessage } from \"../form-message/form-server-error-message.js\";\nimport { defaultOnError } from \"./utils.js\";\n\ntype FormMethods = UseFormReturn & {\n  /**\n   * Trigger the form submit event\n   */\n  triggerSubmit: () => void;\n\n  /**\n   * The id of the form in the DOM\n   */\n  formId: string;\n};\ninterface FormProps {\n  /**\n   * Content of the form. Can be either React nodes or a render function that receives form methods\n   * and returns React nodes. The render function approach is useful when you need access to form state\n   * or methods (e.g., to disable submit button while submitting).\n   */\n  children: React.ReactNode | ((methods: FormMethods) => React.ReactNode);\n\n  /**\n   * Handler called when the form is submitted. Receives the form data as an argument.\n   * The data structure will match the names of your form fields.\n   *\n   * @param data - An object containing the form values, keyed by field names\n   */\n  onSubmit: (data: any) => void | Promise<void>;\n\n  /**\n   * Whether to reset the form after a successful submit.\n   *\n   * @default false\n   */\n  resetOnSuccessfulSubmit?: boolean;\n\n  /**\n   * Whether to submit only changed values.\n   *\n   * When enabled, the `onSubmit` callback will only receive fields whose values differ from their\n   * corresponding `defaultValues`.\n   *\n   * @default false\n   */\n  submitChangesOnly?: boolean;\n\n  /**\n   * Initial values for the form fields. Keys should match the 'name' props of your form fields.\n   * Useful for editing existing data or setting initial state.\n   */\n  defaultValues?: Record<string, any>;\n\n  /**\n   * Whether to handle errors that happen during the submit process manually instead of showing\n   * them automatically.\n   *\n   * @default false The errors will be rendered automatically on top of the form.\n   */\n  renderSubmitErrorsManually?: boolean;\n\n  /**\n   * Additional props to pass to the form config from react-hook-form.\n   *\n   * Note: this could affect the form behavior, use with caution.\n   */\n  extraFormProps?: UseFormProps;\n\n  /**\n   * Callback to match a submission error with one or more form fields or form level errors.\n   *\n   * @default defaultOnError The form tries to match the error with a field name by default and if it\n   * doesn't match any field name, then an generic error or the error message will be shown as a form\n   * level error.\n   *\n   * @returns An object where each key should be a field name or \"root.serverError\" for form level errors.\n   * If the keys doesn't match any field name, then the UI error should be handled manually using the form\n   * error state to get the message.\n   */\n  submissionErrorMatcher?: (\n    error: Error,\n    fieldNames: string[],\n  ) => Record<string, string>;\n\n  /**\n   * Additional CSS class name to apply to the form element.\n   * Use this to customize the form's styling.\n   */\n  className?: string;\n}\n\n/**\n * A form component that integrates with react-hook-form for form state management and validation.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Form onSubmit={handleSubmit}>\n *   <StringField name=\"email\" label=\"Email\" />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n *\n * // With form methods access\n * <Form onSubmit={handleSubmit}>\n *   {({ formState: { isSubmitting } }) => (\n *     <>\n *       <StringField name=\"email\" label=\"Email\" />\n *       <Button type=\"submit\" disabled={isSubmitting}>\n *         {isSubmitting ? 'Submitting...' : 'Submit'}\n *       </Button>\n *     </>\n *   )}\n * </Form>\n *\n * // With default values\n * <Form\n *   onSubmit={handleSubmit}\n *   defaultValues={{\n *     email: 'user@example.com'\n *   }}\n * >\n *   <StringField name=\"email\" label=\"Email\" />\n * </Form>\n * ```\n */\nexport const Form = forwardRef<UseFormReturn, FormProps>(\n  (\n    {\n      children,\n      onSubmit,\n      resetOnSuccessfulSubmit = false,\n      submitChangesOnly = false,\n      defaultValues,\n      renderSubmitErrorsManually = false,\n      submissionErrorMatcher = defaultOnError,\n      className,\n      extraFormProps,\n    },\n    ref,\n  ) => {\n    const formId = useId();\n    const methods = useForm({\n      defaultValues,\n      criteriaMode: \"all\", // display all errors at once\n      ...extraFormProps,\n    });\n    useImperativeHandle(ref, () => methods, [methods]);\n\n    useEffect(() => {\n      if (resetOnSuccessfulSubmit && methods.formState.isSubmitSuccessful) {\n        methods.reset({ ...(defaultValues ?? {}) });\n      }\n    }, [\n      resetOnSuccessfulSubmit,\n      methods,\n      methods.formState.isSubmitSuccessful,\n      defaultValues,\n    ]);\n\n    const wrappedOnSubmit = useCallback(\n      async (rawData: Record<string, any>) => {\n        try {\n          let data = rawData;\n          // we should make sure that empty fields are submitted as `null`\n          // react-hook-form doesn't submit fields with `undefined` values\n          // so we need to add them to the data as `null`\n          Object.keys(methods.control._fields).forEach((fieldName) => {\n            if (!Object.keys(data).includes(fieldName)) {\n              data[fieldName] = null;\n            }\n          });\n\n          if (submitChangesOnly && !!defaultValues) {\n            // remove fields that didn't change it's value\n            data = Object.fromEntries(\n              Object.entries(rawData).filter(\n                ([fieldName, value]) =>\n                  !deepEqual(value, defaultValues[fieldName]),\n              ),\n            );\n          }\n\n          // at this point all the fields that need to be submitted are in the data\n          // we just need to make sure that \"empty\" values are submitted as `null`\n          data = Object.fromEntries(\n            Object.entries(data).map(([fieldName, value]) => [\n              fieldName,\n              isEmpty(value) ? null : value,\n            ]),\n          );\n\n          // cast data if needed to prevent submitting wrong data type\n          const form = document.getElementById(formId);\n          Object.keys(data).map((key) => {\n            try {\n              const value: unknown = data[key];\n              if (value !== null) {\n                const field = form?.querySelector(`[name=\"${key}\"]`);\n                const dataCast = field?.getAttribute(\"data-cast\");\n                if (dataCast) {\n                  data[key] = castValue(\n                    value,\n                    dataCast as ValueCast,\n                  ) as unknown;\n                }\n              }\n            } catch (error) {\n              // print out the error but continue the execution\n              console.error(error);\n            }\n          });\n\n          // we need to return the promise from the onSubmit callback if there is one\n          // so react-hook-form can wait for it to resolve and update the form state correctly\n          return await onSubmit(data);\n        } catch (error: any) {\n          const errors = submissionErrorMatcher(\n            error as Error,\n            Object.keys(methods.control._fields),\n          );\n\n          Object.entries(errors).forEach(([key, value]) => {\n            methods.setError(key, {\n              type: \"serverError\",\n              message: value,\n              types: {\n                serverError: value,\n              },\n            });\n          });\n        }\n      },\n      [\n        methods,\n        submitChangesOnly,\n        defaultValues,\n        formId,\n        onSubmit,\n        submissionErrorMatcher,\n      ],\n    );\n\n    const triggerSubmit = useCallback(() => {\n      // trigger form submit event\n      const form = document.getElementById(formId);\n      if (form) {\n        form.dispatchEvent(new Event(\"submit\", { bubbles: true }));\n      }\n    }, [formId]);\n\n    return (\n      <FormProvider {...methods}>\n        {!renderSubmitErrorsManually &&\n          methods.formState.errors.root?.serverError.message && (\n            <div className=\"mb-2\">\n              <FormServerErrorMessage />\n            </div>\n          )}\n\n        <form\n          id={formId}\n          onSubmit={methods.handleSubmit(wrappedOnSubmit)}\n          className={className}\n          noValidate\n        >\n          {typeof children === \"function\"\n            ? children({\n                ...methods,\n                triggerSubmit,\n                formId,\n              })\n            : children}\n        </form>\n      </FormProvider>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4IA,MAAa,OAAO,YAEhB,EACE,UACA,UACA,0BAA0B,OAC1B,oBAAoB,OACpB,eACA,6BAA6B,OAC7B,yBAAyB,gBACzB,WACA,kBAEF,QACG;CACH,MAAM,SAAS,OAAO;CACtB,MAAM,UAAU,QAAQ;EACtB;EACA,cAAc;EACd,GAAG;EACJ,CAAC;AACF,qBAAoB,WAAW,SAAS,CAAC,QAAQ,CAAC;AAElD,iBAAgB;AACd,MAAI,2BAA2B,QAAQ,UAAU,mBAC/C,SAAQ,MAAM,EAAE,GAAI,iBAAiB,EAAE,EAAG,CAAC;IAE5C;EACD;EACA;EACA,QAAQ,UAAU;EAClB;EACD,CAAC;CAEF,MAAM,kBAAkB,YACtB,OAAO,YAAiC;AACtC,MAAI;GACF,IAAI,OAAO;AAIX,UAAO,KAAK,QAAQ,QAAQ,QAAQ,CAAC,SAAS,cAAc;AAC1D,QAAI,CAAC,OAAO,KAAK,KAAK,CAAC,SAAS,UAAU,CACxC,MAAK,aAAa;KAEpB;AAEF,OAAI,qBAAqB,CAAC,CAAC,cAEzB,QAAO,OAAO,YACZ,OAAO,QAAQ,QAAQ,CAAC,QACrB,CAAC,WAAW,WACX,CAAC,UAAU,OAAO,cAAc,WAAW,CAC9C,CACF;AAKH,UAAO,OAAO,YACZ,OAAO,QAAQ,KAAK,CAAC,KAAK,CAAC,WAAW,WAAW,CAC/C,WACA,QAAQ,MAAM,GAAG,OAAO,MACzB,CAAC,CACH;GAGD,MAAM,OAAO,SAAS,eAAe,OAAO;AAC5C,UAAO,KAAK,KAAK,CAAC,KAAK,QAAQ;AAC7B,QAAI;KACF,MAAM,QAAiB,KAAK;AAC5B,SAAI,UAAU,MAAM;MAElB,MAAM,YADQ,MAAM,cAAc,UAAU,IAAI,IAAI,GAC5B,aAAa,YAAY;AACjD,UAAI,SACF,MAAK,OAAO,UACV,OACA,SACD;;aAGE,OAAO;AAEd,aAAQ,MAAM,MAAM;;KAEtB;AAIF,UAAO,MAAM,SAAS,KAAK;WACpB,OAAY;GACnB,MAAM,SAAS,uBACb,OACA,OAAO,KAAK,QAAQ,QAAQ,QAAQ,CACrC;AAED,UAAO,QAAQ,OAAO,CAAC,SAAS,CAAC,KAAK,WAAW;AAC/C,YAAQ,SAAS,KAAK;KACpB,MAAM;KACN,SAAS;KACT,OAAO,EACL,aAAa,OACd;KACF,CAAC;KACF;;IAGN;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,gBAAgB,kBAAkB;EAEtC,MAAM,OAAO,SAAS,eAAe,OAAO;AAC5C,MAAI,KACF,MAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,MAAM,CAAC,CAAC;IAE3D,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC,cAAD;EAAc,GAAI;YAAlB,CACG,CAAC,8BACA,QAAQ,UAAU,OAAO,MAAM,YAAY,WACzC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,wBAAD,EAA0B,CAAA;GACtB,CAAA,EAGV,oBAAC,QAAD;GACE,IAAI;GACJ,UAAU,QAAQ,aAAa,gBAAgB;GACpC;GACX,YAAA;aAEC,OAAO,aAAa,aACjB,SAAS;IACP,GAAG;IACH;IACA;IACD,CAAC,GACF;GACC,CAAA,CACM;;EAGpB"}

package/dist/ui/components/form/utils.d.ts

@@ -0,0 +1,12 @@
+//#region src/ui/components/form/utils.d.ts
+interface SupportedErrorObject extends Error {
+  data: {
+    path?: string;
+    message?: string;
+  }[];
+}
+declare const isSupportedErrorObject: (error: object) => error is SupportedErrorObject;
+declare const defaultOnError: (error: Error, fieldNames: string[]) => Record<string, string>;
+//#endregion
+export { SupportedErrorObject, defaultOnError, isSupportedErrorObject };
+//# sourceMappingURL=utils.d.ts.map

package/dist/ui/components/form/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../../src/ui/components/form/utils.ts"],"mappings":";UAAiB,oBAAA,SAA6B,KAAA;EAC5C,IAAA;IACE,IAAA;IACA,OAAA;EAAA;AAAA;AAAA,cAIS,sBAAA,GACX,KAAA,aACC,KAAA,IAAS,oBAAA;AAAA,cAQC,cAAA,GACX,KAAA,EAAO,KAAA,EACP,UAAA,eACC,MAAA"}

package/dist/ui/components/form/utils.js

@@ -0,0 +1,20 @@
+//#region src/ui/components/form/utils.ts
+const isSupportedErrorObject = (error) => {
+	return typeof error === "object" && Object.hasOwn(error, "data") && Array.isArray(error.data);
+};
+const defaultOnError = (error, fieldNames) => {
+	let message = "An error occurred while submitting the data";
+	let formErrorPath = "root.serverError";
+	if (typeof error === "object" && isSupportedErrorObject(error)) {
+		const path = error.data[0]?.path;
+		if (error.data[0]?.message) message = error.data[0].message;
+		if (Array.isArray(path)) {
+			if (path.length === 1 && fieldNames.includes(path[0])) formErrorPath = path[0];
+		}
+	}
+	return { [formErrorPath]: message };
+};
+//#endregion
+export { defaultOnError, isSupportedErrorObject };
+
+//# sourceMappingURL=utils.js.map

package/dist/ui/components/form/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/ui/components/form/utils.ts"],"sourcesContent":["export interface SupportedErrorObject extends Error {\n  data: {\n    path?: string;\n    message?: string;\n  }[];\n}\n\nexport const isSupportedErrorObject = (\n  error: object,\n): error is SupportedErrorObject => {\n  return (\n    typeof error === \"object\" &&\n    Object.hasOwn(error, \"data\") &&\n    Array.isArray((error as { data?: unknown }).data)\n  );\n};\n\nexport const defaultOnError = (\n  error: Error,\n  fieldNames: string[],\n): Record<string, string> => {\n  let message = \"An error occurred while submitting the data\";\n  let formErrorPath = \"root.serverError\"; // form level error by default\n\n  if (typeof error === \"object\" && isSupportedErrorObject(error)) {\n    const path = error.data[0]?.path;\n    if (error.data[0]?.message) {\n      message = error.data[0].message;\n    }\n    if (Array.isArray(path)) {\n      // maybe we can reconciliate this error with a form field\n      if (path.length === 1 && fieldNames.includes(path[0] as string)) {\n        formErrorPath = path[0] as string;\n      }\n    }\n  }\n\n  return {\n    [formErrorPath]: message,\n  };\n};\n"],"mappings":";AAOA,MAAa,0BACX,UACkC;AAClC,QACE,OAAO,UAAU,YACjB,OAAO,OAAO,OAAO,OAAO,IAC5B,MAAM,QAAS,MAA6B,KAAK;;AAIrD,MAAa,kBACX,OACA,eAC2B;CAC3B,IAAI,UAAU;CACd,IAAI,gBAAgB;AAEpB,KAAI,OAAO,UAAU,YAAY,uBAAuB,MAAM,EAAE;EAC9D,MAAM,OAAO,MAAM,KAAK,IAAI;AAC5B,MAAI,MAAM,KAAK,IAAI,QACjB,WAAU,MAAM,KAAK,GAAG;AAE1B,MAAI,MAAM,QAAQ,KAAK;OAEjB,KAAK,WAAW,KAAK,WAAW,SAAS,KAAK,GAAa,CAC7D,iBAAgB,KAAK;;;AAK3B,QAAO,GACJ,gBAAgB,SAClB"}

package/dist/ui/components/form-description/form-description.d.ts

@@ -0,0 +1,2 @@
+import { n as FormDescriptionProps, t as FormDescription } from "../../../form-description-BwkEkzo8.js";
+export { FormDescription, FormDescriptionProps };

package/dist/ui/components/form-description/form-description.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@powerhousedao/design-system";
+//#region src/ui/components/form-description/form-description.tsx
+const FormDescription = ({ children, as, className }) => {
+	return /* @__PURE__ */ jsx(as ?? "p", {
+		className: cn("font-sans text-sm font-normal leading-5 text-gray-600 dark:text-gray-500", className),
+		children
+	});
+};
+//#endregion
+export { FormDescription };
+
+//# sourceMappingURL=form-description.js.map

package/dist/ui/components/form-description/form-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-description.js","names":[],"sources":["../../../../src/ui/components/form-description/form-description.tsx"],"sourcesContent":["import { cn } from \"@powerhousedao/design-system\";\n\nexport interface FormDescriptionProps extends React.PropsWithChildren {\n  as?: React.ElementType;\n  className?: string;\n}\n\nconst FormDescription: React.FC<FormDescriptionProps> = ({\n  children,\n  as,\n  className,\n}) => {\n  const Component = as ?? \"p\";\n\n  return (\n    <Component\n      className={cn(\n        \"font-sans text-sm font-normal leading-5 text-gray-600 dark:text-gray-500\",\n        className,\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport { FormDescription };\n"],"mappings":";;;AAOA,MAAM,mBAAmD,EACvD,UACA,IACA,gBACI;AAGJ,QACE,oBAHgB,MAAM,KAGtB;EACE,WAAW,GACT,4EACA,UACD;EAEA;EACS,CAAA"}

package/dist/ui/components/form-group/form-group.d.ts

@@ -0,0 +1,2 @@
+import { t as FormGroup } from "../../../form-group-CmWBGJdS.js";
+export { FormGroup };

package/dist/ui/components/form-group/form-group.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/components/form-group/form-group.tsx
+const FormGroup = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2",
+		children
+	});
+};
+//#endregion
+export { FormGroup };
+
+//# sourceMappingURL=form-group.js.map

package/dist/ui/components/form-group/form-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group.js","names":[],"sources":["../../../../src/ui/components/form-group/form-group.tsx"],"sourcesContent":["export const FormGroup: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return <div className=\"flex flex-col gap-2\">{children}</div>;\n};\n"],"mappings":";;AAAA,MAAa,aAAgD,EAAE,eAAe;AAC5E,QAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;EAAe,CAAA"}

package/dist/ui/components/form-label/form-label.d.ts

@@ -0,0 +1,2 @@
+import { n as FormLabelProps, t as FormLabel } from "../../../form-label-8IVmitQm.js";
+export { FormLabel, FormLabelProps };

package/dist/ui/components/form-label/form-label.js

@@ -0,0 +1,31 @@
+import { Tooltip, TooltipProvider as Provider } from "../tooltip/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, cn } from "@powerhousedao/design-system";
+//#region src/ui/components/form-label/form-label.tsx
+const FormLabel = ({ children, required, disabled, description, hasError, inline, className, ...htmlLabelProps }) => {
+	const classes = cn("inline-flex items-center text-sm font-medium", inline ? "leading-[22px]" : "leading-4", `text-gray-900 ${inline ? "dark:text-gray-400" : "dark:text-gray-50"}`, hasError && "group-hover:!text-red-900 dark:group-hover:!text-red-900", hasError && inline && "text-red-800 dark:text-red-800", hasError && !inline && "text-red-900 dark:text-red-900", disabled && `cursor-not-allowed text-gray-700 ${inline ? "dark:text-gray-600" : "dark:text-gray-300"}`, inline ? !disabled && "group-hover:text-gray-900 dark:group-hover:text-slate-50" : "mb-[3px]", className);
+	if (!children) return null;
+	return /* @__PURE__ */ jsxs("label", {
+		className: classes,
+		...htmlLabelProps,
+		children: [
+			children,
+			required && /* @__PURE__ */ jsx("span", {
+				className: cn("ml-1 text-gray-800 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-slate-50", hasError && `${inline ? "!text-red-800" : "!text-red-900"} group-hover:!text-red-900`),
+				children: "*"
+			}),
+			description && /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(Tooltip, {
+				content: description,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "CircleInfo",
+					size: 16,
+					className: cn("ml-1 cursor-pointer text-gray-600 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-500", disabled && "text-gray-500")
+				})
+			}) })
+		]
+	});
+};
+//#endregion
+export { FormLabel };
+
+//# sourceMappingURL=form-label.js.map

package/dist/ui/components/form-label/form-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-label.js","names":["TooltipProvider"],"sources":["../../../../src/ui/components/form-label/form-label.tsx"],"sourcesContent":["import { cn, Icon } from \"@powerhousedao/design-system\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\n\nexport interface FormLabelProps\n  extends React.PropsWithChildren, React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean;\n  disabled?: boolean;\n  description?: string;\n  hasError?: boolean;\n  inline?: boolean;\n  className?: string;\n}\n\nexport const FormLabel: React.FC<FormLabelProps> = ({\n  children,\n  required,\n  disabled,\n  description,\n  hasError,\n  inline,\n  className,\n  ...htmlLabelProps\n}) => {\n  const classes = cn(\n    \"inline-flex items-center text-sm font-medium\",\n    inline ? \"leading-[22px]\" : \"leading-4\",\n    `text-gray-900 ${inline ? \"dark:text-gray-400\" : \"dark:text-gray-50\"}`,\n    hasError && \"group-hover:!text-red-900 dark:group-hover:!text-red-900\",\n    hasError && inline && \"text-red-800 dark:text-red-800\",\n    hasError && !inline && \"text-red-900 dark:text-red-900\",\n    disabled &&\n      `cursor-not-allowed text-gray-700 ${\n        inline ? \"dark:text-gray-600\" : \"dark:text-gray-300\"\n      }`,\n    inline\n      ? !disabled && \"group-hover:text-gray-900 dark:group-hover:text-slate-50\"\n      : \"mb-[3px]\",\n    className,\n  );\n\n  if (!children) {\n    // no label provided\n    return null;\n  }\n\n  const extraProps = {\n    ...htmlLabelProps,\n  };\n\n  return (\n    <label className={classes} {...extraProps}>\n      {children}\n      {required && (\n        <span\n          className={cn(\n            \"ml-1 text-gray-800 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-slate-50\",\n            hasError &&\n              `${inline ? \"!text-red-800\" : \"!text-red-900\"} group-hover:!text-red-900`,\n          )}\n        >\n          *\n        </span>\n      )}\n\n      {description && (\n        <TooltipProvider>\n          <Tooltip content={description}>\n            <Icon\n              name=\"CircleInfo\"\n              size={16}\n              className={cn(\n                \"ml-1 cursor-pointer text-gray-600 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-500\",\n                disabled && \"text-gray-500\",\n              )}\n            />\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </label>\n  );\n};\n"],"mappings":";;;;AAaA,MAAa,aAAuC,EAClD,UACA,UACA,UACA,aACA,UACA,QACA,WACA,GAAG,qBACC;CACJ,MAAM,UAAU,GACd,gDACA,SAAS,mBAAmB,aAC5B,iBAAiB,SAAS,uBAAuB,uBACjD,YAAY,4DACZ,YAAY,UAAU,kCACtB,YAAY,CAAC,UAAU,kCACvB,YACE,oCACE,SAAS,uBAAuB,wBAEpC,SACI,CAAC,YAAY,6DACb,YACJ,UACD;AAED,KAAI,CAAC,SAEH,QAAO;AAOT,QACE,qBAAC,SAAD;EAAO,WAAW;EAJlB,GAAG;YAIH;GACG;GACA,YACC,oBAAC,QAAD;IACE,WAAW,GACT,kGACA,YACE,GAAG,SAAS,kBAAkB,gBAAgB,4BACjD;cACF;IAEM,CAAA;GAGR,eACC,oBAACA,UAAD,EAAA,UACE,oBAAC,SAAD;IAAS,SAAS;cAChB,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAW,GACT,qGACA,YAAY,gBACb;KACD,CAAA;IACM,CAAA,EACM,CAAA;GAEd"}

package/dist/ui/components/form-message/form-message.d.ts

@@ -0,0 +1,2 @@
+import { n as FormMessageProps, r as FormMessageType, t as FormMessage } from "../../../form-message-U9nbFyNp.js";
+export { FormMessage, FormMessageProps, FormMessageType };

package/dist/ui/components/form-message/form-message.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@powerhousedao/design-system";
+//#region src/ui/components/form-message/form-message.tsx
+const defaultElement = "p";
+const FormMessage = ({ children, type = "info", as, className, ...props }) => {
+	const Component = as || defaultElement;
+	const classes = cn("mb-0 inline-flex items-center text-xs font-medium", {
+		error: "text-red-900 dark:text-red-900",
+		info: "text-blue-900 dark:text-blue-900",
+		warning: "text-yellow-900 dark:text-yellow-900"
+	}[type], className);
+	return /* @__PURE__ */ jsx(Component, {
+		"data-type": type,
+		className: classes,
+		...props,
+		children
+	});
+};
+//#endregion
+export { FormMessage };
+
+//# sourceMappingURL=form-message.js.map

package/dist/ui/components/form-message/form-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-message.js","names":[],"sources":["../../../../src/ui/components/form-message/form-message.tsx"],"sourcesContent":["import { cn } from \"@powerhousedao/design-system\";\n\nexport type FormMessageType = \"error\" | \"info\" | \"warning\";\n\ntype FormMessageOwnProps<E extends React.ElementType = React.ElementType> = {\n  type?: FormMessageType;\n  as?: E;\n  className?: string;\n};\n\nexport type FormMessageProps<E extends React.ElementType> =\n  FormMessageOwnProps<E> &\n    Omit<React.ComponentPropsWithoutRef<E>, keyof FormMessageOwnProps>;\n\nconst defaultElement = \"p\";\n\nexport const FormMessage: <E extends React.ElementType = typeof defaultElement>(\n  props: FormMessageProps<E>,\n) => React.ReactElement | null = ({\n  children,\n  type = \"info\",\n  as,\n  className,\n  ...props\n}) => {\n  const Component = as || defaultElement;\n\n  const typeClasses: Record<FormMessageType, string> = {\n    error: \"text-red-900 dark:text-red-900\",\n    info: \"text-blue-900 dark:text-blue-900\",\n    warning: \"text-yellow-900 dark:text-yellow-900\",\n  };\n\n  const classes = cn(\n    \"mb-0 inline-flex items-center text-xs font-medium\",\n    typeClasses[type],\n    className,\n  );\n\n  // TODO: add icon\n  return (\n    <Component data-type={type} className={classes} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;AAcA,MAAM,iBAAiB;AAEvB,MAAa,eAEqB,EAChC,UACA,OAAO,QACP,IACA,WACA,GAAG,YACC;CACJ,MAAM,YAAY,MAAM;CAQxB,MAAM,UAAU,GACd,qDAPmD;EACnD,OAAO;EACP,MAAM;EACN,SAAS;EACV,CAIa,OACZ,UACD;AAGD,QACE,oBAAC,WAAD;EAAW,aAAW;EAAM,WAAW;EAAS,GAAI;EACjD;EACS,CAAA"}

package/dist/ui/components/form-message/form-server-error-message.d.ts

@@ -0,0 +1,2 @@
+import { t as FormServerErrorMessage } from "../../../form-server-error-message-DMmncn3g.js";
+export { FormServerErrorMessage };

package/dist/ui/components/form-message/form-server-error-message.js

@@ -0,0 +1,16 @@
+import { FormMessageList } from "./message-list.js";
+import { jsx } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+//#region src/ui/components/form-message/form-server-error-message.tsx
+const FormServerErrorMessage = () => {
+	const { formState } = useFormContext();
+	if (!formState.errors.root?.serverError.message) return null;
+	return /* @__PURE__ */ jsx(FormMessageList, {
+		messages: [formState.errors.root.serverError.message],
+		type: "error"
+	});
+};
+//#endregion
+export { FormServerErrorMessage };
+
+//# sourceMappingURL=form-server-error-message.js.map

package/dist/ui/components/form-message/form-server-error-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-server-error-message.js","names":[],"sources":["../../../../src/ui/components/form-message/form-server-error-message.tsx"],"sourcesContent":["import { useFormContext } from \"react-hook-form\";\nimport { FormMessageList } from \"./message-list.js\";\n\nexport const FormServerErrorMessage = () => {\n  const { formState } = useFormContext();\n\n  if (!formState.errors.root?.serverError.message) {\n    return null;\n  }\n\n  return (\n    <FormMessageList\n      messages={[formState.errors.root.serverError.message]}\n      type=\"error\"\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAa,+BAA+B;CAC1C,MAAM,EAAE,cAAc,gBAAgB;AAEtC,KAAI,CAAC,UAAU,OAAO,MAAM,YAAY,QACtC,QAAO;AAGT,QACE,oBAAC,iBAAD;EACE,UAAU,CAAC,UAAU,OAAO,KAAK,YAAY,QAAQ;EACrD,MAAK;EACL,CAAA"}

package/dist/ui/components/form-message/message-list.d.ts

@@ -0,0 +1,2 @@
+import { t as FormMessageList } from "../../../message-list-Dg8LS-jQ.js";
+export { FormMessageList };

package/dist/ui/components/form-message/message-list.js

@@ -0,0 +1,31 @@
+import { FormMessage } from "./form-message.js";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@powerhousedao/design-system";
+//#region src/ui/components/form-message/message-list.tsx
+const FormMessageList = ({ messages, type = "info", className, ...props }) => {
+	if (messages.length === 0) return null;
+	if (messages.length === 1) return /* @__PURE__ */ jsx(FormMessage, {
+		type,
+		...props,
+		children: messages[0]
+	});
+	const typeClasses = {
+		error: "before:bg-red-900 dark:before:bg-red-900",
+		info: "before:bg-blue-900 dark:before:bg-blue-900",
+		warning: "before:bg-orange-900 dark:before:bg-orange-900"
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("flex flex-col gap-1", className),
+		...props,
+		children: messages.map((message) => /* @__PURE__ */ jsx(FormMessage, {
+			as: "li",
+			type,
+			className: cn("relative pl-4", "before:absolute before:left-0 before:top-[0.4em] before:size-2 before:rounded-full", typeClasses[type]),
+			children: message
+		}, message))
+	});
+};
+//#endregion
+export { FormMessageList };
+
+//# sourceMappingURL=message-list.js.map

package/dist/ui/components/form-message/message-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-list.js","names":[],"sources":["../../../../src/ui/components/form-message/message-list.tsx"],"sourcesContent":["import { cn } from \"@powerhousedao/design-system\";\nimport type { FormMessageType } from \"./form-message.js\";\nimport { FormMessage } from \"./form-message.js\";\n\ninterface FormMessageListProps {\n  messages: string[];\n  type?: FormMessageType;\n  className?: string;\n}\n\nexport const FormMessageList: React.FC<FormMessageListProps> = ({\n  messages,\n  type = \"info\",\n  className,\n  ...props\n}) => {\n  if (messages.length === 0) {\n    return null;\n  }\n\n  if (messages.length === 1) {\n    return (\n      <FormMessage type={type} {...props}>\n        {messages[0]}\n      </FormMessage>\n    );\n  }\n\n  const typeClasses: Record<FormMessageType, string> = {\n    error: \"before:bg-red-900 dark:before:bg-red-900\",\n    info: \"before:bg-blue-900 dark:before:bg-blue-900\",\n    warning: \"before:bg-orange-900 dark:before:bg-orange-900\",\n  };\n\n  return (\n    <ul className={cn(\"flex flex-col gap-1\", className)} {...props}>\n      {messages.map((message) => (\n        <FormMessage\n          key={message}\n          as=\"li\"\n          type={type}\n          className={cn(\n            // Layout\n            \"relative pl-4\",\n            // Visual styles\n            \"before:absolute before:left-0 before:top-[0.4em] before:size-2 before:rounded-full\",\n            typeClasses[type],\n          )}\n        >\n          {message}\n        </FormMessage>\n      ))}\n    </ul>\n  );\n};\n"],"mappings":";;;;AAUA,MAAa,mBAAmD,EAC9D,UACA,OAAO,QACP,WACA,GAAG,YACC;AACJ,KAAI,SAAS,WAAW,EACtB,QAAO;AAGT,KAAI,SAAS,WAAW,EACtB,QACE,oBAAC,aAAD;EAAmB;EAAM,GAAI;YAC1B,SAAS;EACE,CAAA;CAIlB,MAAM,cAA+C;EACnD,OAAO;EACP,MAAM;EACN,SAAS;EACV;AAED,QACE,oBAAC,MAAD;EAAI,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;YACtD,SAAS,KAAK,YACb,oBAAC,aAAD;GAEE,IAAG;GACG;GACN,WAAW,GAET,iBAEA,sFACA,YAAY,MACb;aAEA;GACW,EAZP,QAYO,CACd;EACC,CAAA"}

package/dist/ui/components/id-autocomplete/id-autocomplete-context.d.ts

@@ -0,0 +1,8 @@
+import * as react from "react";
+
+//#region src/ui/components/id-autocomplete/id-autocomplete-context.d.ts
+declare const IdAutocompleteContext: react.Context<Record<string, unknown>>;
+declare const useIdAutocompleteContext: () => Record<string, unknown>;
+//#endregion
+export { IdAutocompleteContext, useIdAutocompleteContext };
+//# sourceMappingURL=id-autocomplete-context.d.ts.map

package/dist/ui/components/id-autocomplete/id-autocomplete-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-autocomplete-context.d.ts","names":[],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-context.ts"],"mappings":";;;cAEa,qBAAA,EAAqB,KAAA,CAAA,OAAA,CAAA,MAAA;AAAA,cAErB,wBAAA,QAAwB,MAAA"}

package/dist/ui/components/id-autocomplete/id-autocomplete-context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+//#region src/ui/components/id-autocomplete/id-autocomplete-context.ts
+const IdAutocompleteContext = createContext({});
+const useIdAutocompleteContext = () => useContext(IdAutocompleteContext);
+//#endregion
+export { IdAutocompleteContext, useIdAutocompleteContext };
+
+//# sourceMappingURL=id-autocomplete-context.js.map

package/dist/ui/components/id-autocomplete/id-autocomplete-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-autocomplete-context.js","names":[],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const IdAutocompleteContext = createContext<Record<string, unknown>>({});\n\nexport const useIdAutocompleteContext = () => useContext(IdAutocompleteContext);\n"],"mappings":";;AAEA,MAAa,wBAAwB,cAAuC,EAAE,CAAC;AAE/E,MAAa,iCAAiC,WAAW,sBAAsB"}

package/dist/ui/components/id-autocomplete/id-autocomplete-input-container.d.ts

@@ -0,0 +1,2 @@
+import { n as IdAutocompleteInputContainerProps, t as IdAutocompleteInputContainer } from "../../../id-autocomplete-input-container-BUoWPXRs.js";
+export { IdAutocompleteInputContainer, IdAutocompleteInputContainerProps };