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

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

@@ -0,0 +1,114 @@
+import { Tooltip, TooltipProvider as Provider } from "../tooltip/tooltip.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 { Icon, cn } from "@powerhousedao/design-system";
+import { useMediaQuery } from "usehooks-ts";
+import { Command } from "cmdk";
+import { sharedValueTransformers } from "@powerhousedao/design-system/ui/lib";
+//#region src/ui/components/id-autocomplete/id-autocomplete-input-container.tsx
+const IdAutocompleteInputContainer = 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":["CommandPrimitive","TooltipProvider"],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-input-container.tsx"],"sourcesContent":["import type { TransformerType } from \"@powerhousedao/design-system\";\nimport { cn, Icon } from \"@powerhousedao/design-system\";\nimport { sharedValueTransformers } from \"@powerhousedao/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,MAAM,+BAA+B,MAAM,YAKvC,EACE,IACA,MACA,OACA,WACA,WACA,gBACA,UACA,UACA,QACA,SACA,gBACA,eACA,kBACA,WACA,aACA,aACA,UACA,OACA,UACA,eACA,WACA,aACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,WAAW,cAAc,qCAAqC;CAEpE,MAAM,eAAgC,cAC9B,CACJ,wBAAwB,YAAY,EACpC,wBAAwB,aAAa,CACtC,EACD,EAAE,CACH;AAED,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB;YAApC,CACE,oBAAC,kBAAD;GAAgC;aAC9B,oBAACA,QAAiB,OAAlB;IAAwB,SAAA;cACtB,oBAAC,OAAD;KACM;KACE;KACC;KACP,WAAW,GAAG,QAAQ,UAAU;KACtB;KACA;KACF;KACR,UAAU,MAAM;MACd,MAAM,QAAQ,EAAE;AAChB,UACE,EAAE,aAAa,mBACf,CAAC,kBACD,MAAM,UAAU,GAEhB,oBAAmB,KAAK;AAE1B,gBAAU,EAAE;;KAEd,YAAY,MAAM;AAChB,kBAAY,EAAE;MACd,MAAM,sBAAsB;OAC1B;OACA;OACA;OACD,CAAC,SAAS,EAAE,IAAI;AAEjB,UAAI,EAAE,QAAQ,WAAW,iBAAiB,kBAAkB,GAAG;AAC7D,0BAAmB,MAAM;AACzB,SAAE,gBAAgB;AAClB;;AAEF,UACE,EAAE,uBAAuB,iBAAiB,gBAAgB,GAE1D,GAAE,iBAAiB;;KAGvB,cAAc,MAAM;MAClB,MAAM,QAAQ,EAAE;AAChB,UAAI,CAAC,MAAM,SAAS,SAAS,cAAc,CAEzC,6BAA4B;AAC1B,aAAM,QAAQ;QACd;AAEJ,oBAAc,EAAE;;KAElB,UAAU,MAAM;AACd,oBAAc,EAAE;AAChB,gBAAU,EAAE;;KAED;KACb,gBAAc;KACd,cAAY,CAAC,QAAQ,oBAAoB,KAAA;KACzC,iBAAe;KACf,iBAAe;KACJ;KACX,GAAI;KACC;KACL,CAAA;IACqB,CAAA;GACR,CAAA,EACnB,qBAAC,OAAD;GACE,WAAW,GACT,sEACA,CAAC,aACC,CAAC,kBACD,CAAC,kBACD,sBACH;aAPH;IASG,aACC,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAW,GAAG,gDAAgD;KAC9D,CAAA;IAEH,kBACC,oBAACC,UAAD,EAAA,UACE,oBAAC,SAAD;KAAS,SAAQ;eACf,oBAAC,MAAD;MAAM,MAAK;MAAQ,MAAM;MAAI,WAAW,GAAG,eAAe;MAAI,CAAA;KACtD,CAAA,EACM,CAAA;IAEnB,kBAAkB,CAAC,aAAa,CAAC,kBAChC,oBAACA,UAAD,EAAA,UACE,oBAAC,SAAD;KAAS,SAAQ;KAAU,MAAM;KAAW,gBAAA;eAC1C,oBAAC,UAAD;MACE,MAAK;MACL,eAAe;AACb,iBAAU,UACP,UAAU,eAAe,MAAM,CAC/B,WAAW;AACV,qBAAa,KAAK;AAClB,yBAAiB,aAAa,MAAM,EAAE,IAAK;SAC3C,CACD,OAAO,UAAU;AAChB,gBAAQ,MAAM,0BAA0B,MAAM;SAC9C;;MAEN,WAAW,GACT,0DACA,YACE,oEACH;gBAED,oBAAC,MAAD;OACE,MAAK;OACL,MAAM;OACN,WAAW,GAAG,mCAAmC;OACjD,CAAA;MACK,CAAA;KACD,CAAA,EACM,CAAA;IAEhB;KACF;;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-C1b8SakH.js";
+export { IdAutocompleteListOption, IdAutocompleteListOptionProps };

package/dist/ui/components/id-autocomplete/id-autocomplete-list-option.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, cn } from "@powerhousedao/design-system";
+//#region src/ui/components/id-autocomplete/id-autocomplete-list-option.tsx
+const IconRenderer = ({ customIcon, asPlaceholder }) => {
+	if (typeof customIcon === "string") return /* @__PURE__ */ jsx(Icon, {
+		name: customIcon,
+		size: 24,
+		className: cn("shrink-0", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-900 dark:text-gray-300")
+	});
+	if (React.isValidElement(customIcon)) return /* @__PURE__ */ jsx("div", {
+		className: "size-6 shrink-0 overflow-hidden",
+		children: customIcon
+	});
+	return null;
+};
+const ReloadButton = ({ isLoadingSelectedOption, handleFetchSelectedOption, isFetchSelectedOptionSync, value }) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("button", {
+	type: "button",
+	disabled: isLoadingSelectedOption || isFetchSelectedOptionSync,
+	onClick: () => {
+		if (!isLoadingSelectedOption && !isFetchSelectedOptionSync) handleFetchSelectedOption(value);
+	},
+	className: cn("mt-0.5 focus-visible:outline-none", "disabled:pointer-events-none [&_svg]:pointer-events-none"),
+	"aria-label": isLoadingSelectedOption ? "Loading" : isFetchSelectedOptionSync ? "Success" : "Reload",
+	children: /* @__PURE__ */ jsx(Icon, {
+		name: isFetchSelectedOptionSync ? "Checkmark" : "Reload",
+		size: 16,
+		className: cn("text-gray-500 dark:text-gray-600", isLoadingSelectedOption && "animate-spin", isFetchSelectedOptionSync && "animate-in fade-in duration-500")
+	})
+}) });
+const IdAutocompleteListOption = ({ variant = "withValue", icon, title = "Title not available", path = "Path not available", value, description = "Description not available", asPlaceholder, showValue = true, isLoadingSelectedOption, handleFetchSelectedOption, isFetchSelectedOptionSync, className, placeholderIcon = "PowerhouseLogoSmall", ...extraProps }) => {
+	const renderWithValue = () => /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full items-center"),
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"),
+			children: value
+		})
+	});
+	const renderWithValueTitleAndDescription = (showDescription = true) => /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full flex-col gap-1"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex gap-2"),
+				children: [
+					/* @__PURE__ */ jsx(IconRenderer, {
+						customIcon: asPlaceholder ? placeholderIcon : icon,
+						asPlaceholder
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 grow flex-col gap-[-2px]"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("truncate text-sm font-bold leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-900 dark:text-gray-300"),
+							children: title
+						}), !showValue && typeof path === "object" ? /* @__PURE__ */ jsx("a", {
+							href: path.url,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: cn("truncate text-xs leading-5 text-blue-900 hover:underline focus-visible:outline-none"),
+							children: path.text
+						}) : /* @__PURE__ */ jsx("span", {
+							className: cn("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"),
+							children: typeof path === "object" ? path.text : path
+						})]
+					}),
+					asPlaceholder === false && handleFetchSelectedOption && /* @__PURE__ */ jsx(ReloadButton, {
+						isLoadingSelectedOption,
+						handleFetchSelectedOption,
+						isFetchSelectedOptionSync,
+						value
+					})
+				]
+			}),
+			showValue && /* @__PURE__ */ jsx("div", {
+				className: cn("flex max-w-full items-center"),
+				children: /* @__PURE__ */ jsx("span", {
+					className: cn("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"),
+					children: value
+				})
+			}),
+			showDescription && /* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-col"),
+				children: /* @__PURE__ */ jsx("p", {
+					className: cn("line-clamp-2 text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-900 dark:text-gray-300"),
+					children: description
+				})
+			}),
+			showDescription && "agentType" in extraProps && typeof extraProps.agentType === "string" && /* @__PURE__ */ jsx("div", {
+				className: cn("flex max-w-full items-center justify-end"),
+				children: /* @__PURE__ */ jsx("span", {
+					className: cn("truncate text-xs leading-5", asPlaceholder ? "text-gray-400 dark:text-gray-700" : "text-gray-500 dark:text-gray-600"),
+					children: extraProps.agentType
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full max-w-full rounded-md bg-transparent px-3 pb-2", variant === "withValue" ? "pt-2" : "pt-3", className),
+		children: [
+			variant === "withValue" && renderWithValue(),
+			variant === "withValueAndTitle" && renderWithValueTitleAndDescription(false),
+			variant === "withValueTitleAndDescription" && renderWithValueTitleAndDescription()
+		]
+	});
+};
+//#endregion
+export { IdAutocompleteListOption };
+
+//# sourceMappingURL=id-autocomplete-list-option.js.map

package/dist/ui/components/id-autocomplete/id-autocomplete-list-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-autocomplete-list-option.js","names":[],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-list-option.tsx"],"sourcesContent":["import type { IconName } from \"@powerhousedao/design-system\";\nimport { cn, Icon } from \"@powerhousedao/design-system\";\nimport React from \"react\";\nimport type { IdAutocompleteOption, IdAutocompleteProps } from \"./types.js\";\n\nconst IconRenderer: React.FC<{\n  customIcon?: IconName | React.ReactElement;\n  asPlaceholder?: boolean;\n}> = ({ customIcon, asPlaceholder }) => {\n  if (typeof customIcon === \"string\") {\n    return (\n      <Icon\n        name={customIcon}\n        size={24}\n        className={cn(\n          \"shrink-0\",\n          asPlaceholder\n            ? \"text-gray-400 dark:text-gray-700\"\n            : \"text-gray-900 dark:text-gray-300\",\n        )}\n      />\n    );\n  }\n  if (React.isValidElement(customIcon)) {\n    return <div className=\"size-6 shrink-0 overflow-hidden\">{customIcon}</div>;\n  }\n  return null;\n};\n\nconst ReloadButton: React.FC<{\n  isLoadingSelectedOption?: boolean;\n  handleFetchSelectedOption: (value: string) => void;\n  isFetchSelectedOptionSync?: boolean;\n  value: string;\n}> = ({\n  isLoadingSelectedOption,\n  handleFetchSelectedOption,\n  isFetchSelectedOptionSync,\n  value,\n}) => (\n  <div>\n    <button\n      type=\"button\"\n      disabled={isLoadingSelectedOption || isFetchSelectedOptionSync}\n      onClick={() => {\n        if (!isLoadingSelectedOption && !isFetchSelectedOptionSync) {\n          handleFetchSelectedOption(value);\n        }\n      }}\n      className={cn(\n        \"mt-0.5 focus-visible:outline-none\",\n        \"disabled:pointer-events-none [&_svg]:pointer-events-none\",\n      )}\n      aria-label={\n        isLoadingSelectedOption\n          ? \"Loading\"\n          : isFetchSelectedOptionSync\n            ? \"Success\"\n            : \"Reload\"\n      }\n    >\n      <Icon\n        name={isFetchSelectedOptionSync ? \"Checkmark\" : \"Reload\"}\n        size={16}\n        className={cn(\n          \"text-gray-500 dark:text-gray-600\",\n          isLoadingSelectedOption && \"animate-spin\",\n          isFetchSelectedOptionSync && \"animate-in fade-in duration-500\",\n        )}\n      />\n    </button>\n  </div>\n);\n\ntype IdAutocompleteListOptionProps = {\n  variant: IdAutocompleteProps[\"variant\"];\n  asPlaceholder?: boolean;\n  showValue?: boolean;\n  isLoadingSelectedOption?: boolean;\n  handleFetchSelectedOption?: (value: string) => void;\n  isFetchSelectedOptionSync?: boolean;\n  className?: string;\n  placeholderIcon?: IconName | React.ReactElement;\n} & IdAutocompleteOption<Record<string, unknown>>;\n\nconst IdAutocompleteListOption: React.FC<IdAutocompleteListOptionProps> = ({\n  variant = \"withValue\",\n  icon,\n  title = \"Title not available\",\n  path = \"Path not available\",\n  value,\n  description = \"Description not available\",\n  asPlaceholder,\n  showValue = true,\n  isLoadingSelectedOption,\n  handleFetchSelectedOption,\n  isFetchSelectedOptionSync,\n  className,\n  placeholderIcon = \"PowerhouseLogoSmall\",\n  ...extraProps\n}) => {\n  const renderWithValue = () => (\n    <div className={cn(\"flex w-full items-center\")}>\n      <span\n        className={cn(\n          \"truncate text-xs leading-5\",\n          asPlaceholder\n            ? \"text-gray-400 dark:text-gray-700\"\n            : \"text-gray-500 dark:text-gray-600\",\n        )}\n      >\n        {value}\n      </span>\n    </div>\n  );\n\n  const renderWithValueTitleAndDescription = (showDescription = true) => (\n    <div className={cn(\"flex w-full flex-col gap-1\")}>\n      <div className={cn(\"flex gap-2\")}>\n        <IconRenderer\n          customIcon={asPlaceholder ? placeholderIcon : icon}\n          asPlaceholder={asPlaceholder}\n        />\n        <div className={cn(\"flex min-w-0 grow flex-col gap-[-2px]\")}>\n          <span\n            className={cn(\n              \"truncate text-sm font-bold leading-5\",\n              asPlaceholder\n                ? \"text-gray-400 dark:text-gray-700\"\n                : \"text-gray-900 dark:text-gray-300\",\n            )}\n          >\n            {title}\n          </span>\n          {!showValue && typeof path === \"object\" ? (\n            <a\n              href={path.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className={cn(\n                \"truncate text-xs leading-5 text-blue-900 hover:underline focus-visible:outline-none\",\n              )}\n            >\n              {path.text}\n            </a>\n          ) : (\n            <span\n              className={cn(\n                \"truncate text-xs leading-5\",\n                asPlaceholder\n                  ? \"text-gray-400 dark:text-gray-700\"\n                  : \"text-gray-500 dark:text-gray-600\",\n              )}\n            >\n              {typeof path === \"object\" ? path.text : path}\n            </span>\n          )}\n        </div>\n        {asPlaceholder === false && handleFetchSelectedOption && (\n          <ReloadButton\n            isLoadingSelectedOption={isLoadingSelectedOption}\n            handleFetchSelectedOption={handleFetchSelectedOption}\n            isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n            value={value}\n          />\n        )}\n      </div>\n      {showValue && (\n        <div className={cn(\"flex max-w-full items-center\")}>\n          <span\n            className={cn(\n              \"truncate text-xs leading-5\",\n              asPlaceholder\n                ? \"text-gray-400 dark:text-gray-700\"\n                : \"text-gray-500 dark:text-gray-600\",\n            )}\n          >\n            {value}\n          </span>\n        </div>\n      )}\n      {showDescription && (\n        <div className={cn(\"flex flex-col\")}>\n          <p\n            className={cn(\n              \"line-clamp-2 text-xs leading-5\",\n              asPlaceholder\n                ? \"text-gray-400 dark:text-gray-700\"\n                : \"text-gray-900 dark:text-gray-300\",\n            )}\n          >\n            {description}\n          </p>\n        </div>\n      )}\n      {showDescription &&\n        \"agentType\" in extraProps &&\n        typeof extraProps.agentType === \"string\" && (\n          <div className={cn(\"flex max-w-full items-center justify-end\")}>\n            <span\n              className={cn(\n                \"truncate text-xs leading-5\",\n                asPlaceholder\n                  ? \"text-gray-400 dark:text-gray-700\"\n                  : \"text-gray-500 dark:text-gray-600\",\n              )}\n            >\n              {extraProps.agentType}\n            </span>\n          </div>\n        )}\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\n        \"w-full max-w-full rounded-md bg-transparent px-3 pb-2\",\n        variant === \"withValue\" ? \"pt-2\" : \"pt-3\",\n        className,\n      )}\n    >\n      {variant === \"withValue\" && renderWithValue()}\n      {variant === \"withValueAndTitle\" &&\n        renderWithValueTitleAndDescription(false)}\n      {variant === \"withValueTitleAndDescription\" &&\n        renderWithValueTitleAndDescription()}\n    </div>\n  );\n};\n\nexport { IdAutocompleteListOption, type IdAutocompleteListOptionProps };\n"],"mappings":";;;;AAKA,MAAM,gBAGA,EAAE,YAAY,oBAAoB;AACtC,KAAI,OAAO,eAAe,SACxB,QACE,oBAAC,MAAD;EACE,MAAM;EACN,MAAM;EACN,WAAW,GACT,YACA,gBACI,qCACA,mCACL;EACD,CAAA;AAGN,KAAI,MAAM,eAAe,WAAW,CAClC,QAAO,oBAAC,OAAD;EAAK,WAAU;YAAmC;EAAiB,CAAA;AAE5E,QAAO;;AAGT,MAAM,gBAKA,EACJ,yBACA,2BACA,2BACA,YAEA,oBAAC,OAAD,EAAA,UACE,oBAAC,UAAD;CACE,MAAK;CACL,UAAU,2BAA2B;CACrC,eAAe;AACb,MAAI,CAAC,2BAA2B,CAAC,0BAC/B,2BAA0B,MAAM;;CAGpC,WAAW,GACT,qCACA,2DACD;CACD,cACE,0BACI,YACA,4BACE,YACA;WAGR,oBAAC,MAAD;EACE,MAAM,4BAA4B,cAAc;EAChD,MAAM;EACN,WAAW,GACT,oCACA,2BAA2B,gBAC3B,6BAA6B,kCAC9B;EACD,CAAA;CACK,CAAA,EACL,CAAA;AAcR,MAAM,4BAAqE,EACzE,UAAU,aACV,MACA,QAAQ,uBACR,OAAO,sBACP,OACA,cAAc,6BACd,eACA,YAAY,MACZ,yBACA,2BACA,2BACA,WACA,kBAAkB,uBAClB,GAAG,iBACC;CACJ,MAAM,wBACJ,oBAAC,OAAD;EAAK,WAAW,GAAG,2BAA2B;YAC5C,oBAAC,QAAD;GACE,WAAW,GACT,8BACA,gBACI,qCACA,mCACL;aAEA;GACI,CAAA;EACH,CAAA;CAGR,MAAM,sCAAsC,kBAAkB,SAC5D,qBAAC,OAAD;EAAK,WAAW,GAAG,6BAA6B;YAAhD;GACE,qBAAC,OAAD;IAAK,WAAW,GAAG,aAAa;cAAhC;KACE,oBAAC,cAAD;MACE,YAAY,gBAAgB,kBAAkB;MAC/B;MACf,CAAA;KACF,qBAAC,OAAD;MAAK,WAAW,GAAG,wCAAwC;gBAA3D,CACE,oBAAC,QAAD;OACE,WAAW,GACT,wCACA,gBACI,qCACA,mCACL;iBAEA;OACI,CAAA,EACN,CAAC,aAAa,OAAO,SAAS,WAC7B,oBAAC,KAAD;OACE,MAAM,KAAK;OACX,QAAO;OACP,KAAI;OACJ,WAAW,GACT,sFACD;iBAEA,KAAK;OACJ,CAAA,GAEJ,oBAAC,QAAD;OACE,WAAW,GACT,8BACA,gBACI,qCACA,mCACL;iBAEA,OAAO,SAAS,WAAW,KAAK,OAAO;OACnC,CAAA,CAEL;;KACL,kBAAkB,SAAS,6BAC1B,oBAAC,cAAD;MAC2B;MACE;MACA;MACpB;MACP,CAAA;KAEA;;GACL,aACC,oBAAC,OAAD;IAAK,WAAW,GAAG,+BAA+B;cAChD,oBAAC,QAAD;KACE,WAAW,GACT,8BACA,gBACI,qCACA,mCACL;eAEA;KACI,CAAA;IACH,CAAA;GAEP,mBACC,oBAAC,OAAD;IAAK,WAAW,GAAG,gBAAgB;cACjC,oBAAC,KAAD;KACE,WAAW,GACT,kCACA,gBACI,qCACA,mCACL;eAEA;KACC,CAAA;IACA,CAAA;GAEP,mBACC,eAAe,cACf,OAAO,WAAW,cAAc,YAC9B,oBAAC,OAAD;IAAK,WAAW,GAAG,2CAA2C;cAC5D,oBAAC,QAAD;KACE,WAAW,GACT,8BACA,gBACI,qCACA,mCACL;eAEA,WAAW;KACP,CAAA;IACH,CAAA;GAEN;;AAGR,QACE,qBAAC,OAAD;EACE,WAAW,GACT,yDACA,YAAY,cAAc,SAAS,QACnC,UACD;YALH;GAOG,YAAY,eAAe,iBAAiB;GAC5C,YAAY,uBACX,mCAAmC,MAAM;GAC1C,YAAY,kCACX,oCAAoC;GAClC"}

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

