flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/typography/hr.md

@@ -1,151 +0,0 @@
----
-layout: typographyLayout
-title: Svelte Horizontal Line (HR) - Flowbite
-breadcrumb_title: HR
-dir: Typography
-description: Create a horizontal line using the `Hr` component to separate content such as paragraphs, blockquotes, and other elements
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow , MetaTag } from '../utils'
-  
-  import { A, Heading, Breadcrumb, BreadcrumbItem } from '$lib';
-  import { props as items1 } from '../props/Hr.json'
-  let propHeader = ['Name', 'Type', 'Default']
-  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-</script>
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-  <GitHubSource href="typography/Hr.svelte">Hr</GitHubSource>
-</ExampleDiv>
-
-The `Hr` component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Hr } from 'flowbite-svelte'
-</script>
-```
-
-<Htwo label="Default HR" />
-
-```svelte example
-<script>
-  import { Hr, P } from 'flowbite-svelte'
-</script>
-
-<P>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<Hr class="my-8" height="h-px" />
-<P>Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-<Htwo label="Trimmed" />
-
-Use this example to show a shorter version of the horizontal line.
-
-```svelte example
-<script>
-  import { Hr, P } from 'flowbite-svelte'
-</script>
-
-<P>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<Hr class="my-4 mx-auto md:my-10" width="w-48" height="h-1"/>
-<P>Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
-```
-
-<Htwo label="Icon HR" />
-
-This example can be used to set a custom SVG icon in the middle of the HR element.
-
-```svelte example
-<script>
-  import { Hr, P } from 'flowbite-svelte'
-</script>
-
-<div class="text-center">
-  <P>
-  Track work across the enterprise through an open, collaborative platform. Link issues across
-    Jira and ingest data from other software development tools, so your IT support and operations
-    teams have richer contextual information to rapidly respond to requests, incidents, and
-    changes.
-  </P>
-  <Hr class="my-8" width="w-64" height="h-1" icon>
-    <svg
-      aria-hidden="true"
-      class="w-5 h-5 text-gray-700 dark:text-gray-300"
-      viewBox="0 0 24 27"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      ><path
-        d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
-        fill="currentColor" /></svg>
-  </Hr>
-  <P>
-  Deliver great service experiences fast - without the complexity of traditional ITSM
-    solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease,
-    with a complete audit trail for every change.
-    </P>
-</div>
-```
-
-<Htwo label="HR with text" />
-
-Use this example to add a text in the middle of the HR component.
-
-```svelte example
-<script>
-  import { Hr, P } from 'flowbite-svelte'
-</script>
-
-<div class="text-center">
-  <P>
-    Track work across the enterprise through an open, collaborative platform. Link issues across
-    Jira and ingest data from other software development tools, so your IT support and operations
-    teams have richer contextual information to rapidly respond to requests, incidents, and
-    changes.
-  </P>
-  <Hr class="my-8" width="w-64">or</Hr>
-  <P>
-    Deliver great service experiences fast - without the complexity of traditional ITSM
-    solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease,
-    with a complete audit trail for every change.
-  </P>
-</div>
-```
-
-<Htwo label="HR shape" />
-
-This example can be used to separate content with a HR tag as a shape instead of a line.
-
-```svelte example
-<script>
-  import { Hr, P, Blockquote } from 'flowbite-svelte'
-</script>
-
-<P>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
-<Hr class="my-8 mx-auto" width="w-8" height="h-8"/>
-<Blockquote alignment="center"><p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p></Blockquote>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items1} rowState='hover' />
-</TableProp>

package/src/routes/typography/image.md

@@ -1,259 +0,0 @@
----
-layout: typographyLayout
-title: Svelte Images - Flowbite
-breadcrumb_title: Images
-dir: Typography
-description: The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { A, Heading, Breadcrumb, BreadcrumbItem } from '$lib'
-  import { props as items1 } from '../props/Img.json'
-  let propHeader = ['Name', 'Type', 'Default']
-  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-</script>
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-<GitHubSource href="buttongroups/Img.svelte">Img</GitHubSource>
-</ExampleDiv>
-
-Get started with a collection of responsive image components coded with the utility classes from Tailwind CSS that you can use inside articles, cards, sections, and other components based on multiple styles, sizes, layouts, and hover animations.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default image" />
-
-Use this example to show the a responsive image that won’t grow beyond the maximum original width.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" alt="sample 1"/>
-```
-
-<Htwo label="Image caption" />
-
-This example can be used to add a caption for the image often used inside articles.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" alt="sample 1" caption="Image caption" />
-```
-
-<Htwo label="Rounded corners" />
-
-Apply rounded corners to the image by using the specific utility classes from Tailwind CSS.
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Border radius</Heading>
-
-Use this example to apply rounded corners to the image by using the rounded-size class where the size can be anything from small to extra large.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" alt="sample 1" size="max-w-lg" class="rounded-lg" />
-```
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Full circle</Heading>
-
-Use this example to mask the image inside a circle using the rounded-full utility class from Tailwind CSS.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-4@2x.jpg" alt="sample 1" size="w-96" imgClass="h-96" class="rounded-full" />
-```
-
-<Htwo label="Image shadow" />
-
-This example can be used to show a shadow effect for the image using the shadow-size utility class.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-2@2x.jpg" alt="sample 1" size="max-w-xl"  class="shadow-xl dark:shadow-gray-800" />
-```
-
-<Htwo label="Retina-ready" />
-
-Use the srcset attribute to set Retina-ready images with double resolution.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img srcset="/images/examples/image-1.jpg 1x, /images/examples/image-1@2x.jpg 2x" alt="sample 1" size="w-full max-w-xl" class="rounded-lg"/>
-```
-
-<Htwo label="Image card" />
-
-Use this example to make the image a card item with a link and a short text description.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/content-gallery-3.png" alt="sample 1" class="rounded-lg" figClass="relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0" captionClass="absolute bottom-6 px-4 text-lg text-white" caption="Do you want to get notified when a new component is added to Flowbite?" />
-```
-
-<Htwo label="Image effects" />
-
-Use image effects such as grayscale or blur to change the appearances of the image when being hovered.
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Grayscale</Heading>
-
-Use the filter option and apply a grayscale to the image element using the grayscale class.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/content-gallery-3.png" size="max-w-lg" alt="My gallery" class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0" />
-```
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Blur</Heading>
-
-Apply a blur by using the blur-size utility class from Tailwind CSS to an image component.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/content-gallery-3.png" size="max-w-lg" alt="My gallery" class="rounded-lg transition-all duration-300 blur-sm hover:blur-none" />
-```
-
-<Htwo label="Alignment" />
-
-Align the image component to the left, center or right side of the document page using margin styles.
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Left</Heading>
-
-By default, the image component will be aligned to the left side of the page.
-
-```svelte example hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" size="max-w-lg" alt="sample 1"/>
-```
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Center</Heading>
-
-Horizontally align the image to the center of the page using the `mx-auto` class.
-
-```svelte example hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" size="max-w-lg" alignment="mx-auto" alt="sample 1"/>
-```
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Right</Heading>
-
-Use the `ml-auto` class to align the image to the right side of the page.
-
-```svelte example hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" size="max-w-lg" alignment="ml-auto" alt="sample 1"/>
-```
-
-<Htwo label="Sizes" />
-
-Set the size of the image using the w-size and h-size or max-w-size utility classes from Tailwind CSS to set the width and height of the element.
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Small</Heading>
-
-Use the `max-w-xs` class to set a small size of the image.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" size="max-w-xs" alt="sample 1"/>
-```
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Medium</Heading>
-
-Use the `max-w-md` class to set a medium size of the image.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" size="max-w-md" alt="sample 1"/>
-```
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Large</Heading>
-
-Use the max-w-xl class to set a large size of the image.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" size="max-w-xl" alt="sample 1"/>
-```
-
-<Heading tag="h3" class='mb-4 mt-8' customSize="text-xl font-semibold">Full width</Heading>
-
-Use the max-w-full class to set the full width of the image as long as it doesn’t become larger than the original source.
-
-```svelte example class="flex justify-center" hideScript
-<script>
-  import { Img } from 'flowbite-svelte';
-</script>
-
-<Img src="/images/examples/image-1@2x.jpg" size="max-w-full" alt="sample 1"/>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items1} rowState='hover' />
-</TableProp>

