@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Form/ControlledImage/index.d.ts

@@ -0,0 +1,33 @@
+import { TImageAiReviewHandler } from '../../UI/ImageAiAdjust/imageAiReview';
+import { TImageAiAdjuster } from '../../UI/ImageAiAdjust/useImageAiAdjust';
+export interface IControlledImageAiAdjust {
+    adjustImage: TImageAiAdjuster;
+    /** Receives the adjusted image; resolving closes the dialog, throwing keeps it open. */
+    onAdjusted: (file: File) => Promise<void> | void;
+    /** Associates the generation with a product when the surface knows one. */
+    productId?: string;
+    /** Receives approve/discard feedback when the adjuster returns a generationId. */
+    onReviewResult?: TImageAiReviewHandler;
+}
+interface IControlledImageProps {
+    src: string | null | undefined;
+    fallbackSrc?: string;
+    className?: string;
+    tooltip?: string;
+    onClickHook?: () => void;
+    /**
+     * Opts into the annotation flow (pencil overlay + editor). Hosts own what happens to the
+     * annotated file, so enabling it here never conflicts with other image click behaviors.
+     */
+    annotatable?: boolean;
+    /** Receives the annotated image; resolving closes the editor, throwing keeps it open. */
+    onAnnotated?: (file: File) => Promise<void> | void;
+    annotationFileName?: string;
+    /**
+     * Opts into the AI adjustment flow. Sibling of `annotatable`, same contract: the host owns the
+     * resulting file, and decides whether the feature is available at all.
+     */
+    aiAdjust?: IControlledImageAiAdjust;
+}
+declare const ControlledImage: React.FC<IControlledImageProps>;
+export default ControlledImage;

