@grandbazar/ui-baza 1.2.4 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs +23 -10
  2. package/dist/index.d.ts +5 -6
  3. package/dist/index.js +23 -10
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -45,6 +45,12 @@ function createRange(start, length) {
45
45
  return Array.from({ length }, (_, index) => start + index);
46
46
  }
47
47
 
48
+ function omit(object, ...keys) {
49
+ const omitKeys = new Set(keys.map((key) => key.trim()).filter(Boolean));
50
+ const filteredEntries = Object.entries(object).filter(([key]) => !omitKeys.has(key));
51
+ return Object.fromEntries(filteredEntries);
52
+ }
53
+
48
54
  const badge = "_badge_p5h5n_2";
49
55
  const primary$3 = "_primary_p5h5n_9";
50
56
  const secondary$4 = "_secondary_p5h5n_13";
@@ -295,7 +301,7 @@ function IconCheck(props) {
295
301
  }
296
302
 
297
303
  function IconCheckCircle(props) {
298
- return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: [
304
+ return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
299
305
  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "transparent" }),
300
306
  /* @__PURE__ */ jsxRuntime.jsx(
301
307
  "path",
@@ -541,14 +547,14 @@ function IconFilters(props) {
541
547
  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
542
548
  "path",
543
549
  {
544
- d: "M15 13C15.5523 13 16 13.4477 16 14C16 14.5523 15.5523 15 15 15H9C8.44772 15 8 14.5523 8 14C8 13.4477 8.44772 13 9 13H15ZM17 8C17.5523 8 18 8.44772 18 9C18 9.55228 17.5523 10 17 10H7C6.44772 10 6 9.55228 6 9C6 8.44772 6.44772 8 7 8H17ZM20 3C20.5523 3 21 3.44772 21 4C21 4.55228 20.5523 5 20 5H4C3.44772 5 3 4.55228 3 4C3 3.44772 3.44772 3 4 3H20Z",
550
+ d: "M15 16C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17C8 16.4477 8.44772 16 9 16H15ZM17 11C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H17ZM20 6C20.5523 6 21 6.44772 21 7C21 7.55228 20.5523 8 20 8H4C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6H20Z",
545
551
  fill: "currentColor"
546
552
  }
547
553
  ) });
548
554
  }
549
555
 
550
556
  function IconGear(props) {
551
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
557
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
552
558
  "path",
553
559
  {
554
560
  fillRule: "evenodd",
@@ -559,7 +565,7 @@ function IconGear(props) {
559
565
  ) });
560
566
  }