@@ -0,0 +1,2 @@
+import { n as IdAutocompleteListProps, t as IdAutocompleteList } from "../../../id-autocomplete-list-Bf32ncu6.js";
+export { IdAutocompleteList, IdAutocompleteListProps };

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

@@ -0,0 +1,65 @@
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from "../command/command.js";
+import { IdAutocompleteListOption } from "./id-autocomplete-list-option.js";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@powerhousedao/design-system";
+import { useCommandState } from "cmdk";
+//#region src/ui/components/id-autocomplete/id-autocomplete-list.tsx
+const IdAutocompleteList = ({ variant, commandListRef, selectedValue, options = [], toggleOption, renderOption, previewPlaceholder }) => {
+	const cmdkSearch = useCommandState((state) => state.search);
+	const defaultOption = previewPlaceholder || {
+		value: "value not available",
+		title: "Title not available",
+		path: "Path not available",
+		description: "Description not available"
+	};
+	useEffect(() => {
+		commandListRef?.current?.scrollTo({
+			top: 0,
+			behavior: "instant"
+		});
+	}, [commandListRef, cmdkSearch]);
+	return /* @__PURE__ */ jsxs(CommandList, {
+		ref: commandListRef,
+		children: [/* @__PURE__ */ jsx(CommandEmpty, {
+			className: cn("h-full p-1"),
+			children: renderOption ? renderOption(defaultOption, {
+				asPlaceholder: true,
+				showValue: true,
+				className: cn("pb-0")
+			}) : /* @__PURE__ */ jsx(IdAutocompleteListOption, {
+				variant,
+				icon: defaultOption.icon,
+				title: defaultOption.title,
+				path: defaultOption.path,
+				value: defaultOption.value,
+				description: defaultOption.description,
+				asPlaceholder: true,
+				className: cn("pb-0")
+			})
+		}), /* @__PURE__ */ jsx(CommandGroup, {
+			className: cn("px-1"),
+			children: options.map((opt) => {
+				const isSelected = selectedValue === opt.value;
+				return /* @__PURE__ */ jsx(CommandItem, {
+					value: opt.value,
+					onSelect: () => toggleOption?.(opt.value),
+					className: cn("h-full cursor-pointer border-y-0 p-0", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900"),
+					role: "option",
+					"aria-selected": isSelected,
+					children: renderOption ? renderOption(opt, {
+						asPlaceholder: false,
+						showValue: true
+					}) : /* @__PURE__ */ jsx(IdAutocompleteListOption, {
+						variant,
+						...opt
+					})
+				}, opt.value);
+			})
+		})]
+	});
+};
+//#endregion
+export { IdAutocompleteList };
+
+//# sourceMappingURL=id-autocomplete-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"id-autocomplete-list.js","names":[],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete-list.tsx"],"sourcesContent":["import { cn } from \"@powerhousedao/design-system\";\nimport { useCommandState } from \"cmdk\";\nimport React, { useEffect } from \"react\";\nimport {\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"../command/command.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport type { IdAutocompleteOption, IdAutocompleteProps } from \"./types.js\";\n\ninterface IdAutocompleteListProps {\n  variant: IdAutocompleteProps[\"variant\"];\n  commandListRef?: React.RefObject<HTMLDivElement | null>;\n  selectedValue?: string;\n  options?: IdAutocompleteOption[];\n  toggleOption?: (value: string) => void;\n  renderOption?: (\n    option: IdAutocompleteOption,\n    displayProps?: {\n      asPlaceholder?: boolean;\n      showValue?: boolean;\n      isLoadingSelectedOption?: boolean;\n      handleFetchSelectedOption?: (value: string) => void;\n      className?: string;\n    },\n  ) => React.ReactNode;\n  previewPlaceholder?: IdAutocompleteOption;\n}\n\nconst IdAutocompleteList: React.FC<IdAutocompleteListProps> = ({\n  variant,\n  commandListRef,\n  selectedValue,\n  options = [],\n  toggleOption,\n  renderOption,\n  previewPlaceholder,\n}) => {\n  const cmdkSearch = useCommandState((state) => state.search);\n  const defaultOption: IdAutocompleteOption = previewPlaceholder || {\n    value: \"value not available\",\n    title: \"Title not available\",\n    path: \"Path not available\",\n    description: \"Description not available\",\n  };\n\n  useEffect(() => {\n    commandListRef?.current?.scrollTo({ top: 0, behavior: \"instant\" });\n  }, [commandListRef, cmdkSearch]);\n\n  return (\n    <CommandList ref={commandListRef}>\n      <CommandEmpty className={cn(\"h-full p-1\")}>\n        {renderOption ? (\n          renderOption(defaultOption, {\n            asPlaceholder: true,\n            showValue: true,\n            className: cn(\"pb-0\"),\n          })\n        ) : (\n          <IdAutocompleteListOption\n            variant={variant}\n            icon={defaultOption.icon}\n            title={defaultOption.title}\n            path={defaultOption.path}\n            value={defaultOption.value}\n            description={defaultOption.description}\n            asPlaceholder\n            className={cn(\"pb-0\")}\n          />\n        )}\n      </CommandEmpty>\n      <CommandGroup className={cn(\"px-1\")}>\n        {options.map((opt) => {\n          const isSelected = selectedValue === opt.value;\n\n          return (\n            <CommandItem\n              key={opt.value}\n              value={opt.value}\n              onSelect={() => toggleOption?.(opt.value)}\n              className={cn(\n                \"h-full cursor-pointer border-y-0 p-0\",\n                \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900\",\n              )}\n              role=\"option\"\n              aria-selected={isSelected}\n            >\n              {renderOption ? (\n                renderOption(opt, {\n                  asPlaceholder: false,\n                  showValue: true,\n                })\n              ) : (\n                <IdAutocompleteListOption variant={variant} {...opt} />\n              )}\n            </CommandItem>\n          );\n        })}\n      </CommandGroup>\n    </CommandList>\n  );\n};\n\nexport { IdAutocompleteList, type IdAutocompleteListProps };\n"],"mappings":";;;;;;;AA+BA,MAAM,sBAAyD,EAC7D,SACA,gBACA,eACA,UAAU,EAAE,EACZ,cACA,cACA,yBACI;CACJ,MAAM,aAAa,iBAAiB,UAAU,MAAM,OAAO;CAC3D,MAAM,gBAAsC,sBAAsB;EAChE,OAAO;EACP,OAAO;EACP,MAAM;EACN,aAAa;EACd;AAED,iBAAgB;AACd,kBAAgB,SAAS,SAAS;GAAE,KAAK;GAAG,UAAU;GAAW,CAAC;IACjE,CAAC,gBAAgB,WAAW,CAAC;AAEhC,QACE,qBAAC,aAAD;EAAa,KAAK;YAAlB,CACE,oBAAC,cAAD;GAAc,WAAW,GAAG,aAAa;aACtC,eACC,aAAa,eAAe;IAC1B,eAAe;IACf,WAAW;IACX,WAAW,GAAG,OAAO;IACtB,CAAC,GAEF,oBAAC,0BAAD;IACW;IACT,MAAM,cAAc;IACpB,OAAO,cAAc;IACrB,MAAM,cAAc;IACpB,OAAO,cAAc;IACrB,aAAa,cAAc;IAC3B,eAAA;IACA,WAAW,GAAG,OAAO;IACrB,CAAA;GAES,CAAA,EACf,oBAAC,cAAD;GAAc,WAAW,GAAG,OAAO;aAChC,QAAQ,KAAK,QAAQ;IACpB,MAAM,aAAa,kBAAkB,IAAI;AAEzC,WACE,oBAAC,aAAD;KAEE,OAAO,IAAI;KACX,gBAAgB,eAAe,IAAI,MAAM;KACzC,WAAW,GACT,wCACA,yEACD;KACD,MAAK;KACL,iBAAe;eAEd,eACC,aAAa,KAAK;MAChB,eAAe;MACf,WAAW;MACZ,CAAC,GAEF,oBAAC,0BAAD;MAAmC;MAAS,GAAI;MAAO,CAAA;KAE7C,EAlBP,IAAI,MAkBG;KAEhB;GACW,CAAA,CACH"}

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

@@ -0,0 +1,2 @@
+import { t as IdAutocomplete } from "../../../id-autocomplete-DIGGsygz.js";
+export { IdAutocomplete };

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

@@ -0,0 +1,174 @@
+import { FormLabel } from "../form-label/form-label.js";
+import { FormMessageList } from "../form-message/message-list.js";
+import { FormDescription } from "../form-description/form-description.js";
+import { FormGroup } from "../form-group/form-group.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../popover/popover.js";
+import { Input } from "../input/input.js";
+import { ValueTransformer } from "../value-transformer/value-transformer.js";
+import { IdAutocompleteInputContainer } from "./id-autocomplete-input-container.js";
+import { IdAutocompleteListOption } from "./id-autocomplete-list-option.js";
+import { IdAutocompleteList } from "./id-autocomplete-list.js";
+import { useIdAutocomplete } from "./use-id-autocomplete.js";
+import React, { useId, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@powerhousedao/design-system";
+import { Command } from "cmdk";
+import { sharedValueTransformers } from "@powerhousedao/design-system/ui/lib";
+//#region src/ui/components/id-autocomplete/id-autocomplete.tsx
+const IdAutocomplete = React.forwardRef(({ id: idProp, name, className, label, description, value, defaultValue, disabled, placeholder, required, errors, warnings, onChange, onBlur, onClick, onKeyDown, onMouseDown, autoComplete = true, variant = "withValue", maxLength, fetchOptionsCallback, fetchSelectedOptionCallback, isOpenByDefault, initialOptions, renderOption, previewPlaceholder, ...props }, ref) => {
+	const prefix = useId();
+	const id = idProp ?? `${prefix}-id-autocomplete`;
+	const inputRef = useRef(null);
+	const mergedRef = (node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const hasWarning = Array.isArray(warnings) && warnings.length > 0;
+	const hasError = Array.isArray(errors) && errors.length > 0;
+	const { selectedValue, selectedOption, isPopoverOpen, commandListRef, options, isLoading, isLoadingSelectedOption, haveFetchError, commandValue, isFetchSelectedOptionSync, toggleOption, handleOpenChange, onTriggerBlur, handleChange, handleCommandValue, handleFetchSelectedOption, handlePaste } = useIdAutocomplete({
+		autoComplete,
+		defaultValue,
+		value,
+		isOpenByDefault,
+		initialOptions,
+		onChange,
+		onBlur,
+		fetchOptions: fetchOptionsCallback,
+		fetchSelectedOption: fetchSelectedOptionCallback
+	});
+	const handleOptionSelection = (optionValue) => {
+		toggleOption(optionValue);
+		inputRef.current?.focus();
+	};
+	const asCard = variant === "withValueAndTitle" || variant === "withValueTitleAndDescription";
+	const transformers = useMemo(() => [sharedValueTransformers.trimOnBlur(), sharedValueTransformers.trimOnEnter()], []);
+	return /* @__PURE__ */ jsxs(FormGroup, { children: [
+		!!label && /* @__PURE__ */ jsx(FormLabel, {
+			htmlFor: id,
+			disabled,
+			hasError,
+			required,
+			onClick: (e) => {
+				e.preventDefault();
+				e.target.control?.focus();
+			},
+			children: label
+		}),
+		autoComplete && fetchOptionsCallback ? /* @__PURE__ */ jsx(Popover, {
+			open: isPopoverOpen,
+			onOpenChange: handleOpenChange,
+			children: /* @__PURE__ */ jsxs(Command, {
+				shouldFilter: false,
+				value: commandValue,
+				onValueChange: handleCommandValue,
+				className: cn("dark:bg-charcoal-900 bg-gray-100"),
+				children: [
+					/* @__PURE__ */ jsx(PopoverAnchor, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IdAutocompleteInputContainer, {
+							id,
+							name,
+							value: selectedValue,
+							className,
+							isLoading,
+							haveFetchError,
+							disabled,
+							onChange: handleChange,
+							onBlur: onTriggerBlur,
+							onClick,
+							selectedOption,
+							optionsLength: options.length,
+							handleOpenChange,
+							onKeyDown,
+							onMouseDown,
+							placeholder,
+							hasError,
+							label,
+							required,
+							isPopoverOpen,
+							maxLength,
+							handlePaste,
+							...props,
+							ref: mergedRef
+						})
+					}),
+					asCard && (renderOption ? renderOption(selectedOption === void 0 && previewPlaceholder ? { ...previewPlaceholder } : {
+						...selectedOption,
+						value: selectedOption?.value ?? ""
+					}, {
+						asPlaceholder: selectedOption === void 0,
+						showValue: false,
+						isLoadingSelectedOption,
+						handleFetchSelectedOption: fetchSelectedOptionCallback ? handleFetchSelectedOption : void 0,
+						isFetchSelectedOptionSync,
+						className: cn("rounded-t-none pt-2")
+					}) : /* @__PURE__ */ jsx(IdAutocompleteListOption, {
+						variant,
+						icon: selectedOption?.icon ?? previewPlaceholder?.icon,
+						title: selectedOption?.title ?? previewPlaceholder?.title,
+						path: selectedOption?.path ?? previewPlaceholder?.path,
+						value: selectedOption?.value ?? previewPlaceholder?.value ?? "",
+						description: selectedOption?.description ?? previewPlaceholder?.description,
+						asPlaceholder: selectedOption === void 0,
+						showValue: false,
+						isLoadingSelectedOption,
+						handleFetchSelectedOption: fetchSelectedOptionCallback ? handleFetchSelectedOption : void 0,
+						isFetchSelectedOptionSync,
+						className: cn("rounded-t-none pt-2")
+					})),
+					/* @__PURE__ */ jsx(PopoverContent, {
+						align: "start",
+						onOpenAutoFocus: (e) => e.preventDefault(),
+						onInteractOutside: (e) => {
+							if (e.target instanceof Element && e.target.id === id) e.preventDefault();
+						},
+						children: /* @__PURE__ */ jsx(IdAutocompleteList, {
+							variant,
+							commandListRef,
+							selectedValue,
+							options,
+							toggleOption: handleOptionSelection,
+							renderOption,
+							previewPlaceholder
+						})
+					})
+				]
+			})
+		}) : /* @__PURE__ */ jsx(ValueTransformer, {
+			transformers,
+			children: /* @__PURE__ */ jsx(Input, {
+				id,
+				name,
+				value: selectedValue,
+				className,
+				disabled,
+				onChange: handleChange,
+				onBlur,
+				onClick,
+				onMouseDown,
+				placeholder,
+				"aria-invalid": hasError,
+				"aria-label": !label ? "Id Autocomplete" : void 0,
+				"aria-required": required,
+				maxLength,
+				...props,
+				ref: mergedRef
+			})
+		}),
+		!!description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+		hasWarning && /* @__PURE__ */ jsx(FormMessageList, {
+			messages: warnings,
+			type: "warning"
+		}),
+		hasError && /* @__PURE__ */ jsx(FormMessageList, {
+			messages: errors,
+			type: "error"
+		})
+	] });
+});
+IdAutocomplete.displayName = "IdAutocomplete";
+//#endregion
+export { IdAutocomplete };
+
+//# sourceMappingURL=id-autocomplete.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"id-autocomplete.js","names":[],"sources":["../../../../src/ui/components/id-autocomplete/id-autocomplete.tsx"],"sourcesContent":["import type { TransformerType } from \"@powerhousedao/design-system\";\nimport { cn } from \"@powerhousedao/design-system\";\nimport { sharedValueTransformers } from \"@powerhousedao/design-system/ui/lib\";\nimport { Command } from \"cmdk\";\nimport React, { useId, useMemo, useRef } from \"react\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Input } from \"../input/input.js\";\nimport { Popover, PopoverAnchor, PopoverContent } from \"../popover/popover.js\";\nimport { ValueTransformer } from \"../value-transformer/value-transformer.js\";\nimport { IdAutocompleteInputContainer } from \"./id-autocomplete-input-container.js\";\nimport { IdAutocompleteListOption } from \"./id-autocomplete-list-option.js\";\nimport { IdAutocompleteList } from \"./id-autocomplete-list.js\";\nimport type { IdAutocompleteProps } from \"./types.js\";\nimport { useIdAutocomplete } from \"./use-id-autocomplete.js\";\n\nconst IdAutocomplete = React.forwardRef<HTMLInputElement, IdAutocompleteProps>(\n  (\n    {\n      id: idProp,\n      name,\n      className,\n      label,\n      description,\n      value,\n      defaultValue,\n      disabled,\n      placeholder,\n      required,\n      errors,\n      warnings,\n      onChange,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onMouseDown,\n      autoComplete = true,\n      variant = \"withValue\",\n      maxLength,\n      fetchOptionsCallback,\n      fetchSelectedOptionCallback,\n      isOpenByDefault, // to be used only in stories\n      initialOptions,\n      renderOption,\n      previewPlaceholder,\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = idProp ?? `${prefix}-id-autocomplete`;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const mergedRef = (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    };\n\n    const hasWarning = Array.isArray(warnings) && warnings.length > 0;\n    const hasError = Array.isArray(errors) && errors.length > 0;\n\n    const {\n      selectedValue,\n      selectedOption,\n      isPopoverOpen,\n      commandListRef,\n      options,\n      isLoading,\n      isLoadingSelectedOption,\n      haveFetchError,\n      commandValue,\n      isFetchSelectedOptionSync,\n      toggleOption,\n      handleOpenChange,\n      onTriggerBlur,\n      handleChange,\n      handleCommandValue,\n      handleFetchSelectedOption,\n      handlePaste,\n    } = useIdAutocomplete({\n      autoComplete,\n      defaultValue,\n      value,\n      isOpenByDefault,\n      initialOptions,\n      onChange,\n      onBlur,\n      fetchOptions: fetchOptionsCallback,\n      fetchSelectedOption: fetchSelectedOptionCallback,\n    });\n\n    const handleOptionSelection = (optionValue: string) => {\n      toggleOption(optionValue);\n      inputRef.current?.focus();\n    };\n\n    const asCard =\n      variant === \"withValueAndTitle\" ||\n      variant === \"withValueTitleAndDescription\";\n\n    const transformers: TransformerType = useMemo(\n      () => [\n        sharedValueTransformers.trimOnBlur(),\n        sharedValueTransformers.trimOnEnter(),\n      ],\n      [],\n    );\n\n    return (\n      <FormGroup>\n        {!!label && (\n          <FormLabel\n            htmlFor={id}\n            disabled={disabled}\n            hasError={hasError}\n            required={required}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {autoComplete && fetchOptionsCallback ? (\n          <Popover open={isPopoverOpen} onOpenChange={handleOpenChange}>\n            <Command\n              shouldFilter={false}\n              value={commandValue}\n              onValueChange={handleCommandValue}\n              className={cn(\"dark:bg-charcoal-900 bg-gray-100\")}\n            >\n              <PopoverAnchor asChild={true}>\n                <IdAutocompleteInputContainer\n                  id={id}\n                  name={name}\n                  value={selectedValue}\n                  className={className}\n                  isLoading={isLoading}\n                  haveFetchError={haveFetchError}\n                  disabled={disabled}\n                  onChange={handleChange}\n                  onBlur={onTriggerBlur}\n                  onClick={onClick}\n                  selectedOption={selectedOption}\n                  optionsLength={options.length}\n                  handleOpenChange={handleOpenChange}\n                  onKeyDown={onKeyDown}\n                  onMouseDown={onMouseDown}\n                  placeholder={placeholder}\n                  hasError={hasError}\n                  label={label}\n                  required={required}\n                  isPopoverOpen={isPopoverOpen}\n                  maxLength={maxLength}\n                  handlePaste={handlePaste}\n                  {...props}\n                  ref={mergedRef}\n                />\n              </PopoverAnchor>\n              {asCard &&\n                (renderOption ? (\n                  renderOption(\n                    selectedOption === undefined && previewPlaceholder\n                      ? {\n                          ...previewPlaceholder,\n                        }\n                      : {\n                          ...selectedOption,\n                          value: selectedOption?.value ?? \"\",\n                        },\n                    {\n                      asPlaceholder: selectedOption === undefined,\n                      showValue: false,\n                      isLoadingSelectedOption,\n                      handleFetchSelectedOption: fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined,\n                      isFetchSelectedOptionSync,\n                      className: cn(\"rounded-t-none pt-2\"),\n                    },\n                  )\n                ) : (\n                  <IdAutocompleteListOption\n                    variant={variant}\n                    icon={selectedOption?.icon ?? previewPlaceholder?.icon}\n                    title={selectedOption?.title ?? previewPlaceholder?.title}\n                    path={selectedOption?.path ?? previewPlaceholder?.path}\n                    value={\n                      selectedOption?.value ?? previewPlaceholder?.value ?? \"\"\n                    }\n                    description={\n                      selectedOption?.description ??\n                      previewPlaceholder?.description\n                    }\n                    asPlaceholder={selectedOption === undefined}\n                    showValue={false}\n                    isLoadingSelectedOption={isLoadingSelectedOption}\n                    handleFetchSelectedOption={\n                      fetchSelectedOptionCallback\n                        ? handleFetchSelectedOption\n                        : undefined\n                    }\n                    isFetchSelectedOptionSync={isFetchSelectedOptionSync}\n                    className={cn(\"rounded-t-none pt-2\")}\n                  />\n                ))}\n              <PopoverContent\n                align=\"start\"\n                onOpenAutoFocus={(e) => e.preventDefault()}\n                onInteractOutside={(e) => {\n                  if (e.target instanceof Element && e.target.id === id) {\n                    e.preventDefault();\n                  }\n                }}\n              >\n                <IdAutocompleteList\n                  variant={variant}\n                  commandListRef={commandListRef}\n                  selectedValue={selectedValue}\n                  options={options}\n                  toggleOption={handleOptionSelection}\n                  renderOption={renderOption}\n                  previewPlaceholder={previewPlaceholder}\n                />\n              </PopoverContent>\n            </Command>\n          </Popover>\n        ) : (\n          <ValueTransformer transformers={transformers}>\n            <Input\n              id={id}\n              name={name}\n              value={selectedValue}\n              className={className}\n              disabled={disabled}\n              onChange={handleChange}\n              onBlur={onBlur}\n              onClick={onClick}\n              onMouseDown={onMouseDown}\n              placeholder={placeholder}\n              aria-invalid={hasError}\n              aria-label={!label ? \"Id Autocomplete\" : undefined}\n              aria-required={required}\n              maxLength={maxLength}\n              {...props}\n              ref={mergedRef}\n            />\n          </ValueTransformer>\n        )}\n        {!!description && <FormDescription>{description}</FormDescription>}\n        {hasWarning && <FormMessageList messages={warnings} type=\"warning\" />}\n        {hasError && <FormMessageList messages={errors} type=\"error\" />}\n      </FormGroup>\n    );\n  },\n);\n\nIdAutocomplete.displayName = \"IdAutocomplete\";\n\nexport { IdAutocomplete };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { v as IdAutocompleteOption, y as IdAutocompleteProps } from "../../../types-3mr6QGjQ.js";
+export { IdAutocompleteOption, IdAutocompleteProps };

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

@@ -0,0 +1,2 @@
+import { t as useIdAutocomplete } from "../../../use-id-autocomplete-kJDNgDDE.js";
+export { useIdAutocomplete };