flowbite-svelte 0.34.2 → 0.34.3

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 (41) hide show
  1. package/dist/alert/Alert.svelte +47 -0
  2. package/dist/alert/Alert.svelte.d.ts +32 -0
  3. package/dist/index.d.ts +11 -11
  4. package/dist/index.js +11 -11
  5. package/dist/skeleton/CardPlaceholder.svelte +15 -7
  6. package/dist/skeleton/CardPlaceholder.svelte.d.ts +1 -1
  7. package/dist/skeleton/ImagePlaceholder.svelte +11 -10
  8. package/dist/skeleton/ImagePlaceholder.svelte.d.ts +1 -1
  9. package/dist/skeleton/Skeleton.svelte +17 -7
  10. package/dist/skeleton/Skeleton.svelte.d.ts +1 -0
  11. package/dist/skeleton/TextPlaceholder.svelte +17 -8
  12. package/dist/skeleton/TextPlaceholder.svelte.d.ts +1 -0
  13. package/dist/skeleton/VideoPlaceholder.svelte +14 -6
  14. package/dist/skeleton/VideoPlaceholder.svelte.d.ts +1 -1
  15. package/dist/tables/TableHeadCell.svelte +2 -1
  16. package/dist/tables/TableHeadCell.svelte.d.ts +1 -0
  17. package/dist/toolbar/ToolbarGroup.svelte +2 -1
  18. package/dist/toolbar/ToolbarGroup.svelte.d.ts +3 -1
  19. package/package.json +23 -23
  20. /package/dist/{accordions → accordion}/Accordion.svelte +0 -0
  21. /package/dist/{accordions → accordion}/Accordion.svelte.d.ts +0 -0
  22. /package/dist/{accordions → accordion}/AccordionItem.svelte +0 -0
  23. /package/dist/{accordions → accordion}/AccordionItem.svelte.d.ts +0 -0
  24. /package/dist/{timelines → timeline}/Activity.svelte +0 -0
  25. /package/dist/{timelines → timeline}/Activity.svelte.d.ts +0 -0
  26. /package/dist/{timelines → timeline}/ActivityItem.svelte +0 -0
  27. /package/dist/{timelines → timeline}/ActivityItem.svelte.d.ts +0 -0
  28. /package/dist/{timelines → timeline}/Group.svelte +0 -0
  29. /package/dist/{timelines → timeline}/Group.svelte.d.ts +0 -0
  30. /package/dist/{timelines → timeline}/GroupItem.svelte +0 -0
  31. /package/dist/{timelines → timeline}/GroupItem.svelte.d.ts +0 -0
  32. /package/dist/{timelines → timeline}/Timeline.svelte +0 -0
  33. /package/dist/{timelines → timeline}/Timeline.svelte.d.ts +0 -0
  34. /package/dist/{timelines → timeline}/TimelineHorizontal.svelte +0 -0
  35. /package/dist/{timelines → timeline}/TimelineHorizontal.svelte.d.ts +0 -0
  36. /package/dist/{timelines → timeline}/TimelineItem.svelte +0 -0
  37. /package/dist/{timelines → timeline}/TimelineItem.svelte.d.ts +0 -0
  38. /package/dist/{timelines → timeline}/TimelineItemHorizontal.svelte +0 -0
  39. /package/dist/{timelines → timeline}/TimelineItemHorizontal.svelte.d.ts +0 -0
  40. /package/dist/{timelines → timeline}/TimelineItemVertical.svelte +0 -0
  41. /package/dist/{timelines → timeline}/TimelineItemVertical.svelte.d.ts +0 -0
