@powerhousedao/design-system 6.0.0-dev.24 → 6.0.0-dev.240

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

@@ -0,0 +1,124 @@
+import { FormServerErrorMessage } from "../form-message/form-server-error-message.js";
+import { deepEqual } from "../../lib/deep-equal.js";
+import { isEmpty } from "../../lib/is-empty.js";
+import { castValue } from "../../lib/value-cast.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";
+//#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 = /* @__PURE__ */ 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":["castValue","deepEqual","isEmpty","forwardRef","useCallback","useEffect","useId","useImperativeHandle","FormProvider","useForm","FormServerErrorMessage","defaultOnError","Form","children","onSubmit","resetOnSuccessfulSubmit","submitChangesOnly","defaultValues","renderSubmitErrorsManually","submissionErrorMatcher","className","extraFormProps","ref","formId","methods","criteriaMode","formState","isSubmitSuccessful","reset","wrappedOnSubmit","rawData","data","Object","keys","control","_fields","forEach","fieldName","includes","fromEntries","entries","filter","value","map","form","document","getElementById","key","field","querySelector","dataCast","getAttribute","error","console","errors","setError","type","message","types","serverError","triggerSubmit","dispatchEvent","Event","bubbles","root","handleSubmit"],"sources":["../../../../src/ui/components/form/form.tsx"],"sourcesContent":["import type { ValueCast } from \"#design-system/ui/lib\";\nimport { castValue, deepEqual, isEmpty } from \"#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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwIA,MAAaY,OAAOT,4BAEhB,EACEU,UACAC,UACAC,0BAA0B,OAC1BC,oBAAoB,OACpBC,eACAC,6BAA6B,OAC7BC,yBAAyBR,gBACzBS,WACAC,kBAEFC,QACG;CACH,MAAMC,SAASjB,OAAO;CACtB,MAAMkB,UAAUf,QAAQ;EACtBQ;EACAQ,cAAc;EACd,GAAGJ;EACJ,CAAC;AACFd,qBAAoBe,WAAWE,SAAS,CAACA,QAAQ,CAAC;AAElDnB,iBAAgB;AACd,MAAIU,2BAA2BS,QAAQE,UAAUC,mBAC/CH,SAAQI,MAAM,EAAE,GAAIX,iBAAiB,EAAE,EAAG,CAAC;IAE5C;EACDF;EACAS;EACAA,QAAQE,UAAUC;EAClBV;EACD,CAAC;CAEF,MAAMY,kBAAkBzB,YACtB,OAAO0B,YAAiC;AACtC,MAAI;GACF,IAAIC,OAAOD;AAIXE,UAAOC,KAAKT,QAAQU,QAAQC,QAAQ,CAACC,SAASC,cAAc;AAC1D,QAAI,CAACL,OAAOC,KAAKF,KAAK,CAACO,SAASD,UAAU,CACxCN,MAAKM,aAAa;KAEpB;AAEF,OAAIrB,qBAAqB,CAAC,CAACC,cAEzBc,QAAOC,OAAOO,YACZP,OAAOQ,QAAQV,QAAQ,CAACW,QACrB,CAACJ,WAAWK,WACX,CAACzC,UAAUyC,OAAOzB,cAAcoB,WACpC,CACF,CAAC;AAKHN,UAAOC,OAAOO,YACZP,OAAOQ,QAAQT,KAAK,CAACY,KAAK,CAACN,WAAWK,WAAW,CAC/CL,WACAnC,QAAQwC,MAAM,GAAG,OAAOA,MACzB,CACH,CAAC;GAGD,MAAME,OAAOC,SAASC,eAAevB,OAAO;AAC5CS,UAAOC,KAAKF,KAAK,CAACY,KAAKI,QAAQ;AAC7B,QAAI;KACF,MAAML,QAAiBX,KAAKgB;AAC5B,SAAIL,UAAU,MAAM;MAElB,MAAMQ,YADQN,MAAMK,cAAc,UAAUF,IAAG,IAAK,GAC5BI,aAAa,YAAY;AACjD,UAAID,SACFnB,MAAKgB,OAAO/C,UACV0C,OACAQ,SACU;;aAGTE,OAAO;AAEdC,aAAQD,MAAMA,MAAM;;KAEtB;AAIF,UAAO,MAAMtC,SAASiB,KAAK;WACpBqB,OAAY;GACnB,MAAME,SAASnC,uBACbiC,OACApB,OAAOC,KAAKT,QAAQU,QAAQC,QAC9B,CAAC;AAEDH,UAAOQ,QAAQc,OAAO,CAAClB,SAAS,CAACW,KAAKL,WAAW;AAC/ClB,YAAQ+B,SAASR,KAAK;KACpBS,MAAM;KACNC,SAASf;KACTgB,OAAO,EACLC,aAAajB,OACf;KACD,CAAC;KACF;;IAGN;EACElB;EACAR;EACAC;EACAM;EACAT;EACAK;EAEJ,CAAC;CAED,MAAMyC,gBAAgBxD,kBAAkB;EAEtC,MAAMwC,OAAOC,SAASC,eAAevB,OAAO;AAC5C,MAAIqB,KACFA,MAAKiB,cAAc,IAAIC,MAAM,UAAU,EAAEC,SAAS,MAAM,CAAC,CAAC;IAE3D,CAACxC,OAAO,CAAC;AAEZ,QACE,qBAAC,cAAD;EAAc,GAAIC;YAAlB,CACG,CAACN,8BACAM,QAAQE,UAAU4B,OAAOU,MAAML,YAAYF,WACzC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,wBAAD,EAAuB,CAAA;GAE1B,CAAA,EAEH,oBAAC,QAAD;GACE,IAAIlC;GACJ,UAAUC,QAAQyC,aAAapC,gBAAgB;GACpCT;GACX,YAAA;aAEC,OAAOP,aAAa,aACjBA,SAAS;IACP,GAAGW;IACHoC;IACArC;IACD,CAAC,GACFV;GACA,CAAA,CACO;;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":["isSupportedErrorObject","error","Object","hasOwn","Array","isArray","data","defaultOnError","fieldNames","message","formErrorPath","path","length","includes"],"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,MAAaA,0BACXC,UACkC;AAClC,QACE,OAAOA,UAAU,YACjBC,OAAOC,OAAOF,OAAO,OAAO,IAC5BG,MAAMC,QAASJ,MAA6BK,KAAK;;AAIrD,MAAaC,kBACXN,OACAO,eAC2B;CAC3B,IAAIC,UAAU;CACd,IAAIC,gBAAgB;AAEpB,KAAI,OAAOT,UAAU,YAAYD,uBAAuBC,MAAM,EAAE;EAC9D,MAAMU,OAAOV,MAAMK,KAAK,IAAIK;AAC5B,MAAIV,MAAMK,KAAK,IAAIG,QACjBA,WAAUR,MAAMK,KAAK,GAAGG;AAE1B,MAAIL,MAAMC,QAAQM,KAAK;OAEjBA,KAAKC,WAAW,KAAKJ,WAAWK,SAASF,KAAK,GAAa,CAC7DD,iBAAgBC,KAAK;;;AAK3B,QAAO,GACJD,gBAAgBD,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-Bsurk7mm.js";
+export { FormDescription, FormDescriptionProps };

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

