@itilite/lumina-ui 1.1.12 → 1.1.14

package/dist/chunk-3YDCRJYV.mjs

@@ -1,618 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-FWCSY2DS.mjs";
-
-// src/atom/Select/Select.tsx
-import { memo as memo3, 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" })
-          }
-        )
-      ]
-    }
-  );
-};
-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;
-};
-var Select_default = memo3(Select, arePropsEqual);
-
-export {
-  Select_default
-};