@kopexa/input 3.0.9 → 4.0.0

package/dist/password-input.mjs

@@ -1,8 +1,10 @@
 "use client";
+"use client";
 import {
   PasswordInput
-} from "./chunk-7MR6363U.mjs";
-import "./chunk-UWFWTFM3.mjs";
+} from "./chunk-Z5QELHKG.mjs";
+import "./chunk-EYVXSUHW.mjs";
+import "./chunk-GMM4E7KL.mjs";
 export {
   PasswordInput
 };

package/dist/search-input.d.mts

@@ -1,14 +1,43 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { InputProps } from './input.mjs';
 import '@kopexa/theme';
-import '@kopexa/theme/src/components/input';
 import 'react';
 
-type Omitted = "startContent" | "endContent" | "value" | "onValueChange" | "onChange";
+type Omitted = "value" | "onChange" | "defaultValue";
 type SearchInputProps = Omit<InputProps, Omitted> & {
+    /**
+     * Controlled value. If provided, component is controlled.
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled mode.
+     */
+    defaultValue?: string;
+    /**
+     * Fires on every keystroke (immediate). Mirrors <input onChange>.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Debounced change callback (useful for queries).
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Debounce delay in ms for onValueChange.
+     */
     debounce?: number;
+    /**
+     * Show a clear button when there's a value.
+     */
+    clearable?: boolean;
+    /**
+     * Optional custom clear handler. If omitted, it just clears the value.
+     */
+    onClear?: () => void;
+    /**
+     * Show loading indicator on the right.
+     */
+    loading?: boolean;
 };
-declare const SearchInput: ({ defaultValue, onValueChange, debounce, ...props }: SearchInputProps) => react_jsx_runtime.JSX.Element;
+declare const SearchInput: ({ value: valueProp, defaultValue, onChange, onValueChange, debounce, clearable, onClear, loading, disabled, ...props }: SearchInputProps) => react_jsx_runtime.JSX.Element;
 
 export { SearchInput, type SearchInputProps };

package/dist/search-input.d.ts

@@ -1,14 +1,43 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { InputProps } from './input.js';
 import '@kopexa/theme';
-import '@kopexa/theme/src/components/input';
 import 'react';
 
-type Omitted = "startContent" | "endContent" | "value" | "onValueChange" | "onChange";
+type Omitted = "value" | "onChange" | "defaultValue";
 type SearchInputProps = Omit<InputProps, Omitted> & {
+    /**
+     * Controlled value. If provided, component is controlled.
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled mode.
+     */
+    defaultValue?: string;
+    /**
+     * Fires on every keystroke (immediate). Mirrors <input onChange>.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Debounced change callback (useful for queries).
+     */
     onValueChange?: (value: string) => void;
+    /**
+     * Debounce delay in ms for onValueChange.
+     */
     debounce?: number;
+    /**
+     * Show a clear button when there's a value.
+     */
+    clearable?: boolean;
+    /**
+     * Optional custom clear handler. If omitted, it just clears the value.
+     */
+    onClear?: () => void;
+    /**
+     * Show loading indicator on the right.
+     */
+    loading?: boolean;
 };
-declare const SearchInput: ({ defaultValue, onValueChange, debounce, ...props }: SearchInputProps) => react_jsx_runtime.JSX.Element;
+declare const SearchInput: ({ value: valueProp, defaultValue, onChange, onValueChange, debounce, clearable, onClear, loading, disabled, ...props }: SearchInputProps) => react_jsx_runtime.JSX.Element;
 
 export { SearchInput, type SearchInputProps };

package/dist/search-input.js

@@ -1,5 +1,6 @@
 "use client";
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -24,178 +25,118 @@ __export(search_input_exports, {
   SearchInput: () => SearchInput
 });
 module.exports = __toCommonJS(search_input_exports);
-var import_icons2 = require("@kopexa/icons");
-var import_theme2 = require("@kopexa/theme");
-var import_use_debounced_callback = require("@kopexa/use-debounced-callback");
-
-// src/input.tsx
 var import_icons = require("@kopexa/icons");
