flowbite-svelte 1.14.6 → 1.16.0

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 (242) hide show
  1. package/dist/dialog/Dialog.svelte +28 -1
  2. package/dist/dialog/Dialog.svelte.d.ts +1 -0
  3. package/dist/drawer/Drawer.svelte +1 -1
  4. package/dist/drawer/Drawer.svelte.d.ts +1 -1
  5. package/dist/drawer/DrawerHandle.svelte +1 -1
  6. package/dist/drawer/DrawerHandle.svelte.d.ts +1 -1
  7. package/dist/drawer/Drawerhead.svelte +1 -1
  8. package/dist/drawer/Drawerhead.svelte.d.ts +1 -1
  9. package/dist/dropdown/Dropdown.svelte +1 -1
  10. package/dist/dropdown/Dropdown.svelte.d.ts +1 -1
  11. package/dist/dropdown/DropdownDivider.svelte +1 -1
  12. package/dist/dropdown/DropdownDivider.svelte.d.ts +1 -1
  13. package/dist/dropdown/DropdownGroup.svelte +1 -1
  14. package/dist/dropdown/DropdownGroup.svelte.d.ts +1 -1
  15. package/dist/dropdown/DropdownHeader.svelte +1 -1
  16. package/dist/dropdown/DropdownHeader.svelte.d.ts +1 -1
  17. package/dist/dropdown/DropdownItem.svelte +1 -1
  18. package/dist/dropdown/DropdownItem.svelte.d.ts +1 -1
  19. package/dist/footer/Footer.svelte +1 -1
  20. package/dist/footer/Footer.svelte.d.ts +1 -1
  21. package/dist/footer/FooterBrand.svelte +1 -1
  22. package/dist/footer/FooterBrand.svelte.d.ts +1 -1
  23. package/dist/footer/FooterCopyright.svelte +1 -1
  24. package/dist/footer/FooterCopyright.svelte.d.ts +1 -1
  25. package/dist/footer/FooterIcon.svelte +1 -1
  26. package/dist/footer/FooterIcon.svelte.d.ts +1 -1
  27. package/dist/footer/FooterLink.svelte +1 -1
  28. package/dist/footer/FooterLink.svelte.d.ts +1 -1
  29. package/dist/footer/FooterLinkGroup.svelte +1 -1
  30. package/dist/footer/FooterLinkGroup.svelte.d.ts +1 -1
  31. package/dist/forms/checkbox/CheckboxButton.svelte +1 -1
  32. package/dist/forms/checkbox/CheckboxButton.svelte.d.ts +1 -1
  33. package/dist/forms/dropzone/Dropzone.svelte +1 -1
  34. package/dist/forms/dropzone/Dropzone.svelte.d.ts +1 -1
  35. package/dist/forms/fileupload/Fileupload.svelte +1 -1
  36. package/dist/forms/fileupload/Fileupload.svelte.d.ts +1 -1
  37. package/dist/forms/floating-label/FloatingLabelInput.svelte +1 -1
  38. package/dist/forms/floating-label/FloatingLabelInput.svelte.d.ts +1 -1
  39. package/dist/forms/helper/Helper.svelte +1 -1
  40. package/dist/forms/helper/Helper.svelte.d.ts +1 -1
  41. package/dist/forms/input-addon/InputAddon.svelte +1 -1
  42. package/dist/forms/input-addon/InputAddon.svelte.d.ts +1 -1
  43. package/dist/forms/label/Label.svelte +1 -1
  44. package/dist/forms/label/Label.svelte.d.ts +1 -1
  45. package/dist/forms/range/Range.svelte +1 -1
  46. package/dist/forms/range/Range.svelte.d.ts +1 -1
  47. package/dist/forms/search/Search.svelte +1 -1
  48. package/dist/forms/search/Search.svelte.d.ts +1 -1
  49. package/dist/forms/textarea/Textarea.svelte +1 -1
  50. package/dist/forms/textarea/Textarea.svelte.d.ts +1 -1
  51. package/dist/forms/timepicker/Timepicker.svelte +1 -1
  52. package/dist/forms/timepicker/Timepicker.svelte.d.ts +1 -1
  53. package/dist/forms/toggle/Toggle.svelte +1 -1
  54. package/dist/forms/toggle/Toggle.svelte.d.ts +1 -1
  55. package/dist/gallery/Gallery.svelte +1 -1
  56. package/dist/gallery/Gallery.svelte.d.ts +1 -1
  57. package/dist/indicator/Indicator.svelte +1 -1
  58. package/dist/indicator/Indicator.svelte.d.ts +1 -1
  59. package/dist/kbd/Kbd.svelte +1 -1
  60. package/dist/kbd/Kbd.svelte.d.ts +1 -1
  61. package/dist/list-group/Listgroup.svelte +1 -1
  62. package/dist/list-group/Listgroup.svelte.d.ts +1 -1
  63. package/dist/list-group/ListgroupItem.svelte +1 -1
  64. package/dist/list-group/ListgroupItem.svelte.d.ts +1 -1
  65. package/dist/mega-menu/MegaMenu.svelte +1 -1
  66. package/dist/mega-menu/MegaMenu.svelte.d.ts +1 -1
  67. package/dist/modal/Modal.svelte +95 -36
  68. package/dist/modal/Modal.svelte.d.ts +0 -25
  69. package/dist/navbar/Menu.svelte +1 -1
  70. package/dist/navbar/Menu.svelte.d.ts +1 -1
  71. package/dist/navbar/NavBrand.svelte +1 -1
  72. package/dist/navbar/NavBrand.svelte.d.ts +1 -1
  73. package/dist/navbar/NavContainer.svelte +1 -1
  74. package/dist/navbar/NavContainer.svelte.d.ts +1 -1
  75. package/dist/navbar/NavHamburger.svelte +1 -1
  76. package/dist/navbar/NavHamburger.svelte.d.ts +1 -1
  77. package/dist/navbar/NavLi.svelte +1 -1
  78. package/dist/navbar/NavLi.svelte.d.ts +1 -1
  79. package/dist/navbar/NavUl.svelte +1 -1
  80. package/dist/navbar/NavUl.svelte.d.ts +1 -1
  81. package/dist/navbar/Navbar.svelte +1 -1
  82. package/dist/navbar/Navbar.svelte.d.ts +1 -1
  83. package/dist/pagination/Pagination.svelte +1 -1
  84. package/dist/pagination/Pagination.svelte.d.ts +1 -1
  85. package/dist/pagination/PaginationButton.svelte +1 -1
  86. package/dist/pagination/PaginationButton.svelte.d.ts +1 -1
  87. package/dist/pagination/PaginationItem.svelte +1 -1
  88. package/dist/pagination/PaginationItem.svelte.d.ts +1 -1
  89. package/dist/pagination/PaginationNav.svelte +1 -1
  90. package/dist/pagination/PaginationNav.svelte.d.ts +1 -1
  91. package/dist/popover/Popover.svelte +1 -1
  92. package/dist/popover/Popover.svelte.d.ts +1 -1
  93. package/dist/progress/Progressbar.svelte +1 -1
  94. package/dist/progress/Progressbar.svelte.d.ts +1 -1
  95. package/dist/progress/Progressradial.svelte +1 -1
  96. package/dist/progress/Progressradial.svelte.d.ts +1 -1
  97. package/dist/rating/AdvancedRating.svelte +1 -1
  98. package/dist/rating/AdvancedRating.svelte.d.ts +1 -1
  99. package/dist/rating/CustomIcon.svelte +1 -1
  100. package/dist/rating/CustomIcon.svelte.d.ts +1 -1
  101. package/dist/rating/Heart.svelte +1 -1
  102. package/dist/rating/Heart.svelte.d.ts +1 -1
  103. package/dist/rating/Rating.svelte +1 -1
  104. package/dist/rating/Rating.svelte.d.ts +1 -1
  105. package/dist/rating/RatingComment.svelte +1 -1
  106. package/dist/rating/RatingComment.svelte.d.ts +1 -1
  107. package/dist/rating/Review.svelte +1 -1
  108. package/dist/rating/Review.svelte.d.ts +1 -1
  109. package/dist/rating/ScoreRating.svelte +1 -1
  110. package/dist/rating/ScoreRating.svelte.d.ts +1 -1
  111. package/dist/rating/Star.svelte +1 -1
  112. package/dist/rating/Star.svelte.d.ts +1 -1
  113. package/dist/rating/Thumbup.svelte +1 -1
  114. package/dist/rating/Thumbup.svelte.d.ts +1 -1
  115. package/dist/sidebar/Sidebar.svelte +1 -1
  116. package/dist/sidebar/Sidebar.svelte.d.ts +1 -1
  117. package/dist/sidebar/SidebarBrand.svelte +1 -1
  118. package/dist/sidebar/SidebarBrand.svelte.d.ts +1 -1
  119. package/dist/sidebar/SidebarButton.svelte +1 -1
  120. package/dist/sidebar/SidebarButton.svelte.d.ts +1 -1
  121. package/dist/sidebar/SidebarCta.svelte +1 -1
  122. package/dist/sidebar/SidebarCta.svelte.d.ts +1 -1
  123. package/dist/sidebar/SidebarDropdownWrapper.svelte +1 -1
  124. package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts +1 -1
  125. package/dist/sidebar/SidebarGroup.svelte +1 -1
  126. package/dist/sidebar/SidebarGroup.svelte.d.ts +1 -1
  127. package/dist/sidebar/SidebarItem.svelte +1 -1
  128. package/dist/sidebar/SidebarItem.svelte.d.ts +1 -1
  129. package/dist/skeleton/CardPlaceholder.svelte +1 -1
  130. package/dist/skeleton/CardPlaceholder.svelte.d.ts +1 -1
  131. package/dist/skeleton/ImagePlaceholder.svelte +1 -1
  132. package/dist/skeleton/ImagePlaceholder.svelte.d.ts +1 -1
  133. package/dist/skeleton/ListPlaceholder.svelte +1 -1
  134. package/dist/skeleton/ListPlaceholder.svelte.d.ts +1 -1
  135. package/dist/skeleton/Skeleton.svelte +1 -1
  136. package/dist/skeleton/Skeleton.svelte.d.ts +1 -1
  137. package/dist/skeleton/TestimonialPlaceholder.svelte +1 -1
  138. package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts +1 -1
  139. package/dist/skeleton/TextPlaceholder.svelte +1 -1
  140. package/dist/skeleton/TextPlaceholder.svelte.d.ts +1 -1
  141. package/dist/skeleton/VideoPlaceholder.svelte +1 -1
  142. package/dist/skeleton/VideoPlaceholder.svelte.d.ts +1 -1
  143. package/dist/skeleton/WidgetPlaceholder.svelte +1 -1
  144. package/dist/skeleton/WidgetPlaceholder.svelte.d.ts +1 -1
  145. package/dist/speed-dial/SpeedDial.svelte +1 -1
  146. package/dist/speed-dial/SpeedDial.svelte.d.ts +1 -1
  147. package/dist/speed-dial/SpeedDialButton.svelte +1 -1
  148. package/dist/speed-dial/SpeedDialButton.svelte.d.ts +1 -1
  149. package/dist/speed-dial/SpeedDialTrigger.svelte +1 -1
  150. package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts +1 -1
  151. package/dist/spinner/Spinner.svelte +1 -1
  152. package/dist/spinner/Spinner.svelte.d.ts +1 -1
  153. package/dist/step-indicator/StepIndicator.svelte +1 -1
  154. package/dist/step-indicator/StepIndicator.svelte.d.ts +1 -1
  155. package/dist/stepper/BreadcrumbStepper.svelte +1 -1
  156. package/dist/stepper/BreadcrumbStepper.svelte.d.ts +1 -1
  157. package/dist/stepper/DetailedStepper.svelte +1 -1
  158. package/dist/stepper/DetailedStepper.svelte.d.ts +1 -1
  159. package/dist/stepper/ProgressStepper.svelte +1 -1
  160. package/dist/stepper/ProgressStepper.svelte.d.ts +1 -1
  161. package/dist/stepper/Stepper.svelte +1 -1
  162. package/dist/stepper/Stepper.svelte.d.ts +1 -1
  163. package/dist/stepper/TimelineStepper.svelte +1 -1
  164. package/dist/stepper/TimelineStepper.svelte.d.ts +1 -1
  165. package/dist/stepper/VerticalStepper.svelte +1 -1
  166. package/dist/stepper/VerticalStepper.svelte.d.ts +1 -1
  167. package/dist/table/Table.svelte +1 -1
  168. package/dist/table/Table.svelte.d.ts +1 -1
  169. package/dist/table/TableBody.svelte +1 -1
  170. package/dist/table/TableBody.svelte.d.ts +1 -1
  171. package/dist/table/TableBodyCell.svelte +1 -1
  172. package/dist/table/TableBodyCell.svelte.d.ts +1 -1
  173. package/dist/table/TableBodyRow.svelte +1 -1
  174. package/dist/table/TableBodyRow.svelte.d.ts +1 -1
  175. package/dist/table/TableHead.svelte +1 -1
  176. package/dist/table/TableHead.svelte.d.ts +1 -1
  177. package/dist/table/TableHeadCell.svelte +1 -1
  178. package/dist/table/TableHeadCell.svelte.d.ts +1 -1
  179. package/dist/table/TableSearch.svelte +1 -1
  180. package/dist/table/TableSearch.svelte.d.ts +1 -1
  181. package/dist/tabs/TabItem.svelte +1 -1
  182. package/dist/tabs/TabItem.svelte.d.ts +1 -1
  183. package/dist/tabs/Tabs.svelte +1 -1
  184. package/dist/tabs/Tabs.svelte.d.ts +1 -1
  185. package/dist/timeline/Activity.svelte +1 -1
  186. package/dist/timeline/Activity.svelte.d.ts +1 -1
  187. package/dist/timeline/ActivityItem.svelte +1 -1
  188. package/dist/timeline/ActivityItem.svelte.d.ts +1 -1
  189. package/dist/timeline/Group.svelte +1 -1
  190. package/dist/timeline/Group.svelte.d.ts +1 -1
  191. package/dist/timeline/GroupItem.svelte +1 -1
  192. package/dist/timeline/GroupItem.svelte.d.ts +1 -1
  193. package/dist/timeline/Timeline.svelte +1 -1
  194. package/dist/timeline/Timeline.svelte.d.ts +1 -1
  195. package/dist/timeline/TimelineItem.svelte +22 -8
  196. package/dist/timeline/TimelineItem.svelte.d.ts +5 -1
  197. package/dist/timeline/theme.d.ts +48 -0
  198. package/dist/timeline/theme.js +205 -13
  199. package/dist/toast/Toast.svelte +1 -1
  200. package/dist/toast/Toast.svelte.d.ts +1 -1
  201. package/dist/toolbar/Toolbar.svelte +1 -1
  202. package/dist/toolbar/Toolbar.svelte.d.ts +1 -1
  203. package/dist/toolbar/ToolbarButton.svelte +1 -1
  204. package/dist/toolbar/ToolbarButton.svelte.d.ts +1 -1
  205. package/dist/toolbar/ToolbarGroup.svelte +1 -1
  206. package/dist/toolbar/ToolbarGroup.svelte.d.ts +1 -1
  207. package/dist/tooltip/Tooltip.svelte +1 -1
  208. package/dist/tooltip/Tooltip.svelte.d.ts +1 -1
  209. package/dist/types.d.ts +11 -0
  210. package/dist/typography/a/A.svelte +1 -1
  211. package/dist/typography/a/A.svelte.d.ts +1 -1
  212. package/dist/typography/blockquote/Blockquote.svelte +1 -1
  213. package/dist/typography/blockquote/Blockquote.svelte.d.ts +1 -1
  214. package/dist/typography/descriptionlist/DescriptionList.svelte +1 -1
  215. package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts +1 -1
  216. package/dist/typography/heading/Heading.svelte +1 -1
  217. package/dist/typography/heading/Heading.svelte.d.ts +1 -1
  218. package/dist/typography/img/EnhancedImg.svelte +1 -1
  219. package/dist/typography/img/EnhancedImg.svelte.d.ts +1 -1
  220. package/dist/typography/img/Img.svelte +1 -1
  221. package/dist/typography/img/Img.svelte.d.ts +1 -1
  222. package/dist/typography/layout/Layout.svelte +1 -1
  223. package/dist/typography/layout/Layout.svelte.d.ts +1 -1
  224. package/dist/typography/list/Li.svelte +1 -1
  225. package/dist/typography/list/Li.svelte.d.ts +1 -1
  226. package/dist/typography/list/List.svelte +1 -1
  227. package/dist/typography/list/List.svelte.d.ts +1 -1
  228. package/dist/typography/mark/Mark.svelte +1 -1
  229. package/dist/typography/mark/Mark.svelte.d.ts +1 -1
  230. package/dist/typography/paragraph/P.svelte +1 -1
  231. package/dist/typography/paragraph/P.svelte.d.ts +1 -1
  232. package/dist/typography/secondary/Secondary.svelte +1 -1
  233. package/dist/typography/secondary/Secondary.svelte.d.ts +1 -1
  234. package/dist/typography/span/Span.svelte +1 -1
  235. package/dist/typography/span/Span.svelte.d.ts +1 -1
  236. package/dist/utils/Arrow.svelte +1 -1
  237. package/dist/utils/Arrow.svelte.d.ts +1 -1
  238. package/dist/utils/Popper.svelte +1 -1
  239. package/dist/utils/Popper.svelte.d.ts +1 -1
  240. package/dist/video/Video.svelte +1 -1
  241. package/dist/video/Video.svelte.d.ts +1 -1
  242. package/package.json +1 -1
