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
@@ -32,13 +32,57 @@ export const groupItem = tv({
32
32
  svg: "me-1 h-3 w-3"
33
33
  }
34
34
  });
35
+ const colorVariants = {
36
+ primary: {
37
+ dot: "bg-primary-200 dark:bg-primary-900",
38
+ ring: "ring-white dark:ring-gray-900",
39
+ icon: "text-primary-600 dark:text-primary-400",
40
+ connector: "border-primary-200 dark:border-primary-700"
41
+ },
42
+ green: {
43
+ dot: "bg-green-200 dark:bg-green-900",
44
+ ring: "ring-white dark:ring-gray-900",
45
+ icon: "text-green-600 dark:text-green-400",
46
+ connector: "border-green-200 dark:border-green-700"
47
+ },
48
+ orange: {
49
+ dot: "bg-orange-200 dark:bg-orange-900",
50
+ ring: "ring-white dark:ring-gray-900",
51
+ icon: "text-orange-600 dark:text-orange-400",
52
+ connector: "border-orange-200 dark:border-orange-700"
53
+ },
54
+ red: {
55
+ dot: "bg-red-200 dark:bg-red-900",
56
+ ring: "ring-white dark:ring-gray-900",
57
+ icon: "text-red-600 dark:text-red-400",
58
+ connector: "border-red-200 dark:border-red-700"
59
+ },
60
+ blue: {
61
+ dot: "bg-blue-200 dark:bg-blue-900",
62
+ ring: "ring-white dark:ring-gray-900",
63
+ icon: "text-blue-600 dark:text-blue-400",
64
+ connector: "border-blue-200 dark:border-blue-700"
65
+ },
66
+ purple: {
67
+ dot: "bg-purple-200 dark:bg-purple-900",
68
+ ring: "ring-white dark:ring-gray-900",
69
+ icon: "text-purple-600 dark:text-purple-400",
70
+ connector: "border-purple-200 dark:border-purple-700"
71
+ },
72
+ gray: {
73
+ dot: "bg-gray-200 dark:bg-gray-700",
74
+ ring: "ring-white dark:ring-gray-900",
75
+ icon: "text-gray-600 dark:text-gray-400",
76
+ connector: "border-gray-200 dark:border-gray-700"
77
+ }
78
+ };
35
79
  export const timeline = tv({
36
80
  variants: {
37
81
  order: {
38
82
  group: "p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700",
39
83
  horizontal: "sm:flex",
40
- activity: "relative border-s border-gray-200 dark:border-gray-700",
41
- vertical: "relative border-s border-gray-200 dark:border-gray-700",
84
+ activity: "relative",
85
+ vertical: "relative",
42
86
  default: "relative border-s border-gray-200 dark:border-gray-700"
43
87
  }
44
88
  },
@@ -48,25 +92,27 @@ export const timeline = tv({
48
92
  });
49
93
  export const timelineItem = tv({
50
94
  slots: {
51
- base: "",
95
+ base: "relative",
52
96
  div: "",
53
97
  time: "",
54
98
  h3: "",
55
- svg: "w-3 h-3 text-primary-600 dark:text-primary-400"
99
+ svg: "w-4 h-4",
100
+ connector: "absolute top-6 left-3 w-px h-full"
56
101
  },
57
102
  variants: {
58
103
  order: {
59
104
  default: {
60
105
  base: "mb-10 ms-4",
61
- div: "absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
106
+ div: "absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700",
62
107
  time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
63
108
  h3: "text-lg font-semibold text-gray-900 dark:text-white"
64
109
  },
65
110
  vertical: {
66
- base: "mb-10 ms-6",
67
- div: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
68
- time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
69
- h3: "flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white"
111
+ base: "mb-10 ms-6 relative",
112
+ div: "flex absolute -left-4 top-1.5 justify-center items-center w-6 h-6 rounded-full ring-8",
113
+ time: "mb-1 pl-4 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
114
+ h3: "flex ml-4 items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white",
115
+ connector: "absolute top-7 -left-1.5 w-px h-full"
70
116
  },
71
117
  horizontal: {
72
118
  base: "relative mb-6 sm:mb-0",
@@ -75,10 +121,11 @@ export const timelineItem = tv({
75
121
  h3: "text-lg font-semibold text-gray-900 dark:text-white"
76
122
  },
77
123
  activity: {
78
- base: "mb-10 ms-6",
79
- div: "flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900",
124
+ base: "mb-10 ms-6 relative",
125
+ div: "flex absolute -left-4 top-1.5 justify-center items-center w-6 h-6 rounded-full ring-8",
80
126
  time: "mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500",
81
- h3: "text-lg font-semibold text-gray-900 dark:text-white"
127
+ h3: "text-lg font-semibold text-gray-900 dark:text-white",
128
+ connector: "absolute top-7 -left-4 w-px h-full"
82
129
  },
83
130
  group: {
84
131
  base: "",
@@ -86,9 +133,154 @@ export const timelineItem = tv({
86
133
  time: "text-lg font-semibold text-gray-900 dark:text-white",
87
134
  h3: "text-lg font-semibold text-gray-900 dark:text-white"
88
135
  }
136
+ },
137
+ color: {
138
+ primary: {},
139
+ green: {},
140
+ orange: {},
141
+ red: {},
142
+ blue: {},
143
+ purple: {},
144
+ gray: {}
145
+ },
146
+ isLast: {
147
+ true: {},
148
+ false: {}
89
149
  }
90
150
  },
151
+ compoundVariants: [
152
+ // Vertical color variants
153
+ {
154
+ order: "vertical",
155
+ color: "primary",
156
+ class: {
157
+ div: colorVariants.primary.dot + " " + colorVariants.primary.ring,
158
+ svg: colorVariants.primary.icon,
159
+ connector: "bg-primary-200 dark:bg-primary-700"
160
+ }
161
+ },
162
+ {
163
+ order: "vertical",
164
+ color: "green",
165
+ class: {
166
+ div: colorVariants.green.dot + " " + colorVariants.green.ring,
167
+ svg: colorVariants.green.icon,
168
+ connector: "bg-green-200 dark:bg-green-700"
169
+ }
170
+ },
171
+ {
172
+ order: "vertical",
173
+ color: "orange",
174
+ class: {
175
+ div: colorVariants.orange.dot + " " + colorVariants.orange.ring,
176
+ svg: colorVariants.orange.icon,
177
+ connector: "bg-orange-200 dark:bg-orange-700"
178
+ }
179
+ },
180
+ {
181
+ order: "vertical",
182
+ color: "red",
183
+ class: {
184
+ div: colorVariants.red.dot + " " + colorVariants.red.ring,
185
+ svg: colorVariants.red.icon,
186
+ connector: "bg-red-200 dark:bg-red-700"
187
+ }
188
+ },
189
+ {
190
+ order: "vertical",
191
+ color: "blue",
192
+ class: {
193
+ div: colorVariants.blue.dot + " " + colorVariants.blue.ring,
194
+ svg: colorVariants.blue.icon,
195
+ connector: "bg-blue-200 dark:bg-blue-700"
196
+ }
197
+ },
198
+ {
199
+ order: "vertical",
200
+ color: "purple",
201
+ class: {
202
+ div: colorVariants.purple.dot + " " + colorVariants.purple.ring,
203
+ svg: colorVariants.purple.icon,
204
+ connector: "bg-purple-200 dark:bg-purple-700"
205
+ }
206
+ },
207
+ {
208
+ order: "vertical",
209
+ color: "gray",
210
+ class: {
211
+ div: colorVariants.gray.dot + " " + colorVariants.gray.ring,
212
+ svg: colorVariants.gray.icon,
213
+ connector: "bg-gray-200 dark:bg-gray-700"
214
+ }
215
+ },
216
+ // Horizontal color variants
217
+ {
218
+ order: "horizontal",
219
+ color: "primary",
220
+ class: {
221
+ div: colorVariants.primary.dot + " " + colorVariants.primary.ring,
222
+ svg: colorVariants.primary.icon
223
+ }
224
+ },
225
+ {
226
+ order: "horizontal",
227
+ color: "green",
228
+ class: {
229
+ div: colorVariants.green.dot + " " + colorVariants.green.ring,
230
+ svg: colorVariants.green.icon
231
+ }
232
+ },
233
+ {
234
+ order: "horizontal",
235
+ color: "orange",
236
+ class: {
237
+ div: colorVariants.orange.dot + " " + colorVariants.orange.ring,
238
+ svg: colorVariants.orange.icon
239
+ }
240
+ },
241
+ {
242
+ order: "horizontal",
243
+ color: "red",
244
+ class: {
245
+ div: colorVariants.red.dot + " " + colorVariants.red.ring,
246
+ svg: colorVariants.red.icon
247
+ }
248
+ },
249
+ {
250
+ order: "horizontal",
251
+ color: "blue",
252
+ class: {
253
+ div: colorVariants.blue.dot + " " + colorVariants.blue.ring,
254
+ svg: colorVariants.blue.icon
255
+ }
256
+ },
257
+ {
258
+ order: "horizontal",
259
+ color: "purple",
260
+ class: {
261
+ div: colorVariants.purple.dot + " " + colorVariants.purple.ring,
262
+ svg: colorVariants.purple.icon
263
+ }
264
+ },
265
+ {
266
+ order: "horizontal",
267
+ color: "gray",
268
+ class: {
269
+ div: colorVariants.gray.dot + " " + colorVariants.gray.ring,
270
+ svg: colorVariants.gray.icon
271
+ }
272
+ },
273
+ // Hide connector on last item
274
+ {
275
+ isLast: true,
276
+ class: {
277
+ connector: "hidden"
278
+ }
279
+ }
280
+ ],
91
281
  defaultVariants: {
92
- order: "default"
282
+ order: "default",
283
+ color: "primary",
284
+ isLast: false
93
285
  }
94
286
  });
@@ -61,7 +61,7 @@
61
61
  @component
62
62
  [Go to docs](https://flowbite-svelte.com/)
63
63
  ## Type
64
- [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1830)
64
+ [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1843)
65
65
  ## Props
66
66
  @prop children
67
67
  @prop icon
@@ -2,7 +2,7 @@ import type { ToastProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1830)
5
+ * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1843)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop icon
@@ -40,7 +40,7 @@
40
40
  @component
41
41
  [Go to docs](https://flowbite-svelte.com/)
42
42
  ## Type
43
- [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1127)
43
+ [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1134)
44
44
  ## Props
45
45
  @prop children
46
46
  @prop end
@@ -2,7 +2,7 @@ import type { ToolbarProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1127)
5
+ * [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1134)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop end
@@ -36,7 +36,7 @@
36
36
  @component
37
37
  [Go to docs](https://flowbite-svelte.com/)
38
38
  ## Type
39
- [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1133)
39
+ [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
40
40
  ## Props
41
41
  @prop children
42
42
  @prop color
@@ -2,7 +2,7 @@ import type { ToolbarButtonProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1133)
5
+ * [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1140)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop color
@@ -24,7 +24,7 @@
24
24
  @component
25
25
  [Go to docs](https://flowbite-svelte.com/)
26
26
  ## Type
27
- [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1131)
27
+ [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1138)
28
28
  ## Props
29
29
  @prop children
30
30
  @prop spacing
@@ -2,7 +2,7 @@ import type { ToolbarGroupProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1131)
5
+ * [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1138)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop spacing
@@ -28,7 +28,7 @@
28
28
  @component
29
29
  [Go to docs](https://flowbite-svelte.com/)
30
30
  ## Type
31
- [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1846)
31
+ [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1859)
32
32
  ## Props
33
33
  @prop type = "dark"
34
34
  @prop color = undefined
@@ -2,7 +2,7 @@ import type { TooltipProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1846)
5
+ * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1859)
6
6
  * ## Props
7
7
  * @prop type = "dark"
8
8
  * @prop color = undefined
package/dist/types.d.ts CHANGED
@@ -501,6 +501,7 @@ export interface DialogProps extends DialogVariants, HTMLDialogAttributes {
501
501
  outsideclose?: boolean;
502
502
  transition?: TransitionFunc;
503
503
  transitionParams?: ParamsType;
504
+ count?: number;
504
505
  }
505
506
  export interface DrawerProps extends DrawerVariants, Omit<DialogProps, "hidden" | "classes" | "shifted"> {
506
507
  /** @deprecated Use `outsideclose` instead. Will be removed in next minor version. */
@@ -917,6 +918,10 @@ export interface MegaMenuProps extends MegaMenuVariants, Omit<PopperProps, "chil
917
918
  extraClass?: ClassValue;
918
919
  isOpen?: boolean;
919
920
  }
921
+ export type CountdownType = {
922
+ number: number;
923
+ text?: string | ((remaining: number) => string);
924
+ };
920
925
  export interface ModalProps extends ModalVariants, Omit<DialogProps, "classes"> {
921
926
  header?: Snippet;
922
927
  footer?: Snippet;
@@ -925,6 +930,7 @@ export interface ModalProps extends ModalVariants, Omit<DialogProps, "classes">
925
930
  footerClass?: ClassValue;
926
931
  closeBtnClass?: ClassValue;
927
932
  fullscreen?: boolean;
933
+ countdown?: CountdownType;
928
934
  }
929
935
  export interface MenuProps extends SVGAttributes<SVGSVGElement> {
930
936
  size?: string;
@@ -1564,6 +1570,7 @@ export interface TimelineProps extends HTMLOlAttributes {
1564
1570
  children: Snippet;
1565
1571
  order?: TimelineVariants["order"];
1566
1572
  }
1573
+ type ColorVariant = "primary" | "green" | "orange" | "red" | "blue" | "purple" | "gray";
1567
1574
  export interface TimelineItemProps extends TimelineItemVariants, HTMLLiAttributes {
1568
1575
  children: Snippet;
1569
1576
  orientationSlot?: Snippet;
@@ -1575,6 +1582,10 @@ export interface TimelineItemProps extends TimelineItemVariants, HTMLLiAttribute
1575
1582
  timeClass?: string;
1576
1583
  h3Class?: string;
1577
1584
  dateFormat?: DateFormat;
1585
+ color?: ColorVariant;
1586
+ isLast?: boolean;
1587
+ connectorClass?: string;
1588
+ datePrefix?: string;
1578
1589
  }
1579
1590
  export interface ToastProps extends ToastVaraints, HTMLAttributes<HTMLDivElement> {
1580
1591
  children: Snippet;
@@ -43,7 +43,7 @@
43
43
  @component
44
44
  [Go to docs](https://flowbite-svelte.com/)
45
45
  ## Type
46
- [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1854)
46
+ [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1867)
47
47
  ## Props
48
48
  @prop children
49
49
  @prop color = "primary"
@@ -2,7 +2,7 @@ import type { AnchorProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1854)
5
+ * [AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1867)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop color = "primary"
@@ -28,7 +28,7 @@
28
28
  @component
29
29
  [Go to docs](https://flowbite-svelte.com/)
30
30
  ## Type
31
- [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1883)
31
+ [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1896)
32
32
  ## Props
33
33
  @prop children
34
34
  @prop class: className
@@ -2,7 +2,7 @@ import type { BlockquoteProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1883)
5
+ * [BlockquoteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1896)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop class: className
@@ -24,7 +24,7 @@
24
24
  @component
25
25
  [Go to docs](https://flowbite-svelte.com/)
26
26
  ## Type
27
- [DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1893)
27
+ [DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1906)
28
28
  ## Props
29
29
  @prop children
30
30
  @prop tag
@@ -2,7 +2,7 @@ import type { DescriptionListProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1893)
5
+ * [DescriptionListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1906)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop tag
@@ -19,7 +19,7 @@
19
19
  @component
20
20
  [Go to docs](https://flowbite-svelte.com/)
21
21
  ## Type
22
- [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1899)
22
+ [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1912)
23
23
  ## Props
24
24
  @prop children
25
25
  @prop tag = "h1"
@@ -2,7 +2,7 @@ import type { HeadingProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1899)
5
+ * [HeadingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1912)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop tag = "h1"
@@ -49,7 +49,7 @@
49
49
  @component
50
50
  [Go to docs](https://flowbite-svelte.com/)
51
51
  ## Type
52
- [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1939)
52
+ [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1952)
53
53
  ## Props
54
54
  @prop src
55
55
  @prop href
@@ -2,7 +2,7 @@ import type { EnhandedImgProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1939)
5
+ * [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1952)
6
6
  * ## Props
7
7
  * @prop src
8
8
  * @prop href
@@ -49,7 +49,7 @@
49
49
  @component
50
50
  [Go to docs](https://flowbite-svelte.com/)
51
51
  ## Type
52
- [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1930)
52
+ [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1943)
53
53
  ## Props
54
54
  @prop size = "none"
55
55
  @prop effect = "none"
@@ -2,7 +2,7 @@ import type { ImgProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1930)
5
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1943)
6
6
  * ## Props
7
7
  * @prop size = "none"
8
8
  * @prop effect = "none"
@@ -19,7 +19,7 @@
19
19
  @component
20
20
  [Go to docs](https://flowbite-svelte.com/)
21
21
  ## Type
22
- [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1952)
22
+ [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1965)
23
23
  ## Props
24
24
  @prop children
25
25
  @prop class: className
@@ -2,7 +2,7 @@ import type { LayoutProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1952)
5
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1965)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop class: className
@@ -18,7 +18,7 @@
18
18
  @component
19
19
  [Go to docs](https://flowbite-svelte.com/)
20
20
  ## Type
21
- [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1965)
21
+ [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
22
22
  ## Props
23
23
  @prop children
24
24
  @prop icon
@@ -2,7 +2,7 @@ import type { LiProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1965)
5
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop icon
@@ -28,7 +28,7 @@
28
28
  @component
29
29
  [Go to docs](https://flowbite-svelte.com/)
30
30
  ## Type
31
- [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1957)
31
+ [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1970)
32
32
  ## Props
33
33
  @prop children
34
34
  @prop tag = "ul"
@@ -2,7 +2,7 @@ import type { ListProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1957)
5
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1970)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop tag = "ul"
@@ -17,7 +17,7 @@
17
17
  @component
18
18
  [Go to docs](https://flowbite-svelte.com/)
19
19
  ## Type
20
- [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1971)
20
+ [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1984)
21
21
  ## Props
22
22
  @prop children
23
23
  @prop class: className
@@ -2,7 +2,7 @@ import type { MarkProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1971)
5
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1984)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop class: className
@@ -19,7 +19,7 @@
19
19
  @component
20
20
  [Go to docs](https://flowbite-svelte.com/)
21
21
  ## Type
22
- [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1976)
22
+ [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1989)
23
23
  ## Props
24
24
  @prop children
25
25
  @prop class: className = "text-gray-900 dark:text-white"
@@ -2,7 +2,7 @@ import type { ParagraphProps } from "../../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1976)
5
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1989)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop class: className = "text-gray-900 dark:text-white"
@@ -17,7 +17,7 @@
17
17
  @component
18
18
  [Go to docs](https://flowbite-svelte.com/)
19
19
  ## Type
20
- [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1984)
20
+ [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1997)
21
21
  ## Props
22
22
  @prop children
23
23
  @prop class: className