-var import_react_utils = require("@kopexa/react-utils");
-var import_shared_utils = require("@kopexa/shared-utils");
 var import_spinner = require("@kopexa/spinner");
-var import_theme = require("@kopexa/theme");
+var import_use_callback_ref = require("@kopexa/use-callback-ref");
 var import_use_controllable_state = require("@kopexa/use-controllable-state");
-var import_use_safe_layout_effect = require("@kopexa/use-safe-layout-effect");
 var import_react = require("react");
+
+// src/input.tsx
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Input = (props) => {
-  var _a, _b, _c, _d;
-  const {
-    className,
-    size,
-    radius,
-    type = "text",
-    startContent,
-    endContent,
-    classNames,
-    value: valueProp,
-    onChange: onChangeProp,
-    onValueChange,
-    ref: refProp,
-    onClear,
-    loading,
-    isClearable: propsIsClearable,
-    ...rest
-  } = props;
-  const handleValueChange = (0, import_react.useCallback)(
-    (value) => {
-      onValueChange == null ? void 0 : onValueChange(value != null ? value : "");
-    },
-    [onValueChange]
-  );
-  const [inputValue, setInputValue] = (0, import_use_controllable_state.useControllableState)({
-    value: valueProp,
-    onChange: handleValueChange,
-    defaultValue: (_a = props.defaultValue) != null ? _a : ""
-  });
-  const domRef = (0, import_react.useRef)(null);
-  const isFileTypeInput = type === "file";
-  const isClearable = !!onClear || propsIsClearable || false;
-  const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(
-    type
-  );
-  const hasUploadedFiles = ((_d = (_c = (_b = domRef == null ? void 0 : domRef.current) == null ? void 0 : _b.files) == null ? void 0 : _c.length) != null ? _d : 0) > 0;
-  const isFilled = !(0, import_shared_utils.isEmpty)(valueProp) || isFilledByDefault || hasUploadedFiles || !!inputValue;
-  const styles = (0, import_react.useMemo)(
-    () => (0, import_theme.input)({
-      size,
-      radius,
-      isClearable
-    }),
-    [size, radius, isClearable]
-  );
-  const handleClear = (0, import_react.useCallback)(() => {
-    var _a2;
-    if (isFileTypeInput) {
-      domRef.current.value = "";
-    } else {
-      setInputValue("");
-    }
-    onClear == null ? void 0 : onClear();
-    (_a2 = domRef.current) == null ? void 0 : _a2.focus();
-  }, [setInputValue, isFileTypeInput, onClear]);
-  const end = (0, import_react.useMemo)(() => {
-    if (isClearable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          disabled: props.disabled,
-          "aria-label": "clear input",
-          "data-slot": "clear-button",
-          className: styles.clearButton(),
-          onClick: handleClear,
-          children: endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {})
-        }
-      );
-    }
-    return endContent;
-  }, [
-    endContent,
-    props == null ? void 0 : props.disabled,
-    isClearable,
-    styles.clearButton,
-    handleClear
-  ]);
-  const onChange = (event) => {
-    if (!isFileTypeInput) {
-      setInputValue(event.target.value);
-    }
-    onChangeProp == null ? void 0 : onChangeProp(event);
-  };
-  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!domRef.current) return;
-    setInputValue(domRef.current.value);
-  }, [domRef.current]);
+  const { className, size, radius, type = "text", ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    "input",
     {
-      className: styles.inputWrapper({
-        className: classNames == null ? void 0 : classNames.inputWrapper
+      type,
+      "data-slot": "input",
+      "aria-readonly": (0, import_shared_utils.ariaAttr)(props.readOnly),
+      className: (0, import_theme.input)({
+        className,
+        size,
+        radius
       }),
-      "data-disabled": (0, import_shared_utils.dataAttr)(props.disabled),
-      "data-readonly": (0, import_shared_utils.dataAttr)(props.readOnly),
-      "data-hidden": (0, import_shared_utils.dataAttr)(props.hidden),
-      "data-slot": "input-wrapper",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: styles.innerWrapper({
-            className: classNames == null ? void 0 : classNames.innerWrapper
-          }),
-          "data-slot": "inner-wrapper",
-          children: [
-            startContent,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                type,
-                "data-slot": "input",
-                "data-has-start-content": (0, import_shared_utils.dataAttr)(!!startContent),
-                "data-has-end-content": (0, import_shared_utils.dataAttr)(!!endContent),
-                "data-filled": (0, import_shared_utils.dataAttr)(isFilled),
-                "aria-readonly": (0, import_shared_utils.ariaAttr)(props.readOnly),
-                className: styles.input({
-                  className: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.input, className)
-                }),
-                value: inputValue,
-                onChange: (0, import_shared_utils.chain)(onChangeProp, onChange),
-                ref: (0, import_react_utils.mergeRefs)(domRef, refProp),
-                ...rest
-              }
-            ),
-            loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { size: "xs" }) : end
-          ]
-        }
-      )
+      ...rest
     }
   );
 };
 
