flowbite-svelte 0.44.7 → 0.44.9

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

@@ -0,0 +1,340 @@
+---
+layout: componentLayout
+title: Svelte Text - Flowbite
+breadcrumb_title: Svelte Text
+component_title: Text
+dir: Typography
+description: Learn how to customize text-related styles and properties such as font size, font style, text decoration, font weight and more
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { A, Heading } from '$lib'
+
+  const components = 'P, Span'
+
+  // lib files
+  // const libFilesArray = [
+  //   import.meta.glob("$lib/typography/P.svelte"),
+  //   import.meta.glob("$lib/typography/Span.svelte"),
+  // ];
+  // const libFiles = { ...libFilesArray[0], ...libFilesArray[1] };
+</script>
+
+Get started with a collection of text customization examples to learn how to update the size, font weight, style, decoration and spacing of inline text elements.
+
+## Font size
+
+Use this example to set the font size of inline text elements using the `size` prop.
+
+```svelte example class="flex flex-wrap items-center space-x-4"
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P size="xs">Aa</P>
+<P size="sm">Aa</P>
+<P size="base">Aa</P>
+<P size="lg">Aa</P>
+<P size="xl">Aa</P>
+<P size="2xl">Aa</P>
+<P size="3xl">Aa</P>
+<P size="4xl">Aa</P>
+<P size="5xl">Aa</P>
+<P size="6xl">Aa</P>
+<P size="7xl">Aa</P>
+<P size="8xl">Aa</P>
+<P size="9xl">Aa</P>
+```
+
+## Font weight
+
+This example can be used to the font weight of an inline text element using the `weight` prop.
+
+```svelte example class="flex flex-wrap items-center space-x-4" hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P size="4xl" weight="thin">Aa</P>
+<P size="4xl" weight="extralight">Aa</P>
+<P size="4xl" weight="light">Aa</P>
+<P size="4xl" weight="normal">Aa</P>
+<P size="4xl" weight="medium">Aa</P>
+<P size="4xl" weight="semibold">Aa</P>
+<P size="4xl" weight="bold">Aa</P>
+<P size="4xl" weight="extrabold">Aa</P>
+<P size="4xl" weight="black">Aa</P>
+```
+
+## Text color
+
+Use the `color` prop to set the color of the inline text.
+
+```svelte example class="flex flex-wrap items-center space-x-4" hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P color="text-blue-700 dark:text-blue-500">This text is in the blue color.</P>
+<P color="text-green-700 dark:text-green-500">This text is in the green color.</P>
+<P color="text-red-700 dark:text-red-500">This text is in the red color.</P>
+<P color="text-purple-700 dark:text-purple-500">This text is in the purple color.</P>
+<P color="text-teal-700 dark:text-teal-500">This text is in the teal color.</P>
+```
+
+## Letter spacing
+
+Increase or decrease the spacing between letters using the `space` prop.
+
+```svelte example class="flex flex-wrap items-center space-x-4" hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P space="tighter">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P space="tight">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P space="normal">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P space="wide">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P space="wider">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P space="widest">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+```
+
+## Text decoration
+
+### Underline
+
+Update the text decoration style using the `underline` and `decorationClass` props.
+
+```svelte example
+<script>
+  import { P, Span } from 'flowbite-svelte';
+</script>
+
+<P>
+  Track work across the enterprise through an open, collaborative platform. <Span underline>Link issues across Jira</Span> and ingest data from other <Span underline decorationClass="decoration-blue-500 decoration-double">software development</Span> tools, so your IT support and operations teams have richer contextual information to rapidly respond to <Span underline decorationClass="decoration-green-500 decoration-dotted">requests</Span>, <Span underline decorationClass="decoration-4 decoration-red-500 decoration-dashed">incidents</Span>, and <Span underline decorationClass="decoration-sky-500 decoration-wavy">changes</Span>.
+</P>
+```
+
+### Line through
+
+Set a strikethrough line on a text element using the `line-through` class.
+
+```svelte example
+<script>
+  import { Span } from 'flowbite-svelte';
+</script>
+
+<Span class="line-through">$109</Span><Span class="ml-3">$79</Span>
+```
+
+### Uppercase
+
+Force uppercase characters for a given portion of text using the uppercase class.
+
+```svelte example
+<script>
+  import { P, Span } from 'flowbite-svelte';
+</script>
+
+<P>The crypto <Span class="uppercase">identity</Span> primitive.</P>
+```
+
+## Font style
+
+Set italic or non italic styles with the props.
+
+### Italic
+
+Use the `italic` prop to set italic font style to a text element.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P italic>The crypto identity primitive.</P>
+```
+
+### Normal
+
+Text elements by default are non-italic.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P>The crypto identity primitive.</P>
+```
+
+## Line Height
+
+Set the height between lines using the `height` prop.
+
+### Leading normal
+
+Use the `height="normal"` (default) prop to set default line height.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P size="3xl" height="normal" class="max-w-lg" weight="semibold">The Al-powered app will help you improve yourself by analysing your everyday life.</P>
+```
+
+### Leading relaxed
+
+Use the `height="relaxed"` prop to increase the space between lines.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P size="3xl" height="relaxed" class="max-w-lg" weight="semibold">The Al-powered app will help you improve yourself by analysing your everyday life.</P>
+```
+
+### Leading loose
+
+Use the `height="loose"` prop to set a large amount of space between text lines.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P size="3xl" height="loose" class="max-w-lg" weight="semibold">The Al-powered app will help you improve yourself by analysing your everyday life.</P>
+```
+
+## Text Align
+
+### Left
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P align="left">Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</P>
+```
+
+### Center
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P align="center">Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</P>
+```
+
+### Right
+
+Use the `align="right"` prop to align the text element to the right side of the page.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P align="right">Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</P>
+```
+
+### Text justify
+
+Use the `justify` prop to justify the text content.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P justify>Get started with an enterprise-level, profesionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</P>
+```
+
+## Whitespace
+
+Configure the whitespace behaviour of inline text elements using the `whitespace` prop.
+
+### Normal
+
+Use the `whitespace="normal"` prop to set the default whitespace behaviour.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P whitespace="normal">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</P>
+```
+
+### Nowrap
+
+Use the `whitespace="nowrap"` prop to prevent text being added to a new line when the full width has been reached.
+
+```svelte example class="overflow-y-scroll" hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P whitespace="nowrap">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</P>
+```
+
+### Pre line
+
+Use the `whitespace="preline'` prop to add whitespace exactly how it has been set from the source code.
+
+<!-- prettier-ignore -->
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte'
+</script>
+
+<P whitespace="preline">
+  This is some text. This is some text. This is some text. 
+  This is some text. This is some text. This is some text. 
+  This is some text. This is some text. This is some text.
+</P>
+```
+
+## Text Decoration Style
+
+Update the text decoration style using the `underline` and `decorationClass` props.
+
+```svelte example hideScript
+<script>
+  import { P, Span } from 'flowbite-svelte';
+</script>
+
+<P>
+  Track work across the enterprise through an open, collaborative platform. <Span underline>Link issues across Jira</Span> and ingest data from other <Span underline decorationClass="decoration-blue-500 decoration-double">software development</Span> tools, so your IT support and operations teams have richer contextual information to rapidly respond to <Span underline decorationClass="decoration-green-500 decoration-dotted">requests</Span>, <Span underline decorationClass="decoration-4 decoration-red-500 decoration-dashed">incidents</Span>, and <Span underline decorationClass="decoration-sky-500 decoration-wavy">changes</Span>.
+</P>
+```
+
+## Opacity
+
+Use the `opacity` and `color` prop to set the opacity of inline text elements.
+
+```svelte example hideScript
+<script>
+  import { P } from 'flowbite-svelte';
+</script>
+
+<P size="xl" opacity={100} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P size="xl" opacity={75} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P size="xl" opacity={50} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+<P size="xl" opacity={25} color="text-blue-600 dark:text-blue-500">Flowbite app will help you improve yourself by analysing your everyday life.</P>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Span styling
+
+- Use the `class` prop to overwrite the default class.
+
+<CompoAttributesViewer {components}/>

