1mpacto-react-ui 0.2.0-beta.9 → 1.0.1

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 (214) hide show
  1. package/dist/assets/_colors.scss +80 -0
  2. package/dist/assets/_mixins.scss +32 -5
  3. package/dist/assets/_typography.scss +582 -0
  4. package/dist/assets/colors.css +40 -0
  5. package/dist/assets/core.css +1 -1
  6. package/dist/assets/fontfamily.css +1 -1
  7. package/dist/assets/fonts/PlusJakartaSans-Italic.ttf +0 -0
  8. package/dist/assets/fonts/PlusJakartaSans.ttf +0 -0
  9. package/dist/assets/style.css +1 -1
  10. package/dist/assets/toast.css +98 -194
  11. package/dist/assets/typography.css +96 -0
  12. package/dist/index.cjs +120 -117
  13. package/dist/index.d.ts +1 -0
  14. package/dist/index.mjs +27703 -27059
  15. package/dist/package.json.d.ts +46 -47
  16. package/dist/src/components/Alert/index.d.ts +1 -0
  17. package/dist/src/components/Badges/Badges.config.d.ts +57 -0
  18. package/dist/src/components/Badges/Badges.d.ts +1 -0
  19. package/dist/src/components/Badges/Badges.stories.d.ts +117 -2
  20. package/dist/src/components/Breadcrumbs/Breadcrumbs.config.d.ts +113 -0
  21. package/dist/src/components/Breadcrumbs/Breadcrumbs.d.ts +2 -1
  22. package/dist/src/components/Breadcrumbs/Breadcrumbs.stories.d.ts +221 -6
  23. package/dist/src/components/Button/Button.config.d.ts +70 -0
  24. package/dist/src/components/Button/Button.d.ts +1 -0
  25. package/dist/src/components/Button/Button.stories.d.ts +129 -4
  26. package/dist/src/components/ButtonIcon/ButtonIcon.config.d.ts +53 -0
  27. package/dist/src/components/ButtonIcon/ButtonIcon.d.ts +1 -0
  28. package/dist/src/components/ButtonIcon/ButtonIcon.stories.d.ts +123 -4
  29. package/dist/src/components/ButtonPopover/ButtonPopover.d.ts +1 -0
  30. package/dist/src/components/ButtonPopover/ButtonPopover.stories.d.ts +258 -2
  31. package/dist/src/components/Calendar/Calendar.d.ts +3 -1
  32. package/dist/src/components/Calendar/Calendar.stories.d.ts +283 -2
  33. package/dist/src/components/Calendar/CalendarButton.d.ts +1 -0
  34. package/dist/src/components/Calendar/CalendarCell.d.ts +1 -0
  35. package/dist/src/components/Calendar/CalendarMonth.d.ts +1 -0
  36. package/dist/src/components/Calendar/CalendarRange.d.ts +1 -0
  37. package/dist/src/components/Calendar/CalendarYear.d.ts +1 -0
  38. package/dist/src/components/Chart/DoughnutChart.d.ts +1 -0
  39. package/dist/src/components/Chart/GradientBarChart.d.ts +1 -0
  40. package/dist/src/components/Chart/GradientBarChart.stories.d.ts +71 -4
  41. package/dist/src/components/Chart/GradientLineChart.d.ts +1 -0
  42. package/dist/src/components/Chart/GradientLineChart.stories.d.ts +82 -4
  43. package/dist/src/components/Chart/LineChart.d.ts +1 -0
  44. package/dist/src/components/Chart/LineChart.stories.d.ts +35 -2
  45. package/dist/src/components/Chips/Chips.config.d.ts +35 -0
  46. package/dist/src/components/Chips/Chips.d.ts +1 -0
  47. package/dist/src/components/Chips/Chips.stories.d.ts +137 -2
  48. package/dist/src/components/Collapse/Collapse.d.ts +1 -0
  49. package/dist/src/components/Collapse/Collapse.stories.d.ts +89 -2
  50. package/dist/src/components/Collapse/CollapseV2.d.ts +1 -0
  51. package/dist/src/components/Collapse/CollapseV2.stories.d.ts +59 -2
  52. package/dist/src/components/Colors/Colors.stories.d.ts +2 -1
  53. package/dist/src/components/DatePicker/DatePicker.d.ts +1 -0
  54. package/dist/src/components/DatePicker/DatePicker.stories.d.ts +221 -2
  55. package/dist/src/components/DatePicker/DateRangePicker.d.ts +1 -0
  56. package/dist/src/components/DatePicker/FilterDate.d.ts +2 -1
  57. package/dist/src/components/DatePicker/FilterDate.stories.d.ts +232 -3
  58. package/dist/src/components/DatePicker/MonthYearPicker.d.ts +1 -0
  59. package/dist/src/components/DatePicker/MonthYearPicker.stories.d.ts +198 -2
  60. package/dist/src/components/ErrorMessage/ErrorMessage.config.d.ts +8 -0
  61. package/dist/src/components/ErrorMessage/ErrorMessage.d.ts +1 -0
  62. package/dist/src/components/ErrorMessage/ErrorMessage.stories.d.ts +39 -2
  63. package/dist/src/components/FilterContainer/FilterContainer.d.ts +1 -0
  64. package/dist/src/components/FilterContainer/FilterContainer.stories.d.ts +165 -0
  65. package/dist/src/components/Input/InputFloatingInner.config.d.ts +9 -0
  66. package/dist/src/components/Input/InputFloatingInner.d.ts +1 -0
  67. package/dist/src/components/Input/InputFloatingInner.stories.d.ts +177 -6
  68. package/dist/src/components/Input/InputInnerLabel.config.d.ts +8 -0
  69. package/dist/src/components/Input/InputInnerLabel.d.ts +5 -0
  70. package/dist/src/components/Input/InputInnerLabel.stories.d.ts +205 -0
  71. package/dist/src/components/Input/InputNative.config.d.ts +9 -0
  72. package/dist/src/components/Input/InputNative.d.ts +1 -0
  73. package/dist/src/components/Input/InputNative.stories.d.ts +149 -5
  74. package/dist/src/components/Input/InputReguler.config.d.ts +9 -0
  75. package/dist/src/components/Input/InputReguler.d.ts +1 -0
  76. package/dist/src/components/Input/InputReguler.stories.d.ts +177 -6
  77. package/dist/src/components/Modal/ModalDialog.config.d.ts +9 -0
  78. package/dist/src/components/Modal/ModalDialog.d.ts +1 -0
  79. package/dist/src/components/Modal/ModalDialog.stories.d.ts +121 -2
  80. package/dist/src/components/NumberFormat/NumberFormat.d.ts +1 -0
  81. package/dist/src/components/NumberFormat/NumberFormat.stories.d.ts +373 -18
  82. package/dist/src/components/Pagination/Pagination.config.d.ts +5 -0
  83. package/dist/src/components/Pagination/Pagination.d.ts +2 -1
  84. package/dist/src/components/Pagination/Pagination.stories.d.ts +200 -3
  85. package/dist/src/components/Popover/Popover.d.ts +1 -0
  86. package/dist/src/components/Popover/Popover.stories.d.ts +216 -7
  87. package/dist/src/components/PortalComponent/PortalComponent.d.ts +1 -0
  88. package/dist/src/components/PortalComponent/PortalComponent.stories.d.ts +61 -0
  89. package/dist/src/components/RadioCheckbox/CheckboxTable.d.ts +1 -0
  90. package/dist/src/components/RadioCheckbox/RadioCheckbox.config.d.ts +41 -0
  91. package/dist/src/components/RadioCheckbox/RadioCheckbox.d.ts +1 -0
  92. package/dist/src/components/RadioCheckbox/RadioCheckbox.stories.d.ts +230 -8
  93. package/dist/src/components/RadioCheckbox/RadioCheckboxLabel.config.d.ts +25 -0
  94. package/dist/src/components/RadioCheckbox/RadioCheckboxLabel.d.ts +1 -0
  95. package/dist/src/components/RadioCheckbox/RadioCheckboxLabel.stories.d.ts +196 -4
  96. package/dist/src/components/SelectDropdownContainer/SelectDropdownContainer.config.d.ts +26 -0
  97. package/dist/src/components/SelectDropdownContainer/SelectDropdownContainer.d.ts +2 -1
  98. package/dist/src/components/SelectDropdownContainer/SelectDropdownContainer.stories.d.ts +5 -4
  99. package/dist/src/components/SelectDropdownContainer/styleConfig.d.ts +5 -1
  100. package/dist/src/components/Sidebar/ItemSidebar.config.d.ts +34 -0
  101. package/dist/src/components/Sidebar/ItemSidebar.d.ts +1 -0
  102. package/dist/src/components/Sidebar/Sidebar.config.d.ts +16 -0
  103. package/dist/src/components/Sidebar/Sidebar.d.ts +2 -1
  104. package/dist/src/components/Sidebar/Sidebar.stories.d.ts +6 -5
  105. package/dist/src/components/Step/Step.d.ts +1 -0
  106. package/dist/src/components/Step/Step.stories.d.ts +135 -2
  107. package/dist/src/components/Step/StepIndicator.d.ts +1 -0
  108. package/dist/src/components/Step/StepIndicator.stories.d.ts +148 -2
  109. package/dist/src/components/Switch/Switch.config.d.ts +26 -0
  110. package/dist/src/components/Switch/Switch.d.ts +1 -0
  111. package/dist/src/components/Switch/Switch.stories.d.ts +128 -2
  112. package/dist/src/components/Table/Table.config.d.ts +5 -0
  113. package/dist/src/components/Table/Table.d.ts +3 -3
  114. package/dist/src/components/Table/Table.stories.d.ts +71 -52
  115. package/dist/src/components/Table/TableSubMobile.d.ts +4 -0
  116. package/dist/src/components/Tabs/TabPanel.d.ts +1 -0
  117. package/dist/src/components/Tabs/Tabs.config.d.ts +31 -0
  118. package/dist/src/components/Tabs/Tabs.d.ts +2 -1
  119. package/dist/src/components/Tabs/Tabs.stories.d.ts +220 -3
  120. package/dist/src/components/TextEditor/TextEditor.d.ts +1 -0
  121. package/dist/src/components/TextEditor/TextEditor.stories.d.ts +59 -10
  122. package/dist/src/components/Textarea/Textarea.config.d.ts +31 -0
  123. package/dist/src/components/Textarea/Textarea.d.ts +1 -0
  124. package/dist/src/components/Textarea/Textarea.stories.d.ts +250 -3
  125. package/dist/src/components/Textarea/TextareaFloatingInner.config.d.ts +6 -0
  126. package/dist/src/components/Textarea/TextareaFloatingInner.d.ts +1 -0
  127. package/dist/src/components/Textarea/TextareaFloatingInner.stories.d.ts +260 -3
  128. package/dist/src/components/Textarea/TextareaInnerLabel.config.d.ts +7 -0
  129. package/dist/src/components/Textarea/TextareaInnerLabel.d.ts +5 -0
  130. package/dist/src/components/Textarea/TextareaInnerLabel.stories.d.ts +259 -0
  131. package/dist/src/components/TimeRange/TimeRange.d.ts +4 -0
  132. package/dist/src/components/TimeRange/TimeRange.stories.d.ts +186 -0
  133. package/dist/src/components/Timeline/Timeline.d.ts +1 -0
  134. package/dist/src/components/Timeline/Timeline.stories.d.ts +40 -2
  135. package/dist/src/components/Tooltip/Tooltip.d.ts +1 -0
  136. package/dist/src/components/Tooltip/Tooltip.stories.d.ts +159 -2
  137. package/dist/src/components/TruncateComponent/TruncateComponent.d.ts +1 -0
  138. package/dist/src/components/TruncateComponent/TruncateComponent.stories.d.ts +106 -2
  139. package/dist/src/components/Typography/Typography.stories.d.ts +2 -1
  140. package/dist/src/components/Upload/UploadFile.d.ts +1 -0
  141. package/dist/src/components/Upload/UploadFile.stories.d.ts +127 -2
  142. package/dist/src/components/Upload/UploadImage.d.ts +2 -1
  143. package/dist/src/components/Upload/UploadImage.stories.d.ts +145 -3
  144. package/dist/src/components/Upload/UploadMultipleFile.d.ts +2 -1
  145. package/dist/src/components/Upload/UploadMultipleFile.stories.d.ts +190 -3
  146. package/dist/src/components/Virtualization/ListVirtualization.d.ts +1 -0
  147. package/dist/src/components/Virtualization/ListVirtualization.stories.d.ts +279 -2
  148. package/dist/src/components/Virtualization/TableVirtualization.d.ts +1 -0
  149. package/dist/src/components/Virtualization/TableVirtualization.stories.d.ts +296 -2
  150. package/dist/src/components/index.d.ts +15 -8
  151. package/dist/src/components/screens/Screens.stories.d.ts +14 -0
  152. package/dist/src/config/bigNumber/index.d.ts +1 -0
  153. package/dist/src/config/components/borderRadius.d.ts +1 -0
  154. package/dist/src/config/components/font.d.ts +7 -0
  155. package/dist/src/config/components/gap.d.ts +1 -0
  156. package/dist/src/config/components/tinymce.d.ts +1 -0
  157. package/dist/src/config/components/typography.d.ts +3 -49
  158. package/dist/src/config/tailwind/index.d.ts +3 -1
  159. package/dist/src/config/tailwind/nativeScreen.d.ts +3 -0
  160. package/dist/src/config/tailwind/typography.d.ts +1 -0
  161. package/dist/src/hooks/index.d.ts +6 -3
  162. package/dist/src/hooks/useAsyncDebounce.d.ts +9 -0
  163. package/dist/src/hooks/useCombinedResizeObserver.d.ts +67 -0
  164. package/dist/src/hooks/useCountdown.d.ts +67 -3
  165. package/dist/src/hooks/useDeepCompareEffect.d.ts +14 -0
  166. package/dist/src/hooks/useElementOrWindowMediaQuery.d.ts +9 -0
  167. package/dist/src/hooks/useEventListener.d.ts +28 -0
  168. package/dist/src/hooks/useMasonry.d.ts +80 -0
  169. package/dist/src/hooks/useMergeRefs.d.ts +27 -0
  170. package/dist/src/hooks/useOtpInput.d.ts +200 -0
  171. package/dist/src/hooks/useStateRef.d.ts +9 -0
  172. package/dist/src/interfaces/components/Alert/index.d.ts +9 -0
  173. package/dist/src/interfaces/components/Badges/index.d.ts +31 -1
  174. package/dist/src/interfaces/components/Breadcrumbs/index.d.ts +86 -2
  175. package/dist/src/interfaces/components/Button/index.d.ts +47 -2
  176. package/dist/src/interfaces/components/ButtonIcon/index.d.ts +37 -0
  177. package/dist/src/interfaces/components/ButtonPopover/index.d.ts +79 -0
  178. package/dist/src/interfaces/components/Calendar/index.d.ts +385 -3
  179. package/dist/src/interfaces/components/Chart/index.d.ts +461 -0
  180. package/dist/src/interfaces/components/Checkbox/index.d.ts +13 -0
  181. package/dist/src/interfaces/components/Chips/index.d.ts +39 -1
  182. package/dist/src/interfaces/components/Collapse/index.d.ts +61 -0
  183. package/dist/src/interfaces/components/DatePicker/index.d.ts +278 -1
  184. package/dist/src/interfaces/components/ErrorMessage/index.d.ts +17 -1
  185. package/dist/src/interfaces/components/FilterContainer/index.d.ts +103 -0
  186. package/dist/src/interfaces/components/Input/index.d.ts +194 -0
  187. package/dist/src/interfaces/components/Modal/index.d.ts +46 -0
  188. package/dist/src/interfaces/components/NumberFormat/index.d.ts +26 -0
  189. package/dist/src/interfaces/components/Pagination/index.d.ts +84 -0
  190. package/dist/src/interfaces/components/Popover/index.d.ts +99 -1
  191. package/dist/src/interfaces/components/RadioCheckbox/RadioCheckbox.d.ts +60 -2
  192. package/dist/src/interfaces/components/RadioCheckbox/RadioCheckboxLabel.d.ts +47 -1
  193. package/dist/src/interfaces/components/SelectDropdownContainer/index.d.ts +197 -2
  194. package/dist/src/interfaces/components/Sidebar/index.d.ts +230 -1
  195. package/dist/src/interfaces/components/Step/index.d.ts +154 -0
  196. package/dist/src/interfaces/components/Switch/index.d.ts +54 -1
  197. package/dist/src/interfaces/components/Table/index.d.ts +403 -6
  198. package/dist/src/interfaces/components/Tabs/index.d.ts +131 -1
  199. package/dist/src/interfaces/components/TextEditor/index.d.ts +13 -0
  200. package/dist/src/interfaces/components/Textarea/index.d.ts +170 -0
  201. package/dist/src/interfaces/components/TimeRange/index.d.ts +129 -0
  202. package/dist/src/interfaces/components/Timeline/index.d.ts +37 -0
  203. package/dist/src/interfaces/components/Tooltip/index.d.ts +57 -0
  204. package/dist/src/interfaces/components/TruncateComponent/index.d.ts +34 -0
  205. package/dist/src/interfaces/components/UploadFile/index.d.ts +187 -0
  206. package/dist/src/interfaces/components/Virtualization/ListVirtualization.d.ts +139 -0
  207. package/dist/src/interfaces/components/Virtualization/TableVirtualization.d.ts +144 -0
  208. package/dist/src/main.d.ts +1 -0
  209. package/dist/src/utils/common.d.ts +5 -4
  210. package/dist/src/utils/constant.d.ts +1 -0
  211. package/dist/types-external/table.d.ts +3 -0
  212. package/package.json +46 -47
  213. package/dist/index.cjs.map +0 -1
  214. package/dist/index.mjs.map +0 -1
