negodesign 0.0.59 → 0.0.60

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 (136) hide show
  1. package/dist/components/core/banner/AdCardBanner.svelte +74 -74
  2. package/dist/components/core/banner/CtaCardBanner.svelte +118 -118
  3. package/dist/components/core/breadcrumb/breadcrumb-list.svelte +31 -31
  4. package/dist/components/core/button/ButtonBack.svelte +18 -18
  5. package/dist/components/core/button/ButtonLogin.svelte +15 -15
  6. package/dist/components/core/button/ButtonLoginWith.svelte +57 -57
  7. package/dist/components/core/button/ButtonSend.svelte +15 -15
  8. package/dist/components/core/card/highlight/01/CardHighlight01.svelte +103 -103
  9. package/dist/components/core/card/highlight/02/CardHighlight02.svelte +99 -99
  10. package/dist/components/core/card/highlight/CardHighlight.svelte +22 -22
  11. package/dist/components/core/card/media/01/CardMedia01.svelte +133 -133
  12. package/dist/components/core/card/media/02/CardMedia02.svelte +127 -127
  13. package/dist/components/core/card/media/CardMedia.svelte +18 -18
  14. package/dist/components/core/card/product/01/CardProduct01.svelte +136 -136
  15. package/dist/components/core/card/product/02/CardProduct02.svelte +124 -124
  16. package/dist/components/core/card/product/CardProduct.svelte +22 -22
  17. package/dist/components/core/card/profile/01/CardProfile01.svelte +134 -134
  18. package/dist/components/core/card/profile/02/CardProfile02.svelte +132 -132
  19. package/dist/components/core/card/profile/CardProfile.svelte +18 -18
  20. package/dist/components/core/card/promotion/CardPromotion.svelte +139 -139
  21. package/dist/components/core/card/promotion/CardPromotionPrice.svelte +32 -32
  22. package/dist/components/core/card/shared/CardButton.svelte +42 -42
  23. package/dist/components/core/card/shared/CardCart.svelte +36 -36
  24. package/dist/components/core/card/shared/CardDescription.svelte +41 -41
  25. package/dist/components/core/card/shared/CardFavorite.svelte +33 -33
  26. package/dist/components/core/card/shared/CardLogo.svelte +19 -19
  27. package/dist/components/core/card/shared/CardPhoneOrWhatsapp.svelte +45 -45
  28. package/dist/components/core/card/shared/CardStarRating.svelte +24 -24
  29. package/dist/components/core/card/shared/CardTags.svelte +95 -95
  30. package/dist/components/core/card/shared/CardThumbnailVideo.svelte +232 -232
  31. package/dist/components/core/card/shared/CardTitlePrice.svelte +24 -24
  32. package/dist/components/core/card/shared/TruncatableText.svelte +49 -49
  33. package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte +109 -109
  34. package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte +38 -38
  35. package/dist/components/core/carousel/hero/ui/CarouselHero.svelte +163 -163
  36. package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte +60 -60
  37. package/dist/components/core/datatable/ui/DataTableActions.svelte +28 -28
  38. package/dist/components/core/datatable/ui/DataTableCheckbox.svelte +22 -22
  39. package/dist/components/core/datatable/ui/DataTableContent.svelte +59 -59
  40. package/dist/components/core/datatable/ui/DataTableCore.svelte +151 -151
  41. package/dist/components/core/datatable/ui/DataTableDragHandle.svelte +8 -8
  42. package/dist/components/core/datatable/ui/DataTableListFilter.svelte +59 -59
  43. package/dist/components/core/datatable/ui/DataTableListPagination.svelte +35 -35
  44. package/dist/components/core/footer/ui/Footer.svelte +18 -18
  45. package/dist/components/core/form/ui/input-base.svelte +81 -81
  46. package/dist/components/core/form/ui/input-email-or-phone.svelte +23 -23
  47. package/dist/components/core/form/ui/input-email.svelte +23 -23
  48. package/dist/components/core/form/ui/input-password-confirm.svelte +23 -23
  49. package/dist/components/core/form/ui/input-password.svelte +23 -23
  50. package/dist/components/core/form/ui/input-phone.svelte +33 -33
  51. package/dist/components/core/form/ui/input-username.svelte +22 -22
  52. package/dist/components/core/grid/ui/01/Grid01.svelte +28 -28
  53. package/dist/components/core/grid/ui/02/Grid02.svelte +28 -28
  54. package/dist/components/core/grid/ui/PanelGrid.svelte +27 -27
  55. package/dist/components/core/grid/ui/SimpleGrid.svelte +35 -35
  56. package/dist/components/core/grid/ui/shared/DescriptionGrid.svelte +23 -23
  57. package/dist/components/core/grid/ui/shared/IconRenderGrid.svelte +21 -21
  58. package/dist/components/core/grid/ui/shared/TitleGrid.svelte +19 -19
  59. package/dist/components/core/hero/SimpleHero.svelte +65 -65
  60. package/dist/components/core/label/LabelOr.svelte +25 -25
  61. package/dist/components/core/link/link-forget-password.svelte +12 -12
  62. package/dist/components/core/link/link-privacy-polity.svelte +12 -12
  63. package/dist/components/core/link/link-terms-of-service.svelte +12 -12
  64. package/dist/components/core/nav/ui/ComplexMenu.svelte +36 -36
  65. package/dist/components/core/nav/ui/Menu.svelte +70 -70
  66. package/dist/components/core/nav/ui/SimpleMenu.svelte +14 -14
  67. package/dist/components/core/nav/ui/mobile/MenuMobile.svelte +54 -54
  68. package/dist/components/core/nav/ui/shared/MenuButton.svelte +51 -51
  69. package/dist/components/core/nav/ui/shared/MenuLinks.svelte +40 -40
  70. package/dist/components/core/nav/ui/shared/MenuListItem.svelte +48 -48
  71. package/dist/components/core/nav/ui/shared/MenuLogo.svelte +13 -13
  72. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItem.svelte +15 -15
  73. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemCard.svelte +62 -62
  74. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte +32 -32
  75. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemList.svelte +24 -24
  76. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItems.svelte +21 -21
  77. package/dist/components/core/panel/CarouselSlot.svelte +57 -57
  78. package/dist/components/core/panel/LeftHero.svelte +117 -117
  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/sidebar/ui/navbar/NavMenuBarSidebar.svelte +97 -97
  83. package/dist/components/core/sidebar/ui/navbar/NavMenuBottomSidebar.svelte +33 -33
  84. package/dist/components/core/sidebar/ui/navbar/NavMenuTopBarSidebar.svelte +103 -103
  85. package/dist/components/core/tabs/ui/tab-underline.svelte +43 -43
  86. package/dist/components/pages/admin/01/ui/AdminContent.svelte +14 -14
  87. package/dist/components/pages/admin/01/ui/AdminPanel.svelte +46 -46
  88. package/dist/components/pages/security/login/01/ui/FormRegister.svelte +28 -28
  89. package/dist/components/pages/security/login/01/ui/LoginCard.svelte +107 -107
  90. package/dist/components/pages/security/login/PageLogin.svelte +22 -22
  91. package/dist/components/ui/badge/badge.svelte +49 -49
  92. package/dist/components/ui/button/button.svelte +82 -82
  93. package/dist/components/ui/chart/chart-container.svelte +80 -80
  94. package/dist/components/ui/chart/chart-style.svelte +37 -37
  95. package/dist/components/ui/chart/chart-tooltip.svelte +184 -184
  96. package/dist/components/ui/checkbox/checkbox.svelte +40 -40
  97. package/dist/components/ui/data-table/flex-render.svelte +40 -40
  98. package/dist/components/ui/drawer/drawer-close.svelte +7 -7
  99. package/dist/components/ui/drawer/drawer-content.svelte +33 -33
  100. package/dist/components/ui/drawer/drawer-description.svelte +17 -17
  101. package/dist/components/ui/drawer/drawer-footer.svelte +20 -20
  102. package/dist/components/ui/drawer/drawer-header.svelte +20 -20
  103. package/dist/components/ui/drawer/drawer-nested.svelte +12 -12
  104. package/dist/components/ui/drawer/drawer-overlay.svelte +17 -17
  105. package/dist/components/ui/drawer/drawer-portal.svelte +7 -7
  106. package/dist/components/ui/drawer/drawer-title.svelte +17 -17
  107. package/dist/components/ui/drawer/drawer-trigger.svelte +7 -7
  108. package/dist/components/ui/drawer/drawer.svelte +12 -12
  109. package/dist/components/ui/select/select-content.svelte +45 -45
  110. package/dist/components/ui/select/select-group-heading.svelte +21 -21
  111. package/dist/components/ui/select/select-group.svelte +17 -17
  112. package/dist/components/ui/select/select-item.svelte +41 -41
  113. package/dist/components/ui/select/select-label.svelte +20 -20
  114. package/dist/components/ui/select/select-portal.svelte +7 -7
  115. package/dist/components/ui/select/select-scroll-down-button.svelte +21 -21
  116. package/dist/components/ui/select/select-scroll-up-button.svelte +21 -21
  117. package/dist/components/ui/select/select-separator.svelte +18 -18
  118. package/dist/components/ui/select/select-trigger.svelte +30 -30
  119. package/dist/components/ui/select/select.svelte +11 -11
  120. package/dist/components/ui/sidebar/sidebar-menu-sub-button.svelte +39 -39
  121. package/dist/components/ui/star-rating/star-rating-star.svelte +41 -41
  122. package/dist/components/ui/star-rating/star-rating.svelte +20 -20
  123. package/dist/components/ui/table/table-body.svelte +15 -15
  124. package/dist/components/ui/table/table-caption.svelte +20 -20
  125. package/dist/components/ui/table/table-cell.svelte +15 -15
  126. package/dist/components/ui/table/table-footer.svelte +20 -20
  127. package/dist/components/ui/table/table-head.svelte +15 -15
  128. package/dist/components/ui/table/table-header.svelte +20 -20
  129. package/dist/components/ui/table/table-row.svelte +15 -15
  130. package/dist/components/ui/table/table.svelte +17 -17
  131. package/dist/components/ui/tabs/tabs-content.svelte +17 -17
  132. package/dist/components/ui/tabs/tabs-list.svelte +40 -40
  133. package/dist/components/ui/tabs/tabs-trigger.svelte +23 -23
  134. package/dist/components/ui/tabs/tabs.svelte +19 -19
  135. package/dist/styles/globals.css +149 -149
  136. package/package.json +113 -113
