flowbite-svelte 0.44.11 → 0.44.13

package/src/routes/docs/components/footer.md

@@ -1,268 +0,0 @@
----
-layout: componentLayout
-title: Svelte Footer - Flowbite
-breadcrumb_title: Svelte Footer
-component_title: Footer
-dir: Components
-description: Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { P, A } from '$lib'
-
-  const components = 'Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLink, FooterLinkGroup'
-</script>
-
-The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven’t found the information they’ve been looking for inside the main content area.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLink, FooterLinkGroup } from 'flowbite-svelte';
-</script>
-```
-
-## Default footer
-
-<p>Use this footer component to show a copyright notice and some helpful website links.</p>
-
-```svelte example
-<script>
-  import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from 'flowbite-svelte';
-</script>
-
-<Footer>
-  <FooterCopyright href="/" by="Flowbite™" year={2022} />
-  <FooterLinkGroup ulClass="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
-    <FooterLink href="/">About</FooterLink>
-    <FooterLink href="/">Privacy Policy</FooterLink>
-    <FooterLink href="/">Licensing</FooterLink>
-    <FooterLink href="/">Contact</FooterLink>
-  </FooterLinkGroup>
-</Footer>
-```
-
-## Footer with logo
-
-<p>Use this component to show your brand’s logo, a few website links and the copyright notice on a second row.</p>
-
-```svelte example
-<script>
-  import { Footer, FooterCopyright, FooterLinkGroup, FooterBrand, FooterLink } from 'flowbite-svelte';
-</script>
-
-<Footer footerType="logo">
-  <div class="sm:flex sm:items-center sm:justify-between">
-    <FooterBrand href="https://flowbite.com" src="/images/flowbite-svelte-icon-logo.svg" alt="Flowbite Logo" name="Flowbite" />
-    <FooterLinkGroup ulClass="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
-      <FooterLink href="/">About</FooterLink>
-      <FooterLink href="/">Privacy Policy</FooterLink>
-      <FooterLink href="/">Licensing</FooterLink>
-      <FooterLink href="/">Contact</FooterLink>
-    </FooterLinkGroup>
-  </div>
-  <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-  <FooterCopyright href="/" by="Flowbite™" />
-</Footer>
-```
-
-## Social media icons
-
-<p>This footer component can be used to show your brand’s logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.</p>
-
-```svelte example
-<script>
-  import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon } from 'flowbite-svelte';
-  import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
-  import Dribble from '../../utils/icons/Dribble.svelte';
-</script>
-
-<Footer footerType="socialmedia">
-  <div class="md:flex md:justify-between">
-    <div class="mb-6 md:mb-0">
-      <FooterBrand href="https://flowbite.com" src="/images/flowbite-svelte-icon-logo.svg" alt="Flowbite Logo" name="Flowbite" />
-    </div>
-    <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
-      <div>
-        <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h2>
-        <FooterLinkGroup>
-          <FooterLink liClass="mb-4" href="/">Flowbite</FooterLink>
-          <FooterLink liClass="mb-4" href="/">Tailwind CSS</FooterLink>
-        </FooterLinkGroup>
-      </div>
-      <div>
-        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2>
-        <FooterLinkGroup>
-          <FooterLink liClass="mb-4" href="/">GitHub</FooterLink>
-          <FooterLink liClass="mb-4" href="/">Discord</FooterLink>
-        </FooterLinkGroup>
-      </div>
-      <div>
-        <h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2>
-        <FooterLinkGroup>
-          <FooterLink liClass="mb-4" href="/">Privacy Policy</FooterLink>
-          <FooterLink liClass="mb-4" href="/">Terms & Conditions</FooterLink>
-        </FooterLinkGroup>
-      </div>
-    </div>
-  </div>
-  <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
-  <div class="sm:flex sm:items-center sm:justify-between">
-    <FooterCopyright href="/" by="Flowbite™" />
-    <div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
-      <FooterIcon href="/">
-        <FacebookSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <DiscordSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <TwitterSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <GithubSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <Dribble />
-      </FooterIcon>
-    </div>
-  </div>
-</Footer>
-```
-
-## Sitemap links
-
-<p>If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.</p>
-
-```svelte example
-<script>
-  import { Footer, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon, FooterCopyright } from 'flowbite-svelte';
-  import { FacebookSolid, GithubSolid, DiscordSolid, TwitterSolid } from 'flowbite-svelte-icons';
-  import Dribble from '../../utils/icons/Dribble.svelte';
-</script>
-
-<Footer footerType="sitemap">
-  <div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
-    <div>
-      <h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Company</h2>
-      <FooterLinkGroup ulClass="text-gray-300">
-        <FooterLink liClass="mb-4" href="/">About</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Careers</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Brand Center</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Blog</FooterLink>
-      </FooterLinkGroup>
-    </div>
-    <div>
-      <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
-      <FooterLinkGroup ulClass="text-gray-300">
-        <FooterLink liClass="mb-4" href="/">Discord Server</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Twitter</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Facebook</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Contact Us</FooterLink>
-      </FooterLinkGroup>
-    </div>
-    <div>
-      <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2>
-      <FooterLinkGroup ulClass="text-gray-300">
-        <FooterLink liClass="mb-4" href="/">Privacy Policy</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Licensing</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Terms & Conditions</FooterLink>
-      </FooterLinkGroup>
-    </div>
-    <div>
-      <h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
-      <FooterLinkGroup ulClass="text-gray-300">
-        <FooterLink liClass="mb-4" href="/">iOS</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Android</FooterLink>
-        <FooterLink liClass="mb-4" href="/">Windows</FooterLink>
-        <FooterLink liClass="mb-4" href="/">MacOS</FooterLink>
-      </FooterLinkGroup>
-    </div>
-  </div>
-  <div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
-    <FooterCopyright spanClass="text-sm text-gray-300 sm:text-center" href="/" by="Flowbite™" />
-    <div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
-      <FooterIcon href="/">
-        <FacebookSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <DiscordSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <TwitterSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <GithubSolid class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" />
-      </FooterIcon>
-      <FooterIcon href="/">
-        <Dribble />
-      </FooterIcon>
-    </div>
-  </div>
-</Footer>
-```
-
-## Sticky footer
-
-Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.
-
-```svelte example class="relative"
-<script>
-  import { Footer, FooterLinkGroup, FooterLink, ImagePlaceholder, TextPlaceholder, Skeleton, FooterCopyright } from 'flowbite-svelte';
-</script>
-
-<div style="height:300px;" class="overflow-scroll pb-16">
-  <Skeleton class="my-8" />
-  <ImagePlaceholder class="my-8" />
-  <TextPlaceholder class="my-8" />
-</div>
-<Footer class="absolute bottom-0 left-0 z-20 w-full">
-  <FooterCopyright href="/" by="Flowbite™" year={2022} />
-  <FooterLinkGroup ulClass="flex flex-wrap items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
-    <FooterLink href="/">About</FooterLink>
-    <FooterLink href="/">Privacy Policy</FooterLink>
-    <FooterLink href="/">Licensing</FooterLink>
-    <FooterLink href="/">Contact</FooterLink>
-  </FooterLinkGroup>
-</Footer>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Footer styling
-
-- Use the `class` prop to overwrite the default class.
-
-### FooterBrand styling
-
-- Use the `classA` prop to overwrite `aClass`.
-- Use the `classSpan` prop to overwrite `spanClass`.
-- Use the `classImg` prop to overwrite `imgClass`.
-
-### FooterCopyright styling
-
-- Use `classSpan` prop to overwrite `classSpan`.
-- Use `classA` prop to overwrite `aClass`.
-
-### FooterIcon styling
-
-- Use the `class` prop to overwrite `aClass`.
-
-### FooterLink styling
-
-- Use the `classLi` prop to overwrite `liClass`.
-- Use the `classA` prop to overwrite `aClass`.
-
-### FooterLinkGroup styling
-
-- Use the `class` prop to overwrite `ulClass`.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Footer](https://flowbite.com/docs/components/footer/)

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

@@ -1,254 +0,0 @@
----
-layout: componentLayout
-title: Svelte Forms - Flowbite
-breadcrumb_title: Svelte Forms
-component_title: Forms
-dir: Components
-description: Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users with Flowbite
-thumnailSize: w-40
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { P, A, Heading } from '$lib'
-  
-  const components = 'Input, Label, Helper, Fileupload, Textarea, Select, Checkbox, Radio, Toggle, MultiSelect'
-</script>
-
-The Input component allows you to change the input size, add disabled, helper text, and floating label.
-
-## Input Sizes
-
-User the size prop to change the input size. Choose one from 'sm:text-md' | 'text-sm' | 'sm:text-xs'. The default size is text-sm.
-
-```svelte example
-<script>
-  import { Label, Input } from 'flowbite-svelte';
-</script>
-
-<div class="mb-6">
-  <Label for="large-input" class="block mb-2">Large input</Label>
-  <Input id="large-input" size="lg" placeholder="Large input" />
-</div>
-<div class="mb-6">
-  <Label for="default-input" class="block mb-2">Default input</Label>
-  <Input id="default-input" placeholder="Default input" />
-</div>
-<div class="mb-6">
-  <Label for="small-input" class="block mb-2">Small input</Label>
-  <Input id="small-input" size="sm" placeholder="Small input" />
-</div>
-```
-
-## Disabled
-
-Get started with this example if you want to apply the disabled state to an input field. Add the disabled to change the input to disabled.
-
-```svelte example
-<script>
-  import { Label, Input } from 'flowbite-svelte';
-</script>
-
-<Input id="disabled-input" class="mb-6" disabled value="Disabled input" />
-<Input id="disabled-input-2" class="mb-6" disabled readonly value="Disabled readonly input" />
-```
-
-## Helper text
-
-Use the helper prop to add your helper text. You can use HTML in the helper text.
-
-```svelte example
-<script>
-  import { Label, Input, Helper } from 'flowbite-svelte';
-</script>
-
-<Label class="block mb-2">Your email</Label>
-<Input label="Email" id="email" name="email" required placeholder="name@flowbite.com" />
-<Helper class="text-sm mt-2">
-  We’ll never share your details. Read our <a href="/" class="font-medium text-primary-600 hover:underline dark:text-primary-500"> Privacy Policy </a>
-  .
-</Helper>
-```
-
-## Input element with icon
-
-With the Input component, you can add <a href="https://flowbite-svelte.vercel.app/icons/heroicons" class="text-primary-700 dark:text-primary-500 hover:underline">Heroicons</a> or <a href="https://svelte-svg-icons.vercel.app/" class="text-primary-700 dark:text-primary-500 hover:underline">other icon sets</a>.
-
-```svelte example
-<script>
-  import { Label, Input, InputAddon, ButtonGroup } from 'flowbite-svelte';
-  import { EnvelopeSolid } from 'flowbite-svelte-icons';
-</script>
-
-<div class="mb-6">
-  <Label for="input-group-1" class="block mb-2">Your Email</Label>
-  <Input id="email" type="email" placeholder="name@flowbite.com">
-    <EnvelopeSolid slot="left" class="w-5 h-5 text-gray-500 dark:text-gray-400" />
-  </Input>
-</div>
-```
-
-## Input element with addon
-
-```svelte example
-<script>
-  import { Label, Input, InputAddon, ButtonGroup } from 'flowbite-svelte';
-  import { UserCircleSolid } from 'flowbite-svelte-icons';
-</script>
-
-<div class="mb-6">
-  <Label for="website-admin" class="block mb-2">Username</Label>
-  <ButtonGroup class="w-full">
-    <InputAddon>
-      <UserCircleSolid class="w-4 h-4 text-gray-500 dark:text-gray-400" />
-    </InputAddon>
-    <Input id="website-admin" placeholder="elonmusk" />
-  </ButtonGroup>
-</div>
-```
-
-## Form validation
-
-Use the following example to apply validation styles for success and error messages.
-
-```svelte example
-<script>
-  import { Label, Input, Helper } from 'flowbite-svelte';
-</script>
-
-<div class="mb-6">
-  <Label for="success" color="green" class="block mb-2">Your name</Label>
-  <Input id="success" color="green" placeholder="Success input" />
-  <Helper class="mt-2" color="green">
-    <span class="font-medium">Well done!</span>
-    Some success message.
-  </Helper>
-</div>
-<div class="mb-6">
-  <Label for='error' color='red' class='block mb-2'>Your name</Label>
-  <Input id='error' color='red' placeholder="Error input" />
-  <Helper class='mt-2' color='red'><span class="font-medium">Not so well done!</span> Some error message.</Helper>
-</div>
-```
-
-## Textarea
-
-```svelte example
-<script>
-  import { Textarea } from 'flowbite-svelte';
-  let textareaprops = {
-    id: 'message',
-    name: 'message',
-    label: 'Your message',
-    rows: 4,
-    placeholder: 'Leave a comment...'
-  };
-</script>
-
-<Textarea {...textareaprops} />
-```
-
-## Select input
-
-Get started with the default example of a select input component to get a single option selection.
-
-```svelte example
-<script>
-  import { Label, Select } 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>
-```
-
-## MultiSelect
-
-```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} />
-```
-
-## Checkbox
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Checkbox } from 'flowbite-svelte';
-</script>
-
-<Checkbox>Default checkbox</Checkbox>
-<Checkbox checked>Checked state</Checkbox>
-```
-
-## Radio buttons
-
-```svelte example class="flex flex-col gap-4"
-<script>
-  import { Radio } from 'flowbite-svelte';
-</script>
-
-<Radio name="example">Default radio</Radio>
-<Radio name="example" checked={true}>Checked state</Radio>
-```
-
-## File upload
-
-```svelte example
-<script>
-  import { Label, Fileupload } from 'flowbite-svelte';
-
-  let fileuploadprops = {
-    id: 'user_avatar'
-  };
-
-  let fileuploadprops2 = {
-    id: 'user_avatar2'
-  };
-</script>
-
-<Label class="pb-2">Upload file</Label>
-<Fileupload {...fileuploadprops} />
-```
-
-## Toggle Switch
-
-```svelte example class="flex flex-col gap-2"
-<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>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Forms](https://flowbite.com/docs/components/forms/)