@@ -0,0 +1,13 @@
+import { t as cn } from "../../../src-DTHkTkyy.js";
+import { jsx } from "react/jsx-runtime";
+//#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":["cn","FormDescription","children","as","className","Component"],"sources":["../../../../src/ui/components/form-description/form-description.tsx"],"sourcesContent":["import { cn } from \"#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,MAAMC,mBAAmD,EACvDC,UACAC,IACAC,gBACI;AAGJ,QACE,oBAHgBD,MAAM,KAGtB;EACE,WAAWH,GACT,4EACAI,UACD;EAEAF;EACS,CAAA"}

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

@@ -0,0 +1,2 @@
+import { t as FormGroup } from "../../../form-group-B092xF-f.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":["FormGroup","children"],"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,MAAaA,aAAgD,EAAEC,eAAe;AAC5E,QAAO,oBAAC,OAAD;EAAK,WAAU;EAAuBA;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-CURXUfpb.js";
+export { FormLabel, FormLabelProps };

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

@@ -0,0 +1,31 @@
+import { h as Icon, t as cn } from "../../../src-DTHkTkyy.js";
+import { Tooltip, TooltipProvider as Provider } from "../tooltip/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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":["cn","Icon","Tooltip","TooltipProvider","FormLabel","children","required","disabled","description","hasError","inline","className","htmlLabelProps","classes","extraProps"],"sources":["../../../../src/ui/components/form-label/form-label.tsx"],"sourcesContent":["import { cn, Icon } from \"#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,MAAaI,aAAuC,EAClDC,UACAC,UACAC,UACAC,aACAC,UACAC,QACAC,WACA,GAAGC,qBACC;CACJ,MAAMC,UAAUb,GACd,gDACAU,SAAS,mBAAmB,aAC5B,iBAAiBA,SAAS,uBAAuB,uBACjDD,YAAY,4DACZA,YAAYC,UAAU,kCACtBD,YAAY,CAACC,UAAU,kCACvBH,YACE,oCACEG,SAAS,uBAAuB,wBAEpCA,SACI,CAACH,YAAY,6DACb,YACJI,UACD;AAED,KAAI,CAACN,SAEH,QAAO;AAOT,QACE,qBAAC,SAAD;EAAO,WAAWQ;EAJlB,GAAGD;YAIH;GACGP;GACAC,YACC,oBAAC,QAAD;IACE,WAAWN,GACT,kGACAS,YACE,GAAGC,SAAS,kBAAkB,gBAAe,4BAChD;cAAC;IAIL,CAAA;GAEAF,eACC,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;IAAS,SAASA;cAChB,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAWR,GACT,qGACAO,YAAY,gBACb;KAAC,CAAA;IAEG,CAAA,EAEZ,CAAA;GACK"}

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-BeAVBzjc.js";
+export { FormMessage, FormMessageProps, FormMessageType };

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

