@janbox/storefront-ui 1.0.1 → 1.0.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 (231) hide show
  1. package/dist/hooks/index.d.ts +2 -0
  2. package/dist/hooks/index.d.ts.map +1 -1
  3. package/dist/hooks/index.js +4 -0
  4. package/dist/hooks/use-controllable-state.js +2 -2
  5. package/dist/hooks/use-countdown-timer.js +1 -1
  6. package/dist/hooks/use-first-mount-state/index.d.ts +2 -0
  7. package/dist/hooks/use-first-mount-state/index.d.ts.map +1 -0
  8. package/dist/hooks/use-first-mount-state/index.js +12 -0
  9. package/dist/hooks/use-update-effect/index.d.ts +3 -0
  10. package/dist/hooks/use-update-effect/index.d.ts.map +1 -0
  11. package/dist/hooks/use-update-effect/index.js +13 -0
  12. package/dist/lib/accordion/accordion/accordion.d.ts +2 -1
  13. package/dist/lib/accordion/accordion/accordion.d.ts.map +1 -1
  14. package/dist/lib/accordion/accordion/accordion.js +15 -6
  15. package/dist/lib/accordion/accordion/types.d.ts +2 -2
  16. package/dist/lib/accordion/accordion/types.d.ts.map +1 -1
  17. package/dist/node_modules/.pnpm/react-use@17.6.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-use/esm/misc/isDeepEqual.js +5 -0
  18. package/dist/node_modules/.pnpm/react-use@17.6.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-use/esm/useCustomCompareEffect.js +25 -0
  19. package/dist/node_modules/.pnpm/react-use@17.6.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-use/esm/useDeepCompareEffect.js +19 -0
  20. package/dist/node_modules/.pnpm/react-use@17.6.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-use/esm/useFirstMountState.js +12 -0
  21. package/dist/node_modules/.pnpm/react-use@17.6.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-use/esm/useUpdateEffect.js +13 -0
  22. package/package.json +1 -14
  23. package/dist/HOCs/index.cjs +0 -4
  24. package/dist/HOCs/with-query-fallback.cjs +0 -16
  25. package/dist/assets/json/countries.json.cjs +0 -1159
  26. package/dist/assets/svg/arrow-down.svg.cjs +0 -3
  27. package/dist/assets/svg/arrow-forward.svg.cjs +0 -3
  28. package/dist/assets/svg/arrow-left.svg.cjs +0 -3
  29. package/dist/assets/svg/arrow-right.svg.cjs +0 -3
  30. package/dist/assets/svg/calendar.svg.cjs +0 -3
  31. package/dist/assets/svg/check.svg.cjs +0 -3
  32. package/dist/assets/svg/clock-time.svg.cjs +0 -3
  33. package/dist/assets/svg/done-check.svg.cjs +0 -3
  34. package/dist/assets/svg/earth-home-world.svg.cjs +0 -3
  35. package/dist/assets/svg/eye-hidden.svg.cjs +0 -3
  36. package/dist/assets/svg/eye-show-visible.svg.cjs +0 -3
  37. package/dist/assets/svg/image-placeholder.svg.cjs +0 -3
  38. package/dist/assets/svg/loading-waiting.svg.cjs +0 -3
  39. package/dist/assets/svg/long-arrow-right.svg.cjs +0 -3
  40. package/dist/assets/svg/minus.svg.cjs +0 -3
  41. package/dist/assets/svg/plus.svg.cjs +0 -3
  42. package/dist/assets/svg/search-add-plus-middle.svg.cjs +0 -3
  43. package/dist/assets/svg/search-minus.svg.cjs +0 -3
  44. package/dist/assets/svg/times-close-delete.svg.cjs +0 -3
  45. package/dist/components/index.cjs +0 -8
  46. package/dist/components/scroll-view.cjs +0 -19
  47. package/dist/components/svg-loader.cjs +0 -14
  48. package/dist/components/virtualized-list.cjs +0 -43
  49. package/dist/constants/index.cjs +0 -32
  50. package/dist/hooks/index.cjs +0 -14
  51. package/dist/hooks/use-controllable-state.cjs +0 -39
  52. package/dist/hooks/use-countdown-timer.cjs +0 -85
  53. package/dist/hooks/use-hover-line-effect/index.cjs +0 -24
  54. package/dist/hooks/use-hover-line-effect/use-hover-line-effect.module.scss.cjs +0 -8
  55. package/dist/hooks/use-query-params.cjs +0 -53
  56. package/dist/hooks/use-ripple-effect/index.cjs +0 -69
  57. package/dist/hooks/use-ripple-effect/use-ripple-effect.module.scss.cjs +0 -11
  58. package/dist/hooks/use-window-screen/index.cjs +0 -52
  59. package/dist/index.cjs +0 -305
  60. package/dist/lib/accordion/accordion/accordion.cjs +0 -109
  61. package/dist/lib/accordion/accordion/helpers.cjs +0 -21
  62. package/dist/lib/accordion/accordion/types.cjs +0 -7
  63. package/dist/lib/accordion/accordion-content/accordion-content.cjs +0 -41
  64. package/dist/lib/accordion/accordion-content/helpers.cjs +0 -8
  65. package/dist/lib/accordion/accordion-group/accordion-group.cjs +0 -56
  66. package/dist/lib/accordion/accordion-group/helpers.cjs +0 -20
  67. package/dist/lib/accordion/accordion-group/types.cjs +0 -7
  68. package/dist/lib/accordion/accordion-summary/accordion-summary.cjs +0 -64
  69. package/dist/lib/accordion/accordion-summary/helpers.cjs +0 -15
  70. package/dist/lib/accordion/accordion-summary/types.cjs +0 -8
  71. package/dist/lib/badge/badge.cjs +0 -42
  72. package/dist/lib/badge/helpers.cjs +0 -8
  73. package/dist/lib/box/box.cjs +0 -55
  74. package/dist/lib/box/helpers.cjs +0 -8
  75. package/dist/lib/breadcrumbs/breadcrumb-item/breadcrumb-item.cjs +0 -28
  76. package/dist/lib/breadcrumbs/breadcrumbs/breadcrumbs.cjs +0 -44
  77. package/dist/lib/button/button.cjs +0 -235
  78. package/dist/lib/button/helpers.cjs +0 -74
  79. package/dist/lib/cascader/cascader.cjs +0 -497
  80. package/dist/lib/cascader/helpers.cjs +0 -28
  81. package/dist/lib/checkbox/checkbox.cjs +0 -52
  82. package/dist/lib/checkbox/checkbox.module.scss.cjs +0 -23
  83. package/dist/lib/chip/chip.cjs +0 -60
  84. package/dist/lib/chip/helpers.cjs +0 -14
  85. package/dist/lib/collapse/collapse.cjs +0 -50
  86. package/dist/lib/container/container.cjs +0 -101
  87. package/dist/lib/container/helpers.cjs +0 -12
  88. package/dist/lib/count-up/count-up.cjs +0 -38
  89. package/dist/lib/countdown-timer/countdown-timer.cjs +0 -9
  90. package/dist/lib/date-picker/date-picker.cjs +0 -168
  91. package/dist/lib/date-picker/helpers.cjs +0 -12
  92. package/dist/lib/dialog/dialog/dialog.cjs +0 -93
  93. package/dist/lib/dialog/dialog/helpers.cjs +0 -27
  94. package/dist/lib/dialog/dialog-body/dialog-body.cjs +0 -32
  95. package/dist/lib/dialog/dialog-close/dialog-close.cjs +0 -5
  96. package/dist/lib/dialog/dialog-footer/dialog-footer.cjs +0 -31
  97. package/dist/lib/dialog/dialog-header/dialog-header.cjs +0 -73
  98. package/dist/lib/drawer/drawer/drawer.cjs +0 -100
  99. package/dist/lib/drawer/drawer/helpers.cjs +0 -7
  100. package/dist/lib/drawer/drawer-close/drawer-close.cjs +0 -5
  101. package/dist/lib/filter-panel/checkbox-filter-panel.cjs +0 -107
  102. package/dist/lib/filter-panel/filter-panel.cjs +0 -37
  103. package/dist/lib/filter-panel/input-range-filter-panel.cjs +0 -78
  104. package/dist/lib/filter-panel/input-text-filter-panel.cjs +0 -57
  105. package/dist/lib/filter-panel/radio-filter-panel.cjs +0 -95
  106. package/dist/lib/flag/flag.cjs +0 -20
  107. package/dist/lib/flag/helpers.cjs +0 -16
  108. package/dist/lib/flexbox/flex-item/flex-item.cjs +0 -22
  109. package/dist/lib/flexbox/flex-item/helpers.cjs +0 -10
  110. package/dist/lib/flexbox/flexbox/flexbox.cjs +0 -46
  111. package/dist/lib/flexbox/flexbox/helpers.cjs +0 -16
  112. package/dist/lib/floating/floating/floating.cjs +0 -97
  113. package/dist/lib/floating/floating/helpers.cjs +0 -9
  114. package/dist/lib/floating/floating-close/floating-close.cjs +0 -32
  115. package/dist/lib/floating/floating-content/floating-content.cjs +0 -57
  116. package/dist/lib/floating/floating-trigger/floating-trigger.cjs +0 -35
  117. package/dist/lib/form-helper-text/form-helper-text.cjs +0 -35
  118. package/dist/lib/form-label/form-label.cjs +0 -28
  119. package/dist/lib/generic-element/generic-element.cjs +0 -15
  120. package/dist/lib/grid/cell/cell.cjs +0 -28
  121. package/dist/lib/grid/cell/helpers.cjs +0 -8
  122. package/dist/lib/grid/grid/grid.cjs +0 -53
  123. package/dist/lib/grid/grid/helpers.cjs +0 -12
  124. package/dist/lib/highlight-words/highlight-words.cjs +0 -18
  125. package/dist/lib/icon/helpers.cjs +0 -12
  126. package/dist/lib/icon/icon.cjs +0 -38
  127. package/dist/lib/icon-button/helpers.cjs +0 -42
  128. package/dist/lib/icon-button/icon-button.cjs +0 -146
  129. package/dist/lib/image/helpers.cjs +0 -15
  130. package/dist/lib/image/image.cjs +0 -36
  131. package/dist/lib/input/helpers.cjs +0 -38
  132. package/dist/lib/input/input.cjs +0 -205
  133. package/dist/lib/input/input.module.scss.cjs +0 -17
  134. package/dist/lib/input-mask/helpers.cjs +0 -12
  135. package/dist/lib/input-mask/input-mask.cjs +0 -120
  136. package/dist/lib/input-number/input-number.cjs +0 -132
  137. package/dist/lib/input-number/input-number.module.scss.cjs +0 -8
  138. package/dist/lib/input-range/helpers.cjs +0 -12
  139. package/dist/lib/input-range/input-range.cjs +0 -179
  140. package/dist/lib/input-range/input-range.module.scss.cjs +0 -8
  141. package/dist/lib/lightbox/lightbox.cjs +0 -199
  142. package/dist/lib/linear-progress/helpers.cjs +0 -13
  143. package/dist/lib/linear-progress/linear-progress.cjs +0 -75
  144. package/dist/lib/link/helpers.cjs +0 -8
  145. package/dist/lib/link/link.cjs +0 -63
  146. package/dist/lib/loading/block-skeleton/block-skeleton.cjs +0 -21
  147. package/dist/lib/loading/image-skeleton/image-skeleton.cjs +0 -43
  148. package/dist/lib/loading/loading-overlay/loading-overlay.cjs +0 -60
  149. package/dist/lib/loading/text-skeleton/text-skeleton.cjs +0 -16
  150. package/dist/lib/marquee/marquee/helpers.cjs +0 -15
  151. package/dist/lib/marquee/marquee/marquee.cjs +0 -99
  152. package/dist/lib/marquee/marquee/types.cjs +0 -7
  153. package/dist/lib/marquee/marquee-item/marquee-item.cjs +0 -16
  154. package/dist/lib/menu/menu/menu.cjs +0 -38
  155. package/dist/lib/menu/menu-item/helpers.cjs +0 -16
  156. package/dist/lib/menu/menu-item/menu-item.cjs +0 -34
  157. package/dist/lib/menu/menu-list/menu-list.cjs +0 -34
  158. package/dist/lib/menu/menu-list/types.cjs +0 -7
  159. package/dist/lib/menu/menu-trigger/menu-trigger.cjs +0 -8
  160. package/dist/lib/multiple-select/helpers.cjs +0 -12
  161. package/dist/lib/multiple-select/multiple-select.cjs +0 -348
  162. package/dist/lib/nav-link/nav-link.cjs +0 -40
  163. package/dist/lib/notifications/helpers.cjs +0 -39
  164. package/dist/lib/notifications/notifications.cjs +0 -167
  165. package/dist/lib/otp-input/otp-input.cjs +0 -132
  166. package/dist/lib/pagination/helpers.cjs +0 -57
  167. package/dist/lib/pagination/pagination.cjs +0 -163
  168. package/dist/lib/phone-input/phone-input.cjs +0 -182
  169. package/dist/lib/popover/popover/helpers.cjs +0 -7
  170. package/dist/lib/popover/popover/popover.cjs +0 -31
  171. package/dist/lib/popover/popover-close/popover-close.cjs +0 -5
  172. package/dist/lib/popover/popover-content/popover-content.cjs +0 -29
  173. package/dist/lib/popover/popover-trigger/popover-trigger.cjs +0 -8
  174. package/dist/lib/primitive/primitive.cjs +0 -30
  175. package/dist/lib/progress/progress.cjs +0 -50
  176. package/dist/lib/radio-button/helpers.cjs +0 -8
  177. package/dist/lib/radio-button/radio-button.cjs +0 -33
  178. package/dist/lib/radio-button/radio-button.module.scss.cjs +0 -17
  179. package/dist/lib/select/helpers.cjs +0 -12
  180. package/dist/lib/select/select.cjs +0 -317
  181. package/dist/lib/star-rating/star-rating.cjs +0 -39
  182. package/dist/lib/stepper/step.cjs +0 -69
  183. package/dist/lib/stepper/stepper.cjs +0 -86
  184. package/dist/lib/stepper/types.cjs +0 -8
  185. package/dist/lib/swiper/swiper/helpers.cjs +0 -16
  186. package/dist/lib/swiper/swiper/swiper.cjs +0 -113
  187. package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.cjs +0 -77
  188. package/dist/lib/swiper/swiper-slide/swiper-slide.cjs +0 -31
  189. package/dist/lib/switch/switch.cjs +0 -19
  190. package/dist/lib/switch/switch.module.scss.cjs +0 -14
  191. package/dist/lib/table/table/table.cjs +0 -26
  192. package/dist/lib/table/table-body/table-body.cjs +0 -34
  193. package/dist/lib/table/table-cell/table-cell.cjs +0 -12
  194. package/dist/lib/table/table-footer/table-footer.cjs +0 -7
  195. package/dist/lib/table/table-head/table-head.cjs +0 -33
  196. package/dist/lib/table/table-row/table-row.cjs +0 -7
  197. package/dist/lib/tabs/tab/helpers.cjs +0 -9
  198. package/dist/lib/tabs/tab/tab.cjs +0 -26
  199. package/dist/lib/tabs/tab-content/tab-content.cjs +0 -22
  200. package/dist/lib/tabs/tab-indicator/tab-indicator.cjs +0 -92
  201. package/dist/lib/tabs/tab-list/helpers.cjs +0 -8
  202. package/dist/lib/tabs/tab-list/tab-list.cjs +0 -40
  203. package/dist/lib/tabs/tab-panel/helpers.cjs +0 -8
  204. package/dist/lib/tabs/tab-panel/tab-panel.cjs +0 -21
  205. package/dist/lib/tabs/tabs/helpers.cjs +0 -36
  206. package/dist/lib/tabs/tabs/tabs.cjs +0 -62
  207. package/dist/lib/text/helpers.cjs +0 -140
  208. package/dist/lib/text/text.cjs +0 -41
  209. package/dist/lib/textarea/helpers.cjs +0 -12
  210. package/dist/lib/textarea/textarea.cjs +0 -122
  211. package/dist/lib/textarea/textarea.module.scss.cjs +0 -14
  212. package/dist/lib/time-picker/time-picker.cjs +0 -305
  213. package/dist/lib/tooltip/tooltip.cjs +0 -124
  214. package/dist/lib/trans-html/trans-html.cjs +0 -26
  215. package/dist/lib/unordered-list/list-item/helpers.cjs +0 -14
  216. package/dist/lib/unordered-list/list-item/list-item.cjs +0 -36
  217. package/dist/lib/unordered-list/unordered-list/helpers.cjs +0 -14
  218. package/dist/lib/unordered-list/unordered-list/unordered-list.cjs +0 -27
  219. package/dist/lib/video/helpers.cjs +0 -10
  220. package/dist/lib/video/video.cjs +0 -24
  221. package/dist/theme/index.cjs +0 -22
  222. package/dist/theme/palette.cjs +0 -287
  223. package/dist/theme/provider.cjs +0 -303
  224. package/dist/theme/screens.cjs +0 -24
  225. package/dist/theme/typography.cjs +0 -29
  226. package/dist/types/index.cjs +0 -1
  227. package/dist/utils/common.cjs +0 -139
  228. package/dist/utils/emotion-helpers.cjs +0 -145
  229. package/dist/utils/index.cjs +0 -233
  230. package/dist/utils/query-params.cjs +0 -130
  231. package/dist/utils/stylesheet.cjs +0 -5
