@envive-ai/react-toolkit 0.2.0 → 0.2.2

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 (190) hide show
  1. package/package.json +10 -13
  2. package/src/components/Accordion/Accordion.tsx +3 -3
  3. package/src/components/AnimatedChevron/AnimatedChevron.tsx +1 -2
  4. package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx +2 -2
  5. package/src/components/ButtonBase/ButtonBase.tsx +2 -2
  6. package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx +2 -2
  7. package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx +2 -2
  8. package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx +2 -2
  9. package/src/components/ProductCard/ProductCard.tsx +10 -9
  10. package/src/components/RadioButton/RadioButton.tsx +2 -2
  11. package/src/components/SearchFilter/SearchFilterHeader.tsx +3 -3
  12. package/src/components/SearchFilter/SearchFilterItem.tsx +2 -2
  13. package/src/components/SearchInput/searchInputVariants.ts +2 -2
  14. package/src/components/SearchResultsStates/NoSearchResultsFound.tsx +3 -3
  15. package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx +2 -2
  16. package/src/components/TextInput/TextInput.tsx +4 -3
  17. package/src/components/ToggleButton/ToggleButton.tsx +5 -5
  18. package/src/components/Typography/Typography.spec.tsx +22 -0
  19. package/src/components/Typography/Typography.tsx +73 -0
  20. package/src/components/Typography/index.ts +2 -0
  21. package/src/components/{Text/textVariantClasses.ts → Typography/typographyVariantClasses.ts} +36 -38
  22. package/src/components/Typography/util.ts +19 -0
  23. package/dist/Accordion/index.cjs +0 -6
  24. package/dist/Accordion/index.d.cts +0 -13
  25. package/dist/Accordion/index.d.ts +0 -13
  26. package/dist/Accordion/index.js +0 -6
  27. package/dist/Accordion-D9gO9_y3.cjs +0 -88
  28. package/dist/Accordion-ZEdp99Ph.js +0 -77
  29. package/dist/AnimatedChevron/index.cjs +0 -3
  30. package/dist/AnimatedChevron/index.d.cts +0 -11
  31. package/dist/AnimatedChevron/index.d.ts +0 -11
  32. package/dist/AnimatedChevron/index.js +0 -3
  33. package/dist/AnimatedChevron-CwuXgR2r.js +0 -29
  34. package/dist/AnimatedChevron-e_UzWBl0.cjs +0 -37
  35. package/dist/AppliedFiltersScrollbar/index.cjs +0 -48
  36. package/dist/AppliedFiltersScrollbar/index.d.cts +0 -22
  37. package/dist/AppliedFiltersScrollbar/index.d.ts +0 -22
  38. package/dist/AppliedFiltersScrollbar/index.js +0 -44
  39. package/dist/ButtonBase/index.cjs +0 -7
  40. package/dist/ButtonBase/index.d.cts +0 -42
  41. package/dist/ButtonBase/index.d.ts +0 -42
  42. package/dist/ButtonBase/index.js +0 -6
  43. package/dist/ButtonBase-BJ0qXMWD.js +0 -60
  44. package/dist/ButtonBase-BktteD9c.js +0 -1
  45. package/dist/ButtonBase-Cb6Iec6f.cjs +0 -0
  46. package/dist/ButtonBase-VIv-tn7H.cjs +0 -75
  47. package/dist/DynamicFiltersScrollbar/index.cjs +0 -36
  48. package/dist/DynamicFiltersScrollbar/index.d.cts +0 -28
  49. package/dist/DynamicFiltersScrollbar/index.d.ts +0 -28
  50. package/dist/DynamicFiltersScrollbar/index.js +0 -32
  51. package/dist/DynamicFiltersScrollbar-HCYZjI14.cjs +0 -81
  52. package/dist/DynamicFiltersScrollbar-O0ai3cIG.js +0 -66
  53. package/dist/FilterScrollbar/index.cjs +0 -6
  54. package/dist/FilterScrollbar/index.d.cts +0 -47
  55. package/dist/FilterScrollbar/index.d.ts +0 -47
  56. package/dist/FilterScrollbar/index.js +0 -5
  57. package/dist/Headline/index.cjs +0 -4
  58. package/dist/Headline/index.d.cts +0 -21
  59. package/dist/Headline/index.d.ts +0 -21
  60. package/dist/Headline/index.js +0 -4
  61. package/dist/Headline-CKJmd2w4.cjs +0 -72
  62. package/dist/Headline-DtjTB4xS.js +0 -64
  63. package/dist/ImageWithFallback/index.cjs +0 -3
  64. package/dist/ImageWithFallback/index.d.cts +0 -26
  65. package/dist/ImageWithFallback/index.d.ts +0 -26
  66. package/dist/ImageWithFallback/index.js +0 -3
  67. package/dist/ImageWithFallback-CbYsD1_a.js +0 -42
  68. package/dist/ImageWithFallback-Km9h16Vz.cjs +0 -51
  69. package/dist/ModalSheet/index.cjs +0 -4
  70. package/dist/ModalSheet/index.d.cts +0 -38
  71. package/dist/ModalSheet/index.d.ts +0 -38
  72. package/dist/ModalSheet/index.js +0 -4
  73. package/dist/ModalSheet-DwnbbFh7.cjs +0 -313
  74. package/dist/ModalSheet-sMg44OLz.js +0 -302
  75. package/dist/ProductCard/index.cjs +0 -17
  76. package/dist/ProductCard/index.d.cts +0 -2
  77. package/dist/ProductCard/index.d.ts +0 -2
  78. package/dist/ProductCard/index.js +0 -8
  79. package/dist/ProductCard-BDz80MCQ.cjs +0 -319
  80. package/dist/ProductCard-CqhNJShq.js +0 -255
  81. package/dist/ProductGrid/index.cjs +0 -10
  82. package/dist/ProductGrid/index.d.cts +0 -33
  83. package/dist/ProductGrid/index.d.ts +0 -33
  84. package/dist/ProductGrid/index.js +0 -9
  85. package/dist/ProductGrid-8n4XgcMr.js +0 -60
  86. package/dist/ProductGrid-RRcdkY5J.cjs +0 -74
  87. package/dist/RadioButton/index.cjs +0 -6
  88. package/dist/RadioButton/index.d.cts +0 -32
  89. package/dist/RadioButton/index.d.ts +0 -32
  90. package/dist/RadioButton/index.js +0 -6
  91. package/dist/RadioButton-BWnaUI8o.cjs +0 -84
  92. package/dist/RadioButton-CG8_M0hY.js +0 -75
  93. package/dist/RadioButtonGroup/index.cjs +0 -8
  94. package/dist/RadioButtonGroup/index.d.cts +0 -36
  95. package/dist/RadioButtonGroup/index.d.ts +0 -36
  96. package/dist/RadioButtonGroup/index.js +0 -7
  97. package/dist/RadioButtonGroup-B7EuiEP1.js +0 -38
  98. package/dist/RadioButtonGroup-ReQqakpS.cjs +0 -52
  99. package/dist/SearchAutocomplete/index.cjs +0 -3
  100. package/dist/SearchAutocomplete/index.d.cts +0 -13
  101. package/dist/SearchAutocomplete/index.d.ts +0 -13
  102. package/dist/SearchAutocomplete/index.js +0 -3
  103. package/dist/SearchAutocomplete-BMNYZiJL.js +0 -51
  104. package/dist/SearchAutocomplete-BmHdijOv.cjs +0 -62
  105. package/dist/SearchFilter/index.cjs +0 -19
  106. package/dist/SearchFilter/index.d.cts +0 -91
  107. package/dist/SearchFilter/index.d.ts +0 -91
  108. package/dist/SearchFilter/index.js +0 -14
  109. package/dist/SearchFilter-C8mgj84o.js +0 -268
  110. package/dist/SearchFilter-FrdHPM5O.cjs +0 -307
  111. package/dist/SearchInput/index.cjs +0 -7
  112. package/dist/SearchInput/index.d.cts +0 -34
  113. package/dist/SearchInput/index.d.ts +0 -34
  114. package/dist/SearchInput/index.js +0 -6
  115. package/dist/SearchInput--x9NTMTb.cjs +0 -106
  116. package/dist/SearchInput-IBq83nqF.js +0 -89
  117. package/dist/SearchInputForm/index.cjs +0 -39
  118. package/dist/SearchInputForm/index.d.cts +0 -34
  119. package/dist/SearchInputForm/index.d.ts +0 -34
  120. package/dist/SearchInputForm/index.js +0 -37
  121. package/dist/SearchResultsContent/index.cjs +0 -47
  122. package/dist/SearchResultsContent/index.d.cts +0 -48
  123. package/dist/SearchResultsContent/index.d.ts +0 -48
  124. package/dist/SearchResultsContent/index.js +0 -44
  125. package/dist/SearchResultsFilterSidebar/index.cjs +0 -62
  126. package/dist/SearchResultsFilterSidebar/index.d.cts +0 -2
  127. package/dist/SearchResultsFilterSidebar/index.d.ts +0 -2
  128. package/dist/SearchResultsFilterSidebar/index.js +0 -57
  129. package/dist/SearchResultsStates/index.cjs +0 -17
  130. package/dist/SearchResultsStates/index.d.cts +0 -69
  131. package/dist/SearchResultsStates/index.d.ts +0 -69
  132. package/dist/SearchResultsStates/index.js +0 -15
  133. package/dist/SearchResultsStates-D7dM35qq.js +0 -110
  134. package/dist/SearchResultsStates-nlaPbkj3.cjs +0 -132
  135. package/dist/SparkleAnimation/index.cjs +0 -4
  136. package/dist/SparkleAnimation/index.d.cts +0 -23
  137. package/dist/SparkleAnimation/index.d.ts +0 -23
  138. package/dist/SparkleAnimation/index.js +0 -3
  139. package/dist/SparkleAnimation-D1aZE-7A.cjs +0 -101
  140. package/dist/SparkleAnimation-DtWkXmkN.js +0 -84
  141. package/dist/Spinner/index.cjs +0 -3
  142. package/dist/Spinner/index.d.cts +0 -11
  143. package/dist/Spinner/index.d.ts +0 -11
  144. package/dist/Spinner/index.js +0 -3
  145. package/dist/Spinner-bg6jb_ks.js +0 -38
  146. package/dist/Spinner-rcWX566W.cjs +0 -46
  147. package/dist/SuggestionButton/index.cjs +0 -188
  148. package/dist/SuggestionButton/index.d.cts +0 -35
  149. package/dist/SuggestionButton/index.d.ts +0 -35
  150. package/dist/SuggestionButton/index.js +0 -180
  151. package/dist/Text/index.cjs +0 -10
  152. package/dist/Text/index.d.cts +0 -42
  153. package/dist/Text/index.d.ts +0 -42
  154. package/dist/Text/index.js +0 -5
  155. package/dist/Text-BLzNhX4H.js +0 -42
  156. package/dist/Text-BMsncrpY.js +0 -10
  157. package/dist/Text-C8t_iEj6.cjs +0 -16
  158. package/dist/Text-DllCE9_D.cjs +0 -50
  159. package/dist/TextInput/index.cjs +0 -4
  160. package/dist/TextInput/index.d.cts +0 -12
  161. package/dist/TextInput/index.d.ts +0 -12
  162. package/dist/TextInput/index.js +0 -4
  163. package/dist/TextInput-BeHPlVHT.js +0 -31
  164. package/dist/TextInput-CGs4BY1q.cjs +0 -40
  165. package/dist/ToggleButton/index.cjs +0 -6
  166. package/dist/ToggleButton/index.d.cts +0 -30
  167. package/dist/ToggleButton/index.d.ts +0 -30
  168. package/dist/ToggleButton/index.js +0 -6
  169. package/dist/ToggleButton-CRiPqTCb.js +0 -60
  170. package/dist/ToggleButton-DfJZ8POQ.cjs +0 -68
  171. package/dist/chunk-CUT6urMc.cjs +0 -30
  172. package/dist/colorsConfig-Ck2jeqWe.js +0 -26
  173. package/dist/colorsConfig-CqCKftuM.cjs +0 -38
  174. package/dist/index-B9WeFNlO.d.cts +0 -325
  175. package/dist/index-CLGe_Pam.d.cts +0 -46
  176. package/dist/index-CeECGrFM.d.ts +0 -325
  177. package/dist/index-PSzeHU2s.d.ts +0 -46
  178. package/dist/searchFilterSidebarVariants-B05f5SD5.js +0 -34
  179. package/dist/searchFilterSidebarVariants-NQhqq-NT.cjs +0 -39
  180. package/dist/textVariantClasses-B0gNjzl4.d.cts +0 -174
  181. package/dist/textVariantClasses-Bl8SAGwZ.d.ts +0 -174
  182. package/dist/textVariantClasses-CBre7vXv.cjs +0 -123
  183. package/dist/textVariantClasses-CRrTb43V.js +0 -99
  184. package/dist/types-BhGjnuWx.d.cts +0 -4
  185. package/dist/types-CTOdb0G0.d.ts +0 -4
  186. package/src/components/Headline/Headline.tsx +0 -81
  187. package/src/components/Headline/index.ts +0 -1
  188. package/src/components/Text/Text.tsx +0 -58
  189. package/src/components/Text/index.ts +0 -3
  190. package/src/components/Text/types.ts +0 -23
