@itilite/lumina-ui 1.1.13 → 1.1.14

package/dist/chunk-UTMZY37A.mjs

@@ -0,0 +1,141 @@
+import {
+  Button
+} from "./chunk-3XUHGVYA.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/atom/Modal/Modal.tsx
+import { Modal as AntModal } from "antd";
+import clsx from "clsx";
+
+// src/atom/Modal/Modal.module.scss
+var Modal_module_default = { "modal": "Modal-module__modal___PKrAi", "footerMargintopDisable": "Modal-module__footerMargintopDisable___4B6u-", "ant-modal-footer": "Modal-module__ant-modal-footer___HKsDR", "okBtn": "Modal-module__okBtn___Ut8e5", "cancelBtn": "Modal-module__cancelBtn___i0Rm8" };
+
+// src/atom/Modal/Modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Close = (_a) => {
+  var _b = _a, { size = 14, color = "#B6BAC3" } = _b, rest = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: size,
+      height: size,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, rest), {
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z",
+          fill: color
+        }
+      )
+    })
+  );
+};
+var Modal = (_a) => {
+  var _b = _a, {
+    className = "",
+    title = "",
+    children,
+    open = false,
+    handleOk,
+    handleCancel,
+    okText = "",
+    cancelText = "",
+    closeIcon = /* @__PURE__ */ jsx(Close, { color: "#6B7280" }),
+    bodyClassName = "modalBody",
+    outsideClickDisable = false,
+    hideCross = false,
+    okButtonLoading = false,
+    okButtonDisabled = false,
+    variant = "primary",
+    okBtnClasses = "",
+    cancelButtonAnalytics = {},
+    okButtonAnalytics = {},
+    footerMargintopDisable = true
+  } = _b, rest = __objRest(_b, [
+    "className",
+    "title",
+    "children",
+    "open",
+    "handleOk",
+    "handleCancel",
+    "okText",
+    "cancelText",
+    "closeIcon",
+    "bodyClassName",
+    "outsideClickDisable",
+    "hideCross",
+    "okButtonLoading",
+    "okButtonDisabled",
+    "variant",
+    "okBtnClasses",
+    "cancelButtonAnalytics",
+    "okButtonAnalytics",
+    "footerMargintopDisable"
+  ]);
+  return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+    AntModal,
+    __spreadProps(__spreadValues({
+      title,
+      open,
+      onOk: handleOk,
+      onCancel: handleCancel,
+      className: clsx(Modal_module_default.modal, className, {
+        footerMargintopDisable
+      }),
+      okText,
+      cancelText,
+      closeIcon,
+      closable: !hideCross,
+      maskClosable: !outsideClickDisable,
+      footer: okText || cancelText ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx({
+            primaryFooter: variant === "primary",
+            secondaryFooter: variant === "secondary"
+          }),
+          children: [
+            cancelText && /* @__PURE__ */ jsx(
+              Button,
+              __spreadProps(__spreadValues({
+                onClick: handleCancel,
+                type: "secondary",
+                className: "cancelBtn",
+                variant: "subtle"
+              }, cancelButtonAnalytics), {
+                children: cancelText
+              })
+            ),
+            okText && /* @__PURE__ */ jsx(
+              Button,
+              __spreadProps(__spreadValues({
+                onClick: handleOk,
+                className: clsx(okBtnClasses, "okBtn"),
+                loading: okButtonLoading,
+                disabled: okButtonDisabled
+              }, okButtonAnalytics), {
+                children: okText
+              })
+            )
+          ]
+        }
+      ) : null
+    }, rest), {
+      children: /* @__PURE__ */ jsx("div", { className: bodyClassName, children })
+    })
+  ) });
+};
+Modal.displayName = "Modal";
+var Modal_default = Modal;
+
+export {
+  Modal,
+  Modal_default
+};

package/dist/index.d.mts

@@ -10,6 +10,7 @@ export { default as RangePicker } from './atom/RangePicker/RangePicker.mjs';
 export { default as Select } from './atom/Select/Select.mjs';
 export { default as LoadingSpinner } from './atom/LoadingSpinner/LoadingSpinner.mjs';
 export { default as Slider } from './atom/Slider/Slider.mjs';
