flowbite-svelte 0.27.15 → 0.27.16

package/carousels/Thumbnail.svelte

@@ -0,0 +1,23 @@
+<script>export let thumbImg = '';
+export let altTag = '';
+export let titleLink = '';
+export let id;
+export let thumbWidth;
+export let selected = false;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<img
+  class="opacity-40"
+  class:active={selected}
+  id={id.toString()}
+  src={thumbImg}
+  alt={altTag}
+  title="Image from {titleLink}"
+  on:click
+  width="{thumbWidth}%" />
+
+<style>
+  .active {
+    opacity: 1;
+  }</style>

package/carousels/Thumbnail.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        thumbImg?: string | undefined;
+        altTag?: string | undefined;
+        titleLink?: string | undefined;
+        id: number;
+        thumbWidth: number;
+        selected?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ThumbnailProps = typeof __propDef.props;
+export declare type ThumbnailEvents = typeof __propDef.events;
+export declare type ThumbnailSlots = typeof __propDef.slots;
+export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+}
+export {};

package/darkmode/DarkMode.svelte

@@ -0,0 +1,34 @@
+<script>export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
+const toggleTheme = () => {
+    const isDark = window.document.documentElement.classList.toggle('dark');
+    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
+};
+</script>
+
+<svelte:head>
+  <script>
+    if (window) {
+      localStorage.getItem('color-theme') === 'dark' ||
+      (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        ? window.document.documentElement.classList.add('dark')
+        : window.document.documentElement.classList.remove('dark');
+    }
+  </script>
+</svelte:head>
+
+<button on:click={toggleTheme} aria-label="Dark mode" type="button" class={btnClass}>
+  <span class="hidden dark:block">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+  0 100-2H3a1 1 0 000 2h1z"
+        fill-rule="evenodd"
+        clip-rule="evenodd" />
+    </svg>
+  </span>
+  <span class="dark:hidden">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+    </svg>
+  </span>
+</button>

package/darkmode/DarkMode.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        btnClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DarkModeProps = typeof __propDef.props;
+export declare type DarkModeEvents = typeof __propDef.events;
+export declare type DarkModeSlots = typeof __propDef.slots;
+export default class DarkMode extends SvelteComponentTyped<DarkModeProps, DarkModeEvents, DarkModeSlots> {
+}
+export {};

package/datepicker/Calender.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  CalenderProps */
+/** @typedef {typeof __propDef.events}  CalenderEvents */
+/** @typedef {typeof __propDef.slots}  CalenderSlots */
+export default class Calender extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CalenderProps = typeof __propDef.props;
+export type CalenderEvents = typeof __propDef.events;
+export type CalenderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/datepicker/Datepicker.svelte

@@ -0,0 +1,70 @@
+<script>import Calendar from './Calender.svelte';
+export let range = false;
+// autoHide not working
+// export let autoHide: boolean = false;
+export let datepickerButtons = false;
+export let datepickerFormat = 'mm/dd/yyyy';
+export let datepickerOrientation = 'bottom';
+export let datepickerTitle = 'Flowbite datepicker';
+export let attribute = '';
+export let inputClass = 'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+$: setAttribute = (node, params) => {
+    node.setAttribute(params, '');
+};
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.1/dist/flowbite.min.css" />
+	<script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
+</svelte:head>
+
+{#if range}
+	<div date-rangepicker class="flex items-center">
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="start" type="text" class={inputClass} placeholder="Select date start" />
+		</div>
+		<span class="mx-4 text-gray-500">to</span>
+		<div class="relative">
+			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+				<Calendar />
+			</div>
+			<input name="end" type="text" class={inputClass} placeholder="Select date end" />
+		</div>
+	</div>
+{:else}
+	<div class="relative">
+		<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+			<Calendar />
+		</div>
+		{#if datepickerButtons}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-buttons
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{:else}
+			<input
+				{...$$restProps}
+				datepicker
+				datepicker-format={datepickerFormat}
+				datepicker-orientation={datepickerOrientation}
+				datepicker-title={datepickerTitle}
+				use:setAttribute={attribute}
+				type="text"
+				class={inputClass}
+				placeholder="Select date"
+			/>
+		{/if}
+		<slot />
+	</div>
+{/if}

package/datepicker/Datepicker.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        range?: boolean | undefined;
+        datepickerButtons?: boolean | undefined;
+        datepickerFormat?: string | undefined;
+        datepickerOrientation?: string | undefined;
+        datepickerTitle?: string | undefined;
+        attribute?: string | undefined;
+        inputClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DatepickerProps = typeof __propDef.props;
+export declare type DatepickerEvents = typeof __propDef.events;
+export declare type DatepickerSlots = typeof __propDef.slots;
+export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
+}
+export {};

package/drawer/Drawer.svelte

@@ -0,0 +1,74 @@
+<script>import classNames from 'classnames';
+import { fly, slide, blur, fade } from 'svelte/transition';
+import { clickOutside } from '../utils/clickOutside';
+export let activateClickOutside = true;
+export let hidden = true;
+export let position = 'fixed';
+export let leftOffset = 'inset-y-0 left-0';
+export let rightOffset = 'inset-y-0 right-0';
+export let topOffset = 'inset-x-0 top-0';
+export let bottomOffset = 'inset-x-0 bottom-0';
+export let width = 'w-80';
+export let backdrop = true;
+export let bgColor = 'bg-gray-900';
+export let bgOpacity = 'bg-opacity-75';
+export let placement = 'left';
+export let id = 'drawer-example';
+export let divClass = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+export let transitionParams = {};
+export let transitionType = 'fly';
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fade':
+            return fade(node, params);
+        default:
+            return fly(node, params);
+    }
+}
+const placements = {
+    left: leftOffset,
+    right: rightOffset,
+    top: topOffset,
+    bottom: bottomOffset
+};
+const handleDrawer = () => {
+    hidden = !hidden;
+};
+let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
+</script>
+
+{#if !hidden}
+  {#if backdrop && activateClickOutside}
+    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+  {:else if backdrop && !activateClickOutside}
+    <div role="presentation" class={backdropDivClass} />
+  {/if}
+  {#if activateClickOutside}
+    <div
+      use:clickOutside={() => !hidden && handleDrawer()}
+      {id}
+      {...$$restProps}
+      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      transition:multiple={transitionParams}
+      tabindex="-1"
+      aria-controls={id}
+      aria-labelledby={id}>
+      <slot {hidden} />
+    </div>
+  {:else}
+    <div
+      {id}
+      {...$$restProps}
+      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      transition:multiple={transitionParams}
+      tabindex="-1"
+      aria-controls={id}
+      aria-labelledby={id}>
+      <slot {hidden} />
+    </div>
+  {/if}
+{/if}

package/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        activateClickOutside?: boolean | undefined;
+        hidden?: boolean | undefined;
+        position?: "fixed" | "absolute" | undefined;
+        leftOffset?: string | undefined;
+        rightOffset?: string | undefined;
+        topOffset?: string | undefined;
+        bottomOffset?: string | undefined;
+        width?: string | undefined;
+        backdrop?: boolean | undefined;
+        bgColor?: string | undefined;
+        bgOpacity?: string | undefined;
+        placement?: "top" | "bottom" | "left" | "right" | undefined;
+        id?: string | undefined;
+        divClass?: string | undefined;
+        transitionParams?: drawerTransitionParamTypes | undefined;
+        transitionType?: drawerTransitionTypes;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            hidden: boolean;
+        };
+    };
+};
+export declare type DrawerProps = typeof __propDef.props;
+export declare type DrawerEvents = typeof __propDef.events;
+export declare type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/dropdowns/Dropdown.svelte