package/src/routes/typography/link.md

@@ -1,159 +0,0 @@
----
-layout: typographyLayout
-title: Svelte Links - Flowbite
-breadcrumb_title: Links
-dir: Typography
-description: The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import {  A, Heading, Breadcrumb, BreadcrumbItem } from '$lib'
-  import { props as items1 } from '../props/A.json'
-  let propHeader = ['Name', 'Type', 'Default']
-  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
-  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
-</script>
-
-<Breadcrumb class="pt-16 py-8">
-  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
-  <BreadcrumbItem>{dir}</BreadcrumbItem>
-  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
-</Breadcrumb>
-
-<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
-
-<CompoDescription>{description}</CompoDescription>
-
-<ExampleDiv>
-<GitHubSource href="buttongroups/A.svelte">A</GitHubSource>
-</ExampleDiv>
-
-Get started with the link component to enable hyperlinks across pages and external websites applied to elements such as inline text, buttons, cards, inside paragraphs, and more.
-
-Hyperlinks are a great way to reduce bounce rate of the current page and encourage visitors to browse your website and become a returning user.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { A } from 'flowbite-svelte';
-</script>
-```
-
-<Htwo label="Default link" />
-
-Use this example to set default styles to an inline link element.
-
-```svelte example
-<script>
-  import { A } from 'flowbite-svelte';
-</script>
-
-<A class="font-medium hover:underline">Read more</A>
-```
-
-<Htwo label="Button" />
-
-This example can be used to set a hyperlink on a button component.
-
-```svelte example
-<script>
-  import { Button } from 'flowbite-svelte';
-</script>
-
-<Button href="/">Read more</Button>
-```
-
-<Htwo label="Pagagraph" />
-
-Use this example to set a link inside a paragraph with an underline style.
-
-```svelte example
-<script>
-  import { A, P } from 'flowbite-svelte';
-</script>
-
-<P>The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.</P>
-```
-
-<Htwo label="Icon link" />
-
-This example can be used to set a custom SVG icon inside the hyperlink element.
-
-```svelte example
-<script>
-  import { A, P } from 'flowbite-svelte';
-</script>
-
-<P>500,000 people have made over a million apps with Glide. 
-  <A href="/" textColor="text-blue-600 dark:text-blue-500" aClass="inline-flex items-center font-medium  hover:underline">
-    Read their stories
-    <svg aria-hidden="true" class="ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </A>
-</P>
-```
-
-<Htwo label="CTA link" />
-
-Use this example to set a hyperlink on a CTA element with text and a custom icon.
-
-```svelte example
-<script>
-  import { A } from 'flowbite-svelte';
-</script>
-
-<A textColor="text-gray-500 dark:text-gray-400 dark:hover:text-white" aClass="inline-flex justify-center items-center p-5 text-base font-medium bg-gray-50 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700">
-  <svg aria-hidden="true" class="mr-3 w-5 h-5" viewBox="0 0 22 31" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4151_63004)"><path d="M5.50085 30.1242C8.53625 30.1242 10.9998 27.8749 10.9998 25.1035V20.0828H5.50085C2.46546 20.0828 0.00195312 22.332 0.00195312 25.1035C0.00195312 27.8749 2.46546 30.1242 5.50085 30.1242Z" fill="#0ACF83"/><path d="M0.00195312 15.062C0.00195312 12.2905 2.46546 10.0413 5.50085 10.0413H10.9998V20.0827H5.50085C2.46546 20.0827 0.00195312 17.8334 0.00195312 15.062Z" fill="#A259FF"/><path d="M0.00195312 5.02048C0.00195312 2.24904 2.46546 -0.000244141 5.50085 -0.000244141H10.9998V10.0412H5.50085C2.46546 10.0412 0.00195312 7.79193 0.00195312 5.02048Z" fill="#F24E1E"/><path d="M11 -0.000244141H16.4989C19.5343 -0.000244141 21.9978 2.24904 21.9978 5.02048C21.9978 7.79193 19.5343 10.0412 16.4989 10.0412H11V-0.000244141Z" fill="#FF7262"/><path d="M21.9978 15.062C21.9978 17.8334 19.5343 20.0827 16.4989 20.0827C13.4635 20.0827 11 17.8334 11 15.062C11 12.2905 13.4635 10.0413 16.4989 10.0413C19.5343 10.0413 21.9978 12.2905 21.9978 15.062Z" fill="#1ABCFE"/></g><defs><clipPath id="clip0_4151_63004"><rect width="22" height="30.1244" fill="white" transform="translate(0 -0.000244141)"/></clipPath></defs></svg>
-  <span class="w-full">Get started with our  Figma Design System</span>
-  <svg aria-hidden="true" class="ml-3 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-</A>
-```
-
-<Htwo label="Card link" />
-
-Use this example to set a hyperlink on a card component.
-
-```svelte example
-<script>
-  import { Card } from 'flowbite-svelte';
-</script>
-
-<Card href="/cards">
-  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-  <p class="font-normal text-gray-700 dark:text-gray-400 leading-tight">
-    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-  </p>
-</Card>
-```
-
-<Htwo label="Image link" />
-
-This example can be used to set a hyperlink on an image inside a card component.
-
-```svelte example
-<script>
-  import { Card, Button } from 'flowbite-svelte';
-</script>
-
-<Card img="/images/image-1.webp" href="/cards">
-  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
-  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight">
-    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-  </p>
-  <Button>
-    Read more <svg aria-hidden="true" class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-  </Button>
-</Card>
-```
-
-<Htwo label="Props" />
-
-The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items1} rowState='hover' />
-</TableProp>