+export { default as UserProfile } from './molecules/UserProfile/UserProfile.mjs';
 import 'react';
 import 'antd/es/checkbox';
 import 'antd/lib/radio';

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { default as RangePicker } from './atom/RangePicker/RangePicker.js';
 export { default as Select } from './atom/Select/Select.js';
 export { default as LoadingSpinner } from './atom/LoadingSpinner/LoadingSpinner.js';
 export { default as Slider } from './atom/Slider/Slider.js';
+export { default as UserProfile } from './molecules/UserProfile/UserProfile.js';
 import 'react';
 import 'antd/es/checkbox';
 import 'antd/lib/radio';

package/dist/index.js

@@ -89,7 +89,7 @@ function Button(props) {
     type = "primary",
     variant = "default",
     size = "normal",
-    shape = "default",
+    shape = "round",
     className = "",
     icon = null,
     children,
@@ -762,6 +762,46 @@ var LoadingSpinner_default = LoadingSpinner;
 
 // src/atom/Select/Select.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var InputWrapper = (0, import_react2.memo)(({ children, disabled, disabledTooltip }) => {
+  if (disabled && disabledTooltip)
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip_default, { title: disabledTooltip, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
+});
+var OptionItem = (0, import_react2.memo)(({
+  option,
+  index,
+  isSelected,
+  isHighlighted,
+  experience,
+  size,
+  optionClassName,
+  onSelectHandler,
+  onMouseEnterHandler
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      onClick: () => onSelectHandler(option),
+      onMouseEnter: () => onMouseEnterHandler(index),
+      className: (0, import_clsx8.default)(
+        "tw-transition-all tw-duration-150",
+        { "tw-typography-body2": size !== "small" },
+        { "tw-typography-caption1": size === "small" },
+        optionClassName
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          className: (0, import_clsx8.default)(
+            "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
+            isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
+          ),
+          children: option.label
+        }
+      )
+    }
+  );
+});
 var Select = ({
   label,
   mandatory = false,
@@ -1000,6 +1040,31 @@ var Select = ({
     }
     return "";
   }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
+  const displayValue = (0, import_react2.useMemo)(() => getDisplayValue(), [getDisplayValue]);
+  const inputClasses = (0, import_react2.useMemo)(() => {
+    return (0, import_clsx8.default)(
+      "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
+      sizeClasses.input,
+      sizeClasses.padding,
+      variantClasses,
+      {
+        "tw-bg-white": valueSelected || displayValue || isFocused,
+        "tw-bg-color-gray-5": !valueSelected || !displayValue,
+        "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
+      },
+      !label && "tw-flex tw-items-center",
+      {
+        "!tw-border-color-primary": isFocused && experience === "business"
+      },
+      {
+        "!tw-border-[#804D7B]": isFocused && experience === "personal"
+      },
+      error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
+      "focus:tw-shadow-sm focus:tw-ring-offset-1",
+      className,
+      inputClassName
+    );
+  }, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
   const filteredOptions = (0, import_react2.useMemo)(() => {
     var _a;
     if (!enableSearch) {
@@ -1094,7 +1159,7 @@ var Select = ({
   }, [highlightedIndex]);
   (0, import_react2.useEffect)(() => {
     optionRefs.current = [];
-  }, [filteredOptions]);
+  }, [filteredOptions.length]);
   const handleMouseEnter = (0, import_react2.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -1131,12 +1196,23 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  const InputWrapper = ({ children }) => {
-    if (disabled && disabledTooltip)
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip_default, { title: disabledTooltip, children });
-    return children;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const handleChevronMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (isHovering && selectedValue && allowClear) {
+        handleClear(e);
+      } else {
+        handleChevronClick(e);
+      }
+    },
+    [isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
+  );
+  const handleOptionClick = (0, import_react2.useCallback)((option) => {
+    handleOptionSelect(option);
+  }, [handleOptionSelect]);
+  const handleOptionMouseEnter = (0, import_react2.useCallback)((index) => {
+    setHighlightedIndex(index);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       style,
@@ -1160,35 +1236,11 @@ var Select = ({
               autoCorrect: "off",
               autoCapitalize: "off",
               spellCheck: "false",
-              value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
+              value: isFocused && enableSearch ? searchTerm : displayValue,
               onChange: enableSearch ? handleSearchChange : void 0,
               onClick: handleInputInteraction,
               onKeyDown: handleKeyDown,
-              className: (0, import_clsx8.default)(
-                "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
-                sizeClasses.input,
-                sizeClasses.padding,
-                variantClasses,
-                {
-                  "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
-                  "tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
-                  "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
-                },
-                // Conditional padding based on label presence
-                !label && "tw-flex tw-items-center",
-                {
-                  "!tw-border-color-primary": isFocused && experience === "business"
-                },
-                {
-                  "!tw-border-[#804D7B]": isFocused && experience === "personal"
-                },
-                error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
-                // Add focus state styling
-                "focus:tw-shadow-sm focus:tw-ring-offset-1",
-                className,
-                inputClassName
-                // Put inputClassName last so it can override default classes
-              ),
+              className: inputClasses,
               readOnly: !isFocused || !enableSearch
             }
           ),
@@ -1229,13 +1281,7 @@ var Select = ({
                       // Only rotate chevron when open and not showing clear icon
                       isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
                     ),
-                    onMouseDown: (e) => {
-                      if (isHovering && selectedValue && allowClear) {
-                        handleClear(e);
-                      } else {
-                        handleChevronClick(e);
-                      }
-                    },
+                    onMouseDown: handleChevronMouseDown,
                     children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                       CrossV2,
                       {
@@ -1266,75 +1312,32 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              "div",
-              {
-                ref: (el) => optionRefs.current[index] = el,
-                onClick: () => handleOptionSelect(option),
-                onMouseEnter: () => setHighlightedIndex(index),
-                className: (0, import_clsx8.default)(
-                  "tw-transition-all tw-duration-150",
-                  { "tw-typography-body2": size !== "small" },
-                  { "tw-typography-caption1": size === "small" },
-                  optionClassName
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  "div",
-                  {
-                    className: (0, import_clsx8.default)(
-                      "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
-                      normalizeValue(selectedValue) === normalizeValue(option.value) ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : (
-                        // Highlighted option styling (keyboard navigation)
-                        index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
-                          // Default option styling
-                          "tw-text-gray-900 hover:tw-bg-[#1118270a]"
-                        )
-                      )
-                    ),
-                    children: option.label
-                  }
-                )
-              },
-              doubleCharSearch ? option.label : option.value
-            )) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+              const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
+              const isHighlighted = index === highlightedIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                OptionItem,
+                {
+                  option,
+                  index,
+                  isSelected,
+                  isHighlighted,
+                  experience,
+                  size,
+                  optionClassName,
+                  onSelectHandler: handleOptionClick,
+                  onMouseEnterHandler: handleOptionMouseEnter
+                }
+              ) }, doubleCharSearch ? option.label : option.value);
+            }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
           }
         )
       ]
     }
   ) });
 };
