flowbite-svelte 0.44.11 → 0.44.13

package/src/routes/docs/experimental/datepicker.md

@@ -1,131 +0,0 @@
----
-layout: componentLayout
-title: Svelte Datepicker - Flowbite
-breadcrumb_title: Svelte Datepicker
-component_title: Datepicker
-dir: Experimental
-description: Start receiving date and time data from your users using this free datepicker element based on Tailwind utility-classes and vanilla JavaScript
-thumnailSize: w-28
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { Alert } from '$lib'
-
-  const components = 'Datepicker'
-</script>
-
-Date picker component
-
-<div class="p-8">
-    <Alert color="red">
-        <span class="font-medium">⚠️ Datepicker component is experimental and only works with SvelteKit.</span>
-    </Alert>
-</div>
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-```
-
-### Use rel="external"
-
-This component is importing Flowbite datepicker javascript in the `svelte:head` section. When you are linking to a page using this component, use `rel="external"`.
-
-## Datepicker example
-
-Use the following example of an input element to create a datepicker component. All you need to do is to add the datepicker data attribute to any input element.
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-
-<Datepicker />
-```
-
-## Name and other attributes
-
-The component has `$$restProps` attributes that can be used to pass any other attribute.
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-
-<Datepicker name="start" />
-```
-
-## Date range picker
-
-Use the `range` prop and the following markup to initialize two datepickers as a range.
-
-The range picker has input name of `start` and `end`.
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-
-<Datepicker range />
-```
-
-## Action buttons
-
-By adding the `datepickerButtons` prop you will enable the today and clear buttons with the following features:
-
-- Clicking on the today button will browse back to the current day/month/year
-- Clicking on the clear button will reset all selections
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-
-<Datepicker datepickerButtons />
-```
-
-## Date format
-
-If you want to use a custom format such as mm/dd/yyyythen you can use the `datepickerFormat="format"` prop to change it.
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-
-<Datepicker datepickerFormat="dd/mm/yyyy" />
-```
-
-## Orientation
-
-You can override the default positioning algorithm by using the `datepickerOrientation="top | right | bottom | left"` prop. You can even combine right with bottom or left with top.
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-
-<Datepicker datepickerOrientation="bottom right" />
-```
-
-## Title
-
-You can also add a title to the datepicker by using the `datepicker-title="title"` prop.
-
-```svelte example hideOutput
-<script>
-  import { Datepicker } from 'flowbite-svelte';
-</script>
-
-<Datepicker datepickerTitle="My Vacation" />
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-<CompoAttributesViewer {components}/>

package/src/routes/docs/extend/CheckCircle.svelte

@@ -1,3 +0,0 @@
-<svg class="w-4 h-4 mr-1.5 text-green-500 dark:text-green-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-</svg>

package/src/routes/docs/extend/[slug]/+page.js

@@ -1,13 +0,0 @@
-// src/routes/components/[slug]/+page.js
-/** @type {import('./$types').PageLoad} */
-export async function load({ params }) {
-  const post = await import(`../${params.slug}.md`);
-  const { title, dir } = post.metadata;
-  const content = post.default;
-
-  return {
-    content,
-    title,
-    dir
-  };
-}

package/src/routes/docs/extend/[slug]/+page.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-  import type { PageData } from './$types';
-  export let data: PageData;
-</script>
-
-<svelte:component this={data.content} />

package/src/routes/docs/extend/flowbite-svelte-blocks.md

@@ -1,28 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: Flowbite Svelte Blocks
-title: Flowbite Svelte Blocks
-component_title: Block Sections
-dir: Extend
-description: Flowbite-Svete-Blocks provides all necessary components to get started quickly
----
-
-<script>
-  import { A, List, Li, Img} from '$lib'
-  
-  const libFiles ={
-  "GitHub Repo": "https://github.com/shinokada/flowbite-svelte-blocks",
-  Docs: "https://shinokada.github.io/flowbite-svelte-blocks/",
-  Demo: "https://flowbite-svelte-blocks.vercel.app/"
-  }
-</script>
-
-## Installation
-
-After installing Flowbite-Svelte, run the following to install Flowbite-Svelte-Blocks:
-
-```sh
-npm i -D shinokada/flowbite-svelte-blocks
-```
-
-<Img src="/images/flowbite-svelte-blocks-optimized.png" alt="Flowbite Svelte Blocks" />