@@ -0,0 +1,47 @@
1
+ <script>import classNames from 'classnames';
2
+ import { createEventDispatcher } from 'svelte';
3
+ import CloseButton from '../utils/CloseButton.svelte';
4
+ import Frame from '../utils/Frame.svelte';
5
+ const dispatch = createEventDispatcher();
6
+ export let dismissable = false;
7
+ export let accent = false;
8
+ let hidden = false;
9
+ const handleHide = () => {
10
+ hidden = !hidden;
11
+ dispatch('close'); // preffered name
12
+ };
13
+ let divClass;
14
+ $: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidden', $$props.class);
15
+ $: {
16
+ // set default values
17
+ $$restProps.color = $$restProps.color ?? 'blue';
18
+ $$restProps.rounded = $$restProps.rounded ?? !accent;
19
+ }
20
+ </script>
21
+
22
+ <Frame {...$$restProps} class={divClass} role="alert">
23
+ <div class="flex items-center">
24
+ {#if $$slots.icon}
25
+ <slot name="icon" />
26
+ {/if}
27
+ <div class:ml-3={$$slots.icon}>
28
+ <slot />
29
+ </div>
30
+
31
+ {#if dismissable}
32
+ <CloseButton
33
+ class="-mx-1.5 -my-1.5"
34
+ color={$$restProps.color}
35
+ on:click={handleHide}
36
+ on:click
37
+ on:change
38
+ on:keydown
39
+ on:keyup
40
+ on:focus
41
+ on:blur
42
+ on:mouseenter
43
+ on:mouseleave />
44
+ {/if}
45
+ </div>
46
+ <slot name="extra" />
47
+ </Frame>
@@ -0,0 +1,32 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ [x: string]: any;
5
+ dismissable?: boolean | undefined;
6
+ accent?: boolean | undefined;
7
+ };
8
+ events: {
9
+ click: MouseEvent;
10
+ change: CustomEvent<any>;
11
+ keydown: CustomEvent<any>;
12
+ keyup: CustomEvent<any>;
13
+ focus: CustomEvent<any>;
14
+ blur: CustomEvent<any>;
15
+ mouseenter: CustomEvent<any>;
16
+ mouseleave: CustomEvent<any>;
17
+ close: CustomEvent<any>;
18
+ } & {
19
+ [evt: string]: CustomEvent<any>;
20
+ };
21
+ slots: {
22
+ icon: {};
23
+ default: {};
24
+ extra: {};
25
+ };
26
+ };
27
+ export type AlertProps = typeof __propDef.props;
28
+ export type AlertEvents = typeof __propDef.events;
29
+ export type AlertSlots = typeof __propDef.slots;
30
+ export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
31
+ }
32
+ export {};
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export { default as Accordion } from "./accordions/Accordion.svelte";
2
- export { default as AccordionItem } from "./accordions/AccordionItem.svelte";
1
+ export { default as Accordion } from "./accordion/Accordion.svelte";
2
+ export { default as AccordionItem } from "./accordion/AccordionItem.svelte";
3
3
  export { default as Alert } from "./alerts/Alert.svelte";
4
4
  export { default as Avatar } from "./avatar/Avatar.svelte";
5
5
  export { default as Badge } from "./badges/Badge.svelte";
@@ -100,15 +100,15 @@ export { default as TableHeadCell } from "./tables/TableHeadCell.svelte";
100
100
  export { default as TableSearch } from "./tables/TableSearch.svelte";
101
101
  export { default as TabItem } from "./tabs/TabItem.svelte";
102
102
  export { default as Tabs } from "./tabs/Tabs.svelte";
103
- export { default as Group } from "./timelines/Group.svelte";
104
- export { default as GroupItem } from "./timelines/GroupItem.svelte";
105
- export { default as Activity } from "./timelines/Activity.svelte";
106
- export { default as ActivityItem } from "./timelines/ActivityItem.svelte";
107
- export { default as Timeline } from "./timelines/Timeline.svelte";
108
- export { default as TimelineItem } from "./timelines/TimelineItem.svelte";
109
- export { default as TimelineHorizontal } from "./timelines/TimelineHorizontal.svelte";
110
- export { default as TimelineItemHorizontal } from "./timelines/TimelineItemHorizontal.svelte";
111
- export { default as TimelineItemVertical } from "./timelines/TimelineItemVertical.svelte";
103
+ export { default as Group } from "./timeline/Group.svelte";
104
+ export { default as GroupItem } from "./timeline/GroupItem.svelte";
105
+ export { default as Activity } from "./timeline/Activity.svelte";
106
+ export { default as ActivityItem } from "./timeline/ActivityItem.svelte";
107
+ export { default as Timeline } from "./timeline/Timeline.svelte";
108
+ export { default as TimelineItem } from "./timeline/TimelineItem.svelte";
109
+ export { default as TimelineHorizontal } from "./timeline/TimelineHorizontal.svelte";
110
+ export { default as TimelineItemHorizontal } from "./timeline/TimelineItemHorizontal.svelte";
111
+ export { default as TimelineItemVertical } from "./timeline/TimelineItemVertical.svelte";
112
112
  export { default as Toast } from "./toasts/Toast.svelte";
