catchup-library-web 2.6.10 → 2.6.11

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 (8) hide show
  1. package/dist/index.d.mts +3 -1
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +5 -3
  4. package/dist/index.mjs +5 -3
  5. package/package.json +1 -1
  6. package/src/components/tabs/SelectionTab.tsx +5 -5
  7. package/src/components/tabs/SelectionTabPill.tsx +6 -2
  8. package/src/properties/TabProperties.ts +2 -0
package/dist/index.d.mts CHANGED
@@ -397,13 +397,15 @@ interface ISelectionTabPillProps {
397
397
  optionList: any;
398
398
  selectedId: any;
399
399
  handleSelectOnClick: (e: any) => void;
400
+ selectedClassName?: string;
401
+ unselectedClassName?: string;
400
402
  }
401
403
 
402
404
  declare const SelectionTab: ({ optionList, selectedId, handleSelectOnClick, selectedTextColor, selectedBorderColor, textColor, borderColor, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
403
405
 
404
406
  declare const SelectionTabFill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
405
407
 
406
- declare const SelectionTabPill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabPillProps) => react_jsx_runtime.JSX.Element;
408
+ declare const SelectionTabPill: ({ optionList, selectedId, handleSelectOnClick, selectedClassName, unselectedClassName, }: ISelectionTabPillProps) => react_jsx_runtime.JSX.Element;
407
409
 
408
410
  interface IFixedLabelProps {
409
411
  title: string;
package/dist/index.d.ts CHANGED
@@ -397,13 +397,15 @@ interface ISelectionTabPillProps {
397
397
  optionList: any;
398
398
  selectedId: any;
399
399
  handleSelectOnClick: (e: any) => void;
400
+ selectedClassName?: string;
401
+ unselectedClassName?: string;
400
402
  }
401
403
 
402
404
  declare const SelectionTab: ({ optionList, selectedId, handleSelectOnClick, selectedTextColor, selectedBorderColor, textColor, borderColor, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
403
405
 
404
406
  declare const SelectionTabFill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
405
407
 
406
- declare const SelectionTabPill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabPillProps) => react_jsx_runtime.JSX.Element;
408
+ declare const SelectionTabPill: ({ optionList, selectedId, handleSelectOnClick, selectedClassName, unselectedClassName, }: ISelectionTabPillProps) => react_jsx_runtime.JSX.Element;
407
409
 
408
410
  interface IFixedLabelProps {
409
411
  title: string;
package/dist/index.js CHANGED
@@ -7851,7 +7851,7 @@ var SelectionTab = ({
7851
7851
  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
7852
7852
  "div",
7853
7853
  {
7854
- className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
7854
+ className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 px-4 py-2 cursor-pointer`,
7855
7855
  onClick: () => {
7856
7856
  handleSelectOnClick(option.id);
7857
7857
  },
@@ -7897,13 +7897,15 @@ var import_jsx_runtime56 = require("react/jsx-runtime");
7897
7897
  var SelectionTabPill = ({
7898
7898
  optionList,
7899
7899
  selectedId,
7900
- handleSelectOnClick
7900
+ handleSelectOnClick,
7901
+ selectedClassName,
7902
+ unselectedClassName
7901
7903
  }) => {
7902
7904
  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
7903
7905
  "button",
7904
7906
  {
7905
7907
  onClick: () => handleSelectOnClick(option.id),
7906
- className: `px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${selectedId === option.id ? "bg-catchup-blue text-catchup-white shadow-card" : "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"}`,
7908
+ className: `px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${selectedId === option.id ? selectedClassName || "bg-catchup-blue text-catchup-white shadow-card" : unselectedClassName || "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"}`,
7907
7909
  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-base font-semibold", children: option.title })
7908
7910
  },
7909
7911
  index
package/dist/index.mjs CHANGED
@@ -7614,7 +7614,7 @@ var SelectionTab = ({
7614
7614
  return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs43(
7615
7615
  "div",
7616
7616
  {
7617
- className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
7617
+ className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 px-4 py-2 cursor-pointer`,
7618
7618
  onClick: () => {
7619
7619
  handleSelectOnClick(option.id);
7620
7620
  },
@@ -7660,13 +7660,15 @@ import { jsx as jsx56 } from "react/jsx-runtime";
7660
7660
  var SelectionTabPill = ({
7661
7661
  optionList,
7662
7662
  selectedId,
7663
- handleSelectOnClick
7663
+ handleSelectOnClick,
7664
+ selectedClassName,
7665
+ unselectedClassName
7664
7666
  }) => {
7665
7667
  return /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ jsx56(
7666
7668
  "button",
7667
7669
  {
7668
7670
  onClick: () => handleSelectOnClick(option.id),
7669
- className: `px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${selectedId === option.id ? "bg-catchup-blue text-catchup-white shadow-card" : "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"}`,
7671
+ className: `px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${selectedId === option.id ? selectedClassName || "bg-catchup-blue text-catchup-white shadow-card" : unselectedClassName || "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"}`,
7670
7672
  children: /* @__PURE__ */ jsx56("span", { className: "text-base font-semibold", children: option.title })
7671
7673
  },
7672
7674
  index
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "2.6.10",
3
+ "version": "2.6.11",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/tabs/SelectionTab.tsx CHANGED
@@ -20,17 +20,17 @@ const SelectionTab = ({
20
20
  ? selectedTextColor
21
21
  : "text-catchup-blue-500"
22
22
  : textColor
23
- ? textColor
24
- : "text-catchup-gray-300"
23
+ ? textColor
24
+ : "text-catchup-gray-300"
25
25
  } ${
26
26
  selectedId === option.id
27
27
  ? selectedBorderColor
28
28
  ? selectedBorderColor
29
29
  : "border-catchup-blue-500"
30
30
  : borderColor
31
- ? borderColor
32
- : "border-catchup-gray-50"
33
- } border-b-2 transition-all duration-300 p-3 cursor-pointer`}
31
+ ? borderColor
32
+ : "border-catchup-gray-50"
33
+ } border-b-2 transition-all duration-300 px-4 py-2 cursor-pointer`}
34
34
  onClick={() => {
35
35
  handleSelectOnClick(option.id);
36
36
  }}
package/src/components/tabs/SelectionTabPill.tsx CHANGED
@@ -4,6 +4,8 @@ const SelectionTabPill = ({
4
4
  optionList,
5
5
  selectedId,
6
6
  handleSelectOnClick,
7
+ selectedClassName,
8
+ unselectedClassName,
7
9
  }: ISelectionTabPillProps) => {
8
10
  return (
9
11
  <div className="flex flex-wrap items-center gap-3 my-2">
@@ -13,8 +15,10 @@ const SelectionTabPill = ({
13
15
  onClick={() => handleSelectOnClick(option.id)}
14
16
  className={`px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${
15
17
  selectedId === option.id
16
- ? "bg-catchup-blue text-catchup-white shadow-card"
17
- : "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"
18
+ ? selectedClassName ||
19
+ "bg-catchup-blue text-catchup-white shadow-card"
20
+ : unselectedClassName ||
21
+ "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"
18
22
  }`}
19
23
  >
20
24
  <span className="text-base font-semibold">{option.title}</span>
package/src/properties/TabProperties.ts CHANGED
@@ -18,4 +18,6 @@ export interface ISelectionTabPillProps {
18
18
  optionList: any;
19
19
  selectedId: any;
20
20
  handleSelectOnClick: (e: any) => void;
21
+ selectedClassName?: string;
22
+ unselectedClassName?: string;
21
23
  }