@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMRadio-UQLNgTMF.js

@@ -0,0 +1,190 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { S as SIZE_ICON_CONFIG } from "./componentSizes-CdWNL526.js";
+const sizeConfig = {
+  xs: {
+    container: "p-2 gap-2",
+    label: "text-xs",
+    description: "text-xs mt-0.5",
+    errorMessage: "text-xs"
+  },
+  sm: {
+    container: "p-3 gap-2.5",
+    label: "text-sm",
+    description: "text-xs mt-1",
+    errorMessage: "text-xs"
+  },
+  md: {
+    container: "p-4 gap-3",
+    label: "text-base",
+    description: "text-sm mt-1",
+    errorMessage: "text-xs"
+  },
+  lg: {
+    container: "p-5 gap-4",
+    label: "text-lg",
+    description: "text-base mt-1.5",
+    errorMessage: "text-sm"
+  },
+  xl: {
+    container: "p-6 gap-4",
+    label: "text-xl",
+    description: "text-lg mt-2",
+    errorMessage: "text-sm"
+  },
+  "2xl": {
+    container: "p-8 gap-5",
+    label: "text-2xl",
+    description: "text-xl mt-2.5",
+    errorMessage: "text-base"
+  }
+};
+const LMRadio = ({
+  label,
+  description,
+  error = false,
+  errorMessage,
+  size = "md",
+  className = "",
+  id,
+  ...props
+}) => {
+  const autoId = useId();
+  const controlId = id ?? `lm-radio-${autoId}`;
+  const errId = `lm-radio-err-${autoId}`;
+  const currentSize = sizeConfig[size];
+  const radioSizeClass = SIZE_ICON_CONFIG[size];
+  const getRadioStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      color: "var(--lm-primary-500)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => {
+    if (props.disabled) {
+      return {
+        backgroundColor: "var(--lm-bg-paper)",
+        borderColor: "var(--lm-border-light)",
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed",
+        opacity: 0.6
+      };
+    }
+    return {};
+  };
+  const getContainerStyles = () => {
+    const base = { backgroundColor: "var(--lm-bg-paper)" };
+    return error ? { ...base, backgroundColor: "var(--lm-error-50)" } : base;
+  };
+  const getHoverContainerStyles = () => error ? { backgroundColor: "var(--lm-error-100)" } : { backgroundColor: "var(--lm-bg-elevated)" };
+  const getLabelStyles = () => {
+    if (error) return { color: "var(--lm-error-700)" };
+    if (props.disabled)
+      return { color: "var(--lm-text-disabled)", cursor: "not-allowed" };
+    return { color: "var(--lm-text-primary)", cursor: "pointer" };
+  };
+  const getDescriptionStyles = () => error ? { color: "var(--lm-error-600)" } : { color: "var(--lm-text-secondary)" };
+  const radioClassName = `
+    ${radioSizeClass} border-2 rounded-full
+    focus:ring-2 focus:ring-offset-0
+    transition-all duration-200
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-start ${currentSize.container} rounded-2xl transition-colors duration-200`,
+        style: getContainerStyles(),
+        onMouseEnter: (e) => {
+          if (!props.disabled)
+            Object.assign(e.currentTarget.style, getHoverContainerStyles());
+        },
+        onMouseLeave: (e) => {
+          if (!props.disabled)
+            Object.assign(e.currentTarget.style, getContainerStyles());
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              id: controlId,
+              ...props,
+              className: radioClassName,
+              "aria-invalid": error || void 0,
+              "aria-describedby": errorMessage ? errId : void 0,
+              style: { ...getRadioStyles(), ...getDisabledStyles() },
+              onFocus: (e) => {
+                var _a;
+                if (!props.disabled) {
+                  e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+                }
+                (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+              },
+              onBlur: (e) => {
+                var _a;
+                if (!props.disabled) {
+                  e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+                }
+                (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: controlId,
+                className: `${currentSize.label} font-medium transition-colors duration-200`,
+                style: getLabelStyles(),
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsx("p", { className: currentSize.description, style: getDescriptionStyles(), children: description })
+          ] })
+        ]
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        id: errId,
+        className: `${currentSize.errorMessage} flex items-center gap-1`,
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ 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
+        ]
+      }
+    )
+  ] });
+};
+export {
+  LMRadio as L
+};
+//# sourceMappingURL=LMRadio-UQLNgTMF.js.map