@@ -1,13 +1,58 @@
1
1
  import { ReactNode } from 'react';
2
- export type TButtonVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'ghost-blue-gray-100-bg_white-text_blue-gray-400' | 'ghost-laba-blue-05' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-08' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'ghost-laba-blue-01' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'secondary-red-700';
3
- export type TButtonSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs';
2
+
3
+ /**
4
+ * [ID] : Tipe varian tombol yang tersedia.
5
+ * [EN] : Available button variant types.
6
+ */
7
+ export type TButtonVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'ghost-blue-gray-100-bg_white-text_blue-gray-400' | 'ghost-laba-blue-05' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-08' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'ghost-laba-blue-01' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'secondary-red-700' | 'tertiary-black' | 'primary-bill-primary-600' | 'secondary-bill-secondary-800' | 'tertiary-bill-secondary-800' | 'primary-bill-red-700';
8
+ /**
9
+ * [ID] : Tipe ukuran tombol.
10
+ * [EN] : Button size type.
11
+ */
12
+ export type TButtonSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs' | 'bill-l' | 'bill-m' | 'bill-s' | 'bill-xs';
13
+ /**
14
+ * [ID] : Interface untuk komponen Button.
15
+ * [EN] : Interface for Button component.
16
+ */
4
17
  export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
18
+ /**
19
+ * [ID] : Ukuran tombol (opsional).
20
+ * [EN] : Button size (optional).
21
+ */
5
22
  size?: TButtonSize;