package/dist/components/Form/ControlledImage/index.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { lazy, useState, Suspense } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledTooltip from "../../UI/ControlledTooltip.js";
+import ImagePlaceholder from "../../UI/ImagePlaceholder.js";
+import ControlledButton from "../ControlledButton.js";
+import LoadingSpinner from "../../UI/LoadingSpinner.js";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+import Img from "./Img.js";
+const ImageAnnotationDialog = lazy(() => import("../../UI/ImageAnnotator/ImageAnnotationDialog.js"));
+const ImageAiAdjustDialog = lazy(() => import("../../UI/ImageAiAdjust/ImageAiAdjustDialog.js"));
+const ControlledImageContent = ({
+  src,
+  fallbackSrc,
+  className,
+  tooltip,
+  onClickHook,
+  annotatable = false,
+  onAnnotated,
+  annotationFileName,
+  aiAdjust
+}) => {
+  const { t } = useTranslation("ui");
+  const [annotatorOpen, setAnnotatorOpen] = useState(false);
+  const [aiAdjustOpen, setAiAdjustOpen] = useState(false);
+  const renderImage = () => {
+    if (!src) return /* @__PURE__ */ jsx(ImagePlaceholder, { className });
+    return /* @__PURE__ */ jsx(
+      Img,
+      {
+        onClick: onClickHook,
+        src,
+        fallbackSrc,
+        className,
+        loader: /* @__PURE__ */ jsx("div", { className: classNames("flex size-full items-center justify-center bg-muted", className), children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 6 }) }),
+        unloader: /* @__PURE__ */ jsx(ImagePlaceholder, { variant: "broken", className })
+      },
+      src
+    );
+  };
+  const image = tooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: tooltip, children: renderImage() }) : renderImage();
+  const showAnnotate = annotatable && Boolean(onAnnotated) && Boolean(src);
+  const showAiAdjust = Boolean(aiAdjust) && Boolean(src);
+  if (!src || !showAnnotate && !showAiAdjust) return image;
+  const overlayButtonClass = "flex size-8 items-center justify-center rounded-full bg-scrim text-white transition-colors glass-tint hover:bg-scrim";
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex max-w-full", children: [
+    image,
+    /* @__PURE__ */ jsxs("span", { className: "absolute right-2 top-2 flex items-center gap-x-1", children: [
+      showAnnotate && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("imageAnnotator.annotate"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t("imageAnnotator.annotate"),
+          defaultHtmlButton: true,
+          onClick: (event) => {
+            event.stopPropagation();
+            setAnnotatorOpen(true);
+          },
+          className: overlayButtonClass,
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "edit", size: 16, color: "white" })
+        }
+      ) }),
+      showAiAdjust && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("imageAiAdjust.action"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t("imageAiAdjust.action"),
+          defaultHtmlButton: true,
+          onClick: (event) => {
+            event.stopPropagation();
+            setAiAdjustOpen(true);
+          },
+          className: overlayButtonClass,
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "auto_fix_high", size: 16, color: "white" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+      annotatorOpen && onAnnotated && /* @__PURE__ */ jsx(
+        ImageAnnotationDialog,
+        {
+          open: annotatorOpen,
+          imageUrl: src,
+          imageName: annotationFileName,
+          onClose: () => setAnnotatorOpen(false),
+          onSave: onAnnotated
+        }
+      ),
+      aiAdjustOpen && aiAdjust && /* @__PURE__ */ jsx(
+        ImageAiAdjustDialog,
+        {
+          open: aiAdjustOpen,
+          imageUrl: src,
+          imageName: annotationFileName,
+          productId: aiAdjust.productId,
+          adjustImage: aiAdjust.adjustImage,
+          onClose: () => setAiAdjustOpen(false),
+          onSave: aiAdjust.onAdjusted,
+          onReviewResult: aiAdjust.onReviewResult
+        }
+      )
+    ] })
+  ] });
+};
+const ControlledImage = (props) => {
+  return /* @__PURE__ */ jsx(ControlledImageContent, { ...props });
+};
+export {
+  ControlledImage as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Form/ControlledImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/ControlledImage/index.tsx"],"sourcesContent":["import { lazy, Suspense, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { TImageAiReviewHandler } from '@/components/UI/ImageAiAdjust/imageAiReview';\nimport { TImageAiAdjuster } from '@/components/UI/ImageAiAdjust/useImageAiAdjust';\nimport ImagePlaceholder from '@/components/UI/ImagePlaceholder';\n\nimport ControlledButton from '../../Form/ControlledButton';\nimport LoadingSpinner from '../../UI/LoadingSpinner';\nimport { MaterialSymbol } from '../../UI/MaterialSymbol';\n\nimport Img from './Img';\n\n/**\n * Lazy por dois motivos: quebra o ciclo de import (o diálogo de IA renderiza um\n * `ControlledImage` no comparativo) e mantém os dois editores fora do bundle de quem só\n * exibe imagem, que é quase toda a aplicação.\n */\nconst ImageAnnotationDialog = lazy(() => import('@/components/UI/ImageAnnotator/ImageAnnotationDialog'));\nconst ImageAiAdjustDialog = lazy(() => import('@/components/UI/ImageAiAdjust/ImageAiAdjustDialog'));\n\nexport interface IControlledImageAiAdjust {\n  adjustImage: TImageAiAdjuster;\n  /** Receives the adjusted image; resolving closes the dialog, throwing keeps it open. */\n  onAdjusted: (file: File) => Promise<void> | void;\n  /** Associates the generation with a product when the surface knows one. */\n  productId?: string;\n  /** Receives approve/discard feedback when the adjuster returns a generationId. */\n  onReviewResult?: TImageAiReviewHandler;\n}\n\ninterface IControlledImageProps {\n  src: string | null | undefined;\n  fallbackSrc?: string;\n  className?: string;\n  tooltip?: string;\n  onClickHook?: () => void;\n  /**\n   * Opts into the annotation flow (pencil overlay + editor). Hosts own what happens to the\n   * annotated file, so enabling it here never conflicts with other image click behaviors.\n   */\n  annotatable?: boolean;\n  /** Receives the annotated image; resolving closes the editor, throwing keeps it open. */\n  onAnnotated?: (file: File) => Promise<void> | void;\n  annotationFileName?: string;\n  /**\n   * Opts into the AI adjustment flow. Sibling of `annotatable`, same contract: the host owns the\n   * resulting file, and decides whether the feature is available at all.\n   */\n  aiAdjust?: IControlledImageAiAdjust;\n}\n\nconst ControlledImageContent: React.FC<IControlledImageProps> = ({\n  src,\n  fallbackSrc,\n  className,\n  tooltip,\n  onClickHook,\n  annotatable = false,\n  onAnnotated,\n  annotationFileName,\n  aiAdjust,\n}) => {\n  const { t } = useTranslation('ui');\n  const [annotatorOpen, setAnnotatorOpen] = useState(false);\n  const [aiAdjustOpen, setAiAdjustOpen] = useState(false);\n\n  const renderImage = () => {\n    if (!src) return <ImagePlaceholder className={className} />;\n\n    return (\n      <Img\n        onClick={onClickHook}\n        key={src}\n        src={src}\n        fallbackSrc={fallbackSrc}\n        className={className}\n        loader={\n          <div className={classNames('flex size-full items-center justify-center bg-muted', className)}>\n            <LoadingSpinner size={6} />\n          </div>\n        }\n        unloader={<ImagePlaceholder variant=\"broken\" className={className} />}\n      />\n    );\n  };\n\n  const image = tooltip ? <ControlledTooltip content={tooltip}>{renderImage()}</ControlledTooltip> : renderImage();\n\n  const showAnnotate = annotatable && Boolean(onAnnotated) && Boolean(src);\n  const showAiAdjust = Boolean(aiAdjust) && Boolean(src);\n\n  if (!src || (!showAnnotate && !showAiAdjust)) return image;\n\n  const overlayButtonClass =\n    'flex size-8 items-center justify-center rounded-full bg-scrim text-white transition-colors glass-tint hover:bg-scrim';\n\n  return (\n    <span className=\"relative inline-flex max-w-full\">\n      {image}\n\n      <span className=\"absolute right-2 top-2 flex items-center gap-x-1\">\n        {showAnnotate && (\n          <ControlledTooltip content={t('imageAnnotator.annotate')} className=\"z-[9999]\">\n            <ControlledButton\n              aria-label={t('imageAnnotator.annotate')}\n              defaultHtmlButton\n              onClick={(event: React.MouseEvent) => {\n                event.stopPropagation();\n                setAnnotatorOpen(true);\n              }}\n              className={overlayButtonClass}\n            >\n              <MaterialSymbol icon=\"edit\" size={16} color=\"white\" />\n            </ControlledButton>\n          </ControlledTooltip>\n        )}\n\n        {showAiAdjust && (\n          <ControlledTooltip content={t('imageAiAdjust.action')} className=\"z-[9999]\">\n            <ControlledButton\n              aria-label={t('imageAiAdjust.action')}\n              defaultHtmlButton\n              onClick={(event: React.MouseEvent) => {\n                event.stopPropagation();\n                setAiAdjustOpen(true);\n              }}\n              className={overlayButtonClass}\n            >\n              <MaterialSymbol icon=\"auto_fix_high\" size={16} color=\"white\" />\n            </ControlledButton>\n          </ControlledTooltip>\n        )}\n      </span>\n\n      <Suspense fallback={null}>\n        {annotatorOpen && onAnnotated && (\n          <ImageAnnotationDialog\n            open={annotatorOpen}\n            imageUrl={src}\n            imageName={annotationFileName}\n            onClose={() => setAnnotatorOpen(false)}\n            onSave={onAnnotated}\n          />\n        )}\n\n        {aiAdjustOpen && aiAdjust && (\n          <ImageAiAdjustDialog\n            open={aiAdjustOpen}\n            imageUrl={src}\n            imageName={annotationFileName}\n            productId={aiAdjust.productId}\n            adjustImage={aiAdjust.adjustImage}\n            onClose={() => setAiAdjustOpen(false)}\n            onSave={aiAdjust.onAdjusted}\n            onReviewResult={aiAdjust.onReviewResult}\n          />\n        )}\n      </Suspense>\n    </span>\n  );\n};\n\nconst ControlledImage: React.FC<IControlledImageProps> = (props) => {\n  return <ControlledImageContent {...props} />;\n};\n\nexport default ControlledImage;\n"],"names":[],"mappings":";;;;;;;;;;AAoBA,MAAM,wBAAwB,KAAK,MAAM,OAAO,kDAAsD,CAAC;AACvG,MAAM,sBAAsB,KAAK,MAAM,OAAO,+CAAmD,CAAC;AAiClG,MAAM,yBAA0D,CAAC;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,IAAK,QAAO,oBAAC,oBAAiB,UAAA,CAAsB;AAEzD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QAET;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,oBAAC,OAAA,EAAI,WAAW,WAAW,uDAAuD,SAAS,GACzF,UAAA,oBAAC,gBAAA,EAAe,MAAM,EAAA,CAAG,GAC3B;AAAA,QAEF,UAAU,oBAAC,kBAAA,EAAiB,SAAQ,UAAS,UAAA,CAAsB;AAAA,MAAA;AAAA,MAT9D;AAAA,IAAA;AAAA,EAYX;AAEA,QAAM,QAAQ,UAAU,oBAAC,mBAAA,EAAkB,SAAS,SAAU,UAAA,cAAY,CAAE,IAAuB,YAAA;AAEnG,QAAM,eAAe,eAAe,QAAQ,WAAW,KAAK,QAAQ,GAAG;AACvE,QAAM,eAAe,QAAQ,QAAQ,KAAK,QAAQ,GAAG;AAErD,MAAI,CAAC,OAAQ,CAAC,gBAAgB,CAAC,aAAe,QAAO;AAErD,QAAM,qBACJ;AAEF,SACE,qBAAC,QAAA,EAAK,WAAU,mCACb,UAAA;AAAA,IAAA;AAAA,IAED,qBAAC,QAAA,EAAK,WAAU,oDACb,UAAA;AAAA,MAAA,oCACE,mBAAA,EAAkB,SAAS,EAAE,yBAAyB,GAAG,WAAU,YAClE,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAY,EAAE,yBAAyB;AAAA,UACvC,mBAAiB;AAAA,UACjB,SAAS,CAAC,UAA4B;AACpC,kBAAM,gBAAA;AACN,6BAAiB,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UAEX,8BAAC,gBAAA,EAAe,MAAK,QAAO,MAAM,IAAI,OAAM,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA,GAExD;AAAA,MAGD,oCACE,mBAAA,EAAkB,SAAS,EAAE,sBAAsB,GAAG,WAAU,YAC/D,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,mBAAiB;AAAA,UACjB,SAAS,CAAC,UAA4B;AACpC,kBAAM,gBAAA;AACN,4BAAgB,IAAI;AAAA,UACtB;AAAA,UACA,WAAW;AAAA,UAEX,8BAAC,gBAAA,EAAe,MAAK,iBAAgB,MAAM,IAAI,OAAM,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA,EAC/D,CACF;AAAA,IAAA,GAEJ;AAAA,IAEA,qBAAC,UAAA,EAAS,UAAU,MACjB,UAAA;AAAA,MAAA,iBAAiB,eAChB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU;AAAA,UACV,WAAW;AAAA,UACX,SAAS,MAAM,iBAAiB,KAAK;AAAA,UACrC,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAIX,gBAAgB,YACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU;AAAA,UACV,WAAW;AAAA,UACX,WAAW,SAAS;AAAA,UACpB,aAAa,SAAS;AAAA,UACtB,SAAS,MAAM,gBAAgB,KAAK;AAAA,UACpC,QAAQ,SAAS;AAAA,UACjB,gBAAgB,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3B,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,kBAAmD,CAAC,UAAU;AAClE,SAAO,oBAAC,wBAAA,EAAwB,GAAG,MAAA,CAAO;AAC5C;"}

package/dist/components/Form/ControlledImage/useImage.d.ts

@@ -0,0 +1,9 @@
+type TUseImageProps = {
+    srcParam: string;
+    decode: boolean;
+};
+export default function useImage({ srcParam, decode }: TUseImageProps): {
+    src: string | undefined;
+    isLoading: boolean;
+};
+export {};

package/dist/components/Form/ControlledImage/useImage.js

@@ -0,0 +1,110 @@
+import { useState, useEffect } from "react";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+const cache = {};
+const RETRY_DELAYS_MS = [500, 1500, 3e3];
+const isLocalSource = (src) => src.startsWith("blob:") || src.startsWith("data:");
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const loadOnce = (src, decode) => new Promise((resolve, reject) => {
+  const newImage = new Image();
+  newImage.onload = async () => {
+    if (decode && newImage.decode) {
+      try {
+        await newImage.decode();
+        resolve(src);
+      } catch (error) {
+        reject(error);
+      }
+      return;
+    }
+    resolve(src);
+  };
+  newImage.onerror = reject;
+  newImage.src = src;
+});
+const createImagePromiseFactory = (decode) => async (src) => {
+  let lastError;
+  for (let attempt = 0; attempt <= RETRY_DELAYS_MS.length; attempt += 1) {
+    try {
+      return await loadOnce(src, decode);
+    } catch (error) {
+      lastError = error;
+      if (attempt < RETRY_DELAYS_MS.length) await delay(RETRY_DELAYS_MS[attempt]);
+    }
+  }
+  throw lastError;
+};
+function normalizeSrcKey(srcParam) {
+  try {
+    if (srcParam.includes("assets")) {
+      return srcParam;
+    }
+    const url = new URL(srcParam);
+    return `${url.protocol}//${url.host}${url.pathname}`;
+  } catch (error) {
+    uiLogger.error("Invalid URL:", srcParam);
+    return srcParam;
+  }
+}
+async function handlePromise(sourceKey, promise, srcParam, forceUpdate) {
+  try {
+    await promise;
+    uiLogger.debug(`Image loaded successfully: ${srcParam}`);
+    cache[sourceKey].cacheStatus = "resolved";
+    cache[sourceKey].src = srcParam;
+    forceUpdate();
+  } catch (error) {
+    uiLogger.error(`Failed to load image: ${srcParam}`, error);
+    cache[sourceKey].cacheStatus = "rejected";
+    forceUpdate();
+  }
+}
+function useImage({ srcParam, decode }) {
+  const [, setForceCountRender] = useState(0);
+  const empty = !srcParam;
+  const local = !empty && isLocalSource(srcParam);
+  const sourceKey = empty || local ? srcParam : normalizeSrcKey(srcParam);
+  useEffect(() => {
+    if (empty || local) return void 0;
+    let active = true;
+    const forceUpdate = () => {
+      if (active) setForceCountRender((count) => count + 1);
+    };
+    const startLoad = () => {
+      const promise = createImagePromiseFactory(decode)(srcParam);
+      cache[sourceKey] = { promise, cacheStatus: "pending" };
+      void handlePromise(sourceKey, promise, srcParam, forceUpdate);
+    };
+    const entry = cache[sourceKey];
+    if (!entry) {
+      startLoad();
+    } else if (entry.cacheStatus === "pending") {
+      void handlePromise(sourceKey, entry.promise, srcParam, forceUpdate);
+    } else if (entry.cacheStatus === "rejected") {
+      startLoad();
+      forceUpdate();
+    } else {
+      forceUpdate();
+    }
+    return () => {
+      active = false;
+    };
+  }, [sourceKey, decode, srcParam, local, empty]);
+  if (empty) return { src: void 0, isLoading: false };
+  if (local) return { src: srcParam, isLoading: false };
+  const cachedEntry = cache[sourceKey];
+  if (cachedEntry) {
+    switch (cachedEntry.cacheStatus) {
+      case "resolved":
+        return { src: cachedEntry.src, isLoading: false };
+      case "pending":
+        return { src: void 0, isLoading: true };
+      case "rejected":
+        return { src: void 0, isLoading: false };
+    }
+  }
+  return { src: void 0, isLoading: true };
+}
+export {
+  useImage as default
+};
+//# sourceMappingURL=useImage.js.map

package/dist/components/Form/ControlledImage/useImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImage.js","sources":["../../../../src/components/Form/ControlledImage/useImage.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { uiLogger } from '@/helpers/uiLogger';\n\ntype TUseImageProps = {\n  srcParam: string;\n  decode: boolean;\n};\n\ninterface ICacheEntry {\n  promise: Promise<string>;\n  cacheStatus: 'pending' | 'resolved' | 'rejected';\n  src?: string;\n}\n\nconst cache: Record<string, ICacheEntry> = {};\n\n// Backoff progressivo: cobre URLs recém-enviadas cujas derivadas de CDN ainda estão sendo geradas.\nconst RETRY_DELAYS_MS = [500, 1500, 3000];\n\n// blob:/data: apontam para bytes locais/embutidos: renderizam direto no <img> sem o preload\n// (que normaliza via new URL() e gera decode(), passos feitos para URLs remotas que quebram nelas).\nconst isLocalSource = (src: string): boolean => src.startsWith('blob:') || src.startsWith('data:');\n\nconst delay = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));\n\nconst loadOnce = (src: string, decode: boolean): Promise<string> =>\n  new Promise((resolve, reject) => {\n    const newImage = new Image();\n\n    newImage.onload = async () => {\n      if (decode && newImage.decode) {\n        try {\n          await newImage.decode();\n          resolve(src);\n        } catch (error) {\n          reject(error);\n        }\n        return;\n      }\n\n      resolve(src);\n    };\n    newImage.onerror = reject;\n    newImage.src = src;\n  });\n\nconst createImagePromiseFactory =\n  (decode: boolean) =>\n  async (src: string): Promise<string> => {\n    let lastError: unknown;\n    for (let attempt = 0; attempt <= RETRY_DELAYS_MS.length; attempt += 1) {\n      try {\n        return await loadOnce(src, decode);\n      } catch (error) {\n        lastError = error;\n        if (attempt < RETRY_DELAYS_MS.length) await delay(RETRY_DELAYS_MS[attempt]);\n      }\n    }\n    throw lastError;\n  };\n\nfunction normalizeSrcKey(srcParam: string): string {\n  try {\n    if (srcParam.includes('assets')) {\n      return srcParam;\n    }\n\n    const url = new URL(srcParam);\n    return `${url.protocol}//${url.host}${url.pathname}`;\n  } catch (error) {\n    uiLogger.error('Invalid URL:', srcParam);\n    return srcParam;\n  }\n}\n\nasync function handlePromise(sourceKey: string, promise: Promise<string>, srcParam: string, forceUpdate: () => void) {\n  try {\n    await promise;\n    uiLogger.debug(`Image loaded successfully: ${srcParam}`);\n    cache[sourceKey].cacheStatus = 'resolved';\n    cache[sourceKey].src = srcParam;\n    forceUpdate();\n  } catch (error) {\n    uiLogger.error(`Failed to load image: ${srcParam}`, error);\n    cache[sourceKey].cacheStatus = 'rejected';\n    forceUpdate();\n  }\n}\n\nexport default function useImage({ srcParam, decode }: TUseImageProps): {\n  src: string | undefined;\n  isLoading: boolean;\n} {\n  const [, setForceCountRender] = useState(0);\n  const empty = !srcParam;\n  const local = !empty && isLocalSource(srcParam);\n  const sourceKey = empty || local ? srcParam : normalizeSrcKey(srcParam);\n\n  useEffect(() => {\n    if (empty || local) return undefined;\n\n    let active = true;\n    const forceUpdate = () => {\n      if (active) setForceCountRender((count) => count + 1);\n    };\n    const startLoad = () => {\n      const promise = createImagePromiseFactory(decode)(srcParam);\n      cache[sourceKey] = { promise, cacheStatus: 'pending' };\n      void handlePromise(sourceKey, promise, srcParam, forceUpdate);\n    };\n    const entry = cache[sourceKey];\n    if (!entry) {\n      startLoad();\n    } else if (entry.cacheStatus === 'pending') {\n      void handlePromise(sourceKey, entry.promise, srcParam, forceUpdate);\n    } else if (entry.cacheStatus === 'rejected') {\n      // Falha não é permanente: um novo mount tenta de novo (ex.: URL que só propagou depois).\n      startLoad();\n      forceUpdate();\n    } else {\n      forceUpdate();\n    }\n    return () => {\n      active = false;\n    };\n  }, [sourceKey, decode, srcParam, local, empty]);\n\n  if (empty) return { src: undefined, isLoading: false };\n  if (local) return { src: srcParam, isLoading: false };\n\n  const cachedEntry = cache[sourceKey];\n\n  if (cachedEntry) {\n    switch (cachedEntry.cacheStatus) {\n      case 'resolved':\n        return { src: cachedEntry.src, isLoading: false };\n      case 'pending':\n        return { src: undefined, isLoading: true };\n      case 'rejected':\n        return { src: undefined, isLoading: false };\n    }\n  }\n\n  return { src: undefined, isLoading: true };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Form/ControlledInput.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+interface IControlledInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'size'> {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    rightSlot?: React.ReactNode;
+    rightSlotClassName?: string;
+    className?: string;
+    containerClassName?: string;
+    /** Reaches the native input, for hosts that must focus or measure it imperatively. */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/**
+ * The label is rendered as the placeholder and as the accessible name, mirroring
+ * ControlledTextarea: a floating label animates onto the border and relies on
+ * pseudo-element border segments to cut a notch, which breaks wherever the border is
+ * overridden. A label that stays once the field is filled is `FieldLabel`, written above it.
+ *
+ * Background, border and focus ring come from the form base layer in index.css, so this
+ * component names no colour for them.
+ */
+declare const ControlledInput: React.FC<IControlledInputProps>;
+export default ControlledInput;

package/dist/components/Form/ControlledInput.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const ControlledInput = ({
+  label,
+  error = false,
+  errorMessage,
+  rightSlot,
+  rightSlotClassName,
+  className,
+  containerClassName,
+  inputRef,
+  placeholder,
+  "aria-label": ariaLabel,
+  ...rest
+}) => /* @__PURE__ */ jsxs("div", { className: mergeClasses("w-full min-w-0", containerClassName), children: [
+  /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        placeholder: placeholder ?? label,
+        "aria-label": ariaLabel ?? label,
+        "aria-invalid": error || void 0,
+        className: mergeClasses(
+          classNames(
+            "w-full min-w-0 rounded-lg border px-3 py-2.5 text-sm text-foreground transition-colors",
+            "placeholder:text-foreground-faint disabled:cursor-not-allowed disabled:bg-muted",
+            { "border-danger focus:border-danger": error, "pr-10": !!rightSlot }
+          ),
+          className
+        ),
+        ...rest
+      }
+    ),
+    rightSlot && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: mergeClasses(
+          "absolute right-3 top-2/4 z-10 flex -translate-y-2/4 items-center gap-x-2",
+          rightSlotClassName
+        ),
+        children: rightSlot
+      }
+    )
+  ] }),
+  error && errorMessage && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-danger-emphasis", children: errorMessage })
+] });
+export {
+  ControlledInput as default
+};
+//# sourceMappingURL=ControlledInput.js.map

