@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export type TDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+export interface IDrawerDismissConfig {
+    enabled?: boolean;
+    escapeKey?: boolean;
+    outsidePress?: boolean | ((event: PointerEvent) => boolean);
+}
+export interface IControlledDrawerProps {
+    open?: boolean;
+    onClose?: () => void;
+    placement?: TDrawerPlacement;
+    /** Width for left/right placements, height for top/bottom, in pixels. */
+    size?: number;
+    className?: string;
+    overlayClassName?: string;
+    children?: React.ReactNode;
+    dismiss?: IDrawerDismissConfig;
+    /** Defer mounting the subtree until the first time `open` becomes true. */
+    lazy?: boolean;
+    /** Discard the subtree while closed, so its state resets on the next open. */
+    unmountOnClose?: boolean;
+    /** Fires once, the first time the drawer opens after this component mounted. */
+    onFirstOpen?: () => void;
+    /** Fires whenever `open` toggles. Argument is the new value. */
+    onOpenChange?: (open: boolean) => void;
+    resizable?: boolean;
+    minResizeWidth?: number;
+    maxResizeViewportRatio?: number;
+}
+/**
+ * The panel is removed from the DOM once its exit transition finishes. The Material
+ * Tailwind drawer kept a closed panel mounted off-screen, and its shadow bled back into
+ * the viewport: with one drawer that is invisible, with one per list row the bleeds
+ * stacked into visible gray lines at the screen edge.
+ */
+declare const ControlledDrawer: React.FC<IControlledDrawerProps>;
+export default ControlledDrawer;

package/dist/components/Form/ControlledDrawer.js