package/src/routes/docs/utilities/[slug]/+page.js

@@ -0,0 +1,13 @@
+// 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/utilities/[slug]/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import type { PageData } from './$types';
+  export let data: PageData;
+</script>
+
+<svelte:component this={data.content} />

package/src/routes/docs/utilities/close-button.md

@@ -0,0 +1,42 @@
+---
+layout: componentLayout
+title: Svelte Close Button - Flowbite
+breadcrumb_title: Svelte Close Button - Flowbite
+component_title: Close button
+dir: Utilities
+description: Get started with the CloseButton components to hide a target element using Svelte interactivity
+---
+
+<script>
+	import { TableProp, TableDefaultRow, GitHubSourceList, CompoAttributesViewer } from '../../utils';
+	import { A } from '$lib';
+
+  const components = 'CloseButton'
+
+	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>
+
+## CloseButton
+
+Use `CloseButton` component to close a component.
+
+```svelte example
+<script>
+  import { CloseButton } from 'flowbite-svelte';
+  export let visible = true;
+</script>
+
+{#if visible}
+  <div id="banner" tabindex="-1" class="flex z-50 gap-8 justify-between items-start py-3 px-4 w-full bg-gray-50 border border-b border-gray-200 sm:items-center dark:border-gray-700 lg:py-4 dark:bg-gray-800">
+    <p class="text-sm font-light text-gray-500 dark:text-gray-400">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, ipsa culpa ea laudantium earum quis? Neque unde aliquam enim, distinctio repellendus delectus? Illo numquam ex fugit dolor esse, cumque nesciunt?</p>
+    <CloseButton on:click={() => (visible = false)} />
+  </div>
+{/if}
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+<CompoAttributesViewer {components}/>

package/src/routes/docs/utilities/label.md

@@ -0,0 +1,41 @@
+---
+layout: componentLayout
+title: Svelte Label - Flowbite
+breadcrumb_title: Svelte Label
+component_title: Label
+dir: Utilities
+description: The Label components are used throughout the library and you can use it for your app as well
+---
+
+<script>
+  import { TableProp, TableDefaultRow, GitHubSourceList, CompoAttributesViewer } from '../../utils';
+  import { A } from '$lib';
+
+  const components = 'Label'
+  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>
+
+## Label
+
+Use the `Label` component when you need to add a label.
+
+```svelte example
+<script>
+  import { Label, Checkbox } from 'flowbite-svelte';
+</script>
+
+<Label color="red" class="mt-4 flex items-center font-bold italic">
+  <Checkbox class="mr-2" /> Your Label
+</Label>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Label styling
+
+- Use the `class` prop to overwrite `defaultClass`.
+
+<CompoAttributesViewer {components}/>

