flowbite-svelte 1.0.5 → 1.0.6

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 (259) hide show
  1. package/dist/buttongroup/ButtonGroup.svelte +2 -2
  2. package/dist/buttongroup/ButtonGroup.svelte.d.ts +1 -1
  3. package/dist/buttons/Button.svelte +1 -2
  4. package/dist/buttons/Button.svelte.d.ts +1 -1
  5. package/dist/carousel/ControlButton.svelte +1 -1
  6. package/dist/carousel/ControlButton.svelte.d.ts +1 -1
  7. package/dist/carousel/Controls.svelte +1 -1
  8. package/dist/carousel/Controls.svelte.d.ts +1 -1
  9. package/dist/carousel/Indicators.svelte +18 -5
  10. package/dist/carousel/Indicators.svelte.d.ts +2 -1
  11. package/dist/carousel/Slide.svelte +1 -1
  12. package/dist/carousel/Slide.svelte.d.ts +1 -1
  13. package/dist/carousel/Thumbnail.svelte +1 -1
  14. package/dist/carousel/Thumbnail.svelte.d.ts +1 -1
  15. package/dist/carousel/Thumbnails.svelte +30 -8
  16. package/dist/carousel/Thumbnails.svelte.d.ts +1 -1
  17. package/dist/carousel/theme.d.ts +33 -0
  18. package/dist/carousel/theme.js +6 -1
  19. package/dist/chart/Chart.svelte +1 -1
  20. package/dist/chart/Chart.svelte.d.ts +1 -1
  21. package/dist/darkmode/DarkMode.svelte +1 -1
  22. package/dist/darkmode/DarkMode.svelte.d.ts +1 -1
  23. package/dist/datepicker/Datepicker.svelte +1 -1
  24. package/dist/datepicker/Datepicker.svelte.d.ts +1 -1
  25. package/dist/device-mockups/Android.svelte +1 -1
  26. package/dist/device-mockups/Android.svelte.d.ts +1 -1
  27. package/dist/device-mockups/DefaultMockup.svelte +1 -1
  28. package/dist/device-mockups/DefaultMockup.svelte.d.ts +1 -1
  29. package/dist/device-mockups/Desktop.svelte +1 -1
  30. package/dist/device-mockups/Desktop.svelte.d.ts +1 -1
  31. package/dist/device-mockups/DeviceMockup.svelte +1 -1
  32. package/dist/device-mockups/DeviceMockup.svelte.d.ts +1 -1
  33. package/dist/device-mockups/Ios.svelte +1 -1
  34. package/dist/device-mockups/Ios.svelte.d.ts +1 -1
  35. package/dist/device-mockups/Laptop.svelte +1 -1
  36. package/dist/device-mockups/Laptop.svelte.d.ts +1 -1
  37. package/dist/device-mockups/Smartwatch.svelte +1 -1
  38. package/dist/device-mockups/Smartwatch.svelte.d.ts +1 -1
  39. package/dist/device-mockups/Tablet.svelte +1 -1
  40. package/dist/device-mockups/Tablet.svelte.d.ts +1 -1
  41. package/dist/drawer/Drawer.svelte +1 -1
  42. package/dist/drawer/Drawer.svelte.d.ts +1 -1
  43. package/dist/drawer/Drawerhead.svelte +1 -1
  44. package/dist/drawer/Drawerhead.svelte.d.ts +1 -1
  45. package/dist/dropdown/Dropdown.svelte +1 -1
  46. package/dist/dropdown/Dropdown.svelte.d.ts +1 -1
  47. package/dist/dropdown/DropdownDivider.svelte +1 -1
  48. package/dist/dropdown/DropdownDivider.svelte.d.ts +1 -1
  49. package/dist/dropdown/DropdownGroup.svelte +1 -1
  50. package/dist/dropdown/DropdownGroup.svelte.d.ts +1 -1
  51. package/dist/dropdown/DropdownHeader.svelte +1 -1
  52. package/dist/dropdown/DropdownHeader.svelte.d.ts +1 -1
  53. package/dist/dropdown/DropdownItem.svelte +1 -1
  54. package/dist/dropdown/DropdownItem.svelte.d.ts +1 -1
  55. package/dist/footer/Footer.svelte +1 -1
  56. package/dist/footer/Footer.svelte.d.ts +1 -1
  57. package/dist/footer/FooterBrand.svelte +1 -1
  58. package/dist/footer/FooterBrand.svelte.d.ts +1 -1
  59. package/dist/footer/FooterCopyright.svelte +1 -1
  60. package/dist/footer/FooterCopyright.svelte.d.ts +1 -1
  61. package/dist/footer/FooterIcon.svelte +1 -1
  62. package/dist/footer/FooterIcon.svelte.d.ts +1 -1
  63. package/dist/footer/FooterLink.svelte +1 -1
  64. package/dist/footer/FooterLink.svelte.d.ts +1 -1
  65. package/dist/footer/FooterLinkGroup.svelte +1 -1
  66. package/dist/footer/FooterLinkGroup.svelte.d.ts +1 -1
  67. package/dist/forms/checkbox/Checkbox.svelte +1 -1
  68. package/dist/forms/checkbox/Checkbox.svelte.d.ts +1 -1
  69. package/dist/forms/checkbox-button/CheckboxButton.svelte +1 -1
  70. package/dist/forms/checkbox-button/CheckboxButton.svelte.d.ts +1 -1
  71. package/dist/forms/fileupload/Fileupload.svelte +1 -1
  72. package/dist/forms/fileupload/Fileupload.svelte.d.ts +1 -1
  73. package/dist/forms/floating-label-input/FloatingLabelInput.svelte +1 -1
  74. package/dist/forms/floating-label-input/FloatingLabelInput.svelte.d.ts +1 -1
  75. package/dist/forms/helper/Helper.svelte +1 -1
  76. package/dist/forms/helper/Helper.svelte.d.ts +1 -1
  77. package/dist/forms/input-addon/InputAddon.svelte +1 -1
  78. package/dist/forms/input-addon/InputAddon.svelte.d.ts +1 -1
  79. package/dist/forms/label/Label.svelte +1 -1
  80. package/dist/forms/label/Label.svelte.d.ts +1 -1
  81. package/dist/forms/radio-button/RadioButton.svelte +3 -3
  82. package/dist/forms/radio-button/RadioButton.svelte.d.ts +1 -1
  83. package/dist/forms/radio-button/theme.d.ts +0 -9
  84. package/dist/forms/radio-button/theme.js +0 -3
  85. package/dist/forms/range/Range.svelte +1 -1
  86. package/dist/forms/range/Range.svelte.d.ts +1 -1
  87. package/dist/forms/textarea/Textarea.svelte +1 -1
  88. package/dist/forms/textarea/Textarea.svelte.d.ts +1 -1
  89. package/dist/forms/timepicker/Timepicker.svelte +1 -1
  90. package/dist/forms/timepicker/Timepicker.svelte.d.ts +1 -1
  91. package/dist/forms/toggle/Toggle.svelte +1 -1
  92. package/dist/forms/toggle/Toggle.svelte.d.ts +1 -1
  93. package/dist/gallery/Gallery.svelte +1 -1
  94. package/dist/gallery/Gallery.svelte.d.ts +1 -1
  95. package/dist/indicator/Indicator.svelte +1 -1
  96. package/dist/indicator/Indicator.svelte.d.ts +1 -1
  97. package/dist/kbd/Kbd.svelte +1 -1
  98. package/dist/kbd/Kbd.svelte.d.ts +1 -1
  99. package/dist/list-group/Listgroup.svelte +1 -1
  100. package/dist/list-group/Listgroup.svelte.d.ts +1 -1
  101. package/dist/list-group/ListgroupItem.svelte +1 -1
  102. package/dist/list-group/ListgroupItem.svelte.d.ts +1 -1
  103. package/dist/mega-menu/MegaMenu.svelte +1 -1
  104. package/dist/mega-menu/MegaMenu.svelte.d.ts +1 -1
  105. package/dist/modal/Modal.svelte +1 -1
  106. package/dist/modal/Modal.svelte.d.ts +1 -1
  107. package/dist/navbar/Menu.svelte +1 -1
  108. package/dist/navbar/Menu.svelte.d.ts +1 -1
  109. package/dist/navbar/NavBrand.svelte +1 -1
  110. package/dist/navbar/NavBrand.svelte.d.ts +1 -1
  111. package/dist/navbar/NavContainer.svelte +1 -1
  112. package/dist/navbar/NavContainer.svelte.d.ts +1 -1
  113. package/dist/navbar/NavHamburger.svelte +1 -1
  114. package/dist/navbar/NavHamburger.svelte.d.ts +1 -1
  115. package/dist/navbar/NavLi.svelte +1 -1
  116. package/dist/navbar/NavLi.svelte.d.ts +1 -1
  117. package/dist/navbar/NavUl.svelte +1 -1
  118. package/dist/navbar/NavUl.svelte.d.ts +1 -1
  119. package/dist/navbar/Navbar.svelte +1 -1
  120. package/dist/navbar/Navbar.svelte.d.ts +1 -1
  121. package/dist/pagination/Pagination.svelte +1 -1
  122. package/dist/pagination/Pagination.svelte.d.ts +1 -1
  123. package/dist/pagination/PaginationItem.svelte +1 -1
  124. package/dist/pagination/PaginationItem.svelte.d.ts +1 -1
  125. package/dist/popover/Popover.svelte +1 -1
  126. package/dist/popover/Popover.svelte.d.ts +1 -1
  127. package/dist/progress/Progressbar.svelte +1 -1
  128. package/dist/progress/Progressbar.svelte.d.ts +1 -1
  129. package/dist/rating/AdvancedRating.svelte +1 -1
  130. package/dist/rating/AdvancedRating.svelte.d.ts +1 -1
  131. package/dist/rating/CustomIcon.svelte +1 -1
  132. package/dist/rating/CustomIcon.svelte.d.ts +1 -1
  133. package/dist/rating/Heart.svelte +1 -1
  134. package/dist/rating/Heart.svelte.d.ts +1 -1
  135. package/dist/rating/Rating.svelte +1 -1
  136. package/dist/rating/Rating.svelte.d.ts +1 -1
  137. package/dist/rating/RatingComment.svelte +1 -1
  138. package/dist/rating/RatingComment.svelte.d.ts +1 -1
  139. package/dist/rating/Review.svelte +1 -1
  140. package/dist/rating/Review.svelte.d.ts +1 -1
  141. package/dist/rating/ScoreRating.svelte +1 -1
  142. package/dist/rating/ScoreRating.svelte.d.ts +1 -1
  143. package/dist/rating/Star.svelte +1 -1
  144. package/dist/rating/Star.svelte.d.ts +1 -1
  145. package/dist/rating/Thumbup.svelte +1 -1
  146. package/dist/rating/Thumbup.svelte.d.ts +1 -1
  147. package/dist/sidebar/Sidebar.svelte +1 -1
  148. package/dist/sidebar/Sidebar.svelte.d.ts +1 -1
  149. package/dist/sidebar/SidebarBrand.svelte +1 -1
  150. package/dist/sidebar/SidebarBrand.svelte.d.ts +1 -1
  151. package/dist/sidebar/SidebarButton.svelte +1 -1
  152. package/dist/sidebar/SidebarButton.svelte.d.ts +1 -1
  153. package/dist/sidebar/SidebarCta.svelte +1 -1
  154. package/dist/sidebar/SidebarCta.svelte.d.ts +1 -1
  155. package/dist/sidebar/SidebarDropdownWrapper.svelte +1 -1
  156. package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts +1 -1
  157. package/dist/sidebar/SidebarGroup.svelte +1 -1
  158. package/dist/sidebar/SidebarGroup.svelte.d.ts +1 -1
  159. package/dist/sidebar/SidebarItem.svelte +1 -1
  160. package/dist/sidebar/SidebarItem.svelte.d.ts +1 -1
  161. package/dist/skeleton/CardPlaceholder.svelte +1 -1
  162. package/dist/skeleton/CardPlaceholder.svelte.d.ts +1 -1
  163. package/dist/skeleton/ImagePlaceholder.svelte +1 -1
  164. package/dist/skeleton/ImagePlaceholder.svelte.d.ts +1 -1
  165. package/dist/skeleton/ListPlaceholder.svelte +1 -1
  166. package/dist/skeleton/ListPlaceholder.svelte.d.ts +1 -1
  167. package/dist/skeleton/Skeleton.svelte +1 -1
  168. package/dist/skeleton/Skeleton.svelte.d.ts +1 -1
  169. package/dist/skeleton/TextPlaceholder.svelte +1 -1
  170. package/dist/skeleton/TextPlaceholder.svelte.d.ts +1 -1
  171. package/dist/skeleton/VideoPlaceholder.svelte +1 -1
  172. package/dist/skeleton/VideoPlaceholder.svelte.d.ts +1 -1
  173. package/dist/speed-dial/SpeedDial.svelte +1 -1
  174. package/dist/speed-dial/SpeedDial.svelte.d.ts +1 -1
  175. package/dist/speed-dial/SpeedDialButton.svelte +1 -1
  176. package/dist/speed-dial/SpeedDialButton.svelte.d.ts +1 -1
  177. package/dist/speed-dial/SpeedDialTrigger.svelte +1 -1
  178. package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts +1 -1
  179. package/dist/spinner/Spinner.svelte +1 -1
  180. package/dist/spinner/Spinner.svelte.d.ts +1 -1
  181. package/dist/steps/StepIndicator.svelte +1 -1
  182. package/dist/steps/StepIndicator.svelte.d.ts +1 -1
  183. package/dist/table/Table.svelte +1 -1
  184. package/dist/table/Table.svelte.d.ts +1 -1
  185. package/dist/table/TableBody.svelte +1 -1
  186. package/dist/table/TableBody.svelte.d.ts +1 -1
  187. package/dist/table/TableBodyCell.svelte +1 -1
  188. package/dist/table/TableBodyCell.svelte.d.ts +1 -1
  189. package/dist/table/TableBodyRow.svelte +1 -1
  190. package/dist/table/TableBodyRow.svelte.d.ts +1 -1
  191. package/dist/table/TableHead.svelte +1 -1
  192. package/dist/table/TableHead.svelte.d.ts +1 -1
  193. package/dist/table/TableHeadCell.svelte +1 -1
  194. package/dist/table/TableHeadCell.svelte.d.ts +1 -1
  195. package/dist/table/TableSearch.svelte +1 -1
  196. package/dist/table/TableSearch.svelte.d.ts +1 -1
  197. package/dist/tabs/TabItem.svelte +1 -1
  198. package/dist/tabs/TabItem.svelte.d.ts +1 -1
  199. package/dist/tabs/Tabs.svelte +1 -1
  200. package/dist/tabs/Tabs.svelte.d.ts +1 -1
  201. package/dist/theme/Theme.svelte +1 -1
  202. package/dist/theme/Theme.svelte.d.ts +1 -1
  203. package/dist/theme/index.d.ts +0 -9
  204. package/dist/timeline/Activity.svelte +1 -1
  205. package/dist/timeline/Activity.svelte.d.ts +1 -1
  206. package/dist/timeline/ActivityItem.svelte +1 -1
  207. package/dist/timeline/ActivityItem.svelte.d.ts +1 -1
  208. package/dist/timeline/Group.svelte +1 -1
  209. package/dist/timeline/Group.svelte.d.ts +1 -1
  210. package/dist/timeline/GroupItem.svelte +1 -1
  211. package/dist/timeline/GroupItem.svelte.d.ts +1 -1
  212. package/dist/timeline/Timeline.svelte +1 -1
  213. package/dist/timeline/Timeline.svelte.d.ts +1 -1
  214. package/dist/timeline/TimelineItem.svelte +1 -1
  215. package/dist/timeline/TimelineItem.svelte.d.ts +1 -1
  216. package/dist/toast/Toast.svelte +1 -1
  217. package/dist/toast/Toast.svelte.d.ts +1 -1
  218. package/dist/toolbar/Toolbar.svelte +1 -1
  219. package/dist/toolbar/Toolbar.svelte.d.ts +1 -1
  220. package/dist/toolbar/ToolbarButton.svelte +1 -1
  221. package/dist/toolbar/ToolbarButton.svelte.d.ts +1 -1
  222. package/dist/toolbar/ToolbarGroup.svelte +1 -1
  223. package/dist/toolbar/ToolbarGroup.svelte.d.ts +1 -1
  224. package/dist/tooltip/Tooltip.svelte +1 -1
  225. package/dist/tooltip/Tooltip.svelte.d.ts +1 -1
  226. package/dist/types.d.ts +2 -0
  227. package/dist/typography/anchor/A.svelte +1 -1
  228. package/dist/typography/anchor/A.svelte.d.ts +1 -1
  229. package/dist/typography/blockquote/Blockquote.svelte +1 -1
  230. package/dist/typography/blockquote/Blockquote.svelte.d.ts +1 -1
  231. package/dist/typography/descriptionlist/DescriptionList.svelte +1 -1
  232. package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts +1 -1
  233. package/dist/typography/heading/Heading.svelte +1 -1
  234. package/dist/typography/heading/Heading.svelte.d.ts +1 -1
  235. package/dist/typography/hr/Hr.svelte +1 -1
  236. package/dist/typography/hr/Hr.svelte.d.ts +1 -1
  237. package/dist/typography/img/EnhancedImg.svelte +1 -1
  238. package/dist/typography/img/EnhancedImg.svelte.d.ts +1 -1
  239. package/dist/typography/img/Img.svelte +1 -1
  240. package/dist/typography/img/Img.svelte.d.ts +1 -1
  241. package/dist/typography/layout/Layout.svelte +1 -1
  242. package/dist/typography/layout/Layout.svelte.d.ts +1 -1
  243. package/dist/typography/list/Li.svelte +1 -1
  244. package/dist/typography/list/Li.svelte.d.ts +1 -1
  245. package/dist/typography/list/List.svelte +1 -1
  246. package/dist/typography/list/List.svelte.d.ts +1 -1
  247. package/dist/typography/mark/Mark.svelte +1 -1
  248. package/dist/typography/mark/Mark.svelte.d.ts +1 -1
  249. package/dist/typography/paragraph/P.svelte +1 -1
  250. package/dist/typography/paragraph/P.svelte.d.ts +1 -1
  251. package/dist/typography/secondary/Secondary.svelte +1 -1
  252. package/dist/typography/secondary/Secondary.svelte.d.ts +1 -1
  253. package/dist/typography/span/Span.svelte +1 -1
  254. package/dist/typography/span/Span.svelte.d.ts +1 -1
  255. package/dist/utils/Popper.svelte +1 -1
  256. package/dist/utils/Popper.svelte.d.ts +1 -1
  257. package/dist/video/Video.svelte +1 -1
  258. package/dist/video/Video.svelte.d.ts +1 -1
  259. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { setContext } from "svelte";
