@lax-wp/design-system 0.13.33-beta.7 → 0.13.33

package/dist/components/forms/icon-picker/IconPicker.es.js

@@ -1,13 +1,13 @@
 import { jsx as t, jsxs as b } from "react/jsx-runtime";
 import v from "../../../_virtual/index.es.js";
-import N, { Suspense as I, useState as w, useRef as g, useEffect as P } from "react";
+import N, { Suspense as I, useState as x, useRef as g, useEffect as P } from "react";
 import { FixedSizeGrid as S } from "react-window";
 import * as h from "@mui/icons-material";
 import { IconButton as R } from "@mui/material";
 import { Popover as D, Tooltip as L } from "antd";
 import { Typography as k } from "../../data-display/typography/Typography.es.js";
 import { InputField as E } from "../input-field/InputField.es.js";
-import { COUNTRY_CODES as O, countryNameFromCode as x } from "../../../types/icon-picker.es.js";
+import { COUNTRY_CODES as O, countryNameFromCode as w } from "../../../types/icon-picker.es.js";
 import { getFlagComponent as T } from "../../../utils/countryFlags.es.js";
 import { InputLabel as j } from "../shared/InputLabel.es.js";
 const W = Object.keys(h).filter(
@@ -17,23 +17,23 @@ const W = Object.keys(h).filter(
   ...(O || []).map((e) => `flag-${e}`)
 ], z = (e) => {
   if (e?.startsWith("flag-")) {
-    const a = e?.replace("flag-", "");
-    return x(a || "") || a;
+    const l = e?.replace("flag-", "");
+    return w(l || "") || l;
   }
   return e.replaceAll(/([A-Z])/g, " $1").trim();
 }, B = ({
   onChange: e,
-  selectedIcon: a,
+  selectedIcon: l,
   setOpen: u
 }) => {
-  const [c, f] = w(""), l = ($ || []).filter((r) => {
+  const [i, f] = x(""), a = ($ || []).filter((r) => {
     if (r?.startsWith("flag-")) {
       const n = r?.replace("flag-", "");
-      return n?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "") || x(n || "")?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "");
+      return n?.toLowerCase()?.includes(i?.trim()?.toLowerCase() || "") || w(n || "")?.toLowerCase()?.includes(i?.trim()?.toLowerCase() || "");
     }
-    return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase() || "");
-  }), m = (r, n) => {
-    if (n.stopPropagation(), a === r) {
+    return r?.trim()?.toLowerCase()?.includes(i?.trim()?.toLowerCase() || "");
+  }), d = (r, n) => {
+    if (n.stopPropagation(), l === r) {
       e?.(null);
       return;
     }
@@ -53,39 +53,53 @@ const W = Object.keys(h).filter(
             id: "input-field-icon-picker",
             placeholder: "Search icons...",
             onChange: (r) => f(r || ""),
-            fieldSuffix: /* @__PURE__ */ t(h.Search, { className: "!w-4 !h-4 text-neutral-400" })
+            fieldSuffix: /* @__PURE__ */ t(
+              h.Search,
+              {
+                sx: {
+                  width: 16,
+                  height: 16,
+                  color: "rgb(152 162 179)"
+                  // neutral-400
+                }
+              }
+            )
           }
         ),
         /* @__PURE__ */ t(
           S,
           {
             columnCount: 5,
-            rowCount: Math.ceil((l?.length || 0) / 5),
+            rowCount: Math.ceil((a?.length || 0) / 5),
             columnWidth: 40,
             rowHeight: 40,
             width: 220,
             height: 240,
-            children: ({ columnIndex: r, rowIndex: n, style: d }) => {
-              const p = n * 5 + r, i = l?.[p];
-              return i ? /* @__PURE__ */ t("div", { style: d, className: "p-1", children: /* @__PURE__ */ t(L, { title: z(i), placement: "bottom", children: /* @__PURE__ */ t(
+            children: ({ columnIndex: r, rowIndex: n, style: m }) => {
+              const p = n * 5 + r, c = a?.[p];
+              return c ? /* @__PURE__ */ t("div", { style: { ...m, padding: "4px" }, children: /* @__PURE__ */ t(L, { title: z(c), placement: "bottom", children: /* @__PURE__ */ t(
                 R,
                 {
                   type: "button",
                   className: v(
                     "flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",
                     {
-                      "!bg-primary-50 dark:!bg-black-800": a === i
+                      "!bg-primary-50 dark:!bg-black-800": l === c
                     }
                   ),
-                  onClick: (s) => m(i, s),
+                  onClick: (s) => d(c, s),
                   onKeyDown: (s) => {
                     s.key === "Enter" && (s.preventDefault(), s.stopPropagation());
                   },
                   children: /* @__PURE__ */ t(
                     y,
                     {
-                      iconName: i,
-                      className: "!w-5 !h-5 text-neutral-900 dark:text-white"
+                      iconName: c,
+                      sx: {
+                        width: 20,
+                        height: 20
+                      },
+                      className: "text-neutral-900 dark:text-white"
                     }
                   )
                 }
@@ -96,29 +110,29 @@ const W = Object.keys(h).filter(
       ]
     }
   );
-}, y = ({ iconName: e, sx: a, className: u, isHovering: c }) => {
+}, y = ({ iconName: e, sx: l, className: u, isHovering: i }) => {
   if (e?.startsWith?.("flag-")) {
-    const l = e?.replace("flag-", "");
-    return T?.(l || "", c || !1) || /* @__PURE__ */ t("div", { children: "-" });
+    const a = e?.replace("flag-", "");
+    return T?.(a || "", i || !1) || /* @__PURE__ */ t("div", { children: "-" });
   }
   const f = h?.[e];
-  return f ? /* @__PURE__ */ t(f, { sx: a, className: u, isHovering: c }) : /* @__PURE__ */ t("div", { children: "-" });
+  return f ? /* @__PURE__ */ t(f, { sx: l, className: u, isHovering: i }) : /* @__PURE__ */ t("div", { children: "-" });
 }, F = ({
   selectedIcon: e,
-  onChange: a,
+  onChange: l,
   label: u,
-  required: c = !1,
+  required: i = !1,
   allowClear: f = !0,
-  disabled: l = !1,
-  errorMessage: m,
+  disabled: a = !1,
+  errorMessage: d,
   dropdownPosition: r = "bottom"
 }) => {
-  const [n, d] = w(!1), p = g(!1), i = g(null), s = g(!1);
+  const [n, m] = x(!1), p = g(!1), c = g(null), s = g(!1);
   P(() => {
-    s.current && !n && i.current?.focus(), s.current = n;
+    s.current && !n && c.current?.focus(), s.current = n;
   }, [n]);
   const C = (o) => {
-    o.stopPropagation(), a?.("");
+    o.stopPropagation(), l?.("");
   };
   return /* @__PURE__ */ t(
     D,
@@ -129,21 +143,21 @@ const W = Object.keys(h).filter(
       getPopupContainer: (o) => o?.parentElement || document.body,
       open: n,
       onOpenChange: (o) => {
-        o ? (p.current && d(!0), p.current = !1) : d(!1);
+        o ? (p.current && m(!0), p.current = !1) : m(!1);
       },
-      content: /* @__PURE__ */ t(B, { onChange: a, selectedIcon: e, setOpen: d }),
+      content: /* @__PURE__ */ t(B, { onChange: l, selectedIcon: e, setOpen: m }),
       children: /* @__PURE__ */ b("div", { className: "flex flex-col gap-1", children: [
-        u ? /* @__PURE__ */ t(j, { label: u || "", required: c || !1 }) : null,
+        u ? /* @__PURE__ */ t(j, { label: u || "", required: i || !1 }) : null,
         /* @__PURE__ */ b(
           "button",
           {
-            ref: i,
+            ref: c,
             type: "button",
             id: `btn-icon-picker-icon-${e ? "selected" : "unselected"}`,
-            className: `lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${m ? "border-red-500" : "focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,
-            disabled: l,
+            className: `lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${a ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${d ? "border-red-500" : "focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,
+            disabled: a,
             onClick: (o) => {
-              if (l) {
+              if (a) {
                 o.preventDefault(), o.stopPropagation();
                 return;
               }
@@ -153,7 +167,7 @@ const W = Object.keys(h).filter(
               o.key === "Enter" && (o.preventDefault(), n || o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click());
             },
             children: [
-              e ? /* @__PURE__ */ t(y, { iconName: e, className: "!w-5 !h-5 text-neutral-900 dark:text-white" }) : /* @__PURE__ */ t(
+              e ? /* @__PURE__ */ t(y, { iconName: e, sx: { width: 20, height: 20 }, className: "text-neutral-900 dark:text-white" }) : /* @__PURE__ */ t(
                 k,
                 {
                   size: "small",
@@ -162,23 +176,24 @@ const W = Object.keys(h).filter(
                   children: "Select Icon"
                 }
               ),
-              e && f && !l ? /* @__PURE__ */ t(
+              e && f && !a ? /* @__PURE__ */ t(
                 h.CloseRounded,
                 {
-                  className: "!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",
+                  sx: { width: 20, height: 20 },
+                  className: "hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",
                   onClick: C
                 }
               ) : null
             ]
           }
         ),
-        m && /* @__PURE__ */ t(k, { size: "extra-small", className: "text-red-500 font-medium", children: m })
+        d && /* @__PURE__ */ t(k, { size: "extra-small", className: "text-red-500 font-medium", children: d })
       ] })
     }
   );
 }, M = N.lazy(
   () => Promise.resolve({
-    default: (e) => /* @__PURE__ */ t(I, { fallback: /* @__PURE__ */ t("div", { className: "min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md" }), children: /* @__PURE__ */ t(F, { ...e }) })
+    default: (e) => /* @__PURE__ */ t(I, { fallback: /* @__PURE__ */ t("div", { className: "min-w-[83px] h-[30px] animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md" }), children: /* @__PURE__ */ t(F, { ...e }) })
   })
 );
 export {

package/dist/components/forms/icon-picker/IconPicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
+{"version":3,"file":"IconPicker.es.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search\n            sx={{\n              width: 16,\n              height: 16,\n              color: \"rgb(152 162 179)\", // neutral-400\n            }}\n          />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={{ ...style, padding: \"4px\" }}>\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    sx={{\n                      width: 20,\n                      height: 20,\n                    }}\n                    className=\"text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} sx={{ width: 20, height: 20 }} className='text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='medium'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              sx={{ width: 20, height: 20 }}\n              className='hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-[83px] h-[30px] animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}

package/dist/components/forms/input-field/InputField.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.cjs.js","sources":["../../../../src/components/forms/input-field/InputField.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Props for the InputField component\n */\nexport interface InputFieldProps {\n  /** Unique identifier for the input field */\n  id: string;\n  /** The current value of the input field */\n  value?: string;\n  /** Callback function called when the input value changes */\n  onChange: (value: string) => void;\n  /** Callback function called on key down events */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Error message to display below the input */\n  message?: string;\n  /** Success message to display below the input */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Default value for the input field */\n  defaultValue?: string;\n  /** Whether the input field is disabled */\n  disabled?: boolean;\n  /** Maximum value for number inputs */\n  max?: number;\n  /** Minimum value for number inputs */\n  min?: number;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Label text for the input field */\n  label?: string;\n  /** Input type (text, email, password, number, etc.) */\n  type?: string;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Icon or element to display at the end of the input */\n  fieldSuffix?: React.ReactNode;\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassNames?: string;\n  /** Additional CSS classes for the input element */\n  inputClassNames?: string;\n  /** Inline styles for the input element */\n  inputStyle?: React.CSSProperties;\n  /** Additional props to pass to the input element */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n/**\n * A highly customizable input field component with label, validation, and styling support.\n *\n * @example\n * ```tsx\n * <InputField\n *   id=\"email\"\n *   label=\"Email Address\"\n *   type=\"email\"\n *   value={email}\n *   onChange={setEmail}\n *   placeholder=\"Enter your email\"\n *   required\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      id,\n      value,\n      onChange,\n      onKeyDown,\n      message,\n      messageType = \"default\",\n      defaultValue,\n      disabled = false,\n      max,\n      min,\n      required = false,\n      label,\n      type = \"text\",\n      placeholder,\n      fieldSuffix,\n      wrapperClassNames,\n      inputClassNames,\n      inputStyle = {},\n      inputProps,\n    },\n    ref\n  ) => {\n    // Refs and state for dynamic padding\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const [suffixWidth, setSuffixWidth] = useState<number>(0);\n\n    // Base styles for different states\n    const getInputBorderClasses = (): string => {\n      if (messageType === \"error\")\n        return \"border-red-300 focus:border-red-500 focus:ring-red-200\";\n      if (messageType === \"success\")\n        return \"border-green-300 focus:border-green-500 focus:ring-green-200\";\n      if (messageType === \"info\")\n        return \"border-blue-300 focus:border-blue-500 focus:ring-blue-200\";\n      return \"border-neutral-200 dark:border-black-600 focus:border-primary-500 dark:focus:border-primary-400 focus:ring-primary-200 dark:focus:ring-primary-400/20\";\n    };\n\n    // Typography class for message\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-blue-500 dark:text-blue-400\";\n      return \"text-neutral-500 dark:text-black-100\";\n    };\n\n    const inputId = id || `input-${label?.replace(/\\s+/g, \"-\").toLowerCase()}`;\n\n    // Effect to measure suffix width and update input padding\n    useEffect(() => {\n      if (fieldSuffix && suffixRef.current) {\n        const resizeObserver = new ResizeObserver((entries) => {\n          const suffixElement = entries[0];\n          if (suffixElement) {\n            // Add extra padding (8px base + 4px buffer) to prevent overlap\n            const calculatedWidth =\n              Math.ceil(suffixElement.contentRect.width) + 24;\n            setSuffixWidth(calculatedWidth);\n          }\n        });\n\n        resizeObserver.observe(suffixRef.current);\n\n        // Initial measurement\n        const initialWidth = Math.ceil(suffixRef.current.offsetWidth) + 12;\n        setSuffixWidth(initialWidth);\n\n        return () => {\n          resizeObserver.disconnect();\n        };\n      } else {\n        setSuffixWidth(0);\n      }\n    }, [fieldSuffix]);\n\n    // Calculate dynamic padding style\n    const getDynamicInputStyle = (): React.CSSProperties => {\n      const basePadding = 12; // Default px-3 is 12px\n      const rightPadding = fieldSuffix\n        ? Math.max(basePadding, suffixWidth)\n        : basePadding;\n\n      return {\n        \"--input-bg-color\": \"var(--tw-bg-opacity, 1) rgb(var(--bg-color))\",\n        \"--text-color\": \"#111827\",\n        paddingRight: `${rightPadding}px`,\n        ...inputStyle,\n      } as React.CSSProperties;\n    };\n\n    return (\n      <div className={cn(\"flex flex-col w-full\", wrapperClassNames)}>\n        {/* Autofill styles */}\n        <style>\n          {`\n              .input-field input:-webkit-autofill,\n              .input-field input:-webkit-autofill:hover,\n              .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: var(--text-color) !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n              \n              .dark .input-field input:-webkit-autofill,\n              .dark .input-field input:-webkit-autofill:hover,\n              .dark .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: white !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n              }\n            `}\n        </style>\n\n        {/* Label */}\n        {label ? (\n          <label\n            htmlFor={inputId}\n            className=\"mb-1 text-xs font-medium text-gray-600 dark:text-gray-300 inline-flex items-center gap-1\"\n          >\n            <div className=\"flex flex-wrap items-center justify-between w-full\">\n              <div className=\"inline-flex flex-wrap items-center gap-1\">\n              <InputLabel label={label || \"\"} required={required || false} />\n                {/* TODO: Add tooltip support when Tooltip component is available */}\n                {/* {tooltip && (\n                    <Tooltip placement=\"top\" title={tooltip}>\n                      <div className=\"cursor-pointer\">\n                        <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n                      </div>\n                    </Tooltip>\n                  )} */}\n              </div>\n            </div>\n          </label>\n        ) : null}\n\n        {/* Input Container */}\n        <div className=\"relative input-field\">\n          <input\n            {...inputProps}\n            ref={ref}\n            id={inputId}\n            type={type}\n            value={value}\n            defaultValue={defaultValue}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            max={max}\n            min={min}\n            onKeyDown={onKeyDown}\n            style={getDynamicInputStyle()}\n            className={cn(\n              // Base styles\n              \"border border-solid h-8 rounded-md block w-full pl-3\",\n              \"text-sm font-medium text-neutral-900 dark:text-black-100\",\n              \"bg-white dark:bg-black-600\",\n              \"transition-colors duration-200 ease-in-out\",\n              \"focus:outline-none focus:ring-2\",\n\n              // State-specific styles\n              getInputBorderClasses(),\n\n              // Disabled styles\n              disabled &&\n                \"opacity-70 cursor-not-allowed bg-neutral-50 dark:bg-black-700\",\n\n              // Custom classes\n              inputClassNames\n            )}\n            onChange={(e) => onChange(e.target.value)}\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Suffix Icon */}\n          {fieldSuffix && (\n            <div\n              ref={suffixRef}\n              className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"\n            >\n              {fieldSuffix}\n            </div>\n          )}\n        </div>\n\n        {/* Error Message */}\n        <AnimatePresence>\n          {message && (\n            <motion.div\n              initial={{ opacity: 0, y: -10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n            >\n              <Typography\n                className={cn(\"mt-1\", getMessageTypographyClass())}\n                appearance=\"custom\"\n                size=\"extra-small\"\n                variant=\"medium\"\n              >\n                {message}\n              </Typography>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["InputField","forwardRef","id","value","onChange","onKeyDown","message","messageType","defaultValue","disabled","max","min","required","label","type","placeholder","fieldSuffix","wrapperClassNames","inputClassNames","inputStyle","inputProps","ref","suffixRef","useRef","suffixWidth","setSuffixWidth","useState","getInputBorderClasses","getMessageTypographyClass","inputId","useEffect","resizeObserver","entries","suffixElement","calculatedWidth","initialWidth","getDynamicInputStyle","cn","jsx","InputLabel","jsxs","e","AnimatePresence","motion","Typography"],"mappings":"qTAkEaA,EAAaC,EAAAA,WACxB,CACE,CACE,GAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,YAAAC,EAAc,UACd,aAAAC,EACA,SAAAC,EAAW,GACX,IAAAC,EACA,IAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EACA,KAAAC,EAAO,OACP,YAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,WAAAC,EAAa,CAAA,EACb,WAAAC,CAAA,EAEFC,IACG,CAEH,MAAMC,EAAYC,EAAAA,OAAuB,IAAI,EACvC,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAiB,CAAC,EAGlDC,EAAwB,IACxBpB,IAAgB,QACX,yDACLA,IAAgB,UACX,+DACLA,IAAgB,OACX,4DACF,wJAIHqB,EAA4B,IAC5BrB,IAAgB,QAAgB,iCAChCA,IAAgB,UACX,qCACLA,IAAgB,OAAe,mCAC5B,uCAGHsB,EAAU3B,GAAM,SAASW,GAAO,QAAQ,OAAQ,GAAG,EAAE,YAAA,CAAa,GAGxEiB,EAAAA,UAAU,IAAM,CACd,GAAId,GAAeM,EAAU,QAAS,CACpC,MAAMS,EAAiB,IAAI,eAAgBC,GAAY,CACrD,MAAMC,EAAgBD,EAAQ,CAAC,EAC/B,GAAIC,EAAe,CAEjB,MAAMC,EACJ,KAAK,KAAKD,EAAc,YAAY,KAAK,EAAI,GAC/CR,EAAeS,CAAe,CAChC,CACF,CAAC,EAEDH,EAAe,QAAQT,EAAU,OAAO,EAGxC,MAAMa,EAAe,KAAK,KAAKb,EAAU,QAAQ,WAAW,EAAI,GAChE,OAAAG,EAAeU,CAAY,EAEpB,IAAM,CACXJ,EAAe,WAAA,CACjB,CACF,MACEN,EAAe,CAAC,CAEpB,EAAG,CAACT,CAAW,CAAC,EAGhB,MAAMoB,EAAuB,KAMpB,CACL,mBAAoB,+CACpB,eAAgB,UAChB,aAAc,GAPKpB,EACjB,KAAK,IAAI,GAAaQ,CAAW,EACjC,EAK2B,KAC7B,GAAGL,CAAA,GAIP,cACG,MAAA,CAAI,UAAWkB,EAAG,uBAAwBpB,CAAiB,EAE1D,SAAA,CAAAqB,MAAC,QAAA,CACE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAgBH,EAGCzB,EACCyB,EAAAA,IAAC,QAAA,CACC,QAAST,EACT,UAAU,2FAEV,eAAC,MAAA,CAAI,UAAU,qDACb,SAAAS,MAAC,OAAI,UAAU,2CACf,SAAAA,EAAAA,IAACC,EAAAA,WAAA,CAAW,MAAO1B,GAAS,GAAI,SAAUD,GAAY,GAAO,EAS7D,CAAA,CACF,CAAA,CAAA,EAEA,KAGJ4B,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACb,SAAA,CAAAF,EAAAA,IAAC,QAAA,CACE,GAAGlB,EACJ,IAAAC,EACA,GAAIQ,EACJ,KAAAf,EACA,MAAAX,EACA,aAAAK,EACA,YAAAO,EACA,SAAAH,EACA,SAAAH,EACA,IAAAC,EACA,IAAAC,EACA,UAAAN,EACA,MAAO+B,EAAA,EACP,UAAWC,EAET,uDACA,2DACA,6BACA,6CACA,kCAGAV,EAAA,EAGAlB,GACE,gEAGFS,CAAA,EAEF,SAAWuB,GAAMrC,EAASqC,EAAE,OAAO,KAAK,EACxC,QAAUA,GAAMA,EAAE,gBAAA,CAAgB,CAAA,EAInCzB,GACCsB,EAAAA,IAAC,MAAA,CACC,IAAKhB,EACL,UAAU,wEAET,SAAAN,CAAA,CAAA,CACH,EAEJ,EAGAsB,EAAAA,IAACI,EAAAA,iBACE,SAAApC,GACCgC,EAAAA,IAACK,EAAAA,OAAO,IAAP,CACC,QAAS,CAAE,QAAS,EAAG,EAAG,GAAA,EAC1B,QAAS,CAAE,QAAS,EAAG,EAAG,CAAA,EAC1B,KAAM,CAAE,QAAS,EAAG,EAAG,GAAA,EACvB,WAAY,CAAE,SAAU,EAAA,EAExB,SAAAL,EAAAA,IAACM,EAAAA,WAAA,CACC,UAAWP,EAAG,OAAQT,GAA2B,EACjD,WAAW,SACX,KAAK,cACL,QAAQ,SAEP,SAAAtB,CAAA,CAAA,CACH,CAAA,CACF,CAEJ,CAAA,EACF,CAEJ,CACF,EAEAN,EAAW,YAAc"}
+{"version":3,"file":"InputField.cjs.js","sources":["../../../../src/components/forms/input-field/InputField.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Props for the InputField component\n */\nexport interface InputFieldProps {\n  /** Unique identifier for the input field */\n  id: string;\n  /** The current value of the input field */\n  value?: string;\n  /** Callback function called when the input value changes */\n  onChange: (value: string) => void;\n  /** Callback function called on key down events */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Error message to display below the input */\n  message?: string;\n  /** Success message to display below the input */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Default value for the input field */\n  defaultValue?: string;\n  /** Whether the input field is disabled */\n  disabled?: boolean;\n  /** Maximum value for number inputs */\n  max?: number;\n  /** Minimum value for number inputs */\n  min?: number;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Label text for the input field */\n  label?: string;\n  /** Input type (text, email, password, number, etc.) */\n  type?: string;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Icon or element to display at the end of the input */\n  fieldSuffix?: React.ReactNode;\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassNames?: string;\n  /** Additional CSS classes for the input element */\n  inputClassNames?: string;\n  /** Inline styles for the input element */\n  inputStyle?: React.CSSProperties;\n  /** Additional props to pass to the input element */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n/**\n * A highly customizable input field component with label, validation, and styling support.\n *\n * @example\n * ```tsx\n * <InputField\n *   id=\"email\"\n *   label=\"Email Address\"\n *   type=\"email\"\n *   value={email}\n *   onChange={setEmail}\n *   placeholder=\"Enter your email\"\n *   required\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      id,\n      value,\n      onChange,\n      onKeyDown,\n      message,\n      messageType = \"default\",\n      defaultValue,\n      disabled = false,\n      max,\n      min,\n      required = false,\n      label,\n      type = \"text\",\n      placeholder,\n      fieldSuffix,\n      wrapperClassNames,\n      inputClassNames,\n      inputStyle = {},\n      inputProps,\n    },\n    ref\n  ) => {\n    // Refs and state for dynamic padding\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const [suffixWidth, setSuffixWidth] = useState<number>(0);\n\n    // Base styles for different states\n    const getInputBorderClasses = (): string => {\n      if (messageType === \"error\")\n        return \"border-red-300 focus:border-red-500 focus:ring-red-200\";\n      if (messageType === \"success\")\n        return \"border-green-300 focus:border-green-500 focus:ring-green-200\";\n      if (messageType === \"info\")\n        return \"border-blue-300 focus:border-blue-500 focus:ring-blue-200\";\n      return \"border-neutral-200 dark:border-black-600 focus:border-primary-500 dark:focus:border-primary-400 focus:ring-primary-200 dark:focus:ring-primary-400/20\";\n    };\n\n    // Typography class for message\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-blue-500 dark:text-blue-400\";\n      return \"text-neutral-500 dark:text-black-100\";\n    };\n\n    const inputId = id || `input-${label?.replace(/\\s+/g, \"-\").toLowerCase()}`;\n\n    // Effect to measure suffix width and update input padding\n    useEffect(() => {\n      if (fieldSuffix && suffixRef.current) {\n        const resizeObserver = new ResizeObserver((entries) => {\n          const suffixElement = entries[0];\n          if (suffixElement) {\n            // Add extra padding (8px base + 4px buffer) to prevent overlap\n            const calculatedWidth =\n              Math.ceil(suffixElement.contentRect.width) + 24;\n            setSuffixWidth(calculatedWidth);\n          }\n        });\n\n        resizeObserver.observe(suffixRef.current);\n\n        // Initial measurement\n        const initialWidth = Math.ceil(suffixRef.current.offsetWidth) + 12;\n        setSuffixWidth(initialWidth);\n\n        return () => {\n          resizeObserver.disconnect();\n        };\n      } else {\n        setSuffixWidth(0);\n      }\n    }, [fieldSuffix]);\n\n    // Calculate dynamic padding style\n    const getDynamicInputStyle = (): React.CSSProperties => {\n      const basePadding = 12; // Default px-3 is 12px\n      const rightPadding = fieldSuffix\n        ? Math.max(basePadding, suffixWidth)\n        : basePadding;\n\n      return {\n        \"--input-bg-color\": \"var(--tw-bg-opacity, 1) rgb(var(--bg-color))\",\n        \"--text-color\": \"#111827\",\n        paddingRight: `${rightPadding}px`,\n        ...inputStyle,\n      } as React.CSSProperties;\n    };\n\n    return (\n      <div className={cn(\"flex flex-col w-full\", wrapperClassNames)}>\n        {/* Autofill styles */}\n        <style>\n          {`\n              .input-field input:-webkit-autofill,\n              .input-field input:-webkit-autofill:hover,\n              .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: var(--text-color) !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n              \n              .dark .input-field input:-webkit-autofill,\n              .dark .input-field input:-webkit-autofill:hover,\n              .dark .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: white !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n              }\n            `}\n        </style>\n\n        {/* Label */}\n        {label ? (\n          <label\n            htmlFor={inputId}\n            className=\"mb-1 text-xs font-medium text-gray-600 dark:text-gray-300 inline-flex items-center gap-1\"\n          >\n            <div className=\"flex flex-wrap items-center justify-between w-full\">\n              <div className=\"inline-flex flex-wrap items-center gap-1\">\n              <InputLabel label={label || \"\"} required={required || false} />\n                {/* TODO: Add tooltip support when Tooltip component is available */}\n                {/* {tooltip && (\n                    <Tooltip placement=\"top\" title={tooltip}>\n                      <div className=\"cursor-pointer\">\n                        <HelpIcon className=\"text-neutral-500 w-3 h-3\" />\n                      </div>\n                    </Tooltip>\n                  )} */}\n              </div>\n            </div>\n          </label>\n        ) : null}\n\n        {/* Input Container */}\n        <div className=\"relative input-field\">\n          <input\n            {...inputProps}\n            ref={ref}\n            id={inputId}\n            type={type}\n            value={value}\n            defaultValue={defaultValue}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            max={max}\n            min={min}\n            onKeyDown={onKeyDown}\n            style={getDynamicInputStyle()}\n            className={cn(\n              // Base styles\n              \"border border-solid h-8 rounded-md block w-full pl-3\",\n              \"text-sm font-medium text-neutral-900 dark:text-black-100\",\n              \"bg-white dark:bg-black-600\",\n              \"transition-colors duration-200 ease-in-out\",\n              \"focus:outline-none focus:ring-2\",\n\n              // State-specific styles\n              getInputBorderClasses(),\n\n              // Disabled styles\n              disabled &&\n                \"opacity-70 cursor-not-allowed bg-neutral-50 dark:bg-black-700\",\n\n              // Custom classes\n              inputClassNames\n            )}\n            onChange={(e) => onChange(e.target.value)}\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Suffix Icon */}\n          {fieldSuffix && (\n            <div\n              ref={suffixRef}\n              className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"\n            >\n              {fieldSuffix}\n            </div>\n          )}\n        </div>\n\n        {/* Error Message */}\n        <AnimatePresence>\n          {message && (\n            <motion.div\n              initial={{ opacity: 0, y: -10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n            >\n              <Typography\n                className={cn(\"mt-1\", getMessageTypographyClass())}\n                appearance=\"custom\"\n                size=\"extra-small\"\n                variant=\"medium\"\n              >\n                {message}\n              </Typography>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["InputField","forwardRef","id","value","onChange","onKeyDown","message","messageType","defaultValue","disabled","max","min","required","label","type","placeholder","fieldSuffix","wrapperClassNames","inputClassNames","inputStyle","inputProps","ref","suffixRef","useRef","suffixWidth","setSuffixWidth","useState","getInputBorderClasses","getMessageTypographyClass","inputId","useEffect","resizeObserver","entries","suffixElement","calculatedWidth","initialWidth","getDynamicInputStyle","cn","jsx","InputLabel","jsxs","e","AnimatePresence","motion","Typography"],"mappings":"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"}

package/dist/components/forms/input-field/InputField.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.es.js","sources":["../../../../src/components/forms/input-field/InputField.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Props for the InputField component\n */\nexport interface InputFieldProps {\n  /** Unique identifier for the input field */\n  id: string;\n  /** The current value of the input field */\n  value?: string;\n  /** Callback function called when the input value changes */\n  onChange: (value: string) => void;\n  /** Callback function called on key down events */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Error message to display below the input */\n  message?: string;\n  /** Success message to display below the input */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Default value for the input field */\n  defaultValue?: string;\n  /** Whether the input field is disabled */\n  disabled?: boolean;\n  /** Maximum value for number inputs */\n  max?: number;\n  /** Minimum value for number inputs */\n  min?: number;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Label text for the input field */\n  label?: string;\n  /** Input type (text, email, password, number, etc.) */\n  type?: string;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Icon or element to display at the end of the input */\n  fieldSuffix?: React.ReactNode;\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassNames?: string;\n  /** Additional CSS classes for the input element */\n  inputClassNames?: string;\n  /** Inline styles for the input element */\n  inputStyle?: React.CSSProperties;\n  /** Additional props to pass to the input element */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n/**\n * A highly customizable input field component with label, validation, and styling support.\n *\n * @example\n * ```tsx\n * <InputField\n *   id=\"email\"\n *   label=\"Email Address\"\n *   type=\"email\"\n *   value={email}\n *   onChange={setEmail}\n *   placeholder=\"Enter your email\"\n *   required\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      id,\n      value,\n      onChange,\n      onKeyDown,\n      message,\n      messageType = \"default\",\n      defaultValue,\n      disabled = false,\n      max,\n      min,\n      required = false,\n      label,\n      type = \"text\",\n      placeholder,\n      fieldSuffix,\n      wrapperClassNames,\n      inputClassNames,\n      inputStyle = {},\n      inputProps,\n    },\n    ref\n  ) => {\n    // Refs and state for dynamic padding\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const [suffixWidth, setSuffixWidth] = useState<number>(0);\n\n    // Base styles for different states\n    const getInputBorderClasses = (): string => {\n      if (messageType === \"error\")\n        return \"border-red-300 focus:border-red-500 focus:ring-red-200\";\n      if (messageType === \"success\")\n        return \"border-green-300 focus:border-green-500 focus:ring-green-200\";\n      if (messageType === \"info\")\n        return \"border-blue-300 focus:border-blue-500 focus:ring-blue-200\";\n      return \"border-neutral-200 dark:border-black-600 focus:border-primary-500 dark:focus:border-primary-400 focus:ring-primary-200 dark:focus:ring-primary-400/20\";\n    };\n\n    // Typography class for message\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-blue-500 dark:text-blue-400\";\n      return \"text-neutral-500 dark:text-black-100\";\n    };\n\n    const inputId = id || `input-${label?.replace(/\\s+/g, \"-\").toLowerCase()}`;\n\n    // Effect to measure suffix width and update input padding\n    useEffect(() => {\n      if (fieldSuffix && suffixRef.current) {\n        const resizeObserver = new ResizeObserver((entries) => {\n          const suffixElement = entries[0];\n          if (suffixElement) {\n            // Add extra padding (8px base + 4px buffer) to prevent overlap\n            const calculatedWidth =\n              Math.ceil(suffixElement.contentRect.width) + 24;\n            setSuffixWidth(calculatedWidth);\n          }\n        });\n\n        resizeObserver.observe(suffixRef.current);\n\n        // Initial measurement\n        const initialWidth = Math.ceil(suffixRef.current.offsetWidth) + 12;\n        setSuffixWidth(initialWidth);\n\n        return () => {\n          resizeObserver.disconnect();\n        };\n      } else {\n        setSuffixWidth(0);\n      }\n    }, [fieldSuffix]);\n\n    // Calculate dynamic padding style\n    const getDynamicInputStyle = (): React.CSSProperties => {\n      const basePadding = 12; // Default px-3 is 12px\n      const rightPadding = fieldSuffix\n        ? Math.max(basePadding, suffixWidth)\n        : basePadding;\n\n      return {\n        \"--input-bg-color\": \"var(--tw-bg-opacity, 1) rgb(var(--bg-color))\",\n        \"--text-color\": \"#111827\",\n        paddingRight: `${rightPadding}px`,\n        ...inputStyle,\n      } as React.CSSProperties;\n    };\n\n    return (\n      <div className={cn(\"flex flex-col w-full\", wrapperClassNames)}>\n        {/* Autofill styles */}\n        <style>\n          {`\n              .input-field input:-webkit-autofill,\n              .input-field input:-webkit-autofill:hover,\n              .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: var(--text-color) !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n              \n              .dark .input-field input:-webkit-autofill,\n              .dark .input-field input:-webkit-autofill:hover,\n              .dark .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: white !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n              }\n            `}\n        </style>\n\n        {/* Label */}\n        {label ? (\n          <label\n            htmlFor={inputId}\n            className=\"mb-1 text-xs font-medium text-gray-600 dark:text-gray-300 inline-flex items-center gap-1\"\n          >\n            <div className=\"flex flex-wrap items-center justify-between w-full\">\n              <div className=\"inline-flex flex-wrap items-center gap-1\">\n              <InputLabel label={label || \"\"} required={required || false} />\n                {/* TODO: Add tooltip support when Tooltip component is available */}\n                {/* {tooltip && (\n                    <Tooltip placement=\"top\" title={tooltip}>\n                      <div className=\"cursor-pointer\">\n                        <HelpIcon className=\"w-icon-sm h-icon-sm\" />\n                      </div>\n                    </Tooltip>\n                  )} */}\n              </div>\n            </div>\n          </label>\n        ) : null}\n\n        {/* Input Container */}\n        <div className=\"relative input-field\">\n          <input\n            {...inputProps}\n            ref={ref}\n            id={inputId}\n            type={type}\n            value={value}\n            defaultValue={defaultValue}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            max={max}\n            min={min}\n            onKeyDown={onKeyDown}\n            style={getDynamicInputStyle()}\n            className={cn(\n              // Base styles\n              \"border border-solid h-8 rounded-md block w-full pl-3\",\n              \"text-sm font-medium text-neutral-900 dark:text-black-100\",\n              \"bg-white dark:bg-black-600\",\n              \"transition-colors duration-200 ease-in-out\",\n              \"focus:outline-none focus:ring-2\",\n\n              // State-specific styles\n              getInputBorderClasses(),\n\n              // Disabled styles\n              disabled &&\n                \"opacity-70 cursor-not-allowed bg-neutral-50 dark:bg-black-700\",\n\n              // Custom classes\n              inputClassNames\n            )}\n            onChange={(e) => onChange(e.target.value)}\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Suffix Icon */}\n          {fieldSuffix && (\n            <div\n              ref={suffixRef}\n              className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"\n            >\n              {fieldSuffix}\n            </div>\n          )}\n        </div>\n\n        {/* Error Message */}\n        <AnimatePresence>\n          {message && (\n            <motion.div\n              initial={{ opacity: 0, y: -10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n            >\n              <Typography\n                className={cn(\"mt-1\", getMessageTypographyClass())}\n                appearance=\"custom\"\n                size=\"extra-small\"\n                variant=\"medium\"\n              >\n                {message}\n              </Typography>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["InputField","forwardRef","id","value","onChange","onKeyDown","message","messageType","defaultValue","disabled","max","min","required","label","type","placeholder","fieldSuffix","wrapperClassNames","inputClassNames","inputStyle","inputProps","ref","suffixRef","useRef","suffixWidth","setSuffixWidth","useState","getInputBorderClasses","getMessageTypographyClass","inputId","useEffect","resizeObserver","entries","suffixElement","calculatedWidth","initialWidth","getDynamicInputStyle","cn","jsx","InputLabel","jsxs","AnimatePresence","motion","Typography"],"mappings":"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"}
+{"version":3,"file":"InputField.es.js","sources":["../../../../src/components/forms/input-field/InputField.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputLabel } from \"../shared/InputLabel\";\n\n/**\n * Props for the InputField component\n */\nexport interface InputFieldProps {\n  /** Unique identifier for the input field */\n  id: string;\n  /** The current value of the input field */\n  value?: string;\n  /** Callback function called when the input value changes */\n  onChange: (value: string) => void;\n  /** Callback function called on key down events */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  /** Error message to display below the input */\n  message?: string;\n  /** Success message to display below the input */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Default value for the input field */\n  defaultValue?: string;\n  /** Whether the input field is disabled */\n  disabled?: boolean;\n  /** Maximum value for number inputs */\n  max?: number;\n  /** Minimum value for number inputs */\n  min?: number;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Label text for the input field */\n  label?: string;\n  /** Input type (text, email, password, number, etc.) */\n  type?: string;\n  /** Placeholder text for the input */\n  placeholder?: string;\n  /** Icon or element to display at the end of the input */\n  fieldSuffix?: React.ReactNode;\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassNames?: string;\n  /** Additional CSS classes for the input element */\n  inputClassNames?: string;\n  /** Inline styles for the input element */\n  inputStyle?: React.CSSProperties;\n  /** Additional props to pass to the input element */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n/**\n * A highly customizable input field component with label, validation, and styling support.\n *\n * @example\n * ```tsx\n * <InputField\n *   id=\"email\"\n *   label=\"Email Address\"\n *   type=\"email\"\n *   value={email}\n *   onChange={setEmail}\n *   placeholder=\"Enter your email\"\n *   required\n *   errorMessage={emailError}\n * />\n * ```\n */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      id,\n      value,\n      onChange,\n      onKeyDown,\n      message,\n      messageType = \"default\",\n      defaultValue,\n      disabled = false,\n      max,\n      min,\n      required = false,\n      label,\n      type = \"text\",\n      placeholder,\n      fieldSuffix,\n      wrapperClassNames,\n      inputClassNames,\n      inputStyle = {},\n      inputProps,\n    },\n    ref\n  ) => {\n    // Refs and state for dynamic padding\n    const suffixRef = useRef<HTMLDivElement>(null);\n    const [suffixWidth, setSuffixWidth] = useState<number>(0);\n\n    // Base styles for different states\n    const getInputBorderClasses = (): string => {\n      if (messageType === \"error\")\n        return \"border-red-300 focus:border-red-500 focus:ring-red-200\";\n      if (messageType === \"success\")\n        return \"border-green-300 focus:border-green-500 focus:ring-green-200\";\n      if (messageType === \"info\")\n        return \"border-blue-300 focus:border-blue-500 focus:ring-blue-200\";\n      return \"border-neutral-200 dark:border-black-600 focus:border-primary-500 dark:focus:border-primary-400 focus:ring-primary-200 dark:focus:ring-primary-400/20\";\n    };\n\n    // Typography class for message\n    const getMessageTypographyClass = (): string => {\n      if (messageType === \"error\") return \"text-red-500 dark:text-red-400\";\n      if (messageType === \"success\")\n        return \"text-green-500 dark:text-green-400\";\n      if (messageType === \"info\") return \"text-blue-500 dark:text-blue-400\";\n      return \"text-neutral-500 dark:text-black-100\";\n    };\n\n    const inputId = id || `input-${label?.replace(/\\s+/g, \"-\").toLowerCase()}`;\n\n    // Effect to measure suffix width and update input padding\n    useEffect(() => {\n      if (fieldSuffix && suffixRef.current) {\n        const resizeObserver = new ResizeObserver((entries) => {\n          const suffixElement = entries[0];\n          if (suffixElement) {\n            // Add extra padding (8px base + 4px buffer) to prevent overlap\n            const calculatedWidth =\n              Math.ceil(suffixElement.contentRect.width) + 24;\n            setSuffixWidth(calculatedWidth);\n          }\n        });\n\n        resizeObserver.observe(suffixRef.current);\n\n        // Initial measurement\n        const initialWidth = Math.ceil(suffixRef.current.offsetWidth) + 12;\n        setSuffixWidth(initialWidth);\n\n        return () => {\n          resizeObserver.disconnect();\n        };\n      } else {\n        setSuffixWidth(0);\n      }\n    }, [fieldSuffix]);\n\n    // Calculate dynamic padding style\n    const getDynamicInputStyle = (): React.CSSProperties => {\n      const basePadding = 12; // Default px-3 is 12px\n      const rightPadding = fieldSuffix\n        ? Math.max(basePadding, suffixWidth)\n        : basePadding;\n\n      return {\n        \"--input-bg-color\": \"var(--tw-bg-opacity, 1) rgb(var(--bg-color))\",\n        \"--text-color\": \"#111827\",\n        paddingRight: `${rightPadding}px`,\n        ...inputStyle,\n      } as React.CSSProperties;\n    };\n\n    return (\n      <div className={cn(\"flex flex-col w-full\", wrapperClassNames)}>\n        {/* Autofill styles */}\n        <style>\n          {`\n              .input-field input:-webkit-autofill,\n              .input-field input:-webkit-autofill:hover,\n              .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: var(--text-color) !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n                transition: background-color 5000s ease-in-out 0s;\n              }\n              \n              .dark .input-field input:-webkit-autofill,\n              .dark .input-field input:-webkit-autofill:hover,\n              .dark .input-field input:-webkit-autofill:focus {\n                -webkit-text-fill-color: white !important;\n                -webkit-box-shadow: 0 0 0px 1000px var(--input-bg-color) inset !important;\n              }\n            `}\n        </style>\n\n        {/* Label */}\n        {label ? (\n          <label\n            htmlFor={inputId}\n            className=\"mb-1 text-xs font-medium text-gray-600 dark:text-gray-300 inline-flex items-center gap-1\"\n          >\n            <div className=\"flex flex-wrap items-center justify-between w-full\">\n              <div className=\"inline-flex flex-wrap items-center gap-1\">\n              <InputLabel label={label || \"\"} required={required || false} />\n                {/* TODO: Add tooltip support when Tooltip component is available */}\n                {/* {tooltip && (\n                    <Tooltip placement=\"top\" title={tooltip}>\n                      <div className=\"cursor-pointer\">\n                        <HelpIcon className=\"text-neutral-500 w-3 h-3\" />\n                      </div>\n                    </Tooltip>\n                  )} */}\n              </div>\n            </div>\n          </label>\n        ) : null}\n\n        {/* Input Container */}\n        <div className=\"relative input-field\">\n          <input\n            {...inputProps}\n            ref={ref}\n            id={inputId}\n            type={type}\n            value={value}\n            defaultValue={defaultValue}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            max={max}\n            min={min}\n            onKeyDown={onKeyDown}\n            style={getDynamicInputStyle()}\n            className={cn(\n              // Base styles\n              \"border border-solid h-8 rounded-md block w-full pl-3\",\n              \"text-sm font-medium text-neutral-900 dark:text-black-100\",\n              \"bg-white dark:bg-black-600\",\n              \"transition-colors duration-200 ease-in-out\",\n              \"focus:outline-none focus:ring-2\",\n\n              // State-specific styles\n              getInputBorderClasses(),\n\n              // Disabled styles\n              disabled &&\n                \"opacity-70 cursor-not-allowed bg-neutral-50 dark:bg-black-700\",\n\n              // Custom classes\n              inputClassNames\n            )}\n            onChange={(e) => onChange(e.target.value)}\n            onClick={(e) => e.stopPropagation()}\n          />\n\n          {/* Suffix Icon */}\n          {fieldSuffix && (\n            <div\n              ref={suffixRef}\n              className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\"\n            >\n              {fieldSuffix}\n            </div>\n          )}\n        </div>\n\n        {/* Error Message */}\n        <AnimatePresence>\n          {message && (\n            <motion.div\n              initial={{ opacity: 0, y: -10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n            >\n              <Typography\n                className={cn(\"mt-1\", getMessageTypographyClass())}\n                appearance=\"custom\"\n                size=\"extra-small\"\n                variant=\"medium\"\n              >\n                {message}\n              </Typography>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    );\n  }\n);\n\nInputField.displayName = \"InputField\";\n"],"names":["InputField","forwardRef","id","value","onChange","onKeyDown","message","messageType","defaultValue","disabled","max","min","required","label","type","placeholder","fieldSuffix","wrapperClassNames","inputClassNames","inputStyle","inputProps","ref","suffixRef","useRef","suffixWidth","setSuffixWidth","useState","getInputBorderClasses","getMessageTypographyClass","inputId","useEffect","resizeObserver","entries","suffixElement","calculatedWidth","initialWidth","getDynamicInputStyle","cn","jsx","InputLabel","jsxs","AnimatePresence","motion","Typography"],"mappings":"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"}

package/dist/components/forms/master-data-input/MasterDataInputField.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../_virtual/index.cjs.js"),n=require("react"),ve=require("antd"),Ce=require("react-i18next"),Se=require("../../data-display/typography/Typography.cjs.js"),ye=require("../../data-display/label/Label.cjs.js"),N=require("@mui/icons-material"),Ie=require("../../icons/AIExtractedIndicator.cjs.js"),ke=require("../../icons/AIStarIcon.cjs.js"),qe=require("../../icons/HelpIcon.cjs.js"),$=require("../../tooltip/Tooltip.cjs.js"),T=require("../../button/IconButton.cjs.js"),Ne=require("../shared/InputLabel.cjs.js"),c=require("../../../utils/confidenceScoreUtils.cjs.js"),$e=require("../../icon/icons.generated.cjs.js"),U=n.forwardRef(({id:W,label:J,placeholder:Q,value:s,onChange:E,errorMessage:f,defaultValue:X,required:z=!1,isRequiredConditional:Y=!1,masterDataName:x,masterDataColumnName:Z,masterDataFormula:o,masterDataFilters:F,tags:G,index:D,tooltip:M="",originalCase:ee=!1,color:V="",isGTN:g=!1,labelClassName:te,gtnName:L=null,isAiExtracted:le=!1,confidenceScore:j,confidenceType:d="high",confidenceTooltip:w,sourceMeta:ne=[],onConfidenceScoreClick:re,disabled:R=!1,reference:se={},isLiveField:oe=!1,onBlur:ae,onAddGTNToDocument:v,riskDetails:a,isRiskAnalysisOpen:C=!1,RiskDetailsCard:B,primaryColorShades:ie,setDisableActions:H,showDeprecatedFieldWarning:O,MasterDataModal:P,parseMasterDataFormula:p},ce)=>{const{t:de}=Ce.useTranslation(),[m,S]=n.useState(!1),[r,u]=n.useState(null),[i,A]=n.useState(!1),[ue,fe]=n.useState(""),[y,K]=n.useState(null),[xe,pe]=n.useState(!1),I=n.useRef(null),k=ce||I;n.useEffect(()=>{const t=()=>{const l=k.current||I.current;l&&pe(l.scrollWidth>l.clientWidth)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[r,s]),n.useEffect(()=>{u(s)},[D,s]),n.useEffect(()=>{r!==null&&r!==s&&E(r,y)},[r,y]);const q=()=>{H?.(!i),A(!i)},me=t=>{if(t.keyCode===9||t.key==="Enter"){const l=k.current||I.current;l&&(u(ue),l.blur())}},he=(t,l)=>{let h=t;o&&p&&(h=p(o,l)),fe(""),u(h),q(),K(l)},be=()=>{u(""),K(null)},ge=t=>{v&&L&&v({key:L,value:t})},je=()=>{const t="border h-8 text-sm rounded-lg block w-full p-2.5 pr-16 font-inter font-medium",l=f?"border-red-300":C&&a?.color?`border-${a?.color}-300`:"border-gray-300 dark:border-black-600",h="placeholder:text-neutral-900 dark:placeholder:text-black-400",we=`${C&&a?.color?`bg-${a?.color}-50`:"dark:bg-black-600 "} ${V||"text-neutral-900 dark:text-black-200"}`;return`${t} ${l} ${we} ${h}`},_=()=>r!==null?r:o&&p?p(o,se):s;return n.useEffect(()=>{i&&!x&&(O?.(),A(!1))},[i,x,O]),e.jsxs("div",{className:b("flex gap-0.5 w-full relative",m&&g?"border rounded-lg border-primary-100 p-1":"",{"error-field":!!f}),onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1),children:[g&&!m?e.jsx("div",{className:"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5"}):null,e.jsxs("div",{className:b("flex flex-col w-full"),children:[e.jsx("label",{htmlFor:"text",className:`text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${ee?"":"capitalize"} ${te||""}`,children:e.jsxs("div",{className:"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1",children:[e.jsxs("div",{className:"inline-flex min-w-0 items-center gap-1 flex-wrap",children:[e.jsx(Ne.InputLabel,{label:J||"",required:z||!1,isRequiredConditional:Y||!1}),oe&&e.jsx(N.BoltOutlined,{sx:{fontSize:16,color:"var(--color-primary-600)",rotate:"15deg"}}),le&&!c.shouldShowConfidenceScore(j)&&e.jsx(Ie.AIExtractedIndicator,{}),e.jsx(ye.Label,{labels:G}),M&&e.jsx($,{placement:"top",title:`${M}${o?` | ${o}`:""}`,children:e.jsx("div",{className:"cursor-pointer",children:e.jsx(qe.HelpIcon,{className:"w-icon-sm h-icon-sm"})})})]}),e.jsxs("div",{className:"flex items-center gap-1 justify-self-end",children:[c.shouldShowConfidenceScore(j)&&d?e.jsx($,{placement:"top-end",title:w??"",hideTooltip:w==null,className:"cursor-pointer",children:e.jsxs("div",{className:b("inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",c.getConfidenceScoreBadgeClass(d)),onClick:()=>re?.(ne),children:[e.jsx(ke.AIStarIcon,{size:12,fill:c.getConfidenceScoreBadgeColor(d),fillSecondary:c.getConfidenceScoreBadgeFill(d)}),e.jsxs("span",{className:b("text-xs font-medium leading-4",c.getConfidenceScoreBadgeTextColor(d)),children:[j,"%"]})]})}):null,g&&m&&v?e.jsx("button",{id:"btn-master-data-input-add-to-document",className:"cursor-pointer",onClick:()=>ge(s?.toString()||""),type:"button",children:e.jsx(ve.Tooltip,{placement:"top",title:de("Add to document"),children:e.jsx(N.NoteAddOutlined,{sx:{fontSize:16,color:ie?.[600]||"var(--color-primary-600)"}})})}):null]})]})}),e.jsxs("label",{className:"relative block mt-1",children:[e.jsx($,{title:xe?_():"",children:e.jsx("input",{id:W,ref:k,required:z,placeholder:Q,className:je(),onChange:t=>{E(t.target.value,y),u(t.target?.value)},onKeyDown:me,value:_(),defaultValue:X,disabled:!0,autoComplete:"off",onBlur:ae})}),e.jsx(T,{id:"btn-dynamic-data-input-rx-cross",onClick:be,className:"absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent",variant:"ghost",disabled:R,children:e.jsx($e.CloseIcon,{className:"w-6 h-6 text-neutral-500 dark:text-neutral-400 w-sm h-sm"})}),e.jsx(T,{id:"btn-dynamic-data-input-ai-outline-pic-center",onClick:q,className:"absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent",variant:"ghost",disabled:R,children:e.jsx(N.TableChartRounded,{className:"text-neutral-500 dark:text-neutral-400 w-sm h-sm"})})]}),f&&e.jsx(Se.Typography,{className:"text-error-500 mt-1",appearance:"custom",size:"extra-small",variant:"medium",children:f}),i&&P&&e.jsx(P,{isVisible:i,onSelected:he,onClose:q,masterDataColumnName:Z,masterDataFilters:F,masterDataName:x,masterDataId:x,showFilters:!0})]}),m&&a&&C&&B&&e.jsx("div",{role:"tooltip",tabIndex:0,className:"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl",onClick:t=>t.stopPropagation(),onMouseDown:t=>t.preventDefault(),onKeyDown:t=>{t.key==="Escape"&&S(!1)},children:e.jsx(B,{riskDetails:a})})]})});U.displayName="MasterDataInputField";exports.MasterDataInputField=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("../../../_virtual/index.cjs.js"),r=require("react"),Se=require("antd"),we=require("react-i18next"),ye=require("../../data-display/typography/Typography.cjs.js"),Ce=require("../../data-display/label/Label.cjs.js"),m=require("@mui/icons-material"),Ie=require("../../icons/AIExtractedIndicator.cjs.js"),ke=require("../../icons/AIStarIcon.cjs.js"),qe=require("../../icons/HelpIcon.cjs.js"),$=require("../../tooltip/Tooltip.cjs.js"),T=require("../../button/IconButton.cjs.js"),Ne=require("../shared/InputLabel.cjs.js"),c=require("../../../utils/confidenceScoreUtils.cjs.js"),U=r.forwardRef(({id:W,label:J,placeholder:Q,value:s,onChange:E,errorMessage:x,defaultValue:X,required:z=!1,isRequiredConditional:Y=!1,masterDataName:f,masterDataColumnName:Z,masterDataFormula:o,masterDataFilters:F,tags:G,index:D,tooltip:M="",originalCase:ee=!1,color:R="",isGTN:j=!1,labelClassName:te,gtnName:V=null,isAiExtracted:le=!1,confidenceScore:v,confidenceType:d="high",confidenceTooltip:S,sourceMeta:re=[],onConfidenceScoreClick:ne,disabled:L=!1,reference:se={},isLiveField:oe=!1,onBlur:ae,onAddGTNToDocument:w,riskDetails:a,isRiskAnalysisOpen:y=!1,RiskDetailsCard:B,primaryColorShades:ie,setDisableActions:H,showDeprecatedFieldWarning:O,MasterDataModal:P,parseMasterDataFormula:p},ce)=>{const{t:de}=we.useTranslation(),[b,C]=r.useState(!1),[n,u]=r.useState(null),[i,A]=r.useState(!1),[ue,xe]=r.useState(""),[I,K]=r.useState(null),[fe,pe]=r.useState(!1),k=r.useRef(null),q=ce||k;r.useEffect(()=>{const t=()=>{const l=q.current||k.current;l&&pe(l.scrollWidth>l.clientWidth)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[n,s]),r.useEffect(()=>{u(s)},[D,s]),r.useEffect(()=>{n!==null&&n!==s&&E(n,I)},[n,I]);const N=()=>{H?.(!i),A(!i)},be=t=>{if(t.keyCode===9||t.key==="Enter"){const l=q.current||k.current;l&&(u(ue),l.blur())}},he=(t,l)=>{let h=t;o&&p&&(h=p(o,l)),xe(""),u(h),N(),K(l)},ge=()=>{u(""),K(null)},me=t=>{w&&V&&w({key:V,value:t})},je=()=>{const t="border h-[32px] text-sm rounded-lg block w-full p-2.5 pr-16 font-inter font-medium",l=x?"border-red-300":y&&a?.color?`border-${a?.color}-300`:"border-gray-300 dark:border-black-600",h="placeholder:text-neutral-900 dark:placeholder:text-black-400",ve=`${y&&a?.color?`bg-${a?.color}-50`:"bg-gray-200 dark:bg-black-600 "} ${R||"text-neutral-900 dark:text-black-200"}`;return`${t} ${l} ${ve} ${h}`},_=()=>n!==null?n:o&&p?p(o,se):s;return r.useEffect(()=>{i&&!f&&(O?.(),A(!1))},[i,f,O]),e.jsxs("div",{className:g("flex gap-0.5 w-full relative",b&&j?"border rounded-lg border-primary-100 bg-primary-50 p-1":"",{"error-field":!!x}),onMouseEnter:()=>C(!0),onMouseLeave:()=>C(!1),children:[j&&!b?e.jsx("div",{className:"w-1 h-1 bg-primary-600 rounded-full animate-blink mt-1.5"}):null,e.jsxs("div",{className:g("flex flex-col w-full"),children:[e.jsx("label",{htmlFor:"text",className:`text-xs font-medium text-gray-600 inline-flex items-center gap-1 ${ee?"":"capitalize"} ${te||""}`,children:e.jsxs("div",{className:"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-x-1",children:[e.jsxs("div",{className:"inline-flex min-w-0 items-center gap-1 flex-wrap",children:[e.jsx(Ne.InputLabel,{label:J||"",required:z||!1,isRequiredConditional:Y||!1}),oe&&e.jsx(m.BoltOutlined,{sx:{fontSize:16,color:"var(--color-primary-600)",rotate:"15deg"}}),le&&!c.shouldShowConfidenceScore(v)&&e.jsx(Ie.AIExtractedIndicator,{}),e.jsx(Ce.Label,{labels:G}),M&&e.jsx($,{placement:"top",title:`${M}${o?` | ${o}`:""}`,children:e.jsx("div",{className:"cursor-pointer",children:e.jsx(qe.HelpIcon,{})})})]}),e.jsxs("div",{className:"flex items-center gap-1 justify-self-end",children:[c.shouldShowConfidenceScore(v)&&d?e.jsx($,{placement:"top-end",title:S??"",hideTooltip:S==null,className:"cursor-pointer",children:e.jsxs("div",{className:g("inline-flex min-w-[50px] items-center gap-1 rounded-md px-1 py-0.5",c.getConfidenceScoreBadgeClass(d)),onClick:()=>ne?.(re),children:[e.jsx(ke.AIStarIcon,{size:12,fill:c.getConfidenceScoreBadgeColor(d),fillSecondary:c.getConfidenceScoreBadgeFill(d)}),e.jsxs("span",{className:g("text-xs font-medium leading-4",c.getConfidenceScoreBadgeTextColor(d)),children:[v,"%"]})]})}):null,j&&b&&w?e.jsx("button",{id:"btn-master-data-input-add-to-document",className:"cursor-pointer",onClick:()=>me(s?.toString()||""),type:"button",children:e.jsx(Se.Tooltip,{placement:"top",title:de("Add to document"),children:e.jsx(m.NoteAddOutlined,{sx:{fontSize:16,color:ie?.[600]||"var(--color-primary-600)"}})})}):null]})]})}),e.jsxs("label",{className:"relative block mt-1",children:[e.jsx($,{title:fe?_():"",children:e.jsx("input",{id:W,ref:q,required:z,placeholder:Q,className:je(),onChange:t=>{E(t.target.value,I),u(t.target?.value)},onKeyDown:be,value:_(),defaultValue:X,disabled:!0,autoComplete:"off",onBlur:ae})}),e.jsx(T,{id:"btn-dynamic-data-input-rx-cross",onClick:ge,className:"absolute inset-y-0 right-1 flex items-center px-2 focus:border-transparent",variant:"ghost",disabled:L,children:e.jsx(m.CloseRounded,{className:"text-neutral-900 dark:text-black-300",sx:{fontSize:16}})}),e.jsx(T,{id:"btn-dynamic-data-input-ai-outline-pic-center",onClick:N,className:"absolute inset-y-0 right-8 flex items-center px-2 focus:border-transparent",variant:"ghost",disabled:L,children:e.jsx(m.TableChartRounded,{className:"text-neutral-900 dark:text-black-300",sx:{fontSize:16}})})]}),x&&e.jsx(ye.Typography,{className:"text-error-500 mt-1",appearance:"custom",size:"extra-small",variant:"medium",children:x}),i&&P&&e.jsx(P,{isVisible:i,onSelected:he,onClose:N,masterDataColumnName:Z,masterDataFilters:F,masterDataName:f,masterDataId:f,showFilters:!0})]}),b&&a&&y&&B&&e.jsx("div",{role:"tooltip",tabIndex:0,className:"absolute left-0 right-0 top-[95%] mt-1 z-50 bg-white dark:bg-black-600 rounded-xl",onClick:t=>t.stopPropagation(),onMouseDown:t=>t.preventDefault(),onKeyDown:t=>{t.key==="Escape"&&C(!1)},children:e.jsx(B,{riskDetails:a})})]})});U.displayName="MasterDataInputField";exports.MasterDataInputField=U;
 //# sourceMappingURL=MasterDataInputField.cjs.js.map