negodesign 0.0.6 → 0.0.8

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 (208) hide show
  1. package/dist/assets/login-01-admin.webp +0 -0
  2. package/dist/components/NegoDesign.svelte +24 -0
  3. package/dist/components/NegoDesign.svelte.d.ts +9 -0
  4. package/dist/components/core/button/ButtonSend.svelte +15 -0
  5. package/dist/components/core/button/ButtonSend.svelte.d.ts +4 -0
  6. package/dist/components/core/datatable/ui/DataTableActions.svelte +1 -1
  7. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +1 -1
  8. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +1 -1
  9. package/dist/components/core/form/ui/input-code-otp.svelte +58 -0
  10. package/dist/components/core/form/ui/input-code-otp.svelte.d.ts +10 -0
  11. package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -0
  12. package/dist/components/core/form/ui/input-email-or-phone.svelte.d.ts +4 -0
  13. package/dist/components/core/form/ui/input-phone.svelte +21 -11
  14. package/dist/components/{pages/login/01/ui → core/panel}/LeftHero.svelte +16 -4
  15. package/dist/components/{pages/login/01/ui → core/panel}/LeftHero.svelte.d.ts +1 -1
  16. package/dist/components/core/tabs/data/TabModel.d.ts +1 -1
  17. package/dist/components/core/tabs/ui/tab-underline.svelte +3 -1
  18. package/dist/components/pages/forget-password/01/ui/ForgetPasswordCard.svelte +59 -0
  19. package/dist/components/pages/forget-password/01/ui/ForgetPasswordCard.svelte.d.ts +15 -0
  20. package/dist/components/pages/forget-password/01/ui/FormForgetPassword.svelte +37 -0
  21. package/dist/components/pages/forget-password/01/ui/FormForgetPassword.svelte.d.ts +8 -0
  22. package/dist/components/pages/forget-password/01/ui/PageForgetPassword01.svelte +74 -0
  23. package/dist/components/pages/forget-password/01/ui/PageForgetPassword01.svelte.d.ts +4 -0
  24. package/dist/components/pages/forget-password/PageForgetPassword.svelte +19 -0
  25. package/dist/components/pages/forget-password/PageForgetPassword.svelte.d.ts +15 -0
  26. package/dist/components/pages/forget-password/types.d.ts +15 -0
  27. package/dist/components/pages/login/01/ui/FormLogin.svelte +6 -4
  28. package/dist/components/pages/login/01/ui/FormLogin.svelte.d.ts +4 -2
  29. package/dist/components/pages/login/01/ui/FormLoginEmailPassword.svelte +5 -4
  30. package/dist/components/pages/login/01/ui/FormLoginEmailPassword.svelte.d.ts +3 -2
  31. package/dist/components/pages/login/01/ui/FormLoginPhonePassword.svelte +5 -4
  32. package/dist/components/pages/login/01/ui/FormLoginPhonePassword.svelte.d.ts +3 -2
  33. package/dist/components/pages/login/01/ui/FormLoginUsernamePassword.svelte +5 -4
  34. package/dist/components/pages/login/01/ui/FormLoginUsernamePassword.svelte.d.ts +3 -2
  35. package/dist/components/pages/login/01/ui/{AuthCard.svelte → LoginCard.svelte} +16 -8
  36. package/dist/components/pages/login/01/ui/{AuthCard.svelte.d.ts → LoginCard.svelte.d.ts} +6 -5
  37. package/dist/components/pages/login/01/ui/PageLogin01.svelte +86 -49
  38. package/dist/components/pages/login/01/ui/PageLogin01.svelte.d.ts +1 -1
  39. package/dist/components/pages/login/PageLogin.svelte +1 -1
  40. package/dist/components/pages/login/PageLogin.svelte.d.ts +1 -1
  41. package/dist/components/pages/login/{01/data/page-props.d.ts → types.d.ts} +4 -2
  42. package/dist/components/pages/login/types.js +1 -0
  43. package/dist/components/pages/otp-verification/01/ui/FormOtpVerification.svelte +29 -0
  44. package/dist/components/pages/otp-verification/01/ui/FormOtpVerification.svelte.d.ts +8 -0
  45. package/dist/components/pages/otp-verification/01/ui/OtpVerificationCard.svelte +56 -0
  46. package/dist/components/pages/otp-verification/01/ui/OtpVerificationCard.svelte.d.ts +15 -0
  47. package/dist/components/pages/otp-verification/01/ui/PageOtpVerification01.svelte +72 -0
  48. package/dist/components/pages/otp-verification/01/ui/PageOtpVerification01.svelte.d.ts +4 -0
  49. package/dist/components/pages/otp-verification/PageOtpVerification.svelte +16 -0
  50. package/dist/components/pages/otp-verification/PageOtpVerification.svelte.d.ts +12 -0
  51. package/dist/components/pages/otp-verification/types.d.ts +13 -0
  52. package/dist/components/pages/otp-verification/types.js +1 -0
  53. package/dist/components/pages/reset-password/01/ui/FormResetPassword.svelte +41 -0
  54. package/dist/components/pages/reset-password/01/ui/FormResetPassword.svelte.d.ts +8 -0
  55. package/dist/components/pages/reset-password/01/ui/PageResetPassword01.svelte +72 -0
  56. package/dist/components/pages/reset-password/01/ui/PageResetPassword01.svelte.d.ts +4 -0
  57. package/dist/components/pages/reset-password/01/ui/ResetPasswordCard.svelte +56 -0
  58. package/dist/components/pages/reset-password/01/ui/ResetPasswordCard.svelte.d.ts +15 -0
  59. package/dist/components/pages/reset-password/PageResetPassword.svelte +16 -0
  60. package/dist/components/pages/reset-password/PageResetPassword.svelte.d.ts +12 -0
  61. package/dist/components/pages/reset-password/types.d.ts +15 -0
  62. package/dist/components/pages/reset-password/types.js +1 -0
  63. package/dist/components/ui/badge/badge.svelte.d.ts +20 -20
  64. package/dist/components/ui/button/button.svelte +47 -28
  65. package/dist/components/ui/button/button.svelte.d.ts +77 -50
  66. package/dist/components/ui/button/index.d.ts +2 -2
  67. package/dist/components/ui/button/index.js +2 -2
  68. package/dist/components/ui/command/command-dialog.svelte +42 -0
  69. package/dist/components/ui/command/command-dialog.svelte.d.ts +14 -0
  70. package/dist/components/ui/command/command-empty.svelte +17 -0
  71. package/dist/components/ui/command/command-empty.svelte.d.ts +4 -0
  72. package/dist/components/ui/command/command-group.svelte +33 -0
  73. package/dist/components/ui/command/command-group.svelte.d.ts +7 -0
  74. package/dist/components/ui/command/command-input.svelte +33 -0
  75. package/dist/components/ui/command/command-input.svelte.d.ts +4 -0
  76. package/dist/components/ui/command/command-item.svelte +27 -0
  77. package/dist/components/ui/command/command-item.svelte.d.ts +4 -0
  78. package/dist/components/ui/command/command-link-item.svelte +20 -0
  79. package/dist/components/ui/command/command-link-item.svelte.d.ts +4 -0
  80. package/dist/components/ui/command/command-list.svelte +20 -0
  81. package/dist/components/ui/command/command-list.svelte.d.ts +4 -0
  82. package/dist/components/ui/command/command-loading.svelte +7 -0
  83. package/dist/components/ui/command/command-loading.svelte.d.ts +4 -0
  84. package/dist/components/ui/command/command-separator.svelte +17 -0
  85. package/dist/components/ui/command/command-separator.svelte.d.ts +4 -0
  86. package/dist/components/ui/command/command-shortcut.svelte +23 -0
  87. package/dist/components/ui/command/command-shortcut.svelte.d.ts +5 -0
  88. package/dist/components/ui/command/command.svelte +28 -0
  89. package/dist/components/ui/command/command.svelte.d.ts +8 -0
  90. package/dist/components/ui/command/index.d.ts +12 -0
  91. package/dist/components/ui/command/index.js +14 -0
  92. package/dist/components/ui/dialog/dialog-close.svelte +11 -0
  93. package/dist/components/ui/dialog/dialog-close.svelte.d.ts +4 -0
  94. package/dist/components/ui/dialog/dialog-content.svelte +48 -0
  95. package/dist/components/ui/dialog/dialog-content.svelte.d.ts +13 -0
  96. package/dist/components/ui/dialog/dialog-description.svelte +20 -0
  97. package/dist/components/ui/dialog/dialog-description.svelte.d.ts +4 -0
  98. package/dist/components/ui/dialog/dialog-footer.svelte +32 -0
  99. package/dist/components/ui/dialog/dialog-footer.svelte.d.ts +8 -0
  100. package/dist/components/ui/dialog/dialog-header.svelte +20 -0
  101. package/dist/components/ui/dialog/dialog-header.svelte.d.ts +5 -0
  102. package/dist/components/ui/dialog/dialog-overlay.svelte +20 -0
  103. package/dist/components/ui/dialog/dialog-overlay.svelte.d.ts +4 -0
  104. package/dist/components/ui/dialog/dialog-portal.svelte +7 -0
  105. package/dist/components/ui/dialog/dialog-portal.svelte.d.ts +3 -0
  106. package/dist/components/ui/dialog/dialog-title.svelte +17 -0
  107. package/dist/components/ui/dialog/dialog-title.svelte.d.ts +4 -0
  108. package/dist/components/ui/dialog/dialog-trigger.svelte +11 -0
  109. package/dist/components/ui/dialog/dialog-trigger.svelte.d.ts +4 -0
  110. package/dist/components/ui/dialog/dialog.svelte +7 -0
  111. package/dist/components/ui/dialog/dialog.svelte.d.ts +3 -0
  112. package/dist/components/ui/dialog/index.d.ts +11 -0
  113. package/dist/components/ui/dialog/index.js +13 -0
  114. package/dist/components/ui/input/index.d.ts +2 -2
  115. package/dist/components/ui/input/index.js +2 -2
  116. package/dist/components/ui/input/input.svelte +9 -9
  117. package/dist/components/ui/input/input.svelte.d.ts +5 -5
  118. package/dist/components/ui/input-group/index.d.ts +7 -0
  119. package/dist/components/ui/input-group/index.js +9 -0
  120. package/dist/components/ui/input-group/input-group-addon.svelte +53 -0
  121. package/dist/components/ui/input-group/input-group-addon.svelte.d.ts +32 -0
  122. package/dist/components/ui/input-group/input-group-button.svelte +49 -0
  123. package/dist/components/ui/input-group/input-group-button.svelte.d.ts +32 -0
  124. package/dist/components/ui/input-group/input-group-input.svelte +23 -0
  125. package/dist/components/ui/input-group/input-group-input.svelte.d.ts +11 -0
  126. package/dist/components/ui/input-group/input-group-text.svelte +22 -0
  127. package/dist/components/ui/input-group/input-group-text.svelte.d.ts +5 -0
  128. package/dist/components/ui/input-group/input-group-textarea.svelte +23 -0
  129. package/dist/components/ui/input-group/input-group-textarea.svelte.d.ts +3 -0
  130. package/dist/components/ui/input-group/input-group.svelte +24 -0
  131. package/dist/components/ui/input-group/input-group.svelte.d.ts +5 -0
  132. package/dist/components/ui/input-otp/index.d.ts +5 -0
  133. package/dist/components/ui/input-otp/index.js +5 -0
  134. package/dist/components/ui/input-otp/input-otp-group.svelte +20 -0
  135. package/dist/components/ui/input-otp/input-otp-group.svelte.d.ts +5 -0
  136. package/dist/components/ui/input-otp/input-otp-separator.svelte +28 -0
  137. package/dist/components/ui/input-otp/input-otp-separator.svelte.d.ts +5 -0
  138. package/dist/components/ui/input-otp/input-otp-slot.svelte +31 -0
  139. package/dist/components/ui/input-otp/input-otp-slot.svelte.d.ts +4 -0
  140. package/dist/components/ui/input-otp/input-otp.svelte +23 -0
  141. package/dist/components/ui/input-otp/input-otp.svelte.d.ts +4 -0
  142. package/dist/components/ui/language-switcher/index.d.ts +1 -1
  143. package/dist/components/ui/language-switcher/language-switcher.svelte +1 -1
  144. package/dist/components/ui/light-switch/light-switch.svelte +2 -2
  145. package/dist/components/ui/light-switch/light-switch.svelte.d.ts +1 -1
  146. package/dist/components/ui/phone-input/country-selector.svelte +101 -0
  147. package/dist/components/ui/phone-input/country-selector.svelte.d.ts +13 -0
  148. package/dist/components/ui/phone-input/flag.svelte +21 -0
  149. package/dist/components/ui/phone-input/flag.svelte.d.ts +7 -0
  150. package/dist/components/ui/phone-input/flags.d.ts +2 -0
  151. package/dist/components/ui/phone-input/flags.js +10 -0
  152. package/dist/components/ui/phone-input/index.d.ts +3 -0
  153. package/dist/components/ui/phone-input/index.js +2 -0
  154. package/dist/components/ui/phone-input/phone-input.svelte +63 -0
  155. package/dist/components/ui/phone-input/phone-input.svelte.d.ts +7 -0
  156. package/dist/components/ui/phone-input/types.d.ts +16 -0
  157. package/dist/components/ui/phone-input/types.js +1 -0
  158. package/dist/components/ui/popover/index.d.ts +9 -0
  159. package/dist/components/ui/popover/index.js +11 -0
  160. package/dist/components/ui/popover/popover-close.svelte +7 -0
  161. package/dist/components/ui/popover/popover-close.svelte.d.ts +4 -0
  162. package/dist/components/ui/popover/popover-content.svelte +31 -0
  163. package/dist/components/ui/popover/popover-content.svelte.d.ts +10 -0
  164. package/dist/components/ui/popover/popover-description.svelte +20 -0
  165. package/dist/components/ui/popover/popover-description.svelte.d.ts +5 -0
  166. package/dist/components/ui/popover/popover-header.svelte +20 -0
  167. package/dist/components/ui/popover/popover-header.svelte.d.ts +5 -0
  168. package/dist/components/ui/popover/popover-portal.svelte +7 -0
  169. package/dist/components/ui/popover/popover-portal.svelte.d.ts +3 -0
  170. package/dist/components/ui/popover/popover-title.svelte +15 -0
  171. package/dist/components/ui/popover/popover-title.svelte.d.ts +5 -0
  172. package/dist/components/ui/popover/popover-trigger.svelte +17 -0
  173. package/dist/components/ui/popover/popover-trigger.svelte.d.ts +4 -0
  174. package/dist/components/ui/popover/popover.svelte +7 -0
  175. package/dist/components/ui/popover/popover.svelte.d.ts +3 -0
  176. package/dist/components/ui/scroll-area/index.d.ts +3 -0
  177. package/dist/components/ui/scroll-area/index.js +5 -0
  178. package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte +30 -0
  179. package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte.d.ts +4 -0
  180. package/dist/components/ui/scroll-area/scroll-area.svelte +43 -0
  181. package/dist/components/ui/scroll-area/scroll-area.svelte.d.ts +11 -0
  182. package/dist/components/ui/sidebar/sidebar-menu-button.svelte.d.ts +17 -17
  183. package/dist/components/ui/tabs/tabs-list.svelte.d.ts +8 -8
  184. package/dist/components/ui/textarea/index.d.ts +2 -0
  185. package/dist/components/ui/textarea/index.js +4 -0
  186. package/dist/components/ui/textarea/textarea.svelte +23 -0
  187. package/dist/components/ui/textarea/textarea.svelte.d.ts +5 -0
  188. package/dist/globals.css +579 -22
  189. package/dist/i18n/config.d.ts +15 -0
  190. package/dist/i18n/config.js +38 -0
  191. package/dist/i18n/index.d.ts +14 -2
  192. package/dist/i18n/index.js +16 -4
  193. package/dist/i18n/langs/en.d.ts +76 -0
  194. package/dist/i18n/langs/en.js +75 -0
  195. package/dist/i18n/langs/pt.d.ts +76 -0
  196. package/dist/i18n/langs/pt.js +75 -0
  197. package/dist/i18n/translations.d.ts +76 -0
  198. package/dist/i18n/translations.js +4 -74
  199. package/dist/index.d.ts +28 -3
  200. package/dist/index.js +28 -3
  201. package/dist/types/index.d.ts +27 -0
  202. package/dist/types/index.js +1 -0
  203. package/package.json +14 -3
  204. package/dist/components/button.svelte +0 -83
  205. package/dist/components/button.svelte.d.ts +0 -32
  206. package/dist/components/pages/NegoDesignLayout.svelte +0 -7
  207. package/dist/components/pages/NegoDesignLayout.svelte.d.ts +0 -5
  208. /package/dist/components/pages/{login/01/data/page-props.js → forget-password/types.js} +0 -0