23
+ /**
24
+ * [ID] : Varian gaya tombol (opsional).
25
+ * [EN] : Button style variant (optional).
26
+ */
6
27
  variants?: TButtonVariants;
28
+ /**
29
+ * [ID] : Ikon di awal tombol (opsional).
30
+ * [EN] : Icon at the start of the button (optional).
31
+ */
7
32
  startIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
33
+ /**
34
+ * [ID] : Ikon di akhir tombol (opsional).
35
+ * [EN] : Icon at the end of the button (optional).
36
+ */
8
37
  endIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
38
+ /**
39
+ * [ID] : Konten anak di dalam tombol.
40
+ * [EN] : Child content inside the button.
41
+ */
9
42
  children: ReactNode | ReactNode[];
43
+ /**
44
+ * [ID] : Nama kelas CSS tambahan (opsional).
45
+ * [EN] : Additional CSS class name (optional).
46
+ */
10
47
  className?: string | undefined;
48
+ /**
49
+ * [ID] : Menentukan apakah tombol dalam keadaan memuat (opsional).
50
+ * [EN] : Determines if the button is in loading state (optional).
51
+ */
11
52
  loading?: boolean;
53
+ /**
54
+ * [ID] : Nama kelas CSS untuk ikon loading (opsional).
55
+ * [EN] : CSS class name for loading icon (optional).
56
+ */
12
57
  classNameIconLoading?: string | undefined;
