flowbite-svelte 1.11.3 → 1.11.4

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 (204) hide show
  1. package/dist/alert/Alert.svelte +1 -1
  2. package/dist/badge/Badge.svelte +1 -1
  3. package/dist/banner/Banner.svelte +1 -1
  4. package/dist/bottom-navigation/theme.d.ts +9 -9
  5. package/dist/device-mockups/theme.d.ts +138 -138
  6. package/dist/drawer/Drawer.svelte +1 -1
  7. package/dist/drawer/theme.d.ts +12 -12
  8. package/dist/dropdown/DropdownItem.svelte +6 -6
  9. package/dist/dropdown/theme.d.ts +21 -15
  10. package/dist/dropdown/theme.js +3 -2
  11. package/dist/footer/theme.d.ts +33 -33
  12. package/dist/forms/fileupload/Fileupload.svelte +1 -1
  13. package/dist/forms/floating-label/FloatingLabelInput.svelte +1 -1
  14. package/dist/forms/input-field/Input.svelte +1 -1
  15. package/dist/forms/search/Search.svelte +1 -1
  16. package/dist/forms/select/MultiSelect.svelte +1 -1
  17. package/dist/forms/select/Select.svelte +1 -1
  18. package/dist/forms/tags/theme.d.ts +27 -27
  19. package/dist/forms/textarea/Textarea.svelte +1 -1
  20. package/dist/gallery/theme.d.ts +9 -9
  21. package/dist/modal/Modal.svelte +1 -1
  22. package/dist/navbar/NavBrand.svelte +1 -1
  23. package/dist/navbar/NavBrand.svelte.d.ts +1 -1
  24. package/dist/navbar/NavContainer.svelte +1 -1
  25. package/dist/navbar/NavContainer.svelte.d.ts +1 -1
  26. package/dist/navbar/NavHamburger.svelte +5 -5
  27. package/dist/navbar/NavHamburger.svelte.d.ts +83 -35
  28. package/dist/navbar/NavLi.svelte +4 -3
  29. package/dist/navbar/NavLi.svelte.d.ts +1 -1
  30. package/dist/navbar/NavUl.svelte +4 -3
  31. package/dist/navbar/NavUl.svelte.d.ts +1 -1
  32. package/dist/navbar/Navbar.svelte +4 -2
  33. package/dist/navbar/Navbar.svelte.d.ts +2 -1
  34. package/dist/navbar/theme.d.ts +140 -19
  35. package/dist/navbar/theme.js +123 -12
  36. package/dist/pagination/Pagination.svelte +1 -1
  37. package/dist/pagination/Pagination.svelte.d.ts +1 -1
  38. package/dist/pagination/PaginationButton.svelte +1 -1
  39. package/dist/pagination/PaginationButton.svelte.d.ts +1 -1
  40. package/dist/pagination/PaginationItem.svelte +1 -1
  41. package/dist/pagination/PaginationItem.svelte.d.ts +1 -1
  42. package/dist/pagination/PaginationNav.svelte +1 -1
  43. package/dist/pagination/PaginationNav.svelte.d.ts +1 -1
  44. package/dist/popover/Popover.svelte +1 -1
  45. package/dist/popover/Popover.svelte.d.ts +1 -1
  46. package/dist/progress/Progressbar.svelte +1 -1
  47. package/dist/progress/Progressbar.svelte.d.ts +1 -1
  48. package/dist/progress/Progressradial.svelte +1 -1
  49. package/dist/progress/Progressradial.svelte.d.ts +1 -1
  50. package/dist/rating/AdvancedRating.svelte +1 -1
  51. package/dist/rating/AdvancedRating.svelte.d.ts +1 -1
  52. package/dist/rating/CustomIcon.svelte +1 -1
  53. package/dist/rating/CustomIcon.svelte.d.ts +1 -1
  54. package/dist/rating/Heart.svelte +1 -1
  55. package/dist/rating/Heart.svelte.d.ts +1 -1
  56. package/dist/rating/Rating.svelte +1 -1
  57. package/dist/rating/Rating.svelte.d.ts +1 -1
  58. package/dist/rating/RatingComment.svelte +1 -1
  59. package/dist/rating/RatingComment.svelte.d.ts +1 -1
  60. package/dist/rating/Review.svelte +1 -1
  61. package/dist/rating/Review.svelte.d.ts +1 -1
  62. package/dist/rating/ScoreRating.svelte +1 -1
  63. package/dist/rating/ScoreRating.svelte.d.ts +1 -1
  64. package/dist/rating/Star.svelte +1 -1
  65. package/dist/rating/Star.svelte.d.ts +1 -1
  66. package/dist/rating/Thumbup.svelte +1 -1
  67. package/dist/rating/Thumbup.svelte.d.ts +1 -1
  68. package/dist/rating/theme.d.ts +72 -72
  69. package/dist/sidebar/Sidebar.svelte +1 -1
  70. package/dist/sidebar/Sidebar.svelte.d.ts +1 -1
  71. package/dist/sidebar/SidebarBrand.svelte +1 -1
  72. package/dist/sidebar/SidebarBrand.svelte.d.ts +1 -1
  73. package/dist/sidebar/SidebarButton.svelte +1 -1
  74. package/dist/sidebar/SidebarButton.svelte.d.ts +1 -1
  75. package/dist/sidebar/SidebarCta.svelte +1 -1
  76. package/dist/sidebar/SidebarCta.svelte.d.ts +1 -1
  77. package/dist/sidebar/SidebarDropdownWrapper.svelte +1 -1
  78. package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts +1 -1
  79. package/dist/sidebar/SidebarGroup.svelte +1 -1
  80. package/dist/sidebar/SidebarGroup.svelte.d.ts +1 -1
  81. package/dist/sidebar/SidebarItem.svelte +1 -1
  82. package/dist/sidebar/SidebarItem.svelte.d.ts +1 -1
  83. package/dist/sidebar/theme.d.ts +42 -42
  84. package/dist/skeleton/CardPlaceholder.svelte +1 -1
  85. package/dist/skeleton/CardPlaceholder.svelte.d.ts +1 -1
  86. package/dist/skeleton/ImagePlaceholder.svelte +1 -1
  87. package/dist/skeleton/ImagePlaceholder.svelte.d.ts +1 -1
  88. package/dist/skeleton/ListPlaceholder.svelte +1 -1
  89. package/dist/skeleton/ListPlaceholder.svelte.d.ts +1 -1
  90. package/dist/skeleton/Skeleton.svelte +1 -1
  91. package/dist/skeleton/Skeleton.svelte.d.ts +1 -1
  92. package/dist/skeleton/TestimonialPlaceholder.svelte +1 -1
  93. package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts +1 -1
  94. package/dist/skeleton/TextPlaceholder.svelte +1 -1
  95. package/dist/skeleton/TextPlaceholder.svelte.d.ts +1 -1
  96. package/dist/skeleton/VideoPlaceholder.svelte +1 -1
  97. package/dist/skeleton/VideoPlaceholder.svelte.d.ts +1 -1
  98. package/dist/skeleton/WidgetPlaceholder.svelte +1 -1
  99. package/dist/skeleton/WidgetPlaceholder.svelte.d.ts +1 -1
  100. package/dist/skeleton/theme.d.ts +33 -33
  101. package/dist/speed-dial/SpeedDial.svelte +1 -1
  102. package/dist/speed-dial/SpeedDial.svelte.d.ts +1 -1
  103. package/dist/speed-dial/SpeedDialButton.svelte +1 -1
  104. package/dist/speed-dial/SpeedDialButton.svelte.d.ts +1 -1
  105. package/dist/speed-dial/SpeedDialTrigger.svelte +1 -1
  106. package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts +1 -1
  107. package/dist/spinner/Spinner.svelte +1 -1
  108. package/dist/spinner/Spinner.svelte.d.ts +1 -1
  109. package/dist/stepindicator/StepIndicator.svelte +1 -1
  110. package/dist/stepindicator/StepIndicator.svelte.d.ts +1 -1
  111. package/dist/stepper/BreadcrumbStepper.svelte +1 -1
  112. package/dist/stepper/BreadcrumbStepper.svelte.d.ts +1 -1
  113. package/dist/stepper/DetailedStepper.svelte +1 -1
  114. package/dist/stepper/DetailedStepper.svelte.d.ts +1 -1
  115. package/dist/stepper/ProgressStepper.svelte +1 -1
  116. package/dist/stepper/ProgressStepper.svelte.d.ts +1 -1
  117. package/dist/stepper/Stepper.svelte +1 -1
  118. package/dist/stepper/Stepper.svelte.d.ts +1 -1
  119. package/dist/stepper/TimelineStepper.svelte +1 -1
  120. package/dist/stepper/TimelineStepper.svelte.d.ts +1 -1
  121. package/dist/stepper/VerticalStepper.svelte +1 -1
  122. package/dist/stepper/VerticalStepper.svelte.d.ts +1 -1
  123. package/dist/table/Table.svelte +1 -1
  124. package/dist/table/Table.svelte.d.ts +1 -1
  125. package/dist/table/TableBody.svelte +1 -1
  126. package/dist/table/TableBody.svelte.d.ts +1 -1
  127. package/dist/table/TableBodyCell.svelte +1 -1
  128. package/dist/table/TableBodyCell.svelte.d.ts +1 -1
  129. package/dist/table/TableBodyRow.svelte +1 -1
  130. package/dist/table/TableBodyRow.svelte.d.ts +1 -1
  131. package/dist/table/TableHead.svelte +1 -1
  132. package/dist/table/TableHead.svelte.d.ts +1 -1
  133. package/dist/table/TableHeadCell.svelte +1 -1
  134. package/dist/table/TableHeadCell.svelte.d.ts +1 -1
  135. package/dist/table/TableSearch.svelte +1 -1
  136. package/dist/table/TableSearch.svelte.d.ts +1 -1
  137. package/dist/tabs/TabItem.svelte +1 -1
  138. package/dist/tabs/TabItem.svelte.d.ts +1 -1
  139. package/dist/tabs/Tabs.svelte +1 -1
  140. package/dist/tabs/Tabs.svelte.d.ts +1 -1
  141. package/dist/timeline/Activity.svelte +1 -1
  142. package/dist/timeline/Activity.svelte.d.ts +1 -1
  143. package/dist/timeline/ActivityItem.svelte +1 -1
  144. package/dist/timeline/ActivityItem.svelte.d.ts +1 -1
  145. package/dist/timeline/Group.svelte +1 -1
  146. package/dist/timeline/Group.svelte.d.ts +1 -1
  147. package/dist/timeline/GroupItem.svelte +1 -1
  148. package/dist/timeline/GroupItem.svelte.d.ts +1 -1
  149. package/dist/timeline/Timeline.svelte +1 -1
  150. package/dist/timeline/Timeline.svelte.d.ts +1 -1
  151. package/dist/timeline/TimelineItem.svelte +1 -1
  152. package/dist/timeline/TimelineItem.svelte.d.ts +1 -1
  153. package/dist/timeline/theme.d.ts +63 -63
  154. package/dist/toast/Toast.svelte +2 -2
  155. package/dist/toast/Toast.svelte.d.ts +1 -1
  156. package/dist/toolbar/Toolbar.svelte +1 -1
  157. package/dist/toolbar/Toolbar.svelte.d.ts +1 -1
  158. package/dist/toolbar/ToolbarButton.svelte +1 -1
  159. package/dist/toolbar/ToolbarButton.svelte.d.ts +1 -1
  160. package/dist/toolbar/ToolbarGroup.svelte +1 -1
  161. package/dist/toolbar/ToolbarGroup.svelte.d.ts +1 -1
  162. package/dist/tooltip/Tooltip.svelte +1 -1
  163. package/dist/tooltip/Tooltip.svelte.d.ts +1 -1
  164. package/dist/types.d.ts +2 -0
  165. package/dist/typography/anchor/A.svelte +1 -1
  166. package/dist/typography/anchor/A.svelte.d.ts +1 -1
  167. package/dist/typography/blockquote/Blockquote.svelte +1 -1
  168. package/dist/typography/blockquote/Blockquote.svelte.d.ts +1 -1
  169. package/dist/typography/descriptionlist/DescriptionList.svelte +1 -1
  170. package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts +1 -1
  171. package/dist/typography/heading/Heading.svelte +1 -1
  172. package/dist/typography/heading/Heading.svelte.d.ts +1 -1
  173. package/dist/typography/hr/Hr.svelte +1 -1
  174. package/dist/typography/hr/Hr.svelte.d.ts +1 -1
  175. package/dist/typography/img/EnhancedImg.svelte +1 -1
  176. package/dist/typography/img/EnhancedImg.svelte.d.ts +1 -1
  177. package/dist/typography/img/Img.svelte +1 -1
  178. package/dist/typography/img/Img.svelte.d.ts +1 -1
  179. package/dist/typography/layout/Layout.svelte +1 -1
  180. package/dist/typography/layout/Layout.svelte.d.ts +1 -1
  181. package/dist/typography/list/Li.svelte +1 -1
  182. package/dist/typography/list/Li.svelte.d.ts +1 -1
  183. package/dist/typography/list/List.svelte +1 -1
  184. package/dist/typography/list/List.svelte.d.ts +1 -1
  185. package/dist/typography/mark/Mark.svelte +1 -1
  186. package/dist/typography/mark/Mark.svelte.d.ts +1 -1
  187. package/dist/typography/paragraph/P.svelte +1 -1
  188. package/dist/typography/paragraph/P.svelte.d.ts +1 -1
  189. package/dist/typography/secondary/Secondary.svelte +1 -1
  190. package/dist/typography/secondary/Secondary.svelte.d.ts +1 -1
  191. package/dist/typography/span/Span.svelte +1 -1
  192. package/dist/typography/span/Span.svelte.d.ts +1 -1
  193. package/dist/utils/Arrow.svelte +1 -1
  194. package/dist/utils/Arrow.svelte.d.ts +1 -1
  195. package/dist/utils/CloseButton.svelte +1 -1
  196. package/dist/utils/Popper.svelte +1 -1
  197. package/dist/utils/Popper.svelte.d.ts +1 -1
  198. package/dist/utils/singleselection.svelte.d.ts +13 -5
  199. package/dist/utils/singleselection.svelte.js +40 -13
  200. package/dist/video/Video.svelte +1 -1
  201. package/dist/video/Video.svelte.d.ts +1 -1
  202. package/package.json +11 -8
  203. /package/dist/utils/{dismissable.svelte.d.ts → dismissable.d.ts} +0 -0
  204. /package/dist/utils/{dismissable.svelte.js → dismissable.js} +0 -0