Binary file
@@ -0,0 +1,24 @@
1
+ <script lang="ts">
2
+ import { ModeWatcher } from "mode-watcher";
3
+ import { setUserTranslations } from "../i18n/config";
4
+
5
+ type Translations = Record<string, Record<string, string>>;
6
+
7
+ let {
8
+ translations,
9
+ children,
10
+ }: {
11
+ /** Traduções customizadas por idioma. São mergeadas com as traduções base da lib. */
12
+ translations?: Translations;
13
+ children: any;
14
+ } = $props();
15
+
16
+ $effect(() => {
17
+ if (translations) {
18
+ setUserTranslations(translations);
19
+ }
20
+ });
21
+ </script>
22
+
23
+ <ModeWatcher />
24
+ {@render children()}
@@ -0,0 +1,9 @@
1
+ type Translations = Record<string, Record<string, string>>;
2
+ type $$ComponentProps = {
3
+ /** Traduções customizadas por idioma. São mergeadas com as traduções base da lib. */
4
+ translations?: Translations;
5
+ children: any;
6
+ };
7
+ declare const NegoDesign: import("svelte").Component<$$ComponentProps, {}, "">;
8
+ type NegoDesign = ReturnType<typeof NegoDesign>;
9
+ export default NegoDesign;
@@ -0,0 +1,15 @@
1
+ <script lang="ts">
2
+ import Button, {
3
+ type ButtonProps,
4
+ } from "../../ui/button/button.svelte";
5
+ import { t } from "../../../i18n";
6
+ import { Login02Icon } from "@hugeicons/core-free-icons";
7
+ import { HugeiconsIcon } from "@hugeicons/svelte";
8
+
9
+ let { ...restProps }: ButtonProps = $props();
10
+ </script>
11
+
12
+ <Button class="w-full flex items-center gap-2" {...restProps}>
13
+ <HugeiconsIcon icon={Login02Icon} size={16} />
14
+ {$t("button.send")}
15
+ </Button>
@@ -0,0 +1,4 @@
1
+ import { type ButtonProps } from "../../ui/button/button.svelte";
2
+ declare const ButtonSend: import("svelte").Component<ButtonProps, {}, "">;
3
+ type ButtonSend = ReturnType<typeof ButtonSend>;
4
+ export default ButtonSend;
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" generics="T">
2
2
  import type { CellContext } from "@tanstack/table-core";