13
58
  }
@@ -1,11 +1,48 @@
1
1
  import { ReactNode } from 'react';
2
+
3
+ /**
4
+ * [ID] : Tipe varian tombol ikon.
5
+ * [EN] : Button icon variant types.
6
+ */
2
7
  export type TButtonIcomVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'secondary-red-700';
8
+ /**
9
+ * [ID] : Tipe ukuran tombol ikon.
10
+ * [EN] : Button icon size type.
11
+ */
3
12
  export type TButtonIconSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs';
13
+ /**
14
+ * [ID] : Interface untuk komponen ButtonIcon.
15
+ * [EN] : Interface for ButtonIcon component.
16
+ */
4
17
  export interface IButtonIcon extends React.ButtonHTMLAttributes<HTMLButtonElement> {
18
+ /**
19
+ * [ID] : Ukuran tombol (opsional).
20
+ * [EN] : Button size (optional).
21
+ */
5
22
  size?: TButtonIconSize;
23
+ /**
24
+ * [ID] : Varian gaya tombol (opsional).
25
+ * [EN] : Button style variant (optional).
26
+ */
6
27
  variants?: TButtonIcomVariants;
28
+ /**
29
+ * [ID] : Konten anak (biasanya ikon).
30
+ * [EN] : Child content (usually icon).
31
+ */
7
32
  children: ReactNode | ReactNode[];
33
+ /**
34
+ * [ID] : Nama kelas CSS tambahan (opsional).
35
+ * [EN] : Additional CSS class name (optional).
36
+ */
8
37
  className?: string | undefined;
38
+ /**
39
+ * [ID] : Menentukan apakah tombol dalam keadaan memuat (opsional).
40
+ * [EN] : Determines if the button is in loading state (optional).
41
+ */
9
42
  loading?: boolean;
43
+ /**
44
+ * [ID] : Nama kelas CSS untuk ikon loading (opsional).
45
+ * [EN] : CSS class name for loading icon (optional).
46
+ */
10
47
  classNameIconLoading?: string | undefined;
11
48
  }