@@ -0,0 +1,22 @@
+import { t as cn } from "../../../src-DTHkTkyy.js";
+import { jsx } from "react/jsx-runtime";
+//#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":["cn","defaultElement","FormMessage","children","type","as","className","props","Component","typeClasses","error","info","warning","classes"],"sources":["../../../../src/ui/components/form-message/form-message.tsx"],"sourcesContent":["import { cn } from \"#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,MAAMC,iBAAiB;AAEvB,MAAaC,eAEqB,EAChCC,UACAC,OAAO,QACPC,IACAC,WACA,GAAGC,YACC;CACJ,MAAMC,YAAYH,MAAMJ;CAQxB,MAAMY,UAAUb,GACd,qDAPmD;EACnDU,OAAO;EACPC,MAAM;EACNC,SAAS;EACV,CAIaR,OACZE,UACD;AAGD,QACE,oBAAC,WAAD;EAAW,aAAWF;EAAM,WAAWS;EAAS,GAAIN;EACjDJ;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-CbKMtocn.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":["useFormContext","FormMessageList","FormServerErrorMessage","formState","errors","root","serverError","message"],"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,MAAaE,+BAA+B;CAC1C,MAAM,EAAEC,cAAcH,gBAAgB;AAEtC,KAAI,CAACG,UAAUC,OAAOC,MAAMC,YAAYC,QACtC,QAAO;AAGT,QACE,oBAAC,iBAAD;EACE,UAAU,CAACJ,UAAUC,OAAOC,KAAKC,YAAYC,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-DDi6OrSM.js";
+export { FormMessageList };

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

@@ -0,0 +1,31 @@
+import { t as cn } from "../../../src-DTHkTkyy.js";
+import { FormMessage } from "./form-message.js";
+import { jsx } from "react/jsx-runtime";
+//#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":["cn","FormMessage","FormMessageList","messages","type","className","props","length","typeClasses","error","info","warning","map","message"],"sources":["../../../../src/ui/components/form-message/message-list.tsx"],"sourcesContent":["import { cn } from \"#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,MAAaE,mBAAmD,EAC9DC,UACAC,OAAO,QACPC,WACA,GAAGC,YACC;AACJ,KAAIH,SAASI,WAAW,EACtB,QAAO;AAGT,KAAIJ,SAASI,WAAW,EACtB,QACE,oBAAC,aAAD;EAAmBH;EAAM,GAAIE;YAC1BH,SAAS;EACE,CAAA;CAIlB,MAAMK,cAA+C;EACnDC,OAAO;EACPC,MAAM;EACNC,SAAS;EACV;AAED,QACE,oBAAC,MAAD;EAAI,WAAWX,GAAG,uBAAuBK,UAAU;EAAE,GAAIC;YACtDH,SAASS,KAAKC,YACb,oBAAC,aAAD;GAEE,IAAG;GACGT;GACN,WAAWJ,GAET,iBAEA,sFACAQ,YAAYJ,MACb;aAEAS;GAEJ,EAbQA,QAaR,CAAC;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 = /* @__PURE__ */ 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":["createContext","useContext","IdAutocompleteContext","useIdAutocompleteContext"],"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,MAAaE,wBAAwBF,8BAAuC,EAAE,CAAC;AAE/E,MAAaG,iCAAiCF,WAAWC,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-DefHskQg.js";
+export { IdAutocompleteInputContainer, IdAutocompleteInputContainerProps };

