@grandbazar/ui-baza 1.2.5 → 1.2.6

package/dist/index.cjs

@@ -45,6 +45,12 @@ function createRange(start, length) {
   return Array.from({ length }, (_, index) => start + index);
 }
 
+function omit(object, ...keys) {
+  const omitKeys = new Set(keys.map((key) => key.trim()).filter(Boolean));
+  const filteredEntries = Object.entries(object).filter(([key]) => !omitKeys.has(key));
+  return Object.fromEntries(filteredEntries);
+}
+
 const badge = "_badge_p5h5n_2";
 const primary$3 = "_primary_p5h5n_9";
 const secondary$4 = "_secondary_p5h5n_13";
@@ -2431,14 +2437,15 @@ const styles$7 = {
 
 function Search(props) {
   const searchId = React.useId();
-  const { onChange, value, className, placeholder, mode } = props;
+  const { onChange, value, className, mode, onReset, ...inputProps } = props;
+  const sanitizedInputProps = omit(inputProps, "buttonWidth", "onSearch");
   const inputField = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       TextField.Input,
       {
-        placeholder,
+        ...sanitizedInputProps,
         value,
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: (e) => onChange(e.target.value),
         id: `search-input-${searchId}`
       }
     ),
@@ -2448,7 +2455,13 @@ function Search(props) {
         className: styles$7.icon,
         "aria-label": "clear search",
         role: "button",
-        onClick: () => onChange(""),
+        onClick: () => {
+          if (onReset) {
+            onReset();
+          } else {
+            onChange("");
+          }
+        },
         "data-element": "icon"
       }
     )

package/dist/index.d.ts

@@ -458,14 +458,14 @@ export declare function RadioButton({ className, label, ...props }: TRadioButton
 
 /**
  * Search renders a search input field with icon and clear button.
- * Supports different modes: default (inline icon) and custom (separate search button).
+ * Supports TextField.Input props and two modes: default and custom.
  *
  * @param value - Current search query value
  * @param onChange - Callback fired when input value changes
- * @param placeholder - Placeholder text for the input
+ * @param onReset - Optional callback fired when clear button is clicked
  * @param mode - Display mode: 'default' (inline icon) or 'custom' (separate search button)
  * @param onSearch - (only for mode='custom') Callback fired when search button is clicked
- * @param className - Additional CSS classes
+ * @param buttonWidth - (only for mode='custom') Width of the search button in pixels
  */
 export declare function Search(props: TSearchProps): JSX.Element;
 
@@ -783,11 +783,10 @@ declare type TRadioButtonProps = React.InputHTMLAttributes<HTMLInputElement> & {
     ref?: React.RefObject<HTMLInputElement | null>;
 };
 
-declare type TSearchBaseProps = {
+declare type TSearchBaseProps = Omit<ComponentProps<typeof TextField.Input>, 'value' | 'onChange' | 'id'> & {
     value: string;
     onChange: (value: string) => void;
-    placeholder?: string;
-    className?: string;
+    onReset?: VoidFunction;
 };
 
 declare type TSearchCustomProps = TSearchBaseProps & {

package/dist/index.js

@@ -41,6 +41,12 @@ function createRange(start, length) {
   return Array.from({ length }, (_, index) => start + index);
 }
 
+function omit(object, ...keys) {
+  const omitKeys = new Set(keys.map((key) => key.trim()).filter(Boolean));
+  const filteredEntries = Object.entries(object).filter(([key]) => !omitKeys.has(key));
+  return Object.fromEntries(filteredEntries);
+}
+
 const badge = "_badge_p5h5n_2";
 const primary$3 = "_primary_p5h5n_9";
 const secondary$4 = "_secondary_p5h5n_13";
@@ -2427,14 +2433,15 @@ const styles$7 = {
 
 function Search(props) {
   const searchId = useId();
-  const { onChange, value, className, placeholder, mode } = props;
+  const { onChange, value, className, mode, onReset, ...inputProps } = props;
+  const sanitizedInputProps = omit(inputProps, "buttonWidth", "onSearch");
   const inputField = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       TextField.Input,
       {
-        placeholder,
+        ...sanitizedInputProps,
         value,
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: (e) => onChange(e.target.value),
         id: `search-input-${searchId}`
       }
     ),
@@ -2444,7 +2451,13 @@ function Search(props) {
         className: styles$7.icon,
         "aria-label": "clear search",
         role: "button",
-        onClick: () => onChange(""),
+        onClick: () => {
+          if (onReset) {
+            onReset();
+          } else {
+            onChange("");
+          }
+        },
         "data-element": "icon"
       }
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",