@skalfa/skalfa-component 1.0.0 → 1.0.3

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 (188) hide show
  1. package/dist/accordion/Accordion.component.d.ts +1 -1
  2. package/dist/breadcrumb/Breadcrumb.component.d.ts +1 -1
  3. package/dist/button/Button.component.d.ts +1 -1
  4. package/dist/card/AlertCard.component.d.ts +1 -1
  5. package/dist/card/Card.component.d.ts +1 -1
  6. package/dist/card/DashboardCard.component.d.ts +1 -1
  7. package/dist/card/GalleryCard.component.d.ts +1 -1
  8. package/dist/card/ProductCard.component.d.ts +1 -1
  9. package/dist/card/ProfileCard.component.d.ts +1 -1
  10. package/dist/carousel/Carousel.component.d.ts +1 -1
  11. package/dist/chip/Chip.component.d.ts +1 -1
  12. package/dist/index.js +175 -56
  13. package/dist/input/Checkbox.component.d.ts +1 -1
  14. package/dist/input/Input.component.d.ts +1 -1
  15. package/dist/input/InputCheckbox.component.d.ts +1 -1
  16. package/dist/input/InputCheckbox.component.js +2 -2
  17. package/dist/input/InputCurrency.component.d.ts +1 -1
  18. package/dist/input/InputDate.component.d.ts +1 -1
  19. package/dist/input/InputDate.component.js +9 -7
  20. package/dist/input/InputDatetime.component.d.ts +1 -1
  21. package/dist/input/InputDatetime.component.js +13 -8
  22. package/dist/input/InputDocument.component.d.ts +1 -1
  23. package/dist/input/InputDocument.component.js +6 -4
  24. package/dist/input/InputImage.component.js +5 -3
  25. package/dist/input/InputMap.component.d.ts +1 -1
  26. package/dist/input/InputMap.component.js +5 -3
  27. package/dist/input/InputNumber.component.d.ts +1 -1
  28. package/dist/input/InputPassword.component.d.ts +1 -1
  29. package/dist/input/InputRadio.component.d.ts +1 -1
  30. package/dist/input/InputRadio.component.js +2 -2
  31. package/dist/input/InputTime.component.d.ts +1 -1
  32. package/dist/input/InputTime.component.js +5 -3
  33. package/dist/input/InputValues.component.d.ts +1 -1
  34. package/dist/input/Radio.component.d.ts +1 -1
  35. package/dist/input/Select.component.d.ts +1 -1
  36. package/dist/modal/FloatingPage.component.d.ts +1 -1
  37. package/dist/modal/FloatingPage.component.js +2 -2
  38. package/dist/modal/Modal.component.d.ts +1 -1
  39. package/dist/modal/Modal.component.js +2 -2
  40. package/dist/modal/ModalConfirm.component.d.ts +2 -2
  41. package/dist/modal/ModalConfirm.component.js +5 -3
  42. package/dist/modal/Toast.component.d.ts +1 -1
  43. package/dist/modal/Toast.component.js +2 -2
  44. package/dist/nav/Bottombar.component.d.ts +1 -1
  45. package/dist/nav/Footer.component.d.ts +1 -1
  46. package/dist/nav/Headbar.component.d.ts +4 -11
  47. package/dist/nav/Headbar.component.js +3 -22
  48. package/dist/nav/Navbar.component.d.ts +1 -1
  49. package/dist/nav/Navbar.component.js +2 -2
  50. package/dist/nav/Sidebar.component.d.ts +2 -2
  51. package/dist/nav/Tabbar.component.d.ts +1 -1
  52. package/dist/nav/Wizard.component.d.ts +1 -1
  53. package/dist/supervision/FormSupervision.component.d.ts +14 -2
  54. package/dist/supervision/FormSupervision.component.js +32 -17
  55. package/dist/supervision/TableSupervision.component.d.ts +7 -2
  56. package/dist/supervision/TableSupervision.component.js +25 -19
  57. package/dist/table/ControlBar.component.d.ts +2 -2
  58. package/dist/table/ControlBar.component.js +20 -14
  59. package/dist/table/FilterComponent.d.ts +2 -2
  60. package/dist/table/FilterComponent.js +24 -17
  61. package/dist/table/Pagination.component.d.ts +1 -1
  62. package/dist/table/Pagination.component.js +4 -3
  63. package/dist/table/Table.component.d.ts +4 -2
  64. package/dist/table/Table.component.js +11 -7
  65. package/dist/typography/TypographyArticle.component.d.ts +1 -1
  66. package/dist/typography/TypographyColumn.component.d.ts +1 -1
  67. package/dist/typography/TypographyContent.component.d.ts +1 -1
  68. package/dist/typography/TypographyTips.component.d.ts +1 -1
  69. package/dist/wrap/Image.component.d.ts +1 -1
  70. package/dist/wrap/ScrollContainer.component.d.ts +1 -1
  71. package/dist/wrap/ShortcutProvider.d.ts +1 -1
  72. package/dist/wrap/ShortcutProvider.js +2 -2
  73. package/dist/wrap/Swipe.component.d.ts +1 -1
  74. package/package.json +4 -3
  75. package/dist/src/accordion/Accordion.component.d.ts +0 -13
  76. package/dist/src/accordion/Accordion.component.js +0 -25
  77. package/dist/src/breadcrumb/Breadcrumb.component.d.ts +0 -14
  78. package/dist/src/breadcrumb/Breadcrumb.component.js +0 -21
  79. package/dist/src/button/Button.component.d.ts +0 -21
  80. package/dist/src/button/Button.component.js +0 -19
  81. package/dist/src/card/AlertCard.component.d.ts +0 -11
  82. package/dist/src/card/AlertCard.component.js +0 -9
  83. package/dist/src/card/Card.component.d.ts +0 -5
  84. package/dist/src/card/Card.component.js +0 -9
  85. package/dist/src/card/DashboardCard.component.d.ts +0 -9
  86. package/dist/src/card/DashboardCard.component.js +0 -13
  87. package/dist/src/card/GalleryCard.component.d.ts +0 -7
  88. package/dist/src/card/GalleryCard.component.js +0 -13
  89. package/dist/src/card/ProductCard.component.d.ts +0 -9
  90. package/dist/src/card/ProductCard.component.js +0 -13
  91. package/dist/src/card/ProfileCard.component.d.ts +0 -10
  92. package/dist/src/card/ProfileCard.component.js +0 -13
  93. package/dist/src/carousel/Carousel.component.d.ts +0 -13
  94. package/dist/src/carousel/Carousel.component.js +0 -37
  95. package/dist/src/chip/Chip.component.d.ts +0 -6
  96. package/dist/src/chip/Chip.component.js +0 -12
  97. package/dist/src/index.d.ts +0 -13
  98. package/dist/src/index.js +0 -29
  99. package/dist/src/input/Checkbox.component.d.ts +0 -13
  100. package/dist/src/input/Checkbox.component.js +0 -23
  101. package/dist/src/input/Input.component.d.ts +0 -23
  102. package/dist/src/input/Input.component.js +0 -134
  103. package/dist/src/input/InputCheckbox.component.d.ts +0 -27
  104. package/dist/src/input/InputCheckbox.component.js +0 -53
  105. package/dist/src/input/InputCurrency.component.d.ts +0 -21
  106. package/dist/src/input/InputCurrency.component.js +0 -30
  107. package/dist/src/input/InputDate.component.d.ts +0 -24
  108. package/dist/src/input/InputDate.component.js +0 -107
  109. package/dist/src/input/InputDatetime.component.d.ts +0 -17
  110. package/dist/src/input/InputDatetime.component.js +0 -75
  111. package/dist/src/input/InputDocument.component.d.ts +0 -22
  112. package/dist/src/input/InputDocument.component.js +0 -88
  113. package/dist/src/input/InputImage.component.d.ts +0 -23
  114. package/dist/src/input/InputImage.component.js +0 -260
  115. package/dist/src/input/InputMap.component.d.ts +0 -25
  116. package/dist/src/input/InputMap.component.js +0 -101
  117. package/dist/src/input/InputNumber.component.d.ts +0 -19
  118. package/dist/src/input/InputNumber.component.js +0 -40
  119. package/dist/src/input/InputOtp.component.d.ts +0 -14
  120. package/dist/src/input/InputOtp.component.js +0 -65
  121. package/dist/src/input/InputPassword.component.d.ts +0 -17
  122. package/dist/src/input/InputPassword.component.js +0 -59
  123. package/dist/src/input/InputRadio.component.d.ts +0 -27
  124. package/dist/src/input/InputRadio.component.js +0 -56
  125. package/dist/src/input/InputTime.component.d.ts +0 -23
  126. package/dist/src/input/InputTime.component.js +0 -73
  127. package/dist/src/input/InputValues.component.d.ts +0 -9
  128. package/dist/src/input/InputValues.component.js +0 -19
  129. package/dist/src/input/Radio.component.d.ts +0 -12
  130. package/dist/src/input/Radio.component.js +0 -22
  131. package/dist/src/input/Select.component.d.ts +0 -47
  132. package/dist/src/input/Select.component.js +0 -275
  133. package/dist/src/modal/BottomSheet.component.d.ts +0 -12
  134. package/dist/src/modal/BottomSheet.component.js +0 -161
  135. package/dist/src/modal/FloatingPage.component.d.ts +0 -12
  136. package/dist/src/modal/FloatingPage.component.js +0 -27
  137. package/dist/src/modal/Modal.component.d.ts +0 -12
  138. package/dist/src/modal/Modal.component.js +0 -27
  139. package/dist/src/modal/ModalConfirm.component.d.ts +0 -26
  140. package/dist/src/modal/ModalConfirm.component.js +0 -68
  141. package/dist/src/modal/Toast.component.d.ts +0 -11
  142. package/dist/src/modal/Toast.component.js +0 -58
  143. package/dist/src/nav/Bottombar.component.d.ts +0 -12
  144. package/dist/src/nav/Bottombar.component.js +0 -32
  145. package/dist/src/nav/Footer.component.d.ts +0 -37
  146. package/dist/src/nav/Footer.component.js +0 -49
  147. package/dist/src/nav/Headbar.component.d.ts +0 -14
  148. package/dist/src/nav/Headbar.component.js +0 -32
  149. package/dist/src/nav/Navbar.component.d.ts +0 -22
  150. package/dist/src/nav/Navbar.component.js +0 -26
  151. package/dist/src/nav/Sidebar.component.d.ts +0 -33
  152. package/dist/src/nav/Sidebar.component.js +0 -87
  153. package/dist/src/nav/Tabbar.component.d.ts +0 -13
  154. package/dist/src/nav/Tabbar.component.js +0 -17
  155. package/dist/src/nav/Wizard.component.d.ts +0 -9
  156. package/dist/src/nav/Wizard.component.js +0 -24
  157. package/dist/src/supervision/FormSupervision.component.d.ts +0 -93
  158. package/dist/src/supervision/FormSupervision.component.js +0 -168
  159. package/dist/src/supervision/TableSupervision.component.d.ts +0 -78
  160. package/dist/src/supervision/TableSupervision.component.js +0 -273
  161. package/dist/src/table/ControlBar.component.d.ts +0 -34
  162. package/dist/src/table/ControlBar.component.js +0 -205
  163. package/dist/src/table/FilterComponent.d.ts +0 -45
  164. package/dist/src/table/FilterComponent.js +0 -132
  165. package/dist/src/table/Pagination.component.d.ts +0 -8
  166. package/dist/src/table/Pagination.component.js +0 -32
  167. package/dist/src/table/Table.component.d.ts +0 -61
  168. package/dist/src/table/Table.component.js +0 -101
  169. package/dist/src/typography/TypographyArticle.component.d.ts +0 -8
  170. package/dist/src/typography/TypographyArticle.component.js +0 -7
  171. package/dist/src/typography/TypographyColumn.component.d.ts +0 -6
  172. package/dist/src/typography/TypographyColumn.component.js +0 -7
  173. package/dist/src/typography/TypographyContent.component.d.ts +0 -6
  174. package/dist/src/typography/TypographyContent.component.js +0 -7
  175. package/dist/src/typography/TypographyTips.component.d.ts +0 -6
  176. package/dist/src/typography/TypographyTips.component.js +0 -7
  177. package/dist/src/wrap/Draggable.component.d.ts +0 -34
  178. package/dist/src/wrap/Draggable.component.js +0 -214
  179. package/dist/src/wrap/Image.component.d.ts +0 -2
  180. package/dist/src/wrap/Image.component.js +0 -13
  181. package/dist/src/wrap/OutsideClick.component.d.ts +0 -6
  182. package/dist/src/wrap/OutsideClick.component.js +0 -34
  183. package/dist/src/wrap/ScrollContainer.component.d.ts +0 -10
  184. package/dist/src/wrap/ScrollContainer.component.js +0 -54
  185. package/dist/src/wrap/ShortcutProvider.d.ts +0 -1
  186. package/dist/src/wrap/ShortcutProvider.js +0 -42
  187. package/dist/src/wrap/Swipe.component.d.ts +0 -14
  188. package/dist/src/wrap/Swipe.component.js +0 -61