package/dist/components/Form/ControlledInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledInput.js","sources":["../../../src/components/Form/ControlledInput.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface IControlledInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'size'> {\n  label?: string;\n  error?: boolean;\n  errorMessage?: string;\n  rightSlot?: React.ReactNode;\n  rightSlotClassName?: string;\n  className?: string;\n  containerClassName?: string;\n  /** Reaches the native input, for hosts that must focus or measure it imperatively. */\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\n/**\n * The label is rendered as the placeholder and as the accessible name, mirroring\n * ControlledTextarea: a floating label animates onto the border and relies on\n * pseudo-element border segments to cut a notch, which breaks wherever the border is\n * overridden. A label that stays once the field is filled is `FieldLabel`, written above it.\n *\n * Background, border and focus ring come from the form base layer in index.css, so this\n * component names no colour for them.\n */\nconst ControlledInput: React.FC<IControlledInputProps> = ({\n  label,\n  error = false,\n  errorMessage,\n  rightSlot,\n  rightSlotClassName,\n  className,\n  containerClassName,\n  inputRef,\n  placeholder,\n  'aria-label': ariaLabel,\n  ...rest\n}) => (\n  <div className={mergeClasses('w-full min-w-0', containerClassName)}>\n    <div className=\"relative\">\n      <input\n        ref={inputRef}\n        placeholder={placeholder ?? label}\n        aria-label={ariaLabel ?? label}\n        aria-invalid={error || undefined}\n        className={mergeClasses(\n          classNames(\n            'w-full min-w-0 rounded-lg border px-3 py-2.5 text-sm text-foreground transition-colors',\n            'placeholder:text-foreground-faint disabled:cursor-not-allowed disabled:bg-muted',\n            { 'border-danger focus:border-danger': error, 'pr-10': !!rightSlot },\n          ),\n          className,\n        )}\n        {...rest}\n      />\n\n      {rightSlot && (\n        <div\n          className={mergeClasses(\n            'absolute right-3 top-2/4 z-10 flex -translate-y-2/4 items-center gap-x-2',\n            rightSlotClassName,\n          )}\n        >\n          {rightSlot}\n        </div>\n      )}\n    </div>\n\n    {error && errorMessage && <div className=\"mt-1 text-xs text-danger-emphasis\">{errorMessage}</div>}\n  </div>\n);\n\nexport default ControlledInput;\n"],"names":[],"mappings":";;;AA0BA,MAAM,kBAAmD,CAAC;AAAA,EACxD;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,2BACG,OAAA,EAAI,WAAW,aAAa,kBAAkB,kBAAkB,GAC/D,UAAA;AAAA,EAAA,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,aAAa,eAAe;AAAA,QAC5B,cAAY,aAAa;AAAA,QACzB,gBAAc,SAAS;AAAA,QACvB,WAAW;AAAA,UACT;AAAA,YACE;AAAA,YACA;AAAA,YACA,EAAE,qCAAqC,OAAO,SAAS,CAAC,CAAC,UAAA;AAAA,UAAU;AAAA,UAErE;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IAGL,aACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAAA,EAEC,SAAS,gBAAgB,oBAAC,OAAA,EAAI,WAAU,qCAAqC,UAAA,aAAA,CAAa;AAAA,EAAA,CAC7F;"}