3
3
  import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
4
- import Button from "../../../button.svelte";
4
+ import Button from "../../../ui/button/button.svelte";
5
5
  import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
6
6
  import { HugeiconsIcon } from "@hugeicons/svelte";
7
7
 
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" generics="T">
2
- import Button from "../../../button.svelte";
2
+ import Button from "../../../ui/button/button.svelte";
3
3
  import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
4
4
  import { Input } from "../../../ui/input/index.js";
5
5
  import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" generics="T">
2
- import Button from "../../../button.svelte";
2
+ import Button from "../../../ui/button/button.svelte";
3
3
  import type { Table } from "@tanstack/table-core";
4
4
 
5
5
  type Props = {
@@ -0,0 +1,58 @@
1
+ <script lang="ts">
2
+ import * as InputOTP from "../../../ui/input-otp/index.js";
3
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
4
+ import { Label } from "../../../ui/label";
5
+ import { t } from "../../../../i18n";
6
+
7
+ /** Campo de input para código OTP com caixas configuráveis. */
8
+ let {
9
+ label,
10
+ isLabel,
11
+ placeholder,
12
+ length = 6,
13
+ separator = true,
14
+ value = $bindable(""),
15
+ }: InputLabelProps & {
16
+ /** Quantidade de caixas do código OTP. Padrão: 6 */
17
+ length?: number;
18
+ /** Exibir separador entre os grupos. Padrão: true */
19
+ separator?: boolean;
20
+ } = $props();
21
+
22
+ const half = $derived(Math.ceil(length / 2));
23
+ </script>
24
+
25
+ {#snippet otpInput()}
26
+ <InputOTP.Root maxlength={length} bind:value placeholder={placeholder || $t("input.otp.placeholder")}>
27
+ {#snippet children({ cells })}
28
+ {#if separator}
29
+ <InputOTP.Group>
30
+ {#each cells.slice(0, half) as cell, i (i)}
31
+ <InputOTP.Slot {cell} />
32
+ {/each}
33
+ </InputOTP.Group>
34
+ <InputOTP.Separator />
35
+ <InputOTP.Group>
36
+ {#each cells.slice(half, length) as cell, i (i)}
37
+ <InputOTP.Slot {cell} />
38
+ {/each}
39
+ </InputOTP.Group>
40
+ {:else}
41
+ <InputOTP.Group>
42
+ {#each cells as cell, i (i)}
43
+ <InputOTP.Slot {cell} />
44
+ {/each}
45
+ </InputOTP.Group>
46
+ {/if}
47
+ {/snippet}
48
+ </InputOTP.Root>
49
+ {/snippet}
50
+
51
+ {#if isLabel}
52
+ <div class="flex flex-col gap-3 w-full">
53
+ <Label>{label ?? $t("input.otp.label")}</Label>
54
+ {@render otpInput()}
55
+ </div>
56
+ {:else}
57
+ {@render otpInput()}
58
+ {/if}
@@ -0,0 +1,10 @@
1
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
2
+ type $$ComponentProps = InputLabelProps & {
3
+ /** Quantidade de caixas do código OTP. Padrão: 6 */
4
+ length?: number;
5
+ /** Exibir separador entre os grupos. Padrão: true */
6
+ separator?: boolean;
7
+ };
8
+ declare const InputCodeOtp: import("svelte").Component<$$ComponentProps, {}, "value">;
9
+ type InputCodeOtp = ReturnType<typeof InputCodeOtp>;
10
+ export default InputCodeOtp;
@@ -0,0 +1,23 @@
1
+ <script lang="ts">
2
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
3
+ import InputBase from "./input-base.svelte";
4
+ import { t } from "../../../../i18n";
5
+
6
+ /** Campo de input para email com ícone e label. */
7
+ let {
8
+ label,
9
+ placeholder,
10
+ value = $bindable(""),
11
+ ...restProps
12
+ }: InputLabelProps = $props();
13
+ </script>
14
+
15
+ <InputBase
16
+ type="text"
17
+ label={label || $t("input.email-or-phone.label")}
18
+ placeholder={placeholder || $t("input.email-or-phone.placeholder")}
19
+ isLabel
20
+ isIcon
21
+ bind:value
22
+ {...restProps}
23
+ />
@@ -0,0 +1,4 @@
1
+ import type { InputLabelProps } from "../data/InputLabel.svelte";
2
+ declare const InputEmailOrPhone: import("svelte").Component<InputLabelProps, {}, "value">;
3
+ type InputEmailOrPhone = ReturnType<typeof InputEmailOrPhone>;
4
+ export default InputEmailOrPhone;
@@ -1,23 +1,33 @@
1
1
  <script lang="ts">
2
+ import { PhoneInput } from "../../../ui/phone-input";
2
3
  import type { InputLabelProps } from "../data/InputLabel.svelte";
3
- import InputBase from "./input-base.svelte";
4
+ import { Label } from "../../../ui/label";
4
5
  import { t } from "../../../../i18n";
5
6
 
6
7
  /** Campo de input para telefone com ícone e label. */
7
8
  let {
8
9
  label,
10
+ isLabel,
9
11
  placeholder,
10
12
  value = $bindable(""),
11
- ...restProps
12
13
  }: InputLabelProps = $props();
13
14
  </script>
14
15
 
15
- <InputBase
16
- type="text"
17
- label={label || $t("input.phone.label")}
18
- placeholder={placeholder || $t("input.phone.placeholder")}
19
- isLabel
20
- isIcon
21
- bind:value
22
- {...restProps}
23
- />
16
+ {#if isLabel}
17
+ <div class="flex flex-col gap-3 w-full">
18
+ {#if label}
19
+ <Label>{label}</Label>
20
+ {:else}
21
+ <Label>{$t("input.email-or-phone.label")}</Label>
22
+ {/if}
23
+ <PhoneInput
24
+ placeholder={placeholder || $t("input.email-or-phone.placeholder")}
25
+ bind:value
26
+ />
27
+ </div>
28
+ {:else}
29
+ <PhoneInput
30
+ placeholder={placeholder || $t("input.email-or-phone.placeholder")}
31
+ bind:value
32
+ />
33
+ {/if}
@@ -1,9 +1,11 @@
1
1
  <script lang="ts">
2
2
  import { HugeiconsIcon } from "@hugeicons/svelte";
3
3
  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
4
- import type { CarouselProps } from "../../../../core/carousel/data/CarouselModel";
4
+ import type { CarouselProps } from "../carousel/data/CarouselModel";
5
5
  import type { Snippet } from "svelte";
6
- import Button from "../../../../ui/button/button.svelte";
6
+ import Button from "../../ui/button/button.svelte";
7
+ import { t } from "../../../i18n";
8
+ import Logo from "../../../assets/login-01-admin.webp";
7
9
 
8
10
  type Props = {
9
11
  title?: string | Snippet;
@@ -45,13 +47,13 @@
45
47
  {#if typeof title === "function"}
46
48
  {@render title()}
47
49
  {:else}
48
- {title || ""}
50
+ {title || $t("label.welcome")}
49
51
  {/if}
50
52
  </div>
51
53
  </div>
52
54
 
53
55
  <section class="flex flex-col gap-5">
54
- <div class="my-auto max-w-sm md:max-w-md">
56
+ <div class="my-auto max-w-sm md:max-w-md lg:max-w-[430px]">
55
57
  {#if currentItem}
56
58
  {#key currentIndex}
57
59
  <div
@@ -100,6 +102,16 @@
100
102
  {/each}
101
103
  </div>
102
104
  </section>
105
+
106
+ <aside
107
+ class="hidden z-50 lg:block lg:absolute lg:right-0 lg:-bottom-3 lg:w-105 lg:h-105"
108
+ >
109
+ <img
110
+ src={Logo}
111
+ alt=""
112
+ class="shadow rounded-tl-lg rounded-bl-lg lg:w-105 lg:h-105"
113
+ />
114
+ </aside>
103
115
  </div>
104
116
 
105
117
  <aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>
@@ -1,4 +1,4 @@
1
- import type { CarouselProps } from "../../../../core/carousel/data/CarouselModel";
1
+ import type { CarouselProps } from "../carousel/data/CarouselModel";
2
2
  import type { Snippet } from "svelte";
3
3
  type Props = {
4
4
  title?: string | Snippet;
@@ -5,5 +5,5 @@ export interface TabItem {
5
5
  }
6
6
  export interface TabProps {
7
7
  item: TabItem;
8
- children: Snippet;
8
+ children?: Snippet;
9
9
  }
@@ -37,5 +37,7 @@
37
37
  {/each}
38
38
  </UnderlineTabs.List>
39
39
  </UnderlineTabs.Root>
40
- {@render selected.children()}
40
+ {#if selected.children}
41
+ {@render selected.children()}
42
+ {/if}
41
43
  {/if}
@@ -0,0 +1,59 @@
1
+ <script lang="ts">
2
+ import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
3
+ import ButtonBack from "../../../../core/button/ButtonBack.svelte";
4
+ import type { Snippet } from "svelte";
5
+ import { LightSwitch } from "../../../../ui/light-switch";
6
+ import { t } from "../../../../../i18n";
7
+ import type {
8
+ ForgetPasswordRequestDto,
9
+ ForgetPasswordVariant,
10
+ } from "../../types";
11
+ import FormForgetPassword from "./FormForgetPassword.svelte";
12
+ import TabUnderline from "../../../../core/tabs/ui/tab-underline.svelte";
13
+
14
+ /**
15
+ * Card de recuperação de senha.
16
+ * @property {ForgetPasswordVariant} formType - Tipo do input (EMAIL, PHONE)
17
+ * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter
18
+ */
19
+ type Props = {
20
+ formType?: ForgetPasswordVariant;
21
+ onSubmit?: (request: ForgetPasswordRequestDto) => void;
22
+ children?: Snippet;
23
+ };
24
+
25
+ let { formType, onSubmit, children }: Props = $props();
26
+ </script>
27
+
28
+ <div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
29
+ <nav class="flex justify-between p-5 md:bg-transparent">
30
+ <div>
31
+ <ButtonBack />
32
+ </div>
33
+ <div class="flex gap-2">
34
+ <LightSwitch />
35
+ <LanguageSwitcher />
36
+ </div>
37
+ </nav>
38
+
39
+ <div
40
+ class="p-5 h-full border-t-2 bg-background md:border-none rounded-tl-[35px] rounded-tr-[35px]"
41
+ >
42
+ <TabUnderline
43
+ items={[
44
+ {
45
+ item: {
46
+ label: $t("label.forget-password"),
47
+ value: "forget-password",
48
+ },
49
+ },
50
+ ]}
51
+ />
52
+
53
+ {#if children}
54
+ {@render children()}
55
+ {:else}
56
+ <FormForgetPassword variant={formType} {onSubmit} />
57
+ {/if}
58
+ </div>
59
+ </div>
@@ -0,0 +1,15 @@
1
+ import type { Snippet } from "svelte";
2
+ import type { ForgetPasswordRequestDto, ForgetPasswordVariant } from "../../types";
3
+ /**
4
+ * Card de recuperação de senha.
5
+ * @property {ForgetPasswordVariant} formType - Tipo do input (EMAIL, PHONE)
6
+ * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter
7
+ */
8
+ type Props = {
9
+ formType?: ForgetPasswordVariant;
10
+ onSubmit?: (request: ForgetPasswordRequestDto) => void;
11
+ children?: Snippet;
12
+ };
13
+ declare const ForgetPasswordCard: import("svelte").Component<Props, {}, "">;
14
+ type ForgetPasswordCard = ReturnType<typeof ForgetPasswordCard>;
15
+ export default ForgetPasswordCard;
@@ -0,0 +1,37 @@
1
+ <script lang="ts">
2
+ import InputEmail from "../../../../core/form/ui/input-email.svelte";
3
+ import InputPhone from "../../../../core/form/ui/input-phone.svelte";
4
+ import InputEmailOrPhone from "../../../../core/form/ui/input-email-or-phone.svelte";
5
+ import { t } from "../../../../../i18n";
6
+ import type { ForgetPasswordRequestDto, ForgetPasswordVariant } from "../../types";
7
+ import ButtonSend from "../../../../core/button/ButtonSend.svelte";
8
+
9
+ type Props = {
10
+ variant?: ForgetPasswordVariant;
11
+ onSubmit?: (request: ForgetPasswordRequestDto) => void;
12
+ };
13
+
14
+ let { variant = "EMAIL", onSubmit }: Props = $props();
15
+ let data = $state("");
16
+
17
+ function handleSubmit(e: Event) {
18
+ e.preventDefault();
19
+ onSubmit?.({ data, variant });
20
+ }
21
+ </script>
22
+
23
+ <form class="w-full space-y-4" onsubmit={handleSubmit}>
24
+ <p class="text-[13px] py-3">{$t("text.forget-password")}</p>
25
+
26
+ <div class="space-y-1">
27
+ {#if variant === "EMAIL"}
28
+ <InputEmail bind:value={data} />
29
+ {:else if variant === "PHONE"}
30
+ <InputPhone bind:value={data} />
31
+ {:else if variant === "PHONE_EMAIL"}
32
+ <InputEmailOrPhone bind:value={data} />
33
+ {/if}
34
+ </div>
35
+
36
+ <ButtonSend type="submit" />
37
+ </form>
@@ -0,0 +1,8 @@
1
+ import type { ForgetPasswordRequestDto, ForgetPasswordVariant } from "../../types";
2
+ type Props = {
3
+ variant?: ForgetPasswordVariant;
4
+ onSubmit?: (request: ForgetPasswordRequestDto) => void;
5
+ };
6
+ declare const FormForgetPassword: import("svelte").Component<Props, {}, "">;
7
+ type FormForgetPassword = ReturnType<typeof FormForgetPassword>;
8
+ export default FormForgetPassword;
@@ -0,0 +1,74 @@
1
+ <script lang="ts">
2
+ import ForgetPasswordCard from "./ForgetPasswordCard.svelte";
3
+ import LeftHero from "../../../../core/panel/LeftHero.svelte";
4
+ import type { PageForgetPasswordProps } from "../../types";
5
+ import { t } from "../../../../../i18n";
6
+
7
+ /**
8
+ * Variante 01 da página de esquecimento de senha.
9
+ * Layout split: hero à esquerda (reutiliza do login), card de recuperação à direita.
10
+ * @property {CarouselItem[]} carousel - Itens do carousel (opcional, usa valores padrão)
11
+ * @property {string} title - Título do hero
12
+ */
13
+ let {
14
+ carousel,
15
+ varient,
16
+ title,
17
+ children,
18
+ formType,
19
+ onSubmit,
20
+ }: PageForgetPasswordProps = $props();
21
+
22
+ const defaultCarousel = $derived([
23
+ {
24
+ buttonText: $t("label.next"),
25
+ title: $t("carousel.forget-password.slide1.title"),
26
+ description: $t("carousel.forget-password.slide1.description"),
27
+ },
28
+ {
29
+ buttonText: $t("label.next"),
30
+ title: $t("carousel.forget-password.slide2.title"),
31
+ description: $t("carousel.forget-password.slide2.description"),
32
+ },
33
+ {
34
+ buttonText: $t("label.next"),
35
+ title: $t("carousel.forget-password.slide3.title"),
36
+ description: $t("carousel.forget-password.slide3.description"),
37
+ },
38
+ ]);
39
+
40
+ const carouselItems = $derived(carousel ?? defaultCarousel);
41
+ </script>
42
+
43
+ <main class="h-screen w-screen flex items-center">
44
+ <svg width="0" height="0" class="absolute">
45
+ <defs>
46
+ <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
47
+ <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
48
+ </clipPath>
49
+ </defs>
50
+ </svg>
51
+ <div class="hidden md:block md:w-8/12">
52
+ <LeftHero {title} varient={varient ?? "POINTER"} items={carouselItems} />
53
+ </div>
54
+ <div class="w-full md:px-0 md:w-4/12 border-gray-900">
55
+ {#if children}
56
+ {@render children()}
57
+ {:else}
58
+ <ForgetPasswordCard {formType} {onSubmit} />
59
+ {/if}
60
+ </div>
61
+ </main>
62
+
63
+ <style>
64
+ :global(.grid-pattern) {
65
+ background-size: 40px 40px;
66
+ background-image: linear-gradient(
67
+ to right,
68
+ rgba(0, 0, 0, 0.1) 1px,
69
+ transparent 1px
70
+ ),
71
+ linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
72
+ clip-path: url(#grid-curve-clip);
73
+ }
74
+ </style>
@@ -0,0 +1,4 @@
1
+ import type { PageForgetPasswordProps } from "../../types";
2
+ declare const PageForgetPassword01: import("svelte").Component<PageForgetPasswordProps, {}, "">;
3
+ type PageForgetPassword01 = ReturnType<typeof PageForgetPassword01>;
4
+ export default PageForgetPassword01;
@@ -0,0 +1,19 @@
1
+ <script lang="ts">
2
+ import type { PageForgetPasswordProps } from "./types";
3
+ import PageForgetPassword01 from "./01/ui/PageForgetPassword01.svelte";
4
+
5
+ /**
6
+ * Página de recuperação de senha.
7
+ * @property {"01"} varient - Variante do layout
8
+ * @property {CarouselItem[]} carousel - Itens do carousel hero
9
+ * @property {string} title - Título do hero
10
+ * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter email
11
+ */
12
+ type Props = {
13
+ varient?: "01";
14
+ };
15
+
16
+ let { ...props }: PageForgetPasswordProps & Props = $props();
17
+ </script>
18
+
19
+ <PageForgetPassword01 {...props} />
@@ -0,0 +1,15 @@
1
+ import type { PageForgetPasswordProps } from "./types";
2
+ /**
3
+ * Página de recuperação de senha.
4
+ * @property {"01"} varient - Variante do layout
5
+ * @property {CarouselItem[]} carousel - Itens do carousel hero
6
+ * @property {string} title - Título do hero
7
+ * @property {(req: ForgetPasswordRequestDto) => void} onSubmit - Callback ao submeter email
8
+ */
9
+ type Props = {
10
+ varient?: "01";
11
+ };
12
+ type $$ComponentProps = PageForgetPasswordProps & Props;
13
+ declare const PageForgetPassword: import("svelte").Component<$$ComponentProps, {}, "">;
14
+ type PageForgetPassword = ReturnType<typeof PageForgetPassword>;
15
+ export default PageForgetPassword;
@@ -0,0 +1,15 @@
1
+ import type { CarouselItem, CarouselItemType } from "../../core/carousel/data/CarouselModel";
2
+ import type { Snippet } from "svelte";
3
+ export type ForgetPasswordVariant = "EMAIL" | "PHONE" | "PHONE_EMAIL";
4
+ export type ForgetPasswordRequestDto = {
5
+ data: string;
6
+ variant: ForgetPasswordVariant;
7
+ };
8
+ export type PageForgetPasswordProps = {
9
+ carousel?: CarouselItem[];
10
+ varient?: CarouselItemType;
11
+ title?: string;
12
+ children?: Snippet;
13
+ formType?: ForgetPasswordVariant;
14
+ onSubmit?: (request: ForgetPasswordRequestDto) => void;
15
+ };
@@ -8,19 +8,21 @@
8
8
  import LabelOr from "../../../../core/label/LabelOr.svelte";
9
9
  import ButtonLoginWith from "../../../../core/button/ButtonLoginWith.svelte";
10
10
  import { t } from "../../../../../i18n";
11
- import type { Credential, LoginVariant } from "../data/page-props";
11
+ import type { LoginRequestDto, LoginVariant, LinkProps } from "../../types";
12
12
 
13
13
  /**
14
14
  * Formulário de login reutilizável.
15
15
  * @property {LoginVariant} variant - Tipo do input de dados (EMAIL, USERNAME, PHONE)
16
16
  * @property {(cred: Credential) => void} onSubmit - Callback ao submeter { data, password }
17
+ * @property {LinkProps} forgetPassword - Config do link de esquecimento de senha { url, onclick }
17
18
  */
18
19
  type Props = {
19
20
  variant: LoginVariant;
20
- onSubmit?: (credential: Credential) => void;
21
+ onSubmit?: (credential: LoginRequestDto) => void;
22
+ forgetPassword?: LinkProps;
21
23
  };
22
24
 
23
- let { variant, onSubmit }: Props = $props();
25
+ let { variant, onSubmit, forgetPassword }: Props = $props();
24
26
  let data = $state("");
25
27
  let password = $state("");
26
28
 
@@ -45,7 +47,7 @@
45
47
 
46
48
  <div class="space-y-1 relative">
47
49
  <InputPassword bind:value={password} />
48
- <LinkForgetPassword />
50
+ <LinkForgetPassword href={forgetPassword?.url} onclick={forgetPassword?.onclick} />
49
51
  </div>
50
52
 
51
53
  <div class="flex flex-col gap-1">
@@ -1,12 +1,14 @@
1
- import type { Credential, LoginVariant } from "../data/page-props";
1
+ import type { LoginRequestDto, LoginVariant, LinkProps } from "../../types";
2
2
  /**
3
3
  * Formulário de login reutilizável.
4
4
  * @property {LoginVariant} variant - Tipo do input de dados (EMAIL, USERNAME, PHONE)
5
5
  * @property {(cred: Credential) => void} onSubmit - Callback ao submeter { data, password }
6
+ * @property {LinkProps} forgetPassword - Config do link de esquecimento de senha { url, onclick }
6
7
  */
7
8
  type Props = {
8
9
  variant: LoginVariant;
9
- onSubmit?: (credential: Credential) => void;
10
+ onSubmit?: (credential: LoginRequestDto) => void;
11
+ forgetPassword?: LinkProps;
10
12
  };
11
13
  declare const FormLogin: import("svelte").Component<Props, {}, "">;
12
14
  type FormLogin = ReturnType<typeof FormLogin>;
@@ -1,13 +1,14 @@
1
1
  <script lang="ts">
2
2
  import FormLogin from "./FormLogin.svelte";
3
- import type { Credential } from "../data/page-props";
3
+ import type { LoginRequestDto, LinkProps } from "../../types";
4
4
 
5
5
  /** Form de login com email e senha. Wrapper fino de FormLogin variant="EMAIL". */
6
6
  type Props = {
7
- onSubmit?: (credential: Credential) => void;
7
+ onSubmit?: (credential: LoginRequestDto) => void;
8
+ forgetPassword?: LinkProps;
8
9
  };
9
10
 
10
- let { onSubmit }: Props = $props();
11
+ let { onSubmit, forgetPassword }: Props = $props();
11
12
  </script>
12
13
 
13
- <FormLogin variant="EMAIL" {onSubmit} />
14
+ <FormLogin variant="EMAIL" {onSubmit} {forgetPassword} />
@@ -1,7 +1,8 @@
1
- import type { Credential } from "../data/page-props";
1
+ import type { LoginRequestDto, LinkProps } from "../../types";
2
2
  /** Form de login com email e senha. Wrapper fino de FormLogin variant="EMAIL". */
3
3
  type Props = {
4
- onSubmit?: (credential: Credential) => void;
4
+ onSubmit?: (credential: LoginRequestDto) => void;
5
+ forgetPassword?: LinkProps;
5
6
  };
6
7
  declare const FormLoginEmailPassword: import("svelte").Component<Props, {}, "">;
7
8
  type FormLoginEmailPassword = ReturnType<typeof FormLoginEmailPassword>;