@itilite/lumina-ui 1.1.4 → 1.1.6

package/dist/chunk-D5B2TUSL.mjs

@@ -0,0 +1,591 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/atom/Select/Select.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+
+// src/icons/Chevron.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Chevron = React.memo(
+  (_a) => {
+    var _b = _a, { size = 16, color = "#6b7280", className } = _b, rest = __objRest(_b, ["size", "color", "className"]);
+    return /* @__PURE__ */ jsx(
+      "svg",
+      __spreadProps(__spreadValues({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        className
+      }, rest), {
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: color,
+            d: "M11.78 6.22a.75.75 0 00-1.06 0L8 8.94 5.28 6.22a.75.75 0 00-1.06 1.06l3.25 3.25a.75.75 0 001.06 0l3.25-3.25a.75.75 0 000-1.06z"
+          }
+        )
+      })
+    );
+  }
+);
+Chevron.displayName = "Chevron";
+
+// src/icons/CrossV2.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CrossV2 = React2.memo(
+  (_a) => {
+    var _b = _a, { size = 16, color = "#111827", className } = _b, rest = __objRest(_b, ["size", "color", "className"]);
+    return /* @__PURE__ */ jsx2(
+      "svg",
+      __spreadProps(__spreadValues({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        className
+      }, rest), {
+        children: /* @__PURE__ */ jsx2(
+          "path",
+          {
+            fill: color,
+            fillRule: "evenodd",
+            d: "M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z",
+            clipRule: "evenodd"
+          }
+        )
+      })
+    );
+  }
+);
+CrossV2.displayName = "CrossV2";
+
+// src/atom/Select/Select.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Select = ({
+  label,
+  mandatory = false,
+  error = false,
+  options = [],
+  valueSelected = "",
+  // Keep for backward compatibility
+  value: _valueProp,
+  // Rename to avoid potential conflicts with native value attribute
+  onChange,
+  className = "",
+  dropdownClassName = "",
+  optionClassName = "",
+  style = {},
+  showDisplayValue = false,
+  // New prop to show displayValue instead of label
+  allowClear = true,
+  enableSearch = true,
+  // New prop to control search functionality, default true
+  doubleCharSearch = false,
+  id,
+  name,
+  tabIndex,
+  // Add tabIndex prop
+  // Additional styling props
+  size = "default",
+  // 'small', 'default', 'large'
+  variant = "default",
+  // 'default', 'filled', 'outlined'
+  wrapperClassName = "",
+  inputClassName = "",
+  // Custom class for input element specifically
+  labelClassName = "",
+  // Custom class for label element specifically
+  height = "tw-h-12",
+  // Custom height
+  experience = "business"
+}) => {
+  const normalizeValue = useCallback(
+    (val) => {
+      if (val === null || val === void 0) return "";
+      return String(val);
+    },
+    []
+  );
+  const validatedOptions = useMemo(() => {
+    if (!Array.isArray(options)) return [];
+    return options.filter(
+      (opt) => opt && typeof opt === "object" && opt.value !== void 0 && opt.value !== null && opt.label !== void 0
+    );
+  }, [options]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isHovering, setIsHovering] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [selectedValue, setSelectedValue] = useState(() => {
+    const initialValue = valueSelected;
+    if (initialValue === null || initialValue === void 0) return "";
+    return String(initialValue);
+  });
+  const inputRef = useRef(null);
+  const inputValueRef = useRef("");
+  const dropdownRef = useRef(null);
+  const optionRefs = useRef([]);
+  const optionListRef = useRef(null);
+  const blurTimeoutRef = useRef(null);
+  const hoverTimeoutRef = useRef(null);
+  const isActive = isFocused || Boolean(selectedValue) || Boolean(valueSelected) || Boolean(searchTerm);
+  const sizeClasses = useMemo(() => {
+    switch (size) {
+      case "small":
+        return {
+          input: "tw-h-8 tw-px-3 tw-typography-body2",
+          padding: label ? "tw-pt-4 tw-pb-1" : "tw-py-2",
+          labelActive: "tw-top-0 tw-typography-caption4",
+          labelInactive: "tw-top-2 tw-typography-caption3"
+        };
+      case "medium":
+        return {
+          input: "tw-h-10 tw-px-4 tw-typography-body2",
+          padding: label ? "tw-pt-4 tw-pb-1" : "tw-py-2",
+          labelActive: "tw-top-1 tw-typography-caption3",
+          labelInactive: "tw-top-2.5 tw-typography-body2"
+        };
+      case "large":
+        return {
+          input: "tw-h-16 tw-px-5 tw-typography-bodyLarge",
+          padding: label ? "tw-pt-8 tw-pb-4" : "tw-py-5",
+          labelActive: "tw-top-1 tw-typography-caption2",
+          labelInactive: "tw-top-5 tw-typography-body1"
+        };
+      default:
+        return {
+          input: height + " tw-px-4 tw-typography-bodyLarge",
+          padding: label ? "tw-pt-6 tw-pb-3" : "tw-py-3",
+          labelActive: "tw-top-1 tw-typography-caption3",
+          labelInactive: "tw-top-3.5 tw-typography-body2"
+        };
+    }
+  }, [size, label, height]);
+  const variantClasses = useMemo(() => {
+    switch (variant) {
+      case "filled":
+        return "tw-bg-gray-50 tw-border-transparent";
+      case "outlined":
+        return "tw-bg-transparent tw-border-2";
+      default:
+        return " tw-border";
+    }
+  }, [variant]);
+  const handleBlur = useCallback(() => {
+    blurTimeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+      setSearchTerm("");
+      setHighlightedIndex(-1);
+      blurTimeoutRef.current = null;
+      setIsFocused(false);
+    }, 150);
+  }, []);
+  const handleSearchChange = useCallback(
+    (e) => {
+      var _a;
+      if (doubleCharSearch) {
+        setSearchTerm(e.target.value.slice(0, 2) || "");
+      } else {
+        setSearchTerm(e.target.value);
+      }
+      setIsOpen(true);
+      setHighlightedIndex(-1);
+      (_a = optionListRef == null ? void 0 : optionListRef.current) == null ? void 0 : _a.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    },
+    [doubleCharSearch]
+  );
+  const handleOptionSelect = useCallback(
+    (option) => {
+      var _a;
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+      inputValueRef.current = option.label;
+      const normalizedValue = normalizeValue(option.value);
+      setSelectedValue(normalizedValue);
+      setSearchTerm("");
+      setIsOpen(false);
+      if (enableSearch) {
+        setIsFocused(false);
+      }
+      setIsHovering(false);
+      if (onChange) onChange(option.value);
+      if (enableSearch) (_a = inputRef.current) == null ? void 0 : _a.blur();
+    },
+    [normalizeValue, onChange, enableSearch]
+  );
+  const handleClear = useCallback(
+    (e) => {
+      var _a;
+      inputValueRef.current = "";
+      e.stopPropagation();
+      e.preventDefault();
+      setSelectedValue("");
+      setSearchTerm("");
+      if (enableSearch) {
+        setIsOpen(true);
+        setIsFocused(true);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      } else {
+        setIsOpen(false);
+        setIsFocused(false);
+      }
+      if (onChange) onChange(null);
+    },
+    [onChange, enableSearch]
+  );
+  useEffect(() => {
+    if (!validatedOptions.length) {
+      setSelectedValue("");
+      setSearchTerm("");
+      inputValueRef.current = "";
+    }
+  }, [validatedOptions.length]);
+  useEffect(() => {
+    const newValue = normalizeValue(valueSelected);
+    setSelectedValue((prevValue) => {
+      const prevNormalized = normalizeValue(prevValue);
+      return prevNormalized !== newValue ? newValue : prevValue;
+    });
+  }, [valueSelected, normalizeValue]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        if (blurTimeoutRef.current) {
+          clearTimeout(blurTimeoutRef.current);
+          blurTimeoutRef.current = null;
+        }
+        setIsOpen(false);
+        setIsFocused(false);
+        setSearchTerm("");
+        setHighlightedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getDisplayValue = useCallback(() => {
+    if (selectedValue && (validatedOptions == null ? void 0 : validatedOptions.length) > 0) {
+      const selected = validatedOptions.find(
+        (opt) => normalizeValue(opt.value) === normalizeValue(selectedValue)
+      );
+      if (selected) {
+        return showDisplayValue && selected.displayValue ? selected.displayValue : selected.label;
+      }
+    }
+    if (selectedValue && (!validatedOptions || validatedOptions.length === 0)) {
+      return selectedValue;
+    }
+    return "";
+  }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
+  const filteredOptions = useMemo(() => {
+    var _a;
+    if (!enableSearch) {
+      return validatedOptions;
+    }
+    (_a = dropdownRef.current) == null ? void 0 : _a.scrollTo(0, 0);
+    const updatedFilteredOptions = validatedOptions.filter((option) => {
+      var _a2;
+      return (_a2 = option == null ? void 0 : option.label) == null ? void 0 : _a2.toLowerCase().includes(searchTerm == null ? void 0 : searchTerm.toLowerCase());
+    });
+    return updatedFilteredOptions;
+  }, [validatedOptions, searchTerm, enableSearch]);
+  const getSelectedOptionIndex = useCallback(() => {
+    if (!selectedValue || !filteredOptions.length) {
+      return 0;
+    }
+    const index = filteredOptions.findIndex(
+      (option) => normalizeValue(option.value) === normalizeValue(selectedValue)
+    );
+    return index >= 0 ? index : 0;
+  }, [selectedValue, filteredOptions, normalizeValue]);
+  const handleInputInteraction = useCallback(
+    (_e) => {
+      var _a;
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+      if (isOpen) {
+        setIsOpen(false);
+        setIsFocused(false);
+        setSearchTerm("");
+        setHighlightedIndex(-1);
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+        return;
+      }
+      setIsFocused(true);
+      setIsOpen(true);
+      setHighlightedIndex(getSelectedOptionIndex());
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    },
+    [isOpen, getSelectedOptionIndex]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      var _a;
+      if (!isOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex((prev) => {
+            const nextIndex = prev < filteredOptions.length - 1 ? prev + 1 : prev;
+            return nextIndex;
+          });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex((prev) => {
+            const nextIndex = prev > 0 ? prev - 1 : prev;
+            return nextIndex;
+          });
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+            handleOptionSelect(filteredOptions[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          setIsFocused(false);
+          setSearchTerm("");
+          setHighlightedIndex(-1);
+          (_a = inputRef.current) == null ? void 0 : _a.blur();
+          break;
+        default:
+          break;
+      }
+    },
+    [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]
+  );
+  useEffect(() => {
+    if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
+      optionRefs.current[highlightedIndex].scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [highlightedIndex]);
+  useEffect(() => {
+    optionRefs.current = [];
+  }, [filteredOptions]);
+  const handleMouseEnter = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    if (!isHovering) {
+      setIsHovering(true);
+    }
+  }, [isHovering]);
+  const handleMouseLeave = useCallback(() => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsHovering(false);
+    }, 50);
+  }, []);
+  const handleChevronClick = useCallback(
+    (e) => {
+      var _a;
+      e.preventDefault();
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+      if (isOpen) {
+        setIsOpen(false);
+        setIsFocused(false);
+        setSearchTerm("");
+        setHighlightedIndex(-1);
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      } else {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+        handleInputInteraction();
+      }
+    },
+    [isOpen, handleInputInteraction]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style,
+      className: clsx("tw-relative tw-w-full", wrapperClassName),
+      ref: dropdownRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw-relative", children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              id,
+              name,
+              tabIndex,
+              autoComplete: "off",
+              autoCorrect: "off",
+              autoCapitalize: "off",
+              spellCheck: "false",
+              value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
+              onChange: enableSearch ? handleSearchChange : void 0,
+              onClick: handleInputInteraction,
+              onKeyDown: handleKeyDown,
+              className: clsx(
+                "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()
+                },
+                // 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
+              ),
+              readOnly: !isFocused || !enableSearch
+            }
+          ),
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: id,
+              className: clsx(
+                "tw-absolute tw-left-[18px] tw-pointer-events-none tw-transition-all tw-duration-200 tw-ease-out tw-text-gray-500",
+                isActive ? sizeClasses.labelActive : sizeClasses.labelInactive,
+                error && "tw-text-color-text-critical",
+                labelClassName
+              ),
+              children: [
+                label,
+                mandatory && /* @__PURE__ */ jsx3("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: clsx(
+                "tw-absolute tw-right-3 tw-top-1/2 tw--translate-y-1/2 tw-flex tw-items-center",
+                {
+                  "!tw-right-[5px]": doubleCharSearch && !(isHovering && selectedValue && allowClear)
+                }
+              ),
+              children: /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: clsx(
+                    "tw-transition-all tw-duration-200 tw-cursor-pointer tw-flex tw-items-center",
+                    // 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);
+                    }
+                  },
+                  children: isHovering && selectedValue && allowClear ? /* @__PURE__ */ jsx3(CrossV2, { color: "#111827", className: "tw-mr-1" }) : /* @__PURE__ */ jsx3(
+                    Chevron,
+                    {
+                      className: clsx("tw-text-gray-400 -tw-rotate-90"),
+                      color: "#6B7280"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        isOpen && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: clsx(
+              "tw-absolute tw-z-[100] tw-w-full tw-mt-0 tw-bg-white tw-border tw-border-[#ebe3dd] tw-border-solid tw-rounded-xl tw-shadow-lg tw-overflow-y-auto tw-py-1",
+              { "tw-max-h-60": !doubleCharSearch },
+              { "tw-max-h-44": doubleCharSearch },
+              dropdownClassName
+            ),
+            ref: optionListRef,
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsx3(
+              "div",
+              {
+                ref: (el) => optionRefs.current[index] = el,
+                onClick: () => handleOptionSelect(option),
+                onMouseEnter: () => setHighlightedIndex(index),
+                className: clsx(
+                  "tw-transition-all tw-duration-150 tw-typography-body2",
+                  // Selected option styling
+                  optionClassName
+                ),
+                children: /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: clsx(
+                      "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__ */ jsx3("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+          }
+        )
+      ]
+    }
+  );
+};
+Select.displayName = "Select";
+var Select_default = Select;
+
+export {
+  Select,
+  Select_default
+};