@@ -0,0 +1,32 @@
+<script>import classNames from 'classnames';
+import Popper from '../utils/Popper.svelte';
+export let open = false;
+export let frameClass = '';
+$: {
+    // set default values
+    $$restProps.arrow = $$restProps.arrow ?? false;
+    $$restProps.trigger = $$restProps.trigger ?? 'click';
+    $$restProps.placement = $$restProps.placement ?? 'bottom';
+    $$restProps.color = $$restProps.color ?? 'dropdown';
+    $$restProps.shadow = $$restProps.shadow ?? true;
+    $$restProps.rounded = $$restProps.rounded ?? true;
+}
+let popoverClass;
+$: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
+</script>
+
+<Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
+  {#if $$slots.header}
+    <div class="py-1 overflow-hidden rounded-t">
+      <slot name="header" />
+    </div>
+  {/if}
+  <ul class={$$props.class ?? 'py-1 w-44'}>
+    <slot />
+  </ul>
+  {#if $$slots.footer}
+    <div class="py-1  overflow-hidden rounded-b">
+      <slot name="footer" />
+    </div>
+  {/if}
+</Popper>

package/dropdowns/Dropdown.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean | undefined;
+        frameClass?: string | undefined;
+    };
+    events: {
+        show: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+    };
+};
+export declare type DropdownProps = typeof __propDef.props;
+export declare type DropdownEvents = typeof __propDef.events;
+export declare type DropdownSlots = typeof __propDef.slots;
+export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+}
+export {};

package/dropdowns/DropdownDivider.svelte

@@ -0,0 +1,5 @@
+<script>import classNames from 'classnames';
+export let divClass = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+</script>
+
+<div {...$$restProps} class={classNames(divClass, $$props.class)} />

package/dropdowns/DropdownDivider.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type DropdownDividerProps = typeof __propDef.props;
+export declare type DropdownDividerEvents = typeof __propDef.events;
+export declare type DropdownDividerSlots = typeof __propDef.slots;
+export default class DropdownDivider extends SvelteComponentTyped<DropdownDividerProps, DropdownDividerEvents, DropdownDividerSlots> {
+}
+export {};

package/dropdowns/DropdownHeader.svelte

@@ -0,0 +1,13 @@
+<script>import classNames from 'classnames';
+import DropdownDivider from './DropdownDivider.svelte';
+export let divClass = 'py-2 px-4 text-gray-700 dark:text-white';
+// 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200';
+export let divider = true;
+</script>
+
+<div {...$$restProps} class={classNames(divClass, $$props.class)}>
+	<slot />
+</div>
+{#if divider}
+	<DropdownDivider />
+{/if}

package/dropdowns/DropdownHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        divClass?: string | undefined;
+        divider?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DropdownHeaderProps = typeof __propDef.props;
+export declare type DropdownHeaderEvents = typeof __propDef.events;
+export declare type DropdownHeaderSlots = typeof __propDef.slots;
+export default class DropdownHeader extends SvelteComponentTyped<DropdownHeaderProps, DropdownHeaderEvents, DropdownHeaderSlots> {
+}
+export {};

package/dropdowns/DropdownItem.svelte

@@ -0,0 +1,29 @@
+<script>import Wrapper from '../utils/Wrapper.svelte';
+import classNames from 'classnames';
+export let defaultClass = 'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
+export let href = undefined;
+let liClass;
+$: liClass = classNames(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
+let wrap = true;
+function init(node) {
+    wrap = node.parentElement?.tagName === 'UL';
+}
+</script>
+
+<Wrapper tag="li" show={wrap} use={init}>
+  <svelte:element
+    this={href ? 'a' : 'button'}
+    {href}
+    {...$$restProps}
+    class={liClass}
+    on:click
+    on:change
+    on:keydown
+    on:keyup
+    on:focus
+    on:blur
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </svelte:element>
+</Wrapper>

package/dropdowns/DropdownItem.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        defaultClass?: string | undefined;
+        href?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        change: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type DropdownItemProps = typeof __propDef.props;
+export declare type DropdownItemEvents = typeof __propDef.events;
+export declare type DropdownItemSlots = typeof __propDef.slots;
+export default class DropdownItem extends SvelteComponentTyped<DropdownItemProps, DropdownItemEvents, DropdownItemSlots> {
+}
+export {};

package/footer/Footer.svelte

@@ -0,0 +1,21 @@
+<script>import classNames from 'classnames';
+export let customClass = '';
+export let footerType = 'default';
+// using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
+</script>
+
+<footer
+  {...$$restProps}
+  class={classNames(
+    {
+      'bg-gray-800': footerType === 'sitemap',
+      'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
+      'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
+      'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
+        footerType === 'default',
+      [`${customClass}`]: footerType === 'custom'
+    },
+    $$props.class
+  )}>
+  <slot />
+</footer>

package/footer/Footer.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        customClass?: string | undefined;
+        footerType?: "default" | "custom" | "sitemap" | "logo" | "socialmedia" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterProps = typeof __propDef.props;
+export declare type FooterEvents = typeof __propDef.events;
+export declare type FooterSlots = typeof __propDef.slots;
+export default class Footer extends SvelteComponentTyped<FooterProps, FooterEvents, FooterSlots> {
+}
+export {};

package/footer/FooterBrand.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let aClass = 'flex items-center';
+export let spanClass = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+export let imgClass = 'mr-3 h-8';
+export let href = '';
+export let src = '';
+export let alt = '';
+export let name = '';
+export let target = undefined;
+</script>
+
+{#if href}
+  <a {...$$restProps} {href} {target} class={classNames(aClass, $$props.class)}>
+    <img {src} class={imgClass} {alt} />
+    <span class={spanClass}>{name}</span>
+    <slot />
+  </a>
+{:else}
+  <img {...$$restProps} {src} class={imgClass} {alt} />
+{/if}

package/footer/FooterBrand.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        aClass?: string | undefined;
+        spanClass?: string | undefined;
+        imgClass?: string | undefined;
+        href?: string | undefined;
+        src?: string | undefined;
+        alt?: string | undefined;
+        name?: string | undefined;
+        target?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FooterBrandProps = typeof __propDef.props;
+export declare type FooterBrandEvents = typeof __propDef.events;
+export declare type FooterBrandSlots = typeof __propDef.slots;
+export default class FooterBrand extends SvelteComponentTyped<FooterBrandProps, FooterBrandEvents, FooterBrandSlots> {
+}
+export {};

package/footer/FooterCopyright.svelte

@@ -0,0 +1,20 @@
+<script>import classNames from 'classnames';
+export let spanClass = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
+export let aClass = 'hover:underline';
+export let year = new Date().getFullYear();
+export let href = '';
+export let by = '';
+export let target = undefined;
+</script>
+
+<span class={classNames(spanClass, $$props.class)}>
+  &copy; {year}
+  {#if href}
+    <a {...$$restProps} {href} {target} class={aClass}>
+      {by}
+    </a>
+  {:else}
+    <span class="ml-1">{by}</span>
+  {/if}
+  . All Rights Reserved.
+</span>

package/footer/FooterCopyright.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        spanClass?: string | undefined;
+        aClass?: string | undefined;
+        year?: number | undefined;
+        href?: string | undefined;
+        by?: string | undefined;
+        target?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FooterCopyrightProps = typeof __propDef.props;
+export declare type FooterCopyrightEvents = typeof __propDef.events;
+export declare type FooterCopyrightSlots = typeof __propDef.slots;
+export default class FooterCopyright extends SvelteComponentTyped<FooterCopyrightProps, FooterCopyrightEvents, FooterCopyrightSlots> {
+}
+export {};

package/footer/FooterIcon.svelte

@@ -0,0 +1,14 @@
+<script>import classNames from 'classnames';
+export let href = '';
+export let ariaLabel = '';
+export let aClass = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
+export let target = undefined;
+</script>
+
+{#if href}
+  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
+    <slot />
+  </a>
+{:else}
+  <slot />
+{/if}