@@ -1,58 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.ToastComponent = ToastComponent;
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
8
- const _utils_1 = require("@utils");
9
- const _components_1 = require("@components");
10
- ;
11
- function ToastComponent({ show, onClose, title, children, footer, className = "", }) {
12
- const [countdown, setCountdown] = (0, react_1.useState)(5);
13
- const [timerId, setTimerId] = (0, react_1.useState)(null);
14
- (0, react_1.useEffect)(() => {
15
- if (show) {
16
- setCountdown(5); // Reset countdown saat toast muncul
17
- const id = setInterval(() => {
18
- setCountdown((prev) => {
19
- if (prev <= 1) {
20
- clearInterval(id);
21
- onClose();
22
- return 0;
23
- }
24
- return prev - 1;
25
- });
26
- }, 1000);
27
- setTimerId(id);
28
- }
29
- return () => {
30
- if (timerId) {
31
- clearInterval(timerId);
32
- }
33
- };
34
- }, [show]);
35
- const handleMouseEnter = () => {
36
- if (timerId) {
37
- clearInterval(timerId);
38
- setTimerId(null);
39
- }
40
- };
41
- const handleMouseLeave = () => {
42
- const id = setInterval(() => {
43
- setCountdown((prev) => {
44
- if (prev <= 1) {
45
- clearInterval(id);
46
- onClose();
47
- return 0;
48
- }
49
- return prev - 1;
50
- });
51
- }, 1000);
52
- setTimerId(id);
53
- };
54
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("toast", !show && "translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("pt-2 px-3 flex justify-between items-center text-foreground", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("h6", { className: "font-semibold", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-foreground/50", children: countdown }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => {
55
- clearInterval(timerId || "");
56
- onClose();
57
- }, size: "sm" })] })] })), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] }) }));
58
- }
@@ -1,12 +0,0 @@
1
- import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
2
- export interface BottombarItemProps {
3
- icon: IconDefinition;
4
- path: string;
5
- activeKey?: string;
6
- }
7
- export interface BottombarProps {
8
- active?: string;
9
- items?: BottombarItemProps[];
10
- className?: string;
11
- }
12
- export declare function BottombarComponent({ className, active, items, }: BottombarProps): import("react").JSX.Element;
@@ -1,32 +0,0 @@
1
- "use client";
2
- "use strict";
3
- var __importDefault = (this && this.__importDefault) || function (mod) {
4
- return (mod && mod.__esModule) ? mod : { "default": mod };
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.BottombarComponent = BottombarComponent;
8
- const jsx_runtime_1 = require("react/jsx-runtime");
9
- const link_1 = __importDefault(require("next/link"));
10
- const navigation_1 = require("next/navigation");
11
- const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
12
- const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
13
- const _utils_1 = require("@utils");
14
- const defaultItems = [
15
- { icon: free_solid_svg_icons_1.faHome, path: "/_example/bottombar", activeKey: "home" },
16
- { icon: free_solid_svg_icons_1.faClipboard, path: "/", activeKey: "clipboard" },
17
- { icon: free_solid_svg_icons_1.faCrosshairs, path: "/", activeKey: "crosshairs" },
18
- { icon: free_solid_svg_icons_1.faSackDollar, path: "/", activeKey: "sack-dollar" },
19
- { icon: free_solid_svg_icons_1.faUserCircle, path: "/", activeKey: "profile" },
20
- ];
21
- function BottombarComponent({ className = "", active, items = defaultItems, }) {
22
- const pathname = (0, navigation_1.usePathname)();
23
- const isKeyboardOpen = (0, _utils_1.useKeyboardOpen)();
24
- const styles = {
25
- base: (0, _utils_1.cn)("bottombar-base", isKeyboardOpen ? "-bottom-60" : "bottom-3", (0, _utils_1.pcn)(className, "base")),
26
- item: "bottombar-item",
27
- };
28
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: styles.base, children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-5 gap-2 items-center", style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }, children: items.map((item, key) => {
29
- const isActive = pathname === item.path || active === item.activeKey;
30
- return ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(styles.item, isActive && "bottombar-item-active", (0, _utils_1.pcn)(className, "item"), isActive && (0, _utils_1.pcn)(className, "active")), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: item.icon }) }) }, key));
31
- }) }) }) }));
32
- }
@@ -1,37 +0,0 @@
1
- import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
2
- export interface FooterLinkProps {
3
- label: string;
4
- path: string;
5
- }
6
- export interface FooterColumnProps {
7
- title: string;
8
- items: FooterLinkProps[];
9
- }
10
- export interface FooterSocialProps {
11
- icon: IconDefinition;
12
- path: string;
13
- }
14
- export interface FooterProps {
15
- brandTitle?: string;
16
- brandSubtitle?: string;
17
- address?: {
18
- label: string;
19
- path: string;
20
- };
21
- phone?: {
22
- label: string;
23
- path: string;
24
- };
25
- email?: {
26
- label: string;
27
- path: string;
28
- };
29
- supportHours?: string;
30
- socials?: FooterSocialProps[];
31
- columns?: FooterColumnProps[];
32
- copyrightLink?: {
33
- label: string;
34
- path: string;
35
- };
36
- }
37
- export declare function FooterComponent({ brandTitle, brandSubtitle, address, phone, email, supportHours, socials, columns, copyrightLink, }: FooterProps): import("react").JSX.Element;
@@ -1,49 +0,0 @@
1
- "use client";
2
- "use strict";
3
- var __importDefault = (this && this.__importDefault) || function (mod) {
4
- return (mod && mod.__esModule) ? mod : { "default": mod };
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.FooterComponent = FooterComponent;
8
- const jsx_runtime_1 = require("react/jsx-runtime");
9
- const link_1 = __importDefault(require("next/link"));
10
- const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
11
- const free_brands_svg_icons_1 = require("@fortawesome/free-brands-svg-icons");
12
- const defaultSocials = [
13
- { icon: free_brands_svg_icons_1.faFacebook, path: "" },
14
- { icon: free_brands_svg_icons_1.faLinkedin, path: "" },
15
- { icon: free_brands_svg_icons_1.faGithub, path: "https://github.com/SE-JE" },
16
- { icon: free_brands_svg_icons_1.faInstagram, path: "https://www.instagram.com/seje.digital/" },
17
- ];
18
- const defaultColumns = [
19
- {
20
- title: "Link Menu",
21
- items: [
22
- { label: "Klik Link Menu 1", path: "" },
23
- { label: "Klik Link Menu 1", path: "" },
24
- { label: "Klik Link Menu 1", path: "" },
25
- { label: "Klik Link Menu 1", path: "" },
26
- ],
27
- },
28
- {
29
- title: "Link Menu",
30
- items: [
31
- { label: "Klik Link Menu 1", path: "" },
32
- { label: "Klik Link Menu 1", path: "" },
33
- { label: "Klik Link Menu 1", path: "" },
34
- { label: "Klik Link Menu 1", path: "" },
35
- ],
36
- },
37
- {
38
- title: "Link Menu",
39
- items: [
40
- { label: "Klik Link Menu 1", path: "" },
41
- { label: "Klik Link Menu 1", path: "" },
42
- { label: "Klik Link Menu 1", path: "" },
43
- { label: "Klik Link Menu 1", path: "" },
44
- ],
45
- },
46
- ];
47
- function FooterComponent({ brandTitle = "Next Light v.3", brandSubtitle = "The Magic Starter Template", address = { label: "Soekarno Hatta No 27 C, Ponorogo, Jawa Timur, Indonesia", path: "https://maps.app.goo.gl/TY2QDjFPm3RfwjUq6" }, phone = { label: "+62 888888888888", path: "https://wa.me/6281456140392" }, email = { label: "example@gmail.com", path: "mailto:sejedigital@gmail.com" }, supportHours = "24 / 7 Online Suport | Senin - Sabtu ( 09.00 s/d 17.00 )", socials = defaultSocials, columns = defaultColumns, copyrightLink = { label: "sejedigital.com 2020 - 2025", path: "https://sejedigital.com/" }, }) {
48
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "footer-base", children: [(0, jsx_runtime_1.jsxs)("div", { className: "footer-brand-container", children: [(0, jsx_runtime_1.jsx)("h1", { className: "footer-brand-title", children: brandTitle }), brandSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: "footer-brand-subtitle", children: brandSubtitle }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "footer-contact-container", children: [address && ((0, jsx_runtime_1.jsx)("a", { href: address.path, className: "footer-contact-link", target: "_blank", rel: "noopener noreferrer", children: address.label })), phone && ((0, jsx_runtime_1.jsx)("a", { href: phone.path, className: "footer-contact-link", children: phone.label })), email && ((0, jsx_runtime_1.jsx)("a", { href: email.path, className: "footer-contact-link", children: email.label })), supportHours && ((0, jsx_runtime_1.jsx)("p", { className: "footer-support-hours", children: supportHours })), socials && socials.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "footer-socials-container", children: socials.map((social, key) => ((0, jsx_runtime_1.jsx)("a", { href: social.path, target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: social.icon, className: "footer-social-icon" }) }, key))) }))] }), columns && columns.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "footer-links-container", children: (0, jsx_runtime_1.jsx)("div", { className: "footer-links-grid", children: columns.map((column, colKey) => ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": `Footer navigation ${column.title}`, children: [(0, jsx_runtime_1.jsx)("h6", { className: "footer-menu-title", children: column.title }), (0, jsx_runtime_1.jsx)("div", { className: "footer-menu-list", children: column.items.map((item, itemKey) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, className: "footer-menu-link", children: item.label }, itemKey))) })] }, colKey))) }) })), copyrightLink && ((0, jsx_runtime_1.jsxs)("p", { className: "footer-copyright", children: ["Copyright \u00A9", (0, jsx_runtime_1.jsx)("a", { href: copyrightLink.path, className: "ml-1", target: "_blank", rel: "noopener noreferrer", children: copyrightLink.label })] }))] }) }));
49
- }
@@ -1,14 +0,0 @@
1
- import { ReactNode } from "react";
2
- export interface HeadbarUserProps {
3
- name: string;
4
- role: string;
5
- avatar?: any;
6
- }
7
- export interface HeadbarProps {
8
- children?: ReactNode;
9
- user?: HeadbarUserProps;
10
- onLogout?: () => void;
11
- onEditProfile?: () => void;
12
- className?: string;
13
- }
14
- export declare function HeadbarComponent({ children, user, onLogout, onEditProfile, className, }: HeadbarProps): import("react").JSX.Element;
@@ -1,32 +0,0 @@
1
- "use client";
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.HeadbarComponent = HeadbarComponent;
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const navigation_1 = require("next/navigation");
8
- const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
9
- const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
10
- const _components_1 = require("@components");
11
- const _utils_1 = require("@utils");
12
- const defaultUser = {
13
- name: "Jhon Duck",
14
- role: "Admin",
15
- };
16
- function HeadbarComponent({ children, user = defaultUser, onLogout, onEditProfile, className = "", }) {
17
- const router = (0, navigation_1.useRouter)();
18
- const [profile, setProfile] = (0, react_1.useState)(false);
19
- const handleLogout = () => {
20
- if (onLogout) {
21
- onLogout();
22
- }
23
- else {
24
- _utils_1.auth.deleteAccessToken();
25
- router.push("/");
26
- }
27
- };
28
- const styles = {
29
- base: (0, _utils_1.cn)("headbar-base", className),
30
- };
31
- return ((0, jsx_runtime_1.jsxs)("div", { className: styles.base, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full ", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-right-controls", children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-icon-button", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "headbar-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-user-profile-trigger", onClick: () => setProfile(!profile), children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-user-avatar-wrapper", children: user.avatar ? ((0, jsx_runtime_1.jsx)(_components_1.ImageComponent, { src: user.avatar, alt: user.name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser })) }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-user-info", children: [(0, jsx_runtime_1.jsx)("h6", { className: "headbar-user-name", children: user.name }), (0, jsx_runtime_1.jsx)("h6", { className: "headbar-user-role", children: user.role })] })] })] }), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: () => setProfile(false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("headbar-dropdown", profile ? "scale-y-100" : "scale-y-0"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "headbar-dropdown-avatar-wrapper", children: user.avatar ? ((0, jsx_runtime_1.jsx)(_components_1.ImageComponent, { src: user.avatar, alt: user.name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser, className: "text-2xl text-light-foreground" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-user-info", children: [(0, jsx_runtime_1.jsx)("h6", { className: "text-lg font-bold line-clamp-1", children: user.name }), (0, jsx_runtime_1.jsx)("h6", { className: "text-xs -mt-1 font-semibold line-clamp-1", children: user.role })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-item", onClick: onEditProfile, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUserCog }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer font-semibold", children: "Edit Profile" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "headbar-dropdown-item-danger", onClick: handleLogout, children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faPowerOff }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer font-semibold", children: "Keluar" })] })] })] }) })] }));
32
- }
@@ -1,22 +0,0 @@
1
- import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
2
- export interface NavbarItemProps {
3
- label: string;
4
- path: string;
5
- }
6
- export interface NavbarProps {
7
- logoTitle?: string;
8
- logoSubtitle?: string;
9
- logoPath?: string;
10
- specialLink?: {
11
- label: string;
12
- path: string;
13
- icon?: IconDefinition;
14
- };
15
- items?: NavbarItemProps[];
16
- isLoggedIn?: boolean;
17
- onLogin?: () => void;
18
- onRegister?: () => void;
19
- onProfile?: () => void;
20
- className?: string;
21
- }
22
- export declare function NavbarComponent({ logoTitle, logoSubtitle, logoPath, specialLink, items, isLoggedIn, onLogin, onRegister, onProfile, className, }: NavbarProps): import("react").JSX.Element;
@@ -1,26 +0,0 @@
1
- "use client";
2
- "use strict";
3
- var __importDefault = (this && this.__importDefault) || function (mod) {
4
- return (mod && mod.__esModule) ? mod : { "default": mod };
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.NavbarComponent = NavbarComponent;
8
- const jsx_runtime_1 = require("react/jsx-runtime");
9
- const link_1 = __importDefault(require("next/link"));
10
- const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
11
- const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
12
- const _components_1 = require("@components");
13
- const _utils_1 = require("@utils");
14
- const defaultItems = [
15
- { label: "Tentang", path: "" },
16
- { label: "Artikel", path: "" },
17
- { label: "Bantuan", path: "" },
18
- ];
19
- const defaultSpecialLink = {
20
- label: "Special Link",
21
- path: "",
22
- icon: free_solid_svg_icons_1.faStore,
23
- };
24
- function NavbarComponent({ logoTitle = "Next Light v.3", logoSubtitle = "The Magic Starter Template", logoPath = "/", specialLink = defaultSpecialLink, items = defaultItems, isLoggedIn = false, onLogin, onRegister, onProfile, className = "", }) {
25
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("navbar-topbar", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-container", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-base", children: ["Ini untuk", (0, jsx_runtime_1.jsxs)(link_1.default, { href: specialLink.path, className: "navbar-special-link", children: [specialLink.icon && (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: specialLink.icon, className: "mr-1" }), specialLink.label] })] }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-sm", children: item.label }) }, key))) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "navbar-main", children: (0, jsx_runtime_1.jsxs)("div", { className: "navbar-main-container", children: [(0, jsx_runtime_1.jsx)(link_1.default, { href: logoPath, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-max", children: [(0, jsx_runtime_1.jsx)("h1", { className: "navbar-logo-title", children: logoTitle }), logoSubtitle && ((0, jsx_runtime_1.jsx)("p", { className: "navbar-logo-subtitle", children: logoSubtitle }))] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-12 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "navbar-menu", children: items.map((item, key) => ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.path, children: (0, jsx_runtime_1.jsx)("div", { className: "navbar-menu-item-base", children: item.label }) }, key))) }), (0, jsx_runtime_1.jsx)("div", { className: "w-full flex items-center gap-8", children: !isLoggedIn ? ((0, jsx_runtime_1.jsxs)("div", { className: "navbar-auth-buttons", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Masuk", size: "sm", onClick: onLogin }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Daftar", size: "sm", variant: "light", onClick: onRegister })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 w-max items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faHistory }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-2 text-light-foreground hover:text-foreground cursor-pointer", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faBell }) }), (0, jsx_runtime_1.jsx)("div", { className: "h-5 w-[1px] bg-foreground mx-2.5" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2.5 px-4 cursor-pointer -ml-2 text-light-foreground hover:text-foreground", onClick: onProfile, children: (0, jsx_runtime_1.jsx)("div", { className: "h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faUser }) }) })] })) })] })] }) })] }));
26
- }
@@ -1,33 +0,0 @@
1
- import { ReactNode } from "react";
2
- export interface SidebarItemProps {
3
- label: string;
4
- key?: number;
5
- leftContent?: any;
6
- rightContent?: any;
7
- path?: string;
8
- items?: SidebarItemProps[];
9
- className?: string;
10
- }
11
- export interface SidebarHeadItemProps {
12
- label: string;
13
- collapse?: boolean;
14
- items?: SidebarItemProps[];
15
- className?: string;
16
- }
17
- export interface sidebarProps {
18
- head?: any;
19
- items?: SidebarHeadItemProps[];
20
- basePath?: string;
21
- show?: boolean;
22
- toggle?: boolean;
23
- onToggleChange?: () => void;
24
- children?: any;
25
- hasAccess?: number[];
26
- onChange?: () => void;
27
- /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
28
- className?: string;
29
- }
30
- export declare function SidebarComponent({ head, items, basePath, toggle, onToggleChange, className, }: sidebarProps): import("react").JSX.Element;
31
- export declare function SidebarContentComponent({ children }: {
32
- children: ReactNode;
33
- }): import("react").JSX.Element;
@@ -1,87 +0,0 @@
1
- "use client";
2
- "use strict";
3
- var __importDefault = (this && this.__importDefault) || function (mod) {
4
- return (mod && mod.__esModule) ? mod : { "default": mod };
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.SidebarComponent = SidebarComponent;
8
- exports.SidebarContentComponent = SidebarContentComponent;
9
- const jsx_runtime_1 = require("react/jsx-runtime");
10
- const react_1 = require("react");
11
- const navigation_1 = require("next/navigation");
12
- const link_1 = __importDefault(require("next/link"));
13
- const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
14
- const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
15
- const _utils_1 = require("@utils");
16
- ;
17
- ;
18
- ;
19
- function SidebarWrapper({ path, children, onClick, }) {
20
- if (path) {
21
- return (0, jsx_runtime_1.jsx)(link_1.default, { href: path, children: children });
22
- }
23
- else {
24
- return (0, jsx_runtime_1.jsx)("div", { onClick: () => onClick?.(), children: children });
25
- }
26
- }
27
- function SidebarComponent({ head, items, basePath, toggle, onToggleChange,
28
- // onChange,
29
- // hasAccess,
30
- className = "", }) {
31
- const pathName = (0, navigation_1.usePathname)();
32
- const [shows, setShows] = (0, react_1.useState)([]);
33
- const setShow = (key) => {
34
- setShows((prevShows) => prevShows?.find((pk) => pk === key)
35
- ? prevShows.filter((pk) => pk !== key)
36
- : [...prevShows, key]);
37
- };
38
- const checkShow = (key) => {
39
- if (shows?.includes(key)) {
40
- return true;
41
- }
42
- return false;
43
- };
44
- const cekActive = (path) => {
45
- const activePath = pathName?.split("?")[0]?.replace(`${basePath || ""}`, "") || "/";
46
- const currentPath = `${path ? `${path}` : ""}`;
47
- const isPrefix = (longer, shorter) => {
48
- return (longer.startsWith(shorter) &&
49
- (longer === shorter || longer[shorter.length] === "/"));
50
- };
51
- return (isPrefix(activePath, currentPath) || isPrefix(currentPath, activePath));
52
- };
53
- (0, react_1.useEffect)(() => {
54
- items?.map((head, head_key) => {
55
- head?.items?.map((menu, key) => {
56
- if (menu?.path && cekActive(menu?.path || "")) {
57
- setShow(`${head_key}`);
58
- }
59
- menu?.items?.map((child) => {
60
- if (child?.path && cekActive(child?.path || "")) {
61
- setShow(`${head_key}`);
62
- setShow(`${head_key}.${key}`);
63
- }
64
- });
65
- });
66
- });
67
- }, []);
68
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle ? "scale-100 md:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onToggleChange?.() }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle ? "scale-x-100 md:scale-x-0" : "scale-x-0 md:scale-x-100", (0, _utils_1.pcn)(className, "base")), children: [head, (0, jsx_runtime_1.jsx)("nav", { className: "flex flex-col flex-1 mt-3", children: items?.map((menu_head, menu_head_key) => {
69
- return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "px-2 pt-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-head-item", menu_head?.collapse && "cursor-pointer", (0, _utils_1.pcn)(className, "head-item"), menu_head?.className), onClick: () => setShow(String(menu_head_key)), children: [menu_head?.label, menu_head.collapse && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown, className: (0, _utils_1.cn)("text-xs", checkShow(String(menu_head_key)) && "rotate-180") }))] }), (!menu_head?.collapse || checkShow(String(menu_head_key))) &&
70
- menu_head?.items?.map((menu, menu_key) => {
71
- return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path &&
72
- cekActive(menu?.path || "") &&
73
- "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronUp, className: `text-sm ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
74
- checkShow(`${menu_head_key}.${menu_key}`) &&
75
- menu?.items?.map((child, menu_child_key) => {
76
- return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(SidebarWrapper, { path: child?.path
77
- ? `${basePath || ""}${child?.path}`
78
- : "", onClick: () => setShow(`${menu_head_key}.${menu_key}.${menu_child_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-child-item", child?.path &&
79
- cekActive(child?.path || "") &&
80
- "sidebar-child-item-active", (0, _utils_1.pcn)(className, "child-item"), child?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: child?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.rightContent, child?.items?.length && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronUp, className: `block text-sm ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }) }, `${menu_head_key}.${menu_key}.${menu_child_key}`));
81
- }) }) })] }, `${menu_head_key}.${menu_key}`));
82
- })] }) }, menu_head_key));
83
- }) })] })] }));
84
- }
85
- function SidebarContentComponent({ children }) {
86
- return ((0, jsx_runtime_1.jsx)("main", { className: "sidebar-main-content", children: children }));
87
- }
@@ -1,13 +0,0 @@
1
- export interface TabbarItemProps {
2
- label: string;
3
- value: string | number;
4
- }
5
- export interface TabbarProps {
6
- items: string[] | TabbarItemProps[];
7
- onChange?: (item: string | number) => void;
8
- active?: string | number;
9
- className?: string;
10
- }
11
- export declare function TabbarComponent({ items, onChange, active,
12
- /** Use custom class with: "item::", "active::". */
13
- className, }: TabbarProps): import("react").JSX.Element;
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TabbarComponent = TabbarComponent;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const _utils_1 = require("@utils");
6
- ;
7
- ;
8
- function TabbarComponent({ items, onChange, active,
9
- /** Use custom class with: "item::", "active::". */
10
- className = "", }) {
11
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-base", (0, _utils_1.pcn)(className, "base")), children: items?.map((item, i) => {
12
- const isItemActive = active == (typeof item != "string" ? item?.value : item);
13
- return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("tabbar-item", isItemActive
14
- ? "tabbar-item-active"
15
- : "tabbar-item-inactive", (0, _utils_1.pcn)(className, "item"), (0, _utils_1.pcn)(className, "active")), onClick: () => onChange?.(typeof item != "string" ? item?.value : item), children: typeof item != "string" ? item?.label : item }, i));
16
- }) }) }));
17
- }
@@ -1,9 +0,0 @@
1
- import { ReactNode } from "react";
2
- export interface WizardProps {
3
- items: {
4
- label: string;
5
- circle_content: ReactNode;
6
- }[];
7
- active: number;
8
- }
9
- export declare function WizardComponent({ items, active }: WizardProps): import("react").JSX.Element;
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.WizardComponent = WizardComponent;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const _utils_1 = require("@utils");
6
- ;
7
- function WizardComponent({ items, active }) {
8
- return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-full py-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex", children: items.map((item, key) => {
9
- const isStepActive = key <= active;
10
- const isLineActive = key <= active + 1;
11
- const isLineGradient = key == active + 1;
12
- return ((0, jsx_runtime_1.jsxs)("div", { style: { width: `calc(100% * 1 / ${items.length})` }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "wizard-step-header", children: [key > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "wizard-progress-bar-wrapper", style: {
13
- width: "calc(100% - 2.5rem - 1rem)",
14
- top: "50%",
15
- transform: "translate(-50%, -50%)",
16
- }, children: (0, jsx_runtime_1.jsx)("div", { className: "wizard-progress-bar-bg", children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("wizard-progress-bar-fill", isLineGradient
17
- ? "wizard-progress-bar-fill-gradient"
18
- : isLineActive
19
- ? "wizard-progress-bar-fill-active"
20
- : "") }) }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("wizard-circle", isStepActive
21
- ? "wizard-circle-active"
22
- : "wizard-circle-inactive"), children: (0, jsx_runtime_1.jsx)("span", { className: "text-center w-full", children: item.circle_content }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "wizard-label", children: item.label })] }, key));
23
- }) }) }) }));
24
- }
@@ -1,93 +0,0 @@
1
- import React, { ReactNode } from "react";
2
- import { ApiType, FormErrorType, FormRegisterType, FormValueType, ValidationRules, DBSchema } from "@utils";
3
- import { InputProps, InputCheckboxProps, InputCurrencyProps, InputDateProps, InputNumberProps, InputRadioProps, SelectProps, InputPasswordProps, InputOtpProps, InputTimeProps, InputImageProps, InputDateTimeProps, InputMapProps } from "@components";
4
- type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
5
- formControl: (name: string) => {
6
- register: (regName: string, regValidations?: ValidationRules | undefined) => void;
7
- unregister: (regName: string) => void;
8
- onChange: (e: any) => void;
9
- value: any;
10
- invalid: any;
11
- };
12
- values: {
13
- name: string;
14
- value?: any;
15
- }[];
16
- setValues: (values: FormValueType[]) => void;
17
- errors: FormErrorType[];
18
- setErrors: (errors: FormErrorType[]) => void;
19
- setRegister: (registers: FormRegisterType) => void;
20
- prefixName?: string;
21
- }) => ReactNode;
22
- type ClusterConstruction = {
23
- name: string;
24
- label: string;
25
- tip: string;
26
- fields: FormType[];
27
- wrap: boolean;
28
- min?: number;
29
- /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
30
- className: string;
31
- };
32
- type ConstructionMap = {
33
- default: InputProps;
34
- check: InputCheckboxProps;
35
- currency: InputCurrencyProps;
36
- date: InputDateProps;
37
- datetime: InputDateTimeProps;
38
- time: InputTimeProps;
39
- image: InputImageProps;
40
- cluster: ClusterConstruction;
41
- number: InputNumberProps;
42
- radio: InputRadioProps;
43
- select: SelectProps;
44
- "enter-password": InputPasswordProps;
45
- otp: InputOtpProps;
46
- map: InputMapProps;
47
- custom: formCustomConstructionProps;
48
- };
49
- type TypeKeys = keyof ConstructionMap;
50
- export type WatchContext = {
51
- values: Record<string, any>;
52
- self: string;
53
- prev: WatchAction;
54
- };
55
- export type WatchAction = {
56
- disabled?: boolean;
57
- hidden?: boolean;
58
- value?: any;
59
- required?: boolean;
60
- readonly?: boolean;
61
- reset?: boolean;
62
- };
63
- export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
64
- col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
65
- className?: string;
66
- construction?: ConstructionMap[T];
67
- type?: T;
68
- onHide?: (values: any) => boolean;
69
- watch?: (ctx: WatchContext) => WatchAction | undefined;
70
- }
71
- export interface formSupervisionProps {
72
- title?: string;
73
- fields: FormType[];
74
- confirmation?: boolean;
75
- defaultValue?: object | null;
76
- payload?: (values: any) => Promise<object> | object;
77
- submitControl: (ApiType & {
78
- idb?: never;
79
- }) | {
80
- idb: {
81
- store: string;
82
- schema?: DBSchema;
83
- };
84
- };
85
- footerControl?: ({ loading }: {
86
- loading: boolean;
87
- }) => ReactNode;
88
- onSuccess?: (data: any) => void;
89
- onError?: (code: number) => void;
90
- className?: string;
91
- }
92
- export declare function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className, }: formSupervisionProps): React.JSX.Element;
93
- export {};