@@ -0,0 +1,241 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import classNames from "classnames";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "./ControlledButton.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { isPressOnLayeredSurface } from "../../helpers/layeredSurfaces.js";
+import { getPortalHost } from "../../helpers/portalHost.js";
+import { createDrawerVariants, scrimVariants } from "../../motion/motionPresets.js";
+import "../../motion/motionTokens.js";
+const DEFAULT_SIZE = 300;
+const DEFAULT_MIN_RESIZE_WIDTH = 280;
+const DEFAULT_MAX_RESIZE_VIEWPORT_RATIO = 0.8;
+const KEYBOARD_RESIZE_STEP = 24;
+const PLACEMENT_CLASS = {
+  left: "inset-y-0 left-0",
+  right: "inset-y-0 right-0",
+  top: "inset-x-0 top-0",
+  bottom: "inset-x-0 bottom-0"
+};
+const ControlledDrawer = ({
+  open,
+  onClose,
+  placement = "left",
+  size = DEFAULT_SIZE,
+  className,
+  overlayClassName,
+  children,
+  dismiss,
+  lazy,
+  unmountOnClose,
+  onFirstOpen,
+  onOpenChange,
+  resizable = true,
+  minResizeWidth = DEFAULT_MIN_RESIZE_WIDTH,
+  maxResizeViewportRatio = DEFAULT_MAX_RESIZE_VIEWPORT_RATIO
+}) => {
+  const { t } = useTranslation("ui");
+  const isOpen = Boolean(open);
+  const panelRef = useRef(null);
+  const previouslyFocusedRef = useRef(null);
+  const [hasEverOpened, setHasEverOpened] = useState(isOpen);
+  const [isLeaving, setIsLeaving] = useState(false);
+  const prevOpenRef = useRef(open);
+  const firstOpenFiredRef = useRef(false);
+  const isHorizontalPlacement = placement === "left" || placement === "right";
+  const canResize = resizable && isHorizontalPlacement;
+  const [resizedWidth, setResizedWidth] = useState(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeStartRef = useRef(null);
+  const previousBaseSizeRef = useRef(size);
+  const clampWidth = useCallback(
+    (width) => {
+      const maxWidth = Math.max(minResizeWidth, Math.round(window.innerWidth * maxResizeViewportRatio));
+      return Math.min(maxWidth, Math.max(minResizeWidth, Math.round(width)));
+    },
+    [minResizeWidth, maxResizeViewportRatio]
+  );
+  useEffect(() => {
+    if (previousBaseSizeRef.current === size) return;
+    previousBaseSizeRef.current = size;
+    setResizedWidth(null);
+  }, [size]);
+  useEffect(() => {
+    if (!canResize) return void 0;
+    const handleViewportResize = () => setResizedWidth((current) => current === null ? null : clampWidth(current));
+    window.addEventListener("resize", handleViewportResize);
+    return () => window.removeEventListener("resize", handleViewportResize);
+  }, [canResize, clampWidth]);
+  useEffect(() => {
+    const previous = prevOpenRef.current;
+    if (previous === isOpen) return;
+    prevOpenRef.current = isOpen;
+    if (isOpen && !hasEverOpened) setHasEverOpened(true);
+    if (isOpen && !firstOpenFiredRef.current) {
+      firstOpenFiredRef.current = true;
+      onFirstOpen?.();
+    }
+    onOpenChange?.(isOpen);
+  }, [isOpen, hasEverOpened, onFirstOpen, onOpenChange]);
+  useEffect(() => {
+    if (isOpen) setIsLeaving(true);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen && !isLeaving) return void 0;
+    const { overflow } = document.body.style;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = overflow;
+    };
+  }, [isOpen, isLeaving]);
+  useEffect(() => {
+    if (!isOpen) return void 0;
+    previouslyFocusedRef.current = document.activeElement;
+    const frame = requestAnimationFrame(() => panelRef.current?.focus());
+    return () => {
+      cancelAnimationFrame(frame);
+      previouslyFocusedRef.current?.focus?.();
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen || dismiss?.enabled === false) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || dismiss?.escapeKey === false) return;
+      onClose?.();
+    };
+    const handlePointerDown = (event) => {
+      if (dismiss?.outsidePress === false) return;
+      const panel = panelRef.current;
+      const target = event.target;
+      if (!panel || !target || panel.contains(target)) return;
+      if (isPressOnLayeredSurface(target, panelRef.current)) return;
+      if (typeof dismiss?.outsidePress === "function" && !dismiss.outsidePress(event)) return;
+      onClose?.();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    };
+  }, [isOpen, dismiss, onClose]);
+  const handleResizeStart = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    resizeStartRef.current = { pointerX: event.clientX, width: resizedWidth ?? size };
+    setIsResizing(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const handleResizeMove = (event) => {
+    const resizeStart = resizeStartRef.current;
+    if (!resizeStart) return;
+    const pointerDelta = placement === "right" ? resizeStart.pointerX - event.clientX : event.clientX - resizeStart.pointerX;
+    setResizedWidth(clampWidth(resizeStart.width + pointerDelta));
+  };
+  const handleResizeEnd = (event) => {
+    if (!resizeStartRef.current) return;
+    resizeStartRef.current = null;
+    setIsResizing(false);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const handleResizeKeyDown = (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    const pointerDirection = event.key === "ArrowLeft" ? -1 : 1;
+    const widthDirection = placement === "right" ? -pointerDirection : pointerDirection;
+    setResizedWidth((current) => clampWidth((current ?? size) + widthDirection * KEYBOARD_RESIZE_STEP));
+  };
+  if (lazy && !hasEverOpened) return null;
+  const resolvedSize = isHorizontalPlacement ? resizedWidth ?? size : size;
+  const shouldRenderChildren = unmountOnClose ? isOpen : !lazy || hasEverOpened;
+  const drawerVariants = createDrawerVariants(placement);
+  const portalHost = getPortalHost();
+  if (portalHost === null) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(AnimatePresence, { onExitComplete: () => setIsLeaving(false), children: [
+      isOpen && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          variants: scrimVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          "aria-hidden": true,
+          onClick: () => {
+            if (dismiss?.enabled === false || dismiss?.outsidePress === false) return;
+            onClose?.();
+          },
+          className: classNames("fixed inset-0 z-[9996] glass-scrim", overlayClassName)
+        },
+        "drawer-scrim"
+      ),
+      isOpen && /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          ref: panelRef,
+          variants: drawerVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          role: "dialog",
+          "aria-modal": true,
+          tabIndex: -1,
+          style: isHorizontalPlacement ? { width: resolvedSize } : { height: resolvedSize },
+          className: classNames(
+            "fixed z-[9997] flex max-w-full flex-col overflow-y-auto bg-surface shadow-xl outline-none",
+            PLACEMENT_CLASS[placement],
+            className
+          ),
+          children: [
+            canResize && isOpen ? /* @__PURE__ */ jsx(
+              ControlledTooltip,
+              {
+                content: t("controlledDrawer.resizeHandle"),
+                placement: placement === "right" ? "left" : "right",
+                className: "z-[9999]",
+                children: /* @__PURE__ */ jsx(
+                  ControlledButton,
+                  {
+                    defaultHtmlButton: true,
+                    "aria-label": t("controlledDrawer.resizeHandle"),
+                    onPointerDown: handleResizeStart,
+                    onPointerMove: handleResizeMove,
+                    onPointerUp: handleResizeEnd,
+                    onPointerCancel: handleResizeEnd,
+                    onKeyDown: handleResizeKeyDown,
+                    onDoubleClick: () => setResizedWidth(null),
+                    className: classNames(
+                      "group/resize absolute inset-y-0 z-10 flex w-3 cursor-col-resize touch-none select-none items-center justify-center focus:outline-none",
+                      placement === "right" ? "left-0" : "right-0"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: classNames(
+                          "h-full w-0.5 rounded-full transition-colors duration-base",
+                          isResizing ? "bg-brand-hover" : "bg-transparent group-hover/resize:bg-brand-hover"
+                        )
+                      }
+                    )
+                  }
+                )
+              }
+            ) : null,
+            shouldRenderChildren ? children : null
+          ]
+        },
+        "drawer-panel"
+      )
+    ] }),
+    portalHost
+  );
+};
+export {
+  ControlledDrawer as default
+};
+//# sourceMappingURL=ControlledDrawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledDrawer.js","sources":["../../../src/components/Form/ControlledDrawer.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { isPressOnLayeredSurface } from '@/helpers/layeredSurfaces';\nimport { getPortalHost } from '@/helpers/portalHost';\nimport { createDrawerVariants, scrimVariants } from '@/motion';\n\nconst DEFAULT_SIZE = 300;\nconst DEFAULT_MIN_RESIZE_WIDTH = 280;\nconst DEFAULT_MAX_RESIZE_VIEWPORT_RATIO = 0.8;\nconst KEYBOARD_RESIZE_STEP = 24;\n\nexport type TDrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface IDrawerDismissConfig {\n  enabled?: boolean;\n  escapeKey?: boolean;\n  outsidePress?: boolean | ((event: PointerEvent) => boolean);\n}\n\nexport interface IControlledDrawerProps {\n  open?: boolean;\n  onClose?: () => void;\n  placement?: TDrawerPlacement;\n  /** Width for left/right placements, height for top/bottom, in pixels. */\n  size?: number;\n  className?: string;\n  overlayClassName?: string;\n  children?: React.ReactNode;\n  dismiss?: IDrawerDismissConfig;\n\n  /** Defer mounting the subtree until the first time `open` becomes true. */\n  lazy?: boolean;\n  /** Discard the subtree while closed, so its state resets on the next open. */\n  unmountOnClose?: boolean;\n  /** Fires once, the first time the drawer opens after this component mounted. */\n  onFirstOpen?: () => void;\n  /** Fires whenever `open` toggles. Argument is the new value. */\n  onOpenChange?: (open: boolean) => void;\n\n  resizable?: boolean;\n  minResizeWidth?: number;\n  maxResizeViewportRatio?: number;\n}\n\nconst PLACEMENT_CLASS: Record<TDrawerPlacement, string> = {\n  left: 'inset-y-0 left-0',\n  right: 'inset-y-0 right-0',\n  top: 'inset-x-0 top-0',\n  bottom: 'inset-x-0 bottom-0',\n};\n\n/**\n * The panel is removed from the DOM once its exit transition finishes. The Material\n * Tailwind drawer kept a closed panel mounted off-screen, and its shadow bled back into\n * the viewport: with one drawer that is invisible, with one per list row the bleeds\n * stacked into visible gray lines at the screen edge.\n */\nconst ControlledDrawer: React.FC<IControlledDrawerProps> = ({\n  open,\n  onClose,\n  placement = 'left',\n  size = DEFAULT_SIZE,\n  className,\n  overlayClassName,\n  children,\n  dismiss,\n  lazy,\n  unmountOnClose,\n  onFirstOpen,\n  onOpenChange,\n  resizable = true,\n  minResizeWidth = DEFAULT_MIN_RESIZE_WIDTH,\n  maxResizeViewportRatio = DEFAULT_MAX_RESIZE_VIEWPORT_RATIO,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const isOpen = Boolean(open);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n\n  const [hasEverOpened, setHasEverOpened] = useState(isOpen);\n  const [isLeaving, setIsLeaving] = useState(false);\n  const prevOpenRef = useRef<boolean | undefined>(open);\n  const firstOpenFiredRef = useRef(false);\n\n  const isHorizontalPlacement = placement === 'left' || placement === 'right';\n  const canResize = resizable && isHorizontalPlacement;\n\n  const [resizedWidth, setResizedWidth] = useState<number | null>(null);\n  const [isResizing, setIsResizing] = useState(false);\n  const resizeStartRef = useRef<{ pointerX: number; width: number } | null>(null);\n  const previousBaseSizeRef = useRef(size);\n\n  const clampWidth = useCallback(\n    (width: number) => {\n      const maxWidth = Math.max(minResizeWidth, Math.round(window.innerWidth * maxResizeViewportRatio));\n      return Math.min(maxWidth, Math.max(minResizeWidth, Math.round(width)));\n    },\n    [minResizeWidth, maxResizeViewportRatio],\n  );\n\n  useEffect(() => {\n    if (previousBaseSizeRef.current === size) return;\n    previousBaseSizeRef.current = size;\n    setResizedWidth(null);\n  }, [size]);\n\n  useEffect(() => {\n    if (!canResize) return undefined;\n\n    const handleViewportResize = () => setResizedWidth((current) => (current === null ? null : clampWidth(current)));\n\n    window.addEventListener('resize', handleViewportResize);\n    return () => window.removeEventListener('resize', handleViewportResize);\n  }, [canResize, clampWidth]);\n\n  useEffect(() => {\n    const previous = prevOpenRef.current;\n    if (previous === isOpen) return;\n    prevOpenRef.current = isOpen;\n\n    if (isOpen && !hasEverOpened) setHasEverOpened(true);\n\n    if (isOpen && !firstOpenFiredRef.current) {\n      firstOpenFiredRef.current = true;\n      onFirstOpen?.();\n    }\n\n    onOpenChange?.(isOpen);\n  }, [isOpen, hasEverOpened, onFirstOpen, onOpenChange]);\n\n  useEffect(() => {\n    if (isOpen) setIsLeaving(true);\n  }, [isOpen]);\n\n  /* Held until the exit finishes, not until `open` flips: releasing it early brings the\n     page scrollbar back while the panel is still travelling, and the content behind jumps. */\n  useEffect(() => {\n    if (!isOpen && !isLeaving) return undefined;\n\n    const { overflow } = document.body.style;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [isOpen, isLeaving]);\n\n  useEffect(() => {\n    if (!isOpen) return undefined;\n\n    previouslyFocusedRef.current = document.activeElement as HTMLElement | null;\n    const frame = requestAnimationFrame(() => panelRef.current?.focus());\n\n    return () => {\n      cancelAnimationFrame(frame);\n      previouslyFocusedRef.current?.focus?.();\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen || dismiss?.enabled === false) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // A layer inside the drawer (a select list) that consumed the ESC marks it handled.\n      if (event.key !== 'Escape' || event.defaultPrevented || dismiss?.escapeKey === false) return;\n      onClose?.();\n    };\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (dismiss?.outsidePress === false) return;\n      const panel = panelRef.current;\n      const target = event.target as Node | null;\n      if (!panel || !target || panel.contains(target)) return;\n      if (isPressOnLayeredSurface(target, panelRef.current)) return;\n      if (typeof dismiss?.outsidePress === 'function' && !dismiss.outsidePress(event)) return;\n      onClose?.();\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('pointerdown', handlePointerDown, true);\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('pointerdown', handlePointerDown, true);\n    };\n  }, [isOpen, dismiss, onClose]);\n\n  const handleResizeStart = (event: React.PointerEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    resizeStartRef.current = { pointerX: event.clientX, width: resizedWidth ?? size };\n    setIsResizing(true);\n    event.currentTarget.setPointerCapture(event.pointerId);\n  };\n\n  const handleResizeMove = (event: React.PointerEvent<HTMLButtonElement>) => {\n    const resizeStart = resizeStartRef.current;\n    if (!resizeStart) return;\n    const pointerDelta =\n      placement === 'right' ? resizeStart.pointerX - event.clientX : event.clientX - resizeStart.pointerX;\n    setResizedWidth(clampWidth(resizeStart.width + pointerDelta));\n  };\n\n  const handleResizeEnd = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!resizeStartRef.current) return;\n    resizeStartRef.current = null;\n    setIsResizing(false);\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n  };\n\n  const handleResizeKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n    event.preventDefault();\n    const pointerDirection = event.key === 'ArrowLeft' ? -1 : 1;\n    const widthDirection = placement === 'right' ? -pointerDirection : pointerDirection;\n    setResizedWidth((current) => clampWidth((current ?? size) + widthDirection * KEYBOARD_RESIZE_STEP));\n  };\n\n  if (lazy && !hasEverOpened) return null;\n\n  const resolvedSize = isHorizontalPlacement ? (resizedWidth ?? size) : size;\n  const shouldRenderChildren = unmountOnClose ? isOpen : !lazy || hasEverOpened;\n  const drawerVariants = createDrawerVariants(placement);\n\n  const portalHost = getPortalHost();\n  if (portalHost === null) return null;\n\n  return createPortal(\n    <AnimatePresence onExitComplete={() => setIsLeaving(false)}>\n      {isOpen && (\n        <motion.div\n          key=\"drawer-scrim\"\n          variants={scrimVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          exit=\"exit\"\n          aria-hidden\n          onClick={() => {\n            if (dismiss?.enabled === false || dismiss?.outsidePress === false) return;\n            onClose?.();\n          }}\n          className={classNames('fixed inset-0 z-[9996] glass-scrim', overlayClassName)}\n        />\n      )}\n\n      {isOpen && (\n        <motion.div\n          key=\"drawer-panel\"\n          ref={panelRef}\n          variants={drawerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          exit=\"exit\"\n          role=\"dialog\"\n          aria-modal={true}\n          tabIndex={-1}\n          style={isHorizontalPlacement ? { width: resolvedSize } : { height: resolvedSize }}\n          className={classNames(\n            'fixed z-[9997] flex max-w-full flex-col overflow-y-auto bg-surface shadow-xl outline-none',\n            PLACEMENT_CLASS[placement],\n            className,\n          )}\n        >\n          {canResize && isOpen ? (\n            <ControlledTooltip\n              content={t('controlledDrawer.resizeHandle')}\n              placement={placement === 'right' ? 'left' : 'right'}\n              className=\"z-[9999]\"\n            >\n              <ControlledButton\n                defaultHtmlButton\n                aria-label={t('controlledDrawer.resizeHandle')}\n                onPointerDown={handleResizeStart}\n                onPointerMove={handleResizeMove}\n                onPointerUp={handleResizeEnd}\n                onPointerCancel={handleResizeEnd}\n                onKeyDown={handleResizeKeyDown}\n                onDoubleClick={() => setResizedWidth(null)}\n                className={classNames(\n                  'group/resize absolute inset-y-0 z-10 flex w-3 cursor-col-resize touch-none select-none items-center justify-center focus:outline-none',\n                  placement === 'right' ? 'left-0' : 'right-0',\n                )}\n              >\n                <span\n                  className={classNames(\n                    'h-full w-0.5 rounded-full transition-colors duration-base',\n                    isResizing ? 'bg-brand-hover' : 'bg-transparent group-hover/resize:bg-brand-hover',\n                  )}\n                />\n              </ControlledButton>\n            </ControlledTooltip>\n          ) : null}\n\n          {shouldRenderChildren ? children : null}\n        </motion.div>\n      )}\n    </AnimatePresence>,\n    portalHost,\n  );\n};\n\nexport default ControlledDrawer;\n"],"names":[],"mappings":"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"}

