flowbite-svelte 0.44.7 → 0.44.9

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

@@ -0,0 +1,268 @@
+---
+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

@@ -0,0 +1,254 @@
+---
+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/)