odj-svelte-ui 0.1.0

package/dist/elements/bottom-navigation/BottomNavHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let outerClass: string = 'w-full';
+  export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-neutral-100 rounded-lg dark:bg-neutral-600';
+</script>
+
+<div class={twMerge(outerClass, $$props.classOuter)} {...$$restProps}>
+  <div class={twMerge(innerClass, $$props.classInner)} role="group">
+    <slot />
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let outerClass: string = 'w-full';
+@prop export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-neutral-100 rounded-lg dark:bg-neutral-600';
+-->

package/dist/elements/bottom-navigation/BottomNavHeader.svelte.d.ts

@@ -0,0 +1,37 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let outerClass: string = 'w-full';
+ * @prop export let innerClass: string = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-neutral-100 rounded-lg dark:bg-neutral-600';
+ */
+declare const BottomNavHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    outerClass?: string | undefined;
+    innerClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type BottomNavHeader = InstanceType<typeof BottomNavHeader>;
+export default BottomNavHeader;

package/dist/elements/bottom-navigation/BottomNavHeaderItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let itemName: string = '';
+  export let active: boolean = false;
+  export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-neutral-900 hover:bg-neutral-200 dark:text-white dark:hover:bg-neutral-700 rounded-lg';
+  export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-neutral-900 dark:bg-neutral-300 dark:text-neutral-900 rounded-lg';
+
+  $: btnClass = active ? activeClass : defaultClass;
+</script>
+
+<button class={twMerge(btnClass, $$props.class)} {...$$restProps} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
+  {itemName}
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let itemName: string = '';
+@prop export let active: boolean = false;
+@prop export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-neutral-900 hover:bg-neutral-200 dark:text-white dark:hover:bg-neutral-700 rounded-lg';
+@prop export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-neutral-900 dark:bg-neutral-300 dark:text-neutral-900 rounded-lg';
+-->

package/dist/elements/bottom-navigation/BottomNavHeaderItem.svelte.d.ts