@@ -1,268 +0,0 @@
1
- import { Text } from "./Text-BLzNhX4H.js";
2
- import { Accordion } from "./Accordion-ZEdp99Ph.js";
3
- import { ButtonBase } from "./ButtonBase-BJ0qXMWD.js";
4
- import { ModalSheet } from "./ModalSheet-sMg44OLz.js";
5
- import { RadioButtonGroup } from "./RadioButtonGroup-B7EuiEP1.js";
6
- import { ToggleButton } from "./ToggleButton-CRiPqTCb.js";
7
- import { useCallback, useEffect, useMemo, useState } from "react";
8
- import classNames from "classnames";
9
- import { jsx, jsxs } from "react/jsx-runtime";
10
-
11
- //#region src/components/SearchFilter/SearchFilterHeader.tsx
12
- const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
13
- const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
14
- return /* @__PURE__ */ jsxs("div", {
15
- className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
16
- children: [/* @__PURE__ */ jsxs(Text, {
17
- variant: "body2",
18
- className: "spiffy-tw-font-medium",
19
- children: [
20
- "Filters (",
21
- productCount,
22
- ")"
23
- ]
24
- }), /* @__PURE__ */ jsx("button", {
25
- onClick: closeModal,
26
- className: "spiffy-tw-p-2",
27
- type: "button",
28
- "aria-label": "Open Filter Menu",
29
- children: /* @__PURE__ */ jsx("svg", {
30
- xmlns: "http://www.w3.org/2000/svg",
31
- width: "14",
32
- height: "14",
33
- viewBox: "0 0 14 14",
34
- fill: "none",
35
- children: /* @__PURE__ */ jsx("path", {
36
- d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
37
- fill: closeIconColor
38
- })
39
- })
40
- })]
41
- });
42
- };
43
-
44
- //#endregion
45
- //#region src/components/SearchFilter/useHasFilterStateChanged.tsx
46
- const useHasFilterStateChanged = (filters, isOpen) => {
47
- const [initialFilterStates, setInitialFilterStates] = useState({});
48
- const currentFilterStates = useMemo(() => {
49
- const states = {};
50
- filters.forEach((filter) => {
51
- filter.items.forEach((item) => {
52
- states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
53
- });
54
- });
55
- return states;
56
- }, [filters]);
57
- const hasFiltersChanged = useMemo(() => {
58
- if (Object.keys(initialFilterStates).length === 0) return false;
59
- return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
60
- }, [currentFilterStates, initialFilterStates]);
61
- useEffect(() => {
62
- if (isOpen) setInitialFilterStates(currentFilterStates);
63
- }, [isOpen]);
64
- return hasFiltersChanged;
65
- };
66
-
67
- //#endregion
68
- //#region src/components/SearchFilter/utils.ts
69
- const getSelectedFilterItemsCount = (filter) => filter.items.filter((item) => item.isSelected).length;
70
- const getTotalSelectedFilterItemsCount = (filters) => filters.reduce((acc, filter) => {
71
- if (filter.filterId === "sort") return acc;
72
- return acc + getSelectedFilterItemsCount(filter);
73
- }, 0);
74
-
75
- //#endregion
76
- //#region src/components/SearchFilter/SearchFilterFooter.tsx
77
- const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFiltersUnchangedClasses, applyFiltersChangedClasses, hasFiltersChanged }) => {
78
- const clearAllButtonEnabled = filterCount > 0;
79
- const footerWrapperClassName = classNames({
80
- "spiffy-tw-flex": true,
81
- "spiffy-tw-flex-col": true,
82
- "spiffy-tw-items-center": true,
83
- "spiffy-tw-justify-between": true,
84
- "spiffy-tw-w-full": true,
85
- "spiffy-tw-border-t": true,
86
- "spiffy-tw-border-t-[--spiffy-colors-border-light]": true,
87
- "spiffy-tw-p-[16px]": true,
88
- "spiffy-tw-gap-[16px]": true
89
- });
90
- const applyFilterButtonClassName = classNames("spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full", hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses);
91
- const clearAllButtonClassName = classNames({
92
- "spiffy-tw-flex": true,
93
- "spiffy-tw-flex-row": true,
94
- "spiffy-tw-justify-center": true,
95
- "spiffy-tw-w-full": true,
96
- "spiffy-tw-text-[--spiffy-colors-text-primary]": clearAllButtonEnabled,
97
- "spiffy-tw-text-[--spiffy-colors-text-secondary]": !clearAllButtonEnabled
98
- });
99
- return /* @__PURE__ */ jsxs("div", {
100
- className: footerWrapperClassName,
101
- children: [/* @__PURE__ */ jsx(ButtonBase, {
102
- isDisabled: !hasFiltersChanged,
103
- buttonClass: applyFilterButtonClassName,
104
- text: "Apply Filters",
105
- onClick: closeModal
106
- }), /* @__PURE__ */ jsx(ButtonBase, {
107
- isDisabled: !clearAllButtonEnabled,
108
- buttonClass: clearAllButtonClassName,
109
- text: "Clear All",
110
- onClick: clearAllFilters
111
- })]
112
- });
113
- };
114
-
115
- //#endregion
116
- //#region src/components/SearchFilter/SearchFilter.tsx
117
- const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
118
- const filterTitle = filter.displayName;
119
- const options = filter.items.map((item) => ({
120
- label: item.displayName,
121
- value: item.filterItemId,
122
- isSelected: item.isSelected
123
- }));
124
- const content = /* @__PURE__ */ jsx(RadioButtonGroup, {
125
- options,
126
- name: filterTitle,
127
- onChange: (value) => {
128
- const selectedItem = filter.items.find((item) => item.filterItemId === value);
129
- selectFilterItem({
130
- filterId: filter.filterId,
131
- filterItemId: value,
132
- isSelected: true,
133
- displayName: selectedItem?.displayName || value
134
- });
135
- },
136
- gap: "large",
137
- textButtonGap: "large",
138
- value: filter.items.find((item) => item.isSelected)?.filterItemId,
139
- fillColor: radioButtonFillColor,
140
- hoverColor: radioButtonHoverColor,
141
- uncheckedBorderColor: radioButtonUncheckedBorderColor
142
- });
143
- return /* @__PURE__ */ jsx(Accordion, {
144
- title: filterTitle,
145
- content
146
- });
147
- };
148
- const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ jsx(ToggleButton, {
149
- label: filterItem.displayName,
150
- secondaryLabel: `(${filterItem.productCount})`,
151
- isSelected: filterItem.isSelected,
152
- onClick: () => selectFilterItem({
153
- filterId,
154
- filterItemId: filterItem.filterItemId,
155
- isSelected: !filterItem.isSelected,
156
- displayName: filterItem.displayName
157
- }),
158
- variant: "default"
159
- });
160
- const Filter = ({ filter, selectFilterItem }) => {
161
- const filterContentClassName = classNames({
162
- "spiffy-tw-flex": true,
163
- "spiffy-tw-flex-wrap": true,
164
- "spiffy-tw-gap-[8px]": true,
165
- "spiffy-tw-pb-[1px]": true
166
- });
167
- const selectedFilterItems = getSelectedFilterItemsCount(filter);
168
- const filterTitle = selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
169
- const content = /* @__PURE__ */ jsx("div", {
170
- className: filterContentClassName,
171
- children: filter.items.map((item) => /* @__PURE__ */ jsx(FilterItem, {
172
- filterId: filter.filterId,
173
- filterItem: item,
174
- selectFilterItem
175
- }, item.filterItemId))
176
- });
177
- return /* @__PURE__ */ jsx(Accordion, {
178
- title: filterTitle,
179
- content
180
- });
181
- };
182
- const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {
183
- const closeModal = useCallback(() => setIsOpen(false), [setIsOpen]);
184
- const filterCount = getTotalSelectedFilterItemsCount(filters);
185
- const hasFiltersChanged = useHasFilterStateChanged(filters, isOpen);
186
- const filterWrapperClassName = classNames({
187
- "spiffy-tw-flex": true,
188
- "spiffy-tw-flex-col": true,
189
- "spiffy-tw-gap-[16px]": true,
190
- "spiffy-tw-px-[24px]": true,
191
- "spiffy-tw-py-[16px]": true,
192
- "spiffy-tw-max-h-screen": true,
193
- "spiffy-tw-overflow-y-auto": true
194
- });
195
- return /* @__PURE__ */ jsx(ModalSheet, {
196
- isOpen,
197
- closeModal,
198
- headerProps: {
199
- headerContent: headerContent || /* @__PURE__ */ jsx(SearchFilterHeader, {
200
- closeModal,
201
- productCount,
202
- headerClassName: headerClassName ?? "",
203
- filterCloseIconVariant
204
- }),
205
- chevronColor: "#000"
206
- },
207
- footerProps: { footerContent: footerContent || /* @__PURE__ */ jsx(SearchFilterFooter, {
208
- closeModal,
209
- clearAllFilters,
210
- filterCount,
211
- hasFiltersChanged,
212
- applyFiltersUnchangedClasses,
213
- applyFiltersChangedClasses
214
- }) },
215
- children: /* @__PURE__ */ jsx("div", {
216
- className: filterWrapperClassName,
217
- children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
218
- if (filter.filterId === "sort") return /* @__PURE__ */ jsx(SortFilter, {
219
- filter,
220
- selectFilterItem,
221
- radioButtonFillColor,
222
- radioButtonHoverColor,
223
- radioButtonUncheckedBorderColor
224
- }, filter.filterId);
225
- return /* @__PURE__ */ jsx(Filter, {
226
- filter,
227
- selectFilterItem
228
- }, filter.filterId);
229
- })
230
- })
231
- });
232
- };
233
-
234
- //#endregion
235
- //#region src/components/SearchFilter/SearchFilterItem.tsx
236
- const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
237
- const { displayName, isSelected } = filterItem;
238
- const radioClasses = classNames("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
239
- return /* @__PURE__ */ jsxs("button", {
240
- type: "button",
241
- role: "option",
242
- "aria-selected": isSelected,
243
- className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2",
244
- onClick: () => onSelectFilterItem(filterItem),
245
- onKeyDown: (event) => {
246
- if (event.key === "Enter" || event.key === " ") {
247
- event.preventDefault();
248
- onSelectFilterItem(filterItem);
249
- }
250
- },
251
- onKeyUp: (event) => {
252
- if (event.key === " ") event.preventDefault();
253
- },
254
- children: [/* @__PURE__ */ jsx(Text, {
255
- variant: "body3",
256
- children: displayName
257
- }), /* @__PURE__ */ jsx("div", {
258
- className: radioClasses,
259
- children: isSelected && /* @__PURE__ */ jsx("div", { className: classNames("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
260
- "spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
261
- "spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
262
- }) })
263
- })]
264
- });
265
- };
266
-
267
- //#endregion
268
- export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };
@@ -1,307 +0,0 @@
1
- const require_chunk = require('./chunk-CUT6urMc.cjs');
2
- const require_Text = require('./Text-DllCE9_D.cjs');
3
- const require_Accordion = require('./Accordion-D9gO9_y3.cjs');
4
- const require_ButtonBase = require('./ButtonBase-VIv-tn7H.cjs');
5
- const require_ModalSheet = require('./ModalSheet-DwnbbFh7.cjs');
6
- const require_RadioButtonGroup = require('./RadioButtonGroup-ReQqakpS.cjs');
7
- const require_ToggleButton = require('./ToggleButton-DfJZ8POQ.cjs');
8
- let react = require("react");
9
- react = require_chunk.__toESM(react);
10
- let classnames = require("classnames");
11
- classnames = require_chunk.__toESM(classnames);
12
- let react_jsx_runtime = require("react/jsx-runtime");
13
- react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
14
-
15
- //#region src/components/SearchFilter/SearchFilterHeader.tsx
16
- const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
17
- const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
18
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
19
- className: (0, classnames.default)("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
20
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
21
- variant: "body2",
22
- className: "spiffy-tw-font-medium",
23
- children: [
24
- "Filters (",
25
- productCount,
26
- ")"
27
- ]
28
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
29
- onClick: closeModal,
30
- className: "spiffy-tw-p-2",
31
- type: "button",
32
- "aria-label": "Open Filter Menu",
33
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
34
- xmlns: "http://www.w3.org/2000/svg",
35
- width: "14",
36
- height: "14",
37
- viewBox: "0 0 14 14",
38
- fill: "none",
39
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
40
- d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
41
- fill: closeIconColor
42
- })
43
- })
44
- })]
45
- });
46
- };
47
-
48
- //#endregion
49
- //#region src/components/SearchFilter/useHasFilterStateChanged.tsx
50
- const useHasFilterStateChanged = (filters, isOpen) => {
51
- const [initialFilterStates, setInitialFilterStates] = (0, react.useState)({});
52
- const currentFilterStates = (0, react.useMemo)(() => {
53
- const states = {};
54
- filters.forEach((filter) => {
55
- filter.items.forEach((item) => {
56
- states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
57
- });
58
- });
59
- return states;
60
- }, [filters]);
61
- const hasFiltersChanged = (0, react.useMemo)(() => {
62
- if (Object.keys(initialFilterStates).length === 0) return false;
63
- return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
64
- }, [currentFilterStates, initialFilterStates]);
65
- (0, react.useEffect)(() => {
66
- if (isOpen) setInitialFilterStates(currentFilterStates);
67
- }, [isOpen]);
68
- return hasFiltersChanged;
69
- };
70
-
71
- //#endregion
72
- //#region src/components/SearchFilter/utils.ts
73
- const getSelectedFilterItemsCount = (filter) => filter.items.filter((item) => item.isSelected).length;
74
- const getTotalSelectedFilterItemsCount = (filters) => filters.reduce((acc, filter) => {
75
- if (filter.filterId === "sort") return acc;
76
- return acc + getSelectedFilterItemsCount(filter);
77
- }, 0);
78
-
79
- //#endregion
80
- //#region src/components/SearchFilter/SearchFilterFooter.tsx
81
- const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFiltersUnchangedClasses, applyFiltersChangedClasses, hasFiltersChanged }) => {
82
- const clearAllButtonEnabled = filterCount > 0;
83
- const footerWrapperClassName = (0, classnames.default)({
84
- "spiffy-tw-flex": true,
85
- "spiffy-tw-flex-col": true,
86
- "spiffy-tw-items-center": true,
87
- "spiffy-tw-justify-between": true,
88
- "spiffy-tw-w-full": true,
89
- "spiffy-tw-border-t": true,
90
- "spiffy-tw-border-t-[--spiffy-colors-border-light]": true,
91
- "spiffy-tw-p-[16px]": true,
92
- "spiffy-tw-gap-[16px]": true
93
- });
94
- const applyFilterButtonClassName = (0, classnames.default)("spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full", hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses);
95
- const clearAllButtonClassName = (0, classnames.default)({
96
- "spiffy-tw-flex": true,
97
- "spiffy-tw-flex-row": true,
98
- "spiffy-tw-justify-center": true,
99
- "spiffy-tw-w-full": true,
100
- "spiffy-tw-text-[--spiffy-colors-text-primary]": clearAllButtonEnabled,
101
- "spiffy-tw-text-[--spiffy-colors-text-secondary]": !clearAllButtonEnabled
102
- });
103
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
104
- className: footerWrapperClassName,
105
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
106
- isDisabled: !hasFiltersChanged,
107
- buttonClass: applyFilterButtonClassName,
108
- text: "Apply Filters",
109
- onClick: closeModal
110
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
111
- isDisabled: !clearAllButtonEnabled,
112
- buttonClass: clearAllButtonClassName,
113
- text: "Clear All",
114
- onClick: clearAllFilters
115
- })]
116
- });
117
- };
118
-
119
- //#endregion
120
- //#region src/components/SearchFilter/SearchFilter.tsx
121
- const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
122
- const filterTitle = filter.displayName;
123
- const options = filter.items.map((item) => ({
124
- label: item.displayName,
125
- value: item.filterItemId,
126
- isSelected: item.isSelected
127
- }));
128
- const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButtonGroup.RadioButtonGroup, {
129
- options,
130
- name: filterTitle,
131
- onChange: (value) => {
132
- const selectedItem = filter.items.find((item) => item.filterItemId === value);
133
- selectFilterItem({
134
- filterId: filter.filterId,
135
- filterItemId: value,
136
- isSelected: true,
137
- displayName: selectedItem?.displayName || value
138
- });
139
- },
140
- gap: "large",
141
- textButtonGap: "large",
142
- value: filter.items.find((item) => item.isSelected)?.filterItemId,
143
- fillColor: radioButtonFillColor,
144
- hoverColor: radioButtonHoverColor,
145
- uncheckedBorderColor: radioButtonUncheckedBorderColor
146
- });
147
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
148
- title: filterTitle,
149
- content
150
- });
151
- };
152
- const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
153
- label: filterItem.displayName,
154
- secondaryLabel: `(${filterItem.productCount})`,
155
- isSelected: filterItem.isSelected,
156
- onClick: () => selectFilterItem({
157
- filterId,
158
- filterItemId: filterItem.filterItemId,
159
- isSelected: !filterItem.isSelected,
160
- displayName: filterItem.displayName
161
- }),
162
- variant: "default"
163
- });
164
- const Filter = ({ filter, selectFilterItem }) => {
165
- const filterContentClassName = (0, classnames.default)({
166
- "spiffy-tw-flex": true,
167
- "spiffy-tw-flex-wrap": true,
168
- "spiffy-tw-gap-[8px]": true,
169
- "spiffy-tw-pb-[1px]": true
170
- });
171
- const selectedFilterItems = getSelectedFilterItemsCount(filter);
172
- const filterTitle = selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
173
- const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
174
- className: filterContentClassName,
175
- children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
176
- filterId: filter.filterId,
177
- filterItem: item,
178
- selectFilterItem
179
- }, item.filterItemId))
180
- });
181
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
182
- title: filterTitle,
183
- content
184
- });
185
- };
186
- const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {
187
- const closeModal = (0, react.useCallback)(() => setIsOpen(false), [setIsOpen]);
188
- const filterCount = getTotalSelectedFilterItemsCount(filters);
189
- const hasFiltersChanged = useHasFilterStateChanged(filters, isOpen);
190
- const filterWrapperClassName = (0, classnames.default)({
191
- "spiffy-tw-flex": true,
192
- "spiffy-tw-flex-col": true,
193
- "spiffy-tw-gap-[16px]": true,
194
- "spiffy-tw-px-[24px]": true,
195
- "spiffy-tw-py-[16px]": true,
196
- "spiffy-tw-max-h-screen": true,
197
- "spiffy-tw-overflow-y-auto": true
198
- });
199
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
200
- isOpen,
201
- closeModal,
202
- headerProps: {
203
- headerContent: headerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterHeader, {
204
- closeModal,
205
- productCount,
206
- headerClassName: headerClassName ?? "",
207
- filterCloseIconVariant
208
- }),
209
- chevronColor: "#000"
210
- },
211
- footerProps: { footerContent: footerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterFooter, {
212
- closeModal,
213
- clearAllFilters,
214
- filterCount,
215
- hasFiltersChanged,
216
- applyFiltersUnchangedClasses,
217
- applyFiltersChangedClasses
218
- }) },
219
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
220
- className: filterWrapperClassName,
221
- children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
222
- if (filter.filterId === "sort") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortFilter, {
223
- filter,
224
- selectFilterItem,
225
- radioButtonFillColor,
226
- radioButtonHoverColor,
227
- radioButtonUncheckedBorderColor
228
- }, filter.filterId);
229
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Filter, {
230
- filter,
231
- selectFilterItem
232
- }, filter.filterId);
233
- })
234
- })
235
- });
236
- };
237
-
238
- //#endregion
239
- //#region src/components/SearchFilter/SearchFilterItem.tsx
240
- const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
241
- const { displayName, isSelected } = filterItem;
242
- const radioClasses = (0, classnames.default)("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
243
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
244
- type: "button",
245
- role: "option",
246
- "aria-selected": isSelected,
247
- className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2",
248
- onClick: () => onSelectFilterItem(filterItem),
249
- onKeyDown: (event) => {
250
- if (event.key === "Enter" || event.key === " ") {
251
- event.preventDefault();
252
- onSelectFilterItem(filterItem);
253
- }
254
- },
255
- onKeyUp: (event) => {
256
- if (event.key === " ") event.preventDefault();
257
- },
258
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
259
- variant: "body3",
260
- children: displayName
261
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
262
- className: radioClasses,
263
- children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
264
- "spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
265
- "spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
266
- }) })
267
- })]
268
- });
269
- };
270
-
271
- //#endregion
272
- Object.defineProperty(exports, 'SearchFilter', {
273
- enumerable: true,
274
- get: function () {
275
- return SearchFilter;
276
- }
277
- });
278
- Object.defineProperty(exports, 'SearchFilterFooter', {
279
- enumerable: true,
280
- get: function () {
281
- return SearchFilterFooter;
282
- }
283
- });
284
- Object.defineProperty(exports, 'SearchFilterHeader', {
285
- enumerable: true,
286
- get: function () {
287
- return SearchFilterHeader;
288
- }
289
- });
290
- Object.defineProperty(exports, 'SearchFilterItem', {
291
- enumerable: true,
292
- get: function () {
293
- return SearchFilterItem;
294
- }
295
- });
296
- Object.defineProperty(exports, 'getSelectedFilterItemsCount', {
297
- enumerable: true,
298
- get: function () {
299
- return getSelectedFilterItemsCount;
300
- }
301
- });
302
- Object.defineProperty(exports, 'getTotalSelectedFilterItemsCount', {
303
- enumerable: true,
304
- get: function () {
305
- return getTotalSelectedFilterItemsCount;
306
- }
307
- });
@@ -1,7 +0,0 @@
1
- require('../textVariantClasses-CBre7vXv.cjs');
2
- require('../TextInput-CGs4BY1q.cjs');
3
- require('../colorsConfig-CqCKftuM.cjs');
4
- const require_SearchInput = require('../SearchInput--x9NTMTb.cjs');
5
-
6
- exports.SearchInput = require_SearchInput.SearchInput;
7
- exports.searchInputVariantClasses = require_SearchInput.searchInputVariantClasses;
@@ -1,34 +0,0 @@
1
- import { SearchInputVariant as SearchInputVariant$1 } from "../types-BhGjnuWx.cjs";
2
- import { TextStyleVariantMap } from "../textVariantClasses-B0gNjzl4.cjs";
3
- import React from "react";
4
- import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
5
-
6
- //#region src/components/SearchInput/SearchInput.d.ts
7
- interface SearchInputProps {
8
- searchInputVariant?: SearchInputVariant;
9
- value: string;
10
- placeholder?: string;
11
- suggestions?: string[];
12
- className?: string;
13
- dataTestId?: string;
14
- ariaActivedescendant?: string;
15
- onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
16
- onChange: (newValue: string) => void;
17
- onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
18
- onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
19
- }
20
- declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
21
- //#endregion
22
- //#region src/components/SearchInput/searchInputVariants.d.ts
23
- type SearchInputVariantClasses = {
24
- searchInputIconColor: string;
25
- searchInputBorderColor: string;
26
- searchInputCloseIconClasses: string;
27
- searchInputActiveStarClasses: string;
28
- autocompleteIconColor: string;
29
- searchInputClasses: string;
30
- placeholderVariant: keyof typeof TextStyleVariantMap;
31
- };
32
- declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
33
- //#endregion
34
- export { SearchInput, searchInputVariantClasses };
@@ -1,34 +0,0 @@
1
- import { SearchInputVariant as SearchInputVariant$1 } from "../types-CTOdb0G0.js";
2
- import { TextStyleVariantMap } from "../textVariantClasses-Bl8SAGwZ.js";
3
- import React from "react";
4
- import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
5
-
6
- //#region src/components/SearchInput/SearchInput.d.ts
7
- interface SearchInputProps {
8
- searchInputVariant?: SearchInputVariant;
9
- value: string;
10
- placeholder?: string;
11
- suggestions?: string[];
12
- className?: string;
13
- dataTestId?: string;
14
- ariaActivedescendant?: string;
15
- onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
16
- onChange: (newValue: string) => void;
17
- onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
18
- onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
19
- }
20
- declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
21
- //#endregion
22
- //#region src/components/SearchInput/searchInputVariants.d.ts
23
- type SearchInputVariantClasses = {
24
- searchInputIconColor: string;
25
- searchInputBorderColor: string;
26
- searchInputCloseIconClasses: string;
27
- searchInputActiveStarClasses: string;
28
- autocompleteIconColor: string;
29
- searchInputClasses: string;
30
- placeholderVariant: keyof typeof TextStyleVariantMap;
31
- };
32
- declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
33
- //#endregion
34
- export { SearchInput, searchInputVariantClasses };
@@ -1,6 +0,0 @@
1
- import "../textVariantClasses-CRrTb43V.js";
2
- import "../TextInput-BeHPlVHT.js";
3
- import "../colorsConfig-Ck2jeqWe.js";
4
- import { SearchInput, searchInputVariantClasses } from "../SearchInput-IBq83nqF.js";
5
-
6
- export { SearchInput, searchInputVariantClasses };