561
567
  IconGear.Filled = function IconGearFilled(props) {
562
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
568
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
563
569
  "path",
564
570
  {
565
571
  fillRule: "evenodd",
@@ -889,7 +895,7 @@ function IconSearch(props) {
889
895
  }
890
896
 
891
897
  function IconShopping(props) {
892
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
898
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
893
899
  "path",
894
900
  {
895
901
  fillRule: "evenodd",
@@ -900,7 +906,7 @@ function IconShopping(props) {
900
906
  ) });
901
907
  }
902
908
  IconShopping.Filled = function IconShoppingFilled(props) {
903
- return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
909
+ return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
904
910
  "path",
905
911
  {
906
912
  fillRule: "evenodd",
@@ -2431,14 +2437,15 @@ const styles$7 = {
2431
2437
 
2432
2438
  function Search(props) {
2433
2439
  const searchId = React.useId();
2434
- const { onChange, value, className, placeholder, mode } = props;
2440
+ const { onChange, value, className, mode, onReset, ...inputProps } = props;
2441
+ const sanitizedInputProps = omit(inputProps, "buttonWidth", "onSearch");
2435
2442
  const inputField = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2436
2443
  /* @__PURE__ */ jsxRuntime.jsx(
2437
2444
  TextField.Input,
2438
2445
  {
2439
- placeholder,
2446
+ ...sanitizedInputProps,
2440
2447
  value,
2441
- onChange: (e) => onChange?.(e.target.value),
2448
+ onChange: (e) => onChange(e.target.value),
2442
2449
  id: `search-input-${searchId}`
2443
2450
  }
2444
2451
  ),
@@ -2448,7 +2455,13 @@ function Search(props) {
2448
2455
  className: styles$7.icon,
2449
2456
  "aria-label": "clear search",
2450
2457
  role: "button",
2451
- onClick: () => onChange(""),
2458
+ onClick: () => {
2459
+ if (onReset) {
2460
+ onReset();
2461
+ } else {
2462
+ onChange("");
2463
+ }
2464
+ },
2452
2465
  "data-element": "icon"
2453
2466
  }
2454
2467
  )
package/dist/index.d.ts CHANGED
@@ -458,14 +458,14 @@ export declare function RadioButton({ className, label, ...props }: TRadioButton
458
458
 
459
459
  /**
460
460
  * Search renders a search input field with icon and clear button.
461
- * Supports different modes: default (inline icon) and custom (separate search button).
461
+ * Supports TextField.Input props and two modes: default and custom.
462
462
  *
463
463
  * @param value - Current search query value
464
464
  * @param onChange - Callback fired when input value changes
465
- * @param placeholder - Placeholder text for the input
465
+ * @param onReset - Optional callback fired when clear button is clicked
466
466
  * @param mode - Display mode: 'default' (inline icon) or 'custom' (separate search button)
467
467
  * @param onSearch - (only for mode='custom') Callback fired when search button is clicked
468
- * @param className - Additional CSS classes
468
+ * @param buttonWidth - (only for mode='custom') Width of the search button in pixels
469
469
  */
470
470
  export declare function Search(props: TSearchProps): JSX.Element;
471
471
 
@@ -783,11 +783,10 @@ declare type TRadioButtonProps = React.InputHTMLAttributes<HTMLInputElement> & {
783
783
  ref?: React.RefObject<HTMLInputElement | null>;
784
784
  };
785
785
 
786
- declare type TSearchBaseProps = {
786
+ declare type TSearchBaseProps = Omit<ComponentProps<typeof TextField.Input>, 'value' | 'onChange' | 'id'> & {
787
787
  value: string;
788
788
  onChange: (value: string) => void;
789
- placeholder?: string;
790
- className?: string;
789
+ onReset?: VoidFunction;
791
790
  };
792
791
 
793
792
  declare type TSearchCustomProps = TSearchBaseProps & {
package/dist/index.js CHANGED
@@ -41,6 +41,12 @@ function createRange(start, length) {
41
41
  return Array.from({ length }, (_, index) => start + index);
42
42
  }
43
43
 
44
+ function omit(object, ...keys) {
45
+ const omitKeys = new Set(keys.map((key) => key.trim()).filter(Boolean));
46
+ const filteredEntries = Object.entries(object).filter(([key]) => !omitKeys.has(key));
47
+ return Object.fromEntries(filteredEntries);
48
+ }
49
+
44
50
  const badge = "_badge_p5h5n_2";
45
51
  const primary$3 = "_primary_p5h5n_9";
46
52
  const secondary$4 = "_secondary_p5h5n_13";
@@ -291,7 +297,7 @@ function IconCheck(props) {
291
297
  }
292
298
 
293
299
  function IconCheckCircle(props) {
294
- return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: [
300
+ return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
295
301
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "transparent" }),
296
302
  /* @__PURE__ */ jsx(
297
303
  "path",
@@ -537,14 +543,14 @@ function IconFilters(props) {
537
543
  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
538
544
  "path",
539
545
  {
540
- d: "M15 13C15.5523 13 16 13.4477 16 14C16 14.5523 15.5523 15 15 15H9C8.44772 15 8 14.5523 8 14C8 13.4477 8.44772 13 9 13H15ZM17 8C17.5523 8 18 8.44772 18 9C18 9.55228 17.5523 10 17 10H7C6.44772 10 6 9.55228 6 9C6 8.44772 6.44772 8 7 8H17ZM20 3C20.5523 3 21 3.44772 21 4C21 4.55228 20.5523 5 20 5H4C3.44772 5 3 4.55228 3 4C3 3.44772 3.44772 3 4 3H20Z",
546
+ d: "M15 16C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17C8 16.4477 8.44772 16 9 16H15ZM17 11C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12C6 11.4477 6.44772 11 7 11H17ZM20 6C20.5523 6 21 6.44772 21 7C21 7.55228 20.5523 8 20 8H4C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6H20Z",
541
547
  fill: "currentColor"
542
548
  }
543
549
  ) });
544
550
  }
545
551
 
546
552
  function IconGear(props) {
547
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
553
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
548
554
  "path",
549
555
  {
550
556
  fillRule: "evenodd",
@@ -555,7 +561,7 @@ function IconGear(props) {
555
561
  ) });
556
562
  }
557
563
  IconGear.Filled = function IconGearFilled(props) {
558
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
564
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
559
565
  "path",
560
566
  {
561
567
  fillRule: "evenodd",
@@ -885,7 +891,7 @@ function IconSearch(props) {
885
891
  }
886
892
 
887
893
  function IconShopping(props) {
888
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
894
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
889
895
  "path",
890
896
  {
891
897
  fillRule: "evenodd",
@@ -896,7 +902,7 @@ function IconShopping(props) {
896
902
  ) });
897
903
  }
898
904
  IconShopping.Filled = function IconShoppingFilled(props) {
899
- return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
905
+ return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
900
906
  "path",
901
907
  {
902
908
  fillRule: "evenodd",
@@ -2427,14 +2433,15 @@ const styles$7 = {
2427
2433
 
2428
2434
  function Search(props) {
2429
2435
  const searchId = useId();
2430
- const { onChange, value, className, placeholder, mode } = props;
2436
+ const { onChange, value, className, mode, onReset, ...inputProps } = props;
2437
+ const sanitizedInputProps = omit(inputProps, "buttonWidth", "onSearch");
2431
2438
  const inputField = /* @__PURE__ */ jsxs(Fragment$1, { children: [
2432
2439
  /* @__PURE__ */ jsx(
2433
2440
  TextField.Input,
2434
2441
  {
2435
- placeholder,
2442
+ ...sanitizedInputProps,
2436
2443
  value,
2437
- onChange: (e) => onChange?.(e.target.value),
2444
+ onChange: (e) => onChange(e.target.value),
2438
2445
  id: `search-input-${searchId}`
2439
2446
  }
2440
2447
  ),
@@ -2444,7 +2451,13 @@ function Search(props) {
2444
2451
  className: styles$7.icon,
2445
2452
  "aria-label": "clear search",
2446
2453
  role: "button",
2447
- onClick: () => onChange(""),
2454
+ onClick: () => {
2455
+ if (onReset) {
2456
+ onReset();
2457
+ } else {
2458
+ onChange("");
2459
+ }
2460
+ },
2448
2461
  "data-element": "icon"
2449
2462
  }
2450
2463
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grandbazar/ui-baza",
3
- "version": "1.2.4",
3
+ "version": "1.2.6",
4
4
  "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
5
5
  "repository": {
6
6
  "type": "git",