113
113
  export { default as Toolbar } from "./toolbar/Toolbar.svelte";
114
114
  export { default as ToolbarButton } from "./toolbar/ToolbarButton.svelte";
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // Accordion
2
- export { default as Accordion } from './accordions/Accordion.svelte';
3
- export { default as AccordionItem } from './accordions/AccordionItem.svelte';
2
+ export { default as Accordion } from './accordion/Accordion.svelte';
3
+ export { default as AccordionItem } from './accordion/AccordionItem.svelte';
4
4
 
5
5
  // Alerts
6
6
  export { default as Alert } from './alerts/Alert.svelte';
@@ -171,15 +171,15 @@ export { default as TabItem } from './tabs/TabItem.svelte';
171
171
  export { default as Tabs } from './tabs/Tabs.svelte';
172
172
 
173
173
  // Timeline
174
- export { default as Group } from './timelines/Group.svelte';
175
- export { default as GroupItem } from './timelines/GroupItem.svelte';
176
- export { default as Activity } from './timelines/Activity.svelte';
177
- export { default as ActivityItem } from './timelines/ActivityItem.svelte';
178
- export { default as Timeline } from './timelines/Timeline.svelte';
179
- export { default as TimelineItem } from './timelines/TimelineItem.svelte';
180
- export { default as TimelineHorizontal } from './timelines/TimelineHorizontal.svelte';
181
- export { default as TimelineItemHorizontal } from './timelines/TimelineItemHorizontal.svelte';
182
- export { default as TimelineItemVertical } from './timelines/TimelineItemVertical.svelte';
174
+ export { default as Group } from './timeline/Group.svelte';
175
+ export { default as GroupItem } from './timeline/GroupItem.svelte';
176
+ export { default as Activity } from './timeline/Activity.svelte';
177
+ export { default as ActivityItem } from './timeline/ActivityItem.svelte';
178
+ export { default as Timeline } from './timeline/Timeline.svelte';
179
+ export { default as TimelineItem } from './timeline/TimelineItem.svelte';
180
+ export { default as TimelineHorizontal } from './timeline/TimelineHorizontal.svelte';
181
+ export { default as TimelineItemHorizontal } from './timeline/TimelineItemHorizontal.svelte';
182
+ export { default as TimelineItemVertical } from './timeline/TimelineItemVertical.svelte';
183
183
 
184
184
  // Toast
185
185
  export { default as Toast } from './toasts/Toast.svelte';
@@ -1,13 +1,21 @@
1
- <script>import classNames from 'classnames';
2
- export let divClass = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
3
- export let size = '48';
1
+ <script>const sizes = {
2
+ sm: 'max-w-sm',
3
+ md: 'max-w-md',
4
+ lg: 'max-w-lg',
5
+ xl: 'max-w-xl',
6
+ xxl: 'max-w-2xl'
7
+ };
8
+ import classNames from 'classnames';
9
+ export let divClass = 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
10
+ export let size = 'sm';
11
+ $: outDivclass = classNames(sizes[size], divClass, $$props.class);
4
12
  </script>
5
13
 
6
- <div role="status" class={classNames(divClass, $$props.class)}>
14
+ <div role="status" class={outDivclass}>
7
15
  <div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
8
16
  <svg
9
- width={size}
10
- height={size}
17
+ width=48
18
+ height=48
11
19
  class="text-gray-200 dark:text-gray-600"
12
20
  xmlns="http://www.w3.org/2000/svg"
13
21
  aria-hidden="true"
@@ -18,7 +26,7 @@ export let size = '48';
18
26
  /></svg
19
27
  >
20
28
  </div>
21
- <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" />
29
+ <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
22
30
  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
23
31
  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
