flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/components/carousel.md

@@ -1,294 +0,0 @@
----
-layout: componentLayout
-title: Svelte Carousel - Flowbite
-breadcrumb_title: Carousel
-dir: Components
-description: Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
----
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
-  // Props table
-  import { props as items } from '../props/Carousel.json'
-  import { props as items2 } from '../props/CarouselTransition.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="carousels/Carousel.svelte">Carousel</GitHubSource>
-<GitHubSource href="carousels/CarouselTransition.svelte">CarouselTransition</GitHubSource>
-</ExampleDiv>
-
-The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators.
-
-<Htwo label="Setup" />
-
-```html
-<script>
-  import { Carousel, CarouselTransition } from 'flowbite-svelte'
-  // ./imageData/+server.js has the followint
-  export const images = [
-  {
-    id: 0,
-    name: "Cosmic timetraveler",
-    imgurl: "/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.webp",
-    attribution: "cosmic-timetraveler-pYyOZ8q7AII-unsplash.com",
-  },
-  {
-    id: 1,
-    name: "Cristina Gottardi",
-    imgurl: "/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.webp",
-    attribution: "cristina-gottardi-CSpjU6hYo_0-unsplash.com",
-  },
-  {
-    id: 2,
-    name: "Johannes Plenio",
-    imgurl: "/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.webp",
-    attribution: "johannes-plenio-RwHv7LgeC7s-unsplash.com",
-  },
-  {
-    id: 3,
-    name: "Jonatan Pie",
-    imgurl: "/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.webp",
-    attribution: "jonatan-pie-3l3RwQdHRHg-unsplash.com",
-  },
-  {
-    id: 4,
-    name: "Mark Harpur",
-    imgurl: "/images/carousel/mark-harpur-K2s_YE031CA-unsplash.webp",
-    attribution: "mark-harpur-K2s_YE031CA-unsplash",
-  },
-  {
-    id: 5,
-    name: "Pietro De Grandi",
-    imgurl: "/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.webp",
-    attribution: "pietro-de-grandi-T7K4aEPoGGk-unsplash",
-  },
-  {
-    id: 6,
-    name: "Sergey Pesterev",
-    imgurl: "/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.webp",
-    attribution: "sergey-pesterev-tMvuB9se2uQ-unsplash",
-  },
-  {
-    id: 7,
-    name: "Solo travel goals",
-    imgurl: "/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.webp",
-    attribution: "solotravelgoals-7kLufxYoqWk-unsplash",
-  },
-];
-</script>
-```
-
-<Htwo label="Default Carousel" />
-
-```svelte example
-<script>
-  import { Carousel } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-</script>
-
-<div class="max-w-4xl">
-  <Carousel {images} />
-</div>
-```
-
-<Htwo label="Loop" />
-
-<p>Use `loop` prop to loop the carousel. Use `duration=number` to set the interval</p>
-
-```svelte example
-<script>
-  import { Carousel } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-  let showThumbs=false
-  let showCaptions=false
-</script>
-
-<div class="max-w-4xl">
-  <Carousel {images} loop {showCaptions} {showThumbs} duration="3000"/>
-</div>
-```
-
-<Htwo label="Without thumbnails"/>
-
-<p>The `showThumbs` is set to `true`. Set it to `false` to hide it.</p>
-
-```svelte example
-<script>
-  import { Carousel } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-  let showThumbs=false
-</script>
-
-<div class="max-w-4xl">
-  <Carousel {images} {showThumbs}/>
-</div>
-```
-
-<Htwo label="Without caption" />
-
-<p>To hide the caption, set `showCaptions` to `false`.</p>
-
-```svelte example
-<script>
-  import { Carousel } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-  let showThumbs=false
-  let showCaptions=false
-</script>
-
-<div class="max-w-4xl">
-  <Carousel {images} {showThumbs} {showCaptions}/>
-</div>
-```
-
-<Htwo label="Without indicators" />
-
-<p>To hide the indicators, set `showIndicators` to `false`.</p>
-
-```svelte example
-<script>
-  import { Carousel } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-  let showThumbs=false
-  let showCaptions=false
-  let showIndicators=false
-</script>
-
-<div class="max-w-4xl">
-  <Carousel {images} {showThumbs} {showCaptions} {showIndicators}/>
-</div>
-```
-
-<Htwo label="Without slide controllers" />
-
-<p>To hide the slide controllers, set `slideControls` to `false`.</p>
-
-```svelte example
-<script>
-  import { Carousel } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-  let showThumbs=false
-  let showCaptions=false
-  let slideControls=false
-</script>
-
-<div class="max-w-4xl">
-  <Carousel {images} {showThumbs} {showCaptions} {slideControls}/>
-</div>
-```
-
-<Htwo label="Custom slide controllers" />
-
-<p>You can add custom slide controllers using <a href="/icons/heroicons">Svelte-Heros icons</a>. Change the size using the `iconSize` prop and style with the `iconClass` prop.</p>
-
-```html
-<script>
-  import {ChevronDoubleLeft, ChevronDoubleRight } from 'svelte-heros-v2'
-  let icons={
-    next: ChevronDoubleRight,
-    prev: ChevronDoubleLeft,
-  }
-  let iconSize =20
-  let iconClass = 'text-white dark:text-red-500';
-</script>
-
-<div class="max-w-4xl">
-  <Carousel {images} {showThumbs} {showCaptions} {icons} {iconSize} {iconClass}/>
-</div>
-```
-
-<Htwo label="Carousel transition" />
-
-```svelte example
-<script>
-  import { CarouselTransition } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-</script>
-
-<div class="max-w-4xl">
-  <CarouselTransition {images} transitionType="fade" transitionParams="{{delay: 300, duration: 500}}"/>
-</div>
-```
-
-<Htwo label="Loop" />
-
-<p>Use `loop` prop to loop the carousel. Use `duration=number` to set the interval</p>
-
-```svelte example
-<script>
-  import { CarouselTransition } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-</script>
-
-<div class="max-w-4xl">
-  <CarouselTransition {images} loop transitionType="fade" transitionParams="{{ duration: 1000 }}" showCaptions={false} showThumbs={false} duration="5000" />
-</div>
-```
-
-<Htwo label="Fly example" />
-
-```svelte example
-<script>
-  import { CarouselTransition } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-</script>
-<div class="max-w-4xl">
-  <CarouselTransition {images} transitionType="fly" transitionParams="{{delay: 250, duration: 300, x: 100}}" showCaptions={false} showThumbs={false} />
-</div>
-```
-
-<Htwo label="Slide example" />
-
-```svelte example
-<script>
-  import { CarouselTransition } from 'flowbite-svelte'
-  import { images } from './imageData/+server.js';
-  import { bounceInOut } from 'svelte/easing';
-</script>
-<div class="max-w-4xl">
-  <CarouselTransition {images} transitionType="slide" transitionParams="{{duration: 1500, easing: bounceInOut}}" showCaptions={false} showThumbs={false}/>
-</div>
-```
-
-<Htwo label="Props" />
-
-<p>The component has the following props, type, and default values. See <A href="/pages/types">types 
- page</A> for type information.</p>
-
-<h3 class='text-xl w-full dark:text-white py-4'>Carousel</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow {items} rowState='hover' />
-</TableProp>
-
-<h3 class='text-xl w-full dark:text-white py-4'>CarouselTransition</h3>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow items={items2} rowState='hover' />
-</TableProp>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/components/carousel/" target="_blank" rel="noreferrer" class="link"
-    >Flowbite carousel</A
-  >
-</P>