@@ -0,0 +1,41 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let itemName: string = '';
+ * @prop export let active: boolean = false;
+ * @prop export let defaultClass: string = 'px-5 py-1.5 text-xs font-medium text-neutral-900 hover:bg-neutral-200 dark:text-white dark:hover:bg-neutral-700 rounded-lg';
+ * @prop export let activeClass: string = 'px-5 py-1.5 text-xs font-medium text-white bg-neutral-900 dark:bg-neutral-300 dark:text-neutral-900 rounded-lg';
+ */
+declare const BottomNavHeaderItem: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    itemName?: string | undefined;
+    active?: boolean | undefined;
+    defaultClass?: string | undefined;
+    activeClass?: string | undefined;
+}, {
+    click: MouseEvent;
+    change: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BottomNavHeaderItem = InstanceType<typeof BottomNavHeaderItem>;
+export default BottomNavHeaderItem;

package/dist/elements/bottom-navigation/BottomNavItem.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { ButtonClassesTypes } from '../types';
+  import type { BottomNavType } from './BottomNav.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  export let btnName: string = '';
+  export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
+  export let activeClass: string | undefined = undefined;
+  export let href: string = '';
+  export let exact: boolean = true;
+
+  const navType: 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video' = getContext('navType');
+
+  const context = getContext<BottomNavType>('bottomNavType') ?? {};
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = '';
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  $: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
+  const btnClasses: ButtonClassesTypes = {
+    default: 'inline-flex flex-col items-center justify-center px-5 hover:bg-neutral-50 dark:hover:bg-neutral-800 group',
+    border: 'inline-flex flex-col items-center justify-center px-5 border-neutral-200 border-x hover:bg-neutral-50 dark:hover:bg-neutral-800 group dark:border-neutral-600',
+    application: '',
+    pagination: 'inline-flex flex-col items-center justify-center px-5 hover:bg-neutral-50 dark:hover:bg-neutral-800 group',
+    group: 'inline-flex flex-col items-center justify-center p-4 hover:bg-neutral-50 dark:hover:bg-neutral-800 group',
+    card: 'inline-flex flex-col items-center justify-center px-5 hover:bg-neutral-50 dark:hover:bg-neutral-800 group',
+    meeting: '',
+    video: ''
+  };
+
+  const spanClasses: ButtonClassesTypes = {
+    default: 'text-sm text-neutral-500 dark:text-neutral-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
+    border: 'text-sm text-neutral-500 dark:text-neutral-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
+    application: 'sr-only',
+    pagination: 'sr-only',
+    group: 'sr-only',
+    card: 'text-sm text-neutral-500 dark:text-neutral-400 group-hover:text-primary-600 dark:group-hover:text-primary-500',
+    meeting: '',
+    video: ''
+  };
+
+  const appBtnClasses = {
+    left: 'inline-flex flex-col items-center justify-center px-5 rounded-l-full hover:bg-neutral-50 dark:hover:bg-neutral-800 group',
+    middle: 'inline-flex flex-col items-center justify-center px-5 hover:bg-neutral-50 dark:hover:bg-neutral-800 group',
+    right: 'inline-flex flex-col items-center justify-center px-5 rounded-r-full hover:bg-neutral-50 dark:hover:bg-neutral-800 group'
+  };
+  let btnClass: string;
+
+  // let active = navUrl ? href === navUrl : false;
+
+  $: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
+
+  let spanClass: string;
+
+  $: spanClass = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), $$props.spanClass);
+</script>
+
+<svelte:element this={href ? 'a' : 'button'} aria-label={btnName} {href} role={href ? 'link' : 'button'} {...$$restProps} class={btnClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
+  <slot />
+  <span class={spanClass}>{btnName}</span>
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnName: string = '';
+@prop export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
+@prop export let activeClass: string | undefined = undefined;
+@prop export let href: string = '';
+@prop export let exact: boolean = true;
+-->

package/dist/elements/bottom-navigation/BottomNavItem.svelte.d.ts

@@ -0,0 +1,52 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let btnName: string = '';
+ * @prop export let appBtnPosition: 'left' | 'middle' | 'right' = 'middle';
+ * @prop export let activeClass: string | undefined = undefined;
+ * @prop export let href: string = '';
+ * @prop export let exact: boolean = true;
+ */
+declare const BottomNavItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    btnName?: string | undefined;
+    appBtnPosition?: "left" | "middle" | "right" | undefined;
+    activeClass?: string | undefined | undefined;
+    href?: string | undefined;
+    exact?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    change: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type BottomNavItem = InstanceType<typeof BottomNavItem>;
+export default BottomNavItem;

package/dist/elements/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let solid: boolean = false;
+  export let navClass: string = 'flex';
+  export let solidClass: string = 'flex px-5 py-3 text-neutral-700 border border-neutral-200 rounded-lg bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700';
+  export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+  export let ariaLabel: string = 'Breadcrumb'; 
+  let classNav: string = solid ? solidClass : navClass;
+</script>
+
+<nav aria-label={ariaLabel} {...$$restProps} class={twMerge(classNav, $$props.class)}>
+  <ol class={twMerge(olClass, $$props.classOl)}>
+    <slot />
+  </ol>
+</nav>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let solid: boolean = false;
+@prop export let navClass: string = 'flex';
+@prop export let solidClass: string = 'flex px-5 py-3 text-neutral-700 border border-neutral-200 rounded-lg bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700';
+@prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+@prop export let ariaLabel: string = 'Breadcrumb';
+-->

package/dist/elements/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,43 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let solid: boolean = false;
+ * @prop export let navClass: string = 'flex';
+ * @prop export let solidClass: string = 'flex px-5 py-3 text-neutral-700 border border-neutral-200 rounded-lg bg-neutral-50 dark:bg-neutral-800 dark:border-neutral-700';
+ * @prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
+ * @prop export let ariaLabel: string = 'Breadcrumb';
+ */
+declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    solid?: boolean | undefined;
+    navClass?: string | undefined;
+    solidClass?: string | undefined;
+    olClass?: string | undefined;
+    ariaLabel?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Breadcrumb = InstanceType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/elements/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let home: boolean = false;
+  export let href: string | undefined = undefined;
+  export let linkClass: string = 'ml-1 text-sm font-medium text-neutral-700 hover:text-neutral-900 md:ml-2 dark:text-neutral-400 dark:hover:text-white';
+  export let spanClass: string = 'ml-1 text-sm font-medium text-neutral-500 md:ml-2 dark:text-neutral-400';
+  export let homeClass: string = 'inline-flex items-center text-sm font-medium text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white';
+</script>
+
+<li class={twMerge('inline-flex items-center', $$props.class)} {...$$restProps}>
+  {#if home}
+    <a class={twMerge(homeClass, $$props.classHome)} {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-neutral-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={twMerge(linkClass, $$props.classLink)} {href}>
+        <slot />
+      </a>
+    {:else}
+      <span class={twMerge(spanClass, $$props.classSpan)}>
+        <slot />
+      </span>
+    {/if}
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let home: boolean = false;
+@prop export let href: string | undefined = undefined;
+@prop export let linkClass: string = 'ml-1 text-sm font-medium text-neutral-700 hover:text-neutral-900 md:ml-2 dark:text-neutral-400 dark:hover:text-white';
+@prop export let spanClass: string = 'ml-1 text-sm font-medium text-neutral-500 md:ml-2 dark:text-neutral-400';
+@prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white';
+-->

package/dist/elements/breadcrumb/BreadcrumbItem.svelte.d.ts

@@ -0,0 +1,45 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let home: boolean = false;
+ * @prop export let href: string | undefined = undefined;
+ * @prop export let linkClass: string = 'ml-1 text-sm font-medium text-neutral-700 hover:text-neutral-900 md:ml-2 dark:text-neutral-400 dark:hover:text-white';
+ * @prop export let spanClass: string = 'ml-1 text-sm font-medium text-neutral-500 md:ml-2 dark:text-neutral-400';
+ * @prop export let homeClass: string = 'inline-flex items-center text-sm font-medium text-neutral-700 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white';
+ */
+declare const BreadcrumbItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    home?: boolean | undefined;
+    href?: string | undefined | undefined;
+    linkClass?: string | undefined;
+    spanClass?: string | undefined;
+    homeClass?: string | undefined;
+}, {
+    icon: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}, {}, string>;
+type BreadcrumbItem = InstanceType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/elements/button-group/ButtonGroup.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import type { SizeType } from '../types';
+
+  export let size: SizeType = 'md';
+  export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+
+  setContext('group', { size });
+</script>
+
+<div {...$$restProps} class={twMerge(divClass, $$props.class)} role="group">
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let size: SizeType = 'md';
+@prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+-->

package/dist/elements/button-group/ButtonGroup.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { SizeType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let size: SizeType = 'md';
+ * @prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+ */
+declare const ButtonGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    size?: SizeType | undefined;
+    divClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ButtonGroup = InstanceType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/elements/buttons/Button.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { getContext } from 'svelte';
+  import type { ButtonType } from '../types';
+  import type { SizeType } from '../types';
+
+  type ButtonColor = keyof typeof colorClasses;
+
+  const group: SizeType = getContext('group');
+
+  export let pill: boolean = false;
+  export let outline: boolean = false;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+  export let href: string | undefined = undefined;
+  export let type: ButtonType = 'button';
+  export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+  export let shadow: boolean = false;
+
+  const colorClasses = {
+    alternative: 'text-neutral-900 bg-white border border-neutral-200 hover:bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-400 hover:text-primary-700 focus:text-primary-700 dark:focus:text-white dark:hover:text-white',
+    blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
+    dark: 'text-white bg-neutral-800 hover:bg-neutral-900 dark:bg-neutral-800 dark:hover:bg-neutral-700',
+    green: 'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700',
+    light: 'text-neutral-900 bg-white border border-neutral-300 hover:bg-neutral-100 dark:bg-neutral-800 dark:text-white dark:border-neutral-600 dark:hover:bg-neutral-700 dark:hover:border-neutral-600',
+    primary: 'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700',
+    purple: 'text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700',
+    red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700',
+    yellow: 'text-white bg-yellow-400 hover:bg-yellow-500 ',
+    none: ''
+  };
+
+  const coloredFocusClasses = {
+    alternative: 'focus-visible:ring-neutral-200 dark:focus-visible:ring-neutral-700',
+    blue: 'focus-visible:ring-blue-300 dark:focus-visible:ring-blue-800',
+    dark: 'focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700',
+    green: 'focus-visible:ring-green-300 dark:focus-visible:ring-green-800',
+    light: 'focus-visible:ring-neutral-200 dark:focus-visible:ring-neutral-700',
+    primary: 'focus-visible:ring-primary-300 dark:focus-visible:ring-primary-800',
+    purple: 'focus-visible:ring-purple-300 dark:focus-visible:ring-purple-900',
+    red: 'focus-visible:ring-red-300 dark:focus-visible:ring-red-900',
+    yellow: 'focus-visible:ring-yellow-300 dark:focus-visible:ring-yellow-900',
+    none: ''
+  };
+
+  const coloredShadowClasses = {
+    alternative: 'shadow-neutral-500/50 dark:shadow-neutral-800/80',
+    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    dark: 'shadow-neutral-500/50 dark:shadow-neutral-800/80',
+    green: 'shadow-green-500/50 dark:shadow-green-800/80',
+    light: 'shadow-neutral-500/50 dark:shadow-neutral-800/80',
+    primary: 'shadow-primary-500/50 dark:shadow-primary-800/80',
+    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
+    yellow: 'shadow-yellow-500/50 dark:shadow-yellow-800/80 ',
+    none: ''
+  };
+
+  const outlineClasses = {
+    alternative: 'text-neutral-900 hover:text-white border border-neutral-800 hover:bg-neutral-900 focus:bg-neutral-900 focus:text-white focus-visible:ring-neutral-300 dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-600 dark:focus-visible:ring-neutral-800',
+    blue: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
+    dark: 'text-neutral-900 hover:text-white border border-neutral-800 hover:bg-neutral-900 focus:bg-neutral-900 focus:text-white dark:border-neutral-600 dark:hover:text-white dark:hover:bg-neutral-600',
+    green: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600',
+    light: 'text-neutral-500 hover:text-neutral-900 bg-white border border-neutral-200 dark:border-neutral-600 dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-50 dark:bg-neutral-700 dark:hover:bg-neutral-600',
+    primary: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600',
+    purple: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500',
+    red: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600',
+    yellow: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400',
+    none: ''
+  };
+
+  const sizeClasses = {
+    xs: 'px-3 py-2 text-xs',
+    sm: 'px-4 py-2 text-sm',
+    md: 'px-5 py-2.5 text-sm',
+    lg: 'px-5 py-3 text-base',
+    xl: 'px-6 py-3.5 text-base'
+  };
+
+  const hasBorder = () => outline || color === 'alternative' || color === 'light';
+
+  let buttonClass: string;
+  $: buttonClass = twMerge('transition-colors text-center font-medium', group ? 'focus-visible:ring-2' : 'focus-visible:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? 'dark:bg-neutral-700 dark:text-white dark:border-neutral-700 dark:hover:border-neutral-600 dark:hover:bg-neutral-600' : 'dark:bg-transparent dark:border-neutral-600 dark:hover:border-neutral-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-neutral-400 dark:border-neutral-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+</script>
+
+<svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} tabindex=0 on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
+  <slot />
+</svelte:element>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let pill: boolean = false;
+@prop export let outline: boolean = false;
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+@prop export let href: string | undefined = undefined;
+@prop export let type: ButtonType = 'button';
+@prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+@prop export let shadow: boolean = false;
+-->

package/dist/elements/buttons/Button.svelte.d.ts

@@ -0,0 +1,58 @@
+import type { ButtonType } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let pill: boolean = false;
+ * @prop export let outline: boolean = false;
+ * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+ * @prop export let href: string | undefined = undefined;
+ * @prop export let type: ButtonType = 'button';
+ * @prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+ * @prop export let shadow: boolean = false;
+ */
+declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    pill?: boolean | undefined;
+    outline?: boolean | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    href?: string | undefined | undefined;
+    type?: ButtonType | undefined;
+    color?: ("primary" | "red" | "yellow" | "green" | "blue" | "purple" | "dark" | "none" | "alternative" | "light") | undefined;
+    shadow?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    click: MouseEvent;
+    change: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    touchstart: TouchEvent;
+    touchend: TouchEvent;
+    touchcancel: TouchEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;