3
- import { buttonGroup } from "./index";
4
- import type { ButtonGroupProps } from "../types";
3
+ import { buttonGroup } from ".";
4
+ import type { ButtonGroupProps } from "..";
5
5
 
6
6
  let { children, size = "md", class: className, ...restProps }: ButtonGroupProps = $props();
7
7
 
@@ -1,4 +1,4 @@
1
- import type { ButtonGroupProps } from "../types";
1
+ import type { ButtonGroupProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
@@ -1,8 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { getContext } from "svelte";
3
- import type { SizeType } from "../types";
3
+ import type { SizeType, ButtonProps } from "..";
4
4
  import { button } from ".";
5
- import type { ButtonProps } from "../types";
6
5
  import clsx from "clsx";
7
6
  import { twMerge } from "tailwind-merge";
8
7
 
@@ -1,4 +1,4 @@
1
- import type { ButtonProps } from "../types";
1
+ import type { ButtonProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
@@ -31,7 +31,7 @@
31
31
  @component
32
32
  [Go to docs](https://flowbite-svelte.com/)
33
33
  ## Type
34
- [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L411)
34
+ [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L412)
35
35
  ## Props
36
36
  @prop children
37
37
  @prop forward
@@ -2,7 +2,7 @@ import type { ControlButtonProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L411)
5
+ * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L412)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop forward
@@ -51,7 +51,7 @@
51
51
  @component
52
52
  [Go to docs](https://flowbite-svelte.com/)
53
53
  ## Type
54
- [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L416)
54
+ [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L417)
55
55
  ## Props
56
56
  @prop children
57
57
  @prop class: className
@@ -2,7 +2,7 @@ import type { ControlsProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L416)
5
+ * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L417)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop class: className
@@ -1,21 +1,33 @@
1
1
  <script lang="ts">
2
- import Indicator from "../indicator/Indicator.svelte";
3
2
  import { getContext } from "svelte";
4
3
  import type { Writable } from "svelte/store";
5
4
  import { indicators } from "./theme";
6
- import type { IndicatorsProps, State } from "../types";
5
+ import { Indicator, type IndicatorsProps, type State } from "..";
7
6
  import clsx from "clsx";
8
7
 
9
- let { children, activeClass, inactiveClass, class: className, ...restProps }: IndicatorsProps = $props();
8
+ let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
10
9
 
11
10
  const state = getContext<Writable<State>>("state");
12
- const { base, indicator } = indicators();
11
+ const { base, indicator } = indicators({ position });
12
+
13
+ function goToIndex(newIndex: number) {
14
+ state.update((_state) => {
15
+ const currentIndex = _state.index;
16
+ const forward = newIndex >= currentIndex;
17
+ return {
18
+ ..._state,
19
+ index: newIndex,
20
+ forward,
21
+ lastSlideChange: new Date()
22
+ };
23
+ });
24
+ }
13
25
  </script>
14
26
 
15
27
  <div class={base({ class: clsx(className) })} {...restProps}>
16
28
  {#each $state.images as _, idx}
17
29
  {@const selected = $state.index === idx}
18
- <button onclick={() => ($state.index = idx)}>
30
+ <button onclick={() => goToIndex(idx)}>
19
31
  {#if children}
20
32
  {@render children({ selected, index: idx })}
21
33
  {:else}
@@ -34,6 +46,7 @@
34
46
  @prop children
35
47
  @prop activeClass
36
48
  @prop inactiveClass
49
+ @prop position = "bottom"
37
50
  @prop class: className
38
51
  @prop ...restProps
39
52
  -->
@@ -1,4 +1,4 @@
1
- import type { IndicatorsProps } from "../types";
1
+ import { type IndicatorsProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
@@ -7,6 +7,7 @@ import type { IndicatorsProps } from "../types";
7
7
  * @prop children
8
8
  * @prop activeClass
9
9
  * @prop inactiveClass
10
+ * @prop position = "bottom"
10
11
  * @prop class: className
11
12
  * @prop ...restProps
12
13
  */
@@ -43,7 +43,7 @@
43
43
  @component
44
44
  [Go to docs](https://flowbite-svelte.com/)
45
45
  ## Type
46
- [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L434)
46
+ [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L435)
47
47
  ## Props
48
48
  @prop image
49
49
  @prop transition
@@ -2,7 +2,7 @@ import type { SlideProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L434)
5
+ * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L435)
6
6
  * ## Props
7
7
  * @prop image
8
8
  * @prop transition
@@ -16,7 +16,7 @@
16
16
  @component
17
17
  [Go to docs](https://flowbite-svelte.com/)
18
18
  ## Type
19
- [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L421)
19
+ [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L422)
20
20
  ## Props
21
21
  @prop selected
22
22
  @prop class: className
@@ -2,7 +2,7 @@ import type { ThumbnailProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L421)
5
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L422)
6
6
  * ## Props
7
7
  * @prop selected
8
8
  * @prop class: className
@@ -1,24 +1,46 @@
1
1
  <script lang="ts">
2
2
  import clsx from "clsx";
3
+ import { getContext } from "svelte";
4
+ import type { Writable } from "svelte/store";
3
5
  import Thumbnail from "./Thumbnail.svelte";
4
6
  import { thumbnails } from "./theme";
5
- import type { ThumbnailsProps } from "../types";
7
+ import type { ThumbnailsProps, State } from "../types";
6
8
 
7
9
  let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass = "", throttleDelay = 650, class: className }: ThumbnailsProps = $props();
8
10
 
11
+ const state = getContext<Writable<State>>("state");
12
+ if (!state) {
13
+ console.error("State is undefined. Make sure to provide state context or pass it as a prop.");
14
+ }
15
+
9
16
  let lastClickedAt = new Date();
10
17
 
11
- const btnClick = (idx: number) => {
18
+ const btnClick = (newIndex: number) => {
12
19
  if (new Date().getTime() - lastClickedAt.getTime() < throttleDelay) {
13
20
  console.warn("Thumbnail action throttled");
14
21
  return;
15
22
  }
16
- if (idx === index) {
17
- return;
18
- }
23
+ if (state) {
24
+ state.update((_state) => {
25
+ const currentIndex = _state.index;
26
+ const forward = newIndex >= currentIndex;
19
27
 
20
- index = idx;
21
- lastClickedAt = new Date();
28
+ // Update the bound index
29
+ index = newIndex;
30
+
31
+ return {
32
+ ..._state,
33
+ index: newIndex,
34
+ forward,
35
+ lastSlideChange: new Date()
36
+ };
37
+ });
38
+ } else {
39
+ // Fallback behavior if state is not available
40
+ index = newIndex;
41
+ lastClickedAt = new Date();
42
+ console.warn("State update skipped - no valid state available");
43
+ }
22
44
  };
23
45
 
24
46
  $effect(() => {
@@ -43,7 +65,7 @@
43
65
  @component
44
66
  [Go to docs](https://flowbite-svelte.com/)
45
67
  ## Type
46
- [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L425)
68
+ [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
47
69
  ## Props
48
70
  @prop children
49
71
  @prop images = []
@@ -2,7 +2,7 @@ import type { ThumbnailsProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L425)
5
+ * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop images = []
@@ -10,6 +10,17 @@ export declare const indicators: import("tailwind-variants").TVReturnType<{
10
10
  indicator: string;
11
11
  };
12
12
  };
13
+ position: {
14
+ top: {
15
+ base: string;
16
+ };
17
+ bottom: {
18
+ base: string;
19
+ };
20
+ withThumbnails: {
21
+ base: string;
22
+ };
23
+ };
13
24
  }, {
14
25
  base: string;
15
26
  indicator: string;
@@ -22,6 +33,17 @@ export declare const indicators: import("tailwind-variants").TVReturnType<{
22
33
  indicator: string;
23
34
  };
24
35
  };
36
+ position: {
37
+ top: {
38
+ base: string;
39
+ };
40
+ bottom: {
41
+ base: string;
42
+ };
43
+ withThumbnails: {
44
+ base: string;
45
+ };
46
+ };
25
47
  }, {
26
48
  base: string;
27
49
  indicator: string;
@@ -34,6 +56,17 @@ export declare const indicators: import("tailwind-variants").TVReturnType<{
34
56
  indicator: string;
35
57
  };
36
58
  };
59
+ position: {
60
+ top: {
61
+ base: string;
62
+ };
63
+ bottom: {
64
+ base: string;
65
+ };
66
+ withThumbnails: {
67
+ base: string;
68
+ };
69
+ };
37
70
  }, {
38
71
  base: string;
39
72
  indicator: string;
@@ -8,13 +8,18 @@ export const carousel = tv({
8
8
  });
9
9
  export const indicators = tv({
10
10
  slots: {
11
- base: "absolute start-1/2 bottom-5 z-30 flex -translate-x-1/2 space-x-3 rtl:translate-x-1/2 rtl:space-x-reverse",
11
+ base: "absolute start-1/2 z-30 flex -translate-x-1/2 space-x-3 rtl:translate-x-1/2 rtl:space-x-reverse",
12
12
  indicator: "bg-gray-100 hover:bg-gray-300"
13
13
  },
14
14
  variants: {
15
15
  selected: {
16
16
  true: { indicator: "opacity-100" },
17
17
  false: { indicator: "opacity-60" }
18
+ },
19
+ position: {
20
+ top: { base: "top-5" },
21
+ bottom: { base: "bottom-5" },
22
+ withThumbnails: { base: "bottom-24" }
18
23
  }
19
24
  }
20
25
  });
@@ -38,7 +38,7 @@
38
38
  @component
39
39
  [Go to docs](https://flowbite-svelte.com/)
40
40
  ## Type
41
- [ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
41
+ [ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
42
42
  ## Props
43
43
  @prop options
44
44
  @prop class: classname
@@ -3,7 +3,7 @@ import type { ChartProps } from "../types";
3
3
  /**
4
4
  * [Go to docs](https://flowbite-svelte.com/)
5
5
  * ## Type
6
- * [ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
6
+ * [ChartProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
7
7
  * ## Props
8
8
  * @prop options
9
9
  * @prop class: classname
@@ -61,7 +61,7 @@
61
61
  @component
62
62
  [Go to docs](https://flowbite-svelte.com/)
63
63
  ## Type
64
- [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L446)
64
+ [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L447)
65
65
  ## Props
66
66
  @prop class: className
67
67
  @prop lightIcon
@@ -2,7 +2,7 @@ import type { DarkmodeProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L446)
5
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L447)
6
6
  * ## Props
7
7
  * @prop class: className
8
8
  * @prop lightIcon
@@ -230,7 +230,7 @@
230
230
  @component
231
231
  [Go to docs](https://flowbite-svelte.com/)
232
232
  ## Type
233
- [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L457)
233
+ [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
234
234
  ## Props
235
235
  @prop value = $bindable()
236
236
  @prop defaultDate = null
@@ -2,7 +2,7 @@ import { type DatepickerProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L457)
5
+ * [DatepickerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L458)
6
6
  * ## Props
7
7
  * @prop value = $bindable()
8
8
  * @prop defaultDate = null
@@ -24,7 +24,7 @@
24
24
  @component
25
25
  [Go to docs](https://flowbite-svelte.com/)
26
26
  ## Type
27
- [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L494)
27
+ [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L495)
28
28
  ## Props
29
29
  @prop children
30
30
  @prop divClass
@@ -2,7 +2,7 @@ import type { AndroidProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L494)
5
+ * [AndroidProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L495)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop divClass
@@ -23,7 +23,7 @@
23
23
  @component
24
24
  [Go to docs](https://flowbite-svelte.com/)
25
25
  ## Type
26
- [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L505)
26
+ [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L506)
27
27
  ## Props
28
28
  @prop children
29
29
  @prop divClass
@@ -2,7 +2,7 @@ import type { DefaultMockupProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L505)
5
+ * [DefaultMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L506)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop divClass
@@ -21,7 +21,7 @@
21
21
  @component
22
22
  [Go to docs](https://flowbite-svelte.com/)
23
23
  ## Type
24
- [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L486)
24
+ [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
25
25
  ## Props
26
26
  @prop children
27
27
  @prop divClass
@@ -2,7 +2,7 @@ import type { MockupBaseProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L486)
5
+ * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop divClass
@@ -32,7 +32,7 @@
32
32
  @component
33
33
  [Go to docs](https://flowbite-svelte.com/)
34
34
  ## Type
35
- [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L481)
35
+ [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L482)
36
36
  ## Props
37
37
  @prop children
38
38
  @prop device = "default"
@@ -3,7 +3,7 @@ import type { DeviceMockupProps } from "../types";
3
3
  /**
4
4
  * [Go to docs](https://flowbite-svelte.com/)
5
5
  * ## Type
6
- * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L481)
6
+ * [DeviceMockupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L482)
7
7
  * ## Props
8
8
  * @prop children
9
9
  * @prop device = "default"
@@ -23,7 +23,7 @@
23
23
  @component
24
24
  [Go to docs](https://flowbite-svelte.com/)
25
25
  ## Type
26
- [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L515)
26
+ [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L516)
27
27
  ## Props
28
28
  @prop children
29
29
  @prop divClass
@@ -2,7 +2,7 @@ import type { IosProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L515)
5
+ * [IosProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L516)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop divClass
@@ -24,7 +24,7 @@
24
24
  @component
25
25
  [Go to docs](https://flowbite-svelte.com/)
26
26
  ## Type
27
- [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L486)
27
+ [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
28
28
  ## Props
29
29
  @prop children
30
30
  @prop divClass
@@ -2,7 +2,7 @@ import type { MockupBaseProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L486)
5
+ * [MockupBaseProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L487)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop divClass
@@ -25,7 +25,7 @@
25
25
  @component
26
26
  [Go to docs](https://flowbite-svelte.com/)
27
27
  ## Type
28
- [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L525)
28
+ [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
29
29
  ## Props
30
30
  @prop children
31
31
  @prop divClass
@@ -2,7 +2,7 @@ import type { SmartwatchProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L525)
5
+ * [SmartwatchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L526)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop divClass
@@ -23,7 +23,7 @@
23
23
  @component
24
24
  [Go to docs](https://flowbite-svelte.com/)
25
25
  ## Type
26
- [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L535)
26
+ [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
27
27
  ## Props
28
28
  @prop children
29
29
  @prop divClass
@@ -2,7 +2,7 @@ import type { TabletProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L535)
5
+ * [TabletProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L536)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop divClass
@@ -40,7 +40,7 @@
40
40
  @component
41
41
  [Go to docs](https://flowbite-svelte.com/)
42
42
  ## Type
43
- [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L546)
43
+ [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L547)
44
44
  ## Props
45
45
  @prop children
46
46
  @prop hidden = $bindable()
@@ -2,7 +2,7 @@ import type { DrawerProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L546)
5
+ * [DrawerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L547)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop hidden = $bindable()
@@ -28,7 +28,7 @@
28
28
  @component
29
29
  [Go to docs](https://flowbite-svelte.com/)
30
30
  ## Type
31
- [DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L556)
31
+ [DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
32
32
  ## Props
33
33
  @prop closeIcon
34
34
  @prop children
@@ -2,7 +2,7 @@ import type { DrawerheadProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L556)
5
+ * [DrawerheadProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L557)
6
6
  * ## Props
7
7
  * @prop closeIcon
8
8
  * @prop children
@@ -34,7 +34,7 @@
34
34
  @component
35
35
  [Go to docs](https://flowbite-svelte.com/)
36
36
  ## Type
37
- [DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L563)
37
+ [DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L564)
38
38
  ## Props
39
39
  @prop children
40
40
  @prop simple = false
@@ -2,7 +2,7 @@ import type { DropdownProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L563)
5
+ * [DropdownProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L564)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop simple = false
@@ -13,7 +13,7 @@
13
13
  @component
14
14
  [Go to docs](https://flowbite-svelte.com/)
15
15
  ## Type
16
- [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L574)
16
+ [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L575)
17
17
  ## Props
18
18
  @prop class: divClass
19
19
  @prop ...restProps
@@ -2,7 +2,7 @@ import type { DropdownDividerProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L574)
5
+ * [DropdownDividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L575)
6
6
  * ## Props
7
7
  * @prop class: divClass
8
8
  * @prop ...restProps