package/dist/LMRadio-UQLNgTMF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMRadio-UQLNgTMF.js","sources":["../src/components/Form/LMRadio/LMRadio.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport { SIZE_ICON_CONFIG } from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMRadioProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {\n  /** Label text */\n  label: string\n  /** Description text */\n  description?: string\n  /** Error state */\n  error?: boolean\n  /** Error message */\n  errorMessage?: string\n  /** Size */\n  size?: ComponentSize\n}\n\nconst sizeConfig = {\n  xs: {\n    container: 'p-2 gap-2',\n    label: 'text-xs',\n    description: 'text-xs mt-0.5',\n    errorMessage: 'text-xs',\n  },\n  sm: {\n    container: 'p-3 gap-2.5',\n    label: 'text-sm',\n    description: 'text-xs mt-1',\n    errorMessage: 'text-xs',\n  },\n  md: {\n    container: 'p-4 gap-3',\n    label: 'text-base',\n    description: 'text-sm mt-1',\n    errorMessage: 'text-xs',\n  },\n  lg: {\n    container: 'p-5 gap-4',\n    label: 'text-lg',\n    description: 'text-base mt-1.5',\n    errorMessage: 'text-sm',\n  },\n  xl: {\n    container: 'p-6 gap-4',\n    label: 'text-xl',\n    description: 'text-lg mt-2',\n    errorMessage: 'text-sm',\n  },\n  '2xl': {\n    container: 'p-8 gap-5',\n    label: 'text-2xl',\n    description: 'text-xl mt-2.5',\n    errorMessage: 'text-base',\n  },\n}\n\nconst LMRadio: React.FC<LMRadioProps> = ({\n  label,\n  description,\n  error = false,\n  errorMessage,\n  size = 'md',\n  className = '',\n  id,\n  ...props\n}) => {\n  const autoId = useId()\n  const controlId = id ?? `lm-radio-${autoId}`\n  const errId = `lm-radio-err-${autoId}`\n\n  const currentSize = sizeConfig[size]\n  const radioSizeClass = SIZE_ICON_CONFIG[size]\n\n  const getRadioStyles = () => {\n    const baseStyles = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      borderColor: error\n        ? 'var(--lm-error-300)'\n        : 'var(--lm-border-default)',\n      color: 'var(--lm-primary-500)',\n    } as React.CSSProperties\n\n    return {\n      ...baseStyles,\n      '--tw-ring-color': error\n        ? 'var(--lm-error-400)'\n        : 'var(--lm-primary-400)',\n      '--tw-ring-opacity': '0.3',\n    }\n  }\n\n  const getDisabledStyles = () => {\n    if (props.disabled) {\n      return {\n        backgroundColor: 'var(--lm-bg-paper)',\n        borderColor: 'var(--lm-border-light)',\n        color: 'var(--lm-text-disabled)',\n        cursor: 'not-allowed',\n        opacity: 0.6,\n      } as React.CSSProperties\n    }\n    return {}\n  }\n\n  const getContainerStyles = () => {\n    const base = { backgroundColor: 'var(--lm-bg-paper)' }\n    return error ? { ...base, backgroundColor: 'var(--lm-error-50)' } : base\n  }\n\n  const getHoverContainerStyles = () =>\n    error\n      ? { backgroundColor: 'var(--lm-error-100)' }\n      : { backgroundColor: 'var(--lm-bg-elevated)' }\n\n  const getLabelStyles = () => {\n    if (error) return { color: 'var(--lm-error-700)' }\n    if (props.disabled)\n      return { color: 'var(--lm-text-disabled)', cursor: 'not-allowed' }\n    return { color: 'var(--lm-text-primary)', cursor: 'pointer' }\n  }\n\n  const getDescriptionStyles = () =>\n    error\n      ? { color: 'var(--lm-error-600)' }\n      : { color: 'var(--lm-text-secondary)' }\n\n  const radioClassName = `\n    ${radioSizeClass} border-2 rounded-full\n    focus:ring-2 focus:ring-offset-0\n    transition-all duration-200\n    ${className}\n  `\n    .trim()\n    .replace(/\\s+/g, ' ')\n\n  return (\n    <div>\n      <div\n        className={`flex items-start ${currentSize.container} rounded-2xl transition-colors duration-200`}\n        style={getContainerStyles()}\n        onMouseEnter={(e) => {\n          if (!props.disabled)\n            Object.assign(e.currentTarget.style, getHoverContainerStyles())\n        }}\n        onMouseLeave={(e) => {\n          if (!props.disabled)\n            Object.assign(e.currentTarget.style, getContainerStyles())\n        }}\n      >\n        <input\n          type=\"radio\"\n          id={controlId}\n          {...props}\n          className={radioClassName}\n          aria-invalid={error || undefined}\n          aria-describedby={errorMessage ? errId : undefined}\n          style={{ ...getRadioStyles(), ...getDisabledStyles() } as React.CSSProperties}\n          onFocus={(e) => {\n            if (!props.disabled) {\n              e.currentTarget.style.borderColor = error\n                ? 'var(--lm-error-400)'\n                : 'var(--lm-primary-400)'\n            }\n            props.onFocus?.(e)\n          }}\n          onBlur={(e) => {\n            if (!props.disabled) {\n              e.currentTarget.style.borderColor = error\n                ? 'var(--lm-error-300)'\n                : 'var(--lm-border-default)'\n            }\n            props.onBlur?.(e)\n          }}\n        />\n\n        <div className=\"flex-1\">\n          <label\n            htmlFor={controlId}\n            className={`${currentSize.label} font-medium transition-colors duration-200`}\n            style={getLabelStyles()}\n          >\n            {label}\n          </label>\n          {description && (\n            <p className={currentSize.description} style={getDescriptionStyles()}>\n              {description}\n            </p>\n          )}\n        </div>\n      </div>\n\n      {errorMessage && (\n        <p\n          id={errId}\n          className={`${currentSize.errorMessage} flex items-center gap-1`}\n          style={{ color: 'var(--lm-error-500)' }}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          <svg\n            className=\"w-3 h-3\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 20 20\"\n            aria-hidden=\"true\"\n          >\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 LMRadio\n"],"names":[],"mappings":"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"}