package/dist/ui/components/id-autocomplete/id-autocomplete-input-container.js

@@ -0,0 +1,114 @@
+import { h as Icon, t as cn } from "../../../src-DTHkTkyy.js";
+import { Tooltip, TooltipProvider as Provider } from "../tooltip/tooltip.js";
+import { sharedValueTransformers } from "../../lib/shared-value-transformers.js";
+import { Input } from "../input/input.js";
+import { ValueTransformer } from "../value-transformer/value-transformer.js";
+import React, { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command } from "cmdk";
+import { useMediaQuery } from "usehooks-ts";
+//#region src/ui/components/id-autocomplete/id-autocomplete-input-container.tsx
+const IdAutocompleteInputContainer = /* @__PURE__ */ React.forwardRef(({ id, name, value, className, isLoading, haveFetchError, disabled, onChange, onBlur, onClick, selectedOption, optionsLength, handleOpenChange, onKeyDown, onMouseDown, placeholder, hasError, label, required, isPopoverOpen, maxLength, handlePaste, onPaste, ...props }, ref) => {
+	const [hasCopied, setHasCopied] = useState(false);
+	const hasHover = useMediaQuery("(hover: hover) and (pointer: fine)");
+	const transformers = useMemo(() => [sharedValueTransformers.trimOnBlur(), sharedValueTransformers.trimOnEnter()], []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative"),
+		children: [/* @__PURE__ */ jsx(ValueTransformer, {
+			transformers,
+			children: /* @__PURE__ */ jsx(Command.Input, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Input, {
+					id,
+					name,
+					value,
+					className: cn("pr-9", className),
+					disabled,
+					onChange,
+					onBlur,
+					onClick: (e) => {
+						const input = e.target;
+						if (!(isLoading || haveFetchError) && !selectedOption && input.value !== "") handleOpenChange?.(true);
+						onClick?.(e);
+					},
+					onKeyDown: (e) => {
+						onKeyDown?.(e);
+						const isOptionsRelatedKey = [
+							"ArrowUp",
+							"ArrowDown",
+							"Enter"
+						].includes(e.key);
+						if (e.key === "Enter" && isPopoverOpen && optionsLength === 0) {
+							handleOpenChange?.(false);
+							e.preventDefault();
+							return;
+						}
+						if (!(isOptionsRelatedKey && isPopoverOpen && optionsLength > 0)) e.stopPropagation();
+					},
+					onMouseDown: (e) => {
+						const input = e.target;
+						if (!input.contains(document.activeElement)) requestAnimationFrame(() => {
+							input.select();
+						});
+						onMouseDown?.(e);
+					},
+					onPaste: (e) => {
+						handlePaste?.(e);
+						onPaste?.(e);
+					},
+					placeholder,
+					"aria-invalid": hasError,
+					"aria-label": !label ? "Id Autocomplete" : void 0,
+					"aria-required": required,
+					"aria-expanded": isPopoverOpen,
+					maxLength,
+					...props,
+					ref
+				})
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("absolute right-3 top-1/2 flex size-4 -translate-y-1/2 items-center", !isLoading && !haveFetchError && !selectedOption && "pointer-events-none"),
+			children: [
+				isLoading && /* @__PURE__ */ jsx(Icon, {
+					name: "Reload",
+					size: 16,
+					className: cn("animate-spin text-gray-500 dark:text-gray-600")
+				}),
+				haveFetchError && /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(Tooltip, {
+					content: "Network error!",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "Error",
+						size: 16,
+						className: cn("text-red-900")
+					})
+				}) }),
+				selectedOption && !isLoading && !haveFetchError && /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(Tooltip, {
+					content: "Copied!",
+					open: hasCopied,
+					triggerAsChild: true,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							navigator.clipboard.writeText(selectedOption.value).then(() => {
+								setHasCopied(true);
+								setTimeout(() => setHasCopied(false), 2e3);
+							}).catch((error) => {
+								console.error("Failed to copy value: ", error);
+							});
+						},
+						className: cn("focus-visible:outline-none [&_svg]:pointer-events-none", hasHover && "opacity-0 transition-opacity duration-500 group-hover:opacity-100"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "Copy",
+							size: 16,
+							className: cn("text-gray-500 dark:text-gray-600")
+						})
+					})
+				}) })
+			]
+		})]
+	});
+});
+//#endregion
+export { IdAutocompleteInputContainer };
+
+//# sourceMappingURL=id-autocomplete-input-container.js.map

