flowbite-svelte 0.27.15 → 0.27.17

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.27.17](https://github.com/themesberg/flowbite-svelte/compare/v0.27.16...v0.27.17) (2022-11-18)
+
+
+### Features
+
+* add SpeedDial component ([a959c5e](https://github.com/themesberg/flowbite-svelte/commit/a959c5edd96e56145453f0558f19be7f7a7fa8b5))
+
+
+### Bug Fixes
+
+* checkbox group ([#427](https://github.com/themesberg/flowbite-svelte/issues/427)) ([58c6660](https://github.com/themesberg/flowbite-svelte/commit/58c66600abcb943c730dbd64e6e4ca920bc06f8e))
+
+### [0.27.16](https://github.com/themesberg/flowbite-svelte/compare/v0.27.15...v0.27.16) (2022-11-14)
+
 ### [0.27.15](https://github.com/themesberg/flowbite-svelte/compare/v0.27.14...v0.27.15) (2022-11-13)
 
 

package/README.md

@@ -17,6 +17,8 @@
 
 [Flowbite-Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.
 
+[Visualize this repo's codebase](https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=themesberg%2Fflowbite-svelte)
+
 ## Flowbite-Svelte-Starter
 
 You can use [Flowbite-Svelte Starter](https://github.com/shinokada/flowbite-svelte-starter) for a quick start.

package/accordions/Accordion.svelte

@@ -0,0 +1,24 @@
+<script context="module">import { writable } from 'svelte/store';
+</script>
+
+<script>import Frame from '../utils/Frame.svelte';
+import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let multiple = false;
+export let flush = false;
+export let activeClasses = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
+export let inactiveClasses = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+export let defaultClass = 'text-gray-500 dark:text-gray-400';
+const ctx = {
+    flush,
+    activeClasses,
+    inactiveClasses,
+    selected: multiple ? undefined : writable()
+};
+setContext('ctx', ctx);
+let frameClass = classNames(defaultClass, 'divide-y divide-gray-200 dark:divide-gray-700', 'border-gray-200 dark:border-gray-700', 'rounded-t-xl', $$props.class);
+</script>
+
+<Frame class={frameClass} color="none" border={!flush}>
+  <slot />
+</Frame>

package/accordions/Accordion.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Writable } from 'svelte/store';
+export interface AccordionCtxType {
+    flush: boolean;
+    activeClasses: string;
+    inactiveClasses: string;
+    selected?: Writable<object>;
+}
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        multiple?: boolean | undefined;
+        flush?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AccordionProps = typeof __propDef.props;
+export declare type AccordionEvents = typeof __propDef.events;
+export declare type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/accordions/AccordionItem.svelte

@@ -0,0 +1,59 @@
+<script>import ChevronDown from '../utils/ChevronDown.svelte';
+import ChevronUp from '../utils/ChevronUp.svelte';
+import classNames from 'classnames';
+import { getContext, onMount } from 'svelte';
+import { writable } from 'svelte/store';
+import { fade, blur, fly, slide } from 'svelte/transition';
+export let open = false;
+export let activeClasses = undefined;
+export let inactiveClasses = undefined;
+export let defaultClass = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl';
+export let transitionType = 'slide';
+export let transitionParams = {};
+// make a custom transition function that returns the desired transition
+const multiple = (node, params) => {
+    switch (transitionType) {
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+        default:
+            return slide(node, params);
+    }
+};
+const ctx = getContext('ctx') ?? {};
+// single selection
+const self = {};
+const selected = ctx.selected ?? writable();
+let _open = open;
+open = false;
+onMount(() => {
+    if (_open)
+        $selected = self;
+    // this will trigger unsubscribe on destroy
+    return selected.subscribe((x) => (open = x === self));
+});
+const handleToggle = (e) => selected.set(open ? {} : self);
+let buttonClass;
+$: buttonClass = classNames(defaultClass, ctx.flush ? 'py-5' : 'p-5', open && (ctx.flush ? 'text-gray-900 dark:text-white' : activeClasses || ctx.activeClasses), !open && (ctx.flush ? 'text-gray-500 dark:text-gray-400' : inactiveClasses || ctx.inactiveClasses), $$props.class);
+</script>
+
+<h2 aria-expanded={open} class="group">
+  <button on:click={handleToggle} type="button" class={buttonClass}>
+    <slot name="header" />
+    {#if open}
+      <slot name="arrowup"><ChevronUp /></slot>
+    {:else}
+      <slot name="arrowdown"><ChevronDown /></slot>
+    {/if}
+  </button>
+</h2>
+{#if open}
+  <div transition:multiple={transitionParams}>
+    <div class={ctx.flush ? 'py-5' : 'p-5'}>
+      <slot />
+    </div>
+  </div>
+{/if}

package/accordions/AccordionItem.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TransitionTypes, TransitionParamTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
+        transitionType?: TransitionTypes | undefined;
+        transitionParams?: TransitionParamTypes | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        arrowup: {};
+        arrowdown: {};
+        default: {};
+    };
+};
+export declare type AccordionItemProps = typeof __propDef.props;
+export declare type AccordionItemEvents = typeof __propDef.events;
+export declare type AccordionItemSlots = typeof __propDef.slots;
+export default class AccordionItem extends SvelteComponentTyped<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
+}
+export {};

package/alerts/Alert.svelte

@@ -0,0 +1,47 @@
+<script>import classNames from 'classnames';
+import { createEventDispatcher } from 'svelte';
+import CloseButton from '../utils/CloseButton.svelte';
+import Frame from '../utils/Frame.svelte';
+const dispatch = createEventDispatcher();
+export let dismissable = false;
+export let accent = false;
+let hidden = false;
+const handleHide = () => {
+    hidden = !hidden;
+    dispatch('close'); // preffered name
+};
+let divClass;
+$: divClass = classNames('p-4 text-sm', accent && 'border-t-4 ', hidden && 'hidden', $$props.class);
+$: {
+    // set default values
+    $$restProps.color = $$restProps.color ?? 'blue';
+    $$restProps.rounded = $$restProps.rounded ?? !accent;
+}
+</script>
+
+<Frame {...$$restProps} class={divClass} role="alert">
+  <div class="flex items-center">
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+    <div class:ml-3={$$slots.icon}>
+      <slot />
+    </div>
+
+    {#if dismissable}
+      <CloseButton
+        class="-mx-1.5 -my-1.5"
+        color={$$restProps.color}
+        on:click={handleHide}
+        on:click
+        on:change
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:mouseenter
+        on:mouseleave />
+    {/if}
+  </div>
+  <slot name="extra" />
+</Frame>

package/alerts/Alert.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        dismissable?: boolean | undefined;
+        accent?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        change: CustomEvent<any>;
+        keydown: CustomEvent<any>;
+        keyup: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        mouseenter: CustomEvent<any>;
+        mouseleave: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+        extra: {};
+    };
+};
+export declare type AlertProps = typeof __propDef.props;
+export declare type AlertEvents = typeof __propDef.events;
+export declare type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/avatar/Avatar.svelte

@@ -0,0 +1,39 @@
+<script>import classNames from 'classnames';
+import AvatarPlaceholder from './Placeholder.svelte';
+import Dot from './Dot.svelte';
+export let src = '';
+export let href = '#';
+export let rounded = false;
+export let border = false;
+export let stacked = false;
+export let dot = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
+export let alt = '';
+export let size = 'md';
+const sizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-20 h-20',
+    xl: 'w-36 h-36'
+};
+let avatarClass;
+$: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
+</script>
+
+<Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
+  {#if src}
+    <img {alt} {src} {...$$restProps} class={avatarClass} />
+  {:else if $$slots.default}
+    <svelte:element
+      this={href ? 'a' : 'div'}
+      {href}
+      {...$$restProps}
+      class="flex justify-center items-center text-xs font-medium {avatarClass}">
+      <slot />
+    </svelte:element>
+  {:else}
+    <svelte:element this={href ? 'a' : 'div'} {...$$restProps} class={avatarClass}>
+      <AvatarPlaceholder {rounded} />
+    </svelte:element>
+  {/if}
+</Dot>

package/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { DotType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        src?: string | undefined;
+        href?: string | undefined;
+        rounded?: boolean | undefined;
+        border?: boolean | undefined;
+        stacked?: boolean | undefined;
+        dot?: DotType | undefined;
+        alt?: string | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AvatarProps = typeof __propDef.props;
+export declare type AvatarEvents = typeof __propDef.events;
+export declare type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

package/avatar/Dot.svelte

@@ -0,0 +1,34 @@
+<script>import classNames from 'classnames';
+export let show = false;
+export let top = false;
+export let color = 'bg-gray-300 dark:bg-gray-500';
+export let rounded = false;
+export let size = 'md';
+const sizes = {
+    xs: 'w-2.5 h-2.5',
+    sm: 'w-3 h-3',
+    md: 'w-3.5 h-3.5',
+    lg: 'w-6 h-6',
+    xl: 'w-10 h-10'
+};
+const offsets = {
+    xs: ['left-4', 'left-5'],
+    sm: ['left-6', 'left-6'],
+    md: ['left-7', 'left-8'],
+    lg: ['left-14', 'left-16'],
+    xl: ['left-24', 'left-32']
+};
+let dotClass;
+$: dotClass = classNames('absolute rounded-full border-white dark:border-gray-800 border-2', sizes[size], offsets[size][+rounded], top ? 'top-0' : 'bottom-0', rounded && top && 'transform -translate-y-1/2', rounded && !top && 'transform translate-y-1/4', color);
+let divClass;
+$: divClass = classNames('relative flex-shrink-0', $$props.class);
+</script>
+
+{#if show}
+	<div class={divClass}>
+		<slot />
+		<span class={dotClass} />
+	</div>
+{:else}
+	<slot />
+{/if}

package/avatar/Dot.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        show?: boolean | undefined;
+        top?: boolean | undefined;
+        color?: string | undefined;
+        rounded?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DotProps = typeof __propDef.props;
+export declare type DotEvents = typeof __propDef.events;
+export declare type DotSlots = typeof __propDef.slots;
+export default class Dot extends SvelteComponentTyped<DotProps, DotEvents, DotSlots> {
+}
+export {};

package/avatar/Placeholder.svelte

@@ -0,0 +1,15 @@
+<script>export let rounded = false;
+</script>
+
+<svg
+	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
+	fill="currentColor"
+	viewBox="0 0 16 16"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+		clip-rule="evenodd"
+	/>
+</svg>

package/avatar/Placeholder.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        rounded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PlaceholderProps = typeof __propDef.props;
+export declare type PlaceholderEvents = typeof __propDef.events;
+export declare type PlaceholderSlots = typeof __propDef.slots;
+export default class Placeholder extends SvelteComponentTyped<PlaceholderProps, PlaceholderEvents, PlaceholderSlots> {
+}
+export {};

package/badges/Badge.svelte

@@ -0,0 +1,51 @@
+<script>import classNames from 'classnames';
+import CloseButton from '../utils/CloseButton.svelte';
+export let color = 'blue';
+export let large = false;
+export let href = undefined;
+export let rounded = false;
+export let index = false;
+export let dismissable = false;
+export let baseClass = 'inline-flex items-center justify-center -mb-0.5';
+let hidden = false;
+const colors = {
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
+    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
+    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900',
+    ['!blue']: 'bg-blue-500 text-blue-100',
+    ['!dark']: 'bg-gray-500 text-gray-100',
+    ['!red']: 'bg-red-500 text-white',
+    ['!green']: 'bg-green-500 text-green-100',
+    ['!yellow']: 'bg-yellow-300 text-yellow-800',
+    ['!indigo']: 'bg-indigo-500 text-indigo-100',
+    ['!purple']: 'bg-purple-500 text-purple-100',
+    ['!pink']: 'bg-pink-500 text-pink-100'
+};
+const hovers = {
+    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
+    dark: 'hover:bg-gray-200 dark:hover:bg-gray-300',
+    red: 'hover:bg-red-200 dark:hover:bg-red-300',
+    green: 'hover:bg-green-200 dark:hover:bg-green-300',
+    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
+    purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
+    pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
+};
+let badgeClass;
+$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
+const handleHide = () => {
+    hidden = !hidden;
+};
+</script>
+
+<svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass} class:hidden>
+	<slot />
+	{#if dismissable}
+		<CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} class="ml-1.5 -mr-1.5" />
+	{/if}
+</svelte:element>

package/badges/Badge.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Colors } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: Colors | undefined;
+        large?: boolean | undefined;
+        href?: string | undefined;
+        rounded?: boolean | undefined;
+        index?: boolean | undefined;
+        dismissable?: boolean | undefined;
+        baseClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BadgeProps = typeof __propDef.props;
+export declare type BadgeEvents = typeof __propDef.events;
+export declare type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
+}
+export {};

package/breadcrumbs/Breadcrumb.svelte

@@ -0,0 +1,13 @@
+<script>import classNames from 'classnames';
+export let solid = false;
+export let navClass = 'flex';
+export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
+export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
+let classNav = solid ? solidClass : navClass;
+</script>
+
+<nav aria-label="Breadcrumb" {...$$restProps} class={classNames(classNav, $$props.class)}>
+	<ol class={classNames(olClass, $$props.classOl)}>
+		<slot />
+	</ol>
+</nav>

package/breadcrumbs/Breadcrumb.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        solid?: boolean | undefined;
+        navClass?: string | undefined;
+        solidClass?: string | undefined;
+        olClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BreadcrumbProps = typeof __propDef.props;
+export declare type BreadcrumbEvents = typeof __propDef.events;
+export declare type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};

package/breadcrumbs/BreadcrumbItem.svelte

@@ -0,0 +1,44 @@
+<script>export let home = false;
+export let href = undefined;
+export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
+export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
+export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+</script>
+
+<li class="inline-flex items-center" {...$$restProps}>
+  {#if home}
+    <a class={homeClass} {href}>
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else}
+        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
+      {/if}
+      <slot />
+    </a>
+  {:else}
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg
+        class="w-6 h-6 text-gray-400"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+          clip-rule="evenodd" /></svg>
+    {/if}
+    {#if href}
+      <a class={linkClass} {href}>
+        <slot />
+      </a>
+    {:else}
+      <span class={spanClass}>
+        <slot />
+      </span>
+    {/if}
+  {/if}
+</li>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        home?: boolean | undefined;
+        href?: string | undefined;
+        linkClass?: string | undefined;
+        spanClass?: string | undefined;
+        homeClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export declare type BreadcrumbItemProps = typeof __propDef.props;
+export declare type BreadcrumbItemEvents = typeof __propDef.events;
+export declare type BreadcrumbItemSlots = typeof __propDef.slots;
+export default class BreadcrumbItem extends SvelteComponentTyped<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
+}
+export {};

package/buttongroups/ButtonGroup.svelte

@@ -0,0 +1,10 @@
+<script>import { setContext } from 'svelte';
+import classNames from 'classnames';
+export let size = 'md';
+export let divClass = 'inline-flex rounded-lg shadow-sm';
+setContext('group', { size });
+</script>
+
+<div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
+  <slot />
+</div>

package/buttongroups/ButtonGroup.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SizeType } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: SizeType | undefined;
+        divClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ButtonGroupProps = typeof __propDef.props;
+export declare type ButtonGroupEvents = typeof __propDef.events;
+export declare type ButtonGroupSlots = typeof __propDef.slots;
+export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
+}
+export {};