package/dist/components/Form/ControlledRadio.d.ts

@@ -0,0 +1,15 @@
+type TRadioColor = 'blue' | 'red' | 'green' | 'amber' | 'purple' | 'indigo' | 'pink' | 'teal';
+interface IControlledRadioProps {
+    checked: boolean;
+    onChange: () => void;
+    name: string;
+    id?: string;
+    label?: string;
+    color?: TRadioColor;
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const ControlledRadio: ({ checked, onChange, name, id, label, color, disabled, className, labelClassName, size, }: IControlledRadioProps) => import("react").JSX.Element;
+export default ControlledRadio;

package/dist/components/Form/ControlledRadio.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+const sizeConfig = {
+  sm: { container: "w-4 h-4", dot: "w-1.5 h-1.5" },
+  md: { container: "w-5 h-5", dot: "w-2 h-2" },
+  lg: { container: "w-6 h-6", dot: "w-2.5 h-2.5" },
+  xl: { container: "w-7 h-7", dot: "w-3 h-3" }
+};
+const dotMap = {
+  blue: "bg-info",
+  red: "bg-danger",
+  green: "bg-success",
+  amber: "bg-warning",
+  purple: "bg-brand",
+  indigo: "bg-brand",
+  pink: "bg-accent",
+  teal: "bg-secondary"
+};
+const borderMap = {
+  blue: "border-info",
+  red: "border-danger",
+  green: "border-success",
+  amber: "border-warning",
+  purple: "border-brand",
+  indigo: "border-brand",
+  pink: "border-accent",
+  teal: "border-secondary"
+};
+const ringMap = {
+  blue: "peer-focus-visible:ring-info-border",
+  red: "peer-focus-visible:ring-danger-border",
+  green: "peer-focus-visible:ring-success-border",
+  amber: "peer-focus-visible:ring-warning-border",
+  purple: "peer-focus-visible:ring-brand-border",
+  indigo: "peer-focus-visible:ring-brand-border",
+  pink: "peer-focus-visible:ring-accent-border",
+  teal: "peer-focus-visible:ring-secondary-border"
+};
+const ControlledRadio = ({
+  checked,
+  onChange,
+  name,
+  id,
+  label,
+  color = "purple",
+  disabled = false,
+  className = "",
+  labelClassName = "",
+  size = "md"
+}) => /* @__PURE__ */ jsx("div", { className: classNames("flex items-center px-[6px]", className), children: /* @__PURE__ */ jsxs(
+  "label",
+  {
+    htmlFor: id,
+    className: classNames(
+      "relative inline-flex items-center gap-2",
+      disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+    ),
+    children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          id,
+          name,
+          checked,
+          onChange: () => onChange(),
+          disabled,
+          className: "peer sr-only"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(
+            sizeConfig[size].container,
+            "flex shrink-0 items-center justify-center rounded-full border bg-surface transition-colors duration-base",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1",
+            ringMap[color],
+            checked ? borderMap[color] : "border-border-strong"
+          ),
+          children: checked && /* @__PURE__ */ jsx("div", { className: classNames(sizeConfig[size].dot, "rounded-full", dotMap[color]) })
+        }
+      ),
+      label && /* @__PURE__ */ jsx("span", { className: classNames("text-sm font-medium text-foreground", labelClassName), children: label })
+    ]
+  }
+) });
+export {
+  ControlledRadio as default
+};
+//# sourceMappingURL=ControlledRadio.js.map

