@lax-wp/design-system 0.13.47 → 0.13.48

package/dist/components/forms/checkbox/Checkbox.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("antd"),t=require("../../../_virtual/index.cjs.js"),x=require("framer-motion"),E=require("react"),g=require("../../data-display/typography/Typography.cjs.js"),h=E.forwardRef(({id:a,label:s,checked:c,isChecked:y,onChange:p,disabled:i=!1,required:l=!1,message:n,messageType:e="default",wrapperClassName:b,checkboxClassName:k,labelClassName:j,size:u="medium",variant:v="default",labelPosition:o="right",checkboxProps:C},w)=>{const N=c!==void 0?c:y||!1,q=()=>{switch(u){case"small":return"w-3 h-3";case"large":return"w-5 h-5";default:return"w-4 h-4"}},S=()=>{if(e==="error")return"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600";if(e==="success")return"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600";if(e==="info")return"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600";switch(v){case"outline":return"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600";case"solid":return"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20";default:return"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600"}},z=()=>e==="error"?"text-red-500 dark:text-red-400":e==="success"?"text-green-500 dark:text-green-400":e==="info"?"text-blue-500 dark:text-blue-400":"text-neutral-500 dark:text-neutral-400",F=()=>{switch(u){case"small":return"extra-small";case"large":return"medium";default:return"small"}},M=m=>{p(m.target.checked,m)},d=r.jsx(R.Checkbox,{...C,ref:w,id:a,checked:N,onChange:M,disabled:i,className:t("rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200",q(),S(),i&&"opacity-50 cursor-not-allowed",k),"aria-required":l,"aria-invalid":n&&e==="error"?"true":"false","aria-describedby":n?`${a}-message`:void 0}),f=s?r.jsx("label",{htmlFor:a,className:t("font-medium cursor-pointer transition-colors duration-200",i?"text-neutral-400 dark:text-neutral-600 cursor-not-allowed":"text-neutral-900 dark:text-neutral-100",o==="right"?"ml-2":"mr-2",j),children:r.jsxs(g.Typography,{variant:"medium",size:F(),appearance:"body",children:[s,l&&r.jsx("span",{className:"text-red-500 ml-1",children:"*"})]})}):null;return r.jsxs("div",{className:t("flex flex-col",b),children:[r.jsx("div",{className:t("flex items-center",o==="left"&&"flex-row-reverse justify-end"),children:o==="left"?r.jsxs(r.Fragment,{children:[d,f]}):r.jsxs(r.Fragment,{children:[d,f]})}),r.jsx(x.AnimatePresence,{children:n&&r.jsx(x.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},id:`${a}-message`,role:e==="error"?"alert":void 0,children:r.jsx(g.Typography,{className:t("mt-1",z()),appearance:"custom",size:"extra-small",variant:"medium",children:n})})})]})});h.displayName="Checkbox";exports.Checkbox=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),M=require("antd"),t=require("../../../_virtual/index.cjs.js"),f=require("framer-motion"),R=require("react"),g=require("../../data-display/typography/Typography.cjs.js"),h=R.forwardRef(({id:a,label:o,checked:s,isChecked:p,onChange:b,disabled:i=!1,required:l=!1,message:n,messageType:e="default",wrapperClassName:k,checkboxClassName:y,labelClassName:v,size:u="medium",variant:j="default",labelPosition:c="right",checkboxProps:w},C)=>{const z=s!==void 0?s:p||!1,N=()=>{switch(u){case"small":return"[--checkbox-size:clamp(10px,0.625vw,12px)]";case"large":return"[--checkbox-size:clamp(18px,calc(8px_+_0.625vw),20px)]";default:return"[--checkbox-size:clamp(14px,calc(4px_+_0.625vw),16px)]"}},q=()=>{if(e==="error")return"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600";if(e==="success")return"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600";if(e==="info")return"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600";switch(j){case"outline":return"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600";case"solid":return"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20";default:return"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600"}},_=()=>e==="error"?"text-red-500 dark:text-red-400":e==="success"?"text-green-500 dark:text-green-400":e==="info"?"text-blue-500 dark:text-blue-400":"text-neutral-500 dark:text-neutral-400",S=()=>{switch(u){case"small":return"extra-small";case"large":return"medium";default:return"small"}},F=m=>{b(m.target.checked,m)},d=r.jsx(M.Checkbox,{...w,ref:C,id:a,checked:z,onChange:F,disabled:i,className:t("rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200",N(),"w-[var(--checkbox-size)] h-[var(--checkbox-size)]","[&_.ant-checkbox-inner]:!w-[var(--checkbox-size)] [&_.ant-checkbox-inner]:!h-[var(--checkbox-size)]",q(),i&&"opacity-50 cursor-not-allowed",y),"aria-required":l,"aria-invalid":n&&e==="error"?"true":"false","aria-describedby":n?`${a}-message`:void 0}),x=o?r.jsx("label",{htmlFor:a,className:t("font-medium cursor-pointer transition-colors duration-200",i?"text-neutral-400 dark:text-neutral-600 cursor-not-allowed":"text-neutral-900 dark:text-neutral-100",c==="right"?"ml-2":"mr-2",v),children:r.jsxs(g.Typography,{variant:"medium",size:S(),appearance:"body",children:[o,l&&r.jsx("span",{className:"text-red-500 ml-1",children:"*"})]})}):null;return r.jsxs("div",{className:t("flex flex-col",k),children:[r.jsx("div",{className:t("flex items-center",c==="left"&&"flex-row-reverse justify-end"),children:c==="left"?r.jsxs(r.Fragment,{children:[d,x]}):r.jsxs(r.Fragment,{children:[d,x]})}),r.jsx(f.AnimatePresence,{children:n&&r.jsx(f.motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},id:`${a}-message`,role:e==="error"?"alert":void 0,children:r.jsx(g.Typography,{className:t("mt-1",_()),appearance:"custom",size:"extra-small",variant:"medium",children:n})})})]})});h.displayName="Checkbox";exports.Checkbox=h;
 //# sourceMappingURL=Checkbox.cjs.js.map