-// src/search-input.tsx
+// src/input-wrapper.tsx
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function InputWrapper({ className, size, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "input-wrapper",
+      className: (0, import_shared_utils2.cn)((0, import_theme2.input)({ size }), (0, import_theme2.inputWrapper)({ size }), className),
+      ...props
+    }
+  );
+}
+
+// src/search-input.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SearchInput = ({
-  defaultValue,
+  value: valueProp,
+  defaultValue = "",
+  onChange,
   onValueChange,
   debounce = 300,
+  clearable = true,
+  onClear,
+  loading = false,
+  disabled,
   ...props
 }) => {
-  const styles = (0, import_theme2.passwordInput)();
-  const debounced = (0, import_use_debounced_callback.useDebounceCallback)(
-    (value) => onValueChange == null ? void 0 : onValueChange(value),
-    debounce
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Input,
-    {
-      ...props,
-      defaultValue,
-      onChange: (event) => debounced(event.target.value),
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.SearchIcon, { className: styles.icon() }),
-      isClearable: true
+  const onChangeRef = (0, import_use_callback_ref.useCallbackRef)(onChange);
+  const onValueChangeRef = (0, import_use_callback_ref.useCallbackRef)(onValueChange);
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeRef
+    // immediate callback
+  });
+  (0, import_react.useEffect)(() => {
+    if (!onValueChangeRef) return;
+    const id = window.setTimeout(() => {
+      onValueChangeRef(value != null ? value : "");
+    }, debounce);
+    return () => {
+      window.clearTimeout(id);
+    };
+  }, [value, debounce, onValueChangeRef]);
+  const handleClear = () => {
+    if (disabled) return;
+    onClear == null ? void 0 : onClear();
+    setValue("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && value) {
+      e.stopPropagation();
+      handleClear();
     }
-  );
+  };
+  const handleChange = (e) => {
+    setValue(e.target.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(InputWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.SearchIcon, { "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Input,
+      {
+        ...props,
+        role: "searchbox",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled
+      }
+    ),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-live": "polite", "aria-busy": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_spinner.Spinner, { size: "xs" }) }) : clearable && value ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.CloseIcon, {})
+      }
+    ) : null
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/search-input.mjs

@@ -1,8 +1,10 @@
 "use client";
+"use client";
 import {
   SearchInput
-} from "./chunk-LWM42RB2.mjs";
-import "./chunk-UWFWTFM3.mjs";
+} from "./chunk-TAMOGG4C.mjs";
+import "./chunk-EYVXSUHW.mjs";
+import "./chunk-GMM4E7KL.mjs";
 export {
   SearchInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/input",
-  "version": "3.0.9",
+  "version": "4.0.0",
   "description": "A basic text input component",
   "keywords": [
     "input"
@@ -28,17 +28,18 @@
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
     "motion": ">=12.23.6",
-    "@kopexa/theme": "1.7.6"
+    "@kopexa/theme": "2.0.0"
   },
   "dependencies": {
-    "@kopexa/shared-utils": "1.1.7",
-    "@kopexa/react-utils": "2.0.8",
-    "@kopexa/icons": "10.0.9",
-    "@kopexa/tooltip": "6.0.6",
-    "@kopexa/use-controllable-state": "1.1.3",
-    "@kopexa/use-safe-layout-effect": "1.0.4",
-    "@kopexa/spinner": "6.0.6",
-    "@kopexa/use-debounced-callback": "1.0.4"
+    "@kopexa/shared-utils": "2.0.0",
+    "@kopexa/react-utils": "3.0.0",
+    "@kopexa/icons": "11.0.0",
+    "@kopexa/tooltip": "7.0.0",
+    "@kopexa/use-controllable-state": "2.0.0",
+    "@kopexa/use-safe-layout-effect": "2.0.0",
+    "@kopexa/spinner": "7.0.0",
+    "@kopexa/use-debounced-callback": "2.0.0",
+    "@kopexa/use-callback-ref": "2.0.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",

package/dist/chunk-7MR6363U.mjs

@@ -1,57 +0,0 @@
-"use client";
-import {
-  Input
-} from "./chunk-UWFWTFM3.mjs";
-
-// src/password-input.tsx
-import { EyeIcon, EyeOffIcon } from "@kopexa/icons";
-import { passwordInput } from "@kopexa/theme";
-import { Tooltip } from "@kopexa/tooltip";
-import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var PasswordInput = (props) => {
-  const {
-    className,
-    toggleLabel = "Toggle password visibility",
-    ...rest
-  } = props;
-  const [isVisible, setIsVisible] = useState(false);
-  const styles = passwordInput();
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      type: isVisible ? "text" : "password",
-      "data-slot": "input",
-      className,
-      endContent: /* @__PURE__ */ jsx(Tooltip, { content: toggleLabel, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          "aria-label": toggleLabel,
-          type: "button",
-          onClick: () => setIsVisible(!isVisible),
-          className: styles.button(),
-          children: isVisible ? /* @__PURE__ */ jsx(
-            EyeOffIcon,
-            {
-              "aria-hidden": true,
-              focusable: false,
-              className: styles.icon()
-            }
-          ) : /* @__PURE__ */ jsx(
-            EyeIcon,
-            {
-              "aria-hidden": true,
-              focusable: false,
-              className: styles.icon()
-            }
-          )
-        }
-      ) }),
-      ...rest
-    }
-  );
-};
-
-export {
-  PasswordInput
-};