package/dist/components/Form/ControlledRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledRadio.js","sources":["../../../src/components/Form/ControlledRadio.tsx"],"sourcesContent":["import classNames from 'classnames';\n\ntype TRadioColor = 'blue' | 'red' | 'green' | 'amber' | 'purple' | 'indigo' | 'pink' | 'teal';\n\ninterface IControlledRadioProps {\n  checked: boolean;\n  onChange: () => void;\n  // Agrupa os radios: só um `checked` por `name` (navegação por setas do próprio input nativo).\n  name: string;\n  id?: string;\n  label?: string;\n  color?: TRadioColor;\n  disabled?: boolean;\n  className?: string;\n  labelClassName?: string;\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n}\n\nconst sizeConfig = {\n  sm: { container: 'w-4 h-4', dot: 'w-1.5 h-1.5' },\n  md: { container: 'w-5 h-5', dot: 'w-2 h-2' },\n  lg: { container: 'w-6 h-6', dot: 'w-2.5 h-2.5' },\n  xl: { container: 'w-7 h-7', dot: 'w-3 h-3' },\n};\n\nconst dotMap: Record<TRadioColor, string> = {\n  blue: 'bg-info',\n  red: 'bg-danger',\n  green: 'bg-success',\n  amber: 'bg-warning',\n  purple: 'bg-brand',\n  indigo: 'bg-brand',\n  pink: 'bg-accent',\n  teal: 'bg-secondary',\n};\n\nconst borderMap: Record<TRadioColor, string> = {\n  blue: 'border-info',\n  red: 'border-danger',\n  green: 'border-success',\n  amber: 'border-warning',\n  purple: 'border-brand',\n  indigo: 'border-brand',\n  pink: 'border-accent',\n  teal: 'border-secondary',\n};\n\nconst ringMap: Record<TRadioColor, string> = {\n  blue: 'peer-focus-visible:ring-info-border',\n  red: 'peer-focus-visible:ring-danger-border',\n  green: 'peer-focus-visible:ring-success-border',\n  amber: 'peer-focus-visible:ring-warning-border',\n  purple: 'peer-focus-visible:ring-brand-border',\n  indigo: 'peer-focus-visible:ring-brand-border',\n  pink: 'peer-focus-visible:ring-accent-border',\n  teal: 'peer-focus-visible:ring-secondary-border',\n};\n\nconst ControlledRadio = ({\n  checked,\n  onChange,\n  name,\n  id,\n  label,\n  color = 'purple',\n  disabled = false,\n  className = '',\n  labelClassName = '',\n  size = 'md',\n}: IControlledRadioProps) => (\n  <div className={classNames('flex items-center px-[6px]', className)}>\n    <label\n      htmlFor={id}\n      className={classNames(\n        'relative inline-flex items-center gap-2',\n        disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n      )}\n    >\n      <input\n        type=\"radio\"\n        id={id}\n        name={name}\n        checked={checked}\n        onChange={() => onChange()}\n        disabled={disabled}\n        className=\"peer sr-only\"\n      />\n      <div\n        className={classNames(\n          sizeConfig[size].container,\n          'flex shrink-0 items-center justify-center rounded-full border bg-surface transition-colors duration-base',\n          'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1',\n          ringMap[color],\n          checked ? borderMap[color] : 'border-border-strong',\n        )}\n      >\n        {checked && <div className={classNames(sizeConfig[size].dot, 'rounded-full', dotMap[color])} />}\n      </div>\n      {label && <span className={classNames('text-sm font-medium text-foreground', labelClassName)}>{label}</span>}\n    </label>\n  </div>\n);\n\nexport default ControlledRadio;\n"],"names":[],"mappings":";;AAkBA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,WAAW,WAAW,KAAK,cAAA;AAAA,EACjC,IAAI,EAAE,WAAW,WAAW,KAAK,UAAA;AAAA,EACjC,IAAI,EAAE,WAAW,WAAW,KAAK,cAAA;AAAA,EACjC,IAAI,EAAE,WAAW,WAAW,KAAK,UAAA;AACnC;AAEA,MAAM,SAAsC;AAAA,EAC1C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,YAAyC;AAAA,EAC7C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,UAAuC;AAAA,EAC3C,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,OAAO;AACT,0BACG,OAAA,EAAI,WAAW,WAAW,8BAA8B,SAAS,GAChE,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,IACT,WAAW;AAAA,MACT;AAAA,MACA,WAAW,kCAAkC;AAAA,IAAA;AAAA,IAG/C,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,MAAM,SAAA;AAAA,UAChB;AAAA,UACA,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,WAAW,IAAI,EAAE;AAAA,YACjB;AAAA,YACA;AAAA,YACA,QAAQ,KAAK;AAAA,YACb,UAAU,UAAU,KAAK,IAAI;AAAA,UAAA;AAAA,UAG9B,UAAA,WAAW,oBAAC,OAAA,EAAI,WAAW,WAAW,WAAW,IAAI,EAAE,KAAK,gBAAgB,OAAO,KAAK,CAAC,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAE9F,6BAAU,QAAA,EAAK,WAAW,WAAW,uCAAuC,cAAc,GAAI,UAAA,MAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AACvG,EAAA,CACF;"}

package/dist/components/Form/ControlledSelect.d.ts

@@ -0,0 +1,53 @@
+import { IFilterOption } from '../../interfaces/IFilterOption';
+/**
+ * Contract of `fetchMoreOptions`, the single loader of infinite-scroll selects.
+ * `reset: true` means "replace the list with page 1 of `search`" (a new search, a cleared
+ * search, or the restore to the unfiltered baseline). `reset: false` means "append the NEXT
+ * page of the same `search`". The consumer owns the page counter and the accumulated
+ * `options` prop; this component never accumulates results itself.
+ */
+export interface IControlledSelectFetchParams {
+    search: string;
+    reset: boolean;
+}
+type TDataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+/**
+ * Native and ARIA attributes forwarded to the combobox trigger: `id` (so a `<label htmlFor>`
+ * names it), `aria-labelledby` / `aria-describedby` / `aria-invalid`, `data-*`, `onBlur`.
+ * `name` is submitted through hidden inputs carrying the selected value(s), never the label.
+ */
+type TControlledSelectTriggerProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'required' | 'onBlur' | 'onFocus' | 'autoFocus'> & React.AriaAttributes & TDataAttributes;
+type TControlledSelectProps = TControlledSelectTriggerProps & {
+    label?: string;
+    persistentLabel?: boolean;
+    options: Array<IFilterOption>;
+    selectedValue: string | Array<string>;
+    error?: boolean;
+    multiple?: boolean;
+    searchable?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+    className?: string;
+    listClassName?: string;
+    onChangeHook: (selected: string | Array<string>) => void;
+    infiniteScroll?: boolean;
+    fetchMoreOptions?: (params: IControlledSelectFetchParams) => Promise<unknown>;
+    hasMoreOptions?: boolean;
+    loading?: boolean;
+    onClearSearch?: () => void;
+    onOpen?: () => void;
+    selectedItemsPosition?: 'bottom' | 'top' | 'left' | 'right';
+    showSelectedItems?: boolean;
+    inFieldChips?: boolean;
+    preserveLabelCase?: boolean;
+    swatchShape?: 'dot' | 'square';
+    ariaLabel?: string;
+    ariaRequired?: boolean;
+    inputClassName?: string;
+    matchTriggerWidth?: boolean;
+    compact?: boolean;
+};
+export declare function ControlledSelect({ label, persistentLabel, options: optionsProp, selectedValue, error, multiple, disabled, searchable, clearable, className, listClassName, onChangeHook, onClearSearch, infiniteScroll, fetchMoreOptions, hasMoreOptions, loading, onOpen, selectedItemsPosition, showSelectedItems, inFieldChips, preserveLabelCase, swatchShape, ariaLabel, ariaRequired, inputClassName, matchTriggerWidth, compact, id, name, required, onBlur, onFocus, autoFocus, ...triggerAttributes }: TControlledSelectProps): import("react").JSX.Element;
+export {};