package/dist/components/forms/checkbox/Checkbox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs.js","sources":["../../../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntdCheckbox } from \"antd\";\nimport type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from \"antd\";\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\n\n/**\n * Props for the Checkbox component\n */\nexport interface CheckboxComponentProps {\n  /** Unique identifier for the checkbox */\n  id: string;\n  /** Label text to display next to the checkbox */\n  label?: string;\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Whether the checkbox is checked (alias for checked) */\n  isChecked?: boolean;\n  /** Callback function called when checkbox state changes */\n  onChange: (checked: boolean, event: CheckboxChangeEvent) => void;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Message to display below the checkbox */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Additional CSS classes for the checkbox input */\n  checkboxClassName?: string;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Size variant for the checkbox */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Visual variant for the checkbox */\n  variant?: \"default\" | \"outline\" | \"solid\";\n  /** Whether to show the label on the left side */\n  labelPosition?: \"left\" | \"right\";\n  /** Additional props to pass to the Ant Design Checkbox */\n  checkboxProps?: Omit<\n    CheckboxProps,\n    \"checked\" | \"onChange\" | \"id\" | \"disabled\"\n  >;\n}\n\n/**\n * A highly customizable checkbox component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I agree to the terms and conditions\"\n *   checked={agreedToTerms}\n *   onChange={(checked) => setAgreedToTerms(checked)}\n *   required\n * />\n * ```\n */\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxComponentProps>(\n  (\n    {\n      id,\n      label,\n      checked,\n      isChecked,\n      onChange,\n      disabled = false,\n      required = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      checkboxClassName,\n      labelClassName,\n      size = \"medium\",\n      variant = \"default\",\n      labelPosition = \"right\",\n      checkboxProps,\n    },\n    ref\n  ) => {\n    // Use checked prop, fallback to isChecked for backward compatibility\n    const isCheckboxChecked =\n      checked !== undefined ? checked : isChecked || false;\n\n    // Size-based styling\n    const getSizeClasses = (): string => {\n      switch (size) {\n        case \"small\":\n          return \"w-3 h-3\";\n        case \"large\":\n          return \"w-5 h-5\";\n        default:\n          return \"w-4 h-4\";\n      }\n    };\n\n    // Variant-based styling\n    const getVariantClasses = (): string => {\n      if (messageType === \"error\") {\n        return \"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600\";\n      }\n      if (messageType === \"success\") {\n        return \"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600\";\n      }\n      if (messageType === \"info\") {\n        return \"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600\";\n      }\n\n      switch (variant) {\n        case \"outline\":\n          return \"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600\";\n        case \"solid\":\n          return \"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20\";\n        default:\n          return \"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600\";\n      }\n    };\n\n    // Message typography class\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-neutral-400\";\n    };\n\n    // Label typography size based on checkbox size\n    const getLabelSize = (): \"extra-small\" | \"small\" | \"medium\" => {\n      switch (size) {\n        case \"small\":\n          return \"extra-small\";\n        case \"large\":\n          return \"medium\";\n        default:\n          return \"small\";\n      }\n    };\n\n    const handleChange = (e: CheckboxChangeEvent) => {\n      onChange(e.target.checked, e);\n    };\n\n    const checkboxElement = (\n      <AntdCheckbox\n        {...checkboxProps}\n        ref={ref}\n        id={id}\n        checked={isCheckboxChecked}\n        onChange={handleChange}\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200\",\n\n          // Size classes\n          getSizeClasses(),\n\n          // Variant classes\n          getVariantClasses(),\n\n          // Disabled styles\n          disabled && \"opacity-50 cursor-not-allowed\",\n\n          // Custom classes\n          checkboxClassName\n        )}\n        aria-required={required}\n        aria-invalid={message && messageType === \"error\" ? \"true\" : \"false\"}\n        aria-describedby={message ? `${id}-message` : undefined}\n      />\n    );\n\n    const labelElement = label ? (\n      <label\n        htmlFor={id}\n        className={cn(\n          \"font-medium cursor-pointer transition-colors duration-200\",\n          disabled\n            ? \"text-neutral-400 dark:text-neutral-600 cursor-not-allowed\"\n            : \"text-neutral-900 dark:text-neutral-100\",\n          labelPosition === \"right\" ? \"ml-2\" : \"mr-2\",\n          labelClassName\n        )}\n      >\n        <Typography variant=\"medium\" size={getLabelSize()} appearance=\"body\">\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Typography>\n      </label>\n    ) : null;\n\n    return (\n      <div className={cn(\"flex flex-col\", wrapperClassName)}>\n        <div\n          className={cn(\n            \"flex items-center\",\n            labelPosition === \"left\" && \"flex-row-reverse justify-end\"\n          )}\n        >\n          {labelPosition === \"left\" ? (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          ) : (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          )}\n        </div>\n\n        {/* 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              id={`${id}-message`}\n              role={messageType === \"error\" ? \"alert\" : undefined}\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\nCheckbox.displayName = \"Checkbox\";\n\n// Export type alias for backward compatibility\nexport type TCheckboxComponentProps = CheckboxComponentProps;\n"],"names":["Checkbox","forwardRef","id","label","checked","isChecked","onChange","disabled","required","message","messageType","wrapperClassName","checkboxClassName","labelClassName","size","variant","labelPosition","checkboxProps","ref","isCheckboxChecked","getSizeClasses","getVariantClasses","getMessageTypographyClass","getLabelSize","handleChange","e","checkboxElement","jsx","AntdCheckbox","cn","labelElement","jsxs","Typography","Fragment","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs.js","sources":["../../../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntdCheckbox } from \"antd\";\nimport type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from \"antd\";\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\n\n/**\n * Props for the Checkbox component\n */\nexport interface CheckboxComponentProps {\n  /** Unique identifier for the checkbox */\n  id: string;\n  /** Label text to display next to the checkbox */\n  label?: string;\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Whether the checkbox is checked (alias for checked) */\n  isChecked?: boolean;\n  /** Callback function called when checkbox state changes */\n  onChange: (checked: boolean, event: CheckboxChangeEvent) => void;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Message to display below the checkbox */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Additional CSS classes for the checkbox input */\n  checkboxClassName?: string;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Size variant for the checkbox */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Visual variant for the checkbox */\n  variant?: \"default\" | \"outline\" | \"solid\";\n  /** Whether to show the label on the left side */\n  labelPosition?: \"left\" | \"right\";\n  /** Additional props to pass to the Ant Design Checkbox */\n  checkboxProps?: Omit<\n    CheckboxProps,\n    \"checked\" | \"onChange\" | \"id\" | \"disabled\"\n  >;\n}\n\n/**\n * A highly customizable checkbox component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I agree to the terms and conditions\"\n *   checked={agreedToTerms}\n *   onChange={(checked) => setAgreedToTerms(checked)}\n *   required\n * />\n * ```\n */\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxComponentProps>(\n  (\n    {\n      id,\n      label,\n      checked,\n      isChecked,\n      onChange,\n      disabled = false,\n      required = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      checkboxClassName,\n      labelClassName,\n      size = \"medium\",\n      variant = \"default\",\n      labelPosition = \"right\",\n      checkboxProps,\n    },\n    ref\n  ) => {\n    // Use checked prop, fallback to isChecked for backward compatibility\n    const isCheckboxChecked =\n      checked !== undefined ? checked : isChecked || false;\n\n    // Fluid size scaling: each size clamps from 2px smaller on <=1600px\n    // screens up to its full size at 1920px — the same clamp() curve used for\n    // the fluid fontSize / icon spacing tokens in tailwind.config.js.\n    const getSizeClasses = (): string => {\n      switch (size) {\n        case \"small\":\n          return \"[--checkbox-size:clamp(10px,0.625vw,12px)]\";\n        case \"large\":\n          return \"[--checkbox-size:clamp(18px,calc(8px_+_0.625vw),20px)]\";\n        default:\n          return \"[--checkbox-size:clamp(14px,calc(4px_+_0.625vw),16px)]\";\n      }\n    };\n\n    // Variant-based styling\n    const getVariantClasses = (): string => {\n      if (messageType === \"error\") {\n        return \"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600\";\n      }\n      if (messageType === \"success\") {\n        return \"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600\";\n      }\n      if (messageType === \"info\") {\n        return \"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600\";\n      }\n\n      switch (variant) {\n        case \"outline\":\n          return \"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600\";\n        case \"solid\":\n          return \"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20\";\n        default:\n          return \"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600\";\n      }\n    };\n\n    // Message typography class\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-neutral-400\";\n    };\n\n    // Label typography size based on checkbox size\n    const getLabelSize = (): \"extra-small\" | \"small\" | \"medium\" => {\n      switch (size) {\n        case \"small\":\n          return \"extra-small\";\n        case \"large\":\n          return \"medium\";\n        default:\n          return \"small\";\n      }\n    };\n\n    const handleChange = (e: CheckboxChangeEvent) => {\n      onChange(e.target.checked, e);\n    };\n\n    const checkboxElement = (\n      <AntdCheckbox\n        {...checkboxProps}\n        ref={ref}\n        id={id}\n        checked={isCheckboxChecked}\n        onChange={handleChange}\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200\",\n\n          // Size classes — the clamp() value set by getSizeClasses drives the\n          // antd wrapper and the visible .ant-checkbox-inner box (!important\n          // needed to beat antd's own token-based width/height)\n          getSizeClasses(),\n          \"w-[var(--checkbox-size)] h-[var(--checkbox-size)]\",\n          \"[&_.ant-checkbox-inner]:!w-[var(--checkbox-size)] [&_.ant-checkbox-inner]:!h-[var(--checkbox-size)]\",\n\n          // Variant classes\n          getVariantClasses(),\n\n          // Disabled styles\n          disabled && \"opacity-50 cursor-not-allowed\",\n\n          // Custom classes\n          checkboxClassName\n        )}\n        aria-required={required}\n        aria-invalid={message && messageType === \"error\" ? \"true\" : \"false\"}\n        aria-describedby={message ? `${id}-message` : undefined}\n      />\n    );\n\n    const labelElement = label ? (\n      <label\n        htmlFor={id}\n        className={cn(\n          \"font-medium cursor-pointer transition-colors duration-200\",\n          disabled\n            ? \"text-neutral-400 dark:text-neutral-600 cursor-not-allowed\"\n            : \"text-neutral-900 dark:text-neutral-100\",\n          labelPosition === \"right\" ? \"ml-2\" : \"mr-2\",\n          labelClassName\n        )}\n      >\n        <Typography variant=\"medium\" size={getLabelSize()} appearance=\"body\">\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Typography>\n      </label>\n    ) : null;\n\n    return (\n      <div className={cn(\"flex flex-col\", wrapperClassName)}>\n        <div\n          className={cn(\n            \"flex items-center\",\n            labelPosition === \"left\" && \"flex-row-reverse justify-end\"\n          )}\n        >\n          {labelPosition === \"left\" ? (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          ) : (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          )}\n        </div>\n\n        {/* 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              id={`${id}-message`}\n              role={messageType === \"error\" ? \"alert\" : undefined}\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\nCheckbox.displayName = \"Checkbox\";\n\n// Export type alias for backward compatibility\nexport type TCheckboxComponentProps = CheckboxComponentProps;\n"],"names":["Checkbox","forwardRef","id","label","checked","isChecked","onChange","disabled","required","message","messageType","wrapperClassName","checkboxClassName","labelClassName","size","variant","labelPosition","checkboxProps","ref","isCheckboxChecked","getSizeClasses","getVariantClasses","getMessageTypographyClass","getLabelSize","handleChange","e","checkboxElement","jsx","AntdCheckbox","cn","labelElement","jsxs","Typography","Fragment","AnimatePresence","motion"],"mappings":"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"}

package/dist/components/forms/checkbox/Checkbox.es.js

@@ -1,45 +1,45 @@
-import { jsx as e, jsxs as i, Fragment as x } from "react/jsx-runtime";
-import { Checkbox as S } from "antd";
+import { jsx as e, jsxs as i, Fragment as h } from "react/jsx-runtime";
+import { Checkbox as F } from "antd";
 import t from "../../../_virtual/index.es.js";