package/src/routes/docs/extend/flowbite-svelte-starter.md

@@ -1,34 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: Flowbite Svelte Starters
-title: Flowbite Svelte Starters
-component_title: Starter Kit
-dir: Extend
-description: Flowbite Svete Starters provide all necessary components to get started quickly
----
-
-<script>
-  import { A, List, Li } from '$lib'
-  
-</script>
-
-## Flowbite Svelte starter
-
-<List tag="ul" class="space-y-1 my-4">
-  <Li><A href="https://github.com/shinokada/flowbite-svelte-starter">GitHub Repo</A></Li>
-  <Li><A href="https://flowbite-svelte-starter.vercel.app/">Demo</A></Li>
-</List>
-
-## Svelte starter
-
-<List tag="ul" class="space-y-1 my-4">
-  <Li><A href="https://github.com/shinokada/svelte-starter">GitHub Repo</A></Li>
-  <Li><A href="https://shinokada.github.io/svelte-starter/">Demo</A></Li>
-</List>
-
-## Svelte TS starter
-
-<List tag="ul" class="space-y-1 my-4">
-  <Li><A href="https://github.com/shinokada/svelte-ts-starter">GitHub Repo</A></Li>
-  <Li><A href="https://shinokada.github.io/svelte-ts-starter/">Demo</A></Li>
-</List>

package/src/routes/docs/extend/icons.md