-var arePropsEqual = (prevProps, nextProps) => {
-  var _a, _b;
-  const criticalProps = [
-    "value",
-    "valueSelected",
-    "options",
-    "error",
-    "disabled",
-    "label",
-    "mandatory"
-  ];
-  for (const prop of criticalProps) {
-    if (prevProps[prop] !== nextProps[prop]) {
-      return false;
-    }
-  }
-  if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
-    return false;
-  }
-  if (prevProps.options && nextProps.options) {
-    for (let i = 0; i < prevProps.options.length; i++) {
-      const prevOpt = prevProps.options[i];
-      const nextOpt = nextProps.options[i];
-      if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
-        return false;
-      }
-    }
-  }
-  return true;
-};
 Select.displayName = "Select";
-var Select_default = (0, import_react2.memo)(Select, arePropsEqual);
+var Select_default = Select;
 
 // src/atom/RangePicker/RangePicker.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import {
   RangePicker_default
-} from "./chunk-35KDS27M.mjs";
+} from "./chunk-PSBEYGD4.mjs";
 import {
   Slider_default
 } from "./chunk-D3N7VFER.mjs";
 import {
   Select_default
-} from "./chunk-E4FCLHYA.mjs";
+} from "./chunk-GU5F7Z7I.mjs";
 import {
   Switch_default
 } from "./chunk-MNARBWAJ.mjs";
@@ -30,10 +30,10 @@ import {
 } from "./chunk-QKTMWS4J.mjs";
 import {
   Modal_default
-} from "./chunk-UQJ3BDM4.mjs";
+} from "./chunk-UTMZY37A.mjs";
 import {
   Button_default
-} from "./chunk-AF2RKLH6.mjs";
+} from "./chunk-3XUHGVYA.mjs";
 import {
   Radio_default
 } from "./chunk-2EBPXGRY.mjs";