@@ -1,50 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const react = require("react");
5
- require("clsx");
6
- require("lodash-es");
7
- const theme_palette = require("../../theme/palette.cjs");
8
- const stylesheet = require("../../utils/stylesheet.cjs");
9
- const Progress = react.forwardRef((props, ref) => {
10
- const { value, direction = "horizontal", activeProps = {}, className, children, ...rest } = props;
11
- const { className: activeClassName, style: activeStyle, ...activeRest } = activeProps;
12
- return /* @__PURE__ */ jsxRuntime.jsx(
13
- "div",
14
- {
15
- ...rest,
16
- ref,
17
- css: [
18
- {
19
- backgroundColor: theme_palette.getColorVar("neutral.200"),
20
- overflow: "hidden",
21
- borderRadius: "9999px"
22
- },
23
- direction === "horizontal" && { width: "100%", height: "0.5rem" },
24
- direction === "vertical" && { height: "100%", width: "0.5rem" }
25
- ],
26
- className: stylesheet.cn(className),
27
- children: /* @__PURE__ */ jsxRuntime.jsx(
28
- "div",
29
- {
30
- ...activeRest,
31
- css: [
32
- {
33
- overflow: "hidden",
34
- overflowWrap: "break-word",
35
- borderRadius: "9999px",
36
- backgroundColor: theme_palette.getColorVar("primary.600"),
37
- transition: "width 300ms ease-in-out"
38
- },
39
- direction === "horizontal" && { height: "100%" },
40
- direction === "vertical" && { width: "100%" }
41
- ],
42
- className: stylesheet.cn(activeClassName),
43
- style: { [direction === "horizontal" ? "width" : "height"]: `${value}%`, ...activeStyle },
44
- children
45
- }
46
- )
47
- }
48
- );
49
- });
50
- exports.Progress = Progress;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const utils_index = require("../../utils/index.cjs");
4
- const defaultProps = {};
5
- const getRadioButtonProps = (extended) => {
6
- return utils_index.mergeComponentProps(defaultProps, extended);
7
- };
8
- exports.getRadioButtonProps = getRadioButtonProps;
@@ -1,33 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const react = require("react");
5
- const helpers = require("./helpers.cjs");
6
- const radioButton_module = require("./radio-button.module.scss.cjs");
7
- const utils_index = require("../../utils/index.cjs");
8
- const stylesheet = require("../../utils/stylesheet.cjs");
9
- const RadioButton = react.forwardRef((_props, ref) => {
10
- const { children, color = "primary", className, containerProps, ...props } = helpers.getRadioButtonProps(_props);
11
- const { main } = utils_index.getColorShadesByVariant(color);
12
- return /* @__PURE__ */ jsxRuntime.jsxs(
13
- "label",
14
- {
15
- ...containerProps,
16
- css: [
17
- {
18
- "--radio-button-color": main
19
- },
20
- containerProps == null ? void 0 : containerProps.css
21
- ],
22
- className: stylesheet.cn(radioButton_module.default.radio_button__container, containerProps == null ? void 0 : containerProps.className),
23
- children: [
24
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: radioButton_module.default.radio_button__main, children: [
25
- /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, className: stylesheet.cn(radioButton_module.default.radio_button__input, className), type: "radio", ref }),
26
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: radioButton_module.default.radio_button__checkmark })
27
- ] }),
28
- children
29
- ]
30
- }
31
- );
32
- });
33
- exports.RadioButton = RadioButton;
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const radio_button__container = "_radio_button__container_10dls_1";
4
- const radio_button__input = "_radio_button__input_10dls_10";
5
- const radio_button__checkmark = "_radio_button__checkmark_10dls_21";
6
- const radio_button__main = "_radio_button__main_10dls_25";
7
- const classes = {
8
- radio_button__container,
9
- radio_button__input,
10
- radio_button__checkmark,
11
- radio_button__main
12
- };
13
- exports.default = classes;
14
- exports.radio_button__checkmark = radio_button__checkmark;
15
- exports.radio_button__container = radio_button__container;
16
- exports.radio_button__input = radio_button__input;
17
- exports.radio_button__main = radio_button__main;
@@ -1,12 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const utils_index = require("../../utils/index.cjs");
4
- const defaultProps = {
5
- xs: {
6
- size: "md"
7
- }
8
- };
9
- const getSelectProps = (extended) => {
10
- return utils_index.mergeComponentProps(defaultProps, extended);
11
- };
12
- exports.getSelectProps = getSelectProps;
@@ -1,317 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const react = require("react");
5
- const lodashEs = require("lodash-es");
6
- const helpers = require("./helpers.cjs");
7
- const svgLoader = require("../../components/svg-loader.cjs");
8
- const virtualizedList = require("../../components/virtualized-list.cjs");
9
- const index = require("../../hooks/use-window-screen/index.cjs");
10
- const useControllableState = require("../../hooks/use-controllable-state.cjs");
11
- const utils_index = require("../../utils/index.cjs");
12
- const arrowDown = require("../../assets/svg/arrow-down.svg.cjs");
13
- const doneCheck = require("../../assets/svg/done-check.svg.cjs");
14
- const theme_palette = require("../../theme/palette.cjs");
15
- const theme_typography = require("../../theme/typography.cjs");
16
- const common = require("../../utils/common.cjs");
17
- const floating = require("../floating/floating/floating.cjs");
18
- const floatingTrigger = require("../floating/floating-trigger/floating-trigger.cjs");
19
- const inputMask = require("../input-mask/input-mask.cjs");
20
- const floatingContent = require("../floating/floating-content/floating-content.cjs");
21
- const input = require("../input/input.cjs");
22
- const formHelperText = require("../form-helper-text/form-helper-text.cjs");
23
- const DEFAULT_DISPLAY_ROW_COUNT = 5;
24
- const Select = ({
25
- ref,
26
- ...props
27
- }) => {
28
- var _a, _b, _c, _d, _e;
29
- const {
30
- placement = "bottom-start",
31
- open,
32
- onOpenChange,
33
- searchable = true,
34
- value,
35
- optionValue,
36
- optionLabel,
37
- defaultValue,
38
- options,
39
- onChange,
40
- placeholder,
41
- listProps,
42
- selectedRenderer,
43
- optionSearchLabel,
44
- helperText,
45
- error,
46
- containerProps,
47
- inputProps,
48
- fullWidth = true,
49
- lazy = true,
50
- ...rest
51
- } = helpers.getSelectProps(props);
52
- const searchInputRef = react.useRef(null);
53
- const floatingRef = react.useRef(null);
54
- const uniqueId = react.useId();
55
- const [inputValue, setInputValue] = useControllableState.useControllableState({
56
- defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
57
- value: inputProps == null ? void 0 : inputProps.value
58
- });
59
- const windowScreen = index.useWindowScreen();
60
- const [isOpen, setIsOpen] = useControllableState.useControllableState({
61
- defaultValue: open ?? false,
62
- value: open
63
- });
64
- const prehandleOpenChange = (nextOpen, event, reason) => {
65
- setIsOpen(nextOpen);
66
- onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
67
- };
68
- const [selectedValue, setSelectedValue] = useControllableState.useControllableState({
69
- defaultValue,
70
- value
71
- });
72
- const getOptionValue = react.useCallback(
73
- (option) => {
74
- return typeof optionValue === "function" ? optionValue(option) : lodashEs.get(option, optionValue ?? "value");
75
- },
76
- [optionValue]
77
- );
78
- const getOptionLabel = react.useCallback(
79
- (option) => {
80
- return typeof optionLabel === "function" ? optionLabel(option) : lodashEs.get(option, optionLabel ?? "label");
81
- },
82
- [optionLabel]
83
- );
84
- const handleChange = (row) => {
85
- var _a2, _b2, _c2;
86
- const rowValue = getOptionValue(row);
87
- setSelectedValue(rowValue);
88
- onChange == null ? void 0 : onChange(rowValue, row);
89
- (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
90
- };
91
- const selectedOption = react.useMemo(
92
- () => options.find((option) => selectedValue === getOptionValue(option)),
93
- [getOptionValue, options, selectedValue]
94
- );
95
- const responsiveSize = lodashEs.isNil(windowScreen.name) ? void 0 : utils_index.getResponsiveProp(rest, "size", windowScreen.name);
96
- const rowMinHeight = utils_index.getSizeVariantState(responsiveSize).inputSize ?? 0;
97
- const displayOptions = react.useMemo(() => {
98
- if (!inputValue) {
99
- return options;
100
- }
101
- return options.filter((option) => {
102
- let searchLabels = [String(getOptionLabel(option))];
103
- switch (typeof optionSearchLabel) {
104
- case "function":
105
- searchLabels = common.ensureArray(optionSearchLabel(option));
106
- break;
107
- case "string":
108
- searchLabels = common.ensureArray(String(lodashEs.get(option, optionSearchLabel)));
109
- break;
110
- case "object":
111
- searchLabels = optionSearchLabel.map((label) => String(lodashEs.get(option, label)));
112
- break;
113
- }
114
- return common.matchSearch(searchLabels, inputValue);
115
- });
116
- }, [getOptionLabel, inputValue, optionSearchLabel, options]);
117
- const RowComponent = ({ row }) => {
118
- const rowData = displayOptions.at(row.index);
119
- if (lodashEs.isNil(rowData)) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
120
- const rowValue = getOptionValue(rowData);
121
- const isSelected = selectedValue === rowValue;
122
- const onClick = (_e2) => {
123
- var _a2, _b2, _c2;
124
- if (isSelected) {
125
- (_c2 = (_a2 = floatingRef.current) == null ? void 0 : (_b2 = _a2.context).onOpenChange) == null ? void 0 : _c2.call(_b2, false);
126
- return;
127
- }
128
- handleChange(rowData);
129
- };
130
- return /* @__PURE__ */ jsxRuntime.jsxs(
131
- "div",
132
- {
133
- onClick,
134
- "aria-hidden": true,
135
- "data-option-value": rowValue,
136
- css: {
137
- minHeight: rowMinHeight,
138
- paddingTop: 2,
139
- paddingBottom: 2,
140
- paddingLeft: 12,
141
- paddingRight: 12,
142
- display: "flex",
143
- alignItems: "center",
144
- gap: 8,
145
- cursor: "pointer",
146
- borderRadius: 8,
147
- ":hover": { backgroundColor: theme_palette.getColorVar("neutral.100") },
148
- ...isSelected ? {
149
- color: theme_palette.getColorVar("primary.600"),
150
- backgroundColor: theme_palette.getColorVar("primary.100"),
151
- ":hover": { backgroundColor: theme_palette.getColorVar("primary.100") }
152
- } : {}
153
- },
154
- children: [
155
- /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: getOptionLabel(rowData) }),
156
- isSelected && /* @__PURE__ */ jsxRuntime.jsx(svgLoader.SvgLoader, { source: doneCheck, width: 24, height: 24, css: { color: theme_palette.getColorVar("primary.600") } })
157
- ]
158
- }
159
- );
160
- };
161
- const sizeOptions = {
162
- apply({ elements }) {
163
- const { width } = elements.reference.getBoundingClientRect();
164
- Object.assign(elements.floating.style, {
165
- minWidth: `${width}px`
166
- });
167
- }
168
- };
169
- const estimateSize = react.useCallback(
170
- (_index) => {
171
- return rowMinHeight ?? 0;
172
- },
173
- [rowMinHeight]
174
- );
175
- const getItemKey = react.useCallback(
176
- (index2) => {
177
- const option = displayOptions.at(index2);
178
- return option ? getOptionValue(option).toString() : `${uniqueId}-${index2}`;
179
- },
180
- [displayOptions, getOptionValue, uniqueId]
181
- );
182
- const getTextCss = (sizeVariant) => {
183
- if (lodashEs.isNil(sizeVariant)) return {};
184
- const { textVariant } = utils_index.getSizeVariantState(sizeVariant);
185
- if (lodashEs.isNil(textVariant)) return {};
186
- return theme_typography.getTypographyVar(textVariant);
187
- };
188
- const onInputChange = (e) => {
189
- var _a2;
190
- e.target.value = lodashEs.trimStart(e.target.value);
191
- setInputValue(e.target.value);
192
- (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
193
- };
194
- react.useEffect(() => {
195
- const timer = setTimeout(() => {
196
- var _a2;
197
- if (isOpen) {
198
- (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
199
- } else {
200
- setInputValue("");
201
- }
202
- }, 100);
203
- return () => clearTimeout(timer);
204
- }, [isOpen, setInputValue]);
205
- return /* @__PURE__ */ jsxRuntime.jsxs(
206
- "div",
207
- {
208
- ...containerProps,
209
- css: {
210
- display: "flex",
211
- flexDirection: "column",
212
- ...fullWidth ? { width: "100%" } : {},
213
- ...containerProps == null ? void 0 : containerProps.css
214
- },
215
- children: [
216
- /* @__PURE__ */ jsxRuntime.jsxs(
217
- floating.Floating,
218
- {
219
- clickProps: {
220
- enabled: true
221
- },
222
- dismissProps: {
223
- enabled: true
224
- },
225
- sizeOptions,
226
- placement,
227
- open: isOpen,
228
- onOpenChange: prehandleOpenChange,
229
- ref: floatingRef,
230
- children: [
231
- /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
232
- inputMask.InputMask,
233
- {
234
- type: "button",
235
- error: isOpen ? false : error,
236
- element: "button",
237
- suffix: /* @__PURE__ */ jsxRuntime.jsx(
238
- svgLoader.SvgLoader,
239
- {
240
- source: arrowDown,
241
- width: 20,
242
- height: 20,
243
- css: {
244
- transition: "transform 150ms",
245
- ...isOpen ? { transform: "rotate(-180deg)" } : {}
246
- }
247
- }
248
- ),
249
- ...rest,
250
- css: [
251
- {
252
- ":hover": { outlineColor: theme_palette.getColorVar("primary.300") }
253
- },
254
- isOpen && { outlineColor: theme_palette.getColorVar("primary.600") },
255
- rest.disabled && {
256
- cursor: "not-allowed",
257
- pointerEvents: "none",
258
- backgroundColor: theme_palette.getColorVar("neutral.200")
259
- },
260
- rest.css
261
- ],
262
- ref,
263
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: [{ flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, getTextCss((_a = rest.xs) == null ? void 0 : _a.size)], children: selectedOption ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedRenderer ? selectedRenderer(selectedOption) : getOptionLabel(selectedOption) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("neutral.400"), display: "block" }, children: placeholder }) })
264
- }
265
- ) }),
266
- /* @__PURE__ */ jsxRuntime.jsx(floatingContent.FloatingContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: {
267
- paddingTop: 8,
268
- paddingBottom: 8,
269
- border: "1px solid",
270
- borderColor: theme_palette.getColorVar("border.default"),
271
- borderRadius: 8,
272
- boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
273
- fontSize: "0.875rem",
274
- lineHeight: "1.25rem",
275
- backgroundColor: theme_palette.getColorVar("surface.default")
276
- }, children: [
277
- searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { paddingLeft: 8, paddingRight: 8, paddingBottom: 12, position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(
278
- input.Input,
279
- {
280
- xs: { size: (_b = rest.xs) == null ? void 0 : _b.size },
281
- sm: { size: (_c = rest.sm) == null ? void 0 : _c.size },
282
- md: { size: (_d = rest.md) == null ? void 0 : _d.size },
283
- lg: { size: (_e = rest.lg) == null ? void 0 : _e.size },
284
- value: inputValue,
285
- ...inputProps,
286
- onChange: onInputChange,
287
- ref: searchInputRef
288
- }
289
- ) }),
290
- /* @__PURE__ */ jsxRuntime.jsx(
291
- virtualizedList.VirtualizedList,
292
- {
293
- ...listProps,
294
- css: { paddingLeft: 4, paddingRight: 4 },
295
- options: {
296
- count: displayOptions.length,
297
- estimateSize,
298
- getItemKey,
299
- overscan: lazy ? void 0 : options.length
300
- },
301
- style: {
302
- maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
303
- ...listProps == null ? void 0 : listProps.style
304
- },
305
- RowComponent
306
- }
307
- )
308
- ] }) })
309
- ]
310
- }
311
- ),
312
- /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
313
- ]
314
- }
315
- );
316
- };
317
- exports.Select = Select;
@@ -1,39 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const react = require("react");
5
- const utils_index = require("../../utils/index.cjs");
6
- const StarRating = react.forwardRef(
7
- ({ rating, maxRating = 5, size = 24, colorVariant = "secondary" }, ref) => {
8
- const id = react.useId();
9
- const percent = rating / maxRating * 24;
10
- const { main } = utils_index.getColorShadesByVariant(colorVariant);
11
- return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ref, children: [
12
- /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: percent, height: 24 }) }) }),
13
- /* @__PURE__ */ jsxRuntime.jsx(
14
- "path",
15
- {
16
- d: "M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z",
17
- fill: "white",
18
- stroke: main,
19
- strokeWidth: "1.5",
20
- strokeLinecap: "round",
21
- strokeLinejoin: "round"
22
- }
23
- ),
24
- /* @__PURE__ */ jsxRuntime.jsx(
25
- "path",
26
- {
27
- d: "M12 2.89648L14.935 8.88948L21.5 9.85648L16.75 14.5185L17.871 21.1045L12 17.9935L6.129 21.1045L7.25 14.5185L2.5 9.85648L9.064 8.88948L12 2.89648Z",
28
- fill: main,
29
- clipPath: `url(#${id})`,
30
- strokeLinecap: "round",
31
- strokeLinejoin: "round",
32
- strokeWidth: "1.5",
33
- stroke: main
34
- }
35
- )
36
- ] });
37
- }
38
- );
39
- exports.StarRating = StarRating;
@@ -1,69 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const react = require("react");
5
- require("lodash-es");
6
- const theme_palette = require("../../theme/palette.cjs");
7
- const check = require("../../assets/svg/check.svg.cjs");
8
- const icon = require("../icon/icon.cjs");
9
- const stateStyles = {
10
- done: {
11
- text: { color: theme_palette.getColorVar("white") },
12
- bg: {
13
- borderColor: theme_palette.getColorVar("primary.600"),
14
- backgroundColor: theme_palette.getColorVar("primary.600"),
15
- color: theme_palette.getColorVar("white")
16
- }
17
- },
18
- active: {
19
- text: { color: theme_palette.getColorVar("primary.600") },
20
- bg: {
21
- borderColor: theme_palette.getColorVar("primary.600"),
22
- backgroundColor: theme_palette.getColorVar("white"),
23
- color: theme_palette.getColorVar("primary.600")
24
- }
25
- },
26
- normal: {
27
- text: { color: theme_palette.getColorVar("white") },
28
- bg: {
29
- borderColor: theme_palette.getColorVar("neutral.500"),
30
- backgroundColor: theme_palette.getColorVar("neutral.500"),
31
- color: theme_palette.getColorVar("white")
32
- }
33
- }
34
- };
35
- const Step = react.forwardRef((props, ref) => {
36
- const { state = "normal", content, className, size = 32, children, ...rest } = props;
37
- const styles = stateStyles[state] ?? stateStyles.normal;
38
- const checked = state === "done";
39
- return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
40
- "div",
41
- {
42
- style: { width: `${size}px`, height: `${size}px` },
43
- ref,
44
- css: {
45
- borderRadius: "50%",
46
- display: "flex",
47
- alignItems: "center",
48
- justifyContent: "center",
49
- borderWidth: 2,
50
- borderStyle: "solid",
51
- transition: "border 500ms, background 500ms, color 500ms",
52
- zIndex: 1,
53
- ...styles.bg
54
- },
55
- ...rest,
56
- children: [
57
- /* @__PURE__ */ jsxRuntime.jsx("p", { css: {
58
- ...styles.text,
59
- display: "-webkit-box",
60
- WebkitLineClamp: 2,
61
- WebkitBoxOrient: "vertical",
62
- overflow: "hidden"
63
- }, children: checked ? /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { source: check }) : children }),
64
- content
65
- ]
66
- }
67
- ) });
68
- });
69
- exports.Step = Step;
@@ -1,86 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const react = require("react");
5
- const step = require("./step.cjs");
6
- const progress = require("../progress/progress.cjs");
7
- const maxPercent = 100;
8
- const Stepper = react.forwardRef((props, ref) => {
9
- const { direction = "horizontal", className, items, activeIndex = 0, circleSize = 32, ...rest } = props;
10
- const value = maxPercent / (items.length - 1) * activeIndex;
11
- const progressBarSize = `${(items.length - 1) / items.length * 100}%`;
12
- const progressBarStyles = {
13
- horizontal: {
14
- top: `${circleSize / 2}px`,
15
- width: progressBarSize
16
- },
17
- vertical: {
18
- left: `${circleSize / 2}px`,
19
- height: progressBarSize
20
- }
21
- };
22
- const renderItems = () => {
23
- return items.map((item, index) => {
24
- const { children, description, ...itemRest } = item;
25
- const getState = () => {
26
- if (index < activeIndex) {
27
- return "done";
28
- }
29
- if (index === activeIndex) {
30
- return "active";
31
- }
32
- if (index > activeIndex) {
33
- return "normal";
34
- }
35
- };
36
- return /* @__PURE__ */ jsxRuntime.jsxs(
37
- "li",
38
- {
39
- css: {
40
- flex: 1,
41
- display: "flex",
42
- gap: 16,
43
- ...direction === "vertical" ? { flexDirection: "row", alignItems: "center" } : { flexDirection: "column", alignItems: "center", justifyContent: "space-between" }
44
- },
45
- children: [
46
- /* @__PURE__ */ jsxRuntime.jsx(step.Step, { size: circleSize, state: getState(), ...itemRest, children: children ?? index + 1 }),
47
- !!description && /* @__PURE__ */ jsxRuntime.jsx("div", { children: description })
48
- ]
49
- },
50
- index
51
- );
52
- });
53
- };
54
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { position: "relative" }, children: [
55
- /* @__PURE__ */ jsxRuntime.jsx(
56
- progress.Progress,
57
- {
58
- ref,
59
- css: {
60
- position: "absolute",
61
- zIndex: -1,
62
- width: "100%",
63
- ...direction === "horizontal" ? { height: 4, left: "50%", transform: "translateX(-50%) translateY(-50%)" } : { width: 4, top: "50%", transform: "translateY(-50%) translateX(-50%)" }
64
- },
65
- style: progressBarStyles[direction],
66
- value,
67
- direction,
68
- ...rest
69
- }
70
- ),
71
- /* @__PURE__ */ jsxRuntime.jsx(
72
- "ul",
73
- {
74
- css: {
75
- display: "flex",
76
- width: "100%",
77
- height: "100%",
78
- gap: 12,
79
- ...direction === "horizontal" ? { flexDirection: "row", justifyContent: "space-between" } : { flexDirection: "column", justifyContent: "space-between" }
80
- },
81
- children: renderItems()
82
- }
83
- )
84
- ] });
85
- });
86
- exports.Stepper = Stepper;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const states = {
4
- done: "done",
5
- active: "active",
6
- normal: "normal"
7
- };
8
- exports.states = states;
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const utils_index = require("../../../utils/index.cjs");
4
- const defaultProps = {
5
- autoplayOptions: {
6
- active: false,
7
- delay: 3e3,
8
- stopOnFocusIn: false,
9
- stopOnInteraction: false,
10
- stopOnLastSnap: false
11
- }
12
- };
13
- const getSwiperProps = (extended) => {
14
- return utils_index.mergeComponentProps(defaultProps, extended);
15
- };
16
- exports.getSwiperProps = getSwiperProps;