negodesign 0.0.24 → 0.0.26

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 (139) hide show
  1. package/dist/assets/start.png +0 -0
  2. package/dist/components/core/breadcrumb/breadcrumb-list.svelte +31 -31
  3. package/dist/components/core/button/ButtonBack.svelte +18 -18
  4. package/dist/components/core/button/ButtonLogin.svelte +15 -15
  5. package/dist/components/core/button/ButtonLoginWith.svelte +57 -57
  6. package/dist/components/core/button/ButtonSend.svelte +15 -15
  7. package/dist/components/core/card/highlight/01/CardHighlight01.svelte +91 -0
  8. package/dist/components/core/card/highlight/01/CardHighlight01.svelte.d.ts +8 -0
  9. package/dist/components/core/card/highlight/02/CardHighlight02.svelte +93 -0
  10. package/dist/components/core/card/highlight/02/CardHighlight02.svelte.d.ts +8 -0
  11. package/dist/components/core/card/highlight/CardHighlight.svelte +22 -44
  12. package/dist/components/core/card/highlight/CardHighlight.svelte.d.ts +5 -2
  13. package/dist/components/core/card/highlight/data.js +32 -1
  14. package/dist/components/core/card/media/01/CardMedia01.svelte +111 -114
  15. package/dist/components/core/card/media/02/CardMedia02.svelte +110 -113
  16. package/dist/components/core/card/media/CardMedia.svelte +17 -17
  17. package/dist/components/core/card/profile/01/CardProfile01.svelte +98 -101
  18. package/dist/components/core/card/profile/02/CardProfile02.svelte +98 -97
  19. package/dist/components/core/card/profile/CardProfile.svelte +17 -17
  20. package/dist/components/core/card/promotion/CardPromotion.svelte +112 -81
  21. package/dist/components/core/card/promotion/data.js +31 -0
  22. package/dist/components/core/card/shared/CardButton.svelte +30 -30
  23. package/dist/components/core/card/shared/CardCart.svelte +36 -32
  24. package/dist/components/core/card/shared/CardCart.svelte.d.ts +1 -0
  25. package/dist/components/core/card/shared/CardDescription.svelte +38 -23
  26. package/dist/components/core/card/shared/CardDescription.svelte.d.ts +3 -0
  27. package/dist/components/core/card/shared/CardFavorite.svelte +33 -29
  28. package/dist/components/core/card/shared/CardFavorite.svelte.d.ts +1 -0
  29. package/dist/components/core/card/shared/CardStarRating.svelte +20 -20
  30. package/dist/components/core/card/shared/CardStartPrice.svelte +34 -0
  31. package/dist/components/core/card/shared/CardStartPrice.svelte.d.ts +8 -0
  32. package/dist/components/core/card/shared/CardTags.svelte +73 -56
  33. package/dist/components/core/card/shared/CardTags.svelte.d.ts +2 -1
  34. package/dist/components/core/card/shared/CardThumbnailVideo.svelte +169 -169
  35. package/dist/components/core/card/shared/TruncatableText.svelte +55 -55
  36. package/dist/components/core/card/types.d.ts +13 -0
  37. package/dist/components/core/carousel/{shared/ui/SimpleBadgeCarousel.svelte → badge/ui/CarouselBadge.svelte} +83 -80
  38. package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte.d.ts +4 -0
  39. package/dist/components/core/carousel/hero/CarouselHero.svelte +158 -158
  40. package/dist/components/core/carousel/highlights/types.d.ts +12 -0
  41. package/dist/components/core/carousel/highlights/types.js +1 -0
  42. package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte +63 -65
  43. package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte.d.ts +1 -1
  44. package/dist/components/core/carousel/promotion/types.d.ts +11 -0
  45. package/dist/components/core/carousel/promotion/types.js +1 -0
  46. package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte +64 -65
  47. package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte.d.ts +1 -1
  48. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte +55 -0
  49. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte.d.ts +9 -0
  50. package/dist/components/core/carousel/types.d.ts +10 -26
  51. package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
  52. package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
  53. package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
  54. package/dist/components/core/datatable/ui/DataTableCore.svelte +151 -151
  55. package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
  56. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
  57. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
  58. package/dist/components/core/form/ui/input-base.svelte +81 -81
  59. package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -23
  60. package/dist/components/core/form/ui/input-email.svelte +23 -23
  61. package/dist/components/core/form/ui/input-password-confirm.svelte +23 -23
  62. package/dist/components/core/form/ui/input-password.svelte +23 -23
  63. package/dist/components/core/form/ui/input-phone.svelte +33 -33
  64. package/dist/components/core/form/ui/input-username.svelte +22 -22
  65. package/dist/components/core/hero/SimpleHero.svelte +65 -65
  66. package/dist/components/core/label/LabelOr.svelte +25 -25
  67. package/dist/components/core/link/link-forget-password.svelte +12 -12
  68. package/dist/components/core/link/link-privacy-polity.svelte +12 -12
  69. package/dist/components/core/link/link-terms-of-service.svelte +12 -12
  70. package/dist/components/core/nav/ui/menu-links.svelte +27 -27
  71. package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte +85 -85
  72. package/dist/components/core/nav/ui/nav-menu-bottom-sidebar.svelte +33 -33
  73. package/dist/components/core/nav/ui/nav-menu-sidebar.svelte +97 -97
  74. package/dist/components/core/nav/ui/nav-menu-top-bar-sidebar.svelte +103 -103
  75. package/dist/components/core/nav/ui/nav-menu.svelte +106 -106
  76. package/dist/components/core/panel/CarouselSlot.svelte +63 -38
  77. package/dist/components/core/panel/CarouselSlot.svelte.d.ts +5 -2
  78. package/dist/components/core/panel/LeftHero.svelte +116 -116
  79. package/dist/components/core/search/SearchInput.svelte +32 -32
  80. package/dist/components/core/search/shared/SearchInputCore.svelte +66 -66
  81. package/dist/components/core/sidebar/MenuBarSidebar.svelte +70 -70
  82. package/dist/components/core/tabs/ui/tab-underline.svelte +43 -43
  83. package/dist/components/pages/admin/01/ui/AdminContent.svelte +14 -14
  84. package/dist/components/pages/admin/01/ui/AdminPanel.svelte +46 -46
  85. package/dist/components/pages/security/login/01/ui/FormRegister.svelte +28 -28
  86. package/dist/components/pages/security/login/01/ui/LoginCard.svelte +107 -107
  87. package/dist/components/pages/security/login/PageLogin.svelte +22 -22
  88. package/dist/components/ui/badge/badge.svelte +49 -49
  89. package/dist/components/ui/button/button.svelte +82 -82
  90. package/dist/components/ui/chart/chart-container.svelte +80 -80
  91. package/dist/components/ui/chart/chart-style.svelte +37 -37
  92. package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
  93. package/dist/components/ui/checkbox/checkbox.svelte +40 -40
  94. package/dist/components/ui/data-table/flex-render.svelte +40 -40
  95. package/dist/components/ui/drawer/drawer-close.svelte +7 -7
  96. package/dist/components/ui/drawer/drawer-content.svelte +33 -33
  97. package/dist/components/ui/drawer/drawer-description.svelte +17 -17
  98. package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
  99. package/dist/components/ui/drawer/drawer-header.svelte +20 -20
  100. package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
  101. package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
  102. package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
  103. package/dist/components/ui/drawer/drawer-title.svelte +17 -17
  104. package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
  105. package/dist/components/ui/drawer/drawer.svelte +12 -12
  106. package/dist/components/ui/select/select-content.svelte +45 -45
  107. package/dist/components/ui/select/select-group-heading.svelte +21 -21
  108. package/dist/components/ui/select/select-group.svelte +17 -17
  109. package/dist/components/ui/select/select-item.svelte +41 -41
  110. package/dist/components/ui/select/select-label.svelte +20 -20
  111. package/dist/components/ui/select/select-portal.svelte +7 -7
  112. package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
  113. package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
  114. package/dist/components/ui/select/select-separator.svelte +18 -18
  115. package/dist/components/ui/select/select-trigger.svelte +30 -30
  116. package/dist/components/ui/select/select.svelte +11 -11
  117. package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
  118. package/dist/components/ui/star-rating/star-rating-star.svelte +41 -41
  119. package/dist/components/ui/star-rating/star-rating.svelte +20 -20
  120. package/dist/components/ui/table/table-body.svelte +15 -15
  121. package/dist/components/ui/table/table-caption.svelte +20 -20
  122. package/dist/components/ui/table/table-cell.svelte +15 -15
  123. package/dist/components/ui/table/table-footer.svelte +20 -20
  124. package/dist/components/ui/table/table-head.svelte +15 -15
  125. package/dist/components/ui/table/table-header.svelte +20 -20
  126. package/dist/components/ui/table/table-row.svelte +15 -15
  127. package/dist/components/ui/table/table.svelte +17 -17
  128. package/dist/components/ui/tabs/tabs-content.svelte +17 -17
  129. package/dist/components/ui/tabs/tabs-list.svelte +40 -40
  130. package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
  131. package/dist/components/ui/tabs/tabs.svelte +19 -19
  132. package/dist/globals.css +143 -15
  133. package/dist/hooks/responsive.svelte.d.ts +1 -1
  134. package/dist/hooks/responsive.svelte.js +1 -1
  135. package/dist/index.d.ts +2 -2
  136. package/dist/index.js +2 -2
  137. package/dist/styles/globals.css +149 -149
  138. package/package.json +113 -113
  139. package/dist/components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte.d.ts +0 -4