24
32
  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
@@ -3,7 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
- size?: string | undefined;
6
+ size?: string | number | undefined;
7
7
  };
8
8
  events: {
9
9
  [evt: string]: CustomEvent<any>;
@@ -1,15 +1,15 @@
1
1
  <script>import classNames from 'classnames';
2
2
  export let divClass = 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center';
3
- export let size = '48';
3
+ export let imgHeight = '48';
4
4
  </script>
5
5
 
6
6
  <div role="status" class={classNames(divClass, $$props.class)}>
7
7
  <div
8
- class="flex justify-center items-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700"
8
+ class="flex justify-center items-center w-full h-{imgHeight} bg-gray-300 rounded sm:w-96 dark:bg-gray-700"
9
9
  >
10
10
  <svg
11
- width={size}
12
- height={size}
11
+ width=48
12
+ height=48
13
13
  class="text-gray-200"
14
14
  xmlns="http://www.w3.org/2000/svg"
15
15
  aria-hidden="true"
@@ -21,12 +21,13 @@ export let size = '48';
21
21
  >
22
22
  </div>
23
23
  <div class="w-full">
24
- <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" />
25
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5" />
26
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
27
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5" />
28
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5" />
29
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]" />
24
+ <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
25
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12 mb-2.5" />
26
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
27
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
28
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-10/12 mb-2.5" />
29
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-11/12 mb-2.5" />
30
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12" />
30
31
  </div>
31
32
  <span class="sr-only">Loading...</span>
32
33
  </div>
@@ -3,7 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
- size?: string | undefined;
6
+ imgHeight?: string | undefined;
7
7
  };
8
8
  events: {
9
9
  [evt: string]: CustomEvent<any>;
@@ -1,13 +1,23 @@
1
1
  <script>import classNames from 'classnames';
2
- export let divClass = 'max-w-sm animate-pulse';
2
+ const sizes = {
3
+ sm: 'max-w-sm',
4
+ md: 'max-w-md',
5
+ lg: 'max-w-lg',
6
+ xl: 'max-w-xl',
7
+ xxl: 'max-w-2xl'
8
+ };
9
+ export let divClass = 'animate-pulse';
10
+ export let size = 'sm';
11
+ $: outDivclass = classNames(sizes[size], divClass, $$props.class);
3
12
  </script>
4
13
 
5
- <div role="status" class={classNames(divClass, $$props.class)}>
6
- <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" />
7
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5" />
14
+ <div role="status" class={outDivclass}>
15
+ <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
16
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12 mb-2.5" />
8
17
  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
9
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5" />
10
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5" />
11
- <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]" />
18
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
19
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-10/12 mb-2.5" />
20
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-11/12 mb-2.5" />
21
+ <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12" />
12
22
  <span class="sr-only">Loading...</span>
13
23
  </div>
@@ -3,6 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
+ size?: string | number | undefined;
6
7
  };
7
8
  events: {
8
9
  [evt: string]: CustomEvent<any>;
@@ -1,34 +1,43 @@
1
- <script>import classNames from 'classnames';
2
- export let divClass = 'space-y-2.5 animate-pulse max-w-lg';
1
+ <script>const sizes = {
2
+ sm: 'max-w-sm',
3
+ md: 'max-w-md',
4
+ lg: 'max-w-lg',
5
+ xl: 'max-w-xl',
6
+ xxl: 'max-w-2xl'
7
+ };
8
+ import classNames from 'classnames';
9
+ export let divClass = 'space-y-2.5 animate-pulse';
10
+ export let size = 'sm';
11
+ $: outDivclass = classNames(sizes[size], divClass, $$props.class);
3
12
  </script>
4
13
 
5
- <div role="status" class={classNames(divClass, $$props.class)}>
14
+ <div role="status" class={outDivclass}>
6
15
  <div class="flex items-center space-x-2 w-full">
7
16
  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32" />
8
17
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
9
18
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
10
19
  </div>
11
- <div class="flex items-center w-full space-x-2 max-w-[480px]">
20
+ <div class="flex items-center space-x-2 w-11/12">
12
21
  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
13
22
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
14
23
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
15
24
  </div>
16
- <div class="flex items-center w-full space-x-2 max-w-[400px]">
25
+ <div class="flex items-center space-x-2 w-9/12">
17
26
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
18
27
  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80" />
19
28
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
20
29
  </div>
21
- <div class="flex items-center w-full space-x-2 max-w-[480px]">
30
+ <div class="flex items-center space-x-2 w-11/12">
22
31
  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
23
32
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
24
33
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
25
34
  </div>
26
- <div class="flex items-center w-full space-x-2 max-w-[440px]">
35
+ <div class="flex items-center space-x-2 w-10/12">
27
36
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-32" />
28
37
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24" />
29
38
  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" />
30
39
  </div>
31
- <div class="flex items-center w-full space-x-2 max-w-[360px]">
40
+ <div class="flex items-center space-x-2 w-8/12">
32
41
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
33
42
  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80" />
34
43
  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" />
@@ -3,6 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
+ size?: string | number | undefined;
6
7
  };
