flowbite-svelte 0.44.11 → 0.44.12

package/src/routes/docs/forms/select.md

@@ -1,280 +0,0 @@
----
-layout: componentLayout
-title: Svelte Select - Flowbite
-breadcrumb_title: Svelte Select
-component_title: Select
-dir: Forms
-description: Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
----
-
-<script>
-import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-import { Badge, A } from '$lib'
-const components = 'Select'
-</script>
-
-The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Select } from 'flowbite-svelte';
-</script>
-```
-
-## Select input example
-
-Get started with the default example of a select input component to get a single option selection.
-
-```svelte example
-<script>
-  import { Select, Label } from 'flowbite-svelte';
-  let selected;
-  let countries = [
-    { value: 'us', name: 'United States' },
-    { value: 'ca', name: 'Canada' },
-    { value: 'fr', name: 'France' }
-  ];
-</script>
-
-<Label>
-  Select an option
-  <Select class="mt-2" items={countries} bind:value={selected} />
-</Label>
-```
-
-## Disabled state
-
-Apply the disable state to the select component to disallow the selection of new options.
-
-```svelte example
-<script>
-  import { Select, Label } from 'flowbite-svelte';
-  let countries = [
-    { value: 'us', name: 'United States' },
-    { value: 'ca', name: 'Canada' },
-    { value: 'fr', name: 'France' }
-  ];
-</script>
-
-<Label for="select-disabled" class="mb-2">Disabled select</Label>
-<Select id="select-disabled" disabled items={countries} placeholder="You can't select anything..." />
-```
-
-## Underline select
-
-Use the underline style for the select component as an alternative appearance.
-
-```svelte example
-<script>
-  import { Select, Label } from 'flowbite-svelte';
-  let countries = [
-    { value: 'us', name: 'United States' },
-    { value: 'ca', name: 'Canada' },
-    { value: 'fr', name: 'France' }
-  ];
-</script>
-
-<Label for="select-underline" class="sr-only">Underline select</Label>
-<Select id="select-underline" underline class="mt-2" items={countries} />
-```
-
-## Select with dropdown
-
-Use this example if you want to create a multi-level dropdown and select component combination.
-
-```svelte example class="h-64"
-<script>
-  import { Select, Dropdown, DropdownItem } from 'flowbite-svelte';
-  import { ChevronDownSolid } from 'flowbite-svelte-icons';
-  import Usa from '../../utils/icons/Usa.svelte';
-  import Germany from '../../utils/icons/Germany.svelte';
-  import Italy from '../../utils/icons/Italy.svelte';
-  import China from '../../utils/icons/China.svelte';
-  let countries = [
-    { value: 'us', name: 'United States' },
-    { value: 'ca', name: 'Canada' },
-    { value: 'fr', name: 'France' }
-  ];
-  let states = [
-    { value: 'CA', name: 'California' },
-    { value: 'TX', name: 'Texas' },
-    { value: 'WH', name: 'Washinghton' },
-    { value: 'FL', name: 'Florida' },
-    { value: 'VG', name: 'Virginia' },
-    { value: 'GE', name: 'Georgia' },
-    { value: 'MI', name: 'Michigan' }
-  ];
-</script>
-
-<div class="flex">
-  <button id="states-button" class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
-    <Usa />
-    USA
-    <ChevronDownSolid class="w-3 h-3 ml-2" />
-  </button>
-  <Dropdown triggeredBy="#states-button">
-    <DropdownItem class="flex items-center">
-      <Usa />
-      United States
-    </DropdownItem>
-    <DropdownItem class="flex items-center">
-      <Germany />
-      Germany
-    </DropdownItem>
-    <DropdownItem class="flex items-center">
-      <Italy />
-      Italy
-    </DropdownItem>
-    <DropdownItem class="flex items-center">
-      <China />
-      China
-    </DropdownItem>
-  </Dropdown>
-  <Select items={states} placeholder="Choose the state" class="!rounded-l-none" />
-</div>
-```
-
-## Sizes
-
-Get started with the small, default, and large sizes for the select component from the example below.
-
-```svelte example
-<script>
-  import { Select, Label } from 'flowbite-svelte';
-  let countries = [
-    { value: 'us', name: 'United States' },
-    { value: 'ca', name: 'Canada' },
-    { value: 'fr', name: 'France' }
-  ];
-</script>
-
-<Label for="select-sm" class="mb-2">Small select</Label>
-<Select id="select-sm" size="sm" items={countries} class="mb-6" />
-<Label for="select-md" class="mb-2">Default select</Label>
-<Select id="select-md" size="md" items={countries} class="mb-6" />
-<Label for="select-lg" class="mb-2">Large select</Label>
-<Select id="select-lg" size="lg" items={countries} class="mb-6" />
-<p class="my-6" />
-<Label for="select-sm" class="sr-only">Underline small select</Label>
-<Select id="select-sm" underline size="sm" items={countries} class="mb-6" />
-<Label for="select-md" class="sr-only">Underline default select</Label>
-<Select id="select-md" underline size="md" items={countries} class="mb-6" />
-<Label for="select-lg" class="sr-only">Underline large select</Label>
-<Select id="select-lg" underline size="lg" items={countries} class="mb-6" />
-```
-
-## Custom options
-
-If you want custom options, put them directly inside the component and leave the `items` prop unset. Furthermore, if the default placeholder is not what you want, set the `placeholder` prop to `""`.
-
-```svelte example
-<script>
-  import { Select, Label } from 'flowbite-svelte';
-  let selected;
-  let countries = [
-    { value: 'us', name: 'United States' },
-    { value: 'ca', name: 'Canada' },
-    { value: 'fr', name: 'France' }
-  ];
-</script>
-
-<Label for="countries">Select an option</Label>
-<Select id="countries" class="mt-2" bind:value={selected} placeholder="">
-  <option selected value="all">All</option>
-
-  {#each countries as { value, name }}
-    <option {value}>{name}</option>
-  {/each}
-</Select>
-```
-
-## MultiSelect
-
-```svelte example hideOutput
-<script>
-  import { MultiSelect } from 'flowbite-svelte';
-</script>
-```
-
-### Basic example
-
-Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.
-
-```svelte example class="h-80"
-<script>
-  import { MultiSelect } from 'flowbite-svelte';
-
-  let selected = [];
-  let countries = [
-    { value: 'us', name: 'United States' },
-    { value: 'ca', name: 'Canada' },
-    { value: 'fr', name: 'France' },
-    { value: 'jp', name: 'Japan' },
-    { value: 'en', name: 'England' }
-  ];
-</script>
-
-<MultiSelect items={countries} bind:value={selected} size="lg" />
-```
-
-### Pre-select values
-
-```svelte example class="h-96"
-<script>
-  import { MultiSelect, Badge } from 'flowbite-svelte';
-
-  let countries = [
-    { value: 'us', name: 'United States', color: 'indigo' },
-    { value: 'ca', name: 'Canada', color: 'green' },
-    { value: 'fr', name: 'France', color: 'blue' },
-    { value: 'jp', name: 'Japan', color: 'red' },
-    { value: 'en', name: 'England', color: 'yellow' }
-  ];
-  let selected = ['us', 'fr'];
-</script>
-
-<MultiSelect items={countries} bind:value={selected} />
-```
-
-### Customization
-
-To customize the look and feel use the `slot` to insert inner [`Badge`](/docs/components/badge) component.
-
-Remember to connect the `clear` slot's prop to trigger option removal.
-
-```svelte example class="h-96"
-<script>
-  import { MultiSelect, Badge } from 'flowbite-svelte';
-
-  let selected = [];
-  let countries = [
-    { value: 'us', name: 'United States', color: 'indigo' },
-    { value: 'ca', name: 'Canada', color: 'green' },
-    { value: 'fr', name: 'France', color: 'blue' },
-    { value: 'jp', name: 'Japan', color: 'red' },
-    { value: 'en', name: 'England', color: 'yellow' }
-  ];
-</script>
-
-<MultiSelect items={countries} bind:value={selected} let:item let:clear>
-  <Badge color={item.color} dismissable params={{ duration: 100 }} on:close={clear}>
-    {item.name}
-  </Badge>
-</MultiSelect>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Select styling
-
-- Use the `class` prop to overwrite the select tag.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Select](https://flowbite.com/docs/forms/select/)

package/src/routes/docs/forms/textarea.md

@@ -1,142 +0,0 @@
----
-layout: componentLayout
-title: Svelte Textarea - Flowbite
-breadcrumb_title: Svelte Textarea
-component_title: Textarea
-dir: Forms
-description: Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-  import { Badge, A } from '$lib'
-
-  const components = 'Textarea'
-</script>
-
-The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Textarea } from 'flowbite-svelte';
-</script>
-```
-
-## Textarea example
-
-Get started with the default example of a textarea component below.
-
-```svelte example
-<script>
-  import { Textarea, Label } from 'flowbite-svelte';
-</script>
-
-<Label for="textarea-id" class="mb-2">Your message</Label>
-<Textarea id="textarea-id" placeholder="Your message" rows="4" name="message" />
-```
-
-## WYSIWYG Editor
-
-If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.
-
-```svelte example
-<script>
-  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte';
-  import { PaperClipOutline, MapPinAltSolid, ImageOutline, CodeOutline, FaceGrinOutline, PapperPlaneOutline } from 'flowbite-svelte-icons';
-</script>
-
-<form>
-  <label for="editor" class="sr-only">Publish post</label>
-  <Textarea id="editor" rows="8" class="mb-4" placeholder="Write a comment">
-    <Toolbar slot="header" embedded>
-      <ToolbarGroup>
-        <ToolbarButton name="Attach file"><PaperClipOutline class="w-5 h-5 rotate-45" /></ToolbarButton>
-        <ToolbarButton name="Embed map"><MapPinAltSolid class="w-5 h-5" /></ToolbarButton>
-        <ToolbarButton name="Upload image"><ImageOutline class="w-5 h-5" /></ToolbarButton>
-      </ToolbarGroup>
-      <ToolbarGroup>
-        <ToolbarButton name="Format code"><CodeOutline class="w-5 h-5" /></ToolbarButton>
-        <ToolbarButton name="Add emoji"><FaceGrinOutline class="w-5 h-5" /></ToolbarButton>
-      </ToolbarGroup>
-      <ToolbarButton name="send" slot="end"><PapperPlaneOutline class="w-5 h-5 rotate-45" /></ToolbarButton>
-    </Toolbar>
-  </Textarea>
-  <Button>Publish post</Button>
-</form>
-```
-
-## Comment box
-
-Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.
-
-```svelte example class="space-y-4"
-<script>
-  import { Textarea, Toolbar, ToolbarGroup, ToolbarButton, Button } from 'flowbite-svelte';
-  import { PaperClipOutline, MapPinAltSolid, ImageOutline } from 'flowbite-svelte-icons';
-</script>
-
-<form>
-  <Textarea class="mb-4" placeholder="Write a comment">
-    <div slot="footer" class="flex items-center justify-between">
-      <Button type="submit">Post comment</Button>
-      <Toolbar embedded>
-        <ToolbarButton name="Attach file"><PaperClipOutline class="w-6 h-6" /></ToolbarButton>
-        <ToolbarButton name="Set location"><MapPinAltSolid class="w-6 h-6" /></ToolbarButton>
-        <ToolbarButton name="Upload image"><ImageOutline class="w-6 h-6" /></ToolbarButton>
-      </Toolbar>
-    </div>
-  </Textarea>
-</form>
-<p class="ml-auto text-xs text-gray-500 dark:text-gray-400">
-  Remember, contributions to this topic should follow our <a href="/" class="text-primary-600 dark:text-primary-500 hover:underline"> Community Guidelines </a>
-  .
-</p>
-```
-
-## Chatroom input
-
-If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.
-
-```svelte example class="space-y-4"
-<script>
-  import { Textarea, Alert, ToolbarButton } from 'flowbite-svelte';
-  import { ImageOutline, FaceGrinOutline, PapperPlaneOutline } from 'flowbite-svelte-icons';
-</script>
-
-<form>
-  <label for="chat" class="sr-only">Your message</label>
-  <Alert color="dark" class="px-3 py-2">
-    <svelte:fragment slot="icon">
-      <ToolbarButton color="dark" class="text-gray-500 dark:text-gray-400">
-        <ImageOutline class="w-5 h-5" />
-        <span class="sr-only">Upload image</span>
-      </ToolbarButton>
-      <ToolbarButton color="dark" class="text-gray-500 dark:text-gray-400">
-        <FaceGrinOutline class="w-5 h-5" />
-        <span class="sr-only">Add emoji</span>
-      </ToolbarButton>
-      <Textarea id="chat" class="mx-4" rows="1" placeholder="Your message..." />
-      <ToolbarButton type="submit" color="blue" class="rounded-full text-primary-600 dark:text-primary-500">
-        <PapperPlaneOutline class="w-5 h-5 rotate-45" />
-        <span class="sr-only">Send message</span>
-      </ToolbarButton>
-    </svelte:fragment>
-  </Alert>
-</form>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Textarea styling
-
-Use the `class` prop to overwrite the `textarea` tag.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Textarea](https://flowbite.com/docs/forms/textarea/)

package/src/routes/docs/forms/toggle.md

@@ -1,86 +0,0 @@
----
-layout: componentLayout
-title: Svelte Toggle (Switch) - Flowbite
-breadcrumb_title: Svelte Toggle (Switch)
-component_title: Toggle
-dir: Forms
-description: Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
-thumbnailSize: w-72
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
-  import { onMount } from 'svelte';
-  import { Toggle, Badge, A } from '$lib'
-
-  const components = 'Toggle'
-</script>
-
-The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Toggle } from 'flowbite-svelte';
-</script>
-```
-
-## Toggle examples
-
-Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.
-
-```svelte example class="flex flex-col gap-2" hideScript
-<script>
-  import { Toggle } from 'flowbite-svelte';
-</script>
-
-<Toggle>Toggle me</Toggle>
-<Toggle checked={true}>Checked toggle</Toggle>
-<Toggle disabled>Disabled toggle</Toggle>
-<Toggle checked disabled>Disabled checked</Toggle>
-```
-
-## Colors
-
-```svelte example class="flex justify-between" hideScript
-<script>
-  import { Toggle } from 'flowbite-svelte';
-</script>
-
-<Toggle color="red" checked>Red</Toggle>
-<Toggle color="green" checked>Green</Toggle>
-<Toggle color="purple" checked>Purple</Toggle>
-<Toggle color="yellow" checked>Yellow</Toggle>
-<Toggle color="teal" checked>Teal</Toggle>
-<Toggle color="orange" checked>Orange</Toggle>
-```
-
-## Sizes
-
-```svelte example class="flex flex-col gap-2"
-<script>
-  import { Toggle } from 'flowbite-svelte';
-  const customSize = 'w-16 h-10 after:top-1 after:left-[4px]  after:h-8 after:w-8';
-</script>
-
-<Toggle size="small">Small toggle</Toggle>
-<Toggle size="default" checked>Default toggle</Toggle>
-<Toggle size="large" checked>Large toggle</Toggle>
-<Toggle size="custom" {customSize}>Custom toggle</Toggle>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Toggle styling
-
-- Use the `class` prop to overwrite the `Checkbox` component.
-- Use the 'classDiv`prop to overwrite the`divClass`.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Switch (Toggle)](https://flowbite.com/docs/forms/toggle/)

package/src/routes/docs/pages/[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/pages/[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} />