@@ -33,7 +33,7 @@
33
33
  @component
34
34
  [Go to docs](https://flowbite-svelte.com/)
35
35
  ## Type
36
- [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L996)
36
+ [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L997)
37
37
  ## Props
38
38
  @prop children
39
39
  @prop color = "primary"
@@ -2,7 +2,7 @@ import type { IndicatorProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L996)
5
+ * [IndicatorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L997)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop color = "primary"
@@ -19,7 +19,7 @@
19
19
  @component
20
20
  [Go to docs](https://flowbite-svelte.com/)
21
21
  ## Type
22
- [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
22
+ [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1008)
23
23
  ## Props
24
24
  @prop children
25
25
  @prop class: className
@@ -2,7 +2,7 @@ import type { KbdProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1007)
5
+ * [KbdProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1008)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop class: className
@@ -47,7 +47,7 @@
47
47
  @component
48
48
  [Go to docs](https://flowbite-svelte.com/)
49
49
  ## Type
50
- [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1026)
50
+ [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1027)
51
51
  ## Props
52
52
  @prop children
53
53
  @prop items
@@ -2,7 +2,7 @@ import type { ListgroupProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1026)
5
+ * [ListgroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1027)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop items
@@ -45,7 +45,7 @@
45
45
  @component
46
46
  [Go to docs](https://flowbite-svelte.com/)
47
47
  ## Type
48
- [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
48
+ [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
49
49
  ## Props
50
50
  @prop children
51
51
  @prop active
@@ -2,7 +2,7 @@ import type { ListgroupItemProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1037)
5
+ * [ListgroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1038)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop active
@@ -40,7 +40,7 @@
40
40
  @component
41
41
  [Go to docs](https://flowbite-svelte.com/)
42
42
  ## Type
43
- [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
43
+ [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1049)
44
44
  ## Props
45
45
  @prop children
46
46
  @prop extra
@@ -2,7 +2,7 @@ import type { MegaMenuProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1048)
5
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1049)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop extra
@@ -7,67 +7,126 @@
7
7
  import { sineIn } from "svelte/easing";
8
8
  import { fade } from "svelte/transition";
9
9
  import { modal as modalStyle } from "./theme";
10
+ import { onMount } from "svelte";
10
11
 
11
- let { children, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, size = "md", placement, class: className, classes, transitionParams, transition = fade, fullscreen = false, ...restProps }: ModalProps = $props();
12
+ let {
13
+ children,
14
+ header,
15
+ footer,
16
+ title,
17
+ open = $bindable(false),
18
+ permanent = false,
19
+ dismissable = true,
20
+ closeBtnClass,
21
+ headerClass,
22
+ bodyClass,
23
+ footerClass,
24
+ size = "md",
25
+ placement,
26
+ class: className,
27
+ classes,
28
+ transitionParams,
29
+ transition = fade,
30
+ fullscreen = false,
31
+ countdown: countdownConfig = {
32
+ number: 0,
33
+ text: "You can close this in {count} seconds"
34
+ },
35
+ ...restProps
36
+ }: ModalProps = $props();
12
37
 
13
- // form, header, footer, body, close
14
38
  warnThemeDeprecation("Modal", { headerClass, bodyClass, footerClass, closeBtnClass }, { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" });
15
39
  const styling = $derived(classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass });
16
40
 
17
41
  const theme = getTheme("modal");
18
-
19
42
  const paramsDefault = { duration: 100, easing: sineIn };
20
43
  const paramsOptions = $derived(transitionParams ?? paramsDefault);
21
-
22
44
  const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement, size }));
45
+
46
+ // Countdown logic
47
+ let countdownRemaining = $state(countdownConfig.number);
48
+ let countdownActive = $state(countdownConfig.number > 0);
49
+ let outsideclose = $derived(countdownRemaining > 0 ? false : true);
50
+ let countdownInterval: NodeJS.Timeout | null = null;
51
+
52
+ // Reset countdown when modal opens
53
+ $effect(() => {
54
+ if (open && countdownConfig.number > 0) {
55
+ countdownRemaining = countdownConfig.number;
56
+ countdownActive = true;
57
+ startCountdown();
58
+ } else if (!open) {
59
+ stopCountdown();
60
+ }
61
+ });
62
+
63
+ function startCountdown() {
64
+ stopCountdown(); // Clear any existing interval
65
+ countdownInterval = setInterval(() => {
66
+ countdownRemaining--;
67
+ if (countdownRemaining <= 0) {
68
+ countdownActive = false;
69
+ stopCountdown();
70
+ }
71
+ }, 1000);
72
+ }
73
+
74
+ function stopCountdown() {
75
+ if (countdownInterval) {
76
+ clearInterval(countdownInterval);
77
+ countdownInterval = null;
78
+ }
79
+ }
80
+
81
+ // Cleanup on destroy
82
+ onMount(() => {
83
+ return () => stopCountdown();
84
+ });
85
+
86
+ // Determine if close button should be shown
87
+ const shouldShowCloseButton = $derived(dismissable && !permanent && !countdownActive);
88
+ const shouldShowCountdownMessage = $derived(countdownActive && countdownRemaining > 0);
89
+
90
+ // Countdown display text
91
+ const displayCountdownText = $derived(() => {
92
+ if (typeof countdownConfig.text === "function") {
93
+ return countdownConfig.text(countdownRemaining);
94
+ } else {
95
+ return (countdownConfig.text ?? "").replace("{count}", countdownRemaining.toString());
96
+ }
97
+ });
23
98
  </script>
24
99
 
25
- <Dialog bind:open {transition} dismissable={dismissable && !title && !permanent} transitionParams={paramsOptions} {classes} {...restProps} class={base({ fullscreen, class: clsx(theme?.base, className) })}>
100
+ <Dialog bind:open {transition} dismissable={dismissable && !title && !permanent && !countdownActive} transitionParams={paramsOptions} {classes} count={countdownRemaining} {outsideclose} {...restProps} class={base({ fullscreen, class: clsx(theme?.base, className) })}>
26
101
  {#if title || header}
27
102
  <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
28
103
  {#if title}
29
- <h3>{title}</h3>
30
- {#if dismissable && !permanent}
31
- <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
32
- {/if}
104
+ <div class="flex w-full items-center justify-between">
105
+ <h3 class="flex-1">{title}</h3>
106
+ <div class="flex items-center gap-2">
107
+ {#if shouldShowCountdownMessage}
108
+ <span class="text-sm text-gray-500 dark:text-gray-400">
109
+ {displayCountdownText()}
110
+ </span>
111
+ {/if}
112
+ {#if shouldShowCloseButton}
113
+ <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
114
+ {/if}
115
+ </div>
116
+ </div>
33
117
  {:else if header}
34
118
  {@render header()}
35
119
  {/if}
36
120
  </div>
37
121
  {/if}
122
+
38
123
  <div class={body({ class: clsx(theme?.body, styling.body) })}>
39
124
  {@render children?.()}
40
125
  </div>
126
+
41
127
  {#if footer}
42
128
  <div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
43
129
  {@render footer()}
44
130
  </div>
45
131
  {/if}
46
132
  </Dialog>
47
-
48
- <!--
49
- @component
50
- [Go to docs](https://flowbite-svelte.com/)
51
- ## Type
52
- [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
53
- ## Props
54
- @prop children
55
- @prop header
56
- @prop footer
57
- @prop title
58
- @prop open = $bindable(false)
59
- @prop permanent = false
60
- @prop dismissable = true
61
- @prop closeBtnClass
62
- @prop headerClass
63
- @prop bodyClass
64
- @prop footerClass
65
- @prop size = "md"
66
- @prop placement
67
- @prop class: className
68
- @prop classes
69
- @prop transitionParams
70
- @prop transition = fade
71
- @prop fullscreen = false
72
- @prop ...restProps
73
- -->
@@ -1,29 +1,4 @@
1
1
  import type { ModalProps } from "..";
2
- /**
3
- * [Go to docs](https://flowbite-svelte.com/)
4
- * ## Type
5
- * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1059)
6
- * ## Props
7
- * @prop children
8
- * @prop header
9
- * @prop footer
10
- * @prop title
11
- * @prop open = $bindable(false)
12
- * @prop permanent = false
13
- * @prop dismissable = true
14
- * @prop closeBtnClass
15
- * @prop headerClass
16
- * @prop bodyClass
17
- * @prop footerClass
18
- * @prop size = "md"
19
- * @prop placement
20
- * @prop class: className
21
- * @prop classes
22
- * @prop transitionParams
23
- * @prop transition = fade
24
- * @prop fullscreen = false
25
- * @prop ...restProps
26
- */
27
2
  declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
28
3
  type Modal = ReturnType<typeof Modal>;
29
4
  export default Modal;
@@ -33,7 +33,7 @@
33
33
  @component
34
34
  [Go to docs](https://flowbite-svelte.com/)
35
35
  ## Type
36
- [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1070)
36
+ [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1077)
37
37
  ## Props
38
38
  @prop size = "24"
39
39
  @prop color = "currentColor"
@@ -2,7 +2,7 @@ import type { MenuProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1070)
5
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1077)
6
6
  * ## Props
7
7
  * @prop size = "24"
8
8
  * @prop color = "currentColor"
@@ -17,7 +17,7 @@
17
17
  @component
18
18
  [Go to docs](https://flowbite-svelte.com/)
19
19
  ## Type
20
- [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1094)
20
+ [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1101)
21
21
  ## Props
22
22
  @prop children
23
23
  @prop class: className
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * [Go to docs](https://flowbite-svelte.com/)
3
3
  * ## Type
4
- * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1094)
4
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1101)
5
5
  * ## Props
6
6
  * @prop children
7
7
  * @prop class: className
@@ -17,7 +17,7 @@
17
17
  @component
18
18
  [Go to docs](https://flowbite-svelte.com/)
19
19
  ## Type
20
- [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1096)
20
+ [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1103)
21
21
  ## Props
22
22
  @prop children
23
23
  @prop fluid
@@ -2,7 +2,7 @@ import type { NavContainerProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1096)
5
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1103)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop fluid
@@ -31,7 +31,7 @@
31
31
  @component
32
32
  [Go to docs](https://flowbite-svelte.com/)
33
33
  ## Type
34
- [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
34
+ [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1107)
35
35
  ## Props
36
36
  @prop children
37
37
  @prop onclick
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * [Go to docs](https://flowbite-svelte.com/)
3
3
  * ## Type
4
- * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1100)
4
+ * [NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1107)
5
5
  * ## Props
6
6
  * @prop children
7
7
  * @prop onclick
@@ -44,7 +44,7 @@
44
44
  @component
45
45
  [Go to docs](https://flowbite-svelte.com/)
46
46
  ## Type
47
- [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1121)
47
+ [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1128)
48
48
  ## Props
49
49
  @prop children
50
50
  @prop onclick
@@ -2,7 +2,7 @@ import type { NavLiProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1121)
5
+ * [NavLiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1128)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop onclick
@@ -71,7 +71,7 @@
71
71
  @component
72
72
  [Go to docs](https://flowbite-svelte.com/)
73
73
  ## Type
74
- [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
74
+ [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1113)
75
75
  ## Props
76
76
  @prop children
77
77
  @prop activeUrl = $bindable()
@@ -2,7 +2,7 @@ import type { NavUlProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1106)
5
+ * [NavUlProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1113)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop activeUrl = $bindable()
@@ -44,7 +44,7 @@
44
44
  @component
45
45
  [Go to docs](https://flowbite-svelte.com/)
46
46
  ## Type
47
- [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1086)
47
+ [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1093)
48
48
  ## Props
49
49
  @prop children
50
50
  @prop fluid
@@ -2,7 +2,7 @@ import type { NavbarProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1086)
5
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1093)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop fluid
@@ -55,7 +55,7 @@
55
55
  @component
56
56
  [Go to docs](https://flowbite-svelte.com/)
57
57
  ## Type
58
- [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1193)
58
+ [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1200)
59
59
  ## Props
60
60
  @prop pages = []
61
61
  @prop previous
@@ -2,7 +2,7 @@ import type { PaginationProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1193)
5
+ * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1200)
6
6
  * ## Props
7
7
  * @prop pages = []
8
8
  * @prop previous
@@ -63,7 +63,7 @@
63
63
  @component
64
64
  [Go to docs](https://flowbite-svelte.com/)
65
65
  ## Type
66
- [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1157)
66
+ [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1164)
67
67
  ## Props
68
68
  @prop children
69
69
  @prop size
@@ -2,7 +2,7 @@ import type { PaginationButtonProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1157)
5
+ * [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1164)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop size
@@ -32,7 +32,7 @@
32
32
  @component
33
33
  [Go to docs](https://flowbite-svelte.com/)
34
34
  ## Type
35
- [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1189)
35
+ [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1196)
36
36
  ## Props
37
37
  @prop children
38
38
  @prop size
@@ -2,7 +2,7 @@ import type { PaginationItemProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1189)
5
+ * [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1196)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop size
@@ -109,7 +109,7 @@
109
109
  @component
110
110
  [Go to docs](https://flowbite-svelte.com/)
111
111
  ## Type
112
- [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1163)
112
+ [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
113
113
  ## Props
114
114
  @prop currentPage = 1
115
115
  @prop totalPages = 1
@@ -2,7 +2,7 @@ import type { PaginationNavProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1163)
5
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
6
6
  * ## Props
7
7
  * @prop currentPage = 1
8
8
  * @prop totalPages = 1
@@ -33,7 +33,7 @@
33
33
  @component
34
34
  [Go to docs](https://flowbite-svelte.com/)
35
35
  ## Type
36
- [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1203)
36
+ [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1210)
37
37
  ## Props
38
38
  @prop title: titleSlot
39
39
  @prop color = "default"
@@ -2,7 +2,7 @@ import type { PopoverProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1203)
5
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1210)
6
6
  * ## Props
7
7
  * @prop title: titleSlot
8
8
  * @prop color = "default"
@@ -53,7 +53,7 @@
53
53
  @component
54
54
  [Go to docs](https://flowbite-svelte.com/)
55
55
  ## Type
56
- [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1213)
56
+ [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1220)
57
57
  ## Props
58
58
  @prop progress = "45"
59
59
  @prop precision = 0
@@ -2,7 +2,7 @@ import type { ProgressbarProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1213)
5
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1220)
6
6
  * ## Props
7
7
  * @prop progress = "45"
8
8
  * @prop precision = 0
@@ -65,7 +65,7 @@
65
65
  @component
66
66
  [Go to docs](https://flowbite-svelte.com/)
67
67
  ## Type
68
- [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1224)
68
+ [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1231)
69
69
  ## Props
70
70
  @prop progress = 45
71
71
  @prop radius = 42
@@ -2,7 +2,7 @@ import type { ProgressradialProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1224)
5
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1231)
6
6
  * ## Props
7
7
  * @prop progress = 45
8
8
  * @prop radius = 42
@@ -41,7 +41,7 @@
41
41
  @component
42
42
  [Go to docs](https://flowbite-svelte.com/)
43
43
  ## Type
44
- [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1241)
44
+ [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1248)
45
45
  ## Props
46
46
  @prop rating
47
47
  @prop globalText
@@ -2,7 +2,7 @@ import type { AdvancedRatingProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1241)
5
+ * [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1248)
6
6
  * ## Props
7
7
  * @prop rating
8
8
  * @prop globalText
@@ -29,7 +29,7 @@
29
29
  @component
30
30
  [Go to docs](https://flowbite-svelte.com/)
31
31
  ## Type
32
- [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1327)
32
+ [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1334)
33
33
  ## Props
34
34
  @prop fillPercent = 100
35
35
  @prop fillColor = "#00ff00"
@@ -2,7 +2,7 @@ import type { RatingIconProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1327)
5
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1334)
6
6
  * ## Props
7
7
  * @prop fillPercent = 100
8
8
  * @prop fillColor = "#00ff00"
@@ -28,7 +28,7 @@
28
28
  @component
29
29
  [Go to docs](https://flowbite-svelte.com/)
30
30
  ## Type
31
- [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1327)
31
+ [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1334)
32
32
  ## Props
33
33
  @prop fillPercent = 100
34
34
  @prop fillColor = "#ff0000"