package/src/routes/components/darkmode.md

@@ -1,121 +0,0 @@
----
-layout: componentLayout
-title: Svelte Dark Mode - Flowbite
-breadcrumb_title: Dark mode
-dir: Components
-description: Learn how to configure and build a dark mode switcher for Tailwind CSS using Flowbite and start developing with the components from the library
----
-
-
-<MetaTag {breadcrumb_title} {title} {dir} {description}/>
-
-<script>
-  import {Htwo,TableProp, TableDefaultRow, CompoDescription , MetaTag } from '../utils'
-  
-  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
-  // Props table
-  import { props as items} from '../props/DarkMode.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>
-
-<p class=" dark:text-white py-8">The best place to import is in the __layout.svelte.</p>
-
-```html
-<script>
-import { DarkMode } from "flowbite-svelte";
-</script>
-
-<DarkMode />
-```
-
-<p>Add the following to the body tag:</p>
-
-```html
-<!-- src/app.html -->
-<body class="bg-white dark:bg-gray-800">
-	<div>%svelte.body%</div>
-</body>
-```
-
-<p>Add the following to `tailwind.config.cjs`:</p>
-
-```cjs
-const config = {
-	...
-  darkMode: 'class',
-};
-```
-
-<p>The component has the following props, type, and default values:</p>
-
-```js
-let btnClass: string = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-2 top-16 z-50"
-```
-
-<p>Set your CSS and add it to the prop:</p>
-
-```html
-<script>
-import { DarkMode } from "flowbite-svelte";
-
-let btnClass="Add your class here"
-</script>
-
-<DarkMode {btnClass} />
-```
-
-<Htwo label="How to change Dark mode color" />
-
-<p><a href="https://chir.ag/projects/name-that-color/" target="_blank" rel="noreferrer">Find the name of the color from hex color code.</a></p>
-
-<p>Update tailwind.config.cjs:</p>
-
-```js
-// ...
-  theme: {
-    colors: {
-      'bigstone': '#173242',
-    },
-		extend: {}
-	},
-// ...
-```
-
-<p>Update the body class</p>
-
-```html
-<!-- src/app.html -->
-<body class="bg-white dark:bg-bigstone">
-	<div>%svelte.body%</div>
-</body>
-```
-
-<Htwo label="Props" />
-
-<p>The component has the following props, type, and default values. See <A href="/pages/types">types 
- page</A> for type information.</p>
-
-<TableProp header={propHeader} {divClass} {theadClass}>
-  <TableDefaultRow {items} rowState='hover' />
-</TableProp>
-
-<Htwo label="References" />
-
-<P>
-  <A href="https://flowbite.com/docs/customize/dark-mode/" target="_blank" rel="noreferrer" class="link"
-    >Flowbite Dark mode</A
-  >
-</P>
-