@@ -8,12 +8,13 @@
8
8
 
9
9
  // propagate props type from underlying Frame
10
10
 
11
- let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, ...restProps }: NavbarProps = $props();
11
+ let { children, fluid, navContainerClass, class: className, closeOnClickOutside = true, breakpoint = "md", ...restProps }: NavbarProps = $props();
12
12
 
13
13
  const theme = getTheme("navbar");
14
14
 
15
15
  let navState = $state({ hidden: true });
16
16
  setContext<NavbarState>("navState", navState);
17
+ setContext("breakpoint", breakpoint);
17
18
 
18
19
  // Add reference to the navbar element
19
20
  let navbarElement: HTMLElement;
@@ -45,12 +46,13 @@
45
46
  @component
46
47
  [Go to docs](https://flowbite-svelte.com/)
47
48
  ## Type
48
- [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1072)
49
+ [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1074)
49
50
  ## Props
50
51
  @prop children
51
52
  @prop fluid
52
53
  @prop navContainerClass
53
54
  @prop class: className
54
55
  @prop closeOnClickOutside = true
56
+ @prop breakpoint = "md"
55
57
  @prop ...restProps
56
58
  -->
@@ -2,13 +2,14 @@ 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#L1072)
5
+ * [NavbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1074)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop fluid
9
9
  * @prop navContainerClass
10
10
  * @prop class: className
11
11
  * @prop closeOnClickOutside = true
12
+ * @prop breakpoint = "md"
12
13
  * @prop ...restProps
13
14
  */
14
15
  declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;
@@ -1,5 +1,6 @@
1
1
  import { type VariantProps } from "tailwind-variants";
2
2
  import type { Classes } from "../theme/themeUtils";
3
+ export type NavbarBreakpoint = "sm" | "md" | "lg" | "xl";
3
4
  export type NavbarUlVariants = VariantProps<typeof navbarUl> & Classes<typeof navbarUl>;
4
5
  export type NavbarHamburgerVariants = VariantProps<typeof navbarHamburger> & Classes<typeof navbarHamburger>;
5
6
  export declare const navbar: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative w-full px-2 py-2.5 sm:px-4", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative w-full px-2 py-2.5 sm:px-4", unknown, unknown, undefined>>;
@@ -21,6 +22,32 @@ export declare const navbarContainer: import("tailwind-variants").TVReturnType<{
21
22
  };
22
23
  }, undefined, "mx-auto flex flex-wrap items-center justify-between ", unknown, unknown, undefined>>;
