@grandbazar/ui-baza 1.2.5 → 1.2.7

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";
@@ -2316,10 +2322,10 @@ function RadioButton({ className, label, ...props }) {
 
 const DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH = 64;
 
-const textFieldAreaWrapper = "_textFieldAreaWrapper_90dha_2";
-const textFieldAreaLabel = "_textFieldAreaLabel_90dha_15";
-const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_90dha_24";
-const textFieldArea = "_textFieldArea_90dha_2";
+const textFieldAreaWrapper = "_textFieldAreaWrapper_ry59j_2";
+const textFieldAreaLabel = "_textFieldAreaLabel_ry59j_15";
+const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_ry59j_25";
+const textFieldArea = "_textFieldArea_ry59j_2";
 const styles$b = {
 	textFieldAreaWrapper: textFieldAreaWrapper,
 	textFieldAreaLabel: textFieldAreaLabel,
@@ -2353,9 +2359,9 @@ function TextFieldArea({
   ] }) : textFieldArea;
 }
 
-const textFieldInputWrapper = "_textFieldInputWrapper_4dexk_2";
-const textFieldInputLabel = "_textFieldInputLabel_4dexk_10";
-const textFieldInput = "_textFieldInput_4dexk_2";
+const textFieldInputWrapper = "_textFieldInputWrapper_1pc8k_2";
+const textFieldInputLabel = "_textFieldInputLabel_1pc8k_10";
+const textFieldInput = "_textFieldInput_1pc8k_2";
 const styles$a = {
 	textFieldInputWrapper: textFieldInputWrapper,
 	textFieldInputLabel: textFieldInputLabel,
@@ -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";
@@ -2312,10 +2318,10 @@ function RadioButton({ className, label, ...props }) {
 
 const DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH = 64;
 
-const textFieldAreaWrapper = "_textFieldAreaWrapper_90dha_2";
-const textFieldAreaLabel = "_textFieldAreaLabel_90dha_15";
-const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_90dha_24";
-const textFieldArea = "_textFieldArea_90dha_2";
+const textFieldAreaWrapper = "_textFieldAreaWrapper_ry59j_2";
+const textFieldAreaLabel = "_textFieldAreaLabel_ry59j_15";
+const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_ry59j_25";
+const textFieldArea = "_textFieldArea_ry59j_2";
 const styles$b = {
 	textFieldAreaWrapper: textFieldAreaWrapper,
 	textFieldAreaLabel: textFieldAreaLabel,
@@ -2349,9 +2355,9 @@ function TextFieldArea({
   ] }) : textFieldArea;
 }
 
-const textFieldInputWrapper = "_textFieldInputWrapper_4dexk_2";
-const textFieldInputLabel = "_textFieldInputLabel_4dexk_10";
-const textFieldInput = "_textFieldInput_4dexk_2";
+const textFieldInputWrapper = "_textFieldInputWrapper_1pc8k_2";
+const textFieldInputLabel = "_textFieldInputLabel_1pc8k_10";
+const textFieldInput = "_textFieldInput_1pc8k_2";
 const styles$a = {
 	textFieldInputWrapper: textFieldInputWrapper,
 	textFieldInputLabel: textFieldInputLabel,
@@ -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/dist/style.css

@@ -1306,7 +1306,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._textFieldAreaWrapper_90dha_2 {
+  ._textFieldAreaWrapper_ry59j_2 {
     display: flex;
     position: relative;
     flex-grow: 1;
@@ -1319,31 +1319,35 @@ textarea {
     }
   }
 
-  ._textFieldAreaLabel_90dha_15 {
-    z-index: -1;
+  ._textFieldAreaLabel_ry59j_15 {
+    z-index: 0;
     position: absolute;
     left: 0;
     transform-origin: left;
     color: var(--color-neutral-540);
+    pointer-events: none;
     transition: inherit;
   }
 
-  ._textFieldAreaLabelSuffix_90dha_24 {
-    z-index: -1;
+  ._textFieldAreaLabelSuffix_ry59j_25 {
+    z-index: 0;
     position: absolute;
     right: 0;
     transform-origin: right;
     color: var(--color-neutral-540);
     font-variant-numeric: tabular-nums;
+    pointer-events: none;
     transition: inherit;
   }
 
-  ._textFieldAreaWrapper_90dha_2:has(._textFieldArea_90dha_2:disabled) ._textFieldAreaLabel_90dha_15 {
+  ._textFieldAreaWrapper_ry59j_2:has(._textFieldArea_ry59j_2:disabled) ._textFieldAreaLabel_ry59j_15 {
     color: var(--color-neutral-340);
   }
 
-  ._textFieldArea_90dha_2 {
+  ._textFieldArea_ry59j_2 {
     --text-area-min-height: 80px;
+    z-index: 1;
+    position: relative;
 
     flex-grow: 1;
     min-height: var(--text-area-min-height);
@@ -1365,7 +1369,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._textFieldInputWrapper_4dexk_2 {
+  ._textFieldInputWrapper_1pc8k_2 {
     display: flex;
     position: relative;
     flex-grow: 1;
@@ -1373,20 +1377,23 @@ textarea {
     transition: inherit;
   }
 
-  ._textFieldInputLabel_4dexk_10 {
-    z-index: -1;
+  ._textFieldInputLabel_1pc8k_10 {
+    z-index: 0;
     position: absolute;
     left: 0;
     transform-origin: left;
     color: var(--color-neutral-540);
+    pointer-events: none;
     transition: inherit;
   }
 
-  ._textFieldInputWrapper_4dexk_2:has(._textFieldInput_4dexk_2:disabled) ._textFieldInputLabel_4dexk_10 {
+  ._textFieldInputWrapper_1pc8k_2:has(._textFieldInput_1pc8k_2:disabled) ._textFieldInputLabel_1pc8k_10 {
     color: var(--color-neutral-340);
   }
 
-  ._textFieldInput_4dexk_2 {
+  ._textFieldInput_1pc8k_2 {
+    z-index: 1;
+    position: relative;
     flex-grow: 1;
     color: var(--color-neutral);
     caret-color: var(--color-accent);

package/package.json

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