package/dist/ui/components/id-autocomplete/id-autocomplete-input-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-autocomplete-input-container.js","names":["cn","Icon","sharedValueTransformers","Command","CommandPrimitive","React","useMemo","useState","useMediaQuery","Input","Tooltip","TooltipProvider","ValueTransformer","IdAutocompleteInputContainer","forwardRef","id","name","value","className","isLoading","haveFetchError","disabled","onChange","onBlur","onClick","selectedOption","optionsLength","handleOpenChange","onKeyDown","onMouseDown","placeholder","hasError","label","required","isPopoverOpen","maxLength","handlePaste","onPaste","props","ref","hasCopied","setHasCopied","hasHover","transformers","trimOnBlur","trimOnEnter","e","input","target","isOptionsRelatedKey","includes","key","preventDefault","stopPropagation","contains","document","activeElement","requestAnimationFrame","select","undefined","navigator","clipboard","writeText","then","setTimeout","catch","error","console"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-input-container.tsx"],"sourcesContent":["import type { TransformerType } from \"#design-system\";\nimport { cn, Icon } from \"#design-system\";\nimport { sharedValueTransformers } from \"#design-system/ui/lib\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport React, { useMemo, useState } from \"react\";\nimport { useMediaQuery } from \"usehooks-ts\";\nimport type { InputBaseProps } from \"../../types.js\";\nimport { Input } from \"../input/input.js\";\nimport { Tooltip, TooltipProvider } from \"../tooltip/tooltip.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport type { IdAutocompleteOption } from \"./types.js\";\n\ninterface IdAutocompleteInputContainerProps extends Omit<\n  InputBaseProps<string>,\n  \"defaultValue\" | \"errors\" | \"warnings\"\n> {\n  isLoading: boolean;\n  haveFetchError: boolean;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  selectedOption?: IdAutocompleteOption;\n  optionsLength: number;\n  handleOpenChange?: (open: boolean) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  onMouseDown?: (e: React.MouseEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  hasError: boolean;\n  isPopoverOpen: boolean;\n  maxLength?: number;\n  handlePaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;\n  onPaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;\n}\n\nconst IdAutocompleteInputContainer = React.forwardRef<\n  HTMLInputElement,\n  IdAutocompleteInputContainerProps\n>(\n  (\n    {\n      id,\n      name,\n      value,\n      className,\n      isLoading,\n      haveFetchError,\n      disabled,\n      onChange,\n      onBlur,\n      onClick,\n      selectedOption,\n      optionsLength,\n      handleOpenChange,\n      onKeyDown,\n      onMouseDown,\n      placeholder,\n      hasError,\n      label,\n      required,\n      isPopoverOpen,\n      maxLength,\n      handlePaste,\n      onPaste,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hasCopied, setHasCopied] = useState(false);\n    const hasHover = useMediaQuery(\"(hover: hover) and (pointer: fine)\");\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <div className={cn(\"group relative\")}>\n        <ValueTransformer transformers={transformers}>\n          <CommandPrimitive.Input asChild>\n            <Input\n              id={id}\n              name={name}\n              value={value}\n              className={cn(\"pr-9\", className)}\n              disabled={disabled}\n              onChange={onChange}\n              onBlur={onBlur}\n              onClick={(e) => {\n                const input = e.target as HTMLInputElement;\n                if (\n                  !(isLoading || haveFetchError) &&\n                  !selectedOption &&\n                  input.value !== \"\"\n                ) {\n                  handleOpenChange?.(true);\n                }\n                onClick?.(e);\n              }}\n              onKeyDown={(e) => {\n                onKeyDown?.(e);\n                const isOptionsRelatedKey = [\n                  \"ArrowUp\",\n                  \"ArrowDown\",\n                  \"Enter\",\n                ].includes(e.key);\n\n                if (e.key === \"Enter\" && isPopoverOpen && optionsLength === 0) {\n                  handleOpenChange?.(false);\n                  e.preventDefault();\n                  return;\n                }\n                if (\n                  !(isOptionsRelatedKey && isPopoverOpen && optionsLength > 0)\n                ) {\n                  e.stopPropagation();\n                }\n              }}\n              onMouseDown={(e) => {\n                const input = e.target as HTMLInputElement;\n                if (!input.contains(document.activeElement)) {\n                  // wait for the next tick to ensure the focus occurs first\n                  requestAnimationFrame(() => {\n                    input.select();\n                  });\n                }\n                onMouseDown?.(e);\n              }}\n              onPaste={(e) => {\n                handlePaste?.(e);\n                onPaste?.(e);\n              }}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              aria-expanded={isPopoverOpen}\n              maxLength={maxLength}\n              {...props}\n              ref={ref}\n            />\n          </CommandPrimitive.Input>\n        </ValueTransformer>\n        <div\n          className={cn(\n            \"absolute right-3 top-1/2 flex size-4 -translate-y-1/2 items-center\",\n            !isLoading &&\n              !haveFetchError &&\n              !selectedOption &&\n              \"pointer-events-none\",\n          )}\n        >\n          {isLoading && (\n            <Icon\n              name=\"Reload\"\n              size={16}\n              className={cn(\"animate-spin text-gray-500 dark:text-gray-600\")}\n            />\n          )}\n          {haveFetchError && (\n            <TooltipProvider>\n              <Tooltip content=\"Network error!\">\n                <Icon name=\"Error\" size={16} className={cn(\"text-red-900\")} />\n              </Tooltip>\n            </TooltipProvider>\n          )}\n          {selectedOption && !isLoading && !haveFetchError && (\n            <TooltipProvider>\n              <Tooltip content=\"Copied!\" open={hasCopied} triggerAsChild>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    navigator.clipboard\n                      .writeText(selectedOption.value)\n                      .then(() => {\n                        setHasCopied(true);\n                        setTimeout(() => setHasCopied(false), 2000);\n                      })\n                      .catch((error) => {\n                        console.error(\"Failed to copy value: \", error);\n                      });\n                  }}\n                  className={cn(\n                    \"focus-visible:outline-none [&_svg]:pointer-events-none\",\n                    hasHover &&\n                      \"opacity-0 transition-opacity duration-500 group-hover:opacity-100\",\n                  )}\n                >\n                  <Icon\n                    name=\"Copy\"\n                    size={16}\n                    className={cn(\"text-gray-500 dark:text-gray-600\")}\n                  />\n                </button>\n              </Tooltip>\n            </TooltipProvider>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nexport { IdAutocompleteInputContainer, type IdAutocompleteInputContainerProps };\n"],"mappings":";;;;;;;;;;AAkCA,MAAMa,+BAA+BR,sBAAMS,YAKvC,EACEC,IACAC,MACAC,OACAC,WACAC,WACAC,gBACAC,UACAC,UACAC,QACAC,SACAC,gBACAC,eACAC,kBACAC,WACAC,aACAC,aACAC,UACAC,OACAC,UACAC,eACAC,WACAC,aACAC,SACA,GAAGC,SAELC,QACG;CACH,MAAM,CAACC,WAAWC,gBAAgBlC,SAAS,MAAM;CACjD,MAAMmC,WAAWlC,cAAc,qCAAqC;CAEpE,MAAMmC,eAAgCrC,cAC9B,CACJJ,wBAAwB0C,YAAY,EACpC1C,wBAAwB2C,aAAa,CACtC,EACD,EACF,CAAC;AAED,QACE,qBAAC,OAAD;EAAK,WAAW7C,GAAG,iBAAiB;YAApC,CACE,oBAAC,kBAAD;GAAgC2C;aAC9B,oBAAC,QAAiB,OAAlB;IAAwB,SAAA;cACtB,oBAAC,OAAD;KACM5B;KACEC;KACCC;KACP,WAAWjB,GAAG,QAAQkB,UAAU;KACtBG;KACAC;KACFC;KACR,UAAUuB,MAAM;MACd,MAAMC,QAAQD,EAAEE;AAChB,UACE,EAAE7B,aAAaC,mBACf,CAACK,kBACDsB,MAAM9B,UAAU,GAEhBU,oBAAmB,KAAK;AAE1BH,gBAAUsB,EAAE;;KAEd,YAAYA,MAAM;AAChBlB,kBAAYkB,EAAE;MACd,MAAMG,sBAAsB;OAC1B;OACA;OACA;OACD,CAACC,SAASJ,EAAEK,IAAI;AAEjB,UAAIL,EAAEK,QAAQ,WAAWjB,iBAAiBR,kBAAkB,GAAG;AAC7DC,0BAAmB,MAAM;AACzBmB,SAAEM,gBAAgB;AAClB;;AAEF,UACE,EAAEH,uBAAuBf,iBAAiBR,gBAAgB,GAE1DoB,GAAEO,iBAAiB;;KAGvB,cAAcP,MAAM;MAClB,MAAMC,QAAQD,EAAEE;AAChB,UAAI,CAACD,MAAMO,SAASC,SAASC,cAAc,CAEzCC,6BAA4B;AAC1BV,aAAMW,QAAQ;QACd;AAEJ7B,oBAAciB,EAAE;;KAElB,UAAUA,MAAM;AACdV,oBAAcU,EAAE;AAChBT,gBAAUS,EAAE;;KAEDhB;KACb,gBAAcC;KACd,cAAY,CAACC,QAAQ,oBAAoB2B,KAAAA;KACzC,iBAAe1B;KACf,iBAAeC;KACJC;KACX,GAAIG;KACCC;KAAI,CAAA;IAEW,CAAA;GACR,CAAA,EAClB,qBAAC,OAAD;GACE,WAAWvC,GACT,sEACA,CAACmB,aACC,CAACC,kBACD,CAACK,kBACD,sBACH;aAPH;IASGN,aACC,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAWnB,GAAG,gDAAgD;KAEjE,CAAA;IACAoB,kBACC,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;KAAS,SAAQ;eACf,oBAAC,MAAD;MAAM,MAAK;MAAQ,MAAM;MAAI,WAAWpB,GAAG,eAAe;MAAC,CAAA;KACpD,CAAA,EAEZ,CAAA;IACAyB,kBAAkB,CAACN,aAAa,CAACC,kBAChC,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;KAAS,SAAQ;KAAU,MAAMoB;KAAW,gBAAA;eAC1C,oBAAC,UAAD;MACE,MAAK;MACL,eAAe;AACboB,iBAAUC,UACPC,UAAUrC,eAAeR,MAAM,CAC/B8C,WAAW;AACVtB,qBAAa,KAAK;AAClBuB,yBAAiBvB,aAAa,MAAM,EAAE,IAAK;SAC3C,CACDwB,OAAOC,UAAU;AAChBC,gBAAQD,MAAM,0BAA0BA,MAAM;SAC9C;;MAEN,WAAWlE,GACT,0DACA0C,YACE,oEACH;gBAED,oBAAC,MAAD;OACE,MAAK;OACL,MAAM;OACN,WAAW1C,GAAG,mCAAmC;OAAC,CAAA;MAE9C,CAAA;KACD,CAAA,EAEZ,CAAA;IACE;KACD;;EAGX"}

package/dist/ui/components/id-autocomplete/id-autocomplete-list-option.d.ts

@@ -0,0 +1,2 @@
+import { n as IdAutocompleteListOptionProps, t as IdAutocompleteListOption } from "../../../id-autocomplete-list-option-CyF3v8IB.js";
+export { IdAutocompleteListOption, IdAutocompleteListOptionProps };