package/dist/chunk-LWM42RB2.mjs

@@ -1,36 +0,0 @@
-"use client";
-import {
-  Input
-} from "./chunk-UWFWTFM3.mjs";
-
-// src/search-input.tsx
-import { SearchIcon } from "@kopexa/icons";
-import { passwordInput } from "@kopexa/theme";
-import { useDebounceCallback } from "@kopexa/use-debounced-callback";
-import { jsx } from "react/jsx-runtime";
-var SearchInput = ({
-  defaultValue,
-  onValueChange,
-  debounce = 300,
-  ...props
-}) => {
-  const styles = passwordInput();
-  const debounced = useDebounceCallback(
-    (value) => onValueChange == null ? void 0 : onValueChange(value),
-    debounce
-  );
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      ...props,
-      defaultValue,
-      onChange: (event) => debounced(event.target.value),
-      startContent: /* @__PURE__ */ jsx(SearchIcon, { className: styles.icon() }),
-      isClearable: true
-    }
-  );
-};
-
-export {
-  SearchInput
-};

package/dist/chunk-UWFWTFM3.mjs

@@ -1,152 +0,0 @@
-"use client";
-
-// src/input.tsx
-import { CloseIcon } from "@kopexa/icons";
-import { mergeRefs } from "@kopexa/react-utils";
-import { ariaAttr, chain, cn, dataAttr, isEmpty } from "@kopexa/shared-utils";
-import { Spinner } from "@kopexa/spinner";
-import {
-  input
-} from "@kopexa/theme";
-import { useControllableState } from "@kopexa/use-controllable-state";
-import { useSafeLayoutEffect } from "@kopexa/use-safe-layout-effect";
-import { useCallback, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Input = (props) => {
-  var _a, _b, _c, _d;
-  const {
-    className,
-    size,
-    radius,
-    type = "text",
-    startContent,
-    endContent,
-    classNames,
-    value: valueProp,
-    onChange: onChangeProp,
-    onValueChange,
-    ref: refProp,
-    onClear,
-    loading,
-    isClearable: propsIsClearable,
-    ...rest
-  } = props;
-  const handleValueChange = useCallback(
-    (value) => {
-      onValueChange == null ? void 0 : onValueChange(value != null ? value : "");
-    },
-    [onValueChange]
-  );
-  const [inputValue, setInputValue] = useControllableState({
-    value: valueProp,
-    onChange: handleValueChange,
-    defaultValue: (_a = props.defaultValue) != null ? _a : ""
-  });
-  const domRef = useRef(null);
-  const isFileTypeInput = type === "file";
-  const isClearable = !!onClear || propsIsClearable || false;
-  const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(
-    type
-  );
-  const hasUploadedFiles = ((_d = (_c = (_b = domRef == null ? void 0 : domRef.current) == null ? void 0 : _b.files) == null ? void 0 : _c.length) != null ? _d : 0) > 0;
-  const isFilled = !isEmpty(valueProp) || isFilledByDefault || hasUploadedFiles || !!inputValue;
-  const styles = useMemo(
-    () => input({
-      size,
-      radius,
-      isClearable
-    }),
-    [size, radius, isClearable]
-  );
-  const handleClear = useCallback(() => {
-    var _a2;
-    if (isFileTypeInput) {
-      domRef.current.value = "";
-    } else {
-      setInputValue("");
-    }
-    onClear == null ? void 0 : onClear();
-    (_a2 = domRef.current) == null ? void 0 : _a2.focus();
-  }, [setInputValue, isFileTypeInput, onClear]);
-  const end = useMemo(() => {
-    if (isClearable) {
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          tabIndex: -1,
-          disabled: props.disabled,
-          "aria-label": "clear input",
-          "data-slot": "clear-button",
-          className: styles.clearButton(),
-          onClick: handleClear,
-          children: endContent || /* @__PURE__ */ jsx(CloseIcon, {})
-        }
-      );
-    }
-    return endContent;
-  }, [
-    endContent,
-    props == null ? void 0 : props.disabled,
-    isClearable,
-    styles.clearButton,
-    handleClear
-  ]);
-  const onChange = (event) => {
-    if (!isFileTypeInput) {
-      setInputValue(event.target.value);
-    }
-    onChangeProp == null ? void 0 : onChangeProp(event);
-  };
-  useSafeLayoutEffect(() => {
-    if (!domRef.current) return;
-    setInputValue(domRef.current.value);
-  }, [domRef.current]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: styles.inputWrapper({
-        className: classNames == null ? void 0 : classNames.inputWrapper
-      }),
-      "data-disabled": dataAttr(props.disabled),
-      "data-readonly": dataAttr(props.readOnly),
-      "data-hidden": dataAttr(props.hidden),
-      "data-slot": "input-wrapper",
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles.innerWrapper({
-            className: classNames == null ? void 0 : classNames.innerWrapper
-          }),
-          "data-slot": "inner-wrapper",
-          children: [
-            startContent,
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type,
-                "data-slot": "input",
-                "data-has-start-content": dataAttr(!!startContent),
-                "data-has-end-content": dataAttr(!!endContent),
-                "data-filled": dataAttr(isFilled),
-                "aria-readonly": ariaAttr(props.readOnly),
-                className: styles.input({
-                  className: cn(classNames == null ? void 0 : classNames.input, className)
-                }),
-                value: inputValue,
-                onChange: chain(onChangeProp, onChange),
-                ref: mergeRefs(domRef, refProp),
-                ...rest
-              }
-            ),
-            loading ? /* @__PURE__ */ jsx(Spinner, { size: "xs" }) : end
-          ]
-        }
-      )
-    }
-  );
-};
-
-export {
-  Input
-};