package/dist/components/Form/ControlledForm/InputField.d.ts

@@ -0,0 +1,11 @@
+import { IField } from '.';
+import * as React from 'react';
+interface IInputFieldProps {
+    field: IField;
+    value: string;
+    onChangeHook: (name: string, value: string | Array<File>) => void;
+    error?: boolean;
+    actionSlot?: React.ReactNode;
+}
+export declare const InputField: React.FC<IInputFieldProps>;
+export {};

package/dist/components/Form/ControlledForm/InputField.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledInput from "../ControlledInput.js";
+import DatePicker from "../../DateTime/DatePicker.js";
+import LoadingSpinner from "../../UI/LoadingSpinner.js";
+import UploaderComponent from "../../Upload/UploaderComponent.js";
+import ControlledImage from "../ControlledImage/index.js";
+import { ControlledSelect } from "../ControlledSelect.js";
+const InputField = ({ field, value, onChangeHook, error, actionSlot }) => {
+  const { t } = useTranslation("ui");
+  const handleChangeHook = (fieldName, value2) => {
+    onChangeHook(fieldName, value2);
+    if (field.type === "select" && field.handleOnChange && typeof value2 === "string") {
+      field.handleOnChange(value2);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classNames("flex w-full flex-col gap-1"), children: [
+    ["text", "text-image", "number"].includes(field.type) && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row items-center gap-x-2", children: [
+      actionSlot && /* @__PURE__ */ jsx(Fragment, { children: actionSlot }),
+      /* @__PURE__ */ jsx(
+        ControlledInput,
+        {
+          className: "!text-foreground",
+          autoComplete: "off",
+          name: field.name,
+          label: field.label,
+          type: field.type,
+          value,
+          error,
+          onChange: (e) => handleChangeHook(field.name, e.target.value)
+        }
+      ),
+      field.type === "text-image" && value.length > 0 && /* @__PURE__ */ jsx(ControlledImage, { src: value, className: "size-10 rounded-full" })
+    ] }),
+    field.type === "date" && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row items-center gap-x-2", children: [
+      actionSlot && /* @__PURE__ */ jsx(Fragment, { children: actionSlot }),
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          label: field.label,
+          onUpdate: (val) => handleChangeHook(field.name, val ?? ""),
+          startValue: value ? new Date(value) : void 0,
+          disabled: field.loading
+        }
+      )
+    ] }),
+    field.type === "select" && field.options && field.options.length > 0 && /* @__PURE__ */ jsx(
+      ControlledSelect,
+      {
+        searchable: field.options.length >= 5,
+        listClassName: "max-w-lg !w-full",
+        label: field.label,
+        error,
+        options: field.options,
+        selectedValue: value,
+        onChangeHook: (value2) => handleChangeHook(field.name, value2)
+      }
+    ),
+    field.type === "image" && /* @__PURE__ */ jsx(
+      UploaderComponent,
+      {
+        allowedTypes: ["image/jpeg", "image/png", "image/jpg"],
+        handleFilesSelected: (files) => handleChangeHook(field.name, files),
+        className: error ? "!border-danger" : ""
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { className: "text-xs text-danger-emphasis", children: t("inputField.requiredField") }),
+    field.loading && /* @__PURE__ */ jsx(LoadingSpinner, { label: t("inputField.loadingInfo"), size: 5, className: "mb-1 mt-3 !justify-start" })
+  ] });
+};
+export {
+  InputField
+};
+//# sourceMappingURL=InputField.js.map