@@ -1,204 +0,0 @@
----
-layout: componentLayout
-breadcrumb_title: Icons
-title: Svelte Icons - Flowbite
-component_title: Svelte Icons
-dir: Extend
-description: Get started with a collection of over 430+ open-source icons built for Svelte and Flowbite and a collection of other external icon libraries to build beautiful websites
----
-
-<script>
-  import { P, A, List, Li } from '$lib'
-  
-	import CheckCircle from './CheckCircle.svelte'
-</script>
-
-Instead of using generic SVG icons, you can start using a custom Svelte icon library such as the open-source collection of Flowbite Icons that includes over 450+ outline and solid styles and is already available to import as Svelte components inside your project.
-
-Check out the official [Flowbite Icons](https://flowbite.com/icons/) page and interface and learn how to install [Flowbite Svelte Icons](https://flowbite-svelte-icons.vercel.app/) inside your project by following the steps from this guide.
-
-## Installation
-
-To install the Flowbite Icons package in Svelte you need to set it up with NPM in your `package.json` file:
-
-```sh
-pnpm i -D flowbite-svelte-icons
-```
-
-## Usage example
-
-Inside a Svelte file import any of the icons like this:
-
-```html
-<script>
-  import { CalendarWeekSolid } from 'flowbite-svelte-icons';
-</script>
-
-<CalendarWeekSolid />
-```
-
-## Component data
-
-Check out the list of properties that you can use to customize and update the icons from Flowbite Svelte.
-
-### Outline
-
-- size: ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ = ‘md’;
-- role: string = ‘img’;
-- strokeLinecap: ‘round’ | ‘inherit’ | ‘butt’ | ‘square’ | null | undefined = ‘round’;
-- strokeLinejoin: ‘round’ | ‘inherit’ | ‘miter’ | ‘bevel’ | null | undefined = ‘round’;
-- strokeWidth = ‘2’;
-- ariaLabel = ‘icon file name’;
-
-### Solid
-
-- size: ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ = ‘md’;
-- role: string = ‘img’;
-- ariaLabel = ‘icon file name’;
-
-## IDE support
-
-If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, and an example.
-
-## Size
-
-The following table provides details about the available sizes for icons:
-
-| Size | CSS Classes |
-| ---- | ----------- |
-| xs   | ‘w-3 h-3’   |
-| sm   | ‘w-4 h-4’   |
-| md   | ‘w-5 h-6’   |
-| lg   | ‘w-6 h-6’   |
-| xl   | ‘w-8 h-8’   |
-
-To change the size of an icon, use the size prop and specify the desired size. For example:
-
-```html
-<AddressCardSolid size="md" />
-```
-
-If you want to override the preconfigured size, you can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:
-
-```html
-<AddressCardSolid class="h-24 w-24 text-blue-700 mr-4" />
-```
-
-## Creating a Default Global Icon Setting in Svelte
-
-Please see more details on the [docs](https://flowbite-svelte-icons.vercel.app/)
-
-## Tailwind CSS suport
-
-Use the `class` prop to change size, colors and add additional css.
-
-Here's an example of adding custom Tailwind CSS classes to an imported icon:
-
-```html
-<AddressCardSolid class="h-24 w-24 text-blue-700 mr-4" />
-```
-
-## Dark mode
-
-If you want to support dark mode for the icons you need to use the `dark` variant classes from Tailwind CSS.
-
-Here's an example of making the icon red in dark mode:
-
-```html
-<AddressCardSolid class="text-blue-700 dark:text-red-500" />
-```
-
-## aria-label
-
-All of the icons support `aria-label` for accessibilty - for example `BxAbacus` has `aria-label="bx abacus"`.
-
-Use `ariaLabel` prop to modify the `aria-label` value.
-
-```html
-<AddressCardSolid ariaLabel="address card solid" />
-```
-
-## Unfocusable icon
-
-If you want to make an icon unfocusable, add `tabindex="-1"`.
-
-```html
-<AddressCardSolid tabindex="-1" />
-```
-
-## Events
-
-All of the icons from this library have the following events that you can use for programming:
-
-- on:click
-- on:keydown
-- on:keyup
-- on:focus
-- on:blur
-- on:mouseenter
-- on:mouseleave
-- on:mouseover
-- on:mouseout
-
-## Passing down other attributes
-
-Here's an example of how you can pass an attribute:
-
-```html
-<AddressCardSolid tabindex="0" />
-```
-
-## Using svelte:component
-
-Here's an example how you can use `svelte:component` with Flowbite Icons in Svelte:
-
-```html
-<script>
-  import { AddressCardSolid } from 'flowbite-svelte-icons';
-</script>
-
-<svelte:component this="{AddressCardSolid}" />
-```
-
-## Using onMount
-
-Here's an example of how you can create the icon using `onMount` from Svelte:
-
-```html
-<script>
-  import { AddressCardSolid } from 'flowbite-svelte-icons';
-  import { onMount } from 'svelte';
-  const props = {
-    size: '50',
-    color: '#ff0000'
-  };
-  onMount(() => {
-    const icon = new AddressCardSolid({ target: document.body, props });
-  });
-</script>
-```
-
-## Import all
-
-Use `import * as Icon` from 'flowbite-svelte-icons..
-
-```html
-<script>
-  import * as Icon from 'flowbite-svelte-icons';
-</script>
-
-<Icon.AddressCardSolid />
-
-<h1>Size</h1>
-<Icon.AddressCardSolid size="30" />
-
-<h1>Tailwind CSS</h1>
-<Icon.AddressCardSolid class="text-blue-500" />
-```
-
-## Resources
-
-These icon sets have the same functionalities mentioned above.
-
-- [Flowbite Icons](https://flowbite.com/icons/) and [Flowbite Icons in Svelte](https://github.com/themesberg/flowbite-svelte-icons)
-- [Svelte Icon Sets](https://svelte-svg-icons.vercel.app/)

package/src/routes/docs/extend/step-indicator.md

@@ -1,162 +0,0 @@
----
-layout: componentLayout
-title: Svelte Step Indicator
-breadcrumb_title: Step Indicator
-component_title: Step Indicator
-dir: Extend
-description: Use the step indicator component to show the progress of a process.
----
-
-<script>
-  import {  TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { P, A } from '$lib'
-  const components = 'StepIndicator'
-</script>
-
-The Step Indicator component is a simple component to show the progress of a process. It can be used to show the progress of a multi-step form or a multi-step process.
-
-## Setup
-
-Import the `StepIndicator` component in a script tag.
-
-```svelte example hideOutput
-<script>
-  import { StepIndicator } from 'flowbite-svelte';
-</script>
-```
-
-## Default step indicator
-
-Use the following example of a step indicator element to show a progress of step 2 out of 5.
-
-```svelte example
-<script>
-  import { StepIndicator } from 'flowbite-svelte';
-  let currentStep = 2;
-  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-</script>
-
-<StepIndicator {currentStep} {steps} />
-```
-
-## Glow
-
-Use the `glow` prop to add a glow effect to the current step.
-
-```svelte example
-<script>
-  import { StepIndicator } from 'flowbite-svelte';
-  let currentStep = 2;
-  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-</script>
-
-<StepIndicator {currentStep} {steps} glow />
-```
-
-## Hide label
-
-Use the `hideLabel` prop to hide the label of the current step.
-
-```svelte example
-<script>
-  import { StepIndicator } from 'flowbite-svelte';
-  let currentStep = 2;
-  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-</script>
-
-<StepIndicator {currentStep} {steps} hideLabel />
-```
-
-## Sizes
-
-Use the `size` prop to change the size of a step indicator.
-
-```svelte example
-<script>
-  import { StepIndicator } from 'flowbite-svelte';
-  let currentStep = 2;
-  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-</script>
-
-<div class="my-4">
-  <div class="mb-1 text-base font-medium dark:text-white">Small</div>
-  <StepIndicator {currentStep} {steps} size="h-1.5" />
-</div>
-
-<div class="my-4">
-  <div class="mb-1 text-base font-medium dark:text-white">Default</div>
-  <StepIndicator {currentStep} {steps} size="h-2.5" />
-</div>
-
-<div class="my-4">
-  <div class="mb-1 text-lg font-medium dark:text-white">Large</div>
-  <StepIndicator {currentStep} {steps} size="h-4" />
-</div>
-
-<div class="my-4">
-  <div class="mb-1 text-lg font-medium dark:text-white">Extra Large</div>
-  <StepIndicator {currentStep} {steps} size="h-6" />
-</div>
-```
-
-## Colors
-
-Use the `color` prop to change the color of a step indicator.
-
-```svelte example
-<script>
-  import { StepIndicator } from 'flowbite-svelte';
-  let currentStep = 2;
-  let steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'];
-</script>
-
-<div class="my-4">
-  <div class="mb-1 text-base font-medium dark:text-white">Gray</div>
-  <StepIndicator {currentStep} {steps} color="gray" />
-</div>
-
-<div class="my-4">
-  <div class="mb-1 text-base font-medium text-blue-700 dark:text-blue-500">Blue/Default</div>
-  <StepIndicator {currentStep} {steps} color="blue" />
-</div>
-
-<div class="my-4">
-  <div class="mb-1 text-base font-medium text-red-700 dark:text-red-500">Red</div>
-  <StepIndicator {currentStep} {steps} color="red" />
-</div>
-
-<div class="my-4">
-  <div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">Green</div>
-  <StepIndicator {currentStep} {steps} color="green" />
-</div>
-
-<div class="mb-1 text-base font-medium text-yellow-700 dark:text-yellow-500">Yellow</div>
-<div class="my-4">
-  <StepIndicator {currentStep} {steps} color="yellow" />
-</div>
-
-<div class="mb-1 text-base font-medium text-indigo-700 dark:text-indigo-400">Indigo</div>
-<div class="my-4">
-  <StepIndicator {currentStep} {steps} color="indigo" />
-</div>
-
-<div class="mb-1 text-base font-medium text-purple-700 dark:text-purple-400">Purple</div>
-<div class="my-4">
-  <StepIndicator {currentStep} {steps} color="purple" />
-</div>
-
-<div class="mb-1 text-base font-medium text-pink-700 dark:text-pink-400">Pink</div>
-<div class="my-4">
-  <StepIndicator {currentStep} {steps} color="pink" />
-</div>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### StepIndicator styling
-
-- Use the `class` prop to overwrite the default class.
-
-<CompoAttributesViewer {components}/>

package/src/routes/docs/forms/[slug]/+page.js

@@ -1,13 +0,0 @@
-// src/routes/components/[slug]/+page.js
-/** @type {import('./$types').PageLoad} */
-export async function load({ params }) {
-  const post = await import(`../${params.slug}.md`);
-  const { title, dir } = post.metadata;
-  const content = post.default;
-
-  return {
-    content,
-    title,
-    dir
-  };
-}

package/src/routes/docs/forms/[slug]/+page.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-  import type { PageData } from './$types';
-  export let data: PageData;
-</script>
-
-<svelte:component this={data.content} />