@@ -1,19 +1,19 @@
1
- <script lang="ts">
2
- import Skeleton from "../../../ui/skeleton/skeleton.svelte";
3
- import ImgPlaceholderCompany from "../../../../assets/placeholder-company.png";
4
-
5
- let { logo, isLoading = false }: { logo?: string; isLoading?: boolean } =
6
- $props();
7
- </script>
8
-
9
- {#if isLoading}
10
- <Skeleton class="w-12 h-12 rounded-lg bg-gray-300" />
11
- {:else if logo}
12
- <img
13
- src={logo}
14
- alt={logo}
15
- class="w-12 h-12 rounded-lg"
16
- onerror={(e) =>
17
- ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
18
- />
19
- {/if}
1
+ <script lang="ts">
2
+ import Skeleton from "../../../ui/skeleton/skeleton.svelte";
3
+ import ImgPlaceholderCompany from "../../../../assets/placeholder-company.png";
4
+
5
+ let { logo, isLoading = false }: { logo?: string; isLoading?: boolean } =
6
+ $props();
7
+ </script>
8
+
9
+ {#if isLoading}
10
+ <Skeleton class="w-12 h-12 rounded-lg bg-gray-300" />
11
+ {:else if logo}
12
+ <img
13
+ src={logo}
14
+ alt={logo}
15
+ class="w-12 h-12 rounded-lg"
16
+ onerror={(e) =>
17
+ ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
18
+ />
19
+ {/if}
@@ -1,45 +1,45 @@
1
- <script lang="ts">
2
- import { Mail01Icon, WhatsappIcon } from "@hugeicons/core-free-icons";
3
- import { HugeiconsIcon } from "@hugeicons/svelte";
4
- import type { CardPhoneOrWhatsappProps } from "../types";
5
-
6
- let {
7
- id,
8
- className,
9
- buttonClass,
10
- btnWhatsappClass,
11
- btnEmailClass,
12
- onEmailClick,
13
- onWhatsappClick,
14
- }: CardPhoneOrWhatsappProps = $props();
15
-
16
- let isFlex = $derived(onEmailClick && onWhatsappClick);
17
- </script>
18
-
19
- <div class="flex border-t border-gray-300 dark:border-gray-700 {className}">
20
- {#if onEmailClick}
21
- <button
22
- class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-red-800 hover:text-white cursor-pointer rounded-bl-lg {!isFlex
23
- ? 'rounded-br-lg'
24
- : ''} {buttonClass} {btnEmailClass}"
25
- onclick={() => onEmailClick?.(id)}
26
- >
27
- <HugeiconsIcon icon={Mail01Icon} size={20} />
28
- <span>Email</span>
29
- </button>
30
- {/if}
31
- {#if isFlex}
32
- <div class="border-l border-gray-300 dark:border-gray-700"></div>
33
- {/if}
34
- {#if onWhatsappClick}
35
- <button
36
- class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-green-600 hover:text-white cursor-pointer rounded-br-lg {!isFlex
37
- ? 'rounded-bl-lg'
38
- : ''} {buttonClass} {btnWhatsappClass}"
39
- onclick={() => onWhatsappClick?.(id)}
40
- >
41
- <HugeiconsIcon icon={WhatsappIcon} size={20} />
42
- <span>Whatsapp</span>
43
- </button>
44
- {/if}
45
- </div>
1
+ <script lang="ts">
2
+ import { Mail01Icon, WhatsappIcon } from "@hugeicons/core-free-icons";
3
+ import { HugeiconsIcon } from "@hugeicons/svelte";
4
+ import type { CardPhoneOrWhatsappProps } from "../types";
5
+
6
+ let {
7
+ id,
8
+ className,
9
+ buttonClass,
10
+ btnWhatsappClass,
11
+ btnEmailClass,
12
+ onEmailClick,
13
+ onWhatsappClick,
14
+ }: CardPhoneOrWhatsappProps = $props();
15
+
16
+ let isFlex = $derived(onEmailClick && onWhatsappClick);
17
+ </script>
18
+
19
+ <div class="flex border-t border-gray-300 dark:border-gray-700 {className}">
20
+ {#if onEmailClick}
21
+ <button
22
+ class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-red-800 hover:text-white cursor-pointer rounded-bl-lg {!isFlex
23
+ ? 'rounded-br-lg'
24
+ : ''} {buttonClass} {btnEmailClass}"
25
+ onclick={() => onEmailClick?.(id)}
26
+ >
27
+ <HugeiconsIcon icon={Mail01Icon} size={20} />
28
+ <span>Email</span>
29
+ </button>
30
+ {/if}
31
+ {#if isFlex}
32
+ <div class="border-l border-gray-300 dark:border-gray-700"></div>
33
+ {/if}
34
+ {#if onWhatsappClick}
35
+ <button
36
+ class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-green-600 hover:text-white cursor-pointer rounded-br-lg {!isFlex
37
+ ? 'rounded-bl-lg'
38
+ : ''} {buttonClass} {btnWhatsappClass}"
39
+ onclick={() => onWhatsappClick?.(id)}
40
+ >
41
+ <HugeiconsIcon icon={WhatsappIcon} size={20} />
42
+ <span>Whatsapp</span>
43
+ </button>
44
+ {/if}
45
+ </div>
@@ -1,24 +1,24 @@
1
- <script lang="ts">
2
- import Skeleton from "../../../ui/skeleton/skeleton.svelte";
3
- import * as StarRating from "../../../ui/star-rating";
4
-
5
- type Props = {
6
- startNumber: number;
7
- startMax: number;
8
- isLoading?: boolean;
9
- };
10
-
11
- let { startNumber, startMax, isLoading }: Props = $props();
12
- </script>
13
-
14
- {#if isLoading}
15
- <Skeleton class="w-12 h-6 rounded-lg bg-gray-300/90" />
16
- {:else if startNumber}
17
- <StarRating.Root max={startMax} value={startNumber} class="size-15 h-auto">
18
- {#snippet children({ items })}
19
- {#each items as item (item.index)}
20
- <StarRating.Star {...item} class="py-0! my-0!" />
21
- {/each}
22
- {/snippet}
23
- </StarRating.Root>
24
- {/if}
1
+ <script lang="ts">
2
+ import Skeleton from "../../../ui/skeleton/skeleton.svelte";
3
+ import * as StarRating from "../../../ui/star-rating";
4
+
5
+ type Props = {
6
+ startNumber: number;
7
+ startMax: number;
8
+ isLoading?: boolean;
9
+ };
10
+
11
+ let { startNumber, startMax, isLoading }: Props = $props();
12
+ </script>
13
+
14
+ {#if isLoading}
15
+ <Skeleton class="w-12 h-6 rounded-lg bg-gray-300/90" />
16
+ {:else if startNumber}
17
+ <StarRating.Root max={startMax} value={startNumber} class="size-15 h-auto">
18
+ {#snippet children({ items })}
19
+ {#each items as item (item.index)}
20
+ <StarRating.Star {...item} class="py-0! my-0!" />
21
+ {/each}
22
+ {/snippet}
23
+ </StarRating.Root>
24
+ {/if}
@@ -1,95 +1,95 @@
1
- <script lang="ts">
2
- import { HugeiconsIcon } from "@hugeicons/svelte";
3
- import type { CardTagsProps } from "../types";
4
- import Skeleton from "../../../ui/skeleton/skeleton.svelte";
5
- import * as Popover from "../../../ui/popover"; // adjust path to your setup
6
-
7
- type Props = {
8
- className?: string;
9
- tags?: CardTagsProps[];
10
- isTagBorderBottom?: boolean;
11
- isWrap?: boolean;
12
- isLoading?: boolean;
13
- };
14
-
15
- const {
16
- tags = [],
17
- className,
18
- isTagBorderBottom,
19
- isWrap = false,
20
- isLoading = false,
21
- }: Props = $props();
22
-
23
- let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
24
- let open = $state(false);
25
- </script>
26
-
27
- {#snippet createBadge(tag: CardTagsProps, clasName?: string)}
28
- <div
29
- class="flex items-center h-5 shrink-0 {isTagBorderBottom
30
- ? 'border border-gray-200 rounded-full px-2 py-1'
31
- : ''} {clasName}"
32
- >
33
- {#if tag.icon}
34
- <HugeiconsIcon icon={tag.icon} class="mr-0.5 h-3.75 w-3.75 shrink-0" />
35
- {/if}
36
- <div class="whitespace-nowrap">{tag.text}</div>
37
- </div>
38
- {/snippet}
39
-
40
- {#snippet skeletonTag()}
41
- <div class="my-2 flex gap-5">
42
- {#each Array.from({ length: 3 }) as it, i (i)}
43
- <Skeleton class="h-5 w-25 bg-black/50" />
44
- {/each}
45
- </div>
46
- {/snippet}
47
-
48
- {#snippet tagsRow()}
49
- {#if isWrap}
50
- <div class="flex flex-wrap gap-2 md:gap-5 {className}">
51
- {#if isLoading}
52
- {@render skeletonTag()}
53
- {:else if tags && tags.length > 0}
54
- {#each tags as tag, i (i)}
55
- {@render createBadge(tag)}
56
- {/each}
57
- {/if}
58
- </div>
59
- {:else}
60
- <div
61
- class="flex overflow-x-auto no-scrollbar w-full min-w-0
62
- {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
63
- {className}"
64
- >
65
- {#if isLoading}
66
- {@render skeletonTag()}
67
- {:else if tags && tags.length > 0}
68
- {#each tags as tag, i (i)}
69
- {@render createBadge(tag)}
70
- {/each}
71
- {/if}
72
- </div>
73
- {/if}
74
- {/snippet}
75
-
76
- <Popover.Root bind:open>
77
- <Popover.Trigger
78
- onmouseenter={() => (open = true)}
79
- onmouseleave={() => (open = false)}
80
- class="block w-full text-left h-8"
81
- >
82
- {@render tagsRow()}
83
- </Popover.Trigger>
84
- <Popover.Content
85
- class="w-auto max-w-xs p-3"
86
- onmouseenter={() => (open = true)}
87
- onmouseleave={() => (open = false)}
88
- >
89
- <div class="flex flex-col gap-2">
90
- {#each tags as tag, i (i)}
91
- {@render createBadge(tag, "gap-2")}
92
- {/each}
93
- </div>
94
- </Popover.Content>
95
- </Popover.Root>
1
+ <script lang="ts">
2
+ import { HugeiconsIcon } from "@hugeicons/svelte";
3
+ import type { CardTagsProps } from "../types";
4
+ import Skeleton from "../../../ui/skeleton/skeleton.svelte";
5
+ import * as Popover from "../../../ui/popover"; // adjust path to your setup
6
+
7
+ type Props = {
8
+ className?: string;
9
+ tags?: CardTagsProps[];
10
+ isTagBorderBottom?: boolean;
11
+ isWrap?: boolean;
12
+ isLoading?: boolean;
13
+ };
14
+
15
+ const {
16
+ tags = [],
17
+ className,
18
+ isTagBorderBottom,
19
+ isWrap = false,
20
+ isLoading = false,
21
+ }: Props = $props();
22
+
23
+ let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
24
+ let open = $state(false);
25
+ </script>
26
+
27
+ {#snippet createBadge(tag: CardTagsProps, clasName?: string)}
28
+ <div
29
+ class="flex items-center h-5 shrink-0 {isTagBorderBottom
30
+ ? 'border border-gray-200 rounded-full px-2 py-1'
31
+ : ''} {clasName}"
32
+ >
33
+ {#if tag.icon}
34
+ <HugeiconsIcon icon={tag.icon} class="mr-0.5 h-3.75 w-3.75 shrink-0" />
35
+ {/if}
36
+ <div class="whitespace-nowrap">{tag.text}</div>
37
+ </div>
38
+ {/snippet}
39
+
40
+ {#snippet skeletonTag()}
41
+ <div class="my-2 flex gap-5">
42
+ {#each Array.from({ length: 3 }) as it, i (i)}
43
+ <Skeleton class="h-5 w-25 bg-black/50" />
44
+ {/each}
45
+ </div>
46
+ {/snippet}
47
+
48
+ {#snippet tagsRow()}
49
+ {#if isWrap}
50
+ <div class="flex flex-wrap gap-2 md:gap-5 {className}">
51
+ {#if isLoading}
52
+ {@render skeletonTag()}
53
+ {:else if tags && tags.length > 0}
54
+ {#each tags as tag, i (i)}
55
+ {@render createBadge(tag)}
56
+ {/each}
57
+ {/if}
58
+ </div>
59
+ {:else}
60
+ <div
61
+ class="flex overflow-x-auto no-scrollbar w-full min-w-0
62
+ {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
63
+ {className}"
64
+ >
65
+ {#if isLoading}
66
+ {@render skeletonTag()}
67
+ {:else if tags && tags.length > 0}
68
+ {#each tags as tag, i (i)}
69
+ {@render createBadge(tag)}
70
+ {/each}
71
+ {/if}
72
+ </div>
73
+ {/if}
74
+ {/snippet}
75
+
76
+ <Popover.Root bind:open>
77
+ <Popover.Trigger
78
+ onmouseenter={() => (open = true)}
79
+ onmouseleave={() => (open = false)}
80
+ class="block w-full text-left h-8"
81
+ >
82
+ {@render tagsRow()}
83
+ </Popover.Trigger>
84
+ <Popover.Content
85
+ class="w-auto max-w-xs p-3"
86
+ onmouseenter={() => (open = true)}
87
+ onmouseleave={() => (open = false)}
88
+ >
89
+ <div class="flex flex-col gap-2">
90
+ {#each tags as tag, i (i)}
91
+ {@render createBadge(tag, "gap-2")}
92
+ {/each}
93
+ </div>
94
+ </Popover.Content>
95
+ </Popover.Root>