package/dist/components/Form/ControlledForm/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sources":["../../../../src/components/Form/ControlledForm/InputField.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledInput from '@/components/Form/ControlledInput';\n\nimport DatePicker from '../../DateTime/DatePicker';\nimport LoadingSpinner from '../../UI/LoadingSpinner';\nimport UploaderComponent from '../../Upload/UploaderComponent';\nimport ControlledImage from '../ControlledImage';\nimport { ControlledSelect } from '../ControlledSelect';\n\nimport { IField } from '.';\n\ninterface IInputFieldProps {\n  field: IField;\n  value: string;\n  onChangeHook: (name: string, value: string | Array<File>) => void;\n  error?: boolean;\n  actionSlot?: React.ReactNode;\n}\n\nexport const InputField: React.FC<IInputFieldProps> = ({ field, value, onChangeHook, error, actionSlot }) => {\n  const { t } = useTranslation('ui');\n  const handleChangeHook = (fieldName: string, value: string | Array<File>) => {\n    onChangeHook(fieldName, value);\n\n    if (field.type === 'select' && field.handleOnChange && typeof value === 'string') {\n      field.handleOnChange(value);\n    }\n  };\n\n  return (\n    <div className={classNames('flex w-full flex-col gap-1')}>\n      {['text', 'text-image', 'number'].includes(field.type) && (\n        <div className=\"flex w-full flex-row items-center gap-x-2\">\n          {actionSlot && <>{actionSlot}</>}\n\n          <ControlledInput\n            className=\"!text-foreground\"\n            autoComplete=\"off\"\n            name={field.name}\n            label={field.label}\n            type={field.type}\n            value={value}\n            error={error}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeHook(field.name, e.target.value)}\n          />\n\n          {field.type === 'text-image' && value.length > 0 && (\n            <ControlledImage src={value} className=\"size-10 rounded-full\" />\n          )}\n        </div>\n      )}\n\n      {field.type === 'date' && (\n        <div className=\"flex w-full flex-row items-center gap-x-2\">\n          {actionSlot && <>{actionSlot}</>}\n          <DatePicker\n            label={field.label}\n            onUpdate={(val) => handleChangeHook(field.name, val ?? '')}\n            startValue={value ? new Date(value) : undefined}\n            disabled={field.loading}\n          />\n        </div>\n      )}\n\n      {field.type === 'select' && field.options && field.options.length > 0 && (\n        <ControlledSelect\n          searchable={field.options.length >= 5}\n          listClassName=\"max-w-lg !w-full\"\n          label={field.label}\n          error={error}\n          options={field.options}\n          selectedValue={value}\n          onChangeHook={(value) => handleChangeHook(field.name, value as string)}\n        />\n      )}\n\n      {field.type === 'image' && (\n        <UploaderComponent\n          allowedTypes={['image/jpeg', 'image/png', 'image/jpg']}\n          handleFilesSelected={(files) => handleChangeHook(field.name, files)}\n          className={error ? '!border-danger' : ''}\n        />\n      )}\n\n      {error && <span className=\"text-xs text-danger-emphasis\">{t('inputField.requiredField')}</span>}\n\n      {field.loading && (\n        <LoadingSpinner label={t('inputField.loadingInfo')} size={5} className=\"mb-1 mt-3 !justify-start\" />\n      )}\n    </div>\n  );\n};\n"],"names":["value"],"mappings":";;;;;;;;;AAsBO,MAAM,aAAyC,CAAC,EAAE,OAAO,OAAO,cAAc,OAAO,iBAAiB;AAC3G,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,mBAAmB,CAAC,WAAmBA,WAAgC;AAC3E,iBAAa,WAAWA,MAAK;AAE7B,QAAI,MAAM,SAAS,YAAY,MAAM,kBAAkB,OAAOA,WAAU,UAAU;AAChF,YAAM,eAAeA,MAAK;AAAA,IAC5B;AAAA,EACF;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,WAAW,4BAA4B,GACpD,UAAA;AAAA,IAAA,CAAC,QAAQ,cAAc,QAAQ,EAAE,SAAS,MAAM,IAAI,KACnD,qBAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,MAAA,8CAAiB,UAAA,WAAA,CAAW;AAAA,MAE7B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAa;AAAA,UACb,MAAM,MAAM;AAAA,UACZ,OAAO,MAAM;AAAA,UACb,MAAM,MAAM;AAAA,UACZ;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAA2C,iBAAiB,MAAM,MAAM,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlG,MAAM,SAAS,gBAAgB,MAAM,SAAS,KAC7C,oBAAC,iBAAA,EAAgB,KAAK,OAAO,WAAU,uBAAA,CAAuB;AAAA,IAAA,GAElE;AAAA,IAGD,MAAM,SAAS,UACd,qBAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,MAAA,8CAAiB,UAAA,WAAA,CAAW;AAAA,MAC7B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,MAAM;AAAA,UACb,UAAU,CAAC,QAAQ,iBAAiB,MAAM,MAAM,OAAO,EAAE;AAAA,UACzD,YAAY,QAAQ,IAAI,KAAK,KAAK,IAAI;AAAA,UACtC,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB,GACF;AAAA,IAGD,MAAM,SAAS,YAAY,MAAM,WAAW,MAAM,QAAQ,SAAS,KAClE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAY,MAAM,QAAQ,UAAU;AAAA,QACpC,eAAc;AAAA,QACd,OAAO,MAAM;AAAA,QACb;AAAA,QACA,SAAS,MAAM;AAAA,QACf,eAAe;AAAA,QACf,cAAc,CAACA,WAAU,iBAAiB,MAAM,MAAMA,MAAe;AAAA,MAAA;AAAA,IAAA;AAAA,IAIxE,MAAM,SAAS,WACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAc,CAAC,cAAc,aAAa,WAAW;AAAA,QACrD,qBAAqB,CAAC,UAAU,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAClE,WAAW,QAAQ,mBAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAIzC,SAAS,oBAAC,QAAA,EAAK,WAAU,gCAAgC,UAAA,EAAE,0BAA0B,GAAE;AAAA,IAEvF,MAAM,WACL,oBAAC,gBAAA,EAAe,OAAO,EAAE,wBAAwB,GAAG,MAAM,GAAG,WAAU,2BAAA,CAA2B;AAAA,EAAA,GAEtG;AAEJ;"}

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

@@ -0,0 +1,27 @@
+import { IFilterOption } from '../../../interfaces/IFilterOption';
+import * as React from 'react';
+export type TFormValue = string | number | boolean | null | Date;
+export type TFormData = Record<string, TFormValue>;
+export interface IField {
+    name: string;
+    label: string;
+    type: 'text' | 'text-image' | 'number' | 'select' | 'image' | 'date';
+    defaultValue?: string | number;
+    loading?: boolean;
+    isRequired?: boolean;
+    options?: Array<IFilterOption>;
+    handleOnChange?: (value: string) => void;
+    hidden?: (formData: TFormData) => boolean;
+}
+interface IControlledFormProps {
+    fields: Array<IField>;
+    resetFields?: boolean;
+    submitButtonLabel?: string;
+    title?: string;
+    headline?: string;
+    useMaxWidth?: boolean;
+    className?: string;
+    onSubmit: (data: TFormData) => Promise<void>;
+}
+declare const ControlledForm: React.FC<IControlledFormProps>;
+export default ControlledForm;

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

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import LoadingSpinner from "../../UI/LoadingSpinner.js";
+import ControlledButton from "../ControlledButton.js";
+import { InputField } from "./InputField.js";
+const ControlledForm = ({
+  fields,
+  resetFields = false,
+  submitButtonLabel = "Salvar",
+  title,
+  headline,
+  useMaxWidth = true,
+  className,
+  onSubmit
+}) => {
+  const initialState = {};
+  fields.forEach((field) => {
+    initialState[field.name] = field.defaultValue ?? "";
+  });
+  const [formData, setFormData] = useState(initialState);
+  const [errors, setErrors] = useState({});
+  const [loadingSubmitButton, setLoadingSubmitButton] = useState(false);
+  const handleChange = (name, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+    setErrors((prev) => ({
+      ...prev,
+      [name]: false
+    }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoadingSubmitButton(true);
+    const newErrors = {};
+    const processedData = { ...formData };
+    fields.forEach((field) => {
+      if (field.hidden && field.hidden(formData)) {
+        return;
+      }
+      if (field.isRequired === false) {
+        const value2 = formData[field.name];
+        if (field.type === "number" && value2 !== "" && !isNaN(Number(value2))) {
+          processedData[field.name] = Number(value2);
+        }
+        return;
+      }
+      const value = formData[field.name];
+      if (field.type === "number") {
+        if (value === "" || isNaN(Number(value))) {
+          newErrors[field.name] = true;
+        } else {
+          processedData[field.name] = Number(value);
+        }
+      } else {
+        if (!value) {
+          newErrors[field.name] = true;
+        }
+      }
+    });
+    if (Object.keys(newErrors).length > 0) {
+      setLoadingSubmitButton(false);
+      setErrors(newErrors);
+      return;
+    }
+    await onSubmit(processedData);
+    if (resetFields) setFormData(initialState);
+    setLoadingSubmitButton(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: classNames("flex w-full flex-col gap-y-4", className, {
+        "max-w-lg": useMaxWidth
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          title && /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: title }),
+          headline && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-subtle", children: headline })
+        ] }),
+        fields.map((field) => {
+          const isHidden = field.hidden && field.hidden(formData);
+          return !isHidden && /* @__PURE__ */ jsx(
+            InputField,
+            {
+              field,
+              value: String(formData[field.name] ?? field.defaultValue ?? ""),
+              onChangeHook: (name, value) => handleChange(name, value),
+              error: field.isRequired !== false ? !!errors[field.name] : false
+            },
+            field.name
+          );
+        }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            type: "submit",
+            disabled: loadingSubmitButton,
+            className: "inter-font w-32 rounded-md py-2 capitalize",
+            children: loadingSubmitButton ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4 }) : submitButtonLabel
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  ControlledForm as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/ControlledForm/index.tsx"],"sourcesContent":["import { useState } from 'react';\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport { IFilterOption } from '../../../interfaces/IFilterOption';\nimport LoadingSpinner from '../../UI/LoadingSpinner';\nimport ControlledButton from '../ControlledButton';\n\nimport { InputField } from './InputField';\n\nexport type TFormValue = string | number | boolean | null | Date;\nexport type TFormData = Record<string, TFormValue>;\n\nexport interface IField {\n  name: string;\n  label: string;\n  type: 'text' | 'text-image' | 'number' | 'select' | 'image' | 'date';\n  defaultValue?: string | number;\n  loading?: boolean;\n  isRequired?: boolean;\n  options?: Array<IFilterOption>;\n  handleOnChange?: (value: string) => void;\n  hidden?: (formData: TFormData) => boolean;\n}\n\ninterface IControlledFormProps {\n  fields: Array<IField>;\n  resetFields?: boolean;\n  submitButtonLabel?: string;\n  title?: string;\n  headline?: string;\n  useMaxWidth?: boolean;\n  className?: string;\n  onSubmit: (data: TFormData) => Promise<void>;\n}\n\nconst ControlledForm: React.FC<IControlledFormProps> = ({\n  fields,\n  resetFields = false,\n  submitButtonLabel = 'Salvar',\n  title,\n  headline,\n  useMaxWidth = true,\n  className,\n  onSubmit,\n}) => {\n  const initialState: TFormData = {};\n  fields.forEach((field) => {\n    initialState[field.name] = field.defaultValue ?? '';\n  });\n\n  const [formData, setFormData] = useState<TFormData>(initialState);\n  const [errors, setErrors] = useState<{ [key: string]: boolean }>({});\n\n  const [loadingSubmitButton, setLoadingSubmitButton] = useState(false);\n\n  const handleChange = (name: string, value: TFormValue) => {\n    setFormData((prev) => ({\n      ...prev,\n      [name]: value,\n    }));\n    setErrors((prev) => ({\n      ...prev,\n      [name]: false,\n    }));\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setLoadingSubmitButton(true);\n    const newErrors: { [key: string]: boolean } = {};\n    const processedData: TFormData = { ...formData };\n\n    fields.forEach((field) => {\n      // Skip validation for fields that are hidden\n      if (field.hidden && field.hidden(formData)) {\n        return;\n      }\n\n      // Only validate if field is required (defaults to true)\n      if (field.isRequired === false) {\n        // Process data even if not required\n        const value = formData[field.name];\n        if (field.type === 'number' && value !== '' && !isNaN(Number(value))) {\n          processedData[field.name] = Number(value);\n        }\n        return;\n      }\n\n      const value = formData[field.name];\n      if (field.type === 'number') {\n        if (value === '' || isNaN(Number(value))) {\n          newErrors[field.name] = true;\n        } else {\n          processedData[field.name] = Number(value);\n        }\n      } else {\n        if (!value) {\n          newErrors[field.name] = true;\n        }\n      }\n    });\n\n    if (Object.keys(newErrors).length > 0) {\n      setLoadingSubmitButton(false);\n      setErrors(newErrors);\n      return;\n    }\n\n    await onSubmit(processedData);\n    if (resetFields) setFormData(initialState);\n\n    setLoadingSubmitButton(false);\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={classNames('flex w-full flex-col gap-y-4', className, {\n        'max-w-lg': useMaxWidth,\n      })}\n    >\n      <div className=\"flex flex-col\">\n        {title && <span className=\"text-lg font-semibold\">{title}</span>}\n        {headline && <span className=\"text-xs text-foreground-subtle\">{headline}</span>}\n      </div>\n\n      {fields.map((field) => {\n        const isHidden = field.hidden && field.hidden(formData);\n        return (\n          !isHidden && (\n            <InputField\n              key={field.name}\n              field={field}\n              value={String(formData[field.name] ?? field.defaultValue ?? '')}\n              onChangeHook={(name, value) => handleChange(name, value as TFormValue)}\n              error={field.isRequired !== false ? !!errors[field.name] : false}\n            />\n          )\n        );\n      })}\n\n      <div className=\"flex justify-end\">\n        <ControlledButton\n          type=\"submit\"\n          disabled={loadingSubmitButton}\n          className=\"inter-font w-32 rounded-md py-2 capitalize\"\n        >\n          {loadingSubmitButton ? <LoadingSpinner size={4} /> : submitButtonLabel}\n        </ControlledButton>\n      </div>\n    </form>\n  );\n};\n\nexport default ControlledForm;\n"],"names":["value"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import * as React from 'react';
+export type TImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> & {
+    src: string;
+    fallbackSrc?: string;
+    loader?: JSX.Element | null;
+    unloader?: JSX.Element | null;
+    decode?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<TImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export default _default;

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { generateUUID } from "../../../helpers/utilityHelpers.js";
+import useImage from "./useImage.js";
+function Img({
+  decode = true,
+  src: srcParam = "",
+  fallbackSrc,
+  loader = null,
+  unloader = null,
+  ...imgProps
+  // anything else will be passed to the <img> element
+}, ref) {
+  const primary = useImage({ srcParam, decode });
+  const primaryFailed = !primary.src && !primary.isLoading;
+  const shouldFallback = primaryFailed && Boolean(fallbackSrc) && fallbackSrc !== srcParam;
+  const fallback = useImage({ srcParam: shouldFallback ? fallbackSrc ?? "" : "", decode });
+  const src = primary.src ?? (shouldFallback ? fallback.src : void 0);
+  const isLoading = primary.isLoading || shouldFallback && fallback.isLoading;
+  if (src) return /* @__PURE__ */ jsx("img", { ref, src, alt: `controlled-image-alt-${generateUUID()}`, ...imgProps });
+  if (isLoading) return loader;
+  if (unloader) return unloader;
+  return null;
+}
+const Img$1 = forwardRef(Img);
+export {
+  Img$1 as default
+};
+//# sourceMappingURL=Img.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Img.js","sources":["../../../../src/components/Form/ControlledImage/Img.tsx"],"sourcesContent":["import { forwardRef, JSX } from 'react';\nimport * as React from 'react';\n\nimport { generateUUID } from '@/helpers/utilityHelpers';\n\nimport useImage from './useImage';\n\nexport type TImgProps = Omit<\n  React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,\n  'src'\n> & {\n  src: string;\n  fallbackSrc?: string;\n  loader?: JSX.Element | null;\n  unloader?: JSX.Element | null;\n  decode?: boolean;\n};\n\nfunction Img(\n  {\n    decode = true,\n    src: srcParam = '',\n    fallbackSrc,\n    loader = null,\n    unloader = null,\n    ...imgProps // anything else will be passed to the <img> element\n  }: TImgProps,\n  ref: React.LegacyRef<HTMLImageElement> | undefined,\n): JSX.Element | null {\n  const primary = useImage({ srcParam, decode });\n\n  // Fallback: quando o src preferido falha (ex.: derivada de CDN ainda não gerada),\n  // tenta a URL alternativa (tipicamente a original) antes de mostrar o unloader.\n  const primaryFailed = !primary.src && !primary.isLoading;\n  const shouldFallback = primaryFailed && Boolean(fallbackSrc) && fallbackSrc !== srcParam;\n  const fallback = useImage({ srcParam: shouldFallback ? (fallbackSrc ?? '') : '', decode });\n\n  const src = primary.src ?? (shouldFallback ? fallback.src : undefined);\n  const isLoading = primary.isLoading || (shouldFallback && fallback.isLoading);\n\n  // show img if loaded\n  if (src) return <img ref={ref} src={src} alt={`controlled-image-alt-${generateUUID()}`} {...imgProps} />;\n\n  // show loader if we have one and were still trying to load image\n  if (isLoading) return loader;\n\n  // show unloader if we have one and we have no more work to do\n  if (unloader) return unloader;\n\n  return null;\n}\n\nexport default forwardRef<HTMLImageElement, TImgProps>(Img);\n"],"names":[],"mappings":";;;;AAkBA,SAAS,IACP;AAAA,EACE,SAAS;AAAA,EACT,KAAK,WAAW;AAAA,EAChB;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,GAAG;AAAA;AACL,GACA,KACoB;AACpB,QAAM,UAAU,SAAS,EAAE,UAAU,QAAQ;AAI7C,QAAM,gBAAgB,CAAC,QAAQ,OAAO,CAAC,QAAQ;AAC/C,QAAM,iBAAiB,iBAAiB,QAAQ,WAAW,KAAK,gBAAgB;AAChF,QAAM,WAAW,SAAS,EAAE,UAAU,iBAAkB,eAAe,KAAM,IAAI,QAAQ;AAEzF,QAAM,MAAM,QAAQ,QAAQ,iBAAiB,SAAS,MAAM;AAC5D,QAAM,YAAY,QAAQ,aAAc,kBAAkB,SAAS;AAGnE,MAAI,IAAK,QAAO,oBAAC,OAAA,EAAI,KAAU,KAAU,KAAK,wBAAwB,aAAA,CAAc,IAAK,GAAG,SAAA,CAAU;AAGtG,MAAI,UAAW,QAAO;AAGtB,MAAI,SAAU,QAAO;AAErB,SAAO;AACT;AAEA,MAAA,QAAe,WAAwC,GAAG;"}