7
8
  events: {
8
9
  [evt: string]: CustomEvent<any>;
@@ -1,12 +1,20 @@
1
- <script>import classNames from 'classnames';
2
- export let divClass = 'flex justify-center items-center max-w-sm h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
3
- export let size = '48';
1
+ <script>const sizes = {
2
+ sm: 'max-w-sm',
3
+ md: 'max-w-md',
4
+ lg: 'max-w-lg',
5
+ xl: 'max-w-xl',
6
+ xxl: 'max-w-2xl'
7
+ };
8
+ import classNames from 'classnames';
9
+ export let divClass = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
10
+ export let size = 'sm';
11
+ $: outDivclass = classNames(sizes[size], divClass, $$props.class);
4
12
  </script>
5
13
 
6
- <div role="status" class={classNames(divClass, $$props.class)}>
14
+ <div role="status" class={outDivclass}>
7
15
  <svg
8
- width={size}
9
- height={size}
16
+ width=48
17
+ height=48
10
18
  class="text-gray-200 dark:text-gray-600"
11
19
  xmlns="http://www.w3.org/2000/svg"
12
20
  aria-hidden="true"
@@ -3,7 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
- size?: string | undefined;
6
+ size?: string | number | undefined;
7
7
  };
8
8
  events: {
9
9
  [evt: string]: CustomEvent<any>;
@@ -1,6 +1,7 @@
1
1
  <script>import classNames from 'classnames';
2
+ export let padding = 'px-6 py-3';
2
3
  </script>
3
4
 
4
- <th {...$$restProps} class={classNames('px-6 py-3', $$props.class)}>
5
+ <th {...$$restProps} class={classNames(padding, $$props.class)}>
5
6
  <slot />
6
7
  </th>
@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
+ padding?: string | undefined;
5
6
  };