23
24
  export declare const navbarUl: import("tailwind-variants").TVReturnType<{
25
+ breakpoint: {
26
+ sm: {
27
+ base: string;
28
+ ul: string;
29
+ active: string;
30
+ nonActive: string;
31
+ };
32
+ md: {
33
+ base: string;
34
+ ul: string;
35
+ active: string;
36
+ nonActive: string;
37
+ };
38
+ lg: {
39
+ base: string;
40
+ ul: string;
41
+ active: string;
42
+ nonActive: string;
43
+ };
44
+ xl: {
45
+ base: string;
46
+ ul: string;
47
+ active: string;
48
+ nonActive: string;
49
+ };
50
+ };
24
51
  hidden: {
25
52
  false: {
26
53
  base: string;
@@ -36,6 +63,32 @@ export declare const navbarUl: import("tailwind-variants").TVReturnType<{
36
63
  active: string;
37
64
  nonActive: string;
38
65
  }, undefined, {
66
+ breakpoint: {
67
+ sm: {
68
+ base: string;
69
+ ul: string;
70
+ active: string;
71
+ nonActive: string;
72
+ };
73
+ md: {
74
+ base: string;
75
+ ul: string;
76
+ active: string;
77
+ nonActive: string;
78
+ };
79
+ lg: {
80
+ base: string;
81
+ ul: string;
82
+ active: string;
83
+ nonActive: string;
84
+ };
85
+ xl: {
86
+ base: string;
87
+ ul: string;
88
+ active: string;
89
+ nonActive: string;
90
+ };
91
+ };
39
92
  hidden: {
40
93
  false: {
41
94
  base: string;
@@ -51,6 +104,32 @@ export declare const navbarUl: import("tailwind-variants").TVReturnType<{
51
104
  active: string;
52
105
  nonActive: string;
53
106
  }, import("tailwind-variants").TVReturnType<{
107
+ breakpoint: {
108
+ sm: {
109
+ base: string;
110
+ ul: string;
111
+ active: string;
112
+ nonActive: string;
113
+ };
114
+ md: {
115
+ base: string;
116
+ ul: string;
117
+ active: string;
118
+ nonActive: string;
119
+ };
120
+ lg: {
121
+ base: string;
122
+ ul: string;
123
+ active: string;
124
+ nonActive: string;
125
+ };
126
+ xl: {
127
+ base: string;
128
+ ul: string;
129
+ active: string;
130
+ nonActive: string;
131
+ };
132
+ };
54
133
  hidden: {
55
134
  false: {
56
135
  base: string;
@@ -67,46 +146,88 @@ export declare const navbarUl: import("tailwind-variants").TVReturnType<{
67
146
  nonActive: string;
68
147
  }, undefined, unknown, unknown, undefined>>;
69
148
  export declare const navbarLi: import("tailwind-variants").TVReturnType<{
149
+ breakpoint: {
150
+ sm: string;
151
+ md: string;
152
+ lg: string;
153
+ xl: string;
154
+ };
70
155
  hidden: {
71
156
  false: string;
72
157
  };
73
- }, undefined, "block py-2 pe-4 ps-3 md:p-2 rounded-sm md:border-0", {
158
+ }, undefined, "block py-2 pe-4 ps-3 rounded-sm", {
159
+ breakpoint: {
160
+ sm: string;
161
+ md: string;
162
+ lg: string;
163
+ xl: string;
164
+ };
74
165
  hidden: {
75
166
  false: string;
76
167
  };
77
168
  }, undefined, import("tailwind-variants").TVReturnType<{
169
+ breakpoint: {
170
+ sm: string;
171
+ md: string;
172
+ lg: string;
173
+ xl: string;
174
+ };
78
175
  hidden: {
79
176
  false: string;
80
177
  };
81
- }, undefined, "block py-2 pe-4 ps-3 md:p-2 rounded-sm md:border-0", unknown, unknown, undefined>>;
178
+ }, undefined, "block py-2 pe-4 ps-3 rounded-sm", unknown, unknown, undefined>>;
82
179
  export declare const navbarHamburger: import("tailwind-variants").TVReturnType<{
83
- [key: string]: {
84
- [key: string]: import("tailwind-variants").ClassValue | {
85
- base?: import("tailwind-variants").ClassValue;
86
- menu?: import("tailwind-variants").ClassValue;
180
+ breakpoint: {
181
+ sm: {
182
+ base: string;
87
183
  };
88
- };
89
- } | {
90
- [x: string]: {
91
- [x: string]: import("tailwind-variants").ClassValue | {
92
- base?: import("tailwind-variants").ClassValue;
93
- menu?: import("tailwind-variants").ClassValue;
184
+ md: {
185
+ base: string;
186
+ };
187
+ lg: {
188
+ base: string;
189
+ };
190
+ xl: {
191
+ base: string;
94
192
  };
95
193
  };
96
- } | {}, {
194
+ }, {
97
195
  base: string;
98
196
  menu: string;
99
197
  }, undefined, {
100
- [key: string]: {
101
- [key: string]: import("tailwind-variants").ClassValue | {
102
- base?: import("tailwind-variants").ClassValue;
103
- menu?: import("tailwind-variants").ClassValue;
198
+ breakpoint: {
199
+ sm: {
200
+ base: string;
201
+ };
202
+ md: {
203
+ base: string;
204
+ };
205
+ lg: {
206
+ base: string;
207
+ };
208
+ xl: {
209
+ base: string;
104
210
  };
105
211
  };
106
- } | {}, {
212
+ }, {
107
213
  base: string;
108
214
  menu: string;
109
- }, import("tailwind-variants").TVReturnType<unknown, {
215
+ }, import("tailwind-variants").TVReturnType<{
216
+ breakpoint: {
217
+ sm: {
218
+ base: string;
219
+ };
220
+ md: {
221
+ base: string;
222
+ };
223
+ lg: {
224
+ base: string;
225
+ };
226
+ xl: {
227
+ base: string;
228
+ };
229
+ };
230
+ }, {
110
231
  base: string;
111
232
  menu: string;
112
233
  }, undefined, unknown, unknown, undefined>>;
@@ -13,37 +13,148 @@ export const navbarContainer = tv({
13
13
  });
14
14
  export const navbarUl = tv({
15
15
  slots: {
16
- base: "w-full md:block md:w-auto",
17
- ul: "flex flex-col p-4 mt-0 md:flex-row rtl:space-x-reverse md:text-sm md:font-medium",
18
- active: "text-white bg-primary-700 md:bg-transparent md:text-primary-700 md:dark:text-white dark:bg-primary-600 md:dark:bg-transparent",
19
- nonActive: "hover:text-primary-500 text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 dark:md:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
16
+ base: "",
17
+ ul: "flex flex-col p-4 mt-0 rtl:space-x-reverse",
18
+ active: "text-white bg-primary-700 dark:bg-primary-600",
19
+ nonActive: "hover:text-primary-500 text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
20
20
  },
21
21
  variants: {
22
+ breakpoint: {
23
+ sm: {
24
+ base: "w-full sm:block sm:w-auto",
25
+ ul: "sm:flex-row sm:text-sm sm:font-medium",
26
+ active: "sm:bg-transparent sm:text-primary-700 sm:dark:text-white sm:dark:bg-transparent",
27
+ nonActive: "sm:hover:bg-transparent sm:border-0 sm:hover:text-primary-700 dark:sm:text-gray-400 sm:dark:hover:text-white sm:dark:hover:bg-transparent"
28
+ },
29
+ md: {
30
+ base: "w-full md:block md:w-auto",
31
+ ul: "md:flex-row md:text-sm md:font-medium",
32
+ active: "md:bg-transparent md:text-primary-700 md:dark:text-white md:dark:bg-transparent",
33
+ nonActive: "md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:md:text-gray-400 md:dark:hover:text-white md:dark:hover:bg-transparent"
34
+ },
35
+ lg: {
36
+ base: "w-full lg:block lg:w-auto",
37
+ ul: "lg:flex-row lg:text-sm lg:font-medium",
38
+ active: "lg:bg-transparent lg:text-primary-700 lg:dark:text-white lg:dark:bg-transparent",
39
+ nonActive: "lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 dark:lg:text-gray-400 lg:dark:hover:text-white lg:dark:hover:bg-transparent"
40
+ },
41
+ xl: {
42
+ base: "w-full xl:block xl:w-auto",
43
+ ul: "xl:flex-row xl:text-sm xl:font-medium",
44
+ active: "xl:bg-transparent xl:text-primary-700 xl:dark:text-white xl:dark:bg-transparent",
45
+ nonActive: "xl:hover:bg-transparent xl:border-0 xl:hover:text-primary-700 dark:xl:text-gray-400 xl:dark:hover:text-white xl:dark:hover:bg-transparent"
46
+ }
47
+ },
22
48
  hidden: {
23
49
  false: {
24
- // Add absolute positioning and overlay styles for mobile
25
- base: "absolute top-full left-0 right-0 z-50 w-full md:block md:w-auto md:static md:z-auto",
26
- ul: "border rounded-lg bg-white shadow-lg dark:bg-gray-800 dark:border-gray-700 text-gray-700 dark:text-gray-400 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 md:border-none md:rounded-none md:bg-inherit dark:md:bg-inherit md:shadow-none"
50
+ base: "absolute top-full left-0 right-0 z-50 w-full",
51
+ ul: "border rounded-lg bg-white shadow-lg dark:bg-gray-800 dark:border-gray-700 text-gray-700 dark:text-gray-400 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700"
27
52
  },
28
53
  true: {
29
54
  base: "hidden"
30
55
  }
31
56
  }
32
57
  },
33
- defaultVariants: {}
58
+ compoundVariants: [
59
+ // Compound variants for breakpoint + hidden combinations
60
+ {
61
+ breakpoint: "sm",
62
+ hidden: false,
63
+ class: {
64
+ base: "sm:static sm:z-auto",
65
+ ul: "sm:border-none sm:rounded-none sm:bg-inherit dark:sm:bg-inherit sm:shadow-none"
66
+ }
67
+ },
68
+ {
69
+ breakpoint: "md",
70
+ hidden: false,
71
+ class: {
72
+ base: "md:static md:z-auto",
73
+ ul: "md:border-none md:rounded-none md:bg-inherit dark:md:bg-inherit md:shadow-none"
74
+ }
75
+ },
76
+ {
77
+ breakpoint: "lg",
78
+ hidden: false,
79
+ class: {
80
+ base: "lg:static lg:z-auto",
81
+ ul: "lg:border-none lg:rounded-none lg:bg-inherit dark:lg:bg-inherit lg:shadow-none"
82
+ }
83
+ },
84
+ {
85
+ breakpoint: "xl",
86
+ hidden: false,
87
+ class: {
88
+ base: "xl:static xl:z-auto",
89
+ ul: "xl:border-none xl:rounded-none xl:bg-inherit dark:xl:bg-inherit xl:shadow-none"
90
+ }
91
+ }
92
+ ],
93
+ defaultVariants: {
94
+ breakpoint: "md"
95
+ }
34
96
  });
35
97
  export const navbarLi = tv({
36
- base: "block py-2 pe-4 ps-3 md:p-2 rounded-sm md:border-0",
98
+ base: "block py-2 pe-4 ps-3 rounded-sm",
37
99
  variants: {
100
+ breakpoint: {
101
+ sm: "sm:p-2 sm:border-0",
102
+ md: "md:p-2 md:border-0",
103
+ lg: "lg:p-2 lg:border-0",
104
+ xl: "xl:p-2 xl:border-0"
105
+ },
38
106
  hidden: {
39
- false: "block py-2 pe-4 ps-3 md:p-2 rounded-sm text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
107
+ false: "text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
40
108
  }
41
109
  },
42
- defaultVariants: {}
110
+ compoundVariants: [
111
+ {
112
+ breakpoint: "sm",
113
+ hidden: false,
114
+ class: "sm:hover:bg-transparent sm:hover:text-primary-700 sm:dark:hover:text-white sm:dark:hover:bg-transparent"
115
+ },
116
+ {
117
+ breakpoint: "md",
118
+ hidden: false,
119
+ class: "md:hover:bg-transparent md:hover:text-primary-700 md:dark:hover:text-white md:dark:hover:bg-transparent"
120
+ },
121
+ {
122
+ breakpoint: "lg",
123
+ hidden: false,
124
+ class: "lg:hover:bg-transparent lg:hover:text-primary-700 lg:dark:hover:text-white lg:dark:hover:bg-transparent"
125
+ },
126
+ {
127
+ breakpoint: "xl",
128
+ hidden: false,
129
+ class: "xl:hover:bg-transparent xl:hover:text-primary-700 xl:dark:hover:text-white xl:dark:hover:bg-transparent"
130
+ }
131
+ ],
132
+ defaultVariants: {
133
+ breakpoint: "md"
134
+ }
43
135
  });
44
136
  export const navbarHamburger = tv({
45
137
  slots: {
46
- base: "ms-3 md:hidden",
138
+ base: "ms-3",
47
139
  menu: "h-6 w-6 shrink-0"
140
+ },
141
+ variants: {
142
+ breakpoint: {
143
+ sm: {
144
+ base: "sm:hidden"
145
+ },
146
+ md: {
147
+ base: "md:hidden"
148
+ },
149
+ lg: {
150
+ base: "lg:hidden"
151
+ },
152
+ xl: {
153
+ base: "xl:hidden"
154
+ }
155
+ }
156
+ },
157
+ defaultVariants: {
158
+ breakpoint: "md"
48
159
  }
49
160
  });
@@ -54,7 +54,7 @@
54
54
  @component
55
55
  [Go to docs](https://flowbite-svelte.com/)
56
56
  ## Type
57
- [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1171)
57
+ [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1174)
58
58
  ## Props
59
59
  @prop pages = []
60
60
  @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#L1171)
5
+ * [PaginationProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1174)
6
6
  * ## Props
7
7
  * @prop pages = []
8
8
  * @prop previous
@@ -50,7 +50,7 @@
50
50
  @component
51
51
  [Go to docs](https://flowbite-svelte.com/)
52
52
  ## Type
53
- [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1142)
53
+ [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1145)
54
54
  ## Props
55
55
  @prop children
56
56
  @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#L1142)
5
+ * [PaginationButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1145)
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#L1167)
35
+ [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
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#L1167)
5
+ * [PaginationItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop size
@@ -105,7 +105,7 @@
105
105
  @component
106
106
  [Go to docs](https://flowbite-svelte.com/)
107
107
  ## Type
108
- [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1148)
108
+ [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
109
109
  ## Props
110
110
  @prop currentPage = 1
111
111
  @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#L1148)
5
+ * [PaginationNavProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
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#L1181)
36
+ [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1184)
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#L1181)
5
+ * [PopoverProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1184)
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#L1191)
56
+ [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1194)
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#L1191)
5
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1194)
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#L1202)
68
+ [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1205)
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#L1202)
5
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1205)
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#L1219)
44
+ [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1222)
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#L1219)
5
+ * [AdvancedRatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1222)
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#L1305)
32
+ [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1308)
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#L1305)
5
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1308)
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#L1305)
31
+ [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1308)
32
32
  ## Props
33
33
  @prop fillPercent = 100
34
34
  @prop fillColor = "#ff0000"
@@ -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#L1305)
5
+ * [RatingIconProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1308)
6
6
  * ## Props
7
7
  * @prop fillPercent = 100
8
8
  * @prop fillColor = "#ff0000"
@@ -47,7 +47,7 @@
47
47
  @component
48
48
  [Go to docs](https://flowbite-svelte.com/)
49
49
  ## Type
50
- [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1231)
50
+ [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1234)
51
51
  ## Props
52
52
  @prop children
53
53
  @prop text
@@ -2,7 +2,7 @@ import type { RatingProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1231)
5
+ * [RatingProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1234)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop text
@@ -63,7 +63,7 @@
63
63
  @component
64
64
  [Go to docs](https://flowbite-svelte.com/)
65
65
  ## Type
66
- [RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1242)
66
+ [RatingCommentProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1245)
67
67
  ## Props
68
68
  @prop children
69
69
  @prop evaluation