@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMSelect-ByQcUp2S.cjs

@@ -0,0 +1,308 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const SIZE_DROPDOWN_CONFIG = {
+  xs: { maxHeight: "max-h-32", optionPadding: "px-3 py-1.5", optionTextSize: "text-xs" },
+  sm: { maxHeight: "max-h-40", optionPadding: "px-3 py-2", optionTextSize: "text-xs" },
+  md: { maxHeight: "max-h-48", optionPadding: "px-4 py-2.5", optionTextSize: "text-sm" },
+  lg: { maxHeight: "max-h-56", optionPadding: "px-4 py-3", optionTextSize: "text-sm" },
+  xl: { maxHeight: "max-h-64", optionPadding: "px-5 py-3", optionTextSize: "text-base" },
+  "2xl": { maxHeight: "max-h-72", optionPadding: "px-6 py-4", optionTextSize: "text-lg" }
+};
+const LMSelect = ({
+  options,
+  value,
+  onChange,
+  onDropdownVisibleChange,
+  error = false,
+  errorMessage,
+  placeholder = "Select...",
+  disabled = false,
+  className = "",
+  name,
+  size = "md",
+  multiple = false
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedOption, setSelectedOption] = React.useState(null);
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+  const dropdownRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!multiple) {
+      if (value !== void 0 && value !== null && !Array.isArray(value)) {
+        const option = options.find((opt) => opt.value === value);
+        setSelectedOption(option || null);
+      } else {
+        setSelectedOption(null);
+      }
+    }
+  }, [value, options, multiple]);
+  React.useEffect(() => {
+    if (multiple && Array.isArray(value)) {
+      const selectedOpts = options.filter((opt) => value.includes(opt.value));
+      setSelectedOptions(selectedOpts);
+    } else if (multiple) {
+      setSelectedOptions([]);
+    }
+  }, [value, options, multiple]);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onDropdownVisibleChange]);
+  const handleSelect = (option) => {
+    if (option.disabled) return;
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : [];
+      const isSelected = currentValues.includes(option.value);
+      const newValues = isSelected ? currentValues.filter((v) => v !== option.value) : [...currentValues, option.value];
+      onChange == null ? void 0 : onChange(newValues);
+    } else {
+      setSelectedOption(option);
+      onChange == null ? void 0 : onChange(option.value);
+      setIsOpen(false);
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+    }
+  };
+  const toggleDropdown = () => {
+    if (!disabled) {
+      const newIsOpen = !isOpen;
+      setIsOpen(newIsOpen);
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(newIsOpen);
+    }
+  };
+  const baseClassName = `
+    w-full ${componentSizes.SIZE_SELECTOR_CONFIG[size].padding} ${componentSizes.SIZE_SELECTOR_CONFIG[size].height} ${componentSizes.SIZE_SELECTOR_CONFIG[size].fontSize}
+    border rounded-xl
+    cursor-pointer select-none
+    flex items-center justify-between
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getSelectorStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)",
+      transition: "all var(--lm-transition-fast) var(--lm-ease-out)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.4"
+    };
+  };
+  const getDisabledStyles = () => disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => error ? { color: "var(--lm-error-400)" } : { color: "var(--lm-text-secondary)" };
+  const getDropdownStyles = () => ({
+    backgroundColor: "var(--lm-bg-elevated)",
+    borderColor: "var(--lm-border-default)",
+    boxShadow: "var(--lm-shadow-lg)",
+    backdropFilter: "blur(20px) saturate(180%)",
+    WebkitBackdropFilter: "blur(20px) saturate(180%)"
+  });
+  const isOptionSelected = (optionValue) => {
+    if (multiple) {
+      return Array.isArray(value) && value.includes(optionValue);
+    }
+    return (selectedOption == null ? void 0 : selectedOption.value) === optionValue;
+  };
+  const getOptionStyles = (option) => {
+    const baseStyles = {
+      color: option.disabled ? "var(--lm-text-disabled)" : "var(--lm-text-primary)",
+      backgroundColor: option.disabled ? "var(--lm-bg-paper)" : "transparent"
+    };
+    if (isOptionSelected(option.value)) {
+      return {
+        ...baseStyles,
+        backgroundColor: "var(--lm-primary-50)",
+        color: "var(--lm-primary-700)"
+      };
+    }
+    return baseStyles;
+  };
+  const getHoverOptionStyles = (option) => {
+    if (option.disabled) return {};
+    if (isOptionSelected(option.value)) {
+      return { backgroundColor: "var(--lm-primary-100)" };
+    }
+    return { backgroundColor: "var(--lm-bg-paper)" };
+  };
+  const getDisplayText = () => {
+    if (multiple) {
+      if (selectedOptions.length === 0) return placeholder;
+      if (selectedOptions.length === 1) return selectedOptions[0].label;
+      return `${selectedOptions.length} selected`;
+    }
+    return selectedOption ? selectedOption.label : placeholder;
+  };
+  const ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      style: getIconStyles(),
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+    }
+  );
+  const CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        name,
+        value: multiple ? Array.isArray(value) ? value.map(String) : [] : value !== void 0 && value !== null && !Array.isArray(value) ? String(value) : "",
+        onChange: () => {
+        },
+        className: "sr-only",
+        disabled,
+        tabIndex: -1,
+        multiple,
+        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: baseClassName,
+        onClick: toggleDropdown,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        style: {
+          ...getSelectorStyles(),
+          ...getDisabledStyles()
+        },
+        onMouseEnter: (e) => {
+          if (!disabled && !error) {
+            e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!disabled && !error) {
+            e.currentTarget.style.borderColor = "var(--lm-border-default)";
+          }
+        },
+        onFocus: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+          }
+        },
+        onBlur: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+          }
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleDropdown();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                color: multiple && selectedOptions.length > 0 || selectedOption ? "var(--lm-text-primary)" : "var(--lm-text-secondary)"
+              },
+              children: getDisplayText()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `absolute left-0 right-0 z-50 border rounded-xl overflow-y-auto ${SIZE_DROPDOWN_CONFIG[size].maxHeight}`,
+        style: {
+          ...getDropdownStyles(),
+          top: "calc(100% + 4px)"
+        },
+        children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `
+                ${SIZE_DROPDOWN_CONFIG[size].optionPadding} ${SIZE_DROPDOWN_CONFIG[size].optionTextSize} font-medium
+                cursor-pointer transition-all duration-150
+                ${option.disabled ? "cursor-not-allowed" : ""}
+                ${index === 0 ? "rounded-t-xl" : ""}
+                ${index === options.length - 1 ? "rounded-b-xl" : ""}
+                ${index > 0 ? "border-t" : ""}
+              `,
+            style: {
+              ...getOptionStyles(option),
+              borderTopColor: index > 0 ? "var(--lm-border-light)" : "transparent"
+            },
+            onMouseEnter: (e) => {
+              if (!option.disabled) {
+                Object.assign(e.currentTarget.style, getHoverOptionStyles(option));
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!option.disabled) {
+                Object.assign(e.currentTarget.style, getOptionStyles(option));
+              }
+            },
+            onClick: () => handleSelect(option),
+            role: "option",
+            "aria-selected": isOptionSelected(option.value),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              multiple && /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: isOptionSelected(option.value),
+                  onChange: () => {
+                  },
+                  className: "mr-2 cursor-pointer",
+                  style: { accentColor: "var(--lm-primary-500)" },
+                  onClick: (e) => e.stopPropagation()
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: option.label }),
+              !multiple && isOptionSelected(option.value) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 shrink-0", style: { color: "var(--lm-primary-600)" }, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+            ] })
+          },
+          option.value
+        ))
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: "text-xs flex items-center gap-1 mt-2",
+        style: { color: "var(--lm-error-500)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+exports.LMSelect = LMSelect;
+//# sourceMappingURL=LMSelect-ByQcUp2S.cjs.map

package/dist/LMSelect-ByQcUp2S.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMSelect-ByQcUp2S.cjs","sources":["../src/components/Form/LMSelect/LMSelect.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport { SIZE_SELECTOR_CONFIG } from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMSelectOption {\n  value: string | number\n  label: string\n  disabled?: boolean\n}\n\nexport interface LMSelectProps {\n  /** Options */\n  options: LMSelectOption[]\n  /** Current value */\n  value?: string | number | (string | number)[]\n  /** Change callback */\n  onChange?: (value: string | number | (string | number)[]) => void\n  /** Dropdown visibility change callback */\n  onDropdownVisibleChange?: (visible: boolean) => void\n  /** Error state */\n  error?: boolean\n  /** Error message */\n  errorMessage?: string\n  /** Placeholder */\n  placeholder?: string\n  /** Disabled state */\n  disabled?: boolean\n  /** Class name */\n  className?: string\n  /** Form field name */\n  name?: string\n  /** Size */\n  size?: ComponentSize\n  /** Multiple selection */\n  multiple?: boolean\n}\n\nconst SIZE_DROPDOWN_CONFIG: Record<\n  ComponentSize,\n  {\n    maxHeight: string\n    optionPadding: string\n    optionTextSize: string\n  }\n> = {\n  xs: { maxHeight: 'max-h-32', optionPadding: 'px-3 py-1.5', optionTextSize: 'text-xs' },\n  sm: { maxHeight: 'max-h-40', optionPadding: 'px-3 py-2', optionTextSize: 'text-xs' },\n  md: { maxHeight: 'max-h-48', optionPadding: 'px-4 py-2.5', optionTextSize: 'text-sm' },\n  lg: { maxHeight: 'max-h-56', optionPadding: 'px-4 py-3', optionTextSize: 'text-sm' },\n  xl: { maxHeight: 'max-h-64', optionPadding: 'px-5 py-3', optionTextSize: 'text-base' },\n  '2xl': { maxHeight: 'max-h-72', optionPadding: 'px-6 py-4', optionTextSize: 'text-lg' },\n}\n\nconst LMSelect: React.FC<LMSelectProps> = ({\n  options,\n  value,\n  onChange,\n  onDropdownVisibleChange,\n  error = false,\n  errorMessage,\n  placeholder = 'Select...',\n  disabled = false,\n  className = '',\n  name,\n  size = 'md',\n  multiple = false,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [selectedOption, setSelectedOption] = useState<LMSelectOption | null>(null)\n  const [selectedOptions, setSelectedOptions] = useState<LMSelectOption[]>([])\n  const dropdownRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (!multiple) {\n      if (value !== undefined && value !== null && !Array.isArray(value)) {\n        const option = options.find((opt) => opt.value === value)\n        setSelectedOption(option || null)\n      } else {\n        setSelectedOption(null)\n      }\n    }\n  }, [value, options, multiple])\n\n  useEffect(() => {\n    if (multiple && Array.isArray(value)) {\n      const selectedOpts = options.filter((opt) => value.includes(opt.value))\n      setSelectedOptions(selectedOpts)\n    } else if (multiple) {\n      setSelectedOptions([])\n    }\n  }, [value, options, multiple])\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsOpen(false)\n        onDropdownVisibleChange?.(false)\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen, onDropdownVisibleChange])\n\n  const handleSelect = (option: LMSelectOption) => {\n    if (option.disabled) return\n\n    if (multiple) {\n      const currentValues = Array.isArray(value) ? value : []\n      const isSelected = currentValues.includes(option.value)\n      const newValues = isSelected\n        ? currentValues.filter((v) => v !== option.value)\n        : [...currentValues, option.value]\n      onChange?.(newValues)\n    } else {\n      setSelectedOption(option)\n      onChange?.(option.value)\n      setIsOpen(false)\n      onDropdownVisibleChange?.(false)\n    }\n  }\n\n  const toggleDropdown = () => {\n    if (!disabled) {\n      const newIsOpen = !isOpen\n      setIsOpen(newIsOpen)\n      onDropdownVisibleChange?.(newIsOpen)\n    }\n  }\n\n  // Apple-like refined select styling\n  const baseClassName = `\n    w-full ${SIZE_SELECTOR_CONFIG[size].padding} ${SIZE_SELECTOR_CONFIG[size].height} ${SIZE_SELECTOR_CONFIG[size].fontSize}\n    border rounded-xl\n    cursor-pointer select-none\n    flex items-center justify-between\n    ${className}\n  `\n    .trim()\n    .replace(/\\s+/g, ' ')\n\n  const getSelectorStyles = () => {\n    // Apple-like refined select styles\n    const baseStyles = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: error ? 'var(--lm-error-300)' : 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-sm)',\n      transition: 'all var(--lm-transition-fast) var(--lm-ease-out)',\n    }\n\n    return {\n      ...baseStyles,\n      '--tw-ring-color': error ? 'var(--lm-error-400)' : 'var(--lm-primary-400)',\n      '--tw-ring-opacity': '0.4',\n    }\n  }\n\n  const getDisabledStyles = () =>\n    disabled\n      ? {\n          backgroundColor: 'var(--lm-bg-paper)',\n          color: 'var(--lm-text-disabled)',\n          cursor: 'not-allowed',\n          opacity: 0.6,\n        }\n      : {}\n\n  const getIconStyles = () =>\n    error ? { color: 'var(--lm-error-400)' } : { color: 'var(--lm-text-secondary)' }\n\n  // Apple-like refined dropdown styles\n  const getDropdownStyles = () => ({\n    backgroundColor: 'var(--lm-bg-elevated)',\n    borderColor: 'var(--lm-border-default)',\n    boxShadow: 'var(--lm-shadow-lg)',\n    backdropFilter: 'blur(20px) saturate(180%)',\n    WebkitBackdropFilter: 'blur(20px) saturate(180%)',\n  })\n\n  const isOptionSelected = (optionValue: string | number): boolean => {\n    if (multiple) {\n      return Array.isArray(value) && value.includes(optionValue)\n    }\n    return selectedOption?.value === optionValue\n  }\n\n  const getOptionStyles = (option: LMSelectOption) => {\n    const baseStyles = {\n      color: option.disabled ? 'var(--lm-text-disabled)' : 'var(--lm-text-primary)',\n      backgroundColor: option.disabled ? 'var(--lm-bg-paper)' : 'transparent',\n    }\n\n    if (isOptionSelected(option.value)) {\n      return {\n        ...baseStyles,\n        backgroundColor: 'var(--lm-primary-50)',\n        color: 'var(--lm-primary-700)',\n      }\n    }\n\n    return baseStyles\n  }\n\n  const getHoverOptionStyles = (option: LMSelectOption) => {\n    if (option.disabled) return {}\n\n    if (isOptionSelected(option.value)) {\n      return { backgroundColor: 'var(--lm-primary-100)' }\n    }\n\n    return { backgroundColor: 'var(--lm-bg-paper)' }\n  }\n\n  const getDisplayText = (): string => {\n    if (multiple) {\n      if (selectedOptions.length === 0) return placeholder\n      if (selectedOptions.length === 1) return selectedOptions[0].label\n      return `${selectedOptions.length} selected`\n    }\n    return selectedOption ? selectedOption.label : placeholder\n  }\n\n  const ChevronDown = () => (\n    <svg\n      className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      style={getIconStyles()}\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n    </svg>\n  )\n\n  const CheckIcon = () => (\n    <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n    </svg>\n  )\n\n  return (\n    <div className=\"relative\" ref={dropdownRef}>\n      <select\n        name={name}\n        value={\n          multiple\n            ? Array.isArray(value)\n              ? value.map(String)\n              : []\n            : value !== undefined && value !== null && !Array.isArray(value)\n              ? String(value)\n              : ''\n        }\n        onChange={() => {}}\n        className=\"sr-only\"\n        disabled={disabled}\n        tabIndex={-1}\n        multiple={multiple}\n      >\n        {options.map((option) => (\n          <option key={option.value} value={option.value} disabled={option.disabled}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n\n      <div\n        className={baseClassName}\n        onClick={toggleDropdown}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        style={{\n          ...getSelectorStyles(),\n          ...getDisabledStyles(),\n        } as React.CSSProperties}\n        onMouseEnter={(e) => {\n          if (!disabled && !error) {\n            e.currentTarget.style.borderColor = 'var(--lm-border-strong)'\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!disabled && !error) {\n            e.currentTarget.style.borderColor = 'var(--lm-border-default)'\n          }\n        }}\n        onFocus={(e) => {\n          if (!disabled) {\n            e.currentTarget.style.borderColor = error\n              ? 'var(--lm-error-400)'\n              : 'var(--lm-primary-400)'\n          }\n        }}\n        onBlur={(e) => {\n          if (!disabled) {\n            e.currentTarget.style.borderColor = error\n              ? 'var(--lm-error-300)'\n              : 'var(--lm-border-default)'\n          }\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            toggleDropdown()\n          }\n        }}\n      >\n        <span\n          style={{\n            color:\n              (multiple && selectedOptions.length > 0) || selectedOption\n                ? 'var(--lm-text-primary)'\n                : 'var(--lm-text-secondary)',\n          }}\n        >\n          {getDisplayText()}\n        </span>\n        <ChevronDown />\n      </div>\n\n      {isOpen && (\n        <div\n          className={`absolute left-0 right-0 z-50 border rounded-xl overflow-y-auto ${SIZE_DROPDOWN_CONFIG[size].maxHeight}`}\n          style={{\n            ...getDropdownStyles(),\n            top: 'calc(100% + 4px)',\n          }}\n        >\n          {options.map((option, index) => (\n            <div\n              key={option.value}\n              className={`\n                ${SIZE_DROPDOWN_CONFIG[size].optionPadding} ${SIZE_DROPDOWN_CONFIG[size].optionTextSize} font-medium\n                cursor-pointer transition-all duration-150\n                ${option.disabled ? 'cursor-not-allowed' : ''}\n                ${index === 0 ? 'rounded-t-xl' : ''}\n                ${index === options.length - 1 ? 'rounded-b-xl' : ''}\n                ${index > 0 ? 'border-t' : ''}\n              `}\n              style={{\n                ...getOptionStyles(option),\n                borderTopColor: index > 0 ? 'var(--lm-border-light)' : 'transparent',\n              }}\n              onMouseEnter={(e) => {\n                if (!option.disabled) {\n                  Object.assign(e.currentTarget.style, getHoverOptionStyles(option))\n                }\n              }}\n              onMouseLeave={(e) => {\n                if (!option.disabled) {\n                  Object.assign(e.currentTarget.style, getOptionStyles(option))\n                }\n              }}\n              onClick={() => handleSelect(option)}\n              role=\"option\"\n              aria-selected={isOptionSelected(option.value)}\n            >\n              <div className=\"flex items-center justify-between\">\n                {multiple && (\n                  <input\n                    type=\"checkbox\"\n                    checked={isOptionSelected(option.value)}\n                    onChange={() => {}}\n                    className=\"mr-2 cursor-pointer\"\n                    style={{ accentColor: 'var(--lm-primary-500)' }}\n                    onClick={(e) => e.stopPropagation()}\n                  />\n                )}\n                <span className=\"truncate flex-1\">{option.label}</span>\n                {!multiple && isOptionSelected(option.value) && (\n                  <span className=\"ml-2 shrink-0\" style={{ color: 'var(--lm-primary-600)' }}>\n                    <CheckIcon />\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {errorMessage && (\n        <p\n          className=\"text-xs flex items-center gap-1 mt-2\"\n          style={{ color: 'var(--lm-error-500)' }}\n        >\n          <svg className=\"w-3 h-3\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n            <path\n              fillRule=\"evenodd\"\n              d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport default LMSelect\n"],"names":["useState","useRef","useEffect","SIZE_SELECTOR_CONFIG","jsx","jsxs"],"mappings":"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"}