package/src/routes/docs/utilities/toolbar.md

@@ -0,0 +1,157 @@
+---
+layout: componentLayout
+title: Svelte Toolbar - Flowbite
+breadcrumb_title: Svelte Toolbar
+component_title: Toolbar
+dir: Utilities
+description: Use the following Tailwind CSS powered toolbars to show groups of tool buttons
+---
+
+<script>
+	import { TableProp, TableDefaultRow, GitHubSourceList, CompoAttributesViewer } from '../../utils';
+  import { Toolbar, ToolbarButton, ToolbarGroup, Avatar, Button, Textarea, Heading, A } from '$lib'
+
+  const components = 'Toolbar, ToolbarButton, ToolbarGroup'
+</script>
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+</script>
+```
+
+## Default toolbar
+
+```svelte example
+<script>
+  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+  import { HomeOutline, EnvelopeOutline, ImageOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Toolbar>
+  <ToolbarButton><HomeOutline class="w-6 h-6" /></ToolbarButton>
+  <ToolbarButton><EnvelopeOutline class="w-6 h-6" /></ToolbarButton>
+  <ToolbarButton><ImageOutline class="w-6 h-6" /></ToolbarButton>
+</Toolbar>
+```
+
+## Colored toolbars
+
+```svelte example class="space-y-4"
+<script>
+  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+  import { HomeOutline, EnvelopeOutline, ImageOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Toolbar color="red">
+  <ToolbarButton color="red"><HomeOutline class="w-6 h-6" /></ToolbarButton>
+  <ToolbarButton color="red"><EnvelopeOutline class="w-6 h-6" /></ToolbarButton>
+  <ToolbarButton color="red"><ImageOutline class="w-6 h-6" /></ToolbarButton>
+</Toolbar>
+<Toolbar color="blue">
+  <ToolbarButton color="blue"><HomeOutline class="w-6 h-6" /></ToolbarButton>
+  <ToolbarButton color="blue"><EnvelopeOutline class="w-6 h-6" /></ToolbarButton>
+  <ToolbarButton color="blue"><ImageOutline class="w-6 h-6" /></ToolbarButton>
+</Toolbar>
+```
+
+## Toolbar with groups
+
+```svelte example
+<script>
+  import { Toolbar, ToolbarButton, ToolbarGroup } from 'flowbite-svelte';
+  import { HomeOutline, EnvelopeOutline, ImageOutline, CogOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Toolbar color="green">
+  <ToolbarGroup>
+    <ToolbarButton color="green"><HomeOutline class="w-6 h-6" /></ToolbarButton>
+    <ToolbarButton color="green"><EnvelopeOutline class="w-6 h-6" /></ToolbarButton>
+    <ToolbarButton color="green"><ImageOutline class="w-6 h-6" /></ToolbarButton>
+  </ToolbarGroup>
+  <ToolbarGroup>
+    <ToolbarButton color="green"><HomeOutline class="w-6 h-6" /></ToolbarButton>
+    <ToolbarButton color="green"><EnvelopeOutline class="w-6 h-6" /></ToolbarButton>
+    <ToolbarButton color="green"><ImageOutline class="w-6 h-6" /></ToolbarButton>
+  </ToolbarGroup>
+  <ToolbarButton slot="end" color="green"><CogOutline class="w-6 h-6" /></ToolbarButton>
+</Toolbar>
+```
+
+## 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 { Toolbar, ToolbarButton, ToolbarGroup, Textarea, 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-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>
+      </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-blue-600 dark:text-blue-500 hover:underline"> Community Guidelines </a>
+  .
+</p>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Toolbar styling
+
+- Use the `class` prop to overwrite the `div` tag class.
+
+### ToolbarButton styling
+
+- Use the `class` prop to overwrite the `button` tag class.
+
+### ToolbarGroup styling
+
+- Use the `class` prop to overwrite `divClass`.
+
+<CompoAttributesViewer {components}/>