6
7
  events: {
7
8
  [evt: string]: CustomEvent<any>;
@@ -1,9 +1,10 @@
1
1
  <script>import { getContext } from 'svelte';
2
+ export let divClass = 'flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0';
2
3
  const options = getContext('toolbar');
3
4
  if (options)
4
5
  $options = true;
5
6
  </script>
6
7
 
7
- <div class="flex items-center space-x-1 sm:pr-4 sm:pl-4 first:sm:pl-0 last:sm:pr-0">
8
+ <div class="{divClass}">
8
9
  <slot />
9
10
  </div>
@@ -1,6 +1,8 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
- props: Record<string, never>;
3
+ props: {
4
+ divClass?: string | undefined;
5
+ };
4
6
  events: {
5
7
  [evt: string]: CustomEvent<any>;
6
8
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.34.2",
3
+ "version": "0.34.3",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "author": {
6
6
  "name": "Shinichi Okada",
@@ -119,12 +119,12 @@
119
119
  },
120
120
  "exports": {
121
121
  "./Accordion.svelte": {
122
- "types": "./dist/accordions/Accordion.svelte.d.ts",
123
- "svelte": "./dist/accordions/Accordion.svelte"
122
+ "types": "./dist/accordion/Accordion.svelte.d.ts",
123
+ "svelte": "./dist/accordion/Accordion.svelte"
124
124
  },
125
125
  "./AccordionItem.svelte": {
126
- "types": "./dist/accordions/AccordionItem.svelte.d.ts",
127
- "svelte": "./dist/accordions/AccordionItem.svelte"
126
+ "types": "./dist/accordion/AccordionItem.svelte.d.ts",
127
+ "svelte": "./dist/accordion/AccordionItem.svelte"
128
128
  },
129
129
  "./Alert.svelte": {
130
130
  "types": "./dist/alerts/Alert.svelte.d.ts",
@@ -567,40 +567,40 @@
567
567
  "svelte": "./dist/tabs/Tabs.svelte"
568
568
  },
569
569
  "./Activity.svelte": {
570
- "types": "./dist/timelines/Activity.svelte.d.ts",
571
- "svelte": "./dist/timelines/Activity.svelte"
570
+ "types": "./dist/timeline/Activity.svelte.d.ts",
571
+ "svelte": "./dist/timeline/Activity.svelte"
572
572
  },
573
573
  "./ActivityItem.svelte": {
574
- "types": "./dist/timelines/ActivityItem.svelte.d.ts",
575
- "svelte": "./dist/timelines/ActivityItem.svelte"
574
+ "types": "./dist/timeline/ActivityItem.svelte.d.ts",
575
+ "svelte": "./dist/timeline/ActivityItem.svelte"
576
576
  },
577
577
  "./Group.svelte": {
578
- "types": "./dist/timelines/Group.svelte.d.ts",
579
- "svelte": "./dist/timelines/Group.svelte"
578
+ "types": "./dist/timeline/Group.svelte.d.ts",
579
+ "svelte": "./dist/timeline/Group.svelte"
580
580
  },
581
581
  "./GroupItem.svelte": {
582
- "types": "./dist/timelines/GroupItem.svelte.d.ts",
583
- "svelte": "./dist/timelines/GroupItem.svelte"
582
+ "types": "./dist/timeline/GroupItem.svelte.d.ts",
583
+ "svelte": "./dist/timeline/GroupItem.svelte"
584
584
  },
585
585
  "./Timeline.svelte": {
586
- "types": "./dist/timelines/Timeline.svelte.d.ts",
587
- "svelte": "./dist/timelines/Timeline.svelte"
586
+ "types": "./dist/timeline/Timeline.svelte.d.ts",
587
+ "svelte": "./dist/timeline/Timeline.svelte"
588
588
  },
589
589
  "./TimelineHorizontal.svelte": {
590
- "types": "./dist/timelines/TimelineHorizontal.svelte.d.ts",
591
- "svelte": "./dist/timelines/TimelineHorizontal.svelte"
590
+ "types": "./dist/timeline/TimelineHorizontal.svelte.d.ts",
591
+ "svelte": "./dist/timeline/TimelineHorizontal.svelte"
592
592
  },
593
593
  "./TimelineItem.svelte": {
594
- "types": "./dist/timelines/TimelineItem.svelte.d.ts",
595
- "svelte": "./dist/timelines/TimelineItem.svelte"
594
+ "types": "./dist/timeline/TimelineItem.svelte.d.ts",
595
+ "svelte": "./dist/timeline/TimelineItem.svelte"
596
596
  },
597
597
  "./TimelineItemHorizontal.svelte": {
598
- "types": "./dist/timelines/TimelineItemHorizontal.svelte.d.ts",
599
- "svelte": "./dist/timelines/TimelineItemHorizontal.svelte"
598
+ "types": "./dist/timeline/TimelineItemHorizontal.svelte.d.ts",
599
+ "svelte": "./dist/timeline/TimelineItemHorizontal.svelte"
600
600
  },
601
601
  "./TimelineItemVertical.svelte": {
602
- "types": "./dist/timelines/TimelineItemVertical.svelte.d.ts",
603
- "svelte": "./dist/timelines/TimelineItemVertical.svelte"
602
+ "types": "./dist/timeline/TimelineItemVertical.svelte.d.ts",
603
+ "svelte": "./dist/timeline/TimelineItemVertical.svelte"
604
604
  },
605
605
  "./Toast.svelte": {
606
606
  "types": "./dist/toasts/Toast.svelte.d.ts",
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes