flowbite-svelte 0.44.11 → 0.44.13

package/CONTRIBUTING.md

@@ -1,66 +0,0 @@
-# How to Contribute
-
-Here are some guidelines we'd like you to follow before submitting a PR.
-
-## Frontend pages
-
-<p><a href="https://tailwindcss.com/docs/content-configuration#dynamic-class-names">Tailwind warns</a> that you don't construct class names dynamically. Instead of this:</p>
-
-```html
-<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
-```
-
-### Always use complete class names:
-
-```html
-<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
-```
-
-## Types and Props
-
-Please add a type to `export`ed variables. When we generate props files, it will automatically pick up types from your file. If you don't add a type, it will break.
-
-Please run the following to update prop files.
-
-```sh
-npm run gen:props
-```
-
-This script will update/generate files in `src/routes/props`.
-
-Again avoid type inference for `export`ed variables.
-
-Please put all export variables before functions to avoid breaking props tables.
-
-## One or two at a time
-
-Please don't send a large amount of changes at once. It takes time to go through all changes. It is easier to check and update the repo asap.
-
-## Conventional commit
-
-<p>When making a commit, we recommend using <a href="https://www.conventionalcommits.org/en/v1.0.0/">the Conventional commits</a>.</p>
-
-Some examples are:
-
-```sh
-feat: add rating component
-fix: add if statement to Button component
-chore: clean up About page
-docs: add timeline page
-style: update home page
-test: add modal test
-```
-
-When you have a breaking change:
-
-```
-git commit -a "feat: change btnClass name to bClass" -m "BREAKING CHANGE: change the Button component attributes"
-```
-
-## Testing
-
-<p>Before submitting a PR, please run a test:</p>
-
-```sh
-npm run test
-```

package/mdsvex.config.js

@@ -1,18 +0,0 @@
-import { defineMDSveXConfig as defineConfig } from 'mdsvex';
-import examples from 'mdsvexamples';
-
-const config = defineConfig({
-  layout: {
-    componentLayout: './src/routes/layouts/component/+page.svelte'
-  },
-  extensions: ['.svelte.md', '.md', '.svx'],
-
-  smartypants: {
-    dashes: 'oldschool'
-  },
-
-  remarkPlugins: [[examples, { defaults: { Wrapper: '/src/routes/utils/ExampleWrapper.svelte' } }]],
-  rehypePlugins: []
-});
-
-export default config;

package/playwright.config.ts

@@ -1,12 +0,0 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-
-const config: PlaywrightTestConfig = {
-  testDir: './tests/',
-  webServer: {
-    command: 'npm run build && npm run preview',
-    timeout: 240000,
-    port: 4173
-  }
-};
-
-export default config;

package/postcss.config.cjs

@@ -1,12 +0,0 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
-
-const config = {
-  plugins: [
-    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
-    tailwindcss(), //But others, like autoprefixer, need to run after,
-    autoprefixer
-  ]
-};
-
-module.exports = config;

package/src/app.css

@@ -1,45 +0,0 @@
-@import '../static/styles/docs.css';
-@import '../node_modules/flowbite/dist/flowbite.css';
-
-/* Write your global styles here, in PostCSS syntax */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  html {
-    -webkit-text-size-adjust: 100%;
-    font-family:
-      Inter,
-      ui-sans-serif,
-      system-ui,
-      -apple-system,
-      Segoe UI,
-      Roboto,
-      Helvetica Neue,
-      Arial,
-      Noto Sans,
-      sans-serif,
-      Apple Color Emoji,
-      Segoe UI Emoji,
-      Segoe UI Symbol,
-      Noto Color Emoji;
-    line-height: 1.5;
-    -moz-tab-size: 4;
-    tab-size: 4;
-  }
-
-  .related-components,
-  .references {
-    @apply w-full flex flex-wrap;
-  }
-
-  .related-components p,
-  .references p {
-    @apply w-full md:w-1/2 lg:w-1/3;
-  }
-
-  #mainContent > pre {
-    @apply text-sm rounded-xl overflow-auto w-full my-4 mx-auto bg-gradient-to-r text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-2 sm:p-6;
-  }
-}

package/src/app.d.ts

@@ -1,9 +0,0 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-  // interface Locals {}
-  // interface PageData {}
-  // interface Error {}
-  // interface Platform {}
-}

package/src/app.html

@@ -1,28 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-
-    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
-    <link rel="icon" type="image/png" href="/images/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- Google fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
-
-    <!-- Fathom - beautiful, simple website analytics -->
-    <script src="https://cdn.usefathom.com/script.js" data-site="DDUWRXWI" defer></script>
-    <!-- / Fathom -->
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
-    %sveltekit.head%
-  </head>
-
-  <body data-sveltekit-preload-data class="bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 antialiased">
-    <div id="svelte" class="max-h-screen overflow-auto relative w-full">%sveltekit.body%</div>
-    <aside class="fixed z-50 hidden right-5 bottom-5 sm:block">
-      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEAIC53I&placement=flowbite-sveltecom" id="_carbonads_js"></script>
-    </aside>
-  </body>
-</html>

package/src/app.postcss

@@ -1,55 +0,0 @@
-/* Write your global styles here, in PostCSS syntax */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-pre {
-  background-color: rgb(242, 242, 242);
-  white-space: pre-wrap;
-  width: 100%;
-}
-
-@layer base {
-  html {
-    -webkit-text-size-adjust: 100%;
-    font-family:
-      Inter,
-      ui-sans-serif,
-      system-ui,
-      -apple-system,
-      Segoe UI,
-      Roboto,
-      Helvetica Neue,
-      Arial,
-      Noto Sans,
-      sans-serif,
-      Apple Color Emoji,
-      Segoe UI Emoji,
-      Segoe UI Symbol,
-      Noto Color Emoji;
-    line-height: 1.5;
-    -moz-tab-size: 4;
-    tab-size: 4;
-  }
-
-  /* Do not change these. Changing this affect components as well */
-  main p {
-    @apply text-gray-900 dark:text-white;
-  }
-
-  .related-components,
-  .references {
-    @apply w-full flex flex-wrap;
-  }
-
-  .related-components p,
-  .references p {
-    @apply w-full md:w-1/2 lg:w-1/3;
-  }
-
-  main p > code,
-  main ul > li > code,
-  main ol > li > code {
-    @apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400 whitespace-nowrap;
-  }
-}

package/src/hooks.server.js

@@ -1,27 +0,0 @@
-// vite function to get all md files from components dir
-const allFiles = [import.meta.glob('/src/routes/docs/components/*.md'), import.meta.glob('/src/routes/docs/forms/*.md'), import.meta.glob('/src/routes/docs/plugins/*.md'), import.meta.glob('/src/routes/docs/typography/*.md'), import.meta.glob('/src/routes/docs/examples/*.md'), import.meta.glob('/src/routes/docs/utilities/*.md'), import.meta.glob('/src/routes/docs/pages/*.md'), import.meta.glob('/src/routes/docs/extend/*.md'), import.meta.glob('/src/routes/docs/experimental/*.md')]
-  .flatMap(Object.keys)
-  .map((x) => x.replace(/\.[^/.]+$/, ''))
-  .map((x) => x.split('/').slice(-2));
-
-// list of directories that do not require redirection check
-const dirsToSkip = ['/docs/', '/blocks/', '/api/'];
-
-/** @type {import('@sveltejs/kit').Handle} */
-export const handle = async ({ event, resolve }) => {
-  const pathname = event.url.pathname;
-
-  if (pathname !== '/' && !dirsToSkip.some((x) => pathname.startsWith(x))) {
-    const parts = pathname.split('/'),
-      file = parts.pop(),
-      dir = parts.slice(1).join('/');
-
-    // needs to check redirections
-    for (const [key, value] of allFiles) {
-      if (value !== file) continue;
-
-      if (dir === '' || dir === key) return Response.redirect(`${event.url.origin}/docs/${key}/${value}`, 301);
-    }
-  }
-  return await resolve(event);
-};

package/src/lib/accordion/Accordion.svelte

@@ -1,61 +0,0 @@
-<script context="module" lang="ts">
-  import { writable, type Writable } from 'svelte/store';
-
-  export interface AccordionCtxType {
-    flush: boolean;
-    activeClass: string;
-    inactiveClass: string;
-    selected?: Writable<object>;
-    classActive?: string;
-    classInactive?: string;
-  }
-</script>
-
-<script lang="ts">
-  import Frame from '$lib/utils/Frame.svelte';
-  import { twMerge } from 'tailwind-merge';
-  import { setContext, type ComponentProps } from 'svelte';
-
-  interface $$Props extends ComponentProps<Frame> {
-    multiple?: boolean;
-    flush?: boolean;
-    activeClass?: string;
-    inactiveClass?: string;
-    defaultClass?: string;
-    classActive?: string;
-    classInactive?: string;
-  }
-
-  export let multiple: boolean = false;
-  export let flush: boolean = false;
-  export let activeClass: string = '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 inactiveClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
-  export let defaultClass: string = 'text-gray-500 dark:text-gray-400';
-
-  const ctx: AccordionCtxType = {
-    flush,
-    activeClass: twMerge(activeClass, $$props.classActive),
-    inactiveClass: twMerge(inactiveClass, $$props.classInactive),
-    selected: multiple ? undefined : writable()
-  };
-
-  setContext<AccordionCtxType>('ctx', ctx);
-
-  let frameClass: string;
-  $: frameClass = twMerge(defaultClass, $$props.class);
-</script>
-
-<Frame {...$$restProps} class={frameClass} color="none">
-  <slot />
-</Frame>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let multiple: boolean = false;
-@prop export let flush: boolean = false;
-@prop export let activeClass: string = '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';
-@prop export let inactiveClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
-@prop export let defaultClass: string = 'text-gray-500 dark:text-gray-400';
--->

package/src/lib/accordion/AccordionItem.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { getContext, onMount } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { fade, blur, fly, slide } from 'svelte/transition';
-  import type { TransitionTypes, TransitionParamTypes } from '../types';
-  import type { AccordionCtxType } from './Accordion.svelte';
-
-  export let open: boolean = false;
-  export let activeClass: string | undefined = undefined;
-  export let inactiveClass: string | undefined = undefined;
-  export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
-  export let transitionType: TransitionTypes = 'slide';
-  export let transitionParams: TransitionParamTypes = {};
-  export let paddingFlush: string = 'py-5';
-  export let paddingDefault: string = 'p-5';
-  export let textFlushOpen: string = 'text-gray-900 dark:text-white';
-  export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
-  export let borderClass: string = 'border-l border-r group-first:border-t';
-  export let borderOpenClass: string = 'border-l border-r';
-  export let borderBottomClass: string = 'border-b';
-  export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
-
-  export let classActive: string | undefined = undefined;
-  export let classInactive: string | undefined = undefined;
-
-  let activeCls = twMerge(activeClass, classActive);
-  let inactiveCls = twMerge(inactiveClass, classInactive);
-
-  // make a custom transition function that returns the desired transition
-  const multiple = (node: HTMLElement, params: any) => {
-    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<AccordionCtxType>('ctx') ?? {};
-
-  // single selection
-  const self = {};
-  const selected = ctx.selected ?? writable();
-
-  let _open: boolean = open;
-  open = false;
-
-  onMount(() => {
-    if (_open) $selected = self;
-
-    // this will trigger unsubscribe on destroy
-    return selected.subscribe((x) => (open = x === self));
-  });
-
-  const handleToggle = (_: Event) => selected.set(open ? {} : self);
-
-  let buttonClass: string;
-  $: buttonClass = twMerge([defaultClass, ctx.flush || borderClass, borderBottomClass, borderSharedClass, ctx.flush ? paddingFlush : paddingDefault, open && (ctx.flush ? textFlushOpen : activeCls || ctx.activeClass), !open && (ctx.flush ? textFlushDefault : inactiveCls || ctx.inactiveClass), $$props.class]);
-
-  $: contentClass = twMerge([ctx.flush ? paddingFlush : paddingDefault, ctx.flush ? '' : borderOpenClass, borderBottomClass, borderSharedClass]);
-</script>
-
-<h2 class="group">
-  <button on:click={handleToggle} type="button" class={buttonClass} aria-expanded={open}>
-    <slot name="header" />
-    {#if open}
-      <slot name="arrowup">
-        <svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
-        </svg>
-      </slot>
-    {:else}
-      <slot name="arrowdown">
-        <svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
-        </svg>
-      </slot>
-    {/if}
-  </button>
-</h2>
-{#if open}
-  <div transition:multiple={transitionParams}>
-    <div class={contentClass}>
-      <slot />
-    </div>
-  </div>
-{:else}
-  <div class="hidden">
-    <div class={contentClass}>
-      <slot />
-    </div>
-  </div>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let open: boolean = false;
-@prop export let activeClass: string | undefined = undefined;
-@prop export let inactiveClass: string | undefined = undefined;
-@prop export let defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
-@prop export let transitionType: TransitionTypes = 'slide';
-@prop export let transitionParams: TransitionParamTypes = {};
-@prop export let paddingFlush: string = 'py-5';
-@prop export let paddingDefault: string = 'p-5';
-@prop export let textFlushOpen: string = 'text-gray-900 dark:text-white';
-@prop export let textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
-@prop export let borderClass: string = 'border-l border-r group-first:border-t';
-@prop export let borderOpenClass: string = 'border-l border-r';
-@prop export let borderBottomClass: string = 'border-b';
-@prop export let borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
-@prop export let classActive: string | undefined = undefined;
-@prop export let classInactive: string | undefined = undefined;
--->

package/src/lib/alerts/Alert.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import { createEventDispatcher, type ComponentProps } from 'svelte';
-  import CloseButton from '../utils/CloseButton.svelte';
-  import Frame from '../utils/Frame.svelte';
-  import { fade } from 'svelte/transition';
-  import type { Dismissable } from '$lib/types';
-
-  interface $$Props extends ComponentProps<Frame>, Dismissable {}
-
-  export let dismissable: boolean = false;
-  export let defaultClass: string = 'p-4 gap-3 text-sm';
-
-  let open = true;
-  const dispatch = createEventDispatcher();
-  $: dispatch(open ? 'open' : 'close');
-
-  function close(e: MouseEvent) {
-    e.stopPropagation();
-    open = false;
-  }
-
-  let divClass: string;
-  $: divClass = twMerge(defaultClass, ($$slots.icon || dismissable) && 'flex items-center', $$props.class);
-
-  $: {
-    // set default values
-    $$restProps.color = $$restProps.color ?? 'primary';
-    $$restProps.rounded = $$restProps.rounded ?? true;
-    if (dismissable) $$restProps.transition = $$restProps.transition ?? fade;
-  }
-</script>
-
-{#if open}
-  <Frame {...$$restProps} class={divClass} role="alert">
-    {#if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-
-    {#if $$slots.icon || dismissable}
-      <div><slot /></div>
-    {:else}
-      <slot />
-    {/if}
-
-    {#if dismissable}
-      <slot name="close-button" {close}>
-        <CloseButton class="-my-1.5 dark:hover:bg-gray-700" color={$$restProps.color} on:click={close} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave />
-      </slot>
-    {/if}
-  </Frame>
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let dismissable: boolean = false;
-@prop export let defaultClass: string = 'p-4 gap-3 text-sm';
--->

package/src/lib/avatar/Avatar.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  import AvatarPlaceholder from './Placeholder.svelte';
-  import Indicator from '$lib/indicators/Indicator.svelte';
-
-  export let src: string = '';
-  export let href: string | undefined = undefined;
-  export let rounded: boolean = false;
-  export let border: boolean = false;
-  export let stacked: boolean = false;
-  export let dot: object | undefined = undefined;
-  export let alt: string = '';
-  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-
-  $: dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
-
-  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: string;
-  $: avatarClass = twMerge(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>
-
-{#if !src || !!href || $$slots.default || dot}
-  <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class="relative flex justify-center items-center {avatarClass}">
-    {#if src}
-      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
-    {:else}
-      <slot><AvatarPlaceholder {rounded} class={twMerge($$props.classPlaceholder)} /></slot>
-    {/if}
-    {#if dot}
-      <Indicator border offset={rounded} {...dot} />
-    {/if}
-  </svelte:element>
-{:else}
-  <img {alt} {src} {...$$restProps} class={avatarClass} />
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let src: string = '';
-@prop export let href: string | undefined = undefined;
-@prop export let rounded: boolean = false;
-@prop export let border: boolean = false;
-@prop export let stacked: boolean = false;
-@prop export let dot: object | undefined = undefined;
-@prop export let alt: string = '';
-@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
--->

package/src/lib/avatar/Placeholder.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { twMerge } from 'tailwind-merge';
-  export let rounded: boolean = false;
-  let svgClass: string = twMerge('text-gray-400 bg-gray-100 dark:bg-gray-600', rounded ? 'rounded' : 'rounded-full', $$props.class);
-</script>
-
-<svg class={svgClass} 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>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Props
-@prop export let rounded: boolean = false;
--->