@kopexa/input 3.0.10 → 5.0.0

package/dist/chunk-EYVXSUHW.mjs

@@ -0,0 +1,23 @@
+"use client";
+
+// src/input-wrapper.tsx
+import { cn } from "@kopexa/shared-utils";
+import {
+  input,
+  inputWrapper
+} from "@kopexa/theme";
+import { jsx } from "react/jsx-runtime";
+function InputWrapper({ className, size, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-wrapper",
+      className: cn(input({ size }), inputWrapper({ size }), className),
+      ...props
+    }
+  );
+}
+
+export {
+  InputWrapper
+};

package/dist/chunk-GMM4E7KL.mjs

@@ -0,0 +1,27 @@
+"use client";
+
+// src/input.tsx
+import { ariaAttr } from "@kopexa/shared-utils";
+import { input } from "@kopexa/theme";
+import { jsx } from "react/jsx-runtime";
+var Input = (props) => {
+  const { className, size, radius, type = "text", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      "aria-readonly": ariaAttr(props.readOnly),
+      className: input({
+        className,
+        size,
+        radius
+      }),
+      ...rest
+    }
+  );
+};
+
+export {
+  Input
+};

package/dist/chunk-NMA7BIPU.mjs

@@ -0,0 +1,20 @@
+"use client";
+
+// src/input-group.tsx
+import { cn } from "@kopexa/shared-utils";
+import { inputGroup } from "@kopexa/theme";
+import { jsx } from "react/jsx-runtime";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      className: cn(inputGroup(), className),
+      ...props
+    }
+  );
+}
+
+export {
+  InputGroup
+};

package/dist/chunk-TAMOGG4C.mjs

@@ -0,0 +1,87 @@
+"use client";
+import {
+  InputWrapper
+} from "./chunk-EYVXSUHW.mjs";
+import {
+  Input
+} from "./chunk-GMM4E7KL.mjs";
+
+// src/search-input.tsx
+import { CloseIcon, SearchIcon } from "@kopexa/icons";
+import { Spinner } from "@kopexa/spinner";
+import { useCallbackRef } from "@kopexa/use-callback-ref";
+import { useControllableState } from "@kopexa/use-controllable-state";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchInput = ({
+  value: valueProp,
+  defaultValue = "",
+  onChange,
+  onValueChange,
+  debounce = 300,
+  clearable = true,
+  onClear,
+  loading = false,
+  disabled,
+  ...props
+}) => {
+  const onChangeRef = useCallbackRef(onChange);
+  const onValueChangeRef = useCallbackRef(onValueChange);
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeRef
+    // immediate callback
+  });
+  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__ */ jsxs(InputWrapper, { children: [
+    /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...props,
+        role: "searchbox",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled
+      }
+    ),
+    loading ? /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-busy": "true", children: /* @__PURE__ */ jsx(Spinner, { size: "xs" }) }) : clearable && value ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        disabled,
+        children: /* @__PURE__ */ jsx(CloseIcon, {})
+      }
+    ) : null
+  ] });
+};
+
+export {
+  SearchInput
+};

package/dist/chunk-Z5QELHKG.mjs