@@ -1,23 +1,102 @@
1
1
  import { OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
2
2
  import { IPopover } from '../Popover';
3
3
  import { IButton } from '../Button';
4
+
5
+ /**
6
+ * [ID] : Interface untuk komponen ButtonPopover.
7
+ * [EN] : Interface for ButtonPopover component.
8
+ */
4
9
  export interface IButtonPopover extends IButton {
10
+ /**
11
+ * [ID] : Teks tombol (opsional).
12
+ * [EN] : Button text (optional).
13
+ */
5
14
  text?: string;
15
+ /**
16
+ * [ID] : Ikon yang ditampilkan di awal (opsional).
17
+ * [EN] : Icon shown at the start (optional).
18
+ */
6
19
  startIconShow?: React.ReactNode | React.ReactNode[];
20
+ /**
21
+ * [ID] : Ikon yang ditampilkan di akhir (opsional).
22
+ * [EN] : Icon shown at the end (optional).
23
+ */
7
24
  endIconShow?: React.ReactNode | React.ReactNode[];
25
+ /**
26
+ * [ID] : ID untuk popover (opsional).
27
+ * [EN] : ID for popover (optional).
28
+ */
8
29
  idPopover?: string;
30
+ /**
31
+ * [ID] : Nama kelas CSS untuk tombol (opsional).
32
+ * [EN] : CSS class name for button (optional).
33
+ */
9
34
  classNameButton?: string;
35
+ /**
36
+ * [ID] : Z-index untuk popover (opsional).
37
+ * [EN] : Z-index for popover (optional).
38
+ */
10
39
  zIndexPopover?: number;
40
+ /**
41
+ * [ID] : Opsi offset untuk posisi popover (opsional).
42
+ * [EN] : Offset options for popover position (optional).
43
+ */
11
44
  offset?: OffsetOptions;
45
+ /**
46
+ * [ID] : Properti tambahan untuk popover (opsional).
47
+ * [EN] : Additional properties for popover (optional).
48
+ */
12
49
  popoverProps?: Omit<IPopover, 'children'>;
50
+ /**
51
+ * [ID] : Penempatan popover (opsional).
52
+ * [EN] : Popover placement (optional).
53
+ */
13
54
  placement?: UseFloatingOptions['placement'];
55
+ /**
56
+ * [ID] : Handler saat popover ditutup (opsional).
57
+ * [EN] : Handler when popover is closed (optional).
58
+ */
14
59
  onClose?: () => void;
60
+ /**
61
+ * [ID] : Nama kelas CSS saat tombol aktif/ditampilkan (opsional).
62
+ * [EN] : CSS class name when button is active/shown (optional).
63
+ */
15
64
  classNameButtonShow?: string;
16
65
  }
66
+ /**
67
+ * [ID] : Interface untuk referensi ButtonPopover.
68
+ * [EN] : Interface for ButtonPopover reference.
69
+ */
17
70
  export interface IRefButtonPopover {
71
+ /**
72
+ * [ID] : Status visibilitas popover.
73
+ * [EN] : Popover visibility status.
74
+ */
18
75
  show: boolean;
76
+ /**
77
+ * [ID] : Fungsi untuk mengatur visibilitas popover.
78
+ * [EN] : Function to set popover visibility.
79
+ * @param e - [ID] : Status visibilitas baru. [EN] : New visibility status.
80
+ */
19
81
  setShow: (e: boolean) => void;
82
+ /**
83
+ * [ID] : Handler untuk menampilkan popover.
84
+ * [EN] : Handler to show popover.
85
+ * @param e - [ID] : Event mouse. [EN] : Mouse event.
86
+ */
20
87
  handlerShow: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
88
+ /**
89
+ * [ID] : Handler untuk menutup popover.
90
+ * [EN] : Handler to close popover.
91
+ */
21
92
  handlerClose: () => void;
22
93
  }
94
+ /**
95
+ * [ID] : Tipe fungsi untuk mendapatkan ikon tombol popover.
96
+ * [EN] : Function type to get popover button icon.
97
+ * @param isShow - [ID] : Status apakah popover ditampilkan. [EN] : Status if popover is shown.
98
+ * @param iconShow - [ID] : Ikon saat ditampilkan. [EN] : Icon when shown.
99
+ * @param iconClose - [ID] : Ikon saat ditutup. [EN] : Icon when closed.
100
+ * @returns [ID] : Ikon yang sesuai. [EN] : Corresponding icon.
101
+ */
23
102
  export type TGetIconButtonPopover = (isShow: boolean, iconShow?: React.ReactNode | React.ReactNode[], iconClose?: IButton['startIcon'] | IButton['endIcon']) => IButton['startIcon'] | IButton['endIcon'];
@@ -2,89 +2,471 @@ import { CalendarDate } from '@internationalized/date';
2
2
  import { ReactNode } from 'react';
3
3
  import { AriaButtonOptions, DateValue, RangeCalendarProps } from 'react-aria';
4
4
  import { CalendarState, CalendarStateOptions, DateRangePickerStateOptions, RangeCalendarState } from 'react-stately';
5
+
6
+ /**
7
+ * [ID] : Tipe kalender (tanggal, bulan, tahun).
8
+ * [EN] : Calendar type (date, month, year).
9
+ */
5
10
  export type TCalendarType = 'date' | 'month' | 'year';
11
+ /**
12
+ * [ID] : Tipe data tanggal.
13
+ * [EN] : Date data type.
14
+ */
6
15
  export type TDateType = Date | string | null | undefined;
7
- export type TKeyLocale = 'id' | 'enUS' | 'nl';
16
+ /**
17
+ * [ID] : Kunci lokal yang didukung.
18
+ * [EN] : Supported locale keys.
19
+ */
20
+ export type TKeyLocale = 'id-ID' | 'en-US' | 'nl-NL' | 'zh-CN';
21
+ /**
22
+ * [ID] : Interface untuk ikon navigasi kalender.
23
+ * [EN] : Interface for calendar navigation icons.
24
+ */
8
25
  export interface ICalendarPrevNextIcon {
26
+ /**
27
+ * [ID] : Ikon sebelumnya (opsional).
28
+ * [EN] : Previous icon (optional).
29
+ */
9
30
  prevIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
31
+ /**
32
+ * [ID] : Ikon selanjutnya (opsional).
33
+ * [EN] : Next icon (optional).
34
+ */
10
35
  nextIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
11
36
  }
37
+ /**
38
+ * [ID] : Interface untuk tombol konfirmasi kalender.
39
+ * [EN] : Interface for calendar confirmation buttons.
40
+ */
12
41
  export interface ICalendarButtonConfirm {
42
+ /**
43
+ * [ID] : Tombol reset (opsional).
44
+ * [EN] : Reset button (optional).
45
+ */
13
46
  buttonReset?: (() => ReactNode) | (() => ReactNode[]);
47
+ /**
48
+ * [ID] : Tombol submit (opsional).
49
+ * [EN] : Submit button (optional).
50
+ */
14
51
  buttonSubmit?: (() => ReactNode) | (() => ReactNode[]);
15
52
  }
53
+ /**
54
+ * [ID] : Interface untuk waktu kalender.
55
+ * [EN] : Interface for calendar time.
56
+ */
16
57
  export interface ITimeCalendar {
58
+ /**
59
+ * [ID] : Jam (opsional).
60
+ * [EN] : Hour (optional).
61
+ */
17
62
  hour?: number;
63
+ /**
64
+ * [ID] : Menit (opsional).
65
+ * [EN] : Minute (optional).
66
+ */
18
67
  minut?: number;
68
+ /**
69
+ * [ID] : Detik (opsional).
70
+ * [EN] : Second (optional).
71
+ */
19
72
  second?: number;
20
73
  }
74
+ /**
75
+ * [ID] : Interface untuk rentang waktu kalender.
76
+ * [EN] : Interface for calendar time range.
77
+ */
78
+ export interface ITimeCalendarRange {
79
+ /**
80
+ * [ID] : Waktu mulai (opsional).
81
+ * [EN] : Start time (optional).
82
+ */
83
+ start?: ITimeCalendar;
84
+ /**
85
+ * [ID] : Waktu selesai (opsional).
86
+ * [EN] : End time (optional).
87
+ */
88
+ end?: ITimeCalendar;
89
+ }
90
+ /**
91
+ * [ID] : Interface utama untuk komponen Kalender.
92
+ * [EN] : Main interface for Calendar component.
93
+ */
21
94
  export interface ICalendar extends CalendarStateOptions<DateValue>, ICalendarPrevNextIcon, ICalendarButtonConfirm {
95
+ /**
96
+ * [ID] : Menampilkan tombol konfirmasi (opsional).
97
+ * [EN] : Show confirm buttons (optional).
98
+ */
22
99
  withConfirm?: boolean;
100
+ /**
101
+ * [ID] : Menggunakan waktu kustom (opsional).
102
+ * [EN] : Use custom time (optional).
103
+ */
23
104
  isCustomTime?: boolean;
105
+ /**
106
+ * [ID] : Tanggal minimum (opsional).
107
+ * [EN] : Minimum date (optional).
108
+ */
24
109
  minDate?: TDateType;
110
+ /**
111
+ * [ID] : Tanggal maksimum (opsional).
112
+ * [EN] : Maximum date (optional).
113
+ */
25
114
  maxDate?: TDateType;
26
- time?: ITimeCalendar;
115
+ /**
116
+ * [ID] : Rentang waktu (opsional).
117
+ * [EN] : Time range (optional).
118
+ */
119
+ time?: ITimeCalendarRange;
120
+ /**
121
+ * [ID] : Tipe kalender yang aktif (opsional).
122
+ * [EN] : Active calendar type (optional).
123
+ */
27
124
  activeType?: TCalendarType;
125
+ /**
126
+ * [ID] : Menampilkan pilihan tanggal (opsional).
127
+ * [EN] : Show date selection (optional).
128
+ */
28
129
  withDateSelect?: boolean;
130
+ /**
131
+ * [ID] : Tipe-tipe kalender yang tersedia.
132
+ * [EN] : Available calendar types.
133
+ */
29
134
  type: TCalendarType[];
135
+ /**
136
+ * [ID] : Tipe waktu (SINGLE atau RANGE) (opsional).
137
+ * [EN] : Time type (SINGLE or RANGE) (optional).
138
+ */
139
+ typeTime?: 'SINGLE' | 'RANGE';
140
+ /**
141
+ * [ID] : Menyembunyikan header (opsional).
142
+ * [EN] : Hide header (optional).
143
+ */
30
144
  hiddenHeader?: boolean;
31
- handlerChangeTime?: (v: ITimeCalendar) => void;
145
+ /**
146
+ * [ID] : Handler perubahan waktu (opsional).
147
+ * [EN] : Time change handler (optional).
148
+ * @param v - [ID] : Rentang waktu baru. [EN] : New time range.
149
+ */
150
+ handlerChangeTime?: (v: ITimeCalendarRange) => void;
151
+ /**
152
+ * [ID] : Handler reset kalender.
153
+ * [EN] : Calendar reset handler.
154
+ * @param v - [ID] : State kalender. [EN] : Calendar state.
155
+ */
32
156
  handlerReset: (v: CalendarState) => void;
157
+ /**
158
+ * [ID] : Handler submit kalender.
159
+ * [EN] : Calendar submit handler.
160
+ */
33
161
  handlerSubmit: () => void;
34
162
  }
163
+ /**
164
+ * [ID] : Interface untuk pilihan tanggal kalender.
165
+ * [EN] : Interface for calendar date selection.
166
+ */
35
167
  export interface ICalendarDateSelect extends CalendarStateOptions<DateValue>, ICalendarPrevNextIcon {
168
+ /**
169
+ * [ID] : State kalender.
170
+ * [EN] : Calendar state.
171
+ */
36
172
  state: CalendarState;
173
+ /**
174
+ * [ID] : Menyembunyikan header (opsional).
175
+ * [EN] : Hide header (optional).
176
+ */
37
177
  hiddenHeader?: boolean;
178
+ /**
179
+ * [ID] : Fungsi untuk mengatur tipe kalender aktif.
180
+ * [EN] : Function to set active calendar type.
181
+ * @param v - [ID] : Tipe kalender. [EN] : Calendar type.
182
+ */
38
183
  setActiveTypeCalendar: (v: TCalendarType) => void;
39
184
  }
185
+ /**
186
+ * [ID] : Interface untuk waktu kustom kalender.
187
+ * [EN] : Interface for custom calendar time.
188
+ */
40
189
  export interface ICustomTimeCalendar {
190
+ /**
191
+ * [ID] : Waktu (opsional).
192
+ * [EN] : Time (optional).
193
+ */
41
194
  time?: ITimeCalendar;
195
+ /**
196
+ * [ID] : Nilai tanggal (opsional).
197
+ * [EN] : Date value (optional).
198
+ */
42
199
  value?: DateValue | null | undefined;
200
+ /**
201
+ * [ID] : Tanggal minimum (opsional).
202
+ * [EN] : Minimum date (optional).
203
+ */
43
204
  minDate?: TDateType;
205
+ /**
206
+ * [ID] : Tanggal maksimum (opsional).
207
+ * [EN] : Maximum date (optional).
208
+ */
44
209
  maxDate?: TDateType;
210
+ /**
211
+ * [ID] : Label waktu (opsional).
212
+ * [EN] : Time label (optional).
213
+ */
214
+ timeLabel?: string;
215
+ /**
216
+ * [ID] : Menyembunyikan header (opsional).
217
+ * [EN] : Hide header (optional).
218
+ */
45
219
  hiddenHeader?: boolean;
220
+ /**
221
+ * [ID] : Tipe waktu (mulai atau selesai).
222
+ * [EN] : Time type (start or end).
223
+ */
224
+ type: 'start' | 'end';
225
+ /**
226
+ * [ID] : Handler perubahan waktu (opsional).
227
+ * [EN] : Time change handler (optional).
228
+ * @param v - [ID] : Waktu baru. [EN] : New time.
229
+ */
46
230
  handlerChangeTime?: (v: ITimeCalendar) => void;
47
231
  }
232
+ /**
233
+ * [ID] : Interface untuk tombol kalender.
234
+ * [EN] : Interface for calendar button.
235
+ */
48
236
  export interface ICalendarButton extends AriaButtonOptions<'button'> {
237
+ /**
238
+ * [ID] : Konten anak tombol.
239
+ * [EN] : Button child content.
240
+ */
49
241
  children: ReactNode | ReactNode[];
50
242
  }
243
+ /**
244
+ * [ID] : Interface untuk sel kalender.
245
+ * [EN] : Interface for calendar cell.
246
+ */
51
247
  export interface ICalendarCell {
248
+ /**
249
+ * [ID] : State kalender.
250
+ * [EN] : Calendar state.
251
+ */
52
252
  state: RangeCalendarState | CalendarState;
253
+ /**
254
+ * [ID] : Tanggal sel.
255
+ * [EN] : Cell date.
256
+ */
53
257
  date: CalendarDate;
54
258
  }
259
+ /**
260
+ * [ID] : Interface untuk tampilan bulan kalender.
261
+ * [EN] : Interface for calendar month view.
262
+ */
55
263
  export interface ICalendarMonth extends ICalendarPrevNextIcon {
264
+ /**
265
+ * [ID] : State kalender.
266
+ * [EN] : Calendar state.
267
+ */
56
268
  state: CalendarState | RangeCalendarState;
269
+ /**
270
+ * [ID] : Tipe-tipe kalender yang tersedia.
271
+ * [EN] : Available calendar types.
272
+ */
57
273
  type: TCalendarType[];
274
+ /**
275
+ * [ID] : Fungsi untuk mengatur tipe kalender aktif.
276
+ * [EN] : Function to set active calendar type.
277
+ * @param v - [ID] : Tipe kalender. [EN] : Calendar type.
278
+ */
58
279
  setActiveTypeCalendar: (v: TCalendarType) => void;
280
+ /**
281
+ * [ID] : Menampilkan pilihan tanggal (opsional).
282
+ * [EN] : Show date selection (optional).
283
+ */
59
284
  withDateSelect?: boolean;
285
+ /**
286
+ * [ID] : Handler perubahan bulan (opsional).
287
+ * [EN] : Month change handler (optional).
288
+ * @param v - [ID] : Tanggal baru. [EN] : New date.
289
+ */
60
290
  onChangeMonth?: (v: CalendarDate) => void;
291
+ /**
292
+ * [ID] : Menyembunyikan header (opsional).
293
+ * [EN] : Hide header (optional).
294
+ */
61
295
  hiddenHeader?: boolean;
62
296
  }
297
+ /**
298
+ * [ID] : Interface untuk pengaturan tahun.
299
+ * [EN] : Interface for year setup.
300
+ */
63
301
  export interface ISetUpYear {
302
+ /**
303
+ * [ID] : Tahun mulai.
304
+ * [EN] : Start year.
305
+ */
64
306
  startYear: number;
307
+ /**
308
+ * [ID] : Akhir setelah tahun ini.
309
+ * [EN] : End after this year.
310
+ */
65
311
  endAfterThisYear: number;
66
312
  }
313
+ /**
314
+ * [ID] : Interface untuk tampilan tahun kalender.
315
+ * [EN] : Interface for calendar year view.
316
+ */
67
317
  export interface ICalendarYear {
318
+ /**
319
+ * [ID] : Judul tampilan tahun.
320
+ * [EN] : Year view title.
321
+ */
68
322
  title: string;
323
+ /**
324
+ * [ID] : State kalender.
325
+ * [EN] : Calendar state.
326
+ */
69
327
  state: CalendarState | RangeCalendarState;
328
+ /**
329
+ * [ID] : Pengaturan tahun (opsional).
330
+ * [EN] : Year setup (optional).
331
+ */
70
332
  setUpYear?: ISetUpYear;
333
+ /**
334
+ * [ID] : Tipe-tipe kalender yang tersedia.
335
+ * [EN] : Available calendar types.
336
+ */
71
337
  type: TCalendarType[];
338
+ /**
339
+ * [ID] : Fungsi untuk mengatur tipe kalender aktif.
340
+ * [EN] : Function to set active calendar type.
341
+ * @param v - [ID] : Tipe kalender. [EN] : Calendar type.
342
+ */
72
343
  setActiveTypeCalendar: (v: TCalendarType) => void;
344
+ /**
345
+ * [ID] : Handler perubahan tahun (opsional).
346
+ * [EN] : Year change handler (optional).
347
+ * @param v - [ID] : Tanggal baru. [EN] : New date.
348
+ */
73
349
  onChangeYear?: (v: CalendarDate) => void;
350
+ /**
351
+ * [ID] : Menyembunyikan header (opsional).
352
+ * [EN] : Hide header (optional).
353
+ */
74
354
  hiddenHeader?: boolean;
75
355
  }
356
+ /**
357
+ * [ID] : Interface untuk rentang tanggal.
358
+ * [EN] : Interface for date range.
359
+ */
76
360
  export interface IDateRange {
361
+ /**
362
+ * [ID] : Tanggal mulai.
363
+ * [EN] : Start date.
364
+ */
77
365
  startDate: TDateType;
366
+ /**
367
+ * [ID] : Tanggal selesai.
368
+ * [EN] : End date.
369
+ */
78
370
  endDate: TDateType;
371
+ /**
372
+ * [ID] : Label rentang (opsional).
373
+ * [EN] : Range label (optional).
374
+ */
79
375
  label?: string;
80
376
  }
377
+ /**
378
+ * [ID] : Interface untuk kalender rentang tanggal.
379
+ * [EN] : Interface for date range calendar.
380
+ */
81
381
  export interface ICalendarDateRange extends RangeCalendarProps<DateValue>, ICalendarPrevNextIcon, ICalendarButtonConfirm {
382
+ /**
383
+ * [ID] : Menampilkan tombol konfirmasi (opsional).
384
+ * [EN] : Show confirm buttons (optional).
385
+ */
82
386
  withConfirm?: boolean;
387
+ /**
388
+ * [ID] : Menggunakan waktu kustom (opsional).
389
+ * [EN] : Use custom time (optional).
390
+ */
391
+ isCustomTime?: boolean;
392
+ /**
393
+ * [ID] : Tanggal minimum (opsional).
394
+ * [EN] : Minimum date (optional).
395
+ */
396
+ minDate?: TDateType;
397
+ /**
398
+ * [ID] : Tanggal maksimum (opsional).
399
+ * [EN] : Maximum date (optional).
400
+ */
401
+ maxDate?: TDateType;
402
+ /**
403
+ * [ID] : Rentang waktu (opsional).
404
+ * [EN] : Time range (optional).
405
+ */
406
+ time?: ITimeCalendarRange;
407
+ /**
408
+ * [ID] : Handler perubahan rentang waktu (opsional).
409
+ * [EN] : Time range change handler (optional).
410
+ * @param v - [ID] : Rentang waktu baru. [EN] : New time range.
411
+ */
412
+ handlerChangeTimeRange?: (v: ITimeCalendarRange) => void;
413
+ /**
414
+ * [ID] : Handler submit.
415
+ * [EN] : Submit handler.
416
+ */
83
417
  handlerSubmit: () => void;
418
+ /**
419
+ * [ID] : Handler reset.
420
+ * [EN] : Reset handler.
421
+ * @param v - [ID] : State kalender rentang. [EN] : Range calendar state.
422
+ */
84
423
  handlerReset: (v: RangeCalendarState) => void;
85
424
  }
425
+ /**
426
+ * [ID] : Interface untuk kalender rentang.
427
+ * [EN] : Interface for range calendar.
428
+ */
86
429
  export interface ICalendarRange extends DateRangePickerStateOptions, ICalendarPrevNextIcon, ICalendarButtonConfirm {
430
+ /**
431
+ * [ID] : Menampilkan tombol konfirmasi (opsional).
432
+ * [EN] : Show confirm buttons (optional).
433
+ */
87
434
  withConfirm?: boolean;
435
+ /**
436
+ * [ID] : Menggunakan waktu kustom (opsional).
437
+ * [EN] : Use custom time (optional).
438
+ */
439
+ isCustomTime?: boolean;
440
+ /**
441
+ * [ID] : Tanggal minimum (opsional).
442
+ * [EN] : Minimum date (optional).
443
+ */
444
+ minDate?: TDateType;
445
+ /**
446
+ * [ID] : Tanggal maksimum (opsional).
447
+ * [EN] : Maximum date (optional).
448
+ */
449
+ maxDate?: TDateType;
450
+ /**
451
+ * [ID] : Rentang waktu (opsional).
452
+ * [EN] : Time range (optional).
453
+ */
454
+ time?: ITimeCalendarRange;
455
+ /**
456
+ * [ID] : Handler perubahan rentang waktu (opsional).
457
+ * [EN] : Time range change handler (optional).
458
+ * @param v - [ID] : Rentang waktu baru. [EN] : New time range.
459
+ */
460
+ handlerChangeTimeRange?: (v: ITimeCalendarRange) => void;
461
+ /**
462
+ * [ID] : Handler submit.
463
+ * [EN] : Submit handler.
464
+ */
88
465
  handlerSubmit: () => void;
466
+ /**
467
+ * [ID] : Handler reset.
468
+ * [EN] : Reset handler.
469
+ * @param v - [ID] : State kalender rentang. [EN] : Range calendar state.
470
+ */
89
471
  handlerReset: (v: RangeCalendarState) => void;
90
472
  }