@@ -1,70 +1,70 @@
1
- <script lang="ts">
2
- import * as Sidebar from "../../ui/sidebar/index.js";
3
- import type { ComponentProps } from "svelte";
4
-
5
- import type { NavUserSidebarProps } from "../nav/data/nav-user-sidebar";
6
- import type {
7
- NavMenuItem,
8
- NavMenuSidebarProps,
9
- } from "../nav/data/nav-menu-sidebar";
10
- import type { Snippet } from "svelte";
11
- import NavMenuTopBarSidebar from "../nav/ui/nav-menu-top-bar-sidebar.svelte";
12
- import NavMenuBottomSidebar from "../nav/ui/nav-menu-bottom-sidebar.svelte";
13
- import NavMenuBarSidebar from "../nav/ui/nav-menu-sidebar.svelte";
14
- import NavUserSidebar from "../nav/ui/nav-user-sidebar.svelte";
15
- import { t } from "../../../i18n";
16
-
17
- /**
18
- * Navigation sidebar with menus, user, and buttons.
19
- * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
20
- * @property {NavMenuItem[]} menus - Main navigation items
21
- * @property {NavUserSidebarItem} user - Logged-in user data
22
- * @property {Snippet} footer - Snippet customizado do footer
23
- * @property {Snippet} header - Snippet customizado do header
24
- */
25
- type Props = {
26
- menusButtons?: NavMenuSidebarProps[];
27
- menus: NavMenuItem[];
28
- user: NavUserSidebarProps;
29
- footer?: Snippet;
30
- header?: Snippet;
31
- };
32
-
33
- let {
34
- ref = $bindable(null),
35
- collapsible = "icon",
36
- menusButtons,
37
- menus,
38
- user,
39
- footer,
40
- header,
41
- ...restProps
42
- }: ComponentProps<typeof Sidebar.Root> & Props = $props();
43
- </script>
44
-
45
- <Sidebar.Root bind:ref {collapsible} {...restProps}>
46
- <Sidebar.Header>
47
- {#if header}
48
- {@render header?.()}
49
- {:else}
50
- <NavMenuTopBarSidebar
51
- content={{
52
- title: $t("label.panel"),
53
- subtitle: $t("label.administrative"),
54
- }}
55
- />
56
- {/if}
57
- </Sidebar.Header>
58
- <Sidebar.Content>
59
- <NavMenuBarSidebar items={menus} />
60
- </Sidebar.Content>
61
- <Sidebar.Footer>
62
- {#if footer}
63
- {@render footer?.()}
64
- {:else if menusButtons && menusButtons.length > 0}
65
- <NavMenuBottomSidebar items={menusButtons} class="mt-auto" />
66
- {/if}
67
- <NavUserSidebar {user} />
68
- </Sidebar.Footer>
69
- <Sidebar.Rail />
70
- </Sidebar.Root>
1
+ <script lang="ts">
2
+ import * as Sidebar from "../../ui/sidebar/index.js";
3
+ import type { ComponentProps } from "svelte";
4
+
5
+ import type { NavUserSidebarProps } from "../nav/data/nav-user-sidebar";
6
+ import type {
7
+ NavMenuItem,
8
+ NavMenuSidebarProps,
9
+ } from "../nav/data/nav-menu-sidebar";
10
+ import type { Snippet } from "svelte";
11
+ import NavMenuTopBarSidebar from "../nav/ui/nav-menu-top-bar-sidebar.svelte";
12
+ import NavMenuBottomSidebar from "../nav/ui/nav-menu-bottom-sidebar.svelte";
13
+ import NavMenuBarSidebar from "../nav/ui/nav-menu-sidebar.svelte";
14
+ import NavUserSidebar from "../nav/ui/nav-user-sidebar.svelte";
15
+ import { t } from "../../../i18n";
16
+
17
+ /**
18
+ * Navigation sidebar with menus, user, and buttons.
19
+ * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
20
+ * @property {NavMenuItem[]} menus - Main navigation items
21
+ * @property {NavUserSidebarItem} user - Logged-in user data
22
+ * @property {Snippet} footer - Snippet customizado do footer
23
+ * @property {Snippet} header - Snippet customizado do header
24
+ */
25
+ type Props = {
26
+ menusButtons?: NavMenuSidebarProps[];
27
+ menus: NavMenuItem[];
28
+ user: NavUserSidebarProps;
29
+ footer?: Snippet;
30
+ header?: Snippet;
31
+ };
32
+
33
+ let {
34
+ ref = $bindable(null),
35
+ collapsible = "icon",
36
+ menusButtons,
37
+ menus,
38
+ user,
39
+ footer,
40
+ header,
41
+ ...restProps
42
+ }: ComponentProps<typeof Sidebar.Root> & Props = $props();
43
+ </script>
44
+
45
+ <Sidebar.Root bind:ref {collapsible} {...restProps}>
46
+ <Sidebar.Header>
47
+ {#if header}
48
+ {@render header?.()}
49
+ {:else}
50
+ <NavMenuTopBarSidebar
51
+ content={{
52
+ title: $t("label.panel"),
53
+ subtitle: $t("label.administrative"),
54
+ }}
55
+ />
56
+ {/if}
57
+ </Sidebar.Header>
58
+ <Sidebar.Content>
59
+ <NavMenuBarSidebar items={menus} />
60
+ </Sidebar.Content>
61
+ <Sidebar.Footer>
62
+ {#if footer}
63
+ {@render footer?.()}
64
+ {:else if menusButtons && menusButtons.length > 0}
65
+ <NavMenuBottomSidebar items={menusButtons} class="mt-auto" />
66
+ {/if}
67
+ <NavUserSidebar {user} />
68
+ </Sidebar.Footer>
69
+ <Sidebar.Rail />
70
+ </Sidebar.Root>
@@ -1,43 +1,43 @@
1
- <script lang="ts">
2
- import * as UnderlineTabs from "../../../ui/underline-tabs";
3
- import type { TabProps } from "../data/TabModel";
4
-
5
- type Props = {
6
- items?: TabProps[];
7
- className?: string;
8
- };
9
-
10
- let { items = [], className }: Props = $props();
11
-
12
- let activeValue = $state<string>("");
13
-
14
- let currentActiveValue = $derived(
15
- activeValue || (items.length > 0 ? items[0].item.value : ""),
16
- );
17
-
18
- let selected = $derived(
19
- items.find((it) => it.item.value === currentActiveValue) || items[0],
20
- );
21
- </script>
22
-
23
- {#if items && items.length > 0 && selected}
24
- <UnderlineTabs.Root
25
- value={currentActiveValue}
26
- onValueChange={(val) => (activeValue = val)}
27
- class="mb-5 {className}"
28
- >
29
- <UnderlineTabs.List>
30
- {#each items as it (it.item.value)}
31
- <UnderlineTabs.Trigger
32
- value={it.item.value}
33
- class="text-lg md:text-base"
34
- >
35
- {it.item.label}
36
- </UnderlineTabs.Trigger>
37
- {/each}
38
- </UnderlineTabs.List>
39
- </UnderlineTabs.Root>
40
- {#if selected.children}
41
- {@render selected.children()}
42
- {/if}
43
- {/if}
1
+ <script lang="ts">
2
+ import * as UnderlineTabs from "../../../ui/underline-tabs";
3
+ import type { TabProps } from "../data/TabModel";
4
+
5
+ type Props = {
6
+ items?: TabProps[];
7
+ className?: string;
8
+ };
9
+
10
+ let { items = [], className }: Props = $props();
11
+
12
+ let activeValue = $state<string>("");
13
+
14
+ let currentActiveValue = $derived(
15
+ activeValue || (items.length > 0 ? items[0].item.value : ""),
16
+ );
17
+
18
+ let selected = $derived(
19
+ items.find((it) => it.item.value === currentActiveValue) || items[0],
20
+ );
21
+ </script>
22
+
23
+ {#if items && items.length > 0 && selected}
24
+ <UnderlineTabs.Root
25
+ value={currentActiveValue}
26
+ onValueChange={(val) => (activeValue = val)}
27
+ class="mb-5 {className}"
28
+ >
29
+ <UnderlineTabs.List>
30
+ {#each items as it (it.item.value)}
31
+ <UnderlineTabs.Trigger
32
+ value={it.item.value}
33
+ class="text-lg md:text-base"
34
+ >
35
+ {it.item.label}
36
+ </UnderlineTabs.Trigger>
37
+ {/each}
38
+ </UnderlineTabs.List>
39
+ </UnderlineTabs.Root>
40
+ {#if selected.children}
41
+ {@render selected.children()}
42
+ {/if}
43
+ {/if}
@@ -1,14 +1,14 @@
1
- <script lang="ts">
2
- import type { Snippet } from "svelte";
3
-
4
- /** Content wrapper for admin pages. */
5
- type Props = {
6
- children?: Snippet;
7
- };
8
-
9
- let { children }: Props = $props();
10
- </script>
11
-
12
- <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
13
- {@render children?.()}
14
- </div>
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+
4
+ /** Content wrapper for admin pages. */
5
+ type Props = {
6
+ children?: Snippet;
7
+ };
8
+
9
+ let { children }: Props = $props();
10
+ </script>
11
+
12
+ <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
13
+ {@render children?.()}
14
+ </div>
@@ -1,46 +1,46 @@
1
- <script lang="ts">
2
- import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
3
- import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
4
- import { Separator } from "../../../../ui/separator/index.js";
5
- import * as Sidebar from "../../../../ui/sidebar/index.js";
6
- import type { Snippet } from "svelte";
7
-
8
- /**
9
- * Admin layout with sidebar, header, and content.
10
- * @property {Snippet} appsidebar - Application sidebar
11
- * @property {Snippet} content - Main content
12
- * @property {Snippet} breadcrumb - Breadcrumb navigation
13
- */
14
- type Props = {
15
- appsidebar?: Snippet;
16
- content?: Snippet;
17
- breadcrumb?: Snippet;
18
- };
19
-
20
- let { appsidebar, content, breadcrumb }: Props = $props();
21
- </script>
22
-
23
- <Sidebar.Provider>
24
- {@render appsidebar?.()}
25
- <Sidebar.Inset>
26
- <header
27
- class="flex h-16 shrink-0 items-center md:justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
28
- >
29
- <div class="flex items-center gap-2 px-4">
30
- <Sidebar.Trigger class="-ms-1" />
31
- <Separator
32
- orientation="vertical"
33
- class="me-2 data-[orientation=vertical]:h-4"
34
- />
35
- {@render breadcrumb?.()}
36
- </div>
37
- <div class="pr-5">
38
- <div class="flex gap-3">
39
- <LanguageSwitcher />
40
- <LightSwitch />
41
- </div>
42
- </div>
43
- </header>
44
- {@render content?.()}
45
- </Sidebar.Inset>
46
- </Sidebar.Provider>
1
+ <script lang="ts">
2
+ import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
3
+ import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
4
+ import { Separator } from "../../../../ui/separator/index.js";
5
+ import * as Sidebar from "../../../../ui/sidebar/index.js";
6
+ import type { Snippet } from "svelte";
7
+
8
+ /**
9
+ * Admin layout with sidebar, header, and content.
10
+ * @property {Snippet} appsidebar - Application sidebar
11
+ * @property {Snippet} content - Main content
12
+ * @property {Snippet} breadcrumb - Breadcrumb navigation
13
+ */
14
+ type Props = {
15
+ appsidebar?: Snippet;
16
+ content?: Snippet;
17
+ breadcrumb?: Snippet;
18
+ };
19
+
20
+ let { appsidebar, content, breadcrumb }: Props = $props();
21
+ </script>
22
+
23
+ <Sidebar.Provider>
24
+ {@render appsidebar?.()}
25
+ <Sidebar.Inset>
26
+ <header
27
+ class="flex h-16 shrink-0 items-center md:justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
28
+ >
29
+ <div class="flex items-center gap-2 px-4">
30
+ <Sidebar.Trigger class="-ms-1" />
31
+ <Separator
32
+ orientation="vertical"
33
+ class="me-2 data-[orientation=vertical]:h-4"
34
+ />
35
+ {@render breadcrumb?.()}
36
+ </div>
37
+ <div class="pr-5">
38
+ <div class="flex gap-3">
39
+ <LanguageSwitcher />
40
+ <LightSwitch />
41
+ </div>
42
+ </div>
43
+ </header>
44
+ {@render content?.()}
45
+ </Sidebar.Inset>
46
+ </Sidebar.Provider>
@@ -1,28 +1,28 @@
1
- <script lang="ts">
2
- import InputPasswordConfirm from "../../../../../core/form/ui/input-password-confirm.svelte";
3
- import InputPassword from "../../../../../core/form/ui/input-password.svelte";
4
- import InputEmail from "../../../../../core/form/ui/input-email.svelte";
5
- import ButtonLogin from "../../../../../core/button/ButtonLogin.svelte";
6
- import { t } from "../../../../../../i18n";
7
-
8
- let email = $state("");
9
- let password = $state("");
10
- </script>
11
-
12
- <form class="space-y-4" onsubmit={(e) => e.preventDefault()}>
13
- <p class="text-[13px] py-3">{$t("text.register")}</p>
14
-
15
- <div class="space-y-1">
16
- <InputEmail value={email} />
17
- </div>
18
-
19
- <div class="space-y-1">
20
- <InputPassword value={password} />
21
- </div>
22
-
23
- <div class="space-y-1">
24
- <InputPasswordConfirm value={password} />
25
- </div>
26
-
27
- <ButtonLogin />
28
- </form>
1
+ <script lang="ts">
2
+ import InputPasswordConfirm from "../../../../../core/form/ui/input-password-confirm.svelte";
3
+ import InputPassword from "../../../../../core/form/ui/input-password.svelte";
4
+ import InputEmail from "../../../../../core/form/ui/input-email.svelte";
5
+ import ButtonLogin from "../../../../../core/button/ButtonLogin.svelte";
6
+ import { t } from "../../../../../../i18n";
7
+
8
+ let email = $state("");
9
+ let password = $state("");
10
+ </script>
11
+
12
+ <form class="space-y-4" onsubmit={(e) => e.preventDefault()}>
13
+ <p class="text-[13px] py-3">{$t("text.register")}</p>
14
+
15
+ <div class="space-y-1">
16
+ <InputEmail value={email} />
17
+ </div>
18
+
19
+ <div class="space-y-1">
20
+ <InputPassword value={password} />
21
+ </div>
22
+
23
+ <div class="space-y-1">
24
+ <InputPasswordConfirm value={password} />
25
+ </div>
26
+
27
+ <ButtonLogin />
28
+ </form>
@@ -1,107 +1,107 @@
1
- <script lang="ts" module>
2
- /**
3
- * @component LoginCard
4
- * Authentication card with login/register tabs, back button, light switch, and link footer.
5
- *
6
- * @example svelte
7
- * <LoginCard formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
8
- */
9
- </script>
10
-
11
- <script lang="ts">
12
- import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
13
- import LinkTermsOfService from "../../../../../core/link/link-terms-of-service.svelte";
14
- import LinkPrivacyPolity from "../../../../../core/link/link-privacy-polity.svelte";
15
- import TabUnderline from "../../../../../core/tabs/ui/tab-underline.svelte";
16
- import ButtonBack from "../../../../../core/button/ButtonBack.svelte";
17
- import LabelOr from "../../../../../core/label/LabelOr.svelte";
18
- import type { Snippet } from "svelte";
19
- import { LightSwitch } from "../../../../../ui/light-switch";
20
- import { t } from "../../../../../../i18n";
21
- import type { LoginFormType, LoginRequestDto, LinkProps } from "../../types";
22
- import FormLoginEmailPassword from "./FormLoginEmailPassword.svelte";
23
- import FormLoginUsernamePassword from "./FormLoginUsernamePassword.svelte";
24
- import FormLoginPhonePassword from "./FormLoginPhonePassword.svelte";
25
-
26
- type Props = {
27
- formType?: LoginFormType;
28
- onSubmit?: (credential: LoginRequestDto) => void;
29
- register?: Snippet;
30
- forgetPassword?: LinkProps;
31
- privacyPolicy?: LinkProps;
32
- termsOfService?: LinkProps;
33
- };
34
-
35
- let {
36
- formType,
37
- onSubmit,
38
- register,
39
- forgetPassword,
40
- privacyPolicy,
41
- termsOfService,
42
- }: Props = $props();
43
- </script>
44
-
45
- <div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
46
- <nav class="flex justify-between p-5 md:bg-transparent">
47
- <div>
48
- <ButtonBack />
49
- </div>
50
- <div class="flex gap-2">
51
- <LightSwitch />
52
- <LanguageSwitcher />
53
- </div>
54
- </nav>
55
-
56
- <div
57
- class="p-5 h-full border-t-2 bg-background md:border-none rounded-tl-[35px] rounded-tr-[35px]"
58
- >
59
- <TabUnderline
60
- items={[
61
- {
62
- item: { label: $t("label.login"), value: "login" },
63
- children: loginSnippet,
64
- },
65
- ...(register
66
- ? [
67
- {
68
- item: { label: $t("label.register"), value: "register" },
69
- children: registerSnippet,
70
- },
71
- ]
72
- : []),
73
- ]}
74
- />
75
-
76
- {#snippet loginSnippet()}
77
- {#if formType == "EMAIL_PASSWORD"}
78
- <FormLoginEmailPassword {onSubmit} {forgetPassword} />
79
- {:else if formType == "USERNAME_PASSWORD"}
80
- <FormLoginUsernamePassword {onSubmit} {forgetPassword} />
81
- {:else if formType == "PHONE_PASSWORD"}
82
- <FormLoginPhonePassword {onSubmit} {forgetPassword} />
83
- {/if}
84
- {/snippet}
85
-
86
- {#snippet registerSnippet()}
87
- {#if register}
88
- {@render register()}
89
- {/if}
90
- {/snippet}
91
- </div>
92
-
93
- <!-- Footer Terms -->
94
- <div
95
- class="text-[11px] text-slate-400 py-2 flex justify-center gap-2 bg-background"
96
- >
97
- <LinkPrivacyPolity
98
- href={privacyPolicy?.url}
99
- onclick={privacyPolicy?.onclick}
100
- />
101
- <LabelOr />
102
- <LinkTermsOfService
103
- href={termsOfService?.url}
104
- onclick={termsOfService?.onclick}
105
- />
106
- </div>
107
- </div>
1
+ <script lang="ts" module>
2
+ /**
3
+ * @component LoginCard
4
+ * Authentication card with login/register tabs, back button, light switch, and link footer.
5
+ *
6
+ * @example svelte
7
+ * <LoginCard formType="EMAIL_PASSWORD" onSubmit={(cred) => login(cred)} />
8
+ */
9
+ </script>
10
+
11
+ <script lang="ts">
12
+ import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
13
+ import LinkTermsOfService from "../../../../../core/link/link-terms-of-service.svelte";
14
+ import LinkPrivacyPolity from "../../../../../core/link/link-privacy-polity.svelte";
15
+ import TabUnderline from "../../../../../core/tabs/ui/tab-underline.svelte";
16
+ import ButtonBack from "../../../../../core/button/ButtonBack.svelte";
17
+ import LabelOr from "../../../../../core/label/LabelOr.svelte";
18
+ import type { Snippet } from "svelte";
19
+ import { LightSwitch } from "../../../../../ui/light-switch";
20
+ import { t } from "../../../../../../i18n";
21
+ import type { LoginFormType, LoginRequestDto, LinkProps } from "../../types";
22
+ import FormLoginEmailPassword from "./FormLoginEmailPassword.svelte";
23
+ import FormLoginUsernamePassword from "./FormLoginUsernamePassword.svelte";
24
+ import FormLoginPhonePassword from "./FormLoginPhonePassword.svelte";
25
+
26
+ type Props = {
27
+ formType?: LoginFormType;
28
+ onSubmit?: (credential: LoginRequestDto) => void;
29
+ register?: Snippet;
30
+ forgetPassword?: LinkProps;
31
+ privacyPolicy?: LinkProps;
32
+ termsOfService?: LinkProps;
33
+ };
34
+
35
+ let {
36
+ formType,
37
+ onSubmit,
38
+ register,
39
+ forgetPassword,
40
+ privacyPolicy,
41
+ termsOfService,
42
+ }: Props = $props();
43
+ </script>
44
+
45
+ <div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
46
+ <nav class="flex justify-between p-5 md:bg-transparent">
47
+ <div>
48
+ <ButtonBack />
49
+ </div>
50
+ <div class="flex gap-2">
51
+ <LightSwitch />
52
+ <LanguageSwitcher />
53
+ </div>
54
+ </nav>
55
+
56
+ <div
57
+ class="p-5 h-full border-t-2 bg-background md:border-none rounded-tl-[35px] rounded-tr-[35px]"
58
+ >
59
+ <TabUnderline
60
+ items={[
61
+ {
62
+ item: { label: $t("label.login"), value: "login" },
63
+ children: loginSnippet,
64
+ },
65
+ ...(register
66
+ ? [
67
+ {
68
+ item: { label: $t("label.register"), value: "register" },
69
+ children: registerSnippet,
70
+ },
71
+ ]
72
+ : []),
73
+ ]}
74
+ />
75
+
76
+ {#snippet loginSnippet()}
77
+ {#if formType == "EMAIL_PASSWORD"}
78
+ <FormLoginEmailPassword {onSubmit} {forgetPassword} />
79
+ {:else if formType == "USERNAME_PASSWORD"}
80
+ <FormLoginUsernamePassword {onSubmit} {forgetPassword} />
81
+ {:else if formType == "PHONE_PASSWORD"}
82
+ <FormLoginPhonePassword {onSubmit} {forgetPassword} />
83
+ {/if}
84
+ {/snippet}
85
+
86
+ {#snippet registerSnippet()}
87
+ {#if register}
88
+ {@render register()}
89
+ {/if}
90
+ {/snippet}
91
+ </div>
92
+
93
+ <!-- Footer Terms -->
94
+ <div
95
+ class="text-[11px] text-slate-400 py-2 flex justify-center gap-2 bg-background"
96
+ >
97
+ <LinkPrivacyPolity
98
+ href={privacyPolicy?.url}
99
+ onclick={privacyPolicy?.onclick}
100
+ />
101
+ <LabelOr />
102
+ <LinkTermsOfService
103
+ href={termsOfService?.url}
104
+ onclick={termsOfService?.onclick}
105
+ />
106
+ </div>
107
+ </div>