@@ -0,0 +1,62 @@
+"use client";
+import {
+  InputWrapper
+} from "./chunk-EYVXSUHW.mjs";
+import {
+  Input
+} from "./chunk-GMM4E7KL.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, jsxs } 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__ */ jsxs(InputWrapper, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: isVisible ? "text" : "password",
+        "data-slot": "input",
+        className,
+        ...rest
+      }
+    ),
+    /* @__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()
+          }
+        )
+      }
+    ) })
+  ] });
+};
+
+export {
+  PasswordInput
+};

package/dist/index.d.mts

@@ -1,7 +1,8 @@
 export { Input, InputProps } from './input.mjs';
+export { InputGroup, InputGroupProps } from './input-group.mjs';
+export { InputWrapper, InputWrapperProps } from './input-wrapper.mjs';
 export { PasswordInput, PasswordInputProps } from './password-input.mjs';
 export { SearchInput, SearchInputProps } from './search-input.mjs';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
-import '@kopexa/theme/src/components/input';
 import 'react';

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export { Input, InputProps } from './input.js';
+export { InputGroup, InputGroupProps } from './input-group.js';
+export { InputWrapper, InputWrapperProps } from './input-wrapper.js';
 export { PasswordInput, PasswordInputProps } from './password-input.js';
 export { SearchInput, SearchInputProps } from './search-input.js';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
-import '@kopexa/theme/src/components/input';
 import 'react';

package/dist/index.js

@@ -22,235 +22,196 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Input: () => Input,
+  InputGroup: () => InputGroup,
+  InputWrapper: () => InputWrapper,
   PasswordInput: () => PasswordInput,
   SearchInput: () => SearchInput
 });
 module.exports = __toCommonJS(index_exports);
 
 // 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_controllable_state = require("@kopexa/use-controllable-state");
-var import_use_safe_layout_effect = require("@kopexa/use-safe-layout-effect");
-var import_react = require("react");
 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, {})
-        }
-      );
+  const { className, size, radius, type = "text", ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      "aria-readonly": (0, import_shared_utils.ariaAttr)(props.readOnly),
+      className: (0, import_theme.input)({
+        className,
+        size,
+        radius
+      }),
+      ...rest
     }
-    return endContent;
-  }, [
-    endContent,
-    props == null ? void 0 : props.disabled,
-    isClearable,
-    styles.clearButton,
-    handleClear
-  ]);
-  const onChange = (event) => {
-    if (!isFileTypeInput) {
-      setInputValue(event.target.value);
+  );
+};
+
+// src/input-group.tsx
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "input-group",
+      className: (0, import_shared_utils2.cn)((0, import_theme2.inputGroup)(), className),
+      ...props
     }
-    onChangeProp == null ? void 0 : onChangeProp(event);
-  };
-  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!domRef.current) return;
-    setInputValue(domRef.current.value);
-  }, [domRef.current]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  );
+}
+
+// src/input-wrapper.tsx
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_theme3 = require("@kopexa/theme");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function InputWrapper({ className, size, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
-      className: styles.inputWrapper({
-        className: classNames == null ? void 0 : classNames.inputWrapper
-      }),
-      "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
-          ]
-        }
-      )
+      className: (0, import_shared_utils3.cn)((0, import_theme3.input)({ size }), (0, import_theme3.inputWrapper)({ size }), className),
+      ...props
     }
   );
-};
+}
 
 // src/password-input.tsx
-var import_icons2 = require("@kopexa/icons");
-var import_theme2 = require("@kopexa/theme");
+var import_icons = require("@kopexa/icons");
+var import_theme4 = require("@kopexa/theme");
 var import_tooltip = require("@kopexa/tooltip");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PasswordInput = (props) => {
   const {
     className,
     toggleLabel = "Toggle password visibility",
     ...rest
   } = props;
-  const [isVisible, setIsVisible] = (0, import_react2.useState)(false);
-  const styles = (0, import_theme2.passwordInput)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Input,
-    {
-      type: isVisible ? "text" : "password",
-      "data-slot": "input",
-      className,
-      endContent: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tooltip.Tooltip, { content: toggleLabel, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          "aria-label": toggleLabel,
-          type: "button",
-          onClick: () => setIsVisible(!isVisible),
-          className: styles.button(),
-          children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_icons2.EyeOffIcon,
-            {
-              "aria-hidden": true,
-              focusable: false,
-              className: styles.icon()
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_icons2.EyeIcon,
-            {
-              "aria-hidden": true,
-              focusable: false,
-              className: styles.icon()
-            }
-          )
-        }
-      ) }),
-      ...rest
-    }
-  );
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  const styles = (0, import_theme4.passwordInput)();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(InputWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Input,
+      {
+        type: isVisible ? "text" : "password",
+        "data-slot": "input",
+        className,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tooltip.Tooltip, { content: toggleLabel, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        "aria-label": toggleLabel,
+        type: "button",
+        onClick: () => setIsVisible(!isVisible),
+        className: styles.button(),
+        children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_icons.EyeOffIcon,
+          {
+            "aria-hidden": true,
+            focusable: false,
+            className: styles.icon()
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_icons.EyeIcon,
+          {
+            "aria-hidden": true,
+            focusable: false,
+            className: styles.icon()
+          }
+        )
+      }
+    ) })
+  ] });
 };
 
 // src/search-input.tsx
-var import_icons3 = require("@kopexa/icons");
-var import_theme3 = require("@kopexa/theme");
-var import_use_debounced_callback = require("@kopexa/use-debounced-callback");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_icons2 = require("@kopexa/icons");
+var import_spinner = require("@kopexa/spinner");
+var import_use_callback_ref = require("@kopexa/use-callback-ref");
+var import_use_controllable_state = require("@kopexa/use-controllable-state");
+var import_react2 = require("react");
+var import_jsx_runtime5 = 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_theme3.passwordInput)();
-  const debounced = (0, import_use_debounced_callback.useDebounceCallback)(
-    (value) => onValueChange == null ? void 0 : onValueChange(value),
-    debounce
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Input,
-    {
-      ...props,
-      defaultValue,
-      onChange: (event) => debounced(event.target.value),
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons3.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_react2.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_runtime5.jsxs)(InputWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.SearchIcon, { "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Input,
+      {
+        ...props,
+        role: "searchbox",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled
+      }
+    ),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "aria-live": "polite", "aria-busy": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_spinner.Spinner, { size: "xs" }) }) : clearable && value ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CloseIcon, {})
+      }
+    ) : null
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Input,
+  InputGroup,
+  InputWrapper,
   PasswordInput,
   SearchInput
 });

package/dist/index.mjs

@@ -1,15 +1,23 @@
 "use client";
+import {
+  InputGroup
+} from "./chunk-NMA7BIPU.mjs";
 import {
   PasswordInput
-} from "./chunk-7MR6363U.mjs";
+} from "./chunk-Z5QELHKG.mjs";
 import {
   SearchInput
-} from "./chunk-LWM42RB2.mjs";
+} from "./chunk-TAMOGG4C.mjs";
+import {
+  InputWrapper
+} from "./chunk-EYVXSUHW.mjs";
 import {
   Input
-} from "./chunk-UWFWTFM3.mjs";
+} from "./chunk-GMM4E7KL.mjs";
 export {
   Input,
+  InputGroup,
+  InputWrapper,
   PasswordInput,
   SearchInput
 };

package/dist/input-group.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type InputGroupProps = ComponentProps<"div">;
+declare function InputGroup({ className, ...props }: InputGroupProps): react_jsx_runtime.JSX.Element;
+
+export { InputGroup, type InputGroupProps };

package/dist/input-group.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type InputGroupProps = ComponentProps<"div">;
+declare function InputGroup({ className, ...props }: InputGroupProps): react_jsx_runtime.JSX.Element;
+
+export { InputGroup, type InputGroupProps };