-import { AnimatePresence as A, motion as L } from "framer-motion";
-import { forwardRef as M } from "react";
-import { Typography as h } from "../../data-display/typography/Typography.es.js";
-const R = M(
+import { AnimatePresence as S, motion as A } from "framer-motion";
+import { forwardRef as L } from "react";
+import { Typography as p } from "../../data-display/typography/Typography.es.js";
+const M = L(
   ({
     id: a,
     label: l,
     checked: s,
-    isChecked: p,
-    onChange: y,
-    disabled: o = !1,
+    isChecked: g,
+    onChange: b,
+    disabled: c = !1,
     required: u = !1,
     message: n,
     messageType: r = "default",
-    wrapperClassName: b,
-    checkboxClassName: k,
-    labelClassName: C,
+    wrapperClassName: k,
+    checkboxClassName: y,
+    labelClassName: v,
     size: d = "medium",
-    variant: v = "default",
-    labelPosition: c = "right",
-    checkboxProps: w
-  }, N) => {
-    const j = s !== void 0 ? s : p || !1, z = () => {
+    variant: w = "default",
+    labelPosition: o = "right",
+    checkboxProps: C
+  }, z) => {
+    const N = s !== void 0 ? s : g || !1, _ = () => {
       switch (d) {
         case "small":
-          return "w-3 h-3";
+          return "[--checkbox-size:clamp(10px,0.625vw,12px)]";
         case "large":
-          return "w-5 h-5";
+          return "[--checkbox-size:clamp(18px,calc(8px_+_0.625vw),20px)]";
         default:
-          return "w-4 h-4";
+          return "[--checkbox-size:clamp(14px,calc(4px_+_0.625vw),16px)]";
       }
-    }, $ = () => {
+    }, j = () => {
       if (r === "error")
         return "text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600";
       if (r === "success")
         return "text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600";
       if (r === "info")
         return "text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600";
-      switch (v) {
+      switch (w) {
         case "outline":
           return "text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600";
         case "solid":
@@ -47,7 +47,7 @@ const R = M(
         default:
           return "text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600";
       }
-    }, E = () => r === "error" ? "text-red-500 dark:text-red-400" : r === "success" ? "text-green-500 dark:text-green-400" : r === "info" ? "text-blue-500 dark:text-blue-400" : "text-neutral-500 dark:text-neutral-400", F = () => {
+    }, $ = () => r === "error" ? "text-red-500 dark:text-red-400" : r === "success" ? "text-green-500 dark:text-green-400" : r === "info" ? "text-blue-500 dark:text-blue-400" : "text-neutral-500 dark:text-neutral-400", E = () => {
       switch (d) {
         case "small":
           return "extra-small";
@@ -57,67 +57,71 @@ const R = M(
           return "small";
       }
     }, m = /* @__PURE__ */ e(
-      S,
+      F,
       {
-        ...w,
-        ref: N,
+        ...C,
+        ref: z,
         id: a,
-        checked: j,
-        onChange: (g) => {
-          y(g.target.checked, g);
+        checked: N,
+        onChange: (f) => {
+          b(f.target.checked, f);
         },
-        disabled: o,
+        disabled: c,
         className: t(
           // Base styles
           "rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200",
-          // Size classes
-          z(),
+          // Size classes — the clamp() value set by getSizeClasses drives the
+          // antd wrapper and the visible .ant-checkbox-inner box (!important
+          // needed to beat antd's own token-based width/height)
+          _(),
+          "w-[var(--checkbox-size)] h-[var(--checkbox-size)]",
+          "[&_.ant-checkbox-inner]:!w-[var(--checkbox-size)] [&_.ant-checkbox-inner]:!h-[var(--checkbox-size)]",
           // Variant classes
-          $(),
+          j(),
           // Disabled styles
-          o && "opacity-50 cursor-not-allowed",
+          c && "opacity-50 cursor-not-allowed",
           // Custom classes
-          k
+          y
         ),
         "aria-required": u,
         "aria-invalid": n && r === "error" ? "true" : "false",
         "aria-describedby": n ? `${a}-message` : void 0
       }
-    ), f = l ? /* @__PURE__ */ e(
+    ), x = l ? /* @__PURE__ */ e(
       "label",
       {
         htmlFor: a,
         className: t(
           "font-medium cursor-pointer transition-colors duration-200",
-          o ? "text-neutral-400 dark:text-neutral-600 cursor-not-allowed" : "text-neutral-900 dark:text-neutral-100",
-          c === "right" ? "ml-2" : "mr-2",
-          C
+          c ? "text-neutral-400 dark:text-neutral-600 cursor-not-allowed" : "text-neutral-900 dark:text-neutral-100",
+          o === "right" ? "ml-2" : "mr-2",
+          v
         ),
-        children: /* @__PURE__ */ i(h, { variant: "medium", size: F(), appearance: "body", children: [
+        children: /* @__PURE__ */ i(p, { variant: "medium", size: E(), appearance: "body", children: [
           l,
           u && /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" })
         ] })
       }
     ) : null;
-    return /* @__PURE__ */ i("div", { className: t("flex flex-col", b), children: [
+    return /* @__PURE__ */ i("div", { className: t("flex flex-col", k), children: [
       /* @__PURE__ */ e(
         "div",
         {
           className: t(
             "flex items-center",
-            c === "left" && "flex-row-reverse justify-end"
+            o === "left" && "flex-row-reverse justify-end"
           ),
-          children: c === "left" ? /* @__PURE__ */ i(x, { children: [
+          children: o === "left" ? /* @__PURE__ */ i(h, { children: [
             m,
-            f
-          ] }) : /* @__PURE__ */ i(x, { children: [
+            x
+          ] }) : /* @__PURE__ */ i(h, { children: [
             m,
-            f
+            x
           ] })
         }
       ),
-      /* @__PURE__ */ e(A, { children: n && /* @__PURE__ */ e(
-        L.div,
+      /* @__PURE__ */ e(S, { children: n && /* @__PURE__ */ e(
+        A.div,
         {
           initial: { opacity: 0, y: -10 },
           animate: { opacity: 1, y: 0 },
@@ -126,9 +130,9 @@ const R = M(
           id: `${a}-message`,
           role: r === "error" ? "alert" : void 0,
           children: /* @__PURE__ */ e(
-            h,
+            p,
             {
-              className: t("mt-1", E()),
+              className: t("mt-1", $()),
               appearance: "custom",
               size: "extra-small",
               variant: "medium",
@@ -140,8 +144,8 @@ const R = M(
     ] });
   }
 );
-R.displayName = "Checkbox";
+M.displayName = "Checkbox";
 export {
-  R as Checkbox
+  M as Checkbox
 };
 //# sourceMappingURL=Checkbox.es.js.map

package/dist/components/forms/checkbox/Checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.es.js","sources":["../../../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntdCheckbox } from \"antd\";\nimport type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from \"antd\";\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\n\n/**\n * Props for the Checkbox component\n */\nexport interface CheckboxComponentProps {\n  /** Unique identifier for the checkbox */\n  id: string;\n  /** Label text to display next to the checkbox */\n  label?: string;\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Whether the checkbox is checked (alias for checked) */\n  isChecked?: boolean;\n  /** Callback function called when checkbox state changes */\n  onChange: (checked: boolean, event: CheckboxChangeEvent) => void;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Message to display below the checkbox */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Additional CSS classes for the checkbox input */\n  checkboxClassName?: string;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Size variant for the checkbox */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Visual variant for the checkbox */\n  variant?: \"default\" | \"outline\" | \"solid\";\n  /** Whether to show the label on the left side */\n  labelPosition?: \"left\" | \"right\";\n  /** Additional props to pass to the Ant Design Checkbox */\n  checkboxProps?: Omit<\n    CheckboxProps,\n    \"checked\" | \"onChange\" | \"id\" | \"disabled\"\n  >;\n}\n\n/**\n * A highly customizable checkbox component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I agree to the terms and conditions\"\n *   checked={agreedToTerms}\n *   onChange={(checked) => setAgreedToTerms(checked)}\n *   required\n * />\n * ```\n */\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxComponentProps>(\n  (\n    {\n      id,\n      label,\n      checked,\n      isChecked,\n      onChange,\n      disabled = false,\n      required = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      checkboxClassName,\n      labelClassName,\n      size = \"medium\",\n      variant = \"default\",\n      labelPosition = \"right\",\n      checkboxProps,\n    },\n    ref\n  ) => {\n    // Use checked prop, fallback to isChecked for backward compatibility\n    const isCheckboxChecked =\n      checked !== undefined ? checked : isChecked || false;\n\n    // Size-based styling\n    const getSizeClasses = (): string => {\n      switch (size) {\n        case \"small\":\n          return \"w-3 h-3\";\n        case \"large\":\n          return \"w-5 h-5\";\n        default:\n          return \"w-4 h-4\";\n      }\n    };\n\n    // Variant-based styling\n    const getVariantClasses = (): string => {\n      if (messageType === \"error\") {\n        return \"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600\";\n      }\n      if (messageType === \"success\") {\n        return \"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600\";\n      }\n      if (messageType === \"info\") {\n        return \"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600\";\n      }\n\n      switch (variant) {\n        case \"outline\":\n          return \"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600\";\n        case \"solid\":\n          return \"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20\";\n        default:\n          return \"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600\";\n      }\n    };\n\n    // Message typography class\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-neutral-400\";\n    };\n\n    // Label typography size based on checkbox size\n    const getLabelSize = (): \"extra-small\" | \"small\" | \"medium\" => {\n      switch (size) {\n        case \"small\":\n          return \"extra-small\";\n        case \"large\":\n          return \"medium\";\n        default:\n          return \"small\";\n      }\n    };\n\n    const handleChange = (e: CheckboxChangeEvent) => {\n      onChange(e.target.checked, e);\n    };\n\n    const checkboxElement = (\n      <AntdCheckbox\n        {...checkboxProps}\n        ref={ref}\n        id={id}\n        checked={isCheckboxChecked}\n        onChange={handleChange}\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200\",\n\n          // Size classes\n          getSizeClasses(),\n\n          // Variant classes\n          getVariantClasses(),\n\n          // Disabled styles\n          disabled && \"opacity-50 cursor-not-allowed\",\n\n          // Custom classes\n          checkboxClassName\n        )}\n        aria-required={required}\n        aria-invalid={message && messageType === \"error\" ? \"true\" : \"false\"}\n        aria-describedby={message ? `${id}-message` : undefined}\n      />\n    );\n\n    const labelElement = label ? (\n      <label\n        htmlFor={id}\n        className={cn(\n          \"font-medium cursor-pointer transition-colors duration-200\",\n          disabled\n            ? \"text-neutral-400 dark:text-neutral-600 cursor-not-allowed\"\n            : \"text-neutral-900 dark:text-neutral-100\",\n          labelPosition === \"right\" ? \"ml-2\" : \"mr-2\",\n          labelClassName\n        )}\n      >\n        <Typography variant=\"medium\" size={getLabelSize()} appearance=\"body\">\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Typography>\n      </label>\n    ) : null;\n\n    return (\n      <div className={cn(\"flex flex-col\", wrapperClassName)}>\n        <div\n          className={cn(\n            \"flex items-center\",\n            labelPosition === \"left\" && \"flex-row-reverse justify-end\"\n          )}\n        >\n          {labelPosition === \"left\" ? (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          ) : (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          )}\n        </div>\n\n        {/* 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              id={`${id}-message`}\n              role={messageType === \"error\" ? \"alert\" : undefined}\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\nCheckbox.displayName = \"Checkbox\";\n\n// Export type alias for backward compatibility\nexport type TCheckboxComponentProps = CheckboxComponentProps;\n"],"names":["Checkbox","forwardRef","id","label","checked","isChecked","onChange","disabled","required","message","messageType","wrapperClassName","checkboxClassName","labelClassName","size","variant","labelPosition","checkboxProps","ref","isCheckboxChecked","getSizeClasses","getVariantClasses","getMessageTypographyClass","getLabelSize","checkboxElement","jsx","AntdCheckbox","e","cn","labelElement","jsxs","Typography","Fragment","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"Checkbox.es.js","sources":["../../../../src/components/forms/checkbox/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntdCheckbox } from \"antd\";\nimport type { CheckboxChangeEvent, CheckboxProps, CheckboxRef } from \"antd\";\nimport cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"../../data-display/typography/Typography\";\n\n/**\n * Props for the Checkbox component\n */\nexport interface CheckboxComponentProps {\n  /** Unique identifier for the checkbox */\n  id: string;\n  /** Label text to display next to the checkbox */\n  label?: string;\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Whether the checkbox is checked (alias for checked) */\n  isChecked?: boolean;\n  /** Callback function called when checkbox state changes */\n  onChange: (checked: boolean, event: CheckboxChangeEvent) => void;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Message to display below the checkbox */\n  message?: string;\n  /** Type of message to display */\n  messageType?: \"success\" | \"error\" | \"info\" | \"default\";\n  /** Additional CSS classes for the wrapper container */\n  wrapperClassName?: string;\n  /** Additional CSS classes for the checkbox input */\n  checkboxClassName?: string;\n  /** Additional CSS classes for the label */\n  labelClassName?: string;\n  /** Size variant for the checkbox */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Visual variant for the checkbox */\n  variant?: \"default\" | \"outline\" | \"solid\";\n  /** Whether to show the label on the left side */\n  labelPosition?: \"left\" | \"right\";\n  /** Additional props to pass to the Ant Design Checkbox */\n  checkboxProps?: Omit<\n    CheckboxProps,\n    \"checked\" | \"onChange\" | \"id\" | \"disabled\"\n  >;\n}\n\n/**\n * A highly customizable checkbox component with label, validation, and styling support.\n * Features dark mode support, accessibility enhancements, and comprehensive prop support.\n *\n * @example\n * ```tsx\n * <Checkbox\n *   id=\"terms\"\n *   label=\"I agree to the terms and conditions\"\n *   checked={agreedToTerms}\n *   onChange={(checked) => setAgreedToTerms(checked)}\n *   required\n * />\n * ```\n */\nexport const Checkbox = forwardRef<CheckboxRef, CheckboxComponentProps>(\n  (\n    {\n      id,\n      label,\n      checked,\n      isChecked,\n      onChange,\n      disabled = false,\n      required = false,\n      message,\n      messageType = \"default\",\n      wrapperClassName,\n      checkboxClassName,\n      labelClassName,\n      size = \"medium\",\n      variant = \"default\",\n      labelPosition = \"right\",\n      checkboxProps,\n    },\n    ref\n  ) => {\n    // Use checked prop, fallback to isChecked for backward compatibility\n    const isCheckboxChecked =\n      checked !== undefined ? checked : isChecked || false;\n\n    // Fluid size scaling: each size clamps from 2px smaller on <=1600px\n    // screens up to its full size at 1920px — the same clamp() curve used for\n    // the fluid fontSize / icon spacing tokens in tailwind.config.js.\n    const getSizeClasses = (): string => {\n      switch (size) {\n        case \"small\":\n          return \"[--checkbox-size:clamp(10px,0.625vw,12px)]\";\n        case \"large\":\n          return \"[--checkbox-size:clamp(18px,calc(8px_+_0.625vw),20px)]\";\n        default:\n          return \"[--checkbox-size:clamp(14px,calc(4px_+_0.625vw),16px)]\";\n      }\n    };\n\n    // Variant-based styling\n    const getVariantClasses = (): string => {\n      if (messageType === \"error\") {\n        return \"text-red-600 border-red-300 focus:ring-red-500 dark:focus:ring-red-600\";\n      }\n      if (messageType === \"success\") {\n        return \"text-green-600 border-green-300 focus:ring-green-500 dark:focus:ring-green-600\";\n      }\n      if (messageType === \"info\") {\n        return \"text-blue-600 border-blue-300 focus:ring-blue-500 dark:focus:ring-blue-600\";\n      }\n\n      switch (variant) {\n        case \"outline\":\n          return \"text-primary-600 bg-transparent border-neutral-300 focus:ring-primary-500 dark:focus:ring-primary-600\";\n        case \"solid\":\n          return \"text-primary-600 bg-primary-50 border-primary-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-primary-900/20\";\n        default:\n          return \"text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:bg-neutral-600 dark:border-gray-600\";\n      }\n    };\n\n    // Message typography class\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-neutral-400\";\n    };\n\n    // Label typography size based on checkbox size\n    const getLabelSize = (): \"extra-small\" | \"small\" | \"medium\" => {\n      switch (size) {\n        case \"small\":\n          return \"extra-small\";\n        case \"large\":\n          return \"medium\";\n        default:\n          return \"small\";\n      }\n    };\n\n    const handleChange = (e: CheckboxChangeEvent) => {\n      onChange(e.target.checked, e);\n    };\n\n    const checkboxElement = (\n      <AntdCheckbox\n        {...checkboxProps}\n        ref={ref}\n        id={id}\n        checked={isCheckboxChecked}\n        onChange={handleChange}\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"rounded focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-gray-800 transition-colors duration-200\",\n\n          // Size classes — the clamp() value set by getSizeClasses drives the\n          // antd wrapper and the visible .ant-checkbox-inner box (!important\n          // needed to beat antd's own token-based width/height)\n          getSizeClasses(),\n          \"w-[var(--checkbox-size)] h-[var(--checkbox-size)]\",\n          \"[&_.ant-checkbox-inner]:!w-[var(--checkbox-size)] [&_.ant-checkbox-inner]:!h-[var(--checkbox-size)]\",\n\n          // Variant classes\n          getVariantClasses(),\n\n          // Disabled styles\n          disabled && \"opacity-50 cursor-not-allowed\",\n\n          // Custom classes\n          checkboxClassName\n        )}\n        aria-required={required}\n        aria-invalid={message && messageType === \"error\" ? \"true\" : \"false\"}\n        aria-describedby={message ? `${id}-message` : undefined}\n      />\n    );\n\n    const labelElement = label ? (\n      <label\n        htmlFor={id}\n        className={cn(\n          \"font-medium cursor-pointer transition-colors duration-200\",\n          disabled\n            ? \"text-neutral-400 dark:text-neutral-600 cursor-not-allowed\"\n            : \"text-neutral-900 dark:text-neutral-100\",\n          labelPosition === \"right\" ? \"ml-2\" : \"mr-2\",\n          labelClassName\n        )}\n      >\n        <Typography variant=\"medium\" size={getLabelSize()} appearance=\"body\">\n          {label}\n          {required && <span className=\"text-red-500 ml-1\">*</span>}\n        </Typography>\n      </label>\n    ) : null;\n\n    return (\n      <div className={cn(\"flex flex-col\", wrapperClassName)}>\n        <div\n          className={cn(\n            \"flex items-center\",\n            labelPosition === \"left\" && \"flex-row-reverse justify-end\"\n          )}\n        >\n          {labelPosition === \"left\" ? (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          ) : (\n            <>\n              {checkboxElement}\n              {labelElement}\n            </>\n          )}\n        </div>\n\n        {/* 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              id={`${id}-message`}\n              role={messageType === \"error\" ? \"alert\" : undefined}\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\nCheckbox.displayName = \"Checkbox\";\n\n// Export type alias for backward compatibility\nexport type TCheckboxComponentProps = CheckboxComponentProps;\n"],"names":["Checkbox","forwardRef","id","label","checked","isChecked","onChange","disabled","required","message","messageType","wrapperClassName","checkboxClassName","labelClassName","size","variant","labelPosition","checkboxProps","ref","isCheckboxChecked","getSizeClasses","getVariantClasses","getMessageTypographyClass","getLabelSize","checkboxElement","jsx","AntdCheckbox","e","cn","labelElement","jsxs","Typography","Fragment","AnimatePresence","motion"],"mappings":"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"}

package/dist/components/user-avatar/UserAvatar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),O=require("@mui/icons-material"),V=require("@mui/icons-material/EditOutlined"),D=require("@mui/icons-material/WarningRounded"),o=require("../../_virtual/index.cjs.js"),n=require("react"),d=require("../data-display/typography/Typography.cjs.js"),g=require("../data-display/tag/Tag.cjs.js"),ee=require("../data-display/skeleton/Skeleton.cjs.js"),re=require("../../utils/countryFlags.cjs.js"),ae=require("./UserAvatarPopper.cjs.js"),oe=require("./StatusInfoRow.cjs.js"),x=require("./constants.cjs.js"),se=require("./PersonIcon.cjs.js"),ne=require("./useDynamicPosition.cjs.js"),j=({label:t,content:l})=>e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx(d.Typography,{size:"small",variant:"medium",className:"mr-5",appearance:"body",children:t}),l]}),H=({firstName:t,lastName:l,email:U,profilePic:c,size:N="md",hoverSize:T="lg",containerClassName:A="",enablePopper:P=!0,className:B,userId:C,lastViewedOn:u,isActive:m,statusIndicator:F=!1,userDetails:r,isFetchingUserDetails:$=!1,authToken:R,onHover:G,currentlyEditing:z})=>{if(t==="All"&&l==="Users")return e.jsx("div",{className:"p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center",children:e.jsx(O.GroupsOutlined,{sx:{fontSize:16},className:"text-primary-600 dark:text-primary-600"})});const[W,v]=n.useState(!1),[M,i]=n.useState(!1),J=x.sizeClasses[N],{triggerRef:K,dropdownRef:Q,position:f,isVisible:X,show:S,hide:q}=ne.useDynamicPosition(),k=n.useRef({}),I=n.useMemo(()=>{if(m||!u)return!1;const a=new Date(u);return(new Date().getTime()-a.getTime())/(1e3*60*60)<24},[m,u]),h=m?"bg-primary-600 dark:bg-primary-600":I?"bg-primary-300 dark:bg-primary-300":u?"bg-neutral-400 dark:bg-neutral-400":null,b=m?"border-primary-600 dark:border-primary-600":I?"border-primary-300 dark:border-primary-300":u?"border-neutral-400 dark:border-neutral-400":"border-primary-200 dark:border-neutral-800",Y={"2xs":"w-1.5 h-1.5",xs:"w-2 h-2",sm:"w-2.5 h-2.5",md:"w-3 h-3",lg:"w-3.5 h-3.5",xl:"w-4 h-4"};n.useEffect(()=>{if(c)if(k.current[c])i(!0);else{i(!1);const a=new Image,p=R||(typeof localStorage<"u"?localStorage.getItem("token"):null);a.src=c+(p?"?token="+p:""),a.onload=()=>{k.current[c]=a.src,i(!0)},a.onerror=()=>{i(!1)}}else i(!1)},[c,R]),n.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]);const y=c?k.current[c]:void 0,s=n.useRef(null),w=n.useRef(null),Z=()=>{G?.(),t&&l&&P&&(s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{v(!0)},300))},L=a=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{w.current&&!w.current.contains(a.relatedTarget)&&v(!1)},200)},_=e.jsxs("div",{ref:w,className:"bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]",onMouseEnter:()=>{s.current&&clearTimeout(s.current)},onMouseLeave:a=>L(a),children:[e.jsxs("div",{className:"flex flex-col gap-1 items-center p-5",children:[e.jsxs("div",{className:o("relative",x.sizeClasses[T]),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border-2 object-cover w-full h-full",b),onError:()=>i(!1)}):e.jsx("div",{className:o("bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full",b),children:x.getInitials((t||"")+" "+(l||""))}),h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800",Y[T],h)})]}),e.jsxs("div",{className:"flex flex-row gap-1 items-center justify-center",children:[e.jsxs(d.Typography,{size:"medium",variant:"semibold",className:"w-full text-center",children:[t||""," ",l||""]}),r?.region&&e.jsx("span",{children:re.getFlagComponentRectangleMd(r?.region)})]}),e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:U||r?.email||""})]}),z?e.jsx("div",{className:"px-5 pb-3",children:e.jsxs("div",{className:"flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]",children:[e.jsx("div",{className:"flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950",children:e.jsx(V,{sx:{width:13,height:13},className:"text-primary-600 dark:text-primary-500"})}),e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsx(d.Typography,{size:"extra-small",variant:"semibold",appearance:"custom",className:"text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500",children:"Currently editing"}),e.jsx(d.Typography,{size:"extra-small",variant:"semibold",className:"truncate",children:z})]})]})}):null,C&&($?e.jsx("div",{className:"p-5",children:e.jsx(ee.Skeleton,{})}):C&&(r?.teams||r?.clearanceLevel||r?.group)?e.jsxs("div",{className:"flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg",children:[e.jsx(oe.StatusInfoRow,{isActive:m,lastViewedOn:u}),r.username&&e.jsx(j,{label:"Username",content:e.jsx("div",{className:"flex gap-2",children:e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:r.username})})}),r?.teams&&r?.teams?.length>0&&e.jsx(j,{label:"Team",content:e.jsxs("div",{className:"flex gap-2",children:[r?.teams?.length>0&&e.jsx(g.Tag,{label:r?.teams[0]?.name,color:r?.teams[0]?.color||"#e38715",size:"md",isHashColor:!0},r?.teams[0]?.id),r?.teams?.length>=2&&e.jsxs("div",{ref:K,className:"relative cursor-pointer",onMouseEnter:S,onMouseLeave:q,onClick:a=>a.stopPropagation(),children:[e.jsx(g.Tag,{label:`+ ${r?.teams?.length-1} More`,color:"#004f08",size:"md",isHashColor:!0},1),X&&e.jsx("div",{ref:Q,className:o("absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60",{"top-full":f.vertical==="bottom","bottom-full":f.vertical==="top","left-0":f.horizontal==="left","right-0":f.horizontal==="right"}),onMouseEnter:S,onMouseLeave:q,children:r?.teams?.slice(1)?.map((a,p)=>e.jsx("div",{className:"my-2",children:e.jsx(g.Tag,{label:a?.name,color:a?.color||"#4A5568",size:"md",isHashColor:!0,className:"w-fit"},a?.id)},a?.id||p))})]})]})}),r?.group&&e.jsx(j,{label:"Role",content:e.jsx(g.Tag,{label:r?.group,color:"#004094",size:"md",isHashColor:!0},r?.group)}),r?.clearanceLevel&&e.jsx(j,{label:"Clearance Level",content:e.jsx(g.Tag,{label:`Level ${r?.clearanceLevel}`,color:"#b30000",size:"md",isHashColor:!0},String(r?.clearanceLevel))})]}):e.jsx("div",{className:"flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg",children:e.jsxs(d.Typography,{className:"flex items-center justify-center gap-1",size:"extra-small",variant:"medium",appearance:"body",children:[e.jsx(D,{sx:{height:"16px",width:"16px",color:"#F04438"}}),"No other information found!"]})}))]}),E=n.useRef(null);return e.jsxs("div",{onMouseEnter:Z,onMouseLeave:L,className:o("inline-block relative cursor-pointer",B),ref:E,children:[e.jsxs("div",{className:o("relative",A||J),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border object-cover w-full h-full",b),onError:()=>i(!1)}):t&&l?e.jsx("div",{className:o(" bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700",x.sizeClasses[N],b),children:x.getInitials((t||"")+" "+(l||""))}):e.jsx("div",{className:o(b,"p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"),children:e.jsx(se.PersonIcon,{fill:"#98A2B3"})}),F&&h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2",h)})]}),e.jsx(ae.UserAvatarPopper,{isOpen:W,onClose:()=>v(!1),anchorEl:E.current,className:"bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600",children:_})]})};H.displayName="UserAvatar";exports.UserAvatar=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),O=require("@mui/icons-material"),V=require("@mui/icons-material/EditOutlined"),D=require("@mui/icons-material/WarningRounded"),o=require("../../_virtual/index.cjs.js"),t=require("react"),d=require("../data-display/typography/Typography.cjs.js"),p=require("../data-display/tag/Tag.cjs.js"),ee=require("../data-display/skeleton/Skeleton.cjs.js"),re=require("../../utils/countryFlags.cjs.js"),ae=require("./UserAvatarPopper.cjs.js"),oe=require("./StatusInfoRow.cjs.js"),g=require("./constants.cjs.js"),se=require("./PersonIcon.cjs.js"),te=require("./useDynamicPosition.cjs.js"),j=({label:n,content:l})=>e.jsxs("div",{className:"flex justify-between items-center",children:[e.jsx(d.Typography,{size:"small",variant:"medium",className:"mr-5",appearance:"body",children:n}),l]}),H=({firstName:n,lastName:l,email:U,profilePic:c,size:N="md",hoverSize:T="lg",containerClassName:A="",enablePopper:P=!0,className:B,userId:C,lastViewedOn:u,isActive:m,statusIndicator:F=!1,userDetails:r,isFetchingUserDetails:$=!1,authToken:R,onHover:G,currentlyEditing:z})=>{if(n==="All"&&l==="Users")return e.jsx("div",{className:"p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center",children:e.jsx(O.GroupsOutlined,{sx:{fontSize:16},className:"text-primary-600 dark:text-primary-600"})});const[W,v]=t.useState(!1),[M,i]=t.useState(!1),J=g.sizeClasses[N],{triggerRef:K,dropdownRef:Q,position:f,isVisible:X,show:S,hide:q}=te.useDynamicPosition(),k=t.useRef({}),I=t.useMemo(()=>{if(m||!u)return!1;const a=new Date(u);return(new Date().getTime()-a.getTime())/(1e3*60*60)<24},[m,u]),h=m?"bg-primary-600 dark:bg-primary-600":I?"bg-primary-300 dark:bg-primary-300":u?"bg-neutral-400 dark:bg-neutral-400":null,b=m?"border-primary-600 dark:border-primary-600":I?"border-primary-300 dark:border-primary-300":u?"border-neutral-400 dark:border-neutral-400":"border-primary-200 dark:border-neutral-800",Y={"2xs":"w-1.5 h-1.5",xs:"w-2 h-2",sm:"w-2.5 h-2.5",md:"w-3 h-3",lg:"w-3.5 h-3.5",xl:"w-4 h-4"};t.useEffect(()=>{if(c)if(k.current[c])i(!0);else{i(!1);const a=new Image,x=R||(typeof localStorage<"u"?localStorage.getItem("token"):null);a.src=c+(x?"?token="+x:""),a.onload=()=>{k.current[c]=a.src,i(!0)},a.onerror=()=>{i(!1)}}else i(!1)},[c,R]),t.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]);const y=c?k.current[c]:void 0,s=t.useRef(null),w=t.useRef(null),Z=()=>{G?.(),n&&l&&P&&(s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{v(!0)},300))},L=a=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{w.current&&!w.current.contains(a.relatedTarget)&&v(!1)},200)},_=e.jsxs("div",{ref:w,className:"bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]",onMouseEnter:()=>{s.current&&clearTimeout(s.current)},onMouseLeave:a=>L(a),children:[e.jsxs("div",{className:"flex flex-col gap-1 items-center p-5",children:[e.jsxs("div",{className:o("relative",g.sizeClasses[T]),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border-2 object-cover w-full h-full",b),onError:()=>i(!1)}):e.jsx("div",{className:o("bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full",b),children:g.getInitials((n||"")+" "+(l||""))}),h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800",Y[T],h)})]}),e.jsxs("div",{className:"flex flex-row gap-1 items-center justify-center",children:[e.jsxs(d.Typography,{size:"medium",variant:"semibold",className:"w-full text-center",children:[n||""," ",l||""]}),r?.region&&e.jsx("span",{children:re.getFlagComponentRectangleMd(r?.region)})]}),e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:U||r?.email||""})]}),z?e.jsx("div",{className:"px-5 pb-3",children:e.jsxs("div",{className:"flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]",children:[e.jsx("div",{className:"flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950",children:e.jsx(V,{sx:{width:13,height:13},className:"text-primary-600 dark:text-primary-500"})}),e.jsxs("div",{className:"flex flex-col min-w-0",children:[e.jsx(d.Typography,{size:"extra-small",variant:"semibold",appearance:"custom",className:"text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500",children:"Currently editing"}),e.jsx(d.Typography,{size:"extra-small",variant:"semibold",className:"truncate",children:z})]})]})}):null,C&&($?e.jsx("div",{className:"p-5",children:e.jsx(ee.Skeleton,{})}):C&&(r?.teams||r?.clearanceLevel||r?.group)?e.jsxs("div",{className:"flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg",children:[e.jsx(oe.StatusInfoRow,{isActive:m,lastViewedOn:u}),r.username&&e.jsx(j,{label:"Username",content:e.jsx("div",{className:"flex gap-2",children:e.jsx(d.Typography,{size:"small",variant:"medium",appearance:"body",children:r.username})})}),r?.teams&&r?.teams?.length>0&&e.jsx(j,{label:"Team",content:e.jsxs("div",{className:"flex gap-2",children:[r?.teams?.length>0&&e.jsx(p.Tag,{label:r?.teams[0]?.name,color:r?.teams[0]?.color||"#e38715",size:"md",isHashColor:!0},r?.teams[0]?.id),r?.teams?.length>=2&&e.jsxs("div",{ref:K,className:"relative cursor-pointer",onMouseEnter:S,onMouseLeave:q,onClick:a=>a.stopPropagation(),children:[e.jsx(p.Tag,{label:`+ ${r?.teams?.length-1} More`,color:"#004f08",size:"md",isHashColor:!0},1),X&&e.jsx("div",{ref:Q,className:o("absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60",{"top-full":f.vertical==="bottom","bottom-full":f.vertical==="top","left-0":f.horizontal==="left","right-0":f.horizontal==="right"}),onMouseEnter:S,onMouseLeave:q,children:r?.teams?.slice(1)?.map((a,x)=>e.jsx("div",{className:"my-2",children:e.jsx(p.Tag,{label:a?.name,color:a?.color||"#4A5568",size:"md",isHashColor:!0,className:"w-fit"},a?.id)},a?.id||x))})]})]})}),r?.group&&e.jsx(j,{label:"Role",content:e.jsx(p.Tag,{label:r?.group,color:"#004094",size:"md",isHashColor:!0},r?.group)}),r?.clearanceLevel&&e.jsx(j,{label:"Clearance Level",content:e.jsx(p.Tag,{label:`Level ${r?.clearanceLevel}`,color:"#b30000",size:"md",isHashColor:!0},String(r?.clearanceLevel))})]}):e.jsx("div",{className:"flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg",children:e.jsxs(d.Typography,{className:"flex items-center justify-center gap-1",size:"extra-small",variant:"medium",appearance:"body",children:[e.jsx(D,{sx:{height:"16px",width:"16px",color:"#F04438"}}),"No other information found!"]})}))]}),E=t.useRef(null);return e.jsxs("div",{onMouseEnter:Z,onMouseLeave:L,className:o("inline-block relative cursor-pointer",B),ref:E,children:[e.jsxs("div",{className:o("relative",A||J),children:[y&&M?e.jsx("img",{src:y,alt:"Profile",className:o("rounded-full border object-cover w-full h-full",b),onError:()=>i(!1)}):n&&l?e.jsx("div",{className:o(" bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 text-2xs",g.sizeClasses[N],b),children:g.getInitials((n||"")+" "+(l||""))}):e.jsx("div",{className:o(b,"p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"),children:e.jsx(se.PersonIcon,{fill:"#98A2B3"})}),F&&h&&e.jsx("div",{className:o("absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2",h)})]}),e.jsx(ae.UserAvatarPopper,{isOpen:W,onClose:()=>v(!1),anchorEl:E.current,className:"bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600",children:_})]})};H.displayName="UserAvatar";exports.UserAvatar=H;
 //# sourceMappingURL=UserAvatar.cjs.js.map

package/dist/components/user-avatar/UserAvatar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n  id?: string;\n  name: string;\n  color?: string;\n};\n\nexport type UserDetails = {\n  email?: string;\n  username?: string;\n  teams?: UserDetailsTeam[];\n  group?: string;\n  clearanceLevel?: number | string;\n  region?: string;\n};\n\nexport type UserAvatarProps = {\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  enablePopper?: boolean;\n  profilePic?: string;\n  size?: UserAvatarSize;\n  hoverSize?: UserAvatarSize;\n  containerClassName?: string;\n  className?: string;\n  userId?: string;\n  lastViewedOn?: string;\n  isActive?: boolean;\n  statusIndicator?: boolean;\n  /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n  userDetails?: UserDetails | null;\n  /** Whether user details are being fetched */\n  isFetchingUserDetails?: boolean;\n  /** Optional token for authenticated image loading */\n  authToken?: string;\n  /** Callback triggered when mouse enters the avatar */\n  onHover?: () => void;\n  /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n  currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n  <div className='flex justify-between items-center'>\n    <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n      {label}\n    </Typography>\n    {content}\n  </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n *   firstName=\"John\"\n *   lastName=\"Doe\"\n *   email=\"john@example.com\"\n *   profilePic=\"/avatar.jpg\"\n *   userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n  firstName,\n  lastName,\n  email,\n  profilePic,\n  size = 'md',\n  hoverSize = 'lg',\n  containerClassName = '',\n  enablePopper = true,\n  className,\n  userId,\n  lastViewedOn,\n  isActive,\n  statusIndicator = false,\n  userDetails,\n  isFetchingUserDetails = false,\n  authToken,\n  onHover,\n  currentlyEditing,\n}) => {\n  if (firstName === 'All' && lastName === 'Users') {\n    return (\n      <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n        <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n      </div>\n    );\n  }\n\n  const [visible, setVisible] = useState<boolean>(false);\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n  const avatarSizeClass = sizeClasses[size];\n\n  const {\n    triggerRef: moreTagRef,\n    dropdownRef,\n    position: dropdownPosition,\n    isVisible: showMore,\n    show: handleShowMore,\n    hide: handleHideMore,\n  } = useDynamicPosition();\n\n  const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n  const isRecent = useMemo(() => {\n    if (isActive || !lastViewedOn) return false;\n    const date = new Date(lastViewedOn);\n    const now = new Date();\n    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n    return diffInHours < 24;\n  }, [isActive, lastViewedOn]);\n\n  const getStatusColor = () => {\n    if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n    if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n    if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n    return null;\n  };\n\n  const statusColor = getStatusColor();\n\n  const getBorderColor = () => {\n    if (isActive) return 'border-primary-600 dark:border-primary-600';\n    if (isRecent) return 'border-primary-300 dark:border-primary-300';\n    if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n    return 'border-primary-200 dark:border-neutral-800';\n  };\n\n  const borderColor = getBorderColor();\n\n  const indicatorSizes = {\n    '2xs': 'w-1.5 h-1.5',\n    xs: 'w-2 h-2',\n    sm: 'w-2.5 h-2.5',\n    md: 'w-3 h-3',\n    lg: 'w-3.5 h-3.5',\n    xl: 'w-4 h-4',\n  };\n\n  useEffect(() => {\n    if (profilePic) {\n      if (imageCacheRef.current[profilePic]) {\n        setImageLoaded(true);\n      } else {\n        setImageLoaded(false);\n        const img = new Image();\n        const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n        img.src = profilePic + (token ? '?token=' + token : '');\n        img.onload = () => {\n          imageCacheRef.current[profilePic] = img.src;\n          setImageLoaded(true);\n        };\n        img.onerror = () => {\n          setImageLoaded(false);\n        };\n      }\n    } else {\n      setImageLoaded(false);\n    }\n  }, [profilePic, authToken]);\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, []);\n\n  const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const popperRef = useRef<HTMLDivElement | null>(null);\n\n  const handleMouseEnter = () => {\n    onHover?.();\n    if (firstName && lastName && enablePopper) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setVisible(true);\n      }, 300);\n    }\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n    timerRef.current = setTimeout(() => {\n      if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n        setVisible(false);\n      }\n    }, 200);\n  };\n\n  const popperContent = (\n    <div\n      ref={popperRef}\n      className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n      onMouseEnter={() => {\n        if (timerRef.current) {\n          clearTimeout(timerRef.current);\n        }\n      }}\n      onMouseLeave={(event) => handleMouseLeave(event)}\n    >\n      <div className='flex flex-col gap-1 items-center p-5'>\n        <div className={cn('relative', sizeClasses[hoverSize])}>\n          {cachedSrc && imageLoaded ? (\n            <img\n              src={cachedSrc}\n              alt='Profile'\n              className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n              onError={() => setImageLoaded(false)}\n            />\n          ) : (\n            <div\n              className={cn(\n                'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n                borderColor,\n              )}\n            >\n              {getInitials((firstName || '') + ' ' + (lastName || ''))}\n            </div>\n          )}\n\n          {statusColor && (\n            <div\n              className={cn(\n                'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n                indicatorSizes[hoverSize],\n                statusColor,\n              )}\n            />\n          )}\n        </div>\n        <div className='flex flex-row gap-1 items-center justify-center'>\n          <Typography size='medium' variant='semibold' className='w-full text-center'>\n            {firstName || ''} {lastName || ''}\n          </Typography>\n          {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n        </div>\n\n        <Typography size='small' variant='medium' appearance='body'>\n          {email || userDetails?.email || ''}\n        </Typography>\n      </div>\n\n      {currentlyEditing ? (\n        <div className='px-5 pb-3'>\n          <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n            <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n              <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n            </div>\n            <div className='flex flex-col min-w-0'>\n              <Typography\n                size='extra-small'\n                variant='semibold'\n                appearance='custom'\n                className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n              >\n                Currently editing\n              </Typography>\n              <Typography size='extra-small' variant='semibold' className='truncate'>\n                {currentlyEditing}\n              </Typography>\n            </div>\n          </div>\n        </div>\n      ) : null}\n\n      {userId &&\n        (isFetchingUserDetails ? (\n          <div className='p-5'>\n            <Skeleton />\n          </div>\n        ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n          <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n            <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n            {userDetails.username && (\n              <InfoRow\n                label='Username'\n                content={\n                  <div className='flex gap-2'>\n                    <Typography size='small' variant='medium' appearance='body'>\n                      {userDetails.username}\n                    </Typography>\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.teams && userDetails?.teams?.length > 0 && (\n              <InfoRow\n                label='Team'\n                content={\n                  <div className='flex gap-2'>\n                    {userDetails?.teams?.length > 0 && (\n                      <Tag\n                        key={userDetails?.teams[0]?.id}\n                        label={userDetails?.teams[0]?.name}\n                        color={userDetails?.teams[0]?.color || '#e38715'}\n                        size='md'\n                        isHashColor\n                      />\n                    )}\n                    {userDetails?.teams?.length >= 2 && (\n                      <div\n                        ref={moreTagRef}\n                        className='relative cursor-pointer'\n                        onMouseEnter={handleShowMore}\n                        onMouseLeave={handleHideMore}\n                        onClick={(e) => e.stopPropagation()}\n                      >\n                        <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n                        {showMore && (\n                          <div\n                            ref={dropdownRef}\n                            className={cn(\n                              'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n                              {\n                                'top-full': dropdownPosition.vertical === 'bottom',\n                                'bottom-full': dropdownPosition.vertical === 'top',\n                                'left-0': dropdownPosition.horizontal === 'left',\n                                'right-0': dropdownPosition.horizontal === 'right',\n                              },\n                            )}\n                            onMouseEnter={handleShowMore}\n                            onMouseLeave={handleHideMore}\n                          >\n                            {userDetails?.teams?.slice(1)?.map((team, index) => (\n                              <div key={team?.id || index} className='my-2'>\n                                <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n                              </div>\n                            ))}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.group && (\n              <InfoRow\n                label='Role'\n                content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n              />\n            )}\n\n            {userDetails?.clearanceLevel && (\n              <InfoRow\n                label='Clearance Level'\n                content={\n                  <Tag\n                    key={String(userDetails?.clearanceLevel)}\n                    label={`Level ${userDetails?.clearanceLevel}`}\n                    color='#b30000'\n                    size='md'\n                    isHashColor\n                  />\n                }\n              />\n            )}\n          </div>\n        ) : (\n          <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n            <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n              <WarningRoundedIcon\n                sx={{\n                  height: '16px',\n                  width: '16px',\n                  color: '#F04438',\n                }}\n              />\n              No other information found!\n            </Typography>\n          </div>\n        ))}\n    </div>\n  );\n  const containerRef = useRef<HTMLDivElement>(null);\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn('inline-block relative cursor-pointer', className)}\n      ref={containerRef}\n    >\n      <div className={cn('relative', containerClassName || avatarSizeClass)}>\n        {cachedSrc && imageLoaded ? (\n          <img\n            src={cachedSrc}\n            alt='Profile'\n            className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n            onError={() => setImageLoaded(false)}\n          />\n        ) : firstName && lastName ? (\n          <div\n            className={cn(\n              ' bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700', \n              sizeClasses[size],\n              borderColor,\n            )}\n          >\n            {getInitials((firstName || '') + ' ' + (lastName || ''))}\n          </div>\n        ) : (\n          <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n            <PersonIcon fill='#98A2B3' />\n          </div>\n        )}\n\n        {statusIndicator && statusColor && (\n          <div\n            className={cn(\n              'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n              statusColor,\n            )}\n          />\n        )}\n      </div>\n      <UserAvatarPopper\n        isOpen={visible}\n        onClose={() => setVisible(false)}\n        anchorEl={containerRef.current}\n        className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n      >\n        {popperContent}\n      </UserAvatarPopper>\n    </div>\n  );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
+{"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n  id?: string;\n  name: string;\n  color?: string;\n};\n\nexport type UserDetails = {\n  email?: string;\n  username?: string;\n  teams?: UserDetailsTeam[];\n  group?: string;\n  clearanceLevel?: number | string;\n  region?: string;\n};\n\nexport type UserAvatarProps = {\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  enablePopper?: boolean;\n  profilePic?: string;\n  size?: UserAvatarSize;\n  hoverSize?: UserAvatarSize;\n  containerClassName?: string;\n  className?: string;\n  userId?: string;\n  lastViewedOn?: string;\n  isActive?: boolean;\n  statusIndicator?: boolean;\n  /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n  userDetails?: UserDetails | null;\n  /** Whether user details are being fetched */\n  isFetchingUserDetails?: boolean;\n  /** Optional token for authenticated image loading */\n  authToken?: string;\n  /** Callback triggered when mouse enters the avatar */\n  onHover?: () => void;\n  /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n  currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n  <div className='flex justify-between items-center'>\n    <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n      {label}\n    </Typography>\n    {content}\n  </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n *   firstName=\"John\"\n *   lastName=\"Doe\"\n *   email=\"john@example.com\"\n *   profilePic=\"/avatar.jpg\"\n *   userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n  firstName,\n  lastName,\n  email,\n  profilePic,\n  size = 'md',\n  hoverSize = 'lg',\n  containerClassName = '',\n  enablePopper = true,\n  className,\n  userId,\n  lastViewedOn,\n  isActive,\n  statusIndicator = false,\n  userDetails,\n  isFetchingUserDetails = false,\n  authToken,\n  onHover,\n  currentlyEditing,\n}) => {\n  if (firstName === 'All' && lastName === 'Users') {\n    return (\n      <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n        <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n      </div>\n    );\n  }\n\n  const [visible, setVisible] = useState<boolean>(false);\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n  const avatarSizeClass = sizeClasses[size];\n\n  const {\n    triggerRef: moreTagRef,\n    dropdownRef,\n    position: dropdownPosition,\n    isVisible: showMore,\n    show: handleShowMore,\n    hide: handleHideMore,\n  } = useDynamicPosition();\n\n  const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n  const isRecent = useMemo(() => {\n    if (isActive || !lastViewedOn) return false;\n    const date = new Date(lastViewedOn);\n    const now = new Date();\n    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n    return diffInHours < 24;\n  }, [isActive, lastViewedOn]);\n\n  const getStatusColor = () => {\n    if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n    if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n    if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n    return null;\n  };\n\n  const statusColor = getStatusColor();\n\n  const getBorderColor = () => {\n    if (isActive) return 'border-primary-600 dark:border-primary-600';\n    if (isRecent) return 'border-primary-300 dark:border-primary-300';\n    if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n    return 'border-primary-200 dark:border-neutral-800';\n  };\n\n  const borderColor = getBorderColor();\n\n  const indicatorSizes = {\n    '2xs': 'w-1.5 h-1.5',\n    xs: 'w-2 h-2',\n    sm: 'w-2.5 h-2.5',\n    md: 'w-3 h-3',\n    lg: 'w-3.5 h-3.5',\n    xl: 'w-4 h-4',\n  };\n\n  useEffect(() => {\n    if (profilePic) {\n      if (imageCacheRef.current[profilePic]) {\n        setImageLoaded(true);\n      } else {\n        setImageLoaded(false);\n        const img = new Image();\n        const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n        img.src = profilePic + (token ? '?token=' + token : '');\n        img.onload = () => {\n          imageCacheRef.current[profilePic] = img.src;\n          setImageLoaded(true);\n        };\n        img.onerror = () => {\n          setImageLoaded(false);\n        };\n      }\n    } else {\n      setImageLoaded(false);\n    }\n  }, [profilePic, authToken]);\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, []);\n\n  const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const popperRef = useRef<HTMLDivElement | null>(null);\n\n  const handleMouseEnter = () => {\n    onHover?.();\n    if (firstName && lastName && enablePopper) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setVisible(true);\n      }, 300);\n    }\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n    timerRef.current = setTimeout(() => {\n      if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n        setVisible(false);\n      }\n    }, 200);\n  };\n\n  const popperContent = (\n    <div\n      ref={popperRef}\n      className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n      onMouseEnter={() => {\n        if (timerRef.current) {\n          clearTimeout(timerRef.current);\n        }\n      }}\n      onMouseLeave={(event) => handleMouseLeave(event)}\n    >\n      <div className='flex flex-col gap-1 items-center p-5'>\n        <div className={cn('relative', sizeClasses[hoverSize])}>\n          {cachedSrc && imageLoaded ? (\n            <img\n              src={cachedSrc}\n              alt='Profile'\n              className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n              onError={() => setImageLoaded(false)}\n            />\n          ) : (\n            <div\n              className={cn(\n                'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n                borderColor,\n              )}\n            >\n              {getInitials((firstName || '') + ' ' + (lastName || ''))}\n            </div>\n          )}\n\n          {statusColor && (\n            <div\n              className={cn(\n                'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n                indicatorSizes[hoverSize],\n                statusColor,\n              )}\n            />\n          )}\n        </div>\n        <div className='flex flex-row gap-1 items-center justify-center'>\n          <Typography size='medium' variant='semibold' className='w-full text-center'>\n            {firstName || ''} {lastName || ''}\n          </Typography>\n          {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n        </div>\n\n        <Typography size='small' variant='medium' appearance='body'>\n          {email || userDetails?.email || ''}\n        </Typography>\n      </div>\n\n      {currentlyEditing ? (\n        <div className='px-5 pb-3'>\n          <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n            <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n              <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n            </div>\n            <div className='flex flex-col min-w-0'>\n              <Typography\n                size='extra-small'\n                variant='semibold'\n                appearance='custom'\n                className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n              >\n                Currently editing\n              </Typography>\n              <Typography size='extra-small' variant='semibold' className='truncate'>\n                {currentlyEditing}\n              </Typography>\n            </div>\n          </div>\n        </div>\n      ) : null}\n\n      {userId &&\n        (isFetchingUserDetails ? (\n          <div className='p-5'>\n            <Skeleton />\n          </div>\n        ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n          <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n            <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n            {userDetails.username && (\n              <InfoRow\n                label='Username'\n                content={\n                  <div className='flex gap-2'>\n                    <Typography size='small' variant='medium' appearance='body'>\n                      {userDetails.username}\n                    </Typography>\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.teams && userDetails?.teams?.length > 0 && (\n              <InfoRow\n                label='Team'\n                content={\n                  <div className='flex gap-2'>\n                    {userDetails?.teams?.length > 0 && (\n                      <Tag\n                        key={userDetails?.teams[0]?.id}\n                        label={userDetails?.teams[0]?.name}\n                        color={userDetails?.teams[0]?.color || '#e38715'}\n                        size='md'\n                        isHashColor\n                      />\n                    )}\n                    {userDetails?.teams?.length >= 2 && (\n                      <div\n                        ref={moreTagRef}\n                        className='relative cursor-pointer'\n                        onMouseEnter={handleShowMore}\n                        onMouseLeave={handleHideMore}\n                        onClick={(e) => e.stopPropagation()}\n                      >\n                        <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n                        {showMore && (\n                          <div\n                            ref={dropdownRef}\n                            className={cn(\n                              'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n                              {\n                                'top-full': dropdownPosition.vertical === 'bottom',\n                                'bottom-full': dropdownPosition.vertical === 'top',\n                                'left-0': dropdownPosition.horizontal === 'left',\n                                'right-0': dropdownPosition.horizontal === 'right',\n                              },\n                            )}\n                            onMouseEnter={handleShowMore}\n                            onMouseLeave={handleHideMore}\n                          >\n                            {userDetails?.teams?.slice(1)?.map((team, index) => (\n                              <div key={team?.id || index} className='my-2'>\n                                <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n                              </div>\n                            ))}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.group && (\n              <InfoRow\n                label='Role'\n                content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n              />\n            )}\n\n            {userDetails?.clearanceLevel && (\n              <InfoRow\n                label='Clearance Level'\n                content={\n                  <Tag\n                    key={String(userDetails?.clearanceLevel)}\n                    label={`Level ${userDetails?.clearanceLevel}`}\n                    color='#b30000'\n                    size='md'\n                    isHashColor\n                  />\n                }\n              />\n            )}\n          </div>\n        ) : (\n          <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n            <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n              <WarningRoundedIcon\n                sx={{\n                  height: '16px',\n                  width: '16px',\n                  color: '#F04438',\n                }}\n              />\n              No other information found!\n            </Typography>\n          </div>\n        ))}\n    </div>\n  );\n  const containerRef = useRef<HTMLDivElement>(null);\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn('inline-block relative cursor-pointer', className)}\n      ref={containerRef}\n    >\n      <div className={cn('relative', containerClassName || avatarSizeClass)}>\n        {cachedSrc && imageLoaded ? (\n          <img\n            src={cachedSrc}\n            alt='Profile'\n            className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n            onError={() => setImageLoaded(false)}\n          />\n        ) : firstName && lastName ? (\n          <div\n            className={cn(\n              ' bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 text-2xs', \n              sizeClasses[size],\n              borderColor,\n            )}\n          >\n            {getInitials((firstName || '') + ' ' + (lastName || ''))}\n          </div>\n        ) : (\n          <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n            <PersonIcon fill='#98A2B3' />\n          </div>\n        )}\n\n        {statusIndicator && statusColor && (\n          <div\n            className={cn(\n              'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n              statusColor,\n            )}\n          />\n        )}\n      </div>\n      <UserAvatarPopper\n        isOpen={visible}\n        onClose={() => setVisible(false)}\n        anchorEl={containerRef.current}\n        className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n      >\n        {popperContent}\n      </UserAvatarPopper>\n    </div>\n  );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}

package/dist/components/user-avatar/UserAvatar.es.js

@@ -268,7 +268,7 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
             "div",
             {
               className: l(
-                " bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700",
+                " bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 text-2xs",
                 C[z],
                 b
               ),

package/dist/components/user-avatar/UserAvatar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n  id?: string;\n  name: string;\n  color?: string;\n};\n\nexport type UserDetails = {\n  email?: string;\n  username?: string;\n  teams?: UserDetailsTeam[];\n  group?: string;\n  clearanceLevel?: number | string;\n  region?: string;\n};\n\nexport type UserAvatarProps = {\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  enablePopper?: boolean;\n  profilePic?: string;\n  size?: UserAvatarSize;\n  hoverSize?: UserAvatarSize;\n  containerClassName?: string;\n  className?: string;\n  userId?: string;\n  lastViewedOn?: string;\n  isActive?: boolean;\n  statusIndicator?: boolean;\n  /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n  userDetails?: UserDetails | null;\n  /** Whether user details are being fetched */\n  isFetchingUserDetails?: boolean;\n  /** Optional token for authenticated image loading */\n  authToken?: string;\n  /** Callback triggered when mouse enters the avatar */\n  onHover?: () => void;\n  /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n  currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n  <div className='flex justify-between items-center'>\n    <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n      {label}\n    </Typography>\n    {content}\n  </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n *   firstName=\"John\"\n *   lastName=\"Doe\"\n *   email=\"john@example.com\"\n *   profilePic=\"/avatar.jpg\"\n *   userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n  firstName,\n  lastName,\n  email,\n  profilePic,\n  size = 'md',\n  hoverSize = 'lg',\n  containerClassName = '',\n  enablePopper = true,\n  className,\n  userId,\n  lastViewedOn,\n  isActive,\n  statusIndicator = false,\n  userDetails,\n  isFetchingUserDetails = false,\n  authToken,\n  onHover,\n  currentlyEditing,\n}) => {\n  if (firstName === 'All' && lastName === 'Users') {\n    return (\n      <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n        <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n      </div>\n    );\n  }\n\n  const [visible, setVisible] = useState<boolean>(false);\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n  const avatarSizeClass = sizeClasses[size];\n\n  const {\n    triggerRef: moreTagRef,\n    dropdownRef,\n    position: dropdownPosition,\n    isVisible: showMore,\n    show: handleShowMore,\n    hide: handleHideMore,\n  } = useDynamicPosition();\n\n  const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n  const isRecent = useMemo(() => {\n    if (isActive || !lastViewedOn) return false;\n    const date = new Date(lastViewedOn);\n    const now = new Date();\n    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n    return diffInHours < 24;\n  }, [isActive, lastViewedOn]);\n\n  const getStatusColor = () => {\n    if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n    if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n    if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n    return null;\n  };\n\n  const statusColor = getStatusColor();\n\n  const getBorderColor = () => {\n    if (isActive) return 'border-primary-600 dark:border-primary-600';\n    if (isRecent) return 'border-primary-300 dark:border-primary-300';\n    if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n    return 'border-primary-200 dark:border-neutral-800';\n  };\n\n  const borderColor = getBorderColor();\n\n  const indicatorSizes = {\n    '2xs': 'w-1.5 h-1.5',\n    xs: 'w-2 h-2',\n    sm: 'w-2.5 h-2.5',\n    md: 'w-3 h-3',\n    lg: 'w-3.5 h-3.5',\n    xl: 'w-4 h-4',\n  };\n\n  useEffect(() => {\n    if (profilePic) {\n      if (imageCacheRef.current[profilePic]) {\n        setImageLoaded(true);\n      } else {\n        setImageLoaded(false);\n        const img = new Image();\n        const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n        img.src = profilePic + (token ? '?token=' + token : '');\n        img.onload = () => {\n          imageCacheRef.current[profilePic] = img.src;\n          setImageLoaded(true);\n        };\n        img.onerror = () => {\n          setImageLoaded(false);\n        };\n      }\n    } else {\n      setImageLoaded(false);\n    }\n  }, [profilePic, authToken]);\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, []);\n\n  const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const popperRef = useRef<HTMLDivElement | null>(null);\n\n  const handleMouseEnter = () => {\n    onHover?.();\n    if (firstName && lastName && enablePopper) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setVisible(true);\n      }, 300);\n    }\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n    timerRef.current = setTimeout(() => {\n      if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n        setVisible(false);\n      }\n    }, 200);\n  };\n\n  const popperContent = (\n    <div\n      ref={popperRef}\n      className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n      onMouseEnter={() => {\n        if (timerRef.current) {\n          clearTimeout(timerRef.current);\n        }\n      }}\n      onMouseLeave={(event) => handleMouseLeave(event)}\n    >\n      <div className='flex flex-col gap-1 items-center p-5'>\n        <div className={cn('relative', sizeClasses[hoverSize])}>\n          {cachedSrc && imageLoaded ? (\n            <img\n              src={cachedSrc}\n              alt='Profile'\n              className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n              onError={() => setImageLoaded(false)}\n            />\n          ) : (\n            <div\n              className={cn(\n                'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n                borderColor,\n              )}\n            >\n              {getInitials((firstName || '') + ' ' + (lastName || ''))}\n            </div>\n          )}\n\n          {statusColor && (\n            <div\n              className={cn(\n                'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n                indicatorSizes[hoverSize],\n                statusColor,\n              )}\n            />\n          )}\n        </div>\n        <div className='flex flex-row gap-1 items-center justify-center'>\n          <Typography size='medium' variant='semibold' className='w-full text-center'>\n            {firstName || ''} {lastName || ''}\n          </Typography>\n          {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n        </div>\n\n        <Typography size='small' variant='medium' appearance='body'>\n          {email || userDetails?.email || ''}\n        </Typography>\n      </div>\n\n      {currentlyEditing ? (\n        <div className='px-5 pb-3'>\n          <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n            <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n              <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n            </div>\n            <div className='flex flex-col min-w-0'>\n              <Typography\n                size='extra-small'\n                variant='semibold'\n                appearance='custom'\n                className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n              >\n                Currently editing\n              </Typography>\n              <Typography size='extra-small' variant='semibold' className='truncate'>\n                {currentlyEditing}\n              </Typography>\n            </div>\n          </div>\n        </div>\n      ) : null}\n\n      {userId &&\n        (isFetchingUserDetails ? (\n          <div className='p-5'>\n            <Skeleton />\n          </div>\n        ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n          <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n            <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n            {userDetails.username && (\n              <InfoRow\n                label='Username'\n                content={\n                  <div className='flex gap-2'>\n                    <Typography size='small' variant='medium' appearance='body'>\n                      {userDetails.username}\n                    </Typography>\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.teams && userDetails?.teams?.length > 0 && (\n              <InfoRow\n                label='Team'\n                content={\n                  <div className='flex gap-2'>\n                    {userDetails?.teams?.length > 0 && (\n                      <Tag\n                        key={userDetails?.teams[0]?.id}\n                        label={userDetails?.teams[0]?.name}\n                        color={userDetails?.teams[0]?.color || '#e38715'}\n                        size='md'\n                        isHashColor\n                      />\n                    )}\n                    {userDetails?.teams?.length >= 2 && (\n                      <div\n                        ref={moreTagRef}\n                        className='relative cursor-pointer'\n                        onMouseEnter={handleShowMore}\n                        onMouseLeave={handleHideMore}\n                        onClick={(e) => e.stopPropagation()}\n                      >\n                        <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n                        {showMore && (\n                          <div\n                            ref={dropdownRef}\n                            className={cn(\n                              'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n                              {\n                                'top-full': dropdownPosition.vertical === 'bottom',\n                                'bottom-full': dropdownPosition.vertical === 'top',\n                                'left-0': dropdownPosition.horizontal === 'left',\n                                'right-0': dropdownPosition.horizontal === 'right',\n                              },\n                            )}\n                            onMouseEnter={handleShowMore}\n                            onMouseLeave={handleHideMore}\n                          >\n                            {userDetails?.teams?.slice(1)?.map((team, index) => (\n                              <div key={team?.id || index} className='my-2'>\n                                <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n                              </div>\n                            ))}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.group && (\n              <InfoRow\n                label='Role'\n                content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n              />\n            )}\n\n            {userDetails?.clearanceLevel && (\n              <InfoRow\n                label='Clearance Level'\n                content={\n                  <Tag\n                    key={String(userDetails?.clearanceLevel)}\n                    label={`Level ${userDetails?.clearanceLevel}`}\n                    color='#b30000'\n                    size='md'\n                    isHashColor\n                  />\n                }\n              />\n            )}\n          </div>\n        ) : (\n          <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n            <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n              <WarningRoundedIcon\n                sx={{\n                  height: '16px',\n                  width: '16px',\n                  color: '#F04438',\n                }}\n              />\n              No other information found!\n            </Typography>\n          </div>\n        ))}\n    </div>\n  );\n  const containerRef = useRef<HTMLDivElement>(null);\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn('inline-block relative cursor-pointer', className)}\n      ref={containerRef}\n    >\n      <div className={cn('relative', containerClassName || avatarSizeClass)}>\n        {cachedSrc && imageLoaded ? (\n          <img\n            src={cachedSrc}\n            alt='Profile'\n            className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n            onError={() => setImageLoaded(false)}\n          />\n        ) : firstName && lastName ? (\n          <div\n            className={cn(\n              ' bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700', \n              sizeClasses[size],\n              borderColor,\n            )}\n          >\n            {getInitials((firstName || '') + ' ' + (lastName || ''))}\n          </div>\n        ) : (\n          <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n            <PersonIcon fill='#98A2B3' />\n          </div>\n        )}\n\n        {statusIndicator && statusColor && (\n          <div\n            className={cn(\n              'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n              statusColor,\n            )}\n          />\n        )}\n      </div>\n      <UserAvatarPopper\n        isOpen={visible}\n        onClose={() => setVisible(false)}\n        anchorEl={containerRef.current}\n        className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n      >\n        {popperContent}\n      </UserAvatarPopper>\n    </div>\n  );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
+{"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type UserDetailsTeam = {\n  id?: string;\n  name: string;\n  color?: string;\n};\n\nexport type UserDetails = {\n  email?: string;\n  username?: string;\n  teams?: UserDetailsTeam[];\n  group?: string;\n  clearanceLevel?: number | string;\n  region?: string;\n};\n\nexport type UserAvatarProps = {\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n  enablePopper?: boolean;\n  profilePic?: string;\n  size?: UserAvatarSize;\n  hoverSize?: UserAvatarSize;\n  containerClassName?: string;\n  className?: string;\n  userId?: string;\n  lastViewedOn?: string;\n  isActive?: boolean;\n  statusIndicator?: boolean;\n  /** User details to display in the popper - replaces the useTeamMemberFilter hook */\n  userDetails?: UserDetails | null;\n  /** Whether user details are being fetched */\n  isFetchingUserDetails?: boolean;\n  /** Optional token for authenticated image loading */\n  authToken?: string;\n  /** Callback triggered when mouse enters the avatar */\n  onHover?: () => void;\n  /** Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. */\n  currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n  <div className='flex justify-between items-center'>\n    <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n      {label}\n    </Typography>\n    {content}\n  </div>\n);\n\n/**\n * UserAvatar component for displaying user profile pictures with hover popper\n *\n * @example\n * ```tsx\n * <UserAvatar\n *   firstName=\"John\"\n *   lastName=\"Doe\"\n *   email=\"john@example.com\"\n *   profilePic=\"/avatar.jpg\"\n *   userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n */\nexport const UserAvatar: FC<UserAvatarProps> = ({\n  firstName,\n  lastName,\n  email,\n  profilePic,\n  size = 'md',\n  hoverSize = 'lg',\n  containerClassName = '',\n  enablePopper = true,\n  className,\n  userId,\n  lastViewedOn,\n  isActive,\n  statusIndicator = false,\n  userDetails,\n  isFetchingUserDetails = false,\n  authToken,\n  onHover,\n  currentlyEditing,\n}) => {\n  if (firstName === 'All' && lastName === 'Users') {\n    return (\n      <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n        <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n      </div>\n    );\n  }\n\n  const [visible, setVisible] = useState<boolean>(false);\n  const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n  const avatarSizeClass = sizeClasses[size];\n\n  const {\n    triggerRef: moreTagRef,\n    dropdownRef,\n    position: dropdownPosition,\n    isVisible: showMore,\n    show: handleShowMore,\n    hide: handleHideMore,\n  } = useDynamicPosition();\n\n  const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n  const isRecent = useMemo(() => {\n    if (isActive || !lastViewedOn) return false;\n    const date = new Date(lastViewedOn);\n    const now = new Date();\n    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n    return diffInHours < 24;\n  }, [isActive, lastViewedOn]);\n\n  const getStatusColor = () => {\n    if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n    if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n    if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n    return null;\n  };\n\n  const statusColor = getStatusColor();\n\n  const getBorderColor = () => {\n    if (isActive) return 'border-primary-600 dark:border-primary-600';\n    if (isRecent) return 'border-primary-300 dark:border-primary-300';\n    if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n    return 'border-primary-200 dark:border-neutral-800';\n  };\n\n  const borderColor = getBorderColor();\n\n  const indicatorSizes = {\n    '2xs': 'w-1.5 h-1.5',\n    xs: 'w-2 h-2',\n    sm: 'w-2.5 h-2.5',\n    md: 'w-3 h-3',\n    lg: 'w-3.5 h-3.5',\n    xl: 'w-4 h-4',\n  };\n\n  useEffect(() => {\n    if (profilePic) {\n      if (imageCacheRef.current[profilePic]) {\n        setImageLoaded(true);\n      } else {\n        setImageLoaded(false);\n        const img = new Image();\n        const token = authToken || (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n        img.src = profilePic + (token ? '?token=' + token : '');\n        img.onload = () => {\n          imageCacheRef.current[profilePic] = img.src;\n          setImageLoaded(true);\n        };\n        img.onerror = () => {\n          setImageLoaded(false);\n        };\n      }\n    } else {\n      setImageLoaded(false);\n    }\n  }, [profilePic, authToken]);\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, []);\n\n  const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const popperRef = useRef<HTMLDivElement | null>(null);\n\n  const handleMouseEnter = () => {\n    onHover?.();\n    if (firstName && lastName && enablePopper) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setVisible(true);\n      }, 300);\n    }\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n    timerRef.current = setTimeout(() => {\n      if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n        setVisible(false);\n      }\n    }, 200);\n  };\n\n  const popperContent = (\n    <div\n      ref={popperRef}\n      className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n      onMouseEnter={() => {\n        if (timerRef.current) {\n          clearTimeout(timerRef.current);\n        }\n      }}\n      onMouseLeave={(event) => handleMouseLeave(event)}\n    >\n      <div className='flex flex-col gap-1 items-center p-5'>\n        <div className={cn('relative', sizeClasses[hoverSize])}>\n          {cachedSrc && imageLoaded ? (\n            <img\n              src={cachedSrc}\n              alt='Profile'\n              className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n              onError={() => setImageLoaded(false)}\n            />\n          ) : (\n            <div\n              className={cn(\n                'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n                borderColor,\n              )}\n            >\n              {getInitials((firstName || '') + ' ' + (lastName || ''))}\n            </div>\n          )}\n\n          {statusColor && (\n            <div\n              className={cn(\n                'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n                indicatorSizes[hoverSize],\n                statusColor,\n              )}\n            />\n          )}\n        </div>\n        <div className='flex flex-row gap-1 items-center justify-center'>\n          <Typography size='medium' variant='semibold' className='w-full text-center'>\n            {firstName || ''} {lastName || ''}\n          </Typography>\n          {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n        </div>\n\n        <Typography size='small' variant='medium' appearance='body'>\n          {email || userDetails?.email || ''}\n        </Typography>\n      </div>\n\n      {currentlyEditing ? (\n        <div className='px-5 pb-3'>\n          <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n            <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n              <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n            </div>\n            <div className='flex flex-col min-w-0'>\n              <Typography\n                size='extra-small'\n                variant='semibold'\n                appearance='custom'\n                className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n              >\n                Currently editing\n              </Typography>\n              <Typography size='extra-small' variant='semibold' className='truncate'>\n                {currentlyEditing}\n              </Typography>\n            </div>\n          </div>\n        </div>\n      ) : null}\n\n      {userId &&\n        (isFetchingUserDetails ? (\n          <div className='p-5'>\n            <Skeleton />\n          </div>\n        ) : userId && (userDetails?.teams || userDetails?.clearanceLevel || userDetails?.group) ? (\n          <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n            <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n            {userDetails.username && (\n              <InfoRow\n                label='Username'\n                content={\n                  <div className='flex gap-2'>\n                    <Typography size='small' variant='medium' appearance='body'>\n                      {userDetails.username}\n                    </Typography>\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.teams && userDetails?.teams?.length > 0 && (\n              <InfoRow\n                label='Team'\n                content={\n                  <div className='flex gap-2'>\n                    {userDetails?.teams?.length > 0 && (\n                      <Tag\n                        key={userDetails?.teams[0]?.id}\n                        label={userDetails?.teams[0]?.name}\n                        color={userDetails?.teams[0]?.color || '#e38715'}\n                        size='md'\n                        isHashColor\n                      />\n                    )}\n                    {userDetails?.teams?.length >= 2 && (\n                      <div\n                        ref={moreTagRef}\n                        className='relative cursor-pointer'\n                        onMouseEnter={handleShowMore}\n                        onMouseLeave={handleHideMore}\n                        onClick={(e) => e.stopPropagation()}\n                      >\n                        <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n                        {showMore && (\n                          <div\n                            ref={dropdownRef}\n                            className={cn(\n                              'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n                              {\n                                'top-full': dropdownPosition.vertical === 'bottom',\n                                'bottom-full': dropdownPosition.vertical === 'top',\n                                'left-0': dropdownPosition.horizontal === 'left',\n                                'right-0': dropdownPosition.horizontal === 'right',\n                              },\n                            )}\n                            onMouseEnter={handleShowMore}\n                            onMouseLeave={handleHideMore}\n                          >\n                            {userDetails?.teams?.slice(1)?.map((team, index) => (\n                              <div key={team?.id || index} className='my-2'>\n                                <Tag key={team?.id} label={team?.name} color={team?.color || '#4A5568'} size='md' isHashColor className='w-fit' />\n                              </div>\n                            ))}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                }\n              />\n            )}\n\n            {userDetails?.group && (\n              <InfoRow\n                label='Role'\n                content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n              />\n            )}\n\n            {userDetails?.clearanceLevel && (\n              <InfoRow\n                label='Clearance Level'\n                content={\n                  <Tag\n                    key={String(userDetails?.clearanceLevel)}\n                    label={`Level ${userDetails?.clearanceLevel}`}\n                    color='#b30000'\n                    size='md'\n                    isHashColor\n                  />\n                }\n              />\n            )}\n          </div>\n        ) : (\n          <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n            <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n              <WarningRoundedIcon\n                sx={{\n                  height: '16px',\n                  width: '16px',\n                  color: '#F04438',\n                }}\n              />\n              No other information found!\n            </Typography>\n          </div>\n        ))}\n    </div>\n  );\n  const containerRef = useRef<HTMLDivElement>(null);\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn('inline-block relative cursor-pointer', className)}\n      ref={containerRef}\n    >\n      <div className={cn('relative', containerClassName || avatarSizeClass)}>\n        {cachedSrc && imageLoaded ? (\n          <img\n            src={cachedSrc}\n            alt='Profile'\n            className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n            onError={() => setImageLoaded(false)}\n          />\n        ) : firstName && lastName ? (\n          <div\n            className={cn(\n              ' bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 text-2xs', \n              sizeClasses[size],\n              borderColor,\n            )}\n          >\n            {getInitials((firstName || '') + ' ' + (lastName || ''))}\n          </div>\n        ) : (\n          <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n            <PersonIcon fill='#98A2B3' />\n          </div>\n        )}\n\n        {statusIndicator && statusColor && (\n          <div\n            className={cn(\n              'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n              statusColor,\n            )}\n          />\n        )}\n      </div>\n      <UserAvatarPopper\n        isOpen={visible}\n        onClose={() => setVisible(false)}\n        anchorEl={containerRef.current}\n        className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n      >\n        {popperContent}\n      </UserAvatarPopper>\n    </div>\n  );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.13.47",
+  "version": "0.13.48",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",