flowbite-svelte 0.44.11 → 0.44.13

package/src/routes/docs/typography/[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/typography/[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/typography/blockquote.md

@@ -1,214 +0,0 @@
----
-layout: componentLayout
-title: Svelte Blockquote - Flowbite
-breadcrumb_title: Svelte Blockquote
-component_title: Blockquote
-dir: Typography
-description: The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { P, A, Heading } from '$lib'; 
-
-  const components = 'Blockquote'
-</script>
-
-Get started with Blockquote component when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.
-
-## Default blockquote
-
-Use this example to quote an external source inside a blockquote element.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-</script>
-
-<Blockquote size="xl">"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."</Blockquote>
-```
-
-## Solid background
-
-This example can be used as an alternative style to the default one by applying a solid background color.
-
-```svelte example
-<script>
-  import { Blockquote, P } from 'flowbite-svelte';
-</script>
-
-<P color="text-gray-500 dark:text-gray-400">Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live.</P>
-<Blockquote border bg class="p-4 my-4">
-  <P size="xl" height="relaxed">"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>
-<P color="text-gray-500 dark:text-gray-400">First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of components based on Tailwind CSS that you can just copy-paste from the documentation.</P>
-```
-
-## Blockquote icon
-
-Use this example to show an icon above the blockquote text content.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-  import { QuoteSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Blockquote size="xl">
-  <QuoteSolid class="w-10 h-10 text-gray-400 dark:text-gray-600" />
-  "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."
-</Blockquote>
-```
-
-## Paragraph context
-
-Use this example to show a blockquote component between multiple paragraph elements.
-
-```svelte example
-<script>
-  import { Blockquote, P } from 'flowbite-svelte';
-</script>
-
-<P class="mb-3" color="text-gray-500 dark:text-gray-400">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>
-<div class="grid grid-cols-1 md:gap-6 md:grid-cols-2">
-  <P class="mb-3" color="text-gray-500 dark:text-gray-400">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>
-  <Blockquote class="mb-3" size="xl">" 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. "</Blockquote>
-</div>
-<P class="mb-3" color="text-gray-500 dark:text-gray-400">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>
-```
-
-## User testimonial
-
-This example can be used for user testimonials by mentioning the author and occupation of the author.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-  import { QuoteSolid } from 'flowbite-svelte-icons';
-</script>
-
-<figure class="mx-auto max-w-screen-md text-center">
-  <QuoteSolid class="mx-auto mb-3 w-12 h-12 text-gray-400 dark:text-gray-600" />
-  <Blockquote alignment="center" size="2xl">"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."</Blockquote>
-  <figcaption class="flex justify-center items-center mt-6 space-x-3">
-    <img class="w-6 h-6 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png" alt="Micheal Gough profile" />
-    <div class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700">
-      <cite class="pr-3 font-medium text-gray-900 dark:text-white">Micheal Gough</cite>
-      <cite class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400">CEO at Google</cite>
-    </div>
-  </figcaption>
-</figure>
-```
-
-## User Review
-
-Use this example to show a user review with rating stars and the name and occupation of the author.
-
-```svelte example
-<script>
-  import { Blockquote, Rating } from 'flowbite-svelte';
-</script>
-
-<figure class="max-w-screen-md">
-  <div class="flex items-center mb-4 text-yellow-300">
-    <Rating total={5} rating={4.66} ceil size="24" />
-  </div>
-  <Blockquote italic={false} size="2xl">"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."</Blockquote>
-  <figcaption class="flex items-center mt-6 space-x-3">
-    <img class="w-6 h-6 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="Bonnie Green profile" />
-    <div class="flex items-center divide-x-2 divide-gray-300 dark:divide-gray-700">
-      <cite class="pr-3 font-medium text-gray-900 dark:text-white">Bonnie Green</cite>
-      <cite class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400">CTO at Flowbite</cite>
-    </div>
-  </figcaption>
-</figure>
-```
-
-## Alignment
-
-Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.
-
-### Left
-
-The default alignment of the blockquote text content is the left side of the document.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-</script>
-
-<Blockquote size="xl">"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."</Blockquote>
-```
-
-### Center
-
-Use the `alignment="center"` prop to align the text content inside the blockquote to the center.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-</script>
-
-<Blockquote alignment="center" size="xl">"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."</Blockquote>
-```
-
-### Right
-
-Use the `alignment="right"` prop to align the blockquote text content to the right side of the page.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-</script>
-
-<Blockquote alignment="right" size="xl">"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."</Blockquote>
-```
-
-## Sizes
-
-### Small
-
-Use the `size="lg"` prop to apply the small size for the blockquote component. You can use any size from `xs` to `9xl`. See more details in the Prop section below.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-</script>
-
-<Blockquote size="lg">"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."</Blockquote>
-```
-
-### Medium
-
-Use the `size="xl"` to set the default size for the blockquote element.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-</script>
-
-<Blockquote size="xl">"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."</Blockquote>
-```
-
-### Large
-
-The `size="2xl"` prop can be used to set a large size for the blockquote component.
-
-```svelte example
-<script>
-  import { Blockquote } from 'flowbite-svelte';
-</script>
-
-<Blockquote size="2xl">"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."</Blockquote>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Blockquote styleing
-
-- Use the `class` prop to overwrite the `blockquote` tag class.
-
-<CompoAttributesViewer {components}/>

package/src/routes/docs/typography/heading.md

@@ -1,270 +0,0 @@
----
-layout: componentLayout
-title: Svelte Heading - Flowbite
-breadcrumb_title: Svelte Heading
-component_title: Heading
-dir: Typography
-description: The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts
-thumnailSize: w-72
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { A, Heading, Breadcrumb, BreadcrumbItem } from '$lib';
-
-  const components = 'Heading, P, A, Mark, Secondary'
-</script>
-
-Get started with the heading component to define titles and subtitles on a web page and also improve the on-page SEO metrics of your website by targeting high-traffic keywords on Google.
-
-At least one unique H1 tag should be available for each page on your website with the next tags starting from H2 to H6 for each section. Choose from a collection of custom heading components based on multiple styles and layouts built with the utility classes from Tailwind CSS.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { Heading, P, A, Mark, Secondary } from 'flowbite-svelte';
-</script>
-```
-
-## Default heading
-
-Use this example of a H1 heading in the context of a paragraph and CTA button for landing pages.
-
-```svelte example
-<script>
-  import { Heading, P, Button } from 'flowbite-svelte';
-  import { ArrowRightOutline } from 'flowbite-svelte-icons';
-</script>
-
-<div class="text-center">
-  <Heading tag="h1" class="mb-4" customSize="text-4xl font-extrabold  md:text-5xl lg:text-6xl">We invest in the world’s potential</Heading>
-  <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
-  <Button href="/">
-    Learn more
-    <ArrowRightOutline class="w-3.5 h-3.5 ml-2" />
-  </Button>
-</div>
-```
-
-## Second-level heading
-
-Use this example of a second-level H2 heading as the main subtitle for each section of your web page.
-
-```svelte example
-<script>
-  import { Heading, P, A } from 'flowbite-svelte';
-  import { ChevronRightSolid } from 'flowbite-svelte-icons';
-</script>
-
-<Heading tag="h2" customSize="text-4xl font-extrabold ">Payments tool for companies</Heading>
-<P class="my-4 text-gray-500">Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.</P>
-<P class="mb-4">Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease.</P>
-<A>
-  Read more
-  <ChevronRightSolid class="w-3.5 h-3.5 ml-2" />
-</A>
-```
-
-## Highlighted heading
-
-Use this example to highlight a certain portion of the heading text with a different color.
-
-```svelte example
-<script>
-  import { Heading, P, Span } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h1" class="mb-4">Get back to growth with <Span highlight>the world's #1</Span> CRM.</Heading>
-<P>Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
-```
-
-## Heading mark
-
-This example can be used to mark one part of the heading text with a solid background for highlighting.
-
-```svelte example
-<script>
-  import { Heading, P, Mark } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h1" class="mb-4">Regain <Mark>control</Mark> over your days</Heading>
-<P>Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
-```
-
-## Heading gradient
-
-Use this example to highlight a portion of the heading text by using a gradient style.
-
-```svelte example
-<script>
-  import { Heading, P, Span } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h1" class="mb-4" customSize="text-3xl font-extrabold  md:text-5xl lg:text-6xl">
-  <Span gradient>Better Data</Span> Scalable AI.
-</Heading>
-<P>Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
-```
-
-## Heading underline
-
-Get started with this example to underline an important part of the heading component using the `underline` prop in the `Span` component.
-
-```svelte example
-<script>
-  import { Heading, P, Span } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h1" class="mb-4">
-  We invest in the <Span underline decorationClass="decoration-8 decoration-blue-400 dark:decoration-blue-600">world’s potential</Span>
-</Heading>
-<P>Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
-```
-
-## Breadcrumb context
-
-Get started with this example to position a breadcrumb component above the heading component.
-
-```svelte example
-<script>
-  import { Heading, Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
-</script>
-
-<Breadcrumb class="mb-4">
-  <BreadcrumbItem href="/" home>Home</BreadcrumbItem>
-  <BreadcrumbItem href="/">Settings</BreadcrumbItem>
-  <BreadcrumbItem>Team</BreadcrumbItem>
-</Breadcrumb>
-<Heading tag="h2" class="mb-4">Team management</Heading>
-```
-
-## Badge context
-
-Use this example to show a badge component inside the heading text element as a secondary indicator.
-
-```svelte example
-<script>
-  import { Heading, Badge } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h1" class="flex items-center" size="text-5xl">
-  Flowbite <Badge class="text-2xl font-semibold ml-2">PRO</Badge>
-</Heading>
-```
-
-## Secondary text
-
-This example can be used to add a secondary text inside the main heading component.
-
-```svelte example
-<script>
-  import { Heading, Secondary } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h1" customSize="text-5xl font-extrabold">
-  Flowbite <Secondary class="ml-2">This is secondary text</Secondary>
-</Heading>
-```
-
-## Sizes
-
-The heading component has six levels of importance starting from H1 which has to be unique on the page and has the greatest weight of importance all the way to H6.
-
-### Heading one (H1)
-
-Use the `tag="h1"` as the most important text element to indicate the title of your web page.
-
-```svelte example
-<script>
-  import { Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h1">Heading 1</Heading>
-```
-
-### Heading two (H2)
-
-The `tag="h2"` can be used as subtitles of the page’s sections.
-
-```svelte example
-<script>
-  import { Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h2">Heading 2</Heading>
-```
-
-### Heading three (H3)
-
-The `tag="h3"` can be used as subtitles of the page’s sections.
-
-```svelte example
-<script>
-  import { Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h3">Heading 3</Heading>
-```
-
-### Heading four (H4)
-
-The `tag="h4"` can be used as subtitles of the page’s sections.
-
-```svelte example
-<script>
-  import { Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h4">Heading 4</Heading>
-```
-
-### Heading five (H5)
-
-The `tag="h5"` can be used as subtitles of the page’s sections.
-
-```svelte example
-<script>
-  import { Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h5">Heading 5</Heading>
-```
-
-### Heading six (H6)
-
-The `tag="h6"` can be used as subtitles of the page’s sections.
-
-```svelte example
-<script>
-  import { Heading } from 'flowbite-svelte';
-</script>
-
-<Heading tag="h6">Heading 6</Heading>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Heading styling
-
-- Use the `class` prop to overwrite the heading class.
-
-### P styling
-
-- Use the `class` prop to overwrite the `p` tag class.
-
-### A styling
-
-- Use the `class` prop to overwrite the `a` tag class.
-
-### Mark styling
-
-- Use the `class` prop to overwrite the `mark` tag class.
-
-### Secondary styling
-
-- Use the `class` prop to overwrite the `small` tag class.
-
-<CompoAttributesViewer {components}/>

package/src/routes/docs/typography/hr.md

@@ -1,115 +0,0 @@
----
-layout: componentLayout
-title: Svelte Horizontal Line (HR) - Flowbite
-breadcrumb_title: Svelte HR
-component_title: HR
-dir: Typography
-description: Create a horizontal line using the `Hr` component to separate content such as paragraphs, blockquotes, and other elements
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { A} from '$lib';
-
-  const components = 'Hr'
-</script>
-
-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.
-
-## Setup
-
-```html
-<script>
-  import { Hr } from 'flowbite-svelte';
-</script>
-```
-
-## 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 classHr="my-8" />
-<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>
-```
-
-## 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 classHr="w-48 h-1 mx-auto my-4 rounded md:my-10" />
-<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>
-```
-
-## 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';
-  import { QuoteSolid } from 'flowbite-svelte-icons';
-</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 classHr="my-8 w-64 h-1" icon>
-    <QuoteSolid class="w-4 h-4 text-gray-700 dark:text-gray-300" />
-  </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>
-```
-
-## 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 classHr="my-8 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>
-```
-
-## 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 classHr="my-8 mx-auto w-8 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>
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### Hr styling
-
-- Use the `classHr` prop to overwrite `hrClass`.
-- Use the `divClass` prop to overwrite `classDiv`.
-- Use the `classInnerDiv` prop to overwrite `innerDivClass`.
-
-<CompoAttributesViewer {components}/>