flowbite-svelte 1.11.0 → 1.11.2

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 (10) hide show
  1. package/dist/device-mockups/Desktop.svelte +1 -1
  2. package/dist/device-mockups/Tablet.svelte +1 -1
  3. package/dist/forms/floating-label/FloatingLabelInput.svelte +1 -1
  4. package/dist/forms/input-field/Input.svelte +1 -1
  5. package/dist/forms/radio/Radio.svelte +1 -1
  6. package/dist/list-group/Listgroup.svelte +2 -2
  7. package/dist/tooltip/Tooltip.svelte +1 -2
  8. package/dist/tooltip/theme.d.ts +69 -207
  9. package/dist/tooltip/theme.js +28 -24
  10. package/package.json +1 -1
package/dist/device-mockups/Desktop.svelte CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, ...restProps }: DesktopProps = $props();
8
8
 
9
- warnThemeDeprecation("DesktopMockup", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" });
9
+ warnThemeDeprecation("Desktop", { divClass, div2Class, div3Class, div4Class }, { divClass: "class", div2Class: "inner", div3Class: "bot", div4Class: "botUnder" });
10
10
  const styling = $derived(
11
11
  classes ?? {
12
12
  inner: div2Class,
package/dist/device-mockups/Tablet.svelte CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  let { children, class: className, classes, divClass, div2Class, div3Class, div4Class, div5Class, div6Class, ...restProps }: TabletProps = $props();
8
8
 
9
- warnThemeDeprecation("TabletMockup", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
9
+ warnThemeDeprecation("Tablet", { divClass, div2Class, div3Class, div4Class, div5Class, div6Class }, { divClass: "class", div2Class: "leftTop", div3Class: "leftMid", div4Class: "leftBot", div5Class: "right", div6Class: "slot" });
10
10
  const styling = $derived(
11
11
  classes ?? {
12
12
  leftTop: div2Class,
package/dist/forms/floating-label/FloatingLabelInput.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  let { children, id = idGenerator(), value = $bindable(), elementRef = $bindable(), "aria-describedby": ariaDescribedby, variant = "standard", size = "default", color = "default", class: className, classes, inputClass, labelClass, clearable, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: FloatingLabelInputProps = $props();
10
10
 
11
- warnThemeDeprecation("Fileupload", { inputClass, labelClass, clearableSvgClass, clearableClass, comboClass }, { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" });
11
+ warnThemeDeprecation("FloatingLabelInput", { inputClass, labelClass, clearableSvgClass, clearableClass, comboClass }, { inputClass: "input", labelClass: "label", clearableSvgClass: "svg", clearableClass: "close", comboClass: "combo" });
12
12
  const styling = $derived(classes ?? { input: inputClass, label: labelClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass });
13
13
 
14
14
  const theme = getTheme("floatingLabelInput");
package/dist/forms/input-field/Input.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, classes, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, comboItemClass, onInput, onFocus, onBlur, onKeydown, oninput, onfocus, onblur, onkeydown, ...restProps }: InputProps<InputValue> = $props();
10
10
 
11
11
  // input, left, right, close, combo, comboItem, div, svg
12
- warnThemeDeprecation("Fileupload", { wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass }, { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" });
12
+ warnThemeDeprecation("Input", { wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass }, { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" });
13
13
 
14
14
  const styling = $derived(classes ?? { wrapper: wrapperClass, left: leftClass, right: rightClass, div: divClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass, comboItem: comboItemClass });
15
15
 
package/dist/forms/radio/Radio.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
  // remove inputClass in next major version
9
9
  let { children, "aria-describedby": ariaDescribedby, inline = false, labelClass, color = "primary", custom = false, group = $bindable<T>(), value = $bindable<T>(), class: className, inputClass, classes, ...restProps }: RadioProps<T> = $props();
10
10
 
11
- warnThemeDeprecation("Fileupload", { inputClass, labelClass }, { inputClass: "class", labelClass: "label" });
11
+ warnThemeDeprecation("Radio", { inputClass, labelClass }, { inputClass: "class", labelClass: "label" });
12
12
  const styling = $derived(classes ?? { label: labelClass });
13
13
 
14
14
  const theme = getTheme("radio");
package/dist/list-group/Listgroup.svelte CHANGED
@@ -37,8 +37,8 @@
37
37
  <ListgroupItem href={item.href} class={clsx(itemClass)} iconClass={clsx(iconClass)} {active} {horizontal} {...item} onclick={item.onclick ?? createItemClickHandler(item)} />
38
38
  {/if}
39
39
  {/each}
40
- {:else if children && items?.length}
41
- {@render children?.(items?.[0])}
40
+ {:else}
41
+ {@render children?.(items?.[0] ?? "")}
42
42
  {/if}
43
43
  </svelte:element>
44
44
 
package/dist/tooltip/Tooltip.svelte CHANGED
@@ -9,8 +9,7 @@
9
9
 
10
10
  const theme = getTheme("tooltip");
11
11
 
12
- let base = $derived(tooltip({ color, type, class: clsx(className) }));
13
-
12
+ const base = $derived(tooltip({ color, type, class: clsx(className) }));
14
13
  function onbeforetoggle(ev: TriggeredToggleEvent) {
15
14
  // block all focusable elements inside the tooltip
16
15
  if (ev.target instanceof HTMLElement) {
package/dist/tooltip/theme.d.ts CHANGED
@@ -2,224 +2,86 @@ import { type VariantProps } from "tailwind-variants";
2
2
  export type TooltipVariants = VariantProps<typeof tooltip>;
3
3
  export declare const tooltip: import("tailwind-variants").TVReturnType<{
4
4
  type: {
5
- light: {
6
- base: string;
7
- };
8
- auto: {
9
- base: string;
10
- };
11
- dark: {
12
- base: string;
13
- };
5
+ light: string;
6
+ auto: string;
7
+ dark: string;
14
8
  };
15
9
  color: {
16
- primary: {
17
- base: string;
18
- };
19
- secondary: {
20
- base: string;
21
- };
22
- gray: {
23
- base: string;
24
- };
25
- red: {
26
- base: string;
27
- };
28
- orange: {
29
- base: string;
30
- };
31
- amber: {
32
- base: string;
33
- };
34
- yellow: {
35
- base: string;
36
- };
37
- lime: {
38
- base: string;
39
- };
40
- green: {
41
- base: string;
42
- };
43
- emerald: {
44
- base: string;
45
- };
46
- teal: {
47
- base: string;
48
- };
49
- cyan: {
50
- base: string;
51
- };
52
- sky: {
53
- base: string;
54
- };
55
- blue: {
56
- base: string;
57
- };
58
- indigo: {
59
- base: string;
60
- };
61
- violet: {
62
- base: string;
63
- };
64
- purple: {
65
- base: string;
66
- };
67
- fuchsia: {
68
- base: string;
69
- };
70
- pink: {
71
- base: string;
72
- };
73
- rose: {
74
- base: string;
75
- };
10
+ primary: string;
11
+ secondary: string;
12
+ gray: string;
13
+ red: string;
14
+ orange: string;
15
+ amber: string;
16
+ yellow: string;
17
+ lime: string;
18
+ green: string;
19
+ emerald: string;
20
+ teal: string;
21
+ cyan: string;
22
+ sky: string;
23
+ blue: string;
24
+ indigo: string;
25
+ violet: string;
26
+ purple: string;
27
+ fuchsia: string;
28
+ pink: string;
29
+ rose: string;
76
30
  };
77
31
  }, undefined, "absolute px-3 py-2 rounded-lg text-sm z-50 pointer-events-none", {
78
32
  type: {
79
- light: {
80
- base: string;
81
- };
82
- auto: {
83
- base: string;
84
- };
85
- dark: {
86
- base: string;
87
- };
33
+ light: string;
34
+ auto: string;
35
+ dark: string;
88
36
  };
89
37
  color: {
90
- primary: {
91
- base: string;
92
- };
93
- secondary: {
94
- base: string;
95
- };
96
- gray: {
97
- base: string;
98
- };
99
- red: {
100
- base: string;
101
- };
102
- orange: {
103
- base: string;
104
- };
105
- amber: {
106
- base: string;
107
- };
108
- yellow: {
109
- base: string;
110
- };
111
- lime: {
112
- base: string;
113
- };
114
- green: {
115
- base: string;
116
- };
117
- emerald: {
118
- base: string;
119
- };
120
- teal: {
121
- base: string;
122
- };
123
- cyan: {
124
- base: string;
125
- };
126
- sky: {
127
- base: string;
128
- };
129
- blue: {
130
- base: string;
131
- };
132
- indigo: {
133
- base: string;
134
- };
135
- violet: {
136
- base: string;
137
- };
138
- purple: {
139
- base: string;
140
- };
141
- fuchsia: {
142
- base: string;
143
- };
144
- pink: {
145
- base: string;
146
- };
147
- rose: {
148
- base: string;
149
- };
38
+ primary: string;
39
+ secondary: string;
40
+ gray: string;
41
+ red: string;
42
+ orange: string;
43
+ amber: string;
44
+ yellow: string;
45
+ lime: string;
46
+ green: string;
47
+ emerald: string;
48
+ teal: string;
49
+ cyan: string;
50
+ sky: string;
51
+ blue: string;
52
+ indigo: string;
53
+ violet: string;
54
+ purple: string;
55
+ fuchsia: string;
56
+ pink: string;
57
+ rose: string;
150
58
  };
151
59
  }, undefined, import("tailwind-variants").TVReturnType<{
152
60
  type: {
153
- light: {
154
- base: string;
155
- };
156
- auto: {
157
- base: string;
158
- };
159
- dark: {
160
- base: string;
161
- };
61
+ light: string;
62
+ auto: string;
63
+ dark: string;
162
64
  };
163
65
  color: {
164
- primary: {
165
- base: string;
166
- };
167
- secondary: {
168
- base: string;
169
- };
170
- gray: {
171
- base: string;
172
- };
173
- red: {
174
- base: string;
175
- };
176
- orange: {
177
- base: string;
178
- };
179
- amber: {
180
- base: string;
181
- };
182
- yellow: {
183
- base: string;
184
- };
185
- lime: {
186
- base: string;
187
- };
188
- green: {
189
- base: string;
190
- };
191
- emerald: {
192
- base: string;
193
- };
194
- teal: {
195
- base: string;
196
- };
197
- cyan: {
198
- base: string;
199
- };
200
- sky: {
201
- base: string;
202
- };
203
- blue: {
204
- base: string;
205
- };
206
- indigo: {
207
- base: string;
208
- };
209
- violet: {
210
- base: string;
211
- };
212
- purple: {
213
- base: string;
214
- };
215
- fuchsia: {
216
- base: string;
217
- };
218
- pink: {
219
- base: string;
220
- };
221
- rose: {
222
- base: string;
223
- };
66
+ primary: string;
67
+ secondary: string;
68
+ gray: string;
69
+ red: string;
70
+ orange: string;
71
+ amber: string;
72
+ yellow: string;
73
+ lime: string;
74
+ green: string;
75
+ emerald: string;
76
+ teal: string;
77
+ cyan: string;
78
+ sky: string;
79
+ blue: string;
80
+ indigo: string;
81
+ violet: string;
82
+ purple: string;
83
+ fuchsia: string;
84
+ pink: string;
85
+ rose: string;
224
86
  };
225
87
  }, undefined, "absolute px-3 py-2 rounded-lg text-sm z-50 pointer-events-none", unknown, unknown, undefined>>;
package/dist/tooltip/theme.js CHANGED
@@ -3,32 +3,36 @@ export const tooltip = tv({
3
3
  base: "absolute px-3 py-2 rounded-lg text-sm z-50 pointer-events-none",
4
4
  variants: {
5
5
  type: {
6
- light: { base: "bg-white text-gray-800 dark:bg-white dark:text-gray-800 border border-gray-200 dark:border-gray-200" },
7
- auto: { base: "bg-white text-gray-800 dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700" },
8
- dark: { base: "bg-gray-800 text-white dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700" }
6
+ light: "bg-white text-gray-800 dark:bg-white dark:text-gray-800 border border-gray-200 dark:border-gray-200",
7
+ auto: "bg-white text-gray-800 dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700",
8
+ dark: "bg-gray-800 text-white dark:bg-gray-800 dark:text-white dark:border dark:border-gray-700"
9
9
  },
10
10
  color: {
11
- // default: { base: "bg-gray-800 dark:bg-gray-300 dark:text-gray-800" },
12
- primary: { base: "bg-primary-600 dark:bg-primary-600" },
13
- secondary: { base: "bg-secondary-600 dark:bg-secondary-600" },
14
- gray: { base: "bg-gray-600 dark:bg-gray-600" },
15
- red: { base: "bg-red-600 dark:bg-red-600" },
16
- orange: { base: "bg-orange-600 dark:bg-orange-600" },
17
- amber: { base: "bg-amber-600 dark:bg-amber-600" },
18
- yellow: { base: "bg-yellow-400 dark:bg-yellow-400" },
19
- lime: { base: "bg-lime-600 dark:bg-lime-600" },
20
- green: { base: "bg-green-600 dark:bg-green-600" },
21
- emerald: { base: "bg-emerald-600 dark:bg-emerald-600" },
22
- teal: { base: "bg-teal-600 dark:bg-teal-600" },
23
- cyan: { base: "bg-cyan-600 dark:bg-cyan-600" },
24
- sky: { base: "bg-sky-600 dark:bg-sky-600" },
25
- blue: { base: "bg-blue-600 dark:bg-blue-600" },
26
- indigo: { base: "bg-indigo-600 dark:bg-indigo-600" },
27
- violet: { base: "bg-violet-600 dark:bg-violet-600" },
28
- purple: { base: "bg-purple-600 dark:bg-purple-600" },
29
- fuchsia: { base: "bg-fuchsia-600 dark:bg-fuchsia-600" },
30
- pink: { base: "bg-pink-600 dark:bg-pink-600" },
31
- rose: { base: "bg-rose-800 dark:bg-rose-800" }
11
+ // default: "bg-gray-800 dark:bg-gray-300 dark:text-gray-800",
12
+ primary: "bg-primary-600 dark:bg-primary-600",
13
+ secondary: "bg-secondary-600 dark:bg-secondary-600",
14
+ gray: "bg-gray-600 dark:bg-gray-600",
15
+ red: "bg-red-600 dark:bg-red-600",
16
+ orange: "bg-orange-600 dark:bg-orange-600",
17
+ amber: "bg-amber-600 dark:bg-amber-600",
18
+ yellow: "bg-yellow-400 dark:bg-yellow-400",
19
+ lime: "bg-lime-600 dark:bg-lime-600",
20
+ green: "bg-green-600 dark:bg-green-600",
21
+ emerald: "bg-emerald-600 dark:bg-emerald-600",
22
+ teal: "bg-teal-600 dark:bg-teal-600",
23
+ cyan: "bg-cyan-600 dark:bg-cyan-600",
24
+ sky: "bg-sky-600 dark:bg-sky-600",
25
+ blue: "bg-blue-600 dark:bg-blue-600",
26
+ indigo: "bg-indigo-600 dark:bg-indigo-600",
27
+ violet: "bg-violet-600 dark:bg-violet-600",
28
+ purple: "bg-purple-600 dark:bg-purple-600",
29
+ fuchsia: "bg-fuchsia-600 dark:bg-fuchsia-600",
30
+ pink: "bg-pink-600 dark:bg-pink-600",
31
+ rose: "bg-rose-800 dark:bg-rose-800"
32
32
  }
33
+ },
34
+ defaultVariants: {
35
+ type: "dark",
36
+ color: undefined
33
37
  }
34
38
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "1.11.0",
3
+ "version": "1.11.2",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "dist/index.js",
6
6
  "author": {