package/dist/LMSearchInput-CIvVkEf2.js

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { a as SIZE_INPUT_CONFIG } from "./componentSizes-CdWNL526.js";
+const LMSearchInput = ({
+  value,
+  onChange,
+  onSearch,
+  error = false,
+  errorMessage,
+  placeholder = "Search...",
+  disabled = false,
+  className = "",
+  name,
+  size = "md",
+  showClear = true,
+  showSearchButton = true,
+  searchButtonText = "Search",
+  debounceDelay = 300
+}) => {
+  const [inputValue, setInputValue] = useState(value || "");
+  const [isFocused, setIsFocused] = useState(false);
+  const debounceRef = useRef(null);
+  const inputRef = useRef(null);
+  const searchBtnRef = useRef(null);
+  const [searchBtnWidth, setSearchBtnWidth] = useState(0);
+  useEffect(() => {
+    if (value !== void 0 && value !== null) setInputValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (showSearchButton && searchBtnRef.current) {
+      setSearchBtnWidth(searchBtnRef.current.offsetWidth || 0);
+    } else {
+      setSearchBtnWidth(0);
+    }
+  }, [showSearchButton, searchButtonText]);
+  const baseClassName = `
+    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} backdrop-blur-md border rounded-2xl
+    focus:ring-2 focus:outline-none transition-all duration-300
+    shadow-sm
+    ${showSearchButton ? "pr-20" : showClear ? "pr-10" : "pr-4"}
+    pl-12
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getSearchInputStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : isFocused ? "var(--lm-primary-400)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => {
+    if (error) return { color: "var(--lm-error-400)" };
+    if (isFocused) return { color: "var(--lm-primary-500)" };
+    return { color: "var(--lm-text-secondary)" };
+  };
+  const getButtonStyles = () => ({
+    backgroundColor: "var(--lm-primary-500)",
+    color: "white"
+  });
+  const getClearButtonStyles = () => ({
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-secondary)"
+  });
+  const handleInputChange = (event) => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onSearch == null ? void 0 : onSearch(newValue);
+    }, debounceDelay);
+  };
+  const handleSearch = () => onSearch == null ? void 0 : onSearch(inputValue);
+  const handleClear = () => {
+    var _a;
+    setInputValue("");
+    onChange == null ? void 0 : onChange("");
+    onSearch == null ? void 0 : onSearch("");
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleSearch();
+    }
+  };
+  const clearBtnSizeClass = size === "sm" ? "w-7 h-7 text-xs" : size === "lg" ? "w-9 h-9 text-sm" : "w-8 h-8 text-sm";
+  const clearRightPx = showSearchButton ? searchBtnWidth + 8 : 8;
+  const SearchIcon = () => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
+  const ClearIcon = () => /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsx("span", { style: getIconStyles(), children: /* @__PURE__ */ jsx(SearchIcon, {}) }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "search",
+          name,
+          value: inputValue,
+          placeholder,
+          disabled,
+          className: baseClassName,
+          style: {
+            ...getSearchInputStyles(),
+            ...getDisabledStyles()
+          },
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          onMouseEnter: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-default)";
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `
+          input[type='search']::-webkit-search-cancel-button {
+            -webkit-appearance: none;
+            appearance: none;
+          }
+        ` }),
+      showClear && inputValue && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClear,
+          className: `absolute top-1/2 -translate-y-1/2 z-10 rounded-full flex items-center justify-center ${clearBtnSizeClass}`,
+          style: {
+            ...getClearButtonStyles(),
+            right: `${clearRightPx}px`
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-bg-elevated)";
+            e.currentTarget.style.color = "var(--lm-text-primary)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-bg-paper)";
+            e.currentTarget.style.color = "var(--lm-text-secondary)";
+          },
+          "aria-label": "Clear",
+          type: "button",
+          children: /* @__PURE__ */ jsx(ClearIcon, {})
+        }
+      ),
+      showSearchButton && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: searchBtnRef,
+          onClick: handleSearch,
+          className: "absolute inset-y-0 right-0 px-4 rounded-r-2xl transition-colors duration-200 z-20",
+          style: getButtonStyles(),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-primary-600)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-primary-500)";
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: searchButtonText })
+        }
+      )
+    ] }),
+    errorMessage && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        children: [
+          /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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
+        ]
+      }
+    )
+  ] });
+};
+export {
+  LMSearchInput as L
+};
+//# sourceMappingURL=LMSearchInput-CIvVkEf2.js.map

package/dist/LMSearchInput-CIvVkEf2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMSearchInput-CIvVkEf2.js","sources":["../src/components/Form/LMSearchInput/LMSearchInput.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport { SIZE_INPUT_CONFIG } from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMSearchInputProps {\n  /** Current search value */\n  value?: string\n  /** Change callback */\n  onChange?: (value: string) => void\n  /** Search submit callback */\n  onSearch?: (value: string) => 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  /** Show clear button */\n  showClear?: boolean\n  /** Show search button */\n  showSearchButton?: boolean\n  /** Search button text */\n  searchButtonText?: string\n  /** Debounce delay (ms) */\n  debounceDelay?: number\n}\n\nconst LMSearchInput: React.FC<LMSearchInputProps> = ({\n  value,\n  onChange,\n  onSearch,\n  error = false,\n  errorMessage,\n  placeholder = 'Search...',\n  disabled = false,\n  className = '',\n  name,\n  size = 'md',\n  showClear = true,\n  showSearchButton = true,\n  searchButtonText = 'Search',\n  debounceDelay = 300,\n}) => {\n  const [inputValue, setInputValue] = useState(value || '')\n  const [isFocused, setIsFocused] = useState(false)\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const searchBtnRef = useRef<HTMLButtonElement>(null)\n  const [searchBtnWidth, setSearchBtnWidth] = useState(0)\n\n  useEffect(() => {\n    if (value !== undefined && value !== null) setInputValue(value)\n  }, [value])\n\n  useEffect(() => {\n    if (showSearchButton && searchBtnRef.current) {\n      setSearchBtnWidth(searchBtnRef.current.offsetWidth || 0)\n    } else {\n      setSearchBtnWidth(0)\n    }\n  }, [showSearchButton, searchButtonText])\n\n  const baseClassName = `\n    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} backdrop-blur-md border rounded-2xl\n    focus:ring-2 focus:outline-none transition-all duration-300\n    shadow-sm\n    ${showSearchButton ? 'pr-20' : showClear ? 'pr-10' : 'pr-4'}\n    pl-12\n    ${className}\n  `\n    .trim()\n    .replace(/\\s+/g, ' ')\n\n  const getSearchInputStyles = () => {\n    const baseStyles = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: error\n        ? 'var(--lm-error-300)'\n        : isFocused\n          ? 'var(--lm-primary-400)'\n          : 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-sm)',\n    } as React.CSSProperties\n\n    return {\n      ...baseStyles,\n      '--tw-ring-color': error\n        ? 'var(--lm-error-400)'\n        : 'var(--lm-primary-400)',\n      '--tw-ring-opacity': '0.3',\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    if (error) return { color: 'var(--lm-error-400)' }\n    if (isFocused) return { color: 'var(--lm-primary-500)' }\n    return { color: 'var(--lm-text-secondary)' }\n  }\n\n  const getButtonStyles = () => ({\n    backgroundColor: 'var(--lm-primary-500)',\n    color: 'white',\n  })\n\n  const getClearButtonStyles = () => ({\n    backgroundColor: 'var(--lm-bg-paper)',\n    color: 'var(--lm-text-secondary)',\n  })\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = event.target.value\n    setInputValue(newValue)\n    onChange?.(newValue)\n\n    if (debounceRef.current) clearTimeout(debounceRef.current)\n    debounceRef.current = setTimeout(() => {\n      onSearch?.(newValue)\n    }, debounceDelay)\n  }\n\n  const handleSearch = () => onSearch?.(inputValue)\n\n  const handleClear = () => {\n    setInputValue('')\n    onChange?.('')\n    onSearch?.('')\n    inputRef.current?.focus()\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      event.preventDefault()\n      handleSearch()\n    }\n  }\n\n  const clearBtnSizeClass =\n    size === 'sm'\n      ? 'w-7 h-7 text-xs'\n      : size === 'lg'\n        ? 'w-9 h-9 text-sm'\n        : 'w-8 h-8 text-sm'\n\n  const clearRightPx = showSearchButton ? searchBtnWidth + 8 : 8\n\n  const SearchIcon = () => (\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=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n    </svg>\n  )\n\n  const ClearIcon = () => (\n    <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"relative group\">\n        <div className=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10\">\n          <span style={getIconStyles()}>\n            <SearchIcon />\n          </span>\n        </div>\n\n        <input\n          ref={inputRef}\n          type=\"search\"\n          name={name}\n          value={inputValue}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={baseClassName}\n          style={{\n            ...getSearchInputStyles(),\n            ...getDisabledStyles(),\n          } as React.CSSProperties}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onMouseEnter={(e) => {\n            if (!disabled && !error && !isFocused) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-strong)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            if (!disabled && !error && !isFocused) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-default)'\n            }\n          }}\n        />\n\n        <style>{`\n          input[type='search']::-webkit-search-cancel-button {\n            -webkit-appearance: none;\n            appearance: none;\n          }\n        `}</style>\n\n        {showClear && inputValue && !disabled && (\n          <button\n            onClick={handleClear}\n            className={`absolute top-1/2 -translate-y-1/2 z-10 rounded-full flex items-center justify-center ${clearBtnSizeClass}`}\n            style={{\n              ...getClearButtonStyles(),\n              right: `${clearRightPx}px`,\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--lm-bg-elevated)'\n              e.currentTarget.style.color = 'var(--lm-text-primary)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--lm-bg-paper)'\n              e.currentTarget.style.color = 'var(--lm-text-secondary)'\n            }}\n            aria-label=\"Clear\"\n            type=\"button\"\n          >\n            <ClearIcon />\n          </button>\n        )}\n\n        {showSearchButton && !disabled && (\n          <button\n            ref={searchBtnRef}\n            onClick={handleSearch}\n            className=\"absolute inset-y-0 right-0 px-4 rounded-r-2xl transition-colors duration-200 z-20\"\n            style={getButtonStyles()}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--lm-primary-600)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--lm-primary-500)'\n            }}\n            type=\"button\"\n          >\n            <span className=\"text-sm font-medium\">{searchButtonText}</span>\n          </button>\n        )}\n      </div>\n\n      {errorMessage && (\n        <p\n          className=\"text-xs flex items-center gap-1\"\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 LMSearchInput\n"],"names":[],"mappings":"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"}

package/dist/LMSearchInput-nBlAX734.cjs

@@ -0,0 +1,204 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const LMSearchInput = ({
+  value,
+  onChange,
+  onSearch,
+  error = false,
+  errorMessage,
+  placeholder = "Search...",
+  disabled = false,
+  className = "",
+  name,
+  size = "md",
+  showClear = true,
+  showSearchButton = true,
+  searchButtonText = "Search",
+  debounceDelay = 300
+}) => {
+  const [inputValue, setInputValue] = React.useState(value || "");
+  const [isFocused, setIsFocused] = React.useState(false);
+  const debounceRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const searchBtnRef = React.useRef(null);
+  const [searchBtnWidth, setSearchBtnWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (value !== void 0 && value !== null) setInputValue(value);
+  }, [value]);
+  React.useEffect(() => {
+    if (showSearchButton && searchBtnRef.current) {
+      setSearchBtnWidth(searchBtnRef.current.offsetWidth || 0);
+    } else {
+      setSearchBtnWidth(0);
+    }
+  }, [showSearchButton, searchButtonText]);
+  const baseClassName = `
+    w-full ${componentSizes.SIZE_INPUT_CONFIG[size].padding} ${componentSizes.SIZE_INPUT_CONFIG[size].height} backdrop-blur-md border rounded-2xl
+    focus:ring-2 focus:outline-none transition-all duration-300
+    shadow-sm
+    ${showSearchButton ? "pr-20" : showClear ? "pr-10" : "pr-4"}
+    pl-12
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getSearchInputStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : isFocused ? "var(--lm-primary-400)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.3"
+    };
+  };
+  const getDisabledStyles = () => disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => {
+    if (error) return { color: "var(--lm-error-400)" };
+    if (isFocused) return { color: "var(--lm-primary-500)" };
+    return { color: "var(--lm-text-secondary)" };
+  };
+  const getButtonStyles = () => ({
+    backgroundColor: "var(--lm-primary-500)",
+    color: "white"
+  });
+  const getClearButtonStyles = () => ({
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-secondary)"
+  });
+  const handleInputChange = (event) => {
+    const newValue = event.target.value;
+    setInputValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onSearch == null ? void 0 : onSearch(newValue);
+    }, debounceDelay);
+  };
+  const handleSearch = () => onSearch == null ? void 0 : onSearch(inputValue);
+  const handleClear = () => {
+    var _a;
+    setInputValue("");
+    onChange == null ? void 0 : onChange("");
+    onSearch == null ? void 0 : onSearch("");
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleSearch();
+    }
+  };
+  const clearBtnSizeClass = size === "sm" ? "w-7 h-7 text-xs" : size === "lg" ? "w-9 h-9 text-sm" : "w-8 h-8 text-sm";
+  const clearRightPx = showSearchButton ? searchBtnWidth + 8 : 8;
+  const SearchIcon = () => /* @__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: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
+  const ClearIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: getIconStyles(), children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "search",
+          name,
+          value: inputValue,
+          placeholder,
+          disabled,
+          className: baseClassName,
+          style: {
+            ...getSearchInputStyles(),
+            ...getDisabledStyles()
+          },
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          onMouseEnter: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+            }
+          },
+          onMouseLeave: (e) => {
+            if (!disabled && !error && !isFocused) {
+              e.currentTarget.style.borderColor = "var(--lm-border-default)";
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          input[type='search']::-webkit-search-cancel-button {
+            -webkit-appearance: none;
+            appearance: none;
+          }
+        ` }),
+      showClear && inputValue && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleClear,
+          className: `absolute top-1/2 -translate-y-1/2 z-10 rounded-full flex items-center justify-center ${clearBtnSizeClass}`,
+          style: {
+            ...getClearButtonStyles(),
+            right: `${clearRightPx}px`
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-bg-elevated)";
+            e.currentTarget.style.color = "var(--lm-text-primary)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-bg-paper)";
+            e.currentTarget.style.color = "var(--lm-text-secondary)";
+          },
+          "aria-label": "Clear",
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+        }
+      ),
+      showSearchButton && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          ref: searchBtnRef,
+          onClick: handleSearch,
+          className: "absolute inset-y-0 right-0 px-4 rounded-r-2xl transition-colors duration-200 z-20",
+          style: getButtonStyles(),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-primary-600)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--lm-primary-500)";
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: searchButtonText })
+        }
+      )
+    ] }),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        className: "text-xs flex items-center gap-1",
+        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.LMSearchInput = LMSearchInput;
+//# sourceMappingURL=LMSearchInput-nBlAX734.cjs.map